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

package/dist/color-picker/color.js

@@ -0,0 +1,99 @@
+/**
+ * Colours as `<input type="color">` handles them (HTML §4.10.5.1.14): parsing any CSS colour,
+ * serializing to `#rrggbb`, or to `color(srgb r g b / a)` when the alpha component applies, both
+ * limited to 8 bits per channel; the hex text a field takes; and HSV for the picker's area and hue.
+ */
+export const BLACK = { r: 0, g: 0, b: 0, a: 1 };
+const HEX = /^#?([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i;
+const SRGB = /^color\(\s*srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+)\s*)?\)$/i;
+const RGB = /^rgba?\((\d+), (\d+), (\d+)(?:, ([\d.]+))?\)$/;
+const channel = (fraction) => Math.min(255, Math.max(0, Math.round(fraction * 255)));
+const unit = (n) => Math.min(1, Math.max(0, n));
+/** `#rgb`, `#rgba`, `#rrggbb`, or `#rrggbbaa`, the `#` optional; `undefined` for anything else. */
+export function parseHex(text) {
+    const digits = HEX.exec(text.trim())?.[1];
+    if (!digits)
+        return undefined;
+    const full = digits.length > 4 ? digits : [...digits].map((d) => d + d).join('');
+    const at = (i) => parseInt(full.slice(i, i + 2), 16);
+    return { r: at(0), g: at(2), b: at(4), a: full.length === 8 ? at(6) / 255 : 1 };
+}
+let context;
+/** Any CSS colour the engine parses, in sRGB; `undefined` when it does not parse. */
+export function parseColor(text) {
+    const hex = parseHex(text);
+    if (hex && text.trim().startsWith('#'))
+        return hex;
+    const srgb = SRGB.exec(text.trim());
+    if (srgb) {
+        const [, r, g, b, a] = srgb.map(Number);
+        return { r: channel(r), g: channel(g), b: channel(b), a: srgb[4] ? unit(a) : 1 };
+    }
+    // The engine's colour parser: a canvas keeps its previous fill for text that is not a colour.
+    context ??= document.createElement('canvas').getContext('2d');
+    if (!context)
+        return undefined;
+    const read = (sentinel) => {
+        context.fillStyle = sentinel;
+        context.fillStyle = text;
+        return String(context.fillStyle);
+    };
+    const parsed = read('#000000');
+    if (parsed !== read('#ffffff'))
+        return undefined;
+    const opaque = parseHex(parsed);
+    if (opaque)
+        return opaque;
+    const rgb = RGB.exec(parsed);
+    if (!rgb)
+        return undefined;
+    return { r: +rgb[1], g: +rgb[2], b: +rgb[3], a: rgb[4] ? +rgb[4] : 1 };
+}
+const hex2 = (n) => n.toString(16).padStart(2, '0');
+const decimal = (n) => String(Number(n.toFixed(6)));
+/**
+ * The value a native colour input gives: `#rrggbb` (the alpha dropped), or with `alpha`,
+ * `color(srgb r g b)` with ` / a` while not opaque.
+ */
+export function serializeColor(color, alpha) {
+    if (!alpha)
+        return `#${hex2(color.r)}${hex2(color.g)}${hex2(color.b)}`;
+    const rgb = [color.r, color.g, color.b].map((c) => decimal(c / 255)).join(' ');
+    return `color(srgb ${rgb}${color.a < 1 ? ` / ${decimal(color.a)}` : ''})`;
+}
+/** The colour as a field shows it: `#RRGGBB`, with the alpha byte while not opaque. */
+export function hexText(color) {
+    const alpha = color.a < 1 ? hex2(channel(color.a)) : '';
+    return `#${hex2(color.r)}${hex2(color.g)}${hex2(color.b)}${alpha}`.toUpperCase();
+}
+const linear = (c) => {
+    const s = c / 255;
+    return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+};
+/** White on the colour falls below WCAG's 3:1 for graphics, so a mark on it is drawn black. */
+export function isLight({ r, g, b }) {
+    return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b) > 0.3;
+}
+export function toHsva({ r, g, b, a }) {
+    const [red, green, blue] = [r / 255, g / 255, b / 255];
+    const max = Math.max(red, green, blue);
+    const delta = max - Math.min(red, green, blue);
+    let h = 0;
+    if (delta) {
+        if (max === red)
+            h = ((green - blue) / delta + 6) % 6;
+        else if (max === green)
+            h = (blue - red) / delta + 2;
+        else
+            h = (red - green) / delta + 4;
+    }
+    return { h: h * 60, s: max ? delta / max : 0, v: max, a };
+}
+export function toRgba({ h, s, v, a }) {
+    const f = (n) => {
+        const k = (n + h / 60) % 6;
+        return channel(v - v * s * Math.max(0, Math.min(k, 4 - k, 1)));
+    };
+    return { r: f(5), g: f(3), b: f(1), a };
+}
+//# sourceMappingURL=color.js.map

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

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

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

@@ -0,0 +1,8 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { overlaySurfaceStructuralStyles } from '../styles/overlay-surface.structural.styles.js';
+export { OddkinColorPicker, COLOR_PICKER_STRINGS, colorPickerInputEvent, colorPickerChangeEvent, } from './color-picker.js';
+export { colorPickerTemplate } from './color-picker.template.js';
+export { colorPickerStructuralStyles } from './color-picker.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/color-picker/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/color-picker/foundation.js

@@ -0,0 +1,10 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { overlaySurfaceStructuralStyles } from '../styles/overlay-surface.structural.styles.js';
+export { OddkinColorPicker, COLOR_PICKER_STRINGS, colorPickerInputEvent, colorPickerChangeEvent, } from './color-picker.js';
+export { colorPickerTemplate } from './color-picker.template.js';
+export { colorPickerStructuralStyles } from './color-picker.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/color-picker/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC"}

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

@@ -0,0 +1,7 @@
+export { OddkinColorPicker, COLOR_PICKER_STRINGS, colorPickerInputEvent, colorPickerChangeEvent, } from './color-picker.js';
+export type { OptionRecord } from './color-picker.js';
+export { colorPickerTemplate } from './color-picker.template.js';
+export { colorPickerStructuralStyles } from './color-picker.structural.styles.js';
+export { colorPickerStyles } from './color-picker.styles.js';
+export { colorPickerDefinition } from './color-picker.definition.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-picker/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/color-picker/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/color-picker`.
+export { OddkinColorPicker, COLOR_PICKER_STRINGS, colorPickerInputEvent, colorPickerChangeEvent, } from './color-picker.js';
+export { colorPickerTemplate } from './color-picker.template.js';
+export { colorPickerStructuralStyles } from './color-picker.structural.styles.js';
+export { colorPickerStyles } from './color-picker.styles.js';
+export { colorPickerDefinition } from './color-picker.definition.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/color-picker/index.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/combobox/combobox.d.ts

@@ -0,0 +1,132 @@
+import { type ElementEvents } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+import { type OptionRecord, type QueryChangeDetail } from '../collection/collection.js';
+import { OddkinOptionField } from '../collection/option-field.js';
+import { TextHints } from '../form-control/text-hints.js';
+export type { OptionRecord } from '../collection/collection.js';
+export declare const COMBOBOX_STRINGS: {
+    clear: string;
+    remove: string;
+    selected: string;
+    more: string;
+    count: string;
+    others: string;
+    othersOne: string;
+    group: string;
+    total: string;
+    showAll: string;
+    showLess: string;
+    selectAll: string;
+    clearAll: string;
+    selectedCount: string;
+    viewMore: string;
+    loading: string;
+    empty: string;
+};
+/** The details of `odd-query-change`. */
+export type ComboboxQueryDetail = QueryChangeDetail;
+/** The user typed in the input (one definition with `odd-command-palette`'s). */
+export declare const comboboxQueryEvent: import("@oddkin/core/element").EventDefinition<QueryChangeDetail>;
+declare const OddkinCombobox_base: import("@oddkin/core/element").WithProps<typeof OddkinOptionField, {
+    readonly readonly: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly placeholder: import("@oddkin/core/element").PropDefinition<string>;
+    readonly noFilter: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        clear: string;
+        remove: string;
+        selected: string;
+        more: string;
+        count: string;
+        others: string;
+        othersOne: string;
+        group: string;
+        total: string;
+        showAll: string;
+        showLess: string;
+        selectAll: string;
+        clearAll: string;
+        selectedCount: string;
+        viewMore: string;
+        loading: string;
+        empty: string;
+    }> | undefined>;
+}>;
+/**
+ * An editable input with a popup listbox (APG combobox, list autocomplete): typing filters the
+ * options and the first match becomes active; Enter or a click chooses. With `multiple`, chosen
+ * values are chips in the field, collapsed to "+N" while the field is not in use. Options come from
+ * `<option>` and `<optgroup>` children, written as for a native select, or from `options`.
+ *
+ * @slot empty - Shown when no option matches and nothing is loading (default `strings.empty`).
+ * @slot status - Status content such as an error and a retry button, shown in the popup.
+ * @csspart field - Wrapper of label, description, control, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart control - The field box holding the input and, with `multiple`, the chips.
+ * @csspart input - The text input with `role="combobox"`.
+ * @csspart chip - Each chosen value with `multiple`.
+ * @csspart chip-remove - The button that removes a chip's value.
+ * @csspart more - The "+N" chip that stands for the chips not shown.
+ * @csspart clear - The button that clears the value, shown while there is one.
+ * @csspart popup - The popup surface holding the listbox and the states.
+ * @csspart listbox - The `role="listbox"` element.
+ * @csspart option - Each option row.
+ * @csspart group - Each group's heading.
+ * @csspart loading - The busy row while `loading`.
+ * @csspart empty - The wrapper of the empty slot.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The field shows its error: `error` is set, or nothing is chosen while `required` after the user left the field or a validity check failed.
+ * @a11y The input has `role="combobox"`, `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, and names the active option with `aria-activedescendant`; `label` names it. Options carry `aria-selected`; with `multiple` they are drawn with a check box, and the listbox has `aria-multiselectable`. Chips are a list named by `strings.selected`; each remove button is named by `strings.remove`, and the "+N" chip reads "N more" (`strings.more`).
+ * @keyboard Typing filters the options and opens the popup with the first match active. Down and Up open the popup (on the selected or first option, or the last); in the popup they move the active option, and Enter chooses it (single: closes; multiple: toggles and stays open). Alt+Down opens without moving, Alt+Up closes. Escape closes the popup, or when it is closed clears the text and the value. With `multiple`, Backspace in an empty input removes the last value, and Left at the start of the input moves to the chips: Left and Right move between them, Backspace and Delete remove one, Escape returns to the input.
+ * @a11y The global `inputmode`, `enterkeyhint`, `autocapitalize`, `autocorrect`, and `spellcheck` attributes on the host are forwarded to the search input; `spellcheck` defaults to `false`, as a query is not prose.
+ * @previewRole combobox
+ * @useFor Choosing from a long list by typing: people, projects, countries; several values with `multiple`.
+ * @notFor A short list (use odd-select or odd-radio-group); free text with suggestions only (use odd-input); commands (use odd-command-palette).
+ * @category Forms
+ * @customization 1 2 3
+ */
+export declare class OddkinCombobox extends OddkinCombobox_base {
+    #private;
+    static events: {
+        input: import("@oddkin/core/element").EventDefinition<void>;
+        change: import("@oddkin/core/element").EventDefinition<void>;
+        'odd-query-change': import("@oddkin/core/element").EventDefinition<QueryChangeDetail>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinCombobox>;
+    /** @internal The host's text-entry hints for the input. */
+    readonly _hints: TextHints;
+    /** @internal The options the popup shows: all of them, or those whose label contains the text. */
+    readonly _shownOptions: Readable<readonly OptionRecord[]>;
+    /** @internal The input's text: the typed text, or (single) the chosen option's label. */
+    readonly _text: Readable<string>;
+    /** The text in the input, as the user typed it (read-only). */
+    get query(): string;
+    /** @internal Localized strings. */
+    get _strings(): typeof COMBOBOX_STRINGS;
+    protected _homeEnd(): boolean;
+    protected _readonly(): boolean;
+    protected _anchor(): HTMLElement | null | undefined;
+    protected _onReset(): void;
+    protected _onLeave(): void;
+    /** @internal Chooses the shown option at `index`. */
+    _choose(index: number): void;
+    /** Clears the value and the text, as a user's clear does. */
+    _clear(): void;
+    /** @internal Template handler: typing filters and opens the popup; it is not a value change. */
+    readonly _onInput: (event: Event) => void;
+    /** @internal Template handler: a click in the input opens the popup. */
+    readonly _onInputClick: () => void;
+    /** @internal Template handler: the combobox keys (the active option's arrows are the controller's). */
+    readonly _onKeydown: (event: KeyboardEvent) => void;
+    /** @internal Template handler: a click on an option chooses it. */
+    readonly _onPopupClick: (event: MouseEvent) => void;
+    protected connected(scope: Scope): void;
+    protected updated(changes: ReadonlyMap<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-combobox': OddkinCombobox;
+    }
+}
+//# sourceMappingURL=combobox.d.ts.map

package/dist/combobox/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/combobox/combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACvB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAwB,MAAM,+BAA+B,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;CAI5B,CAAC;AAEF,yCAAyC;AACzC,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AACpD,iFAAiF;AACjF,eAAO,MAAM,kBAAkB,mEAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBAAa,cAAe,SAAQ,mBAclC;;IACA,OAAgB,MAAM;QACpB,KAAK;QACL,MAAM;QACN,kBAAkB;MAClB;IACF,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,cAAc,CAAC,CAAC;IAEhE,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,YAAuB;IAOtC,kGAAkG;IAClG,QAAQ,CAAC,aAAa,EAAE,QAAQ,CAAC,SAAS,YAAY,EAAE,CAAC,CAMtD;IAEH,yFAAyF;IACzF,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAE9B;IAEF,+DAA+D;IAC/D,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,mCAAmC;IACnC,IAAa,QAAQ,IAAI,OAAO,gBAAgB,CAE/C;IAED,UAAmB,QAAQ,IAAI,OAAO,CAErC;IAED,UAAmB,SAAS,IAAI,OAAO,CAEtC;IAED,UAAmB,OAAO,IAAI,WAAW,GAAG,IAAI,GAAG,SAAS,CAE3D;IAED,UAAmB,QAAQ,IAAI,IAAI,CAElC;IAED,UAAmB,QAAQ,IAAI,IAAI,CAElC;IAQD,qDAAqD;IACrD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAO3B;IAED,6DAA6D;IACpD,MAAM,IAAI,IAAI,CAGtB;IAED,gGAAgG;IAChG,QAAQ,CAAC,QAAQ,UAAW,KAAK,KAAG,IAAI,CAStC;IAEF,wEAAwE;IACxE,QAAQ,CAAC,aAAa,QAAO,IAAI,CAE/B;IAEF,uGAAuG;IACvG,QAAQ,CAAC,UAAU,UAAW,aAAa,KAAG,IAAI,CA8ChD;IAEF,mEAAmE;IACnE,QAAQ,CAAC,aAAa,UAAW,UAAU,KAAG,IAAI,CAKhD;IAEF,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAG/C;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAMtE;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,cAAc,CAAC;KAChC;CACF"}

package/dist/combobox/combobox.define.d.ts

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

package/dist/combobox/combobox.define.d.ts.map

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

package/dist/combobox/combobox.define.js

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

package/dist/combobox/combobox.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.define.js","sourceRoot":"","sources":["../../src/combobox/combobox.define.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,CAAC,kBAAkB,CAAC,CAAC"}

package/dist/combobox/combobox.definition.d.ts

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

package/dist/combobox/combobox.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.definition.d.ts","sourceRoot":"","sources":["../../src/combobox/combobox.definition.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAQ/C,eAAO,MAAM,kBAAkB,kEA6B7B,CAAC"}

package/dist/combobox/combobox.definition.js

@@ -0,0 +1,60 @@
+import { compose } from '@oddkin/core/element';
+import { avatarDefinition } from '../avatar/avatar.definition.js';
+import { nativeButtonStyles } from '../button/button.native.styles.js';
+import { chipStructuralStyles } from '../chip/chip.structural.styles.js';
+import { chipStyles } from '../chip/chip.styles.js';
+import { inputStructuralStyles } from '../input/input.structural.styles.js';
+import { inputStyles } from '../input/input.styles.js';
+import { listboxStructuralStyles } from '../listbox/listbox.structural.styles.js';
+import { listboxStyles } from '../listbox/listbox.styles.js';
+import { controlIndicatorStructuralStyles } from '../styles/control-indicator.structural.styles.js';
+import { controlIndicatorStyles } from '../styles/control-indicator.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 { optionRowStructuralStyles } from '../styles/option-row.structural.styles.js';
+import { optionRowStyles } from '../styles/option-row.styles.js';
+import { overlaySurfaceStructuralStyles } from '../styles/overlay-surface.structural.styles.js';
+import { overlaySurfaceStyles } from '../styles/overlay-surface.styles.js';
+import { spinnerStyles } from '../styles/spinner.styles.js';
+import { visuallyHiddenStyles } from '../styles/visually-hidden.styles.js';
+import { OddkinCombobox } from './combobox.js';
+import { comboboxStructuralStyles } from './combobox.structural.styles.js';
+import { comboboxStyles } from './combobox.styles.js';
+import { comboboxTemplate } from './combobox.template.js';
+// One home per decision: the chips are odd-chip's sheets, the clear button odd-input's, the rows
+// and states odd-listbox's, Show all and Clear all odd-button's native look (constructed sheets
+// are shared per document). The avatars view nests odd-avatar (ADR 0043).
+export const comboboxDefinition = compose({
+    name: 'odd-combobox',
+    element: OddkinCombobox,
+    template: comboboxTemplate,
+    dependencies: { avatar: avatarDefinition },
+    styles: [
+        hostStyles,
+        chipStructuralStyles,
+        fieldStructuralStyles,
+        optionRowStructuralStyles,
+        listboxStructuralStyles,
+        overlaySurfaceStructuralStyles,
+        controlIndicatorStructuralStyles,
+        inputStructuralStyles,
+        visuallyHiddenStyles,
+        comboboxStructuralStyles,
+        glyphStyles,
+        spinnerStyles,
+        focusRingStyles,
+        controlStyles,
+        controlIndicatorStyles,
+        chipStyles,
+        nativeButtonStyles,
+        inputStyles,
+        overlaySurfaceStyles,
+        optionRowStyles,
+        listboxStyles,
+        comboboxStyles,
+    ],
+});
+//# sourceMappingURL=combobox.definition.js.map

package/dist/combobox/combobox.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.definition.js","sourceRoot":"","sources":["../../src/combobox/combobox.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,gCAAgC,EAAE,MAAM,kDAAkD,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,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,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,iGAAiG;AACjG,gGAAgG;AAChG,0EAA0E;AAC1E,MAAM,CAAC,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACxC,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,gBAAgB;IAC1B,YAAY,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAC1C,MAAM,EAAE;QACN,UAAU;QACV,oBAAoB;QACpB,qBAAqB;QACrB,yBAAyB;QACzB,uBAAuB;QACvB,8BAA8B;QAC9B,gCAAgC;QAChC,qBAAqB;QACrB,oBAAoB;QACpB,wBAAwB;QACxB,WAAW;QACX,aAAa;QACb,eAAe;QACf,aAAa;QACb,sBAAsB;QACtB,UAAU;QACV,kBAAkB;QAClB,WAAW;QACX,oBAAoB;QACpB,eAAe;QACf,aAAa;QACb,cAAc;KACf;CACF,CAAC,CAAC"}

package/dist/combobox/combobox.js

@@ -0,0 +1,228 @@
+import { prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { computed, signal } from '@oddkin/core/reactive';
+import { queryChangeEvent, } from '../collection/collection.js';
+import { optionChangeEvent, optionInputEvent } from '../collection/option-control.js';
+import { OddkinOptionField, OPTION_FIELD_STRINGS } from '../collection/option-field.js';
+import { TextHints } from '../form-control/text-hints.js';
+export const COMBOBOX_STRINGS = {
+    ...OPTION_FIELD_STRINGS,
+    loading: 'Loading…',
+    empty: 'No matching options',
+};
+/** The user typed in the input (one definition with `odd-command-palette`'s). */
+export const comboboxQueryEvent = queryChangeEvent;
+/**
+ * An editable input with a popup listbox (APG combobox, list autocomplete): typing filters the
+ * options and the first match becomes active; Enter or a click chooses. With `multiple`, chosen
+ * values are chips in the field, collapsed to "+N" while the field is not in use. Options come from
+ * `<option>` and `<optgroup>` children, written as for a native select, or from `options`.
+ *
+ * @slot empty - Shown when no option matches and nothing is loading (default `strings.empty`).
+ * @slot status - Status content such as an error and a retry button, shown in the popup.
+ * @csspart field - Wrapper of label, description, control, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart control - The field box holding the input and, with `multiple`, the chips.
+ * @csspart input - The text input with `role="combobox"`.
+ * @csspart chip - Each chosen value with `multiple`.
+ * @csspart chip-remove - The button that removes a chip's value.
+ * @csspart more - The "+N" chip that stands for the chips not shown.
+ * @csspart clear - The button that clears the value, shown while there is one.
+ * @csspart popup - The popup surface holding the listbox and the states.
+ * @csspart listbox - The `role="listbox"` element.
+ * @csspart option - Each option row.
+ * @csspart group - Each group's heading.
+ * @csspart loading - The busy row while `loading`.
+ * @csspart empty - The wrapper of the empty slot.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The field shows its error: `error` is set, or nothing is chosen while `required` after the user left the field or a validity check failed.
+ * @a11y The input has `role="combobox"`, `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, and names the active option with `aria-activedescendant`; `label` names it. Options carry `aria-selected`; with `multiple` they are drawn with a check box, and the listbox has `aria-multiselectable`. Chips are a list named by `strings.selected`; each remove button is named by `strings.remove`, and the "+N" chip reads "N more" (`strings.more`).
+ * @keyboard Typing filters the options and opens the popup with the first match active. Down and Up open the popup (on the selected or first option, or the last); in the popup they move the active option, and Enter chooses it (single: closes; multiple: toggles and stays open). Alt+Down opens without moving, Alt+Up closes. Escape closes the popup, or when it is closed clears the text and the value. With `multiple`, Backspace in an empty input removes the last value, and Left at the start of the input moves to the chips: Left and Right move between them, Backspace and Delete remove one, Escape returns to the input.
+ * @a11y The global `inputmode`, `enterkeyhint`, `autocapitalize`, `autocorrect`, and `spellcheck` attributes on the host are forwarded to the search input; `spellcheck` defaults to `false`, as a query is not prose.
+ * @previewRole combobox
+ * @useFor Choosing from a long list by typing: people, projects, countries; several values with `multiple`.
+ * @notFor A short list (use odd-select or odd-radio-group); free text with suggestions only (use odd-input); commands (use odd-command-palette).
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinCombobox extends OddkinOptionField.with({
+    readonly: prop.boolean({
+        reflect: true,
+        description: 'The value shows but cannot be changed; it is still submitted.',
+    }),
+    placeholder: prop.string({ default: '', description: 'Text shown in the empty input.' }),
+    noFilter: prop.boolean({
+        reflect: true,
+        description: 'The element does not filter: listen to `odd-query-change` and replace `options` with the matches.',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides; `remove` takes `{label}` and `more` takes `{count}`.',
+    }),
+}) {
+    static events = {
+        input: optionInputEvent,
+        change: optionChangeEvent,
+        'odd-query-change': queryChangeEvent,
+    };
+    /** @internal The host's text-entry hints for the input. */
+    _hints = new TextHints(this);
+    #query = signal('');
+    // Single: the user typed since the value was last chosen, so the input shows the text.
+    #editing = signal(false);
+    // Activate the first match once the filtered rows have rendered.
+    #activateFirst = false;
+    /** @internal The options the popup shows: all of them, or those whose label contains the text. */
+    _shownOptions = computed(() => {
+        const options = this._options.value;
+        // Single: the text is empty whenever it shows the chosen option's label (not editing).
+        const query = this.#query.value.trim().toLocaleLowerCase();
+        if (this.noFilter || !query)
+            return options;
+        return options.filter((option) => option.label.toLocaleLowerCase().includes(query));
+    });
+    /** @internal The input's text: the typed text, or (single) the chosen option's label. */
+    _text = computed(() => this.multiple || this.#editing.value ? this.#query.value : this._labelOf(this.value));
+    /** The text in the input, as the user typed it (read-only). */
+    get query() {
+        return this.#query.value;
+    }
+    /** @internal Localized strings. */
+    get _strings() {
+        return strings(COMBOBOX_STRINGS, this.strings);
+    }
+    _homeEnd() {
+        return false;
+    }
+    _readonly() {
+        return this.readonly;
+    }
+    _anchor() {
+        return this._entry();
+    }
+    _onReset() {
+        this.#revert();
+    }
+    _onLeave() {
+        this.#revert();
+    }
+    /** Back to the chosen value's text (single); the typed text is dropped. */
+    #revert() {
+        this.#query.value = '';
+        this.#editing.value = false;
+    }
+    /** @internal Chooses the shown option at `index`. */
+    _choose(index) {
+        const option = this._usable(this._shownOptions.peek()[index]);
+        if (!option || this.readonly)
+            return;
+        this._toggle(option);
+        if (this.multiple)
+            return;
+        this.#revert();
+        this._hide();
+    }
+    /** Clears the value and the text, as a user's clear does. */
+    _clear() {
+        this.#revert();
+        super._clear();
+    }
+    /** @internal Template handler: typing filters and opens the popup; it is not a value change. */
+    _onInput = (event) => {
+        // The inner input's `input` is not the element's: its value changes only by choosing.
+        event.stopPropagation();
+        const query = event.target.value;
+        this.#query.value = query;
+        this.#editing.value = true;
+        this.#activateFirst = true;
+        this.emit(queryChangeEvent, { query });
+        this._show();
+    };
+    /** @internal Template handler: a click in the input opens the popup. */
+    _onInputClick = () => {
+        if (!this._showing)
+            this._show();
+    };
+    /** @internal Template handler: the combobox keys (the active option's arrows are the controller's). */
+    _onKeydown = (event) => {
+        if (event.defaultPrevented || event.isComposing || event.ctrlKey || event.metaKey)
+            return;
+        const open = this._showing;
+        const input = event.target;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                if (open && !(event.altKey && event.key === 'ArrowUp'))
+                    return;
+                if (open)
+                    this._hide();
+                else if (event.altKey)
+                    this._show();
+                else
+                    this._show(event.key === 'ArrowUp' ? 'last' : 'selected');
+                break;
+            case 'Enter': {
+                if (!open)
+                    return;
+                const index = this._active;
+                if (index >= 0)
+                    this._choose(index);
+                else
+                    this._hide();
+                break;
+            }
+            case 'Escape':
+                if (open) {
+                    this._hide();
+                    if (!this.multiple)
+                        this.#revert();
+                }
+                else if (this._editable && (this.#query.peek() || this._selected.peek().length))
+                    this._clear();
+                else
+                    return;
+                event.stopPropagation();
+                break;
+            case 'Backspace': {
+                const last = this._selected.peek().at(-1);
+                if (!this.multiple || input.value || last === undefined || !this._editable)
+                    return;
+                this._remove(last);
+                break;
+            }
+            case 'ArrowLeft':
+            case 'ArrowRight': {
+                const rtl = getComputedStyle(input).direction === 'rtl';
+                const back = event.key === (rtl ? 'ArrowRight' : 'ArrowLeft');
+                if (!this.multiple || !back || input.selectionStart || input.selectionEnd)
+                    return;
+                if (!this._focusChips())
+                    return;
+                break;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+    };
+    /** @internal Template handler: a click on an option chooses it. */
+    _onPopupClick = (event) => {
+        const index = this._rowElements().findIndex((row) => event.composedPath().includes(row));
+        if (index < 0)
+            return;
+        this._setActive(index, { scroll: false });
+        this._choose(index);
+    };
+    connected(scope) {
+        super.connected(scope);
+        scope.use(this._hints);
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (this.#activateFirst) {
+            this.#activateFirst = false;
+            this._setActive(this._shownOptions.peek().findIndex((option) => !option.disabled));
+        }
+    }
+}
+//# sourceMappingURL=combobox.js.map