@bridge-ui/vue 0.0.11 → 0.1.0

package/dist/Utils/index.js

@@ -4,10 +4,10 @@ import { useBreakpoint as o } from "./useBreakpoint.js";
 import { useHoldRepeat as s } from "./useHoldRepeat.js";
 import { computed as c, defineComponent as l, toValue as u, unref as d } from "vue";
 import { get as f, isNil as p } from "es-toolkit/compat";
-import { resolveFieldShowFooter as m } from "@bridge-ui/core/Domain";
-import { createMergeNestedComponentProps as h, createMergePartBind as g, mergeBridgeUILayeredClasses as _, mergePropsWithBridgeUIDefaults as v } from "@bridge-ui/core/Utils";
+import { resolveFieldShowFooter as m, resolvePickerFill as h } from "@bridge-ui/core/Domain";
+import { createMergeNestedComponentProps as g, createMergePartBind as _, mergeBridgeUILayeredClasses as v, mergePropsWithBridgeUIDefaults as y } from "@bridge-ui/core/Utils";
 //#region src/Utils/index.ts
-function y(e) {
+function b(e) {
 	return l({
 		name: "HeadlessTestComponent",
 		setup() {
@@ -15,15 +15,15 @@ function y(e) {
 		}
 	});
 }
-var b = g("class"), x = h(b);
-function S({ props: t, libDefaults: n, componentName: r }) {
+var x = _("class"), S = g(x);
+function C({ props: t, libDefaults: n, componentName: r }) {
 	let i = e(), a = c(() => p(i) ? null : d(i.components));
 	return {
 		entry: c(() => {
 			if (r) return f(a.value, r);
 		}),
 		bridge: i,
-		merged: c(() => v({
+		merged: c(() => y({
 			libDefaults: n,
 			componentName: r,
 			props: u(t),
@@ -33,7 +33,7 @@ function S({ props: t, libDefaults: n, componentName: r }) {
 		components: a
 	};
 }
-function C({ overlay: t, showFooter: n, componentName: r }) {
+function w({ overlay: t, showFooter: n, componentName: r }) {
 	let i = e();
 	return c(() => {
 		let e = r ? f(d(i?.components), [
@@ -44,10 +44,21 @@ function C({ overlay: t, showFooter: n, componentName: r }) {
 		return m(u(n) ?? e, u(t));
 	});
 }
-function w({ entry: e, props: t }) {
-	return c(() => _(f(e.value, "classes"), u(t).classes));
+function T({ fill: t, overlay: n, componentName: r }) {
+	let i = e();
+	return c(() => {
+		let e = r ? f(d(i?.components), [
+			r,
+			"defaultProps",
+			"fill"
+		]) : void 0;
+		return h(u(t) ?? e, u(n));
+	});
+}
+function E({ entry: e, props: t }) {
+	return c(() => v(f(e.value, "classes"), u(t).classes));
 }
-function T(e) {
+function D(e) {
 	return f({
 		xs: "xs",
 		sm: "sm",
@@ -58,7 +69,7 @@ function T(e) {
 		"2xl": "lg"
 	}, e ?? "md");
 }
-function E(e) {
+function O(e) {
 	if (e instanceof HTMLElement) return e;
 	if (e && "$el" in e) {
 		let t = e.$el;
@@ -67,4 +78,4 @@ function E(e) {
 	return null;
 }
 //#endregion
-export { t as RenderFn, y as defineHeadlessComponent, n as hasNamedSlot, r as hasSlotOrProp, i as isPropPresent, x as mergeNestedComponentProps, b as mergePartBind, a as presentSlotNames, T as resolveFieldAdornmentIconSize, E as resolveVnodeRefElement, o as useBreakpoint, S as useBridgeUIComponent, w as useBridgeUIMergedRegistryClasses, C as useFieldShowFooter, s as useHoldRepeat };
+export { t as RenderFn, b as defineHeadlessComponent, n as hasNamedSlot, r as hasSlotOrProp, i as isPropPresent, S as mergeNestedComponentProps, x as mergePartBind, a as presentSlotNames, D as resolveFieldAdornmentIconSize, O as resolveVnodeRefElement, o as useBreakpoint, C as useBridgeUIComponent, E as useBridgeUIMergedRegistryClasses, w as useFieldShowFooter, s as useHoldRepeat, T as usePickerFill };

package/docs/components/BaseField.md

@@ -5,7 +5,7 @@
 Shared vertical field chrome (label, corner, start/end slots, description,
 error message) for OtpField, Slider, and similar controls.
 
-Control tokens stay on the parent (`tokens.size`, `tokens.invalidated`, …).
+Control tokens stay on the parent (`tokens.size`, …).
 
 ## Import
 

package/docs/components/BridgeUIProvider.md

@@ -114,9 +114,9 @@ app.use(
       },
       Checkbox: {
         tokens: {
-          formControl: {
-            invalidated: {
-              errorMessage: "text-error-700 dark:text-error-300",
+          color: {
+            error: {
+              checked: "bg-error-700 border-error-700",
             },
           },
         },

package/docs/components/Calendar.md

@@ -56,6 +56,8 @@ import { Calendar } from "@bridge-ui/vue/Components/Calendar";
 | `disableDates`    | `Date[]`              | —           | Dates that cannot be selected.                            |
 | `disableMonths`   | `number[]`            | —           | Month indexes (`0`–`11`) 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 the month selector and month panel.                 |
 | `hideOutsideDays` | `boolean`             | `false`     | Hides days that fall outside the displayed month.         |
 | `hideWeekdays`    | `boolean`             | `false`     | Hides weekday labels on the date panel.                   |

package/docs/components/CalendarDate.md

@@ -35,6 +35,7 @@ import { CalendarDate } from "@bridge-ui/vue/Components/CalendarDate";
 | `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.         |
 | `hideOutsideDays` | `boolean`                 | `false`     | Hides days that fall outside the displayed month. |
 | `hideWeekdays`    | `boolean`                 | `false`     | Hides the weekday header row.                     |
 | `maxDate`         | `Date`                    | —           | Latest selectable date.                           |

package/docs/components/CalendarMonth.md

@@ -25,6 +25,7 @@ import { CalendarMonth } from "@bridge-ui/vue/Components/CalendarMonth";
 | `customProps`   | `CalendarMonthCustomProps` | —            | Extra props for internal parts.                      |
 | `disabled`      | `boolean`                  | `false`      | Disables the entire month grid.                      |
 | `disableMonths` | `number[]`                 | —            | Month indexes that cannot be selected.               |
+| `error`         | `boolean`                  | `false`      | Applies the error color palette to tiles.            |
 | `maxDate`       | `Date`                     | —            | Latest selectable date (bounds months for `year`).   |
 | `minDate`       | `Date`                     | —            | Earliest selectable date (bounds months for `year`). |
 | `readOnly`      | `boolean`                  | `false`      | Prevents selection.                                  |

package/docs/components/CalendarRange.md

@@ -46,6 +46,8 @@ import { CalendarRange } from "@bridge-ui/vue/Components/CalendarRange";
 | `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 the shared month selector and month panel.            |
 | `hideOutsideDays` | `boolean`                    | `false`        | Hides days outside the displayed month on both date panels. |
 | `hideWeekdays`    | `boolean`                    | `false`        | Hides weekday labels on both date panels.                   |

package/docs/components/CalendarYear.md

@@ -18,22 +18,23 @@ 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.                           |
+| `tokens`       | `CalendarYearTokens`      | —           | Token overrides.                          |
+| `value`        | `number`                  | —           | Selected year.                            |
 
 ### v-model
 

package/docs/components/DateField.md

@@ -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

@@ -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.                                             |

package/docs/components/DateRangeField.md

@@ -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

@@ -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.                                              |

package/docs/components/DateTimeField.md

@@ -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

@@ -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.                                             |

package/docs/components/DateTimeRangeField.md

@@ -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
 

package/docs/components/DateTimeRangePicker.md

@@ -35,6 +35,8 @@ import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePick
 | `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.                                              |

package/docs/components/FieldOverlay.md

@@ -1,9 +1,10 @@
 # FieldOverlay
 
 Switches between `Menu`, `Modal`, and `Drawer` shells for field pickers and listboxes.
-Dialog shells (`modal` / `drawer`) always center the picker and size the drawer
-panel to its content (up to `90dvh`) so dual-month and dual-time pickers are not
-clipped.
+Dialog shells size to the picker: `modal` uses `w-fit` up to the viewport;
+`drawer` is full width and up to `90dvh`, and scrolls horizontally when dual
+calendars or time columns overflow. Nested pickers flush the bottom radius in a
+drawer so the shell meets the screen edge.
 
 ## Import
 

package/docs/components/FormControl.md

@@ -4,7 +4,7 @@
 
 Low-level form control chrome (labels, description, error) for Checkbox, Radio, and Switch.
 
-Control tokens stay on the parent (`tokens.color`, `tokens.invalidated`, …).
+Control tokens stay on the parent (`tokens.color`, …).
 
 ## Import