@oddkin/components 0.0.0-stage → 1.0.0-beta.0

package/dist/color-picker/color-picker.d.ts

@@ -0,0 +1,157 @@
+import { type ElementEvents } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+import { type OptionRecord } from '../collection/collection.js';
+import { OddkinFormControl, type FormControlOptions } from '../form-control/form-control.js';
+import { type Hsva, type Rgba } from './color.js';
+export type { OptionRecord };
+export declare const COLOR_PICKER_STRINGS: {
+    choose: string;
+    change: string;
+    invalid: string;
+    area: string;
+    areaValue: string;
+    hue: string;
+    hex: string;
+    opacity: string;
+    rgb: string;
+    swatches: string;
+    cancel: string;
+    apply: string;
+};
+/** Dispatched with `change` for each colour the user commits (typed, or applied in the popup). */
+export declare const colorPickerInputEvent: import("@oddkin/core/element").EventDefinition<void>;
+/** Dispatched after `input` for each colour the user commits. */
+export declare const colorPickerChangeEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinColorPicker_base: import("@oddkin/core/element").WithProps<typeof OddkinFormControl, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly defaultValue: import("@oddkin/core/element").PropDefinition<string>;
+    readonly alpha: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly options: import("@oddkin/core/element").PropDefinition<readonly OptionRecord[] | undefined>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        choose: string;
+        change: string;
+        invalid: string;
+        area: string;
+        areaValue: string;
+        hue: string;
+        hex: string;
+        opacity: string;
+        rgb: string;
+        swatches: string;
+        cancel: string;
+        apply: string;
+    }> | undefined>;
+}>;
+/**
+ * One colour, typed as hex or chosen in a popup: a saturation-and-brightness area, a hue slider,
+ * hex and opacity entry, the RGB values, and suggested swatches, applied or cancelled. The value is
+ * a native colour input's: `#rrggbb`, or with `alpha`, the CSS form color(srgb r g b / a); it is always a
+ * colour (black by default).
+ *
+ * @csspart field - The field: label, description, control box, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart swatch - The colour, at the start of the field.
+ * @csspart control - The text input with the colour as hex.
+ * @csspart button - Opens the popup.
+ * @csspart popup - The popup (a non-modal dialog).
+ * @csspart area - Saturation (across) and brightness (up) for the hue.
+ * @csspart area-thumb - The area's handle (`role="slider"`); takes focus.
+ * @csspart hue - The hue slider's track.
+ * @csspart hue-thumb - The hue handle (`role="slider"`).
+ * @csspart hex - The popup's hex input.
+ * @csspart opacity - The opacity input, in percent (with `alpha`).
+ * @csspart rgb - The red, green, and blue values.
+ * @csspart swatches - The suggested colours (`<option>` children or `options`).
+ * @csspart option-swatch - One suggested colour: a radio, checked while it is the colour.
+ * @csspart cancel - Closes the popup without a change.
+ * @csspart apply - Commits the popup's colour and closes it.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The field shows its error: `error` is set, or the typed text is not a colour after the user left the field or a validity check failed.
+ * @cssstate open - The popup is open.
+ * @a11y The text input is named by the label. The button after it is named "Choose color", or "Change color," with the hex, and has `aria-haspopup="dialog"` and `aria-expanded`; it opens a non-modal dialog named "Choose color". The area is one `role="slider"` (WAI-ARIA has no two-axis slider) whose `aria-valuenow` is the saturation and whose `aria-valuetext` names saturation and brightness; the hue is a slider in degrees; the opacity input is a spinbutton; the suggested colours are native radios named by their labels. Typed text that is not a hex colour makes the field invalid.
+ * @keyboard The input and the button are Tab stops; in the popup, the area, the hue, the hex and opacity inputs, the suggested colours (one stop, arrow keys between them), Cancel, and Apply. Area: Left and Right saturation (swapped right to left), Up and Down brightness, Page Up and Page Down brightness by ten, Home and End saturation to 0 and 100. Hue: the slider keys, Page Up and Page Down by ten degrees. Opacity: Up and Down by one, Page Up and Page Down by ten. Escape closes without a change, as Cancel does.
+ * @previewRole colorPicker
+ * @useFor A colour the user chooses for their own content: a layer, a label, a highlight.
+ * @notFor Theme colours (use design tokens); one colour from a short fixed set (use odd-radio-group or odd-segmented-control).
+ * @limitation The value is sRGB, 8 bits per channel (HTML's limited-srgb colour space); HTML's display-p3 colour space is not offered. Typed colours are hex; the value also takes any CSS colour from script.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export declare class OddkinColorPicker extends OddkinColorPicker_base {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static events: {
+        input: import("@oddkin/core/element").EventDefinition<void>;
+        change: import("@oddkin/core/element").EventDefinition<void>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinColorPicker>;
+    constructor();
+    /** @internal The popup is open; the button's `aria-expanded`. */
+    readonly _open: Readable<boolean>;
+    /** @internal The suggested colours in use. */
+    readonly _options: Readable<readonly OptionRecord[]>;
+    /** @internal The colour, as a native colour input sanitizes its value (black for no colour). */
+    readonly _color: Readable<Rgba>;
+    /** The colour: `#rrggbb`, or with `alpha`, color(srgb r g b / a). Setting it detaches it from `defaultValue`. */
+    get value(): string;
+    set value(value: string);
+    /** @internal The built-in text with the author's overrides. */
+    readonly _strings: Readable<typeof COLOR_PICKER_STRINGS>;
+    /** @internal The field's text: what the user typed, or the colour as hex. */
+    get _text(): string;
+    /** @internal The message for typed text that is not a colour; empty when there is none. */
+    readonly _badInput: Readable<string>;
+    /** @internal The button's name: "Change color, …" with the hex. */
+    get _buttonLabel(): string;
+    /** @internal Disabled by its attribute or a disabled fieldset. */
+    get _inactive(): boolean;
+    protected _formOptions(): FormControlOptions;
+    /** @internal Template handler: typing in the field. The host's `input` waits for a commit. */
+    readonly _onInput: (event: Event) => void;
+    /** @internal Template handler: the typed text is committed (Enter, or focus left the input). */
+    readonly _onChange: () => void;
+    /** @internal Template handler: the field's button opens the popup on the colour. */
+    readonly _onButton: (event: Event) => void;
+    /** @internal The popup's colour. */
+    get _draft(): Hsva;
+    /** @internal The popup's colour as red, green, and blue. */
+    get _draftRgba(): Rgba;
+    /** @internal The popup's hex text: what the user typed, or the colour. */
+    get _hexText(): string;
+    /** @internal The popup's hex text is not a colour. */
+    get _hexInvalid(): boolean;
+    /** @internal The popup's opacity text: what the user typed, or the percentage. */
+    get _opacityText(): string;
+    /** @internal The area thumb's `aria-valuetext`. */
+    get _areaText(): string;
+    /** @internal The RGB readout. */
+    get _rgbText(): string;
+    /** @internal A suggested colour is the popup's colour. */
+    _isDraft(option: OptionRecord): boolean;
+    /** @internal Template handler: keys on the area thumb. */
+    readonly _onAreaKeydown: (event: KeyboardEvent) => void;
+    /** @internal Template handler: keys on the hue thumb. */
+    readonly _onHueKeydown: (event: KeyboardEvent) => void;
+    /** @internal Template handler: the popup's hex input. */
+    readonly _onHexInput: (event: Event) => void;
+    /** @internal Template handler: the opacity input. */
+    readonly _onOpacityInput: (event: Event) => void;
+    /** @internal Template handler: keys on the opacity input. */
+    readonly _onOpacityKeydown: (event: KeyboardEvent) => void;
+    /** @internal Template handler: a suggested colour was checked. It takes focus (WebKit does not on a click). */
+    readonly _onSwatch: (event: Event) => void;
+    /** @internal Template handler: Apply (disabled while the hex text is not a colour). The button takes focus, so focus returns to the opener. */
+    readonly _onApply: (event: Event) => void;
+    /** @internal Template handler: Cancel. */
+    readonly _onCancel: (event: Event) => void;
+    protected connected(scope: Scope): void;
+    protected mounted(scope: Scope): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-color-picker': OddkinColorPicker;
+    }
+}
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/color-picker/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-picker.ts"],"names":[],"mappings":"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"}

package/dist/color-picker/color-picker.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="color-picker.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=color-picker.define.d.ts.map

package/dist/color-picker/color-picker.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.define.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-picker.define.ts"],"names":[],"mappings":""}

package/dist/color-picker/color-picker.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./color-picker.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { colorPickerDefinition } from './color-picker.definition.js';
+define(colorPickerDefinition);
+//# sourceMappingURL=color-picker.define.js.map

package/dist/color-picker/color-picker.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.define.js","sourceRoot":"","sources":["../../src/color-picker/color-picker.define.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/color-picker/color-picker.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinColorPicker } from './color-picker.js';
+export declare const colorPickerDefinition: import("@oddkin/core/element").ElementDefinition<OddkinColorPicker>;
+//# sourceMappingURL=color-picker.definition.d.ts.map

package/dist/color-picker/color-picker.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.definition.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-picker.definition.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAKtD,eAAO,MAAM,qBAAqB,qEAgBhC,CAAC"}

package/dist/color-picker/color-picker.definition.js

@@ -0,0 +1,31 @@
+import { compose } from '@oddkin/core/element';
+import { nativeButtonStyles } from '../button/button.native.styles.js';
+import { controlStyles } from '../styles/control.styles.js';
+import { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { glyphStyles } from '../styles/glyphs.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { overlaySurfaceStructuralStyles } from '../styles/overlay-surface.structural.styles.js';
+import { overlaySurfaceStyles } from '../styles/overlay-surface.styles.js';
+import { OddkinColorPicker } from './color-picker.js';
+import { colorPickerStructuralStyles } from './color-picker.structural.styles.js';
+import { colorPickerStyles } from './color-picker.styles.js';
+import { colorPickerTemplate } from './color-picker.template.js';
+export const colorPickerDefinition = compose({
+    name: 'odd-color-picker',
+    element: OddkinColorPicker,
+    template: colorPickerTemplate,
+    styles: [
+        hostStyles,
+        fieldStructuralStyles,
+        overlaySurfaceStructuralStyles,
+        colorPickerStructuralStyles,
+        glyphStyles,
+        focusRingStyles,
+        controlStyles,
+        overlaySurfaceStyles,
+        nativeButtonStyles,
+        colorPickerStyles,
+    ],
+});
+//# sourceMappingURL=color-picker.definition.js.map

package/dist/color-picker/color-picker.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.definition.js","sourceRoot":"","sources":["../../src/color-picker/color-picker.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,MAAM,CAAC,MAAM,qBAAqB,GAAG,OAAO,CAAC;IAC3C,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,iBAAiB;IAC1B,QAAQ,EAAE,mBAAmB;IAC7B,MAAM,EAAE;QACN,UAAU;QACV,qBAAqB;QACrB,8BAA8B;QAC9B,2BAA2B;QAC3B,WAAW;QACX,eAAe;QACf,aAAa;QACb,oBAAoB;QACpB,kBAAkB;QAClB,iBAAiB;KAClB;CACF,CAAC,CAAC"}

package/dist/color-picker/color-picker.js

@@ -0,0 +1,382 @@
+import { event, prop } from '@oddkin/core/element';
+import { format, strings } from '@oddkin/core/i18n';
+import { computed, signal } from '@oddkin/core/reactive';
+import { CollectionSource, readOptions } from '../collection/collection.js';
+import { OddkinFormControl } from '../form-control/form-control.js';
+import { keyValue, pointerDrag } from '../form-control/range.js';
+import { Overlay } from '../overlay/overlay.js';
+import { BLACK, hexText, parseColor, parseHex, serializeColor, toHsva, toRgba, } from './color.js';
+export const COLOR_PICKER_STRINGS = {
+    choose: 'Choose color',
+    change: 'Change color, {color}',
+    invalid: 'Enter a six-digit hex color, such as #2563EB.',
+    area: 'Saturation and brightness',
+    areaValue: 'Saturation {saturation}%, brightness {brightness}%',
+    hue: 'Hue',
+    hex: 'Hex',
+    opacity: 'Opacity',
+    rgb: 'RGB {r}, {g}, {b}',
+    swatches: 'Suggested colors',
+    cancel: 'Cancel',
+    apply: 'Apply',
+};
+/** Dispatched with `change` for each colour the user commits (typed, or applied in the popup). */
+export const colorPickerInputEvent = event('input', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    syncs: 'value',
+    intent: 'user',
+});
+/** Dispatched after `input` for each colour the user commits. */
+export const colorPickerChangeEvent = event('change', {
+    bubbles: true,
+    composed: false,
+    cancelable: false,
+    intent: 'user',
+});
+const PERCENT = { min: 0, max: 100, step: 1, base: 0 };
+const DEGREES = { min: 0, max: 360, step: 1, base: 0 };
+const percent = (fraction) => Math.round(fraction * 100);
+/**
+ * One colour, typed as hex or chosen in a popup: a saturation-and-brightness area, a hue slider,
+ * hex and opacity entry, the RGB values, and suggested swatches, applied or cancelled. The value is
+ * a native colour input's: `#rrggbb`, or with `alpha`, the CSS form color(srgb r g b / a); it is always a
+ * colour (black by default).
+ *
+ * @csspart field - The field: label, description, control box, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart swatch - The colour, at the start of the field.
+ * @csspart control - The text input with the colour as hex.
+ * @csspart button - Opens the popup.
+ * @csspart popup - The popup (a non-modal dialog).
+ * @csspart area - Saturation (across) and brightness (up) for the hue.
+ * @csspart area-thumb - The area's handle (`role="slider"`); takes focus.
+ * @csspart hue - The hue slider's track.
+ * @csspart hue-thumb - The hue handle (`role="slider"`).
+ * @csspart hex - The popup's hex input.
+ * @csspart opacity - The opacity input, in percent (with `alpha`).
+ * @csspart rgb - The red, green, and blue values.
+ * @csspart swatches - The suggested colours (`<option>` children or `options`).
+ * @csspart option-swatch - One suggested colour: a radio, checked while it is the colour.
+ * @csspart cancel - Closes the popup without a change.
+ * @csspart apply - Commits the popup's colour and closes it.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The field shows its error: `error` is set, or the typed text is not a colour after the user left the field or a validity check failed.
+ * @cssstate open - The popup is open.
+ * @a11y The text input is named by the label. The button after it is named "Choose color", or "Change color," with the hex, and has `aria-haspopup="dialog"` and `aria-expanded`; it opens a non-modal dialog named "Choose color". The area is one `role="slider"` (WAI-ARIA has no two-axis slider) whose `aria-valuenow` is the saturation and whose `aria-valuetext` names saturation and brightness; the hue is a slider in degrees; the opacity input is a spinbutton; the suggested colours are native radios named by their labels. Typed text that is not a hex colour makes the field invalid.
+ * @keyboard The input and the button are Tab stops; in the popup, the area, the hue, the hex and opacity inputs, the suggested colours (one stop, arrow keys between them), Cancel, and Apply. Area: Left and Right saturation (swapped right to left), Up and Down brightness, Page Up and Page Down brightness by ten, Home and End saturation to 0 and 100. Hue: the slider keys, Page Up and Page Down by ten degrees. Opacity: Up and Down by one, Page Up and Page Down by ten. Escape closes without a change, as Cancel does.
+ * @previewRole colorPicker
+ * @useFor A colour the user chooses for their own content: a layer, a label, a highlight.
+ * @notFor Theme colours (use design tokens); one colour from a short fixed set (use odd-radio-group or odd-segmented-control).
+ * @limitation The value is sRGB, 8 bits per channel (HTML's limited-srgb colour space); HTML's display-p3 colour space is not offered. Typed colours are hex; the value also takes any CSS colour from script.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinColorPicker extends OddkinFormControl.with({
+    label: prop.string({ default: '', description: 'Visible label; names the field.' }),
+    defaultValue: prop.string({
+        default: '',
+        attribute: 'value',
+        description: 'Initial colour; the `value` attribute, as on a native colour input.',
+    }),
+    alpha: prop.boolean({
+        reflect: true,
+        description: 'The colour takes an opacity, as HTML’s `alpha` on a colour input.',
+    }),
+    options: prop.object({
+        description: 'Suggested colours; when set, `<option>` children are ignored.',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides: `choose`, `change` (`{color}`), `invalid`, `area`, `areaValue` (`{saturation}`, `{brightness}`), `hue`, `hex`, `opacity`, `rgb` (`{r}`, `{g}`, `{b}`), `swatches`, `cancel`, `apply`.',
+    }),
+}) {
+    static shadowRootOptions = { mode: 'open', delegatesFocus: true };
+    static events = { input: colorPickerInputEvent, change: colorPickerChangeEvent };
+    // undefined until set or committed ("dirty"), then independent of `defaultValue`.
+    #value = signal(undefined);
+    // What the user typed in the field and has not committed as a colour.
+    #typed = signal(undefined);
+    // The popup's colour while it is open; HSV keeps the hue at no saturation.
+    #draft = signal(toHsva(BLACK));
+    // The popup's hex and opacity text while the user types them.
+    #hexTyped = signal(undefined);
+    #opacityTyped = signal(undefined);
+    #source = new CollectionSource({
+        host: this,
+        name: 'options',
+        property: () => this.options,
+        read: readOptions,
+    });
+    #overlay = new Overlay({
+        host: this,
+        surface: () => this.shadowRoot?.querySelector('[part~="popup"]'),
+        anchor: () => this.shadowRoot?.querySelector('.control-box'),
+        offset: 0,
+        onToggle: (open) => {
+            this.setState('open', open);
+            if (open)
+                this.shadowRoot?.querySelector('[part~="area-thumb"]')?.focus();
+        },
+        onPlace: (placement) => {
+            const popup = this.shadowRoot?.querySelector('[part~="popup"]');
+            if (popup)
+                popup.dataset.side = placement.side;
+        },
+    });
+    constructor() {
+        super();
+        // A value assigned before the element was defined becomes the dirty value.
+        if (Object.hasOwn(this, 'value')) {
+            const early = this.value;
+            delete this.value;
+            this.value = String(early ?? '');
+        }
+    }
+    /** @internal The popup is open; the button's `aria-expanded`. */
+    _open = this.#overlay.open;
+    /** @internal The suggested colours in use. */
+    _options = this.#source.records;
+    /** @internal The colour, as a native colour input sanitizes its value (black for no colour). */
+    _color = computed(() => {
+        const color = parseColor(this.#value.value ?? this.defaultValue) ?? BLACK;
+        return this.alpha ? color : { ...color, a: 1 };
+    });
+    /** The colour: `#rrggbb`, or with `alpha`, color(srgb r g b / a). Setting it detaches it from `defaultValue`. */
+    get value() {
+        return serializeColor(this._color.value, this.alpha);
+    }
+    set value(value) {
+        this.#value.value = String(value ?? '');
+        this.#typed.value = undefined;
+    }
+    /** @internal The built-in text with the author's overrides. */
+    _strings = computed(() => strings(COLOR_PICKER_STRINGS, this.strings));
+    /** @internal The field's text: what the user typed, or the colour as hex. */
+    get _text() {
+        return this.#typed.value ?? hexText(this._color.value);
+    }
+    // Hex the field and the popup take: three or six digits, four or eight with `alpha`; full-width
+    // characters from an input method read as their ASCII forms.
+    #parseHex(text) {
+        const color = parseHex(text.normalize('NFKC'));
+        return color && (this.alpha || color.a === 1) ? color : undefined;
+    }
+    /** @internal The message for typed text that is not a colour; empty when there is none. */
+    _badInput = computed(() => {
+        const typed = this.#typed.value;
+        return typed !== undefined && !this.#parseHex(typed) ? this._strings.value.invalid : '';
+    });
+    /** @internal The button's name: "Change color, …" with the hex. */
+    get _buttonLabel() {
+        return format(this._strings.value.change, { color: hexText(this._color.value) });
+    }
+    /** @internal Disabled by its attribute or a disabled fieldset. */
+    get _inactive() {
+        return this._formDisabled.value;
+    }
+    _formOptions() {
+        return {
+            value: () => this.value,
+            badInput: () => (this._inactive ? '' : this._badInput.value),
+            anchor: () => this.shadowRoot?.querySelector('[part~="control"]'),
+            onReset: () => {
+                this.#value.value = undefined;
+                this.#typed.value = undefined;
+            },
+            onRestore: (state) => {
+                if (typeof state === 'string')
+                    this.value = state;
+            },
+        };
+    }
+    #commit(color) {
+        this.#typed.value = undefined;
+        const before = this.value;
+        this.#value.value = serializeColor(color, this.alpha);
+        if (this.value === before)
+            return;
+        this.emit(colorPickerInputEvent);
+        this.emit(colorPickerChangeEvent);
+    }
+    /** @internal Template handler: typing in the field. The host's `input` waits for a commit. */
+    _onInput = (event) => {
+        event.stopPropagation();
+        this.#typed.value = event.target.value;
+    };
+    /** @internal Template handler: the typed text is committed (Enter, or focus left the input). */
+    _onChange = () => {
+        const typed = this.#typed.peek();
+        const color = typed === undefined ? undefined : this.#parseHex(typed);
+        // Text that is not a colour stays for the user to correct; the colour stays too.
+        if (color)
+            this.#commit(color);
+    };
+    /** @internal Template handler: the field's button opens the popup on the colour. */
+    _onButton = (event) => {
+        event.currentTarget.focus();
+        if (!this._open.peek())
+            this.#startDraft();
+        this.#overlay.toggle();
+    };
+    #startDraft() {
+        this.#draft.value = toHsva(this._color.peek());
+        this.#hexTyped.value = undefined;
+        this.#opacityTyped.value = undefined;
+    }
+    // ---- The popup's colour ----
+    /** @internal The popup's colour. */
+    get _draft() {
+        return this.#draft.value;
+    }
+    /** @internal The popup's colour as red, green, and blue. */
+    get _draftRgba() {
+        return toRgba(this.#draft.value);
+    }
+    /** @internal The popup's hex text: what the user typed, or the colour. */
+    get _hexText() {
+        return this.#hexTyped.value ?? hexText(this._draftRgba);
+    }
+    /** @internal The popup's hex text is not a colour. */
+    get _hexInvalid() {
+        const typed = this.#hexTyped.value;
+        return typed !== undefined && !this.#parseHex(typed);
+    }
+    /** @internal The popup's opacity text: what the user typed, or the percentage. */
+    get _opacityText() {
+        return this.#opacityTyped.value ?? `${percent(this.#draft.value.a)}%`;
+    }
+    /** @internal The area thumb's `aria-valuetext`. */
+    get _areaText() {
+        const { s, v } = this.#draft.value;
+        return format(this._strings.value.areaValue, {
+            saturation: String(percent(s)),
+            brightness: String(percent(v)),
+        });
+    }
+    /** @internal The RGB readout. */
+    get _rgbText() {
+        const { r, g, b } = this._draftRgba;
+        return format(this._strings.value.rgb, { r: String(r), g: String(g), b: String(b) });
+    }
+    /** @internal A suggested colour is the popup's colour. */
+    _isDraft(option) {
+        const color = parseColor(option.value);
+        return !!color && hexText(color) === hexText(this._draftRgba);
+    }
+    #draw(change) {
+        this.#draft.value = { ...this.#draft.peek(), ...change };
+        this.#hexTyped.value = undefined;
+        this.#opacityTyped.value = undefined;
+    }
+    /** @internal Template handler: keys on the area thumb. */
+    _onAreaKeydown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const { s, v } = this.#draft.peek();
+        if (/^(ArrowUp|ArrowDown|PageUp|PageDown)$/.test(event.key)) {
+            this.#draw({ v: keyValue(event.key, percent(v), PERCENT, { page: 10 }) / 100 });
+        }
+        else {
+            const rtl = getComputedStyle(this).direction === 'rtl';
+            const next = keyValue(event.key, percent(s), PERCENT, { page: 10, horizontal: true, rtl });
+            if (next === undefined)
+                return;
+            this.#draw({ s: next / 100 });
+        }
+        event.preventDefault();
+    };
+    /** @internal Template handler: keys on the hue thumb. */
+    _onHueKeydown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const rtl = getComputedStyle(this).direction === 'rtl';
+        const hue = keyValue(event.key, Math.round(this.#draft.peek().h), DEGREES, {
+            page: 10,
+            horizontal: true,
+            rtl,
+        });
+        if (hue === undefined)
+            return;
+        event.preventDefault();
+        this.#draw({ h: hue });
+    };
+    // A colour for the popup; a grey keeps the hue the popup had.
+    #fromColor(color) {
+        const hsva = toHsva(this.alpha ? color : { ...color, a: 1 });
+        return hsva.s ? hsva : { ...hsva, h: this.#draft.peek().h };
+    }
+    /** @internal Template handler: the popup's hex input. */
+    _onHexInput = (event) => {
+        const text = event.target.value;
+        const color = this.#parseHex(text);
+        if (color)
+            this.#draft.value = this.#fromColor(color);
+        this.#hexTyped.value = text;
+    };
+    /** @internal Template handler: the opacity input. */
+    _onOpacityInput = (event) => {
+        const text = event.target.value;
+        const number = Number(text.normalize('NFKC').replace(/%\s*$/, '').trim());
+        if (text.trim() && Number.isFinite(number))
+            this.#draft.value = { ...this.#draft.peek(), a: Math.min(100, Math.max(0, number)) / 100 };
+        this.#opacityTyped.value = text;
+    };
+    /** @internal Template handler: keys on the opacity input. */
+    _onOpacityKeydown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.isComposing)
+            return;
+        const next = keyValue(event.key, percent(this.#draft.peek().a), PERCENT, { page: 10 });
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        this.#draw({ a: next / 100 });
+    };
+    /** @internal Template handler: a suggested colour was checked. It takes focus (WebKit does not on a click). */
+    _onSwatch = (event) => {
+        const radio = event.target;
+        radio.focus();
+        const color = parseColor(radio.value);
+        if (color)
+            this.#draw(this.#fromColor(color));
+    };
+    /** @internal Template handler: Apply (disabled while the hex text is not a colour). The button takes focus, so focus returns to the opener. */
+    _onApply = (event) => {
+        event.currentTarget.focus();
+        this.#commit(this._draftRgba);
+        this.#overlay.hide();
+    };
+    /** @internal Template handler: Cancel. */
+    _onCancel = (event) => {
+        event.currentTarget.focus();
+        this.#overlay.hide();
+    };
+    connected(scope) {
+        super.connected(scope);
+        scope.use(this.#source);
+    }
+    mounted(scope) {
+        super.mounted(scope);
+        scope.use(this.#overlay);
+        const press = (part, move) => {
+            const area = this.shadowRoot?.querySelector(`[part~="${part}"]`);
+            if (!area)
+                return;
+            scope.listen(area, 'pointerdown', (event) => {
+                if (event.button !== 0 || !event.isPrimary)
+                    return;
+                event.preventDefault();
+                const thumb = area.querySelector('[role="slider"]');
+                thumb.focus({ preventScroll: true });
+                pointerDrag(scope, area, event, {
+                    inset: part === 'hue' ? thumb.offsetWidth / 2 : 0,
+                    move,
+                });
+            });
+        };
+        press('area', (x, y) => this.#draw({ s: x, v: 1 - y }));
+        press('hue', (x) => this.#draw({ h: Math.round(x * 360) }));
+    }
+}
+//# sourceMappingURL=color-picker.js.map

package/dist/color-picker/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../src/color-picker/color-picker.ts"],"names":[],"mappings":"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"}

package/dist/color-picker/color-picker.recipe.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Arrangement of the colour picker's popup (layout-recipes.md §14): its controls in a column; the
+ * hex and opacity entries side by side, each a label over its input; the suggested colours under
+ * their label, in a row that wraps; and the actions at the end of a row that wraps.
+ */
+export declare const colorPickerRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=color-picker.recipe.d.ts.map

package/dist/color-picker/color-picker.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.recipe.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-picker.recipe.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,2CAU5B,CAAC"}