npm - @bridge-ui/vue - Versions diffs - 0.0.11 → 0.1.1 - Mend

@bridge-ui/vue 0.0.11 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/docs/components/CalendarYear.md CHANGED Viewed

@@ -18,22 +18,22 @@ import { CalendarYear } from "@bridge-ui/vue/Components/CalendarYear";
 ## Props
-| Prop           | Type                      | Default     | Description                      |
-| -------------- | ------------------------- | ----------- | -------------------------------- |
-| `classes`      | `CalendarYearClasses`     | —           | Classes for calendar regions.    |
-| `color`        | `CalendarColor`           | `"primary"` | Accent color for year tiles.     |
-| `customProps`  | `CalendarYearCustomProps` | —           | Extra props for internal parts.  |
-| `disabled`     | `boolean`                 | `false`     | Disables the entire year grid.   |
-| `disableYears` | `number[]`                | —           | Years that cannot be selected.   |
-| `maxDate`      | `Date`                    | —           | Latest selectable date.          |
-| `minDate`      | `Date`                    | —           | Earliest selectable date.        |
-| `pageSize`     | `number`                  | `15`        | How many years to show per page. |
-| `readOnly`     | `boolean`                 | `false`     | Prevents selection.              |
-| `rounded`      | `CalendarRounded`         | `"md"`      | Border radius of year tiles.     |
-| `startYear`    | `number`                  | —           | First year of the visible page.  |
-| `timeZone`     | `string`                  | —           | IANA time zone.                  |
-| `tokens`       | `CalendarYearTokens`      | —           | Token overrides.                 |
-| `value`        | `number`                  | —           | Selected year.                   |
+| Prop           | Type                      | Default     | Description                               |
+| -------------- | ------------------------- | ----------- | ----------------------------------------- |
+| `classes`      | `CalendarYearClasses`     | —           | Classes for calendar regions.             |
+| `color`        | `CalendarColor`           | `"primary"` | Accent color for year tiles.              |
+| `customProps`  | `CalendarYearCustomProps` | —           | Extra props for internal parts.           |
+| `disabled`     | `boolean`                 | `false`     | Disables the entire year grid.            |
+| `disableYears` | `number[]`                | —           | Years that cannot be selected.            |
+| `error`        | `boolean`                 | `false`     | Applies the error color palette to tiles. |
+| `maxDate`      | `Date`                    | —           | Latest selectable date.                   |
+| `minDate`      | `Date`                    | —           | Earliest selectable date.                 |
+| `pageSize`     | `number`                  | `15`        | How many years to show per page.          |
+| `readOnly`     | `boolean`                 | `false`     | Prevents selection.                       |
+| `rounded`      | `CalendarRounded`         | `"md"`      | Border radius of year tiles.              |
+| `startYear`    | `number`                  | —           | First year of the visible page.           |
+| `timeZone`     | `string`                  | —           | IANA time zone.                           |
+| `value`        | `number`                  | —           | Selected year.                            |
 ### v-model
@@ -42,6 +42,8 @@ import { CalendarYear } from "@bridge-ui/vue/Components/CalendarYear";
 | `modelValue`        | `number`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: number) => void` | —       | Emitted when `v-model` should update. |
+Calendar chrome tokens live on `components.Calendar` (`color`, `day`, `rounded`).
 ## Events
 | Event         | Payload          | Description                      |

package/docs/components/ColorField.md ADDED Viewed

@@ -0,0 +1,93 @@
+# ColorField
+Form field that opens a `ColorPicker` in an overlay (`auto` by default: `menu` on desktop, bottom `drawer` on mobile). Extends FormField props. Shows a start swatch for the selected color. Uses the semantic `palette` icon by default.
+## Import
+```ts
+import { ColorField } from "@bridge-ui/vue/Components/ColorField";
+```
+## Examples
+### Usage
+```vue
+<ColorField label="Brand color" />
+<ColorField label="Brand" v-model="color" />
+<ColorField error label="Color" error-message="Pick a valid color." />
+```
+Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+The input is read-only by default (picker only). Set `editable` to unlock typing; typed text is parsed on blur or Enter:
+```vue
+<ColorField editable label="Color" />
+```
+### Output format
+```vue
+<ColorField label="Hex" format="hex" v-model="color" />
+<ColorField label="RGBA" format="rgba" v-model="color" />
+```
+### customProps
+```vue
+<ColorField
+  label="Color"
+  :custom-props="{
+    input: { name: 'color' },
+    colorPicker: { root: { 'data-testid': 'color-picker' } },
+  }"
+/>
+```
+## Props
+### ColorField-specific
+| Prop           | Type                    | Default                                      | Description                                                                        |
+| -------------- | ----------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `alpha`        | `boolean`               | —                                            | Shows the alpha slider. Unset: `true` for `hexa` / `rgba` / `hsla`.                |
+| `classes`      | `ColorFieldClasses`     | —                                            | Classes for field / input regions.                                                 |
+| `clearable`    | `boolean`               | `true`                                       | Whether the value can be cleared.                                                  |
+| `customProps`  | `ColorFieldCustomProps` | —                                            | Extra props for internal parts.                                                    |
+| `defaultValue` | `string \| null`        | `null`                                       | Uncontrolled initial value.                                                        |
+| `editable`     | `boolean`               | `false`                                      | Unlocks the input. Typed text is parsed on blur or Enter.                          |
+| `fill`         | `boolean`               | —                                            | Fills the overlay width. Unset: `true` for `drawer`, `false` for `menu` / `modal`. |
+| `format`       | `ColorFormat`           | `"hex"`                                      | Serialized output: `hex`, `hexa`, `rgb`, `rgba`, `hsl`, `hsla`.                    |
+| `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.                                         |
+| `showSwatch`   | `boolean`               | `true`                                       | Shows the selected color at the start of the field.                                |
+| `swatches`     | `string[]`              | —                                            | Preset colors forwarded to the nested picker.                                      |
+### v-model
+| Prop / Event        | Type                              | Default | Description                           |
+| ------------------- | --------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `string \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: string \| null) => void` | —       | Emitted when `v-model` should update. |
+### Inherited from FormField
+See [FormField](./FormField.md).
+## Events
+| 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: string \| null)` | Emitted when the color 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
+ColorPicker, FormField, FieldOverlay, Menu, Modal, Drawer

package/docs/components/ColorPicker.md ADDED Viewed

@@ -0,0 +1,78 @@
+# ColorPicker
+Inline color picker with a saturation/brightness area, hue slider, optional alpha, and preset swatches. Optional Cancel / Apply footer.
+## Import
+```ts
+import { ColorPicker } from "@bridge-ui/vue/Components/ColorPicker";
+```
+## Examples
+### Usage
+```vue
+<ColorPicker />
+<ColorPicker :value="color" v-on:change="color = $event" />
+<ColorPicker
+  alpha
+  show-footer
+  format="rgba"
+  :value="color"
+  v-on:change="color = $event"
+/>
+```
+### Preset swatches
+```vue
+<ColorPicker
+  :value="color"
+  v-on:change="color = $event"
+  :swatches="['#0f766e', '#2563eb', '#dc2626', '#000000']"
+/>
+```
+### Output format
+```vue
+<ColorPicker format="hex" :value="color" v-on:change="color = $event" />
+<ColorPicker format="rgb" :value="color" v-on:change="color = $event" />
+<ColorPicker format="rgba" :value="color" v-on:change="color = $event" />
+```
+## Props
+| Prop           | Type                     | Default | Description                                                         |
+| -------------- | ------------------------ | ------- | ------------------------------------------------------------------- |
+| `alpha`        | `boolean`                | —       | Shows the alpha slider. Unset: `true` for `hexa` / `rgba` / `hsla`. |
+| `classes`      | `ColorPickerClasses`     | —       | Classes for picker regions.                                         |
+| `customProps`  | `ColorPickerCustomProps` | —       | Extra props for internal parts.                                     |
+| `defaultValue` | `string \| null`         | `null`  | Uncontrolled initial value.                                         |
+| `disabled`     | `boolean`                | `false` | Disables the picker.                                                |
+| `fill`         | `boolean`                | `false` | Fills the container width.                                          |
+| `format`       | `ColorFormat`            | `"hex"` | Serialized output: `hex`, `hexa`, `rgb`, `rgba`, `hsl`, `hsla`.     |
+| `readOnly`     | `boolean`                | `false` | Prevents selection.                                                 |
+| `rounded`      | `ColorPickerRounded`     | `"md"`  | Border radius of the picker shell and swatches.                     |
+| `showFooter`   | `boolean`                | `false` | Shows Cancel / Apply. Selection is draft until Apply.               |
+| `swatches`     | `string[]`               | —       | Preset colors shown below the sliders.                              |
+| `value`        | `string \| null`         | —       | Controlled value.                                                   |
+Picker tokens live on `components.ColorPicker` (`rounded`, `size`).
+## Events
+| Event         | Payload                   | Description                                                             |
+| ------------- | ------------------------- | ----------------------------------------------------------------------- |
+| `v-on:apply`  | `()`                      | Emitted when Apply is pressed (`showFooter`).                           |
+| `v-on:cancel` | `()`                      | Emitted when Cancel is pressed.                                         |
+| `v-on:change` | `(value: string \| null)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
+## Related components
+ColorField, FormField, FieldOverlay

package/docs/components/DateField.md CHANGED Viewed

@@ -48,8 +48,15 @@ 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` for `modal` / `drawer` overlays (`false` for `menu`).
+When unset, `fill` defaults to `true` for `drawer` overlays (`false` for `menu` / `modal`).
 Apply commits and closes the overlay; Cancel discards the draft and closes.
+The input is read-only by default (picker only). Set `editable` to unlock typing. The field does not parse or commit typed text — handle that in your own component if needed:
+```vue
+<DateField editable label="Date" />
+```
 ### Custom footer
 Replaces Cancel / Apply on the nested picker. `apply()` commits and closes; `cancel()` discards and closes.
@@ -77,6 +84,8 @@ Replaces Cancel / Apply on the nested picker. `apply()` commits and closes; `can
 | `disableDates`    | `Date[]`               | —                                            | Dates that cannot be selected.                                                        |
 | `disableMonths`   | `number[]`             | —                                            | Month indexes that cannot be selected.                                                |
 | `disableYears`    | `number[]`             | —                                            | Years that cannot be selected.                                                        |
+| `editable`        | `boolean`              | `false`                                      | Unlocks the input. Does not parse or commit typed text.                               |
+| `fill`            | `boolean`              | —                                            | Fills the overlay width. Unset: `true` for `drawer`, `false` for `menu` / `modal`.    |
 | `hideMonths`      | `boolean`              | `false`                                      | Hides month navigation / panel.                                                       |
 | `hideOutsideDays` | `boolean`              | `false`                                      | Hides days that fall outside the displayed month.                                     |
 | `hideWeekdays`    | `boolean`              | `false`                                      | Hides weekday labels.                                                                 |

package/docs/components/DatePicker.md CHANGED Viewed

@@ -57,6 +57,8 @@ Call `apply()` to commit and close the overlay, or `cancel()` to discard and clo
 | `disableDates`    | `Date[]`                | —           | Dates that cannot be selected.                                    |
 | `disableMonths`   | `number[]`              | —           | Month indexes that cannot be selected.                            |
 | `disableYears`    | `number[]`              | —           | Years that cannot be selected.                                    |
+| `error`           | `boolean`               | `false`     | Applies the error color palette to tiles.                         |
+| `fill`            | `boolean`               | `false`     | Fills the container width.                                        |
 | `hideMonths`      | `boolean`               | `false`     | Hides month navigation / panel.                                   |
 | `hideOutsideDays` | `boolean`               | `false`     | Hides days that fall outside the displayed month.                 |
 | `hideWeekdays`    | `boolean`               | `false`     | Hides weekday labels.                                             |
@@ -71,7 +73,6 @@ Call `apply()` to commit and close the overlay, or `cancel()` to discard and clo
 | `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
@@ -81,6 +82,8 @@ Call `apply()` to commit and close the overlay, or `cancel()` to discard and clo
 | `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
+Calendar tokens live on `components.Calendar` (`color`, `day`, `rounded`).
 ## Events
 | Event         | Payload                    | Description                                                             |

package/docs/components/DateRangeField.md CHANGED Viewed

@@ -24,6 +24,12 @@ Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `au
 On mobile, `drawer` / `modal` overlays use vertical dual-calendar layout when
 `orientation` is unset.
+The input is read-only by default (picker only). Set `editable` to unlock typing. The field does not parse or commit typed text — handle that in your own component if needed:
+```vue
+<DateRangeField editable label="Stay" />
+```
 ### customProps
 ```vue
@@ -40,28 +46,30 @@ 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` 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.                                                                 |
+| 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.                                                     |
+| `editable`        | `boolean`                    | `false`                                      | Unlocks the input. Does not parse or commit typed text.                            |
+| `fill`            | `boolean`                    | —                                            | Fills the overlay width. Unset: `true` for `drawer`, `false` for `menu` / `modal`. |
+| `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

package/docs/components/DateRangePicker.md CHANGED Viewed

@@ -35,6 +35,8 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 | `disableDates`    | `Date[]`                     | —              | Dates that cannot be selected.                                     |
 | `disableMonths`   | `number[]`                   | —              | Month indexes that cannot be selected.                             |
 | `disableYears`    | `number[]`                   | —              | Years that cannot be selected.                                     |
+| `error`           | `boolean`                    | `false`        | Applies the error color palette to tiles.                          |
+| `fill`            | `boolean`                    | `false`        | Fills the container width.                                         |
 | `hideMonths`      | `boolean`                    | `false`        | Hides month navigation / panel.                                    |
 | `hideOutsideDays` | `boolean`                    | `false`        | Hides days that fall outside the displayed month.                  |
 | `hideWeekdays`    | `boolean`                    | `false`        | Hides weekday labels.                                              |
@@ -48,7 +50,6 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 | `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
@@ -58,6 +59,8 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 | `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
+Calendar tokens live on `components.Calendar` (`color`, `day`, `rounded`).
 ## Events
 | Event         | Payload                           | Description                                                             |

package/docs/components/DateTimeField.md CHANGED Viewed

@@ -21,6 +21,11 @@ import { DateTimeField } from "@bridge-ui/vue/Components/DateTimeField";
 ```
 Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+The input is read-only by default (picker only). Set `editable` to unlock typing. The field does not parse or commit typed text — handle that in your own component if needed:
+```vue
+<DateTimeField editable label="When" />
+```
 ### customProps
@@ -38,34 +43,36 @@ 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` 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.                                          |
+| 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.                                                     |
+| `editable`        | `boolean`                  | `false`                                      | Unlocks the input. Does not parse or commit typed text.                            |
+| `fill`            | `boolean`                  | —                                            | Fills the overlay width. Unset: `true` for `drawer`, `false` for `menu` / `modal`. |
+| `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

package/docs/components/DateTimePicker.md CHANGED Viewed

@@ -36,6 +36,8 @@ import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
 | `disableMonths`   | `number[]`                  | —           | Month indexes that cannot be selected.                            |
 | `disableTimes`    | `Date[]`                    | —           | Times that cannot be selected.                                    |
 | `disableYears`    | `number[]`                  | —           | Years that cannot be selected.                                    |
+| `error`           | `boolean`                   | `false`     | Applies the error color palette to tiles.                         |
+| `fill`            | `boolean`                   | `false`     | Fills the container width.                                        |
 | `hideMonths`      | `boolean`                   | `false`     | Hides month navigation / panel.                                   |
 | `hideOutsideDays` | `boolean`                   | `false`     | Hides days that fall outside the displayed month.                 |
 | `hideWeekdays`    | `boolean`                   | `false`     | Hides weekday labels.                                             |
@@ -52,7 +54,6 @@ import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
 | `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
@@ -62,6 +63,8 @@ import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
 | `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
+Calendar tokens live on `components.Calendar`. Time panel tokens live on `components.TimePanel`.
 ## Events
 | Event         | Payload                 | Description                                                             |

package/docs/components/DateTimeRangeField.md CHANGED Viewed

@@ -20,6 +20,12 @@ import { DateTimeRangeField } from "@bridge-ui/vue/Components/DateTimeRangeField
 Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+The input is read-only by default (picker only). Set `editable` to unlock typing. The field does not parse or commit typed text — handle that in your own component if needed:
+```vue
+<DateTimeRangeField editable label="Event" />
+```
 ### customProps
 ```vue
@@ -36,34 +42,36 @@ 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` 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.                                                                 |
+| 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.                                                     |
+| `editable`        | `boolean`                       | `false`                                      | Unlocks the input. Does not parse or commit typed text.                            |
+| `fill`            | `boolean`                       | —                                            | Fills the overlay width. Unset: `true` for `drawer`, `false` for `menu` / `modal`. |
+| `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