@fusion.dev/helix-headless 0.24.0 → 0.25.0

package/dist/avatar/group/avatar-group.d.ts

@@ -72,6 +72,7 @@ export declare class HelixHeadlessAvatarGroup extends HelixElement {
     /** Said once per element, because a re-render is not a second mistake. */
     private warned;
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/avatar/group/avatar-group.js

@@ -15,7 +15,7 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
         this.warned = false;
     }
     get avatars() {
-        return [...(this.children ?? [])].filter((child) => child instanceof HTMLElement);
+        return this.knownChildren.filter((child) => child instanceof HTMLElement);
     }
     get overflow() {
         const limit = this.max ?? 0;
@@ -26,6 +26,10 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'group' });
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     updated(changed) {
         super.updated(changed);
         const limit = this.max ?? 0;

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

@@ -53,6 +53,7 @@ export declare class HelixHeadlessAvatar extends HelixElement {
     private readonly handleError;
     private readonly handleLoad;
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**
      * The mark shown where no image loaded, behind a seam a tier can move.

package/dist/avatar/root/avatar-root.js

@@ -41,6 +41,17 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
             role: this.name === '' ? '' : 'img',
         });
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        const image = this.serverRendered ? this.renderRoot.querySelector('img') : null;
+        if (image?.complete) {
+            const broken = image.naturalWidth === 0;
+            if (broken) {
+                this.failed = true;
+            }
+            setTimeout(() => this.relayNativeEvent(new Event(broken ? 'error' : 'load')));
+        }
+    }
     render() {
         if (this.src !== '' && !this.failed) {
             return html `<img

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

@@ -112,6 +112,8 @@ export declare class HelixHeadlessCarousel extends HelixElement {
     interval: number;
     /** The slide in view, whoever set it, and `undefined` until somebody has. */
     private indexState;
+    /** How many panes were drawn at the last update, to scroll when the first are. */
+    private scrolledFor;
     /**
      * Accessible name for the carousel.
      */

package/dist/carousel/root/carousel-root.js

@@ -16,6 +16,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.defaultIndex = 0;
         this.interval = 5000;
         this.indexState = undefined;
+        this.scrolledFor = 0;
         this.label = 'Carousel';
         this.loop = false;
         this.rotating = false;
@@ -207,11 +208,13 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('index')) {
+        const count = this.slides.length;
+        const drawn = this.renderRoot.querySelectorAll('[part="slide"]').length;
+        if (changed.has('index') || (this.scrolledFor === 0 && drawn > 0)) {
             this.scrollToIndex();
         }
+        this.scrolledFor = drawn;
         this.runTimer();
-        const count = this.slides.length;
         if (count > 0 && this.index > count - 1) {
             this.goTo(count - 1);
         }

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

@@ -298,6 +298,7 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * component: a form that received "jav" got the filter, not an option.
      */
     private sync;
+    protected firstUpdated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**

package/dist/combobox/root/combobox-root.js

@@ -10,6 +10,7 @@ import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
+import { optionsAmong } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
 import '../../tag/index.js';
 const isInsertion = (event) => !event.inputType?.startsWith('delete');
@@ -138,7 +139,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         return this.value === '' ? [] : this.value.split(',');
     }
     get chosen() {
-        const options = this.listbox?.options ?? [];
+        const options = optionsAmong(this.knownChildren);
         const known = options.length > 0;
         const words = new Map(options.map((option) => [option.value, option.text]));
         return this.values
@@ -214,6 +215,10 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired(this.value === '', 'Choose one to continue.', 'control');
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.internals.ariaExpanded = this.open ? 'true' : 'false';

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

@@ -86,6 +86,11 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * child element, which is the slot, so `:not(:has(*))` on it is never true
      * and an empty footer would draw its rule and its padding over nothing. Steps
      * was caught by the same thing.
+     *
+     * Read from the children before each render, and heard from the slot when
+     * they change. The slot alone left the first render without its footer and a
+     * second to follow, and a hydrated palette without one for good: a
+     * declarative shadow root reports its slots before anything listens.
      */
     private footed;
     private get listbox();
@@ -144,6 +149,8 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
     private readonly swallowOptionSelect;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * The surface the palette opens in, behind a seam the styled tier can move.

package/dist/command/root/command-root.js

@@ -95,6 +95,16 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         this.removeEventListener('click', this.handleAlternate, { capture: true });
         document.removeEventListener('keydown', this.handleHotkey);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.childrenKnown) {
+            this.footed = this.knownChildren.some((child) => child.slot === 'footer');
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     updated(changed) {
         super.updated?.(changed);
         if (!changed.has('open')) {

package/dist/format-date/root/format-date-root.js

@@ -73,11 +73,14 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        this.read();
+        this.finishHydration();
         this.watch();
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        if (this.childrenKnown) {
+            this.read();
+        }
         if (changed.has('date') || changed.has('elapsed') || changed.has('locale')) {
             this.tick();
         }

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

@@ -150,6 +150,15 @@ export declare class HelixHeadlessImage extends HelixElement {
      * image it has, so deciding `error` here calls every picture broken the moment
      * it renders. Failure has an event of its own and that event is reliable, so
      * this is only here to catch the success that happened too early to hear.
+     *
+     * **Except for a picture a server sent**, which a real browser's parser has
+     * already fetched: finished with no pixels there is a failure, and its `error`
+     * fired before anything could listen, so the placeholder stayed up over a
+     * picture that was never coming.
+     *
+     * **Once per picture.** The first update asks from `firstUpdated` and from
+     * `updated`, and a picture already finished answered both, so a page heard
+     * every cached `load`, and every `error` a server's page had, twice.
      */
     private settle;
     protected willUpdate(changed: PropertyValues): void;

package/dist/image/root/image-root.js

@@ -34,14 +34,27 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
             this.relayNativeEvent(event);
             return;
         }
-        this.dispatchEvent(new Event(name, { bubbles: false, cancelable: false, composed: false }));
+        const send = () => {
+            this.dispatchEvent(new Event(name, { bubbles: false, cancelable: false, composed: false }));
+        };
+        if (this.serverRendered) {
+            setTimeout(send);
+        }
+        else {
+            send();
+        }
     }
     settle() {
         const image = this.renderRoot?.querySelector('img');
-        if (this.src === '' || !image?.complete || image.naturalWidth === 0) {
+        if (this.src === '' || this.status !== 'loading' || !image?.complete) {
             return;
         }
-        this.announce('loaded');
+        if (image.naturalWidth > 0) {
+            this.announce('loaded');
+        }
+        else if (this.serverRendered) {
+            this.announce('error');
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A keyboard key or chord, set inline with text.
  *
@@ -57,7 +57,13 @@ export declare class HelixHeadlessKbd extends HelixElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
-    /** The chord as this reader's keyboard labels it. */
+    /**
+     * The chord as this reader's keyboard labels it.
+     *
+     * As a server labels it while hydrating what one sent: it has no keyboard to
+     * ask and serves the words, and a render that differs is a text Lit records
+     * and never writes, so a Mac kept Ctrl. The update after hydration asks.
+     */
     private get label();
     private listen;
     private deafen;
@@ -72,6 +78,7 @@ export declare class HelixHeadlessKbd extends HelixElement {
     private get printable();
     /** Whether a press is this chord, modifiers and all. */
     private matches_;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/kbd/root/kbd-root.js

@@ -105,13 +105,14 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         }
     }
     get label() {
-        const names = onApple() ? APPLE : ELSEWHERE;
+        const apple = !this.hydrating && onApple();
+        const names = apple ? APPLE : ELSEWHERE;
         const parts = this.keys
             .split('+')
             .map((part) => part.trim())
             .filter((part) => part !== '')
             .map((part) => names[part.toLowerCase()] ?? (part.length === 1 ? part.toUpperCase() : part));
-        return parts.join(onApple() ? '' : '+');
+        return parts.join(apple ? '' : '+');
     }
     listen() {
         if (!this.within || this.keys === '') {
@@ -157,6 +158,10 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
                     ? true
                     : !press.metaKey));
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     render() {
         return html `<kbd part="kbd">${this.keys === '' ? html `<slot></slot>` : this.label}</kbd>`;
     }

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

@@ -1,5 +1,22 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * The options among some elements, reaching one level into a group.
+ *
+ * What a control holding options reads its words from, off its own children
+ * rather than off the listbox they are slotted into: the slot exists only once a
+ * render has made it, so the listbox has none on a first render, and on a page a
+ * server rendered the `slotchange` that would correct it fires before anything
+ * listens.
+ *
+ * **An option by its shape, not by `instanceof`.** A tag is defined once, by
+ * whichever copy of this class registered it first, and a second copy in the
+ * same document tests against a class no element on the page has: every option
+ * failed it, and a select said "Choose" over its value. Two copies are a
+ * consumer with a duplicated dependency, or the browser specs, where each
+ * family's bundle carries its own and they share one page.
+ */
+export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadlessOption[];
 /**
  * @summary One choice in a listbox.
  *

package/dist/option/root/option-root.js

@@ -7,6 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+export const optionsAmong = (elements) => {
+    const isOption = (element) => 'text' in element && 'value' in element && 'selected' in element;
+    return elements.flatMap((element) => isOption(element) ? [element] : [...element.children].filter(isOption));
+};
 let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
     constructor() {
         super(...arguments);

package/dist/qr-code/root/qr-code-root.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /** How much of the code can be lost and still read. */
 export type QrCorrection = 'H' | 'L' | 'M' | 'Q';
 /** How the modules are drawn. */
@@ -81,6 +81,8 @@ export declare class HelixHeadlessQrCode extends HelixElement {
     value: string;
     /** Whether anything is slotted into the middle. */
     private logo;
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     /** The level actually used, which the slot can raise. */
     private get level();
     private renderCode;

package/dist/qr-code/root/qr-code-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement } from '@fusion.dev/helix-core';
-import { html, nothing, svg } from 'lit';
+import { html, nothing, svg, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { encode } from 'uqr';
 const isFinder = (x, y, size) => {
@@ -67,6 +67,16 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         this.value = '';
         this.logo = false;
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.childrenKnown) {
+            this.logo = this.knownChildren.some((child) => child.slot === 'logo');
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     get level() {
         return this.correction ?? (this.logo ? 'H' : 'M');
     }

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

@@ -111,6 +111,8 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * ignored.
      */
     private markSource;
+    /** Whether `markSource` has had its first answer from the children. */
+    private markRead;
     /**
      * What the pointer is over, which is shown instead of the score while it is.
      */
@@ -194,6 +196,7 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**

package/dist/rating/root/rating-root.js

@@ -18,6 +18,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.step = 1;
         this.valueText = '';
         this.markSource = undefined;
+        this.markRead = false;
         this.previewing = undefined;
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.options,
@@ -157,8 +158,16 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         super.updated?.(changed);
         this.sync();
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (!this.markRead && this.childrenKnown) {
+            this.markRead = true;
+            this.markSource = this.knownChildren.find((child) => child.slot === 'mark');
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
+        this.finishHydration();
         this.sync();
     }
     render() {

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

@@ -124,6 +124,13 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Read off the options rather than stored, because the words are the
      * consumer's content and storing a copy is storing something that goes stale
      * the moment they change it.
+     *
+     * **Off this element's own children, not the listbox's**, which reach the
+     * listbox through a slot and so only after a render has made it: read there,
+     * the first render showed the placeholder over a chosen value and waited on a
+     * `slotchange`, which a declarative shadow root fires before anything listens,
+     * so a hydrated select kept "Choose" for good. Nothing on a server or while
+     * hydrating what one sent, which drew the placeholder too.
      */
     private get display();
     /** Closes the list and puts focus back where it came from. */
@@ -133,6 +140,7 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     /** Reports the answer and the verdict on it. */
     private sync;
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * The list the trigger opens, behind a seam the styled tier can move.

package/dist/select/root/select-root.js

@@ -10,6 +10,7 @@ import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
+import { optionsAmong } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
 let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {
@@ -69,7 +70,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     get display() {
         const chosen = new Set(this.value === '' ? [] : this.value.split(','));
-        const words = (this.listbox?.options ?? [])
+        const words = optionsAmong(this.knownChildren)
             .filter((option) => chosen.has(option.value))
             .map((option) => option.text);
         return words.length > 0 ? words.join(', ') : this.placeholder;
@@ -89,6 +90,10 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label });
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     updated(changed) {
         super.updated(changed);
         this.sync();
@@ -122,11 +127,8 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       @change=${this.stopInner}
       @input=${this.stopInner}
     >
-      <!-- The trigger's words are read off the options, and on the first
-           render there are none: the slot has not been assigned yet, so a
-           select with a value came up showing its placeholder. Assignment
-           changes no property, so nothing else would schedule the update
-           that fixes it. -->
+      <!-- An option arriving or leaving changes no property, so this is what
+           schedules the update that rereads the trigger's words. -->
       <slot @slotchange=${() => this.requestUpdate()}></slot>
     </${this.tag('listbox')}>`;
     }

package/dist/steps/root/steps-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 { customElement, HelixElement, hostAria, MixinControllerActive, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(HelixElement) {
@@ -28,7 +28,10 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         const steps = this.steps;
         const value = this.resolveActive(steps)?.value ?? '';
         for (const step of steps) {
-            step.current = step.value === value;
+            const current = step.value === value;
+            whenHydrated(step, () => {
+                step.current = current;
+            });
         }
     }
     connectedCallback() {

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

@@ -90,6 +90,15 @@ export declare class HelixHeadlessTour extends HelixElement {
      * Where the light falls, read from the current target.
      */
     private spot;
+    /**
+     * Watches the lit target's own box, which moves the light without this
+     * element updating or the window changing: a label whose font arrives late,
+     * words a page rewrites. Measured on a server's page, the spotlight sat two
+     * pixels inside each side of a button that widened once its font loaded.
+     */
+    private sizer;
+    /** What `sizer` is watching, so a render that changed nothing re-observes nothing. */
+    private sized;
     /** The stops, in the order they were written. */
     get stops(): HelixHeadlessTourStop[];
     /** How many stops there are. */
@@ -124,8 +133,12 @@ export declare class HelixHeadlessTour extends HelixElement {
      * localised the tour.
      */
     private settle;
+    /** The current stop's target while the run is open, which is what the light falls on. */
+    private get lit();
     /** Reads the current target's box, which is where the light falls. */
     private light;
+    /** Keeps `sizer` on the lit target, and on nothing once there is none. */
+    private watch;
     protected render(): TemplateResult;
 }
 declare global {

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 { customElement, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixCompleteEvent, HelixElement, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixCompleteEvent, HelixElement, hostAria, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
 let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
@@ -19,6 +19,8 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.open = false;
         this.skipLabel = '';
         this.spotlightPadding = 8;
+        this.sizer = undefined;
+        this.sized = undefined;
         this.handleAsk = (event) => {
             const what = event.detail?.what;
             if (what === 'next') {
@@ -96,6 +98,9 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.ownerDocument.addEventListener('keydown', this.handleKeydown);
         globalThis.addEventListener('resize', this.handleViewport, { passive: true });
         globalThis.addEventListener('scroll', this.handleViewport, { capture: true, passive: true });
+        if (this.hasUpdated) {
+            this.watch(this.lit);
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -103,6 +108,8 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.ownerDocument.removeEventListener('keydown', this.handleKeydown);
         globalThis.removeEventListener('resize', this.handleViewport);
         globalThis.removeEventListener('scroll', this.handleViewport, { capture: true });
+        this.sizer?.disconnect();
+        this.sized = undefined;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -117,28 +124,34 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         const stops = this.stops;
         const at = Math.max(0, Math.min(this.index, stops.length - 1));
         stops.forEach((stop, index) => {
-            stop.current = this.open && index === at;
-            stop.first = index === 0;
-            stop.last = index === stops.length - 1;
-            if (this.backLabel !== '') {
-                stop.backLabel = this.backLabel;
-            }
-            if (this.nextLabel !== '') {
-                stop.nextLabel = this.nextLabel;
-            }
-            if (this.doneLabel !== '') {
-                stop.doneLabel = this.doneLabel;
-            }
-            if (this.skipLabel !== '') {
-                stop.skipLabel = this.skipLabel;
-            }
+            whenHydrated(stop, () => {
+                stop.current = this.open && index === at;
+                stop.first = index === 0;
+                stop.last = index === stops.length - 1;
+                if (this.backLabel !== '') {
+                    stop.backLabel = this.backLabel;
+                }
+                if (this.nextLabel !== '') {
+                    stop.nextLabel = this.nextLabel;
+                }
+                if (this.doneLabel !== '') {
+                    stop.doneLabel = this.doneLabel;
+                }
+                if (this.skipLabel !== '') {
+                    stop.skipLabel = this.skipLabel;
+                }
+            });
         });
     }
-    light() {
+    get lit() {
         const stops = this.stops;
-        const target = this.open
+        return this.open
             ? stops[Math.max(0, Math.min(this.index, stops.length - 1))]?.target
             : undefined;
+    }
+    light() {
+        const target = this.lit;
+        this.watch(target);
         if (!target || typeof target.getBoundingClientRect !== 'function') {
             this.spot = undefined;
             return;
@@ -160,6 +173,18 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
             this.spot = next;
         }
     }
+    watch(target) {
+        const next = target ?? undefined;
+        if (next === this.sized || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.sizer ??= new ResizeObserver(() => this.light());
+        this.sizer.disconnect();
+        if (next) {
+            this.sizer.observe(next);
+        }
+        this.sized = next;
+    }
     render() {
         const spot = this.spot;
         return html `${spot === undefined