@fusion.dev/helix-headless 0.148.0 → 0.149.1

package/dist/tooltip/root/tooltip-root.d.ts

@@ -5,31 +5,33 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * @summary A short text that appears next to an element on hover and focus.
  *
  * @description
- * The trigger is slotted and stays your own element. The bubble renders in the
+ * The trigger stays your own element. The bubble renders in the
  * top layer through the popover API, so an ancestor with `overflow: hidden`
  * does not clip it and no `z-index` is needed. `FloatingController` positions
  * it and flips it to another side when the preferred side does not fit.
  *
- * **The tooltip describes its trigger itself, in both forms.** Wrap the
- * trigger, or place the tooltip beside it and name the trigger with `for`:
+ * **Place the tooltip beside its trigger, name the trigger with `for`, and
+ * name the tooltip in the trigger's `aria-describedby`.** The description is
+ * then in your own markup, so it is in the server's HTML and in the
+ * accessibility tree at rest, in every browser, before anyone points at the
+ * trigger or focuses it:
  *
  * ```html
- * <helix-headless-button id="save">Save</helix-headless-button>
- * <helix-headless-tooltip for="save" content="Save your work"></helix-headless-tooltip>
+ * <helix-headless-button aria-describedby="save-tip" id="save">Save</helix-headless-button>
+ * <helix-headless-tooltip content="Save your work" for="save" id="save-tip"></helix-headless-tooltip>
  * ```
  *
- * The link is an element reference on the control that takes focus, and it is
- * never written into your markup before a reader has acted. A trigger that is a
- * Helix component is described at once, inside its own shadow root. A plain
- * element in your markup is described when a reader first points at it or
- * focuses it, which is after any hydration, and only where you have written no
- * `aria-describedby` or `aria-labelledby` of your own. Write
- * `aria-describedby` pointing at the tooltip yourself to have the link in the
- * server's markup. Where the browser has no element references, write it
- * yourself; the tooltip warns once on first open if nothing links the two.
- * In the `for` form the tooltip itself is out of the accessibility tree while
- * its bubble is down, so a reader walking the page meets its words once, as
- * the trigger's description.
+ * Without the attribute, the tooltip links itself through an element reference
+ * on the control that takes focus, and it never writes into your markup before
+ * you act, so hydration stays intact. A trigger that is a Helix component is
+ * described at once, inside its own shadow root. A plain element in your
+ * markup is described when you first point at it or focus it, so a screen
+ * reader in reading mode meets it with no description until then. Where the
+ * browser has no element references, nothing links the two, and the tooltip
+ * warns once on first open. The tooltip can also wrap its trigger, which
+ * describes a Helix component and leaves a plain element undescribed. In the
+ * `for` form the tooltip itself is out of the accessibility tree while its
+ * bubble is down, so you meet its words once, as the trigger's description.
  *
  * The tooltip shows on hover and on focus. It hides on pointer leave, on blur,
  * on Escape, and when the trigger is activated. The pointer can move from the
@@ -114,6 +116,14 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * Names an element in the same tree, so a tooltip inside another component's
      * shadow root points at one in that root rather than one in the document.
      *
+     * Give the tooltip an `id` and name it in the trigger's `aria-describedby`,
+     * so the trigger is described in the server's markup and at rest:
+     *
+     * ```html
+     * <button aria-describedby="save-tip" id="save">Save</button>
+     * <helix-headless-tooltip content="Save your work" for="save" id="save-tip"></helix-headless-tooltip>
+     * ```
+     *
      * **In React this arrives as a property and not as an attribute**, which is
      * worth knowing before someone reads the DOM and thinks it did not take.
      * Measured against React 19.2.8: `for` exists on the prototype, so React sets

package/dist/tour/root/tour-root.d.ts

@@ -76,6 +76,12 @@ declare const HelixHeadlessTour_base: (new (...args: any[]) => import("@fusion.d
  * @cssstate waiting - While the tour waits at a `wait` stop for its target to be on the page.
  */
 export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tour': { progressLabel: '{index} von {count}' } })`.
+     * A stop's own words are under `helix-tour-stop`.
+     */
+    static words: string;
     /**
      * Label for the control that goes back, passed to every stop.
      */
@@ -117,8 +123,8 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
      */
     progress: boolean;
     /**
-     * Each stop's place in the run, with `{index}` and `{count}` filled in.
-     * Translate it with the rest of your text.
+     * Each stop's place in the run, with `{index}` and `{count}` filled in and
+     * written in the locale. Translate it with the rest of your text.
      */
     progressLabel: string;
     /**

package/dist/tour/root/tour-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { controlsIn, customElement, deepActiveElement, deepContains, fillTemplate, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, HelixTourStatusEvent, hostAria, inlineStep, keyClaimed, MixinControllerOpen, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
+import { controlsIn, customElement, deepActiveElement, deepContains, formatWords, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, HelixTourStatusEvent, hostAria, inlineStep, keyClaimed, MixinControllerOpen, requestChange, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
 import { stopBefore } from '../back.js';
@@ -62,6 +62,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         this.followed = false;
         this.veiled = false;
     }
+    static { this.words = 'helix-tour'; }
     get index() {
         return this.indexState ?? this.defaultIndex;
     }
@@ -218,7 +219,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
                 stop.current = this.open && index === at;
                 stop.first = index === 0;
                 stop.last = index === stops.length - 1;
-                stop.position = fillTemplate(this.progressLabel, {
+                stop.position = formatWords(this, 'progressLabel', {
                     count: stops.length,
                     index: index + 1,
                 });
@@ -346,6 +347,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTour.prototype, "progress", void 0);
 __decorate([
+    words,
     property({ attribute: 'progress-label' })
 ], HelixHeadlessTour.prototype, "progressLabel", void 0);
 __decorate([

package/dist/tour/stop/tour-stop.d.ts

@@ -86,6 +86,11 @@ import '../../button/index.js';
  * @cssstate placed-top - The panel sits above its target.
  */
 export declare class HelixHeadlessTourStop extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tour-stop': { nextLabel: 'Weiter' } })`.
+     */
+    static words: string;
     /**
      * Label for the control that goes back.
      */

package/dist/tour/stop/tour-stop.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { arrowReach, customElement, elementById, HelixElement, HelixTourAskEvent, PopoverController, reflectElements, sideOf, } from '@fusion.dev/helix-core';
+import { arrowReach, customElement, elementById, HelixElement, HelixTourAskEvent, PopoverController, reflectElements, sideOf, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -46,6 +46,7 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
             surface: () => this.partNamed('bubble'),
         });
     }
+    static { this.words = 'helix-tour-stop'; }
     get target() {
         return this.for === '' ? null : elementById(this, this.for);
     }
@@ -140,12 +141,14 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
     }
 };
 __decorate([
+    words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessTourStop.prototype, "backLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTourStop.prototype, "current", void 0);
 __decorate([
+    words,
     property({ attribute: 'done-label' })
 ], HelixHeadlessTourStop.prototype, "doneLabel", void 0);
 __decorate([
@@ -161,6 +164,7 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTourStop.prototype, "last", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessTourStop.prototype, "nextLabel", void 0);
 __decorate([
@@ -173,6 +177,7 @@ __decorate([
     property({ attribute: false })
 ], HelixHeadlessTourStop.prototype, "progress", void 0);
 __decorate([
+    words,
     property({ attribute: 'skip-label' })
 ], HelixHeadlessTourStop.prototype, "skipLabel", void 0);
 __decorate([

package/dist/tree/grip.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether an event began on an item's grip, in a `reorderable` tree. The grip
+ * is the tree's: a press there neither chooses the row nor follows its link.
+ */
+export declare const fromGrip: (event: Event) => boolean;

package/dist/tree/grip.js

@@ -0,0 +1 @@
+export const fromGrip = (event) => Boolean(event.composedPath()[0]?.closest?.('[part="grip"]'));

package/dist/tree/item/tree-item.d.ts

@@ -1,5 +1,7 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+/** Where an item stands in a move: the item being moved, or the one the drop indicator is beside. */
+export type TreeItemMove = 'dragging' | 'drop-after' | 'drop-before';
 declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
  * @summary One node in a tree.
@@ -31,6 +33,11 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * sends `helix-load`, the row says it is busy, and the children you add appear
  * in it. Remove `lazy` once they are in.
  *
+ * **In a `reorderable` tree, the row has a grip** at its far end, which a
+ * pointer drags to move the item among its siblings. The tree says which item
+ * is moving and where the drop indicator is, with the `dragging`,
+ * `drop-before`, and `drop-after` states.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases TreeNode, Branch, Leaf
@@ -51,6 +58,8 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @csspart checkbox - The check mark's box, in a tree with `selection-mode="multiple"`.
  * @csspart checkbox-checked - The check mark's box while the item is checked.
  * @csspart checkbox-mixed - The check mark's box while some of a branch's items are checked.
+ * @csspart grip - The handle a pointer drags to move the item, in a `reorderable` tree. Hidden from screen readers, which move the item with Alt and an arrow.
+ * @csspart grip-mark - The icon on the grip.
  * @csspart group - The container for nested items.
  * @csspart item - The node, and the focus target unless `href` moves it to the row.
  * @csspart label - The label text.
@@ -60,6 +69,9 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @cssproperty --tree-level - How deep this row sits, counting from one as `aria-level` does, for the indent.
  *
  * @cssstate checked - While it is checked, in a tree with `selection-mode="multiple"`.
+ * @cssstate dragging - The item is being moved, in a `reorderable` tree.
+ * @cssstate drop-after - The item being moved goes after this one when it is dropped.
+ * @cssstate drop-before - The item being moved goes before this one when it is dropped.
  * @cssstate loading - While a `lazy` item is open and its children have not arrived.
  * @cssstate mixed - While some of a branch's items are checked, in a tree with `selection-mode="multiple"`.
  * @cssstate open - While its children are shown.
@@ -81,6 +93,11 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * reach it, so a reader knows it is there.
      */
     disabled: boolean;
+    /**
+     * @internal Whether the row draws a grip, written by a `reorderable` tree.
+     * No attribute: it is coordination between elements, as `focusable` is.
+     */
+    grip: boolean;
     /**
      * @internal Set by the tree: whether a branch heads the list under it, as
      * under `nesting="heading"`, or is not chosen at all, as under
@@ -124,6 +141,11 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * hydrates.
      */
     level?: number;
+    /**
+     * @internal Where the item stands in a move, written by a `reorderable`
+     * tree: the item being moved, or the one the drop indicator is beside.
+     */
+    move?: TreeItemMove | undefined;
     /**
      * The link's `rel` value, which describes how the linked page relates to this
      * one.
@@ -190,6 +212,8 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * row rather than the wrapper around it.
      */
     focusItem(): void;
+    /** @internal The element that takes focus for this node, read by the tree. */
+    get focusTarget(): HTMLElement | null | undefined;
     /** Selects this node and sends `helix-select`. A disabled node sends nothing. */
     select(): void;
     /**

package/dist/tree/item/tree-item.js

@@ -5,16 +5,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, HelixLoadEvent, HelixSelectEvent, MixinControllerOpen, } from '@fusion.dev/helix-core';
-import { caretDown, check, minus } from '@fusion.dev/helix-icons';
+import { caretDown, check, dotsSixVertical, minus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { fromGrip } from '../grip.js';
 let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
         this.checkable = false;
         this.checked = false;
         this.disabled = false;
+        this.grip = false;
         this.heads = false;
         this.href = '';
         this.lazy = false;
@@ -35,6 +37,10 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
             this.toggleOpen();
         };
         this.handleRowClick = (event) => {
+            if (fromGrip(event)) {
+                event.preventDefault();
+                return;
+            }
             const onLink = event.composedPath().some((node) => node instanceof HTMLAnchorElement);
             if (this.disabled) {
                 event.preventDefault();
@@ -70,9 +76,10 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         return this.branch || this.lazy;
     }
     focusItem() {
-        this.renderRoot
-            .querySelector(this.href === '' ? '[part="item"]' : '[part="row"]')
-            ?.focus({ preventScroll: true });
+        this.focusTarget?.focus({ preventScroll: true });
+    }
+    get focusTarget() {
+        return this.renderRoot?.querySelector(this.href === '' ? '[part="item"]' : '[part="row"]');
     }
     select() {
         if (this.disabled) {
@@ -136,7 +143,13 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         return html `${this.isBranch ? this.renderToggle() : nothing}${this.renderCheckbox()}
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
-      <slot name="end"></slot>`;
+      <slot name="end"></slot>${this.grip && !this.disabled
+            ? html `<span part="grip" aria-hidden="true"
+              ><svg part="grip-mark" fill="currentColor" viewBox=${dotsSixVertical.viewBox}>
+                ${unsafeSVG(dotsSixVertical.content)}
+              </svg></span
+            >`
+            : nothing}`;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -144,6 +157,9 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         this.toggleState('checked', this.checkable && this.checked === true);
         this.toggleState('mixed', this.checkable && this.checked === 'mixed');
         this.toggleState('loading', this.open && this.lazy);
+        this.toggleState('dragging', this.move === 'dragging');
+        this.toggleState('drop-after', this.move === 'drop-after');
+        this.toggleState('drop-before', this.move === 'drop-before');
         if (this.childrenKnown) {
             this.branch = this.knownChildren.some((child) => child.slot === 'children');
         }
@@ -221,6 +237,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTreeItem.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTreeItem.prototype, "grip", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTreeItem.prototype, "heads", void 0);
@@ -233,6 +252,9 @@ __decorate([
 __decorate([
     property({ attribute: false, type: Number })
 ], HelixHeadlessTreeItem.prototype, "level", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTreeItem.prototype, "move", void 0);
 __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "rel", void 0);

package/dist/tree/root/tree-root.d.ts

@@ -36,6 +36,19 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * tree of check marks, Control+A (Command+A on an Apple keyboard) checks every
  * item or clears them all, and Shift with Up or Down Arrow moves and checks.
  *
+ * **`reorderable` lets you move items among their siblings.** Alt with Up or
+ * Down moves the focused item a place, and Alt with Home or End to the first
+ * or the last place among its siblings, as the APG's rearrangeable listbox
+ * does. Each row gets a grip at its far end: drag it to move the item, and the
+ * tree scrolls near an edge. A click on a grip picks the item up and a click on
+ * one of its siblings drops it there, which needs no drag. The arrows move an
+ * item picked up that way, Enter or Space drops it, and Escape puts it back.
+ * The tree says each step in its `live` region. A drop sends
+ * `helix-before-reorder`, which you can refuse, and then `helix-reorder`, whose
+ * `keys` hold the siblings in the new order. **You move the items**: the tree
+ * moves no element of yours, and focus follows the moved item once you have.
+ * Moving an item into another branch is not part of this.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -46,14 +59,29 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the current node changes, so the tree already holds the new one.
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current node changes, and cancelable. Canceling it is the only way to stop the change.
+ * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when an item is dropped at a new place among its siblings, in a `reorderable` tree, with the siblings' keys in the new order. Cancelable: cancel it to keep the item where it is.
+ * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your items to the order in `keys`, each an item's `value`, or its words where it has none. Cancelable: cancel it to say the move did not happen.
  * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. The item sends it, and you can listen for it on the tree. Cancelable: canceling it changes nothing.
  *
+ * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the item is let go, in a `reorderable` tree. Hidden from assistive technology.
  * @csspart empty - Shown when there are no rows to show.
- * @csspart live - A copy of the empty and loading messages, in a live region that announces them when they change. Visually hidden in the styled tier.
+ * @csspart live - A copy of the empty and loading messages, and each step of a move in a `reorderable` tree, in a live region that announces them when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the rows load.
  * @csspart tree - The tree container.
  */
 export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tree': { label: 'Baum' } })`.
+     */
+    static words: string;
+    /**
+     * What screen readers hear when a held item is put back, or a move is
+     * refused, in a `reorderable` tree.
+     */
+    canceledLabel: string;
+    /** What screen readers hear when a held item is dropped, in a `reorderable` tree. */
+    droppedLabel: string;
     /**
      * Accessible name for the tree.
      *
@@ -61,10 +89,36 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * wins over this.
      */
     label: string;
+    /**
+     * What screen readers hear each time an item moves, in a `reorderable`
+     * tree. `{name}` is the item's words, `{position}` its place among its
+     * siblings, counting from 1, and `{count}` the number of siblings.
+     */
+    movedLabel: string;
     /** Carries a host `aria-label` and `aria-labelledby` to the tree. */
     protected readonly aria: AriaForwardController;
     /** The letters typed so far, for moving to an item by its name. */
     private readonly typeahead;
+    /**
+     * Moving items among their siblings, in a `reorderable` tree. The items are
+     * the page's, so a drop asks the page to move them.
+     */
+    private readonly reorder;
+    /** The key an item is moved by: its `value`, or its words where it has none. */
+    private keyOf;
+    /** The item that stands for a key. */
+    private itemFor;
+    /** The innermost item an event came from. */
+    private itemOf;
+    /** The key of the innermost item an event came from, unless it is disabled. */
+    private keyAt;
+    /** An item and the items beside it, under the same parent, in order. */
+    private siblingsOf;
+    /**
+     * The keys of the items a key's item moves among: its siblings, a disabled
+     * one included, which stays where it is while the others move past it.
+     */
+    private siblingKeys;
     /**
      * What a deeper level means: `peer` for no change, `subordinate` for a lower
      * rank, or `heading` for a parent that heads the items under it.
@@ -102,6 +156,17 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * The resting state is the absence of the attribute, which is `peer`.
      */
     nesting?: 'heading' | 'peer' | 'subordinate';
+    /**
+     * What screen readers hear when a click on a grip picks up an item, in a
+     * `reorderable` tree. `{name}` is the item's words.
+     */
+    pickedUpLabel: string;
+    /**
+     * Lets you move items among their siblings, by dragging a grip or with Alt
+     * and an arrow. The tree moves no item itself: you move your data on
+     * `helix-reorder`.
+     */
+    reorderable: boolean;
     /**
      * Whether a reader can check many items, or choose only the items at the
      * ends. Unset, one item is chosen at a time, branches included.

package/dist/tree/root/tree-root.js

@@ -4,9 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, ReorderController, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { fromGrip } from '../grip.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
 import { checkedState, pressRow } from '../selection.js';
 const KEYS = new Set([
@@ -22,12 +23,35 @@ const KEYS = new Set([
 let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinControllerActive(HelixElement)) {
     constructor() {
         super(...arguments);
+        this.canceledLabel = 'Canceled';
+        this.droppedLabel = 'Dropped';
         this.label = 'Tree';
+        this.movedLabel = '{name} moved to position {position} of {count}';
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.partNamed('tree'),
         });
         this.typeahead = new Typeahead();
+        this.reorder = new ReorderController(this, {
+            axis: 'block',
+            box: (key) => this.itemFor(key)?.getBoundingClientRect(),
+            current: (event) => this.keyAt(event),
+            grip: (event) => {
+                const item = this.itemOf(event);
+                const element = fromGrip(event) && item?.focusTarget;
+                return item && element ? { element, key: this.keyOf(item) } : undefined;
+            },
+            item: (event) => this.keyAt(event),
+            keys: (key) => this.siblingKeys(key),
+            name: (key) => {
+                const item = this.itemFor(key);
+                return (item && slottedWords(item, [''])) || key;
+            },
+            preview: (key) => this.itemFor(key)?.shadowRoot?.querySelector('[part="row"]'),
+            refocus: (key) => this.focusOn(this.itemFor(key)),
+        });
+        this.pickedUpLabel = 'Picked up {name}';
+        this.reorderable = false;
         this.handleSelection = (event) => {
             const origin = event.target;
             if (!(origin instanceof HelixHeadlessTreeItem) || !this.items.includes(origin)) {
@@ -107,6 +131,28 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             this.syncItems();
         };
     }
+    static { this.words = 'helix-tree'; }
+    keyOf(item) {
+        return item.value || slottedWords(item, ['']);
+    }
+    itemFor(key) {
+        return this.items.find((item) => this.keyOf(item) === key);
+    }
+    itemOf(event) {
+        const item = closestInstance(event.composedPath()[0], HelixHeadlessTreeItem);
+        return item && this.items.includes(item) ? item : undefined;
+    }
+    keyAt(event) {
+        const item = this.itemOf(event);
+        return item && !item.disabled ? this.keyOf(item) : undefined;
+    }
+    siblingsOf(item) {
+        return [...(item.parentElement?.children ?? [])].filter((node) => node instanceof HelixHeadlessTreeItem && node.slot === item.slot);
+    }
+    siblingKeys(key) {
+        const item = this.itemFor(key);
+        return item ? this.siblingsOf(item).map((one) => this.keyOf(one)) : [];
+    }
     get values() {
         return this.multiple ? commaList(this.active) : this.active === '' ? [] : [this.active];
     }
@@ -160,6 +206,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         const multiple = this.multiple;
         const checked = new Set(this.values);
         for (const item of this.items) {
+            const key = this.keyOf(item);
             const selected = !multiple && item.value !== '' && item.value === this.active;
             const state = multiple ? checkedState(this.rowOf(item), checked) : false;
             const focusable = item === stop;
@@ -178,6 +225,8 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 item.focusable = focusable;
                 item.level = level;
                 item.heads = heads;
+                item.grip = this.reorderable;
+                item.move = this.reorder.moveOf(key);
             });
         }
     }
@@ -200,8 +249,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             return false;
         }
         if (event.key === '*') {
-            const siblings = [...(current.parentElement?.children ?? [])].filter((node) => node instanceof HelixHeadlessTreeItem && node.slot === current.slot);
-            for (const sibling of siblings) {
+            for (const sibling of this.siblingsOf(current)) {
                 if (sibling.isBranch && !sibling.open) {
                     sibling.requestOpen(true);
                 }
@@ -274,7 +322,11 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('active') || changed.has('nesting') || changed.has('selectionMode')) {
+        if (changed.has('active') ||
+            changed.has('nesting') ||
+            changed.has('selectionMode') ||
+            this.reorderable ||
+            changed.has('reorderable')) {
             this.syncItems();
         }
     }
@@ -293,15 +345,35 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         }}
       ></slot>
       ${this.renderStatus(this.hasRows)}
-    </div>${this.renderLive(this.hasRows)}`;
+    </div>${this.renderLive(this.hasRows)}${this.reorder.drawDragPreview()}`;
     }
 };
 __decorate([
+    words,
+    property({ attribute: 'canceled-label' })
+], HelixHeadlessTree.prototype, "canceledLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dropped-label' })
+], HelixHeadlessTree.prototype, "droppedLabel", void 0);
+__decorate([
+    words,
     property()
 ], HelixHeadlessTree.prototype, "label", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-label' })
+], HelixHeadlessTree.prototype, "movedLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTree.prototype, "nesting", void 0);
+__decorate([
+    words,
+    property({ attribute: 'picked-up-label' })
+], HelixHeadlessTree.prototype, "pickedUpLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTree.prototype, "reorderable", void 0);
 __decorate([
     property({ attribute: 'selection-mode', reflect: true })
 ], HelixHeadlessTree.prototype, "selectionMode", void 0);