@fusion.dev/helix-headless 0.151.0 → 0.152.0

package/dist/popover/root/popover-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 { AriaForwardController, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, arrowReach, auditName, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { hideOutside } from '../hide-outside.js';
@@ -144,6 +144,10 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         super.connectedCallback();
         this.addEventListener('focusout', this.handleFocusOut);
         this.addEventListener('click', this.notePress, { capture: true });
+        void this.whenSettled.then(() => {
+            this.pressed = true;
+            this.tellTrigger();
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -180,6 +184,9 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         super.updated(changed);
         this.tellTrigger();
         this.nameByHeading();
+        if (changed.has('open') && this.open) {
+            auditName(this, () => null, 'Give it a `label`, or a heading in the panel.', () => this.label !== '' || this.namedByHeading || headingIn(this.slotted) != null);
+        }
         if (this.settled) {
             this.hideAround();
         }

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

@@ -30,6 +30,21 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `collapsed-size` keeps a sliver of the pane visible, such as a tab strip.
  * Collapsing overrides `min` and `max`.
  *
+ * Set `primary` to the pane that keeps its size when the splitter's own size
+ * changes, such as a sidebar beside a window being resized. The other pane
+ * takes all of the change, as Web Awesome's split panel does. Without it,
+ * both panes keep their share.
+ *
+ * **Keyboard.** The divider is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |
+ * | Up, Down | Moves a stacked divider by `step`. |
+ * | Home, End | Moves the divider to its bounds. |
+ * | Enter | Collapses the start pane, and opens it again. |
+ * | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -191,6 +206,32 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      */
     get position(): number;
     set position(next: number);
+    /**
+     * The pane that keeps its size when the splitter's own size changes. The
+     * other pane takes all of the change. Unset, both keep their share.
+     */
+    primary?: 'end' | 'start';
+    /** Watches this element's length along its axis while `primary` is set. */
+    private lengths;
+    /** The length along the axis last seen, in pixels. */
+    private length;
+    /**
+     * Starts or stops watching the length, according to `primary`, and holds
+     * the primary pane's size in pixels as the length changes.
+     */
+    private watchLength;
+    /**
+     * Moves the divider so the primary pane keeps the pixels it had, as the
+     * splitter's length goes from the one last seen to `length`. Not while a
+     * pane is shut or a drag holds the divider.
+     */
+    private holdPrimary;
+    /**
+     * F6, which moves focus between the panes, as the window splitter pattern
+     * allows: from the start pane to the end pane, and from the end pane or the
+     * divider to the start pane. Only a pane that holds a control takes focus.
+     */
+    private readonly handlePaneKeys;
     /**
      * Where a dragged divider snaps, comma separated, as Web Awesome's split
      * panel does: a bare number is a percentage and a length such as `240px` is

package/dist/splitter/root/splitter-root.js

@@ -11,6 +11,7 @@ import { property, state } from 'lit/decorators.js';
 import { snapTo } from '../snap.js';
 const STACK_BELOW = 512;
 const channel = new WeakMap();
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     static { HelixHeadlessSplitter_1 = this; }
     static { this.words = 'helix-splitter'; }
@@ -69,6 +70,41 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         this.reached = undefined;
         this.requestUpdate('position', previous);
     }
+    watchLength() {
+        if (!this.primary || typeof ResizeObserver === 'undefined') {
+            this.lengths?.disconnect();
+            this.lengths = undefined;
+            this.length = 0;
+            return;
+        }
+        if (this.lengths) {
+            return;
+        }
+        this.lengths = new ResizeObserver(([entry]) => {
+            const box = entry?.borderBoxSize?.[0];
+            const length = (this.vertical
+                ? (box?.blockSize ?? entry?.contentRect.height)
+                : (box?.inlineSize ?? entry?.contentRect.width)) ?? 0;
+            this.holdPrimary(length);
+        });
+        this.lengths.observe(this);
+    }
+    holdPrimary(length) {
+        const before = this.length;
+        this.length = length;
+        if (!this.primary || before <= 0 || length <= 0 || length === before) {
+            return;
+        }
+        if (this.collapsed || this.dragging) {
+            return;
+        }
+        const position = this.position;
+        const kept = ((this.primary === 'start' ? position : 100 - position) / 100) * before;
+        const share = (kept / length) * 100;
+        const previous = position;
+        this.positionState = this.clamp(this.primary === 'start' ? share : 100 - share);
+        this.requestUpdate('position', previous);
+    }
     get showing() {
         return this.reached === undefined ? this.position : this.clamp(this.reached);
     }
@@ -225,6 +261,34 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         });
         this.max = 100;
         this.min = 0;
+        this.length = 0;
+        this.handlePaneKeys = (event) => {
+            if (event.key !== 'F6' ||
+                event.altKey ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.defaultPrevented) {
+                return;
+            }
+            const path = event.composedPath();
+            const pane = (name) => this.renderRoot
+                ?.querySelector(`slot[name="${name}"]`)
+                ?.assignedElements({ flatten: true }) ?? [];
+            const inner = path.find((node) => node instanceof HelixHeadlessSplitter_1);
+            if (inner !== this) {
+                return;
+            }
+            const fromStart = pane('start').some((one) => path.includes(one));
+            const to = pane(fromStart ? 'end' : 'start');
+            const first = to.flatMap((one) => [
+                ...(one instanceof HTMLElement && one.matches(FOCUSABLE) ? [one] : []),
+                ...one.querySelectorAll(FOCUSABLE),
+            ])[0];
+            if (first) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
         this.snap = '';
         this.snapThreshold = 12;
         this.step = 2;
@@ -435,13 +499,19 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         super.connectedCallback();
         if (this.hasUpdated) {
             this.watchWidth();
+            this.watchLength();
             this.findOuter();
         }
+        this.addEventListener('keydown', this.handlePaneKeys);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handlePaneKeys);
         this.sizes?.disconnect();
         this.sizes = undefined;
+        this.lengths?.disconnect();
+        this.lengths = undefined;
+        this.length = 0;
         if (this.outer) {
             channel.get(this.outer)?.uncross(this);
         }
@@ -451,6 +521,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.watchWidth();
+        this.watchLength();
         this.findOuter();
         this.finishHydration();
     }
@@ -459,6 +530,9 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         if (changed.has('orientation')) {
             this.watchWidth();
         }
+        if (changed.has('primary')) {
+            this.watchLength();
+        }
         if (this.collapsed) {
             this.dataset.collapsed = this.collapsed;
         }
@@ -578,6 +652,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSplitter.prototype, "position", null);
+__decorate([
+    property()
+], HelixHeadlessSplitter.prototype, "primary", void 0);
 __decorate([
     property()
 ], HelixHeadlessSplitter.prototype, "snap", void 0);

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

@@ -36,6 +36,20 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * Disabled tabs are passed over. Tab leaves the list for the selected panel,
  * which is a tab stop only while it holds nothing focusable.
  *
+ * **Keyboard.**
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless `manual` is set or a tab is a link. |
+ * | Left, Up | Moves to the tab before, from the first round to the last. |
+ * | Home, End | Moves to the first or the last tab. |
+ * | Enter, Space | Selects the tab with focus, or follows its link. |
+ * | Tab | Leaves the list for the selected panel. |
+ *
+ * Removing the selected tab selects the first enabled tab that is left, and
+ * `active` says so, with `helix-activate`. Where the removed tab had focus,
+ * focus moves to the tab now selected.
+ *
  * The `indicator` part moves to the selected tab and carries its place and
  * size, so a mark of your own can be drawn there: style the part, or slot an
  * element into `indicator`, which sits inside the part and reads the same
@@ -125,8 +139,19 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private get linked();
     private get panels();
     private readonly handleSelection;
+    /** The values of the tabs the last pairing read, to tell a removed tab from one not yet here. */
+    private held;
     /** Pushes the current value down to whichever tab and panel own it. */
     private sync;
+    /** The tab that last had focus, so its removal can hand focus on. */
+    private focused;
+    private readonly handleFocusIn;
+    /**
+     * Puts focus on the selected tab where the tab that had it was removed and
+     * focus fell to the page, which is where removing a focused element leaves
+     * it.
+     */
+    private refocus;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;

package/dist/tabs/root/tabs-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 { AriaForwardController, customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, deepActiveElement, HelixActivateEvent, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
@@ -35,9 +35,15 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             }
             this.requestActive(event.detail.value);
         };
+        this.held = [];
+        this.handleFocusIn = (event) => {
+            const path = event.composedPath();
+            this.focused = this.tabs.find((tab) => path.includes(tab));
+        };
         this.handleSlotChange = () => {
             this.sync();
             this.indicator.place();
+            this.refocus();
         };
     }
     static { this.words = 'helix-tabs'; }
@@ -54,6 +60,13 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         const tabs = this.tabs;
         const declared = this.active === '' ? tabs.find((tab) => tab.selected) : undefined;
         const value = (declared ?? this.resolveActive(tabs))?.value ?? '';
+        const previous = this.active;
+        const gone = this.held.includes(previous) && !tabs.some((tab) => tab.value === previous);
+        this.held = tabs.map((tab) => tab.value);
+        if (gone && value !== '') {
+            this.active = value;
+            this.dispatchEvent(new HelixActivateEvent({ previous, value }));
+        }
         for (const tab of tabs) {
             const selected = tab.value === value;
             whenHydrated(tab, () => {
@@ -77,13 +90,27 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             });
         }
     }
+    refocus() {
+        const gone = this.focused;
+        if (!gone || this.tabs.includes(gone)) {
+            return;
+        }
+        this.focused = undefined;
+        const active = deepActiveElement();
+        if (active !== null && active !== document.body) {
+            return;
+        }
+        void this.updateComplete.then(() => this.tabs.find((tab) => tab.selected)?.focus());
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.addEventListener('focusin', this.handleFocusIn);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.removeEventListener('focusin', this.handleFocusIn);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);

package/dist/tour/naming.d.ts

@@ -15,6 +15,11 @@ export interface StopWords {
     heading: readonly Element[];
     /** Whether the stop has a `label` of its own. */
     labeled: boolean;
+    /**
+     * The region that holds the content, given where the content holds words
+     * with no element around them, which then describes the panel.
+     */
+    loose?: Element | null;
     /** The element that says the stop's place in the tour, such as "2 of 5". */
     progress: Element | null;
 }
@@ -24,7 +29,8 @@ export interface StopWords {
  * Named by the `heading` slot, then by the first heading in the content, then
  * by the stop's own `label`, and where there is none of those, by its place in
  * the tour, so no stop is an unnamed group. Described by the `description`
- * slot and by its place, which is how a screen reader hears where it is as
- * focus moves from one stop to the next.
+ * slot, or where it is empty by the words at the start of the content, as a
+ * `Dialog` is, and then by its place, which is how a screen reader hears where
+ * it is as focus moves from one stop to the next.
  */
-export declare const stopNaming: ({ content, description, heading, labeled, progress, }: StopWords) => StopNaming;
+export declare const stopNaming: ({ content, description, heading, labeled, loose, progress, }: StopWords) => StopNaming;

package/dist/tour/naming.js

@@ -1,10 +1,16 @@
 import { headingIn } from '@fusion.dev/helix-core';
-export const stopNaming = ({ content, description, heading, labeled, progress, }) => {
+import { wordsAmong } from '../dialog/description.js';
+export const stopNaming = ({ content, description, heading, labeled, loose = null, progress, }) => {
     const first = heading.length > 0 ? null : headingIn(content);
     const found = heading.length > 0 ? [...heading] : first ? [first] : [];
     const place = progress ? [progress] : [];
+    const said = description.length > 0
+        ? [...description]
+        : content.length === 0 && loose
+            ? [loose]
+            : wordsAmong(content, first);
     if (found.length === 0 && !labeled) {
-        return { describedBy: [...description], labelledBy: place };
+        return { describedBy: said, labelledBy: place };
     }
-    return { describedBy: [...description, ...place], labelledBy: found };
+    return { describedBy: [...said, ...place], labelledBy: found };
 };

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

@@ -40,11 +40,27 @@ declare const HelixHeadlessTour_base: (new (...args: any[]) => import("@fusion.d
  * you have moved it somewhere else on the page. A stop does not trap focus, so
  * you can still `Tab` out to the element it describes.
  *
- * **The arrow keys move between stops** while focus is in one: the arrow that
- * points the way the line runs goes on, and the other goes back, so on a
- * right-to-left page `ArrowLeft` goes on. Neither finishes the tour at the last
- * stop, and a text field in a stop keeps its own arrows. `Escape` skips the
- * tour.
+ * **The target is scrolled into view** before its stop is shown, by the
+ * least distance that brings it on screen, so the stop that points at it is
+ * on screen too.
+ *
+ * **Keyboard.** Focus is on the current stop's panel, which is not in the
+ * `Tab` order itself.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right | Goes to the next stop. On the last stop it does nothing, and Next finishes the tour. |
+ * | Left | Goes back to the previous stop. |
+ * | Escape | Skips the tour, and puts focus back where it was when the tour opened. |
+ * | Tab, Shift+Tab | Moves through the controls in the stop, and on out to the page. A stop does not trap focus. |
+ * | Enter, Space | On Back, Next, or Skip, presses it. |
+ *
+ * The arrow that points the way the line runs goes on, and the other goes
+ * back, so on a right-to-left page Left goes on and Right goes back. A text field in a stop keeps
+ * its own arrows.
+ *
+ * The tour is a region named by `label` while it runs. A development build
+ * warns when a tour opens with no `label`.
  *
  * @since 0.1.0
  * @status stable
@@ -186,6 +202,14 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** The target last scrolled into view, so a render that moved nothing scrolls nothing. */
+    private revealed;
+    /**
+     * Scrolls the current target into view, by the least distance that brings
+     * it on screen, before its stop is shown beside it. Zag's tour does the same.
+     * A target already on screen does not move.
+     */
+    private reveal;
     /** Where focus was when the tour opened, to give it back when it ends. */
     private returnFocus;
     /** Whether `follow` has seen the first update. */

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, formatWords, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, HelixTourStatusEvent, hostAria, inlineStep, keyClaimed, MixinControllerOpen, requestChange, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, 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';
@@ -151,11 +151,23 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
     }
     updated(changed) {
         super.updated(changed);
+        this.reveal();
         this.settle();
         this.light();
+        if (changed.has('open') && this.open) {
+            auditName(this, () => null, 'Give it a `label`, such as "Getting started".', () => this.label !== '');
+        }
         this.follow(changed);
         this.wait();
     }
+    reveal() {
+        const target = this.lit ?? undefined;
+        if (target === this.revealed) {
+            return;
+        }
+        this.revealed = target;
+        target?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    }
     follow(changed) {
         if (!this.followed) {
             this.followed = true;

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

@@ -37,7 +37,8 @@ import '../../button/index.js';
  * The panel is a `group`, and a `dialog` for a dialog stop, only while the
  * stop is shown. It is named by the `heading` slot, then by the first heading
  * in the content, then by `label`, and otherwise by its place in the tour. It
- * is described by the `description` slot and by its place, such as "2 of 5",
+ * is described by the `description` slot, or where that is empty by the words
+ * at the start of the content, and by its place, such as "2 of 5",
  * so a screen reader says where the reader is at every stop. `focus()` moves
  * focus to the panel, which is what the tour does when it opens or moves on.
  *

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

@@ -68,6 +68,9 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
             description: slotted('description'),
             heading: slotted('heading'),
             labeled: this.label !== '',
+            loose: [...this.childNodes].some((one) => one.nodeType === Node.TEXT_NODE && (one.textContent ?? '').trim() !== '')
+                ? this.partNamed('content')
+                : null,
             progress: this.position === '' ? null : this.partNamed('progress'),
         });
         reflectElements(bubble, 'ariaLabelledByElements', labelledBy, true);
@@ -127,7 +130,7 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
       ></div>
       <slot name="heading" part="heading" @slotchange=${this.nameByHeading}></slot>
       <slot name="description" part="description" @slotchange=${this.nameByHeading}></slot>
-      <div part="content"><slot></slot></div>
+      <div part="content"><slot @slotchange=${this.nameByHeading}></slot></div>
       ${this.position === ''
             ? ''
             : html `<span part="progress" ?hidden=${!this.progress}>${this.position}</span>`}

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

@@ -36,6 +36,9 @@ 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.
  *
+ * Removing the item that has focus moves focus to the item after it among its
+ * siblings, or the one before, or its parent, so focus stays in the tree.
+ *
  * **`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
@@ -183,6 +186,16 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
     /** Whether many items can be checked. */
     private get multiple();
     private watcher;
+    /** The item that last had focus, so its removal can hand focus on. */
+    private focused;
+    private readonly handleFocusIn;
+    /**
+     * Puts focus back in the tree where the item that had it was removed and
+     * focus fell to the page: on the item after it among its siblings, or the
+     * one before, or its parent. Read from the removal itself, which knows where
+     * the item stood.
+     */
+    private refocus;
     /**
      * Every item, in the order a reader moving down would meet them.
      *

package/dist/tree/root/tree-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 { AriaForwardController, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, ReorderController, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, commaList, customElement, deepActiveElement, 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';
@@ -52,6 +52,11 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         });
         this.pickedUpLabel = 'Picked up {name}';
         this.reorderable = false;
+        this.handleFocusIn = (event) => {
+            this.focused = event
+                .composedPath()
+                .find((node) => node instanceof HelixHeadlessTreeItem);
+        };
         this.handleSelection = (event) => {
             const origin = event.target;
             if (!(origin instanceof HelixHeadlessTreeItem) || !this.items.includes(origin)) {
@@ -162,6 +167,36 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     get multiple() {
         return this.selectionMode === 'multiple';
     }
+    refocus(records) {
+        const gone = this.focused;
+        if (!gone || this.items.includes(gone)) {
+            return;
+        }
+        this.focused = undefined;
+        const active = deepActiveElement();
+        if (active !== null && active !== document.body) {
+            return;
+        }
+        const record = records.find((one) => [...one.removedNodes].some((node) => node === gone || node.contains(gone)));
+        const near = (from, forward) => {
+            let node = from ?? null;
+            while (node) {
+                if (node instanceof HelixHeadlessTreeItem && !node.disabled && node.isConnected) {
+                    return node;
+                }
+                node = forward ? node.nextSibling : node.previousSibling;
+            }
+            return undefined;
+        };
+        const parent = record ? closestInstance(record.target, HelixHeadlessTreeItem) : null;
+        const next = near(record?.nextSibling, true) ??
+            near(record?.previousSibling, false) ??
+            (parent instanceof HelixHeadlessTreeItem && this.items.includes(parent)
+                ? parent
+                : undefined) ??
+            this.visibleItems.find((item) => !item.disabled);
+        this.focusOn(next);
+    }
     get items() {
         return [...this.querySelectorAll('*')].filter((node) => node instanceof HelixHeadlessTreeItem);
     }
@@ -305,7 +340,11 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         this.addEventListener('helix-select', this.handleSelection);
         this.addEventListener('toggle', this.handleBranch, true);
         this.addEventListener('keydown', this.handleKeydown);
-        this.watcher = new MutationObserver(() => this.syncItems());
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.watcher = new MutationObserver((records) => {
+            this.syncItems();
+            this.refocus(records);
+        });
         this.watcher.observe(this, { childList: true, subtree: true });
     }
     disconnectedCallback() {
@@ -313,6 +352,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         this.removeEventListener('helix-select', this.handleSelection);
         this.removeEventListener('toggle', this.handleBranch, true);
         this.removeEventListener('keydown', this.handleKeydown);
+        this.removeEventListener('focusin', this.handleFocusIn);
         this.watcher?.disconnect();
         this.watcher = undefined;
     }