@fusion.dev/helix-headless 0.0.0-dev

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

@@ -0,0 +1,36 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+/**
+ * @summary A fragment of code inside a line of prose.
+ *
+ * @description
+ * **A real `<code>`, because the element is the meaning.** A styled span reads
+ * as code and is not: a screen reader announces nothing about it, a translation
+ * tool will happily translate it, and a search that understands documents
+ * cannot tell it from emphasis. The tag is the whole point, which is also why
+ * this component is so small.
+ *
+ * **Inline, and only inline.** A block of code is `CodeBlock`, a separate
+ * family rather than a variant here. The two differ in more than presentation:
+ * one flows with a sentence and must never scroll, the other is a figure with
+ * its own box, its own overflow and something to copy. Namespacing them
+ * together would say `CodeBlock` is part of `Code`, and it is not.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Inline code, Kbd
+ * @documentation https://helix.fusion.dev/components/code
+ *
+ * @slot - The code.
+ *
+ * @csspart code - The `<code>` element.
+ */
+export declare class HelixHeadlessCode extends HelixElement {
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-code': HelixHeadlessCode;
+    }
+}

package/dist/code/root/code-root.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 { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+/**
+ * @summary A fragment of code inside a line of prose.
+ *
+ * @description
+ * **A real `<code>`, because the element is the meaning.** A styled span reads
+ * as code and is not: a screen reader announces nothing about it, a translation
+ * tool will happily translate it, and a search that understands documents
+ * cannot tell it from emphasis. The tag is the whole point, which is also why
+ * this component is so small.
+ *
+ * **Inline, and only inline.** A block of code is `CodeBlock`, a separate
+ * family rather than a variant here. The two differ in more than presentation:
+ * one flows with a sentence and must never scroll, the other is a figure with
+ * its own box, its own overflow and something to copy. Namespacing them
+ * together would say `CodeBlock` is part of `Code`, and it is not.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Inline code, Kbd
+ * @documentation https://helix.fusion.dev/components/code
+ *
+ * @slot - The code.
+ *
+ * @csspart code - The `<code>` element.
+ */
+let HelixHeadlessCode = class HelixHeadlessCode extends HelixElement {
+    render() {
+        return html `<code part="code"><slot></slot></code>`;
+    }
+};
+HelixHeadlessCode = __decorate([
+    customElement('helix-headless-code')
+], HelixHeadlessCode);
+export { HelixHeadlessCode };

package/dist/code-block/index.d.ts

@@ -0,0 +1 @@
+export * from './root/code-block-root.js';

package/dist/code-block/index.js

@@ -0,0 +1 @@
+export * from './root/code-block-root.js';

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

@@ -0,0 +1,112 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+import '../../copy-button/index.js';
+/**
+ * @summary A block of code, with somewhere to put its name and a way to take it.
+ *
+ * @description
+ * **`<pre><code>` and nothing cleverer.** The pair is what the platform means
+ * by a block of code: `pre` keeps the whitespace, `code` says what the
+ * whitespace is for, and losing either one loses something no styling puts
+ * back. Indentation in a `div` is a paragraph with odd spacing.
+ *
+ * **It scrolls rather than wraps.** A wrapped line of code is a lie about where
+ * the line ends, and in a language where a line break can be significant it is
+ * a lie that costs someone an afternoon. The box takes its own scrollbar.
+ *
+ * **The copy button is here because the alternative is selecting it by hand.**
+ * Every consumer would otherwise put one there, slightly differently, and the
+ * one that forgot would be the one with the longest snippet. It is on unless
+ * `no-copy` says otherwise, and takes its text from the slot rather than from a
+ * property, so there is no second copy of the code to keep in step.
+ *
+ * A `Code` for a fragment inside a sentence. Separate families, because one
+ * flows with prose and the other is a figure.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Code block, Snippet, Pre
+ * @documentation https://helix.fusion.dev/components/code-block
+ *
+ * @slot - The code.
+ *
+ * @csspart block - The scrolling `<pre>`.
+ * @csspart code - The `<code>` inside it.
+ * @csspart copy - The copy button.
+ * @csspart copy-button - The inner button.
+ * @csspart copy-mark - The clipboard glyph, and the confirmation that replaces it.
+ * @csspart copy-tooltip - The bubble, forwarded from the tooltip inside.
+ * @csspart copy-tooltip-arrow - The point, resting against the trigger.
+ * @csspart frame - The code and the copy button beside it.
+ * @csspart header - The bar carrying the name, where there is one.
+ * @csspart label - The file name or language, where one is given.
+ */
+export declare class HelixHeadlessCodeBlock extends HelixElement {
+    /**
+     * What to call this block, usually a file name or a language.
+     */
+    label: string;
+    /**
+     * Whether to leave the copy button off.
+     *
+     * Negative, which is not a style choice. A boolean attribute is true whenever
+     * it is *present*, so a `copyable` defaulting to true could never be turned
+     * off from markup: `copyable="false"` is the string "false", which is
+     * present, which is true. Measured, and it is why this is named the other way
+     * round. The platform already writes booleans like this for the same reason,
+     * `novalidate` and `nomodule` and `noreferrer` among them.
+     *
+     * **Reflected, because the gutter is a stylesheet rule.** `code-block.css`
+     * reserves the copy button's width with `:host(:not([no-copy]))`, so the
+     * attribute is what decides whether the block pays for a control. Set from
+     * script the button went away, `render` reading the property, and the 40px it
+     * stood in stayed reserved: the exact waste that rule was written to stop,
+     * arrived at from the other side.
+     *
+     * A false boolean reflects as the attribute's absence, so this costs no
+     * `no-copy=""` on hosts that never asked for one, and the rule about a
+     * reflected property taking no default is satisfied by the default being
+     * `false`.
+     */
+    noCopy: boolean;
+    /**
+     * The code as text, read from the slot rather than stored.
+     *
+     * Client only, and it has to be: the server has no children to read. The
+     * copy button is a client-side affordance anyway, so nothing is lost, and
+     * taking the text from a property instead would be a second copy of the code
+     * that goes stale the moment the slot changes.
+     */
+    private get text();
+    /**
+     * One more render, once there is a slot to read.
+     *
+     * The first render has no shadow children yet, so `text` is empty and the
+     * copy button is bound to nothing. `slotchange` normally schedules the render
+     * that fixes it, and leaning on that alone was measured to leave the button
+     * empty through four update cycles: the event is not guaranteed to have
+     * arrived, and in one environment never arrives at all. A component should not
+     * need an event to show its own content, so it asks for the second render
+     * itself and `slotchange` is left to handle the case it is actually for, which
+     * is content changing later.
+     */
+    protected firstUpdated(): void;
+    protected render(): TemplateResult;
+    /**
+     * The button that takes the code, behind a seam the styled tier can move.
+     *
+     * A method rather than a fragment inline, so a tier above can render its own
+     * copy control, wrap this one, or pass it something the base does not know
+     * about, without reimplementing the whole template to do it. The tag is
+     * interpolated rather than written, so `tier` resolves it: this renders the
+     * base button, and a styled subclass that sets `tier` renders the styled one
+     * from the same template.
+     */
+    protected renderCopyButton(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-code-block': HelixHeadlessCodeBlock;
+    }
+}

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

@@ -0,0 +1,155 @@
+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 { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+import '../../copy-button/index.js';
+/**
+ * @summary A block of code, with somewhere to put its name and a way to take it.
+ *
+ * @description
+ * **`<pre><code>` and nothing cleverer.** The pair is what the platform means
+ * by a block of code: `pre` keeps the whitespace, `code` says what the
+ * whitespace is for, and losing either one loses something no styling puts
+ * back. Indentation in a `div` is a paragraph with odd spacing.
+ *
+ * **It scrolls rather than wraps.** A wrapped line of code is a lie about where
+ * the line ends, and in a language where a line break can be significant it is
+ * a lie that costs someone an afternoon. The box takes its own scrollbar.
+ *
+ * **The copy button is here because the alternative is selecting it by hand.**
+ * Every consumer would otherwise put one there, slightly differently, and the
+ * one that forgot would be the one with the longest snippet. It is on unless
+ * `no-copy` says otherwise, and takes its text from the slot rather than from a
+ * property, so there is no second copy of the code to keep in step.
+ *
+ * A `Code` for a fragment inside a sentence. Separate families, because one
+ * flows with prose and the other is a figure.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Code block, Snippet, Pre
+ * @documentation https://helix.fusion.dev/components/code-block
+ *
+ * @slot - The code.
+ *
+ * @csspart block - The scrolling `<pre>`.
+ * @csspart code - The `<code>` inside it.
+ * @csspart copy - The copy button.
+ * @csspart copy-button - The inner button.
+ * @csspart copy-mark - The clipboard glyph, and the confirmation that replaces it.
+ * @csspart copy-tooltip - The bubble, forwarded from the tooltip inside.
+ * @csspart copy-tooltip-arrow - The point, resting against the trigger.
+ * @csspart frame - The code and the copy button beside it.
+ * @csspart header - The bar carrying the name, where there is one.
+ * @csspart label - The file name or language, where one is given.
+ */
+let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * What to call this block, usually a file name or a language.
+         */
+        this.label = '';
+        /**
+         * Whether to leave the copy button off.
+         *
+         * Negative, which is not a style choice. A boolean attribute is true whenever
+         * it is *present*, so a `copyable` defaulting to true could never be turned
+         * off from markup: `copyable="false"` is the string "false", which is
+         * present, which is true. Measured, and it is why this is named the other way
+         * round. The platform already writes booleans like this for the same reason,
+         * `novalidate` and `nomodule` and `noreferrer` among them.
+         *
+         * **Reflected, because the gutter is a stylesheet rule.** `code-block.css`
+         * reserves the copy button's width with `:host(:not([no-copy]))`, so the
+         * attribute is what decides whether the block pays for a control. Set from
+         * script the button went away, `render` reading the property, and the 40px it
+         * stood in stayed reserved: the exact waste that rule was written to stop,
+         * arrived at from the other side.
+         *
+         * A false boolean reflects as the attribute's absence, so this costs no
+         * `no-copy=""` on hosts that never asked for one, and the rule about a
+         * reflected property taking no default is satisfied by the default being
+         * `false`.
+         */
+        this.noCopy = false;
+    }
+    /**
+     * The code as text, read from the slot rather than stored.
+     *
+     * Client only, and it has to be: the server has no children to read. The
+     * copy button is a client-side affordance anyway, so nothing is lost, and
+     * taking the text from a property instead would be a second copy of the code
+     * that goes stale the moment the slot changes.
+     */
+    get text() {
+        const slot = this.renderRoot?.querySelector('slot');
+        return (slot?.assignedNodes() ?? []).map((node) => node.textContent ?? '').join('');
+    }
+    /**
+     * One more render, once there is a slot to read.
+     *
+     * The first render has no shadow children yet, so `text` is empty and the
+     * copy button is bound to nothing. `slotchange` normally schedules the render
+     * that fixes it, and leaning on that alone was measured to leave the button
+     * empty through four update cycles: the event is not guaranteed to have
+     * arrived, and in one environment never arrives at all. A component should not
+     * need an event to show its own content, so it asks for the second render
+     * itself and `slotchange` is left to handle the case it is actually for, which
+     * is content changing later.
+     */
+    firstUpdated() {
+        this.requestUpdate();
+    }
+    render() {
+        /* The copy button sits beside the code, not in a bar above it.
+         *
+         * It was in the header, which meant a block with nothing to call itself
+         * still drew a full-width bar to hold one button: an empty strip above
+         * every snippet, which is what a `Usage` section of one-line imports looked
+         * like. Beside the code it needs no bar at all, so a block with no `label`
+         * is just the code and a way to take it, and the header exists only when
+         * there is a name to put in it. One less appearance to choose between. */
+        return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}
+      <div part="frame">
+        <pre part="block"><code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code></pre>
+        ${this.noCopy ? nothing : this.renderCopyButton()}
+      </div>`;
+    }
+    /**
+     * The button that takes the code, behind a seam the styled tier can move.
+     *
+     * A method rather than a fragment inline, so a tier above can render its own
+     * copy control, wrap this one, or pass it something the base does not know
+     * about, without reimplementing the whole template to do it. The tag is
+     * interpolated rather than written, so `tier` resolves it: this renders the
+     * base button, and a styled subclass that sets `tier` renders the styled one
+     * from the same template.
+     */
+    renderCopyButton() {
+        return html `<${this.tag('copy-button')}
+      part="copy"
+      exportparts="button: copy-button, mark: copy-mark, tooltip: copy-tooltip,
+        tooltip-arrow: copy-tooltip-arrow"
+      label="Copy code"
+      .value=${this.text}
+    ></${this.tag('copy-button')}>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessCodeBlock.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'no-copy', reflect: true, type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "noCopy", void 0);
+HelixHeadlessCodeBlock = __decorate([
+    customElement('helix-headless-code-block')
+], HelixHeadlessCodeBlock);
+export { HelixHeadlessCodeBlock };

package/dist/color-input/index.d.ts

@@ -0,0 +1 @@
+export * from './root/color-input-root.js';

package/dist/color-input/index.js

@@ -0,0 +1 @@
+export * from './root/color-input-root.js';

package/dist/color-input/root/color-input-root.d.ts

@@ -0,0 +1,227 @@
+import { AriaForwardController, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import '../../color-picker/index.js';
+import { type ColorFormat } from '../../color-picker/color.js';
+declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+/**
+ * @summary A color, typed in any syntax or picked from a panel.
+ *
+ * @description
+ * **The picker is `helix-color-picker`, not a second one written here.** It owns the
+ * square, the ramps, the eyedropper and the syntax toggle, and it is worth
+ * having on its own: a settings pane wants a picker flat on the page with
+ * nothing to open. This element is the field, the overlay, and the form.
+ * Exactly the arrangement Date Input has with `helix-date-picker`.
+ *
+ * **Typed as well as picked, and the typing is the reason this is not
+ * `<input type="color">`.** The native control gives a free picker and takes
+ * nearly all styling with it, which is a fair trade until a product needs the
+ * panel to match everything around it. What is kept from the native one is the
+ * part worth keeping: a real text field, so a reader who has the hex pastes it
+ * and never opens anything.
+ *
+ * **Every syntax is read; the one `format` names is written.** `#f00`,
+ * `#ff0000`, `rgb(255 0 0)`, `rgba(255,0,0,.5)`, `rgb(255 0 0 / 50%)` and
+ * `hsl(0 100% 50%)` are all colors, and a field that refuses one because it
+ * prefers another is arguing with the person using it. What the field *shows* is
+ * the value itself, for the reason Date Input gives about its dates: half-typed
+ * input does not survive a round trip through a formatter.
+ *
+ * The properties below are written by this component and read by whoever draws
+ * it. A consumer sets none of them: they carry a number this element computed
+ * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
+ * without measuring anything itself.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases ColorField, ColourInput, InputColor
+ * @documentation https://helix.fusion.dev/components/color-input
+ *
+ * @slot end - Content at the trailing end, before the trigger.
+ * @slot feedback - What is wrong with it.
+ * @slot hint - Help under the field.
+ * @slot start - Content at the leading end of the field, inside its border.
+ * @slot trigger - The mark on the field saying a panel opens.
+ *
+ * @event {Event} change - Announced once the value has moved.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the color changes. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the panel opens. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {Event} input - Announced once the value has moved.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart control - The text input carrying the value. Absent in `swatch`.
+ * @csspart feedback - What is wrong with it.
+ * @csspart field - The box holding the text and the trigger.
+ * @csspart hint - Help under the field, while nothing is wrong.
+ * @csspart label - The question, over the field.
+ * @csspart picker - The color picker inside it.
+ * @csspart picker-actions - The group holding the eyedropper and the syntax toggle.
+ * @csspart picker-channel - One ramp.
+ * @csspart picker-channel-control - The range input.
+ * @csspart picker-channel-feedback - What is wrong with it.
+ * @csspart picker-channel-field - The row: the control and its readout.
+ * @csspart picker-channel-hint - Help under the track, while nothing is wrong.
+ * @csspart picker-channel-label - The question, over the track.
+ * @csspart picker-channel-marker - One mark.
+ * @csspart picker-channel-marker-label - The value a mark stands at, when `marker-labels` is set.
+ * @csspart picker-channel-markers - The row of marks along the track.
+ * @csspart picker-channel-output - The current value, shown beside it.
+ * @csspart picker-channels - The ramps beside it.
+ * @csspart picker-controls - The row under the square.
+ * @csspart picker-eyedropper - The control that samples a color from the screen.
+ * @csspart picker-eyedropper-button - The inner control.
+ * @csspart picker-footer - The row holding the value and the tools.
+ * @csspart picker-format - The control that changes the syntax the value is written in.
+ * @csspart picker-format-button - The inner control.
+ * @csspart picker-grid - The saturation and brightness square.
+ * @csspart picker-grid-brightness - The range input for its vertical axis.
+ * @csspart picker-grid-handle - The mark showing where in the square the color sits.
+ * @csspart picker-grid-saturation - The range input for the square's horizontal axis.
+ * @csspart picker-icon - A glyph this component draws.
+ * @csspart picker-sample - The chip of the current color, which copies it when pressed.
+ * @csspart picker-swatch - One preset.
+ * @csspart picker-swatches - The row of presets.
+ * @csspart picker-value - The color as text, which can be typed or pasted.
+ * @csspart preview - The chip showing the color, inside the trigger.
+ * @csspart surface - The floating panel.
+ * @csspart trigger - The control that opens the panel.
+ *
+ * @cssproperty --color-input-swatch - The chosen color, to paint over the transparency check.
+ */
+export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_base {
+    protected readonly aria: AriaForwardController;
+    /**
+     * What the browser may autofill in the text field, as a platform token.
+     *
+     * **Defaults to `off`, which is not the platform's default and is the
+     * point.** The field filters a list rather than collecting a value, so a
+     * browser offering to fill it with a saved address is competing for the same
+     * keystrokes as the listbox. A consumer who wants autofill can still ask.
+     */
+    autocomplete: string;
+    /**
+     * Whether the field is a text box with a swatch on it, or only the swatch.
+     *
+     * `swatch` is the native control's shape: a block of color that opens a
+     * picker, with no text beside it. It is what a toolbar wants, and a form that
+     * asks for a color among twenty other questions, where a hex in a box is
+     * eleven characters of noise next to the thing itself.
+     *
+     * It also settles where the value is stated. The default field *is* the input,
+     * so the panel is told `no-value` and would otherwise show a second one. A
+     * swatch states nothing, so the panel keeps its own row and the value is
+     * readable and typeable exactly once, in whichever of the two is present.
+     *
+     * The trade is real and is the reason this is not the default: a swatch cannot
+     * be read or pasted into without opening the panel, which is worse for a form
+     * where the color is the answer rather than a setting.
+     */
+    variant?: 'swatch';
+    /**
+     * Whether the color carries an alpha channel.
+     */
+    alpha: boolean;
+    /**
+     * The syntax the value is written in: `hex`, `rgb` or `hsl`.
+     *
+     * **Undefaulted, because it reflects.** The two together are what stamp an
+     * attribute onto every host anybody renders, including the ones nobody
+     * configured: the server wrote `format="hex"` on every color input on the
+     * page, and React, holding no such prop, reported a hydration mismatch for
+     * each one. That is the fault `Tree.chevronPlacement` had and the reason the
+     * area rules say a reflected property takes no default. Hex is still what an
+     * unset one writes; the difference is that the resting arrangement is the
+     * attribute's absence rather than a value spelled out.
+     */
+    format?: ColorFormat;
+    /**
+     * Whether the reader may change the format from the panel.
+     */
+    noFormat: boolean;
+    /**
+     * What the field says before a color is in it.
+     */
+    placeholder: string;
+    /**
+     * Colors offered under the picker, as a comma-separated list.
+     */
+    swatches: string;
+    /**
+     * Accessible name for the control that opens the panel.
+     */
+    triggerLabel: string;
+    /** The overlay, placed against the field for the reason Date Input gives. */
+    protected readonly panel: PopoverController;
+    /**
+     * The last value that was a color.
+     *
+     * Half-typed input reaches here on every keystroke and most of it is not a
+     * color, so the picker is given the last thing that was one rather than a
+     * fallback. Typing `#00ff00` one character at a time goes `#`, `#0`, `#00`,
+     * `#00f`, `#00ff`, `#00ff0`, `#00ff00`: measured, the square went red, red,
+     * red, blue, blue, **red**, green, because two of those are colors and the
+     * ones between are not. Holding the last good one takes the flicker out and
+     * leaves the square on blue until green arrives.
+     *
+     * Not state, because it is only ever read on a render the value already
+     * caused. The same reasoning Date Input records for its calendar, which will
+     * not follow a date until the field says something complete.
+     */
+    private settled;
+    /**
+     * What the label points at and validity hangs off.
+     *
+     * The input where there is one, the trigger where there is not. `setValidity`
+     * needs an element to anchor the message to and a label needs something
+     * focusable to name, and in `swatch` the trigger is the only control in the
+     * field. It carries `id="control"` there for the same reason.
+     */
+    private get anchor();
+    private get control();
+    /** What the picker should show, which is only ever a color. */
+    private get picked();
+    /** What the trigger's swatch paints, which is only ever a color. */
+    private get painted();
+    /** Relayed under this element's name, so a consumer hears one control. */
+    private readonly handleInput;
+    private readonly handlePickerChange;
+    /**
+     * The picker is about to take the pointer over, so the panel gets out of the
+     * way and comes back after.
+     *
+     * `helix-color-picker` says what it is doing rather than reaching for a panel it
+     * cannot know it is in. A floating panel left up during an eyedropper is one
+     * the reader cannot dismiss and may well be trying to sample from underneath.
+     */
+    private readonly handleSampleStart;
+    private readonly handleSampleEnd;
+    private restore;
+    /** Reports the value and the validity the host stands behind. */
+    private sync;
+    /** Escape shuts the panel without moving the color. */
+    private readonly handleKeydown;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** Puts the caret in the field, the way a label pointing at one would. */
+    focus(options?: FocusOptions): void;
+    /**
+     * The picker the field opens, behind a seam the styled tier can move.
+     *
+     * A method rather than a fragment inline, so a tier above can render its own,
+     * wrap this one, pass it a property the base does not know about, or leave it
+     * out, without reimplementing the whole template to do any of them. The tag is
+     * interpolated rather than written, so `tier` resolves it: this renders the
+     * headless element, and a styled subclass that sets `tier` renders the styled one
+     * from the same template.
+     */
+    protected renderPicker(): TemplateResult;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-color-input': HelixHeadlessColorInput;
+    }
+}
+export {};