@fusion.dev/helix-core 0.25.1 → 0.30.0

package/dist/helix-element/react-bridge.d.ts

@@ -0,0 +1,104 @@
+import type { LitElement } from 'lit';
+/** The props React is holding for a node, if React is holding any. */
+export declare const reactPropsOf: (node: EventTarget) => Record<string, unknown> | undefined;
+/**
+ * Says so when a handler prop is attached to nothing.
+ *
+ * **TypeScript will not catch any of this, and that is not our tooling's
+ * fault.** A JSX attribute whose name is not a valid identifier is exempt from
+ * checking on an intrinsic element, and every one of ours carries a hyphen. So
+ * `onhelix-opne` type-checks, `on:helix-open` type-checks, and a made-up
+ * `totally-invented` prop type-checks, all against fully generated types that
+ * do reject a wrong *value* on a normal attribute. Measured with `tsc`.
+ *
+ * That leaves runtime as the only place a typo can be caught, and React's props
+ * bag as the only place to look, which the binding above already reads. Once per
+ * element, because a warning that repeats on every keystroke is one a consumer
+ * silences.
+ *
+ * `on:helix-open` gets its own message because it is not a mistake so much as
+ * the wrong dialect. It is what the Solid types offer, correctly, and React
+ * binds it as an event named `:helix-open`.
+ */
+export declare const auditReactProps: (host: EventTarget, props: Record<string, unknown>) => void;
+/**
+ * The prop React would be holding for this event, if it is holding one.
+ *
+ * **A relayed native event needs a different answer from one of ours, and
+ * getting it wrong doubles every call.** Measured against React 19.2.8:
+ *
+ * ```
+ * onhelix-before-change <- helix-before-change  REACHED (React binds it with addEventListener)
+ * onChange       <- change        REACHED    (React's delegated root listener)
+ * onLoad         <- load          not reached
+ * onError        <- error         not reached
+ * onEnded        <- ended         not reached
+ * ```
+ *
+ * React binds a hyphenated prop directly on the element, so our own events are
+ * reached by name and are safe to bind again: same type, same callback, same
+ * capture flag is a no-op by specification. A native name is different. React
+ * recognizes `onChange` and `onLoad` as its own registration names and attaches
+ * nothing to the element for either; it relies on a delegated listener at the
+ * root, which sees an event only if it **bubbles**, and on a non-delegated list
+ * it sets up for `<video>`, `<audio>` and `<img>` and never for a custom
+ * element.
+ *
+ * So a bubbling relay already arrives and must not be bound again: React's
+ * listener is at the root rather than on the element, so nothing deduplicates
+ * it and the consumer's handler runs twice. A non-bubbling relay arrives
+ * nowhere, and is the bug this exists to close: `<helix-avatar>` relays `load`
+ * and `error`, `<helix-video>` relays `ended`, `play` and `pause`, all of them
+ * declared public API and all of them otherwise silent in React.
+ *
+ * The name is React's own casing, `onError` rather than `onerror`, because that
+ * is what a consumer writes and therefore what is in the props bag. Every
+ * native we relay is a single word, so capitalising the first letter is the
+ * whole of the rule; a two-word name like `loadeddata` would be `onLoadedData`
+ * and needs the list extending rather than the rule generalising.
+ */
+export declare const reactPropFor: (event: Event) => string | undefined;
+export declare const bindReactHandler: (host: EventTarget, event: Event) => void;
+/**
+ * Assigns the object and function properties React is holding and never applied.
+ *
+ * **The same hydration bug as the handlers above, and it needed its own fix.**
+ * React skips every prop it would have to apply imperatively while hydrating,
+ * not only listeners. Strings, numbers and booleans arrive anyway, because the
+ * server wrote them as attributes and Lit converts them back. An object or a
+ * function arrives by no route at all, and both halves of React agree to drop
+ * it: the server renderer reaches its custom element branch, finds
+ * `typeof value === 'object'` and `continue`s, so nothing is written into the
+ * HTML; and the client's hydrate path only diffs and warns for a custom element,
+ * never reaching `setPropOnCustomElement`. Two skips that match, so there is no
+ * mismatch to report and no warning anywhere.
+ *
+ * **The binding trick above does not transfer, which is why this is separate.**
+ * A listener only has to exist by the time somebody interacts, so binding it at
+ * dispatch is late enough that hydration has certainly finished and early enough
+ * to catch the event being sent. A property has to be right before the first
+ * paint. `connectedCallback` is the obvious early moment and is the wrong one,
+ * measured: an element upgrades when its definition loads, which falls either
+ * side of hydration depending on how the consumer imported it, and on the side
+ * this is for it is too early to see anything.
+ *
+ * **Only what the class declared, and only what could not have arrived as an
+ * attribute.** The first is what stops an arbitrary JSX prop being written onto
+ * the element; the second is what keeps this to the properties that are actually
+ * broken, rather than re-applying a string that is already correct. Three
+ * qualify today, `rows` on the data table and `cell` and `compare` on a table
+ * column; the remaining `attribute: false` properties are booleans and strings a
+ * parent writes at runtime, which no consumer passes and this never touches.
+ *
+ * **`null` is the one place this does not reproduce a client mount, and it is
+ * deliberate.** `typeof null` is `'object'`, and React assigns a null prop on a
+ * client mount while dropping it on the server, so it is genuinely inside the
+ * gap this closes. Assigning it would faithfully reproduce a crash: the server
+ * left the class default standing, and replacing that default with `null` is the
+ * one case where closing the gap makes the page worse than leaving it open.
+ *
+ * Idempotent, so the handover needs no bookkeeping. Lit compares by identity, so
+ * React's next commit assigning the same value schedules no update, and one
+ * assigning a different value is a change whoever writes it.
+ */
+export declare const applyReactProperties: (host: LitElement) => boolean;

package/dist/helix-element/react-bridge.js

@@ -0,0 +1,94 @@
+import { eventsForTag } from '../events/element-events.js';
+import { helixEventNames } from '../events/events.js';
+const REACT_PROPS = '__reactProps$';
+let reactPropsKey;
+export const reactPropsOf = (node) => {
+    const stash = node;
+    if (reactPropsKey !== undefined && stash[reactPropsKey] !== undefined) {
+        return stash[reactPropsKey];
+    }
+    const found = Object.keys(stash).find((key) => key.startsWith(REACT_PROPS));
+    if (found === undefined) {
+        return undefined;
+    }
+    reactPropsKey = found;
+    return stash[found];
+};
+const audited = new WeakSet();
+const REMOVED = new Set(['onActiveChange', 'onCheckedChange', 'onOpenChange', 'onValueChange']);
+export const auditReactProps = (host, props) => {
+    if (audited.has(host)) {
+        return;
+    }
+    audited.add(host);
+    const tag = host instanceof Element ? `<${host.localName}>` : 'A Helix element';
+    for (const key of Object.keys(props)) {
+        if (key.startsWith('on:')) {
+            console.warn(`${tag} was given \`${key}\`, which is Solid's syntax. React binds the name after \`on\` ` +
+                `verbatim, so this listens for an event called \`${key.slice(2)}\`. Write \`on${key.slice(3)}\`.`);
+            continue;
+        }
+        if (REMOVED.has(key)) {
+            console.warn(`${tag} was given \`${key}\`, which was removed. It never worked from JSX, because React ` +
+                `binds any \`on\` prop as an event of that name. Listen for the element's change event instead.`);
+            continue;
+        }
+        if (!key.startsWith('on') || !key.includes('-')) {
+            continue;
+        }
+        const name = key.slice(2);
+        if (!helixEventNames.has(name)) {
+            console.warn(`${tag} was given \`${key}\`, and nothing dispatches \`${name}\`. TypeScript cannot ` +
+                `check a hyphenated JSX prop, so this is the only place it shows up.`);
+            continue;
+        }
+        const mine = host instanceof Element ? eventsForTag(host.localName) : undefined;
+        if (mine && !mine.has(name)) {
+            console.warn(`${tag} was given \`${key}\`, but it dispatches ${[...mine].map((one) => `\`${one}\``).join(', ')}. ` +
+                `\`${name}\` is sent by a different element, and React only wires an \`on\` prop on the ` +
+                'element that dispatches, so this handler will never run. Put it on that element.');
+        }
+    }
+};
+const REACT_WIRES = new Set(['scroll', 'scrollend']);
+export const reactPropFor = (event) => {
+    if (event.type.includes('-')) {
+        return `on${event.type}`;
+    }
+    if (event.bubbles || REACT_WIRES.has(event.type)) {
+        return undefined;
+    }
+    return `on${event.type.charAt(0).toUpperCase()}${event.type.slice(1)}`;
+};
+export const bindReactHandler = (host, event) => {
+    const props = reactPropsOf(host);
+    if (props === undefined) {
+        return;
+    }
+    auditReactProps(host, props);
+    const key = reactPropFor(event);
+    const handler = key === undefined ? undefined : props[key];
+    if (typeof handler === 'function') {
+        host.addEventListener(event.type, handler);
+    }
+};
+export const applyReactProperties = (host) => {
+    const props = reactPropsOf(host);
+    if (props === undefined) {
+        return false;
+    }
+    const target = host;
+    for (const name of host.constructor.elementProperties.keys()) {
+        if (typeof name !== 'string' || !Object.hasOwn(props, name)) {
+            continue;
+        }
+        const value = props[name];
+        if (value === null || (typeof value !== 'object' && typeof value !== 'function')) {
+            continue;
+        }
+        if (target[name] !== value) {
+            target[name] = value;
+        }
+    }
+    return true;
+};

package/dist/helix-form-element/helix-form-element.d.ts

@@ -112,6 +112,25 @@ export declare class HelixFormElement extends HelixElement {
      */
     formDisabledCallback(disabled: boolean): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Announces `input` from the host, the way the control it stands for would.
+     *
+     * Composed, as the native one is: `input` crosses shadow boundaries by
+     * specification, so a consumer listening above a composition hears it.
+     */
+    protected announceInput(): void;
+    /**
+     * Announces `change` from the host, the way the control it stands for would.
+     *
+     * **Not composed, and that is the shape of the native event rather than a
+     * choice made here.** `change` stops at a shadow boundary, so a composed
+     * control hears its inner control's and relays it under the same name from
+     * its own host, which is what `onChange` binds. Every control here that
+     * commits a value announces it through this, whether the commit came from an
+     * inner control's own `change`, a step, a scrub or a completed code, so the
+     * event is one shape in one place.
+     */
+    protected announceChange(): void;
     /**
      * Name submitted with the form.
      *

package/dist/helix-form-element/helix-form-element.js

@@ -24,6 +24,12 @@ export class HelixFormElement extends HelixElement {
         super.willUpdate(changed);
         this.internals.ariaDisabled = this.isDisabled ? 'true' : null;
     }
+    announceInput() {
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    }
+    announceChange() {
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+    }
     get form() {
         return this.internals.form;
     }

package/dist/index.d.ts

@@ -25,10 +25,11 @@ export { MixinControllerOpen, type MixinControllerOpenInterface, } from './mixin
 export { MixinControllerValue, type MixinControllerValueInterface, } from './mixins/mixin-controller-value/mixin-controller-value.js';
 export { type DismissibleElement, MixinDismissible, } from './mixins/mixin-dismissible/mixin-dismissible.js';
 export { MixinField, type MixinFieldInterface } from './mixins/mixin-field/mixin-field.js';
+export { MixinPickerEditing, type MixinPickerEditingInterface, } from './mixins/mixin-picker-editing/mixin-picker-editing.js';
+export { MixinPickerField, type MixinPickerFieldInterface, } from './mixins/mixin-picker-field/mixin-picker-field.js';
 export { MixinTokens, type MixinTokensInterface } from './mixins/mixin-tokens/mixin-tokens.js';
 export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
-export { closeMarkdown } from './utils/close-markdown/close-markdown.js';
 export { closestInstance } from './utils/closest-instance/closest-instance.js';
 export { createSheet } from './utils/create-sheet/create-sheet.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';

package/dist/index.js

@@ -25,10 +25,11 @@ export { MixinControllerOpen, } from './mixins/mixin-controller-open/mixin-contr
 export { MixinControllerValue, } from './mixins/mixin-controller-value/mixin-controller-value.js';
 export { MixinDismissible, } from './mixins/mixin-dismissible/mixin-dismissible.js';
 export { MixinField } from './mixins/mixin-field/mixin-field.js';
+export { MixinPickerEditing, } from './mixins/mixin-picker-editing/mixin-picker-editing.js';
+export { MixinPickerField, } from './mixins/mixin-picker-field/mixin-picker-field.js';
 export { MixinTokens } from './mixins/mixin-tokens/mixin-tokens.js';
 export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
-export { closeMarkdown } from './utils/close-markdown/close-markdown.js';
 export { closestInstance } from './utils/closest-instance/closest-instance.js';
 export { createSheet } from './utils/create-sheet/create-sheet.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';

package/dist/mixins/mixin-chart-source/mixin-chart-source.d.ts

@@ -1,6 +1,6 @@
 import { ChartPointerController } from '../../controllers/chart-pointer-controller/chart-pointer-controller.js';
 import type { HelixElement } from '../../helix-element/helix-element.js';
-import { type Row, type Series } from '../../utils/read-series/read-series.js';
+import type { Row, Series } from '../../utils/read-series/read-series.js';
 type Constructor<T> = new (...args: any[]) => T;
 /**
  * How many colors the series palette has, and so where it starts over.

package/dist/mixins/mixin-chart-source/mixin-chart-source.js

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { property } from 'lit/decorators.js';
 import { ChartPointerController } from '../../controllers/chart-pointer-controller/chart-pointer-controller.js';
 import { SourceController } from '../../controllers/source-controller/source-controller.js';
-import { readRows, readSeries } from '../../utils/read-series/read-series.js';
 export const PALETTE = 24;
 export const seriesIndex = (depth) => (depth % PALETTE) + 1;
 export const MixinChartSource = (Base) => {
@@ -26,15 +25,13 @@ export const MixinChartSource = (Base) => {
             }
         }
         get series() {
-            const element = this.source.element;
-            return element ? readSeries(element) : [];
+            return this.source.series;
         }
         get named() {
             return this.label || this.source.element?.querySelector('caption')?.textContent?.trim() || '';
         }
         get sourceRows() {
-            const element = this.source.element;
-            return element ? readRows(element) : [];
+            return this.source.rows;
         }
         get readings() {
             return this.sourceRows.length;

package/dist/mixins/mixin-controller-value/mixin-controller-value.js

@@ -24,9 +24,9 @@ export const MixinControllerValue = (Base) => {
             this.requestUpdate('value', previous);
         }
         announceNatively() {
-            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.announceInput();
             if (!this.announcesInput) {
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+                this.announceChange();
             }
         }
         requestValue(next) {

package/dist/mixins/mixin-field/mixin-field.js

@@ -72,7 +72,7 @@ export const MixinField = (Base) => {
       </p>`;
         }
         linkHost() {
-            const label = this.renderRoot.querySelector('[part="label"]');
+            const label = this.partNamed('label');
             hostAria(this.internals, {
                 describedBy: [HINT_ID, FEEDBACK_ID]
                     .map((id) => this.renderRoot.querySelector(`#${id}`))
@@ -89,7 +89,7 @@ export const MixinField = (Base) => {
         }
         reportRequired(empty, message, anchor) {
             if (this.required && empty) {
-                this.internals.setValidity({ valueMissing: true }, message, this.renderRoot?.querySelector(`[part="${anchor}"]`) ?? undefined);
+                this.internals.setValidity({ valueMissing: true }, message, this.partNamed(anchor) ?? undefined);
             }
             else {
                 this.internals.setValidity({});

package/dist/mixins/mixin-picker-editing/mixin-picker-editing.d.ts

@@ -0,0 +1,48 @@
+import type { HelixFormElement } from '../../helix-form-element/helix-form-element.js';
+import type { MixinControllerOpenInterface } from '../mixin-controller-open/mixin-controller-open.js';
+import type { MixinControllerValueInterface } from '../mixin-controller-value/mixin-controller-value.js';
+import type { MixinPickerFieldInterface } from '../mixin-picker-field/mixin-picker-field.js';
+type Constructor<T> = new (...args: any[]) => T;
+/** What this is applied over: a picker field, which `MixinPickerField` makes. */
+type EditingBase = HelixFormElement & MixinControllerOpenInterface & MixinControllerValueInterface & MixinPickerFieldInterface;
+/**
+ * The public surface `MixinPickerEditing` adds.
+ *
+ * Declared separately because TypeScript cannot emit declarations for an
+ * anonymous class that has private members (TS4094). Casting the mixin's return
+ * to this interface keeps the internals private and the build working.
+ */
+export declare class MixinPickerEditingInterface {
+    /**
+     * Whether the caret is in the field, which is when it holds the value.
+     */
+    protected editing: boolean;
+    /** The caret has left, so the field renders again. */
+    protected readonly handleBlur: () => void;
+    /** Focusing the field opens the picker, and only from outside the element. */
+    protected readonly handleFocus: (event: FocusEvent) => void;
+    /**
+     * Whether the control refuses changes while still submitting its value.
+     */
+    readOnly: boolean;
+    /** Refuses every change while read-only. See `readOnly`. */
+    requestValue(next: string): boolean;
+}
+/**
+ * Grafts the typing half of a picker field: it opens on arrival, holds the
+ * value while the caret is in it, and refuses while read-only.
+ *
+ * **Over `MixinPickerField` and not part of it, because Color Input takes the
+ * one and not the other.** Date Input and Time Input show a rendering while
+ * nobody is in the field, `4 August 2026` and `2:30 PM`, and the value itself
+ * while somebody is, because `Intl` formats and does not parse and a document
+ * being edited must not be a rendering of something else. That split needs to
+ * know when the caret is in the field, which is `editing`; and a reader who
+ * reaches such a field is choosing, so arriving opens the picker. A color has
+ * neither: `#ff0000` is what is typed and what is shown, and a reader who has
+ * the hex pastes it and never opens anything. `readOnly` is the third thing
+ * Color Input does not have, and a mixin cannot give it one without changing
+ * its API.
+ */
+export declare const MixinPickerEditing: <T extends Constructor<EditingBase>>(Base: T) => Constructor<MixinPickerEditingInterface> & T;
+export {};

package/dist/mixins/mixin-picker-editing/mixin-picker-editing.js

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { property, state } from 'lit/decorators.js';
+export const MixinPickerEditing = (Base) => {
+    class PickerEditingElement extends Base {
+        constructor() {
+            super(...arguments);
+            this.readOnly = false;
+            this.editing = false;
+            this.handleBlur = () => {
+                this.editing = false;
+            };
+            this.handleFocus = (event) => {
+                this.editing = !this.returning;
+                const from = event.relatedTarget;
+                if (this.open || this.isDisabled || this.returning) {
+                    return;
+                }
+                if (from instanceof Node && this.renderRoot?.contains?.(from)) {
+                    return;
+                }
+                this.requestOpen(true);
+            };
+        }
+        requestValue(next) {
+            if (this.readOnly) {
+                return false;
+            }
+            return super.requestValue(next);
+        }
+    }
+    __decorate([
+        property({ attribute: 'readonly', reflect: true, type: Boolean })
+    ], PickerEditingElement.prototype, "readOnly", void 0);
+    __decorate([
+        state()
+    ], PickerEditingElement.prototype, "editing", void 0);
+    return PickerEditingElement;
+};

package/dist/mixins/mixin-picker-field/mixin-picker-field.d.ts

@@ -0,0 +1,118 @@
+import { PopoverController } from '../../controllers/popover-controller/popover-controller.js';
+import type { HelixFormElement } from '../../helix-form-element/helix-form-element.js';
+import type { MixinControllerOpenInterface } from '../mixin-controller-open/mixin-controller-open.js';
+import type { MixinControllerValueInterface } from '../mixin-controller-value/mixin-controller-value.js';
+import type { MixinFieldInterface } from '../mixin-field/mixin-field.js';
+type Constructor<T> = new (...args: any[]) => T;
+/**
+ * What this is applied over: a form field that opens, holds a value and has a
+ * label, which is the three controller mixins and `MixinField` together.
+ */
+type PickerBase = HelixFormElement & MixinControllerOpenInterface & MixinControllerValueInterface & MixinFieldInterface;
+/**
+ * The public surface `MixinPickerField` adds.
+ *
+ * Declared separately because TypeScript cannot emit declarations for an
+ * anonymous class that has private members (TS4094). Casting the mixin's return
+ * to this interface keeps the internals private and the build working.
+ */
+export declare class MixinPickerFieldInterface {
+    /**
+     * What the label points at and focus lands on.
+     *
+     * The text control, unless a family says otherwise: Color Input in `swatch`
+     * has no text control, and its trigger is the only thing in the field a label
+     * can name.
+     */
+    protected get anchor(): HTMLElement | null;
+    /** The text input, or `null` where there is no DOM to hold one. */
+    protected get control(): HTMLInputElement | null;
+    /**
+     * What the field shows, which is the value unless a family renders it.
+     *
+     * Date Input and Time Input show a written date or time while nobody is in
+     * the field and the value itself while somebody is; Color Input shows the
+     * value either way. What `restore` puts back is whichever the family says.
+     */
+    protected get display(): string;
+    /** Puts the caret in the field, the way a label pointing at one would. */
+    focus(options?: FocusOptions): void;
+    /** Escape shuts the panel without moving the value. */
+    protected readonly handleKeydown: (event: KeyboardEvent) => void;
+    /** The overlay, placed against the field rather than the trigger. */
+    protected readonly panel: PopoverController;
+    /** Puts the field back where the answer differs from what was typed. */
+    protected restore(): void;
+    /** Puts the caret back in the field without the field reopening the panel. */
+    protected returnFocus(): void;
+    /** Whether this element is moving the focus itself, right now. */
+    protected returning: boolean;
+    /** Reports the value and the validity the host stands behind. */
+    protected sync(): void;
+    /**
+     * What is wrong with the value, in the reader's words, or nothing.
+     *
+     * The one check the platform cannot make: the control is `type="text"` and
+     * has no idea what a date, a time or a color is, so the family says what one
+     * looks like and `sync` reports it as `badInput`. Empty means the platform's
+     * own verdict stands.
+     */
+    protected validate(): string;
+}
+/**
+ * Grafts a floating picker onto a text field, and the protocol between them.
+ *
+ * **Three families are this shape and were three copies of it.** Date Input,
+ * Time Input and Color Input each render a text control, a trigger and a
+ * `popover="manual"` surface holding a picker that already exists on its own,
+ * and each owed the same wiring: the panel that floats the surface against the
+ * field, the Escape that shuts it and hands the caret back, the restore that
+ * puts the control back where a refusal left the value, and the sync that
+ * reports the value and a verdict the platform cannot reach. Measured on the
+ * diff that made the lift, 14 Sep 2026, comments counted: 223 lines left Date
+ * Input and 32 came back, 185 left Time Input and 32 came back, 87 left
+ * Color Input and 11 came back.
+ *
+ * **What it does not own is the picker, the typing or the value's shape.**
+ * Which element floats in the surface, what a keystroke means, what the field
+ * shows when idle and what is wrong with a value are each the family's, which
+ * is why `display` and `validate` are seams here and the template stays where
+ * it was. A family renders `field`, `control`, `trigger` and `surface`; this
+ * reads them.
+ *
+ * **The parts this reads are the host's, so the name is a parameter.** A
+ * literal `[part="control"]` here would be a lookup nothing in this file
+ * renders, which is the fault `helix component`'s `selectors` exists to catch
+ * and would rightly report. `MixinField.reportRequired` takes its anchor the
+ * same way, and for the same reason: a mixin reads a part out of whatever host
+ * applies it.
+ *
+ * **Opening on focus, `readOnly` and the idle rendering are not here.** They
+ * are `MixinPickerEditing`'s, because Color Input has none of the three: a hex
+ * is pasted and read at a glance, so its field neither renders nor opens on
+ * arrival, and giving it `readOnly` would be a property its API does not have.
+ *
+ * **Three things the two typed families share stay with them.** `renderTrigger`
+ * differs only by its icon and would still be the wrong thing to lift: a part a
+ * mixin renders belongs to every host that applies it, which is how
+ * `helix component`'s `parts` reads a chain, so `trigger-icon` would be
+ * credited to Color Input, whose trigger is a swatch and documents no such
+ * part. `renderTag` names its part after the family, `date` or `time`, and
+ * writes the label on the remove control differently in each. `valueAsDate`
+ * and `valueAsNumber` are public, convert a different way, and carry a
+ * different note onto each family's page, which a mixin could only carry as
+ * one.
+ *
+ * **Four more families look like this and are not.** Select has no text to
+ * hand the caret to: its panel hangs off the trigger and dismissal refocuses
+ * that. Combobox has the text and a different agreement with it: a press
+ * anywhere in the field is inside, the gap is four, Escape closes without the
+ * `returning` flag because nothing there opens on arrival, and the control is
+ * reconciled against a completion rather than restored to a value. Input and
+ * Textarea open nothing, and their `readOnly` is the native attribute rather
+ * than a gate on `requestValue`, so a programmatic change still lands. What
+ * those two share with this is `focus()` and the platform's verdict copied in
+ * `sync`, which is not a protocol.
+ */
+export declare const MixinPickerField: <T extends Constructor<PickerBase>>(Base: T) => Constructor<MixinPickerFieldInterface> & T;
+export {};

package/dist/mixins/mixin-picker-field/mixin-picker-field.js

@@ -0,0 +1,79 @@
+import { PopoverController } from '../../controllers/popover-controller/popover-controller.js';
+export const MixinPickerField = (Base) => {
+    class PickerFieldElement extends Base {
+        constructor() {
+            super(...arguments);
+            this.panel = new PopoverController(this, {
+                anchor: () => this.partNamed('field'),
+                boundary: () => [
+                    this.partNamed('surface'),
+                    this.partNamed('trigger'),
+                ],
+                offset: () => 8,
+                onDismiss: () => this.requestOpen(false),
+                open: () => this.open,
+                placement: 'bottom-start',
+                surface: () => this.partNamed('surface'),
+            });
+            this.handleKeydown = (event) => {
+                if (event.key === 'Escape' && this.open) {
+                    event.stopPropagation();
+                    this.requestOpen(false);
+                    this.returnFocus();
+                }
+            };
+            this.returning = false;
+        }
+        get anchor() {
+            return this.control;
+        }
+        get control() {
+            return this.partNamed('control');
+        }
+        get display() {
+            return this.value;
+        }
+        validate() {
+            return '';
+        }
+        restore() {
+            const control = this.control;
+            if (control && control.value !== this.display) {
+                control.value = this.display;
+            }
+            this.sync();
+        }
+        sync() {
+            this.internals.setFormValue(this.value);
+            const control = this.control;
+            if (!control) {
+                return;
+            }
+            const message = this.validate();
+            if (message === '') {
+                this.internals.setValidity(control.validity, control.validationMessage, control);
+            }
+            else {
+                this.internals.setValidity({ badInput: true }, message, control);
+            }
+            this.refreshFeedback();
+        }
+        returnFocus() {
+            this.returning = true;
+            this.control?.focus();
+            this.returning = false;
+        }
+        focus(options) {
+            this.anchor?.focus(options);
+        }
+        firstUpdated(changed) {
+            super.firstUpdated(changed);
+            this.sync();
+        }
+        updated(changed) {
+            super.updated(changed);
+            this.sync();
+        }
+    }
+    return PickerFieldElement;
+};

package/dist/utils/draw-icon/draw-icon.d.ts

@@ -29,7 +29,7 @@ export interface DrawIconOptions {
  * the thing static analysis has to read.
  *
  * `data-glyph` rather than a class, because the sizing lives in
- * `helix/styled/src/icon/glyph.css` and a component's own `--icon-size`
+ * `helix/styled/src/shared/glyph/glyph.css` and a component's own `--icon-size`
  * declarations have to keep working untouched: the variable was read by
  * `helix-icon`, and now it is read by the rule that sheet carries. Without it
  * every one of those declarations would go quietly dead and every mark in six

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

@@ -31,6 +31,7 @@ export const drawTooltip = (rows, at, tag, where) => {
         ${row.cells.map((cell, index) => html `<span
               data-series=${cell.value === undefined ? nothing : seriesIndex(index)}
               part="tooltip-cell"
+              style=${cell.value === undefined ? nothing : `--chart-series: var(--chart-series-${seriesIndex(index)})`}
             >
               <span part="tooltip-name">${cell.name}</span>
               <span part="tooltip-value">${cell.text}</span>