@optimum-intelligence/opti-ui 0.7.1 → 0.7.3

package/dist/llms-full.txt

@@ -186,12 +186,17 @@ Also accepts all props of: `BaseCheckboxGroup.Props`.
 compound · Forms
 
 Searchable select. `<Combobox items={…} />` covers single and `multiple`
-(chips) selection; compose the parts for anything custom.
+(chips) selection; `maxChips` keeps a multi-select on one line. Compose the
+parts for anything custom.
 
 ```tsx
 import { Combobox } from '@optimum-intelligence/opti-ui';
 ```
 
+```tsx
+<Combobox label="Vehicles" items={vehicles} multiple maxChips={1} placeholder="All vehicles" />
+```
+
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `items` | `ComboboxOption[]` |  | Options to choose from. |
@@ -202,6 +207,7 @@ import { Combobox } from '@optimum-intelligence/opti-ui';
 | `emptyText?` | `React.ReactNode` | `'No results found.'` | Shown when the filter matches nothing. |
 | `size?` | `'sm' \| 'md' \| 'lg'` | `'md'` | Control height. |
 | `hideClear?` | `boolean` |  | Hide the clear button. |
+| `maxChips?` | `number` |  | With `multiple`, show at most this many chips and a `+N` chip for the rest, keeping the field on one line (long labels are truncated). Leave unset to wrap all chips onto new lines. |
 | `inputProps?` | `BaseCombobox.Input.Props` |  | Props for the text input. |
 
 Also accepts all props of: `RootProps`.
@@ -1035,7 +1041,7 @@ import { CardTitle } from '@optimum-intelligence/opti-ui';
 
 component · Layout
 
-Responsive dashboard grid.
+Responsive dashboard grid: up to `columns` equal columns, fewer when its own width cannot fit them.
 
 ```tsx
 import { Grid } from '@optimum-intelligence/opti-ui';
@@ -1044,7 +1050,8 @@ import { Grid } from '@optimum-intelligence/opti-ui';
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `ref?` | `React.Ref<HTMLDivElement>` |  | Ref to the grid element. |
-| `columns?` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3` | Columns on wide screens; collapses to 2 below 1200px (for 4+) and 1 below 900px. |
+| `columns?` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3` | Most columns, shown while each can be at least `minItemWidth` wide. As the grid's own width runs out it steps down to half the columns (4 → 2, 6 → 3), then to as many as fit. With the defaults a 4–6 column KPI row keeps 2 columns on a phone. |
+| `minItemWidth?` | `string` |  | Narrowest a column may get before the grid drops columns: any CSS length. Defaults to `12rem`; for 4–6 columns `11rem`, or `9rem` below 640px. Same as setting `--oui-grid-min-item-width`. |
 | `gap?` | `'sm' \| 'md' \| 'lg'` | `'md'` | Space between grid cells. |
 
 Also accepts all props of: `React.HTMLAttributes<HTMLDivElement>`.
@@ -1268,7 +1275,7 @@ Also accepts all props of: `useRender.ComponentProps<'div', StackState>`.
 
 component · Layout
 
-KPI tile: label, large value, optional unit and trend.
+KPI tile: label, large value, optional unit and trend. Below 640px it turns compact (smaller value, no icon) to sit two to a row.
 
 ```tsx
 import { StatCard } from '@optimum-intelligence/opti-ui';
@@ -1286,7 +1293,7 @@ import { StatCard } from '@optimum-intelligence/opti-ui';
 | `trend?` | `'up' \| 'down' \| 'flat'` |  | Arrow direction shown next to `delta`. |
 | `tone?` | `'positive' \| 'negative' \| 'neutral'` |  | Color of the delta. Defaults to positive for `up`, negative for `down`. |
 | `hint?` | `React.ReactNode` |  | Supporting text under the value. |
-| `icon?` | `React.ReactNode` |  | Icon tile shown in the top-right corner. |
+| `icon?` | `React.ReactNode` |  | Icon tile shown in the top-right corner. Hidden below 640px, where the tile is compact. |
 | `loading?` | `boolean` |  | Replaces the value with a skeleton while data loads. |
 
 Also accepts all props of: `useRender.ComponentProps<'div', CardState>`.
@@ -1539,7 +1546,7 @@ import { SegmentedControl } from '@optimum-intelligence/opti-ui';
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `size?` | `'sm' \| 'md'` | `'md'` | Segment height. |
-| `variant?` | `'segmented' \| 'outline'` |  | `segmented` renders a pill track like a tab switcher; `outline` separate buttons. |
+| `variant?` | `'segmented' \| 'outline'` |  | `segmented` renders a pill track like a tab switcher, kept on one line; `outline` separate buttons, which wrap onto more rows when they do not fit. |
 | `fullWidth?` | `boolean` |  | Stretch segments to fill the width. |
 | `options` | `SegmentedControlOption[]` |  | Segments to show. |
 | `value?` | `string` |  | Selected option `value` (controlled). |
@@ -1577,7 +1584,7 @@ import { ToggleGroup } from '@optimum-intelligence/opti-ui';
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `size?` | `'sm' \| 'md'` | `'md'` | Segment height. |
-| `variant?` | `'segmented' \| 'outline'` | `'segmented'` | `segmented` renders a pill track like a tab switcher; `outline` separate buttons. |
+| `variant?` | `'segmented' \| 'outline'` | `'segmented'` | `segmented` renders a pill track like a tab switcher, kept on one line; `outline` separate buttons, which wrap onto more rows when they do not fit. |
 | `fullWidth?` | `boolean` |  | Stretch segments to fill the width. |
 
 Also accepts all props of: `BaseToggleGroup.Props`.
@@ -1810,7 +1817,8 @@ Base UI `Dialog.createHandle` re-exported unchanged. See https://base-ui.com/rea
 component · Overlays
 
 Side panel for inspecting or editing a record without leaving the page:
-pinned header, scrolling body, optional pinned footer. For a free-form
+pinned header, scrolling body, optional pinned footer. `side="bottom"` makes
+it a bottom sheet, for filters and actions on phones. For a free-form
 sheet use `Dialog.Content` with `placement`.
 
 ```tsx
@@ -1830,8 +1838,8 @@ import { Drawer } from '@optimum-intelligence/opti-ui';
 | `description?` | `React.ReactNode` |  | Supporting text under the title. |
 | `actions?` | `React.ReactNode` |  | Header content next to the close button (edit, delete, a menu…). |
 | `footer?` | `React.ReactNode` |  | Pinned to the bottom, for form buttons. |
-| `side?` | `'right' \| 'left'` | `'right'` | Edge the drawer slides in from. |
-| `size?` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Width: sm 24rem, md 32rem (default), lg 48rem, xl 60rem. Override with `--oui-drawer-width`. |
+| `side?` | `'right' \| 'left' \| 'bottom'` | `'right'` | Edge the drawer slides in from. A `bottom` sheet is full width, as tall as its content, up to 85% of the screen. |
+| `size?` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Width of a side drawer: sm 24rem, md 32rem (default), lg 48rem, xl 60rem. Override with `--oui-drawer-width`. Ignored by `bottom`. |
 | `dismissible?` | `boolean` | `true` | Set to `false` to block Esc, outside clicks and the close button, e.g. while a form inside is saving. |
 | `modal?` | `boolean` | `true` | `false` leaves the page behind interactive and drops the backdrop. |
 | `backdropBlur?` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'` | How strongly the page behind a modal drawer is blurred. Override the radius with `--oui-backdrop-blur`. |
@@ -2121,12 +2129,17 @@ Also accepts all props of: `Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>`
 
 component · Disclosure & navigation
 
-Progress through an ordered sequence: a wizard, a checkout, a background job's phases.
+Progress through an ordered sequence: a wizard, a checkout, a background job's phases. Below 640px a
+horizontal stepper turns compact: a segmented progress bar under the current step ("2/4 · Date").
 
 ```tsx
 import { Stepper } from '@optimum-intelligence/opti-ui';
 ```
 
+```tsx
+<Stepper current={1} steps={[{ label: 'Vehicle' }, { label: 'Date' }, { label: 'Route' }, { label: 'Summary' }]} />
+```
+
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `ref?` | `React.Ref<HTMLOListElement>` |  | Ref to the `<ol>` element. |
@@ -2142,7 +2155,8 @@ Also accepts all props of: `React.OlHTMLAttributes<HTMLOListElement>`.
 
 compound · Disclosure & navigation
 
-`Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value.
+`Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value. A list wider than its
+container scrolls sideways, with its cut-off edge faded.
 
 ```tsx
 import { Tabs } from '@optimum-intelligence/opti-ui';
@@ -2261,8 +2275,12 @@ uncontrolled or controlled (`search` / `filterValues` / `sort` / `page` /
 
 For another layout, create the table with `useDataTable` and compose the
 parts: `DataTable.Root`, `DataTable.Toolbar`, `DataTable.Search`,
-`DataTable.Filters`, `DataTable.Filter`, `DataTable.Actions`,
-`DataTable.Summary`, `DataTable.Content`, `DataTable.Pagination`.
+`DataTable.Filters`, `DataTable.Filter`, `DataTable.FilterSheet` (the
+phone filter button and sheet), `DataTable.Actions`, `DataTable.Summary`,
+`DataTable.Content`, `DataTable.Pagination`.
+
+On phones (below 640px) columns with `priority: 'low'` are hidden, and
+`stickyFirstColumn` keeps each row's name in view while the rest scrolls.
 
 ```tsx
 import { DataTable } from '@optimum-intelligence/opti-ui';
@@ -2274,12 +2292,13 @@ import { DataTable } from '@optimum-intelligence/opti-ui';
 | `maxHeight?` | `number \| string` |  | Scrolls the rows inside this height and keeps the header in view. |
 | `virtualized?` | `boolean \| DataTableVirtualOptions` |  | Renders only the rows in view, for thousands of rows without pagination. Rows are one line high: columns fit their longest value, so mark those with long text `truncate`. Scrolls inside `maxHeight` (default `32rem`). |
 | `onEndReached?` | `() => void` |  | Called when the rows are scrolled near their end, once per row count: load and append the next rows. Needs `maxHeight` or `virtualized`. |
+| `stickyFirstColumn?` | `boolean` |  | Keeps the first column (and the selection checkboxes) in place while the table scrolls sideways, so each row stays identifiable on narrow screens. |
 | `empty?` | `React.ReactNode` |  | Replaces the default empty state. |
 | `tableProps?` | `Omit<TableProps, 'children'>` |  | Props for the underlying `Table` (className, wrapperProps, aria-*). |
 | `pageSizeOptions?` | `number[]` |  | Choices in the rows-per-page select. |
 | `controlSize?` | `'sm' \| 'md'` |  | Size of the search box and the filters. |
 | `toolbar?` | `React.ReactNode \| ((context: DataTableToolbarContext<T>) => React.ReactNode)` |  | Extra toolbar content (add, bulk actions…). A function receives the processed rows. |
-| `showToolbar?` | `boolean` | `true` | `false` drops the search, filters, summary and toolbar content: rows only, for short tables under their own heading. |
+| `showToolbar?` | `boolean` | `true` | `false` drops the search, filters, summary and toolbar content: rows only, for short tables under their own heading. Below 640px the toolbar is the search and a "Filters (n)" button, whose bottom sheet holds the filters and the `toolbar` content, over a line with the row count and export. |
 | `exportName?` | `string` |  | Adds an export button that saves the filtered, sorted rows as `<exportName>.csv`. Columns choose their text with `exportValue`. |
 | `fill?` | `boolean` | `false` | Grow to fill the height of a flex column container (a page, or a `Card` whose content holds the table); only the rows scroll. `maxHeight` still caps it. |
 | `className?` | `string` |  | Class name for the table's root element. |
@@ -2321,6 +2340,7 @@ Every filter of the table, with a clear button while any is active. Children are
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `size?` | `'sm' \| 'md'` |  | Control height of every filter. |
+| `stacked?` | `boolean` |  | One filter per row at full width, chip rows and date ranges under their name: the layout of the filter sheet on phones. Leaves out the clear button, which the sheet keeps in its footer. |
 
 Also accepts all props of: `React.HTMLAttributes<HTMLDivElement>`.
 
@@ -2334,6 +2354,17 @@ The control of one filter: a dropdown, a toggle chip, a row of chips or a date r
 | `size?` | `'sm' \| 'md'` |  | Control height. |
 | `className?` | `string` |  | Class name for the filter control. |
 
+### DataTable.FilterSheet
+
+The phone toolbar's "Filters (n)" button, which opens a bottom sheet holding every filter and the
+`children`. Filters apply as they change. The footer keeps a clear button (disabled while no filter
+is set, so nothing moves when one is) and a button that closes the sheet on the result count.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size?` | `'sm' \| 'md'` | `'md'` | Height of the filter button; the filters in the sheet are full size. |
+| `children?` | `React.ReactNode` |  | Extra content placed under the filters (add, bulk actions…). |
+
 ### DataTable.Actions
 
 Styled `<div>` (`.oui-data-table__actions`). Accepts `className`, `style`, the `render` prop and all `<div>` attributes.
@@ -2352,6 +2383,7 @@ The table itself, with its loading, empty and error states.
 | `maxHeight?` | `number \| string` |  | Scrolls the rows inside this height and keeps the header in view. |
 | `virtualized?` | `boolean \| DataTableVirtualOptions` |  | Renders only the rows in view, for thousands of rows without pagination. Rows are one line high: columns fit their longest value, so mark those with long text `truncate`. Scrolls inside `maxHeight` (default `32rem`). |
 | `onEndReached?` | `() => void` |  | Called when the rows are scrolled near their end, once per row count: load and append the next rows. Needs `maxHeight` or `virtualized`. |
+| `stickyFirstColumn?` | `boolean` |  | Keeps the first column (and the selection checkboxes) in place while the table scrolls sideways, so each row stays identifiable on narrow screens. |
 | `empty?` | `React.ReactNode` |  | Replaces the default empty state. |
 | `tableProps?` | `Omit<TableProps, 'children'>` |  | Props for the underlying `Table` (className, wrapperProps, aria-*). |
 
@@ -2532,7 +2564,7 @@ Also accepts all props of: `React.HTMLAttributes<HTMLSpanElement>`.
 
 component · Feedback & data display
 
-Styled HTML table inside a horizontally scrolling wrapper. Compose with `TableHeader`, `TableBody`,
+Styled HTML table inside a horizontally scrolling wrapper, whose cut-off edge fades. Compose with `TableHeader`, `TableBody`,
 `TableFooter`, `TableRow`, `TableHead`, `TableCell` and `TableCaption`. For search, filters, sorting
 and pagination use `DataTable` instead.
 
@@ -2769,7 +2801,7 @@ Small built-in stroke icon set. Every icon renders an `<svg>` that follows the f
 import { ArrowDownIcon } from '@optimum-intelligence/opti-ui';
 ```
 
-Icons: `ArrowDownIcon`, `ArrowUpIcon`, `CalendarIcon`, `CheckIcon`, `ChevronDownIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `ChevronUpIcon`, `ChevronsLeftIcon`, `ChevronsRightIcon`, `ChevronsUpDownIcon`, `CircleCheckIcon`, `CircleIcon`, `CircleXIcon`, `ClockIcon`, `DownloadIcon`, `ExternalLinkIcon`, `EyeIcon`, `EyeOffIcon`, `FileIcon`, `InfoIcon`, `MenuIcon`, `MinusIcon`, `MoreHorizontalIcon`, `PencilIcon`, `PlusIcon`, `SearchIcon`, `TrashIcon`, `TrendingDownIcon`, `TrendingUpIcon`, `TriangleAlertIcon`, `UploadIcon`, `XIcon`
+Icons: `ArrowDownIcon`, `ArrowUpIcon`, `CalendarIcon`, `CheckIcon`, `ChevronDownIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `ChevronUpIcon`, `ChevronsLeftIcon`, `ChevronsRightIcon`, `ChevronsUpDownIcon`, `CircleCheckIcon`, `CircleIcon`, `CircleXIcon`, `ClockIcon`, `DownloadIcon`, `ExternalLinkIcon`, `EyeIcon`, `EyeOffIcon`, `FileIcon`, `FilterIcon`, `InfoIcon`, `LayersIcon`, `MenuIcon`, `MinusIcon`, `MoreHorizontalIcon`, `PencilIcon`, `PlusIcon`, `SearchIcon`, `TrashIcon`, `TrendingDownIcon`, `TrendingUpIcon`, `TriangleAlertIcon`, `UploadIcon`, `XIcon`
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -2887,6 +2919,7 @@ strict Content-Security-Policy needs `worker-src blob:`.
 | `labels?` | `Partial<MapLabels>` |  | Translations of the built-in texts; also passed to MapLibre's control strings. |
 | `controlsPosition?` | `ControlPosition \| false` | `'top-right'` | Corner of the zoom buttons, or `false` to hide them. |
 | `expandable?` | `boolean` | `false` | Adds a button, next to the zoom buttons, that expands the map over the whole window (not browser fullscreen) above the page, at the dialog z-index. Escape or the button returns it. |
+| `attributionCollapsed?` | `boolean` | `false` | Starts the attribution as the small info button, opened with a tap, instead of showing the full text until the map is first dragged. For small maps and phones; check the tile provider's terms first. |
 | `className?` | `string` |  | Classes for the map container. Set its height in CSS (`--oui-map-height`, default 24rem). |
 | `style?` | `React.CSSProperties` |  | Inline styles for the map container. |
 | `children?` | `React.ReactNode` |  | Data parts (`Map.Routes`, `Map.Areas`, …), markers, popups and overlays. |
@@ -3010,7 +3043,7 @@ Content floating over a corner of the map: stat cards, selects, a legend or `Map
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `ref?` | `React.Ref<HTMLDivElement>` |  | Ref to the overlay element. |
-| `position?` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-left'` | Corner the overlay sits in. Overlays in the same corner as the zoom buttons cover them. |
+| `position?` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-left'` | Corner the overlay sits in. Its empty area lets clicks through to the map and controls under it. |
 
 Also accepts all props of: `React.HTMLAttributes<HTMLDivElement>`.
 
@@ -3039,18 +3072,20 @@ works outside the map; inside `Map.Root` it takes the root's labels. Put it in a
 | `onSelectedIdsChange?` | `(ids: string[]) => void` |  | Called with the new selected ids. |
 | `onVisibilityChange?` | `(ids: string[], visible: boolean) => void` |  | Called with the ids to show or hide. Adds an eye button to every entry. |
 | `showAllToggle?` | `boolean` | `false` | Adds a show all / hide all button when `onVisibilityChange` is set. |
+| `size?` | `'sm' \| 'md'` | `'md'` | `sm` packs the entries tighter, with smaller swatches and text, for small maps and phones. Either size scrolls past `--oui-map-legend-max-height` (`sm`: 10rem, `md`: none). |
 
 Also accepts all props of: `Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>`.
 
 ### Map.BaseLayerSwitch
 
-Segmented switch between the root's `baseLayers` (e.g. streets and satellite). Put it in a `Map.Overlay`.
+Switch between the root's `baseLayers` (e.g. streets and satellite): a segmented switch, or with
+`variant="icon"` a single button that cycles them. Put it in a `Map.Overlay`.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `size?` | `'sm' \| 'md'` | `'sm'` | Segment height. |
-| `variant?` | `'segmented' \| 'outline'` |  | `segmented` renders a pill track like a tab switcher; `outline` separate buttons. |
 | `fullWidth?` | `boolean` |  | Stretch segments to fill the width. |
+| `variant?` | `'segmented' \| 'outline' \| 'icon'` | `'segmented'` | `segmented` (or `outline`) shows every base map by name. `icon` is one small layers button that moves to the next base map on each press, for small maps and phones; its name says which one is shown. |
 
 Also accepts all props of: `BaseToggleGroup.Props`.
 

package/dist/llms.txt

@@ -47,7 +47,7 @@ so the components work in Next.js App Router.
 - `Calendar` — Month grid for picking one day. Keyboard: arrows move by day / week, Home / End jump within the week, PageUp / PageDown change month (with Shift: year). The month and year in the title open a list to jump straight to another one. With `granularity="month"` or `"year"` it shows a month or year grid instead.
 - `Checkbox` — Checkbox with optional `label` and `description`. Supports `indeterminate`.
 - `CheckboxGroup` — Manages the checked values of several `Checkbox` children (`value` / `onValueChange`).
-- `Combobox` — Searchable select. `<Combobox items={…} />` covers single and `multiple` (chips) selection; compose the parts for anything custom. (parts: Root, InputGroup, Input, Trigger, Clear, Value, Chips, Chip, Content, List, Item, Empty, Group, GroupLabel, Collection, useFilter)
+- `Combobox` — Searchable select. `<Combobox items={…} />` covers single and `multiple` (chips) selection; `maxChips` keeps a multi-select on one line. Compose the parts for anything custom. (parts: Root, InputGroup, Input, Trigger, Clear, Value, Chips, Chip, Content, List, Item, Empty, Group, GroupLabel, Collection, useFilter)
 - `DateConfigProvider` — Sets default locale, time zone, week start and display formats for every date picker and calendar inside it. Props on a component still win. Nested providers override only the settings they pass.
 - `DatePicker` — Date field with a calendar popover. Day values are ISO dates (`"2026-03-09"`), the same format as `<input type="date">`. `granularity="month"` or `"year"` opens a month or year grid and stores the period's first day (`"2026-03-01"`); a time granularity behaves like `DateTimePicker`.
 - `DateRangePicker` — Date range field with a calendar popover and optional presets. Values are `{ start, end }` ISO dates (`"2026-03-09"`), both inclusive. With `granularity="month"` or `"year"` it picks whole months or years, and each end is the first day of its period.
@@ -86,7 +86,7 @@ so the components work in Next.js App Router.
 - `CardFooter` — Styled `<div>` (`.oui-card__footer`). Accepts `className`, `style`, the `render` prop and all `<div>` attributes. (parts: displayName)
 - `CardHeader` — Styled `<div>` (`.oui-card__header`). Accepts `className`, `style`, the `render` prop and all `<div>` attributes. (parts: displayName)
 - `CardTitle` — Styled `<h3>` (`.oui-card__title`). Accepts `className`, `style`, the `render` prop and all `<h3>` attributes. (parts: displayName)
-- `Grid` — Responsive dashboard grid.
+- `Grid` — Responsive dashboard grid: up to `columns` equal columns, fewer when its own width cannot fit them.
 - `Navbar` — Collapsible side navigation. Use inside `AppShell`. Compose with `NavbarHeader` (`NavbarBrand`), `NavbarSection` (`NavbarSectionLabel`, `NavbarItem`) and `NavbarFooter`.
 - `NavbarBrand` — Logo, title and subtitle block for the top of a `Navbar`.
 - `NavbarFooter` — Styled `<div>` (`.oui-navbar__footer`). Accepts `className`, `style`, the `render` prop and all `<div>` attributes. (parts: displayName)
@@ -99,7 +99,7 @@ so the components work in Next.js App Router.
 - `ScrollArea` — Scroll container with slim, themed overlay scrollbars. Set a height or max-height.
 - `Separator` — Thin divider line. Set `orientation="vertical"` for a vertical rule.
 - `Stack` — Flex container that spaces its children evenly, in a column or a row.
-- `StatCard` — KPI tile: label, large value, optional unit and trend.
+- `StatCard` — KPI tile: label, large value, optional unit and trend. Below 640px it turns compact (smaller value, no icon) to sit two to a row.
 
 ## Typography
 
@@ -126,7 +126,7 @@ so the components work in Next.js App Router.
 - `ConfirmDialog` — Asks before an action runs: title, description, cancel and confirm buttons, a pending state that keeps the dialog open, and room for the error. For other layouts compose `AlertDialog`.
 - `createToastManager` — Base UI `Toast.createToastManager` re-exported unchanged. See https://base-ui.com/react/components/toast.
 - `Dialog` — Modal dialog and side sheet. Compose: `Dialog.Root` › `Dialog.Trigger` + `Dialog.Content` › `Dialog.Header` (`Title`, `Description`), `Dialog.Body`, `Dialog.Footer`. Use `render={<Button />}` on `Dialog.Trigger` / `Dialog.Close` to style them as buttons. (parts: Root, Trigger, Content, Header, Title, Description, Body, Footer, Close, createHandle)
-- `Drawer` — Side panel for inspecting or editing a record without leaving the page: pinned header, scrolling body, optional pinned footer. For a free-form sheet use `Dialog.Content` with `placement`.
+- `Drawer` — Side panel for inspecting or editing a record without leaving the page: pinned header, scrolling body, optional pinned footer. `side="bottom"` makes it a bottom sheet, for filters and actions on phones. For a free-form sheet use `Dialog.Content` with `placement`.
 - `Popover` — Floating panel anchored to a trigger, for small forms, filters and details. (parts: Root, Trigger, Content, Title, Description, Close)
 - `PreviewCard` — Card that appears when a link is hovered or focused, previewing what is behind it. `PreviewCard.Trigger` is the link itself. Keep the content supplementary: touch users never see it. (parts: Root, Trigger, Content)
 - `ToastProvider` — Mount once near the app root. Then call `useToast()` anywhere below, or pass a `toastManager` from `createToastManager()` to trigger toasts outside React.
@@ -141,8 +141,8 @@ so the components work in Next.js App Router.
 - `Collapsible` — A single section that shows and hides: advanced options, "show more", filter groups. (parts: Root, Trigger, Panel)
 - `getPageItems` — Page numbers to render, with `'gap'` where pages are skipped.
 - `Pagination` — Controlled page navigation with an optional rows-per-page select.
-- `Stepper` — Progress through an ordered sequence: a wizard, a checkout, a background job's phases.
-- `Tabs` — `Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value. (parts: Root, List, Tab, Panel)
+- `Stepper` — Progress through an ordered sequence: a wizard, a checkout, a background job's phases. Below 640px a horizontal stepper turns compact: a segmented progress bar under the current step ("2/4 · Date").
+- `Tabs` — `Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value. A list wider than its container scrolls sideways, with its cut-off edge faded. (parts: Root, List, Tab, Panel)
 
 ## Feedback & data display
 
@@ -150,7 +150,7 @@ so the components work in Next.js App Router.
 - `Avatar` — User or entity picture with initials fallback.
 - `AvatarGroup` — Overlapping row of `Avatar` children, with an optional "+N" overflow counter.
 - `Badge` — Small status label.
-- `DataTable` — `<DataTable data={…} columns={…} />` renders a complete table with search, filters, sorting, pagination, row selection, row actions and inline editing; columns declare what they take part in. Every piece of state works uncontrolled or controlled (`search` / `filterValues` / `sort` / `page` / `selection`), and with `mode="server"` the same state drives an API. (parts: Root, Toolbar, Search, Filters, Filter, Actions, Summary, Content, Pagination)
+- `DataTable` — `<DataTable data={…} columns={…} />` renders a complete table with search, filters, sorting, pagination, row selection, row actions and inline editing; columns declare what they take part in. Every piece of state works uncontrolled or controlled (`search` / `filterValues` / `sort` / `page` / `selection`), and with `mode="server"` the same state drives an API. (parts: Root, Toolbar, Search, Filters, Filter, FilterSheet, Actions, Summary, Content, Pagination)
 - `DescriptionItem` — One label and value pair inside a `DescriptionList`.
 - `DescriptionList` — Label and value pairs, such as a record's details. Holds `DescriptionItem`s.
 - `EmptyState` — Placeholder for empty lists, searches without results and first-run screens.
@@ -159,7 +159,7 @@ so the components work in Next.js App Router.
 - `Skeleton` — Pulsing placeholder for content that is still loading.
 - `SkeletonText` — Skeleton placeholder shaped like a paragraph; the last line is shorter.
 - `Spinner` — Indeterminate loading indicator that follows `currentColor`.
-- `Table` — Styled HTML table inside a horizontally scrolling wrapper. Compose with `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell` and `TableCaption`. For search, filters, sorting and pagination use `DataTable` instead.
+- `Table` — Styled HTML table inside a horizontally scrolling wrapper, whose cut-off edge fades. Compose with `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell` and `TableCaption`. For search, filters, sorting and pagination use `DataTable` instead.
 - `TableBody` — Styled `<tbody>` (`.oui-table__body`). Accepts `className`, `style`, the `render` prop and all `<tbody>` attributes. (parts: displayName)
 - `TableCaption` — Styled `<caption>` (`.oui-table__caption`). Accepts `className`, `style`, the `render` prop and all `<caption>` attributes. (parts: displayName)
 - `TableCell` — Body cell (`<td>`). `numeric` right-aligns and uses tabular figures.