@expressive/ui 0.0.0 → 0.1.0

package/dist/select/base.js

@@ -0,0 +1,409 @@
+import { missing, none } from "../piece.js";
+import { place } from "../popover/place.js";
+import { Component, ref } from "@expressive/mvc";
+import { Fragment, jsx, jsxs } from "@expressive/mvc/jsx-runtime";
+
+//#region src/select/base.tsx
+let ID = 0;
+const CONTROL = /* @__PURE__ */ new WeakMap();
+const MENU = /* @__PURE__ */ new WeakMap();
+const Layer = ({ children }) => children;
+/**
+* Combobox behavior without a look: state, keyboard, announcements and ARIA, assembled from pieces.
+*
+* Every visible piece is a placeholder that throws when rendered - a skin assigns each one it renders.
+* Pieces spread the matching `*Props` getter onto their element to stay accessible. `Layer` wraps the menu and renders
+* in place by default; a skin replaces it to move the menu out of clipping containers, placed at `place`.
+*/
+var Select = class extends Component {
+	options = [];
+	value = null;
+	onChange = void 0;
+	multi = false;
+	/** Whether Backspace and `clear` remove values. Defaults to `multi`. */
+	clearable = void 0;
+	searchable = true;
+	disabled = false;
+	placeholder = "Select…";
+	/** The input's id, for a `<label htmlFor>`; prefixes the listbox and option ids. */
+	id = `select-${++ID}`;
+	query = "";
+	open = false;
+	focused = false;
+	highlighted = 0;
+	message = "";
+	input = ref();
+	/** Where the menu sits, once measured. */
+	place = void 0;
+	Root = missing("Select.Root");
+	Control = missing("Select.Control");
+	Values = missing("Select.Values");
+	Chip = missing("Select.Chip");
+	Value = missing("Select.Value");
+	Input = missing("Select.Input");
+	Clear = missing("Select.Clear");
+	Toggle = missing("Select.Toggle");
+	Layer = Layer;
+	Menu = missing("Select.Menu");
+	Option = missing("Select.Option");
+	Empty = none;
+	Live = Live;
+	constructor(...args) {
+		super(...args, () => {
+			this.get(({ open }) => {
+				if (!open) return;
+				const release = this.listen();
+				return () => {
+					release();
+					this.place = void 0;
+				};
+			});
+		});
+	}
+	get selection() {
+		const { value } = this;
+		return Array.isArray(value) ? value : value ? [value] : [];
+	}
+	/** Options matching `query`, accent- and case-insensitive; skips disabled and, when `multi`, chosen ones. */
+	get filtered() {
+		const query = fold(this.query);
+		const taken = this.multi ? this.selection : [];
+		return this.options.filter((option) => {
+			return !option.disabled && !taken.some((chosen) => chosen.value === option.value) && fold(`${option.label} ${String(option.value)}`).includes(query);
+		});
+	}
+	/** The highlighted option while open. */
+	get active() {
+		return this.open ? this.filtered[this.highlighted] : void 0;
+	}
+	get canClear() {
+		return (this.clearable ?? this.multi) && this.selection.length > 0;
+	}
+	/** Text for the `aria-live` region; empty while unfocused. */
+	get announcement() {
+		if (!this.focused) return "";
+		const count = this.filtered.length;
+		const results = this.open ? `${count} result${count === 1 ? "" : "s"} available${this.query ? ` for ${this.query}` : ""}.` : "";
+		return [this.message, results].filter(Boolean).join(" ");
+	}
+	/** For the element wrapping values and buttons: a press anywhere focuses the input and opens. */
+	get controlProps() {
+		return {
+			ref: this.anchor,
+			onMouseDown: this.press
+		};
+	}
+	get inputProps() {
+		const { id, input, open, query, active, highlighted, disabled, searchable, selection, placeholder } = this;
+		return {
+			ref: input,
+			id,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": open,
+			"aria-controls": `${id}-listbox`,
+			"aria-activedescendant": active && `${id}-option-${highlighted}`,
+			autoComplete: "off",
+			disabled,
+			readOnly: !searchable,
+			placeholder: selection.length ? "" : placeholder,
+			value: query,
+			onInput: (event) => this.search(event.currentTarget.value),
+			onFocus: this.focus,
+			onBlur: this.blur,
+			onKeyDown: this.keyDown
+		};
+	}
+	get clearProps() {
+		return {
+			type: "button",
+			tabIndex: -1,
+			"aria-label": "Clear selection",
+			onMouseDown: hold,
+			onClick: () => {
+				this.clear();
+				this.input.current?.focus();
+			}
+		};
+	}
+	get toggleProps() {
+		return {
+			type: "button",
+			tabIndex: -1,
+			"aria-label": this.open ? "Hide options" : "Show options",
+			onMouseDown: hold,
+			onClick: () => {
+				this.input.current?.focus();
+				this.toggle();
+			}
+		};
+	}
+	/** For a chip's remove button. */
+	get removeProps() {
+		return (option) => ({
+			type: "button",
+			tabIndex: -1,
+			"aria-label": `Remove ${option.label}`,
+			onMouseDown: hold,
+			onClick: () => this.remove(option)
+		});
+	}
+	/** For the menu: hidden at the origin until measured, then at `place`, as wide as the control. */
+	get menuProps() {
+		const { id, multi, place } = this;
+		return {
+			ref: this.mount,
+			id: `${id}-listbox`,
+			role: "listbox",
+			"aria-multiselectable": multi,
+			onMouseDown: hold,
+			style: place ? {
+				left: `${place.left}px`,
+				top: `${place.top}px`,
+				width: `${place.width}px`
+			} : {
+				left: "0px",
+				top: "0px",
+				opacity: "0"
+			}
+		};
+	}
+	/** For an option's element, with `active` and `selected` for styling. */
+	get optionProps() {
+		const { id, highlighted, selection } = this;
+		return (option, index) => {
+			const active = index === highlighted;
+			const selected = selection.some((chosen) => chosen.value === option.value);
+			return {
+				active,
+				selected,
+				props: {
+					ref: active ? this.reveal : void 0,
+					id: `${id}-option-${index}`,
+					role: "option",
+					"aria-selected": selected,
+					onMouseMove: () => this.highlighted = index,
+					onClick: () => this.choose(option)
+				}
+			};
+		};
+	}
+	isSelected(option) {
+		return this.selection.some((chosen) => chosen.value === option.value);
+	}
+	choose(option) {
+		if (this.disabled || option.disabled) return;
+		this.update(this.multi ? [...this.selection, option] : option);
+		this.query = "";
+		this.open = false;
+		this.message = `Selected ${option.label}.`;
+	}
+	remove(option) {
+		if (this.disabled) return;
+		const rest = this.selection.filter((chosen) => chosen.value !== option.value);
+		this.update(this.multi ? rest : null);
+		this.query = "";
+		this.message = this.multi ? `Removed ${option.label}.` : "Selection cleared.";
+	}
+	clear() {
+		if (this.disabled) return;
+		this.update(this.multi ? [] : null);
+		this.query = "";
+		this.open = false;
+		this.message = "Selection cleared.";
+	}
+	search(query) {
+		if (!this.searchable) return;
+		this.query = query;
+		this.message = "";
+		this.highlighted = 0;
+		this.show();
+	}
+	/** Open, highlighting the current choice - else the first option, or the last when `last`. */
+	show(last = false) {
+		if (this.disabled || this.open) return;
+		const { filtered } = this;
+		const current = filtered.findIndex((option) => this.isSelected(option));
+		this.highlighted = current >= 0 ? current : last ? filtered.length - 1 : 0;
+		this.open = true;
+	}
+	hide() {
+		this.open = false;
+		this.query = "";
+	}
+	toggle() {
+		if (this.open) this.hide();
+		else this.show();
+	}
+	focus() {
+		this.focused = true;
+		this.message = this.selection.length ? `Selected ${this.selection.map((option) => option.label).join(", ")}.` : "";
+	}
+	blur() {
+		this.focused = false;
+		this.hide();
+	}
+	/**
+	* Arrows, Home/End, PageUp/PageDown move the highlight; Enter, Space and Tab choose;
+	* Escape closes; Backspace removes the last value.
+	*
+	* Calls `preventDefault` and `stopPropagation` on keys it consumes. Tab and Backspace pass through.
+	*/
+	keyDown(event) {
+		if (this.disabled || event.isComposing) return;
+		const { open, filtered, highlighted, active } = this;
+		const last = filtered.length - 1;
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowUp": {
+				const step = event.key === "ArrowDown" ? 1 : -1;
+				if (!open) this.show(step < 0);
+				else this.highlighted = filtered.length ? (highlighted + step + filtered.length) % filtered.length : 0;
+				break;
+			}
+			case "Home":
+			case "End":
+				if (!open) return;
+				this.highlighted = event.key === "Home" ? 0 : last;
+				break;
+			case "PageDown":
+			case "PageUp":
+				if (!open) return;
+				this.highlighted = Math.max(0, Math.min(last, highlighted + (event.key === "PageDown" ? 5 : -5)));
+				break;
+			case "Enter":
+				if (!active) return;
+				this.choose(active);
+				break;
+			case "Escape":
+				if (!open) return;
+				this.hide();
+				break;
+			case " ":
+				if (this.query) return;
+				if (active) this.choose(active);
+				else this.show();
+				break;
+			case "Backspace":
+				if (!this.query && this.canClear) this.remove(this.selection[this.selection.length - 1]);
+				return;
+			case "Tab":
+				if (active && !event.shiftKey) this.choose(active);
+				this.open = false;
+				return;
+			default: return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	/** Focus the input and open, from a press anywhere on the control. */
+	press(event) {
+		if (event.target !== this.input.current) event.preventDefault();
+		this.input.current?.focus();
+		this.show();
+	}
+	/** Follow scroll and resize while open, keeping the menu at the control; returns the release. Defaults to `window`. */
+	listen() {
+		const move = () => this.reposition();
+		window.addEventListener("resize", move);
+		window.addEventListener("scroll", move, true);
+		return () => {
+			window.removeEventListener("resize", move);
+			window.removeEventListener("scroll", move, true);
+		};
+	}
+	/** Where the menu fits by the control, or `undefined` before both mount. Defaults to the DOM's layout. */
+	measure() {
+		const control = CONTROL.get(this);
+		const menu = MENU.get(this);
+		if (!control || !menu) return;
+		const anchor = control.getBoundingClientRect();
+		const { left, top, side } = place({
+			anchor,
+			width: anchor.width,
+			height: menu.offsetHeight,
+			view: {
+				left: 0,
+				top: 0,
+				width: window.innerWidth,
+				height: window.innerHeight
+			}
+		});
+		return {
+			left,
+			top,
+			width: anchor.width,
+			above: side == "above"
+		};
+	}
+	/** Re-measure and move the menu when its place changed; for a `listen` that follows layout. */
+	reposition() {
+		const next = this.measure();
+		if (!next) return;
+		const { place: last } = this;
+		if (!last || Object.keys(next).some((key) => last[key] != next[key])) this.place = next;
+	}
+	/** Ref for the control, in `controlProps`; the menu anchors to it. */
+	anchor(element) {
+		if (element) CONTROL.set(this, element);
+	}
+	/** Ref for the menu, in `menuProps`; places it once mounted. */
+	mount(element) {
+		if (!element) return;
+		MENU.set(this, element);
+		this.reposition();
+	}
+	/** Ref for the highlighted option, in `optionProps`; keeps it in view. Defaults to `scrollIntoView`. */
+	reveal(element) {
+		element?.scrollIntoView({ block: "nearest" });
+	}
+	update(value) {
+		this.value = value;
+		if (this.onChange) this.onChange(value);
+	}
+	render() {
+		const { open, multi, query, selection, filtered, canClear } = this;
+		const value = !multi && !query && selection[0];
+		const empty = filtered.length == 0;
+		return /* @__PURE__ */ jsxs(this.Root, { children: [
+			/* @__PURE__ */ jsxs(this.Control, { children: [
+				/* @__PURE__ */ jsxs(this.Values, { children: [/* @__PURE__ */ jsxs(Fragment, { children: [multi && selection.map((option) => /* @__PURE__ */ jsx(this.Chip, { option }, String(option.value))), value && /* @__PURE__ */ jsx(this.Value, { option: value })] }), /* @__PURE__ */ jsx(this.Input, {}, "input")] }),
+				canClear && /* @__PURE__ */ jsx(this.Clear, {}),
+				/* @__PURE__ */ jsx(this.Toggle, {})
+			] }),
+			open && /* @__PURE__ */ jsx(this.Layer, { children: /* @__PURE__ */ jsxs(this.Menu, { children: [filtered.map((option, index) => /* @__PURE__ */ jsx(this.Option, {
+				option,
+				index
+			}, String(option.value))), empty && /* @__PURE__ */ jsx(this.Empty, {})] }) }),
+			/* @__PURE__ */ jsx(this.Live, {})
+		] });
+	}
+};
+const hidden = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+};
+const Live = () => {
+	const { announcement } = Select.get();
+	return /* @__PURE__ */ jsx("span", {
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		style: hidden,
+		children: announcement
+	});
+};
+function hold(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+function fold(text) {
+	return text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+}
+
+//#endregion
+export { Select };
+//# sourceMappingURL=base.js.map

package/dist/select/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/select/base.tsx"],"sourcesContent":["import { Component, ref, type Model } from '@expressive/mvc';\n\nimport { missing, none } from '../piece';\nimport { place } from '../popover/place';\n\ndeclare namespace Select {\n  interface Option<T = unknown> {\n    value: T;\n    label: string;\n    disabled?: boolean;\n  }\n\n  /** One option, or an array when `multi`. */\n  type Value = Option | Option[] | null;\n\n  type Key = Pick<\n    KeyboardEvent,\n    'key' | 'shiftKey' | 'isComposing' | 'preventDefault' | 'stopPropagation'\n  >;\n\n  /** Where the menu sits, in viewport pixels; `above` when it flipped over the control. */\n  interface Place {\n    left: number;\n    top: number;\n    width: number;\n    above: boolean;\n  }\n\n  type Wrap = (props: { children: Component.Node }) => Component.Node;\n  type Each = (props: { option: Option }) => Component.Node;\n  type Item = (props: { option: Option; index: number }) => Component.Node;\n  type Part = () => Component.Node;\n}\n\nlet ID = 0;\n\nconst CONTROL = new WeakMap<Select, HTMLElement>();\n\nconst MENU = new WeakMap<Select, HTMLElement>();\n\nconst Layer = ({ children }: { children: Component.Node }): Component.Node => children;\n\n/**\n * Combobox behavior without a look: state, keyboard, announcements and ARIA, assembled from pieces.\n *\n * Every visible piece is a placeholder that throws when rendered - a skin assigns each one it renders.\n * Pieces spread the matching `*Props` getter onto their element to stay accessible. `Layer` wraps the menu and renders\n * in place by default; a skin replaces it to move the menu out of clipping containers, placed at `place`.\n */\nclass Select extends Component {\n  options: readonly Select.Option[] = [];\n  value: Select.Value = null;\n  onChange?: (value: Select.Value) => void = undefined;\n\n  multi = false;\n\n  /** Whether Backspace and `clear` remove values. Defaults to `multi`. */\n  clearable?: boolean = undefined;\n\n  searchable = true;\n  disabled = false;\n  placeholder = 'Select…';\n\n  /** The input's id, for a `<label htmlFor>`; prefixes the listbox and option ids. */\n  id = `select-${++ID}`;\n\n  query = '';\n  open = false;\n  focused = false;\n  highlighted = 0;\n  message = '';\n\n  input = ref<HTMLInputElement>();\n\n  /** Where the menu sits, once measured. */\n  place?: Select.Place = undefined;\n\n  Root: Select.Wrap = missing('Select.Root');\n  Control: Select.Wrap = missing('Select.Control');\n  Values: Select.Wrap = missing('Select.Values');\n  Chip: Select.Each = missing('Select.Chip');\n  Value: Select.Each = missing('Select.Value');\n  Input: Select.Part = missing('Select.Input');\n  Clear: Select.Part = missing('Select.Clear');\n  Toggle: Select.Part = missing('Select.Toggle');\n  Layer: Select.Wrap = Layer;\n  Menu: Select.Wrap = missing('Select.Menu');\n  Option: Select.Item = missing('Select.Option');\n  Empty: Select.Part = none;\n  Live: Select.Part = Live;\n\n  constructor(...args: Model.Args) {\n    super(...args, () => {\n      this.get(({ open }) => {\n        if (!open) return;\n\n        const release = this.listen();\n\n        return () => {\n          release();\n          this.place = undefined;\n        };\n      });\n    });\n  }\n\n  get selection(): Select.Option[] {\n    const { value } = this;\n\n    return Array.isArray(value) ? value : value ? [value] : [];\n  }\n\n  /** Options matching `query`, accent- and case-insensitive; skips disabled and, when `multi`, chosen ones. */\n  get filtered(): Select.Option[] {\n    const query = fold(this.query);\n    const taken = this.multi ? this.selection : [];\n\n    return this.options.filter((option) => {\n      const available = !option.disabled && !taken.some((chosen) => chosen.value === option.value);\n\n      return available && fold(`${option.label} ${String(option.value)}`).includes(query);\n    });\n  }\n\n  /** The highlighted option while open. */\n  get active(): Select.Option | undefined {\n    return this.open ? this.filtered[this.highlighted] : undefined;\n  }\n\n  get canClear(): boolean {\n    return (this.clearable ?? this.multi) && this.selection.length > 0;\n  }\n\n  /** Text for the `aria-live` region; empty while unfocused. */\n  get announcement(): string {\n    if (!this.focused) return '';\n\n    const count = this.filtered.length;\n    const results = this.open\n      ? `${count} result${count === 1 ? '' : 's'} available${this.query ? ` for ${this.query}` : ''}.`\n      : '';\n\n    return [this.message, results].filter(Boolean).join(' ');\n  }\n\n  /** For the element wrapping values and buttons: a press anywhere focuses the input and opens. */\n  get controlProps() {\n    return { ref: this.anchor, onMouseDown: this.press };\n  }\n\n  get inputProps() {\n    const { id, input, open, query, active, highlighted, disabled, searchable, selection, placeholder } = this;\n\n    return {\n      ref: input,\n      id,\n      role: 'combobox',\n      'aria-autocomplete': 'list',\n      'aria-expanded': open,\n      'aria-controls': `${id}-listbox`,\n      'aria-activedescendant': active && `${id}-option-${highlighted}`,\n      autoComplete: 'off',\n      disabled,\n      readOnly: !searchable,\n      placeholder: selection.length ? '' : placeholder,\n      value: query,\n      onInput: (event: Event) => this.search((event.currentTarget as HTMLInputElement).value),\n      onFocus: this.focus,\n      onBlur: this.blur,\n      onKeyDown: this.keyDown\n    } as const;\n  }\n\n  get clearProps() {\n    return {\n      type: 'button',\n      tabIndex: -1,\n      'aria-label': 'Clear selection',\n      onMouseDown: hold,\n      onClick: () => {\n        this.clear();\n        this.input.current?.focus();\n      }\n    } as const;\n  }\n\n  get toggleProps() {\n    return {\n      type: 'button',\n      tabIndex: -1,\n      'aria-label': this.open ? 'Hide options' : 'Show options',\n      onMouseDown: hold,\n      onClick: () => {\n        this.input.current?.focus();\n        this.toggle();\n      }\n    } as const;\n  }\n\n  /** For a chip's remove button. */\n  get removeProps() {\n    return (option: Select.Option) =>\n      ({\n        type: 'button',\n        tabIndex: -1,\n        'aria-label': `Remove ${option.label}`,\n        onMouseDown: hold,\n        onClick: () => this.remove(option)\n      }) as const;\n  }\n\n  /** For the menu: hidden at the origin until measured, then at `place`, as wide as the control. */\n  get menuProps() {\n    const { id, multi, place } = this;\n\n    return {\n      ref: this.mount,\n      id: `${id}-listbox`,\n      role: 'listbox',\n      'aria-multiselectable': multi,\n      onMouseDown: hold,\n      style: place\n        ? { left: `${place.left}px`, top: `${place.top}px`, width: `${place.width}px` }\n        : { left: '0px', top: '0px', opacity: '0' }\n    } as const;\n  }\n\n  /** For an option's element, with `active` and `selected` for styling. */\n  get optionProps() {\n    const { id, highlighted, selection } = this;\n\n    return (option: Select.Option, index: number) => {\n      const active = index === highlighted;\n      const selected = selection.some((chosen) => chosen.value === option.value);\n\n      return {\n        active,\n        selected,\n        props: {\n          ref: active ? this.reveal : undefined,\n          id: `${id}-option-${index}`,\n          role: 'option',\n          'aria-selected': selected,\n          onMouseMove: () => (this.highlighted = index),\n          onClick: () => this.choose(option)\n        } as const\n      };\n    };\n  }\n\n  isSelected(option: Select.Option) {\n    return this.selection.some((chosen) => chosen.value === option.value);\n  }\n\n  choose(option: Select.Option) {\n    if (this.disabled || option.disabled) return;\n\n    this.update(this.multi ? [...this.selection, option] : option);\n    this.query = '';\n    this.open = false;\n    this.message = `Selected ${option.label}.`;\n  }\n\n  remove(option: Select.Option) {\n    if (this.disabled) return;\n\n    const rest = this.selection.filter((chosen) => chosen.value !== option.value);\n\n    this.update(this.multi ? rest : null);\n    this.query = '';\n    this.message = this.multi ? `Removed ${option.label}.` : 'Selection cleared.';\n  }\n\n  clear() {\n    if (this.disabled) return;\n\n    this.update(this.multi ? [] : null);\n    this.query = '';\n    this.open = false;\n    this.message = 'Selection cleared.';\n  }\n\n  search(query: string) {\n    if (!this.searchable) return;\n\n    this.query = query;\n    this.message = '';\n    this.highlighted = 0;\n    this.show();\n  }\n\n  /** Open, highlighting the current choice - else the first option, or the last when `last`. */\n  show(last = false) {\n    if (this.disabled || this.open) return;\n\n    const { filtered } = this;\n    const current = filtered.findIndex((option) => this.isSelected(option));\n\n    this.highlighted = current >= 0 ? current : last ? filtered.length - 1 : 0;\n    this.open = true;\n  }\n\n  hide() {\n    this.open = false;\n    this.query = '';\n  }\n\n  toggle() {\n    if (this.open) this.hide();\n    else this.show();\n  }\n\n  focus() {\n    this.focused = true;\n    this.message = this.selection.length\n      ? `Selected ${this.selection.map((option) => option.label).join(', ')}.`\n      : '';\n  }\n\n  blur() {\n    this.focused = false;\n    this.hide();\n  }\n\n  /**\n   * Arrows, Home/End, PageUp/PageDown move the highlight; Enter, Space and Tab choose;\n   * Escape closes; Backspace removes the last value.\n   *\n   * Calls `preventDefault` and `stopPropagation` on keys it consumes. Tab and Backspace pass through.\n   */\n  keyDown(event: Select.Key) {\n    if (this.disabled || event.isComposing) return;\n\n    const { open, filtered, highlighted, active } = this;\n    const last = filtered.length - 1;\n\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp': {\n        const step = event.key === 'ArrowDown' ? 1 : -1;\n\n        if (!open) this.show(step < 0);\n        else this.highlighted = filtered.length ? (highlighted + step + filtered.length) % filtered.length : 0;\n        break;\n      }\n\n      case 'Home':\n      case 'End':\n        if (!open) return;\n\n        this.highlighted = event.key === 'Home' ? 0 : last;\n        break;\n\n      case 'PageDown':\n      case 'PageUp':\n        if (!open) return;\n\n        this.highlighted = Math.max(0, Math.min(last, highlighted + (event.key === 'PageDown' ? 5 : -5)));\n        break;\n\n      case 'Enter':\n        if (!active) return;\n\n        this.choose(active);\n        break;\n\n      case 'Escape':\n        if (!open) return;\n\n        this.hide();\n        break;\n\n      case ' ':\n        if (this.query) return;\n\n        if (active) this.choose(active);\n        else this.show();\n        break;\n\n      case 'Backspace':\n        if (!this.query && this.canClear) this.remove(this.selection[this.selection.length - 1]);\n        return;\n\n      case 'Tab':\n        if (active && !event.shiftKey) this.choose(active);\n\n        this.open = false;\n        return;\n\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  /** Focus the input and open, from a press anywhere on the control. */\n  press(event: MouseEvent) {\n    if (event.target !== this.input.current) event.preventDefault();\n\n    this.input.current?.focus();\n    this.show();\n  }\n\n  /** Follow scroll and resize while open, keeping the menu at the control; returns the release. Defaults to `window`. */\n  protected listen(): () => void {\n    const move = () => this.reposition();\n\n    window.addEventListener('resize', move);\n    window.addEventListener('scroll', move, true);\n\n    return () => {\n      window.removeEventListener('resize', move);\n      window.removeEventListener('scroll', move, true);\n    };\n  }\n\n  /** Where the menu fits by the control, or `undefined` before both mount. Defaults to the DOM's layout. */\n  protected measure(): Select.Place | undefined {\n    const control = CONTROL.get(this);\n    const menu = MENU.get(this);\n\n    if (!control || !menu) return;\n\n    const anchor = control.getBoundingClientRect();\n    const { left, top, side } = place({\n      anchor,\n      width: anchor.width,\n      height: menu.offsetHeight,\n      view: { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }\n    });\n\n    return { left, top, width: anchor.width, above: side == 'above' };\n  }\n\n  /** Re-measure and move the menu when its place changed; for a `listen` that follows layout. */\n  protected reposition() {\n    const next = this.measure();\n\n    if (!next) return;\n\n    const { place: last } = this;\n    const moved = !last || (Object.keys(next) as (keyof Select.Place)[]).some((key) => last[key] != next[key]);\n\n    if (moved) this.place = next;\n  }\n\n  /** Ref for the control, in `controlProps`; the menu anchors to it. */\n  protected anchor(element: HTMLElement | null) {\n    if (element) CONTROL.set(this, element);\n  }\n\n  /** Ref for the menu, in `menuProps`; places it once mounted. */\n  protected mount(element: HTMLElement | null) {\n    if (!element) return;\n\n    MENU.set(this, element);\n    this.reposition();\n  }\n\n  /** Ref for the highlighted option, in `optionProps`; keeps it in view. Defaults to `scrollIntoView`. */\n  protected reveal(element: HTMLElement | null) {\n    element?.scrollIntoView({ block: 'nearest' });\n  }\n\n  private update(value: Select.Value) {\n    this.value = value;\n\n    if (this.onChange) this.onChange(value);\n  }\n\n  render(): Component.Node {\n    const { open, multi, query, selection, filtered, canClear } = this;\n    const value = !multi && !query && selection[0];\n    const empty = filtered.length == 0;\n\n    return (\n      <this.Root>\n        <this.Control>\n          <this.Values>\n            <>\n              {multi && selection.map((option) => <this.Chip key={String(option.value)} option={option} />)}\n              {value && <this.Value option={value} />}\n            </>\n            <this.Input key=\"input\" />\n          </this.Values>\n          {canClear && <this.Clear />}\n          <this.Toggle />\n        </this.Control>\n        {open && (\n          <this.Layer>\n            <this.Menu>\n              {filtered.map((option, index) => (\n                <this.Option key={String(option.value)} option={option} index={index} />\n              ))}\n              {empty && <this.Empty />}\n            </this.Menu>\n          </this.Layer>\n        )}\n        <this.Live />\n      </this.Root>\n    );\n  }\n}\n\nconst hidden = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  whiteSpace: 'nowrap'\n} as const;\n\nconst Live = (): Component.Node => {\n  const { announcement } = Select.get();\n\n  return (\n    <span aria-live=\"polite\" aria-atomic=\"true\" style={hidden}>\n      {announcement}\n    </span>\n  );\n};\n\nfunction hold(event: MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nfunction fold(text: string) {\n  return text\n    .normalize('NFD')\n    .replace(/[̀-ͯ]/g, '')\n    .toLowerCase()\n    .trim();\n}\n\nexport { Live, Select };\n"],"mappings":"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"}

package/dist/select/select.d.ts

@@ -0,0 +1,119 @@
+import { Select as Select$1 } from "./base.js";
+import { Component } from "@expressive/mvc";
+
+//#region src/select/select.d.ts
+declare namespace Select {
+  type Option<T = unknown> = Select$1.Option<T>;
+  type Value = Select$1.Value;
+  type Key = Select$1.Key;
+}
+/**
+ * Combobox with search, single or multiple selection, keyboard navigation and live announcements.
+ *
+ * Pieces - `Root`, `Control`, `Values`, `Chip`, `Value`, `Input`, `Clear`, `Toggle`, `Layer`, `Menu`, `Option`,
+ * `Empty` - are function components reading `Select.get()`, each styled on its own; pass one as a prop or assign it
+ * in a subclass to replace it. Stock pieces are statics. `Layer` portals the menu to the body, so a dialog or a
+ * scrolling container does not clip it; the menu sits under the control, flips above when only that fits, and
+ * follows scroll and resize.
+ *
+ * @example
+ * <label htmlFor="role">Role</label>
+ * <Select id="role" options={roles} value={this.role} onChange={(role) => (this.role = role)} />
+ */
+declare class Select extends Select$1 {
+  static Root: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Control: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Values: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Chip: ({
+    option
+  }: {
+    option: Select.Option;
+  }) => Component.Node;
+  static Value: ({
+    option
+  }: {
+    option: Select.Option;
+  }) => Component.Node;
+  static Input: () => Component.Node;
+  static Clear: () => Component.Node;
+  static Toggle: () => Component.Node;
+  static Layer: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Menu: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Option: ({
+    option,
+    index
+  }: {
+    option: Select.Option;
+    index: number;
+  }) => Component.Node;
+  static Empty: () => Component.Node;
+  Root: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Control: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Values: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Chip: ({
+    option
+  }: {
+    option: Select.Option;
+  }) => Component.Node;
+  Value: ({
+    option
+  }: {
+    option: Select.Option;
+  }) => Component.Node;
+  Input: () => Component.Node;
+  Clear: () => Component.Node;
+  Toggle: () => Component.Node;
+  Layer: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Menu: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Option: ({
+    option,
+    index
+  }: {
+    option: Select.Option;
+    index: number;
+  }) => Component.Node;
+  Empty: () => Component.Node;
+}
+//#endregion
+export { Select };
+//# sourceMappingURL=select.d.ts.map