@bridge-ui/vue 0.0.10 → 0.0.11

package/docs/components/DateRangePicker.md

@@ -25,31 +25,31 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 
 ## 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]`).                    |
+| 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`           | `DateRangePickerSlots`       | —              | Named slots (`day` on the calendars, `footer` for Cancel / Apply). |
+| `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
 
@@ -62,6 +62,7 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 
 | Event         | Payload                           | Description                                                             |
 | ------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| `v-on:apply`  | `()`                              | Emitted when Apply is pressed (`showFooter`).                           |
 | `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. |
 

package/docs/components/DateTimeField.md

@@ -38,34 +38,34 @@ Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `au
 
 ### 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.                                    |
+| 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` for modal/drawer 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` + footer). |
+| `startOfWeek`     | `StartOfWeek`              | `0`                                          | First day of the week.                                     |
+| `timeZone`        | `string`                   | —                                            | IANA time zone.                                            |
+| `value`           | `Date \| null`             | —                                            | Controlled value.                                          |
 
 ### v-model
 
@@ -80,12 +80,14 @@ 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.       |
+| Event         | Payload                 | Description                                    |
+| ------------- | ----------------------- | ---------------------------------------------- |
+| `v-on:apply`  | `()`                    | Emitted when Apply is pressed (`showFooter`).  |
+| `v-on:cancel` | `()`                    | Emitted when Cancel is pressed (`showFooter`). |
+| `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
 

package/docs/components/DateTimePicker.md

@@ -18,42 +18,42 @@ import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
 
 <DateTimePicker v-model="when" />
 
-<DateTimePicker ampm :interval="15" show-footer v-model="when" />
+<DateTimePicker ampm show-footer v-model="when" :interval="15" />
 ```
 
 ## 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.                           |
+| 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`           | `DateTimePickerSlots`       | —           | Named slots (`day` on the calendar, `footer` for Cancel / Apply). |
+| `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
 
@@ -66,6 +66,7 @@ import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
 
 | Event         | Payload                 | Description                                                             |
 | ------------- | ----------------------- | ----------------------------------------------------------------------- |
+| `v-on:apply`  | `()`                    | Emitted when Apply is pressed (`showFooter`).                           |
 | `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. |
 

package/docs/components/DateTimeRangeField.md

@@ -36,34 +36,34 @@ Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `au
 
 ### 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.                                                                 |
+| 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` for modal/drawer 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` + footer).                        |
+| `startOfWeek`     | `StartOfWeek`                   | `0`                                          | First day of the week.                                                            |
+| `timeZone`        | `string`                        | —                                            | IANA time zone.                                                                   |
+| `value`           | `DateRangeValue \| null`        | —                                            | Controlled value.                                                                 |
 
 ### v-model
 
@@ -78,12 +78,14 @@ 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.       |
+| Event         | Payload                           | Description                                    |
+| ------------- | --------------------------------- | ---------------------------------------------- |
+| `v-on:apply`  | `()`                              | Emitted when Apply is pressed (`showFooter`).  |
+| `v-on:cancel` | `()`                              | Emitted when Cancel is pressed (`showFooter`). |
+| `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
 

package/docs/components/DateTimeRangePicker.md

@@ -23,37 +23,37 @@ import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePick
 
 ## 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).         |
+| 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`           | `DateTimeRangePickerSlots`       | —              | Named slots (`day` on the calendars, `footer` for Cancel / Apply). |
+| `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
 
@@ -66,6 +66,7 @@ import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePick
 
 | Event         | Payload                           | Description                                                             |
 | ------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| `v-on:apply`  | `()`                              | Emitted when Apply is pressed (`showFooter`).                           |
 | `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. |
 

package/docs/components/FieldOverlay.md

@@ -65,6 +65,17 @@ Forward props to the active shell via `customProps.menu`, `customProps.modal`, o
 </FieldOverlay>
 ```
 
+### Footer close
+
+Nested pickers and listboxes close the overlay on Apply (after committing) and
+Cancel (without committing).
+
+A custom `footer` slot on the nested picker or listbox receives `{ apply, cancel }`.
+Call `apply()` to commit the draft and close, or `cancel()` to discard and close.
+
+The FieldOverlay injection (`FIELD_OVERLAY_INJECTION_KEY`) only closes the
+overlay. Use the picker slot callbacks in custom footers so Apply still commits.
+
 ## Props
 
 | Prop          | Type                      | Default  | Description                                                |

package/docs/components/Pagination.md

@@ -0,0 +1,63 @@
+# Pagination
+
+Page controls for lists and tables: previous/next, page numbers, and a simple cursor-friendly prev/next mode.
+
+## Import
+
+```ts
+import { Pagination } from "@bridge-ui/vue/Components/Pagination";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Pagination } from "@bridge-ui/vue/Components/Pagination";
+
+const page = ref(1);
+</script>
+
+<template>
+  <Pagination :count="12" v-model="page" aria-label="Pagination" />
+</template>
+```
+
+### Variants
+
+```vue
+<Pagination :count="12" v-model="page" variant="text" />
+<Pagination :count="12" v-model="page" variant="ghost" />
+<Pagination :count="12" v-model="page" variant="outlined" />
+```
+
+### Rounded
+
+Applies to `ghost` item corners and the `outlined` group / edge controls.
+
+```vue
+<Pagination :count="12" rounded="lg" v-model="page" variant="ghost" />
+```
+
+### With siblings and boundaries
+
+```vue
+<Pagination :count="20" v-model="page" :sibling-count="1" :boundary-count="1" />
+```
+
+### Simple (cursor / prev–next only)
+
+For APIs that do not expose a total page count:
+
+```vue
+<Pagination
+  mode="simple"
+  aria-label="Pagination"
+  @next="fetchPage(nextCursor)"
+  :has-next="Boolean(nextCursor)"
+  @previous="fetchPage(prevCursor)"
+  :has-previous="Boolean(prevCursor)"
+/>
+```