@bridge-ui/vue 0.0.9 → 0.0.11

package/docs/components/Accordion.md

@@ -0,0 +1,104 @@
+# Accordion
+
+Expandable sections for FAQs, settings groups, and stacked content. Single or multiple panels open at once. Compose with `AccordionItem`.
+
+## Import
+
+```ts
+import { Accordion } from "@bridge-ui/vue/Components/Accordion";
+import { AccordionItem } from "@bridge-ui/vue/Components/AccordionItem";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Accordion v-model="open">
+  <AccordionItem title="Shipping" value="a">
+    Delivery in 2–5 business days.
+  </AccordionItem>
+  <AccordionItem title="Returns" value="b">
+    Free returns within 30 days.
+  </AccordionItem>
+</Accordion>
+```
+
+### Multiple open
+
+```vue
+<Accordion multiple :model-value="['a', 'b']">
+  <AccordionItem title="One" value="a">
+    First
+  </AccordionItem>
+  <AccordionItem title="Two" value="b">
+    Second
+  </AccordionItem>
+</Accordion>
+```
+
+### Outlined variant
+
+```vue
+<Accordion model-value="a" variant="outlined">
+  <AccordionItem title="Shipping" value="a">
+    Delivery in 2–5 business days.
+  </AccordionItem>
+  <AccordionItem title="Returns" value="b">
+    Free returns within 30 days.
+  </AccordionItem>
+</Accordion>
+```
+
+### Separated variant
+
+```vue
+<Accordion model-value="a" variant="separated">
+  <AccordionItem title="Shipping" value="a">
+    Delivery in 2–5 business days.
+  </AccordionItem>
+  <AccordionItem title="Returns" value="b">
+    Free returns within 30 days.
+  </AccordionItem>
+</Accordion>
+```
+
+### Plain variant
+
+```vue
+<Accordion model-value="a" variant="plain">
+  <AccordionItem title="Shipping" value="a">
+    Delivery in 2–5 business days.
+  </AccordionItem>
+  <AccordionItem title="Returns" value="b">
+    Free returns within 30 days.
+  </AccordionItem>
+</Accordion>
+```
+
+### Disabled item
+
+```vue
+<Accordion model-value="a">
+  <AccordionItem title="Open" value="a">
+    Visible content
+  </AccordionItem>
+  <AccordionItem disabled title="Locked" value="b">
+    Hidden while disabled
+  </AccordionItem>
+</Accordion>
+```
+
+### Custom title slot
+
+```vue
+<Accordion model-value="a">
+  <AccordionItem value="a">
+    <template #title>
+      <span class="font-semibold">Shipping rates</span>
+    </template>
+
+    Delivery in 2–5 business days.
+  </AccordionItem>
+</Accordion>
+```

package/docs/components/Autocomplete.md

@@ -129,11 +129,13 @@ Use the default slot with `ListSection` / `ListItem` to build the dropdown list
 ```vue
 <Autocomplete overlay="auto" label="Country" :options="countries" />
 
+<Autocomplete overlay="modal" label="Country" :options="countries" />
+
 <Autocomplete label="Country" overlay="drawer" :options="countries" />
 ```
 
 Default `overlay` is `auto`: `menu` on desktop and bottom `drawer` on mobile.
-When unset, `showFooter` defaults to `true` on mobile (`false` on desktop). Selection stays draft until Apply.
+When unset, `showFooter` defaults to `true` for `modal` / `drawer` overlays (`false` for `menu`). Selection stays draft until Apply. Apply commits and closes; Cancel discards and closes.
 
 ### customProps
 
@@ -153,28 +155,28 @@ When unset, `showFooter` defaults to `true` on mobile (`false` on desktop). Sele
 
 ### Autocomplete-specific
 
-| Prop                | Type                  | Default                               | Description                                                                                             |
-| ------------------- | --------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `asyncData`         | `SelectAsyncData`     | —                                     | Remote data source. Implies `searchable`.                                                               |
-| `clearable`         | `boolean`             | `true`                                | Whether the value can be cleared.                                                                       |
-| `defaultValue`      | `SelectModel`         | —                                     | Initial value when uncontrolled.                                                                        |
-| `disableMaxHeight`  | `boolean`             | `false`                               | When true, the dropdown options list is not height-limited. Forwarded to the internal `Listbox`.        |
-| `emptyMessage`      | `string`              | "No options"                          | Message when the filtered list is empty.                                                                |
-| `flipOptions`       | `boolean`             | `false`                               | Inverts the visual order of options.                                                                    |
-| `freeSolo`          | `boolean`             | `true`                                | Allows committing typed text that is not in `options` (Enter, Tab, or closing the menu).                |
-| `hideEmptyMessage`  | `boolean`             | `false`                               | Hides the empty-state message.                                                                          |
-| `loading`           | `boolean`             | —                                     | External or async loading state.                                                                        |
-| `maxHeight`         | `string`              | "max-h-60"                            | Tailwind max-height class for the dropdown options area. Forwarded to the internal `Listbox`.           |
-| `minItemsForSearch` | `number`              | 11                                    | Minimum option count before search UI is enabled.                                                       |
-| `multiple`          | `boolean`             | `false`                               | Whether multiple values can be selected.                                                                |
-| `optionDescription` | `string`              | "description"                         | Key used to read the description from option objects.                                                   |
-| `optionLabel`       | `string`              | "label"                               | Key used to read the label from option objects.                                                         |
-| `options`           | `ListboxOptionsInput` | —                                     | Options to display. May include section groups (`{ title, options, sticky? }`) mixed with flat options. |
-| `optionValue`       | `string`              | "value"                               | Key used to read the value from option objects.                                                         |
-| `overlay`           | `FieldOverlayMode`    | `"auto"`                              | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                                    |
-| `placeholder`       | `string`              | —                                     | Placeholder shown when no value is selected.                                                            |
-| `searchable`        | `boolean`             | `true`                                | Whether options can be filtered via the trigger input.                                                  |
-| `showFooter`        | `boolean`             | `false` (`true` on mobile when unset) | Shows Cancel / Apply on the nested listbox. Selection stays draft until Apply.                          |
+| Prop                | Type                  | Default                                      | Description                                                                                             |
+| ------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `asyncData`         | `SelectAsyncData`     | —                                            | Remote data source. Implies `searchable`.                                                               |
+| `clearable`         | `boolean`             | `true`                                       | Whether the value can be cleared.                                                                       |
+| `defaultValue`      | `SelectModel`         | —                                            | Initial value when uncontrolled.                                                                        |
+| `disableMaxHeight`  | `boolean`             | `false`                                      | When true, the dropdown options list is not height-limited. Forwarded to the internal `Listbox`.        |
+| `emptyMessage`      | `string`              | "No options"                                 | Message when the filtered list is empty.                                                                |
+| `flipOptions`       | `boolean`             | `false`                                      | Inverts the visual order of options.                                                                    |
+| `freeSolo`          | `boolean`             | `true`                                       | Allows committing typed text that is not in `options` (Enter, Tab, or closing the menu).                |
+| `hideEmptyMessage`  | `boolean`             | `false`                                      | Hides the empty-state message.                                                                          |
+| `loading`           | `boolean`             | —                                            | External or async loading state.                                                                        |
+| `maxHeight`         | `string`              | "max-h-60"                                   | Tailwind max-height class for the dropdown options area. Forwarded to the internal `Listbox`.           |
+| `minItemsForSearch` | `number`              | 11                                           | Minimum option count before search UI is enabled.                                                       |
+| `multiple`          | `boolean`             | `false`                                      | Whether multiple values can be selected.                                                                |
+| `optionDescription` | `string`              | "description"                                | Key used to read the description from option objects.                                                   |
+| `optionLabel`       | `string`              | "label"                                      | Key used to read the label from option objects.                                                         |
+| `options`           | `ListboxOptionsInput` | —                                            | Options to display. May include section groups (`{ title, options, sticky? }`) mixed with flat options. |
+| `optionValue`       | `string`              | "value"                                      | Key used to read the value from option objects.                                                         |
+| `overlay`           | `FieldOverlayMode`    | `"auto"`                                     | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                                    |
+| `placeholder`       | `string`              | —                                            | Placeholder shown when no value is selected.                                                            |
+| `searchable`        | `boolean`             | `true`                                       | Whether options can be filtered via the trigger input.                                                  |
+| `showFooter`        | `boolean`             | `false` (`true` for modal/drawer when unset) | Shows Cancel / Apply on the nested listbox. Selection stays draft until Apply.                          |
 
 ### v-model
 
@@ -192,12 +194,14 @@ See [FormField](./FormField.md) (building-block chrome). Field tokens live on `c
 | Slot      | Scope                                         | Description                                                                                                |
 | --------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
 | `default` | —                                             | Composed list content (`ListSection` / `ListItem` with `value`). Replaces mapped `options` in the listbox. |
+| `footer`  | `{ apply: () => void; cancel: () => void }`   | Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close, or `cancel()` to discard.      |
 | `option`  | `{ option: SelectOption; selected: boolean }` | Custom option content when rendering from the `options` prop.                                              |
 
 ## Events
 
 | Event           | Payload                  | Description                                                          |
 | --------------- | ------------------------ | -------------------------------------------------------------------- |
+| `v-on:apply`    | —                        | Emitted when Apply is pressed on the listbox footer (`showFooter`).  |
 | `v-on:cancel`   | —                        | Emitted when Cancel is pressed on the listbox footer (`showFooter`). |
 | `v-on:change`   | `(value: SelectModel)`   | Emitted when the selection changes.                                  |
 | `v-on:clear`    | —                        | Emitted when the value is cleared.                                   |

package/docs/components/Breadcrumb.md

@@ -0,0 +1,74 @@
+# Breadcrumb
+
+Navigation trail for hierarchy (home → section → page). Compose with `BreadcrumbItem`, or pass `items` for a data-driven list. Supports icon crumbs and a custom separator icon.
+
+## Import
+
+```ts
+import { Breadcrumb } from "@bridge-ui/vue/Components/Breadcrumb";
+import { BreadcrumbItem } from "@bridge-ui/vue/Components/BreadcrumbItem";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Breadcrumb>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
+  <BreadcrumbItem current>Avatar</BreadcrumbItem>
+</Breadcrumb>
+```
+
+### From items array
+
+```vue
+<Breadcrumb :items="crumbs" />
+```
+
+```ts
+const crumbs = [
+  { href: "/", label: "Home", startIcon: Home },
+  { href: "/docs", label: "Docs" },
+  { label: "Avatar", current: true },
+];
+```
+
+### Icon only
+
+Omit the label and set `aria-label` for assistive tech.
+
+```vue
+<Breadcrumb>
+  <BreadcrumbItem href="/" :start-icon="Home" aria-label="Home" />
+  <BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
+  <BreadcrumbItem current>Project Nero</BreadcrumbItem>
+</Breadcrumb>
+```
+
+### Custom separator
+
+```vue
+<Breadcrumb separator="chevronLeft">
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem current>Page</BreadcrumbItem>
+</Breadcrumb>
+```
+
+```vue
+<Breadcrumb>
+  <template #separator>
+    <span>/</span>
+  </template>
+
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem current>Page</BreadcrumbItem>
+</Breadcrumb>
+```
+
+### Collapse middle crumbs
+
+```vue
+<Breadcrumb :max-items="3" :items="deepCrumbs" />
+```

package/docs/components/DateField.md

@@ -47,36 +47,50 @@ import { DateField } from "@bridge-ui/vue/Components/DateField";
 ```
 
 Default `overlay` is `auto`: `menu` on desktop and bottom `drawer` on mobile.
-When unset, `showFooter` defaults to `true` on mobile (`false` on desktop).
+When unset, `showFooter` defaults to `true` for `modal` / `drawer` overlays (`false` for `menu`).
+Apply commits and closes the overlay; Cancel discards the draft and closes.
+
+### Custom footer
+
+Replaces Cancel / Apply on the nested picker. `apply()` commits and closes; `cancel()` discards and closes.
+
+```vue
+<DateField overlay="modal">
+  <template #footer="{ apply, cancel }">
+    <button type="button" @click="cancel">Discard</button>
+    <button type="button" @click="apply">Save</button>
+  </template>
+</DateField>
+```
 
 ## Props
 
 ### DateField-specific
 
-| Prop              | Type                   | Default                               | Description                                                                           |
-| ----------------- | ---------------------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
-| `classes`         | `DateFieldClasses`     | —                                     | Classes for field / input regions.                                                    |
-| `clearable`       | `boolean`              | `true`                                | Whether the value can be cleared.                                                     |
-| `customProps`     | `DateFieldCustomProps` | —                                     | Extra props for internal parts (`input`, `menu`, `modal`, `drawer`, `datePicker`, …). |
-| `defaultValue`    | `DatePickerModel`      | `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.                                                |
-| `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.                                                             |
-| `multiple`        | `boolean`              | `false`                               | Allows selecting multiple dates.                                                      |
-| `overlay`         | `FieldOverlayMode`     | `"auto"`                              | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                  |
-| `range`           | `boolean`              | `false`                               | Selects a date range.                                                                 |
-| `showFooter`      | `boolean`              | `false` (`true` on mobile when unset) | Shows Cancel / Apply on the nested picker.                                            |
-| `slots`           | `DateFieldSlots`       | —                                     | Named slots (`FormField` slots + calendar `day`).                                     |
-| `startOfWeek`     | `StartOfWeek`          | `0`                                   | First day of the week.                                                                |
-| `timeZone`        | `string`               | —                                     | IANA time zone.                                                                       |
-| `value`           | `DatePickerModel`      | —                                     | Controlled value.                                                                     |
+| Prop              | Type                   | Default                                      | Description                                                                           |
+| ----------------- | ---------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `classes`         | `DateFieldClasses`     | —                                            | Classes for field / input regions.                                                    |
+| `clearable`       | `boolean`              | `true`                                       | Whether the value can be cleared.                                                     |
+| `customProps`     | `DateFieldCustomProps` | —                                            | Extra props for internal parts (`input`, `menu`, `modal`, `drawer`, `datePicker`, …). |
+| `defaultValue`    | `DatePickerModel`      | `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.                                                |
+| `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.                                                             |
+| `multiple`        | `boolean`              | `false`                                      | Allows selecting multiple dates.                                                      |
+| `overlay`         | `FieldOverlayMode`     | `"auto"`                                     | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                  |
+| `range`           | `boolean`              | `false`                                      | Selects a date range.                                                                 |
+| `showFooter`      | `boolean`              | `false` (`true` for modal/drawer when unset) | Shows Cancel / Apply on the nested picker.                                            |
+| `slots`           | `DateFieldSlots`       | —                                            | Named slots (`FormField` slots + calendar `day` + footer).                            |
+| `startOfWeek`     | `StartOfWeek`          | `0`                                          | First day of the week.                                                                |
+| `timeZone`        | `string`               | —                                            | IANA time zone.                                                                       |
+| `value`           | `DatePickerModel`      | —                                            | Controlled value.                                                                     |
 
 ### v-model
 
@@ -91,12 +105,14 @@ See [FormField](./FormField.md).
 
 ## Events
 
-| Event         | Payload                    | Description                               |
-| ------------- | -------------------------- | ----------------------------------------- |
-| `v-on:change` | `(value: DatePickerModel)` | Emitted when the selection model 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: DatePickerModel)` | Emitted when the selection model 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/DatePicker.md

@@ -20,6 +20,19 @@ import { DatePicker } from "@bridge-ui/vue/Components/DatePicker";
 <DatePicker range show-footer v-model="range" @cancel="() => {}" />
 ```
 
+### Custom footer
+
+Call `apply()` to commit and close the overlay, or `cancel()` to discard and close.
+
+```vue
+<DatePicker show-footer>
+  <template #footer="{ apply, cancel }">
+    <button type="button" @click="cancel">Discard</button>
+    <button type="button" @click="apply">Save</button>
+  </template>
+</DatePicker>
+```
+
 ### customProps
 
 ```vue
@@ -33,33 +46,33 @@ import { DatePicker } from "@bridge-ui/vue/Components/DatePicker";
 
 ## Props
 
-| Prop              | Type                    | Default     | Description                                           |
-| ----------------- | ----------------------- | ----------- | ----------------------------------------------------- |
-| `classes`         | `DatePickerClasses`     | —           | Classes for picker regions.                           |
-| `color`           | `CalendarColor`         | `"primary"` | Accent color.                                         |
-| `customProps`     | `DatePickerCustomProps` | —           | Extra props for internal parts.                       |
-| `defaultValue`    | `DatePickerModel`       | `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.                |
-| `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.                             |
-| `multiple`        | `boolean`               | `false`     | Allows selecting multiple dates.                      |
-| `range`           | `boolean`               | `false`     | Selects a date range.                                 |
-| `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 `Calendar` (`day`).          |
-| `startOfWeek`     | `StartOfWeek`           | `0`         | First day of the week.                                |
-| `timeZone`        | `string`                | —           | IANA time zone.                                       |
-| `tokens`          | `DatePickerTokens`      | —           | Token overrides.                                      |
-| `value`           | `DatePickerModel`       | —           | Controlled value.                                     |
+| Prop              | Type                    | Default     | Description                                                       |
+| ----------------- | ----------------------- | ----------- | ----------------------------------------------------------------- |
+| `classes`         | `DatePickerClasses`     | —           | Classes for picker regions.                                       |
+| `color`           | `CalendarColor`         | `"primary"` | Accent color.                                                     |
+| `customProps`     | `DatePickerCustomProps` | —           | Extra props for internal parts.                                   |
+| `defaultValue`    | `DatePickerModel`       | `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.                            |
+| `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.                                         |
+| `multiple`        | `boolean`               | `false`     | Allows selecting multiple dates.                                  |
+| `range`           | `boolean`               | `false`     | Selects a date range.                                             |
+| `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`           | `DatePickerSlots`       | —           | Named slots (`day` on the calendar, `footer` for Cancel / Apply). |
+| `startOfWeek`     | `StartOfWeek`           | `0`         | First day of the week.                                            |
+| `timeZone`        | `string`                | —           | IANA time zone.                                                   |
+| `tokens`          | `DatePickerTokens`      | —           | Token overrides.                                                  |
+| `value`           | `DatePickerModel`       | —           | Controlled value.                                                 |
 
 ### v-model
 
@@ -72,6 +85,7 @@ import { DatePicker } from "@bridge-ui/vue/Components/DatePicker";
 
 | Event         | Payload                    | Description                                                             |
 | ------------- | -------------------------- | ----------------------------------------------------------------------- |
+| `v-on:apply`  | `()`                       | Emitted when Apply is pressed (`showFooter`).                           |
 | `v-on:cancel` | `()`                       | Emitted when Cancel is pressed.                                         |
 | `v-on:change` | `(value: DatePickerModel)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
 

package/docs/components/DateRangeField.md

@@ -40,28 +40,28 @@ On mobile, `drawer` / `modal` overlays use vertical dual-calendar layout when
 
 ### DateRangeField-specific
 
-| Prop              | Type                         | Default                               | Description                                                                       |
-| ----------------- | ---------------------------- | ------------------------------------- | --------------------------------------------------------------------------------- |
-| `classes`         | `DateRangeFieldClasses`      | —                                     | Classes for field / input regions.                                                |
-| `clearable`       | `boolean`                    | `true`                                | Whether the value can be cleared.                                                 |
-| `customProps`     | `DateRangeFieldCustomProps`  | —                                     | 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.                                            |
-| `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. 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.                                        |
-| `slots`           | `DateRangeFieldSlots`        | —                                     | 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                                                                       |
+| ----------------- | ---------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------- |
+| `classes`         | `DateRangeFieldClasses`      | —                                            | Classes for field / input regions.                                                |
+| `clearable`       | `boolean`                    | `true`                                       | Whether the value can be cleared.                                                 |
+| `customProps`     | `DateRangeFieldCustomProps`  | —                                            | 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.                                            |
+| `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. 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.                                        |
+| `slots`           | `DateRangeFieldSlots`        | —                                            | 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
 
@@ -76,12 +76,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/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. |