@bridge-ui/vue 0.1.1 → 0.3.0

package/docs/ScrollUtilities.md

@@ -0,0 +1,89 @@
+# Scroll utilities
+
+CSS utilities for overflow scrollers. They ship in `theme.css` — no extra import.
+
+Not a component. Put the class on the element that has `overflow-y-auto` / `overflow-x-auto`.
+
+## Classes
+
+| Class                     | Role                                                                   |
+| ------------------------- | ---------------------------------------------------------------------- |
+| `bridge-scroll-fade`      | Vertical fade (alias of `-y`).                                         |
+| `bridge-scroll-fade-y`    | Vertical fade on the overflow scroller.                                |
+| `bridge-scroll-fade-x`    | Horizontal fade on the overflow scroller.                              |
+| `bridge-scroll-fade-none` | Disable the fade. Works in any class order.                            |
+| `bridge-soft-scrollbar`   | Thin, rounded thumb.                                                   |
+| `bridge-hide-scrollbar`   | Hide the scrollbar; wheel / keyboard / programmatic scroll still work. |
+
+## Examples
+
+### Vertical fade
+
+```vue
+<div class="bridge-scroll-fade-y overflow-y-auto">…</div>
+```
+
+### Horizontal fade
+
+```vue
+<div class="flex bridge-scroll-fade-x overflow-x-auto">…</div>
+```
+
+### Hide scrollbar
+
+```vue
+<div class="bridge-scroll-fade-y bridge-hide-scrollbar overflow-y-auto">
+  …
+</div>
+```
+
+### Fade size
+
+Depth defaults to `12%` of the container, capped at `40px`. Override with `--bridge-scroll-fade-size`:
+
+```vue
+<div
+  class="bridge-scroll-fade-y overflow-y-auto [--bridge-scroll-fade-size:1.5rem]"
+>
+  …
+</div>
+```
+
+### Disable the fade
+
+```vue
+<div class="bridge-scroll-fade-y bridge-scroll-fade-none overflow-y-auto">
+  …
+</div>
+```
+
+### Soft scrollbar
+
+```vue
+<div class="bridge-soft-scrollbar overflow-y-auto">…</div>
+```
+
+Do not pair `bridge-scroll-fade-*` with `bridge-soft-scrollbar` on the same node — the mask dissolves the thumb at the edges. Use fade + `bridge-hide-scrollbar` when the fade is the overflow hint.
+
+Do not put `bridge-scroll-fade-x` and `bridge-scroll-fade-y` on the same node — both set `mask-image`, and the later rule wins.
+
+Put background and border on a wrapper; put `bridge-scroll-fade-*` on the inner scroller so the mask dissolves content, not the card chrome.
+
+## Behavior
+
+- Scroll-aware when the browser supports scroll-driven animations: crisp start edge at rest, both edges mid-scroll, crisp end edge at the end.
+- If content does not overflow, no fade.
+- Without scroll-driven animations, no fade. Wheel / keyboard / programmatic scroll still work.
+- `bridge-scroll-fade-x` follows reading direction (RTL included).
+
+## TimePanel
+
+TimePanel columns use `bridge-scroll-fade-y` and `bridge-hide-scrollbar` by default. Add `bridge-scroll-fade-none` via `classes.column` to disable the fade.
+
+## Also used by
+
+| Component                       | Classes                                                                  |
+| ------------------------------- | ------------------------------------------------------------------------ |
+| Select / Listbox                | `bridge-soft-scrollbar` on the options scroller.                         |
+| Modal / Drawer `scroll="paper"` | `bridge-scroll-fade-y` and `bridge-hide-scrollbar` on the panel.         |
+| FieldOverlay drawer             | Inner `bridge-scroll-fade-x`; vertical fade comes from `scroll="paper"`. |

package/docs/components/Autocomplete.md

@@ -2,6 +2,8 @@
 
 Combobox with single/multiple value, search, async data, and optional free-solo input.
 
+The options list uses `bridge-soft-scrollbar`. See [Scroll utilities](../ScrollUtilities.md).
+
 ## Import
 
 ```ts

package/docs/components/CalendarDate.md

@@ -19,7 +19,7 @@ import { CalendarDate } from "@bridge-ui/vue/Components/CalendarDate";
   range
   v-model="range"
   :view-date="month"
-  @view-date-change="month = $event"
+  v-on:view-date-change="month = $event"
 />
 ```
 

package/docs/components/CalendarRange.md

@@ -1,7 +1,8 @@
 # CalendarRange
 
-Dual-month calendar for selecting a date range. Shared year/month selectors with
-two date panels (`orientation="horizontal"` side-by-side, or `"vertical"` stacked).
+Dual-month calendar for selecting a date range. Year sits on the left and nav
+on the right; month selectors sit inward from the header midpoint
+(`orientation="horizontal"` side-by-side, or `"vertical"` stacked).
 
 ## Import
 
@@ -28,7 +29,7 @@ import { CalendarRange } from "@bridge-ui/vue/Components/CalendarRange";
 ```vue
 <CalendarRange
   :custom-props="{
-    panels: { class: 'gap-4' },
+    startHeader: { class: 'pr-2' },
     root: { 'data-testid': 'calendar-range' },
   }"
 />

package/docs/components/DataTable.md

@@ -0,0 +1,345 @@
+# DataTable
+
+Opinionated data grid: columns, rows, sorting, selection, empty/loading, and pagination wiring. DataTable composes `Table` (`<table>` / `thead` / `tbody`) for layout, sticky header, and column alignment. `size`, `variant`, `full`, `striped`, `hoverable`, and `rounded` are forwarded to `Table`. Chrome tokens (`size`, `variant`, `rounded`, column `align`) live on `Table`. Apps own the fetch; Bridge owns interaction and chrome.
+
+## Import
+
+```ts
+import { DataTable } from "@bridge-ui/vue/Components/DataTable";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DataTable
+  :rows="users"
+  v-model:sorting="sorting"
+  :get-row-id="(row) => row.id"
+  :columns="[
+    { id: 'name', header: 'Name', cell: (row) => row.name },
+    { id: 'role', header: 'Role', cell: (row) => row.role, sortable: true },
+  ]"
+/>
+```
+
+### Variants
+
+DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows the matching variant unless the `pagination` slot overrides it:
+
+```vue
+<DataTable :rows="users" variant="plain" :columns="columns" />
+<DataTable :rows="users" variant="ghost" :columns="columns" />
+<DataTable :rows="users" variant="bordered" :columns="columns" />
+```
+
+| DataTable `variant` | Pagination `variant` |
+| ------------------- | -------------------- |
+| `plain`             | `text`               |
+| `ghost`             | `ghost`              |
+| `bordered`          | `outlined`           |
+
+`striped` is independent of variant:
+
+```vue
+<DataTable striped :rows="users" :columns="columns" />
+```
+
+`:full="false"` sizes columns to content instead of stretching the table:
+
+```vue
+<DataTable :full="false" :rows="users" :columns="columns" />
+```
+
+`sticky-header` pins header cells to the page. `"boxed"` pins them inside the wrapper — set a max height on `classes.wrapper` or `classes.root`:
+
+```vue
+<DataTable sticky-header :rows="users" :columns="columns" />
+<DataTable
+  :rows="users"
+  :columns="columns"
+  sticky-header="boxed"
+  :classes="{ wrapper: 'max-h-96' }"
+/>
+```
+
+### Selection + pagination
+
+Built-in Pagination when `page` is set with `page-count` or `total-count` (server fetch stays in the app). `page` + `per-page` without those totals slices `rows` locally. `per-page` also renders a Select (`per-page-options`, default 10 / 25 / 50 / 100). `#pagination` and `#perPage` replace each control:
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:page="page"
+  :page-count="pageCount"
+  v-model:selection="selected"
+  :get-row-id="(row) => row.id"
+/>
+```
+
+Client paging slices `rows`. Server paging with a total uses `total-count` instead of `page-count`:
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:page="page"
+  v-model:per-page="perPage"
+/>
+
+<DataTable
+  :rows="pageRows"
+  :columns="columns"
+  v-model:page="page"
+  :total-count="total"
+  v-model:per-page="perPage"
+/>
+```
+
+Slot replaces the built-in Pagination and/or per-page Select (`#pagination` / `#perPage`; slot props match the built-ins):
+
+```vue
+<DataTable :rows="users" :columns="columns" :get-row-id="(row) => row.id">
+  <template #pagination>
+    <Pagination
+      mode="simple"
+      :has-next="Boolean(nextCursor)"
+      v-on:next="fetchPage(nextCursor)"
+      :has-previous="Boolean(prevCursor)"
+      v-on:previous="fetchPage(prevCursor)"
+    />
+  </template>
+
+  <template #per-page="{ perPage, options, onPerPageChange }">
+    <select
+      :value="perPage"
+      aria-label="Rows per page"
+      v-on:change="onPerPageChange(Number($event.target.value))"
+    >
+      <option v-for="value in options" :key="value" :value="value">
+        {{ value }}
+      </option>
+    </select>
+  </template>
+</DataTable>
+```
+
+Align the built-in Pagination with `pagination-align` (`start` / `center` / `end`, default `end`):
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:page="page"
+  :page-count="pageCount"
+  pagination-align="start"
+/>
+```
+
+When `page` and `page-count` (or `total-count`) are set, DataTable does not sort or filter `rows` locally — bind `sorting` / `filters` / `page` / `per-page` and fetch the current page in the app:
+
+```vue
+<DataTable
+  :rows="pageRows"
+  :columns="columns"
+  v-model:page="page"
+  :page-count="pageCount"
+  v-model:filters="filters"
+  v-model:sorting="sorting"
+/>
+```
+
+### Empty, loading, and footer
+
+Empty rows show a default empty state; `#empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `#loading` replaces the indicator. `#footer` renders below the table, above pagination:
+
+```vue
+<DataTable :rows="[]" :columns="columns" :loading="isLoading">
+  <template #empty>No users</template>
+  <template #footer>Here is footer</template>
+</DataTable>
+```
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  :loading="isLoading"
+  loading-variant="bar"
+/>
+```
+
+Install `@tanstack/vue-table` next to `@bridge-ui/vue` when you use `DataTable`. The public API stays `columns` / `rows` / `sorting` / `selection` / `filters` / `columnSearch` / `hiddenColumns` / `search` / `expanded` — the table engine is not exported.
+
+### Columns
+
+Cell content is the column accessor (`row[id]`, or `accessor`) unless you override it. `cell` on the column is for portable renderers (`h(…)` or JSX). `#item.{id}` wins over `cell` and stays in the template:
+
+```vue
+<DataTable :rows="users" :columns="columns">
+  <template #item.role="{ row }">
+    <Badge>{{ row.role }}</Badge>
+  </template>
+</DataTable>
+```
+
+```ts
+const columns = [
+  { id: "name", header: "Name" },
+  { id: "role", header: "Role" },
+];
+```
+
+Table-level slots stay `empty` / `expanded` / `footer` / `item.{id}` / `item` / `loading` / `pagination` / `perPage` / `search` / `toolbar` / `toolbarActions`. `#item` is a catch-all when `#item.{id}` is not set.
+
+### Selection
+
+`selectionMode="multiple"` (default) uses checkboxes and select-all. `selectionMode="single"` uses radios and keeps at most one id. `v-model:selection` is always `string[]`.
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  selection-mode="single"
+  v-model:selection="selected"
+  :get-row-id="(row) => row.id"
+/>
+```
+
+### Filters
+
+Set `filters` on a column to show a funnel in that header. The panel uses checkboxes (`filterMultiple`, default) or radios (`:filter-multiple="false"`), and **Select all items** for multiple filters. Nested `children` render as a group in the same panel. **OK** commits; **Reset** clears the draft (commit on **OK**); closing without **OK** discards it.
+
+Set `searchable` on a column to add a text field in that same menu. Queries are stored in `columnSearch` (column id → string), not used to filter the option list.
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:filters="filters"
+  v-model:column-search="columnSearch"
+/>
+```
+
+```ts
+const columns = [
+  {
+    id: "name",
+    header: "Name",
+    searchable: true,
+    cell: (row) => row.name,
+  },
+  {
+    id: "role",
+    header: "Role",
+    cell: (row) => row.role,
+    filters: [
+      { label: "Engineer", value: "Engineer" },
+      { label: "Researcher", value: "Researcher" },
+    ],
+  },
+];
+```
+
+Client-side filtering applies when the table is not server-paged (`page` + `pageCount`). With server paging, `filters` and `columnSearch` are still controlled — the app owns the fetch.
+
+### Sticky columns
+
+`sticky="start"` or `sticky="end"` pins a column while the table scrolls horizontally. Selection and expand chrome pin to start when any data column uses `sticky="start"`.
+
+```ts
+const columns = [
+  {
+    id: "name",
+    width: 160,
+    header: "Name",
+    sticky: "start",
+    cell: (row) => row.name,
+  },
+  { id: "role", header: "Role", cell: (row) => row.role },
+  {
+    id: "actions",
+    header: "Actions",
+    sticky: "end",
+    cell: (row) => row.id,
+  },
+];
+```
+
+### Ellipsis
+
+`ellipsis` truncates overflowing cell text. The tooltip uses the column accessor (or `row[id]`).
+
+```ts
+const columns = [
+  {
+    id: "name",
+    header: "Name",
+    ellipsis: true,
+    cell: (row) => row.name,
+  },
+];
+```
+
+### Column visibility
+
+Pass `hiddenColumns` and/or listen to `update:hiddenColumns` to show a **Columns** icon in the toolbar. `hideable: false` keeps a column out of the toggle (or disabled). At least one column stays visible.
+
+```vue
+<DataTable :rows="users" :columns="columns" v-model:hidden-columns="hidden" />
+```
+
+### Search
+
+Pass `search` and/or listen to `update:search` to show a search field in the toolbar. Client-side tables filter visible columns; server-paged tables emit the query only.
+
+```vue
+<DataTable :rows="users" :columns="columns" v-model:search="search" />
+```
+
+### Toolbar
+
+`#toolbar` is the leading region (left). `#toolbar-actions` sits in the end cluster beside Columns and Search. The toolbar shows when either slot is set, or when Columns / Search are enabled.
+
+```vue
+<DataTable :rows="users" :columns="columns" v-model:search="search">
+  <template #toolbar-actions>
+    <Button v-on:click="onPrint">Print</Button>
+  </template>
+</DataTable>
+```
+
+### Expand
+
+Controlled `expanded` row ids. `#expanded="{ row }"` renders in a spanning row under the data row.
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:expanded="expanded"
+  :get-row-id="(row) => row.id"
+>
+  <template #expanded="{ row }">
+    {{ row.bio }}
+  </template>
+</DataTable>
+```
+
+### Summary
+
+Set `summary` on a column to render a footer row over the current (filtered) rows. Chrome cells stay empty.
+
+```ts
+const columns = [
+  { id: "name", header: "Name", cell: (row) => row.name },
+  {
+    id: "role",
+    header: "Role",
+    cell: (row) => row.role,
+    summary: (items) => `${items.length} roles`,
+  },
+];
+```

package/docs/components/DateField.md

@@ -64,8 +64,8 @@ Replaces Cancel / Apply on the nested picker. `apply()` commits and closes; `can
 ```vue
 <DateField overlay="modal">
   <template #footer="{ apply, cancel }">
-    <button type="button" @click="cancel">Discard</button>
-    <button type="button" @click="apply">Save</button>
+    <button type="button" v-on:click="cancel">Discard</button>
+    <button type="button" v-on:click="apply">Save</button>
   </template>
 </DateField>
 ```

package/docs/components/DatePicker.md

@@ -17,7 +17,7 @@ import { DatePicker } from "@bridge-ui/vue/Components/DatePicker";
 
 <DatePicker v-model="date" />
 
-<DatePicker range show-footer v-model="range" @cancel="() => {}" />
+<DatePicker range show-footer v-model="range" v-on:cancel="() => {}" />
 ```
 
 ### Custom footer
@@ -27,8 +27,8 @@ Call `apply()` to commit and close the overlay, or `cancel()` to discard and clo
 ```vue
 <DatePicker show-footer>
   <template #footer="{ apply, cancel }">
-    <button type="button" @click="cancel">Discard</button>
-    <button type="button" @click="apply">Save</button>
+    <button type="button" v-on:click="cancel">Discard</button>
+    <button type="button" v-on:click="apply">Save</button>
   </template>
 </DatePicker>
 ```

package/docs/components/DateRangePicker.md

@@ -1,7 +1,8 @@
 # DateRangePicker
 
-Inline dual-month picker for an inclusive date range (`[start, end]`). The header
-exposes year, start month, and end month selectors in one row.
+Inline dual-month picker for an inclusive date range (`[start, end]`). Year sits
+on the left and nav on the right; month selectors sit inward from the header
+midpoint.
 
 ## Import
 
@@ -20,7 +21,7 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 
 <DateRangePicker orientation="vertical" />
 
-<DateRangePicker show-footer v-model="range" @cancel="() => {}" />
+<DateRangePicker show-footer v-model="range" v-on:cancel="() => {}" />
 ```
 
 ## Props

package/docs/components/Drawer.md

@@ -96,27 +96,27 @@ import { Drawer } from "@bridge-ui/vue/Components/Drawer";
 
 ## Props
 
-| Prop                  | Type                | Default | Description                                                                                |
-| --------------------- | ------------------- | ------- | ------------------------------------------------------------------------------------------ |
-| `ariaLabel`           | `string`            | —       | Accessible name for the dialog (`aria-label`).                                             |
-| `ariaLabelledBy`      | `string`            | —       | Id of the element that labels the dialog (`aria-labelledby`).                              |
-| `autoFocus`           | `boolean`           | `false` | When true, focuses the first focusable element inside the drawer on open.                  |
-| `blur`                | `DrawerBlur`        | "none"  | Backdrop blur on the overlay.                                                              |
-| `classes`             | `DrawerClasses`     | —       | The classes to apply to the drawer.                                                        |
-| `closeOnEscape`       | `boolean`           | `true`  | Whether the drawer closes on escape key press.                                             |
-| `closeOnOverlay`      | `boolean`           | `true`  | Whether the drawer closes on overlay click.                                                |
-| `customProps`         | `DrawerCustomProps` | —       | Props forwarded to each drawer part.                                                       |
-| `disableEnforceFocus` | `boolean`           | `false` | When true, focus is not trapped inside the drawer while open.                              |
-| `disableRestoreFocus` | `boolean`           | `false` | When true, focus is not restored to the previously focused element on close.               |
-| `disableScrollLock`   | `boolean`           | `false` | When true, body scroll is not locked while the drawer is open.                             |
-| `hideBackdrop`        | `boolean`           | `false` | When true, the backdrop overlay is not rendered.                                           |
-| `keepMounted`         | `boolean`           | `false` | When true, the drawer stays mounted in the DOM after closing (hidden).                     |
-| `persistent`          | `boolean`           | `false` | When true, escape and overlay clicks do not close the drawer.                              |
-| `placement`           | `DrawerPlacement`   | "left"  | Edge the panel docks to.                                                                   |
-| `scroll`              | `DrawerScroll`      | "paper" | Where scroll happens: the page (`body`) or the drawer panel (`paper`).                     |
-| `size`                | `DrawerSize`        | "md"    | Panel size along the placement axis (width for `left`/`right`, height for `top`/`bottom`). |
-| `teleportTo`          | `string \| false`   | "body"  | Where to teleport the drawer. Pass `false` to render in place.                             |
-| `transition`          | `DrawerTransition`  | "slide" | Enter/leave animation for overlay and panel.                                               |
+| Prop                  | Type                | Default | Description                                                                                                                             |
+| --------------------- | ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `ariaLabel`           | `string`            | —       | Accessible name for the dialog (`aria-label`).                                                                                          |
+| `ariaLabelledBy`      | `string`            | —       | Id of the element that labels the dialog (`aria-labelledby`).                                                                           |
+| `autoFocus`           | `boolean`           | `false` | When true, focuses the first focusable element inside the drawer on open.                                                               |
+| `blur`                | `DrawerBlur`        | "none"  | Backdrop blur on the overlay.                                                                                                           |
+| `classes`             | `DrawerClasses`     | —       | The classes to apply to the drawer.                                                                                                     |
+| `closeOnEscape`       | `boolean`           | `true`  | Whether the drawer closes on escape key press.                                                                                          |
+| `closeOnOverlay`      | `boolean`           | `true`  | Whether the drawer closes on overlay click.                                                                                             |
+| `customProps`         | `DrawerCustomProps` | —       | Props forwarded to each drawer part.                                                                                                    |
+| `disableEnforceFocus` | `boolean`           | `false` | When true, focus is not trapped inside the drawer while open.                                                                           |
+| `disableRestoreFocus` | `boolean`           | `false` | When true, focus is not restored to the previously focused element on close.                                                            |
+| `disableScrollLock`   | `boolean`           | `false` | When true, body scroll is not locked while the drawer is open.                                                                          |
+| `hideBackdrop`        | `boolean`           | `false` | When true, the backdrop overlay is not rendered.                                                                                        |
+| `keepMounted`         | `boolean`           | `false` | When true, the drawer stays mounted in the DOM after closing (hidden).                                                                  |
+| `persistent`          | `boolean`           | `false` | When true, escape and overlay clicks do not close the drawer.                                                                           |
+| `placement`           | `DrawerPlacement`   | "left"  | Edge the panel docks to.                                                                                                                |
+| `scroll`              | `DrawerScroll`      | "paper" | Where scroll happens: the page (`body`) or the drawer panel (`paper`). `paper` uses `bridge-scroll-fade-y` and `bridge-hide-scrollbar`. |
+| `size`                | `DrawerSize`        | "md"    | Panel size along the placement axis (width for `left`/`right`, height for `top`/`bottom`).                                              |
+| `teleportTo`          | `string \| false`   | "body"  | Where to teleport the drawer. Pass `false` to render in place.                                                                          |
+| `transition`          | `DrawerTransition`  | "slide" | Enter/leave animation for overlay and panel.                                                                                            |
 
 ### v-model
 

package/docs/components/FieldOverlay.md

@@ -2,9 +2,10 @@
 
 Switches between `Menu`, `Modal`, and `Drawer` shells for field pickers and listboxes.
 Dialog shells size to the picker: `modal` uses `w-fit` up to the viewport;
-`drawer` is full width and up to `90dvh`, and scrolls horizontally when dual
-calendars or time columns overflow. Nested pickers flush the bottom radius in a
-drawer so the shell meets the screen edge.
+`drawer` is full width and up to `90dvh`. Dual calendars and time columns that
+overflow the sheet width scroll on an inner scroller (`bridge-scroll-fade-x`).
+Vertical fade comes from `scroll="paper"`. Nested pickers flush the bottom
+radius in a drawer so the shell meets the screen edge.
 
 ## Import
 
@@ -38,7 +39,7 @@ import { FieldOverlay } from "@bridge-ui/vue/Components/FieldOverlay";
 
 ### customProps
 
-Forward props to the active shell via `customProps.menu`, `customProps.modal`, or `customProps.drawer`. Menu-only options such as `anchorEl`, `placement`, `disableAutoFocus`, and `rounded` go through `customProps.menu`.
+Forward props to the active shell via `customProps.menu`, `customProps.modal`, or `customProps.drawer`. The drawer inner scroller accepts `customProps.drawerScroller`. Menu-only options such as `anchorEl`, `placement`, `disableAutoFocus`, and `rounded` go through `customProps.menu`.
 
 ```vue
 <FieldOverlay
@@ -64,6 +65,16 @@ Forward props to the active shell via `customProps.menu`, `customProps.modal`, o
 >
   <PickerContent />
 </FieldOverlay>
+
+<FieldOverlay
+  v-model="open"
+  overlay="drawer"
+  :custom-props="{
+    drawerScroller: { class: 'bridge-scroll-fade-none' },
+  }"
+>
+  <PickerContent />
+</FieldOverlay>
 ```
 
 ### Footer close
@@ -79,10 +90,10 @@ overlay. Use the picker slot callbacks in custom footers so Apply still commits.
 
 ## Props
 
-| Prop          | Type                      | Default  | Description                                                |
-| ------------- | ------------------------- | -------- | ---------------------------------------------------------- |
-| `customProps` | `FieldOverlayCustomProps` | —        | Extra props for nested shells (`menu`, `modal`, `drawer`). |
-| `overlay`     | `FieldOverlayMode`        | `"auto"` | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.       |
+| Prop          | Type                      | Default  | Description                                                                                           |
+| ------------- | ------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
+| `customProps` | `FieldOverlayCustomProps` | —        | Extra props for nested shells (`menu`, `modal`, `drawer`) and the drawer scroller (`drawerScroller`). |
+| `overlay`     | `FieldOverlayMode`        | `"auto"` | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                                  |
 
 ### v-model