@imfusion/web-ui 0.11.1-dev.16.g726f3414 → 0.11.1-dev.22.gb4cb1d84

package/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ### Added
 
+- `Combobox` and `Autocomplete` are new inputs adapted from Base UI: a text field with a filterable list, for choosing one or
+  several options (`Combobox`) or suggesting options while keeping free text (`Autocomplete`). Multi-select lists show a
+  checkbox on every row. [Combobox](src/components/combobox/combobox.mdx),
+  [Autocomplete](src/components/autocomplete/autocomplete.mdx) ([WEBSDK-245](https://imfusion.atlassian.net/browse/WEBSDK-245))
+  — Nikolaus Brunner <brunner@imfusion.com>
 - `minWidth` and the `BreakpointName` type are exported, so `useMediaQuery(minWidth("md"))` works as the `styling` topic
   shows. — Nikolaus Brunner <brunner@imfusion.com>
 - `@imfusion/web-ui/icons` adds four viewport layout icons in the Layout category: `LayoutAuto`, `LayoutRows`,
@@ -18,6 +23,9 @@
   — Nikolaus Brunner <brunner@imfusion.com>
 - `Callout.Root` defaults to `maxWidth="lg"`, keeps a minimum width of 15rem, and spaces its title, description, and list
   items more evenly. [Callout](src/components/callout/callout.stories.tsx#WithList) — Nikolaus Brunner <brunner@imfusion.com>
+- `Select` items have more room: 1rem padding at the sides and 0.75rem above, below, and between the indicator and text.
+  The trigger's focus ring sits on its border. [Select](src/components/select/select.mdx)
+  ([WEBSDK-245](https://imfusion.atlassian.net/browse/WEBSDK-245)) — Nikolaus Brunner <brunner@imfusion.com>
 - Agent skills — Nikolaus Brunner <brunner@imfusion.com>
   - `imf-web-ui-conventions` exempts React components from the explicit return type on exported functions.
   - The `project-structure` topic keeps a route's only view, such as a form, in the route file and moves views to the `-`
@@ -36,19 +44,28 @@
     keeps its block under an "Implemented" note that names its story.
   - `docs/conventions.md` shows how a component declares its default as a custom-property fallback that a container
     overrides.
+  - `design/DESIGN.md` draws a field's focus ring on its border: one line, never a second one outside it.
 - Storybook — Nikolaus Brunner <brunner@imfusion.com>
   - The Controls table lists a component's own props first, then the props it inherits from Base UI or React.
+  - `withFrame` draws its border only with `bordered: true`. Layout stories such as Stack and Row use it to show their bounds.
+  - Interaction tests live in hidden `Test-only:` stories, and default-open popups open only in the single-story view,
+    as `docs/story-conventions.md` describes.
 
 ### Fixed
 
 - Typo inside `Callout.Description`, such as `Typo.UnorderedList` or `Typo.P`, matches the description's size and takes
   the variant's colour. [Callout](src/components/callout/callout.stories.tsx#WithList) — Nikolaus Brunner <brunner@imfusion.com>
+- A `Select` option with `Select.ItemDescription` is named by its text alone and reads the description as its accessible
+  description. ([WEBSDK-245](https://imfusion.atlassian.net/browse/WEBSDK-245)) — Nikolaus Brunner <brunner@imfusion.com>
+- Generated CSS module types skip `:global()` selectors instead of listing their names as classes. — Nikolaus Brunner
+  <brunner@imfusion.com>
 - `Table.RowLink` covers its whole row: a click anywhere in the row follows the link, while buttons, checkboxes, switches,
   links, and form fields in the row keep their own click. — Nikolaus Brunner <brunner@imfusion.com>
 - `npm run dev` starts Storybook on the next free port again while another checkout's Storybook runs. — Nikolaus Brunner
   <brunner@imfusion.com>
 - Components — Nikolaus Brunner <brunner@imfusion.com>
   - A `Drawer.Close` or `Popover.Close` rendered as another component, such as a `Button`, keeps that component's styles.
+  - A `Popover.Trigger` rendered as another component keeps that component's styles, so `render={<Button />}` looks like a Button.
 
 ---
 

package/dist/{code-Cl9AzRyF.js → code-BXlEW54h.js}

@@ -1,7 +1,7 @@
-import { r as e } from "./resolve-state-props-DQf9WiGv.js";
+import { s as e } from "./utils-RZJAXfcf.js";
 import { Xo as t, _M as n, ja as r } from "./icons-vc1WZCxX.js";
 import { t as i } from "./meta-V_KyLeGn.js";
-import { a, i as o, n as s, o as c, s as l } from "./scroll-area-z9Lf9uIk.js";
+import { a, i as o, n as s, o as c, s as l } from "./scroll-area-CUo1NBaW.js";
 import { cx as u } from "class-variance-authority";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import { useCallback as m, useEffect as h, useRef as g, useState as _ } from "react";

package/dist/components/autocomplete/autocomplete.d.ts

@@ -0,0 +1,144 @@
+import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import { VariantProps } from 'class-variance-authority';
+import { comboboxRoot } from '../combobox/combobox.cva';
+type UpstreamItem = React.ComponentProps<typeof AutocompletePrimitive.Item>;
+type RootProps<ItemValue> = Omit<AutocompletePrimitive.Root.Props<ItemValue>, "items"> & {
+    items?: readonly ItemValue[] | undefined;
+    /** Field width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent. @default "auto" */
+    width?: VariantProps<typeof comboboxRoot>["width"];
+};
+/**
+ * Autocomplete.Root — text input that suggests options as you type and keeps free text.
+ *
+ * Wraps children in a div so the field and its label stack regardless of the parent's layout.
+ * Autocomplete.Portal is unaffected (it renders to document.body).
+ *
+ * @doc https://base-ui.com/react/components/autocomplete
+ * @llm https://base-ui.com/react/components/autocomplete.md
+ */
+export declare function Root<ItemValue = unknown>({ width, className, style, ...props }: RootProps<ItemValue> & {
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** Autocomplete.InputGroup — the field box that holds the input, clear button, and trigger. */
+export declare function InputGroup(props: React.ComponentProps<typeof AutocompletePrimitive.InputGroup>): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputGroup {
+    var displayName: string;
+}
+/** Autocomplete.Input — the text input. Its text is the value. */
+export declare function Input(props: React.ComponentProps<typeof AutocompletePrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Input {
+    var displayName: string;
+}
+/** Autocomplete.Trigger — button that opens the popup. Without children it draws a chevron. */
+export declare function Trigger({ children, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Trigger {
+    var displayName: string;
+}
+/** Autocomplete.Icon — visual indicator (chevron) inside the trigger. */
+export declare function Icon(props: React.ComponentProps<typeof AutocompletePrimitive.Icon>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+/** Autocomplete.Clear — button that clears the text. Without children it draws a cross. */
+export declare function Clear({ children, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Clear>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Clear {
+    var displayName: string;
+}
+/** Autocomplete.Value — renders the input text. */
+export declare function Value(props: React.ComponentProps<typeof AutocompletePrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Value {
+    var displayName: string;
+}
+/** Autocomplete.Portal — portals the popup tree to document.body (or a custom container). */
+export declare function Portal(props: React.ComponentProps<typeof AutocompletePrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Portal {
+    var displayName: string;
+}
+/** Autocomplete.Backdrop — overlay behind the popup (visible only in modal mode). */
+export declare function Backdrop(props: React.ComponentProps<typeof AutocompletePrimitive.Backdrop>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Backdrop {
+    var displayName: string;
+}
+/** Autocomplete.Positioner — positions the popup relative to the field. */
+export declare function Positioner({ align, sideOffset, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Positioner {
+    var displayName: string;
+}
+/** Autocomplete.Popup — dropdown surface. It keeps the height it had when it opened while the list filters. */
+export declare function Popup(props: React.ComponentProps<typeof AutocompletePrimitive.Popup>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Popup {
+    var displayName: string;
+}
+/** Autocomplete.Arrow — pointer arrow attached to the popup. */
+export declare function Arrow(props: React.ComponentProps<typeof AutocompletePrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Arrow {
+    var displayName: string;
+}
+/** Autocomplete.Status — live-region line for loading and result counts, announced to screen readers. */
+export declare function Status(props: React.ComponentProps<typeof AutocompletePrimitive.Status>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Status {
+    var displayName: string;
+}
+/** Autocomplete.Empty — message shown while no item matches. */
+export declare function Empty(props: React.ComponentProps<typeof AutocompletePrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Empty {
+    var displayName: string;
+}
+/** Autocomplete.List — items container. An `inline` list keeps the height it had when it mounted while it filters. */
+export declare function List(props: React.ComponentProps<typeof AutocompletePrimitive.List>): import("react/jsx-runtime").JSX.Element;
+export declare namespace List {
+    var displayName: string;
+}
+/** Autocomplete.Row — one row of a `grid` list. */
+export declare function Row(props: React.ComponentProps<typeof AutocompletePrimitive.Row>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Row {
+    var displayName: string;
+}
+/** Autocomplete.Collection — renders a list of items inside a group. */
+export declare function Collection(props: React.ComponentProps<typeof AutocompletePrimitive.Collection>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Collection {
+    var displayName: string;
+}
+interface ItemProps extends Omit<UpstreamItem, "value"> {
+    value: UpstreamItem["value"];
+}
+/** Autocomplete.Item — individual suggestion. It carries no selection state, so it has no indicator column. */
+export declare function Item(props: ItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}
+/** Autocomplete.ItemText — text label for an item. */
+export declare function ItemText(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export declare namespace ItemText {
+    var displayName: string;
+}
+/** Autocomplete.ItemDescription — a muted second line under an item's text. */
+export declare function ItemDescription(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare namespace ItemDescription {
+    var displayName: string;
+}
+/** Autocomplete.Group — wrapper around a grouped set of items. */
+export declare function Group(props: React.ComponentProps<typeof AutocompletePrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Group {
+    var displayName: string;
+}
+/** Autocomplete.GroupLabel — heading for an Autocomplete.Group. */
+export declare function GroupLabel(props: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>): import("react/jsx-runtime").JSX.Element;
+export declare namespace GroupLabel {
+    var displayName: string;
+}
+/** Autocomplete.Separator — thin divider between items. */
+export declare function Separator(props: React.ComponentProps<typeof SeparatorPrimitive>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Separator {
+    var displayName: string;
+}
+/** The upstream hook that builds a `filter` function from locale and match options. */
+export declare const useFilter: typeof import('@base-ui/react/internals/filter').getFilter;
+/** Reads the filtered items inside an autocomplete, for a custom list renderer. */
+export declare const useFilteredItems: typeof AutocompletePrimitive.useFilteredItems;
+export {};

package/dist/components/autocomplete/autocomplete.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const autocompleteMeta: ComponentMeta;

package/dist/components/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * as Autocomplete from './autocomplete';
+export { autocompleteMeta } from './autocomplete.meta';

package/dist/components/checkbox/checkbox.cva.d.ts

@@ -0,0 +1,3 @@
+/** Checkbox's box and mark styles, shared with primitives that draw the same visual on another element. */
+export declare const checkboxRoot: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const checkboxIndicator: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -0,0 +1,37 @@
+/**
+ * Class recipes for every Combobox part, shared with Autocomplete, which renders the same field and list.
+ * Popup, list, and item styles compose Select's.
+ */
+export declare const comboboxRoot: (props?: ({
+    width?: "auto" | "wide" | "full" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const comboboxLabel: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxInputGroup: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxChips: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxInput: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxTrigger: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxIcon: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxClear: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxChip: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxChipRemove: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxBackdrop: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxPositioner: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxPopup: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxArrow: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxList: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxRow: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxStatus: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxEmpty: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxGroup: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxGroupLabel: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxSeparator: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemIndicator: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemIndicatorBox: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemMark: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemDescription: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/** Autocomplete items have no indicator column, so text and description start in the first one. */
+export declare const autocompleteItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const autocompleteItemText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const autocompleteItemDescription: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -0,0 +1,171 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import { VariantProps } from 'class-variance-authority';
+import { comboboxRoot } from './combobox.cva';
+type UpstreamItem = React.ComponentProps<typeof ComboboxPrimitive.Item>;
+interface RootProps<Value = unknown, Multiple extends boolean | undefined = false> extends React.ComponentProps<typeof ComboboxPrimitive.Root<Value, Multiple>> {
+    /** Field width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent. @default "auto" */
+    width?: VariantProps<typeof comboboxRoot>["width"];
+}
+/**
+ * Combobox.Root — text input with a filterable list of options, for choosing one or several.
+ *
+ * Wraps children in a div so a sibling Combobox.Label stacks above the field regardless of the parent's layout.
+ * Combobox.Portal is unaffected (it renders to document.body).
+ *
+ * @doc https://base-ui.com/react/components/combobox
+ * @llm https://base-ui.com/react/components/combobox.md
+ */
+export declare function Root<Value = unknown, Multiple extends boolean | undefined = false>({ width, className, style, ...props }: RootProps<Value, Multiple> & {
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** Combobox.Label — visible label, for the trigger in the input-inside-popup pattern. Label an input with `Field.Label`. */
+export declare function Label(props: React.ComponentProps<typeof ComboboxPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Label {
+    var displayName: string;
+}
+/** Combobox.InputGroup — the field box that holds the input, clear button, and trigger. */
+export declare function InputGroup(props: React.ComponentProps<typeof ComboboxPrimitive.InputGroup>): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputGroup {
+    var displayName: string;
+}
+/** Combobox.Input — the text input that filters the list. An `inline` list is always open, so `aria-expanded` defaults to true. */
+export declare function Input(props: React.ComponentProps<typeof ComboboxPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Input {
+    var displayName: string;
+}
+/** Combobox.Trigger — button that opens the popup. Without children it draws a chevron. */
+export declare function Trigger({ children, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Trigger {
+    var displayName: string;
+}
+/** Combobox.Icon — visual indicator (chevron) inside the trigger. */
+export declare function Icon(props: React.ComponentProps<typeof ComboboxPrimitive.Icon>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+/** Combobox.Clear — button that clears the value. Without children it draws a cross. */
+export declare function Clear({ children, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Clear>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Clear {
+    var displayName: string;
+}
+/** Combobox.Value — renders the selected value, or the placeholder. */
+export declare function Value(props: React.ComponentProps<typeof ComboboxPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Value {
+    var displayName: string;
+}
+/** Combobox.Chips — the field box of a multiple combobox, holding chips and the input. */
+export declare function Chips(props: React.ComponentProps<typeof ComboboxPrimitive.Chips>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Chips {
+    var displayName: string;
+}
+/** Combobox.Chip — one selected value in the field. */
+export declare function Chip(props: React.ComponentProps<typeof ComboboxPrimitive.Chip>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Chip {
+    var displayName: string;
+}
+/** Combobox.ChipRemove — button that removes its chip. Without children it draws a small cross; give it an `aria-label`. */
+export declare function ChipRemove({ children, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ChipRemove>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChipRemove {
+    var displayName: string;
+}
+/** Combobox.Portal — portals the popup tree to document.body (or a custom container). */
+export declare function Portal(props: React.ComponentProps<typeof ComboboxPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Portal {
+    var displayName: string;
+}
+/** Combobox.Backdrop — overlay behind the popup (visible only in modal mode). */
+export declare function Backdrop(props: React.ComponentProps<typeof ComboboxPrimitive.Backdrop>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Backdrop {
+    var displayName: string;
+}
+/** Combobox.Positioner — positions the popup relative to the field. */
+export declare function Positioner({ align, sideOffset, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Positioner {
+    var displayName: string;
+}
+/** Combobox.Popup — dropdown surface. It keeps the height it had when it opened while the list filters. */
+export declare function Popup(props: React.ComponentProps<typeof ComboboxPrimitive.Popup>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Popup {
+    var displayName: string;
+}
+/** Combobox.Arrow — pointer arrow attached to the popup. */
+export declare function Arrow(props: React.ComponentProps<typeof ComboboxPrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Arrow {
+    var displayName: string;
+}
+/** Combobox.Status — live-region line for loading and result counts, announced to screen readers. */
+export declare function Status(props: React.ComponentProps<typeof ComboboxPrimitive.Status>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Status {
+    var displayName: string;
+}
+/** Combobox.Empty — message shown while no item matches. */
+export declare function Empty(props: React.ComponentProps<typeof ComboboxPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Empty {
+    var displayName: string;
+}
+/** Combobox.List — items container. An `inline` list keeps the height it had when it mounted while it filters. */
+export declare function List(props: React.ComponentProps<typeof ComboboxPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+export declare namespace List {
+    var displayName: string;
+}
+/** Combobox.Row — one row of a `grid` list. */
+export declare function Row(props: React.ComponentProps<typeof ComboboxPrimitive.Row>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Row {
+    var displayName: string;
+}
+/** Combobox.Collection — renders a list of items inside a group. */
+export declare function Collection(props: React.ComponentProps<typeof ComboboxPrimitive.Collection>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Collection {
+    var displayName: string;
+}
+interface ItemProps extends Omit<UpstreamItem, "value"> {
+    value: UpstreamItem["value"];
+}
+/** Combobox.Item — individual selectable option. */
+export declare function Item(props: ItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}
+/**
+ * Combobox.ItemIndicator — marker inside the item. Without children a single combobox draws a check in the selected
+ * item, and a `multiple` combobox draws a checkbox box on every item, checked when selected.
+ */
+export declare function ItemIndicator({ children, keepMounted, render, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemIndicator>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ItemIndicator {
+    var displayName: string;
+}
+/** Combobox.ItemText — text label for an item, beside the indicator. */
+export declare function ItemText(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export declare namespace ItemText {
+    var displayName: string;
+}
+/** Combobox.ItemDescription — a muted second line under an item's text, such as an email address. */
+export declare function ItemDescription(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare namespace ItemDescription {
+    var displayName: string;
+}
+/** Combobox.Group — wrapper around a grouped set of items. */
+export declare function Group(props: React.ComponentProps<typeof ComboboxPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Group {
+    var displayName: string;
+}
+/** Combobox.GroupLabel — heading for a Combobox.Group. */
+export declare function GroupLabel(props: React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>): import("react/jsx-runtime").JSX.Element;
+export declare namespace GroupLabel {
+    var displayName: string;
+}
+/** Combobox.Separator — thin divider between items. */
+export declare function Separator(props: React.ComponentProps<typeof SeparatorPrimitive>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Separator {
+    var displayName: string;
+}
+/** The upstream hook that builds a `filter` function from locale and match options. */
+export declare const useFilter: typeof ComboboxPrimitive.useFilter;
+/** Reads the filtered items inside a combobox, for a custom list renderer. */
+export declare const useFilteredItems: typeof ComboboxPrimitive.useFilteredItems;
+export {};

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

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const comboboxMeta: ComponentMeta;

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

@@ -0,0 +1,2 @@
+export * as Combobox from './combobox';
+export { comboboxMeta } from './combobox.meta';

package/dist/components/popover/popover.d.ts

@@ -19,7 +19,7 @@ export declare function Root<Payload = unknown>(props: RootProps<Payload>): impo
 export declare namespace Root {
     var displayName: string;
 }
-/** Popover.Trigger — button that opens the popover. */
+/** Popover.Trigger — button that opens the popover. With `render`, the rendered element keeps its own styles, such as a `Button`. */
 export declare function Trigger({ variant, inline, ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger> & VariantProps<typeof popoverTrigger>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Trigger {
     var displayName: string;

package/dist/components/select/select.cva.d.ts

@@ -0,0 +1,7 @@
+/** Popup, list, and item styles, shared with primitives that open the same list (Combobox, Autocomplete). */
+export declare const selectPopup: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const selectList: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const selectItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const selectItemIndicator: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const selectItemText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const selectItemDescription: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/select/select.d.ts

@@ -2,7 +2,7 @@ import { Select as SelectPrimitive } from '@base-ui/react/select';
 import { VariantProps } from 'class-variance-authority';
 type UpstreamItem = React.ComponentProps<typeof SelectPrimitive.Item>;
 declare const selectRoot: (props?: ({
-    width?: "auto" | "full" | "wide" | null | undefined;
+    width?: "auto" | "wide" | "full" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface RootProps<Value = unknown, Multiple extends boolean | undefined = false> extends React.ComponentProps<typeof SelectPrimitive.Root<Value, Multiple>> {
     /** Trigger width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent. @default "auto" */

package/dist/components/toast/toast.d.ts

@@ -2,7 +2,7 @@ import { Toast as ToastPrimitive } from '@base-ui/react/toast';
 import { VariantProps } from 'class-variance-authority';
 declare const toastViewport: (props?: ({
     position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
-    width?: "default" | "content" | "compact" | "wide" | null | undefined;
+    width?: "default" | "content" | "wide" | "compact" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const toastRoot: (props?: ({
     variant?: "warning" | "info" | "neutral" | "success" | "error" | null | undefined;

package/dist/index.d.ts

@@ -3,8 +3,10 @@ export { ChipLink, chipLinkMeta } from './components/chip-link';
 export { CopyButton, copyButtonMeta } from './components/copy-button';
 export { IconButton, iconButtonMeta } from './components/icon-button';
 export { RichLink, richLinkMeta } from './components/rich-link';
+export { Autocomplete, autocompleteMeta } from './components/autocomplete';
 export { Checkbox, checkboxMeta } from './components/checkbox';
 export { ColorSchemeToggle, colorSchemeToggleMeta } from './components/color-scheme-toggle';
+export { Combobox, comboboxMeta } from './components/combobox';
 export { Field, fieldMeta } from './components/field';
 export { Fieldset, fieldsetMeta } from './components/fieldset';
 export { Input, inputMeta } from './components/input';