@stridge/noctis 1.0.0-beta.0

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,328 @@
+import { Combobox as Combobox$1 } from "../../primitives/combobox/combobox.js";
+import { ComboboxSize, chipProps, chipsInputProps, emptyProps, groupLabelProps, iconProps, inputProps, itemProps, listProps, separatorProps, statusProps } from "./combobox.props.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+
+//#region src/components/combobox/combobox.d.ts
+/**
+ * Owns the combobox state and filtering, and shares the control `size` with the field. Wraps Base
+ * UI's Combobox (which auto-injects the active locale so the filter collator matches the reader).
+ * Renders no DOM element — compose an `Input`, a `Content` of `Item`s, and (for multiple selection)
+ * the `Chips`/`Chip` parts inside it.
+ */
+declare function ComboboxRoot<Value, Multiple extends boolean | undefined = false>({
+  size,
+  loading,
+  children,
+  ...props
+}: Combobox.Root.Props<Value, Multiple>): ReactElement;
+/**
+ * The text field. Follows the field family look (filled surface, field border, a calm ring-less focus
+ * that shifts only the border) and reads the control `size` from the root unless overridden. Pass
+ * `invalid` for the danger border. Type to filter the list; the popup opens as you type.
+ */
+declare function ComboboxInput({
+  size,
+  invalid,
+  className,
+  ...props
+}: Combobox.Input.Props): ReactElement;
+/**
+ * The field shell that lays out the `Input` beside its `Trigger`/`Clear` affordances. Wrap the input
+ * and the buttons in it so the chevron/clear pin to the field's inline-end.
+ */
+declare function ComboboxInputGroup({
+  className,
+  ...props
+}: Combobox.InputGroup.Props): ReactElement;
+/**
+ * The button that opens the popup, sitting at the field's inline-end with a chevron that rotates
+ * while open. Decorative glyph; give it an `aria-label` so screen-reader users can open the list.
+ */
+declare function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: Combobox.Trigger.Props): ReactElement;
+/**
+ * The button that clears the current value, shown only while the field holds one. Give it an
+ * `aria-label`; it renders a small dismiss glyph by default.
+ */
+declare function ComboboxClear({
+  className,
+  children,
+  ...props
+}: Combobox.Clear.Props): ReactElement;
+/**
+ * The floating listbox surface — portaled, elevated, and animated — holding the options, groups, and
+ * the empty state. Opens below the field, aligned to its start, capped at the available viewport
+ * height so the list scrolls and keeps the keyboard highlight in view.
+ */
+declare function ComboboxContent({
+  sideOffset,
+  align,
+  collisionPadding,
+  className,
+  style,
+  children,
+  ...props
+}: Combobox.Content.Props): ReactElement;
+/** The scrollable listbox holding the option rows. Accepts an item-render child (`{(item) => …}`). */
+declare function ComboboxList({
+  className,
+  ...props
+}: Combobox.List.Props): ReactElement;
+/**
+ * An option row. The leading column holds a check that appears once selected (mirroring the Menu item
+ * idiom); the row lights up neutrally — not the accent — while highlighted by pointer or keyboard.
+ */
+declare function ComboboxItem({
+  className,
+  children,
+  ...props
+}: Combobox.Item.Props): ReactElement;
+/** The centred message shown when the filter matches nothing. Holds the no-results copy. */
+declare function ComboboxEmpty({
+  className,
+  ...props
+}: Combobox.Empty.Props): ReactElement;
+/** A labelled section of related options. Put a `GroupLabel` inside to name it for screen readers. */
+declare function ComboboxGroup({
+  className,
+  ...props
+}: Combobox.Group.Props): ReactElement;
+/** Maps a group's (or the list's) filtered items to rows via a render-prop child. Renders no element. */
+declare function ComboboxCollection(props: Combobox.Collection.Props): ReactElement;
+/** The group's muted, non-interactive heading — announced as the group's accessible name. */
+declare function ComboboxGroupLabel({
+  className,
+  ...props
+}: Combobox.GroupLabel.Props): ReactElement;
+/**
+ * Renders the current value(s); pass a render function to map over the selected values (the chip
+ * pattern for multiple selection). Renders no element of its own.
+ */
+declare function ComboboxValue(props: Combobox.Value.Props): ReactElement;
+/** The wrapper that lays out the selected-value chips inside the field for multiple selection. */
+declare function ComboboxChips({
+  className,
+  ...props
+}: Combobox.Chips.Props): ReactElement;
+/** One selected value, rendered as a pill with a trailing remove control, for multiple selection. */
+declare function ComboboxChip({
+  className,
+  children,
+  ...props
+}: Combobox.Chip.Props): ReactElement;
+/** The trailing remove control inside a chip. Give it an `aria-label`; it renders a dismiss glyph. */
+declare function ComboboxChipRemove({
+  className,
+  children,
+  ...props
+}: Combobox.ChipRemove.Props): ReactElement;
+/**
+ * The multi-select field shell: a bordered, filled box that wraps the `Chips` and the `Input` so they
+ * read as one field, with a single accent focus ring on `:focus-within`. Pass `invalid` for the danger
+ * border. Built on Base UI's `InputGroup`, so it is the popup's anchor — the list opens below the whole
+ * field, never over the chips — and a click anywhere in it focuses the input.
+ */
+declare function ComboboxChipsInput({
+  invalid,
+  className,
+  children,
+  ...props
+}: Combobox.ChipsInput.Props): ReactElement;
+/**
+ * A polite live region for async filtering — render it inside `Content` (kept mounted) and put the
+ * loading / results-count / no-results copy inside; Base UI announces content changes politely.
+ */
+declare function ComboboxStatus({
+  className,
+  ...props
+}: Combobox.Status.Props): ReactElement;
+/**
+ * A leading decorative icon in the field (a search magnifier by default), reserving a leading column.
+ * Muted and signal-free; Base UI marks it `aria-hidden`. Render it as the first child of the
+ * `InputGroup`, before the `Input`.
+ */
+declare function ComboboxIcon({
+  className,
+  children,
+  ...props
+}: Combobox.Icon.Props): ReactElement;
+/** A thin divider between option groups inside the list. Decorative structure, never accent. */
+declare function ComboboxSeparator({
+  className,
+  ...props
+}: Combobox.Separator.Props): ReactElement;
+/**
+ * A filterable select: a text input that filters a floating list of options, for single or multiple
+ * selection. Built on Base UI's Combobox for type-to-filter, keyboard navigation (arrows, Home/End,
+ * `Enter` to select, `Escape` to dismiss), focus management, and locale-aware filtering.
+ *
+ * Compose from parts: `Combobox.Root` owns the state, `Combobox.Input` is the field (with optional
+ * `Trigger`/`Clear` affordances), and `Combobox.Content` holds the rows — `Item`s, `Group`s with a
+ * `GroupLabel`, and an `Empty` no-results message. For multiple selection, render `Chips`/`Chip`
+ * inside the field. The popup surface paint is owned by the composed `<Surface elevation="menu">`.
+ *
+ * Styling is precompiled in `combobox.css`, keyed off each part's prefixed `data-slot`. Several parts
+ * also carry the D12 `props()` escape hatch via `Object.assign` (e.g. `Combobox.Item.props({
+ * selected })`), returning a spreadable `{ "data-slot": "noctis-combobox-<part>", ...dataAttrs }` bag.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `Combobox` namespace — e.g. `Combobox.Item.Props`.
+ */
+declare const Combobox: {
+  Root: typeof ComboboxRoot;
+  Input: typeof ComboboxInput & {
+    props: typeof inputProps;
+  };
+  InputGroup: typeof ComboboxInputGroup;
+  ChipsInput: typeof ComboboxChipsInput & {
+    props: typeof chipsInputProps;
+  };
+  Icon: typeof ComboboxIcon & {
+    props: typeof iconProps;
+  };
+  Trigger: typeof ComboboxTrigger;
+  Clear: typeof ComboboxClear;
+  Content: typeof ComboboxContent;
+  Status: typeof ComboboxStatus & {
+    props: typeof statusProps;
+  };
+  List: typeof ComboboxList & {
+    props: typeof listProps;
+  };
+  Item: typeof ComboboxItem & {
+    props: typeof itemProps;
+  };
+  Empty: typeof ComboboxEmpty & {
+    props: typeof emptyProps;
+  };
+  Group: typeof ComboboxGroup;
+  Separator: typeof ComboboxSeparator & {
+    props: typeof separatorProps;
+  };
+  Collection: typeof ComboboxCollection;
+  GroupLabel: typeof ComboboxGroupLabel & {
+    props: typeof groupLabelProps;
+  };
+  Value: typeof ComboboxValue;
+  Chips: typeof ComboboxChips;
+  Chip: typeof ComboboxChip & {
+    props: typeof chipProps;
+  };
+  ChipRemove: typeof ComboboxChipRemove;
+};
+/**
+ * Per-part prop and state types, mirroring Base UI's `Component.Part.Props` convention. Types-only —
+ * it emits no runtime code and merges with the `Combobox` object above, so `Combobox.Item` is the
+ * component value while `Combobox.Item.Props` is its prop type.
+ */
+declare namespace Combobox {
+  /** The control sizes the field offers. */
+  type Size = ComboboxSize;
+  namespace Root {
+    type Props<Value, Multiple extends boolean | undefined = false> = Combobox$1.Root.Props<Value, Multiple> & {
+      /**
+       * Control height and type, shared with the field.
+       * @default "md"
+       */
+      size?: ComboboxSize;
+      /**
+       * Whether the combobox is loading async results — shows a spinner in place of the chevron and
+       * names it for assistive tech. Compose a `Status` for a richer live announcement.
+       * @default false
+       */
+      loading?: boolean;
+    };
+  }
+  namespace Input {
+    type Props = Omit<Combobox$1.InputProps, "size"> & {
+      /**
+       * Control height and type, overriding the root's `size` for this field.
+       * @default the root's size
+       */
+      size?: ComboboxSize;
+      /**
+       * Whether the field is invalid — shifts the border to the danger role. Usually flows from a
+       * `Field.Root` automatically; set it explicitly as an additive override.
+       */
+      invalid?: boolean;
+    };
+  }
+  namespace ChipsInput {
+    type Props = ComponentProps<"div"> & {
+      /** Whether the field is invalid — shifts the shell's border to the danger role. */invalid?: boolean; /** The `Chips` and `Input` that compose the multi-select field. */
+      children?: ReactNode;
+    };
+  }
+  namespace Status {
+    type Props = Combobox$1.StatusProps;
+  }
+  namespace Icon {
+    type Props = Combobox$1.IconProps;
+  }
+  namespace Separator {
+    type Props = Combobox$1.SeparatorProps;
+  }
+  namespace InputGroup {
+    type Props = ComponentProps<typeof Combobox$1.InputGroup>;
+  }
+  namespace Trigger {
+    type Props = Combobox$1.TriggerProps;
+  }
+  namespace Clear {
+    type Props = ComponentProps<typeof Combobox$1.Clear>;
+  }
+  namespace Content {
+    type Props = Combobox$1.PopupProps & {
+      /**
+       * Gap from the field, in px.
+       * @default 6
+       */
+      sideOffset?: Combobox$1.PositionerProps["sideOffset"];
+      /**
+       * Alignment along the field's edge.
+       * @default "start"
+       */
+      align?: Combobox$1.PositionerProps["align"];
+      /**
+       * Minimum space kept from the viewport edge when avoiding collisions, in px.
+       * @default 8
+       */
+      collisionPadding?: Combobox$1.PositionerProps["collisionPadding"];
+    };
+  }
+  namespace List {
+    type Props = Combobox$1.ListProps;
+  }
+  namespace Item {
+    type Props = Combobox$1.ItemProps;
+  }
+  namespace Empty {
+    type Props = Combobox$1.EmptyProps;
+  }
+  namespace Group {
+    type Props = ComponentProps<typeof Combobox$1.Group>;
+  }
+  namespace Collection {
+    type Props = ComponentProps<typeof Combobox$1.Collection>;
+  }
+  namespace GroupLabel {
+    type Props = ComponentProps<typeof Combobox$1.GroupLabel>;
+  }
+  namespace Value {
+    type Props = ComponentProps<typeof Combobox$1.Value>;
+  }
+  namespace Chips {
+    type Props = ComponentProps<typeof Combobox$1.Chips>;
+  }
+  namespace Chip {
+    type Props = ComponentProps<typeof Combobox$1.Chip>;
+  }
+  namespace ChipRemove {
+    type Props = ComponentProps<typeof Combobox$1.ChipRemove>;
+  }
+}
+//#endregion
+export { Combobox };

package/dist/components/combobox/combobox.js

@@ -0,0 +1,315 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { CheckIcon, ChevronDownIcon, SearchIcon, SpinnerIcon, XIcon } from "../../icons/glyphs.js";
+import { useInjectedLabels } from "../../core/use-injected-labels.js";
+import { VisuallyHidden } from "../../core/visually-hidden/visually-hidden.js";
+import { Surface } from "../surface/surface.js";
+import { Combobox as Combobox$1 } from "../../primitives/combobox/combobox.js";
+import { ComboboxProvider, useComboboxContext } from "./combobox.context.js";
+import { COMBOBOX_SLOTS } from "./combobox.slots.js";
+import { chipProps, chipsInputProps, emptyProps, groupLabelProps, iconProps, inputProps, itemProps, listProps, separatorProps, statusProps } from "./combobox.props.js";
+import clsx$1 from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/combobox/combobox.tsx
+const LOADING_LABEL_DEFAULTS = { loadingLabel: "Loading…" };
+const LOADING_LABEL_KEYS = { loadingLabel: "combobox.loadingLabel" };
+/**
+* Owns the combobox state and filtering, and shares the control `size` with the field. Wraps Base
+* UI's Combobox (which auto-injects the active locale so the filter collator matches the reader).
+* Renders no DOM element — compose an `Input`, a `Content` of `Item`s, and (for multiple selection)
+* the `Chips`/`Chip` parts inside it.
+*/
+function ComboboxRoot({ size = "md", loading = false, children, ...props }) {
+	return /* @__PURE__ */ jsx(ComboboxProvider, {
+		value: {
+			size,
+			loading
+		},
+		children: /* @__PURE__ */ jsx(Combobox$1.Root, {
+			...props,
+			children
+		})
+	});
+}
+/**
+* The text field. Follows the field family look (filled surface, field border, a calm ring-less focus
+* that shifts only the border) and reads the control `size` from the root unless overridden. Pass
+* `invalid` for the danger border. Type to filter the list; the popup opens as you type.
+*/
+function ComboboxInput({ size, invalid, className, ...props }) {
+	const ctx = useComboboxContext("Input");
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		...inputProps({
+			size: size ?? ctx.size,
+			invalid
+		}),
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* The field shell that lays out the `Input` beside its `Trigger`/`Clear` affordances. Wrap the input
+* and the buttons in it so the chevron/clear pin to the field's inline-end.
+*/
+function ComboboxInputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
+		"data-slot": COMBOBOX_SLOTS.inputGroup,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* The button that opens the popup, sitting at the field's inline-end with a chevron that rotates
+* while open. Decorative glyph; give it an `aria-label` so screen-reader users can open the list.
+*/
+function ComboboxTrigger({ className, children, ...props }) {
+	const { loading } = useComboboxContext("Trigger");
+	const labels = useInjectedLabels(LOADING_LABEL_DEFAULTS, LOADING_LABEL_KEYS, void 0);
+	return /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+		"data-slot": COMBOBOX_SLOTS.trigger,
+		className: clsx$1(className),
+		...props,
+		children: children ?? (loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": COMBOBOX_SLOTS.spinner,
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: SpinnerIcon,
+				size: "sm"
+			})
+		}), /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.loadingLabel })] }) : /* @__PURE__ */ jsx(Icon, {
+			icon: ChevronDownIcon,
+			size: "sm",
+			"aria-hidden": true
+		}))
+	});
+}
+/**
+* The button that clears the current value, shown only while the field holds one. Give it an
+* `aria-label`; it renders a small dismiss glyph by default.
+*/
+function ComboboxClear({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		"data-slot": COMBOBOX_SLOTS.clear,
+		className: clsx$1(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: XIcon,
+			size: "sm",
+			"aria-hidden": true
+		})
+	});
+}
+/**
+* The floating listbox surface — portaled, elevated, and animated — holding the options, groups, and
+* the empty state. Opens below the field, aligned to its start, capped at the available viewport
+* height so the list scrolls and keeps the keyboard highlight in view.
+*/
+function ComboboxContent({ sideOffset = 6, align = "start", collisionPadding = 8, className, style, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+		"data-slot": COMBOBOX_SLOTS.positioner,
+		sideOffset,
+		align,
+		collisionPadding,
+		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+			"data-slot": COMBOBOX_SLOTS.content,
+			render: /* @__PURE__ */ jsx(Surface, {
+				elevation: "menu",
+				bordered: true,
+				shadow: "popover"
+			}),
+			style: {
+				transformOrigin: "var(--transform-origin)",
+				maxHeight: "var(--available-height)",
+				minInlineSize: "var(--anchor-width)",
+				...style
+			},
+			className: clsx$1(className),
+			...props,
+			children
+		})
+	}) });
+}
+/** The scrollable listbox holding the option rows. Accepts an item-render child (`{(item) => …}`). */
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		...listProps(),
+		"data-custom-scrollbar": true,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* An option row. The leading column holds a check that appears once selected (mirroring the Menu item
+* idiom); the row lights up neutrally — not the accent — while highlighted by pointer or keyboard.
+*/
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
+		"data-slot": COMBOBOX_SLOTS.item,
+		className: clsx$1(className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+			keepMounted: true,
+			"data-slot": COMBOBOX_SLOTS.itemIndicator,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: CheckIcon,
+				size: "sm"
+			})
+		}), children]
+	});
+}
+/** The centred message shown when the filter matches nothing. Holds the no-results copy. */
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		...emptyProps(),
+		className: clsx$1(className),
+		...props
+	});
+}
+/** A labelled section of related options. Put a `GroupLabel` inside to name it for screen readers. */
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		"data-slot": COMBOBOX_SLOTS.group,
+		className: clsx$1(className),
+		...props
+	});
+}
+/** Maps a group's (or the list's) filtered items to rows via a render-prop child. Renders no element. */
+function ComboboxCollection(props) {
+	return /* @__PURE__ */ jsx(Combobox$1.Collection, { ...props });
+}
+/** The group's muted, non-interactive heading — announced as the group's accessible name. */
+function ComboboxGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		...groupLabelProps(),
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* Renders the current value(s); pass a render function to map over the selected values (the chip
+* pattern for multiple selection). Renders no element of its own.
+*/
+function ComboboxValue(props) {
+	return /* @__PURE__ */ jsx(Combobox$1.Value, { ...props });
+}
+/** The wrapper that lays out the selected-value chips inside the field for multiple selection. */
+function ComboboxChips({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
+		"data-slot": COMBOBOX_SLOTS.chips,
+		className: clsx$1(className),
+		...props
+	});
+}
+/** One selected value, rendered as a pill with a trailing remove control, for multiple selection. */
+function ComboboxChip({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Chip, {
+		...chipProps(),
+		className: clsx$1(className),
+		...props,
+		children
+	});
+}
+/** The trailing remove control inside a chip. Give it an `aria-label`; it renders a dismiss glyph. */
+function ComboboxChipRemove({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+		"data-slot": COMBOBOX_SLOTS.chipRemove,
+		className: clsx$1(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: XIcon,
+			size: "sm",
+			"aria-hidden": true
+		})
+	});
+}
+/**
+* The multi-select field shell: a bordered, filled box that wraps the `Chips` and the `Input` so they
+* read as one field, with a single accent focus ring on `:focus-within`. Pass `invalid` for the danger
+* border. Built on Base UI's `InputGroup`, so it is the popup's anchor — the list opens below the whole
+* field, never over the chips — and a click anywhere in it focuses the input.
+*/
+function ComboboxChipsInput({ invalid, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
+		...chipsInputProps({ invalid }),
+		className: clsx$1(className),
+		...props,
+		children
+	});
+}
+/**
+* A polite live region for async filtering — render it inside `Content` (kept mounted) and put the
+* loading / results-count / no-results copy inside; Base UI announces content changes politely.
+*/
+function ComboboxStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Status, {
+		...statusProps(),
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* A leading decorative icon in the field (a search magnifier by default), reserving a leading column.
+* Muted and signal-free; Base UI marks it `aria-hidden`. Render it as the first child of the
+* `InputGroup`, before the `Input`.
+*/
+function ComboboxIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Icon, {
+		...iconProps(),
+		className: clsx$1(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: SearchIcon,
+			size: "sm",
+			"aria-hidden": true
+		})
+	});
+}
+/** A thin divider between option groups inside the list. Decorative structure, never accent. */
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
+		...separatorProps(),
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* A filterable select: a text input that filters a floating list of options, for single or multiple
+* selection. Built on Base UI's Combobox for type-to-filter, keyboard navigation (arrows, Home/End,
+* `Enter` to select, `Escape` to dismiss), focus management, and locale-aware filtering.
+*
+* Compose from parts: `Combobox.Root` owns the state, `Combobox.Input` is the field (with optional
+* `Trigger`/`Clear` affordances), and `Combobox.Content` holds the rows — `Item`s, `Group`s with a
+* `GroupLabel`, and an `Empty` no-results message. For multiple selection, render `Chips`/`Chip`
+* inside the field. The popup surface paint is owned by the composed `<Surface elevation="menu">`.
+*
+* Styling is precompiled in `combobox.css`, keyed off each part's prefixed `data-slot`. Several parts
+* also carry the D12 `props()` escape hatch via `Object.assign` (e.g. `Combobox.Item.props({
+* selected })`), returning a spreadable `{ "data-slot": "noctis-combobox-<part>", ...dataAttrs }` bag.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `Combobox` namespace — e.g. `Combobox.Item.Props`.
+*/
+const Combobox = {
+	Root: ComboboxRoot,
+	Input: Object.assign(ComboboxInput, { props: inputProps }),
+	InputGroup: ComboboxInputGroup,
+	ChipsInput: Object.assign(ComboboxChipsInput, { props: chipsInputProps }),
+	Icon: Object.assign(ComboboxIcon, { props: iconProps }),
+	Trigger: ComboboxTrigger,
+	Clear: ComboboxClear,
+	Content: ComboboxContent,
+	Status: Object.assign(ComboboxStatus, { props: statusProps }),
+	List: Object.assign(ComboboxList, { props: listProps }),
+	Item: Object.assign(ComboboxItem, { props: itemProps }),
+	Empty: Object.assign(ComboboxEmpty, { props: emptyProps }),
+	Group: ComboboxGroup,
+	Separator: Object.assign(ComboboxSeparator, { props: separatorProps }),
+	Collection: ComboboxCollection,
+	GroupLabel: Object.assign(ComboboxGroupLabel, { props: groupLabelProps }),
+	Value: ComboboxValue,
+	Chips: ComboboxChips,
+	Chip: Object.assign(ComboboxChip, { props: chipProps }),
+	ChipRemove: ComboboxChipRemove
+};
+//#endregion
+export { Combobox };