bitboss-ui 3.0.0-beta.14 → 3.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (236) hide show
  1. package/dist/ai/BbAccordion.md +3 -3
  2. package/dist/ai/BbAlert.md +9 -5
  3. package/dist/ai/BbAsterisk.md +17 -0
  4. package/dist/ai/BbAvatar.md +12 -3
  5. package/dist/ai/BbBadge.md +5 -5
  6. package/dist/ai/BbBadgeButton.md +16 -16
  7. package/dist/ai/BbBaseButton.md +16 -16
  8. package/dist/ai/BbBaseCheckbox.md +8 -8
  9. package/dist/ai/BbBaseCheckboxGroup.md +13 -13
  10. package/dist/ai/BbBaseCheckboxIcon.md +26 -9
  11. package/dist/ai/BbBaseColorInput.md +11 -11
  12. package/dist/ai/BbBaseDatePicker.md +6 -6
  13. package/dist/ai/BbBaseDatePickerInput.md +15 -15
  14. package/dist/ai/BbBaseInputContainer.md +12 -12
  15. package/dist/ai/BbBaseNumberInput.md +8 -8
  16. package/dist/ai/BbBaseRadio.md +5 -5
  17. package/dist/ai/BbBaseRadioGroup.md +7 -7
  18. package/dist/ai/BbBaseRadioIcon.md +25 -9
  19. package/dist/ai/BbBaseRating.md +5 -5
  20. package/dist/ai/BbBaseSelect.md +21 -21
  21. package/dist/ai/BbBaseSlider.md +9 -9
  22. package/dist/ai/BbBaseSwitch.md +8 -8
  23. package/dist/ai/BbBaseSwitchGroup.md +13 -13
  24. package/dist/ai/BbBaseSwitchIcon.md +28 -10
  25. package/dist/ai/BbBaseTag.md +10 -10
  26. package/dist/ai/BbBaseTextInput.md +9 -9
  27. package/dist/ai/BbBaseTextarea.md +9 -9
  28. package/dist/ai/BbBaseTimePickerInput.md +13 -13
  29. package/dist/ai/BbBreadcrumbs.md +2 -2
  30. package/dist/ai/BbButton.md +15 -15
  31. package/dist/ai/BbCheckbox.md +18 -17
  32. package/dist/ai/BbCheckboxGroup.md +15 -14
  33. package/dist/ai/BbCollapsible.md +11 -9
  34. package/dist/ai/BbColorInput.md +15 -15
  35. package/dist/ai/BbColorPalette.md +12 -6
  36. package/dist/ai/BbConfirm.md +12 -5
  37. package/dist/ai/BbDatePicker.md +13 -13
  38. package/dist/ai/BbDatePickerInput.md +20 -20
  39. package/dist/ai/BbDialog.md +15 -12
  40. package/dist/ai/BbDropdown.md +124 -20
  41. package/dist/ai/BbDropdownButton.md +12 -12
  42. package/dist/ai/BbDropdownGroup.md +1 -1
  43. package/dist/ai/BbDropzone.md +4 -4
  44. package/dist/ai/BbForm.md +49 -14
  45. package/dist/ai/BbIcon.md +6 -0
  46. package/dist/ai/BbIndicator.md +5 -5
  47. package/dist/ai/BbNumberInput.md +11 -11
  48. package/dist/ai/BbOffCanvas.md +11 -10
  49. package/dist/ai/BbPagination.md +3 -3
  50. package/dist/ai/BbPopover.md +32 -17
  51. package/dist/ai/BbProgress.md +7 -4
  52. package/dist/ai/BbRadio.md +16 -15
  53. package/dist/ai/BbRadioGroup.md +20 -17
  54. package/dist/ai/BbRating.md +11 -11
  55. package/dist/ai/BbSelect.md +32 -28
  56. package/dist/ai/BbSelectPopover.md +17 -17
  57. package/dist/ai/BbSlider.md +37 -22
  58. package/dist/ai/BbSmoothHeight.md +1 -1
  59. package/dist/ai/BbSwitch.md +12 -10
  60. package/dist/ai/BbSwitchGroup.md +17 -14
  61. package/dist/ai/BbTable.md +17 -17
  62. package/dist/ai/BbTabs.md +28 -14
  63. package/dist/ai/BbTabsList.md +1 -1
  64. package/dist/ai/BbTabsPanes.md +1 -1
  65. package/dist/ai/BbTabsRoot.md +10 -10
  66. package/dist/ai/BbTag.md +14 -14
  67. package/dist/ai/BbTextInput.md +16 -15
  68. package/dist/ai/BbTextarea.md +13 -13
  69. package/dist/ai/BbTimePicker.md +10 -10
  70. package/dist/ai/BbTimePickerInput.md +17 -17
  71. package/dist/ai/BbToast.md +1 -1
  72. package/dist/ai/BbToastPortal.md +1 -1
  73. package/dist/ai/BbTooltip.md +12 -10
  74. package/dist/ai/BbTree.md +1 -1
  75. package/dist/ai/ChipsBox.md +1 -1
  76. package/dist/ai/CommonInputWrapper.md +10 -10
  77. package/dist/ai/CommonPopover.md +6 -6
  78. package/dist/ai/FlatListBox.md +5 -5
  79. package/dist/ai/GroupedListBox.md +5 -5
  80. package/dist/ai/ListBox.md +4 -4
  81. package/dist/ai/OptionsContainer.md +4 -4
  82. package/dist/ai/changelog.json +20 -2
  83. package/dist/ai/components.json +793 -61
  84. package/dist/ai/composables/useBbConfig.md +31 -11
  85. package/dist/ai/composables/useConfirm.md +5 -3
  86. package/dist/ai/guides/icons-policy.md +4 -2
  87. package/dist/ai/guides/installation-and-plugin-setup.md +59 -8
  88. package/dist/ai/guides/migration/components/bb-checkbox-group.md +30 -0
  89. package/dist/ai/guides/migration/components/bb-checkbox.md +2 -1
  90. package/dist/ai/guides/migration/components/bb-collapsible.md +5 -5
  91. package/dist/ai/guides/migration/components/bb-dialog.md +7 -5
  92. package/dist/ai/guides/migration/components/bb-offcanvas.md +18 -3
  93. package/dist/ai/guides/migration/components/bb-rating.md +8 -2
  94. package/dist/ai/guides/migration/components/bb-select.md +5 -2
  95. package/dist/ai/guides/migration/components/bb-text-input.md +6 -6
  96. package/dist/ai/guides/migration/v2-to-v3.md +75 -4
  97. package/dist/ai/index.md +6 -6
  98. package/dist/ai/source/BbAlert.md +60 -2
  99. package/dist/ai/source/BbAvatar.md +3 -3
  100. package/dist/ai/source/BbBadge.md +8 -2
  101. package/dist/ai/source/BbBadgeButton.md +8 -2
  102. package/dist/ai/source/BbBaseButton.md +3 -1
  103. package/dist/ai/source/BbBaseCheckboxGroup.md +1 -1
  104. package/dist/ai/source/BbBaseDatePicker.md +3 -1
  105. package/dist/ai/source/BbBaseDatePickerInput.md +5 -1
  106. package/dist/ai/source/BbBaseInputContainer.md +26 -1
  107. package/dist/ai/source/BbBaseRating.md +3 -1
  108. package/dist/ai/source/BbBaseTimePickerInput.md +5 -1
  109. package/dist/ai/source/BbCheckboxGroup.md +2 -1
  110. package/dist/ai/source/BbCollapsible.md +7 -1
  111. package/dist/ai/source/BbColorInput.md +3 -4
  112. package/dist/ai/source/BbColorPalette.md +3 -4
  113. package/dist/ai/source/BbDatePicker.md +5 -1
  114. package/dist/ai/source/BbDatePickerInput.md +5 -1
  115. package/dist/ai/source/BbDialog.md +53 -8
  116. package/dist/ai/source/BbDropdown.md +161 -20
  117. package/dist/ai/source/BbDropdownGroup.md +127 -11
  118. package/dist/ai/source/BbForm.md +93 -5
  119. package/dist/ai/source/BbIcon.md +3 -2
  120. package/dist/ai/source/BbNumberInput.md +3 -4
  121. package/dist/ai/source/BbOffCanvas.md +58 -7
  122. package/dist/ai/source/BbPopover.md +24 -17
  123. package/dist/ai/source/BbRadioGroup.md +3 -1
  124. package/dist/ai/source/BbSelect.md +11 -1
  125. package/dist/ai/source/BbSelectPopover.md +3 -1
  126. package/dist/ai/source/BbSlider.md +3 -4
  127. package/dist/ai/source/BbSwitchGroup.md +8 -5
  128. package/dist/ai/source/BbTable.md +109 -60
  129. package/dist/ai/source/BbTabs.md +6 -7
  130. package/dist/ai/source/BbTabsList.md +6 -7
  131. package/dist/ai/source/BbTabsPanes.md +6 -7
  132. package/dist/ai/source/BbTabsRoot.md +6 -7
  133. package/dist/ai/source/BbTag.md +3 -4
  134. package/dist/ai/source/BbTextInput.md +3 -4
  135. package/dist/ai/source/BbTextarea.md +3 -4
  136. package/dist/ai/source/BbTimePicker.md +4 -1
  137. package/dist/ai/source/BbTimePickerInput.md +5 -1
  138. package/dist/ai/source/BbToast.md +3 -1
  139. package/dist/ai/source/BbTooltip.md +5 -1
  140. package/dist/components/BbAlert/types.d.ts +10 -1
  141. package/dist/components/BbAvatar/BbAvatar.vue.d.ts +1 -1
  142. package/dist/components/BbAvatar/BbAvatar.vue_vue_type_script_setup_true_lang.js +33 -33
  143. package/dist/components/BbBadge/types.d.ts +8 -2
  144. package/dist/components/BbBaseButton/BbBaseButton.vue_vue_type_script_setup_true_lang.js +47 -47
  145. package/dist/components/BbBaseButton/RouterComponent.vue_vue_type_script_setup_true_lang.js +14 -14
  146. package/dist/components/BbBaseCheckboxGroup/types.d.ts +1 -1
  147. package/dist/components/BbBaseDatePicker/BbBaseDatePicker.vue_vue_type_script_setup_true_lang.js +167 -167
  148. package/dist/components/BbBaseDatePicker/BbBaseDatePickerInputDaySelector.vue.d.ts +9 -9
  149. package/dist/components/BbBaseDatePicker/BbBaseDatePickerInputDaySelector.vue_vue_type_script_setup_true_lang.js +79 -79
  150. package/dist/components/BbBaseDatePicker/BbBaseDatePickerMonthSelector.vue_vue_type_script_setup_true_lang.js +64 -64
  151. package/dist/components/BbBaseDatePickerInput/BbBaseDatePickerInput.vue.d.ts +1 -1
  152. package/dist/components/BbBaseDatePickerInput/BbBaseDatePickerInput.vue_vue_type_script_setup_true_lang.js +139 -139
  153. package/dist/components/BbBaseInputContainer/BbBaseInputContainer.vue_vue_type_script_setup_true_lang.js +1 -1
  154. package/dist/components/BbBaseRating/BbBaseRating.vue_vue_type_script_setup_true_lang.js +41 -41
  155. package/dist/components/BbBaseTimePickerInput/BbBaseTimePickerInput.vue.d.ts +1 -1
  156. package/dist/components/BbBaseTimePickerInput/BbBaseTimePickerInput.vue_vue_type_script_setup_true_lang.js +105 -105
  157. package/dist/components/BbCheckboxGroup/types.d.ts +2 -1
  158. package/dist/components/BbCollapsible/types.d.ts +7 -1
  159. package/dist/components/BbColorInput/BbColorInput.vue.d.ts +1 -1
  160. package/dist/components/BbColorInput/BbColorInput.vue_vue_type_script_setup_true_lang.js +18 -18
  161. package/dist/components/BbColorPalette/BbColorPalette.vue.d.ts +2 -2
  162. package/dist/components/BbColorPalette/BbColorPalette.vue_vue_type_script_setup_true_lang.js +50 -50
  163. package/dist/components/BbDatePicker/BbDatePicker.vue.d.ts +1 -1
  164. package/dist/components/BbDatePicker/BbDatePicker.vue_vue_type_script_setup_true_lang.js +100 -100
  165. package/dist/components/BbDatePickerInput/BbDatePickerInput.vue_vue_type_script_setup_true_lang.js +21 -21
  166. package/dist/components/BbDialog/BbDialog.vue.d.ts +1 -1
  167. package/dist/components/BbDialog/BbDialog.vue_vue_type_script_setup_true_lang.js +109 -104
  168. package/dist/components/BbDialog/types.d.ts +6 -2
  169. package/dist/components/BbDropdown/AdaptiveDropdown.vue.d.ts +2 -0
  170. package/dist/components/BbDropdown/AdaptiveDropdown.vue_vue_type_script_setup_true_lang.js +95 -76
  171. package/dist/components/BbDropdown/BbDropdown.vue.d.ts +2 -2
  172. package/dist/components/BbDropdown/BbDropdown.vue_vue_type_script_setup_true_lang.js +205 -199
  173. package/dist/components/BbDropdown/types.d.ts +13 -1
  174. package/dist/components/BbIcon/BbIcon.vue_vue_type_script_setup_true_lang.js +33 -33
  175. package/dist/components/BbNumberInput/BbNumberInput.vue.d.ts +1 -1
  176. package/dist/components/BbNumberInput/BbNumberInput.vue_vue_type_script_setup_true_lang.js +15 -15
  177. package/dist/components/BbOffCanvas/BbOffCanvas.vue.d.ts +1 -1
  178. package/dist/components/BbOffCanvas/BbOffCanvas.vue_vue_type_script_setup_true_lang.js +170 -161
  179. package/dist/components/BbOffCanvas/types.d.ts +3 -1
  180. package/dist/components/BbPopover/BbPopover.vue.d.ts +2 -2
  181. package/dist/components/BbPopover/BbPopover.vue_vue_type_script_setup_true_lang.js +149 -146
  182. package/dist/components/BbPopover/types.d.ts +3 -2
  183. package/dist/components/BbRadioGroup/types.d.ts +3 -1
  184. package/dist/components/BbSelect/BbSelect.vue_vue_type_script_setup_true_lang.js +22 -22
  185. package/dist/components/BbSelect/types.d.ts +8 -0
  186. package/dist/components/BbSelectPopover/BbSelectPopover.vue_vue_type_script_setup_true_lang.js +209 -209
  187. package/dist/components/BbSlider/BbSlider.vue.d.ts +1 -1
  188. package/dist/components/BbSlider/BbSlider.vue_vue_type_script_setup_true_lang.js +20 -20
  189. package/dist/components/BbTable/BbTable.vue_vue_type_script_setup_true_lang.js +731 -729
  190. package/dist/components/BbTable/utils.js +0 -1
  191. package/dist/components/BbTabs/types.d.ts +0 -8
  192. package/dist/components/BbTag/BbTag.vue.d.ts +1 -1
  193. package/dist/components/BbTag/BbTag.vue_vue_type_script_setup_true_lang.js +18 -18
  194. package/dist/components/BbTextInput/BbTextInput.vue.d.ts +1 -1
  195. package/dist/components/BbTextInput/BbTextInput.vue_vue_type_script_setup_true_lang.js +18 -18
  196. package/dist/components/BbTextarea/BbTextarea.vue.d.ts +1 -1
  197. package/dist/components/BbTextarea/BbTextarea.vue_vue_type_script_setup_true_lang.js +54 -54
  198. package/dist/components/BbTimePicker/BbTimePicker.vue.d.ts +1 -1
  199. package/dist/components/BbTimePicker/BbTimePicker.vue_vue_type_script_setup_true_lang.js +80 -80
  200. package/dist/components/BbTimePickerInput/BbTimePickerInput.vue_vue_type_script_setup_true_lang.js +61 -61
  201. package/dist/components/BbToast/BbToast.vue_vue_type_script_setup_true_lang.js +17 -17
  202. package/dist/components/BbTooltip/types.d.ts +5 -1
  203. package/dist/components/FlatListBox/FlatListBox.vue_vue_type_script_setup_true_lang.js +8 -8
  204. package/dist/components/GroupedListBox/GroupedListBox.vue_vue_type_script_setup_true_lang.js +6 -6
  205. package/dist/composables/useBaseOptions.js +1 -1
  206. package/dist/composables/useBbConfig.d.ts +21 -6
  207. package/dist/composables/useBbConfig.js +10 -3
  208. package/dist/composables/useConfig.d.ts +50 -0
  209. package/dist/composables/useConfig.js +9 -0
  210. package/dist/composables/useLocale.js +10 -7
  211. package/dist/composables/useMobile.js +5 -5
  212. package/dist/composables/useToast.js +5 -5
  213. package/dist/deprecation/ai-deprecations.json.d.ts +110 -0
  214. package/dist/deprecation/ai-deprecations.json.js +1 -1
  215. package/dist/directives/bbDropdown.d.ts +10 -4
  216. package/dist/directives/bbDropdown.js +7 -7
  217. package/dist/index.d.ts +1 -1
  218. package/dist/llms-full.txt +1351 -838
  219. package/dist/llms-medium.txt +64 -13
  220. package/dist/llms.txt +1 -1
  221. package/dist/nuxt-auto-imports.d.ts +100 -0
  222. package/dist/nuxt-auto-imports.js +55 -0
  223. package/dist/nuxt-module.d.ts +22 -1
  224. package/dist/nuxt.js +22 -8
  225. package/dist/plugin.d.ts +10 -1
  226. package/dist/plugin.js +20 -19
  227. package/dist/runtime/nuxt-plugin.js +5 -5
  228. package/dist/styles.css +1 -1
  229. package/dist/utilities/misc/listboxMetrics.d.ts +3 -3
  230. package/dist/utilities/misc/listboxMetrics.js +2 -2
  231. package/dist/validated/BbForm.vue_vue_type_script_setup_true_lang.js +45 -27
  232. package/dist/validated/useValidatedField.js +25 -23
  233. package/llms.txt +1 -1
  234. package/package.json +1 -1
  235. package/scripts/lib/html-attributes.mjs +91 -0
  236. package/scripts/lib/validate-bb-markup.mjs +59 -4
@@ -529,10 +529,10 @@ is generated for you.
529
529
 
530
530
  | Prop | Type | Default | Required | Description |
531
531
  | --- | --- | --- | --- | --- |
532
- | `eager` | `boolean \| undefined` | | | Prevents rendering content before it's made visible. |
532
+ | `eager` | `boolean \| undefined` | `false` | | Prevents rendering content before it's made visible. |
533
533
  | `id` | `string \| undefined` | | | The identifier of the component. |
534
534
  | `modelValue` | `boolean \| undefined` | `false` | | Used by v-model to trigger opening / closing the collapsible. An accordion with no `v-model` starts closed. |
535
- | `transitionDuration` | `number \| undefined` | `transitions.medium` | | How long the transition has to last in milliseconds |
535
+ | `transitionDuration` | `number \| undefined` | `250` | | How long the transition has to last in milliseconds |
536
536
 
537
537
  ## Events
538
538
 
@@ -546,4 +546,4 @@ is generated for you.
546
546
  ## See Also
547
547
 
548
548
  - [BbCollapsible](./BbCollapsible.md) — Toggles visibility of collapsible content blocks.
549
- - [BbTabs](./BbTabs.md) — Switches between tabbed content views (shadcn-like strip; BbTabRoot enables split layouts).
549
+ - [BbTabs](./BbTabs.md) — Switches between tabbed content views (shadcn-like strip; the co-located BbTabsRoot / BbTabsList / BbTabsPanes exports enable split layouts).
@@ -139,8 +139,12 @@ Bind `v-model` when the visibility matters to you:
139
139
  </p>
140
140
  </div>
141
141
 
142
+ <!--
143
+ `v-model` alone owns the dismissal, so the alert plays its own leave
144
+ transition. Pairing it with a `v-if` on the SAME element unmounts the
145
+ node the instant the model flips and the animation never runs.
146
+ -->
142
147
  <BbAlert
143
- v-if="showBanner"
144
148
  v-model="showBanner"
145
149
  close-label="Dismiss email verification reminder"
146
150
  icon="lucide:mail"
@@ -149,7 +153,7 @@ Bind `v-model` when the visibility matters to you:
149
153
  variant="primary"
150
154
  />
151
155
  <BbButton
152
- v-else
156
+ v-if="!showBanner"
153
157
  prepend:icon="lucide:mail"
154
158
  variant="ghost"
155
159
  @click="showBanner = true"
@@ -392,14 +396,14 @@ const publish = () => {
392
396
  | --- | --- | --- | --- | --- |
393
397
  | `ariaLive` | `"off" \| "polite" \| "assertive" \| undefined` | | | ARIA live region politeness. Defaults to `'assertive'` for destructive/warning variants, otherwise `'polite'`. |
394
398
  | `closeLabel` | `string \| undefined` | | | Visually hidden string used to label the close button. |
395
- | `hideClose` | `boolean \| undefined` | | | Defines whether to hide the close button. |
399
+ | `hideClose` | `boolean \| undefined` | `false` | | Defines whether to hide the close button. |
396
400
  | `icon` | `string \| undefined` | | | Name of a registered icon to use, or a full raw `<svg>` string (e.g. an SVG file imported with `?raw`). |
397
401
  | `iconSize` | `number \| ({ size?: any; } & string) \| keyof Sizes \| undefined` | `"16"` | | Size of the icon to use. |
398
402
  | `modelValue` | `any` | `true` | | Used by v-model, set type to any to avoid Vue casting it as false. Alerts are visible on mount; the model dismisses them. |
399
403
  | `role` | `"alert" \| "status" \| undefined` | | | Accessibility role for the alert container. Defaults to `'alert'` for destructive/warning variants, otherwise `'status'`. |
400
404
  | `text` | `string \| undefined` | | | Text content of the alert body. |
401
405
  | `title` | `string \| undefined` | | | Text content of the alert title. |
402
- | `transitionDuration` | `number \| undefined` | `transitions.medium` | | Transition duration in milliseconds for enter/leave. |
406
+ | `transitionDuration` | `number \| undefined` | `250` | | Transition duration in milliseconds for enter/leave. |
403
407
  | `variant` | `keyof AlertVariantRegistry \| undefined` | `"outline"` | | Visual variant of the alert. |
404
408
 
405
409
  ## Events
@@ -414,4 +418,4 @@ const publish = () => {
414
418
 
415
419
  ## See Also
416
420
 
417
- - [BbToast](./BbToast.md) — Shows transient notification messages.
421
+ - [BbToast](./BbToast.md) — Shows transient notification messages (includes the co-located BbToastPortal export).
@@ -33,6 +33,23 @@ you compose a bespoke label outside those controls.
33
33
  Wrap it in an element with your own spacing if the default `margin-inline-start`
34
34
  doesn't suit the layout; the glyph inherits nothing else from its surroundings.
35
35
 
36
+ ### It is `aria-hidden` — the control carries the requirement
37
+
38
+ The span renders `aria-hidden="true"`, so **screen readers never announce it**.
39
+ That is deliberate: an asterisk read aloud as "star" is noise, and a marker
40
+ placed in a label is not a reliable way to convey a requirement. What actually
41
+ carries mandatoriness to assistive tech is the **`required` attribute on the
42
+ control** — which the library sets from your `required` prop.
43
+
44
+ The practical consequence: the marker is a _visual_ affordance only, and
45
+ `required` is the real thing. Never ship a field that shows the asterisk
46
+ without `required` (sighted users see a requirement that assistive tech cannot
47
+ perceive), and never assume the asterisk is doing accessibility work.
48
+
49
+ `showAsterisk` on the validated controls is also gated on the plugin option, so
50
+ with `requiredAsterisk: false` there is no way to render the marker through
51
+ them at all — placing `BbAsterisk` by hand is then the only route.
52
+
36
53
  ## Props
37
54
 
38
55
  - None.
@@ -83,8 +83,17 @@ not hero examples.
83
83
  The fallback surface is **always painted with the primary design token** —
84
84
  `--bb-primary` behind, `--bb-primary-fg` for the initials/icon, the same
85
85
  pairing as a primary button — so initials stay legible in light and dark and
86
- every avatar matches your theme automatically. There is no per-avatar tinting
87
- API: theming happens through the tokens, not a prop.
86
+ every avatar matches your theme automatically.
87
+
88
+ There is no tinting **prop**, but there are three component locals on
89
+ `.bb-avatar` for the cases the theme cannot cover — a per-tenant or
90
+ per-user colour: `--bg-color` (fallback surface, defaults to `--bb-primary`),
91
+ `--text-color` (initials, `--bb-primary-fg`) and `--default-icon-color` (the
92
+ placeholder glyph). Set them on the avatar or on a class you put on it:
93
+
94
+ ```vue
95
+ <BbAvatar text="Acme Studio" :style="{ '--bg-color': tenant.color }" />
96
+ ```
88
97
 
89
98
  **The size scale**
90
99
 
@@ -512,4 +521,4 @@ available in visible text or an adjacent label.
512
521
 
513
522
  ## See Also
514
523
 
515
- - [BbBadge](./BbBadge.md) — Displays compact status counters or labels, the floating mode acts as notification dot.
524
+ - [BbBadge](./BbBadge.md) — Displays a compact inline status counter or label. It sits in the flow for a bubble or dot anchored OVER another element, use BbIndicator (includes the co-located BbBadgeButton export).
@@ -4,7 +4,7 @@
4
4
 
5
5
  - Safety level: **Consumer API**
6
6
  - Group: **Feedback**
7
- - Description: Displays compact status counters or labels, the floating mode acts as notification dot.
7
+ - Description: Displays a compact inline status counter or label. It sits in the flow for a bubble or dot anchored OVER another element, use BbIndicator (includes the co-located BbBadgeButton export).
8
8
  - Usage rule: Prefer this component for consumer-facing implementations.
9
9
  - Implementation source (only when the contract below is not enough): [source/BbBadge.md](./source/BbBadge.md)
10
10
 
@@ -714,10 +714,10 @@ selectors like `.bb-badge > .bb-badge__content`, which no longer match.
714
714
  | Prop | Type | Default | Required | Description |
715
715
  | --- | --- | --- | --- | --- |
716
716
  | `append:icon` | `string \| undefined` | | | Icon rendered after the label. On a `clearable` badge it shares the trailing slot with the clear button: the icon shows at rest and the clear button reveals over it on hover/focus. |
717
- | `clearable` | `boolean \| undefined` | | | Renders a trailing clear button and emits `click:clear` when pressed — turns the badge into a dismissible token (the pattern formerly served by `BbChip`). |
718
- | `clearableLabel` | `string \| undefined` | | | Accessible label for the clear button. Falls back to the localized `badge.clearLabel` key. |
717
+ | `clearable` | `boolean \| undefined` | `false` | | Renders a trailing clear button and emits `click:clear` when pressed — turns the badge into a dismissible token (the pattern formerly served by `BbChip`). |
718
+ | `clearableLabel` | `string \| undefined` | | | Accessible label for the clear button. Rarely needed: unset, the name is **composed** from the localized `badge.clearLabel` verb and the badge's own text — "Remove Italy", not a bare "Remove" — which is already the right name in almost ever… |
719
719
  | `icon` | `string \| undefined` | | | Renders an icon-only badge. When set, `prepend:icon` / `append:icon` are ignored and the default slot becomes the badge's visually hidden accessible label — always provide it. |
720
- | `loading` | `boolean \| undefined` | | | Shows a spinner in place of the leftmost icon, mirroring `BbButton`: it replaces the `icon` glyph or the `prepend:icon` when one is set; when the `append:icon` is the sole icon it replaces that instead (e.g. a select-activator chevron while… |
720
+ | `loading` | `boolean \| undefined` | `false` | | Shows a spinner in place of the leftmost icon, mirroring `BbButton`: it replaces the `icon` glyph or the `prepend:icon` when one is set; when the `append:icon` is the sole icon it replaces that instead (e.g. a select-activator chevron while… |
721
721
  | `prepend:icon` | `string \| undefined` | | | Icon rendered before the label. |
722
722
  | `size` | `keyof Sizes \| undefined` | `"md"` | | Preset size of the badge. |
723
723
  | `variant` | `keyof BadgeVariantRegistry \| undefined` | `"primary"` | | Visual variant: `primary`, `secondary`, `destructive`, or `outline`. Register more via the vite plugin `badgeVariants` option and style `.bb-badge--<variant>` (set `--bg` / `--color`). |
@@ -732,6 +732,6 @@ selectors like `.bb-badge > .bb-badge__content`, which no longer match.
732
732
 
733
733
  ## See Also
734
734
 
735
- - [BbIndicator](./BbIndicator.md) — Anchors a notification bubble (count/short text) or a dot over a wrapped element, with floating and corner-placement options.
735
+ - [BbIndicator](./BbIndicator.md) — Anchors a notification bubble (count/short text) or a dot over a wrapped element.
736
736
  - [BbAvatar](./BbAvatar.md) — Displays an avatar and has a fallback content slot.
737
737
  - [BbBadgeButton](./BbBadgeButton.md) — Makes a badge's body interactive: slotted as a direct child of BbBadge it renders the badge body as a real button/link with full BbBaseButton parity, leaving `clearable` free to remain a separate control.
@@ -12,21 +12,21 @@
12
12
 
13
13
  | Prop | Type | Default | Required | Description |
14
14
  | --- | --- | --- | --- | --- |
15
- | `activeClass` | `string \| undefined` | | | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. |
16
- | `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | | | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
17
- | `async` | `boolean \| undefined` | | | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
15
+ | `activeClass` | `string \| undefined` | `'router-link-active'` | | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. |
16
+ | `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | `'page'` | | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
17
+ | `async` | `boolean \| undefined` | `false` | | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
18
18
  | `cacheFor` | `string \| number \| (string \| number)[] \| undefined` | | | Inertia: how long a prefetched response stays fresh before it is re-fetched. A single duration, or `[staleAfter, expiresAfter]`. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue3` to be in… |
19
19
  | `cacheTags` | `string \| string[] \| undefined` | | | Inertia: tags to file this visit's prefetch cache under, so a later request can invalidate the whole tagged group. |
20
20
  | `component` | `string \| undefined` | | | Inertia: the page component this visit resolves to. Rarely set by hand — the server normally decides it. |
21
21
  | `data` | `object \| undefined` | | | Request payload forwarded to Inertia when navigating via `href` in an Inertia-enabled app. Ignored when not using Inertia. |
22
- | `disabled` | `boolean \| undefined` | | | Disables user interaction. - When rendering as a native button, sets the `disabled` attribute. - When rendering as a link (anchor/Inertia), removes `href`, adds `aria-disabled="true"`, and prevents navigation while keeping focusable semanti… |
22
+ | `disabled` | `boolean \| undefined` | `false` | | Disables user interaction. - When rendering as a native button, sets the `disabled` attribute. - When rendering as a link (anchor/Inertia), removes `href`, adds `aria-disabled="true"`, and prevents navigation while keeping focusable semanti… |
23
23
  | `download` | `string \| boolean \| undefined` | | | Marks an `href` link as a download. Renders a plain `<a download>` doing a native navigation — never an Inertia/router visit — so file downloads (including same-origin, `blob:` and `data:` URLs) work. Pass a string to set the suggested file… |
24
- | `exactActiveClass` | `string \| undefined` | | | CSS class applied when the component renders as a link and the target of the link and the url matches exactly. Ported for Inertia compatibility. |
24
+ | `exactActiveClass` | `string \| undefined` | `'router-link-exact-active'` | | CSS class applied when the component renders as a link and the target of the link and the url matches exactly. Ported for Inertia compatibility. |
25
25
  | `except` | `string[] \| undefined` | | | Inertia: the inverse of `only` — properties to EXCLUDE from a partial reload. Pass one or the other, not both. |
26
- | `external` | `boolean \| undefined` | | | Forces an `href` link to render as a plain `<a>` (native navigation), bypassing Inertia/router interception — the same intent as Nuxt's `NuxtLink` `external`. Use for links outside the SPA. One of the native-anchor signals alongside `target… |
26
+ | `external` | `boolean \| undefined` | `false` | | Forces an `href` link to render as a plain `<a>` (native navigation), bypassing Inertia/router interception — the same intent as Nuxt's `NuxtLink` `external`. Use for links outside the SPA. One of the native-anchor signals alongside `target… |
27
27
  | `headers` | `object \| undefined` | | | Additional HTTP headers forwarded to Inertia when navigating via `href` in an Inertia-enabled app. |
28
28
  | `href` | `string \| undefined` | | | Hyperlink reference used when rendering as an anchor (or as an Inertia link in Inertia-enabled apps). If provided and not disabled, the component renders as an anchor/Inertia link. |
29
- | `instant` | `boolean \| undefined` | | | Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip. |
29
+ | `instant` | `boolean \| undefined` | `false` | | Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip. |
30
30
  | `method` | `"get" \| "post" \| "put" \| "patch" \| "delete" \| undefined` | | | HTTP method used for Inertia navigation when `href` is provided in an Inertia-enabled app. Ignored otherwise. |
31
31
  | `onBefore` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia right before the request is sent. |
32
32
  | `onCancel` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia when a request is cancelled. |
@@ -41,17 +41,17 @@
41
41
  | `onSuccess` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia when a request succeeds. |
42
42
  | `pageProps` | `Record<string, unknown> \| ((currentProps: Record<string, unknown>, sharedProps: Record<string, unknown>) => Record<string, unknown>) \| null \| undefined` | | | Inertia: props to merge into the next page optimistically, before the server responds. Either an object or a function of the current props. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue… |
43
43
  | `prefetch` | `string \| boolean \| string[] \| undefined` | | | Inertia: fetch and cache this link's page ahead of the click. `true` uses the default trigger; a string or list of strings picks them (`'mount'`, `'hover'`, `'click'`). |
44
- | `preserveScroll` | `boolean \| ((props: Record<string, unknown>) => boolean) \| undefined` | | | Controls whether Inertia should preserve the current scroll position after navigation. Can be a boolean or a predicate receiving the visit props. |
45
- | `preserveState` | `boolean \| ((props: Record<string, unknown>) => boolean) \| null \| undefined` | | | Controls whether Inertia should preserve the current state after navigation. Can be a boolean or a predicate receiving the visit props. |
46
- | `preserveUrl` | `boolean \| undefined` | | | Inertia: keep the current URL in the address bar even though the page content changes. |
47
- | `queryStringArrayFormat` | `"brackets" \| "indices" \| undefined` | | | Format to use when serializing array values into the query string for Inertia requests. |
44
+ | `preserveScroll` | `boolean \| ((props: Record<string, unknown>) => boolean) \| undefined` | `false` | | Controls whether Inertia should preserve the current scroll position after navigation. Can be a boolean or a predicate receiving the visit props. |
45
+ | `preserveState` | `boolean \| ((props: Record<string, unknown>) => boolean) \| null \| undefined` | `false` | | Controls whether Inertia should preserve the current state after navigation. Can be a boolean or a predicate receiving the visit props. |
46
+ | `preserveUrl` | `boolean \| undefined` | `false` | | Inertia: keep the current URL in the address bar even though the page content changes. |
47
+ | `queryStringArrayFormat` | `"brackets" \| "indices" \| undefined` | `'brackets'` | | Format to use when serializing array values into the query string for Inertia requests. |
48
48
  | `rel` | `string \| undefined` | | | Relationship between the current document and the linked resource. Useful for security when opening new tabs (e.g. `noopener noreferrer`). |
49
- | `replace` | `boolean \| undefined` | | | Uses history replacement instead of push navigation. - With Vue Router (`to`), calls `router.replace`. - With Inertia (`href`), performs a replace visit. |
50
- | `tag` | `ButtonTag \| undefined` | | | Element to render for the plain (non-link, non-router) button: - `'button'` (default) — real button semantics and keyboard behavior - `'div'` / `'span'` — a clickable box nested inside another button or link, where a nested `<button>` would… |
49
+ | `replace` | `boolean \| undefined` | `false` | | Uses history replacement instead of push navigation. - With Vue Router (`to`), calls `router.replace`. - With Inertia (`href`), performs a replace visit. |
50
+ | `tag` | `ButtonTag \| undefined` | `'button'` | | Element to render for the plain (non-link, non-router) button: - `'button'` (default) — real button semantics and keyboard behavior - `'div'` / `'span'` — a clickable box nested inside another button or link, where a nested `<button>` would… |
51
51
  | `target` | `string \| undefined` | | | Target browsing context for anchor/Inertia links (e.g. `_self`, `_blank`). Ignored when rendering as a native button. |
52
52
  | `to` | `string \| wt \| bt \| undefined` | | | Route location to navigate to. When provided (and not disabled), the component renders as a Vue Router link. |
53
- | `type` | `"button" \| "submit" \| "reset" \| undefined` | | | Native `type` attribute used when rendering as a button (e.g. `button`, `submit`, `reset`). |
54
- | `viewTransition` | `boolean \| undefined` | | | Inertia: run the page swap inside a View Transition, where the browser supports one. |
53
+ | `type` | `"button" \| "submit" \| "reset" \| undefined` | `'button'` | | Native `type` attribute used when rendering as a button (e.g. `button`, `submit`, `reset`). |
54
+ | `viewTransition` | `boolean \| undefined` | `false` | | Inertia: run the page swap inside a View Transition, where the browser supports one. |
55
55
 
56
56
  ## Events
57
57
 
@@ -63,5 +63,5 @@
63
63
 
64
64
  ## See Also
65
65
 
66
- - [BbBadge](./BbBadge.md) — Displays compact status counters or labels, the floating mode acts as notification dot.
66
+ - [BbBadge](./BbBadge.md) — Displays a compact inline status counter or label. It sits in the flow for a bubble or dot anchored OVER another element, use BbIndicator (includes the co-located BbBadgeButton export).
67
67
  - [BbBaseButton](./BbBaseButton.md) — Unstyled button/link primitive: element resolution (button/anchor/router link) and the full navigation engine, with no visual chrome. Use for any clickable or navigable surface that is not a variant-first BbButton — cards, list rows, custom links.
@@ -455,22 +455,22 @@ const sent = ref(false);
455
455
 
456
456
  | Prop | Type | Default | Required | Description |
457
457
  | --- | --- | --- | --- | --- |
458
- | `activeClass` | `string \| undefined` | | | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. |
459
- | `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | | | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
460
- | `async` | `boolean \| undefined` | | | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
461
- | `block` | `boolean \| undefined` | | | Makes the component take the full available width (block-level layout). Adds the `bb-base-button--block` modifier class. |
458
+ | `activeClass` | `string \| undefined` | `'router-link-active'` | | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. |
459
+ | `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | `'page'` | | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
460
+ | `async` | `boolean \| undefined` | `false` | | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
461
+ | `block` | `boolean \| undefined` | `false` | | Makes the component take the full available width (block-level layout). Adds the `bb-base-button--block` modifier class. |
462
462
  | `cacheFor` | `string \| number \| (string \| number)[] \| undefined` | | | Inertia: how long a prefetched response stays fresh before it is re-fetched. A single duration, or `[staleAfter, expiresAfter]`. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue3` to be in… |
463
463
  | `cacheTags` | `string \| string[] \| undefined` | | | Inertia: tags to file this visit's prefetch cache under, so a later request can invalidate the whole tagged group. |
464
464
  | `component` | `string \| undefined` | | | Inertia: the page component this visit resolves to. Rarely set by hand — the server normally decides it. |
465
465
  | `data` | `object \| undefined` | | | Request payload forwarded to Inertia when navigating via `href` in an Inertia-enabled app. Ignored when not using Inertia. |
466
- | `disabled` | `boolean \| undefined` | | | Disables user interaction. - When rendering as a native button, sets the `disabled` attribute. - When rendering as a link (anchor/Inertia), removes `href`, adds `aria-disabled="true"`, and prevents navigation while keeping focusable semanti… |
466
+ | `disabled` | `boolean \| undefined` | `false` | | Disables user interaction. - When rendering as a native button, sets the `disabled` attribute. - When rendering as a link (anchor/Inertia), removes `href`, adds `aria-disabled="true"`, and prevents navigation while keeping focusable semanti… |
467
467
  | `download` | `string \| boolean \| undefined` | | | Marks an `href` link as a download. Renders a plain `<a download>` doing a native navigation — never an Inertia/router visit — so file downloads (including same-origin, `blob:` and `data:` URLs) work. Pass a string to set the suggested file… |
468
- | `exactActiveClass` | `string \| undefined` | | | CSS class applied when the component renders as a link and the target of the link and the url matches exactly. Ported for Inertia compatibility. |
468
+ | `exactActiveClass` | `string \| undefined` | `'router-link-exact-active'` | | CSS class applied when the component renders as a link and the target of the link and the url matches exactly. Ported for Inertia compatibility. |
469
469
  | `except` | `string[] \| undefined` | | | Inertia: the inverse of `only` — properties to EXCLUDE from a partial reload. Pass one or the other, not both. |
470
- | `external` | `boolean \| undefined` | | | Forces an `href` link to render as a plain `<a>` (native navigation), bypassing Inertia/router interception — the same intent as Nuxt's `NuxtLink` `external`. Use for links outside the SPA. One of the native-anchor signals alongside `target… |
470
+ | `external` | `boolean \| undefined` | `false` | | Forces an `href` link to render as a plain `<a>` (native navigation), bypassing Inertia/router interception — the same intent as Nuxt's `NuxtLink` `external`. Use for links outside the SPA. One of the native-anchor signals alongside `target… |
471
471
  | `headers` | `object \| undefined` | | | Additional HTTP headers forwarded to Inertia when navigating via `href` in an Inertia-enabled app. |
472
472
  | `href` | `string \| undefined` | | | Hyperlink reference used when rendering as an anchor (or as an Inertia link in Inertia-enabled apps). If provided and not disabled, the component renders as an anchor/Inertia link. |
473
- | `instant` | `boolean \| undefined` | | | Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip. |
473
+ | `instant` | `boolean \| undefined` | `false` | | Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip. |
474
474
  | `method` | `"get" \| "post" \| "put" \| "patch" \| "delete" \| undefined` | | | HTTP method used for Inertia navigation when `href` is provided in an Inertia-enabled app. Ignored otherwise. |
475
475
  | `onBefore` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia right before the request is sent. |
476
476
  | `onCancel` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia when a request is cancelled. |
@@ -485,18 +485,18 @@ const sent = ref(false);
485
485
  | `onSuccess` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia when a request succeeds. |
486
486
  | `pageProps` | `Record<string, unknown> \| ((currentProps: Record<string, unknown>, sharedProps: Record<string, unknown>) => Record<string, unknown>) \| null \| undefined` | | | Inertia: props to merge into the next page optimistically, before the server responds. Either an object or a function of the current props. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue… |
487
487
  | `prefetch` | `string \| boolean \| string[] \| undefined` | | | Inertia: fetch and cache this link's page ahead of the click. `true` uses the default trigger; a string or list of strings picks them (`'mount'`, `'hover'`, `'click'`). |
488
- | `preserveScroll` | `boolean \| ((props: Record<string, unknown>) => boolean) \| undefined` | | | Controls whether Inertia should preserve the current scroll position after navigation. Can be a boolean or a predicate receiving the visit props. |
489
- | `preserveState` | `boolean \| ((props: Record<string, unknown>) => boolean) \| null \| undefined` | | | Controls whether Inertia should preserve the current state after navigation. Can be a boolean or a predicate receiving the visit props. |
490
- | `preserveUrl` | `boolean \| undefined` | | | Inertia: keep the current URL in the address bar even though the page content changes. |
491
- | `queryStringArrayFormat` | `"brackets" \| "indices" \| undefined` | | | Format to use when serializing array values into the query string for Inertia requests. |
488
+ | `preserveScroll` | `boolean \| ((props: Record<string, unknown>) => boolean) \| undefined` | `false` | | Controls whether Inertia should preserve the current scroll position after navigation. Can be a boolean or a predicate receiving the visit props. |
489
+ | `preserveState` | `boolean \| ((props: Record<string, unknown>) => boolean) \| null \| undefined` | `false` | | Controls whether Inertia should preserve the current state after navigation. Can be a boolean or a predicate receiving the visit props. |
490
+ | `preserveUrl` | `boolean \| undefined` | `false` | | Inertia: keep the current URL in the address bar even though the page content changes. |
491
+ | `queryStringArrayFormat` | `"brackets" \| "indices" \| undefined` | `'brackets'` | | Format to use when serializing array values into the query string for Inertia requests. |
492
492
  | `rel` | `string \| undefined` | | | Relationship between the current document and the linked resource. Useful for security when opening new tabs (e.g. `noopener noreferrer`). |
493
- | `replace` | `boolean \| undefined` | | | Uses history replacement instead of push navigation. - With Vue Router (`to`), calls `router.replace`. - With Inertia (`href`), performs a replace visit. |
494
- | `tag` | `ButtonTag \| undefined` | | | Element to render for the plain (non-link, non-router) button: - `'button'` (default) — real button semantics and keyboard behavior - `'div'` / `'span'` — a clickable box nested inside another button or link, where a nested `<button>` would… |
493
+ | `replace` | `boolean \| undefined` | `false` | | Uses history replacement instead of push navigation. - With Vue Router (`to`), calls `router.replace`. - With Inertia (`href`), performs a replace visit. |
494
+ | `tag` | `ButtonTag \| undefined` | `'button'` | | Element to render for the plain (non-link, non-router) button: - `'button'` (default) — real button semantics and keyboard behavior - `'div'` / `'span'` — a clickable box nested inside another button or link, where a nested `<button>` would… |
495
495
  | `target` | `string \| undefined` | | | Target browsing context for anchor/Inertia links (e.g. `_self`, `_blank`). Ignored when rendering as a native button. |
496
496
  | `text` | `string \| undefined` | | | Fallback text content rendered when no default slot is provided. |
497
497
  | `to` | `string \| wt \| bt \| undefined` | | | Route location to navigate to. When provided (and not disabled), the component renders as a Vue Router link. |
498
498
  | `type` | `"button" \| "submit" \| "reset" \| undefined` | `"button"` | | Native `type` attribute used when rendering as a button (e.g. `button`, `submit`, `reset`). |
499
- | `viewTransition` | `boolean \| undefined` | | | Inertia: run the page swap inside a View Transition, where the browser supports one. |
499
+ | `viewTransition` | `boolean \| undefined` | `false` | | Inertia: run the page swap inside a View Transition, where the browser supports one. |
500
500
 
501
501
  ## Events
502
502
 
@@ -510,4 +510,4 @@ const sent = ref(false);
510
510
 
511
511
  - [BbButton](./BbButton.md) — Button with loading state, tooltip, and icon support.
512
512
  - [BbDropdownButton](./BbDropdownButton.md) — A button with primary action and all other actions collected in a dropdown.
513
- - [BbDropdown](./BbDropdown.md) — Displays contextual action menus and menu content.
513
+ - [BbDropdown](./BbDropdown.md) — Displays contextual action menus and menu content (includes the co-located BbDropdownGroup export, which is how a selectable group is bound).
@@ -17,19 +17,19 @@
17
17
  | Prop | Type | Default | Required | Description |
18
18
  | --- | --- | --- | --- | --- |
19
19
  | `ariaDescribedby` | `string \| undefined` | | | ID of the element that describes this checkbox for assistive technologies. Forwarded to the input as `aria-describedby`. |
20
- | `autofocus` | `Booleanish \| undefined` | | | Automatically focuses the checkbox when the page/component loads. Use sparingly to avoid usability issues. |
20
+ | `autofocus` | `Booleanish \| undefined` | `false` | | Automatically focuses the checkbox when the page/component loads. Use sparingly to avoid usability issues. |
21
21
  | `checked` | `boolean \| undefined` | `undefined` | | Forces the checkbox checked state (controlled prop). When omitted, the checked state is derived from `modelValue === trueValue`. Deliberately `undefined` rather than `false`, so "unset" stays distinguishable from an explicit `:checked="fals… |
22
- | `disabled` | `boolean \| undefined` | | | Disables user interaction. Also applied when `readonly` is set, since native checkboxes do not support `readonly`. |
22
+ | `disabled` | `boolean \| undefined` | `false` | | Disables user interaction. Also applied when `readonly` is set, since native checkboxes do not support `readonly`. |
23
23
  | `falseValue` | `any` | `false` | | Value submitted/emitted when the checkbox is unchecked. Accepts any serializable value. Serialized to a string for form submission. |
24
- | `hasErrors` | `boolean \| undefined` | | | Puts the component into an error state (adds error styling class `bb-base-checkbox--errors`). |
25
- | `hasWarning` | `boolean \| undefined` | | | Puts the component into a warning state (adds `bb-base-checkbox--warnings`). Errors take priority when both are set. |
24
+ | `hasErrors` | `boolean \| undefined` | `false` | | Puts the component into an error state (adds error styling class `bb-base-checkbox--errors`). |
25
+ | `hasWarning` | `boolean \| undefined` | `false` | | Puts the component into a warning state (adds `bb-base-checkbox--warnings`). Errors take priority when both are set. |
26
26
  | `id` | `string \| undefined` | | | Identifier forwarded to the input. |
27
- | `indeterminate` | `boolean \| undefined` | | | Renders the checkbox in the indeterminate state (neither checked nor unchecked). Note: the native `indeterminate` state resets on user click; this component re-applies it to keep UI and prop aligned. |
27
+ | `indeterminate` | `boolean \| undefined` | `false` | | Renders the checkbox in the indeterminate state (neither checked nor unchecked). Note: the native `indeterminate` state resets on user click; this component re-applies it to keep UI and prop aligned. |
28
28
  | `modelValue` | `any` | | | Bound value for `v-model`. When it equals `trueValue` the checkbox is considered checked, otherwise unchecked. |
29
29
  | `name` | `string \| undefined` | | | Name attribute of the input, used during form submission. |
30
- | `readonly` | `boolean \| undefined` | | | Puts the input in a read-only state. Since checkboxes do not support native `readonly`, the input is disabled while styled as read-only. |
31
- | `required` | `boolean \| undefined` | | | Marks the input as required for form validation. |
32
- | `submitWhenFalse` | `boolean \| undefined` | | | When unchecked, submits a hidden input with `falseValue` so that a value is still posted with the form. When checked, the visible input submits `trueValue` as usual. |
30
+ | `readonly` | `boolean \| undefined` | `false` | | Puts the input in a read-only state. Since checkboxes do not support native `readonly`, the input is disabled while styled as read-only. |
31
+ | `required` | `boolean \| undefined` | `false` | | Marks the input as required for form validation. |
32
+ | `submitWhenFalse` | `boolean \| undefined` | `false` | | When unchecked, submits a hidden input with `falseValue` so that a value is still posted with the form. When checked, the visible input submits `trueValue` as usual. |
33
33
  | `trueValue` | `any` | `true` | | Value submitted/emitted when the checkbox is checked. Accepts any serializable value. Serialized to a string for form submission. |
34
34
 
35
35
  ## Events
@@ -17,34 +17,34 @@
17
17
  | Prop | Type | Default | Required | Description |
18
18
  | --- | --- | --- | --- | --- |
19
19
  | `ariaDescribedby` | `string \| undefined` | | | ID of the element that describes the entire checkbox group for assistive technologies. Forwarded to each generated input as `aria-describedby`. |
20
- | `autofocus` | `Booleanish \| undefined` | | | Automatically focuses the first checkbox on mount when true. Applied only to the first option. |
21
- | `dependencies` | `unknown[] \| undefined` | | | List of reactive values which, when changed, trigger items re-fetching. Useful to reload options based on external inputs. |
20
+ | `autofocus` | `Booleanish \| undefined` | `false` | | Automatically focuses the first checkbox on mount when true. Applied only to the first option. |
21
+ | `dependencies` | `unknown[] \| undefined` | `[]` | | List of reactive values which, when changed, trigger items re-fetching. Useful to reload options based on external inputs. |
22
22
  | `depsDebounceTime` | `number \| undefined` | `0` | | Debounce delay (ms) applied when reacting to `dependencies` changes. |
23
23
  | `direction` | `"horizontal" \| "vertical" \| undefined` | `"horizontal"` | | Direction of the group layout. - `horizontal`: options flow in rows - `vertical`: options stack in a column |
24
- | `disabled` | `boolean \| undefined` | | | Disables interaction for the whole group. |
25
- | `enforceCoherence` | `boolean \| undefined` | | | Enforces that `modelValue` contains only values present in `items`. Incoherent values are removed and `update:modelValue` is emitted with a coherent array. Please check out {@link https://ui-components-docs.vercel.app/it/guides/coherence th… |
26
- | `hasErrors` | `boolean \| undefined` | | | Puts the component into an error state adds the error styling class. |
27
- | `hasWarning` | `boolean \| undefined` | | | Puts the component into a warning state. Errors take priority when both are set. |
28
- | `hideLabel` | `boolean \| undefined` | | | Visually hides each option's label text (the text rendered next to every input) while keeping it accessible to screen readers. |
24
+ | `disabled` | `boolean \| undefined` | `false` | | Disables interaction for the whole group. |
25
+ | `enforceCoherence` | `boolean \| undefined` | `false` | | Enforces that `modelValue` contains only values present in `items`. Incoherent values are removed and `update:modelValue` is emitted with a coherent array. Please check out {@link https://ui-components-docs.vercel.app/it/guides/coherence th… |
26
+ | `hasErrors` | `boolean \| undefined` | `false` | | Puts the component into an error state adds the error styling class. |
27
+ | `hasWarning` | `boolean \| undefined` | `false` | | Puts the component into a warning state. Errors take priority when both are set. |
28
+ | `hideLabel` | `boolean \| undefined` | `false` | | Visually hides each option's label text (the text rendered next to every input) while keeping it accessible to screen readers. |
29
29
  | `id` | `string \| undefined` | | | Identifier of the group. Used to derive per-option IDs for accessible labeling. |
30
30
  | `items` | `T[] \| ((prefill: boolean, modelValue?: any) => T[] \| Promise<T[]>)` | `[]` | yes | Items provider. Can be: - An array of items - A sync/async function `(prefill, modelValue) => items` When a function is provided, it is invoked on prefill and when dependencies change to load options dynamically. |
31
- | `itemText` | `(T extends object ? string \| ((item: T) => string) : (item: T) => string) \| undefined` | | | Defines how to derive the display text from an item. Accepts a nested key path into the item or a function `(item) => string`. |
32
- | `itemValue` | `(T extends object ? string \| ((item: T) => string) : (item: T) => any) \| undefined` | | | Defines how to derive the value from an item. Accepts a nested key path into the item or a function `(item) => any`. |
33
- | `loadingText` | `string \| undefined` | | | Text displayed while items are loading. |
31
+ | `itemText` | `(T extends object ? string \| ((item: T) => string) : (item: T) => string) \| undefined` | `JSON.stringify(item)` | | Defines how to derive the display text from an item. Accepts a nested key path into the item or a function `(item) => string`. |
32
+ | `itemValue` | `(T extends object ? string \| ((item: T) => string) : (item: T) => any) \| undefined` | `JSON.stringify(item)` | | Defines how to derive the value from an item. Accepts a nested key path into the item or a function `(item) => any`. |
33
+ | `loadingText` | `string \| undefined` | `'Loading...'` | | Text displayed while items are loading. |
34
34
  | `max` | `number \| undefined` | `Infinity` | | Maximum number of selectable items. |
35
35
  | `modelValue` | `any` | | yes | Selected values for the group. Used with `v-model`. Single value when `multiple` is false, array when `multiple` is true. |
36
36
  | `modelValueDebounceTime` | `number \| undefined` | `0` | | Debounce delay (ms) applied when reacting to `modelValue` changes. |
37
37
  | `multiple` | `boolean \| undefined` | `true` | | Enables multi-selection behavior. When `true`, `modelValue` must be an array and emitted updates are arrays. When `false`, `modelValue` must be a single value (or `null`) and emitted updates are single values. |
38
38
  | `name` | `string \| undefined` | | | Name attribute applied to each input for form submission. |
39
- | `noDataText` | `string \| undefined` | | | Text displayed when there are no items to show. |
40
- | `readonly` | `boolean \| undefined` | | | Makes all checkboxes read-only. Since checkboxes do not support native `readonly`, inputs are disabled while styled as read-only. |
39
+ | `noDataText` | `string \| undefined` | `'No data to display'` | | Text displayed when there are no items to show. |
40
+ | `readonly` | `boolean \| undefined` | `false` | | Makes all checkboxes read-only. Since checkboxes do not support native `readonly`, inputs are disabled while styled as read-only. |
41
41
  | `selectable` | `boolean \| ((item: T) => boolean) \| undefined` | `true` | | Defines whether options are selectable. Can be a global boolean that affects all options or a function that accepts an item and returns a boolean that only affects that item. Non-selectable options are rendered disabled. |
42
42
 
43
43
  ## Events
44
44
 
45
45
  - `active` — `(e: "active"): void` — Emitted when the group becomes active (focus/click enters it).
46
46
  - `blur` — `(e: "blur", event: FocusEvent): void` — Emitted when one of the generated checkbox inputs loses focus. Forwards the original DOM `FocusEvent`.
47
- - `change` — `(e: "change", event: Event): void` — Emitted when a checkbox option is toggled. Forwards the original DOM `Event` from the checkbox input.
47
+ - `change` — `(e: "change", event: Event): void` — Emitted when an option is toggled. Forwards the original DOM `Event` from the checkbox input.
48
48
  - `click` — `(e: "click", event: MouseEvent): void` — Emitted when one of the generated checkbox inputs is clicked. Forwards the original DOM `MouseEvent`.
49
49
  - `focus` — `(e: "focus", event: FocusEvent): void` — Emitted when one of the generated checkbox inputs receives focus. Forwards the original DOM `FocusEvent`.
50
50
  - `inactive` — `(e: "inactive"): void` — Emitted when focus/click moves outside the group after it was active. Useful for validation-on-blur flows at group level.
@@ -110,8 +110,8 @@ const selected = ref<string[]>(['email']);
110
110
 
111
111
  ### Styling
112
112
 
113
- The glyph owns its own tokens, so restyle it by overriding CSS custom properties
114
- on the element (or an ancestor — they inherit):
113
+ The glyph owns its own tokens, so restyle it by overriding CSS custom
114
+ properties on it:
115
115
 
116
116
  - `--size` — box edge length (default `16px`)
117
117
  - `--r` — corner radius (default `4px`)
@@ -119,6 +119,23 @@ on the element (or an ancestor — they inherit):
119
119
  - `--check-color` — checkmark stroke (default `--bb-primary-fg`)
120
120
  - `--ring-color` — focus ring color
121
121
 
122
+ **On the element itself, not an ancestor.** Each of these is declared on the
123
+ glyph's own class, and a declaration on the element always beats one inherited
124
+ from an ancestor — so `--size` set on a wrapper `div` is simply ignored
125
+ (verified: the glyph stays 16px). Target the glyph class, or pass a `style` /
126
+ `class` that lands on it:
127
+
128
+ ```css
129
+ /* works */
130
+ .bb-base-checkbox-icon {
131
+ --size: 20px;
132
+ }
133
+ /* does nothing */
134
+ .my-form {
135
+ --size: 20px;
136
+ }
137
+ ```
138
+
122
139
  **Bigger, rounder, recolored**
123
140
 
124
141
  ```vue
@@ -152,13 +169,13 @@ on the element (or an ancestor — they inherit):
152
169
 
153
170
  | Prop | Type | Default | Required | Description |
154
171
  | --- | --- | --- | --- | --- |
155
- | `checked` | `boolean \| undefined` | | | Renders the checked state (fills the box and draws the checkmark). |
156
- | `disabled` | `boolean \| undefined` | | | Disables the glyph (muted fill, not-allowed cursor). Purely visual. |
157
- | `focusVisible` | `boolean \| undefined` | | | Whether keyboard focus is visible (`:focus-visible`). Draws the focus ring. |
158
- | `hasErrors` | `boolean \| undefined` | | | Puts the glyph into the error state (danger border and ring color). |
159
- | `hasWarning` | `boolean \| undefined` | | | Puts the glyph into the warning state (warn border and ring color). Errors take priority when both are set. |
160
- | `indeterminate` | `boolean \| undefined` | | | Renders the indeterminate state (filled box with a dash instead of the checkmark). Takes visual precedence over `checked`. |
161
- | `readonly` | `boolean \| undefined` | | | Renders the read-only affordance (default cursor instead of pointer). |
172
+ | `checked` | `boolean \| undefined` | `false` | | Renders the checked state (fills the box and draws the checkmark). |
173
+ | `disabled` | `boolean \| undefined` | `false` | | Disables the glyph (muted fill, not-allowed cursor). Purely visual. |
174
+ | `focusVisible` | `boolean \| undefined` | `false` | | Whether keyboard focus is visible (`:focus-visible`). Draws the focus ring. |
175
+ | `hasErrors` | `boolean \| undefined` | `false` | | Puts the glyph into the error state (danger border and ring color). |
176
+ | `hasWarning` | `boolean \| undefined` | `false` | | Puts the glyph into the warning state (warn border and ring color). Errors take priority when both are set. |
177
+ | `indeterminate` | `boolean \| undefined` | `false` | | Renders the indeterminate state (filled box with a dash instead of the checkmark). Takes visual precedence over `checked`. |
178
+ | `readonly` | `boolean \| undefined` | `false` | | Renders the read-only affordance (default cursor instead of pointer). |
162
179
 
163
180
  ## Events
164
181
 
@@ -16,28 +16,28 @@
16
16
 
17
17
  | Prop | Type | Default | Required | Description |
18
18
  | --- | --- | --- | --- | --- |
19
- | `adaptive` | `boolean \| undefined` | `undefined` | | When `true`, the palette opens as a bottom off-canvas sheet on mobile viewports instead of a floating popover. Forwarded to `BbColorPalette`, which resolves the fallback. When unset, falls back to the global `config.adaptive`. |
19
+ | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` | | When `true`, the palette opens as a bottom off-canvas sheet on mobile viewports instead of a floating popover. Forwarded to `BbColorPalette`, which resolves the fallback. When unset, falls back to the global `config.adaptive`. |
20
20
  | `alpha` | `boolean \| undefined` | `false` | | Enable the alpha channel. When true the picker shows an opacity slider and emits / accepts `#RRGGBBAA` hex8 values. |
21
21
  | `append:icon` | `string \| undefined` | | | Name of the icon to render at the right hand side of the input. |
22
22
  | `ariaDescribedby` | `string \| undefined` | | | Id(s) of element(s) describing this input for assistive tech (space-separated). Typically includes the container hint id if used within a BaseInputContainer. |
23
23
  | `autocomplete` | `string \| undefined` | `"off"` | | Autocomplete hint for the browser. |
24
24
  | `autofocus` | `Booleanish \| undefined` | | | Focus the input on mount. |
25
- | `clearable` | `boolean \| undefined` | | | Show a clear button when the input has a value. |
26
- | `compact` | `boolean \| undefined` | | | Display the component in a compact layout. |
27
- | `disabled` | `boolean \| undefined` | | | Disable all interactions. |
28
- | `eyeDropper` | `boolean \| undefined` | | | Show an eyedropper button to sample any color on screen. Uses the native EyeDropper API — hidden automatically on unsupported browsers. |
29
- | `hasErrors` | `boolean \| undefined` | | | Visually mark the component as invalid (also sets aria-invalid on the input). |
30
- | `hasWarning` | `boolean \| undefined` | | | Apply warning styling (same chrome as errors, `--bb-warn` color). Suppressed when `hasErrors` is also set. |
25
+ | `clearable` | `boolean \| undefined` | `false` | | Show a clear button when the input has a value. |
26
+ | `compact` | `boolean \| undefined` | `false` | | Display the component in a compact layout. |
27
+ | `disabled` | `boolean \| undefined` | `false` | | Disable all interactions. |
28
+ | `eyeDropper` | `boolean \| undefined` | `false` | | Show an eyedropper button to sample any color on screen. Uses the native EyeDropper API — hidden automatically on unsupported browsers. |
29
+ | `hasErrors` | `boolean \| undefined` | `false` | | Visually mark the component as invalid (also sets aria-invalid on the input). |
30
+ | `hasWarning` | `boolean \| undefined` | `false` | | Apply warning styling (same chrome as errors, `--bb-warn` color). Suppressed when `hasErrors` is also set. |
31
31
  | `id` | `string \| undefined` | | | The id attribute for the input element. Defaults to a generated `bb_<unique>` id when omitted. |
32
- | `loading` | `boolean \| undefined` | | | Display the loading state. |
32
+ | `loading` | `boolean \| undefined` | `false` | | Display the loading state. |
33
33
  | `modelValue` | `string \| null` | | yes | v-model value: `#RRGGBB` hex string or `null` when empty. Example: `#1A2B3C` |
34
34
  | `name` | `string \| undefined` | | | Name attribute of the input. |
35
35
  | `placeholder` | `string \| undefined` | | | Placeholder text when there is no value. |
36
36
  | `prepend:icon` | `string \| undefined` | | | Name of the icon to render at the start of the input. |
37
- | `readonly` | `boolean \| undefined` | | | Make the input read-only. |
38
- | `required` | `boolean \| undefined` | | | Mark the input as required. |
37
+ | `readonly` | `boolean \| undefined` | `false` | | Make the input read-only. |
38
+ | `required` | `boolean \| undefined` | `false` | | Mark the input as required. |
39
39
  | `swatches` | `boolean \| string[][] \| undefined` | | | Controls swatches display in the picker: - `true` — show the built-in Material-palette swatches - `string[][]` — show custom swatches (each inner array = a column of shades) - `false` / omitted — no swatches section |
40
- | `transitionDuration` | `number \| undefined` | | | Transition duration (ms) of the palette popover. Forwarded to `BbColorPalette`, which supplies the default. |
40
+ | `transitionDuration` | `number \| undefined` | `250` | | Transition duration (ms) of the palette popover. Forwarded to `BbColorPalette`, which supplies the default. |
41
41
 
42
42
  ## Events
43
43
 
@@ -16,19 +16,19 @@
16
16
 
17
17
  | Prop | Type | Default | Required | Description |
18
18
  | --- | --- | --- | --- | --- |
19
- | `disabled` | `boolean \| undefined` | | | Disables the component. |
19
+ | `disabled` | `boolean \| undefined` | `false` | | Disables the component. |
20
20
  | `firstDayOfWeek` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1` | | Defines the first day of the week with `0` meaning Sunday and `6` meaning Saturday. |
21
- | `floating` | `boolean \| undefined` | | | If true the value is a plain calendar string (`YYYY-MM-DD`, or the shape `type` dictates) instead of the default ISO instant. |
21
+ | `floating` | `boolean \| undefined` | `false` | | If true the value is a plain calendar string (`YYYY-MM-DD`, or the shape `type` dictates) instead of the default ISO instant. |
22
22
  | `id` | `string \| undefined` | | | The identifier of the component. |
23
23
  | `max` | `string \| undefined` | | | Maximum selectable date. |
24
24
  | `min` | `string \| undefined` | | | Minimum selectable date. |
25
25
  | `modelValue` | `string \| string[] \| null` | | yes | Used by v-model. Can be null, a single string, or an array of strings based on whether a range or single date is needed. |
26
- | `multiple` | `boolean \| undefined` | | | Allows the selection of multiple items. |
27
- | `range` | `boolean \| undefined` | | | Selects a range of dates between two dates. It selects all of the days between start and end. |
28
- | `readonly` | `boolean \| undefined` | | | Sets the input in a readonly state. |
26
+ | `multiple` | `boolean \| undefined` | `false` | | Allows the selection of multiple items. |
27
+ | `range` | `boolean \| undefined` | `false` | | Selects a range of dates between two dates. It selects all of the days between start and end. |
28
+ | `readonly` | `boolean \| undefined` | `false` | | Sets the input in a readonly state. |
29
29
  | `selectable` | `((date: string) => boolean) \| undefined` | | | Function that accepts a date string and returns a boolean. Returning `false` means the date cannot be selected. The string is shaped by `type`: `YYYY-MM` under `month`, `YYYY` under `year`. |
30
30
  | `type` | `DatePickerType \| undefined` | `"date"` | | What the grid selects: a day (`date`/`datetime`), a month, or a year. The coarse types make the month/year panel terminal instead of a navigation step, and emit `YYYY-MM` / `YYYY`. |
31
- | `utc` | `boolean \| undefined` | | | Emits values as UTC ISO strings (`...Z`) instead of ISO strings carrying the local offset (`...+01:00`). Emission-only: incoming values are parsed identically either way, so the prop can be added or removed without touching stored values. I… |
31
+ | `utc` | `boolean \| undefined` | `false` | | Emits values as UTC ISO strings (`...Z`) instead of ISO strings carrying the local offset (`...+01:00`). Emission-only: incoming values are parsed identically either way, so the prop can be added or removed without touching stored values. I… |
32
32
 
33
33
  ## Events
34
34
 
@@ -17,23 +17,23 @@
17
17
 
18
18
  | Prop | Type | Default | Required | Description |
19
19
  | --- | --- | --- | --- | --- |
20
- | `adaptive` | `boolean \| undefined` | `undefined` | | On mobile the calendar opens inside a bottom off-canvas sheet instead of a floating popover, mirroring the adaptive behaviour of `BbPopover`/`BbSelectPopover`. When unset, falls back to the global `config.adaptive`. |
21
- | `ampm` | `boolean \| undefined` | | | 12-hour display with an AM/PM segment (requires `type="datetime"`). Purely a field-composition concern: `modelValue` and the `time` model stay 24-hour regardless. Type `A`/`P` (or ArrowUp/Down) to set the meridiem. |
20
+ | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` | | On mobile the calendar opens inside a bottom off-canvas sheet instead of a floating popover, mirroring the adaptive behaviour of `BbPopover`/`BbSelectPopover`. When unset, falls back to the global `config.adaptive`. |
21
+ | `ampm` | `boolean \| undefined` | `false` | | 12-hour display with an AM/PM segment (requires `type="datetime"`). Purely a field-composition concern: `modelValue` and the `time` model stay 24-hour regardless. Type `A`/`P` (or ArrowUp/Down) to set the meridiem. |
22
22
  | `append:icon` | `string \| undefined` | | | Name of the icon to render at the right hand side of the input. |
23
23
  | `ariaDescribedby` | `string \| undefined` | | | Additional description id(s) announced by assistive technologies. Usually provided by an outer input container to link hint/error text. |
24
24
  | `autocomplete` | `string \| undefined` | `"off"` | | Browser autocomplete hint for the input. |
25
25
  | `autofocus` | `Booleanish \| undefined` | | | Focus the first text field automatically when the component mounts. |
26
- | `clearable` | `boolean \| undefined` | | | Displays a clear button whenever a value is present and the control is interactive. |
27
- | `compact` | `boolean \| undefined` | | | Applies the compact density styles to the control. |
26
+ | `clearable` | `boolean \| undefined` | `false` | | Displays a clear button whenever a value is present and the control is interactive. |
27
+ | `compact` | `boolean \| undefined` | `false` | | Applies the compact density styles to the control. |
28
28
  | `disableCalendar` | `boolean \| "mobile" \| "desktop" \| undefined` | `false` | | Disables the calendar: hides the trigger button and prevents the popover from opening. Use `'desktop'` to disable it on desktop only (keyboard-first there, calendar-first on mobile — complementing `disableWriting: 'mobile'`) or `'mobile'` t… |
29
- | `disabled` | `boolean \| undefined` | | | Disables the input, calendar trigger, and popover. |
29
+ | `disabled` | `boolean \| undefined` | `false` | | Disables the input, calendar trigger, and popover. |
30
30
  | `disableWriting` | `boolean \| "mobile" \| "desktop" \| undefined` | `false` | | Controls whether manual typing is disabled inside the text fields. Use `'mobile'` to disable typing only on mobile, `'desktop'` to disable typing only on desktop. Applies to both single and range modes. |
31
31
  | `firstDayOfWeek` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | | | Sets the first day of the week for the calendar (0 = Sunday, 6 = Saturday). |
32
- | `floating` | `boolean \| undefined` | | | Emit dates formatted as `YYYY-MM-DD` instead of ISO strings. |
33
- | `hasErrors` | `boolean \| undefined` | | | Marks the control as invalid, applying error styles and setting `aria-invalid`. |
34
- | `hasWarning` | `boolean \| undefined` | | | Apply warning styling (same chrome as errors, `--bb-warn` color). Suppressed when `hasErrors` is also set. |
32
+ | `floating` | `boolean \| undefined` | `false` | | Emit dates formatted as `YYYY-MM-DD` instead of ISO strings. |
33
+ | `hasErrors` | `boolean \| undefined` | `false` | | Marks the control as invalid, applying error styles and setting `aria-invalid`. |
34
+ | `hasWarning` | `boolean \| undefined` | `false` | | Apply warning styling (same chrome as errors, `--bb-warn` color). Suppressed when `hasErrors` is also set. |
35
35
  | `id` | `string \| undefined` | | | Explicit id for the input element. Falls back to an auto-generated `bdpi-<uid>` value. |
36
- | `loading` | `boolean \| undefined` | | | Shows loading visuals on the input. |
36
+ | `loading` | `boolean \| undefined` | `false` | | Shows loading visuals on the input. |
37
37
  | `max` | `string \| undefined` | | | Maximum selectable date in `YYYY-MM-DD` format — or, with `type="datetime"`, `YYYY-MM-DDTHH:mm` to tighten the boundary day to a minute. Values outside both patterns throw during setup to surface configuration mistakes. |
38
38
  | `min` | `string \| undefined` | | | Minimum selectable date in `YYYY-MM-DD` format — or, with `type="datetime"`, `YYYY-MM-DDTHH:mm` to tighten the boundary day to a minute. Values outside both patterns throw during setup to surface configuration mistakes. |
39
39
  | `modelValue` | `string \| string[] \| null` | | yes | v-model value. Use `null` for empty, a single string for single selection, or a two-element string array (`[start, end]`) when `range` is true. |
@@ -41,16 +41,16 @@
41
41
  | `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` | | | Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on mobile (e.g. `title`, `size`, `persistent`). |
42
42
  | `placeholder` | `string \| undefined` | | | Placeholder text displayed when no value is present. Defaults to the localized format hint (`baseDatePickerInput.dateFormatSingle` / `dateFormatRange` — e.g. `MM/DD/YYYY` for `en`, `GG/MM/AAAA` for `it`). |
43
43
  | `prepend:icon` | `string \| undefined` | | | Icon name rendered before the input field. |
44
- | `range` | `boolean \| undefined` | | | Enables range selection. When active, v-model expects a two-element array `[start, end]`. Users can still type into the start and end segments unless `disableWriting` disables typing. |
45
- | `readonly` | `boolean \| undefined` | | | Makes the text fields read-only and prevents opening the calendar. |
46
- | `required` | `boolean \| undefined` | | | Marks the inputs as required to the browser. |
47
- | `seconds` | `boolean \| undefined` | | | Adds the seconds segment (requires `type="datetime"`). Without it, an incoming value carrying seconds displays truncated and is left untouched until the user commits an edit, at which point seconds zero out. |
44
+ | `range` | `boolean \| undefined` | `false` | | Enables range selection. When active, v-model expects a two-element array `[start, end]`. Users can still type into the start and end segments unless `disableWriting` disables typing. |
45
+ | `readonly` | `boolean \| undefined` | `false` | | Makes the text fields read-only and prevents opening the calendar. |
46
+ | `required` | `boolean \| undefined` | `false` | | Marks the inputs as required to the browser. |
47
+ | `seconds` | `boolean \| undefined` | `false` | | Adds the seconds segment (requires `type="datetime"`). Without it, an incoming value carrying seconds displays truncated and is left untouched until the user commits an edit, at which point seconds zero out. |
48
48
  | `selectable` | `((date: string) => boolean) \| undefined` | | | Predicate invoked for each candidate date. Return `false` to disable selection for that value. |
49
- | `step` | `number \| undefined` | | | Minute granularity for the calendar's minute column and arrow stepping (requires `type="datetime"`). Constrains what the component produces, never what it accepts: a typed off-grid value (e.g. `10:07` with `step: 15`) is emitted verbatim, a… |
49
+ | `step` | `number \| undefined` | `1` | | Minute granularity for the calendar's minute column and arrow stepping (requires `type="datetime"`). Constrains what the component produces, never what it accepts: a typed off-grid value (e.g. `10:07` with `step: 15`) is emitted verbatim, a… |
50
50
  | `time` | `string \| string[] \| null \| undefined` | | | Companion model for the time part (`v-model:time`), always 24-hour `HH:mm` / `HH:mm:ss` regardless of display. With `floating` it is the only carrier of the time; otherwise it mirrors the time inside `modelValue` (same digits) and writing i… |
51
51
  | `transitionDuration` | `number \| undefined` | | | Transition duration, in milliseconds, for the popover appearance. |
52
52
  | `type` | `DatePickerType \| undefined` | `"date"` | | What the field edits, and therefore its segments and emitted shape. - `date` (default) — `DD/MM/YYYY`. - `datetime` — adds the time segments and the calendar's time rail. - `month` — `MM/YYYY`, emitting `YYYY-MM`. - `year` — `YYYY`, emittin… |
53
- | `utc` | `boolean \| undefined` | | | Emits values as UTC ISO strings (`...Z`) instead of ISO strings carrying the local offset (`...+01:00`). Emission-only: incoming values are parsed identically either way, so the prop can be added or removed without touching stored values. F… |
53
+ | `utc` | `boolean \| undefined` | `false` | | Emits values as UTC ISO strings (`...Z`) instead of ISO strings carrying the local offset (`...+01:00`). Emission-only: incoming values are parsed identically either way, so the prop can be added or removed without touching stored values. F… |
54
54
 
55
55
  ## Events
56
56