@bridge-ui/vue 0.7.0 → 0.9.0

package/docs/components/BridgeUIProvider.md

@@ -81,7 +81,7 @@ app.use(
 
 Set `global.formDefaults` to apply shared `size` / `rounded` to form controls (TextField, Select, Checkbox, Slider, OtpField, …). Does not affect Button, Progress, Modal, etc.
 
-Merge order: instance props → `components.{Name}.defaultProps` → `formDefaults` → library defaults.
+Merge order: instance props → `components.{Name}.defaultProps` → chrome (`FormField` / `FormControl` / `BaseField` / `TimePanel`) → `formDefaults` → library defaults.
 
 Radio and Switch receive `size` only — their `rounded` stays shape-driven (`full`) unless overridden per component.
 
@@ -97,19 +97,26 @@ app.use(
 );
 ```
 
-### Nested chrome tokens
+### Shared chrome
 
-Building blocks (`FormField`, `FormControl`, `BaseField`) are not registry keys. Theme chrome under the public parent. Dropdown tokens live on `components.Listbox`:
+`FormField`, `FormControl`, `BaseField`, and `TimePanel` are registry keys. Set them once to theme a family; a public entry still overrides `defaultProps`. Chrome tokens live on the shared key (`components.FormField.tokens`, `components.BaseField.tokens`). Dropdown tokens live on `components.Listbox`. Cancel / Apply in pickers and listboxes live on `components.ActionFooter`.
 
 ```ts
 app.use(
   createBridgeUI({
     components: {
-      Slider: {
+      FormField: {
+        defaultProps: {
+          variant: "filled",
+          color: "secondary",
+        },
+      },
+      TextField: {
+        defaultProps: { variant: "outline" },
+      },
+      BaseField: {
         tokens: {
-          baseField: {
-            size: { md: { text: "text-base", group: "gap-3" } },
-          },
+          size: { md: { text: "text-base", group: "gap-3" } },
         },
       },
       Checkbox: {
@@ -139,6 +146,22 @@ app.use(
 );
 ```
 
+```ts
+app.use(
+  createBridgeUI({
+    components: {
+      ActionFooter: {
+        defaultProps: {
+          applyColor: "info",
+          cancelVariant: "flat",
+          cancelColor: "secondary",
+        },
+      },
+    },
+  }),
+);
+```
+
 ### Runtime updates
 
 ```ts

package/docs/components/ColorField.md

@@ -55,7 +55,7 @@ The input is read-only by default (picker only). Set `editable` to unlock typing
 | -------------- | ----------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `alpha`        | `boolean`               | —                                            | Shows the alpha slider. Unset: `true` for `hexa` / `rgba` / `hsla`.                |
 | `classes`      | `ColorFieldClasses`     | —                                            | Classes for field / input regions.                                                 |
-| `clearable`    | `boolean`               | `true`                                       | Whether the value can be cleared.                                                  |
+| `clearable`    | `boolean`               | `false`                                      | Whether the value can be cleared.                                                  |
 | `customProps`  | `ColorFieldCustomProps` | —                                            | Extra props for internal parts.                                                    |
 | `defaultValue` | `string \| null`        | `null`                                       | Uncontrolled initial value.                                                        |
 | `editable`     | `boolean`               | `false`                                      | Unlocks the input. Typed text is parsed on blur or Enter.                          |

package/docs/components/ColorPicker.md

@@ -75,4 +75,4 @@ Picker tokens live on `components.ColorPicker` (`rounded`, `size`).
 
 ## Related components
 
-ColorField, FormField, FieldOverlay
+ColorField, FormField, FieldOverlay, ActionFooter

package/docs/components/DataTable.md

@@ -198,7 +198,7 @@ Set `sortable` on a column to show a sort button in that header, matching the fi
 
 Set `filters` on a column to show a funnel in that header. The panel uses checkboxes (`filterMultiple`, default) or radios (`:filter-multiple="false"`), and **Select all items** for multiple filters. Nested `children` render as a group in the same panel. **OK** commits; **Reset** clears the draft (commit on **OK**); closing without **OK** discards it.
 
-Set `searchable` on a column to add a text field in that same overlay. Queries are stored in `columnSearch` (column id → string), not used to filter the option list.
+Set `searchable` on a column to add a text field in that same overlay, and to include the column in the toolbar search. Queries are stored in `columnSearch` (column id → string), not used to filter the option list.
 
 Column filters open in a `FieldOverlay`. Default `filter-overlay` is `auto` (`menu` on desktop, `drawer` on mobile). Pass `menu`, `modal`, or `drawer` to pin a shell:
 
@@ -300,7 +300,7 @@ const columns = [
 
 ### Column visibility
 
-Pass `hiddenColumns` and/or listen to `update:hiddenColumns` to show a **Columns** icon in the toolbar. `hideable: false` keeps a column out of the toggle (or disabled). At least one column stays visible.
+The toolbar **Columns** icon is hidden by default. Pass `show-column-visibility` to show it with internal state, or bind `hiddenColumns` when the app needs the ids. `hideable: false` keeps a column out of the toggle (or disabled). At least one column stays visible.
 
 The panel opens in a `FieldOverlay`. Default `columns-overlay` is `auto` (`menu` on desktop, `drawer` on mobile). Pass `menu`, `modal`, or `drawer` to pin a shell.
 
@@ -310,14 +310,26 @@ When unset, `columns-show-footer` is `true` for `modal` / `drawer` (`false` for
 <DataTable
   :rows="users"
   :columns="columns"
+  show-column-visibility
   columns-overlay="drawer"
-  v-model:hidden-columns="hidden"
 />
 ```
 
+Bind the ids when the app needs them:
+
+```vue
+<DataTable :rows="users" :columns="columns" v-model:hidden-columns="hidden" />
+```
+
 ### Search
 
-Pass `search` and/or listen to `update:search` to show a search field in the toolbar. Client-side tables filter visible columns; server-paged tables emit the query only.
+The toolbar search field is hidden by default. Pass `show-search` to show it with internal state, or bind `search` when the app needs the query. Client-side tables filter columns with `searchable`; if none are set, every visible column is matched. Server-paged tables emit the query only.
+
+```vue
+<DataTable show-search :rows="users" :columns="columns" />
+```
+
+Bind the query when the app needs it:
 
 ```vue
 <DataTable :rows="users" :columns="columns" v-model:search="search" />

package/docs/components/DateField.md

@@ -77,7 +77,7 @@ Replaces Cancel / Apply on the nested picker. `apply()` commits and closes; `can
 | Prop              | Type                   | Default                                      | Description                                                                           |
 | ----------------- | ---------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------- |
 | `classes`         | `DateFieldClasses`     | —                                            | Classes for field / input regions.                                                    |
-| `clearable`       | `boolean`              | `true`                                       | Whether the value can be cleared.                                                     |
+| `clearable`       | `boolean`              | `false`                                      | 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.                                                          |

package/docs/components/DatePicker.md

@@ -94,4 +94,4 @@ Calendar tokens live on `components.Calendar` (`color`, `day`, `rounded`).
 
 ## Related components
 
-Calendar, DateField, DateRangePicker
+Calendar, DateField, DateRangePicker, ActionFooter

package/docs/components/DateRangeField.md

@@ -49,7 +49,7 @@ The input is read-only by default (picker only). Set `editable` to unlock typing
 | Prop              | Type                         | Default                                      | Description                                                                        |
 | ----------------- | ---------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `classes`         | `DateRangeFieldClasses`      | —                                            | Classes for field / input regions.                                                 |
-| `clearable`       | `boolean`                    | `true`                                       | Whether the value can be cleared.                                                  |
+| `clearable`       | `boolean`                    | `false`                                      | 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.                                                     |

package/docs/components/DateRangePicker.md

@@ -72,4 +72,4 @@ Calendar tokens live on `components.Calendar` (`color`, `day`, `rounded`).
 
 ## Related components
 
-CalendarRange, DateRangeField, DatePicker
+CalendarRange, DateRangeField, DatePicker, ActionFooter

package/docs/components/DateTimeField.md

@@ -47,7 +47,7 @@ The input is read-only by default (picker only). Set `editable` to unlock typing
 | ----------------- | -------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `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.                                                  |
+| `clearable`       | `boolean`                  | `false`                                      | 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.                                                       |

package/docs/components/DateTimePicker.md

@@ -75,4 +75,4 @@ Calendar tokens live on `components.Calendar`. Time panel tokens live on `compon
 
 ## Related components
 
-Calendar, TimePanel, DateTimeField, DatePicker
+Calendar, TimePanel, DateTimeField, DatePicker, ActionFooter

package/docs/components/DateTimeRangeField.md

@@ -46,7 +46,7 @@ The input is read-only by default (picker only). Set `editable` to unlock typing
 | ----------------- | ------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `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.                                                  |
+| `clearable`       | `boolean`                       | `false`                                      | 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.                                                     |

package/docs/components/DateTimeRangePicker.md

@@ -75,4 +75,4 @@ Calendar tokens live on `components.Calendar`. Time panel tokens live on `compon
 
 ## Related components
 
-CalendarRange, TimePanel, DateTimeRangeField, DateRangePicker
+CalendarRange, TimePanel, DateTimeRangeField, DateRangePicker, ActionFooter

package/docs/components/FormControl.md

@@ -1,6 +1,6 @@
 # FormControl
 
-> Building block for toggle-row chrome. Prefer `Checkbox`, `Radio`, and `Switch` in apps; FormControl remains exported for advanced composition. Not a registry key — theme chrome via `tokens.formControl` on the public parent (e.g. `components.Checkbox.tokens.formControl`).
+> Building block for toggle-row chrome. Prefer `Checkbox`, `Radio`, and `Switch` in apps; FormControl remains exported for advanced composition. Theme shared chrome via `components.FormControl`; override per public control (`components.Checkbox`, …).
 
 Low-level form control chrome (labels, description, error) for Checkbox, Radio, and Switch.
 

package/docs/components/FormField.md

@@ -1,6 +1,6 @@
 # FormField
 
-> Building block for field chrome. Prefer public fields (`TextField`, `Select`, …) in apps; FormField remains exported for advanced composition. Not a `BridgeUIComponentsConfig` key — theme via the public parent (`components.TextField`, `components.Select`, …).
+> Building block for field chrome. Prefer public fields (`TextField`, `Select`, …) in apps; FormField remains exported for advanced composition. Theme all fields via `components.FormField`; override per public field (`components.TextField`, …).
 
 Form field chrome (label, adornments, error) used by TextField, Select, and other inputs.
 
@@ -39,32 +39,33 @@ import { FormField } from "@bridge-ui/vue";
 
 ## Props
 
-| Prop               | Type                   | Default     | Description                                                                                                                                             |
-| ------------------ | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `classes`          | `FormFieldClasses`     | —           | Classes for the field chrome and the control (includes label, container, adornments).                                                                   |
-| `color`            | `FormFieldColor`       | "primary"   | The color to apply to the field control.                                                                                                                |
-| `controlId`        | `string`               | —           | Associates labels and helper text with a form control. When omitted, an id is generated automatically.                                                  |
-| `corner`           | `string`               | —           | Secondary label text at the inline end of the header row.                                                                                               |
-| `customProps`      | `FormFieldCustomProps` | —           | Extra props for internal parts (`header`, `label`, `input`, `container`, …).                                                                            |
-| `description`      | `string`               | —           | Helper text below the control (hidden when the field is invalid).                                                                                       |
-| `disabled`         | `boolean`              | `false`     | Whether the control is disabled.                                                                                                                        |
-| `end`              | `string`               | —           | Inline-end text inside the field (suffix), e.g. `@mail.com`.                                                                                            |
-| `endIcon`          | `LucideIcon`           | —           | Icon at the **inline end** (physical right in `ltr`, physical left in `rtl`).                                                                           |
-| `error`            | `boolean`              | `false`     | When `true`, applies invalid styling on the label and hides description.                                                                                |
-| `errorIcon`        | `LucideIcon`           | CircleAlert | Icon used when `showErrorIcon` is enabled and the field is invalid.                                                                                     |
-| `errorMessage`     | `string`               | —           | Error message below the control. Shown only when set (or via `#errorMessage` slot).                                                                     |
-| `field`            | `UseFormFieldReturn`   | —           | Pre-composed field API from a parent composable (e.g. `useTextField`). Used by `<FormField :field="…" />`; not set on field wrappers such as TextField. |
-| `hideErrorMessage` | `boolean`              | `false`     | When `true`, does not reserve space below the control for error messages.                                                                               |
-| `label`            | `string`               | —           | The primary label text above the control.                                                                                                               |
-| `readonly`         | `boolean`              | `false`     | Whether the control is read-only.                                                                                                                       |
-| `required`         | `boolean`              | `false`     | Shows a red asterisk on the label.                                                                                                                      |
-| `rounded`          | `FormFieldRounded`     | "md"        | The roundedness of the field control.                                                                                                                   |
-| `showErrorIcon`    | `boolean`              | `true`      | When `true` and the field is invalid, shows an error icon at the inline end when no `endIcon` or `end` slot is present.                                 |
-| `size`             | `FormFieldSize`        | "md"        | Typography scale for label, corner, description, and error message, and control sizing (input, container, icons).                                       |
-| `slots`            | `FormFieldSlots`       | —           | Chrome slots (`label`, `description`, `errorMessage`, …) via `#slot` or prop; inline adornments use `#start` / `#end`.                                  |
-| `start`            | `string`               | —           | Inline-start text inside the field (prefix), e.g. `https://`.                                                                                           |
-| `startIcon`        | `LucideIcon`           | —           | Icon at the **inline start** (physical left in `ltr`, physical right in `rtl`).                                                                         |
-| `variant`          | `FormFieldVariant`     | "outline"   | The visual variant of the field shell and control.                                                                                                      |
+| Prop                     | Type                   | Default     | Description                                                                                                                                             |
+| ------------------------ | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `classes`                | `FormFieldClasses`     | —           | Classes for the field chrome and the control (includes label, container, adornments).                                                                   |
+| `color`                  | `FormFieldColor`       | "primary"   | The color to apply to the field control.                                                                                                                |
+| `controlId`              | `string`               | —           | Associates labels and helper text with a form control. When omitted, an id is generated automatically.                                                  |
+| `corner`                 | `string`               | —           | Secondary label text at the inline end of the header row.                                                                                               |
+| `customProps`            | `FormFieldCustomProps` | —           | Extra props for internal parts (`header`, `label`, `input`, `container`, …).                                                                            |
+| `description`            | `string`               | —           | Helper text below the control. Hidden when `error` and an error message are set, unless `showDescriptionOnError`.                                       |
+| `disabled`               | `boolean`              | `false`     | Whether the control is disabled.                                                                                                                        |
+| `end`                    | `string`               | —           | Inline-end text inside the field (suffix), e.g. `@mail.com`.                                                                                            |
+| `endIcon`                | `LucideIcon`           | —           | Icon at the **inline end** (physical right in `ltr`, physical left in `rtl`).                                                                           |
+| `error`                  | `boolean`              | `false`     | When `true`, applies invalid styling on the label. Hides description when an error message is shown, unless `showDescriptionOnError`.                   |
+| `errorIcon`              | `LucideIcon`           | CircleAlert | Icon used when `showErrorIcon` is enabled and the field is invalid.                                                                                     |
+| `errorMessage`           | `string`               | —           | Error message below the control. Shown only when set (or via `#errorMessage` slot).                                                                     |
+| `field`                  | `UseFormFieldReturn`   | —           | Pre-composed field API from a parent composable (e.g. `useTextField`). Used by `<FormField :field="…" />`; not set on field wrappers such as TextField. |
+| `hideErrorMessage`       | `boolean`              | `false`     | When `true`, does not reserve the error row. That row is also omitted while a description is shown.                                                     |
+| `label`                  | `string`               | —           | The primary label text above the control.                                                                                                               |
+| `readonly`               | `boolean`              | `false`     | Whether the control is read-only.                                                                                                                       |
+| `required`               | `boolean`              | `false`     | Shows a red asterisk on the label.                                                                                                                      |
+| `rounded`                | `FormFieldRounded`     | "md"        | The roundedness of the field control.                                                                                                                   |
+| `showDescriptionOnError` | `boolean`              | `false`     | When `true`, keeps the description visible while the field is invalid.                                                                                  |
+| `showErrorIcon`          | `boolean`              | `true`      | When `true` and the field is invalid, shows an error icon at the inline end when no `endIcon` or `end` slot is present.                                 |
+| `size`                   | `FormFieldSize`        | "md"        | Typography scale for label, corner, description, and error message, and control sizing (input, container, icons).                                       |
+| `slots`                  | `FormFieldSlots`       | —           | Chrome slots (`label`, `description`, `errorMessage`, …) via `#slot` or prop; inline adornments use `#start` / `#end`.                                  |
+| `start`                  | `string`               | —           | Inline-start text inside the field (prefix), e.g. `https://`.                                                                                           |
+| `startIcon`              | `LucideIcon`           | —           | Icon at the **inline start** (physical left in `ltr`, physical right in `rtl`).                                                                         |
+| `variant`                | `FormFieldVariant`     | "outline"   | The visual variant of the field shell and control.                                                                                                      |
 
 ## Related components
 

package/docs/components/Select.md

@@ -144,7 +144,7 @@ When unset, `showFooter` defaults to `true` for `modal` / `drawer` overlays (`fa
 | Prop                | Type                  | Default                                      | Description                                                                                             |
 | ------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
 | `asyncData`         | `SelectAsyncData`     | —                                            | Remote data source. Implies `searchable`.                                                               |
-| `clearable`         | `boolean`             | `true`                                       | Whether the value can be cleared.                                                                       |
+| `clearable`         | `boolean`             | `false`                                      | 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.                                                                |
@@ -198,4 +198,4 @@ See [FormField](./FormField.md) (building-block chrome). Field tokens live on `c
 
 ## Related components
 
-Menu, Modal, Drawer, FieldOverlay, List, ListItem, ListSection, FormField
+Menu, Modal, Drawer, FieldOverlay, List, ListItem, ListSection, FormField, ActionFooter

package/docs/components/TimeField.md

@@ -47,7 +47,7 @@ The input is read-only by default (picker only). Set `editable` to unlock typing
 | -------------- | ---------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `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.                                                  |
+| `clearable`    | `boolean`              | `false`                                      | 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.                                                     |

package/docs/components/TimePicker.md

@@ -63,4 +63,4 @@ Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
 
 ## Related components
 
-TimePanel, TimeField, DateTimePicker
+TimePanel, TimeField, DateTimePicker, ActionFooter

package/docs/components/TimeRangeField.md

@@ -46,7 +46,7 @@ The input is read-only by default (picker only). Set `editable` to unlock typing
 | -------------- | --------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `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.                                                  |
+| `clearable`    | `boolean`                   | `false`                                      | 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.                                                     |

package/docs/components/TimeRangePicker.md

@@ -65,4 +65,4 @@ Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
 
 ## Related components
 
-TimePanel, TimeRangeField, TimePicker
+TimePanel, TimeRangeField, TimePicker, ActionFooter

package/package.json

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