@fusion.dev/helix-core 0.205.2 → 0.207.0

package/dist/utils/custom-element/custom-element.js

@@ -1,15 +1,20 @@
 import { reportRuntime } from '../report-runtime/report-runtime.js';
-const reported = new Set();
-const duplicates = new Set();
-export const duplicateRegistrations = () => [...duplicates];
+const DUPLICATES = Symbol.for('fusion.dev/helix/duplicates');
+const duplicates = () => {
+    const store = globalThis;
+    if (!(store[DUPLICATES] instanceof Set)) {
+        store[DUPLICATES] = new Set();
+    }
+    return store[DUPLICATES];
+};
+export const duplicateRegistrations = () => [...duplicates()];
 const defined = [];
 export const definedTags = () => [...defined];
 const warnDuplicate = (tagName) => {
-    if (typeof window === 'undefined' || reported.has(tagName)) {
+    if (typeof window === 'undefined' || duplicates().has(tagName)) {
         return;
     }
-    reported.add(tagName);
-    duplicates.add(tagName);
+    duplicates().add(tagName);
     reportRuntime({
         kind: 'duplicate-registration',
         message: `<${tagName}> is already registered by a different class, so this page holds two copies of ` +

package/dist/utils/draw-tooltip/draw-tooltip.js

@@ -36,8 +36,9 @@ export const drawTooltip = (rows, at, tag, where, slotOf, reading) => {
       dir=${place.dir ?? nothing}
       exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom,
         arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right,
-        arrow-top: tooltip-arrow-top, tooltip, tooltip-bottom, tooltip-left, tooltip-right,
-        tooltip-top"
+        arrow-top: tooltip-arrow-top, surface: tooltip-surface,
+        surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left,
+        surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"
       for="helix-chart-mark"
       id=${CHART_TOOLTIP}
       open

package/dist/utils/host-words/host-words.js

@@ -1,4 +1,5 @@
 import { elementById } from '../element-by-id/element-by-id.js';
+import { labelsOf } from '../labels-of/labels-of.js';
 import { nameText } from '../name-text/name-text.js';
 const wordsOf = (named) => named
     .map((one) => (one ? nameText(one).replace(/\s+/g, ' ').trim() : ''))
@@ -9,5 +10,5 @@ export const hostWords = (host, own = '') => {
     return (wordsOf(ids.map((id) => elementById(host, id))) ||
         host.getAttribute('aria-label')?.trim() ||
         own ||
-        wordsOf([...(host.labels ?? [])]));
+        wordsOf(labelsOf(host)));
 };

package/dist/utils/how-to-register/how-to-register.d.ts

@@ -0,0 +1,20 @@
+/** What `howToRegister` names: the missing element, where it was found, and its family's entry. */
+export interface Unregistered {
+    /** The family's entry after the package, such as `option` or `filter-input/menu`. */
+    entry: string;
+    /** The tag of the element that holds or draws the missing one. */
+    host: string;
+    /** The missing element's tag. */
+    tag: string;
+    /** The host's `tier`, which says whose tag it is. */
+    tier: string;
+}
+/**
+ * The sentence that ends a report of an element nobody registered: the entry
+ * to import on our tiers, and on a tier of your own the tag to define, which
+ * no import of ours can register.
+ *
+ * In every build, because some of those reports are: Filter Input says so
+ * when the options `source` gave cannot be drawn.
+ */
+export declare const howToRegister: ({ entry, host, tag, tier }: Unregistered) => string;

package/dist/utils/how-to-register/how-to-register.js

@@ -0,0 +1,3 @@
+export const howToRegister = ({ entry, host, tag, tier }) => tier === 'helix-' || tier === 'helix-headless-'
+    ? `Import '${tier === 'helix-' ? '@fusion.dev/helix' : '@fusion.dev/helix-headless'}/${entry}'.`
+    : `Define <${tag}> as you defined <${host}>.`;

package/dist/utils/labels-of/labels-of.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The `<label>` elements that name an element, in tree order: the `labels` of
+ * a native control or of a form-associated host, as an array.
+ *
+ * **Read only where a label could name the element.** A `<label for>` names an
+ * element by its `id`, and a `<label>` without `for` names the first control
+ * inside it, both within the element's own tree. So an element with no `id`
+ * and no `<label>` around it has no labels, and its list is never made.
+ *
+ * **Reading `labels` costs every later change to the page.** The browser makes
+ * a live list, the element keeps it for as long as it lives, and the document
+ * updates every such list whenever any element gains or loses a child,
+ * a detached fragment included. Measured in Chromium on October 10, 2026: once
+ * 1,000 buttons had been asked for their labels, cloning a template of three
+ * elements took 16 µs, against 0.6 µs before. A page of 1,000 Helix buttons
+ * spent 35 ms of its 123 ms first frame cloning templates for that reason.
+ *
+ * A server's element shim has no `closest`, and its labels are read as
+ * before.
+ */
+export declare const labelsOf: (element: Element & {
+    labels?: NodeList | null;
+}) => HTMLElement[];

package/dist/utils/labels-of/labels-of.js

@@ -0,0 +1,8 @@
+export const labelsOf = (element) => {
+    if (element.id === '' &&
+        typeof element.closest === 'function' &&
+        element.closest('label') === null) {
+        return [];
+    }
+    return [...(element.labels ?? [])];
+};

package/dist/utils/line-path/line-path.d.ts

@@ -37,3 +37,21 @@ export type Point = readonly [number, number];
  * path element that looks like it should.
  */
 export declare const linePath: (points: readonly Point[], curve: Curve) => string;
+/**
+ * The points a line needs to look the same drawn `columns` pixels across a
+ * box `width` wide: in each column of pixels, the first point, the lowest, the
+ * highest and the last, in the order they come.
+ *
+ * **A line of more points than its box has pixels draws most of them on top
+ * of one another.** 100,000 readings across 900 pixels are a hundred to a
+ * pixel, and a browser rasterizes every one of their segments on every frame
+ * the drawing repaints: measured in Chromium on October 10, 2026, four series
+ * of 100,000 cost 90 milliseconds a frame while a pointer moved over them. In
+ * one column the line covers everything between its lowest and its highest
+ * point and enters and leaves at its first and its last, so those four are the
+ * column's whole drawing, which is the reduction known as M4.
+ *
+ * The points as they are where there are no more than four to a column, so a
+ * chart of a few hundred readings draws every one of them.
+ */
+export declare const columnPoints: (points: readonly Point[], columns: number, width: number) => readonly Point[];

package/dist/utils/line-path/line-path.js

@@ -69,3 +69,39 @@ export const linePath = (points, curve) => {
             .map(([x, y]) => `L${round(x)},${round(y)}`)
             .join(''));
 };
+export const columnPoints = (points, columns, width) => {
+    if (!(columns > 0) || points.length <= 4 * columns) {
+        return points;
+    }
+    const kept = [];
+    let column = Number.NaN;
+    let first = 0;
+    let low = 0;
+    let high = 0;
+    const flush = (last) => {
+        for (const at of [...new Set([first, low, high, last])].sort((a, b) => a - b)) {
+            kept.push(points[at]);
+        }
+    };
+    points.forEach(([x, y], at) => {
+        const here = Math.floor((x / width) * columns);
+        if (here !== column) {
+            if (at > 0) {
+                flush(at - 1);
+            }
+            column = here;
+            first = at;
+            low = at;
+            high = at;
+            return;
+        }
+        if (y < points[low][1]) {
+            low = at;
+        }
+        if (y > points[high][1]) {
+            high = at;
+        }
+    });
+    flush(points.length - 1);
+    return kept;
+};

package/dist/utils/locale-of/locale-of.d.ts

@@ -1,8 +1,45 @@
 /**
  * The runtime's own locale: in a browser, the language its interface is set
  * to, which is what every `Intl` call given no locale uses.
+ *
+ * **Read only where an element needs the whole locale**, because the first
+ * `DateTimeFormat` a page makes costs 7.1 ms in Chromium (October 10, 2026).
+ * A `lang` compared with the runtime reads `runtimeLanguage`, and an element
+ * that only watches for a change of locale reads `nearestLang`.
  */
 export declare const runtimeLocale: () => string;
+/**
+ * The language of the runtime's own locale, which is all a `lang` is compared
+ * with.
+ *
+ * **From `PluralRules`, whose first instance costs 0.2 ms where
+ * `DateTimeFormat`'s costs 7.1** (Chromium, October 10, 2026). Every `Intl`
+ * constructor given no locale resolves the runtime's default. `PluralRules`
+ * leaves out a Unicode extension the default may carry, such as a calendar
+ * or an hour cycle, which `DateTimeFormat` keeps, so the two locales can
+ * differ there, and their languages cannot. Read in Chromium across 29
+ * locales and in Node across 10: the languages matched in every one.
+ */
+export declare const runtimeLanguage: () => string;
+/**
+ * A `lang` as a locale to format in: empty where the runtime's own locale
+ * already speaks it, or where it is no tag `Intl` takes.
+ *
+ * **A language with no region defers to the reader's own.** `lang="en"` says
+ * the page is in English, and a reader whose browser is set to British English
+ * reads English: their own dates, day first, say it better than the United
+ * States ones `en` stands for. So a bare language the runtime shares is read
+ * as the runtime's locale, and a page that names a region, `lang="en-US"`,
+ * gets that region. **And a tag `Intl` refuses is no locale**, since every
+ * formatter given one throws.
+ */
+export declare const usableLocale: (lang: string) => string;
+/**
+ * The `lang` of the nearest element with one, read out through any shadow
+ * root the element is drawn in, or `undefined` where none has one. A server
+ * shim with no `closest` has none.
+ */
+export declare const nearestLang: (element: Element) => string | undefined;
 /**
  * The locale an element speaks: `own`, the element's own `locale` property,
  * where one is set, and otherwise the `lang` of the nearest element with one,
@@ -16,8 +53,9 @@ export declare const runtimeLocale: () => string;
  *
  * Empty where nothing says, which every `Intl` call here takes as the
  * runtime's own locale, and empty for a bare language the runtime already
- * speaks (see `usable`). Read when asked rather than watched, so a page that
- * changes its `lang` is answered in the new one on the element's next render.
+ * speaks (see `usableLocale`). Read when asked rather than watched, so a page
+ * that changes its `lang` is answered in the new one on the element's next
+ * render.
  * A server shim with no `closest` answers `own`, or empty.
  */
 export declare const localeOf: (element: Element, own?: string) => string;

package/dist/utils/locale-of/locale-of.js

@@ -1,32 +1,46 @@
 let runtime;
+let language;
+const usable = new Map();
 export const runtimeLocale = () => {
     runtime ??= new Intl.Locale(new Intl.DateTimeFormat().resolvedOptions().locale);
     return runtime.toString();
 };
-const usable = (lang) => {
-    try {
-        const asked = new Intl.Locale(lang);
-        runtimeLocale();
-        return asked.region === undefined && asked.language === runtime?.language
-            ? ''
-            : asked.toString();
-    }
-    catch {
-        return '';
-    }
+export const runtimeLanguage = () => {
+    language ??=
+        runtime?.language ?? new Intl.Locale(new Intl.PluralRules().resolvedOptions().locale).language;
+    return language;
 };
-export const localeOf = (element, own = '') => {
-    if (own) {
-        return own;
+export const usableLocale = (lang) => {
+    let found = usable.get(lang);
+    if (found === undefined) {
+        try {
+            const asked = new Intl.Locale(lang);
+            found =
+                asked.region === undefined && asked.language === runtimeLanguage() ? '' : asked.toString();
+        }
+        catch {
+            found = '';
+        }
+        usable.set(lang, found);
     }
+    return found;
+};
+export const nearestLang = (element) => {
     let from = element;
     while (from && typeof from.closest === 'function') {
         const found = from.closest('[lang]');
         if (found) {
-            return usable(found.getAttribute('lang') ?? '');
+            return found.getAttribute('lang') ?? '';
         }
         const root = from.getRootNode?.();
         from = root?.host ?? null;
     }
-    return '';
+    return undefined;
+};
+export const localeOf = (element, own = '') => {
+    if (own) {
+        return own;
+    }
+    const lang = nearestLang(element);
+    return lang === undefined ? '' : usableLocale(lang);
 };

package/dist/utils/number-converter/number-converter.d.ts

@@ -0,0 +1,44 @@
+import type { ComplexAttributeConverter } from 'lit';
+/** What both converters hand Lit: a number, or `undefined` for a property with no default. */
+type Converter = ComplexAttributeConverter<number | undefined>;
+/**
+ * Reads a numeric attribute the way a native element reads one: a finite
+ * number is taken, and anything else leaves the property at its default. A
+ * property declares it as its `converter`, with the attribute's name and the
+ * default the field is initialized to.
+ *
+ * **Lit's `Number` converter takes whatever `Number()` returns**, so a typo
+ * became `NaN` and an empty attribute became 0, silently: `page-size="1O"`
+ * showed every row of a data table, and `max="1OO"` sent `NaN` with a form.
+ * `<progress max="ten">` keeps a `max` of 1.
+ *
+ * **A number with a unit after it is not a number here**, although HTML's own
+ * parsing reads `8px` as 8. A unit says the writer counted in a scale the
+ * property may not use. An attribute in milliseconds takes `timeConverter`,
+ * which reads the units it can.
+ *
+ * **The default is written twice on purpose.** A converter is handed the
+ * attribute's text and nothing else, so it cannot read the field's
+ * initializer. Lit's `useDefault` could, and it also drops the initial value
+ * from the first update's changed properties, which every `willUpdate` that
+ * reads `changed.has(...)` on the first render would lose.
+ *
+ * An empty attribute and `Infinity` are not numbers here, and a removed
+ * attribute returns the property to its default. `unit` names what the number
+ * counts, such as `pixels`, for the development warning, which reports each
+ * value that is not a number once. A property with an accessor passes
+ * `undefined`, which hands its setter the value that means "not set", so its
+ * `default-` seed shows through.
+ */
+export declare const numberConverter: (attribute: string, fallback: number | undefined, unit?: string) => Converter;
+/**
+ * Reads an attribute in milliseconds, as `numberConverter` reads a number,
+ * and also takes a CSS time: `3s` is 3000, `0.5s` is 500 and `300ms` is 300.
+ * The property is always milliseconds.
+ *
+ * **A time is zero or more**, as a CSS duration is, so `-1s` and `-1` keep
+ * the default. A space between the number and its unit is not a CSS time
+ * either, and neither is a unit CSS has no time for, such as `3m`.
+ */
+export declare const timeConverter: (attribute: string, fallback: number | undefined) => Converter;
+export {};

package/dist/utils/number-converter/number-converter.js

@@ -0,0 +1,34 @@
+import { auditNumber, auditTime } from '@fusion.dev/helix-core/audits/number';
+export const numberConverter = (attribute, fallback, unit) => ({
+    fromAttribute: (value) => {
+        if (value === null) {
+            return fallback;
+        }
+        const read = value.trim() === '' ? Number.NaN : Number(value);
+        if (Number.isFinite(read)) {
+            return read;
+        }
+        auditNumber(attribute, value, fallback, unit);
+        return fallback;
+    },
+});
+const CSS_TIME = /^(\d+\.?\d*|\.\d+)(ms|s)$/i;
+export const timeConverter = (attribute, fallback) => ({
+    fromAttribute: (value) => {
+        if (value === null) {
+            return fallback;
+        }
+        const written = value.trim();
+        const time = CSS_TIME.exec(written);
+        const read = time
+            ? Number(time[2]?.toLowerCase() === 's' ? `${time[1]}e3` : time[1])
+            : written === ''
+                ? Number.NaN
+                : Number(written);
+        if (Number.isFinite(read) && read >= 0) {
+            return read;
+        }
+        auditTime(attribute, value, fallback);
+        return fallback;
+    },
+});

package/dist/utils/read-data/read-data.d.ts

@@ -48,7 +48,7 @@ export declare const isChartData: (data: unknown) => data is ChartData;
  * reads a table: a column with no numbers in it is not a series, and a blank
  * keeps its row's place.
  */
-export declare const seriesFromData: (data: ChartData, locale?: string) => Series[];
+export declare const seriesFromData: (data: ChartData) => Series[];
 /**
  * Reads `data` as rows, as `readRows` reads a table: every cell with its
  * words and its number, including the columns nothing plots.

package/dist/utils/read-data/read-data.js

@@ -1,3 +1,4 @@
+import { formatNumbers } from '../format-numbers/format-numbers.js';
 export const isChartData = (data) => {
     const shape = data;
     return (typeof shape === 'object' &&
@@ -7,29 +8,41 @@ export const isChartData = (data) => {
         shape.rows.every((row) => Array.isArray(row)));
 };
 const cellOf = (datum, locale) => {
+    const value = numberIn(datum);
     if (datum === null || datum === undefined) {
         return { text: '' };
     }
     if (typeof datum === 'object') {
-        return Number.isFinite(datum.value)
-            ? { text: datum.text, value: datum.value }
-            : { text: datum.text };
+        return value === undefined ? { text: datum.text } : { text: datum.text, value };
     }
     if (typeof datum === 'number') {
-        return Number.isFinite(datum)
-            ? { text: new Intl.NumberFormat(locale || undefined).format(datum), value: datum }
-            : { text: '' };
+        return value === undefined ? { text: '' } : { text: formatNumbers(locale)(datum), value };
+    }
+    return value === undefined ? { text: datum } : { text: datum, value };
+};
+const numberIn = (datum) => {
+    if (datum === null || datum === undefined) {
+        return undefined;
+    }
+    if (typeof datum === 'object') {
+        return Number.isFinite(datum.value) ? datum.value : undefined;
+    }
+    if (typeof datum === 'number') {
+        return Number.isFinite(datum) ? datum : undefined;
     }
     const value = Number(datum.trim());
-    return Number.isFinite(value) && datum.trim() !== '' ? { text: datum, value } : { text: datum };
+    return Number.isFinite(value) && datum.trim() !== '' ? value : undefined;
 };
-export const seriesFromData = (data, locale = '') => {
+export const seriesFromData = (data) => {
     const names = data.columns.slice(1);
-    const count = Math.max(0, ...data.rows.map((row) => row.length - 1));
+    let count = 0;
+    for (const row of data.rows) {
+        count = Math.max(count, row.length - 1);
+    }
     return Array.from({ length: count }, (_, column) => ({
         name: names[column] ?? data.caption ?? '',
         points: data.rows.flatMap((row, at) => {
-            const value = cellOf(row[column + 1], locale).value;
+            const value = numberIn(row[column + 1]);
             return value === undefined ? [] : [{ at, label: String(row[0] ?? ''), value }];
         }),
     })).filter((one) => one.points.length > 0);

package/dist/utils/read-series/read-series.js

@@ -1,6 +1,13 @@
 const ROWS = 'helix-table-row, helix-headless-table-row, [role="row"]';
 const CELLS = 'helix-table-cell, helix-headless-table-cell, [role="cell"], [role="gridcell"], [role="rowheader"]';
 const COLUMNS = 'helix-table-column, helix-headless-table-column, [role="columnheader"]';
+const widest = (counts) => {
+    let most = 0;
+    for (const count of counts) {
+        most = Math.max(most, count);
+    }
+    return most;
+};
 const isGrid = (element) => element.getAttribute('role') === 'table' ||
     element.getAttribute('role') === 'grid' ||
     /^helix-(headless-)?table$/i.test(element.tagName);
@@ -9,7 +16,7 @@ const readGrid = (grid) => {
     const rows = gridRows(grid);
     const names = columns.slice(1).map((cell) => cell.textContent?.trim() ?? '');
     const cellsOf = (row) => [...row.querySelectorAll(CELLS)];
-    const count = Math.max(0, ...rows.map((row) => cellsOf(row).length - 1));
+    const count = widest(rows.map((row) => cellsOf(row).length - 1));
     return Array.from({ length: count }, (_, column) => ({
         name: names[column] ?? grid.getAttribute('label') ?? '',
         points: rows.flatMap((row, at) => {
@@ -48,7 +55,7 @@ export const readSeries = (table) => {
         .slice(1)
         .map((cell) => cell.textContent?.trim() ?? '');
     const rows = [...(element.tBodies[0]?.rows ?? [])];
-    const columns = Math.max(0, ...rows.map((row) => row.cells.length - 1));
+    const columns = widest(rows.map((row) => row.cells.length - 1));
     return plotted(Array.from({ length: columns }, (_, column) => ({
         name: names[column] ?? element.caption?.textContent?.trim() ?? '',
         points: rows.flatMap((row, at) => {

package/dist/utils/report-runtime/report-runtime.d.ts

@@ -61,6 +61,12 @@ export type RuntimeKind =
  | 'negative-value'
 /** A Graph connector was handed an element that is no Graph frame. */
  | 'not-a-graph'
+/**
+ * A numeric attribute holds something that is not a number, such as `1O`, or an attribute in
+ * milliseconds something that is not a time, such as `soon`, so the property keeps its
+ * default. Development builds only.
+ */
+ | 'not-a-number'
 /** A plot connector was handed an element that is not the spatial chart it connects. */
  | 'not-a-plot'
 /** The browser refused picture in picture. */
@@ -93,6 +99,8 @@ export type RuntimeKind =
  | 'unknown-event'
 /** An Icon's `name` is in no icon set it can read, so it draws nothing. */
  | 'unknown-icon'
+/** A sandbox editor's `language` is no language it reads, so its source is drawn plain. */
+ | 'unknown-language'
 /** A tooltip's trigger does not name it in `aria-describedby`, so it is not read out. */
  | 'unlinked-trigger'
 /** A Text is rendered as a label, a deprecated value whose shadow root reaches no control. */

package/dist/utils/scale/scale.d.ts

@@ -1,6 +1,12 @@
 /** A mapping from one numeric interval onto another. */
 export type Scale = (value: number) => number;
-/** The smallest and largest of a set of numbers, as a scale's domain. */
+/**
+ * The smallest and largest of a set of numbers, as a scale's domain, and
+ * `[Infinity, -Infinity]` for none, as `Math.min` and `Math.max` answer.
+ *
+ * A loop: spread into `Math.min`, four series of 100,000 readings are more
+ * arguments than a call can take, and the spread threw a `RangeError`.
+ */
 export declare const extent: (values: readonly number[]) => [number, number];
 /**
  * Maps a domain onto a range, linearly.

package/dist/utils/scale/scale.js

@@ -1,7 +1,12 @@
-export const extent = (values) => [
-    Math.min(...values),
-    Math.max(...values),
-];
+export const extent = (values) => {
+    let low = Number.POSITIVE_INFINITY;
+    let high = Number.NEGATIVE_INFINITY;
+    for (const value of values) {
+        low = Math.min(low, value);
+        high = Math.max(high, value);
+    }
+    return [low, high];
+};
 export const linear = (domain, range) => {
     const [from, to] = domain;
     const [start, end] = range;

package/dist/utils/scroll-item-into-view/scroll-item-into-view.d.ts

@@ -21,6 +21,11 @@ export interface ScrollItemOptions {
  * almost always in one and `parentElement` is null at the root. Without that
  * step, a component whose scroller is its own `[part]` would find nothing.
  *
+ * **A slotted item climbs through its slot.** Its parent is the host, and the
+ * box it is drawn and scrolled in is inside the host's shadow root: Filter
+ * Input's suggestions are its children, and its panel scrolls them. Climbing
+ * by parent passed the panel and found nothing.
+ *
  * It stops before the document. Scrolling the page is the one thing this whole
  * util exists not to do, so finding nothing inside the component and returning
  * null is the honest answer: the caller no-ops rather than taking the address

package/dist/utils/scroll-item-into-view/scroll-item-into-view.js

@@ -22,8 +22,9 @@ const overflows = (node, axis) => {
     return axis === 'x' ? wide : axis === 'y' ? tall : tall || wide;
 };
 const climb = (node) => {
-    if (node.parentElement) {
-        return node.parentElement;
+    const up = node.assignedSlot ?? node.parentElement;
+    if (up) {
+        return up;
     }
     const root = node.getRootNode();
     return root instanceof ShadowRoot ? root.host : null;

package/dist/utils/watch-labels/watch-labels.d.ts

@@ -10,7 +10,9 @@
  *
  * **One observer per tree, whatever the number of controls in it**, so a form
  * of forty fields watches the page once, and a change that touches no label
- * costs one check per record. The returned function stops the watch, and an
- * observer whose controls have all gone stops at the next change it sees.
+ * costs one check per record. The returned function stops the watch, and the
+ * observer goes with the last control in its tree. A tree can be another
+ * element's shadow root, which changes no more once that element is removed,
+ * so an observer left for a later change to stop would keep the root forever.
  */
 export declare const watchLabels: (host: Node, heard: () => void) => (() => void);

package/dist/utils/watch-labels/watch-labels.js

@@ -3,16 +3,12 @@ const touchesLabel = ({ addedNodes, removedNodes, target }) => [target, ...added
     (node instanceof Element && node.querySelector('label') !== null));
 export const watchLabels = (host, heard) => {
     const root = host.getRootNode();
-    let callbacks = trees.get(root);
-    if (!callbacks) {
-        const made = new Set();
+    let tree = trees.get(root);
+    if (!tree) {
+        const callbacks = new Set();
         const observer = new MutationObserver((records) => {
-            if (made.size === 0) {
-                observer.disconnect();
-                trees.delete(root);
-            }
-            else if (records.some(touchesLabel)) {
-                for (const callback of [...made]) {
+            if (records.some(touchesLabel)) {
+                for (const callback of [...callbacks]) {
                     callback();
                 }
             }
@@ -23,12 +19,16 @@ export const watchLabels = (host, heard) => {
             childList: true,
             subtree: true,
         });
-        callbacks = made;
-        trees.set(root, made);
+        tree = { heard: callbacks, observer };
+        trees.set(root, tree);
     }
-    callbacks.add(heard);
-    const watched = callbacks;
+    tree.heard.add(heard);
+    const watched = tree;
     return () => {
-        watched.delete(heard);
+        watched.heard.delete(heard);
+        if (watched.heard.size === 0 && trees.get(root) === watched) {
+            watched.observer.disconnect();
+            trees.delete(root);
+        }
     };
 };

package/dist/version.d.ts

@@ -6,4 +6,4 @@
  * release, so the two never disagree; a spec beside this holds them to it.
  * Nothing else in the running code knows which release it is.
  */
-export declare const VERSION = "0.205.2";
+export declare const VERSION = "0.207.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.205.2';
+export const VERSION = '0.207.0';