@ship-ui/core 0.22.10 → 0.22.11

package/fesm2022/ship-ui-core-ship-list.mjs

@@ -5,13 +5,13 @@ class ShipList {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ShipList, isStandalone: true, selector: "sh-list", ngImport: i0, template: `
     <ng-content />
-  `, isInline: true, styles: ["sh-list{--list-s: var(--shape-2);--list-active-bg: var(--base-1);--list-color: var(--base-9);--list-active-bs: none;--list-item-b: 1px solid transparent;--list-item-active-b: 1px solid --list-active-bg;--list-p: 1.25rem 1rem;--list-item-p: .5rem .75rem;--list-item-gap: .5rem;width:100%;padding:var(--list-p);gap:.5rem;display:flex;flex-direction:column}sh-list.base-1{--list-active-bg: var(--base-1);--list-active-bs: var(--box-shadow-20)}sh-list.outlined{--list-active-bg: transparent;--list-active-bs: none;--list-item-b: 1px solid transparent;--list-item-active-b: 1px solid var(--primary-8)}sh-list.type-b{--list-p: 0;--list-item-p: .625rem .75rem;--list-item-gap: .75rem;--list-s: var(--shape-2)}sh-list.type-b>[action],sh-list.type-b>[item]{color:var(--base-10)}sh-list.type-b>[action].active,sh-list.type-b>[action].selected,sh-list.type-b>[item].active,sh-list.type-b>[item].selected{background:rgb(from var(--base-3) r g b/90%);color:var(--base-12)}sh-list.type-b>[action].active sh-icon:first-child,sh-list.type-b>[action].selected sh-icon:first-child,sh-list.type-b>[item].active sh-icon:first-child,sh-list.type-b>[item].selected sh-icon:first-child{color:var(--primary-8)}sh-list.type-b>[action].active .description,sh-list.type-b>[action].selected .description,sh-list.type-b>[item].active .description,sh-list.type-b>[item].selected .description{color:var(--base-9)}sh-list.type-b>[action] sh-icon:first-child,sh-list.type-b>[item] sh-icon:first-child{font-size:1.125rem;color:var(--base-7);transition:color .15s ease}sh-list.type-b>[action] .text-group,sh-list.type-b>[item] .text-group{display:flex;flex-direction:column;flex:1}sh-list.type-b>[action] .label,sh-list.type-b>[item] .label{font:var(--paragraph-30B)}sh-list.type-b>[action] .description,sh-list.type-b>[item] .description{font:var(--paragraph-40);color:var(--base-7);transition:color .15s ease}sh-list.type-b>[action] .shortcut,sh-list.type-b>[item] .shortcut{display:flex;gap:.25rem}sh-list.type-b>[action] .shortcut kbd,sh-list.type-b>[item] .shortcut kbd{font-family:inherit;background:rgb(from var(--base-3) r g b/80%);border:1px solid rgb(from var(--base-4) r g b/60%);color:var(--base-8);border-radius:var(--shape-1);padding:.125rem .375rem;font-size:.6875rem;line-height:1;box-shadow:0 1px #0000001a}sh-list:empty{padding:0}sh-list>[title]{color:var(--base-8);margin:0 .75rem;font:var(--paragraph-30);line-height:1.5rem}sh-list[shsortable] [item]:active{transform:scale(1)}sh-list>[action],sh-list>[item]{border-radius:var(--list-s);padding:var(--list-item-p);font:var(--paragraph-30B);color:var(--list-color);border:var(--list-item-b);display:flex;align-items:center;gap:var(--list-item-gap);width:100%;-webkit-user-select:none;user-select:none;appearance:none;border:0;text-align:left;text-wrap:balance;background-color:transparent;text-decoration:none;transition:transform 125ms linear,box-shadow 125ms linear;transform:scale(1)}sh-list>[action]:active,sh-list>[item]:active{--list-active-bs: var(--box-shadow-10);transform:scale(.98)}sh-list>[action]:focus,sh-list>[item]:focus{outline:none}sh-list>[action]:focus-visible,sh-list>[item]:focus-visible{outline:2px solid var(--primary-8);outline-offset:2px}sh-list>[action] [suffix],sh-list>[item] [suffix]{margin-left:auto;color:var(--base-8)}sh-list :has(input),sh-list>[action]{cursor:pointer}sh-list>[item]:has(input:checked),sh-list>[action]:has(input:checked),sh-list>[action].active,sh-list>[action].selected{--list-color: var(--base-12);background-color:var(--list-active-bg);box-shadow:var(--list-active-bs);border:var(--list-item-active-b)}sh-list.primary>[item]:has(input:checked) sh-icon:first-child,sh-list.primary>[action]:has(input:checked) sh-icon:first-child,sh-list.primary>[action].active sh-icon:first-child,sh-list.primary>[action].selected sh-icon:first-child{color:var(--primary-8)}sh-list.accent>[item]:has(input:checked) sh-icon:first-child,sh-list.accent>[action]:has(input:checked) sh-icon:first-child,sh-list.accent>[action].active sh-icon:first-child,sh-list.accent>[action].selected sh-icon:first-child{color:var(--accent-8)}sh-list.warn>[item]:has(input:checked) sh-icon:first-child,sh-list.warn>[action]:has(input:checked) sh-icon:first-child,sh-list.warn>[action].active sh-icon:first-child,sh-list.warn>[action].selected sh-icon:first-child{color:var(--warn-8)}sh-list.error>[item]:has(input:checked) sh-icon:first-child,sh-list.error>[action]:has(input:checked) sh-icon:first-child,sh-list.error>[action].active sh-icon:first-child,sh-list.error>[action].selected sh-icon:first-child{color:var(--error-8)}sh-list.success>[item]:has(input:checked) sh-icon:first-child,sh-list.success>[action]:has(input:checked) sh-icon:first-child,sh-list.success>[action].active sh-icon:first-child,sh-list.success>[action].selected sh-icon:first-child{color:var(--success-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".sh-sortable{position:relative}.sh-sortable.dragging [draggable],.sh-sortable.dragging .sortable-ghost{cursor:grabbing;transition:transform 40ms linear}.sh-sortable [draggable]{transform:translate(0);transition:none;z-index:2;-webkit-user-select:none;user-select:none}.sh-sortable:not(.sh-sortable-tree) [draggable]{background:var(--base-1)}.sh-sortable:not(.sh-sortable-tree) [draggable]:not(:has([sort-handle])){cursor:grab}.sh-sortable .sortable-ghost{opacity:.5;z-index:10}.sh-sortable.item-dragged-out .sortable-ghost{display:none}.sh-sortable [sort-handle]{cursor:grab}.sh-sortable.sh-sortable-tree [draggable]{transform:none!important;transition:none!important}.sh-sortable.sh-sortable-tree .drop-inside{background:var(--primary-3)!important;outline:2px solid var(--primary-8)!important;outline-offset:-2px;border-radius:var(--shape-1, 4px)}.sh-sortable.sh-sortable-tree .drop-inside .node-icon,.sh-sortable.sh-sortable-tree .drop-inside sh-tree-node .sh-tree-node-left sh-icon{color:var(--primary-8)!important}.sh-sortable.sh-sortable-tree .drop-before{position:relative;z-index:20}.sh-sortable.sh-sortable-tree .drop-before:before{content:\"\";position:absolute;top:-2px;left:calc(var(--tree-padding-left, 12px) + var(--tree-depth, 0) * var(--tree-indent-step, 12px));right:var(--tree-padding-right, 6px);height:6px;background-image:radial-gradient(circle at 3px 3px,var(--primary-8) 3px,transparent 3px),linear-gradient(to right,var(--primary-8),var(--primary-8));background-repeat:no-repeat,no-repeat;background-position:left center,6px center;background-size:6px 6px,100% 2px;z-index:10;pointer-events:none}.sh-sortable.sh-sortable-tree .drop-after{position:relative;z-index:20}.sh-sortable.sh-sortable-tree .drop-after:after{content:\"\";position:absolute;bottom:-2px;left:calc(var(--tree-padding-left, 12px) + var(--tree-depth, 0) * var(--tree-indent-step, 12px));right:var(--tree-padding-right, 6px);height:6px;background-image:radial-gradient(circle at 3px 3px,var(--primary-8) 3px,transparent 3px),linear-gradient(to right,var(--primary-8),var(--primary-8));background-repeat:no-repeat,no-repeat;background-position:left center,6px center;background-size:6px 6px,100% 2px;z-index:10;pointer-events:none}sh-list{--list-s: var(--shape-2);--list-active-bg: var(--base-1);--list-color: var(--base-9);--list-active-bs: none;--list-item-b: 1px solid transparent;--list-item-active-b: 1px solid --list-active-bg;--list-p: 1.25rem 1rem;--list-item-p: .5rem .75rem;--list-item-gap: .5rem;width:100%;padding:var(--list-p);gap:.5rem;display:flex;flex-direction:column}sh-list.base-1{--list-active-bg: var(--base-1);--list-active-bs: var(--box-shadow-20)}sh-list.outlined{--list-active-bg: transparent;--list-active-bs: none;--list-item-b: 1px solid transparent;--list-item-active-b: 1px solid var(--primary-8)}sh-list.type-b{--list-p: 0;--list-item-p: .625rem .75rem;--list-item-gap: .75rem;--list-s: var(--shape-2)}sh-list.type-b>[action],sh-list.type-b>[item]{color:var(--base-10)}sh-list.type-b>[action].active,sh-list.type-b>[action].selected,sh-list.type-b>[item].active,sh-list.type-b>[item].selected{background:rgb(from var(--base-3) r g b/90%);color:var(--base-12)}sh-list.type-b>[action].active sh-icon:first-child,sh-list.type-b>[action].selected sh-icon:first-child,sh-list.type-b>[item].active sh-icon:first-child,sh-list.type-b>[item].selected sh-icon:first-child{color:var(--primary-8)}sh-list.type-b>[action].active .description,sh-list.type-b>[action].selected .description,sh-list.type-b>[item].active .description,sh-list.type-b>[item].selected .description{color:var(--base-9)}sh-list.type-b>[action] sh-icon:first-child,sh-list.type-b>[item] sh-icon:first-child{font-size:1.125rem;color:var(--base-7);transition:color .15s ease}sh-list.type-b>[action] .text-group,sh-list.type-b>[item] .text-group{display:flex;flex-direction:column;flex:1}sh-list.type-b>[action] .label,sh-list.type-b>[item] .label{font:var(--paragraph-30B)}sh-list.type-b>[action] .description,sh-list.type-b>[item] .description{font:var(--paragraph-40);color:var(--base-7);transition:color .15s ease}sh-list.type-b>[action] .shortcut,sh-list.type-b>[item] .shortcut{display:flex;gap:.25rem}sh-list.type-b>[action] .shortcut kbd,sh-list.type-b>[item] .shortcut kbd{font-family:inherit;background:rgb(from var(--base-3) r g b/80%);border:1px solid rgb(from var(--base-4) r g b/60%);color:var(--base-8);border-radius:var(--shape-1);padding:.125rem .375rem;font-size:.6875rem;line-height:1;box-shadow:0 1px #0000001a}sh-list:empty{padding:0}sh-list>[title]{color:var(--base-8);margin:0 .75rem;font:var(--paragraph-30);line-height:1.5rem}sh-list[shsortable] [item]:active{transform:scale(1)}sh-list>[action],sh-list>[item]{border-radius:var(--list-s);padding:var(--list-item-p);font:var(--paragraph-30B);color:var(--list-color);border:var(--list-item-b);display:flex;align-items:center;gap:var(--list-item-gap);width:100%;-webkit-user-select:none;user-select:none;appearance:none;border:0;text-align:left;text-wrap:balance;background-color:transparent;text-decoration:none;transition:transform 125ms linear,box-shadow 125ms linear;transform:scale(1)}sh-list>[action]:active,sh-list>[item]:active{--list-active-bs: var(--box-shadow-10);transform:scale(.98)}sh-list>[action]:focus,sh-list>[item]:focus{outline:none}sh-list>[action]:focus-visible,sh-list>[item]:focus-visible{outline:2px solid var(--primary-8);outline-offset:2px}sh-list>[action] [suffix],sh-list>[item] [suffix]{margin-left:auto;color:var(--base-8)}sh-list :has(input),sh-list>[action]{cursor:pointer}sh-list>[item]:has(input:checked),sh-list>[action]:has(input:checked),sh-list>[action].active,sh-list>[action].selected{--list-color: var(--base-12);background-color:var(--list-active-bg);box-shadow:var(--list-active-bs);border:var(--list-item-active-b)}sh-list.primary>[item]:has(input:checked) sh-icon:first-child,sh-list.primary>[action]:has(input:checked) sh-icon:first-child,sh-list.primary>[action].active sh-icon:first-child,sh-list.primary>[action].selected sh-icon:first-child{color:var(--primary-8)}sh-list.accent>[item]:has(input:checked) sh-icon:first-child,sh-list.accent>[action]:has(input:checked) sh-icon:first-child,sh-list.accent>[action].active sh-icon:first-child,sh-list.accent>[action].selected sh-icon:first-child{color:var(--accent-8)}sh-list.warn>[item]:has(input:checked) sh-icon:first-child,sh-list.warn>[action]:has(input:checked) sh-icon:first-child,sh-list.warn>[action].active sh-icon:first-child,sh-list.warn>[action].selected sh-icon:first-child{color:var(--warn-8)}sh-list.error>[item]:has(input:checked) sh-icon:first-child,sh-list.error>[action]:has(input:checked) sh-icon:first-child,sh-list.error>[action].active sh-icon:first-child,sh-list.error>[action].selected sh-icon:first-child{color:var(--error-8)}sh-list.success>[item]:has(input:checked) sh-icon:first-child,sh-list.success>[action]:has(input:checked) sh-icon:first-child,sh-list.success>[action].active sh-icon:first-child,sh-list.success>[action].selected sh-icon:first-child{color:var(--success-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipList, decorators: [{
             type: Component,
             args: [{ selector: 'sh-list', encapsulation: ViewEncapsulation.None, imports: [], template: `
     <ng-content />
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["sh-list{--list-s: var(--shape-2);--list-active-bg: var(--base-1);--list-color: var(--base-9);--list-active-bs: none;--list-item-b: 1px solid transparent;--list-item-active-b: 1px solid --list-active-bg;--list-p: 1.25rem 1rem;--list-item-p: .5rem .75rem;--list-item-gap: .5rem;width:100%;padding:var(--list-p);gap:.5rem;display:flex;flex-direction:column}sh-list.base-1{--list-active-bg: var(--base-1);--list-active-bs: var(--box-shadow-20)}sh-list.outlined{--list-active-bg: transparent;--list-active-bs: none;--list-item-b: 1px solid transparent;--list-item-active-b: 1px solid var(--primary-8)}sh-list.type-b{--list-p: 0;--list-item-p: .625rem .75rem;--list-item-gap: .75rem;--list-s: var(--shape-2)}sh-list.type-b>[action],sh-list.type-b>[item]{color:var(--base-10)}sh-list.type-b>[action].active,sh-list.type-b>[action].selected,sh-list.type-b>[item].active,sh-list.type-b>[item].selected{background:rgb(from var(--base-3) r g b/90%);color:var(--base-12)}sh-list.type-b>[action].active sh-icon:first-child,sh-list.type-b>[action].selected sh-icon:first-child,sh-list.type-b>[item].active sh-icon:first-child,sh-list.type-b>[item].selected sh-icon:first-child{color:var(--primary-8)}sh-list.type-b>[action].active .description,sh-list.type-b>[action].selected .description,sh-list.type-b>[item].active .description,sh-list.type-b>[item].selected .description{color:var(--base-9)}sh-list.type-b>[action] sh-icon:first-child,sh-list.type-b>[item] sh-icon:first-child{font-size:1.125rem;color:var(--base-7);transition:color .15s ease}sh-list.type-b>[action] .text-group,sh-list.type-b>[item] .text-group{display:flex;flex-direction:column;flex:1}sh-list.type-b>[action] .label,sh-list.type-b>[item] .label{font:var(--paragraph-30B)}sh-list.type-b>[action] .description,sh-list.type-b>[item] .description{font:var(--paragraph-40);color:var(--base-7);transition:color .15s ease}sh-list.type-b>[action] .shortcut,sh-list.type-b>[item] .shortcut{display:flex;gap:.25rem}sh-list.type-b>[action] .shortcut kbd,sh-list.type-b>[item] .shortcut kbd{font-family:inherit;background:rgb(from var(--base-3) r g b/80%);border:1px solid rgb(from var(--base-4) r g b/60%);color:var(--base-8);border-radius:var(--shape-1);padding:.125rem .375rem;font-size:.6875rem;line-height:1;box-shadow:0 1px #0000001a}sh-list:empty{padding:0}sh-list>[title]{color:var(--base-8);margin:0 .75rem;font:var(--paragraph-30);line-height:1.5rem}sh-list[shsortable] [item]:active{transform:scale(1)}sh-list>[action],sh-list>[item]{border-radius:var(--list-s);padding:var(--list-item-p);font:var(--paragraph-30B);color:var(--list-color);border:var(--list-item-b);display:flex;align-items:center;gap:var(--list-item-gap);width:100%;-webkit-user-select:none;user-select:none;appearance:none;border:0;text-align:left;text-wrap:balance;background-color:transparent;text-decoration:none;transition:transform 125ms linear,box-shadow 125ms linear;transform:scale(1)}sh-list>[action]:active,sh-list>[item]:active{--list-active-bs: var(--box-shadow-10);transform:scale(.98)}sh-list>[action]:focus,sh-list>[item]:focus{outline:none}sh-list>[action]:focus-visible,sh-list>[item]:focus-visible{outline:2px solid var(--primary-8);outline-offset:2px}sh-list>[action] [suffix],sh-list>[item] [suffix]{margin-left:auto;color:var(--base-8)}sh-list :has(input),sh-list>[action]{cursor:pointer}sh-list>[item]:has(input:checked),sh-list>[action]:has(input:checked),sh-list>[action].active,sh-list>[action].selected{--list-color: var(--base-12);background-color:var(--list-active-bg);box-shadow:var(--list-active-bs);border:var(--list-item-active-b)}sh-list.primary>[item]:has(input:checked) sh-icon:first-child,sh-list.primary>[action]:has(input:checked) sh-icon:first-child,sh-list.primary>[action].active sh-icon:first-child,sh-list.primary>[action].selected sh-icon:first-child{color:var(--primary-8)}sh-list.accent>[item]:has(input:checked) sh-icon:first-child,sh-list.accent>[action]:has(input:checked) sh-icon:first-child,sh-list.accent>[action].active sh-icon:first-child,sh-list.accent>[action].selected sh-icon:first-child{color:var(--accent-8)}sh-list.warn>[item]:has(input:checked) sh-icon:first-child,sh-list.warn>[action]:has(input:checked) sh-icon:first-child,sh-list.warn>[action].active sh-icon:first-child,sh-list.warn>[action].selected sh-icon:first-child{color:var(--warn-8)}sh-list.error>[item]:has(input:checked) sh-icon:first-child,sh-list.error>[action]:has(input:checked) sh-icon:first-child,sh-list.error>[action].active sh-icon:first-child,sh-list.error>[action].selected sh-icon:first-child{color:var(--error-8)}sh-list.success>[item]:has(input:checked) sh-icon:first-child,sh-list.success>[action]:has(input:checked) sh-icon:first-child,sh-list.success>[action].active sh-icon:first-child,sh-list.success>[action].selected sh-icon:first-child{color:var(--success-8)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".sh-sortable{position:relative}.sh-sortable.dragging [draggable],.sh-sortable.dragging .sortable-ghost{cursor:grabbing;transition:transform 40ms linear}.sh-sortable [draggable]{transform:translate(0);transition:none;z-index:2;-webkit-user-select:none;user-select:none}.sh-sortable:not(.sh-sortable-tree) [draggable]{background:var(--base-1)}.sh-sortable:not(.sh-sortable-tree) [draggable]:not(:has([sort-handle])){cursor:grab}.sh-sortable .sortable-ghost{opacity:.5;z-index:10}.sh-sortable.item-dragged-out .sortable-ghost{display:none}.sh-sortable [sort-handle]{cursor:grab}.sh-sortable.sh-sortable-tree [draggable]{transform:none!important;transition:none!important}.sh-sortable.sh-sortable-tree .drop-inside{background:var(--primary-3)!important;outline:2px solid var(--primary-8)!important;outline-offset:-2px;border-radius:var(--shape-1, 4px)}.sh-sortable.sh-sortable-tree .drop-inside .node-icon,.sh-sortable.sh-sortable-tree .drop-inside sh-tree-node .sh-tree-node-left sh-icon{color:var(--primary-8)!important}.sh-sortable.sh-sortable-tree .drop-before{position:relative;z-index:20}.sh-sortable.sh-sortable-tree .drop-before:before{content:\"\";position:absolute;top:-2px;left:calc(var(--tree-padding-left, 12px) + var(--tree-depth, 0) * var(--tree-indent-step, 12px));right:var(--tree-padding-right, 6px);height:6px;background-image:radial-gradient(circle at 3px 3px,var(--primary-8) 3px,transparent 3px),linear-gradient(to right,var(--primary-8),var(--primary-8));background-repeat:no-repeat,no-repeat;background-position:left center,6px center;background-size:6px 6px,100% 2px;z-index:10;pointer-events:none}.sh-sortable.sh-sortable-tree .drop-after{position:relative;z-index:20}.sh-sortable.sh-sortable-tree .drop-after:after{content:\"\";position:absolute;bottom:-2px;left:calc(var(--tree-padding-left, 12px) + var(--tree-depth, 0) * var(--tree-indent-step, 12px));right:var(--tree-padding-right, 6px);height:6px;background-image:radial-gradient(circle at 3px 3px,var(--primary-8) 3px,transparent 3px),linear-gradient(to right,var(--primary-8),var(--primary-8));background-repeat:no-repeat,no-repeat;background-position:left center,6px center;background-size:6px 6px,100% 2px;z-index:10;pointer-events:none}sh-list{--list-s: var(--shape-2);--list-active-bg: var(--base-1);--list-color: var(--base-9);--list-active-bs: none;--list-item-b: 1px solid transparent;--list-item-active-b: 1px solid --list-active-bg;--list-p: 1.25rem 1rem;--list-item-p: .5rem .75rem;--list-item-gap: .5rem;width:100%;padding:var(--list-p);gap:.5rem;display:flex;flex-direction:column}sh-list.base-1{--list-active-bg: var(--base-1);--list-active-bs: var(--box-shadow-20)}sh-list.outlined{--list-active-bg: transparent;--list-active-bs: none;--list-item-b: 1px solid transparent;--list-item-active-b: 1px solid var(--primary-8)}sh-list.type-b{--list-p: 0;--list-item-p: .625rem .75rem;--list-item-gap: .75rem;--list-s: var(--shape-2)}sh-list.type-b>[action],sh-list.type-b>[item]{color:var(--base-10)}sh-list.type-b>[action].active,sh-list.type-b>[action].selected,sh-list.type-b>[item].active,sh-list.type-b>[item].selected{background:rgb(from var(--base-3) r g b/90%);color:var(--base-12)}sh-list.type-b>[action].active sh-icon:first-child,sh-list.type-b>[action].selected sh-icon:first-child,sh-list.type-b>[item].active sh-icon:first-child,sh-list.type-b>[item].selected sh-icon:first-child{color:var(--primary-8)}sh-list.type-b>[action].active .description,sh-list.type-b>[action].selected .description,sh-list.type-b>[item].active .description,sh-list.type-b>[item].selected .description{color:var(--base-9)}sh-list.type-b>[action] sh-icon:first-child,sh-list.type-b>[item] sh-icon:first-child{font-size:1.125rem;color:var(--base-7);transition:color .15s ease}sh-list.type-b>[action] .text-group,sh-list.type-b>[item] .text-group{display:flex;flex-direction:column;flex:1}sh-list.type-b>[action] .label,sh-list.type-b>[item] .label{font:var(--paragraph-30B)}sh-list.type-b>[action] .description,sh-list.type-b>[item] .description{font:var(--paragraph-40);color:var(--base-7);transition:color .15s ease}sh-list.type-b>[action] .shortcut,sh-list.type-b>[item] .shortcut{display:flex;gap:.25rem}sh-list.type-b>[action] .shortcut kbd,sh-list.type-b>[item] .shortcut kbd{font-family:inherit;background:rgb(from var(--base-3) r g b/80%);border:1px solid rgb(from var(--base-4) r g b/60%);color:var(--base-8);border-radius:var(--shape-1);padding:.125rem .375rem;font-size:.6875rem;line-height:1;box-shadow:0 1px #0000001a}sh-list:empty{padding:0}sh-list>[title]{color:var(--base-8);margin:0 .75rem;font:var(--paragraph-30);line-height:1.5rem}sh-list[shsortable] [item]:active{transform:scale(1)}sh-list>[action],sh-list>[item]{border-radius:var(--list-s);padding:var(--list-item-p);font:var(--paragraph-30B);color:var(--list-color);border:var(--list-item-b);display:flex;align-items:center;gap:var(--list-item-gap);width:100%;-webkit-user-select:none;user-select:none;appearance:none;border:0;text-align:left;text-wrap:balance;background-color:transparent;text-decoration:none;transition:transform 125ms linear,box-shadow 125ms linear;transform:scale(1)}sh-list>[action]:active,sh-list>[item]:active{--list-active-bs: var(--box-shadow-10);transform:scale(.98)}sh-list>[action]:focus,sh-list>[item]:focus{outline:none}sh-list>[action]:focus-visible,sh-list>[item]:focus-visible{outline:2px solid var(--primary-8);outline-offset:2px}sh-list>[action] [suffix],sh-list>[item] [suffix]{margin-left:auto;color:var(--base-8)}sh-list :has(input),sh-list>[action]{cursor:pointer}sh-list>[item]:has(input:checked),sh-list>[action]:has(input:checked),sh-list>[action].active,sh-list>[action].selected{--list-color: var(--base-12);background-color:var(--list-active-bg);box-shadow:var(--list-active-bs);border:var(--list-item-active-b)}sh-list.primary>[item]:has(input:checked) sh-icon:first-child,sh-list.primary>[action]:has(input:checked) sh-icon:first-child,sh-list.primary>[action].active sh-icon:first-child,sh-list.primary>[action].selected sh-icon:first-child{color:var(--primary-8)}sh-list.accent>[item]:has(input:checked) sh-icon:first-child,sh-list.accent>[action]:has(input:checked) sh-icon:first-child,sh-list.accent>[action].active sh-icon:first-child,sh-list.accent>[action].selected sh-icon:first-child{color:var(--accent-8)}sh-list.warn>[item]:has(input:checked) sh-icon:first-child,sh-list.warn>[action]:has(input:checked) sh-icon:first-child,sh-list.warn>[action].active sh-icon:first-child,sh-list.warn>[action].selected sh-icon:first-child{color:var(--warn-8)}sh-list.error>[item]:has(input:checked) sh-icon:first-child,sh-list.error>[action]:has(input:checked) sh-icon:first-child,sh-list.error>[action].active sh-icon:first-child,sh-list.error>[action].selected sh-icon:first-child{color:var(--error-8)}sh-list.success>[item]:has(input:checked) sh-icon:first-child,sh-list.success>[action]:has(input:checked) sh-icon:first-child,sh-list.success>[action].active sh-icon:first-child,sh-list.success>[action].selected sh-icon:first-child{color:var(--success-8)}\n"] }]
         }] });
 
 /**

package/fesm2022/ship-ui-core-ship-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ship-ui-core-ship-list.mjs","sources":["../../../projects/ship-ui/ship-list/ship-list.ts","../../../projects/ship-ui/ship-list/ship-ui-core-ship-list.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'sh-list',\n  styleUrl: './ship-list.scss',\n  encapsulation: ViewEncapsulation.None,\n  imports: [],\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ShipList {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAYa,QAAQ,CAAA;8GAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EALT;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,wuJAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAGU,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAVpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,iBAEJ,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,EAAE,EAAA,QAAA,EACD;;GAET,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,wuJAAA,CAAA,EAAA;;;ACVjD;;AAEG;;;;"}
+{"version":3,"file":"ship-ui-core-ship-list.mjs","sources":["../../../projects/ship-ui/ship-list/ship-list.ts","../../../projects/ship-ui/ship-list/ship-ui-core-ship-list.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'sh-list',\n  styleUrl: './ship-list.scss',\n  encapsulation: ViewEncapsulation.None,\n  imports: [],\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ShipList {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAYa,QAAQ,CAAA;8GAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EALT;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,o5NAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAGU,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAVpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,iBAEJ,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,EAAE,EAAA,QAAA,EACD;;GAET,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,o5NAAA,CAAA,EAAA;;;ACVjD;;AAEG;;;;"}

package/fesm2022/ship-ui-core-ship-sortable.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, ElementRef, Renderer2, signal, input, output, effect, HostListener, Directive } from '@angular/core';
+import { inject, DOCUMENT, ElementRef, Renderer2, signal, input, model, output, effect, HostListener, Directive, computed } from '@angular/core';
 import { isObservable, firstValueFrom } from 'rxjs';
 
 var _a;
@@ -75,13 +75,22 @@ class ShipSortable {
         ...(ngDevMode ? [undefined, { debugName: "shSortable" }] : /* istanbul ignore next */ []));
         this.sortableGroup = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "sortableGroup" }] : /* istanbul ignore next */ []));
+        this.sortingMode = input('list', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortingMode" }] : /* istanbul ignore next */ []));
+        this.treeItems = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeItems" }] : /* istanbul ignore next */ []));
         this.sortDrop = output();
         this.afterDrop = output();
         this.crossDrop = output();
+        this.treeDrop = output();
         this.dragStartIndex = signal(-1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragStartIndex" }] : /* istanbul ignore next */ []));
         this.dragToIndex = signal(-1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragToIndex" }] : /* istanbul ignore next */ []));
+        this.treeHoverIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeHoverIndex" }] : /* istanbul ignore next */ []));
+        this.treeHoverPosition = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeHoverPosition" }] : /* istanbul ignore next */ []));
         this.initialPositions = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "initialPositions" }] : /* istanbul ignore next */ []));
         this.dragables = signal([], /* @ts-ignore */
@@ -90,6 +99,9 @@ class ShipSortable {
         this.isDropping = false;
         this.isCrossTarget = false;
         this.draggingEffect = effect(() => {
+            if (this.sortingMode() === 'tree') {
+                return;
+            }
             const currentDragPosIndex = this.dragToIndex();
             const startIndex = this.dragStartIndex();
             const dragables = this.dragables();
@@ -217,7 +229,22 @@ class ShipSortable {
             const rect = draggedElement.getBoundingClientRect();
             const dragOffsetX = Math.max(0, e.clientX - rect.left);
             const dragOffsetY = Math.max(0, e.clientY - rect.top);
-            e.dataTransfer.setDragImage(draggedElement, dragOffsetX, dragOffsetY);
+            if (this.sortingMode() === 'tree') {
+                const clone = draggedElement.cloneNode(true);
+                clone.querySelector('.node-icon')?.remove();
+                clone.querySelector('.caret-container')?.remove();
+                clone.style.opacity = '0.8';
+                clone.style.width = `${rect.width}px`;
+                clone.style.position = 'absolute';
+                clone.style.top = '-9999px';
+                clone.style.left = '-9999px';
+                this.#document.body.appendChild(clone);
+                e.dataTransfer.setDragImage(clone, -12, -30);
+                setTimeout(() => this.#document.body.removeChild(clone), 0);
+            }
+            else {
+                e.dataTransfer.setDragImage(draggedElement, dragOffsetX, dragOffsetY);
+            }
             const draggedElementIndex = this.getIndexOfElement(draggedElement);
             this.dragStartIndex.set(draggedElementIndex);
             this.dragToIndex.set(draggedElementIndex);
@@ -305,6 +332,56 @@ class ShipSortable {
         e.dataTransfer.dropEffect = 'move';
         if (_a.activeTarget !== this)
             return;
+        if (this.sortingMode() === 'tree') {
+            const targetElement = e.target;
+            const hoveredDraggable = targetElement.closest('[draggable]');
+            if (hoveredDraggable && this.#selfEl.nativeElement.contains(hoveredDraggable)) {
+                const targetIdx = this.getIndexOfElement(hoveredDraggable);
+                if (targetIdx !== -1) {
+                    const rect = hoveredDraggable.getBoundingClientRect();
+                    const relativeY = (e.clientY - rect.top) / rect.height;
+                    const isFolder = hoveredDraggable.hasAttribute('sortable-folder') ||
+                        hoveredDraggable.getAttribute('sortable-folder') === 'true' ||
+                        hoveredDraggable.hasAttribute('sortable-dir') ||
+                        hoveredDraggable.getAttribute('sortable-dir') === 'true';
+                    let position;
+                    if (isFolder) {
+                        if (relativeY < 0.25) {
+                            position = 'before';
+                        }
+                        else if (relativeY > 0.75) {
+                            position = 'after';
+                        }
+                        else {
+                            position = 'inside';
+                        }
+                    }
+                    else {
+                        if (relativeY < 0.5) {
+                            position = 'before';
+                        }
+                        else {
+                            position = 'after';
+                        }
+                    }
+                    if (this.treeHoverIndex() !== targetIdx || this.treeHoverPosition() !== position) {
+                        this.#clearTreeHoverClasses();
+                        this.treeHoverIndex.set(targetIdx);
+                        this.treeHoverPosition.set(position);
+                        this.#renderer.addClass(hoveredDraggable, `drop-${position}`);
+                    }
+                    if (this.dragToIndex() !== targetIdx) {
+                        this.dragToIndex.set(targetIdx);
+                    }
+                }
+            }
+            else {
+                this.#clearTreeHoverClasses();
+                this.treeHoverIndex.set(-1);
+                this.treeHoverPosition.set(null);
+            }
+            return;
+        }
         const container = this.#selfEl.nativeElement;
         const containerRect = container.getBoundingClientRect();
         // Convert viewport coordinates to container-relative coordinate space
@@ -327,6 +404,14 @@ class ShipSortable {
             this.dragToIndex.set(closestSlotIndex);
         }
     }
+    #clearTreeHoverClasses() {
+        const dragables = this.dragables();
+        for (const el of dragables) {
+            this.#renderer.removeClass(el, 'drop-before');
+            this.#renderer.removeClass(el, 'drop-after');
+            this.#renderer.removeClass(el, 'drop-inside');
+        }
+    }
     getVisualIndexOfElement(i) {
         const startIndex = this.dragStartIndex();
         const currentDragPosIndex = this.dragToIndex();
@@ -352,6 +437,34 @@ class ShipSortable {
         // Immediately kill drag transitions before any signal updates
         this.#renderer.removeClass(_a.activeSource.#selfEl.nativeElement, 'dragging');
         this.#renderer.removeClass(this.#selfEl.nativeElement, 'dragging');
+        if (this.sortingMode() === 'tree') {
+            this.isDropping = true;
+            if (_a.activeSource !== this) {
+                _a.activeSource.isDropping = true;
+            }
+            const prevIdx = _a.activeSource.dragStartIndex();
+            const currIdx = this.dragToIndex();
+            const pos = this.treeHoverPosition();
+            if (prevIdx !== -1 && currIdx !== -1 && pos) {
+                const event = {
+                    previousIndex: prevIdx,
+                    currentIndex: currIdx,
+                    position: pos,
+                };
+                const manager = this.shSortable();
+                if (manager && typeof manager.drop === 'function') {
+                    manager.drop(event, this.treeItems());
+                }
+                else {
+                    this.treeDrop.emit(event);
+                }
+            }
+            this.#cleanupDragState();
+            if (_a.activeSource !== this) {
+                _a.activeSource.#cleanupDragState();
+            }
+            return;
+        }
         if (_a.activeSource === this) {
             // Internal Drop
             if (this.dragStartIndex() !== -1 && this.dragToIndex() !== -1 && this.dragStartIndex() !== this.dragToIndex()) {
@@ -417,8 +530,11 @@ class ShipSortable {
             this.#crossSpacerEl.set(null);
         }
         this.#resetStyles();
+        this.#clearTreeHoverClasses();
         this.dragStartIndex.set(-1);
         this.dragToIndex.set(-1);
+        this.treeHoverIndex.set(-1);
+        this.treeHoverPosition.set(null);
         this.isCrossTarget = false;
     }
     #resetStyles() {
@@ -426,6 +542,9 @@ class ShipSortable {
         for (const el of dragables) {
             this.#renderer.setStyle(el, 'transform', '');
             this.#renderer.removeClass(el, 'sortable-ghost');
+            this.#renderer.removeClass(el, 'drop-before');
+            this.#renderer.removeClass(el, 'drop-after');
+            this.#renderer.removeClass(el, 'drop-inside');
         }
     }
     #dragableObserver;
@@ -434,7 +553,7 @@ class ShipSortable {
         this.abortController?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSortable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipSortable, isStandalone: true, selector: "[shSortable]", inputs: { shSortable: { classPropertyName: "shSortable", publicName: "shSortable", isSignal: true, isRequired: false, transformFunction: null }, sortableGroup: { classPropertyName: "sortableGroup", publicName: "sortableGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDrop: "sortDrop", afterDrop: "afterDrop", crossDrop: "crossDrop" }, host: { listeners: { "dragenter": "dragEnter($event)", "dragleave": "dragLeave($event)", "dragover": "dragOver($event)", "drop": "drop()" }, classAttribute: "sh-sortable" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipSortable, isStandalone: true, selector: "[shSortable]", inputs: { shSortable: { classPropertyName: "shSortable", publicName: "shSortable", isSignal: true, isRequired: false, transformFunction: null }, sortableGroup: { classPropertyName: "sortableGroup", publicName: "sortableGroup", isSignal: true, isRequired: false, transformFunction: null }, sortingMode: { classPropertyName: "sortingMode", publicName: "sortingMode", isSignal: true, isRequired: false, transformFunction: null }, treeItems: { classPropertyName: "treeItems", publicName: "treeItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeItems: "treeItemsChange", sortDrop: "sortDrop", afterDrop: "afterDrop", crossDrop: "crossDrop", treeDrop: "treeDrop" }, host: { listeners: { "dragenter": "dragEnter($event)", "dragleave": "dragLeave($event)", "dragover": "dragOver($event)", "drop": "drop()" }, properties: { "class.sh-sortable-tree": "sortingMode() === 'tree'" }, classAttribute: "sh-sortable" }, ngImport: i0 }); }
 }
 _a = ShipSortable;
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSortable, decorators: [{
@@ -444,9 +563,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                     standalone: true,
                     host: {
                         class: 'sh-sortable',
+                        '[class.sh-sortable-tree]': "sortingMode() === 'tree'",
                     },
                 }]
-        }], propDecorators: { shSortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "shSortable", required: false }] }], sortableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortableGroup", required: false }] }], sortDrop: [{ type: i0.Output, args: ["sortDrop"] }], afterDrop: [{ type: i0.Output, args: ["afterDrop"] }], crossDrop: [{ type: i0.Output, args: ["crossDrop"] }], dragEnter: [{
+        }], propDecorators: { shSortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "shSortable", required: false }] }], sortableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortableGroup", required: false }] }], sortingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingMode", required: false }] }], treeItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeItems", required: false }] }, { type: i0.Output, args: ["treeItemsChange"] }], sortDrop: [{ type: i0.Output, args: ["sortDrop"] }], afterDrop: [{ type: i0.Output, args: ["afterDrop"] }], crossDrop: [{ type: i0.Output, args: ["crossDrop"] }], treeDrop: [{ type: i0.Output, args: ["treeDrop"] }], dragEnter: [{
                 type: HostListener,
                 args: ['dragenter', ['$event']]
             }], dragLeave: [{
@@ -476,10 +596,123 @@ function transferArrayItem(currentArray, targetArray, currentIndex, targetIndex)
         targetArray.splice(targetIndex, 0, item);
     }
 }
+function createTreeSortableManager(nodesSignal, config) {
+    const getId = config?.getId || ((item) => item.id);
+    const getParentId = config?.getParentId || ((item) => item.parentId);
+    const setParentId = config?.setParentId || ((item, pid) => (item.parentId = pid));
+    const isFolder = config?.isFolder || ((item) => item.type === 'dir');
+    const getIsOpen = config?.isOpen || ((item) => !!item.isOpen);
+    const setIsOpen = config?.setIsOpen ||
+        ((item, open) => {
+            item.isOpen = open;
+        });
+    const isDescendant = (parentId, childId, list) => {
+        let current = list.find((n) => getId(n) === childId);
+        while (current && getParentId(current) !== null) {
+            if (getParentId(current) === parentId) {
+                return true;
+            }
+            const pid = getParentId(current);
+            current = list.find((n) => getId(n) === pid);
+        }
+        return false;
+    };
+    const getSubtree = (rootId, list) => {
+        const queue = [rootId];
+        const rootItem = list.find((n) => getId(n) === rootId);
+        if (!rootItem)
+            return [];
+        let index = 0;
+        while (index < queue.length) {
+            const parentId = queue[index++];
+            const children = list.filter((n) => getParentId(n) === parentId);
+            for (const child of children) {
+                const cid = getId(child);
+                if (!queue.includes(cid)) {
+                    queue.push(cid);
+                }
+            }
+        }
+        return list.filter((n) => queue.includes(getId(n)));
+    };
+    const visibleNodes = computed(() => {
+        const list = nodesSignal();
+        const visible = [];
+        const isNodeVisible = (node) => {
+            let currentParentId = getParentId(node);
+            while (currentParentId !== null && currentParentId !== undefined) {
+                const parent = list.find((n) => getId(n) === currentParentId);
+                if (!parent || !getIsOpen(parent)) {
+                    return false;
+                }
+                currentParentId = getParentId(parent);
+            }
+            return true;
+        };
+        for (const node of list) {
+            const parentId = getParentId(node);
+            if (parentId === null || parentId === undefined || isNodeVisible(node)) {
+                visible.push(node);
+            }
+        }
+        return visible;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
+    return {
+        visibleNodes,
+        drop(event, visibleNodesList) {
+            const draggedItem = visibleNodesList[event.previousIndex];
+            const targetItem = visibleNodesList[event.currentIndex];
+            if (!draggedItem || !targetItem || getId(draggedItem) === getId(targetItem))
+                return;
+            nodesSignal.update((allNodes) => {
+                // Prevent dropping inside itself or its descendants
+                if (isDescendant(getId(draggedItem), getId(targetItem), allNodes)) {
+                    return allNodes;
+                }
+                const draggedSubtree = getSubtree(getId(draggedItem), allNodes);
+                const draggedIds = new Set(draggedSubtree.map((n) => getId(n)));
+                const filteredNodes = allNodes.filter((n) => !draggedIds.has(getId(n)));
+                const targetIdxInFiltered = filteredNodes.findIndex((n) => getId(n) === getId(targetItem));
+                if (targetIdxInFiltered === -1)
+                    return allNodes;
+                let newParentId = null;
+                if (event.position === 'inside') {
+                    newParentId = getId(targetItem);
+                    const targetInMain = filteredNodes.find((n) => getId(n) === getId(targetItem));
+                    if (targetInMain)
+                        setIsOpen(targetInMain, true);
+                }
+                else {
+                    newParentId = getParentId(targetItem);
+                }
+                const updatedDraggedSubtree = draggedSubtree.map((node) => {
+                    const updatedNode = { ...node };
+                    if (getId(updatedNode) === getId(draggedItem)) {
+                        setParentId(updatedNode, newParentId);
+                    }
+                    return updatedNode;
+                });
+                if (event.position === 'before') {
+                    filteredNodes.splice(targetIdxInFiltered, 0, ...updatedDraggedSubtree);
+                }
+                else if (event.position === 'after') {
+                    const targetSubtree = getSubtree(getId(targetItem), filteredNodes);
+                    const insertAt = targetIdxInFiltered + targetSubtree.length;
+                    filteredNodes.splice(insertAt, 0, ...updatedDraggedSubtree);
+                }
+                else if (event.position === 'inside') {
+                    filteredNodes.splice(targetIdxInFiltered + 1, 0, ...updatedDraggedSubtree);
+                }
+                return filteredNodes;
+            });
+        },
+    };
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ShipSortable, createSortableManager, moveIndex, transferArrayItem };
+export { ShipSortable, createSortableManager, createTreeSortableManager, moveIndex, transferArrayItem };
 //# sourceMappingURL=ship-ui-core-ship-sortable.mjs.map