@bridge-ui/vue 0.0.10 → 0.1.0

package/dist/augments.d.ts

@@ -28,14 +28,14 @@ import { SpinnerClasses, SpinnerProps } from './Components/Spinner';
 import { SwitchClasses, SwitchProps } from './Components/Switch';
 import { TextareaClasses, TextareaProps } from './Components/Textarea';
 import { TextFieldClasses, TextFieldProps } from './Components/TextField';
-declare module "@bridge-ui/core" {
+declare module "@bridge-ui/core/Config" {
     interface AlertConfigOverrides {
         classes: AlertClasses;
         defaultProps: Partial<Pick<AlertProps, "color" | "shadow" | "padding" | "rounded" | "variant">>;
     }
     interface AutocompleteConfigOverrides {
         classes: AutocompleteClasses;
-        defaultProps: Partial<Pick<AutocompleteProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "hideErrorMessage">>;
+        defaultProps: Partial<Pick<AutocompleteProps, "size" | "color" | "rounded" | "variant" | "showFooter" | "showErrorIcon" | "hideErrorMessage">>;
     }
     interface AvatarConfigOverrides {
         classes: AvatarClasses;
@@ -120,7 +120,7 @@ declare module "@bridge-ui/core" {
     }
     interface SelectConfigOverrides {
         classes: SelectClasses;
-        defaultProps: Partial<Pick<SelectProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "hideErrorMessage">>;
+        defaultProps: Partial<Pick<SelectProps, "size" | "color" | "rounded" | "variant" | "showFooter" | "showErrorIcon" | "hideErrorMessage">>;
     }
     interface SkeletonConfigOverrides {
         classes: SkeletonClasses;

package/dist/index.d.ts

@@ -86,6 +86,8 @@ export { NumberField, useNumberField } from './Components/NumberField';
 export type { NumberFieldClasses, NumberFieldCustomProps, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './Components/NumberField';
 export { OtpField, useOtpField } from './Components/OtpField';
 export type { OtpFieldClasses, OtpFieldCustomProps, OtpFieldEmits, OtpFieldOwnProps, OtpFieldProps, OtpFieldSlots, UseOtpFieldOptions, } from './Components/OtpField';
+export { Pagination, usePagination } from './Components/Pagination';
+export type { PaginationClasses, PaginationColorOverrides, PaginationCustomProps, PaginationEmits, PaginationOwnProps, PaginationProps, PaginationRoundedOverrides, PaginationSizeOverrides, PaginationSlots, PaginationVariantOverrides, } from './Components/Pagination';
 export { PasswordField, usePasswordField } from './Components/PasswordField';
 export type { PasswordFieldClasses, PasswordFieldCustomProps, PasswordFieldOwnProps, PasswordFieldProps, PasswordFieldSlots, } from './Components/PasswordField';
 export { Progress, useProgress } from './Components/Progress';
@@ -128,11 +130,16 @@ export { TimeRangeField, useTimeRangeField } from './Components/TimeRangeField';
 export type { TimeRangeFieldClasses, TimeRangeFieldCustomProps, TimeRangeFieldEmits, TimeRangeFieldOwnProps, TimeRangeFieldProps, TimeRangeFieldSlots, } from './Components/TimeRangeField';
 export { TimeRangePicker, useTimeRangePicker, } from './Components/TimeRangePicker';
 export type { TimeRangePickerClasses, TimeRangePickerColorOverrides, TimeRangePickerCustomProps, TimeRangePickerEmits, TimeRangePickerOwnProps, TimeRangePickerProps, TimeRangePickerRoundedOverrides, TimeRangePickerTokens, } from './Components/TimeRangePicker';
+export { TOGGLE_GROUP_INJECTION_KEY, ToggleGroup, useToggleGroup, } from './Components/ToggleGroup';
+export type { ToggleGroupClasses, ToggleGroupColorOverrides, ToggleGroupContextValue, ToggleGroupCustomProps, ToggleGroupEmits, ToggleGroupOrientationOverrides, ToggleGroupOwnProps, ToggleGroupProps, ToggleGroupRoundedOverrides, ToggleGroupSizeOverrides, ToggleGroupSlots, ToggleGroupTokenClasses, ToggleGroupVariantOverrides, } from './Components/ToggleGroup';
+export { ToggleItem, useToggleItem } from './Components/ToggleItem';
+export type { ToggleItemClasses, ToggleItemCustomProps, ToggleItemOwnProps, ToggleItemProps, ToggleItemSlots, } from './Components/ToggleItem';
 export { Tooltip, useTooltip } from './Components/Tooltip';
 export type { TooltipClasses, TooltipColorOverrides, TooltipCustomProps, TooltipEmits, TooltipOptions, TooltipOwnProps, TooltipProps, TooltipRoundedOverrides, TooltipSizeOverrides, TooltipSlots, } from './Components/Tooltip';
 export { BridgeUIProvider, createBridgeUI, useBridgeUI } from './Provider';
 export type { BridgeUIContextApi } from './Provider';
 export { useBreakpoint, useBridgeUIComponent, useBridgeUIMergedRegistryClasses, } from './Utils';
 export type { UseBreakpointOptions } from './Utils';
-export { BRIDGE_UI_DEFAULT_GLOBAL, SEMANTIC_ICON_NAMES, cn, mergeBridgeUIComponents, mergeBridgeUIGlobal, resolveBridgeUIOptions, resolveMessage, } from '@bridge-ui/core';
-export type { I18nAdapter, IconAdapter, SemanticIconNameOverrides, } from '@bridge-ui/core';
+export { SEMANTIC_ICON_NAMES, resolveMessage, type I18nAdapter, type IconAdapter, type SemanticIconNameOverrides, } from '@bridge-ui/core/Adapters';
+export { BRIDGE_UI_DEFAULT_GLOBAL, mergeBridgeUIComponents, mergeBridgeUIGlobal, resolveBridgeUIOptions, } from '@bridge-ui/core/Config';
+export { cn } from '@bridge-ui/core/Utils';

package/dist/index.js

@@ -90,48 +90,57 @@ import { useNumberField as Ge } from "./Components/NumberField/composables/useNu
 import Ke from "./Components/NumberField/NumberField.js";
 import { useOtpField as qe } from "./Components/OtpField/composables/useOtpField.js";
 import Je from "./Components/OtpField/OtpField.js";
-import { usePasswordField as Ye } from "./Components/PasswordField/composables/usePasswordField.js";
-import Xe from "./Components/PasswordField/PasswordField.js";
-import { useRadio as Ze } from "./Components/Radio/composables/useRadio.js";
-import Qe from "./Components/Radio/Radio.js";
-import $e from "./Components/Select/Select.js";
-import et from "./Components/Select/SelectOption.js";
-import { useSkeleton as tt } from "./Components/Skeleton/composables/useSkeleton.js";
-import nt from "./Components/Skeleton/Skeleton.js";
-import { useSlider as rt } from "./Components/Slider/composables/useSlider.js";
-import { useTooltip as it } from "./Components/Tooltip/composables/useTooltip.js";
-import at from "./Components/Tooltip/Tooltip.js";
-import ot from "./Components/Slider/Slider.js";
-import { useSnackbar as st } from "./Components/Snackbar/composables/useSnackbar.js";
-import ct from "./Components/Snackbar/Snackbar.js";
-import { useSpinner as lt } from "./Components/Spinner/composables/useSpinner.js";
-import ut from "./Components/Spinner/Spinner.js";
-import { useSwitch as dt } from "./Components/Switch/composables/useSwitch.js";
-import ft from "./Components/Switch/Switch.js";
-import { TABS_INJECTION_KEY as pt } from "./Components/Tabs/tabsInjectionKey.js";
-import { useTab as mt } from "./Components/Tab/composables/useTab.js";
-import ht from "./Components/Tab/Tab.js";
-import { useTabItem as gt } from "./Components/TabItem/composables/useTabItem.js";
-import _t from "./Components/TabItem/TabItem.js";
-import { useTabList as vt } from "./Components/TabList/composables/useTabList.js";
-import yt from "./Components/TabList/TabList.js";
-import { useTabPanel as bt } from "./Components/TabPanel/composables/useTabPanel.js";
-import xt from "./Components/TabPanel/TabPanel.js";
-import { useTabs as St } from "./Components/Tabs/composables/useTabs.js";
-import Ct from "./Components/Tabs/Tabs.js";
-import { useTextarea as wt } from "./Components/Textarea/composables/useTextarea.js";
-import Tt from "./Components/Textarea/Textarea.js";
-import { useTextField as Et } from "./Components/TextField/composables/useTextField.js";
-import Dt from "./Components/TextField/TextField.js";
-import { useTimeField as Ot } from "./Components/TimeField/composables/useTimeField.js";
-import { useTimePicker as kt } from "./Components/TimePicker/composables/useTimePicker.js";
-import At from "./Components/TimePicker/TimePicker.js";
-import jt from "./Components/TimeField/TimeField.js";
-import { useTimeRangeField as Mt } from "./Components/TimeRangeField/composables/useTimeRangeField.js";
-import { useTimeRangePicker as Nt } from "./Components/TimeRangePicker/composables/useTimeRangePicker.js";
-import Pt from "./Components/TimeRangePicker/TimeRangePicker.js";
-import Ft from "./Components/TimeRangeField/TimeRangeField.js";
-import It from "./Provider/BridgeUIProvider.js";
-import { createBridgeUI as Lt } from "./Provider/createBridgeUI.js";
-import { BRIDGE_UI_DEFAULT_GLOBAL as Rt, SEMANTIC_ICON_NAMES as zt, cn as Bt, mergeBridgeUIComponents as Vt, mergeBridgeUIGlobal as Ht, resolveBridgeUIOptions as Ut, resolveMessage as Wt } from "@bridge-ui/core";
-export { l as ACCORDION_INJECTION_KEY, m as Accordion, _ as AccordionItem, y as Alert, X as Autocomplete, Z as AutocompleteOption, Q as Avatar, Rt as BRIDGE_UI_DEFAULT_GLOBAL, ee as Badge, te as BaseField, oe as Breadcrumb, ae as BreadcrumbItem, It as BridgeUIProvider, P as Button, me as Calendar, le as CalendarDate, de as CalendarMonth, ge as CalendarRange, pe as CalendarYear, ve as Card, Se as Checkbox, O as Chip, Ee as DateField, Te as DatePicker, Ae as DateRangeField, ke as DateRangePicker, Ie as DateTimeField, Fe as DateTimePicker, Be as DateTimeRangeField, ze as DateTimeRangePicker, He as Divider, L as Drawer, H as FieldOverlay, be as FormControl, j as FormField, g as Icon, A as Label, We as Link, W as List, G as ListItem, K as ListSection, Y as Listbox, z as Menu, V as Modal, Ke as NumberField, Je as OtpField, Xe as PasswordField, J as Progress, Qe as Radio, zt as SEMANTIC_ICON_NAMES, $e as Select, et as SelectOption, nt as Skeleton, ot as Slider, ct as Snackbar, ut as Spinner, ft as Switch, pt as TABS_INJECTION_KEY, ht as Tab, _t as TabItem, yt as TabList, xt as TabPanel, Ct as Tabs, Dt as TextField, Tt as Textarea, jt as TimeField, Pe as TimePanel, At as TimePicker, Ft as TimeRangeField, Pt as TimeRangePicker, at as Tooltip, Bt as cn, Lt as createBridgeUI, x as findFirstEnabledOptionIndex, S as findLastEnabledOptionIndex, C as getListboxActiveDescendantId, w as getListboxOptionId, Vt as mergeBridgeUIComponents, Ht as mergeBridgeUIGlobal, T as moveListboxHighlight, Ut as resolveBridgeUIOptions, Wt as resolveMessage, t as setDateAdapterForTests, i as setI18nAdapterForTests, s as setIconAdapterForTests, p as useAccordion, h as useAccordionItem, v as useAlert, $ as useBadge, ne as useBaseField, re as useBreadcrumb, ie as useBreadcrumbItem, u as useBreakpoint, e as useBridgeUI, d as useBridgeUIComponent, f as useBridgeUIMergedRegistryClasses, N as useButton, se as useCalendar, ce as useCalendarDate, ue as useCalendarMonth, he as useCalendarRange, fe as useCalendarYear, _e as useCard, xe as useCheckbox, D as useChip, n as useDateAdapter, r as useDateAdapterContext, Ce as useDateField, we as useDatePicker, De as useDateRangeField, Oe as useDateRangePicker, je as useDateTimeField, Me as useDateTimePicker, Le as useDateTimeRangeField, Re as useDateTimeRangePicker, Ve as useDivider, I as useDrawer, F as useFieldOverlay, ye as useFormControl, b as useFormField, a as useI18nAdapter, c as useIconAdapter, k as useLabel, Ue as useLink, U as useList, M as useListbox, E as useListboxNavigation, R as useMenu, B as useModal, Ge as useNumberField, qe as useOtpField, Ye as usePasswordField, q as useProgress, Ze as useRadio, o as useResolveMessage, tt as useSkeleton, rt as useSlider, st as useSnackbar, lt as useSpinner, dt as useSwitch, mt as useTab, gt as useTabItem, vt as useTabList, bt as useTabPanel, St as useTabs, Et as useTextField, wt as useTextarea, Ot as useTimeField, Ne as useTimePanel, kt as useTimePicker, Mt as useTimeRangeField, Nt as useTimeRangePicker, it as useTooltip };
+import { usePagination as Ye } from "./Components/Pagination/composables/usePagination.js";
+import Xe from "./Components/Pagination/Pagination.js";
+import { usePasswordField as Ze } from "./Components/PasswordField/composables/usePasswordField.js";
+import Qe from "./Components/PasswordField/PasswordField.js";
+import { useRadio as $e } from "./Components/Radio/composables/useRadio.js";
+import et from "./Components/Radio/Radio.js";
+import tt from "./Components/Select/Select.js";
+import nt from "./Components/Select/SelectOption.js";
+import { useSkeleton as rt } from "./Components/Skeleton/composables/useSkeleton.js";
+import it from "./Components/Skeleton/Skeleton.js";
+import { useSlider as at } from "./Components/Slider/composables/useSlider.js";
+import { useTooltip as ot } from "./Components/Tooltip/composables/useTooltip.js";
+import st from "./Components/Tooltip/Tooltip.js";
+import ct from "./Components/Slider/Slider.js";
+import { useSnackbar as lt } from "./Components/Snackbar/composables/useSnackbar.js";
+import ut from "./Components/Snackbar/Snackbar.js";
+import { useSpinner as dt } from "./Components/Spinner/composables/useSpinner.js";
+import ft from "./Components/Spinner/Spinner.js";
+import { useSwitch as pt } from "./Components/Switch/composables/useSwitch.js";
+import mt from "./Components/Switch/Switch.js";
+import { TABS_INJECTION_KEY as ht } from "./Components/Tabs/tabsInjectionKey.js";
+import { useTab as gt } from "./Components/Tab/composables/useTab.js";
+import _t from "./Components/Tab/Tab.js";
+import { useTabItem as vt } from "./Components/TabItem/composables/useTabItem.js";
+import yt from "./Components/TabItem/TabItem.js";
+import { useTabList as bt } from "./Components/TabList/composables/useTabList.js";
+import xt from "./Components/TabList/TabList.js";
+import { useTabPanel as St } from "./Components/TabPanel/composables/useTabPanel.js";
+import Ct from "./Components/TabPanel/TabPanel.js";
+import { useTabs as wt } from "./Components/Tabs/composables/useTabs.js";
+import Tt from "./Components/Tabs/Tabs.js";
+import { useTextarea as Et } from "./Components/Textarea/composables/useTextarea.js";
+import Dt from "./Components/Textarea/Textarea.js";
+import { useTextField as Ot } from "./Components/TextField/composables/useTextField.js";
+import kt from "./Components/TextField/TextField.js";
+import { useTimeField as At } from "./Components/TimeField/composables/useTimeField.js";
+import { useTimePicker as jt } from "./Components/TimePicker/composables/useTimePicker.js";
+import Mt from "./Components/TimePicker/TimePicker.js";
+import Nt from "./Components/TimeField/TimeField.js";
+import { useTimeRangeField as Pt } from "./Components/TimeRangeField/composables/useTimeRangeField.js";
+import { useTimeRangePicker as Ft } from "./Components/TimeRangePicker/composables/useTimeRangePicker.js";
+import It from "./Components/TimeRangePicker/TimeRangePicker.js";
+import Lt from "./Components/TimeRangeField/TimeRangeField.js";
+import { TOGGLE_GROUP_INJECTION_KEY as Rt } from "./Components/ToggleGroup/toggleGroupInjectionKey.js";
+import { useToggleGroup as zt } from "./Components/ToggleGroup/composables/useToggleGroup.js";
+import Bt from "./Components/ToggleGroup/ToggleGroup.js";
+import { useToggleItem as Vt } from "./Components/ToggleItem/composables/useToggleItem.js";
+import Ht from "./Components/ToggleItem/ToggleItem.js";
+import Ut from "./Provider/BridgeUIProvider.js";
+import { createBridgeUI as Wt } from "./Provider/createBridgeUI.js";
+import { SEMANTIC_ICON_NAMES as Gt, resolveMessage as Kt } from "@bridge-ui/core/Adapters";
+import { cn as qt } from "@bridge-ui/core/Utils";
+import { BRIDGE_UI_DEFAULT_GLOBAL as Jt, mergeBridgeUIComponents as Yt, mergeBridgeUIGlobal as Xt, resolveBridgeUIOptions as Zt } from "@bridge-ui/core/Config";
+export { l as ACCORDION_INJECTION_KEY, m as Accordion, _ as AccordionItem, y as Alert, X as Autocomplete, Z as AutocompleteOption, Q as Avatar, Jt as BRIDGE_UI_DEFAULT_GLOBAL, ee as Badge, te as BaseField, oe as Breadcrumb, ae as BreadcrumbItem, Ut as BridgeUIProvider, P as Button, me as Calendar, le as CalendarDate, de as CalendarMonth, ge as CalendarRange, pe as CalendarYear, ve as Card, Se as Checkbox, O as Chip, Ee as DateField, Te as DatePicker, Ae as DateRangeField, ke as DateRangePicker, Ie as DateTimeField, Fe as DateTimePicker, Be as DateTimeRangeField, ze as DateTimeRangePicker, He as Divider, L as Drawer, H as FieldOverlay, be as FormControl, j as FormField, g as Icon, A as Label, We as Link, W as List, G as ListItem, K as ListSection, Y as Listbox, z as Menu, V as Modal, Ke as NumberField, Je as OtpField, Xe as Pagination, Qe as PasswordField, J as Progress, et as Radio, Gt as SEMANTIC_ICON_NAMES, tt as Select, nt as SelectOption, it as Skeleton, ct as Slider, ut as Snackbar, ft as Spinner, mt as Switch, ht as TABS_INJECTION_KEY, Rt as TOGGLE_GROUP_INJECTION_KEY, _t as Tab, yt as TabItem, xt as TabList, Ct as TabPanel, Tt as Tabs, kt as TextField, Dt as Textarea, Nt as TimeField, Pe as TimePanel, Mt as TimePicker, Lt as TimeRangeField, It as TimeRangePicker, Bt as ToggleGroup, Ht as ToggleItem, st as Tooltip, qt as cn, Wt as createBridgeUI, x as findFirstEnabledOptionIndex, S as findLastEnabledOptionIndex, C as getListboxActiveDescendantId, w as getListboxOptionId, Yt as mergeBridgeUIComponents, Xt as mergeBridgeUIGlobal, T as moveListboxHighlight, Zt as resolveBridgeUIOptions, Kt as resolveMessage, t as setDateAdapterForTests, i as setI18nAdapterForTests, s as setIconAdapterForTests, p as useAccordion, h as useAccordionItem, v as useAlert, $ as useBadge, ne as useBaseField, re as useBreadcrumb, ie as useBreadcrumbItem, u as useBreakpoint, e as useBridgeUI, d as useBridgeUIComponent, f as useBridgeUIMergedRegistryClasses, N as useButton, se as useCalendar, ce as useCalendarDate, ue as useCalendarMonth, he as useCalendarRange, fe as useCalendarYear, _e as useCard, xe as useCheckbox, D as useChip, n as useDateAdapter, r as useDateAdapterContext, Ce as useDateField, we as useDatePicker, De as useDateRangeField, Oe as useDateRangePicker, je as useDateTimeField, Me as useDateTimePicker, Le as useDateTimeRangeField, Re as useDateTimeRangePicker, Ve as useDivider, I as useDrawer, F as useFieldOverlay, ye as useFormControl, b as useFormField, a as useI18nAdapter, c as useIconAdapter, k as useLabel, Ue as useLink, U as useList, M as useListbox, E as useListboxNavigation, R as useMenu, B as useModal, Ge as useNumberField, qe as useOtpField, Ye as usePagination, Ze as usePasswordField, q as useProgress, $e as useRadio, o as useResolveMessage, rt as useSkeleton, at as useSlider, lt as useSnackbar, dt as useSpinner, pt as useSwitch, gt as useTab, vt as useTabItem, bt as useTabList, St as useTabPanel, wt as useTabs, Ot as useTextField, Et as useTextarea, At as useTimeField, Ne as useTimePanel, jt as useTimePicker, Pt as useTimeRangeField, Ft as useTimeRangePicker, zt as useToggleGroup, Vt as useToggleItem, ot as useTooltip };

package/dist/theme.css

@@ -16,6 +16,9 @@
   --text-2xs: 0.625rem;
   --text-2xs--line-height: 0.75rem;
 
+  /* Panel-max radius for large panels (`rounded="full"` on Menu / Card / …) */
+  --radius-panel-full: 2.5rem;
+
   /* Dark (slate) */
   --color-dark-50: var(--color-slate-50);
   --color-dark-100: var(--color-slate-100);

package/docs/README.md

@@ -11,6 +11,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Badge](./components/Badge.md)
 - [BaseField](./components/BaseField.md)
 - [BridgeUIProvider](./components/BridgeUIProvider.md)
+- [Breadcrumb](./components/Breadcrumb.md)
 - [Button](./components/Button.md)
 - [Calendar](./components/Calendar.md)
 - [CalendarDate](./components/CalendarDate.md)
@@ -40,6 +41,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Modal](./components/Modal.md)
 - [NumberField](./components/NumberField.md)
 - [OtpField](./components/OtpField.md)
+- [Pagination](./components/Pagination.md)
 - [PasswordField](./components/PasswordField.md)
 - [Progress](./components/Progress.md)
 - [Radio](./components/Radio.md)
@@ -57,6 +59,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [TimePicker](./components/TimePicker.md)
 - [TimeRangeField](./components/TimeRangeField.md)
 - [TimeRangePicker](./components/TimeRangePicker.md)
+- [ToggleGroup](./components/ToggleGroup.md)
 - [Tooltip](./components/Tooltip.md)
 - [useBreakpoint](./components/useBreakpoint.md)
 - [useDialogAction](./components/useDialogAction.md)

package/docs/components/Autocomplete.md

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

package/docs/components/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

@@ -47,36 +47,59 @@ import { DateField } from "@bridge-ui/vue/Components/DateField";
 ```
 
 Default `overlay` is `auto`: `menu` on desktop and bottom `drawer` on mobile.
-When unset, `showFooter` defaults to `true` on mobile (`false` on desktop).
+When unset, `showFooter` defaults to `true` for `modal` / `drawer` overlays (`false` for `menu`).
+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.
+
+```vue
+<DateField overlay="modal">
+  <template #footer="{ apply, cancel }">
+    <button type="button" @click="cancel">Discard</button>
+    <button type="button" @click="apply">Save</button>
+  </template>
+</DateField>
+```
 
 ## Props
 
 ### DateField-specific
 
-| Prop              | Type                   | Default                               | Description                                                                           |
-| ----------------- | ---------------------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
-| `classes`         | `DateFieldClasses`     | —                                     | Classes for field / input regions.                                                    |
-| `clearable`       | `boolean`              | `true`                                | Whether the value can be cleared.                                                     |
-| `customProps`     | `DateFieldCustomProps` | —                                     | Extra props for internal parts (`input`, `menu`, `modal`, `drawer`, `datePicker`, …). |
-| `defaultValue`    | `DatePickerModel`      | `null`                                | Uncontrolled initial value.                                                           |
-| `defaultView`     | `CalendarView`         | `"date"`                              | Initial calendar panel view.                                                          |
-| `disableDates`    | `Date[]`               | —                                     | Dates that cannot be selected.                                                        |
-| `disableMonths`   | `number[]`             | —                                     | Month indexes that cannot be selected.                                                |
-| `disableYears`    | `number[]`             | —                                     | Years that cannot be selected.                                                        |
-| `hideMonths`      | `boolean`              | `false`                               | Hides month navigation / panel.                                                       |
-| `hideOutsideDays` | `boolean`              | `false`                               | Hides days that fall outside the displayed month.                                     |
-| `hideWeekdays`    | `boolean`              | `false`                               | Hides weekday labels.                                                                 |
-| `hideYears`       | `boolean`              | `false`                               | Hides year navigation / panel.                                                        |
-| `maxDate`         | `Date`                 | —                                     | Latest selectable date.                                                               |
-| `minDate`         | `Date`                 | —                                     | Earliest selectable date.                                                             |
-| `multiple`        | `boolean`              | `false`                               | Allows selecting multiple dates.                                                      |
-| `overlay`         | `FieldOverlayMode`     | `"auto"`                              | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                  |
-| `range`           | `boolean`              | `false`                               | Selects a date range.                                                                 |
-| `showFooter`      | `boolean`              | `false` (`true` on mobile when unset) | Shows Cancel / Apply on the nested picker.                                            |
-| `slots`           | `DateFieldSlots`       | —                                     | Named slots (`FormField` slots + calendar `day`).                                     |
-| `startOfWeek`     | `StartOfWeek`          | `0`                                   | First day of the week.                                                                |
-| `timeZone`        | `string`               | —                                     | IANA time zone.                                                                       |
-| `value`           | `DatePickerModel`      | —                                     | Controlled value.                                                                     |
+| Prop              | Type                   | Default                                      | Description                                                                           |
+| ----------------- | ---------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `classes`         | `DateFieldClasses`     | —                                            | Classes for field / input regions.                                                    |
+| `clearable`       | `boolean`              | `true`                                       | Whether the value can be cleared.                                                     |
+| `customProps`     | `DateFieldCustomProps` | —                                            | Extra props for internal parts (`input`, `menu`, `modal`, `drawer`, `datePicker`, …). |
+| `defaultValue`    | `DatePickerModel`      | `null`                                       | Uncontrolled initial value.                                                           |
+| `defaultView`     | `CalendarView`         | `"date"`                                     | Initial calendar panel view.                                                          |
+| `disableDates`    | `Date[]`               | —                                            | Dates that cannot be selected.                                                        |
+| `disableMonths`   | `number[]`             | —                                            | Month indexes that cannot be selected.                                                |
+| `disableYears`    | `number[]`             | —                                            | Years that cannot be selected.                                                        |
+| `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.                                                             |
+| `multiple`        | `boolean`              | `false`                                      | Allows selecting multiple dates.                                                      |
+| `overlay`         | `FieldOverlayMode`     | `"auto"`                                     | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                  |
+| `range`           | `boolean`              | `false`                                      | Selects a date range.                                                                 |
+| `showFooter`      | `boolean`              | `false` (`true` for modal/drawer when unset) | Shows Cancel / Apply on the nested picker.                                            |
+| `slots`           | `DateFieldSlots`       | —                                            | Named slots (`FormField` slots + calendar `day` + footer).                            |
+| `startOfWeek`     | `StartOfWeek`          | `0`                                          | First day of the week.                                                                |
+| `timeZone`        | `string`               | —                                            | IANA time zone.                                                                       |
+| `value`           | `DatePickerModel`      | —                                            | Controlled value.                                                                     |
 
 ### v-model
 
@@ -91,12 +114,14 @@ See [FormField](./FormField.md).
 
 ## Events
 
-| Event         | Payload                    | Description                               |
-| ------------- | -------------------------- | ----------------------------------------- |
-| `v-on:change` | `(value: DatePickerModel)` | Emitted when the selection model changes. |
-| `v-on:clear`  | `()`                       | Emitted when the value is cleared.        |
-| `v-on:close`  | `()`                       | Emitted when the menu closes.             |
-| `v-on:open`   | `()`                       | Emitted when the menu opens.              |
+| Event         | Payload                    | Description                                    |
+| ------------- | -------------------------- | ---------------------------------------------- |
+| `v-on:apply`  | `()`                       | Emitted when Apply is pressed (`showFooter`).  |
+| `v-on:cancel` | `()`                       | Emitted when Cancel is pressed (`showFooter`). |
+| `v-on:change` | `(value: DatePickerModel)` | Emitted when the selection model changes.      |
+| `v-on:clear`  | `()`                       | Emitted when the value is cleared.             |
+| `v-on:close`  | `()`                       | Emitted when the menu closes.                  |
+| `v-on:open`   | `()`                       | Emitted when the menu opens.                   |
 
 ## Related components