@bridge-ui/vue 0.0.7 → 0.0.9

package/docs/components/DateRangePicker.md

@@ -0,0 +1,70 @@
+# 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.
+
+## Import
+
+```ts
+import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DateRangePicker />
+
+<DateRangePicker v-model="range" />
+
+<DateRangePicker orientation="vertical" />
+
+<DateRangePicker show-footer v-model="range" @cancel="() => {}" />
+```
+
+## Props
+
+| Prop              | Type                         | Default        | Description                                           |
+| ----------------- | ---------------------------- | -------------- | ----------------------------------------------------- |
+| `classes`         | `DateRangePickerClasses`     | —              | Classes for picker regions.                           |
+| `color`           | `CalendarColor`              | `"primary"`    | Accent color.                                         |
+| `customProps`     | `DateRangePickerCustomProps` | —              | Extra props for internal parts.                       |
+| `defaultValue`    | `DateRangeValue \| null`     | `null`         | Uncontrolled initial value.                           |
+| `disabled`        | `boolean`                    | `false`        | Disables the picker.                                  |
+| `disableDates`    | `Date[]`                     | —              | Dates that cannot be selected.                        |
+| `disableMonths`   | `number[]`                   | —              | Month indexes that cannot be selected.                |
+| `disableYears`    | `number[]`                   | —              | Years that cannot be selected.                        |
+| `hideMonths`      | `boolean`                    | `false`        | Hides month navigation / panel.                       |
+| `hideOutsideDays` | `boolean`                    | `false`        | Hides days that fall outside the displayed month.     |
+| `hideWeekdays`    | `boolean`                    | `false`        | Hides weekday labels.                                 |
+| `hideYears`       | `boolean`                    | `false`        | Hides year navigation / panel.                        |
+| `maxDate`         | `Date`                       | —              | Latest selectable date.                               |
+| `minDate`         | `Date`                       | —              | Earliest selectable date.                             |
+| `orientation`     | `"horizontal" \| "vertical"` | `"horizontal"` | Dual calendar layout: side-by-side or stacked.        |
+| `readOnly`        | `boolean`                    | `false`        | Prevents selection.                                   |
+| `rounded`         | `CalendarRounded`            | `"md"`         | Border radius of calendar tiles and chrome.           |
+| `showFooter`      | `boolean`                    | `false`        | Shows Cancel / Apply. Selection is draft until Apply. |
+| `slots`           | `CalendarDateSlots`          | —              | Named slots forwarded to `CalendarRange` (`day`).     |
+| `startOfWeek`     | `StartOfWeek`                | `0`            | First day of the week.                                |
+| `timeZone`        | `string`                     | —              | IANA time zone.                                       |
+| `tokens`          | `DateRangePickerTokens`      | —              | Token overrides.                                      |
+| `value`           | `DateRangeValue \| null`     | —              | Controlled value (`[start, end]`).                    |
+
+### v-model
+
+| Prop / Event        | Type                                      | Default | Description                           |
+| ------------------- | ----------------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event         | Payload                           | Description                                                             |
+| ------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| `v-on:cancel` | `()`                              | Emitted when Cancel is pressed.                                         |
+| `v-on:change` | `(value: DateRangeValue \| null)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
+
+## Related components
+
+CalendarRange, DateRangeField, DatePicker

package/docs/components/DateTimeField.md

@@ -0,0 +1,92 @@
+# DateTimeField
+
+Form field that opens a `DateTimePicker` in an overlay (`auto` by default: `menu` on desktop, bottom `drawer` on mobile). Extends FormField props.
+
+## Import
+
+```ts
+import { DateTimeField } from "@bridge-ui/vue/Components/DateTimeField";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DateTimeField label="Appointment" />
+
+<DateTimeField ampm label="Start" v-model="when" />
+
+<DateTimeField error label="When" error-message="Pick a date and time." />
+```
+
+Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+
+### customProps
+
+```vue
+<DateTimeField
+  label="When"
+  :custom-props="{
+    input: { name: 'when' },
+    dateTimePicker: { root: { 'data-testid': 'dt-picker' } },
+  }"
+/>
+```
+
+## Props
+
+### DateTimeField-specific
+
+| Prop              | Type                       | Default                               | Description                                          |
+| ----------------- | -------------------------- | ------------------------------------- | ---------------------------------------------------- |
+| `ampm`            | `boolean`                  | `false`                               | Uses a 12-hour clock with an AM/PM column.           |
+| `classes`         | `DateTimeFieldClasses`     | —                                     | Classes for field / input regions.                   |
+| `clearable`       | `boolean`                  | `true`                                | Whether the value can be cleared.                    |
+| `customProps`     | `DateTimeFieldCustomProps` | —                                     | Extra props for internal parts.                      |
+| `defaultValue`    | `Date \| null`             | `null`                                | Uncontrolled initial value.                          |
+| `defaultView`     | `CalendarView`             | `"date"`                              | Initial calendar panel view.                         |
+| `disableDates`    | `Date[]`                   | —                                     | Dates that cannot be selected.                       |
+| `disableMonths`   | `number[]`                 | —                                     | Month indexes that cannot be selected.               |
+| `disableTimes`    | `Date[]`                   | —                                     | Times that cannot be selected.                       |
+| `disableYears`    | `number[]`                 | —                                     | Years that cannot be selected.                       |
+| `hideMonths`      | `boolean`                  | `false`                               | Hides month navigation / panel.                      |
+| `hideOutsideDays` | `boolean`                  | `false`                               | Hides days that fall outside the displayed month.    |
+| `hideWeekdays`    | `boolean`                  | `false`                               | Hides weekday labels.                                |
+| `hideYears`       | `boolean`                  | `false`                               | Hides year navigation / panel.                       |
+| `interval`        | `number`                   | `1`                                   | Minute step between time options.                    |
+| `maxDate`         | `Date`                     | —                                     | Latest selectable date.                              |
+| `maxTime`         | `Date`                     | —                                     | Latest selectable time.                              |
+| `minDate`         | `Date`                     | —                                     | Earliest selectable date.                            |
+| `minTime`         | `Date`                     | —                                     | Earliest selectable time.                            |
+| `overlay`         | `FieldOverlayMode`         | `"auto"`                              | Overlay shell: `menu`, `modal`, `drawer`, or `auto`. |
+| `showFooter`      | `boolean`                  | `false` (`true` on mobile when unset) | Shows Cancel / Apply on the nested picker.           |
+| `showSeconds`     | `boolean`                  | `false`                               | Shows seconds in the panel and formatted value.      |
+| `slots`           | `DateTimeFieldSlots`       | —                                     | Named slots (`FormField` slots + calendar `day`).    |
+| `startOfWeek`     | `StartOfWeek`              | `0`                                   | First day of the week.                               |
+| `timeZone`        | `string`                   | —                                     | IANA time zone.                                      |
+| `value`           | `Date \| null`             | —                                     | Controlled value.                                    |
+
+### v-model
+
+| Prop / Event        | Type                            | Default | Description                           |
+| ------------------- | ------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
+
+### Inherited from FormField
+
+See [FormField](./FormField.md).
+
+## Events
+
+| Event         | Payload                 | Description                        |
+| ------------- | ----------------------- | ---------------------------------- |
+| `v-on:change` | `(value: Date \| null)` | Emitted when the value changes.    |
+| `v-on:clear`  | `()`                    | Emitted when the value is cleared. |
+| `v-on:close`  | `()`                    | Emitted when the menu closes.      |
+| `v-on:open`   | `()`                    | Emitted when the menu opens.       |
+
+## Related components
+
+DateTimePicker, FormField, DateField, TimeField

package/docs/components/DateTimePicker.md

@@ -0,0 +1,74 @@
+# DateTimePicker
+
+Inline picker combining a `Calendar` and `TimePanel` side by side into a single
+`Date` instant.
+
+## Import
+
+```ts
+import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DateTimePicker />
+
+<DateTimePicker v-model="when" />
+
+<DateTimePicker ampm :interval="15" show-footer v-model="when" />
+```
+
+## Props
+
+| Prop              | Type                        | Default     | Description                                           |
+| ----------------- | --------------------------- | ----------- | ----------------------------------------------------- |
+| `ampm`            | `boolean`                   | `false`     | Uses a 12-hour clock with an AM/PM column.            |
+| `classes`         | `DateTimePickerClasses`     | —           | Classes for picker regions.                           |
+| `color`           | `CalendarColor`             | `"primary"` | Accent color.                                         |
+| `customProps`     | `DateTimePickerCustomProps` | —           | Extra props for internal parts.                       |
+| `defaultValue`    | `Date \| null`              | `null`      | Uncontrolled initial value.                           |
+| `defaultView`     | `CalendarView`              | `"date"`    | Initial calendar panel view.                          |
+| `disabled`        | `boolean`                   | `false`     | Disables the picker.                                  |
+| `disableDates`    | `Date[]`                    | —           | Dates that cannot be selected.                        |
+| `disableMonths`   | `number[]`                  | —           | Month indexes that cannot be selected.                |
+| `disableTimes`    | `Date[]`                    | —           | Times that cannot be selected.                        |
+| `disableYears`    | `number[]`                  | —           | Years that cannot be selected.                        |
+| `hideMonths`      | `boolean`                   | `false`     | Hides month navigation / panel.                       |
+| `hideOutsideDays` | `boolean`                   | `false`     | Hides days that fall outside the displayed month.     |
+| `hideWeekdays`    | `boolean`                   | `false`     | Hides weekday labels.                                 |
+| `hideYears`       | `boolean`                   | `false`     | Hides year navigation / panel.                        |
+| `interval`        | `number`                    | `1`         | Minute step between time options.                     |
+| `maxDate`         | `Date`                      | —           | Latest selectable date.                               |
+| `maxTime`         | `Date`                      | —           | Latest selectable time.                               |
+| `minDate`         | `Date`                      | —           | Earliest selectable date.                             |
+| `minTime`         | `Date`                      | —           | Earliest selectable time.                             |
+| `readOnly`        | `boolean`                   | `false`     | Prevents selection.                                   |
+| `rounded`         | `CalendarRounded`           | `"md"`      | Border radius of calendar / time tiles and chrome.    |
+| `showFooter`      | `boolean`                   | `false`     | Shows Cancel / Apply. Selection is draft until Apply. |
+| `showSeconds`     | `boolean`                   | `false`     | Shows seconds in the panel and formatted value.       |
+| `slots`           | `CalendarDateSlots`         | —           | Named slots forwarded to `Calendar` (`day`).          |
+| `startOfWeek`     | `StartOfWeek`               | `0`         | First day of the week.                                |
+| `timeZone`        | `string`                    | —           | IANA time zone.                                       |
+| `tokens`          | `DateTimePickerTokens`      | —           | Token overrides.                                      |
+| `value`           | `Date \| null`              | —           | Controlled date-time value.                           |
+
+### v-model
+
+| Prop / Event        | Type                            | Default | Description                           |
+| ------------------- | ------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event         | Payload                 | Description                                                             |
+| ------------- | ----------------------- | ----------------------------------------------------------------------- |
+| `v-on:cancel` | `()`                    | Emitted when Cancel is pressed.                                         |
+| `v-on:change` | `(value: Date \| null)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
+
+## Related components
+
+Calendar, TimePanel, DateTimeField, DatePicker

package/docs/components/DateTimeRangeField.md

@@ -0,0 +1,90 @@
+# DateTimeRangeField
+
+Form field that opens a `DateTimeRangePicker` in an overlay (`auto` by default: `menu` on desktop, bottom `drawer` on mobile). Extends FormField props.
+
+## Import
+
+```ts
+import { DateTimeRangeField } from "@bridge-ui/vue/Components/DateTimeRangeField";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DateTimeRangeField label="Event" />
+
+<DateTimeRangeField ampm label="Window" v-model="range" />
+```
+
+Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+
+### customProps
+
+```vue
+<DateTimeRangeField
+  label="Event"
+  :custom-props="{
+    input: { name: 'event' },
+    dateTimeRangePicker: { root: { 'data-testid': 'dtr-picker' } },
+  }"
+/>
+```
+
+## Props
+
+### DateTimeRangeField-specific
+
+| Prop              | Type                            | Default                               | Description                                                                       |
+| ----------------- | ------------------------------- | ------------------------------------- | --------------------------------------------------------------------------------- |
+| `ampm`            | `boolean`                       | `false`                               | Uses a 12-hour clock with an AM/PM column.                                        |
+| `classes`         | `DateTimeRangeFieldClasses`     | —                                     | Classes for field / input regions.                                                |
+| `clearable`       | `boolean`                       | `true`                                | Whether the value can be cleared.                                                 |
+| `customProps`     | `DateTimeRangeFieldCustomProps` | —                                     | Extra props for internal parts.                                                   |
+| `defaultValue`    | `DateRangeValue \| null`        | `null`                                | Uncontrolled initial value.                                                       |
+| `disableDates`    | `Date[]`                        | —                                     | Dates that cannot be selected.                                                    |
+| `disableMonths`   | `number[]`                      | —                                     | Month indexes that cannot be selected.                                            |
+| `disableTimes`    | `Date[]`                        | —                                     | Times that cannot be selected.                                                    |
+| `disableYears`    | `number[]`                      | —                                     | Years that cannot be selected.                                                    |
+| `hideMonths`      | `boolean`                       | `false`                               | Hides month navigation / panel.                                                   |
+| `hideOutsideDays` | `boolean`                       | `false`                               | Hides days that fall outside the displayed month.                                 |
+| `hideWeekdays`    | `boolean`                       | `false`                               | Hides weekday labels.                                                             |
+| `hideYears`       | `boolean`                       | `false`                               | Hides year navigation / panel.                                                    |
+| `interval`        | `number`                        | `1`                                   | Minute step between time options.                                                 |
+| `maxDate`         | `Date`                          | —                                     | Latest selectable date.                                                           |
+| `maxTime`         | `Date`                          | —                                     | Latest selectable time.                                                           |
+| `minDate`         | `Date`                          | —                                     | Earliest selectable date.                                                         |
+| `minTime`         | `Date`                          | —                                     | Earliest selectable time.                                                         |
+| `orientation`     | `"horizontal" \| "vertical"`    | `"horizontal"`                        | Dual calendar layout. Mobile `drawer` / `modal` default to `vertical` when unset. |
+| `overlay`         | `FieldOverlayMode`              | `"auto"`                              | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                              |
+| `showFooter`      | `boolean`                       | `false` (`true` on mobile when unset) | Shows Cancel / Apply on the nested picker.                                        |
+| `showSeconds`     | `boolean`                       | `false`                               | Shows seconds in the panel and formatted value.                                   |
+| `slots`           | `DateTimeRangeFieldSlots`       | —                                     | Named slots (`FormField` slots + calendar `day`).                                 |
+| `startOfWeek`     | `StartOfWeek`                   | `0`                                   | First day of the week.                                                            |
+| `timeZone`        | `string`                        | —                                     | IANA time zone.                                                                   |
+| `value`           | `DateRangeValue \| null`        | —                                     | Controlled value.                                                                 |
+
+### v-model
+
+| Prop / Event        | Type                                      | Default | Description                           |
+| ------------------- | ----------------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
+
+### Inherited from FormField
+
+See [FormField](./FormField.md).
+
+## Events
+
+| Event         | Payload                           | Description                        |
+| ------------- | --------------------------------- | ---------------------------------- |
+| `v-on:change` | `(value: DateRangeValue \| null)` | Emitted when the range changes.    |
+| `v-on:clear`  | `()`                              | Emitted when the value is cleared. |
+| `v-on:close`  | `()`                              | Emitted when the menu closes.      |
+| `v-on:open`   | `()`                              | Emitted when the menu opens.       |
+
+## Related components
+
+DateTimeRangePicker, FormField, DateRangeField, DateTimeField

package/docs/components/DateTimeRangePicker.md

@@ -0,0 +1,74 @@
+# DateTimeRangePicker
+
+Inline picker combining `CalendarRange` with a time panel beside each month
+(`Calendar + Time` pairs). With `orientation="vertical"`, pairs stack.
+
+## Import
+
+```ts
+import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePicker";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DateTimeRangePicker />
+
+<DateTimeRangePicker v-model="range" />
+
+<DateTimeRangePicker ampm :interval="15" v-model="range" />
+```
+
+## Props
+
+| Prop              | Type                             | Default        | Description                                           |
+| ----------------- | -------------------------------- | -------------- | ----------------------------------------------------- |
+| `ampm`            | `boolean`                        | `false`        | Uses a 12-hour clock with an AM/PM column.            |
+| `classes`         | `DateTimeRangePickerClasses`     | —              | Classes for picker regions.                           |
+| `color`           | `CalendarColor`                  | `"primary"`    | Accent color.                                         |
+| `customProps`     | `DateTimeRangePickerCustomProps` | —              | Extra props for internal parts.                       |
+| `defaultValue`    | `DateRangeValue \| null`         | `null`         | Uncontrolled initial value.                           |
+| `disabled`        | `boolean`                        | `false`        | Disables the picker.                                  |
+| `disableDates`    | `Date[]`                         | —              | Dates that cannot be selected.                        |
+| `disableMonths`   | `number[]`                       | —              | Month indexes that cannot be selected.                |
+| `disableTimes`    | `Date[]`                         | —              | Times that cannot be selected.                        |
+| `disableYears`    | `number[]`                       | —              | Years that cannot be selected.                        |
+| `hideMonths`      | `boolean`                        | `false`        | Hides month navigation / panel.                       |
+| `hideOutsideDays` | `boolean`                        | `false`        | Hides days that fall outside the displayed month.     |
+| `hideWeekdays`    | `boolean`                        | `false`        | Hides weekday labels.                                 |
+| `hideYears`       | `boolean`                        | `false`        | Hides year navigation / panel.                        |
+| `interval`        | `number`                         | `1`            | Minute step between time options.                     |
+| `maxDate`         | `Date`                           | —              | Latest selectable date.                               |
+| `maxTime`         | `Date`                           | —              | Latest selectable time.                               |
+| `minDate`         | `Date`                           | —              | Earliest selectable date.                             |
+| `minTime`         | `Date`                           | —              | Earliest selectable time.                             |
+| `orientation`     | `"horizontal" \| "vertical"`     | `"horizontal"` | Dual calendar layout: side-by-side or stacked.        |
+| `readOnly`        | `boolean`                        | `false`        | Prevents selection.                                   |
+| `rounded`         | `CalendarRounded`                | `"md"`         | Border radius of calendar / time tiles and chrome.    |
+| `showFooter`      | `boolean`                        | `false`        | Shows Cancel / Apply. Selection is draft until Apply. |
+| `showSeconds`     | `boolean`                        | `false`        | Shows seconds in the panel and formatted value.       |
+| `slots`           | `CalendarDateSlots`              | —              | Named slots forwarded to `CalendarRange` (`day`).     |
+| `startOfWeek`     | `StartOfWeek`                    | `0`            | First day of the week.                                |
+| `timeZone`        | `string`                         | —              | IANA time zone.                                       |
+| `tokens`          | `DateTimeRangePickerTokens`      | —              | Token overrides.                                      |
+| `value`           | `DateRangeValue \| null`         | —              | Controlled value (`[start, end]` date-times).         |
+
+### v-model
+
+| Prop / Event        | Type                                      | Default | Description                           |
+| ------------------- | ----------------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event         | Payload                           | Description                                                             |
+| ------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| `v-on:cancel` | `()`                              | Emitted when Cancel is pressed.                                         |
+| `v-on:change` | `(value: DateRangeValue \| null)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
+
+## Related components
+
+CalendarRange, TimePanel, DateTimeRangeField, DateRangePicker

package/docs/components/Divider.md

@@ -0,0 +1,56 @@
+# Divider
+
+Horizontal or vertical separator for grouping content.
+
+## Import
+
+```ts
+import { Divider } from "@bridge-ui/vue/Components/Divider";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<div class="space-y-4">
+  <p>Section one</p>
+  <Divider />
+  <p>Section two</p>
+</div>
+```
+
+### Vertical
+
+```vue
+<div class="flex h-8 items-center gap-4">
+  <span>Left</span>
+  <Divider orientation="vertical" />
+  <span>Right</span>
+</div>
+```
+
+### Color
+
+```vue
+<Divider color="primary" />
+<Divider color="error" />
+```
+
+### Custom classes
+
+```vue
+<Divider class="my-6 h-0.5 bg-primary-500" />
+```
+
+## Props
+
+| Prop          | Type                 | Default        | Description                          |
+| ------------- | -------------------- | -------------- | ------------------------------------ |
+| `classes`     | `DividerClasses`     | —              | The classes to apply to the divider. |
+| `color`       | `DividerColor`       | `"dark"`       | The fill color of the divider.       |
+| `orientation` | `DividerOrientation` | `"horizontal"` | The orientation of the divider.      |
+
+## Related components
+
+Card, ListItem, Menu

package/docs/components/Drawer.md

@@ -0,0 +1,137 @@
+# Drawer
+
+Drawer overlay docked to a viewport edge, with portal, backdrop, and focus management. Put any content inside.
+
+## Import
+
+```ts
+import { Drawer } from "@bridge-ui/vue/Components/Drawer";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Button v-on:click="open = true">Open drawer</Button>
+
+<Drawer v-model="open">
+  <Card title="Filters" :on-close="() => (open = false)">
+    Drawer content goes here.
+  </Card>
+</Drawer>
+```
+
+### Persistent
+
+```vue
+<Drawer persistent v-model="open">
+  <Card title="Persistent drawer" :on-close="() => (open = false)">
+    Clicking the backdrop or pressing Escape has no effect.
+  </Card>
+</Drawer>
+```
+
+### Placement
+
+```vue
+<Drawer v-model="open" placement="right">
+  <Card title="Right drawer" :on-close="() => (open = false)">
+    Docks to the right edge instead of the default left.
+  </Card>
+</Drawer>
+```
+
+### Bottom sheet
+
+```vue
+<Drawer v-model="open" placement="bottom">
+  <Card title="Bottom sheet" :on-close="() => (open = false)">
+    Docks to the bottom edge; `size` controls the sheet height.
+  </Card>
+</Drawer>
+```
+
+### Full composition (Card)
+
+```vue
+<Drawer blur="md" size="lg" v-model="open" transition="slide">
+  <Card
+    borderless
+    shadow="lg"
+    rounded="none"
+    padding="large"
+    variant="elevated"
+    title="Edit filters"
+  >
+    Large drawer with Card title, body, and footer slots.
+
+    <template #footer>
+      <Button size="sm" color="error" variant="flat" v-on:click="open = false">
+        Discard
+      </Button>
+
+      <Button size="sm" color="primary" v-on:click="open = false">Save</Button>
+    </template>
+  </Card>
+</Drawer>
+```
+
+### customProps
+
+```vue
+<Drawer
+  v-model="open"
+  :custom-props="{
+    root: { id: 'drawer-root' },
+    panel: { id: 'drawer-panel' },
+    overlay: { id: 'drawer-overlay' },
+  }"
+>
+  <Card title="customProps" :on-close="() => (open = false)">
+    Inspect the DOM for ids on each drawer part.
+  </Card>
+</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.                                               |
+
+### v-model
+
+| Prop / Event        | Type                       | Default | Description                                                                  |
+| ------------------- | -------------------------- | ------- | ---------------------------------------------------------------------------- |
+| `modelValue`        | `boolean`                  | `false` | Whether the drawer is visible. Bound with `v-model`.                         |
+| `update:modelValue` | `(value: boolean) => void` | —       | Emitted when `v-model` should update. Listen with `v-on:update:model-value`. |
+
+## Events
+
+| Event              | Payload           | Description                                                                                                                     |
+| ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `v-on:close`       | —                 | Emitted when the user dismisses the drawer (overlay or Escape). Not emitted when the parent sets `v-model` to `false` directly. |
+| `v-on:show-change` | `(show: boolean)` | Emitted when visibility should change (controlled state). Listen with `v-on:show-change`.                                       |
+
+## Related components
+
+Card, useDialogAction, useDrawerAction, useModalAction