@imfusion/web-ui 0.11.1-dev.3.ga6fcf91c → 0.11.1-dev.30.g5f35727d

package/CHANGELOG.md

@@ -4,16 +4,85 @@
 
 ### Added
 
+- `Textarea` is a new multi-line input adapted from Base UI, with the `Input` variants and sizes, a drag-to-resize corner, and
+  validation state from `Field`. [Textarea](src/components/textarea/textarea.mdx)
+  ([WEBSDK-244](https://imfusion.atlassian.net/browse/WEBSDK-244)) — Nikolaus Brunner <brunner@imfusion.com>
+- `Table.RowButton` is a button that stands for its whole row, like `Table.RowLink`, for rows that open a drawer or run an
+  action instead of navigating. [Table](src/components/table/table.stories.tsx#RowButton) — Nikolaus Brunner
+  <brunner@imfusion.com>
+- `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`,
+  `LayoutFocusPlusStack`, and `LayoutFocusPlusRows`. [Iconography](src/icons/iconography.stories.tsx#Iconography)
+  — Stephan Wenninger <wenninger@imfusion.com>
+- `Typo.UnorderedList` takes `markerVariant` to colour its dash apart from the text, such as the brand dash on main text.
+  [Typo](src/components/typo/typo.stories.tsx#MarkerVariant) — Nikolaus Brunner <brunner@imfusion.com>
 
 ### Changed
 
+- `Input`, `Field.Control`, `NumberField`, `Select`, `Combobox`, and `Autocomplete` show focus by turning their 1px border
+  primary, with no outline. [Input](src/components/input/input.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `Drawer` draws no border by default; `borderColor` adds one, such as `borderColor="primary"` for the previous look.
+  [Drawer](src/components/drawer/drawer.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `Typo.UnorderedList` draws its dash in the text colour by default; `markerVariant="primary"` gives the brand dash.
+  — 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 `-`
     folder only when the page composes several. `imf-web-ui-audit` reports by views, not line counts.
   - The `imf-web-ui-conventions` audit checklist names the assets box "Photographs: WebP", like its topic heading.
+  - `web-ui-dev-new-component`, `web-ui-dev-update-component`, and `web-ui-dev-design-component` draft on the shared
+    Web UI Component Drafts canvas: a block per component on its Storybook group's page, one row per fidelity rung.
+  - `web-ui-dev-new-component` and `web-ui-dev-update-component` wait for the user to approve the design on the canvas
+    before writing the plan.
+  - Agents verify visual work on their own Storybook, started with `npm run dev`, against the approved canvas design.
+  - `web-ui-dev-teardown-worktree` lands local base-branch commits together with the worktree branch, and Bitbucket pull
+    requests merge with rebase and fast-forward.
+  - The `imf-web-ui-conventions` `styling` topic shows a container setting a custom property that its child reads with
+    its own default as the fallback.
+  - `web-ui-dev-release` syncs the Claude Design system once npm serves the stable version.
+- Documentation — Nikolaus Brunner <brunner@imfusion.com>
+  - `docs/design-system.md` describes the Web UI Component Drafts canvas, and `AGENTS.md` links it. A shipped component
+    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` says focus turns a field's hairline border primary: one line, same width, nothing 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.
+  - Combobox and Autocomplete stories start at the same top-left corner, so clicking through them does not shift the
+    layout. A story resizes its frame with `parameters.frame`, which `withFrame` reads.
+
+### Fixed
+
+- `Drawer.Title` wraps a long title instead of running past the panel edge.
+  [Drawer](src/components/drawer/drawer.stories.tsx#LongTitle) — Nikolaus Brunner <brunner@imfusion.com>
+- 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>
+- A Storybook sidebar row's status icon stays in place on hover. — 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-NTcddiYk.js → code-BXlEW54h.js}

@@ -1,7 +1,7 @@
-import { r as e } from "./resolve-state-props-DQf9WiGv.js";
-import { Xo as t, ja as n, pM as r } from "./icons-BsK_o-Cb.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";
@@ -34,7 +34,7 @@ var x = {
 	InlineLink: () => w
 });
 function C({ copyable: e = !1, children: i, render: a, ...o }) {
-	let { copied: s, copy: c } = b(), l = g(null), u = s ? n : t;
+	let { copied: s, copy: c } = b(), l = g(null), u = s ? r : t;
 	return y({
 		defaultTagName: "code",
 		render: a,
@@ -53,7 +53,7 @@ function C({ copyable: e = !1, children: i, render: a, ...o }) {
 						"data-copied": s || void 0,
 						"aria-label": s ? "Copied" : "Copy",
 						onClick: () => c(l.current?.textContent ?? ""),
-						children: /* @__PURE__ */ f(r, {
+						children: /* @__PURE__ */ f(n, {
 							glyph: u,
 							size: 12,
 							strokeWidth: 2,
@@ -87,7 +87,7 @@ function w({ kind: e = "external", ...t }) {
 }
 w.displayName = "Code.InlineLink";
 function T({ className: e, language: i, hideCopy: d = !1, children: m, ...h }) {
-	let { copied: _, copy: v } = b(), y = g(null), S = _ ? n : t;
+	let { copied: _, copy: v } = b(), y = g(null), S = _ ? r : t;
 	return /* @__PURE__ */ p("div", {
 		"data-imf-ui-component": "Code.Block",
 		className: u(x.block, e),
@@ -102,7 +102,7 @@ function T({ className: e, language: i, hideCopy: d = !1, children: m, ...h }) {
 				"data-copied": _ || void 0,
 				"aria-label": _ ? "Copied" : "Copy",
 				onClick: () => v(y.current?.textContent ?? ""),
-				children: /* @__PURE__ */ f(r, {
+				children: /* @__PURE__ */ f(n, {
 					glyph: S,
 					size: 12,
 					strokeWidth: 2,

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/table/table.d.ts

@@ -46,6 +46,14 @@ export declare function RowLink({ render, ...props }: useRender.ComponentProps<"
 export declare namespace RowLink {
     var displayName: string;
 }
+/**
+ * Table.RowButton — a `<button>` that stands for its whole row, such as one that opens a drawer. Use it when the row acts
+ * instead of navigating; a link that goes to a page is a `Table.RowLink`.
+ */
+export declare function RowButton({ render, type, ...props }: useRender.ComponentProps<"button">): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare namespace RowButton {
+    var displayName: string;
+}
 /**
  * Table.HeaderButton — inline action button for header cells. Generic by
  * design: sorting toggles, filter toggles, column menus all render through it

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

@@ -0,0 +1,2 @@
+export { Textarea } from './textarea';
+export { textareaMeta } from './textarea.meta';

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,32 @@
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { VariantProps } from 'class-variance-authority';
+declare const textarea: (props?: ({
+    variant?: "outline" | "ghost" | "filled" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type UpstreamInput = React.ComponentProps<typeof InputPrimitive>;
+interface Props extends Omit<React.ComponentProps<"textarea">, "className" | "style" | "value" | "defaultValue">, Pick<UpstreamInput, "value" | "defaultValue" | "onValueChange" | "render">, VariantProps<typeof textarea> {
+    /** Number of visible text lines. */
+    rows?: number;
+    /**
+     * Which directions the user can drag to resize. `horizontal` and `both` size the textarea from `cols` and shrink-wrap
+     * the root, so the width follows the drag; `none` hides the resize corner.
+     */
+    resize?: "vertical" | "horizontal" | "both" | "none";
+    /** Class of the root wrapper that lays the field out. */
+    className?: string;
+    /** Style of the root wrapper that lays the field out. */
+    style?: React.CSSProperties;
+}
+/**
+ * Multi-line text input. Also called a text area; use Input for a single line.
+ * Wraps Base UI Input rendered as a textarea for controlled/uncontrolled state, form integration,
+ * and Field context awareness (valid/invalid/dirty/touched/filled/focused). `className` and `style`
+ * go to the root wrapper; every other prop goes to the textarea.
+ *
+ * @see https://base-ui.com/react/components/input
+ * @llm https://base-ui.com/react/components/input.md
+ */
+export declare function Textarea({ variant, size, rows, resize, render, className, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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/components/typo/typo.d.ts

@@ -9,6 +9,10 @@ type WeightProps = {
     /** Font weight. Omit to keep the member's default; `medium` firms up short body text on cards. */
     weight?: "regular" | "medium" | "strong";
 };
+type MarkerProps = {
+    /** Colour of the dash. Omit to follow the text colour. */
+    markerVariant?: TypoProps["variant"];
+};
 type HeadingProps = useRender.ComponentProps<"h1"> & TypoProps;
 type LongHeadingProps = HeadingProps & {
     /** Whether lines after the first use a translucent text color. */
@@ -99,7 +103,7 @@ export declare namespace OrderedList {
     var displayName: string;
 }
 /** Typo.UnorderedList — bulleted list. */
-export declare function UnorderedList({ variant, weight, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function UnorderedList({ variant, markerVariant, weight, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & WeightProps & MarkerProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace UnorderedList {
     var displayName: string;
 }