@bridge-ui/vue 0.0.11 → 0.1.1

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.                                              |
@@ -52,7 +54,6 @@ import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePick
 | `slots`           | `DateTimeRangePickerSlots`       | —              | Named slots (`day` on the calendars, `footer` for Cancel / Apply). |
 | `startOfWeek`     | `StartOfWeek`                    | `0`            | First day of the week.                                             |
 | `timeZone`        | `string`                         | —              | IANA time zone.                                                    |
-| `tokens`          | `DateTimeRangePickerTokens`      | —              | Token overrides.                                                   |
 | `value`           | `DateRangeValue \| null`         | —              | Controlled value (`[start, end]` date-times).                      |
 
 ### v-model
@@ -62,6 +63,8 @@ import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePick
 | `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`. Time panel tokens live on `components.TimePanel`.
+
 ## Events
 
 | Event         | Payload                           | Description                                                             |

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
 
@@ -99,4 +100,4 @@ overlay. Use the picker slot callbacks in custom footers so Apply still commits.
 
 ## Related components
 
-Menu, Modal, Drawer, Select, Autocomplete, DateField, TimeField, DateTimeField, DateRangeField, TimeRangeField, DateTimeRangeField, Listbox
+Menu, Modal, Drawer, Select, Autocomplete, DateField, TimeField, DateTimeField, DateRangeField, TimeRangeField, DateTimeRangeField, ColorField, Listbox

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
 

package/docs/components/Select.md

@@ -170,7 +170,7 @@ When unset, `showFooter` defaults to `true` for `modal` / `drawer` overlays (`fa
 
 ### Inherited from FormField
 
-See [FormField](./FormField.md) (building-block chrome). Field tokens live on `components.Select` (`size`, `color`, `rounded`, `variant`, …). Dropdown option tokens are nested under `components.Select.tokens.listbox`.
+See [FormField](./FormField.md) (building-block chrome). Field tokens live on `components.Select` (`size`, `color`, `rounded`, `variant`, …). Dropdown option tokens live on `components.Listbox`.
 
 ## Slots
 

package/docs/components/Stepper.md

@@ -0,0 +1,60 @@
+# Stepper
+
+Multi-step flow indicator for checkout, onboarding, and wizards. Shows progress through ordered steps; optional click-to-navigate when steps are completed or `linear` is off. Compose with `Step`.
+
+Wizard footer actions (`Next` / `Back`) stay in the app — `Stepper` is the indicator (plus optional vertical step bodies). A labeled progress bar is `Progress`, not `Stepper`.
+
+## Import
+
+```ts
+import { Stepper } from "@bridge-ui/vue/Components/Stepper";
+import { Step } from "@bridge-ui/vue/Components/Step";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Stepper v-model="active">
+  <Step label="Account" />
+  <Step label="Profile" />
+  <Step label="Confirm" />
+</Stepper>
+```
+
+### Vertical
+
+```vue
+<Stepper v-model="active" orientation="vertical">
+  <Step label="Cart" description="Review items">
+    Cart details…
+  </Step>
+  <Step label="Shipping" description="Address">
+    Shipping form…
+  </Step>
+  <Step label="Pay" description="Payment">
+    Payment form…
+  </Step>
+</Stepper>
+```
+
+### Non-linear
+
+```vue
+<Stepper :linear="false" v-model="active">
+  <Step label="Account" />
+  <Step label="Profile" />
+  <Step label="Confirm" />
+</Stepper>
+```
+
+### Error and disabled
+
+```vue
+<Stepper v-model="active">
+  <Step label="Account" />
+  <Step error label="Profile" />
+  <Step disabled label="Confirm" />
+</Stepper>
+```

package/docs/components/TimeField.md

@@ -21,6 +21,11 @@ import { TimeField } from "@bridge-ui/vue/Components/TimeField";
 ```
 
 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
+<TimeField editable label="Time" />
+```
 
 ### customProps
 
@@ -38,23 +43,25 @@ Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `au
 
 ### TimeField-specific
 
-| Prop           | Type                   | Default                                      | Description                                          |
-| -------------- | ---------------------- | -------------------------------------------- | ---------------------------------------------------- |
-| `ampm`         | `boolean`              | `false`                                      | Uses a 12-hour clock with an AM/PM column.           |
-| `classes`      | `TimeFieldClasses`     | —                                            | Classes for field / input regions.                   |
-| `clearable`    | `boolean`              | `true`                                       | Whether the value can be cleared.                    |
-| `customProps`  | `TimeFieldCustomProps` | —                                            | Extra props for internal parts.                      |
-| `defaultValue` | `Date \| null`         | `null`                                       | Uncontrolled initial value.                          |
-| `disableTimes` | `Date[]`               | —                                            | Times that cannot be selected.                       |
-| `interval`     | `number`               | `1`                                          | Minute step between options.                         |
-| `maxTime`      | `Date`                 | —                                            | Latest selectable time.                              |
-| `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`        | `TimeFieldSlots`       | —                                            | Named slots (`FormField` slots + footer).            |
-| `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`      | `TimeFieldClasses`     | —                                            | Classes for field / input regions.                                                 |
+| `clearable`    | `boolean`              | `true`                                       | Whether the value can be cleared.                                                  |
+| `customProps`  | `TimeFieldCustomProps` | —                                            | Extra props for internal parts.                                                    |
+| `defaultValue` | `Date \| null`         | `null`                                       | Uncontrolled initial value.                                                        |
+| `disableTimes` | `Date[]`               | —                                            | Times 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`. |
+| `interval`     | `number`               | `1`                                          | Minute step between options.                                                       |
+| `maxTime`      | `Date`                 | —                                            | Latest selectable time.                                                            |
+| `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`        | `TimeFieldSlots`       | —                                            | Named slots (`FormField` slots + footer).                                          |
+| `timeZone`     | `string`               | —                                            | IANA time zone.                                                                    |
+| `value`        | `Date \| null`         | —                                            | Controlled value.                                                                  |
 
 ### v-model
 

package/docs/components/TimePanel.md

@@ -28,6 +28,8 @@ import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
 | `customProps`  | `TimePanelCustomProps` | —           | Extra props for internal parts.                 |
 | `disabled`     | `boolean`              | `false`     | Disables the entire panel.                      |
 | `disableTimes` | `Date[]`               | —           | Times that cannot be selected.                  |
+| `error`        | `boolean`              | `false`     | Applies the error color palette to tiles.       |
+| `fill`         | `boolean`              | `false`     | Fills the container width.                      |
 | `interval`     | `number`               | `1`         | Minute step between options.                    |
 | `maxTime`      | `Date`                 | —           | Latest selectable time.                         |
 | `minTime`      | `Date`                 | —           | Earliest selectable time.                       |
@@ -35,7 +37,6 @@ import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
 | `rounded`      | `CalendarRounded`      | `"md"`      | Border radius of time tiles.                    |
 | `showSeconds`  | `boolean`              | `false`     | Shows seconds in the panel and formatted value. |
 | `timeZone`     | `string`               | —           | IANA time zone.                                 |
-| `tokens`       | `TimePanelTokens`      | —           | Token overrides.                                |
 | `value`        | `Date \| null`         | —           | Selected time (`Date` wall clock).              |
 
 ### v-model
@@ -45,6 +46,8 @@ import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
 | `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
+
 ## Events
 
 | Event         | Payload                 | Description                    |

package/docs/components/TimePicker.md

@@ -31,6 +31,8 @@ import { TimePicker } from "@bridge-ui/vue/Components/TimePicker";
 | `defaultValue` | `Date \| null`          | `null`      | Uncontrolled initial value.                           |
 | `disabled`     | `boolean`               | `false`     | Disables the picker.                                  |
 | `disableTimes` | `Date[]`                | —           | Times that cannot be selected.                        |
+| `error`        | `boolean`               | `false`     | Applies the error color palette to tiles.             |
+| `fill`         | `boolean`               | `false`     | Fills the container width.                            |
 | `interval`     | `number`                | `1`         | Minute step between options.                          |
 | `maxTime`      | `Date`                  | —           | Latest selectable time.                               |
 | `minTime`      | `Date`                  | —           | Earliest selectable time.                             |
@@ -40,7 +42,6 @@ import { TimePicker } from "@bridge-ui/vue/Components/TimePicker";
 | `showSeconds`  | `boolean`               | `false`     | Shows seconds in the panel and formatted value.       |
 | `slots`        | `TimePickerSlots`       | —           | Named slots (`footer` for Cancel / Apply).            |
 | `timeZone`     | `string`                | —           | IANA time zone.                                       |
-| `tokens`       | `TimePickerTokens`      | —           | Token overrides.                                      |
 | `value`        | `Date \| null`          | —           | Controlled value.                                     |
 
 ### v-model
@@ -50,6 +51,8 @@ import { TimePicker } from "@bridge-ui/vue/Components/TimePicker";
 | `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
+
 ## Events
 
 | Event         | Payload                 | Description                                                             |

package/docs/components/TimeRangeField.md

@@ -20,6 +20,12 @@ import { TimeRangeField } from "@bridge-ui/vue/Components/TimeRangeField";
 
 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
+<TimeRangeField editable label="Hours" />
+```
+
 ### customProps
 
 ```vue
@@ -36,23 +42,25 @@ Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `au
 
 ### TimeRangeField-specific
 
-| Prop           | Type                        | Default                                      | Description                                          |
-| -------------- | --------------------------- | -------------------------------------------- | ---------------------------------------------------- |
-| `ampm`         | `boolean`                   | `false`                                      | Uses a 12-hour clock with an AM/PM column.           |
-| `classes`      | `TimeRangeFieldClasses`     | —                                            | Classes for field / input regions.                   |
-| `clearable`    | `boolean`                   | `true`                                       | Whether the value can be cleared.                    |
-| `customProps`  | `TimeRangeFieldCustomProps` | —                                            | Extra props for internal parts.                      |
-| `defaultValue` | `TimeRangeValue \| null`    | `null`                                       | Uncontrolled initial value.                          |
-| `disableTimes` | `Date[]`                    | —                                            | Times that cannot be selected.                       |
-| `interval`     | `number`                    | `1`                                          | Minute step between options.                         |
-| `maxTime`      | `Date`                      | —                                            | Latest selectable time.                              |
-| `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`        | `TimeRangeFieldSlots`       | —                                            | Named slots (`FormField` slots + footer).            |
-| `timeZone`     | `string`                    | —                                            | IANA time zone.                                      |
-| `value`        | `TimeRangeValue \| null`    | —                                            | Controlled value.                                    |
+| Prop           | Type                        | Default                                      | Description                                                                        |
+| -------------- | --------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `ampm`         | `boolean`                   | `false`                                      | Uses a 12-hour clock with an AM/PM column.                                         |
+| `classes`      | `TimeRangeFieldClasses`     | —                                            | Classes for field / input regions.                                                 |
+| `clearable`    | `boolean`                   | `true`                                       | Whether the value can be cleared.                                                  |
+| `customProps`  | `TimeRangeFieldCustomProps` | —                                            | Extra props for internal parts.                                                    |
+| `defaultValue` | `TimeRangeValue \| null`    | `null`                                       | Uncontrolled initial value.                                                        |
+| `disableTimes` | `Date[]`                    | —                                            | Times 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`. |
+| `interval`     | `number`                    | `1`                                          | Minute step between options.                                                       |
+| `maxTime`      | `Date`                      | —                                            | Latest selectable time.                                                            |
+| `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`        | `TimeRangeFieldSlots`       | —                                            | Named slots (`FormField` slots + footer).                                          |
+| `timeZone`     | `string`                    | —                                            | IANA time zone.                                                                    |
+| `value`        | `TimeRangeValue \| null`    | —                                            | Controlled value.                                                                  |
 
 ### v-model
 

package/docs/components/TimeRangePicker.md

@@ -32,6 +32,8 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `disabled`     | `boolean`                    | `false`        | Disables the picker.                                  |
 | `disableTimes` | `Date[]`                     | —              | Times that cannot be selected.                        |
 | `endTitle`     | `string`                     | `"End time"`   | Label above the end time panel.                       |
+| `error`        | `boolean`                    | `false`        | Applies the error color palette to tiles.             |
+| `fill`         | `boolean`                    | `false`        | Fills the container width.                            |
 | `interval`     | `number`                     | `1`            | Minute step between options.                          |
 | `maxTime`      | `Date`                       | —              | Latest selectable time.                               |
 | `minTime`      | `Date`                       | —              | Earliest selectable time.                             |
@@ -43,7 +45,6 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `slots`        | `TimeRangePickerSlots`       | —              | Named slots (`footer` for Cancel / Apply).            |
 | `startTitle`   | `string`                     | `"Start time"` | Label above the start time panel.                     |
 | `timeZone`     | `string`                     | —              | IANA time zone.                                       |
-| `tokens`       | `TimeRangePickerTokens`      | —              | Token overrides.                                      |
 | `value`        | `TimeRangeValue \| null`     | —              | Controlled value (`[start, end]`).                    |
 
 ### v-model
@@ -53,6 +54,8 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `modelValue`        | `TimeRangeValue \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: TimeRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
+
 ## Events
 
 | Event         | Payload                           | Description                                                             |

package/docs/examples/icon-fontawesome.ts

@@ -24,6 +24,7 @@ import {
   faClock,
   faEye,
   faEyeSlash,
+  faPalette,
   faSpinner,
   faTriangleExclamation,
   faUpDown,
@@ -92,6 +93,7 @@ const icons = {
   loader: faSpinner,
   info: faCircleInfo,
   eyeOff: faEyeSlash,
+  palette: faPalette,
   error: faCircleXmark,
   success: faCircleCheck,
   chevronUp: faChevronUp,

package/docs/examples/icon-heroicons.ts

@@ -22,6 +22,7 @@ import {
   EyeIcon,
   EyeSlashIcon,
   InformationCircleIcon,
+  SwatchIcon,
   UserIcon,
   XCircleIcon,
   XMarkIcon,
@@ -39,6 +40,7 @@ const icons = {
   check: CheckIcon,
   clock: ClockIcon,
   error: XCircleIcon,
+  palette: SwatchIcon,
   eyeOff: EyeSlashIcon,
   loader: ArrowPathIcon,
   success: CheckCircleIcon,

package/docs/examples/icon-lucide.ts

@@ -22,6 +22,7 @@ import {
   EyeOff,
   Info,
   Loader2,
+  Palette,
   TriangleAlert,
   User,
   X,
@@ -42,6 +43,7 @@ const icons = {
   error: CircleX,
   eyeOff: EyeOff,
   loader: Loader2,
+  palette: Palette,
   alert: CircleAlert,
   calendar: Calendar,
   success: CircleCheck,

package/docs/examples/icon-phosphor.ts

@@ -19,6 +19,7 @@ import {
   PhEye,
   PhEyeSlash,
   PhInfo,
+  PhPalette,
   PhSpinnerGap,
   PhUser,
   PhWarning,
@@ -41,6 +42,7 @@ const icons = {
   clock: PhClock,
   error: PhXCircle,
   eyeOff: PhEyeSlash,
+  palette: PhPalette,
   warning: PhWarning,
   loader: PhSpinnerGap,
   chevronUp: PhCaretUp,

package/docs/examples/icon-tabler.ts

@@ -22,6 +22,7 @@ import {
   IconEyeOff,
   IconInfoCircle,
   IconLoader2,
+  IconPalette,
   IconSelector,
   IconUser,
   IconX,
@@ -42,6 +43,7 @@ const icons = {
   eyeOff: IconEyeOff,
   loader: IconLoader2,
   info: IconInfoCircle,
+  palette: IconPalette,
   alert: IconAlertCircle,
   success: IconCircleCheck,
   chevronUp: IconChevronUp,

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.0.11",
+  "version": "0.1.1",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -83,7 +83,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@bridge-ui/core": "^0.0.11",
+    "@bridge-ui/core": "^0.1.1",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.50.0",
     "tailwind-merge": "^3.6.0"