@getflip/swirl-components 0.295.0 → 0.296.0

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: '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 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 };

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

@@ -1,28 +1,90 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eaf83092.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-eaf83092.js';
+import { S as Sortable } from './sortable.esm-0bfddf0c.js';
+import { t as treeViewDragDropConfig } from './swirl-tree-view.config-82c9ecaa.js';
 
-const swirlTreeViewCss = ":host{display:block}:host *{box-sizing:border-box}.tree-view{display:flex;margin:0;padding:0;flex-direction:column;gap:var(--s-space-2)}";
+const swirlTreeViewCss = ":host{display:block}:host *{box-sizing:border-box}.tree-view{display:flex;margin:0;padding:0 0 var(--s-space-4);flex-direction:column;gap:var(--s-space-2)}.tree-view--dragging{cursor:grabbing}.tree-view--dragging .tree-view-item__link:hover,.tree-view--dragging .tree-view-item__link:active{background-color:var(--s-background-default) !important}.tree-view--dragging .tree-view-item__link:hover .tree-view-item__drag-handle,.tree-view--dragging .tree-view-item__link:active .tree-view-item__drag-handle{opacity:0}";
 const SwirlTreeViewStyle0 = swirlTreeViewCss;
 
+const defaultDragDropInstructions = {
+    cannotBeDropped: "Cannot drop here.",
+    end: "{itemLabel}, dropped. Parent item: {parentLabel}. Final position in list: {position} of {childrenCount}.",
+    initial: "Press space to move items.",
+    moved: "{itemLabel}. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}.",
+    start: "{itemLabel}, grabbed. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}. Press up and down arrow keys to change position, Space to drop.",
+};
 const SwirlTreeView = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.dropItem = createEvent(this, "dropItem", 7);
         this.itemExpansionChanged = createEvent(this, "itemExpansionChanged", 7);
         this.onSlotChange = () => {
             this.init();
         };
+        this.onFocus = () => {
+            if (this.liveRegionText === "") {
+                this.updateLiveRegionText("initial");
+            }
+        };
+        this.onBlur = (event) => {
+            const newlyFocusedElement = event.relatedTarget;
+            if (this.el.contains(newlyFocusedElement)) {
+                return;
+            }
+            if (this.liveRegionText !== "") {
+                this.updateLiveRegionText();
+            }
+        };
+        this.canDrop = undefined;
+        this.dragDropInstructions = defaultDragDropInstructions;
+        this.dragDropItemSelector = "swirl-tree-view-item";
+        this.enableDragDrop = undefined;
         this.initiallyExpandedItemIds = undefined;
         this.label = undefined;
+        this.liveRegionText = "";
     }
     componentDidLoad() {
         if (Boolean(this.initiallyExpandedItemIds)) {
             this.expandItems(this.initiallyExpandedItemIds);
         }
         this.init();
+        this.setUpDragDrop();
+    }
+    disconnectedCallback() {
+        this.sortable?.destroy();
+    }
+    handleEnableDragDropChange() {
+        this.setUpDragDrop();
     }
     async expandItems(itemIds) {
         const items = this.getItems().filter((item) => itemIds.includes(item.itemId));
         items.forEach((item) => item.expand());
     }
+    onItemDrop(event) {
+        event.stopPropagation();
+        this.dropItem.emit(event.detail);
+        // force update the new and old parent of the dropped item to reflect
+        // new hierarchy
+        if (event.detail.targetParentItemId) {
+            const newParentItem = this.el.querySelector(`
+        swirl-tree-view-item#${event.detail.targetParentItemId},
+        #${event.detail.targetParentItemId} > swirl-tree-view-item
+      `);
+            if (newParentItem) {
+                forceUpdate(newParentItem);
+                newParentItem.expand();
+            }
+        }
+        if (event.detail.sourceParentItemId) {
+            const oldParentItem = this.el.querySelector(`
+        swirl-tree-view-item#${event.detail.sourceParentItemId},
+        #${event.detail.sourceParentItemId} > swirl-tree-view-item
+      `);
+            if (oldParentItem) {
+                forceUpdate(oldParentItem);
+                oldParentItem.expand();
+            }
+        }
+    }
     onKeyDown(event) {
         if (event.key === "ArrowDown") {
             event.preventDefault();
@@ -65,6 +127,15 @@ const SwirlTreeView = class {
             });
         }
     }
+    onEndKeyboardMove(event) {
+        this.updateLiveRegionText("end", event.detail);
+    }
+    onStartKeyboardMove(event) {
+        this.updateLiveRegionText("start", event.detail);
+    }
+    onKeyboardMove(event) {
+        this.updateLiveRegionText("moved", event.detail);
+    }
     init() {
         const selectedItem = this.getSelectedItem();
         const allItems = this.getItems();
@@ -76,6 +147,53 @@ const SwirlTreeView = class {
             allItems[0]?.select();
         }
     }
+    setUpDragDrop() {
+        if (this.sortable) {
+            this.sortable.destroy();
+            this.sortable = undefined;
+        }
+        if (this.enableDragDrop) {
+            this.sortable = new Sortable(this.listElement, {
+                ...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) + 1,
+                        });
+                    }
+                    return true;
+                },
+                onStart: (event) => {
+                    treeViewDragDropConfig.onStart?.(event);
+                },
+                onEnd: (event) => {
+                    event.stopPropagation();
+                    treeViewDragDropConfig.onEnd?.(event);
+                    const { to, newIndex, oldIndex, item } = event;
+                    const sourceParentItemId = undefined;
+                    const targetParentItem = to.closest("swirl-tree-view-item");
+                    if (targetParentItem) {
+                        forceUpdate(targetParentItem);
+                        targetParentItem.expand();
+                    }
+                    this.dropItem.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: targetParentItem?.itemId,
+                    });
+                },
+            });
+        }
+    }
     selectFirstItem() {
         this.unselectAllItems();
         this.getItems()[0]?.select(true);
@@ -194,10 +312,25 @@ const SwirlTreeView = class {
         const nestedSibling = item?.parentElement?.previousElementSibling?.querySelector("swirl-tree-view-item");
         return nestedSibling ?? undefined;
     }
+    updateLiveRegionText(key, data) {
+        let newText = key ? this.dragDropInstructions[key] : "";
+        if (!data?.canDrop) {
+            newText += ` ${this.dragDropInstructions.cannotBeDropped}`;
+        }
+        for (const [key, value] of Object.entries(data ?? {})) {
+            newText = newText.replaceAll(`{${key}}`, String(value));
+        }
+        if (newText !== this.liveRegionText) {
+            this.liveRegionText = newText;
+        }
+    }
     render() {
-        return (h(Host, { key: 'caa7174a0cddd890bda97332701e66ef4ac9195a' }, h("ul", { key: '7648d3a86e8e7f9e4698085f86aa579894f1ee0f', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: '54224ff085a157bd7220d6ca34e9b00493ec50fc', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: '678b41d203dee35c80b90b3c3fca2f81f9984934' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '4b692860fdc7ddc49a71241021f32c8654fef6ca' }, h("span", { key: 'ff928c6c929c94e24a29853c216641038bde5b77', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: '9851185b8627512031aa019c8a4e68b99f364085', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: "tree", ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: 'd80f8a83a5f25dd3a96630a192cb8047b0db9387', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "enableDragDrop": ["handleEnableDragDropChange"]
+    }; }
 };
 SwirlTreeView.style = SwirlTreeViewStyle0;
 

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

@@ -12,7 +12,7 @@ const SwirlVideoThumbnail = class {
         this.src = undefined;
     }
     render() {
-        return (h(Host, { key: '9098a95f7694941119cf278a921f2e23e25baa43' }, h("button", { key: '1d96db1c725932b1c6495898fecda1a47bf0a9d3', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '9064a70875b2633b99aa0f5337f332032bed31d6', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ae289e11551e1d52a693a1f532f7f07b6e789ff8', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'fb531389a7e2381a8a032bf6876cbdccf04b9894' }, this.durationLabel), this.duration)), h("svg", { key: 'b202c89cc042698517cf56ffe4d87090fa8b2c84', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '37bf4335a29c2a1359d148c1bcb64dc1870c285c', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (h(Host, { key: 'c8222b303f7878f6bc1e9dacef086d64662bdb70' }, h("button", { key: '93fc15bec01b3c435ee0195fc73f101f0291b91a', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '248050ec128b3c538e9627f567ca1b957cffde02', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '5f3aa56cfd6256c7e0097adad6a027eb33bafb30', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '8b1b2bbb76a2124c70d6fa06f222019820c1f73b' }, this.durationLabel), this.duration)), h("svg", { key: 'eb6d5cd1ec93bf6e788152d4548b892b583a0918', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8a8415b2bfd731fe9465a634dfd7a4a8eeedc2fb', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
 };
 SwirlVideoThumbnail.style = SwirlVideoThumbnailStyle0;

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

@@ -8,7 +8,7 @@ const SwirlVisuallyHidden = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '7d8a0a62d60c8a158bdcbf1cab24f1f11527ed33' }, h("slot", { key: '742a1b41a3b89fcded12b2b9ddfb1665a54f805c' })));
+        return (h(Host, { key: '4fa574932da58f51e740af4f582e03cc6feb9be9' }, h("slot", { key: 'eb4b16d5046dbf3f59eb163e7c6f45bed3f99ae9' })));
     }
 };
 SwirlVisuallyHidden.style = SwirlVisuallyHiddenStyle0;

package/dist/swirl-components/{p-5c167dcb.entry.js → p-0093152c.entry.js}

@@ -1 +1 @@
-import{r as e,h as i,F as c}from"./p-944f8a36.js";import{c as t}from"./p-a5dce9e6.js";const a=class{constructor(i){e(this,i),this.color=void 0,this.size=24}render(){const e=20===this.size?24:this.size,a={color:Boolean(this.color)?`var(--s-icon-${this.color})`:void 0},s=t("swirl-icon",`swirl-icon--size-${this.size}`);return i("svg",{key:"d238f496a6d11945e4cfdeb63e40f614bfe235e1","aria-hidden":"true",class:s,fill:"none",height:this.size,part:"icon",style:a,viewBox:`0 0 ${e} ${e}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&i(c,{key:"c85ed3d19cd3e04e8a8a0b4777727ec94ca508e2"},i("path",{key:"f9b9f5f6230346af402c791075b2efdbb11cf25f",d:"M4.00002 12.6667H6.00002V8.66667H10V12.6667H12V6.66667L8.00002 3.66667L4.00002 6.66667V12.6667ZM4.00002 14C3.63335 14 3.31946 13.8694 3.05835 13.6083C2.79724 13.3472 2.66669 13.0333 2.66669 12.6667V6.66667C2.66669 6.45555 2.71391 6.25555 2.80835 6.06667C2.9028 5.87778 3.03335 5.72222 3.20002 5.6L7.20002 2.6C7.32224 2.51111 7.45002 2.44444 7.58335 2.4C7.71669 2.35555 7.85558 2.33333 8.00002 2.33333C8.14446 2.33333 8.28335 2.35555 8.41669 2.4C8.55002 2.44444 8.6778 2.51111 8.80002 2.6L12.8 5.6C12.9667 5.72222 13.0972 5.87778 13.1917 6.06667C13.2861 6.25555 13.3334 6.45555 13.3334 6.66667V12.6667C13.3334 13.0333 13.2028 13.3472 12.9417 13.6083C12.6806 13.8694 12.3667 14 12 14H8.66669V10H7.33335V14H4.00002Z",fill:"currentColor"})),(20===this.size||24===this.size)&&i(c,{key:"f96968bfa6bd4fcf2922138c5abc504cbf322782"},i("path",{key:"8530c3ab6ccaee75ea0c57108dad1cc607e3e6bc",d:"M6 19H9V13H15V19H18V10L12 5.5L6 10V19ZM6 21C5.45 21 4.97917 20.8042 4.5875 20.4125C4.19583 20.0208 4 19.55 4 19V10C4 9.68333 4.07083 9.38333 4.2125 9.1C4.35417 8.81667 4.55 8.58333 4.8 8.4L10.8 3.9C10.9833 3.76667 11.175 3.66667 11.375 3.6C11.575 3.53333 11.7833 3.5 12 3.5C12.2167 3.5 12.425 3.53333 12.625 3.6C12.825 3.66667 13.0167 3.76667 13.2 3.9L19.2 8.4C19.45 8.58333 19.6458 8.81667 19.7875 9.1C19.9292 9.38333 20 9.68333 20 10V19C20 19.55 19.8042 20.0208 19.4125 20.4125C19.0208 20.8042 18.55 21 18 21H13V15H11V21H6Z",fill:"currentColor"})),28===this.size&&i(c,{key:"97515ef610c350a4bd8faac4c8b4a75a2ef3a669"},i("path",{key:"c01e16929d18b013de5c07bd5dded8c65e1af834",d:"M6.99999 22.1667H10.5V15.1667H17.5V22.1667H21V11.6667L14 6.41667L6.99999 11.6667V22.1667ZM6.99999 24.5C6.35832 24.5 5.80902 24.2715 5.35207 23.8146C4.89513 23.3576 4.66666 22.8083 4.66666 22.1667V11.6667C4.66666 11.2972 4.7493 10.9472 4.91457 10.6167C5.07985 10.2861 5.30832 10.0139 5.59999 9.8L12.6 4.55C12.8139 4.39445 13.0375 4.27778 13.2708 4.2C13.5042 4.12222 13.7472 4.08334 14 4.08334C14.2528 4.08334 14.4958 4.12222 14.7292 4.2C14.9625 4.27778 15.1861 4.39445 15.4 4.55L22.4 9.8C22.6917 10.0139 22.9201 10.2861 23.0854 10.6167C23.2507 10.9472 23.3333 11.2972 23.3333 11.6667V22.1667C23.3333 22.8083 23.1049 23.3576 22.6479 23.8146C22.191 24.2715 21.6417 24.5 21 24.5H15.1667V17.5H12.8333V24.5H6.99999Z",fill:"currentColor"})))}};a.style=":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";export{a as swirl_icon_home}
+import{r as i,h as e,F as a}from"./p-944f8a36.js";import{c as t}from"./p-a5dce9e6.js";const s=class{constructor(e){i(this,e),this.color=void 0,this.size=24}render(){const i=20===this.size?24:this.size,s={color:Boolean(this.color)?`var(--s-icon-${this.color})`:void 0},C=t("swirl-icon",`swirl-icon--size-${this.size}`);return e("svg",{key:"51f99b7a294cbb45b689da419439ffc9608395f5","aria-hidden":"true",class:C,fill:"none",height:this.size,part:"icon",style:s,viewBox:`0 0 ${i} ${i}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&e(a,{key:"c8e6021778ecda6b80312e6d786aa3196a923666"},e("path",{key:"be72c59706e7503041f8192e2ca2694bcb911e23",d:"M4.00002 12.6667H6.00002V8.66667H10V12.6667H12V6.66667L8.00002 3.66667L4.00002 6.66667V12.6667ZM4.00002 14C3.63335 14 3.31946 13.8694 3.05835 13.6083C2.79724 13.3472 2.66669 13.0333 2.66669 12.6667V6.66667C2.66669 6.45555 2.71391 6.25555 2.80835 6.06667C2.9028 5.87778 3.03335 5.72222 3.20002 5.6L7.20002 2.6C7.32224 2.51111 7.45002 2.44444 7.58335 2.4C7.71669 2.35555 7.85558 2.33333 8.00002 2.33333C8.14446 2.33333 8.28335 2.35555 8.41669 2.4C8.55002 2.44444 8.6778 2.51111 8.80002 2.6L12.8 5.6C12.9667 5.72222 13.0972 5.87778 13.1917 6.06667C13.2861 6.25555 13.3334 6.45555 13.3334 6.66667V12.6667C13.3334 13.0333 13.2028 13.3472 12.9417 13.6083C12.6806 13.8694 12.3667 14 12 14H8.66669V10H7.33335V14H4.00002Z",fill:"currentColor"})),(20===this.size||24===this.size)&&e(a,{key:"710038ed04fe53b5fbbba0cfbce10972e7491dbe"},e("path",{key:"ba33d277305ab1ffa458b01f1df89ce5c75fc04f",d:"M6 19H9V13H15V19H18V10L12 5.5L6 10V19ZM6 21C5.45 21 4.97917 20.8042 4.5875 20.4125C4.19583 20.0208 4 19.55 4 19V10C4 9.68333 4.07083 9.38333 4.2125 9.1C4.35417 8.81667 4.55 8.58333 4.8 8.4L10.8 3.9C10.9833 3.76667 11.175 3.66667 11.375 3.6C11.575 3.53333 11.7833 3.5 12 3.5C12.2167 3.5 12.425 3.53333 12.625 3.6C12.825 3.66667 13.0167 3.76667 13.2 3.9L19.2 8.4C19.45 8.58333 19.6458 8.81667 19.7875 9.1C19.9292 9.38333 20 9.68333 20 10V19C20 19.55 19.8042 20.0208 19.4125 20.4125C19.0208 20.8042 18.55 21 18 21H13V15H11V21H6Z",fill:"currentColor"})),28===this.size&&e(a,{key:"8e5ca4c001d8349c8ab15da5554affca464100d4"},e("path",{key:"3b9bd481077aba78937d008c0943acac9886300f",d:"M6.99999 22.1667H10.5V15.1667H17.5V22.1667H21V11.6667L14 6.41667L6.99999 11.6667V22.1667ZM6.99999 24.5C6.35832 24.5 5.80902 24.2715 5.35207 23.8146C4.89513 23.3576 4.66666 22.8083 4.66666 22.1667V11.6667C4.66666 11.2972 4.7493 10.9472 4.91457 10.6167C5.07985 10.2861 5.30832 10.0139 5.59999 9.8L12.6 4.55C12.8139 4.39445 13.0375 4.27778 13.2708 4.2C13.5042 4.12222 13.7472 4.08334 14 4.08334C14.2528 4.08334 14.4958 4.12222 14.7292 4.2C14.9625 4.27778 15.1861 4.39445 15.4 4.55L22.4 9.8C22.6917 10.0139 22.9201 10.2861 23.0854 10.6167C23.2507 10.9472 23.3333 11.2972 23.3333 11.6667V22.1667C23.3333 22.8083 23.1049 23.3576 22.6479 23.8146C22.191 24.2715 21.6417 24.5 21 24.5H15.1667V17.5H12.8333V24.5H6.99999Z",fill:"currentColor"})))}};s.style=":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";export{s as swirl_icon_home}

package/dist/swirl-components/{p-ce915b81.entry.js → p-0125ab65.entry.js}

@@ -1 +1 @@
-import{r as s,h as C,F as t}from"./p-944f8a36.js";import{c as e}from"./p-a5dce9e6.js";const i=class{constructor(C){s(this,C),this.size=24}render(){const s=20===this.size?24:this.size,i=e("swirl-symbol",`swirl-symbol--size-${this.size}`);return C("svg",{key:"1cf2c2c12e09601a0179db600013049860b98869",class:i,fill:"none",height:this.size,part:"symbol",viewBox:`0 0 ${s} ${s}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},C(t,{key:"7c0b43da234d56a965fa81611defb9d10ab49c3a"},C("path",{key:"96e84a114c30154330df938566492ee74d8672df",d:"M20 6H16V4C16.0009 3.73709 15.9498 3.47661 15.8496 3.23354C15.7495 2.99047 15.6022 2.76962 15.4163 2.58372C15.2304 2.39782 15.0095 2.25054 14.7665 2.15035C14.5234 2.05017 14.2629 1.99907 14 2H10C9.73709 1.99907 9.47661 2.05017 9.23354 2.15035C8.99047 2.25054 8.76962 2.39782 8.58372 2.58372C8.39782 2.76962 8.25054 2.99047 8.15035 3.23354C8.05017 3.47661 7.99907 3.73709 8 4V6H4C3.73764 5.99933 3.47774 6.05068 3.23535 6.15107C2.99296 6.25147 2.77287 6.39892 2.58782 6.58491C2.40277 6.77089 2.25642 6.99171 2.15724 7.2346C2.05806 7.4775 2.00801 7.73764 2.01 8L2 19C1.99907 19.2629 2.05017 19.5234 2.15035 19.7665C2.25054 20.0095 2.39782 20.2304 2.58372 20.4163C2.76962 20.6022 2.99047 20.7495 3.23354 20.8496C3.47661 20.9498 3.73709 21.0009 4 21H20C20.2629 21.0009 20.5234 20.9498 20.7665 20.8496C21.0095 20.7495 21.2304 20.6022 21.4163 20.4163C21.6022 20.2304 21.7495 20.0095 21.8496 19.7665C21.9498 19.5234 22.0009 19.2629 22 19V8C22.0009 7.73709 21.9498 7.47661 21.8496 7.23354C21.7495 6.99047 21.6022 6.76962 21.4163 6.58372C21.2304 6.39782 21.0095 6.25054 20.7665 6.15035C20.5234 6.05017 20.2629 5.99907 20 6ZM14 6H10V4H14V6Z",fill:"currentColor"})))}};i.style=":host{display:inline-flex}";export{i as swirl_symbol_work}
+import{r as s,h as C,F as t}from"./p-944f8a36.js";import{c as e}from"./p-a5dce9e6.js";const i=class{constructor(C){s(this,C),this.size=24}render(){const s=20===this.size?24:this.size,i=e("swirl-symbol",`swirl-symbol--size-${this.size}`);return C("svg",{key:"7b1c7a1e70178ae81f9cc43289fd9b23adb7630f",class:i,fill:"none",height:this.size,part:"symbol",viewBox:`0 0 ${s} ${s}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},C(t,{key:"918e6855088204c492b0f0d7cf52000386c79bed"},C("path",{key:"c6b0bd19f5676109e5bdeb10c8fa541c0bc816cb",d:"M20 6H16V4C16.0009 3.73709 15.9498 3.47661 15.8496 3.23354C15.7495 2.99047 15.6022 2.76962 15.4163 2.58372C15.2304 2.39782 15.0095 2.25054 14.7665 2.15035C14.5234 2.05017 14.2629 1.99907 14 2H10C9.73709 1.99907 9.47661 2.05017 9.23354 2.15035C8.99047 2.25054 8.76962 2.39782 8.58372 2.58372C8.39782 2.76962 8.25054 2.99047 8.15035 3.23354C8.05017 3.47661 7.99907 3.73709 8 4V6H4C3.73764 5.99933 3.47774 6.05068 3.23535 6.15107C2.99296 6.25147 2.77287 6.39892 2.58782 6.58491C2.40277 6.77089 2.25642 6.99171 2.15724 7.2346C2.05806 7.4775 2.00801 7.73764 2.01 8L2 19C1.99907 19.2629 2.05017 19.5234 2.15035 19.7665C2.25054 20.0095 2.39782 20.2304 2.58372 20.4163C2.76962 20.6022 2.99047 20.7495 3.23354 20.8496C3.47661 20.9498 3.73709 21.0009 4 21H20C20.2629 21.0009 20.5234 20.9498 20.7665 20.8496C21.0095 20.7495 21.2304 20.6022 21.4163 20.4163C21.6022 20.2304 21.7495 20.0095 21.8496 19.7665C21.9498 19.5234 22.0009 19.2629 22 19V8C22.0009 7.73709 21.9498 7.47661 21.8496 7.23354C21.7495 6.99047 21.6022 6.76962 21.4163 6.58372C21.2304 6.39782 21.0095 6.25054 20.7665 6.15035C20.5234 6.05017 20.2629 5.99907 20 6ZM14 6H10V4H14V6Z",fill:"currentColor"})))}};i.style=":host{display:inline-flex}";export{i as swirl_symbol_work}

package/dist/swirl-components/{p-38f1c701.entry.js → p-02e33f18.entry.js}

@@ -1 +1 @@
-import{r as C,h as e,F as i}from"./p-944f8a36.js";import{c as t}from"./p-a5dce9e6.js";const s=class{constructor(e){C(this,e),this.color=void 0,this.size=24}render(){const C=20===this.size?24:this.size,s={color:Boolean(this.color)?`var(--s-icon-${this.color})`:void 0},c=t("swirl-icon",`swirl-icon--size-${this.size}`);return e("svg",{key:"72105efd7208dd4095a37fb48efe05866b5cc878","aria-hidden":"true",class:c,fill:"none",height:this.size,part:"icon",style:s,viewBox:`0 0 ${C} ${C}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&e(i,{key:"93c95b8d0d8657462fc7530916ebe0fe1033acd6"},e("path",{key:"05b88d23b0f954b54b57bfbac2261f29d1e2a588",d:"M6.66665 12.6667V11.3333H2.66665C2.29998 11.3333 1.98609 11.2028 1.72498 10.9417C1.46387 10.6806 1.33331 10.3667 1.33331 10V3.33333C1.33331 2.96667 1.46387 2.65278 1.72498 2.39167C1.98609 2.13056 2.29998 2 2.66665 2H13.3333C13.7 2 14.0139 2.13056 14.275 2.39167C14.5361 2.65278 14.6666 2.96667 14.6666 3.33333V10C14.6666 10.3667 14.5361 10.6806 14.275 10.9417C14.0139 11.2028 13.7 11.3333 13.3333 11.3333H9.33331V12.6667H9.99998C10.1889 12.6667 10.3472 12.7306 10.475 12.8583C10.6028 12.9861 10.6666 13.1444 10.6666 13.3333C10.6666 13.5222 10.6028 13.6806 10.475 13.8083C10.3472 13.9361 10.1889 14 9.99998 14H5.99998C5.81109 14 5.65276 13.9361 5.52498 13.8083C5.3972 13.6806 5.33331 13.5222 5.33331 13.3333C5.33331 13.1444 5.3972 12.9861 5.52498 12.8583C5.65276 12.7306 5.81109 12.6667 5.99998 12.6667H6.66665ZM2.66665 10H13.3333V3.33333H2.66665V10Z",fill:"currentColor"})),(20===this.size||24===this.size)&&e(i,{key:"f824e82af845300a10be42ea76360446efd308cc"},e("path",{key:"9b633e5584635e4aff54683e57d5eaac3c85e080",d:"M10 19V17H4C3.45 17 2.97917 16.8042 2.5875 16.4125C2.19583 16.0208 2 15.55 2 15V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V15C22 15.55 21.8042 16.0208 21.4125 16.4125C21.0208 16.8042 20.55 17 20 17H14V19H15C15.2833 19 15.5208 19.0958 15.7125 19.2875C15.9042 19.4792 16 19.7167 16 20C16 20.2833 15.9042 20.5208 15.7125 20.7125C15.5208 20.9042 15.2833 21 15 21H9C8.71667 21 8.47917 20.9042 8.2875 20.7125C8.09583 20.5208 8 20.2833 8 20C8 19.7167 8.09583 19.4792 8.2875 19.2875C8.47917 19.0958 8.71667 19 9 19H10ZM4 15H20V5H4V15Z",fill:"currentColor"})),28===this.size&&e(i,{key:"291c86c5c18dbfdadcec79dd6395c6bd030bf590"},e("path",{key:"3495eeb81efc4feb25f0f8c24f727282902d09f1",d:"M11.6666 22.1667V19.8333H4.66665C4.02498 19.8333 3.47567 19.6049 3.01873 19.1479C2.56179 18.691 2.33331 18.1417 2.33331 17.5V5.83333C2.33331 5.19167 2.56179 4.64236 3.01873 4.18542C3.47567 3.72847 4.02498 3.5 4.66665 3.5H23.3333C23.975 3.5 24.5243 3.72847 24.9812 4.18542C25.4382 4.64236 25.6666 5.19167 25.6666 5.83333V17.5C25.6666 18.1417 25.4382 18.691 24.9812 19.1479C24.5243 19.6049 23.975 19.8333 23.3333 19.8333H16.3333V22.1667H17.5C17.8305 22.1667 18.1076 22.2785 18.3312 22.5021C18.5548 22.7257 18.6666 23.0028 18.6666 23.3333C18.6666 23.6639 18.5548 23.941 18.3312 24.1646C18.1076 24.3882 17.8305 24.5 17.5 24.5H10.5C10.1694 24.5 9.89234 24.3882 9.66873 24.1646C9.44512 23.941 9.33331 23.6639 9.33331 23.3333C9.33331 23.0028 9.44512 22.7257 9.66873 22.5021C9.89234 22.2785 10.1694 22.1667 10.5 22.1667H11.6666ZM4.66665 17.5H23.3333V5.83333H4.66665V17.5Z",fill:"currentColor"})))}};s.style=":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";export{s as swirl_icon_desktop}
+import{r as C,h as i,F as e}from"./p-944f8a36.js";import{c as t}from"./p-a5dce9e6.js";const s=class{constructor(i){C(this,i),this.color=void 0,this.size=24}render(){const C=20===this.size?24:this.size,s={color:Boolean(this.color)?`var(--s-icon-${this.color})`:void 0},c=t("swirl-icon",`swirl-icon--size-${this.size}`);return i("svg",{key:"874d801e39e1e1c3aa96d1135488869dd1087d0b","aria-hidden":"true",class:c,fill:"none",height:this.size,part:"icon",style:s,viewBox:`0 0 ${C} ${C}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&i(e,{key:"53fccdab186bbbc7879feed0997e2c04e97ae818"},i("path",{key:"6db6496cd267fcba6ff8917787706aaac86c2af1",d:"M6.66665 12.6667V11.3333H2.66665C2.29998 11.3333 1.98609 11.2028 1.72498 10.9417C1.46387 10.6806 1.33331 10.3667 1.33331 10V3.33333C1.33331 2.96667 1.46387 2.65278 1.72498 2.39167C1.98609 2.13056 2.29998 2 2.66665 2H13.3333C13.7 2 14.0139 2.13056 14.275 2.39167C14.5361 2.65278 14.6666 2.96667 14.6666 3.33333V10C14.6666 10.3667 14.5361 10.6806 14.275 10.9417C14.0139 11.2028 13.7 11.3333 13.3333 11.3333H9.33331V12.6667H9.99998C10.1889 12.6667 10.3472 12.7306 10.475 12.8583C10.6028 12.9861 10.6666 13.1444 10.6666 13.3333C10.6666 13.5222 10.6028 13.6806 10.475 13.8083C10.3472 13.9361 10.1889 14 9.99998 14H5.99998C5.81109 14 5.65276 13.9361 5.52498 13.8083C5.3972 13.6806 5.33331 13.5222 5.33331 13.3333C5.33331 13.1444 5.3972 12.9861 5.52498 12.8583C5.65276 12.7306 5.81109 12.6667 5.99998 12.6667H6.66665ZM2.66665 10H13.3333V3.33333H2.66665V10Z",fill:"currentColor"})),(20===this.size||24===this.size)&&i(e,{key:"765c47506eb133ba965acdd8f5b08243bbeb2db1"},i("path",{key:"59bf626ff567bc3f18383fb684aa6e7c21c99907",d:"M10 19V17H4C3.45 17 2.97917 16.8042 2.5875 16.4125C2.19583 16.0208 2 15.55 2 15V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V15C22 15.55 21.8042 16.0208 21.4125 16.4125C21.0208 16.8042 20.55 17 20 17H14V19H15C15.2833 19 15.5208 19.0958 15.7125 19.2875C15.9042 19.4792 16 19.7167 16 20C16 20.2833 15.9042 20.5208 15.7125 20.7125C15.5208 20.9042 15.2833 21 15 21H9C8.71667 21 8.47917 20.9042 8.2875 20.7125C8.09583 20.5208 8 20.2833 8 20C8 19.7167 8.09583 19.4792 8.2875 19.2875C8.47917 19.0958 8.71667 19 9 19H10ZM4 15H20V5H4V15Z",fill:"currentColor"})),28===this.size&&i(e,{key:"f9de25f5571564111cc32960cf34c8c26ed9475f"},i("path",{key:"6cd52cd6a055e0823012153629b5a35678da15e8",d:"M11.6666 22.1667V19.8333H4.66665C4.02498 19.8333 3.47567 19.6049 3.01873 19.1479C2.56179 18.691 2.33331 18.1417 2.33331 17.5V5.83333C2.33331 5.19167 2.56179 4.64236 3.01873 4.18542C3.47567 3.72847 4.02498 3.5 4.66665 3.5H23.3333C23.975 3.5 24.5243 3.72847 24.9812 4.18542C25.4382 4.64236 25.6666 5.19167 25.6666 5.83333V17.5C25.6666 18.1417 25.4382 18.691 24.9812 19.1479C24.5243 19.6049 23.975 19.8333 23.3333 19.8333H16.3333V22.1667H17.5C17.8305 22.1667 18.1076 22.2785 18.3312 22.5021C18.5548 22.7257 18.6666 23.0028 18.6666 23.3333C18.6666 23.6639 18.5548 23.941 18.3312 24.1646C18.1076 24.3882 17.8305 24.5 17.5 24.5H10.5C10.1694 24.5 9.89234 24.3882 9.66873 24.1646C9.44512 23.941 9.33331 23.6639 9.33331 23.3333C9.33331 23.0028 9.44512 22.7257 9.66873 22.5021C9.89234 22.2785 10.1694 22.1667 10.5 22.1667H11.6666ZM4.66665 17.5H23.3333V5.83333H4.66665V17.5Z",fill:"currentColor"})))}};s.style=":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";export{s as swirl_icon_desktop}