@funstack/ui 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/combobox/combobox-list.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { ComboboxListContext, ComboboxPopupContext, useComboboxContext } from "./combobox-context.mjs";
+import { use, useCallback, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/combobox/combobox-list.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/**
+* The listbox: `<div role="listbox" aria-labelledby={label}>` (only while a `Combobox.Label` is
+* mounted), the element the input's `aria-controls` names. Its children are the results for the
+* deferred `query` (the library filters nothing, design 6.1); while they are for an older text it
+* carries `aria-busy="true"` and `data-stale`. Contains only Options and Groups; a `Status`
+* rendered as a Suspense fallback inside it marks the results as loading (`aria-busy="true"`).
+*
+* Owned keys (conventions 1.2): `id`, `role`, `aria-labelledby` (token-merged), `aria-busy`,
+* `data-stale`, `data-empty`.
+*/
+function ComboboxList({ className, style, children, render, ...rest }) {
+	const ctx = useComboboxContext("Combobox.List");
+	const inPopup = use(ComboboxPopupContext);
+	useDevWarning(!inPopup, "Combobox.List: rendered outside a Combobox.Popup. The listbox must be inside the Popup, which is the element the library shows and hides.");
+	const { listRef } = ctx;
+	const warnedName = useRef(false);
+	const ref = useCallback((element) => {
+		listRef.current = element;
+		if (isDev && !warnedName.current) queueMicrotask(() => {
+			if (warnedName.current || !element.isConnected) return;
+			if (element.hasAttribute("aria-labelledby") || element.hasAttribute("aria-label")) return;
+			warnedName.current = true;
+			console.error("Combobox.List: the listbox has no accessible name. Render a Combobox.Label, or give the List an `aria-label` / `aria-labelledby`.");
+		});
+		return () => {
+			if (listRef.current === element) listRef.current = null;
+		};
+	}, [listRef]);
+	const state = {
+		query: ctx.query,
+		stale: ctx.stale,
+		empty: ctx.empty
+	};
+	const libraryProps = {
+		id: ctx.ids.list,
+		role: "listbox",
+		...ctx.hasLabel && { "aria-labelledby": ctx.ids.label },
+		"aria-busy": ctx.stale || ctx.loading ? true : void 0,
+		"data-stale": dataAttr(ctx.stale),
+		"data-empty": dataAttr(ctx.empty)
+	};
+	return useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children: (s) => /* @__PURE__ */ jsx(ComboboxListContext, {
+			value: true,
+			children: resolveStateValue(children, s)
+		}),
+		props: rest,
+		libraryProps,
+		ref
+	});
+}
+ComboboxList.displayName = "ComboboxList";
+//#endregion
+export { ComboboxList };
+
+//# sourceMappingURL=combobox-list.mjs.map

package/dist/combobox/combobox-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-list.mjs","names":[],"sources":["../../src/combobox/combobox-list.tsx"],"sourcesContent":["\"use client\";\nimport { use, useCallback, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport {\n  ComboboxListContext,\n  ComboboxPopupContext,\n  useComboboxContext,\n} from \"./combobox-context.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nexport interface ComboboxListState {\n  /** The deferred text the results are for: render the Options for it. */\n  readonly query: string;\n  /** The results shown are for an older text (`aria-busy`). */\n  readonly stale: boolean;\n  /** No option is mounted and the results are settled. */\n  readonly empty: boolean;\n}\n\nexport interface ComboboxListProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"id\" | \"role\" | \"aria-busy\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ComboboxListState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxListState>;\n  /**\n   * Usually a function of `{ query }` rendering the Options for it, under your own `<Suspense>`\n   * for an async search. The previous results stay visible while the next ones load.\n   */\n  children?: StateValue<ReactNode, ComboboxListState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ComboboxListState>;\n}\n\n/**\n * The listbox: `<div role=\"listbox\" aria-labelledby={label}>` (only while a `Combobox.Label` is\n * mounted), the element the input's `aria-controls` names. Its children are the results for the\n * deferred `query` (the library filters nothing, design 6.1); while they are for an older text it\n * carries `aria-busy=\"true\"` and `data-stale`. Contains only Options and Groups; a `Status`\n * rendered as a Suspense fallback inside it marks the results as loading (`aria-busy=\"true\"`).\n *\n * Owned keys (conventions 1.2): `id`, `role`, `aria-labelledby` (token-merged), `aria-busy`,\n * `data-stale`, `data-empty`.\n */\nexport function ComboboxList({ className, style, children, render, ...rest }: ComboboxListProps) {\n  const ctx = useComboboxContext(\"Combobox.List\");\n  const inPopup = use(ComboboxPopupContext);\n  useDevWarning(\n    !inPopup,\n    \"Combobox.List: rendered outside a Combobox.Popup. The listbox must be inside the Popup, \" +\n      \"which is the element the library shows and hides.\",\n  );\n  const { listRef } = ctx;\n  const warnedName = useRef(false);\n\n  const ref = useCallback(\n    (element: HTMLElement) => {\n      listRef.current = element;\n      if (isDev && !warnedName.current) {\n        // A mounted Label registers in a layout effect whose re-render is flushed before this\n        // microtask, so `aria-labelledby` is in the DOM by then if it ever will be.\n        queueMicrotask(() => {\n          if (warnedName.current || !element.isConnected) return;\n          if (element.hasAttribute(\"aria-labelledby\") || element.hasAttribute(\"aria-label\")) return;\n          warnedName.current = true;\n          console.error(\n            \"Combobox.List: the listbox has no accessible name. Render a Combobox.Label, or give \" +\n              \"the List an `aria-label` / `aria-labelledby`.\",\n          );\n        });\n      }\n      return () => {\n        if (listRef.current === element) listRef.current = null;\n      };\n    },\n    [listRef],\n  );\n\n  const state: ComboboxListState = { query: ctx.query, stale: ctx.stale, empty: ctx.empty };\n\n  const libraryProps: ComponentPropsWithRef<\"div\"> & DataAttributes = {\n    id: ctx.ids.list,\n    role: \"listbox\",\n    ...(ctx.hasLabel && { \"aria-labelledby\": ctx.ids.label }),\n    \"aria-busy\": ctx.stale || ctx.loading ? true : undefined,\n    \"data-stale\": dataAttr(ctx.stale),\n    \"data-empty\": dataAttr(ctx.empty),\n  };\n\n  return useRender<ComponentPropsWithRef<\"div\">, ComboboxListState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children: (s) => (\n      <ComboboxListContext value={true}>{resolveStateValue(children, s)}</ComboboxListContext>\n    ),\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxList.displayName = \"ComboboxList\";\n"],"mappings":";;;;;;;;AAcA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;;;;;AAmCvC,SAAgB,aAAa,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA2B;CAC/F,MAAM,MAAM,mBAAmB,eAAe;CAC9C,MAAM,UAAU,IAAI,oBAAoB;CACxC,cACE,CAAC,SACD,2IAEF;CACA,MAAM,EAAE,YAAY;CACpB,MAAM,aAAa,OAAO,KAAK;CAE/B,MAAM,MAAM,aACT,YAAyB;EACxB,QAAQ,UAAU;EAClB,IAAI,SAAS,CAAC,WAAW,SAGvB,qBAAqB;GACnB,IAAI,WAAW,WAAW,CAAC,QAAQ,aAAa;GAChD,IAAI,QAAQ,aAAa,iBAAiB,KAAK,QAAQ,aAAa,YAAY,GAAG;GACnF,WAAW,UAAU;GACrB,QAAQ,MACN,mIAEF;EACF,CAAC;EAEH,aAAa;GACX,IAAI,QAAQ,YAAY,SAAS,QAAQ,UAAU;EACrD;CACF,GACA,CAAC,OAAO,CACV;CAEA,MAAM,QAA2B;EAAE,OAAO,IAAI;EAAO,OAAO,IAAI;EAAO,OAAO,IAAI;CAAM;CAExF,MAAM,eAA8D;EAClE,IAAI,IAAI,IAAI;EACZ,MAAM;EACN,GAAI,IAAI,YAAY,EAAE,mBAAmB,IAAI,IAAI,MAAM;EACvD,aAAa,IAAI,SAAS,IAAI,UAAU,OAAO,KAAA;EAC/C,cAAc,SAAS,IAAI,KAAK;EAChC,cAAc,SAAS,IAAI,KAAK;CAClC;CAEA,OAAO,UAA2D;EAChE,gBAAgB;EAChB;EACA;EACA;EACA;EACA,WAAW,MACT,oBAAC,qBAAD;GAAqB,OAAO;GAAO,UAAA,kBAAkB,UAAU,CAAC;EAAuB,CAAA;EAEzF,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/combobox/combobox-option.d.mts

@@ -0,0 +1,45 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/combobox/combobox-option.d.ts
+export interface ComboboxOptionState {
+  readonly value: string;
+  /** Optimistic: this option's value is the (optimistic) selection. */
+  readonly selected: boolean;
+  /** `aria-activedescendant` points here (urgent). */
+  readonly active: boolean;
+  /** The selection is pending and this option is its optimistic target. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+export interface ComboboxOptionProps extends Omit<ComponentPropsWithRef<"div">, "id" | "role" | "aria-selected" | "aria-disabled" | "onClick" | "onPointerDown" | "onMouseDown" | "onPointerMove" | "className" | "style" | "children"> {
+  /** The selection this option stands for. Unique within the Combobox; also its id fragment. */
+  value: string;
+  /**
+   * The text written into the input when this option is accepted. Default: the element's
+   * trimmed `textContent` at that moment. Not used for matching: the library filters nothing.
+   */
+  label?: string;
+  /** `aria-disabled`: shown, skipped by the arrow keys, never accepted. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, ComboboxOptionState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxOptionState>;
+  /** Rendered from optimistic state; must not suspend. */
+  children?: StateValue<ReactNode, ComboboxOptionState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ComboboxOptionState>;
+}
+/**
+ * One result: `<div role="option" id aria-selected>`, never focused (virtual focus through the
+ * input's `aria-activedescendant`). A click (or Enter while it is active) accepts it: the input
+ * text becomes its label at once, it shows `data-selected` and `data-pending`, and the listbox
+ * closes when `valueChangeAction` settles. Hovering makes it active.
+ *
+ * Owned keys (conventions 1.2): `id` (derived from `value`), `role`, `aria-selected`,
+ * `aria-disabled`, `onClick`, `onPointerDown`, `onMouseDown`, `onPointerMove`, `data-selected`,
+ * `data-active`, `data-pending`, `data-disabled`.
+ */
+export declare function ComboboxOption({ value, label, disabled, className, style, children, render, ...rest }: ComboboxOptionProps): ReactNode;
+export declare namespace ComboboxOption {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=combobox-option.d.mts.map

package/dist/combobox/combobox-option.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-option.d.mts","names":[],"sources":["../../src/combobox/combobox-option.tsx"],"mappings":";;;iBAgBiB;WACN;;WAEA;;WAEA;;WAEA;WACA;;iBAGM,4BAA4B,KAC3C;;EAcA;;;;;EAKA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;;;wBAepC,iBACd,OACA,OACA,UACA,WACA,OACA,UACA,WACG,QACF,sBAAmB;yBATN"}

package/dist/combobox/combobox-option.mjs

@@ -0,0 +1,88 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { ComboboxListContext, optionId, useComboboxContext } from "./combobox-context.mjs";
+import { use, useCallback, useLayoutEffect, useRef } from "react";
+//#region src/combobox/combobox-option.tsx
+const preventDefault = (event) => event.preventDefault();
+/**
+* One result: `<div role="option" id aria-selected>`, never focused (virtual focus through the
+* input's `aria-activedescendant`). A click (or Enter while it is active) accepts it: the input
+* text becomes its label at once, it shows `data-selected` and `data-pending`, and the listbox
+* closes when `valueChangeAction` settles. Hovering makes it active.
+*
+* Owned keys (conventions 1.2): `id` (derived from `value`), `role`, `aria-selected`,
+* `aria-disabled`, `onClick`, `onPointerDown`, `onMouseDown`, `onPointerMove`, `data-selected`,
+* `data-active`, `data-pending`, `data-disabled`.
+*/
+function ComboboxOption({ value, label, disabled = false, className, style, children, render, ...rest }) {
+	const ctx = useComboboxContext("Combobox.Option");
+	const inList = use(ComboboxListContext);
+	useDevWarning(!inList, "Combobox.Option: rendered outside a Combobox.List. Options belong in the listbox.");
+	const { registerOption } = ctx;
+	const elementRef = useRef(null);
+	const ref = useCallback((element) => {
+		elementRef.current = element;
+		return () => {
+			if (elementRef.current === element) elementRef.current = null;
+		};
+	}, []);
+	useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (element === null) return;
+		return registerOption(value, {
+			element,
+			label,
+			disabled
+		});
+	}, [
+		registerOption,
+		value,
+		label,
+		disabled
+	]);
+	const selected = ctx.value === value;
+	const state = {
+		value,
+		selected,
+		active: ctx.activeValue === value,
+		pending: ctx.valuePending && selected,
+		disabled
+	};
+	const libraryProps = {
+		id: optionId(ctx.ids.optionPrefix, value),
+		role: "option",
+		"aria-selected": selected,
+		"aria-disabled": disabled ? true : void 0,
+		onClick: (event) => {
+			if (disabled) return;
+			ctx.accept(value, event.nativeEvent);
+		},
+		onPointerDown: (event) => preventDefault(event),
+		onMouseDown: (event) => preventDefault(event),
+		onPointerMove: () => {
+			if (!disabled && ctx.activeValue !== value) ctx.setActive(value);
+		},
+		"data-selected": dataAttr(selected),
+		"data-active": dataAttr(state.active),
+		"data-pending": dataAttr(state.pending),
+		"data-disabled": dataAttr(disabled)
+	};
+	return useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps,
+		ref
+	});
+}
+ComboboxOption.displayName = "ComboboxOption";
+//#endregion
+export { ComboboxOption };
+
+//# sourceMappingURL=combobox-option.mjs.map

package/dist/combobox/combobox-option.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-option.mjs","names":[],"sources":["../../src/combobox/combobox-option.tsx"],"sourcesContent":["\"use client\";\nimport { use, useCallback, useLayoutEffect, useRef } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { ComboboxListContext, optionId, useComboboxContext } from \"./combobox-context.js\";\n\nexport interface ComboboxOptionState {\n  readonly value: string;\n  /** Optimistic: this option's value is the (optimistic) selection. */\n  readonly selected: boolean;\n  /** `aria-activedescendant` points here (urgent). */\n  readonly active: boolean;\n  /** The selection is pending and this option is its optimistic target. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface ComboboxOptionProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  | \"id\"\n  | \"role\"\n  | \"aria-selected\"\n  | \"aria-disabled\"\n  | \"onClick\"\n  | \"onPointerDown\"\n  | \"onMouseDown\"\n  | \"onPointerMove\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** The selection this option stands for. Unique within the Combobox; also its id fragment. */\n  value: string;\n  /**\n   * The text written into the input when this option is accepted. Default: the element's\n   * trimmed `textContent` at that moment. Not used for matching: the library filters nothing.\n   */\n  label?: string;\n  /** `aria-disabled`: shown, skipped by the arrow keys, never accepted. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, ComboboxOptionState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxOptionState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, ComboboxOptionState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ComboboxOptionState>;\n}\n\nconst preventDefault = (event: { preventDefault(): void }) => event.preventDefault();\n\n/**\n * One result: `<div role=\"option\" id aria-selected>`, never focused (virtual focus through the\n * input's `aria-activedescendant`). A click (or Enter while it is active) accepts it: the input\n * text becomes its label at once, it shows `data-selected` and `data-pending`, and the listbox\n * closes when `valueChangeAction` settles. Hovering makes it active.\n *\n * Owned keys (conventions 1.2): `id` (derived from `value`), `role`, `aria-selected`,\n * `aria-disabled`, `onClick`, `onPointerDown`, `onMouseDown`, `onPointerMove`, `data-selected`,\n * `data-active`, `data-pending`, `data-disabled`.\n */\nexport function ComboboxOption({\n  value,\n  label,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxOptionProps) {\n  const ctx = useComboboxContext(\"Combobox.Option\");\n  const inList = use(ComboboxListContext);\n  useDevWarning(\n    !inList,\n    \"Combobox.Option: rendered outside a Combobox.List. Options belong in the listbox.\",\n  );\n  const { registerOption } = ctx;\n\n  const elementRef = useRef<HTMLElement | null>(null);\n  const ref = useCallback((element: HTMLElement) => {\n    elementRef.current = element;\n    return () => {\n      if (elementRef.current === element) elementRef.current = null;\n    };\n  }, []);\n\n  // Registration (design 14): the Root's registry drives the arrow keys, `Empty`, the active\n  // option's revalidation, the announcements and the label cache.\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (element === null) return;\n    return registerOption(value, { element, label, disabled });\n  }, [registerOption, value, label, disabled]);\n\n  const selected = ctx.value === value;\n  const state: ComboboxOptionState = {\n    value,\n    selected,\n    active: ctx.activeValue === value,\n    pending: ctx.valuePending && selected,\n    disabled,\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"div\"> & DataAttributes = {\n    id: optionId(ctx.ids.optionPrefix, value),\n    role: \"option\",\n    \"aria-selected\": selected,\n    \"aria-disabled\": disabled ? true : undefined,\n    onClick: (event: MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      ctx.accept(value, event.nativeEvent);\n    },\n    // The input keeps focus (design 7.1), also for an Option rendered outside a Popup.\n    onPointerDown: (event: PointerEvent<HTMLDivElement>) => preventDefault(event),\n    onMouseDown: (event: MouseEvent<HTMLDivElement>) => preventDefault(event),\n    onPointerMove: () => {\n      if (!disabled && ctx.activeValue !== value) ctx.setActive(value);\n    },\n    \"data-selected\": dataAttr(selected),\n    \"data-active\": dataAttr(state.active),\n    \"data-pending\": dataAttr(state.pending),\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"div\">, ComboboxOptionState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nComboboxOption.displayName = \"ComboboxOption\";\n"],"mappings":";;;;;;;AAyDA,MAAM,kBAAkB,UAAsC,MAAM,eAAe;;;;;;;;;;;AAYnF,SAAgB,eAAe,EAC7B,OACA,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,MAAM,mBAAmB,iBAAiB;CAChD,MAAM,SAAS,IAAI,mBAAmB;CACtC,cACE,CAAC,QACD,mFACF;CACA,MAAM,EAAE,mBAAmB;CAE3B,MAAM,aAAa,OAA2B,IAAI;CAClD,MAAM,MAAM,aAAa,YAAyB;EAChD,WAAW,UAAU;EACrB,aAAa;GACX,IAAI,WAAW,YAAY,SAAS,WAAW,UAAU;EAC3D;CACF,GAAG,CAAC,CAAC;CAIL,sBAAsB;EACpB,MAAM,UAAU,WAAW;EAC3B,IAAI,YAAY,MAAM;EACtB,OAAO,eAAe,OAAO;GAAE;GAAS;GAAO;EAAS,CAAC;CAC3D,GAAG;EAAC;EAAgB;EAAO;EAAO;CAAQ,CAAC;CAE3C,MAAM,WAAW,IAAI,UAAU;CAC/B,MAAM,QAA6B;EACjC;EACA;EACA,QAAQ,IAAI,gBAAgB;EAC5B,SAAS,IAAI,gBAAgB;EAC7B;CACF;CAEA,MAAM,eAA8D;EAClE,IAAI,SAAS,IAAI,IAAI,cAAc,KAAK;EACxC,MAAM;EACN,iBAAiB;EACjB,iBAAiB,WAAW,OAAO,KAAA;EACnC,UAAU,UAAsC;GAC9C,IAAI,UAAU;GACd,IAAI,OAAO,OAAO,MAAM,WAAW;EACrC;EAEA,gBAAgB,UAAwC,eAAe,KAAK;EAC5E,cAAc,UAAsC,eAAe,KAAK;EACxE,qBAAqB;GACnB,IAAI,CAAC,YAAY,IAAI,gBAAgB,OAAO,IAAI,UAAU,KAAK;EACjE;EACA,iBAAiB,SAAS,QAAQ;EAClC,eAAe,SAAS,MAAM,MAAM;EACpC,gBAAgB,SAAS,MAAM,OAAO;EACtC,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/combobox/combobox-popup.d.mts

@@ -0,0 +1,49 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode, ViewTransitionClass } from "react";
+//#region src/combobox/combobox-popup.d.ts
+export interface ComboboxPopupState {
+  /** Committed open state. Read `:popover-open` for the DOM truth. */
+  readonly open: boolean;
+  /** The results shown are for an older text. */
+  readonly stale: boolean;
+  /** The deferred text the results are for. */
+  readonly query: string;
+}
+export interface ComboboxPopupProps extends Omit<ComponentPropsWithRef<"div">, "id" | "popover" | "onToggle" | "onBeforeToggle" | "onPointerDown" | "onMouseDown" | "className" | "style" | "children"> {
+  /**
+   * `false` (default): the children are not rendered while the listbox is closed. `true`: they
+   * stay mounted inside `<Activity mode="hidden">`.
+   */
+  keepMounted?: boolean;
+  /**
+   * Forwarded to the `<ViewTransition default>` around the popover element itself. Animates
+   * library-driven opens and closes (typing, the Trigger, an accepted option) in every engine;
+   * dismissals are the browser's (CSS only). **A deferred results render also activates the
+   * boundary** (React: updates from `useDeferredValue` animate), so use a type map with
+   * `default: "none"` unless every result change should cross-fade. Static.
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, ComboboxPopupState>;
+  style?: StateValue<CSSProperties | undefined, ComboboxPopupState>;
+  children?: StateValue<ReactNode, ComboboxPopupState>;
+  /** Must render a `<div>`: a `<dialog>` would pull focus out of the input. */
+  render?: RenderProp<ComponentPropsWithRef<"div">, ComboboxPopupState>;
+}
+/**
+ * The listbox's container: `<div popover="auto">`, opened by the library with
+ * `showPopover({ source: input })` and placed below (or, flipped, above) the input with CSS
+ * Anchor Positioning, at least as wide as the input. Focus never enters it: a press anywhere in
+ * it is `preventDefault()`ed so the input keeps focus (design 7.1). Holds the `List` and, outside
+ * it, `Empty` and `Status`. Style it with `:popover-open`; it emits `data-stale` but no
+ * `data-open`.
+ *
+ * Owned keys (conventions 1.2): `id`, `popover`, `onPointerDown`, `onMouseDown`, `data-stale`.
+ * Inline `position-area`, `position-try-fallbacks` and `min-width` sit under the consumer's
+ * `style` (`style={{ positionTryFallbacks: "none" }}` removes the flip).
+ */
+export declare function ComboboxPopup({ keepMounted, transition, className, style, children, render, ...rest }: ComboboxPopupProps): ReactNode;
+export declare namespace ComboboxPopup {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=combobox-popup.d.mts.map

package/dist/combobox/combobox-popup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-popup.d.mts","names":[],"sources":["../../src/combobox/combobox-popup.tsx"],"mappings":";;;iBAmBiB;;WAEN;;WAEA;;WAEA;;iBAGM,2BAA2B,KAC1C;;;;;EAeA;;;;;;;;EAQA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,8BAA8B;;;;;;;;;;;;;;wBAmBpC,gBACd,aACA,YACA,WACA,OACA,UACA,WACG,QACF,qBAAkB;yBARL"}

package/dist/combobox/combobox-popup.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { mergeRefs } from "../internal/merge-props.mjs";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { usePopoverPopup } from "../internal/use-popover-popup.mjs";
+import { ComboboxPopupContext, useComboboxContext } from "./combobox-context.mjs";
+import { Activity, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/combobox/combobox-popup.tsx
+const isDev = process.env.NODE_ENV !== "production";
+const preventDefault = (event) => event.preventDefault();
+/**
+* The listbox's container: `<div popover="auto">`, opened by the library with
+* `showPopover({ source: input })` and placed below (or, flipped, above) the input with CSS
+* Anchor Positioning, at least as wide as the input. Focus never enters it: a press anywhere in
+* it is `preventDefault()`ed so the input keeps focus (design 7.1). Holds the `List` and, outside
+* it, `Empty` and `Status`. Style it with `:popover-open`; it emits `data-stale` but no
+* `data-open`.
+*
+* Owned keys (conventions 1.2): `id`, `popover`, `onPointerDown`, `onMouseDown`, `data-stale`.
+* Inline `position-area`, `position-try-fallbacks` and `min-width` sit under the consumer's
+* `style` (`style={{ positionTryFallbacks: "none" }}` removes the flip).
+*/
+function ComboboxPopup({ keepMounted, transition, className, style, children, render, ...rest }) {
+	const ctx = useComboboxContext("Combobox.Popup");
+	const { popover } = ctx;
+	const { setElement, visible, wrapContent } = usePopoverPopup(popover, {
+		part: "Combobox.Popup",
+		initialFocus: void 0,
+		resolveInitialFocus: () => null,
+		keepMounted,
+		transition
+	});
+	const devRef = useCallback((element) => {
+		if (isDev && element.tagName !== "DIV") console.error(`Combobox.Popup: rendered a <${element.tagName.toLowerCase()}>. Render a <div>: a <dialog popover> runs the dialog focusing steps and takes focus out of the input.`);
+		return () => {};
+	}, []);
+	const ref = useMemo(() => mergeRefs(setElement, devRef), [setElement, devRef]);
+	const state = {
+		open: popover.committed,
+		stale: ctx.stale,
+		query: ctx.query
+	};
+	const libraryProps = {
+		id: popover.ids.popup,
+		popover: "auto",
+		onPointerDown: (event) => preventDefault(event),
+		onMouseDown: (event) => preventDefault(event),
+		"data-stale": dataAttr(ctx.stale)
+	};
+	const content = (s) => {
+		let node;
+		if (keepMounted === true) node = /* @__PURE__ */ jsx(Activity, {
+			mode: visible ? "visible" : "hidden",
+			children: wrapContent(resolveStateValue(children, s))
+		});
+		else node = visible ? wrapContent(resolveStateValue(children, s)) : null;
+		return /* @__PURE__ */ jsx(ComboboxPopupContext, {
+			value: true,
+			children: node
+		});
+	};
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style: (s) => ({
+			positionArea: "block-end span-inline-end",
+			positionTryFallbacks: "flip-block",
+			minWidth: "anchor-size(width)",
+			...resolveStateValue(style, s)
+		}),
+		children: content,
+		props: rest,
+		libraryProps,
+		ref
+	});
+	return useTransitionBoundary("Combobox.Popup", transition, element);
+}
+ComboboxPopup.displayName = "ComboboxPopup";
+//#endregion
+export { ComboboxPopup };
+
+//# sourceMappingURL=combobox-popup.mjs.map

package/dist/combobox/combobox-popup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-popup.mjs","names":[],"sources":["../../src/combobox/combobox-popup.tsx"],"sourcesContent":["\"use client\";\nimport { Activity, useCallback, useMemo } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { mergeRefs } from \"../internal/merge-props.js\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { usePopoverPopup } from \"../internal/use-popover-popup.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { ComboboxPopupContext, useComboboxContext } from \"./combobox-context.js\";\n\nexport interface ComboboxPopupState {\n  /** Committed open state. Read `:popover-open` for the DOM truth. */\n  readonly open: boolean;\n  /** The results shown are for an older text. */\n  readonly stale: boolean;\n  /** The deferred text the results are for. */\n  readonly query: string;\n}\n\nexport interface ComboboxPopupProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  | \"id\"\n  | \"popover\"\n  | \"onToggle\"\n  | \"onBeforeToggle\"\n  | \"onPointerDown\"\n  | \"onMouseDown\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /**\n   * `false` (default): the children are not rendered while the listbox is closed. `true`: they\n   * stay mounted inside `<Activity mode=\"hidden\">`.\n   */\n  keepMounted?: boolean;\n  /**\n   * Forwarded to the `<ViewTransition default>` around the popover element itself. Animates\n   * library-driven opens and closes (typing, the Trigger, an accepted option) in every engine;\n   * dismissals are the browser's (CSS only). **A deferred results render also activates the\n   * boundary** (React: updates from `useDeferredValue` animate), so use a type map with\n   * `default: \"none\"` unless every result change should cross-fade. Static.\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, ComboboxPopupState>;\n  style?: StateValue<CSSProperties | undefined, ComboboxPopupState>;\n  children?: StateValue<ReactNode, ComboboxPopupState>;\n  /** Must render a `<div>`: a `<dialog>` would pull focus out of the input. */\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ComboboxPopupState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nconst preventDefault = (event: { preventDefault(): void }) => event.preventDefault();\n\n/**\n * The listbox's container: `<div popover=\"auto\">`, opened by the library with\n * `showPopover({ source: input })` and placed below (or, flipped, above) the input with CSS\n * Anchor Positioning, at least as wide as the input. Focus never enters it: a press anywhere in\n * it is `preventDefault()`ed so the input keeps focus (design 7.1). Holds the `List` and, outside\n * it, `Empty` and `Status`. Style it with `:popover-open`; it emits `data-stale` but no\n * `data-open`.\n *\n * Owned keys (conventions 1.2): `id`, `popover`, `onPointerDown`, `onMouseDown`, `data-stale`.\n * Inline `position-area`, `position-try-fallbacks` and `min-width` sit under the consumer's\n * `style` (`style={{ positionTryFallbacks: \"none\" }}` removes the flip).\n */\nexport function ComboboxPopup({\n  keepMounted,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ComboboxPopupProps) {\n  const ctx = useComboboxContext(\"Combobox.Popup\");\n  const { popover } = ctx;\n\n  const { setElement, visible, wrapContent } = usePopoverPopup(popover, {\n    part: \"Combobox.Popup\",\n    initialFocus: undefined,\n    // Focus stays in the input: nothing inside the popup is ever focused.\n    resolveInitialFocus: () => null,\n    keepMounted,\n    transition,\n  });\n\n  const devRef = useCallback((element: HTMLElement) => {\n    if (isDev && element.tagName !== \"DIV\") {\n      console.error(\n        `Combobox.Popup: rendered a <${element.tagName.toLowerCase()}>. Render a <div>: a ` +\n          \"<dialog popover> runs the dialog focusing steps and takes focus out of the input.\",\n      );\n    }\n    return () => {};\n  }, []);\n  const ref = useMemo(() => mergeRefs(setElement, devRef), [setElement, devRef]);\n\n  const state: ComboboxPopupState = {\n    open: popover.committed,\n    stale: ctx.stale,\n    query: ctx.query,\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"div\"> & DataAttributes = {\n    id: popover.ids.popup,\n    popover: \"auto\",\n    onPointerDown: (event: PointerEvent<HTMLDivElement>) => preventDefault(event),\n    onMouseDown: (event: MouseEvent<HTMLDivElement>) => preventDefault(event),\n    \"data-stale\": dataAttr(ctx.stale),\n  };\n\n  const content = (s: ComboboxPopupState): ReactNode => {\n    let node: ReactNode;\n    if (keepMounted === true) {\n      node = (\n        <Activity mode={visible ? \"visible\" : \"hidden\"}>\n          {wrapContent(resolveStateValue(children, s))}\n        </Activity>\n      );\n    } else {\n      node = visible ? wrapContent(resolveStateValue(children, s)) : null;\n    }\n    return <ComboboxPopupContext value={true}>{node}</ComboboxPopupContext>;\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, ComboboxPopupState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    // Logical keywords: right under `direction: rtl` with no JS (design 7.2). The consumer wins.\n    style: (s) => ({\n      positionArea: \"block-end span-inline-end\",\n      positionTryFallbacks: \"flip-block\",\n      minWidth: \"anchor-size(width)\",\n      ...resolveStateValue(style, s),\n    }),\n    children: content,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n\n  return useTransitionBoundary(\"Combobox.Popup\", transition, element);\n}\n\nComboboxPopup.displayName = \"ComboboxPopup\";\n"],"mappings":";;;;;;;;;;AA4DA,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,MAAM,kBAAkB,UAAsC,MAAM,eAAe;;;;;;;;;;;;;AAcnF,SAAgB,cAAc,EAC5B,aACA,YACA,WACA,OACA,UACA,QACA,GAAG,QACkB;CACrB,MAAM,MAAM,mBAAmB,gBAAgB;CAC/C,MAAM,EAAE,YAAY;CAEpB,MAAM,EAAE,YAAY,SAAS,gBAAgB,gBAAgB,SAAS;EACpE,MAAM;EACN,cAAc,KAAA;EAEd,2BAA2B;EAC3B;EACA;CACF,CAAC;CAED,MAAM,SAAS,aAAa,YAAyB;EACnD,IAAI,SAAS,QAAQ,YAAY,OAC/B,QAAQ,MACN,+BAA+B,QAAQ,QAAQ,YAAY,EAAE,uGAE/D;EAEF,aAAa,CAAC;CAChB,GAAG,CAAC,CAAC;CACL,MAAM,MAAM,cAAc,UAAU,YAAY,MAAM,GAAG,CAAC,YAAY,MAAM,CAAC;CAE7E,MAAM,QAA4B;EAChC,MAAM,QAAQ;EACd,OAAO,IAAI;EACX,OAAO,IAAI;CACb;CAEA,MAAM,eAA8D;EAClE,IAAI,QAAQ,IAAI;EAChB,SAAS;EACT,gBAAgB,UAAwC,eAAe,KAAK;EAC5E,cAAc,UAAsC,eAAe,KAAK;EACxE,cAAc,SAAS,IAAI,KAAK;CAClC;CAEA,MAAM,WAAW,MAAqC;EACpD,IAAI;EACJ,IAAI,gBAAgB,MAClB,OACE,oBAAC,UAAD;GAAU,MAAM,UAAU,YAAY;GACnC,UAAA,YAAY,kBAAkB,UAAU,CAAC,CAAC;EACnC,CAAA;OAGZ,OAAO,UAAU,YAAY,kBAAkB,UAAU,CAAC,CAAC,IAAI;EAEjE,OAAO,oBAAC,sBAAD;GAAsB,OAAO;GAAO,UAAA;EAA2B,CAAA;CACxE;CAEA,MAAM,UAAU,UAA4D;EAC1E,gBAAgB;EAChB;EACA;EACA;EAEA,QAAQ,OAAO;GACb,cAAc;GACd,sBAAsB;GACtB,UAAU;GACV,GAAG,kBAAkB,OAAO,CAAC;EAC/B;EACA,UAAU;EACV,OAAO;EACP;EACA;CACF,CAAC;CAED,OAAO,sBAAsB,kBAAkB,YAAY,OAAO;AACpE;AAEA,cAAc,cAAc"}

package/dist/combobox/combobox-root.d.mts

@@ -0,0 +1,135 @@
+import { ActionDetails, ChangeAction, ChangeReason, StateValue, UrgentChangeAction } from "../internal/types.mjs";
+import { ReactNode } from "react";
+//#region src/combobox/combobox-root.d.ts
+/** Details passed as the second argument of `Combobox.Root`'s `valueChangeAction`. */
+export interface ComboboxValueChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user accepted an option (Enter, click; `details.event` is the `keydown` or
+   * `click`), committed free text with `allowCustomValue` (Enter: the `keydown`; focus leaving:
+   * the `focusout`), or pressed Clear (`click`).
+   * `"platform"`: a form reset (`details.event` is the `reset` event).
+   */
+  readonly reason: ChangeReason;
+  /** `true` when `next` is free text committed under `allowCustomValue`, not an option's value. */
+  readonly custom: boolean;
+}
+/** Details passed as the second argument of `Combobox.Root`'s `inputValueChangeAction`. */
+export interface ComboboxInputValueChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: typing (the `input` event), an accepted option's label, Clear.
+   * `"dismiss"`: a revert: focus left with unmatched text, or the selection rolled back.
+   * `"platform"`: form reset (the `reset` event), or text found in the input at mount
+   * (`undefined`).
+   */
+  readonly reason: ChangeReason;
+}
+/** Details passed as the second argument of `Combobox.Root`'s `openChangeAction`. */
+export interface ComboboxOpenChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: typing, ArrowDown / ArrowUp / Alt+ArrowDown, the Trigger, a click on the input
+   * with `openOnClick`, an accepted option (the close after it), a foreign `showPopover()`.
+   * `"dismiss"`: Escape, light dismiss, focus leaving the combobox, another top-layer element.
+   * `"platform"`: the popup was found open on mount (only script can cause it).
+   */
+  readonly reason: ChangeReason;
+}
+export interface ComboboxRootState {
+  /** Optimistic selection. Content rendered from it must not suspend. */
+  readonly value: string | null;
+  /** The text in the input (urgent). */
+  readonly inputValue: string;
+  /** The deferred text the mounted results are for. */
+  readonly query: string;
+  /** `inputValue !== query`: the results shown are for an older text. */
+  readonly stale: boolean;
+  /** The value of the option `aria-activedescendant` points at, or `null`. */
+  readonly activeValue: string | null;
+  /** Optimistic open state. */
+  readonly open: boolean;
+  /** A `valueChangeAction` or `openChangeAction` dispatched through this Combobox is in flight. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+export interface ComboboxRootProps {
+  /** Controlled selection. `null`: nothing selected. `undefined`: uncontrolled. */
+  value?: string | null;
+  /** Initial selection in uncontrolled mode. Default `null`. */
+  defaultValue?: string | null;
+  /**
+   * Runs inside the Root's transition when the user accepts an option, commits free text
+   * (`allowCustomValue`), presses Clear, or the form resets. Awaited; the listbox closes in the
+   * commit that ends it; a rejection rolls the input text and `data-selected` back and leaves
+   * the listbox open. May be a Server Function. A `setState` after your own `await` needs
+   * `startTransition`.
+   */
+  valueChangeAction?: ChangeAction<string | null, ComboboxValueChangeDetails>;
+  /** Controlled input text. `undefined`: uncontrolled. */
+  inputValue?: string;
+  /**
+   * Initial input text. Default `""`. Pass the selected value's label when `defaultValue` is
+   * set: the library never derives the text from the value.
+   */
+  defaultInputValue?: string;
+  /**
+   * The urgent lane: called synchronously, outside any Transition, on every change of the text
+   * (typing, and the library's own writes: an accepted option's label, a revert, Clear, a form
+   * reset, text typed before hydration). Not awaited; nothing is pending for it. A controlled
+   * parent updates its state in the body (an urgent update, which is what a controlled text
+   * input needs).
+   */
+  inputValueChangeAction?: UrgentChangeAction<string, ComboboxInputValueChangeDetails>;
+  /** Controlled open state. `undefined`: uncontrolled. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. Opens after hydration. */
+  defaultOpen?: boolean;
+  /**
+   * Awaited for opens and for the close after an accepted option (or the Trigger); a
+   * notification for dismissals (Escape, a click outside, focus leaving).
+   */
+  openChangeAction?: ChangeAction<boolean, ComboboxOpenChangeDetails>;
+  /**
+   * Free text is a value: Enter with no active option, or focus leaving with text that is not
+   * the selected option's label, dispatches the text with `details.custom: true` (empty text
+   * dispatches `null`). Default `false`: unmatched text reverts to the selection's label when
+   * focus leaves.
+   */
+  allowCustomValue?: boolean;
+  /**
+   * Make the first enabled option active when the results for an open or an edit settle (APG
+   * "automatic selection"). Stale results are never highlighted. Default `false`.
+   */
+  autoHighlight?: boolean;
+  /** Open the listbox on a pointer click in the input (not on focus). Default `false`. */
+  openOnClick?: boolean;
+  /** Wrap from the last option to the first and back with the arrow keys. Default `false`. */
+  loop?: boolean;
+  /**
+   * The message `ariaNotify()` announces on the List when the results settle, from the number
+   * of mounted options. Default (English): `"No results"`, `"1 result"`, `"N results"`. Override
+   * for localisation or a richer message; return `null` to announce nothing. Ignored where
+   * `ariaNotify` is missing.
+   */
+  announce?: (count: number, state: ComboboxRootState) => string | null;
+  /** Form participation through a hidden input with this name (value `""` for `null`). */
+  name?: string;
+  /** The `form` attribute of the hidden input. */
+  form?: string;
+  /** Disables the Input, Trigger and Clear; nothing dispatches for user interaction. */
+  disabled?: boolean;
+  children?: StateValue<ReactNode, ComboboxRootState>;
+}
+/**
+ * Owns the two states of a combobox (design/components/combobox.md 2): the selection (`value`,
+ * a transition with `useOptimistic`, like every other value) and the text (`inputValue`, the
+ * library's **urgent** lane: `inputValueChangeAction` is called synchronously, outside any
+ * transition). The results render from `useDeferredValue(inputValue)`; the active option is
+ * urgent virtual focus (`aria-activedescendant`); the listbox is a `popover="auto"` opened by the
+ * library with the input as `source`. Renders no DOM, except one `<input type="hidden">` when
+ * `name` is given.
+ */
+export declare function ComboboxRoot(props: ComboboxRootProps): import("react").JSX.Element;
+export declare namespace ComboboxRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=combobox-root.d.mts.map

package/dist/combobox/combobox-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-root.d.mts","names":[],"sources":["../../src/combobox/combobox-root.tsx"],"mappings":";;;;iBAgCiB,mCAAmC;;;;;;;WAOzC,QAAQ;;WAER;;;iBAIM,wCAAwC;;;;;;;WAO9C,QAAQ;;;iBAIF,kCAAkC;;;;;;;WAOxC,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;WACA;;iBAGM;;EAEf;;EAEA;;;;;;;;EAQA,oBAAoB,4BAA4B;;EAGhD;;;;;EAKA;;;;;;;;EAQA,yBAAyB,2BAA2B;;EAGpD;;EAEA;;;;;EAKA,mBAAmB,sBAAsB;;;;;;;EAQzC;;;;;EAKA;;EAEA;;EAEA;;;;;;;EAOA,YAAY,eAAe,OAAO;;EAGlC;;EAEA;;EAEA;EACA,WAAW,WAAW,WAAW;;;;;;;;;;;wBA+DnB,aAAa,OAAO,oCAAiB,IAAA;yBAArC"}