@getflip/swirl-components 0.294.0 → 0.296.0

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

@@ -322,7 +322,7 @@ const SwirlTable = class {
         this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
     }
     render() {
-        return (h(Host, { key: 'cf46085c42fc52330c7ad24dcc40bdf72c4b5ba3' }, h("div", { key: '67e1bd0a9c0d82f82f1afe4e6d2518dd984917c4', class: "table" }, h("div", { key: '59c93db5f4533a395f2b5bd1a6b3ed94737667fc', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { key: 'a26dd8a60dac974e908a77d96f6f9d97a5baf0c0', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '2507e3df77ee9437e595b223cd8e77eb815d1cba' }, h("div", { key: 'f962a7080f553c1522adae0f1e5d11f96be5a9e5', id: "caption" }, this.caption))), h("div", { key: '1a6d093a12d53f3f04a37ba6e5491f84d8be5c17', role: "rowgroup" }, h("div", { key: '5953ae1ebf1c76f9d3ba7bd8bdf6703ab69bf4ca', class: "table__header", role: "row" }, h("slot", { key: 'cee176f91625a2e00158564cb357d812c6be805f', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '37a91fa0b369197d62db97ef5f8cfc0a0d17c11b', class: "table__body" }, h("slot", { key: '8c105e54684ed2648898f30485cdd02b83f45f87', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: '737604b50f856b89d6713735808e9864653a53fe', class: "table__empty-row", role: "row" }, h("div", { key: 'c0bb8145440523051fe52dc6e2904ff8d371ebdb', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: 'e867308fcc5c6ff412e85a853ebff2562f27613b', 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 getElement(this); }
 };

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

@@ -84,7 +84,7 @@ const SwirlTabs = class {
         }));
     }
     render() {
-        return (h(Host, { key: '1e34d578f5e5fa3997583a5b085e6dcb7144bfeb' }, h("div", { key: '30c0d1183ea33c966ac09825b639dfe68ce9e89e', class: "tabs" }, h("swirl-tab-bar", { key: '9bba094f810302351aea3005dd985dfa4f0f4cbf', 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: '0036bc4dccd3aa87d69beb757187ea0d5c4b9c78' })));
+        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 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: 'bf400674931ce8619bca89ce94de049937554be1' }, h(Tag, { key: '89c58e30de25038993bdf0dd94428ca996e65859', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '44a831cf4fbab6c5b47a7258ae0b68c4b1ba2b6e' }))));
+        return (h(Host, { key: '7cf2f2ea640acde9ae455c33ed94f96629a4cee9' }, h(Tag, { key: 'e0a5546c4bdee0e9f901a1378deeefce167977e1', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '96c959d69c0b4f457e3c804c655ab5d4afa6e8a3' }))));
     }
     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: '6516e45faa098c34a9815579410d04e5d181a228' }, h("slot", { key: 'f6e392d8c56eb8506cd759b1601dfbc976e43e28' })));
+        return (h(Host, { key: '0c89323210a5baff48c0cf250bb50f597fbccfbe' }, h("slot", { key: 'aa20eab928c58e4ca4b5593346d2ae14b9ef0e4c' })));
     }
     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: 'b9de641ecd62b2b701be62e17ca2f10d9ece98b7' }, h("div", { key: 'f89b9d97a4bbbf8fe053761863336e965054bce0', class: className }, h("input", { key: 'e7b4c002f4ee97ca3c5567a9c4d9ce0d26b1810d', "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: '2bdab6bfecd54decf6c6ecbd1a2679346215c61b', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'fcabff90dc41c35d4119bf68d64020c468e91057', 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 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: 'e045177df7cff3172098cf31219edd163d887573', role: "status" }, h("swirl-stack", { key: '9d0d089b2e58e99cb3c73472d0051af3c5b87519', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: '29a12ee787470e3d5167ae13f8fd0c84da2d81ed', role: "status" }, h("swirl-stack", { key: '65533b090312d7f6d2f4e20e693c75d6ca985362', 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: 'f13b7019f9fe5dd537f55e98c5f59a4608a11ba1' }, h("div", { key: 'c92eea5154be70cc099ee18cb3b3caf389bd9d12', class: className }, this.icon && (h("span", { key: 'eaba6a7fdc594ed5922e1f73950fbd0a3c979b62', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'd051a303c25a2626f75e317e020d73f42c777122', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '02ff7970aae6b760a6485fc303d768f94580c4d7' })), h("button", { key: '0f202582d613d7c6ba3e3eea079427aee99e34be', "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: '8741abe6c8b206d4bc4a3aa260a0a2a5b79fbe0f', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '280d5d34ebaf76b0bd3b33b02c78ed3640de4ea4' }, h("div", { key: '4ea2c045680fbbc40984b3450eb7aef7d0d326fb', class: className }, this.icon && (h("span", { key: '8d99261ffbe152eb3226bcca2016d485ef6f18af', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '9a9003bf3186f75010475c6872d891ffc884c1f4', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'e124b4a2f81cfd83a2e9e43973aab6d755d5953b' })), h("button", { key: 'f2208e156ecd27f963e0576d1c996d730424e905', "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: 'e969f9969cd92f431b2d3352604dd0572d54d2b0', 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: '7dbc49d9f241d51464c0fe2d6699ff0d9853c686', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: '9002b26a2451e798068d6f96342b63106bcc76b7', class: "button__label" }, this.label)));
+        return (h("button", { key: '6428213e5bb688dcd518892f5f619ce8b4b0f7b1', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'f213af72aca0a1b2cb934f61c9be176887f1d48d', 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: 'e78c35d533c8ffc80650256f6fe78fdca0cf965b', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '9fd3933a1826d847695b011f5d9cd7253824b0c0', 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 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: '0ecf4e7dbdddd65054c7bb330d65dd3b25db0c17' }, h("swirl-stack", { key: '5627a2705583a78d2160dea68313ec1006a4b1d4', 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: '030851de2134c50b17ca1d09d744f31d2b3f019f' }))));
+        return (h(Host, { key: 'e2561eda6698db369a4c97c1f35cf03a901d0bc4' }, h("swirl-stack", { key: '3f45d178282426e5ac027d4bb0c58ef505c116f9', 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: '545bd3669c2dab02e60dabe810bb21ee13319509' }))));
     }
     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: 'ffc758691e7eb769d7c63a8d00cdd97fbd0fb88b', onKeydown: this.onKeydown }, h("span", { key: 'd1fbfb04a0757fae672c0e2ed79d47aa79665834', class: className }, h("span", { key: 'de2f233384b1cb66d9e09938d5b3a0b7d95c241d', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '87728d6c2818b7cf44bd11b64f8bac60334d00af' })), h("span", { key: 'e5992fb02ce1cc73e7f82e6b666601c2f1890c75', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '1a482a32a49e394974acc0614eace76e337c7275', onKeydown: this.onKeydown }, h("span", { key: '9f73d78cc853308520291ee20b7624d6ec64bd5e', class: className }, h("span", { key: 'ff7e20853f18c9b3851a028e385db1fd85841333', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: 'ee9be7d542982f7d14b07e3648f24a11da92780e' })), h("span", { key: 'fdfa09ae65125350e555b73417dc77be82edda0f', 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: '1b433d578d60ee7f206e48caaba583ba1c51b1c7', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'de588b3f12fc2e4a07013d8c2b99c3c37cc3c864', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'de5b0812122f51cfd867731a5406e1443a9b8f05', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: 'a632b60342e4194bf6eefecf1f7887da300ea007', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '78d2b5c880e4ed314723acb1200e61cc9e284428', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '757859caef4234141415d572db53a7b98e1375da', 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: '736da02376f7c94d4dd47a60be58ca2a376164ac', role: "none" }, h("li", { key: '6c723c41caea052735e39a676ecd09cffbd0dc7c', 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: '00a999bdf8c95c02547b9099f598d12306f47c45', 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: 'd1310bb5b7f35a31761ce4b504f59bfa9389f42a', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'f15cdd0c5d9334a840fc9c80c2a91d8c809f047b', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '0438fdfa0f8925bffa40814dc131795c85aa582b', class: "tree-navigation-item__label" }, h("span", { key: '20530bcdcdb7bb75f9fb263658c6adfa4e94fac0', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '53f44b73c11f38a5ea79d421a2ca8873415d2f46', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '62a045a1a4b68fa9fd6a97b60f7b9702c416b4d2', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'f42374147aec35f9ee5e9b4aac949a5ce7e7e857', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'aecba874f56b67b1920482743131060bfdadb74d', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'af7e026a2a78010be560ebf77ee8b908416c7e32', 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: '2d04a3db58107a0d69724785355bfc575e8f213d' }))))));
+            } }, h("slot", { key: '070dab2c0784d7c67e4fcfeb1b13193064b5c92a' }))))));
     }
     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: '59ac8ece7083364d946cce062ba35ab06d1df4cb' }, h("ul", { key: '73f71370d003bb0620fe7712c1d2ee922a75d8ef', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '75724b5255927ebe59bf59a11cc4e0eae6324b2a' }))));
+        return (h(Host, { key: 'ffd4c41211a96139f8efe5c3f4d5bff1d742009c' }, h("ul", { key: 'bd63e4512ada05959d4fcd07eccc2353b2d00406', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '7516fe5e5737ffe4c20dd84f7ebaed74dfca1b7c' }))));
     }
 };
 SwirlTreeNavigation.style = SwirlTreeNavigationStyle0;

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

@@ -1,19 +1,45 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-eaf83092.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, F as Fragment, 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 { t as treeViewDragDropConfig } from './swirl-tree-view.config-82c9ecaa.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        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();
@@ -25,18 +51,31 @@ const SwirlTreeViewItem = class {
             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) {
@@ -62,6 +101,49 @@ const SwirlTreeViewItem = class {
     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)) {
@@ -69,19 +151,192 @@ const SwirlTreeViewItem = class {
             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: '7055128d592ea7a599026cb9e9ca263016c9ab28', id: this.itemId, role: "none" }, h("li", { key: '19db1a5c434521aafbcf66364af9d731958c3217', class: className, role: "none" }, h("a", { key: '8d4d0cfb8f68280bc21fa560be3dfc8536957e69', "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: 'a1df0b690e3648a3efd78963580536e68244346e', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '8b37bb4dcd53888c2d34bb60cb48caddc1dae2d6' }, 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: '3408a32ea893cfdbc7829be311d2b337a6995099' }, h("span", { key: 'bed3cf8a935be1aa489a12097e0f1daa51874ae1', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '6c2f60b9c5f7cf54d69b539b77a6fffef305bada', class: "tree-view-item__label" }, this.label), h("span", { key: '2ec646c4068d3ebbc1417c9138a7f26aaa5d13a9', class: "tree-view-item__tags" }, h("slot", { key: 'c277c4aac4812a969366771dbe5723e266884fd2', name: "tags" }))), h("ul", { key: 'a18acac09207d0db6993b92d49f375f0091958ea', "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: '3870afdc596f7b91480c0951e0553478865ff2a8' })))));
+        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 getElement(this); }
 };

package/dist/esm/swirl-tree-view.config-82c9ecaa.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 };