@getflip/swirl-components 0.295.0 → 0.296.0

package/dist/components/swirl-table-row-group.js

@@ -47,10 +47,10 @@ const SwirlTableRowGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRo
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (h(Host, { key: '221d8562996ee88f51409f78ea31d813c0a0dce3', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'dfaf2a806e4ca98b7ccdc62155f3b34b6eeb34e6', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'ffef88e9f21b74f3d80af7dde7801686109a9e86', 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: 'eb3afe95655387d6d967ed3de3168e09641d46f4', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '78ed0fb4fe5ce390c2ce56c05a4120f4e066e431', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '1932c225fb408a4f2713edd7c852641ef1312f27', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '52ccc8d450c016bbbe48b5114f46ec6ca7a637ac', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '17fd9cfaf79570915fcf24336d11242e3db40c75', class: {
+        return (h(Host, { key: '7901d6394a256618dc48b1911c68680641c9ce62', class: "table-row-group", role: "rowgroup" }, h("div", { key: '8d9043058c0a17975e64ff5095365996bdd5285c', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '6409629165534461258892a09a804a8f7c23663d', 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: 'a0a0b6f4e63fb4973ff5aac3fda88e04e6b904cb', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '7f210b4b75c1b9d373598304c9b5154ea9ec6db8', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '16510652305da1f78cb4a95b805a5ede72d9eba9', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '2bb2e34d6ec1d50e2edf54281d4a0afd3d86e916', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'a214b2c31d25febf718aac366b52ce9f107b1a65', 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: '028bc4f32d9596e875ac7135c0593fffabc3fa2e' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'a46bbd3ea2f60d9bcab132ddcfc8e1392eb5a404' }))));
     }
     get el() { return this; }
     static get style() { return SwirlTableRowGroupStyle0; }

package/dist/components/swirl-table-row.js

@@ -21,7 +21,7 @@ const SwirlTableRow$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRow ext
         const className = classNames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (h(Host, { key: '20dd1ed59bf2c8e1e48dd3668fd2b5c614e0a8aa', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'd9a7d493bd51a184d126e5803a65b4b8674df36c' })));
+        return (h(Host, { key: 'c817b37c2a00350ea4ddca5ccfc86cb00958c852', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'f31d17f130798fde9677685b404ea301b1fe2a18' })));
     }
     get el() { return this; }
     static get style() { return SwirlTableRowStyle0; }

package/dist/components/swirl-table.js

@@ -326,7 +326,7 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
         this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
     }
     render() {
-        return (h(Host, { key: '71e1177fabdd501ccfabdd71ee54255d11755811' }, h("div", { key: '758418e2a20cfbf6af5231db4b5a853616c05456', class: "table" }, h("div", { key: 'cd5d7445e32233ce0b41ebf54a1d4ddef6d4684c', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { key: '949645057ef251479a0ebfebdfe3f906ef5ec12f', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '66830588591490976ab43c88e6c11f62fcb7ed09' }, h("div", { key: '077b1aa67a5c8eb8525a9629dd72f29a8a488078', id: "caption" }, this.caption))), h("div", { key: '31c797a6456f073127820393574870a1f97a2c4e', role: "rowgroup" }, h("div", { key: 'fc47c41652edfea565d352fd2a6cc1858408d51a', class: "table__header", role: "row" }, h("slot", { key: '5c8046b08299224d60a617a7408e0da1f14274b3', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '4af78528117bfb2f2ba0a6bd9b7d278fc3d3555a', class: "table__body" }, h("slot", { key: 'c502d41c4ed0caf8bba2d94ae2406113e2bcddcb', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: '3da63d19e9aabcf78b2fa53573dcfbca718e3a84', class: "table__empty-row", role: "row" }, h("div", { key: '798b1e47c162e3ebe8596f20b198e38e8f3536ee', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: '4f6f950cc55c5771e6432061691bef7b14ffec5e', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        return (h(Host, { key: 'ac0fc42900c1f03af56d4b3f51f5fa7c70d4ba72' }, h("div", { key: '98b05663bad511bac4cfcb977467de684e459492', class: "table" }, h("div", { key: 'db76800f2f7c480ffe4b0c88da1007d92587999e', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { key: '98cc460a99b4b47d2a16fc93a3864c5613e5c57f', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '4c3f6a7007c8b408b508c5d6deeba625785a6348' }, h("div", { key: '82cacba1c07834002a8c73db2caf6c17899e16c0', id: "caption" }, this.caption))), h("div", { key: '690ca5e86d175b6d7d6d3ff14b1449336bd3baf4', role: "rowgroup" }, h("div", { key: 'ec0c9d643a8151ef1b151ea1d4db3b2025a6d913', class: "table__header", role: "row" }, h("slot", { key: '249b8f388b9bcbfece5af856f13606d68abf6b8d', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: 'aef3e65ad3bef5e68cc371817b45d44302825f7b', class: "table__body" }, h("slot", { key: 'b7fd68bcb7e8497da85b2589b60302a730df4702', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: 'd2d2001f8f1fb77f342353de1a5a29650c1df0a7', class: "table__empty-row", role: "row" }, h("div", { key: '5bf80a7ac46bd87e644b2ea38c8908aeb60724fa', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: '859308abc57281351264ed367511229a5716e3c4', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     get el() { return this; }
     static get style() { return SwirlTableStyle0; }

package/dist/components/swirl-tabs.js

@@ -86,7 +86,7 @@ const SwirlTabs$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTabs extends HTM
         }));
     }
     render() {
-        return (h(Host, { key: 'caa6b8a57618fbf882c79f3afb474a10741eafb6' }, h("div", { key: 'b931bd005b54f636c8f734c7e361323db9e944e7', class: "tabs" }, h("swirl-tab-bar", { key: '4e51e62e9c098740d37fbb198be1f1d482d5b7dd', 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: 'd08af7b9d272219fa1ccde23b950399d2230bb82' })));
+        return (h(Host, { key: '688e243951ab23e9678737c58220c25f2879796b' }, h("div", { key: '5cfc4d6bc4d868eeeb6abed3642df59a3b9c96ae', class: "tabs" }, h("swirl-tab-bar", { key: '360c4dc256606e21291b3ce4938fc84e10ff886d', 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: 'f8672891a20bc1b627fa6f966472932d4d7a4698' })));
     }
     get el() { return this; }
     static get style() { return SwirlTabsStyle0; }

package/dist/components/swirl-theme-provider.js

@@ -153,7 +153,7 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: 'f36632294f339e158cb48ce8199b9a5a2881a794' }, h("slot", { key: 'b4d597bccbaff1cec274da1887db4fe7c87a0b25' })));
+        return (h(Host, { key: '0c89323210a5baff48c0cf250bb50f597fbccfbe' }, h("slot", { key: 'aa20eab928c58e4ca4b5593346d2ae14b9ef0e4c' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

package/dist/components/swirl-time-input.js

@@ -125,7 +125,7 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
         const className = classNames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: 'c0e95e6ad0b228bd294b4233b1695f843d218c88' }, h("div", { key: 'a4b44d6c06394587f03af8c8ddf0368da11d576c', class: className }, h("input", { key: '650dbf5d014edb1ec2a6698ea55351035115c056', "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: '9461096964410fe9a479f55e6e8ec15cef0d4ff5', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '5739f6448b68b625b5669605613ec934fd7673ba', size: this.iconSize })))));
+        return (h(Host, { key: '1c6b8b08c8c890245ce412f370bb2b78c53a6684' }, h("div", { key: '208d65696db4b5b1cb2a30d3a88e998aa3237c02', class: className }, h("input", { key: 'e384ed51b2a4ae3899d3e4485a876745e05a838e', "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: '8a07959b7a6937a4785dbd5c369c714df1cb990a', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '9100b6c78073deb95eda58bab1ca3ebd7fb18fc3', size: this.iconSize })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -20,7 +20,7 @@ const SwirlToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleBu
         const classNames$1 = classNames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: '88f35d41af040cf3250d327b428033274ec21e43', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: '1885ff37a1e42ca8d130fbf71da89c1b60cbf91b', class: "button__label" }, this.label)));
+        return (h("button", { key: '6428213e5bb688dcd518892f5f619ce8b4b0f7b1', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'f213af72aca0a1b2cb934f61c9be176887f1d48d', class: "button__label" }, this.label)));
     }
     static get style() { return SwirlToggleButtonStyle0; }
 }, [1, "swirl-toggle-button", {

package/dist/components/swirl-toggle-group.js

@@ -60,7 +60,7 @@ const SwirlToggleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleGro
         });
     }
     render() {
-        return (h("swirl-stack", { key: '1a212de148b3d3311fba2192b88dc93a8c3256e7', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '98539b0fe4f57d9ed3d87375bae88e8ce8b6057f', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: 'bcc626996c6c4955fb5a3649b986d7c62a643cf5', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'fc82133e88334d3248f4ee31cb235e71c5446721', onSlotchange: this.onSlotChange })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-tree-navigation-item.js

@@ -100,12 +100,12 @@ const SwirlTreeNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTr
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: 'f8f6e2d2fe47c9825b6ee3c940a50b3228906ab5', role: "none" }, h("li", { key: '966a95ffa405488d71c9b7b50f5596c711ea8e99', class: {
+        return (h(Host, { key: '5f0a416341a790d9fca20539f5d461208e705f5b', role: "none" }, h("li", { key: '0d6030b2053a97e29d7b2aecdb6565954c5ac1e6', 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: '15541688e590c74541e748c3befcdd552b127c5f', 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: '4b55edffa2a8539e31a14668f004cf3b02bb224e', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'afba09c1415074cb3d6ab7604d99d7bfed23a7e3', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '78bedc6d1089f070019f40bd88b1199c6a52aac6', class: "tree-navigation-item__label" }, h("span", { key: '18c249443c3d11ae0265001583cf937d139a3aa6', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '6e03749bf130b8f52ba2f30cb5db6edd8dcc497c', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '2eb5a67409aba702447d787d208328a942e0afa6', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'd7731053f4ff3512e1e29d4c0225a38e8760c970', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'cb3f9bd4fce1144cd7adc7df9b0750a71b3756d6', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '532b5e836b3c663f53a984ea24efb3147e0966e8', 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: '55b3fb27f9ea4ce1c616d9c89c3916fefbb9cf60', 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: '0a5abb5af6684ae7dd2925b46bce486fbd282d5d', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '06462246f92fbb5aaba518f29ec55124a11f8e5b', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'aa76ebdf77411ecdf68fffd89c1fbeff2b1b9c90', class: "tree-navigation-item__label" }, h("span", { key: 'bf75096a94dafcaa46fbe5687e1d9fe782b0d433', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'fcdc469239e493c2442f80d721fe3b928e89789f', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'f8e831812d44292e51477360c668546614d3182e', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'd5f8d165ea028c4ea0d174af39fd9d74a156823c', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'ef766b1eb82aced5a99d684de308d2a18eeebb66', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'a85dda318d7e3fb0942b08dabe2d4a62c2c87f5f', 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: 'c2cefb5da24e69e6115af6404ad1c05b21aaacd9' }))))));
+            } }, h("slot", { key: '070dab2c0784d7c67e4fcfeb1b13193064b5c92a' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-tree-navigation.js

@@ -11,7 +11,7 @@ const SwirlTreeNavigation$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeNa
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '44937af0d442ccff29e9b78b273dcd196121e76e' }, h("ul", { key: '88ba3c0dcc0fd51f858aa3bb5dbad5861de9faab', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '91efe0ff1cbe0e5715136c7f5f2af65ffcb879ad' }))));
+        return (h(Host, { key: 'ffd4c41211a96139f8efe5c3f4d5bff1d742009c' }, h("ul", { key: 'bd63e4512ada05959d4fcd07eccc2353b2d00406', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '7516fe5e5737ffe4c20dd84f7ebaed74dfca1b7c' }))));
     }
     static get style() { return SwirlTreeNavigationStyle0; }
 }, [1, "swirl-tree-navigation", {

package/dist/components/swirl-tree-view-item.js

@@ -1,23 +1,50 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, Fragment } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
-import { d as defineCustomElement$4 } from './swirl-icon2.js';
-import { d as defineCustomElement$3 } from './swirl-icon-chevron-right2.js';
+import { S as Sortable } from './sortable.esm.js';
+import { t as treeViewDragDropConfig } from './swirl-tree-view.config.js';
+import { d as defineCustomElement$5 } from './swirl-icon2.js';
+import { d as defineCustomElement$4 } from './swirl-icon-chevron-right2.js';
+import { d as defineCustomElement$3 } from './swirl-icon-drag-handle2.js';
 import { d as defineCustomElement$2 } from './swirl-icon-expand-more2.js';
 
-const swirlTreeViewItemCss = ".sc-swirl-tree-view-item-h{display:block;flex-grow:1}.sc-swirl-tree-view-item-h *.sc-swirl-tree-view-item{box-sizing:border-box}.tree-view-item.sc-swirl-tree-view-item{list-style:none}.tree-view-item--active.sc-swirl-tree-view-item>.tree-view-item__link.sc-swirl-tree-view-item{background-color:var(--s-background-hovered)}.tree-view-item--has-tags.sc-swirl-tree-view-item .tree-view-item__tags.sc-swirl-tree-view-item{display:flex}.tree-view-item__children.sc-swirl-tree-view-item{display:flex;margin:0;padding:0;flex-direction:column;gap:var(--s-space-2)}.tree-view-item__link.sc-swirl-tree-view-item{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8) var(--s-space-4) var(--s-space-4);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-background-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link.sc-swirl-tree-view-item:hover{background-color:var(--s-background-hovered)}.tree-view-item__link.sc-swirl-tree-view-item:active{background-color:var(--s-background-pressed)}.tree-view-item__link.sc-swirl-tree-view-item:focus:not(:focus-visible){outline:none}.tree-view-item__link.sc-swirl-tree-view-item:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link.sc-swirl-tree-view-item{font-size:var(--s-font-size-sm)}}.tree-view-item__icon.sc-swirl-tree-view-item{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon.sc-swirl-tree-view-item .sc-swirl-tree-view-item::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon.sc-swirl-tree-view-item{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon.sc-swirl-tree-view-item{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon.sc-swirl-tree-view-item .sc-swirl-tree-view-item::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon.sc-swirl-tree-view-item{width:1.25rem;height:1.25rem}}.tree-view-item__label.sc-swirl-tree-view-item{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags.sc-swirl-tree-view-item{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}";
+const swirlTreeViewItemCss = ":host{display:block;flex-grow:1}:host *{box-sizing:border-box}.tree-view-item{list-style:none}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-background-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-background-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-background-hovered)}.tree-view-item__link:hover .tree-view-item__drag-handle{opacity:1}.tree-view-item__link:active{background-color:var(--s-background-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__drag-handle{display:inline-flex;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}";
 const SwirlTreeViewItemStyle0 = swirlTreeViewItemCss;
 
 const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeViewItem extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.dropTreeViewItem = createEvent(this, "dropTreeViewItem", 7);
         this.expandedChange = createEvent(this, "expandedChange", 7);
         this.itemSelected = createEvent(this, "itemSelected", 7);
+        this.startKeyboardMoveEvent = createEvent(this, "startKeyboardMove", 7);
+        this.endKeyboardMoveEvent = createEvent(this, "endKeyboardMove", 7);
+        this.keyboardMoveEvent = createEvent(this, "keyboardMove", 7);
         this.onFocus = () => {
             if (!this.selected) {
                 this.select();
             }
         };
+        this.onKeyDown = (event) => {
+            if (event.code === "Space") {
+                event.preventDefault();
+                this.toggleKeyboardMove();
+                return;
+            }
+            if (!this.movingViaKeyboard) {
+                return;
+            }
+            if (event.code === "ArrowDown") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveItem("down");
+            }
+            else if (event.code === "ArrowUp") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveItem("up");
+            }
+        };
         this.onClickCollapse = (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -29,18 +56,31 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
             this.expand();
         };
         this.active = undefined;
+        this.disableDrag = undefined;
         this.expandable = true;
         this.href = undefined;
         this.icon = undefined;
         this.iconColor = undefined;
         this.itemId = undefined;
         this.label = undefined;
+        this.canDrop = undefined;
+        this.cannotKeyboardDropInCurrentPosition = false;
+        this.dragDropItemSelector = "swirl-tree-view-item";
+        this.enableDragDrop = false;
         this.expanded = false;
         this.level = 0;
+        this.movingViaKeyboard = false;
         this.selected = false;
     }
     componentWillLoad() {
         this.updateLevel();
+        const treeView = this.el.closest("swirl-tree-view");
+        this.enableDragDrop = treeView?.enableDragDrop;
+        this.canDrop = treeView?.canDrop;
+        this.dragDropItemSelector = treeView?.dragDropItemSelector;
+    }
+    componentDidLoad() {
+        this.setUpDragDrop();
     }
     async expand() {
         if (this.expanded || !this.expandable) {
@@ -66,6 +106,49 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
     async unselect() {
         this.selected = false;
     }
+    setUpDragDrop() {
+        if (this.sortable) {
+            this.sortable.destroy();
+            this.sortable = undefined;
+        }
+        if (this.enableDragDrop && this.childList) {
+            this.sortable = new Sortable(this.childList, {
+                ...treeViewDragDropConfig,
+                draggable: this.dragDropItemSelector,
+                onMove: (event) => {
+                    if (typeof this.canDrop === "function") {
+                        return this.canDrop({
+                            parentId: event.to.closest("swirl-tree-view-item")?.itemId,
+                            position: Math.max(Array.from(event.to.children).indexOf(event.related), 0),
+                        });
+                    }
+                    return true;
+                },
+                onStart: (event) => {
+                    treeViewDragDropConfig.onStart?.(event);
+                },
+                onEnd: (event) => {
+                    event.stopPropagation();
+                    treeViewDragDropConfig.onEnd?.(event);
+                    const { from, to, newIndex, oldIndex, item } = event;
+                    const sourceParentItemId = from.closest("swirl-tree-view-item")?.itemId;
+                    const targetParentItemId = to.closest("swirl-tree-view-item")?.itemId;
+                    this.dropTreeViewItem.emit({
+                        newIndex,
+                        oldIndex,
+                        item,
+                        itemId: item.id ?? item.querySelector(":scope > swirl-tree-view-item").id,
+                        newNextSiblingItemId: newIndex < to.children.length - 1
+                            ? to.children[newIndex + 1].id
+                            : undefined,
+                        newPrevSiblingItemId: newIndex > 0 ? to.children[newIndex - 1].id : undefined,
+                        sourceParentItemId,
+                        targetParentItemId,
+                    });
+                },
+            });
+        }
+    }
     updateLevel() {
         let parentItem = this.el.parentElement?.closest("swirl-tree-view-item");
         while (Boolean(parentItem)) {
@@ -73,32 +156,211 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
             parentItem = parentItem.parentElement?.closest("swirl-tree-view-item");
         }
     }
+    getItemContext() {
+        const parent = this.getParentTreeViewItem() ?? this.el.closest("swirl-tree-view");
+        const siblings = Array.from(parent.querySelectorAll(`
+        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},
+        :scope > .tree-view > ${this.dragDropItemSelector}
+      `));
+        return {
+            canDrop: !this.cannotKeyboardDropInCurrentPosition,
+            parent,
+            position: siblings.indexOf(this.el),
+            siblingCount: siblings.length,
+        };
+    }
+    getParentItem() {
+        return this.getElementToMove().parentElement.closest(this.dragDropItemSelector);
+    }
+    getParentTreeViewItem() {
+        return this.el.parentElement.closest("swirl-tree-view-item");
+    }
+    getElementToMove() {
+        return this.dragDropItemSelector
+            ? this.el.closest(this.dragDropItemSelector)
+            : this.el;
+    }
+    getKeyboardMoveEventData() {
+        const { canDrop, parent, position, siblingCount } = this.getItemContext();
+        if (!parent) {
+            return undefined;
+        }
+        return {
+            canDrop,
+            parentLabel: parent.label,
+            childrenCount: siblingCount,
+            itemLabel: this.label,
+            position,
+        };
+    }
+    toggleKeyboardMove() {
+        if (this.movingViaKeyboard) {
+            this.endKeyboardMove();
+        }
+        else {
+            this.startKeyboardMove();
+        }
+    }
+    endKeyboardMove() {
+        const { parent, position } = this.getItemContext();
+        if (typeof this.canDrop === "function") {
+            const canBeDroppedHere = this.canDrop({ parentId: parent.id, position });
+            if (!canBeDroppedHere) {
+                return;
+            }
+        }
+        this.movingViaKeyboard = false;
+        const eventData = this.getKeyboardMoveEventData();
+        if (!eventData) {
+            return;
+        }
+        this.endKeyboardMoveEvent.emit(eventData);
+        this.dropTreeViewItem.emit({
+            item: this.getElementToMove(),
+            itemId: this.itemId,
+            newIndex: position,
+            oldIndex: this.positionBeforeKeyboardMove.position,
+            newNextSiblingItemId: eventData.position < eventData.childrenCount - 1
+                ? this.getElementToMove().nextElementSibling?.id
+                : undefined,
+            newPrevSiblingItemId: eventData.position > 0
+                ? this.getElementToMove().previousElementSibling?.id
+                : undefined,
+            sourceParentItemId: this.positionBeforeKeyboardMove.parent.id ?? undefined,
+            targetParentItemId: this.getParentItem()?.id,
+        });
+    }
+    startKeyboardMove() {
+        if (this.disableDrag) {
+            return;
+        }
+        const { parent, position } = this.getItemContext();
+        this.positionBeforeKeyboardMove = {
+            parent,
+            position,
+        };
+        this.movingViaKeyboard = true;
+        const eventData = this.getKeyboardMoveEventData();
+        if (!eventData) {
+            return;
+        }
+        this.startKeyboardMoveEvent.emit(eventData);
+    }
+    moveItem(direction) {
+        const elementToMove = this.getElementToMove();
+        const parentItem = this.getParentItem();
+        const parentTreeViewItem = this.getParentTreeViewItem();
+        if (direction === "down") {
+            const nextSibling = elementToMove.nextElementSibling;
+            if (nextSibling) {
+                // move inside the next sibling
+                nextSibling
+                    .querySelector(".tree-view-item__children")
+                    .prepend(elementToMove);
+                // update parent tree view item
+                if (parentTreeViewItem) {
+                    forceUpdate(parentTreeViewItem);
+                }
+                const siblingTreeItem = nextSibling.tagName === "SWIRL-TREE-VIEW-ITEM"
+                    ? nextSibling
+                    : nextSibling.querySelector("swirl-tree-view-item");
+                forceUpdate(siblingTreeItem);
+                siblingTreeItem.expand();
+            }
+            else {
+                if (parentItem) {
+                    // move after the parent item
+                    parentItem.parentElement.insertBefore(elementToMove, parentItem.nextElementSibling);
+                    if (parentTreeViewItem) {
+                        forceUpdate(parentTreeViewItem);
+                    }
+                }
+            }
+        }
+        else if (direction === "up") {
+            const prevSibling = elementToMove.previousElementSibling;
+            if (prevSibling) {
+                // move before the previous sibling
+                prevSibling
+                    .querySelector(".tree-view-item__children")
+                    .appendChild(elementToMove);
+                // update parent tree view item
+                if (parentTreeViewItem) {
+                    forceUpdate(parentTreeViewItem);
+                }
+                const siblingTreeItem = prevSibling.tagName === "SWIRL-TREE-VIEW-ITEM"
+                    ? prevSibling
+                    : prevSibling.querySelector("swirl-tree-view-item");
+                forceUpdate(siblingTreeItem);
+                siblingTreeItem.expand();
+            }
+            else {
+                if (parentItem) {
+                    // move before the parent item
+                    parentItem.parentElement.insertBefore(elementToMove, parentItem);
+                    if (parentTreeViewItem) {
+                        forceUpdate(parentTreeViewItem);
+                    }
+                }
+            }
+        }
+        requestAnimationFrame(() => {
+            this.link.focus();
+        });
+        this.checkKeyboardDropStatus();
+        const eventData = this.getKeyboardMoveEventData();
+        if (!eventData) {
+            return;
+        }
+        this.keyboardMoveEvent.emit(eventData);
+    }
+    checkKeyboardDropStatus() {
+        const { parent, position } = this.getItemContext();
+        if (typeof this.canDrop === "function") {
+            const canBeDroppedHere = this.canDrop({ parentId: parent.id, position });
+            this.cannotKeyboardDropInCurrentPosition = !canBeDroppedHere;
+            return;
+        }
+        this.cannotKeyboardDropInCurrentPosition = false;
+    }
     render() {
+        const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
         const hasTags = Boolean(this.el.querySelector('[slot="tags"]'));
         const iconIsEmoji = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon);
+        const shouldShowChildrenDropZone = this.enableDragDrop && !hasChildren;
         const className = classNames("tree-view-item", {
             "tree-view-item--active": this.active,
+            "tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
+            "tree-view-item--moving-via-keyboard": this.movingViaKeyboard,
+            "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
-        return (h(Host, { key: '0f6136f547a9222d81f5879b03b7693cee12be79', id: this.itemId, role: "none" }, h("li", { key: '39e82efa16e592b0fd16cfb9f0dbff080d576ada', class: className, role: "none" }, h("a", { key: '7fedb6deb583e17c4cd8db10aaeed4003e52f57b', "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 && (h("span", { key: '46db3460c3adb7034527e35f6608fd3c99d23d6c', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '750f8640e9474686122bb9dec9f5bef200116827' }, this.expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '3b5b6625449c845e78c6f9c404a53b8c5ace1c56' }, h("span", { key: '0ccc884558049222e1ac47659ea1e0e76e18cee8', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '9198b324756d32d9967c69e8460b0be07735fa25', class: "tree-view-item__label" }, this.label), h("span", { key: '24b62ac74ebd0446d748fc4477734800faa4c888', class: "tree-view-item__tags" }, h("slot", { key: '16ce0a3f727b177b4f09bbda543df06d8282a386', name: "tags" }))), h("ul", { key: '46fca36bc60f706d014c7347acfc303edd672bbf', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
-                display: !this.expanded || !hasChildren ? "none" : undefined,
-            } }, h("slot", { key: 'a7eb07a70ab5fbc6d5368633e4a15eb3f3ed5cca' })))));
+        return (h(Host, { key: '23b8e5281a53f8707d990368f46b2a9810d20fa2', id: this.itemId, role: "none" }, h("li", { key: 'aac1855ae0f7cad6a26735e1eb23c67f99bba737', class: className, role: "none" }, h("a", { key: '72bbd772c2f78d2e91e0d584387794de0694a396', "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, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '5010453afe5af040148fd4507f0dc2e75a573f7f', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: 'd933894d661434ab4ec19c525e3fd8fca29e10ee', size: 20 }))), this.expandable && (h("span", { key: 'be633a37e2aa2d2e7267833b1f8933a72cc484e7', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '76b88fd0783cd5d9fee1b2e950ed4db18060c1e4' }, this.expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: 'bc95015cced5867204a8a10235cf45a48daa5fc4' }, h("span", { key: 'd53f7711f0101ee14940070cc28e7a4d7032d9d7', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '25111e86c433cbba58516946b42036e25fc1873e', class: "tree-view-item__label" }, this.label), h("span", { key: '2f30cf45fb918cb3964c38317bf8246ee96bc09c', class: "tree-view-item__tags" }, h("slot", { key: '857ea08895969d6b1ad13ad7a920da0f768a01d3', name: "tags" }))), h("ul", { key: 'df9aed076bb9831f5063e32a727c7c59afab9714', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                ? "tree-view-item__children--drop-zone"
+                : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: "group", style: {
+                display: (!this.expanded || !hasChildren) && !shouldShowChildrenDropZone
+                    ? "none"
+                    : undefined,
+            } }, h("slot", { key: 'c02878c54039257dd7ffb2165e910adaacc37507' })))));
     }
     get el() { return this; }
     static get style() { return SwirlTreeViewItemStyle0; }
-}, [6, "swirl-tree-view-item", {
+}, [4, "swirl-tree-view-item", {
         "active": [4],
+        "disableDrag": [4, "disable-drag"],
         "expandable": [4],
         "href": [1],
         "icon": [1],
         "iconColor": [1, "icon-color"],
         "itemId": [1, "item-id"],
         "label": [1],
+        "canDrop": [32],
+        "cannotKeyboardDropInCurrentPosition": [32],
+        "dragDropItemSelector": [32],
+        "enableDragDrop": [32],
         "expanded": [32],
         "level": [32],
+        "movingViaKeyboard": [32],
         "selected": [32],
         "expand": [64],
         "collapse": [64],
@@ -109,7 +371,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["swirl-tree-view-item", "swirl-icon", "swirl-icon-chevron-right", "swirl-icon-expand-more"];
+    const components = ["swirl-tree-view-item", "swirl-icon", "swirl-icon-chevron-right", "swirl-icon-drag-handle", "swirl-icon-expand-more"];
     components.forEach(tagName => { switch (tagName) {
         case "swirl-tree-view-item":
             if (!customElements.get(tagName)) {
@@ -118,10 +380,15 @@ function defineCustomElement$1() {
             break;
         case "swirl-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "swirl-icon-chevron-right":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "swirl-icon-drag-handle":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/swirl-tree-view.config.js

@@ -0,0 +1,21 @@
+const treeViewDragDropConfig = {
+    animation: 100,
+    chosenClass: "tree-view-item--chosen",
+    direction: "vertical",
+    dragClass: "tree-view-item--drag",
+    emptyInsertThreshold: 0,
+    fallbackOnBody: true,
+    filter: ".tree-view-item--disable-drag",
+    ghostClass: "tree-view-item--ghost",
+    group: "swirl-tree-view",
+    invertSwap: true,
+    onEnd: (event) => {
+        event.item.closest(".tree-view")?.classList.remove("tree-view--dragging");
+    },
+    onStart: (event) => {
+        event.item.closest(".tree-view")?.classList.add("tree-view--dragging");
+    },
+    invertedSwapThreshold: 0.75,
+};
+
+export { treeViewDragDropConfig as t };