bitboss-ui 3.0.0-beta.52 → 3.0.0-beta.53
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.
- package/bin/bitboss-ui-mcp.mjs +16 -8
- package/dist/ai/BbBadge.md +3 -2
- package/dist/ai/BbColorPalette.md +4 -3
- package/dist/ai/BbDatePicker.md +1 -1
- package/dist/ai/BbDropdown.md +6 -2
- package/dist/ai/BbForm.md +25 -17
- package/dist/ai/BbHoverCard.md +1 -1
- package/dist/ai/BbPopover.md +5 -3
- package/dist/ai/BbSelectPopover.md +1 -1
- package/dist/ai/BbTable.md +120 -28
- package/dist/ai/BbTimePicker.md +1 -1
- package/dist/ai/BbTooltip.md +1 -1
- package/dist/ai/CommonPopover.md +1 -1
- package/dist/ai/changelog.json +52 -3
- package/dist/ai/components.json +14 -14
- package/dist/ai/guides/component-picker.md +1 -1
- package/dist/ai/guides/migration/from-async-validator.md +60 -46
- package/dist/ai/guides/migration/v2-to-v3.md +24 -0
- package/dist/ai/guides/options-items-playbook.md +5 -5
- package/dist/ai/guides/validated-forms.md +19 -8
- package/dist/ai/helpers/inertia/manifest.json +1 -1
- package/dist/ai/manifest/components/BbBadge.json +1 -1
- package/dist/ai/manifest/components/BbColorPalette.json +1 -1
- package/dist/ai/manifest/components/BbDatePicker.json +1 -1
- package/dist/ai/manifest/components/BbDropdown.json +1 -1
- package/dist/ai/manifest/components/BbHoverCard.json +1 -1
- package/dist/ai/manifest/components/BbPopover.json +1 -1
- package/dist/ai/manifest/components/BbSelectPopover.json +1 -1
- package/dist/ai/manifest/components/BbTable.json +4 -4
- package/dist/ai/manifest/components/BbTable.tree.json +18 -0
- package/dist/ai/manifest/components/BbTimePicker.json +1 -1
- package/dist/ai/manifest/components/BbTooltip.json +1 -1
- package/dist/ai/manifest/components/CommonPopover.json +1 -1
- package/dist/ai/manifest/index.json +2 -2
- package/dist/ai/manifest/types.api.json +1 -1
- package/dist/ai/recipes/inertia/approvals-inbox.md +1 -1
- package/dist/ai/recipes/nuxt/approvals-inbox.md +1 -1
- package/dist/ai/recipes/vue/approvals-inbox.md +1 -1
- package/dist/ai/source/BbBadge.md +3 -4
- package/dist/ai/source/BbBadgeButton.md +3 -4
- package/dist/ai/source/BbColorPalette.md +3 -1
- package/dist/ai/source/BbDatePicker.md +4 -1
- package/dist/ai/source/BbDropdown.md +5 -3
- package/dist/ai/source/BbDropdownGroup.md +5 -3
- package/dist/ai/source/BbHoverCard.md +3 -2
- package/dist/ai/source/BbHoverCardPortal.md +3 -2
- package/dist/ai/source/BbPopover.md +3 -2
- package/dist/ai/source/BbPopoverPortal.md +3 -2
- package/dist/ai/source/BbSelectPopover.md +3 -1
- package/dist/ai/source/BbTable.md +315 -59
- package/dist/ai/source/BbTimePicker.md +4 -1
- package/dist/ai/source/BbTooltip.md +3 -2
- package/dist/ai/source/CommonPopover.md +11 -8
- package/dist/components/BbBadge/types.d.ts +3 -4
- package/dist/components/BbColorPalette/types.d.ts +3 -1
- package/dist/components/BbDatePicker/types.d.ts +4 -1
- package/dist/components/BbDropdown/types.d.ts +5 -3
- package/dist/components/BbHoverCard/types.d.ts +3 -2
- package/dist/components/BbPopover/types.d.ts +3 -2
- package/dist/components/BbSelectPopover/types.d.ts +3 -1
- package/dist/components/BbTable/BbTable.vue_vue_type_script_setup_true_lang.js +931 -891
- package/dist/components/BbTable/BbTableDataRow.js +76 -78
- package/dist/components/BbTable/types.d.ts +21 -6
- package/dist/components/BbTable/useRowReorder.js +217 -195
- package/dist/components/BbTable/utils.d.ts +21 -0
- package/dist/components/BbTable/utils.js +19 -16
- package/dist/components/BbTable/warroom/harness.d.ts +7 -0
- package/dist/components/BbTimePicker/types.d.ts +4 -1
- package/dist/components/BbTooltip/types.d.ts +3 -2
- package/dist/components/CommonPopover/CommonPopover.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/CommonPopover/types.d.ts +4 -4
- package/dist/composables/useBaseOptions.d.ts +3 -3
- package/dist/composables/useBaseOptions.js +11 -11
- package/dist/composables/useItemText.d.ts +5 -0
- package/dist/composables/useItemText.js +14 -14
- package/dist/composables/useItemValue.js +9 -9
- package/dist/composables/useItemsGetter.js +55 -51
- package/dist/composables/useSegmentedFields.js +6 -1
- package/dist/composables/useTableWidthContext.d.ts +6 -0
- package/dist/composables/useTableWidthContext.js +2 -1
- package/dist/llms-full.txt +281 -124
- package/dist/llms-medium.txt +1 -1
- package/dist/styles.css +2 -2
- package/dist/utils/versionCheck.js +1 -1
- package/package.json +2 -1
- package/scripts/lib/hand-roll-hints.mjs +11 -2
package/dist/ai/components.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
3
|
"library": "bitboss-ui",
|
|
4
|
-
"version": "3.0.0-beta.
|
|
5
|
-
"generatedAt": "2026-10-
|
|
4
|
+
"version": "3.0.0-beta.53",
|
|
5
|
+
"generatedAt": "2026-10-12T19:48:45.130Z",
|
|
6
6
|
"legend": {
|
|
7
7
|
"referenceOnly": "true = internal building block, documented so trees and sources can be read. Never write it in a template; most are not exported.",
|
|
8
8
|
"types[].usage": "api = the type of a prop, event or slot value you pass; wrapper = a component Props/Events/Slots type (its component entry lists every field); advanced = everything else.",
|
|
@@ -374,7 +374,7 @@
|
|
|
374
374
|
{"name":"BbSwitchProps","usage":"wrapper","component":"BbSwitch","usedBy":[]},
|
|
375
375
|
{"name":"BbTabEvents","usage":"wrapper","component":"BbTabs","deprecated":true,"replacedBy":"BbTabsEvents","usedBy":[]},
|
|
376
376
|
{"name":"BbTabItem","usage":"api","component":"BbTabs","deprecated":true,"replacedBy":"BbTabsItem","usedBy":[{"component":"BbTabs","surface":"prop","name":"items"},{"component":"BbTabs","surface":"prop","name":"pt"},{"component":"BbTabs","surface":"prop","name":"pt:item"},{"component":"BbTabsList","surface":"prop","name":"pt"},{"component":"BbTabsList","surface":"prop","name":"pt:item"},{"component":"BbTabsRoot","surface":"prop","name":"items"}]},
|
|
377
|
-
{"name":"BbTableColumn","usage":"api","component":"BbTable","usedBy":[{"component":"BbTable","surface":"prop","name":"columns"}],"definition":"type BbTableColumn<Item = any> = BaseColumn<Item> & { align?: 'left' | 'right' | 'center'; skeleton?: SkeletonType; sortable?: boolean; rowHeader?: boolean; reorderable?: boolean; sorted?: 'asc' | 'desc'; rowClass?: ColumnClasses<Item>; tdClass?: ColumnClasses<Item>; thClass?: Classes; hidden?: boolean; fixed?: 'left' | 'right'; width?: number | string; snap?: string | [ start: string, end: string ]; };","fields":["formatOnNull?: boolean","formatter?: ((content: any, key: string, item: Item) => any)","key: ItemKey<Item>","label: string","placeholder?: string","align?: \"center\" | \"left\" | \"right\"","skeleton?: SkeletonType","sortable?: boolean","rowHeader?: boolean","reorderable?: boolean","sorted?: \"asc\" | \"desc\"","rowClass?: ColumnClasses<Item>","tdClass?: ColumnClasses<Item>","thClass?: Classes","hidden?: boolean","fixed?: \"left\" | \"right\"","width?: string | number","snap?: string | [start: string, end: string]"]},
|
|
377
|
+
{"name":"BbTableColumn","usage":"api","component":"BbTable","usedBy":[{"component":"BbTable","surface":"prop","name":"columns"}],"definition":"type BbTableColumn<Item = any> = BaseColumn<Item> & { align?: 'left' | 'right' | 'center'; skeleton?: SkeletonType; sortable?: boolean; rowHeader?: boolean; reorderable?: boolean; resizable?: boolean; sorted?: 'asc' | 'desc'; rowClass?: ColumnClasses<Item>; tdClass?: ColumnClasses<Item>; thClass?: Classes; hidden?: boolean; fixed?: 'left' | 'right'; width?: number | string; snap?: string | [ start: string, end: string ]; };","fields":["formatOnNull?: boolean","formatter?: ((content: any, key: string, item: Item) => any)","key: ItemKey<Item>","label: string","placeholder?: string","align?: \"center\" | \"left\" | \"right\"","skeleton?: SkeletonType","sortable?: boolean","rowHeader?: boolean","reorderable?: boolean","resizable?: boolean","sorted?: \"asc\" | \"desc\"","rowClass?: ColumnClasses<Item>","tdClass?: ColumnClasses<Item>","thClass?: Classes","hidden?: boolean","fixed?: \"left\" | \"right\"","width?: string | number","snap?: string | [start: string, end: string]"]},
|
|
378
378
|
{"name":"BbTableContext","usage":"advanced","component":null,"usedBy":[],"definition":"type BbTableContext = { isReady: ComputedRef<boolean>; selected: WritableComputedRef<any>; unselected: WritableComputedRef<any[]>; all: WritableComputedRef<boolean>; highlighted: WritableComputedRef<any>; sort: WritableComputedRef<BbTableSortEntry[]>; order: WritableComputedRef<string[]>; page: WritableComputedRef<number>; perPage: WritableComputedRef<number>; totalItems: WritableComputedRef<number>; totalPages: WritableComputedRef<number>; };"},
|
|
379
379
|
{"name":"BbTableEvents","usage":"wrapper","component":"BbTable","usedBy":[]},
|
|
380
380
|
{"name":"BbTableItemsContext","usage":"api","component":null,"usedBy":[{"component":"BbTable","surface":"prop","name":"items"}],"definition":"type BbTableItemsContext<M = any> = BbItemsProviderContext<M> & { reason: 'initial' | 'dependencies' | 'pagination'; };"},
|
|
@@ -471,7 +471,7 @@
|
|
|
471
471
|
{"name":"BbAlert","group":"Feedback","description":"Shows contextual status messages.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbAlert.md","source":"ai/source/BbAlert.md","props":[{"name":"ariaLive","type":"\"off\" | \"polite\" | \"assertive\" | undefined","required":false,"description":"ARIA live region politeness.\nDefaults to `'assertive'` for destructive/warning variants, otherwise `'polite'`."},{"name":"closeLabel","type":"string | undefined","required":false,"description":"Visually hidden string used to label the close button."},{"name":"hideClose","type":"boolean | undefined","required":false,"default":"false","description":"Defines whether to hide the close button."},{"name":"icon","type":"string | undefined","required":false,"description":"Name of a registered icon to use, or a full raw `<svg>` string\n(e.g. an SVG file imported with `?raw`)."},{"name":"iconSize","type":"number | CssSize | keyof Sizes | undefined","required":false,"default":"\"16\"","description":"Size of the icon to use."},{"name":"modelValue","type":"boolean | undefined","required":false,"default":"true","description":"Used by v-model.\nAlerts are visible on mount; the model dismisses them."},{"name":"pt","type":"PtMap<BbAlertPtPart, never> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:close","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:text","type":"PtValue | undefined","required":false},{"name":"pt:title","type":"PtValue | undefined","required":false},{"name":"role","type":"\"alert\" | \"status\" | undefined","required":false,"description":"Accessibility role for the alert container.\nDefaults to `'alert'` for destructive/warning variants, otherwise `'status'`."},{"name":"text","type":"string | undefined","required":false,"description":"Text content of the alert body."},{"name":"title","type":"string | undefined","required":false,"description":"Text content of the alert title."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Transition duration in milliseconds for enter/leave."},{"name":"variant","type":"keyof AlertVariantRegistry | undefined","required":false,"default":"\"outline\"","values":["outline","primary","destructive","warning"],"description":"Visual variant of the alert."}],"events":[{"name":"update:modelValue","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"default","type":"any","description":"The alert body, the shortest form: `<BbAlert>Something went\nwrong</BbAlert>`. The most specific source wins: `#text` > children > the\n`text` prop."},{"name":"text","type":"BbAlertTextSlotProps","fields":["text: string"],"description":"Replaces the default alert body text. Wins over children and `text`."},{"name":"title","type":"BbAlertTitleSlotProps","fields":["text: string"],"description":"Replaces the default alert title text."}],"exposed":[],"models":[{"name":"modelValue","type":"boolean | undefined"}],"cssProps":[{"name":"--px","value":"10px","selector":".bb-alert","description":"side padding of the plate"},{"name":"--py","value":"6px","selector":".bb-alert","description":"top/bottom padding of the plate, and the close button's inset from those edges"},{"name":"--gap","value":"4px","selector":".bb-alert","description":"icon column → content gap, reused between title parts and in the close button's reserved width"},{"name":"--title-size","value":"14px","selector":".bb-alert","description":"icon column → content gap, reused between title parts and in the close button's reserved width"},{"name":"--title-lh","value":"18px","selector":".bb-alert","description":"title line box — the close button is centred on it"},{"name":"--text-size","value":"14px","selector":".bb-alert","description":"title line box — the close button is centred on it"},{"name":"--text-lh","value":"18px","selector":".bb-alert"},{"name":"--close-size","value":"16px","selector":".bb-alert","description":"close glyph; also the width reserved at the end of the title"},{"name":"--bg","value":"transparent","selector":".bb-alert","description":"plate fill"},{"name":"--fg","value":"var(--bb-text)","selector":".bb-alert","description":"title and icon"},{"name":"--fg-muted","value":"color-mix(in oklab, var(--fg) 75%, transparent)","selector":".bb-alert","description":"Body text and the close glyph (the destructive variant points it back at --fg)"},{"name":"--border-color","value":"color-mix(in oklab, var(--bb-text) 15%, transparent)","selector":".bb-alert","description":"Plate border"},{"name":"--elev","value":"var(--bb-elev)","selector":".bb-alert","description":"Resting lift. A local, so a page that already sits on a card can flatten one alert (`<BbAlert style=\"--elev: none\">`) without unsetting the theme's lift everywhere."}],"pt":{"parts":[{"name":"root","description":"The alert box."},{"name":"icon","description":"The leading glyph — rendered only when an `icon` is set."},{"name":"title","description":"The heading line."},{"name":"text","description":"The body copy."},{"name":"close","description":"The ✕ that dismisses the alert."}],"states":[]},"tree":{"bindings":[{"part":"icon","target":"BbIcon"},{"part":"close","target":"ClearableButton"},{"part":"title","target":"div.bb-alert__title"},{"part":"text","target":"div.bb-alert__text"}],"nodes":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]},"css":{"classes":{"bb-alert":["","--*","__close","__content","__icon","__icon-container","__inner-container","__text","__title"],"bb-alert-transition":[""],"bb-alert-transition-enter-active":[""],"bb-alert-transition-enter-from":[""],"bb-alert-transition-leave-active":[""],"bb-alert-transition-leave-to":[""]},"locals":["--bg","--border-color","--close-size","--color-gray-200","--elev","--fg","--fg-muted","--gap","--hit","--px","--py","--right-p","--text-lh","--text-size","--title-lh","--title-size","--top-p","--transition-duration"]},"attrTargets":["div"],"removed":[{"name":"showClose","new":"hideClose","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-alert.md","silent":true,"fix":{"kind":"invert"}},{"name":"theme","new":"variant","since":"3.0.0-alpha.9","migration":"ai/guides/migration/components/bb-alert.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"showClose","to":"hideClose","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-alert.md","fix":{"kind":"invert"}},{"from":"theme","to":"variant","since":"3.0.0-alpha.9","migration":"ai/guides/migration/components/bb-alert.md","fix":{"kind":"rename"}}]},
|
|
472
472
|
{"name":"BbAsterisk","group":"Other","description":"Presentational required-field marker (red \"*\"). No behaviour props/slots/events (only `pt`); placed in custom label content.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbAsterisk.md","source":"ai/source/BbAsterisk.md","props":[{"name":"pt","type":"PtMap<\"root\", never> | undefined","required":false,"description":"Passthrough, object form: `{ root: '…' }`. See the `pt:<part>` row."},{"name":"pt:root","type":"PtValue | undefined","required":false}],"events":[],"slots":[],"exposed":[],"models":[],"pt":{"parts":[{"name":"root","description":"The required-marker span."}],"states":[]},"css":{"classes":{"bb-asterisk":[""]},"locals":["--color-gray-200"]},"attrTargets":["span"]},
|
|
473
473
|
{"name":"BbAvatar","group":"Data Display","description":"Displays an avatar and has a fallback content slot.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbAvatar.md","source":"ai/source/BbAvatar.md","props":[{"name":"alt","type":"string | undefined","required":false,"default":"\"\"","description":"Alternative text for the image, used for accessibility."},{"name":"pt","type":"PtMap<BbAvatarPtPart, never> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"size","type":"number | CssSize | keyof Sizes | undefined","required":false,"default":"\"md\"","description":"Defines the component size.\n\nAccepted values:\n- A key from the provided size map (`keyof T`), e.g. `'sm' | 'md' | 'lg'`\n- A custom CSS size string (e.g. `'20px'`, `'1.5rem'`, `'2em'`)\n- A number, typically interpreted as pixels by size parsers"},{"name":"sizes","type":"string | undefined","required":false,"description":"Sizes attribute for the image, used with `srcset`."},{"name":"src","type":"string | undefined","required":false,"description":"Source URL of the avatar image."},{"name":"srcset","type":"string | undefined","required":false,"description":"Responsive image source set."},{"name":"timeout","type":"number | undefined","required":false,"default":"400","description":"Milliseconds to wait after mount before checking whether the image loaded correctly (SSR fallback)."}],"events":[],"slots":[{"name":"default","type":"Record<string, never>","description":"Fallback content shown when no image source is provided or when the image fails to load.\nTypically used to render initials or a placeholder icon."}],"exposed":[],"models":[],"cssProps":[{"name":"--bg","value":"var(--bb-primary)","selector":".bb-avatar","description":"fallback surface (an image covers it)"},{"name":"--fg","value":"var(--bb-primary-fg)","selector":".bb-avatar","description":"Initials; the built-in icon is an 80/20 mix of this toward --bg"},{"name":"--default-icon-size","value":"clamp(14px, calc(var(--size) * 0.7), 48px)","selector":".bb-avatar","description":"Built-in fallback icon: 70% of the avatar, floored at 14px and capped at 48px. `--size` is the avatar's own box, set inline from the `size` prop."},{"name":"--fs","value":"max(8px, calc(var(--size) * 0.4))","selector":".bb-avatar","description":"Initials: 40% of the avatar, floored at 8px"},{"name":"--elev","value":"var(--bb-elev-sm)","selector":".bb-avatar","description":"The theme's resting lift on small chrome (Q44.15), declared here so an ancestor's `--elev` cannot reach in; `--elev: none` flattens one."},{"name":"--size","value":"var(--default-icon-size)","selector":".bb-avatar__default-icon"}],"pt":{"parts":[{"name":"root","description":"The avatar frame, with the image or the fallback inside."},{"name":"icon","description":"The default user glyph — rendered only while there is no image to show and the default slot is not overridden, so it lands nowhere otherwise."}],"states":[]},"tree":{"bindings":[{"part":"icon","target":"BbIcon"}],"nodes":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},"css":{"classes":{"bb-avatar":["","__default-icon","__fallback","__img","__img--hidden"]},"locals":["--bg","--color-gray-200","--default-icon-size","--elev","--fg","--fs","--size"]},"attrTargets":["span"],"removed":[{"name":"color","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-avatar.md","silent":true,"fix":{"kind":"manual"}}]},
|
|
474
|
-
{"name":"BbBadge","group":"Feedback","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).","referenceOnly":false,"hasGuide":true,"contract":"ai/BbBadge.md","source":"ai/source/BbBadge.md","props":[{"name":"append:icon","type":"string | undefined","required":false,"description":"Icon rendered after the label. On a `clearable` badge it shares the trailing\nslot with the clear button: the icon shows at rest and the clear button\nreveals over it on hover/focus."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Renders a trailing clear button and emits `click:clear` when pressed — turns\nthe badge into a dismissible token (the pattern formerly served by `BbChip`)."},{"name":"clearableLabel","type":"string | undefined","required":false,"description":"Accessible name of the clear button. Rarely needed: unset, it is composed\nfrom the localized `badge.clearLabel` verb and the badge text (\"Remove\nItaly\"), or the verb alone when a `BbBadgeButton` owns the body."},{"name":"icon","type":"string | undefined","required":false,"description":"Renders an icon-only badge. When set, `prepend:icon` / `append:icon` are\nignored and the default slot becomes the badge's visually hidden accessible\nlabel — always provide it."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Shows a spinner in place of the leftmost icon (`icon` or `prepend:icon`;\nthe `append:icon` when it is the only one; else the leading slot), as\n`BbButton` does, with a hidden loading announcement."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Icon rendered before the label."},{"name":"pt","type":"PtMap<BbBadgePtPart, \"loading\"> | undefined","required":false,"description":"Passthrough, object form: `{ icon: '…', 'icon:loading': '…' }` — the same\nkeys as the `pt:*` attributes without the prefix. Parts: `root`, `icon`,\n`spinner`, `text`, `clear`. State: `loading`."},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:text","type":"PtValue | undefined","required":false},{"name":"pt:text:loading","type":"PtValue | undefined","required":false},{"name":"size","type":"keyof Sizes | undefined","required":false,"default":"\"md\"","values":["xs","sm","md","lg","xl","2xl"],"description":"Preset size of the badge."},{"name":"variant","type":"BadgeVariantType | undefined","required":false,"default":"\"primary\"","values":["outline","primary","destructive","secondary","none"],"description":"Visual variant: `primary`, `secondary`, `destructive`, or `outline`.\
|
|
474
|
+
{"name":"BbBadge","group":"Feedback","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).","referenceOnly":false,"hasGuide":true,"contract":"ai/BbBadge.md","source":"ai/source/BbBadge.md","props":[{"name":"append:icon","type":"string | undefined","required":false,"description":"Icon rendered after the label. On a `clearable` badge it shares the trailing\nslot with the clear button: the icon shows at rest and the clear button\nreveals over it on hover/focus."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Renders a trailing clear button and emits `click:clear` when pressed — turns\nthe badge into a dismissible token (the pattern formerly served by `BbChip`)."},{"name":"clearableLabel","type":"string | undefined","required":false,"description":"Accessible name of the clear button. Rarely needed: unset, it is composed\nfrom the localized `badge.clearLabel` verb and the badge text (\"Remove\nItaly\"), or the verb alone when a `BbBadgeButton` owns the body."},{"name":"icon","type":"string | undefined","required":false,"description":"Renders an icon-only badge. When set, `prepend:icon` / `append:icon` are\nignored and the default slot becomes the badge's visually hidden accessible\nlabel — always provide it."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Shows a spinner in place of the leftmost icon (`icon` or `prepend:icon`;\nthe `append:icon` when it is the only one; else the leading slot), as\n`BbButton` does, with a hidden loading announcement."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Icon rendered before the label."},{"name":"pt","type":"PtMap<BbBadgePtPart, \"loading\"> | undefined","required":false,"description":"Passthrough, object form: `{ icon: '…', 'icon:loading': '…' }` — the same\nkeys as the `pt:*` attributes without the prefix. Parts: `root`, `icon`,\n`spinner`, `text`, `clear`. State: `loading`."},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:text","type":"PtValue | undefined","required":false},{"name":"pt:text:loading","type":"PtValue | undefined","required":false},{"name":"size","type":"keyof Sizes | undefined","required":false,"default":"\"md\"","values":["xs","sm","md","lg","xl","2xl"],"description":"Preset size of the badge."},{"name":"variant","type":"BadgeVariantType | undefined","required":false,"default":"\"primary\"","values":["outline","primary","destructive","secondary","none"],"description":"Visual variant: `primary`, `secondary`, `destructive`, or `outline`.\nStatus colours are a registration (vite plugin `badgeVariants`, the\n`soft-*` palette in design-language.md) styled as `.bb-badge--<variant>`.\n`'none'` renders no variant class: set `--bg` / `--fg` on the element."}],"events":[{"name":"click:clear","signature":"(event: MouseEvent): void","description":"Emitted when the clear button is pressed (only rendered when `clearable`)."}],"slots":[{"name":"default","type":"object","description":"The badge's label content. When `icon` is set this becomes the visually\nhidden accessible label. Render a `BbBadgeButton` here to make the badge\nbody interactive (the wrapper stays a passive `<span>`)."}],"exposed":[],"models":[],"cssProps":[{"name":"--bg","value":"var(--bb-primary)","selector":".bb-badge","description":"pill fill"},{"name":"--fg","value":"var(--bb-primary-fg)","selector":".bb-badge","description":"label, icons and the clear glyph"},{"name":"--bw","value":"0px","selector":".bb-badge","description":"Pill border. The `border` shorthand is always present, so the width is what turns it on — the filled variants leave it at 0 and the bordered ones (secondary/destructive/outline) step up to `--bb-border-w-sm`. Nothing compensates for it: the stroke sits between the label and the pill edge."},{"name":"--border-color","value":"transparent","selector":".bb-badge"},{"name":"--ring-color","value":"var(--bb-primary-ring)","selector":".bb-badge","description":"focus ring colour, per variant"},{"name":"--ring-size","value":"var(--bb-ring-size)","selector":".bb-badge","description":"focus ring width"},{"name":"--min-size-md","value":"calc(var(--bb-control-h) - 14px)","selector":".bb-badge","description":"18px at the default"},{"name":"--min-size","value":"var(--min-size-md)","selector":".bb-badge","description":"pill min height and min width"},{"name":"--elev","value":"var(--bb-elev-sm)","selector":".bb-badge","description":"Resting lift. Invisible while `--bb-elev` is its default transparent layer. A chip is small enough that a theme wanting a different lift here than on a button sets `--elev` on this class."},{"name":"--r","value":"calc(var(--bb-radius) * 0.5)","selector":".bb-badge","description":"Pill corners; the body and trailing wrappers round their outer edges to match"},{"name":"--fs","value":"calc(var(--bb-fs) - 2px)","selector":".bb-badge","description":"12px at the default (Q49.25)"},{"name":"--icon-size","value":"12px","selector":".bb-badge","description":"leading/append icons (passed to BbIcon as --size)"},{"name":"--gap","value":"3px","selector":".bb-badge","description":"space between label, icons and the trailing side"},{"name":"--px","value":"6px","selector":".bb-badge","description":"base side padding; the modifiers below scale it per side"},{"name":"--clear-size","value":"12px","selector":".bb-badge","description":"clear button's glyph box (the circle painted on hover is 2px smaller)"},{"name":"--bg-disabled","value":"var(--bb-muted)","selector":".bb-badge","description":"the pill while disabled (not loading)"},{"name":"--fg-disabled","value":"color-mix(in oklab, var(--bb-text) 45%, var(--bb-panel))","selector":".bb-badge","description":"label, icons and the × while disabled"},{"name":"--border-disabled","value":"var(--bb-muted)","selector":".bb-badge","description":"the frame while disabled"},{"name":"--pad-left","value":"var(--px)","selector":".bb-badge","description":"Side-owned padding: the body and trailing wrappers carry the pill's inline padding (and its radius) so their hit areas run flush to the border. The modifiers below retune these vars instead of the pill's own padding."},{"name":"--pad-right","value":"var(--px)","selector":".bb-badge"},{"name":"--size","value":"var(--icon-size)","selector":".bb-badge__icon"}],"pt":{"parts":[{"name":"root","description":"The badge."},{"name":"icon","description":"Every content glyph — the `icon`-mode glyph, `prepend:icon`, `append:icon` — a broadcast. The clear ✕ is not in it."},{"name":"spinner","description":"The loading glyph. It REPLACES an icon while `loading` (on a button it joins one instead)."},{"name":"text","description":"The label span; it owns the truncation."},{"name":"clear","description":"The ✕ that removes the badge (`clearable`)."}],"states":[{"name":"loading","description":"Component-wide: `loading` is on; the spinner takes an icon's place."}]},"tree":{"bindings":[{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"button.bb-badge__clear"}],"nodes":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]},"css":{"classes":{"bb-badge":["","--*","--2xl","--clearable","--highlighted","--icon","--lg","--loading","--sm","--xl","--xs","__append-icon","__body","__clear","__icon","__prepend-icon","__spinner","__text","__trailing"]},"locals":["--bg","--bg-disabled","--border-color","--border-disabled","--bw","--clear-size","--color-gray-200","--elev","--fg","--fg-disabled","--fs","--gap","--icon-size","--min-size","--min-size-md","--pad-left","--pad-right","--px","--r","--ring-color","--ring-size"]},"attrTargets":["span"],"removed":[{"name":"content","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-badge.md","silent":true,"fix":{"kind":"manual"}}]},
|
|
475
475
|
{"name":"BbBadgeButton","group":"Feedback","description":"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.","referenceOnly":false,"hasGuide":false,"contract":"ai/BbBadgeButton.md","source":"ai/source/BbBadgeButton.md","props":[{"name":"activeClass","type":"string | undefined","required":false,"default":"'router-link-active'","description":"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.\nPorted for Inertia compatibility."},{"name":"ariaCurrentValue","type":"\"page\" | \"step\" | \"location\" | \"date\" | \"time\" | \"true\" | \"false\" | undefined","required":false,"default":"'page'","description":"Value forwarded to the `aria-current` attribute when the component renders\nas a router link and the target route is an exact match.\n\nUse to communicate the current location to assistive technologies."},{"name":"async","type":"boolean | undefined","required":false,"default":"false","description":"Inertia: runs the visit without blocking — the page stays interactive and\nseveral async visits can be in flight at once."},{"name":"cacheFor","type":"string | number | (string | number)[] | undefined","required":false,"description":"Inertia: how long a prefetched response stays fresh before it is\nre-fetched. A single duration, or `[staleAfter, expiresAfter]`.\n\nTyped platform-agnostically (matching BbButton) so the library's types\nnever require `@inertiajs/vue3` to be installed."},{"name":"cacheTags","type":"string | string[] | undefined","required":false,"description":"Inertia: tags to file this visit's prefetch cache under, so a later\nrequest can invalidate the whole tagged group."},{"name":"component","type":"string | undefined","required":false,"description":"Inertia: the page component this visit resolves to. Rarely set by hand —\nthe server normally decides it."},{"name":"data","type":"object | undefined","required":false,"description":"Request payload forwarded to Inertia when navigating via `href` in an\nInertia-enabled app. Ignored when not using Inertia."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables user interaction.\n\n- When rendering as a native button, sets the `disabled` attribute.\n- When rendering as a link (anchor/Inertia), removes `href`, adds\n `aria-disabled=\"true\"` and `tabindex=\"-1\"`, and prevents navigation: the\n link stays announced as a link but leaves the tab order."},{"name":"download","type":"string | boolean | undefined","required":false,"description":"Marks an `href` link as a download: a plain `<a download>` with a native\nnavigation (never an Inertia or router visit), so `blob:` and `data:`\nfiles work too. A string sets the suggested filename."},{"name":"exactActiveClass","type":"string | undefined","required":false,"default":"'router-link-exact-active'","description":"CSS class applied when the component renders as a link and the target of the link\nand the url matches exactly.\nPorted for Inertia compatibility."},{"name":"except","type":"string[] | undefined","required":false,"description":"Inertia: the inverse of `only` — properties to EXCLUDE from a partial\nreload. Pass one or the other, not both."},{"name":"external","type":"boolean | undefined","required":false,"default":"false","description":"Forces an `href` link to render as a plain `<a>` (native navigation),\nbypassing Inertia/router interception — the same intent as Nuxt's\n`NuxtLink` `external`. Use for links outside the SPA. One of the\nnative-anchor signals alongside `target` and `download`."},{"name":"headers","type":"object | undefined","required":false,"description":"Additional HTTP headers forwarded to Inertia when navigating via `href`\nin an Inertia-enabled app."},{"name":"href","type":"string | undefined","required":false,"description":"Hyperlink reference used when rendering as an anchor (or as an Inertia\nlink in Inertia-enabled apps). If provided and not disabled, the component\nrenders as an anchor/Inertia link."},{"name":"instant","type":"boolean | undefined","required":false,"default":"false","description":"Inertia: navigate optimistically on click and reconcile when the response\nlands, instead of waiting for the round trip."},{"name":"method","type":"\"get\" | \"post\" | \"put\" | \"patch\" | \"delete\" | undefined","required":false,"description":"HTTP method used for Inertia navigation when `href` is provided in an\nInertia-enabled app. Ignored otherwise: an Inertia POST visit is\n`href=\"/orders/5/archive\" method=\"post\"`, never `to` (a `to` link is a\nVue Router link and sends no method)."},{"name":"onBefore","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia right before the request is sent."},{"name":"onCancel","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a request is cancelled."},{"name":"onCancelToken","type":"((cancelToken: unknown) => void) | undefined","required":false,"description":"Receives the Inertia cancel token source when a request is initiated.\nCan be used to cancel the request.\n\nTyped platform-agnostically (matching BbButton) so the library's types\nnever require `@inertiajs/vue3` to be installed."},{"name":"onError","type":"((errors: Record<string, string>) => void) | undefined","required":false,"description":"Inertia's hook for a VALIDATION error answer (the 422 path): the only\nfailure callback `Link` accepts. `onHttpException` (5xx) and\n`onNetworkError` are `router.visit()` / `useForm()` options, never Link\nprops."},{"name":"onFinish","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia after the request has finished\n(regardless of success or error)."},{"name":"only","type":"string[] | undefined","required":false,"description":"Limits the properties that are preserved in Inertia partial reloads."},{"name":"onPrefetched","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a prefetch for this link has\ncompleted and is cached."},{"name":"onPrefetching","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a prefetch for this link starts."},{"name":"onProgress","type":"((progress: { percentage: number | undefined; }) => void) | undefined","required":false,"description":"Progress callback invoked by Inertia with the upload/download percentage\nwhen available."},{"name":"onStart","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a request starts."},{"name":"onSuccess","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a request succeeds."},{"name":"pageProps","type":"Record<string, unknown> | ((currentProps: Record<string, unknown>, sharedProps: Record<string, unknown>) => Record<string, unknown>) | null | undefined","required":false,"description":"Inertia: props to merge into the next page optimistically, before the\nserver responds. Either an object or a function of the current props.\n\nTyped platform-agnostically (matching BbButton) so the library's types\nnever require `@inertiajs/vue3` to be installed."},{"name":"prefetch","type":"string | boolean | string[] | undefined","required":false,"description":"Inertia: fetch and cache this link's page ahead of the click. `true` uses\nthe default trigger; a string or list of strings picks them\n(`'mount'`, `'hover'`, `'click'`)."},{"name":"preserveScroll","type":"boolean | ((props: Record<string, unknown>) => boolean) | undefined","required":false,"default":"false","description":"Controls whether Inertia should preserve the current scroll position after\nnavigation. Can be a boolean or a predicate receiving the visit props."},{"name":"preserveState","type":"boolean | ((props: Record<string, unknown>) => boolean) | null | undefined","required":false,"default":"false","description":"Controls whether Inertia should preserve the current state after navigation.\nCan be a boolean or a predicate receiving the visit props."},{"name":"preserveUrl","type":"boolean | undefined","required":false,"default":"false","description":"Inertia: keep the current URL in the address bar even though the page\ncontent changes."},{"name":"pt","type":"PtMap<\"root\", \"disabled\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"queryStringArrayFormat","type":"\"brackets\" | \"indices\" | undefined","required":false,"default":"'brackets'","description":"Format to use when serializing array values into the query string for\nInertia requests."},{"name":"rel","type":"string | undefined","required":false,"description":"Relationship between the current document and the linked resource.\nUseful for security when opening new tabs (e.g. `noopener noreferrer`)."},{"name":"replace","type":"boolean | undefined","required":false,"default":"false","description":"Uses history replacement instead of push navigation.\n\n- With Vue Router (`to`), calls `router.replace`.\n- With Inertia (`href`), performs a replace visit."},{"name":"tag","type":"ButtonTag | undefined","required":false,"default":"'button'","values":["button","div","span","label"],"description":"Element for the plain (non-link) button: `'button'` (default), `'div'` /\n`'span'` (a clickable box inside another button or link) or `'label'` (a\nfile-upload trigger). Ignored with `href` / `to`. Off `button`, native\n`type` / `disabled` drop (disabled stays a class)."},{"name":"target","type":"string | undefined","required":false,"description":"Target browsing context for anchor/Inertia links (e.g. `_self`, `_blank`).\nIgnored when rendering as a native button."},{"name":"to","type":"string | wt | bt | undefined","required":false,"description":"Route location to navigate to. When provided (and not disabled), the\ncomponent renders as a Vue Router link."},{"name":"type","type":"\"button\" | \"submit\" | \"reset\" | undefined","required":false,"default":"'button'","description":"Native `type` attribute used when rendering as a button (e.g. `button`,\n`submit`, `reset`)."},{"name":"viewTransition","type":"boolean | undefined","required":false,"default":"false","description":"Inertia: run the page swap inside a View Transition, where the browser\nsupports one."}],"events":[],"slots":[{"name":"default","type":"object","description":"The action's label — what the badge displays as its body."}],"exposed":[],"models":[],"cssProps":[{"name":"--bg","value":"var(--bb-primary)","selector":".bb-badge","description":"pill fill"},{"name":"--fg","value":"var(--bb-primary-fg)","selector":".bb-badge","description":"label, icons and the clear glyph"},{"name":"--bw","value":"0px","selector":".bb-badge","description":"Pill border. The `border` shorthand is always present, so the width is what turns it on — the filled variants leave it at 0 and the bordered ones (secondary/destructive/outline) step up to `--bb-border-w-sm`. Nothing compensates for it: the stroke sits between the label and the pill edge."},{"name":"--border-color","value":"transparent","selector":".bb-badge"},{"name":"--ring-color","value":"var(--bb-primary-ring)","selector":".bb-badge","description":"focus ring colour, per variant"},{"name":"--ring-size","value":"var(--bb-ring-size)","selector":".bb-badge","description":"focus ring width"},{"name":"--min-size-md","value":"calc(var(--bb-control-h) - 14px)","selector":".bb-badge","description":"18px at the default"},{"name":"--min-size","value":"var(--min-size-md)","selector":".bb-badge","description":"pill min height and min width"},{"name":"--elev","value":"var(--bb-elev-sm)","selector":".bb-badge","description":"Resting lift. Invisible while `--bb-elev` is its default transparent layer. A chip is small enough that a theme wanting a different lift here than on a button sets `--elev` on this class."},{"name":"--r","value":"calc(var(--bb-radius) * 0.5)","selector":".bb-badge","description":"Pill corners; the body and trailing wrappers round their outer edges to match"},{"name":"--fs","value":"calc(var(--bb-fs) - 2px)","selector":".bb-badge","description":"12px at the default (Q49.25)"},{"name":"--icon-size","value":"12px","selector":".bb-badge","description":"leading/append icons (passed to BbIcon as --size)"},{"name":"--gap","value":"3px","selector":".bb-badge","description":"space between label, icons and the trailing side"},{"name":"--px","value":"6px","selector":".bb-badge","description":"base side padding; the modifiers below scale it per side"},{"name":"--clear-size","value":"12px","selector":".bb-badge","description":"clear button's glyph box (the circle painted on hover is 2px smaller)"},{"name":"--bg-disabled","value":"var(--bb-muted)","selector":".bb-badge","description":"the pill while disabled (not loading)"},{"name":"--fg-disabled","value":"color-mix(in oklab, var(--bb-text) 45%, var(--bb-panel))","selector":".bb-badge","description":"label, icons and the × while disabled"},{"name":"--border-disabled","value":"var(--bb-muted)","selector":".bb-badge","description":"the frame while disabled"},{"name":"--pad-left","value":"var(--px)","selector":".bb-badge","description":"Side-owned padding: the body and trailing wrappers carry the pill's inline padding (and its radius) so their hit areas run flush to the border. The modifiers below retune these vars instead of the pill's own padding."},{"name":"--pad-right","value":"var(--px)","selector":".bb-badge"},{"name":"--size","value":"var(--icon-size)","selector":".bb-badge__icon"}],"pt":{"parts":[{"name":"root","description":"Whichever element renders — the `<button>`, the `<a>` or the router link. A `class` on the component lands here too. The label is your slot markup."}],"states":[{"name":"disabled","description":"Component-wide: the button is `disabled`."}]},"tree":{"nodes":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]}]}},
|
|
476
476
|
{"name":"BbBaseButton","group":"Inputs","description":"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.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbBaseButton.md","source":"ai/source/BbBaseButton.md","props":[{"name":"activeClass","type":"string | undefined","required":false,"default":"'router-link-active'","description":"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.\nPorted for Inertia compatibility."},{"name":"ariaCurrentValue","type":"\"page\" | \"step\" | \"location\" | \"date\" | \"time\" | \"true\" | \"false\" | undefined","required":false,"default":"'page'","description":"Value forwarded to the `aria-current` attribute when the component renders\nas a router link and the target route is an exact match.\n\nUse to communicate the current location to assistive technologies."},{"name":"async","type":"boolean | undefined","required":false,"default":"false","description":"Inertia: runs the visit without blocking — the page stays interactive and\nseveral async visits can be in flight at once."},{"name":"block","type":"boolean | undefined","required":false,"default":"false","description":"Makes the component take the full available width (block-level layout).\nAdds the `bb-base-button--block` modifier class."},{"name":"cacheFor","type":"string | number | (string | number)[] | undefined","required":false,"description":"Inertia: how long a prefetched response stays fresh before it is\nre-fetched. A single duration, or `[staleAfter, expiresAfter]`.\n\nTyped platform-agnostically (matching BbButton) so the library's types\nnever require `@inertiajs/vue3` to be installed."},{"name":"cacheTags","type":"string | string[] | undefined","required":false,"description":"Inertia: tags to file this visit's prefetch cache under, so a later\nrequest can invalidate the whole tagged group."},{"name":"component","type":"string | undefined","required":false,"description":"Inertia: the page component this visit resolves to. Rarely set by hand —\nthe server normally decides it."},{"name":"data","type":"object | undefined","required":false,"description":"Request payload forwarded to Inertia when navigating via `href` in an\nInertia-enabled app. Ignored when not using Inertia."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables user interaction.\n\n- When rendering as a native button, sets the `disabled` attribute.\n- When rendering as a link (anchor/Inertia), removes `href`, adds\n `aria-disabled=\"true\"` and `tabindex=\"-1\"`, and prevents navigation: the\n link stays announced as a link but leaves the tab order."},{"name":"download","type":"string | boolean | undefined","required":false,"description":"Marks an `href` link as a download: a plain `<a download>` with a native\nnavigation (never an Inertia or router visit), so `blob:` and `data:`\nfiles work too. A string sets the suggested filename."},{"name":"exactActiveClass","type":"string | undefined","required":false,"default":"'router-link-exact-active'","description":"CSS class applied when the component renders as a link and the target of the link\nand the url matches exactly.\nPorted for Inertia compatibility."},{"name":"except","type":"string[] | undefined","required":false,"description":"Inertia: the inverse of `only` — properties to EXCLUDE from a partial\nreload. Pass one or the other, not both."},{"name":"external","type":"boolean | undefined","required":false,"default":"false","description":"Forces an `href` link to render as a plain `<a>` (native navigation),\nbypassing Inertia/router interception — the same intent as Nuxt's\n`NuxtLink` `external`. Use for links outside the SPA. One of the\nnative-anchor signals alongside `target` and `download`."},{"name":"headers","type":"object | undefined","required":false,"description":"Additional HTTP headers forwarded to Inertia when navigating via `href`\nin an Inertia-enabled app."},{"name":"href","type":"string | undefined","required":false,"description":"Hyperlink reference used when rendering as an anchor (or as an Inertia\nlink in Inertia-enabled apps). If provided and not disabled, the component\nrenders as an anchor/Inertia link."},{"name":"instant","type":"boolean | undefined","required":false,"default":"false","description":"Inertia: navigate optimistically on click and reconcile when the response\nlands, instead of waiting for the round trip."},{"name":"method","type":"\"get\" | \"post\" | \"put\" | \"patch\" | \"delete\" | undefined","required":false,"description":"HTTP method used for Inertia navigation when `href` is provided in an\nInertia-enabled app. Ignored otherwise: an Inertia POST visit is\n`href=\"/orders/5/archive\" method=\"post\"`, never `to` (a `to` link is a\nVue Router link and sends no method)."},{"name":"onBefore","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia right before the request is sent."},{"name":"onCancel","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a request is cancelled."},{"name":"onCancelToken","type":"((cancelToken: unknown) => void) | undefined","required":false,"description":"Receives the Inertia cancel token source when a request is initiated.\nCan be used to cancel the request.\n\nTyped platform-agnostically (matching BbButton) so the library's types\nnever require `@inertiajs/vue3` to be installed."},{"name":"onError","type":"((errors: Record<string, string>) => void) | undefined","required":false,"description":"Inertia's hook for a VALIDATION error answer (the 422 path): the only\nfailure callback `Link` accepts. `onHttpException` (5xx) and\n`onNetworkError` are `router.visit()` / `useForm()` options, never Link\nprops."},{"name":"onFinish","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia after the request has finished\n(regardless of success or error)."},{"name":"only","type":"string[] | undefined","required":false,"description":"Limits the properties that are preserved in Inertia partial reloads."},{"name":"onPrefetched","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a prefetch for this link has\ncompleted and is cached."},{"name":"onPrefetching","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a prefetch for this link starts."},{"name":"onProgress","type":"((progress: { percentage: number | undefined; }) => void) | undefined","required":false,"description":"Progress callback invoked by Inertia with the upload/download percentage\nwhen available."},{"name":"onStart","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a request starts."},{"name":"onSuccess","type":"(() => void) | undefined","required":false,"description":"Lifecycle hook invoked by Inertia when a request succeeds."},{"name":"pageProps","type":"Record<string, unknown> | ((currentProps: Record<string, unknown>, sharedProps: Record<string, unknown>) => Record<string, unknown>) | null | undefined","required":false,"description":"Inertia: props to merge into the next page optimistically, before the\nserver responds. Either an object or a function of the current props.\n\nTyped platform-agnostically (matching BbButton) so the library's types\nnever require `@inertiajs/vue3` to be installed."},{"name":"prefetch","type":"string | boolean | string[] | undefined","required":false,"description":"Inertia: fetch and cache this link's page ahead of the click. `true` uses\nthe default trigger; a string or list of strings picks them\n(`'mount'`, `'hover'`, `'click'`)."},{"name":"preserveScroll","type":"boolean | ((props: Record<string, unknown>) => boolean) | undefined","required":false,"default":"false","description":"Controls whether Inertia should preserve the current scroll position after\nnavigation. Can be a boolean or a predicate receiving the visit props."},{"name":"preserveState","type":"boolean | ((props: Record<string, unknown>) => boolean) | null | undefined","required":false,"default":"false","description":"Controls whether Inertia should preserve the current state after navigation.\nCan be a boolean or a predicate receiving the visit props."},{"name":"preserveUrl","type":"boolean | undefined","required":false,"default":"false","description":"Inertia: keep the current URL in the address bar even though the page\ncontent changes."},{"name":"pt","type":"PtMap<\"root\", \"disabled\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"queryStringArrayFormat","type":"\"brackets\" | \"indices\" | undefined","required":false,"default":"'brackets'","description":"Format to use when serializing array values into the query string for\nInertia requests."},{"name":"rel","type":"string | undefined","required":false,"description":"Relationship between the current document and the linked resource.\nUseful for security when opening new tabs (e.g. `noopener noreferrer`)."},{"name":"replace","type":"boolean | undefined","required":false,"default":"false","description":"Uses history replacement instead of push navigation.\n\n- With Vue Router (`to`), calls `router.replace`.\n- With Inertia (`href`), performs a replace visit."},{"name":"tag","type":"ButtonTag | undefined","required":false,"default":"'button'","values":["button","div","span","label"],"description":"Element for the plain (non-link) button: `'button'` (default), `'div'` /\n`'span'` (a clickable box inside another button or link) or `'label'` (a\nfile-upload trigger). Ignored with `href` / `to`. Off `button`, native\n`type` / `disabled` drop (disabled stays a class)."},{"name":"target","type":"string | undefined","required":false,"description":"Target browsing context for anchor/Inertia links (e.g. `_self`, `_blank`).\nIgnored when rendering as a native button."},{"name":"text","type":"string | undefined","required":false,"description":"Fallback text content rendered when no default slot is provided."},{"name":"to","type":"string | wt | bt | undefined","required":false,"description":"Route location to navigate to. When provided (and not disabled), the\ncomponent renders as a Vue Router link."},{"name":"type","type":"\"button\" | \"submit\" | \"reset\" | undefined","required":false,"default":"\"button\"","description":"Native `type` attribute used when rendering as a button (e.g. `button`,\n`submit`, `reset`)."},{"name":"viewTransition","type":"boolean | undefined","required":false,"default":"false","description":"Inertia: run the page swap inside a View Transition, where the browser\nsupports one."}],"events":[],"slots":[{"name":"default","type":"object","description":"Primary content rendered inside the button element. Falls back to the `text` prop when empty."}],"exposed":[],"models":[],"pt":{"parts":[{"name":"root","description":"Whichever element renders — the `<button>`, the `<a>` or the router link. A `class` on the component lands here too. The label is your slot markup."}],"states":[{"name":"disabled","description":"Component-wide: the button is `disabled`."}]},"tree":{"bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"nodes":[{"name":"RouterComponent","kind":"internal"}]},"css":{"classes":{"bb-base-button":["","--block","--disabled"]},"locals":["--color-gray-200"]}},
|
|
477
477
|
{"name":"BbBaseCheckboxIcon","group":"Selection","description":"Standalone checkbox glyph (box + checkmark SVG). Presentational only — no input, no events. Compose it into a fully custom checkbox design, or let BbCheckbox, BbCheckboxGroup or BbTable render it.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbBaseCheckboxIcon.md","source":"ai/source/BbBaseCheckboxIcon.md","props":[{"name":"checked","type":"boolean | undefined","required":false,"default":"false","description":"Renders the checked state (fills the box and draws the checkmark)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the glyph (muted fill, not-allowed cursor). Purely visual."},{"name":"focused","type":"boolean | undefined","required":false,"default":"false","description":"Whether the paired native input has focus — any focus, mouse included.\nPaints `--focused`, the hook the `focused` passthrough state aliases (T19);\ndraws nothing by itself — the ring stays on `focusVisible`."},{"name":"focusVisible","type":"boolean | undefined","required":false,"default":"false","description":"Whether keyboard focus is visible (`:focus-visible`). Draws the focus ring."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Puts the glyph into the error state (danger border and ring color)."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Puts the glyph into the warning state (warn border and ring color).\nErrors take priority when both are set."},{"name":"indeterminate","type":"boolean | undefined","required":false,"default":"false","description":"Renders the indeterminate state (filled box with a dash instead of the\ncheckmark). Takes visual precedence over `checked`."},{"name":"pt","type":"PtMap<\"root\", CheckablePtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:checked","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:focused","type":"PtValue | undefined","required":false},{"name":"pt:root:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:root:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Renders the read-only affordance (default cursor instead of pointer)."}],"events":[],"slots":[],"exposed":[],"models":[],"cssProps":[{"name":"--accent","value":"var(--bb-primary)","selector":".bb-base-checkbox-icon"},{"name":"--check-color","value":"var(--bb-primary-fg)","selector":".bb-base-checkbox-icon"},{"name":"--size","value":"16px","selector":".bb-base-checkbox-icon"},{"name":"--r","value":"min(4px, var(--bb-radius))","selector":".bb-base-checkbox-icon","description":"The checkbox corner, capped by the master radius so a zero- or small-radius theme reaches it. Not `--bb-radius-sm`: that tier is 4.8px at the shipped radius and this glyph ships at 4px."},{"name":"--ring-color","value":"var(--bb-ring)","selector":".bb-base-checkbox-icon","description":"The focus ring's colour, re-pointed by errors and warnings. Both ring declarations read it, so a focused glyph grows its ring in its own colour instead of tweening from a different one."},{"name":"--elev","value":"var(--bb-elev-sm)","selector":".bb-base-checkbox-icon","description":"Resting lift; a no-op until a theme pins `--bb-elev`."},{"name":"--bg","value":"var(--bb-panel)","selector":".bb-base-checkbox-icon","description":"The glyph plate. DECLARED here, not consumed bare, because this glyph renders inside surfaces that declare `--bg` themselves — a table row or header cell, a dialog, an off-canvas sheet. Without the declaration it would inherit that surface's fill, which happens to match at the shipped default and would diverge the moment anyone writes `.my-table { --bg: … }`. Identical to the raw tokens it replaces at every theme."},{"name":"--border-color","value":"var(--bb-border)","selector":".bb-base-checkbox-icon"}],"pt":{"parts":[{"name":"root","description":"The drawn glyph — the box and its checkmark. Its states are the conditions it paints as it resolves them (`warnings` is off while `errors` is on), not the raw props."}],"states":[{"name":"checked","description":"Component-wide: the toggle is on."},{"name":"indeterminate","description":"Component-wide: the mixed state (the `indeterminate` prop) — neither on nor off."},{"name":"readonly","description":"Component-wide: the toggle is `readonly` — focusable, cannot change."},{"name":"disabled","description":"Component-wide: the toggle is `disabled`."},{"name":"warnings","description":"Component-wide: the toggle shows warnings and no errors."},{"name":"errors","description":"Component-wide: the toggle shows errors — the glyph and the message line turn red."},{"name":"focused","description":"Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop."},{"name":"focusVisible","description":"Component-wide: that focus is keyboard-visible — where a focus ring belongs."}]},"css":{"classes":{"bb-base-checkbox-icon":["","--checked","--disabled","--errors","--focus-visible","--focused","--indeterminate","--readonly","--warnings","__check","__indeterminate"]},"locals":["--accent","--bg","--border-color","--check-color","--color-gray-200","--elev","--r","--ring-color","--size"]},"attrTargets":["svg"],"removed":[{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}}]},
|
|
@@ -484,25 +484,25 @@
|
|
|
484
484
|
{"name":"BbCheckboxGroup","group":"Selection","description":"Manages multiple checkbox options as a group.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbCheckboxGroup.md","source":"ai/source/BbCheckboxGroup.md","props":[{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-label-spacing-y` for\n`--bb-label-spacing-y-compact`, so tune a compact group's label gap with\nthe `-compact` token, not the base one."},{"name":"dependencies","type":"unknown[] | undefined","required":false,"description":"Defines an array of dependencies that will trigger actions in the component upon change."},{"name":"depsDebounceTime","type":"number | undefined","required":false,"description":"Timeout used to debounce response to changes to dependencies."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"emptyText","type":"string | undefined","required":false,"description":"String displayed when there are no items to display."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"After every applied, successful load (an empty one included), drops the\nmodel values the options no longer contain (a single value resets to\n`null`). A failed load never prunes."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"failedText","type":"string | undefined","required":false,"default":"the localized `common.failedText` (\"Couldn't load items\")","description":"String displayed in the empty state while the latest load FAILED (the\n`items` provider threw): the twin of `emptyText` for that case."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides each option's label text (the text rendered next to every\ninput) while keeping it accessible to screen readers.\nDoes not affect the fieldset legend — use `hideLegend` for that."},{"name":"hideLegend","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the legend of the fieldset while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"Prefix for the ids of each option's input and of the label, description\nand message. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"inputPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"\"left\"","description":"Sets the alignment of the input. Since inputs are inline block they can be aligned just as text can."},{"name":"itemInputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of each option's control in its row; `'center'` is\nthe middle of the label plus its description. Omitted, it sits on the\nlabel's first line."},{"name":"itemLabelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of each option's label in its row. Omitted, it stays\nas it is."},{"name":"itemLayout","type":"FieldLayout | undefined","required":false,"default":"'auto'","description":"How each row's input and label sit together, in the `layout` keywords:\n`'auto'`, `'vertical'`, `'horizontal'`, `'label-fill'`, `'input-fill'`,\nor a two-word ratio pattern like `'xx xxxxx'`."},{"name":"itemProps","type":"BbOptionGroupItemProps<T> | undefined","required":false,"description":"ADDITIONAL row fields, never the text or value: `description`, a muted\nline under the label (it may wrap; announced as the option's\ndescription). An object of paths or getters, or a function of the item;\nnothing is read implicitly."},{"name":"itemReverse","type":"boolean | undefined","required":false,"default":"false","description":"Swaps each row's input and label from their natural order (input first),\nin every `item-layout`. `reverse` swaps the legend and the options instead."},{"name":"items","type":"T[] | ((context: BbCheckboxGroupItemsContext) => T[] | Promise<T[]>)","required":true,"description":"The options: an array, or a provider called with a\n`BbCheckboxGroupItemsContext` (`BbSwitchGroupItemsContext` on a switch\ngroup) (`reason`, `modelValue`, `signal`), sync or async. A provider\nfails by THROWING, never by returning `[]`: the rows clear and `#empty`\ngets the `error`."},{"name":"itemText","type":"ItemAccessor<T, string> | undefined","required":false,"default":"own `label`, else `text`, else `JSON.stringify(item)`","description":"Defines a path that returns a property of the object to use as text or a function that returns a string.\n\nUnset: own `label`, else `text` (`{ label, value }` needs no accessor)."},{"name":"itemValue","type":"ItemAccessor<T> | undefined","required":false,"default":"own `value`, else the whole item","description":"Defines a path that returns a property of the object to use as value or a function that returns any value.\n\nUnset: own `value`, even `null`."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"legend","type":"string","required":true,"description":"Text content of the legend."},{"name":"legendMode","type":"\"outside\" | \"inside\" | undefined","required":false,"description":"Legend rendering mode. `'outside'` renders the legend above the fieldset in the normal flow;\n`'inside'` overlays the legend inside the fieldset border.\nFloating mode is not supported for option groups (checkbox, radio or\nswitch) — there is no single field for the legend to float against."},{"name":"legendPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"listLayout","type":"ListLayout | undefined","required":false,"default":"'horizontal'","values":["horizontal","vertical","vertical-stretch","tiles"],"description":"How the rows sit in the list: `'horizontal'` (on a line, wrapping),\n`'vertical'` (stacked), `'vertical-stretch'` (stacked, as wide as the\nlist) or `'tiles'` (equal boxes; `--tile-min-width` on `pt:list` sets the\nnarrowest)."},{"name":"loadingText","type":"string | undefined","required":false,"description":"String displayed while items are being loaded."},{"name":"max","type":"number | undefined","required":false,"description":"Maximum number of selected items."},{"name":"modelValue","type":"any","required":false,"description":"Used by v-model. Can be an array of any serializable type."},{"name":"modelValueDebounceTime","type":"number | undefined","required":false,"description":"Timeout used to debounce response to changes to modelValue."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"true","description":"Enables multi-selection behavior.\nWhen true, `modelValue` must be an array.\nWhen false, `modelValue` should be a single value."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"pt","type":"GroupPtMap<T> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:icon:checked","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:focused","type":"PtValue | undefined","required":false},{"name":"pt:icon:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:item:checked","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:errors","type":"PtValue | undefined","required":false},{"name":"pt:item:focused","type":"PtValue | undefined","required":false},{"name":"pt:item:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:item:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:item:loading","type":"PtValue | undefined","required":false},{"name":"pt:item:readonly","type":"PtValue | undefined","required":false},{"name":"pt:item:warnings","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemDescription:checked","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:errors","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:focused","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:loading","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:readonly","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:label:checked","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:focused","type":"PtValue | undefined","required":false},{"name":"pt:label:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:legend","type":"PtValue | undefined","required":false},{"name":"pt:legend:disabled","type":"PtValue | undefined","required":false},{"name":"pt:legend:errors","type":"PtValue | undefined","required":false},{"name":"pt:legend:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:legend:loading","type":"PtValue | undefined","required":false},{"name":"pt:legend:readonly","type":"PtValue | undefined","required":false},{"name":"pt:legend:warnings","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list:errors","type":"PtValue | undefined","required":false},{"name":"pt:list:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:list:loading","type":"PtValue | undefined","required":false},{"name":"pt:list:readonly","type":"PtValue | undefined","required":false},{"name":"pt:list:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and the input is swapped."},{"name":"rules","type":"RuleExpression<any>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"selectable","type":"boolean | ((item: T) => boolean) | undefined","required":false,"default":"true","description":"Defines whether options are selectable.\nCan be a global boolean that affects all options or a function\nthat accepts an item and returns a boolean that only affects that item.\nNon-selectable options are rendered disabled."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the group becomes active (focus/click enters it)."},{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when one of the generated checkbox inputs loses focus.\nForwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when an option is toggled.\nForwards the original DOM `Event` from the checkbox input."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when one of the generated checkbox inputs is clicked.\nForwards the original DOM `MouseEvent`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when one of the generated checkbox inputs receives focus.\nForwards the original DOM `FocusEvent`."},{"name":"inactive","signature":"(): void","description":"Emitted when focus/click moves outside the group after it was active.\nUseful for validation-on-blur flows at group level."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from generated checkbox inputs.\nForwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on generated checkbox inputs.\nForwards the original DOM `KeyboardEvent`."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is pressed over a checkbox input.\nForwards the original DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is released over a checkbox input.\nForwards the original DOM `MouseEvent`."},{"name":"update:modelValue","signature":"(value: any): void","description":"Emitted with the coherent next selection array whenever selection changes."}],"slots":[{"name":"append","type":"object","description":"Content rendered after the last option, inside the options container."},{"name":"description","type":"BbCheckboxGroupDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"empty","type":"{ error: unknown; }","description":"Content shown when no options are available (replaces the default \"no\ndata\" text). `error` is what the latest failed load rejected with,\nuntouched, and `null` when nothing failed — a failed load clears the\nrows, so this slot is where it shows."},{"name":"icon","type":"BbCheckboxGroupIconSlotProps<T>","fields":["disabled: boolean","readonly: boolean","checked: boolean","indeterminate?: boolean","focused: boolean","focusVisible: boolean","id: string","name: string","falseValue: any","hasErrors: boolean","hasWarnings: boolean","parsedValue: string","trueValue: any","value: any","item: T","text: string"],"description":"Replaces the default checkmark icon for each checkbox option."},{"name":"label","type":"BbCheckboxGroupLabelSlotProps<T>","fields":["item: T","text: string","checked: boolean","description: string"],"description":"Replaces the default label text for each option."},{"name":"legend","type":"BbCheckboxGroupLegendSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default fieldset legend text for the group."},{"name":"loading","type":"object","description":"Content shown while options are loading (replaces the default loading text)."},{"name":"prepend","type":"object","description":"Content rendered before the first option, inside the options container."}],"exposed":[],"models":[{"name":"modelValue","type":"any"}],"cssProps":[{"name":"--gap","value":"24px","selector":".bb-checkbox-group__list","description":"Space between rows on one line."},{"name":"--row-gap","value":"10px","selector":".bb-checkbox-group__list","description":"Space between wrapped lines."},{"name":"--tile-min-width","value":"96px","selector":".bb-checkbox-group__list","description":"How narrow a tile may get before the tiles wrap (`tiles` only)."}],"pt":{"parts":[{"name":"root","description":"The group's container (the fieldset)."},{"name":"legend","description":"The group's heading — the fieldset `<legend>` (the `legend` prop)."},{"name":"description","description":"The muted line under the legend (the `description` prop)."},{"name":"message","description":"The errors / warnings line. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"list","description":"The node that lays the rows out (flex + wrap, gaps on `--gap` / `--row-gap`): `pt:list=\"grid grid-cols-3\"` re-lays them, `pt:list=\"[--gap:8px]\"` tightens them. Takes the group-wide states only."},{"name":"item","description":"One option row — a broadcast, resolved per option with its own `checked` / `disabled` / focus. Takes a per-item function."},{"name":"icon","description":"One row's drawn glyph — the default one: a consumer `icon` slot replaces it. Takes a per-item function."},{"name":"label","description":"One option's label text (the `label` slot's default). Takes a per-item function."},{"name":"itemDescription","description":"One option's muted second line, its description. Takes a per-item function."}],"states":[{"name":"hasValue","description":"Component-wide: at least one option is chosen."},{"name":"checked","description":"Per row, on `item`, `icon`, `label` and `itemDescription`: that option is chosen. Never on a field part."},{"name":"readonly","description":"Component-wide: the group is `readonly`."},{"name":"disabled","description":"Component-wide while the group is `disabled`; also per row, on the row parts of an option that is disabled on its own."},{"name":"warnings","description":"Component-wide: the group shows warnings and no errors."},{"name":"errors","description":"Component-wide: the group shows errors."},{"name":"focused","description":"Per row, on the row parts: that option's input has focus — any focus, mouse included."},{"name":"focusVisible","description":"Per row, on the row parts: that option's focus is keyboard-visible — where a focus ring belongs."},{"name":"loading","description":"Component-wide: the items are being fetched."}]},"tree":{"bindings":[{"part":"icon","target":"BbBaseCheckboxIcon"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbCheckboxGroup","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"OptionsContainer","kind":"internal","vocabulary":"BbCheckboxGroup","bindings":[{"part":"list","target":"span"},{"part":"item","target":"label"},{"part":"label","target":"span"},{"part":"itemDescription","target":"span"}]},{"name":"BbBaseCheckboxIcon","kind":"public","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-base-checkbox-icon","bb-base-checkbox-icon--errors","bb-base-checkbox-icon--warnings","bb-base-checkbox-icon--checked","bb-base-checkbox-icon--indeterminate"]},{"name":"--check-color","documented":false,"readBy":["bb-base-checkbox-icon__check","bb-base-checkbox-icon__indeterminate"]},{"name":"--size","documented":false,"readBy":["bb-base-checkbox-icon"]},{"name":"--r","documented":true,"readBy":["bb-base-checkbox-icon"]},{"name":"--ring-color","documented":true,"readBy":["bb-base-checkbox-icon","bb-base-checkbox-icon--focus-visible"]},{"name":"--elev","documented":true,"readBy":["bb-base-checkbox-icon","bb-base-checkbox-icon--focus-visible"]},{"name":"--bg","documented":true,"readBy":["bb-base-checkbox-icon"]},{"name":"--border-color","documented":false,"readBy":["bb-base-checkbox-icon"]}]}]},"css":{"classes":{"bb-checkbox-group":["","__empty","__item","__item--*","__item--aligned","__item--description","__item--disabled","__item--focus-visible","__item--focused","__item--input-align-*","__item--input-align-bottom","__item--input-align-center","__item--input-align-top","__item--label-align-*","__item--label-align-bottom","__item--label-align-center","__item--label-align-top","__item--reverse","__item--selected","__item--vertical","__item-description","__label","__list","__list--*","__list--errors","__list--tiles","__list--warnings","__loading"]},"locals":["--color-gray-200","--gap","--hit","--row-gap","--size","--tap-row-gap","--tile-min-width"]},"attrTargets":["div"],"removed":[{"name":"color","new":null,"since":"3.0.0-beta.15","migration":"ai/guides/migration/components/bb-checkbox-group.md","silent":true,"fix":{"kind":"manual"}},{"name":"labelPosition","new":"legendPosition","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-checkbox-group.md","silent":true,"fix":{"kind":"rename"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-checkbox-group.md","silent":true,"fix":{"kind":"rename"}},{"name":"inputDirection","new":"listLayout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-checkbox-group.md","silent":true,"fix":{"kind":"rename","valueMap":{"horizontal":"horizontal","vertical":"vertical-stretch"}}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"labelPosition","to":"legendPosition","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-checkbox-group.md","fix":{"kind":"rename"}},{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-checkbox-group.md","fix":{"kind":"rename"}},{"from":"inputDirection","to":"listLayout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-checkbox-group.md","fix":{"kind":"rename","valueMap":{"horizontal":"horizontal","vertical":"vertical-stretch"}}},{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
485
485
|
{"name":"BbCollapsible","group":"Navigation","description":"Toggles visibility of collapsible content blocks.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbCollapsible.md","source":"ai/source/BbCollapsible.md","props":[{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the content at mount, while closed, instead of on the first\nopen. Closed content is `inert` and `aria-hidden` either way."},{"name":"modelValue","type":"boolean | undefined","required":false,"default":"false","description":"Used by v-model to open or close the collapsible. Optional: omitted, it\nrenders closed."},{"name":"pt","type":"PtMap<BbCollapsiblePtPart, \"open\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:content","type":"PtValue | undefined","required":false},{"name":"pt:content:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"tag","type":"LayoutTag | undefined","required":false,"default":"\"span\"","values":["div","span"],"description":"Element rendered as the root, and mirrored by the inner animating\nelement — so the pair is span-in-span or div-in-div, both valid. Keep the\ndefault inside phrasing content (a `<p>`); use `'div'` when the body is\nblock content (paragraphs, lists, forms), which a `span` may not contain."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds"}],"events":[],"slots":[{"name":"default","type":"any","description":"The collapsible body content that is shown or hidden based on `modelValue`.\nWhen `eager` is false, the content is not rendered until the first open."}],"exposed":[],"models":[],"pt":{"parts":[{"name":"root","description":"The outer element."},{"name":"content","description":"The region that animates open and closed — `inert` while closed."}],"states":[{"name":"open","description":"Component-wide: the content is open (follows `v-model`)."}]},"css":{"classes":{"bb-collapsible":["","--closed","--open","__content"]},"locals":["--color-gray-200","--transition-duration"]}},
|
|
486
486
|
{"name":"BbColorInput","group":"Inputs","description":"Captures color values through input controls.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbColorInput.md","source":"ai/source/BbColorInput.md","props":[{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"When `true`, the color palette opens as a bottom off-canvas sheet on mobile\nviewports instead of a floating popover; on desktop it stays a popover.\nMirrors the adaptive behaviour of `BbSelect`/`BbDatePickerInput`.\n\nWhen unset, falls back to the global `config.adaptive`."},{"name":"alpha","type":"boolean | undefined","required":false,"default":"false","description":"Enable the alpha channel. Shows an opacity slider and uses `#RRGGBBAA` hex8 format."},{"name":"append:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the end of the input."},{"name":"autocomplete","type":"string | undefined","required":false,"default":"\"off\"","description":"Guides the browser as to the type of information expected in the field."},{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Displays a clear button when the input has a value and is being interacted with."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-input-h`, `--bb-input-py` and\n`--bb-label-spacing-y` for their `-compact` twins on the field, so a\n`--bb-input-h` you set on the component is ignored while `compact` is on:\nsize a compact field with `--bb-input-h-compact` (and\n`--bb-input-py-compact`) instead."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"eyeDropper","type":"boolean | undefined","required":false,"default":"false","description":"Show an eyedropper button to sample any color on screen.\nUses the native EyeDropper API — hidden automatically on unsupported browsers."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"floating\" | \"inside\" | undefined","required":false,"description":"Label rendering mode: `outside` places the label above the input,\n`floating` overlays it on the field and shrinks it when a value is set,\n`inside` keeps it inside the field."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles."},{"name":"modelValue","type":"string | null | undefined","required":false,"default":"null","description":"Used by v-model."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"placeholder","type":"string | undefined","required":false,"description":"Text shown while the field is empty."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the start of the input."},{"name":"pt","type":"(PtMap<BbColorInputPtPart, FormControlPtState> & { 'swatch:selected'?: PtValue | undefined; }) | undefined","required":false,"description":"Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same\nkeys as the `pt:*` attributes without the prefix. See the `pt:<part>` row."},{"name":"pt:box","type":"PtValue | undefined","required":false},{"name":"pt:box:disabled","type":"PtValue | undefined","required":false},{"name":"pt:box:errors","type":"PtValue | undefined","required":false},{"name":"pt:box:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:box:loading","type":"PtValue | undefined","required":false},{"name":"pt:box:readonly","type":"PtValue | undefined","required":false},{"name":"pt:box:warnings","type":"PtValue | undefined","required":false},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:errors","type":"PtValue | undefined","required":false},{"name":"pt:clear:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:clear:readonly","type":"PtValue | undefined","required":false},{"name":"pt:clear:warnings","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:indicator","type":"PtValue | undefined","required":false},{"name":"pt:indicator:disabled","type":"PtValue | undefined","required":false},{"name":"pt:indicator:errors","type":"PtValue | undefined","required":false},{"name":"pt:indicator:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:indicator:loading","type":"PtValue | undefined","required":false},{"name":"pt:indicator:readonly","type":"PtValue | undefined","required":false},{"name":"pt:indicator:warnings","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:errors","type":"PtValue | undefined","required":false},{"name":"pt:input:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:input:loading","type":"PtValue | undefined","required":false},{"name":"pt:input:readonly","type":"PtValue | undefined","required":false},{"name":"pt:input:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:errors","type":"PtValue | undefined","required":false},{"name":"pt:panel:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:panel:loading","type":"PtValue | undefined","required":false},{"name":"pt:panel:readonly","type":"PtValue | undefined","required":false},{"name":"pt:panel:warnings","type":"PtValue | undefined","required":false},{"name":"pt:prefix","type":"PtValue | undefined","required":false},{"name":"pt:prefix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:prefix:errors","type":"PtValue | undefined","required":false},{"name":"pt:prefix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:prefix:loading","type":"PtValue | undefined","required":false},{"name":"pt:prefix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:prefix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:errors","type":"PtValue | undefined","required":false},{"name":"pt:sheet:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:sheet:loading","type":"PtValue | undefined","required":false},{"name":"pt:sheet:readonly","type":"PtValue | undefined","required":false},{"name":"pt:sheet:warnings","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:disabled","type":"PtValue | undefined","required":false},{"name":"pt:spinner:errors","type":"PtValue | undefined","required":false},{"name":"pt:spinner:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner:readonly","type":"PtValue | undefined","required":false},{"name":"pt:spinner:warnings","type":"PtValue | undefined","required":false},{"name":"pt:suffix","type":"PtValue | undefined","required":false},{"name":"pt:suffix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:suffix:errors","type":"PtValue | undefined","required":false},{"name":"pt:suffix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:suffix:loading","type":"PtValue | undefined","required":false},{"name":"pt:suffix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:suffix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:swatch","type":"PtValue | undefined","required":false},{"name":"pt:swatch:disabled","type":"PtValue | undefined","required":false},{"name":"pt:swatch:errors","type":"PtValue | undefined","required":false},{"name":"pt:swatch:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:swatch:loading","type":"PtValue | undefined","required":false},{"name":"pt:swatch:readonly","type":"PtValue | undefined","required":false},{"name":"pt:swatch:selected","type":"PtValue | undefined","required":false},{"name":"pt:swatch:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and the input is swapped."},{"name":"rules","type":"RuleExpression<string | null>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"swatches","type":"boolean | string[][] | undefined","required":false,"description":"Controls swatches display in the picker:\n- `true` — show the built-in Material-palette swatches\n- `string[][]` — show custom swatches (each inner array = a column of shades)\n- `false` / omitted — no swatches section"},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"variant","type":"InputVariantType | undefined","required":false,"default":"'outline'","description":"Visual variant of the field box, with the `BbButton` names and tokens.\nColours only, so a form never reflows; `'ghost'` has no border in any\nstate, and `'none'` takes no look at all (you own hover, focus and the\nstates). Register more with the plugin's `inputVariants`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the native text input loses focus.\nForwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when the native text input fires a change event.\nForwards the original DOM `Event`."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when the input area receives a click.\nForwards the original DOM `MouseEvent`."},{"name":"compositionend","signature":"(event: CompositionEvent): void","description":"An IME composition ended. Forwards the original DOM `CompositionEvent`."},{"name":"compositionstart","signature":"(event: CompositionEvent): void","description":"An IME composition started. Forwards the original DOM `CompositionEvent`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the native text input gains focus.\nForwards the original DOM `FocusEvent`."},{"name":"hidden","signature":"(): void","description":"Emitted once the palette has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the palette starts to close."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from the text field.\nForwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on the input.\nForwards the original DOM `KeyboardEvent`."},{"name":"keyup","signature":"(event: KeyboardEvent): void","description":"Emitted when a key is released on the input.\nForwards the original DOM `KeyboardEvent`."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is pressed over the input.\nForwards the original DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is released over the input.\nForwards the original DOM `MouseEvent`."},{"name":"paste","signature":"(event: ClipboardEvent): void","description":"Native clipboard paste. Forwards the original DOM `ClipboardEvent`."},{"name":"show","signature":"(): void","description":"Emitted as soon as the palette (the popover, or the sheet on a phone) starts to open."},{"name":"shown","signature":"(): void","description":"Emitted once the palette is open and its open transition has finished."},{"name":"update:modelValue","signature":"(value: string | null): void","description":"Emitted when the value becomes a valid hex color via typing/masking,\nwhen the field is cleared, or when the palette selects a color.\nEmits:\n- `#RRGGBB` (or `#RRGGBBAA` when `alpha` is enabled) for valid values\n- `null` when cleared"}],"slots":[{"name":"append","type":"Record<string, never>","description":"Content after the colour indicator button, at the end of the inner\ncontainer. It replaces the `suffix` wrapper, so with `append` any\n`suffix` content is dropped. No scoped props."},{"name":"append:outer","type":"Record<string, never>","description":"Content rendered after the entire input control, outside the input chrome.\nThis slot receives no scoped props."},{"name":"description","type":"BbColorInputDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"label","type":"BbColorInputLabelSlotProps","fields":["hasErrors: boolean","hasWarnings: boolean","text: string"],"description":"Replaces the default label text rendered above the color input."},{"name":"prefix","type":"Record<string, never>","description":"Inline content rendered at the start of the input field area, before the typed text.\nThis slot receives no scoped props."},{"name":"prepend","type":"Record<string, never>","description":"Content rendered before the text input, at the start of the inner container.\nThis slot receives no scoped props."},{"name":"prepend:outer","type":"Record<string, never>","description":"Content rendered before the entire input control, outside the input chrome.\nThis slot receives no scoped props."},{"name":"suffix","type":"Record<string, never>","description":"Inline content at the end of the field, after the typed text, inside the\ndefault `append` area: an `append` slot replaces it. No scoped props."}],"exposed":[],"models":[{"name":"modelValue","type":"string | null | undefined"}],"cssProps":[{"name":"--elev","value":"var(--bb-elev-sm)","selector":".bb-color-input__indicator","description":"Small-chrome resting lift, DECLARED here so it is sealed: an ancestor that sets `--elev` for its own plate must not reach in and lift this. Same tier and same name as the checkbox and radio glyphs."},{"name":"--border-color","value":"per variant","selector":"pt:box","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."}],"pt":{"parts":[{"name":"root","description":"The field's outer container: the label, the box and the lines under it."},{"name":"label","description":"The label text above the box (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line under the box. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"box","description":"The bordered box around the input — border, background and radius; the `variant` paints here."},{"name":"input","description":"The native input element inside the box."},{"name":"icon","description":"The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error / warning glyph) is never in it."},{"name":"spinner","description":"The spinner inside the box while `loading`."},{"name":"prefix","description":"The `#prefix` slot's wrapper, inside the box before the input."},{"name":"suffix","description":"The `#suffix` slot's wrapper, inside the box after the input."},{"name":"clear","description":"The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕."},{"name":"indicator","description":"The colour dot in the box that opens the palette."},{"name":"panel","description":"The palette surface — the popover's painted bubble on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet the palette opens in on a phone — no node on desktop."},{"name":"swatch","description":"One palette swatch (after the `swatches` prop) — a broadcast resolved per swatch."}],"states":[{"name":"hasValue","description":"Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`)."},{"name":"selected","description":"Per node, on `swatch` only: the swatch that matches the value."},{"name":"readonly","description":"Component-wide: the control is `readonly` — shown, focusable, not editable."},{"name":"disabled","description":"Component-wide: the control is `disabled`."},{"name":"warnings","description":"Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together."},{"name":"errors","description":"Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red."},{"name":"loading","description":"Component-wide: `loading` is on; the box shows its `spinner`."}]},"tree":{"bindings":[{"part":"controlAttrs","target":"input.bb-color-input__input"},{"part":"input","target":"input.bb-color-input__input"},{"part":"indicator","target":"button.bb-color-input__indicator"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"forwards":[{"to":"BbColorPalette","mapping":"{ panel: 'panel', sheet: 'sheet', swatch: 'swatch' }"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbColorInput","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"CommonFieldInput","kind":"internal","vocabulary":"BbColorInput","bindings":[{"part":"box","target":"span.bb-field-input__box"},{"part":"prefix","target":"span.bb-field-input__prefix"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"ClearableButton"},{"part":"spinner","target":"BbSpinner"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--bg-hover","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-field-input__box"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix","bb-field-input__prepend-icon","bb-field-input__append-icon"]},{"name":"--border-color","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--border-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-size","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-color","documented":true,"readBy":["bb-field-input__box"]},{"name":"--elev","documented":true,"readBy":["bb-field-input__box"]},{"name":"--frost","documented":true,"readBy":["bb-field-input__box"]},{"name":"--inside-label-clearance","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix"]}],"children":[{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]},{"name":"BbColorPalette","kind":"public","vocabulary":"BbColorPalette","bindings":[{"part":"swatch","target":"button.bb-color-palette__swatch"},{"part":"panel","target":"div"},{"part":"panel","target":"CommonPopover"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ panel: 'root', sheet: 'root' }"}],"cssProps":[{"name":"--edge","documented":true,"readBy":["bb-color-palette__swatch","bb-color-palette__swatch--active"]}],"children":[{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"CommonPopover","kind":"internal"}]}]},"css":{"classes":{"bb-color-input":["","__field","__indicator","__input"]},"locals":["--color-gray-200","--elev"]},"attrTargets":["div","input"],"removed":[{"name":"picker","new":"eyeDropper","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-input.md","silent":true,"fix":{"kind":"rename"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-color-input.md","silent":true,"fix":{"kind":"rename"}},{"name":"prepend-outer","new":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append-outer","new":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"picker","to":"eyeDropper","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-input.md","fix":{"kind":"rename"}},{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-color-input.md","fix":{"kind":"rename"}},{"from":"prepend-outer","to":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append-outer","to":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
487
|
-
{"name":"BbColorPalette","group":"Overlay","description":"Opens an anchored popover color palette for color picking interactions.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbColorPalette.md","source":"ai/source/BbColorPalette.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the `activator` slot is not rendered and click listeners are\nattached programmatically to the referenced element — mirroring the\nBbDropdown activator API."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"When `true`, the palette opens as a bottom off-canvas sheet on mobile\nviewports instead of a floating popover; on desktop it stays a popover.\nMirrors the adaptive behaviour of `BbPopover`/`BbDropdown`/`BbDatePicker`.\n\nWhen unset, falls back to the global `config.adaptive`."},{"name":"alpha","type":"boolean | undefined","required":false,"default":"false","description":"Enable the alpha channel. The picker shows an opacity slider and emits\n`#RRGGBBAA` hex8 values."},{"name":"anchor","type":"ElementOrComponentRef | undefined","required":false,"description":"Element or component ref the popover positions itself relative to.\nDefaults to the activator element when omitted, allowing the popover to\nbe anchored to a larger container (e.g. the full input row) while a\nsmaller element (e.g. a color dot) remains the click target."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the popover within a bounding element.\nAccepts an HTMLElement, a Vue component ref, or a CSS selector string."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disable all interaction (activator and palette)."},{"name":"disableFlip","type":"boolean | undefined","required":false,"default":"false","description":"Disables the automatic flip to the opposite side when the popover\nwould overflow (flipping is on by default)."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the palette panel at mount instead of on the first open (the\nphone sheet's too)."},{"name":"eyeDropper","type":"boolean | undefined","required":false,"default":"false","description":"Show an eyedropper button inside the palette to sample any color on screen.\nUses the native EyeDropper API — hidden automatically on unsupported browsers."},{"name":"label","type":"string | undefined","required":false,"description":"Accessible label. The activator is named by it followed by the\nactivator's own text, through `aria-labelledby`. Defaults to the locale string for \"Open color picker\" when omitted."},{"name":"modelValue","type":"string | null","required":true,"description":"v-model: the current color as a `#RRGGBB` hex string (or `#RRGGBBAA` when\n`alpha` is enabled), or `null` when empty."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the floating container will maintain from the activator."},{"name":"padding","type":"number | undefined","required":false,"default":"6","description":"Minimum empty space to keep from the edge of the page"},{"name":"placement","type":"Placement | undefined","required":false,"description":"Position of the overlay in respect to the related activator."},{"name":"pt","type":"(PtMap<BbColorPalettePtPart, \"open\"> & { 'swatch:selected'?: PtValue | undefined; }) | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:swatch","type":"PtValue | undefined","required":false},{"name":"pt:swatch:open","type":"PtValue | undefined","required":false},{"name":"pt:swatch:selected","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Prevent opening the palette while keeping the activator visible."},{"name":"swatches","type":"boolean | string[][] | undefined","required":false,"description":"Controls swatches display in the picker:\n- `true` — show the built-in Material-palette swatches\n- `string[][]` — show custom swatches (each inner array = a column of shades)\n- `false` / omitted — no swatches section"},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds"}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted once the palette has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the palette starts to close."},{"name":"show","signature":"(): void","description":"Emitted as soon as the palette (the popover, or the sheet on a phone) starts to open."},{"name":"shown","signature":"(): void","description":"Emitted once the palette is open and its open transition has finished."},{"name":"update:modelValue","signature":"(value: string): void","description":"Emitted when a color is picked. Payload is a concrete `#RRGGBB` (or `#RRGGBBAA` when alpha is enabled) — the palette always emits a color, never `null`."}],"slots":[{"name":"activator","type":"BbColorPaletteActivatorSlotProps","fields":["anchorProps: BbColorPaletteAnchorProps","disabled: boolean","open: boolean","props: BbColorPaletteActivatorProps","value: string | null"],"description":"Custom activator element.\nApply `v-bind=\"props\"` to the element you want to use as the trigger —\nthis wires up the ref callback that lets BbColorPalette track the element."}],"exposed":[],"models":[{"name":"modelValue","type":"string | null"}],"cssProps":[{"name":"--edge","value":"color-mix(in oklab, var(--bb-text) 8%, transparent)","selector":".bb-color-palette__swatch","description":"The swatch's own edge: a text-tone hairline, so a pale swatch reads on a light panel AND a deep one (green-900, indigo-900) on a dark panel — a fixed black 8% vanished there."}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The picker surface you see — the popover's painted bubble on desktop, the sheet itself on a phone — holding the canvas, the sliders and the swatches. The canvas and the sliders are not parts."},{"name":"sheet","description":"The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there."},{"name":"swatch","description":"One swatch (after the `swatches` prop) — a broadcast resolved per swatch."}],"states":[{"name":"selected","description":"Per node, on `swatch`: the swatch that matches the value."},{"name":"open","description":"Component-wide: the palette is showing."}]},"tree":{"bindings":[{"part":"swatch","target":"button.bb-color-palette__swatch"},{"part":"panel","target":"div"},{"part":"panel","target":"CommonPopover"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ panel: 'root', sheet: 'root' }"}],"nodes":[{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"CommonPopover","kind":"internal"}]},"css":{"classes":{"bb-color-palette":["","__canvas","__canvas-announcer","__canvas-thumb","__canvas-wrap","__controls","__eyedropper","__panel","__preview","__preview--alpha","__preview-wrap","__sheet","__slider-thumb","__slider-track","__slider-wrap","__slider-wrap--alpha","__sliders","__swatch","__swatch--active","__swatch-group","__swatches"]},"locals":["--bubble-border-w","--color-gray-200","--edge","--hit","--picker-preview-color","--swatch-gap"]},"removed":[{"name":"arrowPadding","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"flip","new":"disableFlip","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"invert"}},{"name":"picker","new":"eyeDropper","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"rename"}},{"name":"showArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"pt:root:selected","new":null,"surface":"pt","hint":"it never applied anything: `selected` is a state of `swatch` only (`pt:swatch:selected`)","since":"3.0.0-beta.31","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"pt:panel:selected","new":null,"surface":"pt","hint":"it never applied anything: `selected` is a state of `swatch` only (`pt:swatch:selected`)","since":"3.0.0-beta.31","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"pt:sheet:selected","new":null,"surface":"pt","hint":"it never applied anything: `selected` is a state of `swatch` only (`pt:swatch:selected`)","since":"3.0.0-beta.31","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"update:open","new":null,"surface":"event","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"flip","to":"disableFlip","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","fix":{"kind":"invert"}},{"from":"picker","to":"eyeDropper","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","fix":{"kind":"rename"}}]},
|
|
487
|
+
{"name":"BbColorPalette","group":"Overlay","description":"Opens an anchored popover color palette for color picking interactions.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbColorPalette.md","source":"ai/source/BbColorPalette.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the `activator` slot is not rendered and click listeners are\nattached programmatically to the referenced element — mirroring the\nBbDropdown activator API."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"When `true`, the palette opens as a bottom off-canvas sheet on mobile\nviewports instead of a floating popover; on desktop it stays a popover.\nMirrors the adaptive behaviour of `BbPopover`/`BbDropdown`/`BbDatePicker`.\n\nWhen unset, falls back to the global `config.adaptive`."},{"name":"alpha","type":"boolean | undefined","required":false,"default":"false","description":"Enable the alpha channel. The picker shows an opacity slider and emits\n`#RRGGBBAA` hex8 values."},{"name":"anchor","type":"ElementOrComponentRef | undefined","required":false,"description":"Element or component ref the popover positions itself relative to.\nDefaults to the activator element when omitted, allowing the popover to\nbe anchored to a larger container (e.g. the full input row) while a\nsmaller element (e.g. a color dot) remains the click target."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the popover within a bounding element: it stays inside it\nalongside its trigger (sideways for a popover above or below); away from\nthe trigger it may pass the edge, and it flips at the viewport only.\nAccepts an HTMLElement, a Vue component ref, or a CSS selector string."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disable all interaction (activator and palette)."},{"name":"disableFlip","type":"boolean | undefined","required":false,"default":"false","description":"Disables the automatic flip to the opposite side when the popover\nwould overflow (flipping is on by default)."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the palette panel at mount instead of on the first open (the\nphone sheet's too)."},{"name":"eyeDropper","type":"boolean | undefined","required":false,"default":"false","description":"Show an eyedropper button inside the palette to sample any color on screen.\nUses the native EyeDropper API — hidden automatically on unsupported browsers."},{"name":"label","type":"string | undefined","required":false,"description":"Accessible label. The activator is named by it followed by the\nactivator's own text, through `aria-labelledby`. Defaults to the locale string for \"Open color picker\" when omitted."},{"name":"modelValue","type":"string | null","required":true,"description":"v-model: the current color as a `#RRGGBB` hex string (or `#RRGGBBAA` when\n`alpha` is enabled), or `null` when empty."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the floating container will maintain from the activator."},{"name":"padding","type":"number | undefined","required":false,"default":"6","description":"Minimum empty space to keep from the edge of the page"},{"name":"placement","type":"Placement | undefined","required":false,"description":"Position of the overlay in respect to the related activator."},{"name":"pt","type":"(PtMap<BbColorPalettePtPart, \"open\"> & { 'swatch:selected'?: PtValue | undefined; }) | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:swatch","type":"PtValue | undefined","required":false},{"name":"pt:swatch:open","type":"PtValue | undefined","required":false},{"name":"pt:swatch:selected","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Prevent opening the palette while keeping the activator visible."},{"name":"swatches","type":"boolean | string[][] | undefined","required":false,"description":"Controls swatches display in the picker:\n- `true` — show the built-in Material-palette swatches\n- `string[][]` — show custom swatches (each inner array = a column of shades)\n- `false` / omitted — no swatches section"},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds"}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted once the palette has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the palette starts to close."},{"name":"show","signature":"(): void","description":"Emitted as soon as the palette (the popover, or the sheet on a phone) starts to open."},{"name":"shown","signature":"(): void","description":"Emitted once the palette is open and its open transition has finished."},{"name":"update:modelValue","signature":"(value: string): void","description":"Emitted when a color is picked. Payload is a concrete `#RRGGBB` (or `#RRGGBBAA` when alpha is enabled) — the palette always emits a color, never `null`."}],"slots":[{"name":"activator","type":"BbColorPaletteActivatorSlotProps","fields":["anchorProps: BbColorPaletteAnchorProps","disabled: boolean","open: boolean","props: BbColorPaletteActivatorProps","value: string | null"],"description":"Custom activator element.\nApply `v-bind=\"props\"` to the element you want to use as the trigger —\nthis wires up the ref callback that lets BbColorPalette track the element."}],"exposed":[],"models":[{"name":"modelValue","type":"string | null"}],"cssProps":[{"name":"--edge","value":"color-mix(in oklab, var(--bb-text) 8%, transparent)","selector":".bb-color-palette__swatch","description":"The swatch's own edge: a text-tone hairline, so a pale swatch reads on a light panel AND a deep one (green-900, indigo-900) on a dark panel — a fixed black 8% vanished there."}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The picker surface you see — the popover's painted bubble on desktop, the sheet itself on a phone — holding the canvas, the sliders and the swatches. The canvas and the sliders are not parts."},{"name":"sheet","description":"The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there."},{"name":"swatch","description":"One swatch (after the `swatches` prop) — a broadcast resolved per swatch."}],"states":[{"name":"selected","description":"Per node, on `swatch`: the swatch that matches the value."},{"name":"open","description":"Component-wide: the palette is showing."}]},"tree":{"bindings":[{"part":"swatch","target":"button.bb-color-palette__swatch"},{"part":"panel","target":"div"},{"part":"panel","target":"CommonPopover"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ panel: 'root', sheet: 'root' }"}],"nodes":[{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"CommonPopover","kind":"internal"}]},"css":{"classes":{"bb-color-palette":["","__canvas","__canvas-announcer","__canvas-thumb","__canvas-wrap","__controls","__eyedropper","__panel","__preview","__preview--alpha","__preview-wrap","__sheet","__slider-thumb","__slider-track","__slider-wrap","__slider-wrap--alpha","__sliders","__swatch","__swatch--active","__swatch-group","__swatches"]},"locals":["--bubble-border-w","--color-gray-200","--edge","--hit","--picker-preview-color","--swatch-gap"]},"removed":[{"name":"arrowPadding","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"flip","new":"disableFlip","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"invert"}},{"name":"picker","new":"eyeDropper","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"rename"}},{"name":"showArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"pt:root:selected","new":null,"surface":"pt","hint":"it never applied anything: `selected` is a state of `swatch` only (`pt:swatch:selected`)","since":"3.0.0-beta.31","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"pt:panel:selected","new":null,"surface":"pt","hint":"it never applied anything: `selected` is a state of `swatch` only (`pt:swatch:selected`)","since":"3.0.0-beta.31","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"pt:sheet:selected","new":null,"surface":"pt","hint":"it never applied anything: `selected` is a state of `swatch` only (`pt:swatch:selected`)","since":"3.0.0-beta.31","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"remove"}},{"name":"update:open","new":null,"surface":"event","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"flip","to":"disableFlip","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","fix":{"kind":"invert"}},{"from":"picker","to":"eyeDropper","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-color-palette.md","fix":{"kind":"rename"}}]},
|
|
488
488
|
{"name":"BbConfirm","group":"Overlay","description":"Prompts users to confirm or cancel critical actions (includes co-located BbConfirmPortal export).","referenceOnly":false,"hasGuide":true,"contract":"ai/BbConfirm.md","source":"ai/source/BbConfirm.md","props":[{"name":"pt","type":"PtMap<BbConfirmPtPart, \"open\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:action","type":"PtValue | undefined","required":false},{"name":"pt:action:open","type":"PtValue | undefined","required":false},{"name":"pt:close","type":"PtValue | undefined","required":false},{"name":"pt:close:open","type":"PtValue | undefined","required":false},{"name":"pt:content","type":"PtValue | undefined","required":false},{"name":"pt:content:open","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:text","type":"PtValue | undefined","required":false},{"name":"pt:text:open","type":"PtValue | undefined","required":false},{"name":"pt:title","type":"PtValue | undefined","required":false},{"name":"pt:title:open","type":"PtValue | undefined","required":false},{"name":"size","type":"keyof Sizes | undefined","required":false,"values":["xs","sm","md","lg","xl","2xl"],"description":"Default maximum width for every confirm this host renders, as one of the\ndialog presets (`'xs'` – `'2xl'`). A per-call `size` in the message wins.\nWhen neither is set the dialog falls back to the `BbDialog` default."}],"events":[],"slots":[],"exposed":[],"models":[],"pt":{"parts":[{"name":"root","description":"The `<dialog>` of every confirm the app opens (forwarded to the `BbDialog` the host renders)."},{"name":"sheet","description":"The bottom sheet a confirm becomes on a phone — never the desktop dialog."},{"name":"header","description":"The header band."},{"name":"title","description":"The confirm's title."},{"name":"content","description":"The dialog body."},{"name":"text","description":"The confirm's plain-text body — not a portal's content."},{"name":"footer","description":"The action buttons' band."},{"name":"close","description":"The ✕."},{"name":"action","description":"Every footer button — yes, no and each custom `actions` entry — at the button's root. A broadcast."}],"states":[{"name":"open","description":"Component-wide: a confirm is showing."}]},"tree":{"bindings":[{"part":"text","target":"div.bb-confirm__text"},{"part":"action","target":"BbButton"}],"forwards":[{"to":"BbDialog","mapping":"passthrough.forward(DIALOG_PARTS, BB_DIALOG_PT.states)"}],"nodes":[{"name":"BbDialog","kind":"public","vocabulary":"BbDialog","bindings":[{"part":"header","target":"div.bb-dialog__header"},{"part":"title","target":"span.bb-dialog__title"},{"part":"description","target":"p.bb-dialog__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-dialog__content"},{"part":"footer","target":"div.bb-dialog__footer"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ root: 'root', header: 'header', title: 'title', description: 'description', content: 'content', footer: 'footer', close: 'close', sheet: 'root', }"}],"cssProps":[{"name":"--px","documented":true,"readBy":["bb-dialog__header","bb-close-button","bb-dialog__content","bb-dialog__footer"]},{"name":"--py","documented":false,"readBy":["bb-dialog__header","bb-close-button","bb-dialog__content","bb-dialog__footer"]},{"name":"--page-padding","documented":false,"readBy":["bb-dialog","bb-dialog--fullscreen"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-dialog","bb-dialog--fullscreen"]},{"name":"--bg","documented":false,"readBy":["bb-dialog"]},{"name":"--fg","documented":false,"readBy":["bb-dialog"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","repeated":true,"cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]}]},{"name":"BbButton","kind":"public","vocabulary":"BbButton","bindings":[{"part":"root","target":"BbBaseButton"},{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"text","target":"span.bb-button__text"}],"cssProps":[{"name":"--h-xs","documented":true,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--icon-size-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--px-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--fs-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--r-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--gap-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--h-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--icon-size-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--px-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--fs-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--r-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--gap-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--h-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--icon-size-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--px-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--fs-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--r-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--gap-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--h-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--icon-size-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--px-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--fs-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--r-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--gap-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--h-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--icon-size-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--px-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--fs-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--r-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--gap-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--h-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--icon-size-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--px-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--fs-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--r-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--gap-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--h","documented":true,"readBy":["bb-button","bb-button--icon"]},{"name":"--icon-size","documented":true,"readBy":["bb-button__text","bb-spinner","bb-button__icon","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--px","documented":true,"readBy":["bb-button","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--fs","documented":true,"readBy":["bb-button"]},{"name":"--r","documented":true,"readBy":["bb-button"]},{"name":"--gap","documented":true,"readBy":["bb-button","bb-button__text","bb-spinner"]},{"name":"--bg","documented":true,"readBy":["bb-button"]},{"name":"--bg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg","documented":true,"readBy":["bb-button"]},{"name":"--border-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-size","documented":true,"readBy":["bb-button"]},{"name":"--bw","documented":true,"readBy":["bb-button"]},{"name":"--fg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--opacity-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--elev-tier","documented":true,"readBy":["bb-button--primary","bb-button--secondary","bb-button--outline","bb-button--destructive"]},{"name":"--elev","documented":true,"readBy":["bb-button"]}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]}]},"css":{"classes":{"bb-confirm":["","--*","__action","__content","__text"]},"locals":["--color-gray-200"]}},
|
|
489
489
|
{"name":"BbConfirmPortal","group":"Overlay","description":"Registers named slot content that confirm() renders via `portal`.","referenceOnly":false,"hasGuide":false,"contract":"ai/BbConfirmPortal.md","source":"ai/source/BbConfirmPortal.md","props":[{"name":"name","type":"string","required":true,"description":"The name a confirm passes as `portal: '<name>'` to render this content."}],"events":[],"slots":[{"name":"default","type":"BbConfirmPortalSlotProps","fields":["props: P","yes: () => void","no: () => void"]}],"exposed":[],"models":[]},
|
|
490
|
-
{"name":"BbDatePicker","group":"Overlay","description":"Opens an anchored calendar (and optional time rail) popover on a trigger you own — the date analog of BbColorPalette; also the v-bb-date directive.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbDatePicker.md","source":"ai/source/BbDatePicker.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref. When provided, the `activator`\nslot is not rendered and click + ARIA are attached programmatically to the\nreferenced element — mirroring the `BbColorPalette` activator API."},{"name":"activeSegment","type":"BbCalendarSegment | undefined","required":false,"values":["start","end"],"description":"Which end the time rail edits in range + `type=\"datetime\"`\n(`v-model:active-segment`). Standalone use manages this internally; an\nembedding host (the date input) drives it from its focused field. Ignored\noutside range + datetime."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile, open in a bottom off-canvas sheet instead of a floating popover.\nWhen unset, falls back to the global `config.adaptive`."},{"name":"ampm","type":"boolean | undefined","required":false,"default":"false","description":"12-hour display with an AM/PM column (requires `type=\"datetime\"`); emits stay 24h."},{"name":"anchor","type":"ElementOrComponentRef | undefined","required":false,"description":"Element or component ref the popover positions itself relative to.\nDefaults to the activator when omitted (anchor to a larger row while a\nsmaller element stays the click target)."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the popover within a bounding element or CSS selector."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the activator and the calendar."},{"name":"disableFlip","type":"boolean | undefined","required":false,"default":"false","description":"Disable the automatic flip to the opposite side on overflow."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Render popover content before it is first shown."},{"name":"firstDayOfWeek","type":"0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined","required":false,"default":"the locale's week start","description":"First day of the week (0 = Sunday … 6 = Saturday). Omitted, the active\nlocale's week start: Monday for `it`, `de`, `fr`, `en-gb`…, Sunday for\nbare `en` (US) and `pt` (Brazil)."},{"name":"floating","type":"boolean | undefined","required":false,"default":"false","description":"Emit plain calendar strings instead of zoned ISO instants. Implied (and\nforced) by `type=\"month\"` and `type=\"year\"`."},{"name":"label","type":"string | undefined","required":false,"description":"Accessible label. The activator is named by it followed by the\nactivator's own text (\"Due date 12 Sep\"), through `aria-labelledby`."},{"name":"max","type":"string | undefined","required":false,"description":"Maximum selectable value, in this `type`'s shape. A finer bound is\naccepted and ceiled to the unit, with a warning."},{"name":"min","type":"string | undefined","required":false,"description":"Minimum selectable value, in this `type`'s shape — `YYYY-MM-DD`\n(`YYYY-MM-DDTHH:mm` with `datetime`, `YYYY-MM` with `month`, `YYYY` with\n`year`). A finer bound is accepted and floored to the unit, with a warning."},{"name":"modelValue","type":"string | string[] | null","required":true,"description":"v-model: `null` when empty, a string, a `[start, end]` pair with `range`,\nor a sorted array with `multiple`. The string is `YYYY-MM-DD` when\n`floating` (`YYYY-MM` / `YYYY` for `month` / `year`), otherwise a zoned\nISO instant (carrying the time under `datetime`)."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"false","description":"Multi-selection: each pick toggles a value in a sorted array (days,\nmonths or years), and the panel stays open until dismissed. Needs an\narray `modelValue` (`[]` when empty, never `null`). Throws with `range`\nor `type=\"datetime\"`."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the popover keeps from the activator."},{"name":"padding","type":"number | undefined","required":false,"description":"Minimum empty space to keep from the edge of the page."},{"name":"placement","type":"Placement | undefined","required":false,"values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end"],"description":"Position of the popover relative to the activator/anchor."},{"name":"pt","type":"PtMap<BbDatePickerPtPart, BbDatePickerPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:arrow","type":"PtValue | undefined","required":false},{"name":"pt:arrow:active","type":"PtValue | undefined","required":false},{"name":"pt:arrow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:arrow:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:arrow:inRange","type":"PtValue | undefined","required":false},{"name":"pt:arrow:open","type":"PtValue | undefined","required":false},{"name":"pt:arrow:outside","type":"PtValue | undefined","required":false},{"name":"pt:arrow:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:arrow:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:arrow:selected","type":"PtValue | undefined","required":false},{"name":"pt:arrow:today","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:active","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:inRange","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:open","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:outside","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:selected","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:today","type":"PtValue | undefined","required":false},{"name":"pt:day","type":"PtValue | undefined","required":false},{"name":"pt:day:active","type":"PtValue | undefined","required":false},{"name":"pt:day:disabled","type":"PtValue | undefined","required":false},{"name":"pt:day:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:day:inRange","type":"PtValue | undefined","required":false},{"name":"pt:day:open","type":"PtValue | undefined","required":false},{"name":"pt:day:outside","type":"PtValue | undefined","required":false},{"name":"pt:day:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:day:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:day:selected","type":"PtValue | undefined","required":false},{"name":"pt:day:today","type":"PtValue | undefined","required":false},{"name":"pt:dayButton","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:active","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:disabled","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:inRange","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:open","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:outside","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:selected","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:today","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:active","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:header:inRange","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:outside","type":"PtValue | undefined","required":false},{"name":"pt:header:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:header:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:header:today","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | undefined","required":false},{"name":"pt:item:active","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:item:inRange","type":"PtValue | undefined","required":false},{"name":"pt:item:open","type":"PtValue | undefined","required":false},{"name":"pt:item:outside","type":"PtValue | undefined","required":false},{"name":"pt:item:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:item:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:item:today","type":"PtValue | undefined","required":false},{"name":"pt:month","type":"PtValue | undefined","required":false},{"name":"pt:month:active","type":"PtValue | undefined","required":false},{"name":"pt:month:disabled","type":"PtValue | undefined","required":false},{"name":"pt:month:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:month:inRange","type":"PtValue | undefined","required":false},{"name":"pt:month:open","type":"PtValue | undefined","required":false},{"name":"pt:month:outside","type":"PtValue | undefined","required":false},{"name":"pt:month:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:month:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:month:selected","type":"PtValue | undefined","required":false},{"name":"pt:month:today","type":"PtValue | undefined","required":false},{"name":"pt:monthItem","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:active","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:disabled","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:inRange","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:open","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:outside","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:selected","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:today","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:active","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:panel:inRange","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:outside","type":"PtValue | undefined","required":false},{"name":"pt:panel:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:panel:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel:today","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:active","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:root:inRange","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:outside","type":"PtValue | undefined","required":false},{"name":"pt:root:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:root:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:root:today","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:active","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:sheet:inRange","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:outside","type":"PtValue | undefined","required":false},{"name":"pt:sheet:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:sheet:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet:today","type":"PtValue | undefined","required":false},{"name":"pt:year","type":"PtValue | undefined","required":false},{"name":"pt:year:active","type":"PtValue | undefined","required":false},{"name":"pt:year:disabled","type":"PtValue | undefined","required":false},{"name":"pt:year:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:year:inRange","type":"PtValue | undefined","required":false},{"name":"pt:year:open","type":"PtValue | undefined","required":false},{"name":"pt:year:outside","type":"PtValue | undefined","required":false},{"name":"pt:year:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:year:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:year:selected","type":"PtValue | undefined","required":false},{"name":"pt:year:today","type":"PtValue | undefined","required":false},{"name":"pt:yearItem","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:active","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:disabled","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:inRange","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:open","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:outside","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:selected","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:today","type":"PtValue | undefined","required":false},{"name":"range","type":"boolean | undefined","required":false,"default":"false","description":"Enables range selection (`[start, end]`)."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Prevents opening while keeping the activator visible."},{"name":"seconds","type":"boolean | undefined","required":false,"default":"false","description":"Adds the seconds column (requires `type=\"datetime\"`)."},{"name":"selectable","type":"((date: string) => boolean) | undefined","required":false,"description":"Predicate invoked per candidate; return `false` to disable it. Receives\nthe value in this `type`'s shape — `YYYY-MM` under `month`, `YYYY` under\n`year`."},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"Minute-column granularity and arrow stepping (requires `type=\"datetime\"`)."},{"name":"time","type":"string | string[] | null | undefined","required":false,"description":"Companion time model (`v-model:time`), 24-hour `HH:mm` / `HH:mm:ss`.\nWith `floating` it is the only carrier of the time; otherwise it mirrors\nthe time inside `modelValue`. Requires `type=\"datetime\"`."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Popover/sheet transition duration in milliseconds."},{"name":"type","type":"DatePickerType | undefined","required":false,"default":"\"date\"","values":["date","month","year","datetime"],"description":"What the picker selects and emits: `date` (a day), `datetime` (a day plus\na time rail), `month` (`YYYY-MM`) or `year` (`YYYY`). `month` / `year`\nforce `floating`, ignore `utc`, and leave the time props inert."},{"name":"utc","type":"boolean | undefined","required":false,"default":"false","description":"Emit UTC (`...Z`) instead of the local offset. Ignored with `floating`,\nand therefore with `type=\"month\"`/`type=\"year\"`."}],"events":[{"name":"grid-pick","signature":"(value: string | string[] | null): void","description":"Relay of the raw calendar-grid pick, before the calendar combines it with\nthe time. An embedding host binds this to run its own value engine; clean\nconsumers ignore it and use `update:modelValue`."},{"name":"hidden","signature":"(): void","description":"Emitted once the calendar surface has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the calendar surface starts to close."},{"name":"show","signature":"(): void","description":"Emitted as soon as the calendar surface starts to open (the popover, or the sheet on a phone)."},{"name":"shown","signature":"(): void","description":"Emitted once the calendar surface is open and its open transition has finished."},{"name":"time-pick","signature":"(payload: { unit: TimeUnit; value: string; }): void","description":"Relay of the raw time-rail pick. An embedding host binds this to run its own\nvalue engine; clean consumers ignore it and use `update:time`."},{"name":"update:activeSegment","signature":"(value: BbCalendarSegment): void","description":"The active range end changed (range + `type=\"datetime\"` only)."},{"name":"update:modelValue","signature":"(value: string | string[] | null): void","description":"Emitted when the selected date value changes (single/range/null)."},{"name":"update:time","signature":"(value: string | string[] | null): void","description":"Companion time model, alongside every change while `type=\"datetime\"`."}],"slots":[{"name":"activator","type":"BbDatePickerActivatorSlotProps","fields":["props: { ref: (el: unknown) => void; 'aria-haspopup': \"dialog\"; 'aria-expanded': \"true\" | \"false\"; 'aria-labelledby': string; }","anchorProps: { ref: (el: unknown) => void; }","open: boolean","value: string | string[] | null","disabled: boolean"],"description":"Custom activator element. Apply `v-bind=\"props\"` to your trigger."},{"name":"day","type":"BbCalendarDaySlotProps","fields":["first: boolean","item: any","label: string","last: boolean","middle: boolean","outside: boolean","selected: boolean"],"description":"Replaces the day button label inside each calendar day."},{"name":"day:append","type":"BbCalendarDaySlotProps","fields":["first: boolean","item: any","label: string","last: boolean","middle: boolean","outside: boolean","selected: boolean"],"description":"Appends content below each calendar day."},{"name":"<YYYY-MM-DD>","type":"BbCalendarDaySlotProps","description":"One date's button label (e.g. `#2024-03-15`: the local `YYYY-MM-DD`, which `slotKey` leaves as it is); beats `day`. Day grid only.","dynamic":true},{"name":"<YYYY-MM-DD>:append","type":"BbCalendarDaySlotProps","description":"Content under one date's cell; beats `day:append`.","dynamic":true}],"exposed":[],"models":[{"name":"activeSegment","type":"BbCalendarSegment | undefined"},{"name":"modelValue","type":"string | string[] | null"},{"name":"time","type":"string | string[] | null | undefined"}],"cssProps":[{"name":"--cell","value":"28px","selector":".bb-date-picker__panel","description":"Cell size drives all grid math: 224px ÷ 7 = 32px exactly"},{"name":"--px","value":"6px","selector":".bb-date-picker__panel"},{"name":"--py","value":"8px","selector":".bb-date-picker__panel"},{"name":"--nav-button-h","value":"24px","selector":".bb-date-picker__panel"},{"name":"--unit-row","value":"calc(var(--cell) * 1.25)","selector":".bb-date-picker__panel","description":"Row pitch for the coarse grids (month/year), where a \"row\" is one of four month rows rather than a week. Roomier than --cell because twelve months in a 4×3 grid have space the 6×7 day grid does not."},{"name":"--sheet-cell","value":"40px","selector":".bb-date-picker__sheet"},{"name":"--cell","value":"var(--sheet-cell)","selector":".bb-date-picker__sheet"},{"name":"--px","value":"6px","selector":".bb-date-picker__sheet"},{"name":"--py","value":"8px","selector":".bb-date-picker__sheet"},{"name":"--nav-button-h","value":"40px","selector":".bb-date-picker__sheet"},{"name":"--unit-row","value":"calc(var(--cell) * 1.25)","selector":".bb-date-picker__sheet"},{"name":"--sheet-cell","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--cell","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--px","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--py","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--nav-button-h","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--unit-row","value":"inherit","selector":".bb-date-picker__panel--sheet"}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"header","description":"The navigation bar: the previous / next arrows and the month / year headings."},{"name":"arrow","description":"The previous / next buttons — a broadcast."},{"name":"month","description":"The month heading button; it opens the month panel."},{"name":"year","description":"The year heading button; it opens the year panel."},{"name":"cellColumnHeader","description":"Each weekday letter above the grid — a broadcast."},{"name":"day","description":"One whole day cell — a broadcast resolved per day. A background here paints the full cell square; restyle the round mark on `dayButton`."},{"name":"dayButton","description":"The button inside a day cell — the mark that shows selection. A broadcast resolved per day."},{"name":"monthItem","description":"One month button of the month panel (the home grid of `type=\"month\"`) — a broadcast resolved per month."},{"name":"yearItem","description":"One year button of the year list — a broadcast resolved per year."},{"name":"item","description":"One entry of the time rail's columns (hour, minute, second, AM / PM) with `type=\"datetime\"` — a broadcast resolved per entry, as on `BbTimePicker`. With the rail, `header` also lands on its readout and `cellColumnHeader` on its column letters (`HH`, `MM`)."},{"name":"panel","description":"The calendar surface you see — the popover's painted bubble on desktop, the sheet itself on a phone. It carries the sizing tokens: `pt:panel=\"[--cell:36px]\"` widens the calendar, `[--px:2px]` tightens."},{"name":"sheet","description":"The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there."}],"states":[{"name":"outside","description":"Per node, on `day` / `dayButton`: a day of the previous or next month, shown to fill the grid."},{"name":"today","description":"Per node, on `day` / `dayButton`: today."},{"name":"inRange","description":"Per node, on the cells (`day`, `dayButton`, `monthItem`, `yearItem`): inside a committed range, between its ends."},{"name":"selected","description":"Per node, on the cells: a chosen day, month or year; on `item`, the picked time's entry in each column."},{"name":"rangeStart","description":"Per node, on the cells: a committed range's first day, month or year."},{"name":"rangeEnd","description":"Per node, on the cells: a committed range's last day, month or year."},{"name":"disabled","description":"Component-wide while the picker is `disabled`. Also per node: on the cells, one outside `min` / `max` or refused by `selectable`; on `arrow`, at a bound or while the month / year panel is open."},{"name":"active","description":"Per node, on `month` / `year`: its panel is open."},{"name":"open","description":"Component-wide: the calendar is showing."},{"name":"highlighted","description":"Per node, on the cells: the keyboard cursor."}]},"tree":{"bindings":[{"part":"panel","target":"div"},{"part":"panel","target":"CommonPopover"}],"forwards":[{"to":"BbCalendar","mapping":" passthrough.forward(DATE_PICKER_CALENDAR_PARTS, BB_CALENDAR_PT.states) "},{"to":"BbOffCanvas","mapping":"{ panel: 'root', sheet: 'root' }"}],"nodes":[{"name":"BbCalendar","kind":"public","vocabulary":"BbCalendar","bindings":[{"part":"header","target":"div.bb-calendar__header"},{"part":"arrow","target":"BbBaseButton"},{"part":"month","target":"BbBaseButton"},{"part":"year","target":"BbBaseButton"},{"part":"day","target":"div.bb-calendar__day"},{"part":"dayButton","target":"button.bb-calendar__day-button"}],"cssProps":[{"name":"--bg","documented":false,"readBy":["bb-calendar__button-menu"]},{"name":"--cell","documented":true,"readBy":["bb-calendar","bb-calendar__grid","bb-calendar__day","bb-calendar__day-button","bb-calendar__menu-btn","bb-time-selector"]},{"name":"--px","documented":false,"readBy":["bb-calendar","bb-calendar__grid","bb-calendar__body","bb-time-selector"]},{"name":"--py","documented":false,"readBy":["bb-calendar__body"]},{"name":"--nav-button-h","documented":false,"readBy":["bb-calendar__arrow"]},{"name":"--unit-row","documented":true,"readBy":["bb-calendar__content","bb-calendar__menu-grid","bb-calendar__menu-btn"]}],"children":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]},{"name":"CommonTimeSelector","kind":"internal","vocabulary":"BbCalendar","bindings":[{"part":"header","target":"div.bb-time-selector__header"},{"part":"cellColumnHeader","target":"div.bb-time-selector__cell-column-header"},{"part":"item","target":"BbBaseButton"}],"cssProps":[{"name":"--time-row-h","documented":false,"readBy":["bb-time-selector__item","bb-time-selector__scroll"]},{"name":"--time-col-w","documented":false,"readBy":["bb-time-selector__column"]},{"name":"--time-mark","documented":true,"readBy":["bb-time-selector__item"]}],"children":[{"name":"BbBaseButton","kind":"public","repeated":true}]},{"name":"ScaleFade","kind":"internal"},{"name":"Slide","kind":"internal"},{"name":"CalendarMonthPanel","kind":"internal","children":[{"name":"BbBaseButton","kind":"public","repeated":true}]},{"name":"CalendarYearPanel","kind":"internal","children":[{"name":"BbBaseButton","kind":"public","repeated":true}]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"CommonPopover","kind":"internal"}]},"css":{"classes":{"bb-date-picker":["","__panel","__panel--datetime","__panel--sheet","__sheet"]},"locals":["--cell","--color-gray-200","--sheet-cell","--time-mark"]},"removed":[{"name":"datetime","new":"type","since":"3.0.0-alpha.5","migration":"ai/guides/migration/components/bb-date-picker-input.md","silent":true,"fix":{"kind":"manual"}},{"name":"pt:columnHeader","new":"pt:cellColumnHeader","surface":"pt","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","silent":true,"fix":{"kind":"rename"}},{"name":"append:day","new":"day:append","surface":"slot","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append:<x>","new":"<x>:append","surface":"slot","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"datetime","to":"type","since":"3.0.0-alpha.5","migration":"ai/guides/migration/components/bb-date-picker-input.md","fix":{"kind":"manual"}},{"from":"pt:columnHeader","to":"pt:cellColumnHeader","surface":"pt","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","fix":{"kind":"rename"}},{"from":"append:day","to":"day:append","surface":"slot","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append:<x>","to":"<x>:append","surface":"slot","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}}]},
|
|
490
|
+
{"name":"BbDatePicker","group":"Overlay","description":"Opens an anchored calendar (and optional time rail) popover on a trigger you own — the date analog of BbColorPalette; also the v-bb-date directive.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbDatePicker.md","source":"ai/source/BbDatePicker.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref. When provided, the `activator`\nslot is not rendered and click + ARIA are attached programmatically to the\nreferenced element — mirroring the `BbColorPalette` activator API."},{"name":"activeSegment","type":"BbCalendarSegment | undefined","required":false,"values":["start","end"],"description":"Which end the time rail edits in range + `type=\"datetime\"`\n(`v-model:active-segment`). Standalone use manages this internally; an\nembedding host (the date input) drives it from its focused field. Ignored\noutside range + datetime."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile, open in a bottom off-canvas sheet instead of a floating popover.\nWhen unset, falls back to the global `config.adaptive`."},{"name":"ampm","type":"boolean | undefined","required":false,"default":"false","description":"12-hour display with an AM/PM column (requires `type=\"datetime\"`); emits stay 24h."},{"name":"anchor","type":"ElementOrComponentRef | undefined","required":false,"description":"Element or component ref the popover positions itself relative to.\nDefaults to the activator when omitted (anchor to a larger row while a\nsmaller element stays the click target)."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the popover within a bounding element or CSS selector:\nsideways only, alongside the trigger; it flips at the viewport."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the activator and the calendar."},{"name":"disableFlip","type":"boolean | undefined","required":false,"default":"false","description":"Disable the automatic flip to the opposite side on overflow."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Render popover content before it is first shown."},{"name":"firstDayOfWeek","type":"0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined","required":false,"default":"the locale's week start","description":"First day of the week (0 = Sunday … 6 = Saturday). Omitted, the active\nlocale's week start: Monday for `it`, `de`, `fr`, `en-gb`…, Sunday for\nbare `en` (US) and `pt` (Brazil)."},{"name":"floating","type":"boolean | undefined","required":false,"default":"false","description":"Emit plain calendar strings instead of zoned ISO instants. Implied (and\nforced) by `type=\"month\"` and `type=\"year\"`."},{"name":"label","type":"string | undefined","required":false,"description":"Accessible label. The activator is named by it followed by the\nactivator's own text (\"Due date 12 Sep\"), through `aria-labelledby`."},{"name":"max","type":"string | undefined","required":false,"description":"Maximum selectable value, in this `type`'s shape. A finer bound is\naccepted and ceiled to the unit, with a warning."},{"name":"min","type":"string | undefined","required":false,"description":"Minimum selectable value, in this `type`'s shape — `YYYY-MM-DD`\n(`YYYY-MM-DDTHH:mm` with `datetime`, `YYYY-MM` with `month`, `YYYY` with\n`year`). A finer bound is accepted and floored to the unit, with a warning."},{"name":"modelValue","type":"string | string[] | null","required":true,"description":"v-model: `null` when empty, a string, a `[start, end]` pair with `range`,\nor a sorted array with `multiple`. The string is `YYYY-MM-DD` when\n`floating` (`YYYY-MM` / `YYYY` for `month` / `year`), otherwise a zoned\nISO instant (carrying the time under `datetime`)."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"false","description":"Multi-selection: each pick toggles a value in a sorted array (days,\nmonths or years), and the panel stays open until dismissed. Needs an\narray `modelValue` (`[]` when empty, never `null`). Throws with `range`\nor `type=\"datetime\"`."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the popover keeps from the activator."},{"name":"padding","type":"number | undefined","required":false,"description":"Minimum empty space to keep from the edge of the page."},{"name":"placement","type":"Placement | undefined","required":false,"values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end"],"description":"Position of the popover relative to the activator/anchor."},{"name":"pt","type":"PtMap<BbDatePickerPtPart, BbDatePickerPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:arrow","type":"PtValue | undefined","required":false},{"name":"pt:arrow:active","type":"PtValue | undefined","required":false},{"name":"pt:arrow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:arrow:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:arrow:inRange","type":"PtValue | undefined","required":false},{"name":"pt:arrow:open","type":"PtValue | undefined","required":false},{"name":"pt:arrow:outside","type":"PtValue | undefined","required":false},{"name":"pt:arrow:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:arrow:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:arrow:selected","type":"PtValue | undefined","required":false},{"name":"pt:arrow:today","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:active","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:inRange","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:open","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:outside","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:selected","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:today","type":"PtValue | undefined","required":false},{"name":"pt:day","type":"PtValue | undefined","required":false},{"name":"pt:day:active","type":"PtValue | undefined","required":false},{"name":"pt:day:disabled","type":"PtValue | undefined","required":false},{"name":"pt:day:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:day:inRange","type":"PtValue | undefined","required":false},{"name":"pt:day:open","type":"PtValue | undefined","required":false},{"name":"pt:day:outside","type":"PtValue | undefined","required":false},{"name":"pt:day:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:day:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:day:selected","type":"PtValue | undefined","required":false},{"name":"pt:day:today","type":"PtValue | undefined","required":false},{"name":"pt:dayButton","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:active","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:disabled","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:inRange","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:open","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:outside","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:selected","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:today","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:active","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:header:inRange","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:outside","type":"PtValue | undefined","required":false},{"name":"pt:header:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:header:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:header:today","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | undefined","required":false},{"name":"pt:item:active","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:item:inRange","type":"PtValue | undefined","required":false},{"name":"pt:item:open","type":"PtValue | undefined","required":false},{"name":"pt:item:outside","type":"PtValue | undefined","required":false},{"name":"pt:item:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:item:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:item:today","type":"PtValue | undefined","required":false},{"name":"pt:month","type":"PtValue | undefined","required":false},{"name":"pt:month:active","type":"PtValue | undefined","required":false},{"name":"pt:month:disabled","type":"PtValue | undefined","required":false},{"name":"pt:month:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:month:inRange","type":"PtValue | undefined","required":false},{"name":"pt:month:open","type":"PtValue | undefined","required":false},{"name":"pt:month:outside","type":"PtValue | undefined","required":false},{"name":"pt:month:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:month:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:month:selected","type":"PtValue | undefined","required":false},{"name":"pt:month:today","type":"PtValue | undefined","required":false},{"name":"pt:monthItem","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:active","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:disabled","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:inRange","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:open","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:outside","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:selected","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:today","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:active","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:panel:inRange","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:outside","type":"PtValue | undefined","required":false},{"name":"pt:panel:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:panel:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel:today","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:active","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:root:inRange","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:outside","type":"PtValue | undefined","required":false},{"name":"pt:root:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:root:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:root:today","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:active","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:sheet:inRange","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:outside","type":"PtValue | undefined","required":false},{"name":"pt:sheet:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:sheet:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet:today","type":"PtValue | undefined","required":false},{"name":"pt:year","type":"PtValue | undefined","required":false},{"name":"pt:year:active","type":"PtValue | undefined","required":false},{"name":"pt:year:disabled","type":"PtValue | undefined","required":false},{"name":"pt:year:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:year:inRange","type":"PtValue | undefined","required":false},{"name":"pt:year:open","type":"PtValue | undefined","required":false},{"name":"pt:year:outside","type":"PtValue | undefined","required":false},{"name":"pt:year:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:year:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:year:selected","type":"PtValue | undefined","required":false},{"name":"pt:year:today","type":"PtValue | undefined","required":false},{"name":"pt:yearItem","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:active","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:disabled","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:inRange","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:open","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:outside","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:selected","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:today","type":"PtValue | undefined","required":false},{"name":"range","type":"boolean | undefined","required":false,"default":"false","description":"Enables range selection (`[start, end]`)."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Prevents opening while keeping the activator visible."},{"name":"seconds","type":"boolean | undefined","required":false,"default":"false","description":"Adds the seconds column (requires `type=\"datetime\"`)."},{"name":"selectable","type":"((date: string) => boolean) | undefined","required":false,"description":"Predicate invoked per candidate; return `false` to disable it. Receives\nthe value in this `type`'s shape — `YYYY-MM` under `month`, `YYYY` under\n`year`."},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"Minute-column granularity and arrow stepping (requires `type=\"datetime\"`)."},{"name":"time","type":"string | string[] | null | undefined","required":false,"description":"Companion time model (`v-model:time`), 24-hour `HH:mm` / `HH:mm:ss`.\nWith `floating` it is the only carrier of the time; otherwise it mirrors\nthe time inside `modelValue`. Requires `type=\"datetime\"`."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Popover/sheet transition duration in milliseconds."},{"name":"type","type":"DatePickerType | undefined","required":false,"default":"\"date\"","values":["date","month","year","datetime"],"description":"What the picker selects and emits: `date` (a day), `datetime` (a day plus\na time rail), `month` (`YYYY-MM`) or `year` (`YYYY`). `month` / `year`\nforce `floating`, ignore `utc`, and leave the time props inert."},{"name":"utc","type":"boolean | undefined","required":false,"default":"false","description":"Emit UTC (`...Z`) instead of the local offset. Ignored with `floating`,\nand therefore with `type=\"month\"`/`type=\"year\"`."}],"events":[{"name":"grid-pick","signature":"(value: string | string[] | null): void","description":"Relay of the raw calendar-grid pick, before the calendar combines it with\nthe time. An embedding host binds this to run its own value engine; clean\nconsumers ignore it and use `update:modelValue`."},{"name":"hidden","signature":"(): void","description":"Emitted once the calendar surface has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the calendar surface starts to close."},{"name":"show","signature":"(): void","description":"Emitted as soon as the calendar surface starts to open (the popover, or the sheet on a phone)."},{"name":"shown","signature":"(): void","description":"Emitted once the calendar surface is open and its open transition has finished."},{"name":"time-pick","signature":"(payload: { unit: TimeUnit; value: string; }): void","description":"Relay of the raw time-rail pick. An embedding host binds this to run its own\nvalue engine; clean consumers ignore it and use `update:time`."},{"name":"update:activeSegment","signature":"(value: BbCalendarSegment): void","description":"The active range end changed (range + `type=\"datetime\"` only)."},{"name":"update:modelValue","signature":"(value: string | string[] | null): void","description":"Emitted when the selected date value changes (single/range/null)."},{"name":"update:time","signature":"(value: string | string[] | null): void","description":"Companion time model, alongside every change while `type=\"datetime\"`."}],"slots":[{"name":"activator","type":"BbDatePickerActivatorSlotProps","fields":["props: { ref: (el: unknown) => void; 'aria-haspopup': \"dialog\"; 'aria-expanded': \"true\" | \"false\"; 'aria-labelledby': string; }","anchorProps: { ref: (el: unknown) => void; }","open: boolean","value: string | string[] | null","disabled: boolean"],"description":"Custom activator element. Apply `v-bind=\"props\"` to your trigger."},{"name":"day","type":"BbCalendarDaySlotProps","fields":["first: boolean","item: any","label: string","last: boolean","middle: boolean","outside: boolean","selected: boolean"],"description":"Replaces the day button label inside each calendar day."},{"name":"day:append","type":"BbCalendarDaySlotProps","fields":["first: boolean","item: any","label: string","last: boolean","middle: boolean","outside: boolean","selected: boolean"],"description":"Appends content below each calendar day."},{"name":"<YYYY-MM-DD>","type":"BbCalendarDaySlotProps","description":"One date's button label (e.g. `#2024-03-15`: the local `YYYY-MM-DD`, which `slotKey` leaves as it is); beats `day`. Day grid only.","dynamic":true},{"name":"<YYYY-MM-DD>:append","type":"BbCalendarDaySlotProps","description":"Content under one date's cell; beats `day:append`.","dynamic":true}],"exposed":[],"models":[{"name":"activeSegment","type":"BbCalendarSegment | undefined"},{"name":"modelValue","type":"string | string[] | null"},{"name":"time","type":"string | string[] | null | undefined"}],"cssProps":[{"name":"--cell","value":"28px","selector":".bb-date-picker__panel","description":"Cell size drives all grid math: 224px ÷ 7 = 32px exactly"},{"name":"--px","value":"6px","selector":".bb-date-picker__panel"},{"name":"--py","value":"8px","selector":".bb-date-picker__panel"},{"name":"--nav-button-h","value":"24px","selector":".bb-date-picker__panel"},{"name":"--unit-row","value":"calc(var(--cell) * 1.25)","selector":".bb-date-picker__panel","description":"Row pitch for the coarse grids (month/year), where a \"row\" is one of four month rows rather than a week. Roomier than --cell because twelve months in a 4×3 grid have space the 6×7 day grid does not."},{"name":"--sheet-cell","value":"40px","selector":".bb-date-picker__sheet"},{"name":"--cell","value":"var(--sheet-cell)","selector":".bb-date-picker__sheet"},{"name":"--px","value":"6px","selector":".bb-date-picker__sheet"},{"name":"--py","value":"8px","selector":".bb-date-picker__sheet"},{"name":"--nav-button-h","value":"40px","selector":".bb-date-picker__sheet"},{"name":"--unit-row","value":"calc(var(--cell) * 1.25)","selector":".bb-date-picker__sheet"},{"name":"--sheet-cell","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--cell","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--px","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--py","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--nav-button-h","value":"inherit","selector":".bb-date-picker__panel--sheet"},{"name":"--unit-row","value":"inherit","selector":".bb-date-picker__panel--sheet"}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"header","description":"The navigation bar: the previous / next arrows and the month / year headings."},{"name":"arrow","description":"The previous / next buttons — a broadcast."},{"name":"month","description":"The month heading button; it opens the month panel."},{"name":"year","description":"The year heading button; it opens the year panel."},{"name":"cellColumnHeader","description":"Each weekday letter above the grid — a broadcast."},{"name":"day","description":"One whole day cell — a broadcast resolved per day. A background here paints the full cell square; restyle the round mark on `dayButton`."},{"name":"dayButton","description":"The button inside a day cell — the mark that shows selection. A broadcast resolved per day."},{"name":"monthItem","description":"One month button of the month panel (the home grid of `type=\"month\"`) — a broadcast resolved per month."},{"name":"yearItem","description":"One year button of the year list — a broadcast resolved per year."},{"name":"item","description":"One entry of the time rail's columns (hour, minute, second, AM / PM) with `type=\"datetime\"` — a broadcast resolved per entry, as on `BbTimePicker`. With the rail, `header` also lands on its readout and `cellColumnHeader` on its column letters (`HH`, `MM`)."},{"name":"panel","description":"The calendar surface you see — the popover's painted bubble on desktop, the sheet itself on a phone. It carries the sizing tokens: `pt:panel=\"[--cell:36px]\"` widens the calendar, `[--px:2px]` tightens."},{"name":"sheet","description":"The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there."}],"states":[{"name":"outside","description":"Per node, on `day` / `dayButton`: a day of the previous or next month, shown to fill the grid."},{"name":"today","description":"Per node, on `day` / `dayButton`: today."},{"name":"inRange","description":"Per node, on the cells (`day`, `dayButton`, `monthItem`, `yearItem`): inside a committed range, between its ends."},{"name":"selected","description":"Per node, on the cells: a chosen day, month or year; on `item`, the picked time's entry in each column."},{"name":"rangeStart","description":"Per node, on the cells: a committed range's first day, month or year."},{"name":"rangeEnd","description":"Per node, on the cells: a committed range's last day, month or year."},{"name":"disabled","description":"Component-wide while the picker is `disabled`. Also per node: on the cells, one outside `min` / `max` or refused by `selectable`; on `arrow`, at a bound or while the month / year panel is open."},{"name":"active","description":"Per node, on `month` / `year`: its panel is open."},{"name":"open","description":"Component-wide: the calendar is showing."},{"name":"highlighted","description":"Per node, on the cells: the keyboard cursor."}]},"tree":{"bindings":[{"part":"panel","target":"div"},{"part":"panel","target":"CommonPopover"}],"forwards":[{"to":"BbCalendar","mapping":" passthrough.forward(DATE_PICKER_CALENDAR_PARTS, BB_CALENDAR_PT.states) "},{"to":"BbOffCanvas","mapping":"{ panel: 'root', sheet: 'root' }"}],"nodes":[{"name":"BbCalendar","kind":"public","vocabulary":"BbCalendar","bindings":[{"part":"header","target":"div.bb-calendar__header"},{"part":"arrow","target":"BbBaseButton"},{"part":"month","target":"BbBaseButton"},{"part":"year","target":"BbBaseButton"},{"part":"day","target":"div.bb-calendar__day"},{"part":"dayButton","target":"button.bb-calendar__day-button"}],"cssProps":[{"name":"--bg","documented":false,"readBy":["bb-calendar__button-menu"]},{"name":"--cell","documented":true,"readBy":["bb-calendar","bb-calendar__grid","bb-calendar__day","bb-calendar__day-button","bb-calendar__menu-btn","bb-time-selector"]},{"name":"--px","documented":false,"readBy":["bb-calendar","bb-calendar__grid","bb-calendar__body","bb-time-selector"]},{"name":"--py","documented":false,"readBy":["bb-calendar__body"]},{"name":"--nav-button-h","documented":false,"readBy":["bb-calendar__arrow"]},{"name":"--unit-row","documented":true,"readBy":["bb-calendar__content","bb-calendar__menu-grid","bb-calendar__menu-btn"]}],"children":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]},{"name":"CommonTimeSelector","kind":"internal","vocabulary":"BbCalendar","bindings":[{"part":"header","target":"div.bb-time-selector__header"},{"part":"cellColumnHeader","target":"div.bb-time-selector__cell-column-header"},{"part":"item","target":"BbBaseButton"}],"cssProps":[{"name":"--time-row-h","documented":false,"readBy":["bb-time-selector__item","bb-time-selector__scroll"]},{"name":"--time-col-w","documented":false,"readBy":["bb-time-selector__column"]},{"name":"--time-mark","documented":true,"readBy":["bb-time-selector__item"]}],"children":[{"name":"BbBaseButton","kind":"public","repeated":true}]},{"name":"ScaleFade","kind":"internal"},{"name":"Slide","kind":"internal"},{"name":"CalendarMonthPanel","kind":"internal","children":[{"name":"BbBaseButton","kind":"public","repeated":true}]},{"name":"CalendarYearPanel","kind":"internal","children":[{"name":"BbBaseButton","kind":"public","repeated":true}]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"CommonPopover","kind":"internal"}]},"css":{"classes":{"bb-date-picker":["","__panel","__panel--datetime","__panel--sheet","__sheet"]},"locals":["--cell","--color-gray-200","--sheet-cell","--time-mark"]},"removed":[{"name":"datetime","new":"type","since":"3.0.0-alpha.5","migration":"ai/guides/migration/components/bb-date-picker-input.md","silent":true,"fix":{"kind":"manual"}},{"name":"pt:columnHeader","new":"pt:cellColumnHeader","surface":"pt","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","silent":true,"fix":{"kind":"rename"}},{"name":"append:day","new":"day:append","surface":"slot","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append:<x>","new":"<x>:append","surface":"slot","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"datetime","to":"type","since":"3.0.0-alpha.5","migration":"ai/guides/migration/components/bb-date-picker-input.md","fix":{"kind":"manual"}},{"from":"pt:columnHeader","to":"pt:cellColumnHeader","surface":"pt","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","fix":{"kind":"rename"}},{"from":"append:day","to":"day:append","surface":"slot","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append:<x>","to":"<x>:append","surface":"slot","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}}]},
|
|
491
491
|
{"name":"BbDatePickerInput","group":"Inputs","description":"Combines date selection with text input behavior.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbDatePickerInput.md","source":"ai/source/BbDatePickerInput.md","props":[{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile the calendar opens inside a bottom off-canvas sheet instead of a\nfloating popover, mirroring the adaptive behaviour of `BbPopover`/`BbSelect`.\nWhen unset, falls back to the global `config.adaptive`."},{"name":"ampm","type":"boolean | undefined","required":false,"default":"false","description":"12-hour display with an AM/PM segment (requires `type=\"datetime\"`). Purely a\nfield-composition concern: `modelValue` and the `time` model stay 24-hour\nregardless. Type `A`/`P` (or ArrowUp/Down) to set the meridiem."},{"name":"append:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the end of the input."},{"name":"autocomplete","type":"string | undefined","required":false,"default":"\"off\"","description":"Guides the browser as to the type of information expected in the field."},{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Displays a clear button when the input has a value and is being interacted with."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-input-h`, `--bb-input-py` and\n`--bb-label-spacing-y` for their `-compact` twins on the field, so a\n`--bb-input-h` you set on the component is ignored while `compact` is on:\nsize a compact field with `--bb-input-h-compact` (and\n`--bb-input-py-compact`) instead."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disableCalendar","type":"boolean | \"mobile\" | \"desktop\" | undefined","required":false,"default":"false","description":"Disables the calendar: hides the trigger button and prevents the popover\nfrom opening. Use `'desktop'` to disable it on desktop only (keeping the\ncalendar for mobile, complementing `disableWriting: 'mobile'`) or\n`'mobile'` to disable it on mobile only."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"disableWriting","type":"boolean | \"mobile\" | \"desktop\" | undefined","required":false,"default":"false","description":"Disables typing into the input.\nUse `'mobile'` to disable typing only on mobile, `'desktop'` to disable typing only on desktop."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"firstDayOfWeek","type":"0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined","required":false,"default":"the locale's week start","description":"First day of the week (0 = Sunday … 6 = Saturday). Omitted, the active\nlocale's week start: Monday for `it`, `de`, `fr`, `en-gb`…, Sunday for\nbare `en` (US) and `pt` (Brazil)."},{"name":"floating","type":"boolean | undefined","required":false,"default":"false","description":"If true the date will have a format YYYY-MM-DD instead of the default ISO string."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"floating\" | \"inside\" | undefined","required":false,"description":"Label rendering mode."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles."},{"name":"max","type":"string | undefined","required":false,"description":"Maximum selectable date in `YYYY-MM-DD` format — or, with `type=\"datetime\"`,\n`YYYY-MM-DDTHH:mm` to tighten the boundary day to a minute. Values\noutside both patterns throw during setup to surface configuration\nmistakes."},{"name":"min","type":"string | undefined","required":false,"description":"Minimum selectable date in `YYYY-MM-DD` format — or, with `type=\"datetime\"`,\n`YYYY-MM-DDTHH:mm` to tighten the boundary day to a minute. Values\noutside both patterns throw during setup to surface configuration\nmistakes."},{"name":"modelValue","type":"string | string[] | null | undefined","required":false,"description":"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."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"placeholder","type":"string | undefined","required":false,"description":"Text shown while the field is empty."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the start of the input."},{"name":"pt","type":"PtMap<BbDatePickerInputPtPart, BbDatePickerInputPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:activator","type":"PtValue | undefined","required":false},{"name":"pt:activator:active","type":"PtValue | undefined","required":false},{"name":"pt:activator:disabled","type":"PtValue | undefined","required":false},{"name":"pt:activator:errors","type":"PtValue | undefined","required":false},{"name":"pt:activator:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:activator:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:activator:inRange","type":"PtValue | undefined","required":false},{"name":"pt:activator:loading","type":"PtValue | undefined","required":false},{"name":"pt:activator:open","type":"PtValue | undefined","required":false},{"name":"pt:activator:outside","type":"PtValue | undefined","required":false},{"name":"pt:activator:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:activator:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:activator:readonly","type":"PtValue | undefined","required":false},{"name":"pt:activator:selected","type":"PtValue | undefined","required":false},{"name":"pt:activator:today","type":"PtValue | undefined","required":false},{"name":"pt:activator:warnings","type":"PtValue | undefined","required":false},{"name":"pt:arrow","type":"PtValue | undefined","required":false},{"name":"pt:arrow:active","type":"PtValue | undefined","required":false},{"name":"pt:arrow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:arrow:errors","type":"PtValue | undefined","required":false},{"name":"pt:arrow:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:arrow:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:arrow:inRange","type":"PtValue | undefined","required":false},{"name":"pt:arrow:loading","type":"PtValue | undefined","required":false},{"name":"pt:arrow:open","type":"PtValue | undefined","required":false},{"name":"pt:arrow:outside","type":"PtValue | undefined","required":false},{"name":"pt:arrow:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:arrow:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:arrow:readonly","type":"PtValue | undefined","required":false},{"name":"pt:arrow:selected","type":"PtValue | undefined","required":false},{"name":"pt:arrow:today","type":"PtValue | undefined","required":false},{"name":"pt:arrow:warnings","type":"PtValue | undefined","required":false},{"name":"pt:box","type":"PtValue | undefined","required":false},{"name":"pt:box:active","type":"PtValue | undefined","required":false},{"name":"pt:box:disabled","type":"PtValue | undefined","required":false},{"name":"pt:box:errors","type":"PtValue | undefined","required":false},{"name":"pt:box:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:box:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:box:inRange","type":"PtValue | undefined","required":false},{"name":"pt:box:loading","type":"PtValue | undefined","required":false},{"name":"pt:box:open","type":"PtValue | undefined","required":false},{"name":"pt:box:outside","type":"PtValue | undefined","required":false},{"name":"pt:box:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:box:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:box:readonly","type":"PtValue | undefined","required":false},{"name":"pt:box:selected","type":"PtValue | undefined","required":false},{"name":"pt:box:today","type":"PtValue | undefined","required":false},{"name":"pt:box:warnings","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:active","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:errors","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:inRange","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:loading","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:open","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:outside","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:readonly","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:selected","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:today","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:warnings","type":"PtValue | undefined","required":false},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:active","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:errors","type":"PtValue | undefined","required":false},{"name":"pt:clear:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:clear:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:clear:inRange","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:clear:open","type":"PtValue | undefined","required":false},{"name":"pt:clear:outside","type":"PtValue | undefined","required":false},{"name":"pt:clear:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:clear:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:clear:readonly","type":"PtValue | undefined","required":false},{"name":"pt:clear:selected","type":"PtValue | undefined","required":false},{"name":"pt:clear:today","type":"PtValue | undefined","required":false},{"name":"pt:clear:warnings","type":"PtValue | undefined","required":false},{"name":"pt:day","type":"PtValue | undefined","required":false},{"name":"pt:day:active","type":"PtValue | undefined","required":false},{"name":"pt:day:disabled","type":"PtValue | undefined","required":false},{"name":"pt:day:errors","type":"PtValue | undefined","required":false},{"name":"pt:day:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:day:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:day:inRange","type":"PtValue | undefined","required":false},{"name":"pt:day:loading","type":"PtValue | undefined","required":false},{"name":"pt:day:open","type":"PtValue | undefined","required":false},{"name":"pt:day:outside","type":"PtValue | undefined","required":false},{"name":"pt:day:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:day:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:day:readonly","type":"PtValue | undefined","required":false},{"name":"pt:day:selected","type":"PtValue | undefined","required":false},{"name":"pt:day:today","type":"PtValue | undefined","required":false},{"name":"pt:day:warnings","type":"PtValue | undefined","required":false},{"name":"pt:dayButton","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:active","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:disabled","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:errors","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:inRange","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:loading","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:open","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:outside","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:readonly","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:selected","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:today","type":"PtValue | undefined","required":false},{"name":"pt:dayButton:warnings","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:active","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:description:inRange","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:open","type":"PtValue | undefined","required":false},{"name":"pt:description:outside","type":"PtValue | undefined","required":false},{"name":"pt:description:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:description:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:selected","type":"PtValue | undefined","required":false},{"name":"pt:description:today","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:active","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:errors","type":"PtValue | undefined","required":false},{"name":"pt:header:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:header:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:header:inRange","type":"PtValue | undefined","required":false},{"name":"pt:header:loading","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:outside","type":"PtValue | undefined","required":false},{"name":"pt:header:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:header:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:header:readonly","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:header:today","type":"PtValue | undefined","required":false},{"name":"pt:header:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:active","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:hint:inRange","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:open","type":"PtValue | undefined","required":false},{"name":"pt:hint:outside","type":"PtValue | undefined","required":false},{"name":"pt:hint:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:hint:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:selected","type":"PtValue | undefined","required":false},{"name":"pt:hint:today","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:active","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:icon:inRange","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:open","type":"PtValue | undefined","required":false},{"name":"pt:icon:outside","type":"PtValue | undefined","required":false},{"name":"pt:icon:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:icon:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:selected","type":"PtValue | undefined","required":false},{"name":"pt:icon:today","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:active","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:errors","type":"PtValue | undefined","required":false},{"name":"pt:input:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:input:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:input:inRange","type":"PtValue | undefined","required":false},{"name":"pt:input:loading","type":"PtValue | undefined","required":false},{"name":"pt:input:open","type":"PtValue | undefined","required":false},{"name":"pt:input:outside","type":"PtValue | undefined","required":false},{"name":"pt:input:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:input:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:input:readonly","type":"PtValue | undefined","required":false},{"name":"pt:input:selected","type":"PtValue | undefined","required":false},{"name":"pt:input:today","type":"PtValue | undefined","required":false},{"name":"pt:input:warnings","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | undefined","required":false},{"name":"pt:item:active","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:errors","type":"PtValue | undefined","required":false},{"name":"pt:item:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:item:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:item:inRange","type":"PtValue | undefined","required":false},{"name":"pt:item:loading","type":"PtValue | undefined","required":false},{"name":"pt:item:open","type":"PtValue | undefined","required":false},{"name":"pt:item:outside","type":"PtValue | undefined","required":false},{"name":"pt:item:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:item:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:item:readonly","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:item:today","type":"PtValue | undefined","required":false},{"name":"pt:item:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:active","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:label:inRange","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:open","type":"PtValue | undefined","required":false},{"name":"pt:label:outside","type":"PtValue | undefined","required":false},{"name":"pt:label:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:label:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:selected","type":"PtValue | undefined","required":false},{"name":"pt:label:today","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:active","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:message:inRange","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:open","type":"PtValue | undefined","required":false},{"name":"pt:message:outside","type":"PtValue | undefined","required":false},{"name":"pt:message:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:message:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:selected","type":"PtValue | undefined","required":false},{"name":"pt:message:today","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:month","type":"PtValue | undefined","required":false},{"name":"pt:month:active","type":"PtValue | undefined","required":false},{"name":"pt:month:disabled","type":"PtValue | undefined","required":false},{"name":"pt:month:errors","type":"PtValue | undefined","required":false},{"name":"pt:month:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:month:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:month:inRange","type":"PtValue | undefined","required":false},{"name":"pt:month:loading","type":"PtValue | undefined","required":false},{"name":"pt:month:open","type":"PtValue | undefined","required":false},{"name":"pt:month:outside","type":"PtValue | undefined","required":false},{"name":"pt:month:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:month:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:month:readonly","type":"PtValue | undefined","required":false},{"name":"pt:month:selected","type":"PtValue | undefined","required":false},{"name":"pt:month:today","type":"PtValue | undefined","required":false},{"name":"pt:month:warnings","type":"PtValue | undefined","required":false},{"name":"pt:monthItem","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:active","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:disabled","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:errors","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:inRange","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:loading","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:open","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:outside","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:readonly","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:selected","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:today","type":"PtValue | undefined","required":false},{"name":"pt:monthItem:warnings","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:active","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:errors","type":"PtValue | undefined","required":false},{"name":"pt:panel:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:panel:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:panel:inRange","type":"PtValue | undefined","required":false},{"name":"pt:panel:loading","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:outside","type":"PtValue | undefined","required":false},{"name":"pt:panel:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:panel:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:panel:readonly","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel:today","type":"PtValue | undefined","required":false},{"name":"pt:panel:warnings","type":"PtValue | undefined","required":false},{"name":"pt:prefix","type":"PtValue | undefined","required":false},{"name":"pt:prefix:active","type":"PtValue | undefined","required":false},{"name":"pt:prefix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:prefix:errors","type":"PtValue | undefined","required":false},{"name":"pt:prefix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:prefix:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:prefix:inRange","type":"PtValue | undefined","required":false},{"name":"pt:prefix:loading","type":"PtValue | undefined","required":false},{"name":"pt:prefix:open","type":"PtValue | undefined","required":false},{"name":"pt:prefix:outside","type":"PtValue | undefined","required":false},{"name":"pt:prefix:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:prefix:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:prefix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:prefix:selected","type":"PtValue | undefined","required":false},{"name":"pt:prefix:today","type":"PtValue | undefined","required":false},{"name":"pt:prefix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:active","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:root:inRange","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:outside","type":"PtValue | undefined","required":false},{"name":"pt:root:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:root:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:root:today","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:active","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:errors","type":"PtValue | undefined","required":false},{"name":"pt:sheet:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:sheet:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:sheet:inRange","type":"PtValue | undefined","required":false},{"name":"pt:sheet:loading","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:outside","type":"PtValue | undefined","required":false},{"name":"pt:sheet:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:sheet:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:sheet:readonly","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet:today","type":"PtValue | undefined","required":false},{"name":"pt:sheet:warnings","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:active","type":"PtValue | undefined","required":false},{"name":"pt:spinner:disabled","type":"PtValue | undefined","required":false},{"name":"pt:spinner:errors","type":"PtValue | undefined","required":false},{"name":"pt:spinner:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:spinner:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:spinner:inRange","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner:open","type":"PtValue | undefined","required":false},{"name":"pt:spinner:outside","type":"PtValue | undefined","required":false},{"name":"pt:spinner:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:spinner:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:spinner:readonly","type":"PtValue | undefined","required":false},{"name":"pt:spinner:selected","type":"PtValue | undefined","required":false},{"name":"pt:spinner:today","type":"PtValue | undefined","required":false},{"name":"pt:spinner:warnings","type":"PtValue | undefined","required":false},{"name":"pt:suffix","type":"PtValue | undefined","required":false},{"name":"pt:suffix:active","type":"PtValue | undefined","required":false},{"name":"pt:suffix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:suffix:errors","type":"PtValue | undefined","required":false},{"name":"pt:suffix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:suffix:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:suffix:inRange","type":"PtValue | undefined","required":false},{"name":"pt:suffix:loading","type":"PtValue | undefined","required":false},{"name":"pt:suffix:open","type":"PtValue | undefined","required":false},{"name":"pt:suffix:outside","type":"PtValue | undefined","required":false},{"name":"pt:suffix:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:suffix:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:suffix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:suffix:selected","type":"PtValue | undefined","required":false},{"name":"pt:suffix:today","type":"PtValue | undefined","required":false},{"name":"pt:suffix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:year","type":"PtValue | undefined","required":false},{"name":"pt:year:active","type":"PtValue | undefined","required":false},{"name":"pt:year:disabled","type":"PtValue | undefined","required":false},{"name":"pt:year:errors","type":"PtValue | undefined","required":false},{"name":"pt:year:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:year:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:year:inRange","type":"PtValue | undefined","required":false},{"name":"pt:year:loading","type":"PtValue | undefined","required":false},{"name":"pt:year:open","type":"PtValue | undefined","required":false},{"name":"pt:year:outside","type":"PtValue | undefined","required":false},{"name":"pt:year:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:year:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:year:readonly","type":"PtValue | undefined","required":false},{"name":"pt:year:selected","type":"PtValue | undefined","required":false},{"name":"pt:year:today","type":"PtValue | undefined","required":false},{"name":"pt:year:warnings","type":"PtValue | undefined","required":false},{"name":"pt:yearItem","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:active","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:disabled","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:errors","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:inRange","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:loading","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:open","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:outside","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:rangeEnd","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:rangeStart","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:readonly","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:selected","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:today","type":"PtValue | undefined","required":false},{"name":"pt:yearItem:warnings","type":"PtValue | undefined","required":false},{"name":"range","type":"boolean | undefined","required":false,"default":"false","description":"Selects a range of dates between two dates. It selects all of the days between start and end."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and the input is swapped."},{"name":"rules","type":"RuleExpression<string | string[] | null>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"seconds","type":"boolean | undefined","required":false,"default":"false","description":"Adds the seconds segment (requires `type=\"datetime\"`). Without it, an incoming\nvalue carrying seconds displays truncated and is left untouched until the\nuser commits an edit, at which point seconds zero out."},{"name":"selectable","type":"((date: string) => boolean) | undefined","required":false,"description":"Function that accepts a `string` object and returns a boolean. `false` meaning the date cannot be selected."},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"Minute granularity for the calendar's minute column and arrow stepping\n(requires `type=\"datetime\"`). Constrains what the component produces, never what\nit accepts: a typed off-grid value (e.g. `10:07` with `step: 15`) is\nemitted verbatim, and no column row highlights for it."},{"name":"time","type":"string | string[] | null | undefined","required":false,"description":"`v-model:time`: the time part, always 24-hour `HH:mm` / `HH:mm:ss`. With\n`floating` it is the only carrier of the time; otherwise it mirrors\n`modelValue`'s, and writing it rewrites that. Requires `type=\"datetime\"`."},{"name":"transitionDuration","type":"number | undefined","required":false,"description":"Transition duration, in milliseconds, for the popover appearance."},{"name":"type","type":"DatePickerType | undefined","required":false,"default":"\"date\"","values":["date","month","year","datetime"],"description":"What the field edits, and so its segments and emitted shape: `date`\n(`DD/MM/YYYY`), `datetime` (adds the time segments and rail), `month`\n(`MM/YYYY`, emits `YYYY-MM`) or `year` (`YYYY`). `month` / `year` force\n`floating`, ignore `utc`, and leave the time props inert."},{"name":"utc","type":"boolean | undefined","required":false,"default":"false","description":"Emits UTC ISO strings (`…Z`) instead of the local offset (`…+01:00`).\nEmission only: incoming values parse the same either way, and the field\nalways displays local time. Ignored with `floating`."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"variant","type":"InputVariantType | undefined","required":false,"default":"'outline'","values":["outline","secondary","none","ghost"],"description":"Visual variant of the field box, with the `BbButton` names and tokens.\nColours only, so a form never reflows; `'ghost'` has no border in any\nstate, and `'none'` takes no look at all (you own hover, focus and the\nstates). Register more with the plugin's `inputVariants`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the composite control receives focus (first focusin after being inactive)."},{"name":"error","signature":"(error: DatePickerInputError): void","description":"Emitted alongside every value normalization or removal when the typed date is invalid or out of range.\nSee `DatePickerInputError` for the full code map and payload shapes."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when a native text field inside the control gains focus.\nForwards the original DOM `FocusEvent`."},{"name":"hidden","signature":"(): void","description":"Emitted once the calendar surface has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the calendar surface starts to close."},{"name":"inactive","signature":"(): void","description":"Emitted when focus/click moves outside the entire composite control."},{"name":"show","signature":"(): void","description":"Emitted as soon as the calendar surface starts to open (the popover, or the sheet on a phone)."},{"name":"shown","signature":"(): void","description":"Emitted once the calendar surface is open and its open transition has finished."},{"name":"update:modelValue","signature":"(value: string | string[] | null): void","description":"Emitted whenever the selected date value changes.\nPayload is `null` for cleared values, a single string for single-date mode,\nor a two-element array for range mode."},{"name":"update:time","signature":"(value: string | string[] | null): void","description":"Companion time model (`v-model:time`), emitted alongside every value\nchange while `type=\"datetime\"` is on. Always 24-hour `HH:mm` (or `HH:mm:ss` with\n`seconds`); `null` when cleared, an array in range mode."}],"slots":[{"name":"append","type":"object","description":"Content rendered after the date fields, at the end of the field box (before the calendar toggle button)."},{"name":"append:outer","type":"object","description":"Content rendered after the entire date picker control, outside the input chrome."},{"name":"day","type":"{ first: boolean; item: Dayjs; label: string; last: boolean; middle: boolean; outside: boolean; selected: boolean; }","description":"Replaces the day button label inside each calendar day."},{"name":"day:append","type":"{ first: boolean; item: Dayjs; label: string; last: boolean; middle: boolean; outside: boolean; selected: boolean; }","description":"Appends content below each calendar day."},{"name":"description","type":"BbDatePickerInputDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"label","type":"BbDatePickerInputLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default label text rendered above the date picker."},{"name":"prefix","type":"object","description":"Inline content rendered at the start of the input field area, before the date fields."},{"name":"prepend","type":"object","description":"Content rendered before the date fields, at the start of the field box."},{"name":"prepend:outer","type":"object","description":"Content rendered before the entire date picker control, outside the input chrome."},{"name":"suffix","type":"object","description":"Inline content rendered at the end of the input field area, after the date fields."},{"name":"<YYYY-MM-DD>","type":"BbCalendarDaySlotProps","description":"One date's button label (e.g. `#2024-03-15`: the local `YYYY-MM-DD`, which `slotKey` leaves as it is); beats `day`. Day grid only.","dynamic":true},{"name":"<YYYY-MM-DD>:append","type":"BbCalendarDaySlotProps","description":"Content under one date's cell; beats `day:append`.","dynamic":true}],"exposed":[],"models":[{"name":"modelValue","type":"string | string[] | null | undefined"},{"name":"time","type":"string | string[] | null | undefined"}],"cssProps":[{"name":"--border-color","value":"per variant","selector":"pt:box","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."}],"pt":{"parts":[{"name":"root","description":"The field's outer container: the label, the box and the lines under it."},{"name":"label","description":"The label text above the box (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line under the box. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"box","description":"The bordered box around the input — border, background and radius; the `variant` paints here."},{"name":"input","description":"Every segment field (day, month, year, and the time fields) — a broadcast."},{"name":"icon","description":"The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error / warning glyph) is never in it."},{"name":"spinner","description":"The spinner inside the box while `loading`."},{"name":"prefix","description":"The `#prefix` slot's wrapper, inside the box before the input."},{"name":"suffix","description":"The `#suffix` slot's wrapper, inside the box after the input."},{"name":"clear","description":"The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕."},{"name":"activator","description":"The button in the box that opens the calendar. Merged after the picker's own activator props and handlers, so a listener of yours runs after ours. Its glyph is not a part."},{"name":"panel","description":"The calendar surface — the popover's painted bubble on desktop, the sheet itself on a phone. It carries the calendar's sizing tokens (`pt:panel=\"[--cell:36px]\"`)."},{"name":"sheet","description":"The bottom sheet around the calendar on a phone only."},{"name":"header","description":"The navigation bar: the previous / next arrows and the month / year headings."},{"name":"arrow","description":"The previous / next buttons — a broadcast."},{"name":"month","description":"The month heading button; it opens the month panel."},{"name":"year","description":"The year heading button; it opens the year panel."},{"name":"cellColumnHeader","description":"Each weekday letter above the grid — a broadcast."},{"name":"day","description":"One whole day cell — a broadcast resolved per day. A background here paints the full cell square; restyle the round mark on `dayButton`."},{"name":"dayButton","description":"The button inside a day cell — the mark that shows selection. A broadcast resolved per day."},{"name":"monthItem","description":"One month button of the month panel (the home grid of `type=\"month\"`) — a broadcast resolved per month."},{"name":"yearItem","description":"One year button of the year list — a broadcast resolved per year."},{"name":"item","description":"One entry of the time rail's columns (hour, minute, second, AM / PM) with `type=\"datetime\"` — a broadcast resolved per entry, as on `BbTimePicker`. With the rail, `header` also lands on its readout and `cellColumnHeader` on its column letters (`HH`, `MM`)."}],"states":[{"name":"hasValue","description":"Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`)."},{"name":"outside","description":"Per node, on `day` / `dayButton`: a day of the previous or next month, shown to fill the grid."},{"name":"today","description":"Per node, on `day` / `dayButton`: today."},{"name":"inRange","description":"Per node, on the cells (`day`, `dayButton`, `monthItem`, `yearItem`): inside a committed range, between its ends."},{"name":"selected","description":"Per node, on the cells: a chosen day, month or year; on `item`, the picked time's entry in each column."},{"name":"rangeStart","description":"Per node, on the cells: a committed range's first day, month or year."},{"name":"rangeEnd","description":"Per node, on the cells: a committed range's last day, month or year."},{"name":"readonly","description":"Component-wide: the control is `readonly` — shown, focusable, not editable."},{"name":"disabled","description":"Component-wide while the input is `disabled`. Also per node, on the calendar's cells: one outside `min` / `max` or refused by `selectable`; on `arrow`, at a bound or while the month / year panel is open."},{"name":"warnings","description":"Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together."},{"name":"errors","description":"Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red."},{"name":"active","description":"Per node, on `month` / `year`: its panel is open."},{"name":"open","description":"Component-wide: the calendar is showing — `pt:activator:open` styles the trigger while it is."},{"name":"highlighted","description":"Per node, on the cells: the keyboard cursor."},{"name":"loading","description":"Component-wide: `loading` is on; the box shows its `spinner`."}]},"tree":{"bindings":[{"part":"controlAttrs","target":"input.bb-segmented-field__input"},{"part":"input","target":"input.bb-segmented-field__input"},{"part":"activator","target":"button.bb-segmented-field__activator"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"forwards":[{"to":"BbDatePicker","mapping":"passthrough.forward(PICKER_PARTS, BB_DATE_PICKER_PT.states)"}],"nodes":[{"name":"BbDatePicker","kind":"public","vocabulary":"BbDatePicker","bindings":[{"part":"panel","target":"div"},{"part":"panel","target":"CommonPopover"}],"forwards":[{"to":"BbCalendar","mapping":" passthrough.forward(DATE_PICKER_CALENDAR_PARTS, BB_CALENDAR_PT.states) "},{"to":"BbOffCanvas","mapping":"{ panel: 'root', sheet: 'root' }"}],"cssProps":[{"name":"--cell","documented":true,"readBy":["bb-date-picker__panel","bb-date-picker__sheet"]},{"name":"--px","documented":false},{"name":"--py","documented":false},{"name":"--nav-button-h","documented":false},{"name":"--unit-row","documented":true},{"name":"--sheet-cell","documented":false,"readBy":["bb-date-picker__sheet","bb-time-selector","bb-time-selector__columns","bb-time-selector__column--meridiem"]},{"name":"--cell","documented":false,"readBy":["bb-date-picker__panel","bb-date-picker__sheet"]},{"name":"--px","documented":false},{"name":"--py","documented":false},{"name":"--nav-button-h","documented":false},{"name":"--unit-row","documented":false},{"name":"--sheet-cell","documented":false,"readBy":["bb-date-picker__sheet","bb-time-selector","bb-time-selector__columns","bb-time-selector__column--meridiem"]},{"name":"--cell","documented":false,"readBy":["bb-date-picker__panel","bb-date-picker__sheet"]},{"name":"--px","documented":false},{"name":"--py","documented":false},{"name":"--nav-button-h","documented":false},{"name":"--unit-row","documented":false}],"children":[{"name":"BbCalendar","kind":"public","vocabulary":"BbCalendar","bindings":[{"part":"header","target":"div.bb-calendar__header"},{"part":"arrow","target":"BbBaseButton"},{"part":"month","target":"BbBaseButton"},{"part":"year","target":"BbBaseButton"},{"part":"day","target":"div.bb-calendar__day"},{"part":"dayButton","target":"button.bb-calendar__day-button"}],"cssProps":[{"name":"--bg","documented":false,"readBy":["bb-calendar__button-menu"]},{"name":"--cell","documented":true,"readBy":["bb-calendar","bb-calendar__grid","bb-calendar__day","bb-calendar__day-button","bb-calendar__menu-btn","bb-time-selector"]},{"name":"--px","documented":false,"readBy":["bb-calendar","bb-calendar__grid","bb-calendar__body","bb-time-selector"]},{"name":"--py","documented":false,"readBy":["bb-calendar__body"]},{"name":"--nav-button-h","documented":false,"readBy":["bb-calendar__arrow"]},{"name":"--unit-row","documented":true,"readBy":["bb-calendar__content","bb-calendar__menu-grid","bb-calendar__menu-btn"]}],"children":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]},{"name":"CommonTimeSelector","kind":"internal","vocabulary":"BbCalendar","bindings":[{"part":"header","target":"div.bb-time-selector__header"},{"part":"cellColumnHeader","target":"div.bb-time-selector__cell-column-header"},{"part":"item","target":"BbBaseButton"}],"cssProps":[{"name":"--time-row-h","documented":false,"readBy":["bb-time-selector__item","bb-time-selector__scroll"]},{"name":"--time-col-w","documented":false,"readBy":["bb-time-selector__column"]},{"name":"--time-mark","documented":true,"readBy":["bb-time-selector__item"]}],"children":[{"name":"BbBaseButton","kind":"public","repeated":true}]},{"name":"ScaleFade","kind":"internal"},{"name":"Slide","kind":"internal"},{"name":"CalendarMonthPanel","kind":"internal","children":[{"name":"BbBaseButton","kind":"public","repeated":true}]},{"name":"CalendarYearPanel","kind":"internal","children":[{"name":"BbBaseButton","kind":"public","repeated":true}]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"CommonPopover","kind":"internal"}]},{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"CommonField","kind":"internal","vocabulary":"BbDatePickerInput","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"CommonFieldInput","kind":"internal","vocabulary":"BbDatePickerInput","bindings":[{"part":"box","target":"span.bb-field-input__box"},{"part":"prefix","target":"span.bb-field-input__prefix"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"ClearableButton"},{"part":"spinner","target":"BbSpinner"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--bg-hover","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-field-input__box"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix","bb-field-input__prepend-icon","bb-field-input__append-icon"]},{"name":"--border-color","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--border-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-size","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-color","documented":true,"readBy":["bb-field-input__box"]},{"name":"--elev","documented":true,"readBy":["bb-field-input__box"]},{"name":"--frost","documented":true,"readBy":["bb-field-input__box"]},{"name":"--inside-label-clearance","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix"]}],"children":[{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]}]},"css":{"classes":{"bb-date-picker-input":["","__accessible-description","__field","__field--range"],"bb-segmented-field":["__activator","__activator--active","__field-sizer","__fields","__fields--empty","__fields--range","__input","__input--*","__placeholder","__separator","__separator--range","__trigger-icon"]},"locals":["--color-gray-200"]},"attrTargets":["div","input"],"removed":[{"name":"allowWriting","new":"disableWriting","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-date-picker-input.md","silent":true,"fix":{"kind":"invert","valueMap":{"not-mobile":"mobile"}}},{"name":"datetime","new":"type","since":"3.0.0-alpha.5","migration":"ai/guides/migration/components/bb-date-picker-input.md","silent":true,"fix":{"kind":"manual"}},{"name":"hidePopover","new":"disableCalendar","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-date-picker-input.md","silent":true,"fix":{"kind":"rename","valueMap":{"not-mobile":"desktop"}}},{"name":"width","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-date-picker-input.md","silent":true,"fix":{"kind":"manual"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-date-picker-input.md","silent":true,"fix":{"kind":"rename"}},{"name":"pt:columnHeader","new":"pt:cellColumnHeader","surface":"pt","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","silent":true,"fix":{"kind":"rename"}},{"name":"prepend-outer","new":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append-outer","new":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}},{"name":"append:day","new":"day:append","surface":"slot","migration":"ai/guides/migration/components/bb-date-picker-input.md","silent":true,"fix":{"kind":"rename"}},{"name":"append:<x>","new":"<x>:append","surface":"slot","migration":"ai/guides/migration/components/bb-date-picker-input.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"allowWriting","to":"disableWriting","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-date-picker-input.md","fix":{"kind":"invert","valueMap":{"not-mobile":"mobile"}}},{"from":"datetime","to":"type","since":"3.0.0-alpha.5","migration":"ai/guides/migration/components/bb-date-picker-input.md","fix":{"kind":"manual"}},{"from":"hidePopover","to":"disableCalendar","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-date-picker-input.md","fix":{"kind":"rename","valueMap":{"not-mobile":"desktop"}}},{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-date-picker-input.md","fix":{"kind":"rename"}},{"from":"pt:columnHeader","to":"pt:cellColumnHeader","surface":"pt","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","fix":{"kind":"rename"}},{"from":"prepend-outer","to":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append-outer","to":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}},{"from":"append:day","to":"day:append","surface":"slot","migration":"ai/guides/migration/components/bb-date-picker-input.md","fix":{"kind":"rename"}},{"from":"append:<x>","to":"<x>:append","surface":"slot","migration":"ai/guides/migration/components/bb-date-picker-input.md","fix":{"kind":"rename"}}]},
|
|
492
492
|
{"name":"BbDialog","group":"Overlay","description":"Presents modal dialogs for focused user interactions.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbDialog.md","source":"ai/source/BbDialog.md","props":[{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile, renders as a `BbOffCanvas` drawer instead of a centred dialog;\nthe surface is chosen when the dialog opens and kept until it closes.\nUnset: the global `config.adaptive`."},{"name":"description","type":"string | undefined","required":false,"description":"One short line under the title, muted (the shadcn `DialogDescription`\nshape), and the only element `aria-describedby` points at. Keep it to a\nsentence; anything longer belongs in the body."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Blocks EVERY user dismissal (backdrop, Escape and the ✕; a denied attempt\nplays the deny nudge), e.g. while a save runs. `persistent` blocks only\nthe backdrop and Escape. Closing through `v-model` still works."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Render dialog content immediately instead of waiting for the first open."},{"name":"focusTarget","type":"string | undefined","required":false,"description":"CSS selector of the element to focus after opening. Defaults to the first tabbable element."},{"name":"fullscreen","type":"boolean | \"mobile\" | undefined","required":false,"description":"Display the dialog fullscreen. Use `'mobile'` to restrict fullscreen to small devices."},{"name":"hideClose","type":"boolean | undefined","required":false,"default":"false","description":"Hide the default close (×) button. The button is shown by default; set this\nto remove it (e.g. for a `persistent` dialog you don't want dismissible —\nthe × otherwise still closes a persistent dialog)."},{"name":"modelValue","type":"boolean | undefined","required":false,"default":"false","description":"Used by v-model to open / close the dialog. A dialog with no `v-model`\nstarts closed."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet)."},{"name":"persistent","type":"boolean | undefined","required":false,"default":"false","description":"Prevent closing via outside clicks or Escape key. The header close (×)\nbutton STILL closes a persistent dialog — that is the documented escape\nhatch; combine with `hideClose` to remove it, or use `disabled` to block\nevery dismissal. Programmatic close is still allowed."},{"name":"pt","type":"PtMap<BbDialogPtPart, BbDialogPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:close","type":"PtValue | undefined","required":false},{"name":"pt:close:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:close:open","type":"PtValue | undefined","required":false},{"name":"pt:content","type":"PtValue | undefined","required":false},{"name":"pt:content:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:content:open","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:description:open","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:title","type":"PtValue | undefined","required":false},{"name":"pt:title:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:title:open","type":"PtValue | undefined","required":false},{"name":"size","type":"Responsive<NonNullable<number | CssSize | keyof BbDialogSizes | undefined>> | undefined","required":false,"default":"\"sm\"","description":"Controls the maximum width of the dialog. Accepts named presets from `'xs'` to `'2xl'`,\na custom CSS width string, or a numeric pixel value — or a per-breakpoint\nmap (e.g. `{ default: 'sm', lg: 'lg' }`) to switch width responsively."},{"name":"stack","type":"string | undefined","required":false,"description":"Name of the stack this dialog belongs to. Dialogs sharing the same `stack`\nvalue replace one another: only the most recently opened stays visible while\nthe others in the stack are hidden beneath it. Dialogs in different stacks —\nor with no `stack` — never affect each other and remain fully visible."},{"name":"title","type":"string | undefined","required":false,"description":"Title text announced to assistive technologies. If omitted, no header is\nrendered (unless a `header` slot is supplied) and accessibility must be\nhandled manually."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Controls the duration of the open and close animations."}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted after the close transition completes and the dialog is fully dismissed."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the dialog starts to close (model becomes false)."},{"name":"show","signature":"(): void","description":"Emitted as soon as the dialog starts to open (model becomes true)."},{"name":"shown","signature":"(): void","description":"Emitted once the open transition has run (symmetric with `hidden`): the\ndialog is settled, so code that measures or anchors to its content sees\nthe final layout. Not emitted for a dialog closed before it finished\nopening."},{"name":"update:modelValue","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"default","type":"BbDialogDefaultSlotProps","fields":["close: () => void"],"description":"Primary body content of the dialog, rendered in the scrollable body area."},{"name":"description","type":"BbDialogDescriptionSlotProps","fields":["text: string"],"description":"Replaces the description text under the title. Renders the header even\nwhen `title` and `description` are unset — a slotted description is a\ndescription, the same rule `#title` follows."},{"name":"footer","type":"BbDialogFooterSlotProps","fields":["close: () => void"],"description":"Content rendered in the dialog footer, below the body area. Typically used for action buttons."},{"name":"header","type":"BbDialogHeaderSlotProps","fields":["titleId: string","close: () => void","title: string"],"description":"Replaces the whole header (title and ✕) on both surfaces, so it owns\nclosing: wire your control to `close`, and `titleId` onto your title. It\nrenders even without `title`. Its root is a flex item: give it `flex-1`\nto fill the width."},{"name":"title","type":"BbDialogTitleSlotProps","fields":["text: string"],"description":"Replaces the default title text inside the header. Remains linked to the\ndialog through `aria-labelledby`. Providing this slot renders the header\neven when `title` is unset — a slotted title is a title."}],"exposed":[],"models":[{"name":"modelValue","type":"boolean | undefined"}],"cssProps":[{"name":"--px","value":"var(--bb-panel-p)","selector":".bb-dialog","description":"Axis split of --bb-panel-p: --px (inline) / --py (block), each branching off it. Set the pair only when the axes differ; setting --bb-panel-p alone keeps them equal. Local on this root class (not :root) so scoped --bb-panel-p overrides keep reaching the slots; for per-part asymmetry, scope --py to the part class."},{"name":"--py","value":"var(--bb-panel-p)","selector":".bb-dialog"},{"name":"--page-padding","value":"20px","selector":".bb-dialog"},{"name":"--transition-timing-function","value":"var(--bb-ease)","selector":".bb-dialog"},{"name":"--bg","value":"var(--bb-panel)","selector":".bb-dialog"},{"name":"--fg","value":"var(--bb-text)","selector":".bb-dialog"},{"name":"--close-size","value":"28px","selector":".bb-dialog__header","description":"Shared by the close control and by the space the title reserves for it, * so the two can never drift apart."}],"pt":{"parts":[{"name":"root","description":"The `<dialog>` — the surface itself, so there is no separate `panel`. The backdrop is `::backdrop`: style it in CSS (`.bb-dialog::backdrop`), it has no node for `pt`."},{"name":"sheet","description":"The bottom sheet on the adaptive `surface=\"canvas\"` (the `BbOffCanvas` root) — never the desktop `<dialog>`. Applied after `root`, so it wins a conflict there."},{"name":"header","description":"The header band."},{"name":"title","description":"The title line inside the header. Not rendered when a `#header` slot replaces the header."},{"name":"description","description":"The description line inside the header. Not rendered when a `#header` slot replaces the header."},{"name":"content","description":"The scrolling body. It carries the body's padding (`--px`, `--py`, `--dialog-gap`), so `pt:content=\"px-8\"` or `[--py:20px]` sets it."},{"name":"footer","description":"The footer band."},{"name":"close","description":"The ✕ — in the header, or floating when there is none."}],"states":[{"name":"open","description":"Component-wide: the dialog is open (follows `v-model`)."},{"name":"fullscreen","description":"Component-wide: the dialog fills the viewport — always with `fullscreen`, and with `fullscreen=\"mobile\"` only while the viewport is a phone, so it can flip at runtime. Listed after `open`, so a `pt:root:fullscreen` entry wins a conflict with `pt:root:open` (drop an open-state ring or radius that a full-viewport surface cannot show). Forwarded to the sheet on the adaptive `surface=\"canvas\"`."}]},"tree":{"bindings":[{"part":"header","target":"div.bb-dialog__header"},{"part":"title","target":"span.bb-dialog__title"},{"part":"description","target":"p.bb-dialog__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-dialog__content"},{"part":"footer","target":"div.bb-dialog__footer"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ root: 'root', header: 'header', title: 'title', description: 'description', content: 'content', footer: 'footer', close: 'close', sheet: 'root', }"}],"nodes":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","repeated":true,"cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]}]},"css":{"classes":{"bb-close-button":[""],"bb-dialog":["","--covered","--deny-close","--fullscreen","--mobile","--open","--stacked","--visible","__body-content","__close","__content","__description","__footer","__header","__sheet","__title"],"bb-dialog-escape":[""]},"locals":["--bg","--close-size","--color-gray-200","--dialog-gap","--dialog-title-fs","--dialog-title-fw","--fg","--max-width","--p","--page-padding","--px","--py","--scrollbar-width","--transition-duration","--transition-timing-function"]},"attrTargets":["dialog"],"removed":[{"name":"compact","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dialog.md","silent":true,"fix":{"kind":"manual"}},{"name":"hideHeader","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dialog.md","silent":true,"fix":{"kind":"manual"}},{"name":"overlayClasses","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dialog.md","silent":true,"fix":{"kind":"manual"}},{"name":"panelClasses","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dialog.md","silent":true,"fix":{"kind":"manual"}},{"name":"showClose","new":"hideClose","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dialog.md","silent":true,"fix":{"kind":"invert"}}],"renamed":[{"from":"showClose","to":"hideClose","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dialog.md","fix":{"kind":"invert"}}]},
|
|
493
|
-
{"name":"BbDropdown","group":"Overlay","description":"Displays contextual action menus and menu content (includes the co-located BbDropdownGroup export, which is how a selectable group is bound).","referenceOnly":false,"hasGuide":true,"contract":"ai/BbDropdown.md","source":"ai/source/BbDropdown.md","props":[{"name":"activator","type":"Record<string, any> | HTMLElement | null | undefined","required":false,"description":"An external activator element or component ref: the activator slot is not\nrendered, and the listeners and ARIA (`aria-haspopup` / `aria-expanded` /\n`aria-controls`) are attached to it; don't add your own."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile (below `config.mobileMaxWidth`), renders the menu as a bottom\nsheet that drills into submenus one level at a time instead of hover\nflyouts; slots and selection are unchanged. Unset: the global\n`config.adaptive`."},{"name":"anchor","type":"Record<string, any> | HTMLElement | null | undefined","required":false,"default":"the activator element","description":"The element the panel positions against when it should differ from the\nactivator (a wrapper the activator is part of); an HTMLElement or\ncomponent ref. It also drives a percentage `width`. Ignored with\n`placement=\"cursor\"`."},{"name":"boundary","type":"string | Record<string, any> | HTMLElement | null | undefined","required":false,"description":"Constrains the dropdown within a bounding element.\nAccepts an HTMLElement, a Vue component ref, or a CSS selector string."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density, the `BbSelect` ladder: flyout rows 28px → 24px, sheet\nrows 44px → 36px (a sheet row stays a touch target). The label size does\nnot change."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component"},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the menu panel at mount instead of on the first open (the phone\nsheet's too), and keeps its rows after a close. Without it the rows mount\non each open and go once the menu has closed."},{"name":"emptyText","type":"string | undefined","required":false,"description":"Default placeholder text shown when a pipeline group resolves to no items.\nA group's own `emptyText` overrides this; both fall back to the localized\n`common.emptyText` (`'No data to display'`)."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"Default for pipeline groups: drop selections that are no longer present in a\ngroup's current items (e.g. after a `dependencies` re-fetch) from the\nselection and `v-model`. A group's own `enforceCoherence` overrides this."},{"name":"failedText","type":"string | undefined","required":false,"description":"Default placeholder text shown when a pipeline group's latest load FAILED\n(its `items` getter threw). A group's own `failedText` overrides this; both\nfall back to the localized `common.failedText` (`\"Couldn't load items\"`)."},{"name":"id","type":"string | undefined","required":false,"description":"Names this dropdown: the activator's id (unless it already has one),\nthe menu's `menu_<id>`, and the key `useBbDropdownContext(id)` and a\ncompanion `BbDropdownGroup` pair by. Generated when omitted."},{"name":"items","type":"BbDropdownItem[]","required":true,"default":"[]","description":"The menu rows, each a `BbBaseButton` (`button`, `a` or `router-link`): a\nflat array for one group, nested arrays for divider-separated groups, or\n`InternalGroup` objects for titled / selectable sections. A row's own\n`items` opens a submenu."},{"name":"loadingText","type":"string | undefined","required":false,"description":"Default placeholder text shown while a pipeline group's async items load.\nA group's own `loadingText` overrides this; both fall back to the localized\n`common.loadingText` (`'Loading...'`)."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the floating container will maintain from the activator."},{"name":"padding","type":"number | undefined","required":false,"default":"10","description":"Minimum empty space to keep from the edge of the page"},{"name":"placement","type":"Placement | \"cursor\" | undefined","required":false,"default":"\"bottom\"","values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end","cursor"],"description":"Position of the dropdown relative to the activator.\nUse `'cursor'` to anchor at the mouse/touch coordinates.\n(No arrow is drawn either way — arrows are tooltip-only in v3.)"},{"name":"pt","type":"PtItemMap<BbDropdownPtPart, BbDropdownItemPtPart, BbDropdownPtState, InternalItem> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:disabled","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:footer:selected","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:open","type":"PtValue | undefined","required":false},{"name":"pt:input:selected","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:open","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemDescription:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:open","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:open","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemText","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemText:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemText:open","type":"PtValue | undefined","required":false},{"name":"pt:itemText:selected","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list:open","type":"PtValue | undefined","required":false},{"name":"pt:list:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"queryDebounceTime","type":"number | undefined","required":false,"default":"300","description":"Debounce (ms) applied to the async re-fetch a `searchable` group fires as the\nuser types. Applies to every searchable group in the menu."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"150","description":"How long the transition has to last in milliseconds. Menus use the fast\ntransition (150) rather than the medium one (250) the other popovers\ndefault to: a menu is opened to pick one command and is gone again, so\nit answers faster than a panel the user reads or edits in."},{"name":"trigger","type":"DropdownTrigger | DropdownTrigger[] | undefined","required":false,"default":"\"click\"","description":"Interaction(s) that open the dropdown.\nAccepts a single trigger or an array to combine them.\n- `'click'` — left-click / tap (default)\n- `'contextMenu'` — right-click on desktop, long-press on mobile"},{"name":"width","type":"string | number | undefined","required":false,"default":"\"auto\"","description":"Width of the dropdown in pixels, percentage, or 'auto' to fit content."}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted once the menu has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the menu starts to close."},{"name":"item:selected","signature":"(value: any): void","description":"The user selected a row in a selectable group, at the click — also when a\ncontrolled companion's app then refuses the value. The payload is the\nrow's value (its `item-value` for pipeline groups, else its `value`) —\nsymmetric with `BbTable`'s `item:selected`."},{"name":"item:unselected","signature":"(value: any): void","description":"The user unselected a row (a multiple toggle, a `clearable` re-click, a\nchip ×, or the old value a single pick replaces). Payload is the item's\nresolved value, matching `item:selected`."},{"name":"show","signature":"(): void","description":"Emitted as soon as the menu (the popover, or the sheet on a phone) starts to open."},{"name":"shown","signature":"(): void","description":"Emitted once the menu is open and its open transition has finished."}],"slots":[{"name":"activator","type":"BbDropdownActivatorSlotProps","fields":["disabled?: boolean","loading: boolean","open: boolean","placement: Placement | \"cursor\"","props: BbDropdownActivatorProps"],"description":"The element that triggers the dropdown to open. Spread `props` onto your trigger element."},{"name":"default","type":"any","description":"Hosts `<BbDropdownGroup>` companions. They register their group with the\ndropdown and render nothing themselves."},{"name":"empty","type":"BbDropdownPlaceholderSlotProps","fields":["groupId?: string","text: string","error?: unknown"],"description":"Replaces the default \"no data\" placeholder row shown in a pipeline group\nthat resolved to no items. Rendered once per empty group."},{"name":"footer","type":"BbDropdownEdgeSlotProps","fields":["disabled?: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the bottom of the dropdown panel, outside the scroll\narea. Stays visible while the items scroll and is separated from them by a\ndivider — for action buttons."},{"name":"header","type":"BbDropdownEdgeSlotProps","fields":["disabled?: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the top of the dropdown panel, outside the scroll area.\nStays visible while the items scroll and is separated from them by a\ndivider — for a title or a filter field."},{"name":"item:append","type":"BbDropdownItemSlotProps","fields":["description?: string","disabled?: boolean","group: BbDropdownSlotGroup","groupTitle: boolean","level: number","index: number","item: InternalItem","loading: boolean","open: boolean","placement: Placement | \"cursor\"","selected: boolean","label: string"],"description":"The trailing region of every row (and group title line), replacing its\n`append:icon`. A named slot wins over it; the submenu chevron and the\ncheck on a selected row take its place."},{"name":"item:prepend","type":"BbDropdownItemSlotProps","fields":["description?: string","disabled?: boolean","group: BbDropdownSlotGroup","groupTitle: boolean","level: number","index: number","item: InternalItem","loading: boolean","open: boolean","placement: Placement | \"cursor\"","selected: boolean","label: string"],"description":"The leading region of every row (and group title line), replacing its\n`prepend:icon`. A row's own or its group's named slot wins over it."},{"name":"loading","type":"BbDropdownPlaceholderSlotProps","fields":["groupId?: string","text: string","error?: unknown"],"description":"Replaces the default loading placeholder row shown in a pipeline group\nwhile its async items load. Rendered once per loading group."},{"name":"<value>","type":"BbDropdownItemSlotProps","description":"One row's content (label and description), by its value; in a fetched group, by its resolved `itemValue`.","dynamic":true},{"name":"<value>:prepend","type":"BbDropdownItemSlotProps","description":"One row's leading region; replaces its `prepend:icon`.","dynamic":true},{"name":"<value>:append","type":"BbDropdownItemSlotProps","description":"One row's trailing region; replaces its `append:icon` and its submenu chevron. The check takes its place on the selected row.","dynamic":true},{"name":"<groupId>:item","type":"BbDropdownItemSlotProps","description":"The content of every row of that group, and no other; a row's own `#<value>` still wins.","dynamic":true},{"name":"<groupId>:item:prepend","type":"BbDropdownItemSlotProps","description":"The leading region of every row of that group — e.g. an avatar per record, drawn from `item.meta`, while other rows keep their `prepend:icon`.","dynamic":true},{"name":"<groupId>:item:append","type":"BbDropdownItemSlotProps","description":"The trailing region of every row of that group; replaces their `append:icon`. The check takes its place on the selected row.","dynamic":true},{"name":"<groupId>","type":"BbDropdownItemSlotProps","description":"That group's title line (the group is passed as `item`, `groupTitle` is `true`).","dynamic":true},{"name":"<groupId>:prepend","type":"BbDropdownItemSlotProps","description":"The leading region of that group's title line.","dynamic":true},{"name":"<groupId>:append","type":"BbDropdownItemSlotProps","description":"The trailing region of that group's title line.","dynamic":true}],"exposed":[],"models":[],"cssProps":[{"name":"--bg","value":"var(--bb-panel)","selector":".bb-dropdown__group-search"},{"name":"--menu-inset","value":"4px","selector":".bb-dropdown","description":"Inset between the menu's outer chrome and its first item — owned here and * consumed by both `.bb-dropdown__list`'s padding and the submenu * lead-in below, so the two can never drift apart."}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The menu surface you see — the bordered flyout box on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet the menu becomes on a phone (the `BbOffCanvas` root) — never the desktop surface. Applied after `panel`, so it wins a conflict there."},{"name":"header","description":"The menu's header band."},{"name":"footer","description":"The menu's footer band."},{"name":"input","description":"A searchable group's search field — a broadcast: it lands on every searchable group's field, desktop and phone alike. Its magnifier glyph is chrome."},{"name":"list","description":"The top-level items container between the bands — the node that lays the entries out (a flex column with a 1px gap; on a phone, the sheet's items container). A submenu's list is not reached. Groups, headings and dividers are not parts."},{"name":"item","description":"One menu entry, submenus included — a broadcast resolved per entry. Also takes a per-item function, called with the entry."},{"name":"itemText","description":"An entry's label (its `label`) — resolved with that entry's states. A per-entry `#<value>` slot replaces it. Also takes a per-item function."},{"name":"itemIcon","description":"An entry's prepend / append icons — resolved with that entry's states. Also takes a per-item function."},{"name":"itemDescription","description":"An entry's muted second line (its `description`) — resolved with that entry's states. A per-entry `#<value>` slot replaces it. Also takes a per-item function."}],"states":[{"name":"selected","description":"Per node, on the entry parts: a selectable group's checked entry."},{"name":"disabled","description":"Per node, on the entry parts: an entry that is disabled."},{"name":"open","description":"Component-wide: the menu is open."}]},"tree":{"bindings":[{"part":"panel","target":"CommonPopover"},{"part":"root","target":"CommonPopover"},{"part":"header","target":"div.bb-dropdown__header"},{"part":"list","target":"span.bb-dropdown__list"},{"part":"footer","target":"div.bb-dropdown__footer"}],"nodes":[{"name":"CommonPopover","kind":"internal"},{"name":"BbDropdownList","kind":"internal","children":[{"name":"BbBadge","kind":"public","vocabulary":"BbBadge","bindings":[{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"button.bb-badge__clear"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-badge"]},{"name":"--fg","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--bw","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--border-color","documented":false,"readBy":["bb-badge"]},{"name":"--ring-color","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--ring-size","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--min-size-md","documented":true,"readBy":["bb-badge"]},{"name":"--min-size","documented":true,"readBy":["bb-badge"]},{"name":"--elev","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--r","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--fs","documented":true,"readBy":["bb-badge"]},{"name":"--icon-size","documented":true,"readBy":["bb-badge__icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge__clear"]},{"name":"--gap","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--px","documented":true,"readBy":["bb-badge","bb-badge--icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge--clearable"]},{"name":"--clear-size","documented":true,"readBy":["bb-badge__clear","bb-icon"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--pad-left","documented":true,"readBy":["bb-badge__body"]},{"name":"--pad-right","documented":false,"readBy":["bb-badge__body","bb-badge__clear"]},{"name":"--size","documented":false}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"CommonPopover","kind":"internal","repeated":true},{"name":"BbDropdownList","kind":"internal","repeated":true}]},{"name":"AdaptiveDropdown","kind":"internal","forwards":[{"to":"BbOffCanvas","mapping":"{ header: 'header', footer: 'footer', panel: 'root', sheet: 'root' }"}],"children":[{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"BbSmoothHeight","kind":"public"},{"name":"BbButton","kind":"public","vocabulary":"BbButton","bindings":[{"part":"root","target":"BbBaseButton"},{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"text","target":"span.bb-button__text"}],"cssProps":[{"name":"--h-xs","documented":true,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--icon-size-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--px-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--fs-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--r-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--gap-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--h-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--icon-size-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--px-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--fs-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--r-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--gap-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--h-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--icon-size-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--px-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--fs-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--r-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--gap-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--h-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--icon-size-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--px-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--fs-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--r-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--gap-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--h-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--icon-size-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--px-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--fs-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--r-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--gap-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--h-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--icon-size-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--px-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--fs-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--r-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--gap-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--h","documented":true,"readBy":["bb-button","bb-button--icon"]},{"name":"--icon-size","documented":true,"readBy":["bb-button__text","bb-spinner","bb-button__icon","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--px","documented":true,"readBy":["bb-button","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--fs","documented":true,"readBy":["bb-button"]},{"name":"--r","documented":true,"readBy":["bb-button"]},{"name":"--gap","documented":true,"readBy":["bb-button","bb-button__text","bb-spinner"]},{"name":"--bg","documented":true,"readBy":["bb-button"]},{"name":"--bg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg","documented":true,"readBy":["bb-button"]},{"name":"--border-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-size","documented":true,"readBy":["bb-button"]},{"name":"--bw","documented":true,"readBy":["bb-button"]},{"name":"--fg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--opacity-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--elev-tier","documented":true,"readBy":["bb-button--primary","bb-button--secondary","bb-button--outline","bb-button--destructive"]},{"name":"--elev","documented":true,"readBy":["bb-button"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]},{"name":"BbSpinner","kind":"public","repeated":true}]},{"name":"BbDropdownList","kind":"internal","repeated":true}]},{"name":"DropdownPipelineResolver","kind":"internal"}]},"css":{"classes":{"bb-dropdown":["","--adaptive","--compact","--mobile","--submenu","__adaptive-body","__adaptive-menu","__divider","__footer","__group-items","__group-items--capped","__group-items--loading","__group-loading","__group-search","__group-title","__group-title--variant-*","__group-title--variant-destructive","__header","__item","__item--description","__item--has-submenu","__item--selected","__item--variant-*","__item--variant-destructive","__item-description","__item-icon","__item-text","__list","__nav","__nav--drill","__nav-back","__nav-gutter","__nav-title","__panel","__panel--reserve-check","__placeholder","__placeholder--*","__placeholder--failed","__placeholder-icon","__search-icon","__search-input","__sheet","__sheet-chip","__sheet-chips","__sheet-selection"],"bb-dropdown-escape":[""],"bb-dropdown-nav-back":[""],"bb-dropdown-nav-back-enter-active":[""],"bb-dropdown-nav-back-enter-from":[""],"bb-dropdown-nav-back-leave-active":[""],"bb-dropdown-nav-back-leave-to":[""],"bb-dropdown-nav-forward":[""],"bb-dropdown-nav-forward-enter-active":[""],"bb-dropdown-nav-forward-enter-from":[""],"bb-dropdown-nav-forward-leave-active":[""],"bb-dropdown-nav-forward-leave-to":[""]},"locals":["--bg","--bubble-border-w","--color-gray-200","--dialog-title-fs","--max-h","--menu-inset","--py","--sheet-option-fs","--sheet-row-h","--size","--submenu-scale","--transition-duration","--translate-x-coefficient","--w"]},"attrTargets":["div","dialog"],"removed":[{"name":"arrowPadding","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"remove"}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"loading","new":null,"surface":"method","hint":"read `loading` from the activator slot scope (`#activator=\"{ loading }\"`) instead of a template ref","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"manual"}},{"name":"items[].key","new":"items[].value","surface":"item","hint":"a row's identity: its `v-model` value (any type, compared by hash) and its `#<value>` slots; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"rename"}},{"name":"items[].text","new":"items[].label","surface":"item","hint":"a row's text; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"rename"}},{"name":"items[group].key","new":"items[group].id","surface":"item","hint":"a group's identity, the same word as `<BbDropdownGroup id>`; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}}]},
|
|
493
|
+
{"name":"BbDropdown","group":"Overlay","description":"Displays contextual action menus and menu content (includes the co-located BbDropdownGroup export, which is how a selectable group is bound).","referenceOnly":false,"hasGuide":true,"contract":"ai/BbDropdown.md","source":"ai/source/BbDropdown.md","props":[{"name":"activator","type":"Record<string, any> | HTMLElement | null | undefined","required":false,"description":"An external activator element or component ref: the activator slot is not\nrendered, and the listeners and ARIA (`aria-haspopup` / `aria-expanded` /\n`aria-controls`) are attached to it; don't add your own."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile (below `config.mobileMaxWidth`), renders the menu as a bottom\nsheet that drills into submenus one level at a time instead of hover\nflyouts; slots and selection are unchanged. Unset: the global\n`config.adaptive`."},{"name":"anchor","type":"Record<string, any> | HTMLElement | null | undefined","required":false,"default":"the activator element","description":"The element the panel positions against when it should differ from the\nactivator (a wrapper the activator is part of); an HTMLElement or\ncomponent ref. It also drives a percentage `width`. Ignored with\n`placement=\"cursor\"`."},{"name":"boundary","type":"string | Record<string, any> | HTMLElement | null | undefined","required":false,"description":"Keeps the panel inside this element alongside its trigger (sideways for\na menu above or below); away from the trigger it may pass the edge, and\nonly the viewport flips it. An HTMLElement, a component ref or a CSS\nselector: a `useTemplateRef`, never `$refs.x` (not reactive)."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density, the `BbSelect` ladder: flyout rows 28px → 24px, sheet\nrows 44px → 36px (a sheet row stays a touch target). The label size does\nnot change."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component"},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the menu panel at mount instead of on the first open (the phone\nsheet's too), and keeps its rows after a close. Without it the rows mount\non each open and go once the menu has closed."},{"name":"emptyText","type":"string | undefined","required":false,"description":"Default placeholder text shown when a pipeline group resolves to no items.\nA group's own `emptyText` overrides this; both fall back to the localized\n`common.emptyText` (`'No data to display'`)."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"Default for pipeline groups: drop selections that are no longer present in a\ngroup's current items (e.g. after a `dependencies` re-fetch) from the\nselection and `v-model`. A group's own `enforceCoherence` overrides this."},{"name":"failedText","type":"string | undefined","required":false,"description":"Default placeholder text shown when a pipeline group's latest load FAILED\n(its `items` getter threw). A group's own `failedText` overrides this; both\nfall back to the localized `common.failedText` (`\"Couldn't load items\"`)."},{"name":"id","type":"string | undefined","required":false,"description":"Names this dropdown: the activator's id (unless it already has one),\nthe menu's `menu_<id>`, and the key `useBbDropdownContext(id)` and a\ncompanion `BbDropdownGroup` pair by. Generated when omitted."},{"name":"items","type":"BbDropdownItem[]","required":true,"default":"[]","description":"The menu rows, each a `BbBaseButton` (`button`, `a` or `router-link`): a\nflat array for one group, nested arrays for divider-separated groups, or\n`InternalGroup` objects for titled / selectable sections. A row's own\n`items` opens a submenu."},{"name":"loadingText","type":"string | undefined","required":false,"description":"Default placeholder text shown while a pipeline group's async items load.\nA group's own `loadingText` overrides this; both fall back to the localized\n`common.loadingText` (`'Loading...'`)."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the floating container will maintain from the activator."},{"name":"padding","type":"number | undefined","required":false,"default":"10","description":"Minimum empty space to keep from the edge of the page"},{"name":"placement","type":"Placement | \"cursor\" | undefined","required":false,"default":"\"bottom\"","values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end","cursor"],"description":"Position of the dropdown relative to the activator.\nUse `'cursor'` to anchor at the mouse/touch coordinates.\n(No arrow is drawn either way — arrows are tooltip-only in v3.)"},{"name":"pt","type":"PtItemMap<BbDropdownPtPart, BbDropdownItemPtPart, BbDropdownPtState, InternalItem> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:disabled","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:footer:selected","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:open","type":"PtValue | undefined","required":false},{"name":"pt:input:selected","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:open","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemDescription:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:open","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:open","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemText","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemText:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemText:open","type":"PtValue | undefined","required":false},{"name":"pt:itemText:selected","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list:open","type":"PtValue | undefined","required":false},{"name":"pt:list:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"queryDebounceTime","type":"number | undefined","required":false,"default":"300","description":"Debounce (ms) applied to the async re-fetch a `searchable` group fires as the\nuser types. Applies to every searchable group in the menu."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"150","description":"How long the transition has to last in milliseconds. Menus use the fast\ntransition (150) rather than the medium one (250) the other popovers\ndefault to: a menu is opened to pick one command and is gone again, so\nit answers faster than a panel the user reads or edits in."},{"name":"trigger","type":"DropdownTrigger | DropdownTrigger[] | undefined","required":false,"default":"\"click\"","description":"Interaction(s) that open the dropdown.\nAccepts a single trigger or an array to combine them.\n- `'click'` — left-click / tap (default)\n- `'contextMenu'` — right-click on desktop, long-press on mobile"},{"name":"width","type":"string | number | undefined","required":false,"default":"\"auto\"","description":"Width of the dropdown in pixels, percentage, or 'auto' to fit content."}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted once the menu has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the menu starts to close."},{"name":"item:selected","signature":"(value: any): void","description":"The user selected a row in a selectable group, at the click — also when a\ncontrolled companion's app then refuses the value. The payload is the\nrow's value (its `item-value` for pipeline groups, else its `value`) —\nsymmetric with `BbTable`'s `item:selected`."},{"name":"item:unselected","signature":"(value: any): void","description":"The user unselected a row (a multiple toggle, a `clearable` re-click, a\nchip ×, or the old value a single pick replaces). Payload is the item's\nresolved value, matching `item:selected`."},{"name":"show","signature":"(): void","description":"Emitted as soon as the menu (the popover, or the sheet on a phone) starts to open."},{"name":"shown","signature":"(): void","description":"Emitted once the menu is open and its open transition has finished."}],"slots":[{"name":"activator","type":"BbDropdownActivatorSlotProps","fields":["disabled?: boolean","loading: boolean","open: boolean","placement: Placement | \"cursor\"","props: BbDropdownActivatorProps"],"description":"The element that triggers the dropdown to open. Spread `props` onto your trigger element."},{"name":"default","type":"any","description":"Hosts `<BbDropdownGroup>` companions. They register their group with the\ndropdown and render nothing themselves."},{"name":"empty","type":"BbDropdownPlaceholderSlotProps","fields":["groupId?: string","text: string","error?: unknown"],"description":"Replaces the default \"no data\" placeholder row shown in a pipeline group\nthat resolved to no items. Rendered once per empty group."},{"name":"footer","type":"BbDropdownEdgeSlotProps","fields":["disabled?: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the bottom of the dropdown panel, outside the scroll\narea. Stays visible while the items scroll and is separated from them by a\ndivider — for action buttons."},{"name":"header","type":"BbDropdownEdgeSlotProps","fields":["disabled?: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the top of the dropdown panel, outside the scroll area.\nStays visible while the items scroll and is separated from them by a\ndivider — for a title or a filter field."},{"name":"item:append","type":"BbDropdownItemSlotProps","fields":["description?: string","disabled?: boolean","group: BbDropdownSlotGroup","groupTitle: boolean","level: number","index: number","item: InternalItem","loading: boolean","open: boolean","placement: Placement | \"cursor\"","selected: boolean","label: string"],"description":"The trailing region of every row (and group title line), replacing its\n`append:icon`. A named slot wins over it; the submenu chevron and the\ncheck on a selected row take its place."},{"name":"item:prepend","type":"BbDropdownItemSlotProps","fields":["description?: string","disabled?: boolean","group: BbDropdownSlotGroup","groupTitle: boolean","level: number","index: number","item: InternalItem","loading: boolean","open: boolean","placement: Placement | \"cursor\"","selected: boolean","label: string"],"description":"The leading region of every row (and group title line), replacing its\n`prepend:icon`. A row's own or its group's named slot wins over it."},{"name":"loading","type":"BbDropdownPlaceholderSlotProps","fields":["groupId?: string","text: string","error?: unknown"],"description":"Replaces the default loading placeholder row shown in a pipeline group\nwhile its async items load. Rendered once per loading group."},{"name":"<value>","type":"BbDropdownItemSlotProps","description":"One row's content (label and description), by its value; in a fetched group, by its resolved `itemValue`.","dynamic":true},{"name":"<value>:prepend","type":"BbDropdownItemSlotProps","description":"One row's leading region; replaces its `prepend:icon`.","dynamic":true},{"name":"<value>:append","type":"BbDropdownItemSlotProps","description":"One row's trailing region; replaces its `append:icon` and its submenu chevron. The check takes its place on the selected row.","dynamic":true},{"name":"<groupId>:item","type":"BbDropdownItemSlotProps","description":"The content of every row of that group, and no other; a row's own `#<value>` still wins.","dynamic":true},{"name":"<groupId>:item:prepend","type":"BbDropdownItemSlotProps","description":"The leading region of every row of that group — e.g. an avatar per record, drawn from `item.meta`, while other rows keep their `prepend:icon`.","dynamic":true},{"name":"<groupId>:item:append","type":"BbDropdownItemSlotProps","description":"The trailing region of every row of that group; replaces their `append:icon`. The check takes its place on the selected row.","dynamic":true},{"name":"<groupId>","type":"BbDropdownItemSlotProps","description":"That group's title line (the group is passed as `item`, `groupTitle` is `true`).","dynamic":true},{"name":"<groupId>:prepend","type":"BbDropdownItemSlotProps","description":"The leading region of that group's title line.","dynamic":true},{"name":"<groupId>:append","type":"BbDropdownItemSlotProps","description":"The trailing region of that group's title line.","dynamic":true}],"exposed":[],"models":[],"cssProps":[{"name":"--bg","value":"var(--bb-panel)","selector":".bb-dropdown__group-search"},{"name":"--menu-inset","value":"4px","selector":".bb-dropdown","description":"Inset between the menu's outer chrome and its first item — owned here and * consumed by both `.bb-dropdown__list`'s padding and the submenu * lead-in below, so the two can never drift apart."}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The menu surface you see — the bordered flyout box on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet the menu becomes on a phone (the `BbOffCanvas` root) — never the desktop surface. Applied after `panel`, so it wins a conflict there."},{"name":"header","description":"The menu's header band."},{"name":"footer","description":"The menu's footer band."},{"name":"input","description":"A searchable group's search field — a broadcast: it lands on every searchable group's field, desktop and phone alike. Its magnifier glyph is chrome."},{"name":"list","description":"The top-level items container between the bands — the node that lays the entries out (a flex column with a 1px gap; on a phone, the sheet's items container). A submenu's list is not reached. Groups, headings and dividers are not parts."},{"name":"item","description":"One menu entry, submenus included — a broadcast resolved per entry. Also takes a per-item function, called with the entry."},{"name":"itemText","description":"An entry's label (its `label`) — resolved with that entry's states. A per-entry `#<value>` slot replaces it. Also takes a per-item function."},{"name":"itemIcon","description":"An entry's prepend / append icons — resolved with that entry's states. Also takes a per-item function."},{"name":"itemDescription","description":"An entry's muted second line (its `description`) — resolved with that entry's states. A per-entry `#<value>` slot replaces it. Also takes a per-item function."}],"states":[{"name":"selected","description":"Per node, on the entry parts: a selectable group's checked entry."},{"name":"disabled","description":"Per node, on the entry parts: an entry that is disabled."},{"name":"open","description":"Component-wide: the menu is open."}]},"tree":{"bindings":[{"part":"panel","target":"CommonPopover"},{"part":"root","target":"CommonPopover"},{"part":"header","target":"div.bb-dropdown__header"},{"part":"list","target":"span.bb-dropdown__list"},{"part":"footer","target":"div.bb-dropdown__footer"}],"nodes":[{"name":"CommonPopover","kind":"internal"},{"name":"BbDropdownList","kind":"internal","children":[{"name":"BbBadge","kind":"public","vocabulary":"BbBadge","bindings":[{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"button.bb-badge__clear"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-badge"]},{"name":"--fg","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--bw","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--border-color","documented":false,"readBy":["bb-badge"]},{"name":"--ring-color","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--ring-size","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--min-size-md","documented":true,"readBy":["bb-badge"]},{"name":"--min-size","documented":true,"readBy":["bb-badge"]},{"name":"--elev","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--r","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--fs","documented":true,"readBy":["bb-badge"]},{"name":"--icon-size","documented":true,"readBy":["bb-badge__icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge__clear"]},{"name":"--gap","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--px","documented":true,"readBy":["bb-badge","bb-badge--icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge--clearable"]},{"name":"--clear-size","documented":true,"readBy":["bb-badge__clear","bb-icon"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--pad-left","documented":true,"readBy":["bb-badge__body"]},{"name":"--pad-right","documented":false,"readBy":["bb-badge__body","bb-badge__clear"]},{"name":"--size","documented":false}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"CommonPopover","kind":"internal","repeated":true},{"name":"BbDropdownList","kind":"internal","repeated":true}]},{"name":"AdaptiveDropdown","kind":"internal","forwards":[{"to":"BbOffCanvas","mapping":"{ header: 'header', footer: 'footer', panel: 'root', sheet: 'root' }"}],"children":[{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"BbSmoothHeight","kind":"public"},{"name":"BbButton","kind":"public","vocabulary":"BbButton","bindings":[{"part":"root","target":"BbBaseButton"},{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"text","target":"span.bb-button__text"}],"cssProps":[{"name":"--h-xs","documented":true,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--icon-size-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--px-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--fs-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--r-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--gap-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--h-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--icon-size-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--px-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--fs-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--r-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--gap-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--h-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--icon-size-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--px-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--fs-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--r-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--gap-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--h-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--icon-size-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--px-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--fs-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--r-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--gap-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--h-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--icon-size-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--px-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--fs-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--r-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--gap-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--h-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--icon-size-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--px-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--fs-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--r-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--gap-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--h","documented":true,"readBy":["bb-button","bb-button--icon"]},{"name":"--icon-size","documented":true,"readBy":["bb-button__text","bb-spinner","bb-button__icon","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--px","documented":true,"readBy":["bb-button","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--fs","documented":true,"readBy":["bb-button"]},{"name":"--r","documented":true,"readBy":["bb-button"]},{"name":"--gap","documented":true,"readBy":["bb-button","bb-button__text","bb-spinner"]},{"name":"--bg","documented":true,"readBy":["bb-button"]},{"name":"--bg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg","documented":true,"readBy":["bb-button"]},{"name":"--border-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-size","documented":true,"readBy":["bb-button"]},{"name":"--bw","documented":true,"readBy":["bb-button"]},{"name":"--fg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--opacity-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--elev-tier","documented":true,"readBy":["bb-button--primary","bb-button--secondary","bb-button--outline","bb-button--destructive"]},{"name":"--elev","documented":true,"readBy":["bb-button"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]},{"name":"BbSpinner","kind":"public","repeated":true}]},{"name":"BbDropdownList","kind":"internal","repeated":true}]},{"name":"DropdownPipelineResolver","kind":"internal"}]},"css":{"classes":{"bb-dropdown":["","--adaptive","--compact","--mobile","--submenu","__adaptive-body","__adaptive-menu","__divider","__footer","__group-items","__group-items--capped","__group-items--loading","__group-loading","__group-search","__group-title","__group-title--variant-*","__group-title--variant-destructive","__header","__item","__item--description","__item--has-submenu","__item--selected","__item--variant-*","__item--variant-destructive","__item-description","__item-icon","__item-text","__list","__nav","__nav--drill","__nav-back","__nav-gutter","__nav-title","__panel","__panel--reserve-check","__placeholder","__placeholder--*","__placeholder--failed","__placeholder-icon","__search-icon","__search-input","__sheet","__sheet-chip","__sheet-chips","__sheet-selection"],"bb-dropdown-escape":[""],"bb-dropdown-nav-back":[""],"bb-dropdown-nav-back-enter-active":[""],"bb-dropdown-nav-back-enter-from":[""],"bb-dropdown-nav-back-leave-active":[""],"bb-dropdown-nav-back-leave-to":[""],"bb-dropdown-nav-forward":[""],"bb-dropdown-nav-forward-enter-active":[""],"bb-dropdown-nav-forward-enter-from":[""],"bb-dropdown-nav-forward-leave-active":[""],"bb-dropdown-nav-forward-leave-to":[""]},"locals":["--bg","--bubble-border-w","--color-gray-200","--dialog-title-fs","--max-h","--menu-inset","--py","--sheet-option-fs","--sheet-row-h","--size","--submenu-scale","--transition-duration","--translate-x-coefficient","--w"]},"attrTargets":["div","dialog"],"removed":[{"name":"arrowPadding","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"remove"}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"loading","new":null,"surface":"method","hint":"read `loading` from the activator slot scope (`#activator=\"{ loading }\"`) instead of a template ref","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"manual"}},{"name":"items[].key","new":"items[].value","surface":"item","hint":"a row's identity: its `v-model` value (any type, compared by hash) and its `#<value>` slots; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"rename"}},{"name":"items[].text","new":"items[].label","surface":"item","hint":"a row's text; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"rename"}},{"name":"items[group].key","new":"items[group].id","surface":"item","hint":"a group's identity, the same word as `<BbDropdownGroup id>`; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-dropdown.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}}]},
|
|
494
494
|
{"name":"BbDropdownButton","group":"Overlay","description":"A button with primary action and all other actions collected in a dropdown.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbDropdownButton.md","source":"ai/source/BbDropdownButton.md","props":[{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile (below `config.mobileMaxWidth`), renders the menu as a bottom\nsheet that drills into submenus one level at a time instead of hover\nflyouts; slots and selection are unchanged. Unset: the global\n`config.adaptive`."},{"name":"append:icon","type":"string | undefined","required":false,"description":"Icon to be added on the right of the text."},{"name":"block","type":"boolean | undefined","required":false,"default":"false","description":"Displays the component as full width."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density, the `BbSelect` ladder: flyout rows 28px → 24px, sheet\nrows 44px → 36px (a sheet row stays a touch target). The label size does\nnot change."},{"name":"disableAutoLoading","type":"boolean | undefined","required":false,"default":"false","description":"Disables the automatic loading state that tracks async actions\n(enabled by default). Only affects the main action button: the split\ntoggle half still mirrors the dropdown's internal async-action loading\nstate."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component"},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the menu panel at mount instead of on the first open (the phone\nsheet's too), and keeps its rows after a close. Without it the rows mount\non each open and go once the menu has closed."},{"name":"id","type":"string | undefined","required":false,"description":"Names this dropdown: the activator's id (unless it already has one),\nthe menu's `menu_<id>`, and the key `useBbDropdownContext(id)` and a\ncompanion `BbDropdownGroup` pair by. Generated when omitted."},{"name":"items","type":"BbDropdownItem[]","required":true,"default":"[]","description":"The menu rows, each a `BbBaseButton` (`button`, `a` or `router-link`): a\nflat array for one group, nested arrays for divider-separated groups, or\n`InternalGroup` objects for titled / selectable sections. A row's own\n`items` opens a submenu."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Triggers a loading indicator."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the floating container will maintain from the activator."},{"name":"padding","type":"number | undefined","required":false,"default":"10","description":"Minimum empty space to keep from the edge of the page"},{"name":"placement","type":"Placement | \"cursor\" | undefined","required":false,"default":"'bottom'","values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end","cursor"],"description":"Position of the dropdown relative to the activator.\nUse `'cursor'` to anchor at the mouse/touch coordinates.\n(No arrow is drawn either way — arrows are tooltip-only in v3.)"},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Icon to be added on the left of the text."},{"name":"pt","type":"BbDropdownButtonPtMap | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:disabled","type":"PtValue | undefined","required":false},{"name":"pt:footer:loading","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:loading","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:open","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:loading","type":"PtValue | undefined","required":false},{"name":"pt:input:open","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownButtonPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:loading","type":"PtValue | undefined","required":false},{"name":"pt:item:open","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownButtonPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemDescription:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:loading","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:open","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownButtonPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:loading","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:open","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemText","type":"PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownButtonPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemText:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemText:loading","type":"PtValue | undefined","required":false},{"name":"pt:itemText:open","type":"PtValue | undefined","required":false},{"name":"pt:itemText:selected","type":"PtValue | undefined","required":false},{"name":"pt:main","type":"PtValue | undefined","required":false},{"name":"pt:main:disabled","type":"PtValue | undefined","required":false},{"name":"pt:main:loading","type":"PtValue | undefined","required":false},{"name":"pt:main:open","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:loading","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:loading","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:disabled","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner:open","type":"PtValue | undefined","required":false},{"name":"pt:text","type":"PtValue | undefined","required":false},{"name":"pt:text:disabled","type":"PtValue | undefined","required":false},{"name":"pt:text:loading","type":"PtValue | undefined","required":false},{"name":"pt:text:open","type":"PtValue | undefined","required":false},{"name":"pt:toggle","type":"PtValue | undefined","required":false},{"name":"pt:toggle:disabled","type":"PtValue | undefined","required":false},{"name":"pt:toggle:loading","type":"PtValue | undefined","required":false},{"name":"pt:toggle:open","type":"PtValue | undefined","required":false},{"name":"size","type":"Responsive<Sizes> | undefined","required":false,"default":"\"md\"","description":"Sets the size of the button. When the value is a string, it will be applied to all screen sizes.\nOtherwise, it will be applied to the screen size specified by the object."},{"name":"toggle:icon","type":"string | undefined","required":false,"description":"Replaces the chevron shown inside the dropdown toggle button.\nA constrained alternative to a slot: only the toggle's icon changes, so\nthe button keeps its semantics. Named after the part it sits in (the\n`toggle`), the way `prepend:icon` / `append:icon` name theirs."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"150","description":"How long the transition has to last in milliseconds. Menus use the fast\ntransition (150) rather than the medium one (250) the other popovers\ndefault to: a menu is opened to pick one command and is gone again, so\nit answers faster than a panel the user reads or edits in."},{"name":"variant","type":"ButtonVariantType | undefined","required":false,"default":"\"primary\"","values":["outline","primary","destructive","secondary","none","ghost","link"],"description":"Visual variant shared by both buttons of the split control. `'none'`\ntakes no look (you own hover, focus and disabled); register a real\none with the plugin's `buttonVariants` and style\n`.bb-button--<name>`."},{"name":"width","type":"string | number | undefined","required":false,"default":"'auto'","description":"Width of the dropdown in pixels, percentage, or 'auto' to fit content."}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted once the menu has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the menu starts to close."},{"name":"item:selected","signature":"(value: any): void","description":"A row of a selectable group was selected — the menu's own event,\nre-emitted with the same payload (the item's resolved value)."},{"name":"item:unselected","signature":"(value: any): void","description":"A row of a selectable group was unselected (same payload as above)."},{"name":"show","signature":"(): void","description":"Emitted as soon as the menu (the popover, or the sheet on a phone) starts to open."},{"name":"shown","signature":"(): void","description":"Emitted once the menu is open and its open transition has finished."}],"slots":[{"name":"default","type":"any","description":"Companion content forwarded into the dropdown (e.g. `<BbDropdownGroup>`)."},{"name":"empty","type":"BbDropdownPlaceholderSlotProps","fields":["groupId?: string","text: string","error?: unknown"],"description":"Replaces the default \"no data\" placeholder row shown in a pipeline group\nthat resolved to no items. Rendered once per empty group. Forwarded to the\nunderlying `BbDropdown`."},{"name":"footer","type":"BbDropdownButtonEdgeSlotProps","fields":["disabled?: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the bottom of the dropdown panel, outside the scroll area."},{"name":"header","type":"BbDropdownButtonEdgeSlotProps","fields":["disabled?: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the top of the dropdown panel, outside the scroll area."},{"name":"item:append","type":"BbDropdownButtonItemSlotProps","fields":["disabled?: boolean","index: number","item: InternalItem","open: boolean","placement: Placement | \"cursor\"","label: string"],"description":"The trailing region of every menu row, replacing its `append:icon`; the\nsubmenu chevron and the check on a selected row take its place\n(BbDropdown's rules)."},{"name":"item:prepend","type":"BbDropdownButtonItemSlotProps","fields":["disabled?: boolean","index: number","item: InternalItem","open: boolean","placement: Placement | \"cursor\"","label: string"],"description":"The leading region of every menu row, replacing its `prepend:icon`\n(BbDropdown's rules)."},{"name":"loading","type":"BbDropdownPlaceholderSlotProps","fields":["groupId?: string","text: string","error?: unknown"],"description":"Replaces the default loading placeholder row shown in a pipeline group\nwhile its async items load. Rendered once per loading group. Forwarded to\nthe underlying `BbDropdown`."},{"name":"<value>","type":"BbDropdownItemSlotProps","description":"One row's content (label and description), by its value; in a fetched group, by its resolved `itemValue`.","dynamic":true},{"name":"<value>:prepend","type":"BbDropdownItemSlotProps","description":"One row's leading region; replaces its `prepend:icon`.","dynamic":true},{"name":"<value>:append","type":"BbDropdownItemSlotProps","description":"One row's trailing region; replaces its `append:icon` and its submenu chevron. The check takes its place on the selected row.","dynamic":true},{"name":"<groupId>:item","type":"BbDropdownItemSlotProps","description":"The content of every row of that group, and no other; a row's own `#<value>` still wins.","dynamic":true},{"name":"<groupId>:item:prepend","type":"BbDropdownItemSlotProps","description":"The leading region of every row of that group — e.g. an avatar per record, drawn from `item.meta`, while other rows keep their `prepend:icon`.","dynamic":true},{"name":"<groupId>:item:append","type":"BbDropdownItemSlotProps","description":"The trailing region of every row of that group; replaces their `append:icon`. The check takes its place on the selected row.","dynamic":true},{"name":"<groupId>","type":"BbDropdownItemSlotProps","description":"That group's title line (the group is passed as `item`, `groupTitle` is `true`).","dynamic":true},{"name":"<groupId>:prepend","type":"BbDropdownItemSlotProps","description":"The leading region of that group's title line.","dynamic":true},{"name":"<groupId>:append","type":"BbDropdownItemSlotProps","description":"The trailing region of that group's title line.","dynamic":true}],"exposed":[],"models":[],"pt":{"parts":[{"name":"root","description":"The group wrapper around the main button and the toggle."},{"name":"main","description":"The main (action) button, the left half — handed to it as its own `pt:root`."},{"name":"toggle","description":"The toggle button that opens the menu, the right half — handed to it as its own `pt:root`. Pairs with `toggle:icon`."},{"name":"icon","description":"The main button's content icons — handed to it as its own `pt:icon`. The toggle's chevron is chrome."},{"name":"spinner","description":"The main button's loading spinner."},{"name":"text","description":"The main button's label span."},{"name":"panel","description":"The menu surface (the flyout box on desktop, the sheet itself on a phone) — handed to the `BbDropdown`."},{"name":"sheet","description":"The bottom sheet the menu becomes on a phone only."},{"name":"header","description":"The band around your `#header` slot: at the top of the menu on desktop, the sheet's header on a phone — handed to the `BbDropdown`."},{"name":"footer","description":"The band around your `#footer` slot: at the bottom of the menu on desktop, the sheet's footer on a phone — handed to the `BbDropdown`."},{"name":"input","description":"A searchable group's search field in the menu — a broadcast, every searchable group's field — handed to the `BbDropdown` as its own `pt:input`."},{"name":"item","description":"One menu entry, submenus included — a broadcast resolved per entry. Also takes a per-item function, called with the entry."},{"name":"itemText","description":"An entry's label (its `label`) — resolved with that entry's states. A per-entry `#<value>` slot replaces it. Also takes a per-item function."},{"name":"itemIcon","description":"An entry's prepend / append icons — resolved with that entry's states. Also takes a per-item function."},{"name":"itemDescription","description":"An entry's muted second line (its `description`) — resolved with that entry's states. A per-entry `#<value>` slot replaces it. Also takes a per-item function."}],"states":[{"name":"selected","description":"Per node, on the entry parts only (`item`, `itemText`, `itemIcon`, `itemDescription`): a selectable group's checked entry. `pt:root:selected` is a type error, not a silent no-op."},{"name":"disabled","description":"Component-wide while the control is `disabled`; also per node, on the entry parts: a menu entry that is disabled."},{"name":"open","description":"Component-wide: the menu is open."},{"name":"loading","description":"Component-wide: `loading` is on — the main button shows its spinner."}]},"tree":{"forwards":[{"to":"BbButton","mapping":"{ main: 'root', icon: 'icon', spinner: 'spinner', text: 'text' }"},{"to":"BbDropdown","mapping":"{ panel: 'panel', sheet: 'sheet', header: 'header', footer: 'footer', input: 'input', item: 'item', itemText: 'itemText', itemIcon: 'itemIcon', itemDescription: 'itemDescription' }"},{"to":"BbButton","mapping":"{ toggle: 'root' }"}],"nodes":[{"name":"BbButton","kind":"public","vocabulary":"BbButton","bindings":[{"part":"root","target":"BbBaseButton"},{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"text","target":"span.bb-button__text"}],"cssProps":[{"name":"--h-xs","documented":true,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--icon-size-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--px-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--fs-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--r-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--gap-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--h-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--icon-size-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--px-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--fs-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--r-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--gap-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--h-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--icon-size-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--px-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--fs-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--r-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--gap-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--h-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--icon-size-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--px-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--fs-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--r-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--gap-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--h-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--icon-size-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--px-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--fs-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--r-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--gap-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--h-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--icon-size-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--px-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--fs-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--r-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--gap-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--h","documented":true,"readBy":["bb-button","bb-button--icon"]},{"name":"--icon-size","documented":true,"readBy":["bb-button__text","bb-spinner","bb-button__icon","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--px","documented":true,"readBy":["bb-button","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--fs","documented":true,"readBy":["bb-button"]},{"name":"--r","documented":true,"readBy":["bb-button"]},{"name":"--gap","documented":true,"readBy":["bb-button","bb-button__text","bb-spinner"]},{"name":"--bg","documented":true,"readBy":["bb-button"]},{"name":"--bg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg","documented":true,"readBy":["bb-button"]},{"name":"--border-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-size","documented":true,"readBy":["bb-button"]},{"name":"--bw","documented":true,"readBy":["bb-button"]},{"name":"--fg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--opacity-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--elev-tier","documented":true,"readBy":["bb-button--primary","bb-button--secondary","bb-button--outline","bb-button--destructive"]},{"name":"--elev","documented":true,"readBy":["bb-button"]}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]},{"name":"BbDropdown","kind":"public","vocabulary":"BbDropdown","bindings":[{"part":"panel","target":"CommonPopover"},{"part":"root","target":"CommonPopover"},{"part":"header","target":"div.bb-dropdown__header"},{"part":"list","target":"span.bb-dropdown__list"},{"part":"footer","target":"div.bb-dropdown__footer"}],"cssProps":[{"name":"--bg","documented":false,"readBy":["bb-dropdown__group-search"]},{"name":"--menu-inset","documented":true,"readBy":["bb-common-popover__bubble","bb-dropdown__group-search","bb-dropdown__list","bb-dropdown__placeholder--failed","bb-dropdown__divider"]}],"children":[{"name":"CommonPopover","kind":"internal"},{"name":"BbDropdownList","kind":"internal","children":[{"name":"BbBadge","kind":"public","vocabulary":"BbBadge","bindings":[{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"button.bb-badge__clear"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-badge"]},{"name":"--fg","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--bw","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--border-color","documented":false,"readBy":["bb-badge"]},{"name":"--ring-color","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--ring-size","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--min-size-md","documented":true,"readBy":["bb-badge"]},{"name":"--min-size","documented":true,"readBy":["bb-badge"]},{"name":"--elev","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--r","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--fs","documented":true,"readBy":["bb-badge"]},{"name":"--icon-size","documented":true,"readBy":["bb-badge__icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge__clear"]},{"name":"--gap","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--px","documented":true,"readBy":["bb-badge","bb-badge--icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge--clearable"]},{"name":"--clear-size","documented":true,"readBy":["bb-badge__clear","bb-icon"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--pad-left","documented":true,"readBy":["bb-badge__body"]},{"name":"--pad-right","documented":false,"readBy":["bb-badge__body","bb-badge__clear"]},{"name":"--size","documented":false}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"CommonPopover","kind":"internal","repeated":true},{"name":"BbDropdownList","kind":"internal","repeated":true}]},{"name":"AdaptiveDropdown","kind":"internal","forwards":[{"to":"BbOffCanvas","mapping":"{ header: 'header', footer: 'footer', panel: 'root', sheet: 'root' }"}],"children":[{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"BbSmoothHeight","kind":"public"},{"name":"BbButton","kind":"public","repeated":true,"cssProps":[{"name":"--h-xs","documented":true,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--icon-size-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--px-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--fs-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--r-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--gap-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--h-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--icon-size-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--px-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--fs-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--r-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--gap-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--h-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--icon-size-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--px-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--fs-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--r-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--gap-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--h-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--icon-size-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--px-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--fs-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--r-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--gap-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--h-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--icon-size-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--px-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--fs-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--r-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--gap-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--h-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--icon-size-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--px-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--fs-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--r-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--gap-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--h","documented":true,"readBy":["bb-button","bb-button--icon"]},{"name":"--icon-size","documented":true,"readBy":["bb-button__text","bb-spinner","bb-button__icon","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--px","documented":true,"readBy":["bb-button","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--fs","documented":true,"readBy":["bb-button"]},{"name":"--r","documented":true,"readBy":["bb-button"]},{"name":"--gap","documented":true,"readBy":["bb-button","bb-button__text","bb-spinner"]},{"name":"--bg","documented":true,"readBy":["bb-button"]},{"name":"--bg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg","documented":true,"readBy":["bb-button"]},{"name":"--border-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-size","documented":true,"readBy":["bb-button"]},{"name":"--bw","documented":true,"readBy":["bb-button"]},{"name":"--fg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--opacity-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--elev-tier","documented":true,"readBy":["bb-button--primary","bb-button--secondary","bb-button--outline","bb-button--destructive"]},{"name":"--elev","documented":true,"readBy":["bb-button"]}]},{"name":"BbDropdownList","kind":"internal","repeated":true}]},{"name":"DropdownPipelineResolver","kind":"internal"}]}]},"css":{"classes":{"bb-dropdown-button":["","--block","__chevron","__main","__toggle"]},"locals":["--color-gray-200"]},"attrTargets":["span"],"removed":[{"name":"arrowPadding","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dropdown-button.md","silent":true,"fix":{"kind":"remove"}},{"name":"autoLoading","new":"disableAutoLoading","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dropdown-button.md","silent":true,"fix":{"kind":"invert"}},{"name":"theme","new":"variant","since":"3.0.0-beta.15","migration":"ai/guides/migration/components/bb-dropdown-button.md","silent":true,"fix":{"kind":"rename"}},{"name":"right:icon","new":"toggle:icon","since":"3.0.0-beta.35","migration":"ai/guides/migration/components/bb-dropdown-button.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"items[].key","new":"items[].value","surface":"item","hint":"a row's identity: its `v-model` value (any type, compared by hash) and its `#<value>` slots; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-dropdown-button.md","silent":true,"fix":{"kind":"rename"}},{"name":"items[].text","new":"items[].label","surface":"item","hint":"a row's text; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-dropdown-button.md","silent":true,"fix":{"kind":"rename"}},{"name":"items[group].key","new":"items[group].id","surface":"item","hint":"a group's identity, the same word as `<BbDropdownGroup id>`; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-dropdown-button.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"autoLoading","to":"disableAutoLoading","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-dropdown-button.md","fix":{"kind":"invert"}},{"from":"theme","to":"variant","since":"3.0.0-beta.15","migration":"ai/guides/migration/components/bb-dropdown-button.md","fix":{"kind":"rename"}},{"from":"right:icon","to":"toggle:icon","since":"3.0.0-beta.35","migration":"ai/guides/migration/components/bb-dropdown-button.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}}]},
|
|
495
495
|
{"name":"BbDropdownGroup","group":"Overlay","description":"Renderless v-model companion for a group declared in BbDropdown.items, bound by id.","referenceOnly":false,"hasGuide":false,"contract":"ai/BbDropdownGroup.md","source":"ai/source/BbDropdownGroup.md","props":[{"name":"id","type":"string","required":true,"description":"Identifier of the group to bind to — must match the `id` of a group\ndeclared in the host `BbDropdown`'s `items`."},{"name":"modelValue","type":"any","required":false,"description":"The group's selection: one value for a single group, an array for a\n`multiple` one. Read by the owning BbDropdown through the group's `id`."}],"events":[{"name":"item:selected","signature":"(value: any): void","description":"The user picked a row, at the click, a pick you then refuse included —\nwith the row's value (its `item-value` for pipeline groups, else its\n`value`), symmetric with `BbTable`. Your own `v-model` changes fire none."},{"name":"item:unselected","signature":"(value: any): void","description":"The user unpicked a row (or a single pick replaced it), with its resolved value."},{"name":"update:modelValue","signature":"(value: any): void","description":"The value a user change asks for (a pick, a chip ×, a coherence prune).\nWith a listener the group is controlled: the rows tick when you write the\nvalue, and ignoring it leaves them as they are."}],"slots":[{"name":"default","type":"{}"}],"exposed":[],"models":[{"name":"modelValue","type":"any"}]},
|
|
496
496
|
{"name":"BbDropzone","group":"Inputs","description":"Supports drag-and-drop file input flows.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbDropzone.md","source":"ai/source/BbDropzone.md","props":[{"name":"accept","type":"string[] | undefined","required":false,"description":"File filter: MIME types (`'image/png'`), wildcards (`'image/*'`),\nextensions (`'.png'`) or bare tokens (`'png'`, upgraded to the extension\nand its MIME type from the lazily imported `mime` database; files that\narrive earlier wait for it)."},{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component"},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"maxFiles","type":"number | undefined","required":false,"description":"Maximum number of acceptable files."},{"name":"maxSize","type":"number | undefined","required":false,"description":"Max size of the files in bytes."},{"name":"modelValue","type":"File | File[] | null | undefined","required":false,"description":"Used by v-model."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"false","description":"Allows the selection of multiple items."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"pt","type":"PtMap<BbDropzonePtPart, BbDropzonePtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:content","type":"PtValue | undefined","required":false},{"name":"pt:content:active","type":"PtValue | undefined","required":false},{"name":"pt:content:disabled","type":"PtValue | undefined","required":false},{"name":"pt:content:errors","type":"PtValue | undefined","required":false},{"name":"pt:content:readonly","type":"PtValue | undefined","required":false},{"name":"pt:content:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:active","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:active","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Shows the files without letting the user change them: drop, the file\npicker and the `open()` slot prop do nothing, while the input stays\nfocusable and a `name`d zone still submits its files (unlike `disabled`).\nYour slot renders the list, so hide your remove buttons with the\n`readonly` slot prop."},{"name":"rules","type":"RuleExpression<File | File[] | null>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"tag","type":"LayoutTag | undefined","required":false,"default":"\"div\"","values":["div","span"],"description":"Element rendered as the component's wrapper."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the dropzone, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the file input loses focus. Forwards the original DOM `FocusEvent`."},{"name":"error","signature":"(data: DropZoneError): void","description":"Emitted when a file validation error occurs (e.g. size, type, uniqueness, max count)."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the file input receives focus. Forwards the original DOM `FocusEvent`."},{"name":"update:modelValue","signature":"(value: File | File[] | null): void","description":"Emitted when the selected files change. Payload is the new file or file array."}],"slots":[{"name":"default","type":"BbDropzoneDefaultSlotProps","fields":["dragging: boolean","focused: boolean","id: string","labelId: string","open: () => void","readonly: boolean"],"description":"The drop zone area content. Renders inside the `<label>` that captures drag\nand file input events. It is a region, not a label: its text does not name\nthe input unless you mark one node with the `labelId` slot prop."}],"exposed":[],"models":[{"name":"modelValue","type":"File | File[] | null | undefined"}],"pt":{"parts":[{"name":"root","description":"The zone."},{"name":"content","description":"The drop region: the label that wraps the file input and your slot."},{"name":"message","description":"The errors / warnings region that holds a message — one part, on whichever is showing (errors win); an empty region never gets it."}],"states":[{"name":"readonly","description":"Component-wide: the zone is `readonly` — the files stay shown and submitted, the input stays focusable, nothing can be added."},{"name":"disabled","description":"Component-wide: the zone is `disabled`."},{"name":"warnings","description":"Component-wide: the zone shows warnings and no errors."},{"name":"errors","description":"Component-wide: the zone shows errors."},{"name":"active","description":"Component-wide: a drag is over the zone."}]},"tree":{"bindings":[{"part":"content","target":"label.bb-dropzone__content"},{"part":"message","target":"span.bb-dropzone__message"}],"nodes":[{"name":"BbSmoothHeight","kind":"public"}]},"css":{"classes":{"bb-dropzone":["","--disabled","--dragging","--errors","--focused","--readonly","--warnings","__content","__error","__errors","__message","__submittable-input","__submittable-label","__warning","__warnings"]},"locals":["--color-gray-200"]},"removed":[{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
497
497
|
{"name":"BbForm","group":"Inputs","description":"Form host for the form controls inside it: owns the vee-validate form (useForm), validates every field on submit, and emits `submit` with the collected values only when the form is valid. `schema` takes any Standard Schema (Zod, Valibot, ArkType, Yup) as it is; a failed submit focuses the first invalid field on screen and emits `invalid`. Server errors (a 422): `setErrors(errors)` from the slot or `useBbFormContext(id)` puts each on its field.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbForm.md","source":"ai/source/BbForm.md","props":[{"name":"disableSubmitLock","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the fields editable while a `@submit` promise is pending (by\ndefault every joined field is read-only until it settles; a `@submit`\nthat returns nothing never locks). Submit buttons spin either way."},{"name":"fieldErrors","type":"Record<string, unknown> | null | undefined","required":false,"description":"A server's validation errors by field path (Inertia's `form.errors`, a\nLaravel 422 body), shown on their fields for as long as they are in the\nobject. They never block a submit; a key no field has is in\n`unmatchedErrors`. A one-off message: `setErrors`."},{"name":"id","type":"string | undefined","required":false,"description":"Lets anything outside the form read and drive it through\n`useBbFormContext(id)` (a dialog footer, a toolbar, a leave guard). It is\nalso the `<form>`'s id, so `<button form=\"id\" type=\"submit\">` outside it\nsubmits it."},{"name":"keepValuesOnUnmount","type":"boolean | Ref<boolean, boolean> | undefined","required":false,"description":"Keep a field's value (and its place in `@submit`) when it unmounts —\nthe `v-if` wizard step you left, a collapsed section. Off, an unmounted\nfield drops out of the values."},{"name":"model","type":"Record<string, any> | undefined","required":false,"description":"The object the fields edit (`reactive()`, a `ref`, Pinia state, Inertia\n`useForm()`), written in place: bind it one way, `:model`, never\n`v-model`. A field without its own `v-model` reads and writes the value\nat its `name` path. Nothing is written on mount."},{"name":"schema","type":"MaybeRef<S | undefined>","required":false,"description":"One Standard Schema for the whole form (Zod, Valibot, ArkType, Yup, Joi,\nEffect), passed as is. Errors land on the field whose `name` is the issue\npath; `@submit` gets the typed output. Set it at mount (a `computed` may\nchange it); per-field `rules` are then ignored."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"description":"When the fields inside check themselves while the user works:\n`aggressive`, `balanced`, `lazy`, `submit-only` or `submit-live` (see\n`ValidationMode`). A field's own `validation-mode` wins. Unset, the app's\n`formControls.validationMode` applies (`'balanced'` by default)."}],"events":[{"name":"invalid","signature":"(payload: BbFormInvalidPayload): void","description":"Fired when a submit fails validation, after the form has focused the\nfirst invalid field that is on screen. `errors` also holds paths with no\nfield showing, so a wizard can jump to the step that has one."},{"name":"submit","signature":"(values: BbFormSubmitValues<S>): void","description":"Fired only when every field passes. Carries the values — with a schema,\nits parsed OUTPUT (transforms and coercions applied), typed from it."}],"slots":[{"name":"default","type":"{ touched: boolean; dirty: boolean; valid: boolean; pending: boolean; initialValues?: Partial<GenericObject> | undefined; errors: Record<string, string[]>; fields: Record<string, BbFormFieldEntry>; isSubmitting: boolean; removeField: (path: string) => void; resetForm: (state?: Partial<FormState<GenericObject>> | undefined, opts?: Partial<ResetFormOpts> | undefined) => void; setErrors: (serverErrors: BbFormServerErrors, options?: BbFormSetErrorsOptions) => void; snapshot: (next?: Record<string, unknown> | undefined) => void; submitCount: number; unmatchedErrors: Record<string, string[]>; validate: (opts?: Partial<ValidationOptions> | undefined) => Promise<FormValidationResult<GenericObject, GenericObject>>; values: GenericObject; }"}],"exposed":[{"name":"$el","type":"HTMLFormElement | null","description":"The rendered element."}],"models":[],"attrTargets":["form"],"removed":[{"name":"modelValue","new":"model","since":"3.0.0-beta.42","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"modelValue","to":"model","since":"3.0.0-beta.42","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}}]},
|
|
498
|
-
{"name":"BbHoverCard","group":"Overlay","description":"A rich preview card that opens on hover or keyboard focus (a person, an event, a link) — BbPopover's panel without the click; may hold commands that also exist elsewhere; also the v-bb-hover-card directive.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbHoverCard.md","source":"ai/source/BbHoverCard.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the activator slot is not rendered and the hover / focus\nlisteners are attached programmatically to the referenced element."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the card within a bounding element
|
|
498
|
+
{"name":"BbHoverCard","group":"Overlay","description":"A rich preview card that opens on hover or keyboard focus (a person, an event, a link) — BbPopover's panel without the click; may hold commands that also exist elsewhere; also the v-bb-hover-card directive.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbHoverCard.md","source":"ai/source/BbHoverCard.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the activator slot is not rendered and the hover / focus\nlisteners are attached programmatically to the referenced element."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the card within a bounding element: it stays inside it\nalongside its trigger (sideways for a card above or below); away from\nthe trigger it may pass the edge, and it flips at the viewport only.\nAccepts an HTMLElement, a Vue component ref, or a CSS selector string."},{"name":"delay","type":"number | undefined","required":false,"default":"350","description":"Milliseconds the pointer (or keyboard focus) rests on the activator\nbefore the card shows; longer than BbTooltip's, so passing over does not\nopen it. Closing has a fixed grace (guide § Timing and the safe zone)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component. Disabling an open card closes it."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the card's content at mount instead of on the first open."},{"name":"id","type":"string | undefined","required":false,"description":"The activator's id (the card is `bbhc_<id>`, and is labelled by it once it\nholds a control). Generated when omitted."},{"name":"modelValue","type":"boolean | undefined","required":false,"default":"false","description":"Used by v-model to open / close the card. A card with no `v-model` starts\nclosed and is driven by hover and keyboard focus."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the floating container will maintain from the activator."},{"name":"padding","type":"number | undefined","required":false,"default":"10","description":"Minimum empty space to keep from the edge of the page."},{"name":"placement","type":"Placement | undefined","required":false,"default":"\"bottom\"","values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end"],"description":"Position of the card relative to the activator."},{"name":"pt","type":"PtMap<BbHoverCardPtPart, \"open\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:content","type":"PtValue | undefined","required":false},{"name":"pt:content:open","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"scrollable","type":"boolean | undefined","required":false,"default":"false","description":"Caps the card height to the available viewport space and enables internal scrolling."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds."},{"name":"width","type":"string | number | undefined","required":false,"description":"Width of the card. Accepts pixels or percentage (relative to activator width)."}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted after the card is fully closed."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the card starts to close (model becomes false)."},{"name":"show","signature":"(): void","description":"Emitted as soon as the card starts to open (model becomes true)."},{"name":"shown","signature":"(): void","description":"Emitted after the card is fully opened. Focus never moves on open."},{"name":"update:modelValue","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"activator","type":"BbHoverCardActivatorSlotProps","fields":["disabled: boolean","open: boolean","placement: Placement","props: { 'aria-expanded'?: boolean | undefined; 'aria-controls'?: string | undefined; id: string; ref: (reference: unknown) => void; onPointerenter: (event: PointerEvent) => void; onPointerleave: (event: PointerEvent) => void; onFocusin: (event: FocusEvent) => void; onFocusout: (event: FocusEvent) => void; onKeydown: (event: KeyboardEvent) => void; onPointerdown: (event: PointerEvent) => void; onContextmenu: (event: MouseEvent) => void; }"],"description":"The element the card describes. Spread `props` onto it; it must be\nfocusable (a link or a button) so a keyboard user can open the card too."},{"name":"default","type":"BbHoverCardDefaultSlotProps","fields":["close: () => void","disabled: boolean","open: boolean","placement: Placement"],"description":"The card body."},{"name":"footer","type":"BbHoverCardDefaultSlotProps","fields":["close: () => void","disabled: boolean","open: boolean","placement: Placement"],"description":"Content pinned to the bottom of the card, outside the scroll region."},{"name":"header","type":"BbHoverCardDefaultSlotProps","fields":["close: () => void","disabled: boolean","open: boolean","placement: Placement"],"description":"Content pinned to the top of the card, outside the scroll region."}],"exposed":[],"models":[{"name":"modelValue","type":"boolean | undefined"}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here, and so does `role=\"group\"` once the card holds a control."},{"name":"panel","description":"The surface you see — the bordered box that paints the card and lays out its bands."},{"name":"header","description":"The header band."},{"name":"content","description":"The body band."},{"name":"footer","description":"The footer band."}],"states":[{"name":"open","description":"Component-wide: the card is open."}]},"tree":{"bindings":[{"part":"panel","target":"CommonPopover"},{"part":"root","target":"CommonPopover"},{"part":"header","target":"span.bb-hover-card__header"},{"part":"content","target":"span.bb-hover-card__content"},{"part":"footer","target":"span.bb-hover-card__footer"}],"nodes":[{"name":"CommonPopover","kind":"internal"}]},"css":{"classes":{"bb-hover-card":["","__content","__footer","__header","__panel","__panel--scrollable"]},"locals":["--color-gray-200","--max-h"]},"attrTargets":["root"]},
|
|
499
499
|
{"name":"BbHoverCardPortal","group":"Overlay","description":"Registers named slot content that `v-bb-hover-card=\"'name'\"` (or `{ portal: 'name' }`) renders in the card; slot `{ props, close }`.","referenceOnly":false,"hasGuide":false,"contract":"ai/BbHoverCardPortal.md","source":"ai/source/BbHoverCardPortal.md","props":[{"name":"name","type":"string","required":true,"description":"The name a `v-bb-hover-card` passes as its value (`\"'name'\"`) or as `portal: 'name'`."}],"events":[],"slots":[{"name":"default","type":"BbHoverCardPortalSlotProps","fields":["props: P","close: () => void"],"description":"The card's body. `props` is the directive's `portalProps`; `close` closes the card."}],"exposed":[],"models":[]},
|
|
500
500
|
{"name":"BbIcon","group":"Data Display","description":"Renders an icon either from the local icon folder or from a provider.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbIcon.md","source":"ai/source/BbIcon.md","props":[{"name":"icon","type":"string","required":true,"description":"Name of a registered icon to use, or a full raw `<svg>` string\n(e.g. an SVG file imported with `?raw`)."},{"name":"label","type":"string | undefined","required":false,"description":"Label of the icon for accessibility."},{"name":"pt","type":"PtMap<\"root\", never> | undefined","required":false,"description":"Passthrough, object form: `{ root: '…' }`. See the `pt:<part>` row."},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"size","type":"number | CssSize | keyof Sizes | undefined","required":false,"default":"\"md\"","description":"Defines the component size.\n\nAccepted values:\n- A key from the provided size map (`keyof T`), e.g. `'sm' | 'md' | 'lg'`\n- A custom CSS size string (e.g. `'20px'`, `'1.5rem'`, `'2em'`)\n- A number, typically interpreted as pixels by size parsers"}],"events":[],"slots":[],"exposed":[],"models":[],"cssProps":[{"name":"--w","value":"initial","selector":".bb-icon","description":"`--w` is set inline by BbIcon from the size prop. The `initial` default seals it: without it an ancestor's `--w` (e.g. a dropdown's width bridge) would inherit in and size the icon. The `--size` indirection stays so higher-specificity rules (e.g. `.bb-badge .bb-icon`) can re-point it."},{"name":"--size","value":"var(--w)","selector":".bb-icon"}],"pt":{"parts":[{"name":"root","description":"The `<svg>` itself; a `class` on the component lands here too. It is `pointer-events: none`, so a pointer listener here never fires."}],"states":[]},"css":{"classes":{"bb-icon":[""]},"locals":["--color-gray-200","--size","--w"]},"attrTargets":["svg"],"removed":[{"name":"color","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-icon.md","silent":true,"fix":{"kind":"manual"}},{"name":"type","new":"icon","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-icon.md","silent":false,"fix":{"kind":"rename"}}],"renamed":[{"from":"type","to":"icon","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-icon.md","fix":{"kind":"rename"}}]},
|
|
501
501
|
{"name":"BbIndicator","group":"Feedback","description":"Anchors a notification bubble (count/short text) or a dot over a wrapped element.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbIndicator.md","source":"ai/source/BbIndicator.md","props":[{"name":"bottom","type":"boolean | undefined","required":false,"default":"false","description":"Anchors the indicator to the bottom edge of the wrapped element instead of\nthe top."},{"name":"dot","type":"boolean | undefined","required":false,"default":"false","description":"Renders a small contentless dot instead of a labelled bubble. Takes\nprecedence over `text`."},{"name":"left","type":"boolean | undefined","required":false,"default":"false","description":"Anchors the indicator to the left edge of the wrapped element instead of\nthe right."},{"name":"max","type":"number | undefined","required":false,"description":"Caps a numeric `text` count: values above `max` render as `${max}+`\n(e.g. `max: 99` shows `99+`). Ignored for string `text`."},{"name":"pt","type":"PtMap<BbIndicatorPtPart, never> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:bubble","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"size","type":"keyof Sizes | undefined","required":false,"default":"\"md\"","values":["xs","sm","md","lg","xl","2xl"],"description":"Preset size of the indicator."},{"name":"text","type":"string | number | undefined","required":false,"description":"Content shown inside the indicator bubble. A `number` is accepted for count\nergonomics (e.g. `:text=\"unread\"`). When omitted the indicator renders only\nif `dot` is set."},{"name":"variant","type":"keyof IndicatorVariantRegistry | undefined","required":false,"default":"\"default\"","values":["destructive","warning","default","success","info"],"description":"Visual variant. `default` uses the primary color; `success`, `info`,\n`warning` and `destructive` map to the shared status colors.\nRegister more via the vite plugin `indicatorVariants` option and style\n`.bb-indicator--<variant>`."}],"events":[],"slots":[{"name":"default","type":"object","description":"The element the indicator is anchored to."}],"exposed":[],"models":[],"cssProps":[{"name":"--bg","value":"var(--bb-primary)","selector":".bb-indicator","description":"bubble fill"},{"name":"--fg","value":"var(--bb-primary-fg)","selector":".bb-indicator","description":"bubble text"},{"name":"--r","value":"999px","selector":".bb-indicator","description":"bubble corners; a dot is always a circle regardless"},{"name":"--bw","value":"0px","selector":".bb-indicator","description":"Bubble border. Off by default: a width of 0 leaves nothing to paint, so both this and --border-color have to be set."},{"name":"--border-color","value":"transparent","selector":".bb-indicator"},{"name":"--fs","value":"10px","selector":".bb-indicator","description":"bubble label, and the basis of --min-size"},{"name":"--min-size","value":"calc(var(--fs) * 1.4)","selector":".bb-indicator","description":"Floor for the bubble's height and width, so a one-digit count stays round"},{"name":"--dot-size","value":"6px","selector":".bb-indicator","description":"height and width in `dot` mode, where --min-size does not apply"},{"name":"--gap","value":"3px","selector":".bb-indicator","description":"gap between the bubble's children"},{"name":"--px","value":"4px","selector":".bb-indicator","description":"bubble side padding; widens the pill as the count grows"},{"name":"--offset","value":"calc(var(--min-size) * 0.35)","selector":".bb-indicator","description":"How far a bubble hangs outside the anchor's corner"},{"name":"--dot-offset","value":"calc(var(--dot-size) * 0.2)","selector":".bb-indicator","description":"the same overhang for a dot"},{"name":"--position-offset","value":"var(--offset)","selector":".bb-indicator","description":"The overhang actually applied — dot mode repoints it at --dot-offset"}],"pt":{"parts":[{"name":"root","description":"The anchor wrapper the bubble is positioned in. Sizing lives here: `size`, `--fs` and `--offset` (the corner overhang) are tokens on `root`."},{"name":"bubble","description":"The count or dot itself — rendered only while there is a `text` or `dot`. Put the look here, the sizing on `root`."}],"states":[]},"css":{"classes":{"bb-indicator":["","--*","--2xl","--bottom","--dot","--left","--lg","--sm","--xl","--xs","__bubble"],"bb-indicator-bubble":[""],"bb-indicator-bubble-enter-active":[""],"bb-indicator-bubble-enter-from":[""],"bb-indicator-bubble-leave-active":[""],"bb-indicator-bubble-leave-to":[""]},"locals":["--bg","--border-color","--bw","--color-gray-200","--dot-offset","--dot-size","--elev","--fg","--fs","--gap","--min-size","--offset","--position-offset","--px","--r"]},"attrTargets":["span"]},
|
|
502
502
|
{"name":"BbNumberInput","group":"Inputs","description":"Captures and validates numeric form values, emits a number value.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbNumberInput.md","source":"ai/source/BbNumberInput.md","props":[{"name":"append:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the end of the input."},{"name":"autocomplete","type":"string | undefined","required":false,"default":"\"off\"","description":"Guides the browser as to the type of information expected in the field."},{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Displays a clear button when the input has a value and is being interacted with."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-input-h`, `--bb-input-py` and\n`--bb-label-spacing-y` for their `-compact` twins on the field, so a\n`--bb-input-h` you set on the component is ignored while `compact` is on:\nsize a compact field with `--bb-input-h-compact` (and\n`--bb-input-py-compact`) instead."},{"name":"currency","type":"string | undefined","required":false,"description":"An ISO 4217 code (`'EUR'`): the amount shows the locale's way, symbol\ninside the text (`1.234,56 €`), leaving `#prefix` / `#suffix` free; the\nmodel is the number. Decimals default to the currency's; `minPrecision` /\n`maxPrecision` win. Not with `unit`."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"disableFormatting","type":"boolean | undefined","required":false,"default":"false","description":"Shows the number as typed (period decimal, no grouping), with `name` on\nthe visible input. Without it the field formats the locale's way while\ntyping (`10.005,6`) and posts the raw value (`10005.6`) through a hidden\ninput carrying `name`."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"floating\" | \"inside\" | undefined","required":false,"description":"Label rendering mode."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles."},{"name":"max","type":"number | undefined","required":false,"default":"Number.MAX_SAFE_INTEGER","description":"Maximum value cap."},{"name":"maxPrecision","type":"number | undefined","required":false,"default":"8","description":"Maximum precision of the number: fraction digits past it are refused as\ntyped (never rounded). With `currency`, the currency's own digits (`2`\nfor EUR, `0` for JPY, `3` for KWD), or `minPrecision` when that is larger."},{"name":"min","type":"number | undefined","required":false,"default":"Number.MIN_SAFE_INTEGER","description":"Minimum value cap. Applied on blur and on Enter (before a surrounding\nform submits), not while typing, so a value above a `min` greater than 1\ncan be typed digit by digit."},{"name":"minPrecision","type":"number | undefined","required":false,"default":"0","description":"Fraction digits always shown (`2`: `1` shows `1,00`), also while typing,\nwhere the padding zeros are placeholders; the model stays the number.\nAbove `maxPrecision` it gives way. Applies with `disableFormatting` too.\nWith `currency`: the currency's own digits."},{"name":"modelValue","type":"string | number | null | undefined","required":false,"default":"null","description":"Used by v-model."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"placeholder","type":"string | undefined","required":false,"description":"Text shown while the field is empty."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the start of the input."},{"name":"pt","type":"PtMap<TextControlPtPart, FormControlPtState> | undefined","required":false,"description":"Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same\nkeys as the `pt:*` attributes without the prefix. See the `pt:<part>` row."},{"name":"pt:box","type":"PtValue | undefined","required":false},{"name":"pt:box:disabled","type":"PtValue | undefined","required":false},{"name":"pt:box:errors","type":"PtValue | undefined","required":false},{"name":"pt:box:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:box:loading","type":"PtValue | undefined","required":false},{"name":"pt:box:readonly","type":"PtValue | undefined","required":false},{"name":"pt:box:warnings","type":"PtValue | undefined","required":false},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:errors","type":"PtValue | undefined","required":false},{"name":"pt:clear:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:clear:readonly","type":"PtValue | undefined","required":false},{"name":"pt:clear:warnings","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:errors","type":"PtValue | undefined","required":false},{"name":"pt:input:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:input:loading","type":"PtValue | undefined","required":false},{"name":"pt:input:readonly","type":"PtValue | undefined","required":false},{"name":"pt:input:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:prefix","type":"PtValue | undefined","required":false},{"name":"pt:prefix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:prefix:errors","type":"PtValue | undefined","required":false},{"name":"pt:prefix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:prefix:loading","type":"PtValue | undefined","required":false},{"name":"pt:prefix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:prefix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:disabled","type":"PtValue | undefined","required":false},{"name":"pt:spinner:errors","type":"PtValue | undefined","required":false},{"name":"pt:spinner:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner:readonly","type":"PtValue | undefined","required":false},{"name":"pt:spinner:warnings","type":"PtValue | undefined","required":false},{"name":"pt:suffix","type":"PtValue | undefined","required":false},{"name":"pt:suffix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:suffix:errors","type":"PtValue | undefined","required":false},{"name":"pt:suffix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:suffix:loading","type":"PtValue | undefined","required":false},{"name":"pt:suffix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:suffix:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and the input is swapped."},{"name":"rules","type":"RuleExpression<string | number | null>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"Incremental unit used by ArrowUp / ArrowDown and by the `increase` and `decrease` functions the slots receive.\nIt is NOT applied to manual input as a step of 5 would prevent the user from inserting a value like `115` because of rounding down."},{"name":"unit","type":"BbNumberUnit | undefined","required":false,"description":"A unit `Intl.NumberFormat` knows (`'kilogram'`, `'celsius'`,\n`'percent'`), shown the locale's way inside the text (`20 kg`). The model\nis the number you see: `percent` showing `15 %` holds `15`. Not with\n`currency` (which wins)."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"variant","type":"InputVariantType | undefined","required":false,"default":"'outline'","values":["outline","secondary","none","ghost"],"description":"Visual variant of the field box, with the `BbButton` names and tokens.\nColours only, so a form never reflows; `'ghost'` has no border in any\nstate, and `'none'` takes no look at all (you own hover, focus and the\nstates). Register more with the plugin's `inputVariants`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the native input loses focus.\nForwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when the native input fires a change event.\nForwards the original DOM `Event`."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when the input receives a click interaction.\nForwards the original DOM `MouseEvent`."},{"name":"compositionend","signature":"(event: CompositionEvent): void","description":"Emitted when a composition session ends (e.g. CJK IME confirmed).\nForwards the original DOM `CompositionEvent`."},{"name":"compositionstart","signature":"(event: CompositionEvent): void","description":"Emitted when a composition session starts (e.g. CJK IME begins).\nForwards the original DOM `CompositionEvent`."},{"name":"decrease","signature":"(value: number): void","description":"Emitted by the `decrease` helper with the clamped value after decrementing by one `step`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the native input gains focus.\nForwards the original DOM `FocusEvent`."},{"name":"increase","signature":"(value: number): void","description":"Emitted by the `increase` helper with the clamped value after incrementing by one `step`."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from the number input.\nForwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on the input.\nForwards the original DOM `KeyboardEvent`."},{"name":"keyup","signature":"(event: KeyboardEvent): void","description":"Emitted when a key is released over the input.\nForwards the original DOM `KeyboardEvent`."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is pressed over the input.\nForwards the original DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is released over the input.\nForwards the original DOM `MouseEvent`."},{"name":"paste","signature":"(event: ClipboardEvent): void","description":"Emitted when content is pasted into the input.\nForwards the original DOM `ClipboardEvent`."},{"name":"update:modelValue","signature":"(value: number | null): void","description":"Emitted on any value change with the parsed number or `null` when the field is empty."}],"slots":[{"name":"append","type":"BbNumberInputStepSlotProps","fields":["increase: () => void","decrease: () => void"],"description":"Content rendered after the number input, at the end of the inner container.\nTypically used to place increment/decrement buttons next to the input."},{"name":"append:outer","type":"BbNumberInputStepSlotProps","fields":["increase: () => void","decrease: () => void"],"description":"Content rendered after the entire input control, outside the input chrome."},{"name":"description","type":"BbNumberInputDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"label","type":"BbNumberInputLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default label text rendered above the number input."},{"name":"prefix","type":"BbNumberInputStepSlotProps","fields":["increase: () => void","decrease: () => void"],"description":"Inline content rendered at the start of the input field area, before the typed number."},{"name":"prepend","type":"BbNumberInputStepSlotProps","fields":["increase: () => void","decrease: () => void"],"description":"Content rendered before the number input, at the start of the inner container."},{"name":"prepend:outer","type":"BbNumberInputStepSlotProps","fields":["increase: () => void","decrease: () => void"],"description":"Content rendered before the entire input control, outside the input chrome."},{"name":"suffix","type":"BbNumberInputStepSlotProps","fields":["increase: () => void","decrease: () => void"],"description":"Inline content rendered at the end of the input field area, after the typed number."}],"exposed":[],"models":[{"name":"modelValue","type":"string | number | null | undefined"}],"cssProps":[{"name":"--border-color","value":"per variant","selector":"pt:box","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."}],"pt":{"parts":[{"name":"root","description":"The field's outer container: the label, the box and the lines under it."},{"name":"label","description":"The label text above the box (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line under the box. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"box","description":"The bordered box around the input — border, background and radius; the `variant` paints here."},{"name":"input","description":"The native input element inside the box."},{"name":"icon","description":"The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error / warning glyph) is never in it."},{"name":"spinner","description":"The spinner inside the box while `loading`."},{"name":"prefix","description":"The `#prefix` slot's wrapper, inside the box before the input."},{"name":"suffix","description":"The `#suffix` slot's wrapper, inside the box after the input."},{"name":"clear","description":"The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕."}],"states":[{"name":"hasValue","description":"Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`)."},{"name":"readonly","description":"Component-wide: the control is `readonly` — shown, focusable, not editable."},{"name":"disabled","description":"Component-wide: the control is `disabled`."},{"name":"warnings","description":"Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together."},{"name":"errors","description":"Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red."},{"name":"loading","description":"Component-wide: `loading` is on; the box shows its `spinner`."}]},"tree":{"bindings":[{"part":"controlAttrs","target":"input.bb-number-input__input"},{"part":"input","target":"input.bb-number-input__input"},{"part":"controlAttrs","target":"input"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbNumberInput","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"CommonFieldInput","kind":"internal","vocabulary":"BbNumberInput","bindings":[{"part":"box","target":"span.bb-field-input__box"},{"part":"prefix","target":"span.bb-field-input__prefix"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"ClearableButton"},{"part":"spinner","target":"BbSpinner"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--bg-hover","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-field-input__box"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix","bb-field-input__prepend-icon","bb-field-input__append-icon"]},{"name":"--border-color","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--border-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-size","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-color","documented":true,"readBy":["bb-field-input__box"]},{"name":"--elev","documented":true,"readBy":["bb-field-input__box"]},{"name":"--frost","documented":true,"readBy":["bb-field-input__box"]},{"name":"--inside-label-clearance","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix"]}],"children":[{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]}]},"css":{"classes":{"bb-number-input":["","__input"]},"locals":["--color-gray-200"]},"attrTargets":["div","input"],"removed":[{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"prepend-outer","new":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append-outer","new":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"prepend-outer","to":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append-outer","to":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
503
503
|
{"name":"BbOffCanvas","group":"Overlay","description":"Shows side-panel overlay content outside normal layout flow.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbOffCanvas.md","source":"ai/source/BbOffCanvas.md","props":[{"name":"description","type":"string | undefined","required":false,"description":"One short line under the title, muted (the shadcn `DialogDescription`\nshape), and the only element `aria-describedby` points at. Keep it to a\nsentence; anything longer belongs in the body."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Blocks EVERY user dismissal (backdrop, Escape, drag and the ✕; a denied\nattempt plays the deny nudge), e.g. while a save runs. `persistent`\nblocks only the backdrop and Escape. Closing through `v-model` still\nworks."},{"name":"draggable","type":"boolean | undefined","required":false,"default":"false","description":"Drag-to-dismiss: a ~50px swipe toward the exit edge (also from the body\nonce it is scrolled to its edge), with a grab handle as the cue. A\ngesture that starts inside `data-bb-no-drag` never drags the panel."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Render offcanvas content immediately instead of waiting for the first open."},{"name":"focusTarget","type":"string | undefined","required":false,"description":"CSS selector of the element to focus after opening. Defaults to the first tabbable element."},{"name":"fullscreen","type":"boolean | \"mobile\" | undefined","required":false,"description":"Display the offcanvas fullscreen. Use `'mobile'` to restrict fullscreen to small devices."},{"name":"hideClose","type":"boolean | undefined","required":false,"default":"false","description":"Hides the default close (×) button in the header (e.g. for a `persistent`\ndrawer you don't want dismissible — the × otherwise still closes a\npersistent drawer)."},{"name":"modelValue","type":"boolean | undefined","required":false,"default":"false","description":"Used by v-model to open / close the panel. A panel with no `v-model`\nstarts closed."},{"name":"persistent","type":"boolean | undefined","required":false,"default":"false","description":"Prevent closing via outside clicks, Escape key or drag-to-dismiss. The\nheader close (×) button STILL closes a persistent drawer — that is the\ndocumented escape hatch; combine with `hideClose` to remove it, or use\n`disabled` to block every dismissal. Programmatic close is still allowed."},{"name":"pt","type":"PtMap<BbOffCanvasPtPart, BbOffCanvasPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:close","type":"PtValue | undefined","required":false},{"name":"pt:close:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:close:open","type":"PtValue | undefined","required":false},{"name":"pt:content","type":"PtValue | undefined","required":false},{"name":"pt:content:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:content:open","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:description:open","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:title","type":"PtValue | undefined","required":false},{"name":"pt:title:fullscreen","type":"PtValue | undefined","required":false},{"name":"pt:title:open","type":"PtValue | undefined","required":false},{"name":"side","type":"\"left\" | \"top\" | \"bottom\" | \"right\" | undefined","required":false,"default":"\"left\"","description":"Which viewport edge the offcanvas docks to (and slides in from)."},{"name":"size","type":"Responsive<OffCanvasSize> | undefined","required":false,"default":"\"sm\"","description":"Controls the maximum size of the offcanvas panel. Accepts named presets from `'xs'` to `'2xl'`,\n`'auto'`, a custom CSS size string, or a numeric pixel value — or a\nper-breakpoint map (e.g. `{ default: 'sm', lg: 'lg' }`) to switch responsively."},{"name":"stack","type":"string | undefined","required":false,"description":"Name of the stack this drawer belongs to. Drawers sharing the same `stack`\nvalue step back behind one another as later ones open; drawers in different\nstacks never affect each other. When omitted, the drawer stacks with nothing."},{"name":"stackGap","type":"number | undefined","required":false,"default":"60","description":"Pixels each stacked parent drawer shifts inward when a child opens on top,\nleaving a peeking band of the parent visible."},{"name":"title","type":"string | undefined","required":false,"description":"Title text announced to assistive technologies. If omitted, no header is rendered and\naccessibility must be handled manually."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Controls the duration of the open and close animations."}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted after the close transition completes and the offcanvas is fully dismissed."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the user triggers the close action (model becomes false)."},{"name":"show","signature":"(): void","description":"Emitted as soon as the user triggers the open action (model becomes true)."},{"name":"shown","signature":"(): void","description":"Emitted once the open transition has run (symmetric with `hidden`): the\npanel is settled, so code that measures or anchors to its content sees\nthe final layout. Not emitted for a panel closed before it finished\nopening."},{"name":"update:modelValue","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"default","type":"{ close: () => void; }","description":"Primary body content of the off-canvas panel, rendered in the scrollable body area."},{"name":"description","type":"BbOffCanvasDescriptionSlotProps","fields":["text: string"],"description":"Replaces the description text under the title. Renders the header even\nwhen `title` and `description` are unset — a slotted description is a\ndescription, the same rule `#title` follows."},{"name":"footer","type":"BbOffCanvasFooterSlotProps","fields":["close: () => void"],"description":"Content rendered in the panel footer, below the body area. Typically used for action buttons."},{"name":"header","type":"BbOffCanvasHeaderSlotProps","fields":["titleId: string","close: () => void","title: string"],"description":"Replaces the entire off-canvas header section (title + close button). Maintains accessibility wiring via the provided props."},{"name":"title","type":"BbOffCanvasTitleSlotProps","fields":["text: string"],"description":"Replaces the default title text inside the header. Remains linked to the\npanel through `aria-labelledby`. Providing this slot renders the header even\nwhen `title` is unset — a slotted title is a title."}],"exposed":[],"models":[{"name":"modelValue","type":"boolean | undefined"}],"cssProps":[{"name":"--translate-x","value":"0%","selector":".bb-offcanvas"},{"name":"--translate-y","value":"0%","selector":".bb-offcanvas"},{"name":"--translate","value":"1","selector":".bb-offcanvas"},{"name":"--stack-x","value":"0px","selector":".bb-offcanvas","description":"Inward shift applied to a parent panel while a child is stacked on top."},{"name":"--stack-y","value":"0px","selector":".bb-offcanvas"},{"name":"--stack-fill","value":"0px","selector":".bb-offcanvas","description":"Length of the pad (see `::after`) that fills from the panel's anchored edge out to the screen edge, so no empty band shows when a descendant is dragged away or shrinks."},{"name":"--stack-transition-duration","value":"var(--transition-duration)","selector":".bb-offcanvas","description":"Duration for the stack shift + pad. Zeroed while a peer resizes so parents track the live size instead of lagging behind a 250ms animation."},{"name":"--px","value":"var(--bb-panel-p)","selector":".bb-offcanvas","description":"Axis split of --bb-panel-p: --px (inline) / --py (block), each branching off it. Set the pair only when the axes differ; setting --bb-panel-p alone keeps them equal. Local on this root class (not :root) so scoped --bb-panel-p overrides keep reaching the slots; for per-part asymmetry, scope --py to the part class."},{"name":"--py","value":"var(--bb-panel-p)","selector":".bb-offcanvas"},{"name":"--handle-w","value":"36px","selector":".bb-offcanvas","description":"The drag handle's length along the anchored edge (`draggable`); on a left / right panel the axes swap and this is its height. Set through `pt:root` here, or `pt:sheet` on the component that becomes this sheet."},{"name":"--handle-h","value":"4px","selector":".bb-offcanvas","description":"The drag handle's thickness — its height on a bottom / top panel, its width on a left / right one."},{"name":"--handle-bg","value":"var(--bb-border)","selector":".bb-offcanvas","description":"The drag handle's fill."},{"name":"--transition-timing-function","value":"var(--bb-ease)","selector":".bb-offcanvas"},{"name":"--bg","value":"var(--bb-panel)","selector":".bb-offcanvas"},{"name":"--fg","value":"var(--bb-text)","selector":".bb-offcanvas"},{"name":"--safe-top","value":"env(safe-area-inset-top, 0px)","selector":".bb-offcanvas","description":"* Safe areas (Q44.20, owner 2026-09-22): every screen edge a panel touches * absorbs that edge's inset the way the chin below always did — on the * BANDS, never on the panel, so a band's fill runs to the screen edge while * its content clears the notch, status bar or home indicator. * --safe-* the device insets (`env()`; 0 when unsupported or without * `viewport-fit=cover`) — a knob, e.g. for a test or a frame; * --inset-* the inset THIS panel absorbs: `--safe-*` on the edges it * touches, 0 elsewhere. Header / body / footer add it: the * first band on top, the last band at the bottom, every band * at the sides."},{"name":"--safe-right","value":"env(safe-area-inset-right, 0px)","selector":".bb-offcanvas"},{"name":"--safe-bottom","value":"env(safe-area-inset-bottom, 0px)","selector":".bb-offcanvas"},{"name":"--safe-left","value":"env(safe-area-inset-left, 0px)","selector":".bb-offcanvas"},{"name":"--inset-top","value":"0px","selector":".bb-offcanvas"},{"name":"--inset-right","value":"0px","selector":".bb-offcanvas"},{"name":"--inset-bottom","value":"0px","selector":".bb-offcanvas"},{"name":"--inset-left","value":"0px","selector":".bb-offcanvas"},{"name":"--close-size","value":"28px","selector":".bb-offcanvas__header","description":"Shared by the close control and by the space the title reserves for it, * so the two can never drift apart."}],"pt":{"parts":[{"name":"root","description":"The `<dialog>` — the sheet itself (no separate `panel`). The backdrop is `::backdrop`: CSS, not `pt`."},{"name":"header","description":"The header band."},{"name":"title","description":"The title line inside the header. Not rendered when a `#header` slot replaces the header."},{"name":"description","description":"The description line inside the header. Not rendered when a `#header` slot replaces the header."},{"name":"content","description":"The scrolling body. It carries the body's padding (`--px`, `--py`, `--dialog-gap`), so `pt:content=\"px-8\"` or `[--py:20px]` sets it."},{"name":"footer","description":"The footer band."},{"name":"close","description":"The ✕."}],"states":[{"name":"open","description":"Component-wide: the sheet is open (follows `v-model`)."},{"name":"fullscreen","description":"Component-wide: the panel fills the viewport (square, edge to edge) — always with `fullscreen`, and with `fullscreen=\"mobile\"` only while the viewport is a phone, so it can flip at runtime. Listed after `open`, so a `pt:root:fullscreen` entry wins a conflict with `pt:root:open`. Reachable from any adaptive component through `offCanvasProps: { fullscreen: true, 'pt:root:fullscreen': '…' }`."}]},"tree":{"bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"nodes":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},"css":{"classes":{"bb-off-canvas-escape":[""],"bb-offcanvas":["","--*","--bottom","--covered","--deny-close","--dragging","--fullscreen","--has-handle","--instant-stack","--keyboard","--left","--no-header","--open","--right","--stacked","--swipe-exit","--top","--visible","__body-content","__close","__content","__description","__footer","__handle","__header","__title"],"bb-offcanvas-":["*"]},"locals":["--bg","--close-size","--color-gray-200","--dialog-gap","--dialog-title-fs","--dialog-title-fw","--fg","--handle-bg","--handle-h","--handle-w","--inset-bottom","--inset-left","--inset-right","--inset-top","--keyboard","--max-size","--p","--px","--py","--safe-bottom","--safe-left","--safe-right","--safe-top","--scrollbar-width","--stack-fill","--stack-transition-duration","--stack-x","--stack-y","--transition-duration","--transition-timing-function","--translate","--translate-x","--translate-y"]},"attrTargets":["dialog"],"removed":[{"name":"compact","new":null,"since":"3.0.0-beta.15","migration":"ai/guides/migration/components/bb-offcanvas.md","silent":true,"fix":{"kind":"manual"}},{"name":"direction","new":"side","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-offcanvas.md","silent":true,"fix":{"kind":"rename"}},{"name":"showClose","new":"hideClose","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-offcanvas.md","silent":true,"fix":{"kind":"invert"}}],"renamed":[{"from":"direction","to":"side","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-offcanvas.md","fix":{"kind":"rename"}},{"from":"showClose","to":"hideClose","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-offcanvas.md","fix":{"kind":"invert"}}]},
|
|
504
504
|
{"name":"BbPagination","group":"Navigation","description":"Navigates paginated data sets by page index.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbPagination.md","source":"ai/source/BbPagination.md","props":[{"name":"align","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"\"right\"","description":"Alignment of the pagination control."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component"},{"name":"ellipsis","type":"string | undefined","required":false,"default":"\"...\"","description":"String of text displayed in place of hidden pages."},{"name":"label","type":"string | undefined","required":false,"description":"Label of the pagination navigation landmark. When unset, falls back to the\nlocalized `pagination.label` (`'Pagination'` / `'Paginazione'`)."},{"name":"maxSize","type":"string | number | undefined","required":false,"default":"6","description":"Maximum number of clickable pages displayed at all times.\nThis has a tolerance of +/- 1 for odd / even numbering.\nIt does not include ellipses."},{"name":"modelValue","type":"number | undefined","required":false,"default":"1","description":"Used by v-model. The 1-based index of the current page — pagination starts\non the first page, not page `0`."},{"name":"navigation","type":"boolean | undefined","required":false,"default":"false","description":"Synchronizes the current page with the URL.\n\nPair it with `replace` — see that prop."},{"name":"perPage","type":"string | number | undefined","required":false,"description":"Number of items per page. Together with `totalItems` it derives the page\ncount (`ceil(totalItems / perPage)`); when unset, one page holds\neverything. With a `tableId` it is also published to the shared table\ncontext, exactly like the table's own `per-page` prop."},{"name":"pt","type":"(PtMap<BbPaginationPtPart, \"disabled\"> & { 'item:active'?: PtValue | undefined; }) | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:arrow","type":"PtValue | undefined","required":false},{"name":"pt:arrow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:ellipsis","type":"PtValue | undefined","required":false},{"name":"pt:ellipsis:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | undefined","required":false},{"name":"pt:item:active","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"queryKey","type":"string | undefined","required":false,"default":"\"page\"","description":"Defines the query key to reference for maintaining navigation."},{"name":"replace","type":"boolean | undefined","required":false,"default":"false","description":"Replaces the history entry instead of pushing one when the page changes.\nRecommended with `navigation`: the URL keeps the page while Back leaves\nthe list (without it, page 12 takes eleven Backs)."},{"name":"tableId","type":"string | undefined","required":false,"description":"Pairs with the `BbTable` whose `id` matches, through the shared table\ncontext: the page syncs both ways and the context's page count drives the\ncontrol. `totalItems`, `perPage` and `totalPages` set here are published\nto that context."},{"name":"totalItems","type":"string | number | undefined","required":false,"description":"Total number of items across all pages. When set, the page count is\nderived as `ceil(totalItems / perPage)` and wins over `totalPages`. With\na `tableId` it is also published to the shared table context, exactly\nlike the table's own `total-items` prop."},{"name":"totalPages","type":"string | number | undefined","required":false,"description":"Total number of pages. A shortcut for when the server reports a page\ncount rather than a row count — a page count derived from `totalItems`\n(locally or through the shared table context) always wins over it. Falls\nback to `1` when nothing provides a count."}],"events":[{"name":"update:modelValue","signature":"(value: number): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"ellipsis","type":"Record<string, never>","description":"Replaces the default `…` ellipsis shown when pages overflow the visible range."},{"name":"item","type":"BbPaginationItemSlotProps","fields":["active: boolean","disabled: boolean","item: number"],"description":"Replaces the default page number button content for each individual page."},{"name":"next","type":"Record<string, never>","description":"Replaces the default \"next page\" button content."},{"name":"previous","type":"Record<string, never>","description":"Replaces the default \"previous page\" button content."}],"exposed":[],"models":[{"name":"modelValue","type":"number | undefined"}],"cssProps":[{"name":"--page-size","value":"var(--bb-control-h)","selector":".bb-pagination","description":"min width of every chip, active or not"},{"name":"--page-size-inactive","value":"var(--bb-control-h)","selector":".bb-pagination","description":"min height of a chip"},{"name":"--page-size-active","value":"var( --bb-control-h )","selector":".bb-pagination","description":"min height AND min width of the active chip"},{"name":"--page-r","value":"calc(var(--bb-radius) * 0.8)","selector":".bb-pagination","description":"chip corners"},{"name":"--page-text","value":"var(--bb-text)","selector":".bb-pagination","description":"Chip label — at rest, on hover and when active"},{"name":"--page-text-muted","value":"color-mix(in oklab, var(--bb-text), var(--bb-panel) 45%)","selector":".bb-pagination","description":"The \"…\" ellipsis chips"},{"name":"--page-border","value":"transparent","selector":".bb-pagination","description":"Chip border at rest. Transparent, but the width is always reserved (`border-style: solid`, `--bb-border-w`), so setting a colour here outlines every chip without moving anything."},{"name":"--page-border-active","value":"var(--bb-border)","selector":".bb-pagination","description":"Border of the active chip, and of any chip while focus-visible"},{"name":"--page-bg","value":"transparent","selector":".bb-pagination","description":"chip fill at rest"},{"name":"--page-bg-hover","value":"var(--bb-hover)","selector":".bb-pagination","description":"chip fill on hover and focus-visible"},{"name":"--page-bg-active","value":"var(--bb-panel)","selector":".bb-pagination","description":"fill of the active chip"},{"name":"--page-bg-disabled","value":"transparent","selector":".bb-pagination","description":"BbButton's disabled trio (Q56.29), for Previous / Next at the ends. A chip is transparent at rest, so the plate and frame stay transparent and the label takes the disabled grey."},{"name":"--page-text-disabled","value":"color-mix( in oklab, var(--bb-text) 45%, var(--bb-panel) )","selector":".bb-pagination"},{"name":"--page-border-disabled","value":"transparent","selector":".bb-pagination"}],"pt":{"parts":[{"name":"root","description":"The component root."},{"name":"item","description":"Every numbered page — a broadcast resolved per page. Neither the previous / next buttons (`arrow`) nor the gap markers (`ellipsis`)."},{"name":"arrow","description":"The previous / next buttons — a broadcast resolved per button, with its own `disabled` (previous on the first page, next on the last). The same word as BbCalendar's previous / next buttons."},{"name":"ellipsis","description":"The gap markers between page runs — a broadcast. Not a control (a hidden `<span>`, no `active` / `disabled`)."},{"name":"icon","description":"The chevrons inside the `arrow` buttons — a broadcast."}],"states":[{"name":"disabled","description":"Component-wide while the pagination is `disabled`; also per node, on `item` and `arrow`: a control that cannot be pressed — previous on the first page, next on the last."},{"name":"active","description":"Per node, on `item`: the current page."}]},"tree":{"bindings":[{"part":"arrow","target":"BbBaseButton"},{"part":"icon","target":"svg.bb-pagination__icon"},{"part":"ellipsis","target":"span.bb-pagination__ellipsis"},{"part":"item","target":"BbBaseButton"}],"nodes":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]}]},"css":{"classes":{"bb-pagination":["","--*","--disabled","__arrow","__ellipsis","__icon","__item","__page","__page--active","__page--ellipsis","__page--next","__page--previous","__page-label","__pages"]},"locals":["--color-gray-200","--elev","--hit","--page-bg","--page-bg-active","--page-bg-disabled","--page-bg-hover","--page-border","--page-border-active","--page-border-disabled","--page-r","--page-size","--page-size-active","--page-size-inactive","--page-text","--page-text-disabled","--page-text-muted"]},"attrTargets":["div"],"removed":[{"name":"loading","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-pagination.md","silent":true,"fix":{"kind":"manual"}},{"name":"querykey","new":"queryKey","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-pagination.md","silent":true,"fix":{"kind":"rename"}},{"name":"pt:root:active","new":null,"surface":"pt","hint":"it never applied anything: `active` (the current page) is a state of `item` only (`pt:item:active`)","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-pagination.md","silent":true,"fix":{"kind":"remove"}},{"name":"pt:icon:active","new":null,"surface":"pt","hint":"it never applied anything: `active` (the current page) is a state of `item` only (`pt:item:active`)","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-pagination.md","silent":true,"fix":{"kind":"remove"}}],"renamed":[{"from":"querykey","to":"queryKey","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-pagination.md","fix":{"kind":"rename"}}]},
|
|
505
|
-
{"name":"BbPopover","group":"Overlay","description":"Anchors floating content to reference elements; also the v-bb-popover directive (its body is a BbPopoverPortal or a component).","referenceOnly":false,"hasGuide":true,"contract":"ai/BbPopover.md","source":"ai/source/BbPopover.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the activator slot is not rendered and click events\nare attached programmatically to the referenced element."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile (below `config.mobileMaxWidth`), renders as a bottom sheet\ninstead of a floating panel, with the same `header`, `default` and\n`footer` slots. `width` is ignored there: size the sheet with\n`offCanvasProps`. Unset: the global `config.adaptive`."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the popover within a bounding element.\nWhen provided, the popover will not overflow this container's bounds (e.g. a sidebar).\nAccepts an HTMLElement, a Vue component ref, or a CSS selector string."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the panel's content at mount instead of on the first open\n(the phone sheet's too)."},{"name":"focusTarget","type":"string | undefined","required":false,"description":"Selector for the element that receives focus after opening.\nDefaults to the first focusable element inside the popover."},{"name":"id","type":"string | undefined","required":false,"description":"The activator's id (the panel is `bbp_<id>` and is labelled by it).\nGenerated when omitted."},{"name":"modal","type":"boolean | undefined","required":false,"default":"false","description":"Makes the floating panel modal: the page behind is inert and does not\nscroll, and Tab stays inside. Off, it is a non-modal dialog: an outside\nclick closes it and still lands, and tabbing out closes it. The phone\nsheet is modal either way."},{"name":"modelValue","type":"boolean | undefined","required":false,"default":"false","description":"Used by v-model to open / close the popover. A popover with no `v-model`\nstarts closed and is driven by its `trigger`."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet)."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the floating container will maintain from the activator."},{"name":"padding","type":"number | undefined","required":false,"default":"10","description":"Minimum empty space to keep from the edge of the page."},{"name":"placement","type":"Placement | \"cursor\" | undefined","required":false,"default":"\"bottom\"","values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end","cursor"],"description":"Position of the popover relative to the activator.\nUse `'cursor'` to anchor at the mouse/touch coordinates.\n(BbPopover never draws an arrow — arrows are tooltip-only in v3.)"},{"name":"pt","type":"PtMap<BbPopoverPtPart, \"open\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:content","type":"PtValue | undefined","required":false},{"name":"pt:content:open","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"scrollable","type":"boolean | undefined","required":false,"default":"false","description":"Caps the popover height to the available viewport space and enables internal scrolling.\nUseful for tall content like filter panels. Not recommended for atomic popovers (calendars, color pickers)."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds."},{"name":"trigger","type":"PopoverTrigger | PopoverTrigger[] | undefined","required":false,"default":"\"click\"","description":"Interaction(s) that open the popover.\nAccepts a single trigger or an array to combine them.\n- `'click'` — left-click / tap (default)\n- `'contextMenu'` — right-click on desktop, long-press on mobile"},{"name":"width","type":"string | number | undefined","required":false,"description":"Width of the popover. Accepts pixels or percentage (relative to activator width)."}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted after the popover is closed and focus has been restored to the activator."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the popover starts to close (model becomes false)."},{"name":"show","signature":"(): void","description":"Emitted as soon as the popover starts to open (model becomes true)."},{"name":"shown","signature":"(): void","description":"Emitted after the popover is fully opened and focus has been moved inside."},{"name":"update:modelValue","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"activator","type":"BbPopoverActivatorSlotProps","fields":["disabled: boolean","open: boolean","placement: Placement | \"cursor\"","props: { 'aria-expanded'?: boolean | undefined; 'aria-controls'?: string | undefined; 'aria-haspopup': \"dialog\"; id: string; disabled: boolean; ref: (reference: unknown) => void; }"],"description":"The element that triggers the popover to open. Spread `props` onto your trigger element."},{"name":"default","type":"BbPopoverDefaultSlotProps","fields":["close: () => void","disabled: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"The popover body content rendered inside the floating panel."},{"name":"footer","type":"BbPopoverDefaultSlotProps","fields":["close: () => void","disabled: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the bottom of the panel, outside the scroll region.\nStays visible while the body scrolls (when `scrollable`) and carries its\nown padding and top divider, so footer actions need no negative-margin or\n`sticky` workarounds."},{"name":"header","type":"BbPopoverDefaultSlotProps","fields":["close: () => void","disabled: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the top of the panel, outside the scroll region.\nStays visible while the body scrolls (when `scrollable`) and carries its\nown padding and bottom divider, so a title or search field needs no\nnegative-margin or `sticky` workarounds."}],"exposed":[],"models":[{"name":"modelValue","type":"boolean | undefined"}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The surface you see — the bordered box that paints the popover and lays out its bands on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet the popover becomes on a phone (the `BbOffCanvas` root) — never the desktop surface. Applied after `panel`, so it wins a conflict there."},{"name":"header","description":"The header band (on a phone, the sheet's)."},{"name":"content","description":"The body band (on a phone, the sheet's)."},{"name":"footer","description":"The footer band (on a phone, the sheet's)."}],"states":[{"name":"open","description":"Component-wide: the popover is open."}]},"tree":{"bindings":[{"part":"panel","target":"CommonPopover"},{"part":"root","target":"CommonPopover"},{"part":"header","target":"div.bb-popover__header"},{"part":"content","target":"div.bb-popover__content"},{"part":"footer","target":"div.bb-popover__footer"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ header: 'header', content: 'content', footer: 'footer', panel: 'root', sheet: 'root', }"}],"nodes":[{"name":"CommonPopover","kind":"internal"},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]}]},"css":{"classes":{"bb-popover":["","__content","__footer","__header","__panel","__panel--scrollable","__sheet"]},"locals":["--color-gray-200","--max-h"]},"attrTargets":["dialog"],"removed":[{"name":"arrowPadding","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"block","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"closeLabel","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"hideArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"restoreFocus","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"showArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"showClose","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"theme","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"show","new":null,"surface":"method","hint":"no template-ref API in v3: bind `v-model` and write `true` / `false`; the popover writes `false` back when it is dismissed","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"close","new":null,"surface":"method","hint":"no template-ref API in v3: bind `v-model` and write `true` / `false`; the popover writes `false` back when it is dismissed","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"isOpen","new":null,"surface":"method","hint":"read the `v-model` value instead","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}}]},
|
|
505
|
+
{"name":"BbPopover","group":"Overlay","description":"Anchors floating content to reference elements; also the v-bb-popover directive (its body is a BbPopoverPortal or a component).","referenceOnly":false,"hasGuide":true,"contract":"ai/BbPopover.md","source":"ai/source/BbPopover.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the activator slot is not rendered and click events\nare attached programmatically to the referenced element."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile (below `config.mobileMaxWidth`), renders as a bottom sheet\ninstead of a floating panel, with the same `header`, `default` and\n`footer` slots. `width` is ignored there: size the sheet with\n`offCanvasProps`. Unset: the global `config.adaptive`."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the popover within a bounding element: it stays inside it\nalongside its trigger (sideways for a popover above or below); away from\nthe trigger it may pass the edge, and it flips at the viewport only.\nAccepts an HTMLElement, a Vue component ref, or a CSS selector string."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the panel's content at mount instead of on the first open\n(the phone sheet's too)."},{"name":"focusTarget","type":"string | undefined","required":false,"description":"Selector for the element that receives focus after opening.\nDefaults to the first focusable element inside the popover."},{"name":"id","type":"string | undefined","required":false,"description":"The activator's id (the panel is `bbp_<id>` and is labelled by it).\nGenerated when omitted."},{"name":"modal","type":"boolean | undefined","required":false,"default":"false","description":"Makes the floating panel modal: the page behind is inert and does not\nscroll, and Tab stays inside. Off, it is a non-modal dialog: an outside\nclick closes it and still lands, and tabbing out closes it. The phone\nsheet is modal either way."},{"name":"modelValue","type":"boolean | undefined","required":false,"default":"false","description":"Used by v-model to open / close the popover. A popover with no `v-model`\nstarts closed and is driven by its `trigger`."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet)."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the floating container will maintain from the activator."},{"name":"padding","type":"number | undefined","required":false,"default":"10","description":"Minimum empty space to keep from the edge of the page."},{"name":"placement","type":"Placement | \"cursor\" | undefined","required":false,"default":"\"bottom\"","values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end","cursor"],"description":"Position of the popover relative to the activator.\nUse `'cursor'` to anchor at the mouse/touch coordinates.\n(BbPopover never draws an arrow — arrows are tooltip-only in v3.)"},{"name":"pt","type":"PtMap<BbPopoverPtPart, \"open\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:content","type":"PtValue | undefined","required":false},{"name":"pt:content:open","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"scrollable","type":"boolean | undefined","required":false,"default":"false","description":"Caps the popover height to the available viewport space and enables internal scrolling.\nUseful for tall content like filter panels. Not recommended for atomic popovers (calendars, color pickers)."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds."},{"name":"trigger","type":"PopoverTrigger | PopoverTrigger[] | undefined","required":false,"default":"\"click\"","description":"Interaction(s) that open the popover.\nAccepts a single trigger or an array to combine them.\n- `'click'` — left-click / tap (default)\n- `'contextMenu'` — right-click on desktop, long-press on mobile"},{"name":"width","type":"string | number | undefined","required":false,"description":"Width of the popover. Accepts pixels or percentage (relative to activator width)."}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted after the popover is closed and focus has been restored to the activator."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the popover starts to close (model becomes false)."},{"name":"show","signature":"(): void","description":"Emitted as soon as the popover starts to open (model becomes true)."},{"name":"shown","signature":"(): void","description":"Emitted after the popover is fully opened and focus has been moved inside."},{"name":"update:modelValue","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"activator","type":"BbPopoverActivatorSlotProps","fields":["disabled: boolean","open: boolean","placement: Placement | \"cursor\"","props: { 'aria-expanded'?: boolean | undefined; 'aria-controls'?: string | undefined; 'aria-haspopup': \"dialog\"; id: string; disabled: boolean; ref: (reference: unknown) => void; }"],"description":"The element that triggers the popover to open. Spread `props` onto your trigger element."},{"name":"default","type":"BbPopoverDefaultSlotProps","fields":["close: () => void","disabled: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"The popover body content rendered inside the floating panel."},{"name":"footer","type":"BbPopoverDefaultSlotProps","fields":["close: () => void","disabled: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the bottom of the panel, outside the scroll region.\nStays visible while the body scrolls (when `scrollable`) and carries its\nown padding and top divider, so footer actions need no negative-margin or\n`sticky` workarounds."},{"name":"header","type":"BbPopoverDefaultSlotProps","fields":["close: () => void","disabled: boolean","open: boolean","placement: Placement | \"cursor\""],"description":"Content pinned to the top of the panel, outside the scroll region.\nStays visible while the body scrolls (when `scrollable`) and carries its\nown padding and bottom divider, so a title or search field needs no\nnegative-margin or `sticky` workarounds."}],"exposed":[],"models":[{"name":"modelValue","type":"boolean | undefined"}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The surface you see — the bordered box that paints the popover and lays out its bands on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet the popover becomes on a phone (the `BbOffCanvas` root) — never the desktop surface. Applied after `panel`, so it wins a conflict there."},{"name":"header","description":"The header band (on a phone, the sheet's)."},{"name":"content","description":"The body band (on a phone, the sheet's)."},{"name":"footer","description":"The footer band (on a phone, the sheet's)."}],"states":[{"name":"open","description":"Component-wide: the popover is open."}]},"tree":{"bindings":[{"part":"panel","target":"CommonPopover"},{"part":"root","target":"CommonPopover"},{"part":"header","target":"div.bb-popover__header"},{"part":"content","target":"div.bb-popover__content"},{"part":"footer","target":"div.bb-popover__footer"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ header: 'header', content: 'content', footer: 'footer', panel: 'root', sheet: 'root', }"}],"nodes":[{"name":"CommonPopover","kind":"internal"},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]}]},"css":{"classes":{"bb-popover":["","__content","__footer","__header","__panel","__panel--scrollable","__sheet"]},"locals":["--color-gray-200","--max-h"]},"attrTargets":["dialog"],"removed":[{"name":"arrowPadding","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"block","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"closeLabel","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"hideArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"restoreFocus","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"showArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"showClose","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"theme","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"show","new":null,"surface":"method","hint":"no template-ref API in v3: bind `v-model` and write `true` / `false`; the popover writes `false` back when it is dismissed","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"close","new":null,"surface":"method","hint":"no template-ref API in v3: bind `v-model` and write `true` / `false`; the popover writes `false` back when it is dismissed","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}},{"name":"isOpen","new":null,"surface":"method","hint":"read the `v-model` value instead","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-popover.md","silent":true,"fix":{"kind":"manual"}}]},
|
|
506
506
|
{"name":"BbPopoverPortal","group":"Overlay","description":"Registers named slot content that `v-bb-popover=\"'name'\"` (or `{ portal: 'name' }`) renders in the popover; slot `{ props, close }`.","referenceOnly":false,"hasGuide":false,"contract":"ai/BbPopoverPortal.md","source":"ai/source/BbPopoverPortal.md","props":[{"name":"name","type":"string","required":true,"description":"The name a `v-bb-popover` passes as its value (`\"'name'\"`) or as `portal: 'name'`."}],"events":[],"slots":[{"name":"default","type":"BbPopoverPortalSlotProps","fields":["props: P","close: () => void"],"description":"The popover body. `props` is the directive's `portalProps`; `close` closes the popover."}],"exposed":[],"models":[]},
|
|
507
507
|
{"name":"BbProgress","group":"Feedback","description":"Visualizes task or operation progress state.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbProgress.md","source":"ai/source/BbProgress.md","props":[{"name":"indeterminate","type":"boolean | undefined","required":false,"default":"false","description":"A wait you cannot measure yet: the bar slides back and forth (a calm\npulse under reduced motion) and reports no `aria-valuenow`. `modelValue`\nis kept for when it turns off; a `null` `modelValue` alone is an empty\nbar."},{"name":"label","type":"string | undefined","required":false,"default":"undefined","description":"Accessible name for the progress bar, forwarded to `aria-label`. A\n`progressbar` with no name is announced only as a bare percentage, so give\nit one whenever the surrounding text doesn't already name it (e.g.\n`\"Upload\"`). Matches the `label` naming prop on BbSpinner / BbIcon."},{"name":"max","type":"number | undefined","required":false,"default":"100","description":"Maximum value. Upper cap."},{"name":"min","type":"number | undefined","required":false,"default":"0","description":"Minimum value. Lower cap."},{"name":"modelValue","type":"number | null","required":true,"default":"0","description":"The current progress value — a number between `min` and `max`. This is a\none-way input prop (BbProgress is a display component and never emits\n`update:modelValue`); `null` means no value and renders an empty bar."},{"name":"pt","type":"PtMap<BbProgressPtPart, \"indeterminate\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. Parts: `root`, `bar`; state: `indeterminate`."},{"name":"pt:bar","type":"PtValue | undefined","required":false},{"name":"pt:bar:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:indeterminate","type":"PtValue | undefined","required":false}],"events":[],"slots":[],"exposed":[],"models":[],"cssProps":[{"name":"--track","value":"4px","selector":".bb-progress"},{"name":"--track-color","value":"var(--bb-track)","selector":".bb-progress","description":"The recessed rail surface, not `--bb-secondary`: that is the secondary BUTTON fill, so tuning the track moved buttons and tuning buttons moved the track. `--bb-track` is the token for a rail, and it is a step stronger, so the unfilled remainder actually reads."},{"name":"--accent","value":"var(--bb-primary)","selector":".bb-progress"},{"name":"--r","value":"var(--bb-radius)","selector":".bb-progress"}],"pt":{"parts":[{"name":"root","description":"The track (the `progressbar` element); the bar follows it through its locals (`--track`, `--track-color`, `--accent`, `--r`, the same words as BbSlider's rail and bar)."},{"name":"bar","description":"The fill itself. Its inline `transform` IS the value (it slides from -100% to 0), so style its look here — colour, gradient, radius — never its position."}],"states":[{"name":"indeterminate","description":"Component-wide: `indeterminate` is on; the bar slides (pulses under reduced motion) instead of showing a value."}]},"css":{"classes":{"bb-progress":["","--indeterminate","__bar"]},"locals":["--accent","--color-gray-200","--r","--track","--track-color","--transition-duration"]}},
|
|
508
508
|
{"name":"BbPtScope","group":"Layout & Utility","description":"Renderless provider that switches on a named passthrough scope (`ptScopes` in the plugin config) for its subtree — a backoffice and a member area with different looks in one app.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbPtScope.md","source":"ai/source/BbPtScope.md","props":[{"name":"name","type":"BbPtScopeName","required":true,"values":["bitboss-ui: no ptScopes configured — add ptScopes to bitbossUi() and commit bitboss-ui.d.ts"],"description":"The scope to switch on for everything inside: a key of the plugin's\n`ptScopes` option (`BbPtScopeName`, generated from your config).\nNested scopes add up: the outer scope's entries apply first, the inner\nscope's after them. Reactive — changing it restyles the subtree."}],"events":[],"slots":[{"name":"default","type":"any","description":"The subtree the scope applies to. Rendered as is — no wrapper element."}],"exposed":[],"models":[]},
|
|
@@ -510,13 +510,13 @@
|
|
|
510
510
|
{"name":"BbRadioGroup","group":"Selection","description":"Coordinates exclusive selection among radio options.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbRadioGroup.md","source":"ai/source/BbRadioGroup.md","props":[{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-label-spacing-y` for\n`--bb-label-spacing-y-compact`, so tune a compact group's label gap with\nthe `-compact` token, not the base one."},{"name":"dependencies","type":"unknown[] | undefined","required":false,"description":"Defines an array of dependencies that will trigger actions in the component upon change."},{"name":"depsDebounceTime","type":"number | undefined","required":false,"description":"Timeout used to debounce response to changes to dependencies."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"emptyText","type":"string | undefined","required":false,"description":"String displayed when there are no items to display."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"After every applied, successful load (an empty one included), drops the\nmodel values the options no longer contain (a single value resets to\n`null`). A failed load never prunes."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"failedText","type":"string | undefined","required":false,"default":"the localized `common.failedText` (\"Couldn't load items\")","description":"String displayed in the empty state while the latest load FAILED (the\n`items` provider threw): the twin of `emptyText` for that case."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides each option's label text (the text rendered next to every\ninput) while keeping it accessible to screen readers.\nDoes not affect the fieldset legend — use `hideLegend` for that."},{"name":"hideLegend","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the legend of the fieldset while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"Prefix for the ids of each option's input and of the label, description\nand message. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"inputPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"\"left\"","description":"Sets the alignment of the input. Since inputs are inline block they can be aligned just as text can."},{"name":"itemInputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of each option's control in its row; `'center'` is\nthe middle of the label plus its description. Omitted, it sits on the\nlabel's first line."},{"name":"itemLabelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of each option's label in its row. Omitted, it stays\nas it is."},{"name":"itemLayout","type":"FieldLayout | undefined","required":false,"default":"'auto'","description":"How each row's input and label sit together, in the `layout` keywords:\n`'auto'`, `'vertical'`, `'horizontal'`, `'label-fill'`, `'input-fill'`,\nor a two-word ratio pattern like `'xx xxxxx'`."},{"name":"itemProps","type":"BbOptionGroupItemProps<T> | undefined","required":false,"description":"ADDITIONAL row fields, never the text or value: `description`, a muted\nline under the label (it may wrap; announced as the option's\ndescription). An object of paths or getters, or a function of the item;\nnothing is read implicitly."},{"name":"itemReverse","type":"boolean | undefined","required":false,"default":"false","description":"Swaps each row's input and label from their natural order (input first),\nin every `item-layout`. `reverse` swaps the legend and the options instead."},{"name":"items","type":"T[] | ((context: BbRadioGroupItemsContext) => T[] | Promise<T[]>)","required":true,"description":"The options: an array, or a provider called with a\n`BbRadioGroupItemsContext` (`reason`, `modelValue`, `signal`), sync or\nasync. A provider fails by THROWING, never by returning `[]`: the rows\nclear and `#empty` gets the `error`."},{"name":"itemText","type":"ItemAccessor<T, string> | undefined","required":false,"default":"own `label`, else `text`, else `JSON.stringify(item)`","description":"Defines a path that returns a property of the object to use as text or a function that returns a string.\n\nUnset: own `label`, else `text` (`{ label, value }` needs no accessor)."},{"name":"itemValue","type":"ItemAccessor<T> | undefined","required":false,"default":"own `value`, else the whole item","description":"Defines a path that returns a property of the object to use as value or a function that returns any value.\n\nUnset: own `value`, even `null`."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"legend","type":"string","required":true,"description":"Text content of the legend."},{"name":"legendMode","type":"\"outside\" | \"inside\" | undefined","required":false,"description":"Legend rendering mode. `'outside'` renders the legend above the fieldset in the normal flow;\n`'inside'` overlays the legend inside the fieldset border.\nFloating mode is not supported for radio groups."},{"name":"legendPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"listLayout","type":"ListLayout | undefined","required":false,"default":"'horizontal'","values":["horizontal","vertical","vertical-stretch","tiles"],"description":"How the rows sit in the list: `'horizontal'` (on a line, wrapping),\n`'vertical'` (stacked), `'vertical-stretch'` (stacked, as wide as the\nlist) or `'tiles'` (equal boxes; `--tile-min-width` on `pt:list` sets the\nnarrowest). Layout only: the cards are `pt` (guide § Radio cards)."},{"name":"loadingText","type":"string | undefined","required":false,"description":"String displayed while items are being loaded."},{"name":"modelValue","type":"any","required":false,"description":"Used by v-model. Can be any serializable type."},{"name":"modelValueDebounceTime","type":"number | undefined","required":false,"description":"Timeout used to debounce response to changes to modelValue."},{"name":"name","type":"string | undefined","required":false,"description":"Name of the option inputs. Optional: a generated one, unique per group\nand stable, groups them. Pass one only when a native (non-JS) form post\nmust submit the value under a known key."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"pt","type":"GroupPtMap<T> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:icon:checked","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:focused","type":"PtValue | undefined","required":false},{"name":"pt:icon:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:item:checked","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:errors","type":"PtValue | undefined","required":false},{"name":"pt:item:focused","type":"PtValue | undefined","required":false},{"name":"pt:item:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:item:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:item:loading","type":"PtValue | undefined","required":false},{"name":"pt:item:readonly","type":"PtValue | undefined","required":false},{"name":"pt:item:warnings","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemDescription:checked","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:errors","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:focused","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:loading","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:readonly","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:label:checked","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:focused","type":"PtValue | undefined","required":false},{"name":"pt:label:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:legend","type":"PtValue | undefined","required":false},{"name":"pt:legend:disabled","type":"PtValue | undefined","required":false},{"name":"pt:legend:errors","type":"PtValue | undefined","required":false},{"name":"pt:legend:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:legend:loading","type":"PtValue | undefined","required":false},{"name":"pt:legend:readonly","type":"PtValue | undefined","required":false},{"name":"pt:legend:warnings","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list:errors","type":"PtValue | undefined","required":false},{"name":"pt:list:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:list:loading","type":"PtValue | undefined","required":false},{"name":"pt:list:readonly","type":"PtValue | undefined","required":false},{"name":"pt:list:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and the input is swapped."},{"name":"rules","type":"RuleExpression<any>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"selectable","type":"boolean | ((item: T) => boolean) | undefined","required":false,"default":"true","description":"Defines whether options are selectable.\nCan be a global boolean that affects all options or a function\nthat accepts an item and returns a boolean that only affects that item.\nNon-selectable options are rendered disabled."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the group becomes active (focus/click enters it)."},{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when one of the generated radio inputs loses focus.\nForwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when a radio option is selected.\nForwards the original DOM `Event` from the radio input."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when one of the generated radio inputs is clicked.\nForwards the original DOM `MouseEvent`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when one of the generated radio inputs receives focus.\nForwards the original DOM `FocusEvent`."},{"name":"inactive","signature":"(): void","description":"Emitted when focus/click moves outside the group after it was active.\nUseful for validation-on-blur flows at group level."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from generated radio inputs.\nForwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on generated radio inputs.\nForwards the original DOM `KeyboardEvent`."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is pressed over a radio input.\nForwards the original DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is released over a radio input.\nForwards the original DOM `MouseEvent`."},{"name":"update:modelValue","signature":"(value: any): void","description":"Emitted with the newly selected value when the selection changes."}],"slots":[{"name":"append","type":"object","description":"Content rendered after the last option, inside the options container."},{"name":"description","type":"BbRadioGroupDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"empty","type":"{ error: unknown; }","description":"Content shown when no options are available (replaces the default \"no\ndata\" text). `error` is what the latest failed load rejected with,\nuntouched, and `null` when nothing failed — a failed load clears the\nrows, so this slot is where it shows."},{"name":"icon","type":"BbRadioGroupIconSlotProps<T>","fields":["disabled: boolean","readonly: boolean","checked: boolean","focused: boolean","focusVisible: boolean","id: string","name: string","hasErrors: boolean","hasWarnings: boolean","parsedValue: string","value: any","item: T","text: string"],"description":"Replaces the default radio dot icon for each option. Receives the radio\nstate plus the source item and its display text."},{"name":"label","type":"BbRadioGroupLabelSlotProps<T>","fields":["item: T","text: string","checked: boolean","description: string"],"description":"Replaces the default label text for each option."},{"name":"legend","type":"BbRadioGroupLegendSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default fieldset legend text for the group."},{"name":"loading","type":"object","description":"Content shown while options are loading (replaces the default loading text)."},{"name":"prepend","type":"object","description":"Content rendered before the first option, inside the options container."}],"exposed":[],"models":[{"name":"modelValue","type":"any"}],"cssProps":[{"name":"--gap","value":"24px","selector":".bb-radio-group__list","description":"Space between rows on one line."},{"name":"--row-gap","value":"10px","selector":".bb-radio-group__list","description":"Space between wrapped lines."},{"name":"--tile-min-width","value":"96px","selector":".bb-radio-group__list","description":"How narrow a tile may get before the tiles wrap (`tiles` only)."}],"pt":{"parts":[{"name":"root","description":"The group's container (the fieldset)."},{"name":"legend","description":"The group's heading — the fieldset `<legend>` (the `legend` prop)."},{"name":"description","description":"The muted line under the legend (the `description` prop)."},{"name":"message","description":"The errors / warnings line. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"list","description":"The node that lays the rows out (flex + wrap, gaps on `--gap` / `--row-gap`): `pt:list=\"grid grid-cols-3\"` re-lays them, `pt:list=\"[--gap:8px]\"` tightens them. Takes the group-wide states only."},{"name":"item","description":"One option row — a broadcast, resolved per option with its own `checked` / `disabled` / focus. Takes a per-item function."},{"name":"icon","description":"One row's drawn glyph — the default one: a consumer `icon` slot replaces it. Takes a per-item function."},{"name":"label","description":"One option's label text (the `label` slot's default). Takes a per-item function."},{"name":"itemDescription","description":"One option's muted second line, its description. Takes a per-item function."}],"states":[{"name":"hasValue","description":"Component-wide: at least one option is chosen."},{"name":"checked","description":"Per row, on `item`, `icon`, `label` and `itemDescription`: that option is chosen. Never on a field part."},{"name":"readonly","description":"Component-wide: the group is `readonly`."},{"name":"disabled","description":"Component-wide while the group is `disabled`; also per row, on the row parts of an option that is disabled on its own."},{"name":"warnings","description":"Component-wide: the group shows warnings and no errors."},{"name":"errors","description":"Component-wide: the group shows errors."},{"name":"focused","description":"Per row, on the row parts: that option's input has focus — any focus, mouse included."},{"name":"focusVisible","description":"Per row, on the row parts: that option's focus is keyboard-visible — where a focus ring belongs."},{"name":"loading","description":"Component-wide: the items are being fetched."}]},"tree":{"bindings":[{"part":"icon","target":"BbBaseRadioIcon"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbRadioGroup","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"OptionsContainer","kind":"internal","vocabulary":"BbRadioGroup","bindings":[{"part":"list","target":"span"},{"part":"item","target":"label"},{"part":"label","target":"span"},{"part":"itemDescription","target":"span"}]},{"name":"BbBaseRadioIcon","kind":"public","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-base-radio-icon","bb-base-radio-icon--errors","bb-base-radio-icon--warnings","bb-base-radio-icon--disabled"]},{"name":"--size","documented":false,"readBy":["bb-base-radio-icon"]},{"name":"--space","documented":false,"readBy":["bb-base-radio-icon"]},{"name":"--ring-color","documented":false,"readBy":["bb-base-radio-icon--focus-visible"]},{"name":"--elev","documented":true,"readBy":["bb-base-radio-icon","bb-base-radio-icon--focus-visible"]},{"name":"--bg","documented":true,"readBy":["bb-base-radio-icon"]},{"name":"--border-color","documented":false,"readBy":["bb-base-radio-icon"]}]}]},"css":{"classes":{"bb-radio-group":["","__empty","__item","__item--*","__item--aligned","__item--description","__item--disabled","__item--focus-visible","__item--focused","__item--input-align-*","__item--input-align-bottom","__item--input-align-center","__item--input-align-top","__item--label-align-*","__item--label-align-bottom","__item--label-align-center","__item--label-align-top","__item--reverse","__item--selected","__item--vertical","__item-description","__label","__list","__list--*","__list--errors","__list--tiles","__list--warnings","__loading"]},"locals":["--color-gray-200","--gap","--hit","--row-gap","--size","--tap-row-gap","--tile-min-width"]},"attrTargets":["div"],"removed":[{"name":"color","new":null,"since":"3.0.0-beta.15","migration":"ai/guides/migration/components/bb-checkbox-group.md","silent":true,"fix":{"kind":"manual"}},{"name":"labelPosition","new":"legendPosition","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-checkbox-group.md","silent":true,"fix":{"kind":"rename"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"inputDirection","new":"listLayout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename","valueMap":{"horizontal":"horizontal","vertical":"vertical-stretch"}}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"labelPosition","to":"legendPosition","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-checkbox-group.md","fix":{"kind":"rename"}},{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"inputDirection","to":"listLayout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename","valueMap":{"horizontal":"horizontal","vertical":"vertical-stretch"}}},{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
511
511
|
{"name":"BbRating","group":"Selection","description":"Collects scalar ratings through interactive icons.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbRating.md","source":"ai/source/BbRating.md","props":[{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Allows clearing the selected rating by clicking the current value."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-label-spacing-y` for\n`--bb-label-spacing-y-compact`, so tune a compact group's label gap with\nthe `-compact` token, not the base one."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLegend","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the legend of the fieldset while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"Prefix for the ids of each option's input and of the label, description\nand message. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"inputPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"\"left\"","description":"Sets the alignment of the input. Since inputs are inline block they can be aligned just as text can."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"legend","type":"string","required":true,"description":"Text content of the legend."},{"name":"legendMode","type":"\"outside\" | \"inside\" | undefined","required":false,"description":"Legend rendering mode. `'outside'` renders the legend above the fieldset in the normal flow;\n`'inside'` overlays the legend inside the fieldset border.\nFloating mode is not supported for rating groups."},{"name":"legendPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the legend."},{"name":"modelValue","type":"number | null | undefined","required":false,"description":"Used by v-model."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the star radio inputs. Optional: the stars live inside a\nsingle component instance, so an omitted name falls back to a generated one\nthat groups them correctly on its own. Pass a name only when the value has to\nbe submitted under a known key by a native (non-JS) form post."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"pt","type":"PtMap<BbRatingPtPart, BbRatingPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:selected","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:selected","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:errors","type":"PtValue | undefined","required":false},{"name":"pt:item:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:item:readonly","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:item:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:selected","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:selected","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and the input is swapped."},{"name":"rules","type":"RuleExpression<number | null>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"size","type":"number | CssSize | keyof Sizes | undefined","required":false,"default":"'md'","description":"Defines the component size.\n\nAccepted values:\n- A key from the provided size map (`keyof T`), e.g. `'sm' | 'md' | 'lg'`\n- A custom CSS size string (e.g. `'20px'`, `'1.5rem'`, `'2em'`)\n- A number, typically interpreted as pixels by size parsers"},{"name":"stars","type":"number | undefined","required":false,"default":"5","description":"Maximum number of stars to render and maximum value of the component."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the rating becomes active (focus/click enters it)."},{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when a star input loses focus.\nForwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when the selected rating changes.\nForwards the original DOM `Event`."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when a star input receives a click.\nForwards the original DOM `MouseEvent`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when a star input gains focus.\nForwards the original DOM `FocusEvent`."},{"name":"inactive","signature":"(): void","description":"Emitted when focus/click moves outside the rating after it was active."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from the star inputs.\nForwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on a star input.\nForwards the original DOM `KeyboardEvent`."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is pressed over a star input.\nForwards the original DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is released over a star input.\nForwards the original DOM `MouseEvent`."},{"name":"update:modelValue","signature":"(value: number | null): void","description":"Emitted with the selected rating (1 to `stars`) when clicked. Emits `null`\nonly when `clearable` is enabled and the already-selected star is clicked."}],"slots":[{"name":"append","type":"object","description":"Content rendered after the row of rating stars."},{"name":"description","type":"BbRatingDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"icon","type":"BbRatingIconSlotProps","fields":["checked: boolean","disabled: boolean","id?: string","size: CssSize","value: number"],"description":"Replaces the default star SVG for each rating option."},{"name":"legend","type":"BbRatingLegendSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default fieldset legend text rendered above the rating stars."},{"name":"prepend","type":"object","description":"Content rendered before the row of rating stars."}],"exposed":[],"models":[{"name":"modelValue","type":"number | null | undefined"}],"cssProps":[{"name":"--accent","value":"var(--bb-primary)","selector":".bb-rating","description":"a filled star, and the hover preview"},{"name":"--empty","value":"var(--bb-panel)","selector":".bb-rating","description":"an unfilled star"},{"name":"--border-color","value":"var(--bb-text-faint)","selector":".bb-rating","description":"Every star's outline. `--bb-text-faint`, not `--bb-border` (Q56.21b): an empty star is `--empty` (the panel) inside it, so the outline alone draws the star, and a hairline read ~1.5:1 — under 3:1 in both schemes."},{"name":"--space","value":"0px","selector":".bb-rating","description":"Gap between stars. On the root (Q56.21a) so `pt:root` reaches it; the star row inherits it. Named `--space`, not `--spacing`: Tailwind v4 builds its whole spacing scale on a variable of that name, and a local of the same name zeroed every spacing utility used inside the slots."},{"name":"--ring-color","value":"var(--bb-ring)","selector":".bb-rating__stars","description":"focus ring around the focused star"},{"name":"--size","value":"24px","selector":".bb-rating__stars","description":"one star's box; overridden inline from the `size` prop"}],"pt":{"parts":[{"name":"root","description":"The rating's container: the legend, the stars and the lines under them."},{"name":"label","description":"The rating's name — the fieldset `<legend>`, from the `legend` prop (the part keeps the family's word)."},{"name":"description","description":"The muted line under the legend (the `description` prop)."},{"name":"message","description":"The errors / warnings line. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop)."},{"name":"item","description":"One star, the choice you click: the hidden radio, its screen-reader text and the glyph — a broadcast resolved per star. The hook for the hit area, the focus ring, spacing and the disabled cursor. NOT for colour: a `text-*` class here freezes the hover preview and the error tint; set `--accent` / `--empty` / `--border-color` on `root`. The glyph has no part of its own (dropped 2026-09-23, before any release): its size is the `size` prop, its colour the variables."}],"states":[{"name":"hasValue","description":"Component-wide: a rating is set."},{"name":"selected","description":"Per node, on `item`: a filled star."},{"name":"readonly","description":"Component-wide: the rating is `readonly`."},{"name":"disabled","description":"Component-wide while the rating is `disabled`; also per node, on `item`: a star that cannot be picked."},{"name":"warnings","description":"Component-wide: the rating shows warnings and no errors."},{"name":"errors","description":"Component-wide: the rating shows errors."}]},"tree":{"bindings":[{"part":"item","target":"label.bb-rating__item"}],"nodes":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"CommonField","kind":"internal","vocabulary":"BbRating","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]}]},"css":{"classes":{"bb-rating":["","__icon","__item","__item--disabled","__item--empty","__item--filled","__item--readonly","__label-text","__options","__stars","__stars--disabled","__stars--errors","__stars--forced-clear","__stars--has-value","__stars--readonly","__stars--warnings"]},"locals":["--accent","--bg","--border-color","--color-gray-200","--empty","--hit","--ring-color","--size","--space","--star-size","--tap-gap"]},"attrTargets":["div"],"removed":[{"name":"color","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-rating.md","silent":true,"fix":{"kind":"manual"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-rating.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-rating.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
512
512
|
{"name":"BbSelect","group":"Selection","description":"Selects one or many options from structured data.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbSelect.md","source":"ai/source/BbSelect.md","props":[{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"When `true`, the options panel opens as a bottom off-canvas sheet on mobile\nviewports instead of a floating popover; on desktop it stays a popover.\n\nWhen unset, falls back to the global `config.adaptive`."},{"name":"append:icon","type":"string | undefined","required":false,"default":"the chevron-down glyph","description":"Name of the icon to be added at the end of the input."},{"name":"autocomplete","type":"string | undefined","required":false,"description":"Guides to the browser as to the type of information expected in the field."},{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Displays a clear button when the input has a value and is being interacted with."},{"name":"comma","type":"boolean | undefined","required":false,"default":"false","description":"Sets the display model for selected values to a list of comma separated string.\nIn this mode the user cannot deselect an option by pressing the close button."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-input-h`, `--bb-input-py` and\n`--bb-label-spacing-y` for their `-compact` twins on the field, so a\n`--bb-input-h` you set on the component is ignored while `compact` is on:\nsize a compact field with `--bb-input-h-compact` (and\n`--bb-input-py-compact`) instead."},{"name":"dependencies","type":"unknown[] | undefined","required":false,"description":"Defines an array of dependencies that will trigger actions in the component upon change."},{"name":"depsDebounceTime","type":"number | undefined","required":false,"default":"0","description":"Timeout used to debounce response to changes to dependencies."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"disableWriting","type":"boolean | \"auto\" | \"mobile\" | \"desktop\" | undefined","required":false,"default":"'auto'","description":"Hides the panel's search field: `true` everywhere, `'mobile'` /\n`'desktop'` on that platform only. `'auto'` hides it for an array `items`\nshorter than the plugin's `autoDisableWritingThreshold` (6), decided per\nopen; never for a provider, nor with an `option:add` listener."},{"name":"emptyText","type":"string | undefined","required":false,"description":"String displayed when there are no items to display."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"After every successful load that is not a search, removes the picks the\nfetched rows do not contain (a single model resets to `null`). A `stash`\ndoes not count; a search or a failed load never prunes."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"failedText","type":"string | undefined","required":false,"default":"the localized `common.failedText` (\"Couldn't load items\")","description":"String displayed in the empty state while the latest load FAILED (the\nprovider threw): the twin of `emptyText` for that case."},{"name":"filterBy","type":"string[] | undefined","required":false,"default":"[]","description":"Item paths searched instead of the display text when the user types\n(empty: the display text). To turn filtering off, hide the field with\n`disableWriting`."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"groupBy","type":"string | ((item: T) => string | number | symbol) | undefined","required":false,"description":"Path to item property for grouping options."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"headerHeight","type":"number | undefined","required":false,"description":"Height of group headers in the listbox (px). Defaults to 32px (24px\ncompact; 36px / 32px on mobile viewports). Only applies when `groupBy`\nis set. An explicit value wins on every viewport."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"itemHeight","type":"number | undefined","required":false,"default":"28","description":"Height of the options in the listbox (px). Defaults to 28px (24px\ncompact; 44px / 36px on mobile viewports). An explicit value wins on\nevery viewport."},{"name":"itemProps","type":"BbSelectItemProps<T> | undefined","required":false,"description":"ADDITIONAL row fields, never the text or value: `description` (a muted\nline under the label), `prepend:icon`, `append:icon`. An object of paths\nor getters per field, or a function of the item. Nothing is read\nimplicitly, and none shows in the trigger or the chips."},{"name":"items","type":"T[] | ((context: BbSelectItemsContext) => T[] | Promise<T[]>)","required":true,"description":"The options: an array, or a provider called with a\n``BbSelectItemsContext`` (`query`, `reason`, `modelValue`, `signal`),\nsync or async. Branch on `reason !== 'search'` to resolve the selection\nby id. A provider fails by THROWING, never by returning `[]`."},{"name":"itemText","type":"ItemAccessor<T, string> | undefined","required":false,"default":"own `label`, else `text`, else `JSON.stringify(item)`","description":"Defines a path that returns a property of the object to use as text or a function\nthat returns a string.\n\nUnset: own `label`, else `text` (`{ label, value }` needs no accessor)."},{"name":"itemValue","type":"ItemAccessor<T> | undefined","required":false,"default":"own `value`, else the whole item","description":"Defines a path that returns a property of the object to use as value or a function\nthat returns any value.\n\nUnset: own `value`, even `null`."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"floating\" | \"inside\" | undefined","required":false,"description":"Label rendering mode."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles."},{"name":"loadingText","type":"string | undefined","required":false,"description":"String displayed while items are being loaded."},{"name":"max","type":"number | undefined","required":false,"description":"Maximum number of selectable items when the multiple flag is set."},{"name":"maxSelectedLabels","type":"number | undefined","required":false,"default":"Infinity","description":"Maximum number of labels shown before collapsing to a count summary.\nUnset, the labels collapse only when they overflow the field."},{"name":"modelValue","type":"any","required":false,"description":"Used by v-model. Can be any serializable type."},{"name":"modelValueDebounceTime","type":"number | undefined","required":false,"default":"0","description":"Timeout used to debounce response to changes to modelValue."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"false","description":"Allows the selection of multiple items."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet)."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"placeholder","type":"string | undefined","required":false,"description":"Text shown in the field while nothing is picked (an empty list has\n`emptyText`)."},{"name":"prefill","type":"boolean | \"interaction\" | undefined","required":false,"default":"'interaction'","description":"When the options first load: `'interaction'` on first open, `true` on\nmount, `false` only once the user types (on open with\n`disable-writing`). An array `items` or a seeded model always loads at\nonce."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the start of the input."},{"name":"pt","type":"PtItemMap<BbSelectPtPart, BbSelectOptionPtPart, BbSelectPtState, T> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:activator","type":"PtValue | undefined","required":false},{"name":"pt:activator:disabled","type":"PtValue | undefined","required":false},{"name":"pt:activator:errors","type":"PtValue | undefined","required":false},{"name":"pt:activator:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:activator:loading","type":"PtValue | undefined","required":false},{"name":"pt:activator:open","type":"PtValue | undefined","required":false},{"name":"pt:activator:readonly","type":"PtValue | undefined","required":false},{"name":"pt:activator:selected","type":"PtValue | undefined","required":false},{"name":"pt:activator:warnings","type":"PtValue | undefined","required":false},{"name":"pt:badge","type":"PtValue | ((ctx: PtItemCtx<T, BbSelectPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:badge:disabled","type":"PtValue | undefined","required":false},{"name":"pt:badge:errors","type":"PtValue | undefined","required":false},{"name":"pt:badge:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:badge:loading","type":"PtValue | undefined","required":false},{"name":"pt:badge:open","type":"PtValue | undefined","required":false},{"name":"pt:badge:readonly","type":"PtValue | undefined","required":false},{"name":"pt:badge:selected","type":"PtValue | undefined","required":false},{"name":"pt:badge:warnings","type":"PtValue | undefined","required":false},{"name":"pt:box","type":"PtValue | undefined","required":false},{"name":"pt:box:disabled","type":"PtValue | undefined","required":false},{"name":"pt:box:errors","type":"PtValue | undefined","required":false},{"name":"pt:box:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:box:loading","type":"PtValue | undefined","required":false},{"name":"pt:box:open","type":"PtValue | undefined","required":false},{"name":"pt:box:readonly","type":"PtValue | undefined","required":false},{"name":"pt:box:selected","type":"PtValue | undefined","required":false},{"name":"pt:box:warnings","type":"PtValue | undefined","required":false},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:errors","type":"PtValue | undefined","required":false},{"name":"pt:clear:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:clear:open","type":"PtValue | undefined","required":false},{"name":"pt:clear:readonly","type":"PtValue | undefined","required":false},{"name":"pt:clear:selected","type":"PtValue | undefined","required":false},{"name":"pt:clear:warnings","type":"PtValue | undefined","required":false},{"name":"pt:comma","type":"PtValue | ((ctx: PtItemCtx<T, BbSelectPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:comma:disabled","type":"PtValue | undefined","required":false},{"name":"pt:comma:errors","type":"PtValue | undefined","required":false},{"name":"pt:comma:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:comma:loading","type":"PtValue | undefined","required":false},{"name":"pt:comma:open","type":"PtValue | undefined","required":false},{"name":"pt:comma:readonly","type":"PtValue | undefined","required":false},{"name":"pt:comma:selected","type":"PtValue | undefined","required":false},{"name":"pt:comma:warnings","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:open","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:selected","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:disabled","type":"PtValue | undefined","required":false},{"name":"pt:footer:errors","type":"PtValue | undefined","required":false},{"name":"pt:footer:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:footer:loading","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:footer:readonly","type":"PtValue | undefined","required":false},{"name":"pt:footer:selected","type":"PtValue | undefined","required":false},{"name":"pt:footer:warnings","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:errors","type":"PtValue | undefined","required":false},{"name":"pt:header:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:header:loading","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:readonly","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:header:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:open","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:selected","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:open","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:selected","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:errors","type":"PtValue | undefined","required":false},{"name":"pt:input:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:input:loading","type":"PtValue | undefined","required":false},{"name":"pt:input:open","type":"PtValue | undefined","required":false},{"name":"pt:input:readonly","type":"PtValue | undefined","required":false},{"name":"pt:input:selected","type":"PtValue | undefined","required":false},{"name":"pt:input:warnings","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription","type":"PtValue | ((ctx: PtItemCtx<T, BbSelectPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemDescription:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:errors","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:loading","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:open","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:readonly","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:warnings","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon","type":"PtValue | ((ctx: PtItemCtx<T, BbSelectPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:errors","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:loading","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:open","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:itemText","type":"PtValue | ((ctx: PtItemCtx<T, BbSelectPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemText:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemText:errors","type":"PtValue | undefined","required":false},{"name":"pt:itemText:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:itemText:loading","type":"PtValue | undefined","required":false},{"name":"pt:itemText:open","type":"PtValue | undefined","required":false},{"name":"pt:itemText:readonly","type":"PtValue | undefined","required":false},{"name":"pt:itemText:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemText:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:open","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:selected","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list:errors","type":"PtValue | undefined","required":false},{"name":"pt:list:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:list:loading","type":"PtValue | undefined","required":false},{"name":"pt:list:open","type":"PtValue | undefined","required":false},{"name":"pt:list:readonly","type":"PtValue | undefined","required":false},{"name":"pt:list:selected","type":"PtValue | undefined","required":false},{"name":"pt:list:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:open","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:selected","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:option","type":"PtValue | ((ctx: PtItemCtx<T, BbSelectPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:option:disabled","type":"PtValue | undefined","required":false},{"name":"pt:option:errors","type":"PtValue | undefined","required":false},{"name":"pt:option:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:option:loading","type":"PtValue | undefined","required":false},{"name":"pt:option:open","type":"PtValue | undefined","required":false},{"name":"pt:option:readonly","type":"PtValue | undefined","required":false},{"name":"pt:option:selected","type":"PtValue | undefined","required":false},{"name":"pt:option:warnings","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:errors","type":"PtValue | undefined","required":false},{"name":"pt:panel:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:panel:loading","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:readonly","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel:warnings","type":"PtValue | undefined","required":false},{"name":"pt:prefix","type":"PtValue | undefined","required":false},{"name":"pt:prefix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:prefix:errors","type":"PtValue | undefined","required":false},{"name":"pt:prefix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:prefix:loading","type":"PtValue | undefined","required":false},{"name":"pt:prefix:open","type":"PtValue | undefined","required":false},{"name":"pt:prefix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:prefix:selected","type":"PtValue | undefined","required":false},{"name":"pt:prefix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:errors","type":"PtValue | undefined","required":false},{"name":"pt:sheet:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:sheet:loading","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:readonly","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet:warnings","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:disabled","type":"PtValue | undefined","required":false},{"name":"pt:spinner:errors","type":"PtValue | undefined","required":false},{"name":"pt:spinner:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner:open","type":"PtValue | undefined","required":false},{"name":"pt:spinner:readonly","type":"PtValue | undefined","required":false},{"name":"pt:spinner:selected","type":"PtValue | undefined","required":false},{"name":"pt:spinner:warnings","type":"PtValue | undefined","required":false},{"name":"pt:suffix","type":"PtValue | undefined","required":false},{"name":"pt:suffix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:suffix:errors","type":"PtValue | undefined","required":false},{"name":"pt:suffix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:suffix:loading","type":"PtValue | undefined","required":false},{"name":"pt:suffix:open","type":"PtValue | undefined","required":false},{"name":"pt:suffix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:suffix:selected","type":"PtValue | undefined","required":false},{"name":"pt:suffix:warnings","type":"PtValue | undefined","required":false},{"name":"queryDebounceTime","type":"number | undefined","required":false,"default":"500","description":"Time to wait when the user stops writing in the input before querying data."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and\nthe input is swapped."},{"name":"rules","type":"RuleExpression<any>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"selectable","type":"boolean | ((item: T) => boolean) | undefined","required":false,"default":"true","description":"Defines whether options are selectable.\nCan be a global boolean that affects all options or a function\nthat accepts an item and returns a boolean that only affects that item.\nNon-selectable options are rendered disabled."},{"name":"selectedLabelsFn","type":"((count: number) => string) | undefined","required":false,"description":"Function that returns a string to be displayed when the number of selected labels\nis greater than `maxSelectedLabels`."},{"name":"stash","type":"boolean | undefined","required":false,"default":"false","description":"Keeps picked options named across searches: a pick stays resolvable (its\nchip keeps its text) when a later search or a failed load no longer\nreturns it. It follows the model, and does not keep a pick valid:\n`enforce-coherence` still prunes it."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"variant","type":"InputVariantType | undefined","required":false,"default":"'outline'","values":["outline","secondary","none","ghost"],"description":"Visual variant of the field box, with the `BbButton` names and tokens.\nColours only, so a form never reflows; `'ghost'` has no border in any\nstate, and `'none'` takes no look at all (you own hover, focus and the\nstates). Register more with the plugin's `inputVariants`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the select becomes active (focus enters it)."},{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the activator loses focus. Forwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted on the native `change` event. Forwards the original DOM `Event`."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when the activator is clicked. Forwards the original DOM `MouseEvent`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the activator receives focus. Forwards the original DOM `FocusEvent`."},{"name":"hidden","signature":"(): void","description":"Emitted once the options surface has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the options surface starts to close."},{"name":"inactive","signature":"(): void","description":"Emitted when focus moves outside the whole select after it was active."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native `input` events from the search field. Forwards the DOM `Event`."},{"name":"option:add","signature":"(text: string): void","description":"Emitted with the typed text when the user confirms a value that is not in\nthe list (Enter in the search field). Binding it keeps the search field\nwritable, which makes the select creatable."},{"name":"show","signature":"(): void","description":"Emitted as soon as the options surface starts to open (the popover, or the sheet on a phone)."},{"name":"shown","signature":"(): void","description":"Emitted once the options surface is open and its open transition has finished."},{"name":"update:modelValue","signature":"(value: any): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"append","type":"{ query: string; focus: () => void; close: () => Promise<void>; }","description":"Content appended inside the input field, after the value area."},{"name":"append:outer","type":"{ query: string; close: () => Promise<void>; }","description":"Content appended outside the input field wrapper."},{"name":"chip","type":"BbSelectChipSlotProps<T>","fields":["item: T","text: string","value: any","disabled: boolean","deselect: () => void"],"description":"Replaces the default badge rendered for each selection in `multiple` mode.\nNot called in `comma` mode, nor for the collapsed \"+N\" summary."},{"name":"description","type":"BbSelectDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"empty","type":"{ query: string; focus: () => void; error: unknown; }","description":"Content shown when no options match the query or the list is empty.\n`error` is what the latest failed load threw, untouched (`null` when\nnone)."},{"name":"footer","type":"BbSelectPanelSlotProps","fields":["close: () => Promise<void>","clear: () => void","focus: () => void","query: string","selectedOptions: BbSelectResolvedOption[]"],"description":"Content pinned to the bottom of the options panel, below the options list.\nRendered in both the desktop popover and the adaptive sheet."},{"name":"group","type":"BbSelectGroupSlotProps<T>","fields":["text: string","item: T","index: number","length: number","disabled: boolean"],"description":"Replaces the default group header rendered above grouped options."},{"name":"header","type":"BbSelectPanelSlotProps","fields":["close: () => Promise<void>","clear: () => void","focus: () => void","query: string","selectedOptions: BbSelectResolvedOption[]"],"description":"Content pinned to the top of the options panel, above the search field.\nRendered in both the desktop popover and the adaptive sheet."},{"name":"label","type":"BbSelectLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default label text rendered above the input."},{"name":"loading","type":"{ query: string; }","description":"Content shown inside the options dropdown while items are loading."},{"name":"option","type":"BbSelectOptionSlotProps<T>","fields":["disabled: boolean","focused: boolean","index: number","hasErrors?: boolean","item: T","loading: boolean","selected: boolean","text: string","value: any","description: string"],"description":"Replaces the default rendering of each option row in the dropdown."},{"name":"prefix","type":"object","description":"Content rendered as an inline prefix inside the input field."},{"name":"prepend","type":"{ query: string; focus: () => void; close: () => Promise<void>; }","description":"Content prepended inside the input field, before the value area."},{"name":"prepend:outer","type":"{ query: string; close: () => Promise<void>; }","description":"Content prepended outside the input field wrapper."},{"name":"suffix","type":"object","description":"Content rendered as an inline suffix inside the input field."}],"exposed":[],"models":[{"name":"modelValue","type":"any"}],"cssProps":[{"name":"--compensation-multiplier","value":"0.3","selector":".bb-select__field","description":"Fraction of the shell's inner padding the chips row is pulled back by when no prepend icon precedes it (see the negative margin below)."},{"name":"--border-color","value":"per variant","selector":"pt:box","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."}],"pt":{"parts":[{"name":"root","description":"The field's outer container: the label, the box and the lines under it; a `class` on the component lands here. (The options surface is `panel`.)"},{"name":"label","description":"The label text above the box (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line under the box. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"box","description":"The bordered box around the input — border, background and radius; the `variant` paints here."},{"name":"activator","description":"The button you act on to open the options — the field's control (not a text field: `data-test` fits here, `autocomplete` does not). The chevron is chrome. It is `activator`, not the family's `input`: the field itself is a button (the date / time inputs' trigger is the same word)."},{"name":"input","description":"The search field inside the options surface, when it shows one (see `disable-writing`) — handed to the `BbSelectPopover` as its own `pt:input`. Its ✕ is chrome."},{"name":"icon","description":"The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error / warning glyph) is never in it."},{"name":"spinner","description":"The spinner inside the box while `loading`."},{"name":"prefix","description":"The `#prefix` slot's wrapper, inside the box before the input."},{"name":"suffix","description":"The `#suffix` slot's wrapper, inside the box after the input."},{"name":"clear","description":"The ✕ in the field that empties the selection (`clearable`) — one node, never a chip's own ✕."},{"name":"panel","description":"The options surface — the popover's painted bubble on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet the options open in on a phone only."},{"name":"header","description":"The band around your `#header` slot: at the top of the flyout on desktop, the sheet's header on a phone."},{"name":"footer","description":"The band around your `#footer` slot: at the bottom of the flyout on desktop, the sheet's footer on a phone."},{"name":"list","description":"The `role=\"listbox\"` node that holds the options. Virtualised: its height is written inline and its rows are positioned by the list, which limits what a layout utility can do there. The listbox's groups and the chips are not parts."},{"name":"option","description":"One listbox option — a broadcast resolved per option. Also takes a per-item function, called with the option's raw item."},{"name":"itemText","description":"An option's label — resolved with that option's states. A custom `#option` slot replaces it. Also takes a per-item function."},{"name":"itemIcon","description":"An option's prepend / append icons (`itemProps`) — resolved with that option's states. Also takes a per-item function."},{"name":"itemDescription","description":"An option's second line (its description) — resolved with that option's states. A custom `#option` slot replaces it. Also takes a per-item function."},{"name":"badge","description":"Each selected value's `BbBadge` root with `multiple` — a broadcast resolved per value, on the field's chips and on the phone sheet's. The badge's own ✕ is chrome, never `clear`. In the field, not rendered when the `#chip` slot replaces it, nor in `comma` mode; the sheet's chips are always badges."},{"name":"comma","description":"Each selected value with `multiple` and `comma` — a broadcast resolved per value."}],"states":[{"name":"hasValue","description":"Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`)."},{"name":"selected","description":"Per node, on `option` and its `item-*` parts: a chosen option."},{"name":"readonly","description":"Component-wide: the control is `readonly` — shown, focusable, not editable."},{"name":"disabled","description":"Component-wide while the select is `disabled`; also per node, on `option` and its `item-*` parts: an option that is disabled."},{"name":"warnings","description":"Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together."},{"name":"errors","description":"Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red."},{"name":"open","description":"Component-wide: the options surface is showing."},{"name":"loading","description":"Component-wide: `loading` is on; the box shows its `spinner`."}]},"tree":{"bindings":[{"part":"badge","target":"CommonField"},{"part":"activator","target":"input.bb-select__activator"},{"part":"badge","target":"input.bb-select__activator"},{"part":"comma","target":"span.bb-select__comma"},{"part":"badge","target":"span.bb-select__comma"},{"part":"badge","target":"BbBadge"},{"part":"controlAttrs","target":"input"},{"part":"badge","target":"input"}],"forwards":[{"to":"BbSelectPopover","mapping":"{ panel: 'panel', sheet: 'sheet', header: 'header', footer: 'footer', input: 'input', list: 'list', option: 'option', itemText: 'itemText', itemIcon: 'itemIcon', itemDescription: 'itemDescription' }"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbSelect","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"CommonFieldInput","kind":"internal","vocabulary":"BbSelect","bindings":[{"part":"box","target":"span.bb-field-input__box"},{"part":"prefix","target":"span.bb-field-input__prefix"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"ClearableButton"},{"part":"spinner","target":"BbSpinner"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--bg-hover","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-field-input__box"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix","bb-field-input__prepend-icon","bb-field-input__append-icon"]},{"name":"--border-color","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--border-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-size","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-color","documented":true,"readBy":["bb-field-input__box"]},{"name":"--elev","documented":true,"readBy":["bb-field-input__box"]},{"name":"--frost","documented":true,"readBy":["bb-field-input__box"]},{"name":"--inside-label-clearance","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix"]}],"children":[{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]},{"name":"BbBadge","kind":"public","vocabulary":"BbBadge","bindings":[{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"button.bb-badge__clear"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-badge"]},{"name":"--fg","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--bw","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--border-color","documented":false,"readBy":["bb-badge"]},{"name":"--ring-color","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--ring-size","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--min-size-md","documented":true,"readBy":["bb-badge"]},{"name":"--min-size","documented":true,"readBy":["bb-badge"]},{"name":"--elev","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--r","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--fs","documented":true,"readBy":["bb-badge"]},{"name":"--icon-size","documented":true,"readBy":["bb-badge__icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge__clear"]},{"name":"--gap","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--px","documented":true,"readBy":["bb-badge","bb-badge--icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge--clearable"]},{"name":"--clear-size","documented":true,"readBy":["bb-badge__clear","bb-icon"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--pad-left","documented":true,"readBy":["bb-badge__body"]},{"name":"--pad-right","documented":false,"readBy":["bb-badge__body","bb-badge__clear"]},{"name":"--size","documented":false}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]},{"name":"BbSelectPopover","kind":"public","vocabulary":"BbSelectPopover","bindings":[{"part":"input","target":"input.bb-select-popover__input"},{"part":"clear","target":"ClearableButton"},{"part":"panel","target":"CommonPopover"},{"part":"root","target":"CommonPopover"},{"part":"header","target":"div.bb-select-popover__header"},{"part":"footer","target":"div.bb-select-popover__footer"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ header: 'header', footer: 'footer', panel: 'root', sheet: 'root' }"}],"cssProps":[{"name":"--bg","documented":false,"readBy":["bb-listbox__outer-container"]},{"name":"--min-size","documented":false},{"name":"--px","documented":false},{"name":"--clear-size","documented":false}],"children":[{"name":"BbBadge","kind":"public","repeated":true,"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-badge"]},{"name":"--fg","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--bw","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--border-color","documented":false,"readBy":["bb-badge"]},{"name":"--ring-color","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--ring-size","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--min-size-md","documented":true,"readBy":["bb-badge"]},{"name":"--min-size","documented":true,"readBy":["bb-badge"]},{"name":"--elev","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--r","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--fs","documented":true,"readBy":["bb-badge"]},{"name":"--icon-size","documented":true,"readBy":["bb-badge__icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge__clear"]},{"name":"--gap","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--px","documented":true,"readBy":["bb-badge","bb-badge--icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge--clearable"]},{"name":"--clear-size","documented":true,"readBy":["bb-badge__clear","bb-icon"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--pad-left","documented":true,"readBy":["bb-badge__body"]},{"name":"--pad-right","documented":false,"readBy":["bb-badge__body","bb-badge__clear"]},{"name":"--size","documented":false}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"ClearableButton","kind":"internal","repeated":true},{"name":"CommonPopover","kind":"internal"},{"name":"ErrorIcon","kind":"internal","repeated":true,"cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}]},{"name":"WarningIcon","kind":"internal","repeated":true,"cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}]},{"name":"ListBox","kind":"internal","children":[{"name":"FlatListBox","kind":"internal","vocabulary":"BbSelectPopover","bindings":[{"part":"list","target":"span.bb-listbox__list"},{"part":"option","target":"span.bb-listbox__option"},{"part":"itemIcon","target":"BbIcon"},{"part":"itemText","target":"span.bb-listbox__item-text"},{"part":"itemDescription","target":"span.bb-listbox__item-description"}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","repeated":true,"cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}]}]},{"name":"GroupedListBox","kind":"internal","vocabulary":"BbSelectPopover","bindings":[{"part":"list","target":"span.bb-listbox__list"},{"part":"option","target":"span.bb-listbox__option"},{"part":"itemIcon","target":"BbIcon"},{"part":"itemText","target":"span.bb-listbox__item-text"},{"part":"itemDescription","target":"span.bb-listbox__item-description"}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","repeated":true,"cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}]}]}]},{"name":"BbSmoothHeight","kind":"public"}]}]},"css":{"classes":{"bb-select":["","__activator","__badge","__chips-row","__chips-row--chips","__chips-row--hidden","__comma","__display-value","__field","__field--disabled","__field--readonly","__field--shown","__max-reached","__placeholder","__value"]},"locals":["--color-gray-200","--compensation-multiplier"]},"attrTargets":["div","input"],"removed":[{"name":"allowWriting","new":"disableWriting","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select.md","silent":true,"fix":{"kind":"invert","valueMap":{"not-mobile":"mobile"}}},{"name":"showChevron","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select.md","silent":true,"fix":{"kind":"remove"}},{"name":"updateOnAnimationFrame","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select.md","silent":true,"fix":{"kind":"remove"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-select.md","silent":true,"fix":{"kind":"rename"}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"prepend-outer","new":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append-outer","new":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"allowWriting","to":"disableWriting","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select.md","fix":{"kind":"invert","valueMap":{"not-mobile":"mobile"}}},{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-select.md","fix":{"kind":"rename"}},{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"prepend-outer","to":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append-outer","to":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
513
|
-
{"name":"BbSelectPopover","group":"Selection","description":"Provides popover-driven option selection and search.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbSelectPopover.md","source":"ai/source/BbSelectPopover.md","props":[{"name":"activator","type":"Record<string, any> | HTMLElement | null | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the activator slot is not rendered and event listeners\nare attached programmatically to the referenced element."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile, the panel opens as a bottom sheet instead of a floating\npopover, with the same search and list. Unset, the global\n`config.adaptive` applies."},{"name":"anchor","type":"Record<string, any> | HTMLElement | null | undefined","required":false,"default":"null","description":"Override the element used for popover positioning and width measurement.\nUseful when the focusable activator is narrower than its visual container\n(e.g. a button inside a wrapper). Falls back to `activatorEl` when omitted."},{"name":"ariaDescribedby","type":"string | string[] | undefined","required":false,"description":"Space-separated IDREF(s) that describe this field for assistive technologies.\nAccepts either a string or array of ids."},{"name":"ariaInvalid","type":"boolean | undefined","required":false,"default":"undefined","description":"Explicit invalid state for accessibility semantics.\nFalls back to `hasErrors` when not provided."},{"name":"autocomplete","type":"string | undefined","required":false,"default":"\"off\"","description":"Browser autocomplete hint for the popover search input."},{"name":"boundary","type":"string | Record<string, any> | HTMLElement | null | undefined","required":false,"description":"Constrains the popover to a specific boundary element."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Shows a clear button in the search field, in the lens' place while there\nis a query or a selection; it resets both. None without a search field.\nLeave it off when the activator already clears (as BbSelect's does)."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Apply the compact density variant."},{"name":"dependencies","type":"unknown[] | undefined","required":false,"default":"[]","description":"Additional dependencies that trigger item reloading when changed."},{"name":"depsDebounceTime","type":"number | undefined","required":false,"default":"0","description":"Debounce delay (ms) for dependency-triggered reloads."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"disableFlip","type":"boolean | undefined","required":false,"default":"false","description":"Disables the automatic flip to the opposite side when the popover\nwould overflow (flipping is on by default)."},{"name":"disableWriting","type":"boolean | \"auto\" | \"mobile\" | \"desktop\" | undefined","required":false,"default":"'auto'","description":"Hides the panel's search field: `true` everywhere, `'mobile'` /\n`'desktop'` on that platform only. `'auto'` hides it for an array `items`\nshorter than the plugin's `autoDisableWritingThreshold` (6), decided per\nopen; never for a provider, nor with an `option:add` listener."},{"name":"emptyText","type":"string | undefined","required":false,"description":"Message displayed when no items are available."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"Reset modelValue to `null` or empty array if it no longer matches available items.\n\nChecked after every applied, successful load whose `reason` is not\n`'search'` (an empty one included), against the FETCHED rows only (a\n`stash` does not count); a search or a failed load never prunes."},{"name":"failedText","type":"string | undefined","required":false,"default":"the localized `common.failedText` (\"Couldn't load items\")","description":"Message displayed in the empty state while the latest load FAILED (the\nprovider threw): the twin of `emptyText` for that case."},{"name":"filterBy","type":"string[] | undefined","required":false,"default":"[]","description":"Item paths searched instead of the display text when the user types\n(empty: the display text). To turn filtering off, hide the field with\n`disableWriting`."},{"name":"groupBy","type":"string | ((item: Item) => string | number | symbol) | undefined","required":false,"description":"Path to item property for grouping options."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Marks the component as being in error state."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Marks the component as being in a warning state. Visually mirrors\n`hasErrors` but uses `--bb-warn` chrome; errors take priority when both\nare set."},{"name":"headerHeight","type":"number | undefined","required":false,"description":"Height of group headers in the listbox (px). Defaults to 32px (24px\ncompact; 36px / 32px on mobile viewports). Only applies when `groupBy`\nis set. An explicit value wins on every viewport."},{"name":"id","type":"string | undefined","required":false,"description":"Seeds the ids the popover sets: its listbox is `<id>_listbox` (the\nactivator's `aria-controls`) and each option's id derives from it.\nGenerated when omitted."},{"name":"itemHeight","type":"number | undefined","required":false,"default":"28","description":"Height of the options in the listbox (px). Defaults to 28px (24px\ncompact; 44px / 36px on mobile viewports). An explicit value wins on\nevery viewport."},{"name":"itemProps","type":"BbSelectItemProps<Item> | undefined","required":false,"description":"ADDITIONAL row fields, never the text or value: `description` (a muted\nline under the label), `prepend:icon`, `append:icon`. An object of paths\nor getters per field, or a function of the item. Nothing is read\nimplicitly, and none shows in the trigger or the chips."},{"name":"items","type":"Item[] | ((context: BbSelectPopoverItemsContext) => Item[] | Promise<Item[]>)","required":true,"default":"[]","description":"The options: an array, or a provider called with a\n``BbSelectPopoverItemsContext`` (`query`, `reason`, `modelValue`,\n`signal`), sync or async. Branch on `reason !== 'search'` to resolve the\nselection by id. A provider fails by THROWING, never by returning `[]`."},{"name":"itemText","type":"ItemAccessor<Item, string> | undefined","required":false,"default":"own `label`, else `text`, else `JSON.stringify(item)`","description":"Path to item property for display text or function to extract it.\n\nUnset: own `label`, else `text` (`{ label, value }` needs no accessor)."},{"name":"itemValue","type":"ItemAccessor<Item> | undefined","required":false,"default":"own `value`, else the whole item","description":"Path to item property for value or function to extract it.\n\nUnset: own `value`, even `null`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Display the loading state styles."},{"name":"loadingText","type":"string | undefined","required":false,"description":"Message shown while items are being loaded."},{"name":"max","type":"number | undefined","required":false,"default":"Infinity","description":"Maximum number of selectable items (limits selection when `multiple` is true)."},{"name":"modelValue","type":"any","required":true,"description":"v-model value. Single value for single select, array for multiple select."},{"name":"modelValueDebounceTime","type":"number | undefined","required":false,"default":"0","description":"Debounce delay (ms) for modelValue change handling."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"false","description":"Enable multiple item selection. When true, modelValue must be an array."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet)."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Distance (px) between the activator and the popover."},{"name":"padding","type":"number | undefined","required":false,"default":"10","description":"Minimum page padding used by floating shift middleware."},{"name":"placement","type":"Placement | undefined","required":false,"default":"\"bottom\"","values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end"],"description":"Floating placement of the popover."},{"name":"prefill","type":"boolean | \"interaction\" | undefined","required":false,"default":"\"interaction\"","description":"When the options first load: `'interaction'` on first open, `true` on\nmount (and in SSR), `false` once the user types (on open with\n`disable-writing` or a non-empty model). An array `items` always\nresolves on mount; otherwise a seeded model's text waits for the first\nopen."},{"name":"pt","type":"PtItemMap<BbSelectPopoverPtPart, BbSelectPopoverOptionPtPart, BbSelectPopoverPtState, Item> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:open","type":"PtValue | undefined","required":false},{"name":"pt:clear:selected","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:disabled","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:footer:selected","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:open","type":"PtValue | undefined","required":false},{"name":"pt:input:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription","type":"PtValue | ((ctx: PtItemCtx<Item, BbSelectPopoverPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemDescription:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:open","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon","type":"PtValue | ((ctx: PtItemCtx<Item, BbSelectPopoverPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:open","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemText","type":"PtValue | ((ctx: PtItemCtx<Item, BbSelectPopoverPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemText:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemText:open","type":"PtValue | undefined","required":false},{"name":"pt:itemText:selected","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list:open","type":"PtValue | undefined","required":false},{"name":"pt:list:selected","type":"PtValue | undefined","required":false},{"name":"pt:option","type":"PtValue | ((ctx: PtItemCtx<Item, BbSelectPopoverPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:option:disabled","type":"PtValue | undefined","required":false},{"name":"pt:option:open","type":"PtValue | undefined","required":false},{"name":"pt:option:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"queryDebounceTime","type":"number | undefined","required":false,"default":"500","description":"Debounce delay (ms) before triggering search queries after user input stops."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Prevents opening the popover while keeping the activator accessible."},{"name":"searchInputAriaLabel","type":"string | undefined","required":false,"default":"`t('select.searchLabel')` (`'Search options'`)","description":"Accessible label used by the search input rendered inside the popover.\nFalls back to the localized `select.searchLabel` key when omitted."},{"name":"selectable","type":"boolean | ((item: Item) => boolean) | undefined","required":false,"default":"true","description":"Defines whether options are selectable.\nCan be a global boolean that affects all options or a function\nthat accepts an item and returns a boolean that only affects that item.\nNon-selectable options are rendered disabled."},{"name":"stash","type":"boolean | undefined","required":false,"default":"false","description":"Keeps picked options named across searches: a pick stays resolvable when\na later search or a failed load no longer returns it. It follows the\nmodel, and does not keep a pick valid: `enforce-coherence` still prunes\nit."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Transition duration (ms) for popover show/hide animations."},{"name":"width","type":"string | number | undefined","required":false,"default":"\"200\"","description":"Width of the popover in pixels, percentage, or `'auto'`. A bare number is\nread as pixels — the default is the string `'200'`, not the number `200`."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the component becomes active (focus enters it)."},{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the activator loses focus."},{"name":"change","signature":"(event: Event): void","description":"Emitted when the value changes via native change event."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when the activator is clicked."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the activator receives focus."},{"name":"hidden","signature":"(): void","description":"Emitted once the options surface has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the options surface starts to close."},{"name":"inactive","signature":"(): void","description":"Emitted when focus moves outside the entire component after it was active."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from the search input."},{"name":"option:add","signature":"(text: string): void","description":"Emitted when the user types a new value and confirms it (Enter key) while\nwriting is enabled (i.e. `disableWriting` does not suppress the search\ninput for the current surface)."},{"name":"show","signature":"(): void","description":"Emitted as soon as the options surface starts to open (the popover, or the sheet on a phone)."},{"name":"shown","signature":"(): void","description":"Emitted once the options surface is open and its open transition has finished."},{"name":"update:modelValue","signature":"(value: any): void","description":"Emitted with the next selection value whenever selection changes."}],"slots":[{"name":"activator","type":"BbSelectPopoverActivatorSlotProps","fields":["clear: () => void","close: () => Promise<void>","focus: () => void","disabled: boolean","loading: boolean","open: () => Promise<void>","props: { ref: (reference: unknown) => void; }","query: string","readonly: boolean","selectedOptions: BbSelectResolvedOption<any>[]","shown: boolean","text: string","toggle: () => Promise<void>"],"description":"Replaces the default trigger element that opens the select popover."},{"name":"empty","type":"{ query: string; focus: () => void; error: unknown; }","description":"Content shown when no options match the query or the list is empty.\n`error` is what the latest failed load threw, untouched (`null` when\nnone)."},{"name":"footer","type":"BbSelectPopoverPanelSlotProps","fields":["close: () => Promise<void>","clear: () => void","focus: () => void","query: string","selectedOptions: BbSelectResolvedOption<any>[]"],"description":"Content pinned to the bottom of the panel, below the options list. Rendered in\nboth the desktop popover and the adaptive sheet."},{"name":"group","type":"BbSelectPopoverGroupSlotProps<Item>","fields":["disabled: boolean","index: number","item: Item","length: number","text: string"],"description":"Replaces the default group header rendered above grouped options."},{"name":"header","type":"BbSelectPopoverPanelSlotProps","fields":["close: () => Promise<void>","clear: () => void","focus: () => void","query: string","selectedOptions: BbSelectResolvedOption<any>[]"],"description":"Content pinned to the top of the panel, above the search field. Rendered in\nboth the desktop popover and the adaptive sheet."},{"name":"loading","type":"{ query: string; }","description":"Content shown inside the options dropdown while items are loading."},{"name":"option","type":"BbSelectPopoverOptionSlotProps<Item>","fields":["disabled: boolean","focused: boolean","index: number","item: Item","loading: boolean","selected: boolean","text: string","value: any","description: string"],"description":"Replaces the default rendering of each option row in the dropdown."}],"exposed":[],"models":[{"name":"modelValue","type":"any"}],"cssProps":[{"name":"--bg","value":"var(--bb-panel)","selector":".bb-listbox__outer-container"},{"name":"--min-size","value":"2.125rem","selector":".bb-select-popover__sheet-chip"},{"name":"--px","value":"0.75rem","selector":".bb-select-popover__sheet-chip"},{"name":"--clear-size","value":"1.25rem","selector":".bb-select-popover__sheet-chip"}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The options surface you see — the popover's painted bubble on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet the surface becomes on a phone (the `BbOffCanvas` root) — never the desktop surface. Applied after `panel`, so it wins a conflict there."},{"name":"input","description":"The search field."},{"name":"clear","description":"The ✕ that empties the search field."},{"name":"list","description":"The `role=\"listbox\"` node that holds the options. Virtualised: its height is written inline and its rows are positioned by the list, which limits what a layout utility can do there. The listbox's groups and the chips are not parts."},{"name":"option","description":"One listbox option — a broadcast resolved per option. Also takes a per-item function, called with the option's raw item."},{"name":"itemText","description":"An option's label — resolved with that option's states. A custom `#option` slot replaces it. Also takes a per-item function."},{"name":"itemIcon","description":"An option's prepend / append icons (`itemProps`) — resolved with that option's states. Also takes a per-item function."},{"name":"itemDescription","description":"An option's second line (its description) — resolved with that option's states. A custom `#option` slot replaces it. Also takes a per-item function."},{"name":"header","description":"The flyout's header band."},{"name":"footer","description":"The flyout's footer band."}],"states":[{"name":"selected","description":"Per node, on `option` and its `item-*` parts: a chosen option."},{"name":"disabled","description":"Per node, on `option` and its `item-*` parts: an option that is disabled."},{"name":"open","description":"Component-wide: the options surface is showing."}]},"tree":{"bindings":[{"part":"input","target":"input.bb-select-popover__input"},{"part":"clear","target":"ClearableButton"},{"part":"panel","target":"CommonPopover"},{"part":"root","target":"CommonPopover"},{"part":"header","target":"div.bb-select-popover__header"},{"part":"footer","target":"div.bb-select-popover__footer"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ header: 'header', footer: 'footer', panel: 'root', sheet: 'root' }"}],"nodes":[{"name":"BbBadge","kind":"public","vocabulary":"BbBadge","bindings":[{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"button.bb-badge__clear"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-badge"]},{"name":"--fg","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--bw","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--border-color","documented":false,"readBy":["bb-badge"]},{"name":"--ring-color","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--ring-size","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--min-size-md","documented":true,"readBy":["bb-badge"]},{"name":"--min-size","documented":true,"readBy":["bb-badge"]},{"name":"--elev","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--r","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--fs","documented":true,"readBy":["bb-badge"]},{"name":"--icon-size","documented":true,"readBy":["bb-badge__icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge__clear"]},{"name":"--gap","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--px","documented":true,"readBy":["bb-badge","bb-badge--icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge--clearable"]},{"name":"--clear-size","documented":true,"readBy":["bb-badge__clear","bb-icon"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--pad-left","documented":true,"readBy":["bb-badge__body"]},{"name":"--pad-right","documented":false,"readBy":["bb-badge__body","bb-badge__clear"]},{"name":"--size","documented":false}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"CommonPopover","kind":"internal"},{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ListBox","kind":"internal","children":[{"name":"FlatListBox","kind":"internal","vocabulary":"BbSelectPopover","bindings":[{"part":"list","target":"span.bb-listbox__list"},{"part":"option","target":"span.bb-listbox__option"},{"part":"itemIcon","target":"BbIcon"},{"part":"itemText","target":"span.bb-listbox__item-text"},{"part":"itemDescription","target":"span.bb-listbox__item-description"}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","repeated":true,"cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}]}]},{"name":"GroupedListBox","kind":"internal","vocabulary":"BbSelectPopover","bindings":[{"part":"list","target":"span.bb-listbox__list"},{"part":"option","target":"span.bb-listbox__option"},{"part":"itemIcon","target":"BbIcon"},{"part":"itemText","target":"span.bb-listbox__item-text"},{"part":"itemDescription","target":"span.bb-listbox__item-description"}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","repeated":true,"cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}]}]}]},{"name":"BbSmoothHeight","kind":"public"}]},"css":{"classes":{"bb-listbox":["","--compact","--described","--empty","--grouped","--loading","--multiple","--open","__empty","__failed","__failed--divided","__failed-icon","__failed-text","__group","__group-header","__group-header-label","__inner-container","__item-description","__item-icon","__item-text","__list","__loading","__option","__option--disabled","__option--focused","__option--selected","__option-append-icon","__option-check","__option-content","__option-prepend-icon","__outer-container"],"bb-select-popover":["","--clearable-active","--errors","--loading","--reloading","--sheet","--warnings","__clear","__focus-proxy","__footer","__header","__input","__panel","__search-container","__search-error-icon","__search-icon","__search-strip","__search-warning-icon","__sheet","__sheet-chip","__sheet-chips","__sheet-selection"],"bb-select-popover-escape":[""],"bb-select-sheet-chip-attrs":[""]},"locals":["--bg","--close-size","--color-gray-200","--group-header-height","--option-font-size","--option-h","--option-height","--py","--transition-duration","--w"]},"removed":[{"name":"allowWriting","new":"disableWriting","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"invert","valueMap":{"not-mobile":"mobile"}}},{"name":"arrowPadding","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"flip","new":"disableFlip","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"invert"}},{"name":"hideArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"showArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"allowWriting","to":"disableWriting","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","fix":{"kind":"invert","valueMap":{"not-mobile":"mobile"}}},{"from":"flip","to":"disableFlip","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","fix":{"kind":"invert"}},{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}}]},
|
|
513
|
+
{"name":"BbSelectPopover","group":"Selection","description":"Provides popover-driven option selection and search.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbSelectPopover.md","source":"ai/source/BbSelectPopover.md","props":[{"name":"activator","type":"Record<string, any> | HTMLElement | null | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the activator slot is not rendered and event listeners\nare attached programmatically to the referenced element."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile, the panel opens as a bottom sheet instead of a floating\npopover, with the same search and list. Unset, the global\n`config.adaptive` applies."},{"name":"anchor","type":"Record<string, any> | HTMLElement | null | undefined","required":false,"default":"null","description":"Override the element used for popover positioning and width measurement.\nUseful when the focusable activator is narrower than its visual container\n(e.g. a button inside a wrapper). Falls back to `activatorEl` when omitted."},{"name":"ariaDescribedby","type":"string | string[] | undefined","required":false,"description":"Space-separated IDREF(s) that describe this field for assistive technologies.\nAccepts either a string or array of ids."},{"name":"ariaInvalid","type":"boolean | undefined","required":false,"default":"undefined","description":"Explicit invalid state for accessibility semantics.\nFalls back to `hasErrors` when not provided."},{"name":"autocomplete","type":"string | undefined","required":false,"default":"\"off\"","description":"Browser autocomplete hint for the popover search input."},{"name":"boundary","type":"string | Record<string, any> | HTMLElement | null | undefined","required":false,"description":"Constrains the popover to a specific boundary element: it stays inside\nit alongside its trigger (sideways for a popover above or below); away\nfrom the trigger it may pass the edge, and it flips at the viewport only."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Shows a clear button in the search field, in the lens' place while there\nis a query or a selection; it resets both. None without a search field.\nLeave it off when the activator already clears (as BbSelect's does)."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Apply the compact density variant."},{"name":"dependencies","type":"unknown[] | undefined","required":false,"default":"[]","description":"Additional dependencies that trigger item reloading when changed."},{"name":"depsDebounceTime","type":"number | undefined","required":false,"default":"0","description":"Debounce delay (ms) for dependency-triggered reloads."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"disableFlip","type":"boolean | undefined","required":false,"default":"false","description":"Disables the automatic flip to the opposite side when the popover\nwould overflow (flipping is on by default)."},{"name":"disableWriting","type":"boolean | \"auto\" | \"mobile\" | \"desktop\" | undefined","required":false,"default":"'auto'","description":"Hides the panel's search field: `true` everywhere, `'mobile'` /\n`'desktop'` on that platform only. `'auto'` hides it for an array `items`\nshorter than the plugin's `autoDisableWritingThreshold` (6), decided per\nopen; never for a provider, nor with an `option:add` listener."},{"name":"emptyText","type":"string | undefined","required":false,"description":"Message displayed when no items are available."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"Reset modelValue to `null` or empty array if it no longer matches available items.\n\nChecked after every applied, successful load whose `reason` is not\n`'search'` (an empty one included), against the FETCHED rows only (a\n`stash` does not count); a search or a failed load never prunes."},{"name":"failedText","type":"string | undefined","required":false,"default":"the localized `common.failedText` (\"Couldn't load items\")","description":"Message displayed in the empty state while the latest load FAILED (the\nprovider threw): the twin of `emptyText` for that case."},{"name":"filterBy","type":"string[] | undefined","required":false,"default":"[]","description":"Item paths searched instead of the display text when the user types\n(empty: the display text). To turn filtering off, hide the field with\n`disableWriting`."},{"name":"groupBy","type":"string | ((item: Item) => string | number | symbol) | undefined","required":false,"description":"Path to item property for grouping options."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Marks the component as being in error state."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Marks the component as being in a warning state. Visually mirrors\n`hasErrors` but uses `--bb-warn` chrome; errors take priority when both\nare set."},{"name":"headerHeight","type":"number | undefined","required":false,"description":"Height of group headers in the listbox (px). Defaults to 32px (24px\ncompact; 36px / 32px on mobile viewports). Only applies when `groupBy`\nis set. An explicit value wins on every viewport."},{"name":"id","type":"string | undefined","required":false,"description":"Seeds the ids the popover sets: its listbox is `<id>_listbox` (the\nactivator's `aria-controls`) and each option's id derives from it.\nGenerated when omitted."},{"name":"itemHeight","type":"number | undefined","required":false,"default":"28","description":"Height of the options in the listbox (px). Defaults to 28px (24px\ncompact; 44px / 36px on mobile viewports). An explicit value wins on\nevery viewport."},{"name":"itemProps","type":"BbSelectItemProps<Item> | undefined","required":false,"description":"ADDITIONAL row fields, never the text or value: `description` (a muted\nline under the label), `prepend:icon`, `append:icon`. An object of paths\nor getters per field, or a function of the item. Nothing is read\nimplicitly, and none shows in the trigger or the chips."},{"name":"items","type":"Item[] | ((context: BbSelectPopoverItemsContext) => Item[] | Promise<Item[]>)","required":true,"default":"[]","description":"The options: an array, or a provider called with a\n``BbSelectPopoverItemsContext`` (`query`, `reason`, `modelValue`,\n`signal`), sync or async. Branch on `reason !== 'search'` to resolve the\nselection by id. A provider fails by THROWING, never by returning `[]`."},{"name":"itemText","type":"ItemAccessor<Item, string> | undefined","required":false,"default":"own `label`, else `text`, else `JSON.stringify(item)`","description":"Path to item property for display text or function to extract it.\n\nUnset: own `label`, else `text` (`{ label, value }` needs no accessor)."},{"name":"itemValue","type":"ItemAccessor<Item> | undefined","required":false,"default":"own `value`, else the whole item","description":"Path to item property for value or function to extract it.\n\nUnset: own `value`, even `null`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Display the loading state styles."},{"name":"loadingText","type":"string | undefined","required":false,"description":"Message shown while items are being loaded."},{"name":"max","type":"number | undefined","required":false,"default":"Infinity","description":"Maximum number of selectable items (limits selection when `multiple` is true)."},{"name":"modelValue","type":"any","required":true,"description":"v-model value. Single value for single select, array for multiple select."},{"name":"modelValueDebounceTime","type":"number | undefined","required":false,"default":"0","description":"Debounce delay (ms) for modelValue change handling."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"false","description":"Enable multiple item selection. When true, modelValue must be an array."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet)."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Distance (px) between the activator and the popover."},{"name":"padding","type":"number | undefined","required":false,"default":"10","description":"Minimum page padding used by floating shift middleware."},{"name":"placement","type":"Placement | undefined","required":false,"default":"\"bottom\"","values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end"],"description":"Floating placement of the popover."},{"name":"prefill","type":"boolean | \"interaction\" | undefined","required":false,"default":"\"interaction\"","description":"When the options first load: `'interaction'` on first open, `true` on\nmount (and in SSR), `false` once the user types (on open with\n`disable-writing` or a non-empty model). An array `items` always\nresolves on mount; otherwise a seeded model's text waits for the first\nopen."},{"name":"pt","type":"PtItemMap<BbSelectPopoverPtPart, BbSelectPopoverOptionPtPart, BbSelectPopoverPtState, Item> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:open","type":"PtValue | undefined","required":false},{"name":"pt:clear:selected","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:disabled","type":"PtValue | undefined","required":false},{"name":"pt:footer:open","type":"PtValue | undefined","required":false},{"name":"pt:footer:selected","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:open","type":"PtValue | undefined","required":false},{"name":"pt:input:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription","type":"PtValue | ((ctx: PtItemCtx<Item, BbSelectPopoverPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemDescription:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:open","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon","type":"PtValue | ((ctx: PtItemCtx<Item, BbSelectPopoverPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:open","type":"PtValue | undefined","required":false},{"name":"pt:itemIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:itemText","type":"PtValue | ((ctx: PtItemCtx<Item, BbSelectPopoverPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemText:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemText:open","type":"PtValue | undefined","required":false},{"name":"pt:itemText:selected","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list:open","type":"PtValue | undefined","required":false},{"name":"pt:list:selected","type":"PtValue | undefined","required":false},{"name":"pt:option","type":"PtValue | ((ctx: PtItemCtx<Item, BbSelectPopoverPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:option:disabled","type":"PtValue | undefined","required":false},{"name":"pt:option:open","type":"PtValue | undefined","required":false},{"name":"pt:option:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"queryDebounceTime","type":"number | undefined","required":false,"default":"500","description":"Debounce delay (ms) before triggering search queries after user input stops."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Prevents opening the popover while keeping the activator accessible."},{"name":"searchInputAriaLabel","type":"string | undefined","required":false,"default":"`t('select.searchLabel')` (`'Search options'`)","description":"Accessible label used by the search input rendered inside the popover.\nFalls back to the localized `select.searchLabel` key when omitted."},{"name":"selectable","type":"boolean | ((item: Item) => boolean) | undefined","required":false,"default":"true","description":"Defines whether options are selectable.\nCan be a global boolean that affects all options or a function\nthat accepts an item and returns a boolean that only affects that item.\nNon-selectable options are rendered disabled."},{"name":"stash","type":"boolean | undefined","required":false,"default":"false","description":"Keeps picked options named across searches: a pick stays resolvable when\na later search or a failed load no longer returns it. It follows the\nmodel, and does not keep a pick valid: `enforce-coherence` still prunes\nit."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Transition duration (ms) for popover show/hide animations."},{"name":"width","type":"string | number | undefined","required":false,"default":"\"200\"","description":"Width of the popover in pixels, percentage, or `'auto'`. A bare number is\nread as pixels — the default is the string `'200'`, not the number `200`."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the component becomes active (focus enters it)."},{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the activator loses focus."},{"name":"change","signature":"(event: Event): void","description":"Emitted when the value changes via native change event."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when the activator is clicked."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the activator receives focus."},{"name":"hidden","signature":"(): void","description":"Emitted once the options surface has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the options surface starts to close."},{"name":"inactive","signature":"(): void","description":"Emitted when focus moves outside the entire component after it was active."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from the search input."},{"name":"option:add","signature":"(text: string): void","description":"Emitted when the user types a new value and confirms it (Enter key) while\nwriting is enabled (i.e. `disableWriting` does not suppress the search\ninput for the current surface)."},{"name":"show","signature":"(): void","description":"Emitted as soon as the options surface starts to open (the popover, or the sheet on a phone)."},{"name":"shown","signature":"(): void","description":"Emitted once the options surface is open and its open transition has finished."},{"name":"update:modelValue","signature":"(value: any): void","description":"Emitted with the next selection value whenever selection changes."}],"slots":[{"name":"activator","type":"BbSelectPopoverActivatorSlotProps","fields":["clear: () => void","close: () => Promise<void>","focus: () => void","disabled: boolean","loading: boolean","open: () => Promise<void>","props: { ref: (reference: unknown) => void; }","query: string","readonly: boolean","selectedOptions: BbSelectResolvedOption<any>[]","shown: boolean","text: string","toggle: () => Promise<void>"],"description":"Replaces the default trigger element that opens the select popover."},{"name":"empty","type":"{ query: string; focus: () => void; error: unknown; }","description":"Content shown when no options match the query or the list is empty.\n`error` is what the latest failed load threw, untouched (`null` when\nnone)."},{"name":"footer","type":"BbSelectPopoverPanelSlotProps","fields":["close: () => Promise<void>","clear: () => void","focus: () => void","query: string","selectedOptions: BbSelectResolvedOption<any>[]"],"description":"Content pinned to the bottom of the panel, below the options list. Rendered in\nboth the desktop popover and the adaptive sheet."},{"name":"group","type":"BbSelectPopoverGroupSlotProps<Item>","fields":["disabled: boolean","index: number","item: Item","length: number","text: string"],"description":"Replaces the default group header rendered above grouped options."},{"name":"header","type":"BbSelectPopoverPanelSlotProps","fields":["close: () => Promise<void>","clear: () => void","focus: () => void","query: string","selectedOptions: BbSelectResolvedOption<any>[]"],"description":"Content pinned to the top of the panel, above the search field. Rendered in\nboth the desktop popover and the adaptive sheet."},{"name":"loading","type":"{ query: string; }","description":"Content shown inside the options dropdown while items are loading."},{"name":"option","type":"BbSelectPopoverOptionSlotProps<Item>","fields":["disabled: boolean","focused: boolean","index: number","item: Item","loading: boolean","selected: boolean","text: string","value: any","description: string"],"description":"Replaces the default rendering of each option row in the dropdown."}],"exposed":[],"models":[{"name":"modelValue","type":"any"}],"cssProps":[{"name":"--bg","value":"var(--bb-panel)","selector":".bb-listbox__outer-container"},{"name":"--min-size","value":"2.125rem","selector":".bb-select-popover__sheet-chip"},{"name":"--px","value":"0.75rem","selector":".bb-select-popover__sheet-chip"},{"name":"--clear-size","value":"1.25rem","selector":".bb-select-popover__sheet-chip"}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The options surface you see — the popover's painted bubble on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet the surface becomes on a phone (the `BbOffCanvas` root) — never the desktop surface. Applied after `panel`, so it wins a conflict there."},{"name":"input","description":"The search field."},{"name":"clear","description":"The ✕ that empties the search field."},{"name":"list","description":"The `role=\"listbox\"` node that holds the options. Virtualised: its height is written inline and its rows are positioned by the list, which limits what a layout utility can do there. The listbox's groups and the chips are not parts."},{"name":"option","description":"One listbox option — a broadcast resolved per option. Also takes a per-item function, called with the option's raw item."},{"name":"itemText","description":"An option's label — resolved with that option's states. A custom `#option` slot replaces it. Also takes a per-item function."},{"name":"itemIcon","description":"An option's prepend / append icons (`itemProps`) — resolved with that option's states. Also takes a per-item function."},{"name":"itemDescription","description":"An option's second line (its description) — resolved with that option's states. A custom `#option` slot replaces it. Also takes a per-item function."},{"name":"header","description":"The flyout's header band."},{"name":"footer","description":"The flyout's footer band."}],"states":[{"name":"selected","description":"Per node, on `option` and its `item-*` parts: a chosen option."},{"name":"disabled","description":"Per node, on `option` and its `item-*` parts: an option that is disabled."},{"name":"open","description":"Component-wide: the options surface is showing."}]},"tree":{"bindings":[{"part":"input","target":"input.bb-select-popover__input"},{"part":"clear","target":"ClearableButton"},{"part":"panel","target":"CommonPopover"},{"part":"root","target":"CommonPopover"},{"part":"header","target":"div.bb-select-popover__header"},{"part":"footer","target":"div.bb-select-popover__footer"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ header: 'header', footer: 'footer', panel: 'root', sheet: 'root' }"}],"nodes":[{"name":"BbBadge","kind":"public","vocabulary":"BbBadge","bindings":[{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"button.bb-badge__clear"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-badge"]},{"name":"--fg","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--bw","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--border-color","documented":false,"readBy":["bb-badge"]},{"name":"--ring-color","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--ring-size","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--min-size-md","documented":true,"readBy":["bb-badge"]},{"name":"--min-size","documented":true,"readBy":["bb-badge"]},{"name":"--elev","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--r","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--fs","documented":true,"readBy":["bb-badge"]},{"name":"--icon-size","documented":true,"readBy":["bb-badge__icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge__clear"]},{"name":"--gap","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--px","documented":true,"readBy":["bb-badge","bb-badge--icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge--clearable"]},{"name":"--clear-size","documented":true,"readBy":["bb-badge__clear","bb-icon"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--pad-left","documented":true,"readBy":["bb-badge__body"]},{"name":"--pad-right","documented":false,"readBy":["bb-badge__body","bb-badge__clear"]},{"name":"--size","documented":false}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"CommonPopover","kind":"internal"},{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ListBox","kind":"internal","children":[{"name":"FlatListBox","kind":"internal","vocabulary":"BbSelectPopover","bindings":[{"part":"list","target":"span.bb-listbox__list"},{"part":"option","target":"span.bb-listbox__option"},{"part":"itemIcon","target":"BbIcon"},{"part":"itemText","target":"span.bb-listbox__item-text"},{"part":"itemDescription","target":"span.bb-listbox__item-description"}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","repeated":true,"cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}]}]},{"name":"GroupedListBox","kind":"internal","vocabulary":"BbSelectPopover","bindings":[{"part":"list","target":"span.bb-listbox__list"},{"part":"option","target":"span.bb-listbox__option"},{"part":"itemIcon","target":"BbIcon"},{"part":"itemText","target":"span.bb-listbox__item-text"},{"part":"itemDescription","target":"span.bb-listbox__item-description"}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","repeated":true,"cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}]}]}]},{"name":"BbSmoothHeight","kind":"public"}]},"css":{"classes":{"bb-listbox":["","--compact","--described","--empty","--grouped","--loading","--multiple","--open","__empty","__failed","__failed--divided","__failed-icon","__failed-text","__group","__group-header","__group-header-label","__inner-container","__item-description","__item-icon","__item-text","__list","__loading","__option","__option--disabled","__option--focused","__option--selected","__option-append-icon","__option-check","__option-content","__option-prepend-icon","__outer-container"],"bb-select-popover":["","--clearable-active","--errors","--loading","--reloading","--sheet","--warnings","__clear","__focus-proxy","__footer","__header","__input","__panel","__search-container","__search-error-icon","__search-icon","__search-strip","__search-warning-icon","__sheet","__sheet-chip","__sheet-chips","__sheet-selection"],"bb-select-popover-escape":[""],"bb-select-sheet-chip-attrs":[""]},"locals":["--bg","--close-size","--color-gray-200","--group-header-height","--option-font-size","--option-h","--option-height","--py","--transition-duration","--w"]},"removed":[{"name":"allowWriting","new":"disableWriting","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"invert","valueMap":{"not-mobile":"mobile"}}},{"name":"arrowPadding","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"flip","new":"disableFlip","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"invert"}},{"name":"hideArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"showArrow","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","silent":true,"fix":{"kind":"remove"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"allowWriting","to":"disableWriting","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","fix":{"kind":"invert","valueMap":{"not-mobile":"mobile"}}},{"from":"flip","to":"disableFlip","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-select-popover.md","fix":{"kind":"invert"}},{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}}]},
|
|
514
514
|
{"name":"BbSlider","group":"Selection","description":"Selects numeric values across a bounded range.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbSlider.md","source":"ai/source/BbSlider.md","props":[{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. The track's height follows `--bb-input-h-compact` and the\nlabel gap `--bb-label-spacing-y-compact`, so a `--bb-input-h` or\n`--bb-label-spacing-y` you set on the component is ignored while\n`compact` is on: set the `-compact` tokens instead."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"disableThumbTranslate","type":"boolean | undefined","required":false,"default":"false","description":"Disables the proportional thumb translation that keeps the thumb on\ntrack (enabled by default). Set it when displaying ticks so they align\nwith less effort."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"inside\" | undefined","required":false,"description":"Label rendering mode.\nSliders do not support `floating` labels."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"max","type":"number | undefined","required":false,"default":"100","description":"Maximum value cap."},{"name":"maxPrecision","type":"number | undefined","required":false,"default":"2","description":"Maximum decimal places to retain in emitted values."},{"name":"min","type":"number | undefined","required":false,"default":"0","description":"Minimum value cap."},{"name":"modelValue","type":"number | number[] | null | undefined","required":false,"default":"0","description":"Used by v-model."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"pt","type":"PtMap<BbSliderPtPart, BbSliderPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:bar","type":"PtValue | undefined","required":false},{"name":"pt:bar:active","type":"PtValue | undefined","required":false},{"name":"pt:bar:disabled","type":"PtValue | undefined","required":false},{"name":"pt:bar:errors","type":"PtValue | undefined","required":false},{"name":"pt:bar:inRange","type":"PtValue | undefined","required":false},{"name":"pt:bar:readonly","type":"PtValue | undefined","required":false},{"name":"pt:bar:warnings","type":"PtValue | undefined","required":false},{"name":"pt:box","type":"PtValue | undefined","required":false},{"name":"pt:box:active","type":"PtValue | undefined","required":false},{"name":"pt:box:disabled","type":"PtValue | undefined","required":false},{"name":"pt:box:errors","type":"PtValue | undefined","required":false},{"name":"pt:box:inRange","type":"PtValue | undefined","required":false},{"name":"pt:box:readonly","type":"PtValue | undefined","required":false},{"name":"pt:box:warnings","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:active","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:inRange","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:active","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:inRange","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:active","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:inRange","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:active","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:inRange","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:active","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:inRange","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"pt:thumb","type":"PtValue | undefined","required":false},{"name":"pt:thumb:active","type":"PtValue | undefined","required":false},{"name":"pt:thumb:disabled","type":"PtValue | undefined","required":false},{"name":"pt:thumb:errors","type":"PtValue | undefined","required":false},{"name":"pt:thumb:inRange","type":"PtValue | undefined","required":false},{"name":"pt:thumb:readonly","type":"PtValue | undefined","required":false},{"name":"pt:thumb:warnings","type":"PtValue | undefined","required":false},{"name":"pt:tick","type":"PtValue | undefined","required":false},{"name":"pt:tick:active","type":"PtValue | undefined","required":false},{"name":"pt:tick:disabled","type":"PtValue | undefined","required":false},{"name":"pt:tick:errors","type":"PtValue | undefined","required":false},{"name":"pt:tick:inRange","type":"PtValue | undefined","required":false},{"name":"pt:tick:readonly","type":"PtValue | undefined","required":false},{"name":"pt:tick:warnings","type":"PtValue | undefined","required":false},{"name":"pt:ticks","type":"PtValue | undefined","required":false},{"name":"pt:ticks:active","type":"PtValue | undefined","required":false},{"name":"pt:ticks:disabled","type":"PtValue | undefined","required":false},{"name":"pt:ticks:errors","type":"PtValue | undefined","required":false},{"name":"pt:ticks:inRange","type":"PtValue | undefined","required":false},{"name":"pt:ticks:readonly","type":"PtValue | undefined","required":false},{"name":"pt:ticks:warnings","type":"PtValue | undefined","required":false},{"name":"pt:track","type":"PtValue | undefined","required":false},{"name":"pt:track:active","type":"PtValue | undefined","required":false},{"name":"pt:track:disabled","type":"PtValue | undefined","required":false},{"name":"pt:track:errors","type":"PtValue | undefined","required":false},{"name":"pt:track:inRange","type":"PtValue | undefined","required":false},{"name":"pt:track:readonly","type":"PtValue | undefined","required":false},{"name":"pt:track:warnings","type":"PtValue | undefined","required":false},{"name":"range","type":"boolean | undefined","required":false,"default":"false","description":"Set the input as range. modelValue must be an array."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and\nthe input is swapped."},{"name":"rules","type":"RuleExpression<number | number[] | null>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"The step attribute specifies the granularity that the value must adhere to."},{"name":"ticks","type":"boolean | undefined","required":false,"default":"false","description":"Displays ticks on step."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the slider gains focus and becomes interactive."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when a thumb gains focus.\nForwards the original DOM `FocusEvent`."},{"name":"inactive","signature":"(): void","description":"Emitted when focus/click moves outside the slider after it was active."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on a thumb.\nForwards the original DOM `KeyboardEvent`."},{"name":"pointerdown","signature":"(event: PointerEvent): void","description":"Emitted when a pointer device is pressed on a thumb.\nForwards the original DOM `PointerEvent`."},{"name":"pointermove","signature":"(event: PointerEvent): void","description":"Emitted as a pointer device moves while dragging a thumb.\nForwards the original DOM `PointerEvent`."},{"name":"pointerup","signature":"(event: PointerEvent): void","description":"Emitted when a pointer device is released after dragging.\nForwards the original DOM `PointerEvent`."},{"name":"update:modelValue","signature":"(value: number | number[]): void","description":"Emitted with new value(s) whenever the slider position changes.\nSingle number for single slider, array for range mode."}],"slots":[{"name":"append","type":"BbSliderStepSlotProps","fields":["increase: () => void","decrease: () => void"],"description":"Content rendered after the slider track, typically used to add a max-value label or button."},{"name":"description","type":"BbSliderDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"label","type":"BbSliderLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default label text rendered above the slider."},{"name":"prepend","type":"BbSliderStepSlotProps","fields":["increase: () => void","decrease: () => void"],"description":"Content rendered before the slider track, typically used to add a min-value label or button."},{"name":"thumb","type":"BbSliderThumbSlotProps","fields":["value: number","percent: number","focused: boolean"],"description":"Fallback thumb used for non-range sliders (or inside `thumb:higher`/`thumb:lower` when not overridden separately)."},{"name":"thumb:higher","type":"BbSliderThumbSlotProps","fields":["value: number","percent: number","focused: boolean"],"description":"Replaces the default higher-value thumb in range mode (`range: true`)."},{"name":"thumb:lower","type":"BbSliderThumbSlotProps","fields":["value: number","percent: number","focused: boolean"],"description":"Replaces the default lower-value thumb in range mode (`range: true`)."},{"name":"tick","type":"BbSliderTickSlotProps","fields":["value: number","percent: number","active: boolean"],"description":"Replaces the default tick mark rendered at each step when ticks are enabled."}],"exposed":[],"models":[{"name":"modelValue","type":"number | number[] | null | undefined"}],"cssProps":[{"name":"--thumb","value":"12px","selector":".bb-slider__body","description":"thumb diameter (square, then `border-radius: 50%`)"},{"name":"--track","value":"4px","selector":".bb-slider__body","description":"rail thickness"},{"name":"--track-color","value":"var(--bb-track)","selector":".bb-slider__body","description":"The recessed rail surface — the same token the switch track reads, which is what design-tokens.md has always documented it as (\"switch/slider rails\"). It was `--bb-muted` (6% of text), a chrome wash so faint the unfilled rail barely read, and a theme that set `--bb-track` moved the switch and nothing else."},{"name":"--py","value":"calc((var(--thumb) - var(--track)) / 2)","selector":".bb-slider__body","description":"Room above and below the rail for the thumb's overhang."},{"name":"--control-h","value":"var(--bb-input-h)","selector":".bb-slider__body","description":"Row height; --compact swaps in the compact input height."},{"name":"--px","value":"0px","selector":".bb-slider__body","description":"inner left/right padding of the box"},{"name":"--track-inset","value":"0px","selector":".bb-slider__body","description":"How far the rail and the tick row are held off both ends."},{"name":"--inside-label-clearance","value":"0px","selector":".bb-slider__body","description":"height added for the label line"},{"name":"--inside-label-track-offset","value":"0px","selector":".bb-slider__body","description":"How far rail and thumbs drop from centre to clear that line."},{"name":"--bg","value":"transparent","selector":".bb-slider__body","description":"the box's fill"},{"name":"--bg-disabled","value":"transparent","selector":".bb-slider__body","description":"fill while disabled"},{"name":"--bw","value":"0px","selector":".bb-slider__body","description":"border width"},{"name":"--border-color","value":"var(--bb-field-border)","selector":".bb-slider__body","description":"resting border"},{"name":"--border-focus","value":"var(--bb-border)","selector":".bb-slider__body","description":"Border while a thumb is focused or held; the errors and warnings blocks below paint the resting border with it too."},{"name":"--elev","value":"0px 0px 0px 0px transparent","selector":".bb-slider__body","description":"resting lift of the box"},{"name":"--ring-size","value":"0px","selector":".bb-slider__body","description":"Width of the box's focus ring; its colour is --ring-color below. The thumb's halo keeps --bb-ring-size, so a bare slider still has one."},{"name":"--accent","value":"var(--bb-primary)","selector":".bb-slider__body","description":"The bar (`__bar`, the selected span, sized from JS), and the base of --ring-color below."},{"name":"--ring-color","value":"color-mix( in oklab, var(--accent) var(--bb-ring-opacity), transparent )","selector":".bb-slider__body","description":"Halo around the thumb on hover and focus; errors and warnings re-point it."},{"name":"--r","value":"var(--bb-radius)","selector":".bb-slider__body","description":"Rail rounding: all four corners of the rail, the leading pair on the selected span."},{"name":"--centre","value":"calc( (var(--control-h) + var(--inside-label-clearance)) / 2 - var(--bw) + var(--inside-label-track-offset) )","selector":".bb-slider__box","description":"The rail's centre line, from the top of the box's padding box: the middle of the control row. A fixed offset, not 50%, so the rail and the thumbs stay put when the tick row below grows the box. Declared here, on the box, so a --bw or --control-h set through pt:box is the one it reads."},{"name":"--bg","value":"var(--bb-panel)","selector":".bb-slider__thumb"},{"name":"--elev","value":"var(--bb-elev-sm)","selector":".bb-slider__thumb","description":"Small-chrome resting lift, DECLARED here so it is sealed: an ancestor that sets `--elev` for its own plate must not reach in and lift this. Same tier and same name as the checkbox and radio glyphs."},{"name":"--border-color","value":"per variant","selector":"pt:box","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."}],"pt":{"parts":[{"name":"root","description":"The slider's container: the label, the track and the lines under them."},{"name":"label","description":"The label text (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop)."},{"name":"box","description":"The box around the rail, ticks and thumbs: bare by default, the bordered field look in inside-label mode. The slider's look locals (`--accent`, `--track-color`, `--thumb`, `--track`, `--bg`, `--bw`, …) set here reach everything inside."},{"name":"track","description":"The rail the thumbs slide on: its full length, painted with `--track-color`."},{"name":"bar","description":"The coloured bar on the rail: from the start to the value, or between the two thumbs in `range` mode. Painted with `--accent`; its size and position are set from the value (the same word as BbProgress's fill)."},{"name":"ticks","description":"The row that holds the tick marks (`ticks` prop)."},{"name":"tick","description":"Every tick mark; a broadcast, resolved per tick with its own `inRange`. Its content is the `tick` slot."},{"name":"thumb","description":"Every handle — one, or two in `range` mode; a broadcast."}],"states":[{"name":"inRange","description":"Per node, on `tick`: the tick sits inside the selected span (under the `bar`)."},{"name":"readonly","description":"Component-wide: the slider is `readonly`."},{"name":"disabled","description":"Component-wide: the slider is `disabled`."},{"name":"warnings","description":"Component-wide: the slider shows warnings and no errors."},{"name":"errors","description":"Component-wide: the slider shows errors."},{"name":"active","description":"Component-wide: the slider is engaged — a thumb focused or dragged, until focus and pointer leave it."}]},"tree":{"bindings":[{"part":"box","target":"span.bb-slider__box"},{"part":"ticks","target":"span.bb-slider__ticks"},{"part":"tick","target":"span.bb-slider__tick"},{"part":"track","target":"span.bb-slider__track"},{"part":"bar","target":"span"},{"part":"thumb","target":"span.bb-slider__thumb"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbSlider","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]}]},"css":{"classes":{"bb-slider":["","__bar","__body","__body--compact","__body--disabled","__body--errors","__body--readonly","__body--warnings","__box","__thumb","__thumb--focused","__thumb--higher","__thumb--lower","__thumb-container","__tick","__tick--in-range","__ticks","__track"]},"locals":["--accent","--bg","--bg-disabled","--border-color","--border-focus","--bw","--centre","--color-gray-200","--control-h","--elev","--hit","--inside-label-clearance","--inside-label-track-offset","--px","--py","--r","--ring-color","--ring-size","--thumb","--track","--track-color","--track-inset"]},"attrTargets":["div"],"removed":[{"name":"color","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-slider.md","silent":true,"fix":{"kind":"manual"}},{"name":"thumbTranslate","new":"disableThumbTranslate","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-slider.md","silent":true,"fix":{"kind":"invert"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-slider.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}},{"name":"required","new":null,"hint":"a slider's role cannot carry `required`, so it carries none (like BbCheckboxGroup / BbSwitchGroup). Delete the prop; inside a BbForm a `required` rule or the schema still validates it and shows the asterisk","since":"3.0.0-beta.42","migration":"ai/guides/migration/components/bb-slider.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"thumbTranslate","to":"disableThumbTranslate","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-slider.md","fix":{"kind":"invert"}},{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-slider.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
515
515
|
{"name":"BbSmoothHeight","group":"Layout & Utility","description":"Animates height transitions for dynamic content.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbSmoothHeight.md","source":"ai/source/BbSmoothHeight.md","props":[{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disable smooth-height behavior and allow natural content height."},{"name":"mutationOptions","type":"MutationObserverInit | undefined","required":false,"default":"{ childList: true }","description":"Options to pass to the MutationObserver."},{"name":"pt","type":"PtMap<\"root\", never> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"resizeOptions","type":"ResizeObserverOptions | undefined","required":false,"description":"Options to pass to the ResizeObserver."},{"name":"strategy","type":"\"resize\" | \"mutation\" | undefined","required":false,"default":"\"resize\"","description":"Define which strategy to use. By default `'resize'` is used, which means the\ncomponent will update on resizing. You can also define `'mutation'` to use a MutationObserver."},{"name":"tag","type":"LayoutTag | undefined","required":false,"default":"\"div\"","values":["div","span"],"description":"Element rendered as the component's wrapper."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds"}],"events":[],"slots":[{"name":"default","type":"object","description":"Content whose height changes are animated with a smooth transition."}],"exposed":[],"models":[],"pt":{"parts":[{"name":"root","description":"The box whose height animates."}],"states":[]},"css":{"classes":{"bb-smooth-height":["","--disabled","__content"]},"locals":["--color-gray-200","--transition-duration"]}},
|
|
516
516
|
{"name":"BbSpinner","group":"Feedback","description":"Indicates ongoing loading or pending operations.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbSpinner.md","source":"ai/source/BbSpinner.md","props":[{"name":"label","type":"string | undefined","required":false,"description":"Accessible loading announcement. When set, the spinner is wrapped in a\n`role=\"status\"` element containing this text rendered `bb-sr-only`, so\nscreen readers announce the loading state. When omitted the markup is\nunchanged and the spinner is purely decorative."},{"name":"pt","type":"PtMap<\"root\", never> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"size","type":"number | CssSize | keyof Sizes | undefined","required":false,"default":"\"md\"","description":"Defines the component size.\n\nAccepted values:\n- A key from the provided size map (`keyof T`), e.g. `'sm' | 'md' | 'lg'`\n- A custom CSS size string (e.g. `'20px'`, `'1.5rem'`, `'2em'`)\n- A number, typically interpreted as pixels by size parsers"}],"events":[],"slots":[],"exposed":[],"models":[],"pt":{"parts":[{"name":"root","description":"The spinning glyph. With a `label`, the status wrapper around it is not a part."}],"states":[]},"tree":{"nodes":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},"css":{"classes":{"bb-spinner":["","__circle","__circle--1","__circle--10","__circle--11","__circle--2","__circle--3","__circle--4","__circle--5","__circle--6","__circle--7","__circle--8","__circle--9"]},"locals":["--color-gray-200","--size"]},"attrTargets":["svg"],"removed":[{"name":"color","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-spinner.md","silent":true,"fix":{"kind":"manual"}}]},
|
|
517
517
|
{"name":"BbSwitch","group":"Selection","description":"Toggles two-state values with switch semantics.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbSwitch.md","source":"ai/source/BbSwitch.md","props":[{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"checked","type":"boolean | undefined","required":false,"default":"undefined","description":"Defines the input as checked."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-label-spacing-y` for\n`--bb-label-spacing-y-compact`, so tune a compact field's label gap with\nthe `-compact` token, not the base one. The same meaning as on the\ncheckbox, radio and switch groups."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"falseValue","type":"any","required":false,"description":"Value of the input when unchecked. It handles any kind of serializable object."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"indeterminate","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in an indeterminate state."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"inputPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"\"left\"","description":"Sets the alignment of the input. Since inputs are inline block they can be aligned just as text can."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"default":"\"auto\"","description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"modelValue","type":"any","required":false,"description":"Used by v-model. Can be any serializable type."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"pt","type":"PtMap<TogglePtPart, CheckablePtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:checked","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:focused","type":"PtValue | undefined","required":false},{"name":"pt:description:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:description:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:checked","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:focused","type":"PtValue | undefined","required":false},{"name":"pt:hint:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:hint:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:checked","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:focused","type":"PtValue | undefined","required":false},{"name":"pt:icon:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:icon:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:checked","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:focused","type":"PtValue | undefined","required":false},{"name":"pt:label:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:label:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:checked","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:focused","type":"PtValue | undefined","required":false},{"name":"pt:message:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:message:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:checked","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:focused","type":"PtValue | undefined","required":false},{"name":"pt:root:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:root:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout: in every direction the order of the label and the\ninput is swapped from the standard arrangement."},{"name":"rules","type":"RuleExpression<any>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"submitWhenFalse","type":"boolean | undefined","required":false,"default":"false","description":"Will submit \"falseValue\" if the input is not checked. Otherwise \"trueValue\" will be submitted."},{"name":"trueValue","type":"any","required":false,"description":"Value of the input when checked. It handles any kind of serializable object."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the native input loses focus.\nForwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when the checkbox checked state changes.\nForwards the original DOM `Event` from the input."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when the input receives a click interaction.\nForwards the original DOM `MouseEvent`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the native input gains focus.\nForwards the original DOM `FocusEvent`."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from the checkbox input.\nForwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on the input.\nForwards the original DOM `KeyboardEvent`."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is pressed over the input.\nForwards the original DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is released over the input.\nForwards the original DOM `MouseEvent`."},{"name":"update:modelValue","signature":"(value: any): void","description":"Emitted on checked-state changes with the effective model value:\n- `trueValue` when checked\n- `falseValue` when unchecked"}],"slots":[{"name":"description","type":"BbSwitchDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"icon","type":"BbCheckboxIconSlotProps","fields":["checked: boolean","disabled: boolean","indeterminate?: boolean","falseValue: any","focused: boolean","focusVisible: boolean","hasErrors: boolean","hasWarnings: boolean","id: string","name: string","parsedValue: string","readonly: boolean","trueValue: any","value: any","text: string"],"description":"Replaces the default toggle track visual inside the switch. Receives the\nswitch state plus the label text."},{"name":"label","type":"BbSwitchLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default label text rendered next to the switch."}],"exposed":[],"models":[{"name":"modelValue","type":"any"}],"pt":{"parts":[{"name":"root","description":"The toggle's container: the glyph, the label and the lines under them."},{"name":"label","description":"The label text beside the glyph (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"icon","description":"The drawn glyph — the box, the dot or the switch track. The default one: a consumer `icon` slot replaces it. The hidden native input is not a part."}],"states":[{"name":"checked","description":"Component-wide: the toggle is on."},{"name":"indeterminate","description":"Component-wide: the mixed state (the `indeterminate` prop) — neither on nor off."},{"name":"readonly","description":"Component-wide: the toggle is `readonly` — focusable, cannot change."},{"name":"disabled","description":"Component-wide: the toggle is `disabled`."},{"name":"warnings","description":"Component-wide: the toggle shows warnings and no errors."},{"name":"errors","description":"Component-wide: the toggle shows errors — the glyph and the message line turn red."},{"name":"focused","description":"Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop."},{"name":"focusVisible","description":"Component-wide: that focus is keyboard-visible — where a focus ring belongs."}]},"tree":{"bindings":[{"part":"icon","target":"BbBaseSwitchIcon"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbSwitch","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"BbBaseSwitchIcon","kind":"public","cssProps":[{"name":"--accent","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon--errors","bb-base-switch-icon--checked","bb-base-switch-icon--indeterminate","bb-base-switch-icon--warnings","bb-base-switch-icon--disabled"]},{"name":"--bg","documented":true,"readBy":["bb-base-switch-icon"]},{"name":"--ring-color","documented":true,"readBy":["bb-base-switch-icon--focus-visible"]},{"name":"--r","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon__thumb"]},{"name":"--bw","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon__thumb"]},{"name":"--h","documented":true,"readBy":["bb-base-switch-icon"]},{"name":"--w","documented":true,"readBy":["bb-base-switch-icon"]},{"name":"--thumb","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon__thumb"]},{"name":"--inset","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon__thumb"]},{"name":"--travel","documented":true,"readBy":["bb-base-switch-icon__thumb"]}]}]},"css":{"classes":{"bb-switch":[""]},"locals":["--color-gray-200"]},"attrTargets":["div"],"removed":[{"name":"color","new":null,"since":"3.0.0-beta.15","migration":"ai/guides/migration/components/bb-checkbox.md","silent":true,"fix":{"kind":"manual"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
518
518
|
{"name":"BbSwitchGroup","group":"Selection","description":"Manages grouped switch options with shared behavior.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbSwitchGroup.md","source":"ai/source/BbSwitchGroup.md","props":[{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-label-spacing-y` for\n`--bb-label-spacing-y-compact`, so tune a compact group's label gap with\nthe `-compact` token, not the base one."},{"name":"dependencies","type":"unknown[] | undefined","required":false,"description":"Defines an array of dependencies that will trigger actions in the component upon change."},{"name":"depsDebounceTime","type":"number | undefined","required":false,"description":"Timeout used to debounce response to changes to dependencies."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"emptyText","type":"string | undefined","required":false,"description":"String displayed when there are no items to display."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"After every applied, successful load (an empty one included), drops the\nmodel values the options no longer contain (a single value resets to\n`null`). A failed load never prunes."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"failedText","type":"string | undefined","required":false,"default":"the localized `common.failedText` (\"Couldn't load items\")","description":"String displayed in the empty state while the latest load FAILED (the\n`items` provider threw): the twin of `emptyText` for that case."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides each option's label text (the text rendered next to every\ninput) while keeping it accessible to screen readers.\nDoes not affect the fieldset legend — use `hideLegend` for that."},{"name":"hideLegend","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the legend of the fieldset while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"Prefix for the ids of each option's input and of the label, description\nand message. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"inputPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"\"left\"","description":"Sets the alignment of the input. Since inputs are inline block they can be aligned just as text can."},{"name":"itemInputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of each option's control in its row; `'center'` is\nthe middle of the label plus its description. Omitted, it sits on the\nlabel's first line."},{"name":"itemLabelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of each option's label in its row. Omitted, it stays\nas it is."},{"name":"itemLayout","type":"FieldLayout | undefined","required":false,"default":"'auto'","description":"How each row's input and label sit together, in the `layout` keywords:\n`'auto'`, `'vertical'`, `'horizontal'`, `'label-fill'`, `'input-fill'`,\nor a two-word ratio pattern like `'xx xxxxx'`."},{"name":"itemProps","type":"BbOptionGroupItemProps<T> | undefined","required":false,"description":"ADDITIONAL row fields, never the text or value: `description`, a muted\nline under the label (it may wrap; announced as the option's\ndescription). An object of paths or getters, or a function of the item;\nnothing is read implicitly."},{"name":"itemReverse","type":"boolean | undefined","required":false,"default":"false","description":"Swaps each row's input and label from their natural order (input first),\nin every `item-layout`. `reverse` swaps the legend and the options instead."},{"name":"items","type":"T[] | ((context: BbCheckboxGroupItemsContext) => T[] | Promise<T[]>)","required":true,"description":"The options: an array, or a provider called with a\n`BbCheckboxGroupItemsContext` (`BbSwitchGroupItemsContext` on a switch\ngroup) (`reason`, `modelValue`, `signal`), sync or async. A provider\nfails by THROWING, never by returning `[]`: the rows clear and `#empty`\ngets the `error`."},{"name":"itemText","type":"ItemAccessor<T, string> | undefined","required":false,"default":"own `label`, else `text`, else `JSON.stringify(item)`","description":"Defines a path that returns a property of the object to use as text or a function that returns a string.\n\nUnset: own `label`, else `text` (`{ label, value }` needs no accessor)."},{"name":"itemValue","type":"ItemAccessor<T> | undefined","required":false,"default":"own `value`, else the whole item","description":"Defines a path that returns a property of the object to use as value or a function that returns any value.\n\nUnset: own `value`, even `null`."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"legend","type":"string","required":true,"description":"Text content of the legend."},{"name":"legendMode","type":"\"outside\" | \"inside\" | undefined","required":false,"description":"Legend rendering mode. `'outside'` renders the legend above the fieldset in the normal flow;\n`'inside'` overlays the legend inside the fieldset border.\nFloating mode is not supported for option groups (checkbox, radio or\nswitch) — there is no single field for the legend to float against."},{"name":"legendPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"listLayout","type":"ListLayout | undefined","required":false,"default":"'horizontal'","values":["horizontal","vertical","vertical-stretch","tiles"],"description":"How the rows sit in the list: `'horizontal'` (on a line, wrapping),\n`'vertical'` (stacked), `'vertical-stretch'` (stacked, as wide as the\nlist) or `'tiles'` (equal boxes; `--tile-min-width` on `pt:list` sets the\nnarrowest)."},{"name":"loadingText","type":"string | undefined","required":false,"description":"String displayed while items are being loaded."},{"name":"max","type":"number | undefined","required":false,"description":"Maximum number of selected items."},{"name":"modelValue","type":"any","required":false,"description":"Used by v-model. Can be an array of any serializable type."},{"name":"modelValueDebounceTime","type":"number | undefined","required":false,"description":"Timeout used to debounce response to changes to modelValue."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"true","description":"Enables multi-selection behavior.\nWhen true, `modelValue` must be an array.\nWhen false, `modelValue` should be a single value."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"pt","type":"GroupPtMap<T> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:icon:checked","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:focused","type":"PtValue | undefined","required":false},{"name":"pt:icon:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:item:checked","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:errors","type":"PtValue | undefined","required":false},{"name":"pt:item:focused","type":"PtValue | undefined","required":false},{"name":"pt:item:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:item:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:item:loading","type":"PtValue | undefined","required":false},{"name":"pt:item:readonly","type":"PtValue | undefined","required":false},{"name":"pt:item:warnings","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:itemDescription:checked","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:disabled","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:errors","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:focused","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:loading","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:readonly","type":"PtValue | undefined","required":false},{"name":"pt:itemDescription:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | ((ctx: PtItemCtx<T, GroupPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:label:checked","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:focused","type":"PtValue | undefined","required":false},{"name":"pt:label:focusVisible","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:legend","type":"PtValue | undefined","required":false},{"name":"pt:legend:disabled","type":"PtValue | undefined","required":false},{"name":"pt:legend:errors","type":"PtValue | undefined","required":false},{"name":"pt:legend:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:legend:loading","type":"PtValue | undefined","required":false},{"name":"pt:legend:readonly","type":"PtValue | undefined","required":false},{"name":"pt:legend:warnings","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list:errors","type":"PtValue | undefined","required":false},{"name":"pt:list:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:list:loading","type":"PtValue | undefined","required":false},{"name":"pt:list:readonly","type":"PtValue | undefined","required":false},{"name":"pt:list:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and the input is swapped."},{"name":"rules","type":"RuleExpression<any>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"selectable","type":"boolean | ((item: T) => boolean) | undefined","required":false,"default":"true","description":"Defines whether options are selectable.\nCan be a global boolean that affects all options or a function\nthat accepts an item and returns a boolean that only affects that item.\nNon-selectable options are rendered disabled."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the group becomes active (focus/click enters it)."},{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when one of the generated checkbox inputs loses focus.\nForwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when an option is toggled.\nForwards the original DOM `Event` from the checkbox input."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when one of the generated checkbox inputs is clicked.\nForwards the original DOM `MouseEvent`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when one of the generated checkbox inputs receives focus.\nForwards the original DOM `FocusEvent`."},{"name":"inactive","signature":"(): void","description":"Emitted when focus/click moves outside the group after it was active.\nUseful for validation-on-blur flows at group level."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from generated checkbox inputs.\nForwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on generated checkbox inputs.\nForwards the original DOM `KeyboardEvent`."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is pressed over a checkbox input.\nForwards the original DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is released over a checkbox input.\nForwards the original DOM `MouseEvent`."},{"name":"update:modelValue","signature":"(value: any): void","description":"Emitted with the coherent next selection array whenever selection changes."}],"slots":[{"name":"append","type":"object","description":"Content rendered after the last option, inside the options container."},{"name":"description","type":"BbSwitchGroupDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"empty","type":"{ error: unknown; }","description":"Content shown when no options are available (replaces the default \"no\ndata\" text). `error` is what the latest failed load rejected with,\nuntouched, and `null` when nothing failed — a failed load clears the\nrows, so this slot is where it shows."},{"name":"icon","type":"BbSwitchGroupIconSlotProps<T>","fields":["disabled: boolean","readonly: boolean","checked: boolean","indeterminate?: boolean","focused: boolean","focusVisible: boolean","id: string","name: string","falseValue: any","hasErrors: boolean","hasWarnings: boolean","parsedValue: string","trueValue: any","value: any","item: T","text: string"],"description":"Replaces the default switch track visual for each option. Receives the\nswitch state plus the source item and its display text."},{"name":"label","type":"BbSwitchGroupLabelSlotProps<T>","fields":["item: T","text: string","checked: boolean","description: string"],"description":"Replaces the default label text for each option."},{"name":"legend","type":"BbSwitchGroupLegendSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default fieldset legend text for the group."},{"name":"loading","type":"object","description":"Content shown while options are loading (replaces the default loading text)."},{"name":"prepend","type":"object","description":"Content rendered before the first option, inside the options container."}],"exposed":[],"models":[{"name":"modelValue","type":"any"}],"cssProps":[{"name":"--gap","value":"24px","selector":".bb-switch-group__list","description":"Space between rows on one line."},{"name":"--row-gap","value":"10px","selector":".bb-switch-group__list","description":"Space between wrapped lines."},{"name":"--tile-min-width","value":"96px","selector":".bb-switch-group__list","description":"How narrow a tile may get before the tiles wrap (`tiles` only)."}],"pt":{"parts":[{"name":"root","description":"The group's container (the fieldset)."},{"name":"legend","description":"The group's heading — the fieldset `<legend>` (the `legend` prop)."},{"name":"description","description":"The muted line under the legend (the `description` prop)."},{"name":"message","description":"The errors / warnings line. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"list","description":"The node that lays the rows out (flex + wrap, gaps on `--gap` / `--row-gap`): `pt:list=\"grid grid-cols-3\"` re-lays them, `pt:list=\"[--gap:8px]\"` tightens them. Takes the group-wide states only."},{"name":"item","description":"One option row — a broadcast, resolved per option with its own `checked` / `disabled` / focus. Takes a per-item function."},{"name":"icon","description":"One row's drawn glyph — the default one: a consumer `icon` slot replaces it. Takes a per-item function."},{"name":"label","description":"One option's label text (the `label` slot's default). Takes a per-item function."},{"name":"itemDescription","description":"One option's muted second line, its description. Takes a per-item function."}],"states":[{"name":"hasValue","description":"Component-wide: at least one option is chosen."},{"name":"checked","description":"Per row, on `item`, `icon`, `label` and `itemDescription`: that option is chosen. Never on a field part."},{"name":"readonly","description":"Component-wide: the group is `readonly`."},{"name":"disabled","description":"Component-wide while the group is `disabled`; also per row, on the row parts of an option that is disabled on its own."},{"name":"warnings","description":"Component-wide: the group shows warnings and no errors."},{"name":"errors","description":"Component-wide: the group shows errors."},{"name":"focused","description":"Per row, on the row parts: that option's input has focus — any focus, mouse included."},{"name":"focusVisible","description":"Per row, on the row parts: that option's focus is keyboard-visible — where a focus ring belongs."},{"name":"loading","description":"Component-wide: the items are being fetched."}]},"tree":{"bindings":[{"part":"icon","target":"BbBaseSwitchIcon"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbSwitchGroup","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"OptionsContainer","kind":"internal","vocabulary":"BbSwitchGroup","bindings":[{"part":"list","target":"span"},{"part":"item","target":"label"},{"part":"label","target":"span"},{"part":"itemDescription","target":"span"}]},{"name":"BbBaseSwitchIcon","kind":"public","cssProps":[{"name":"--accent","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon--errors","bb-base-switch-icon--checked","bb-base-switch-icon--indeterminate","bb-base-switch-icon--warnings","bb-base-switch-icon--disabled"]},{"name":"--bg","documented":true,"readBy":["bb-base-switch-icon"]},{"name":"--ring-color","documented":true,"readBy":["bb-base-switch-icon--focus-visible"]},{"name":"--r","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon__thumb"]},{"name":"--bw","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon__thumb"]},{"name":"--h","documented":true,"readBy":["bb-base-switch-icon"]},{"name":"--w","documented":true,"readBy":["bb-base-switch-icon"]},{"name":"--thumb","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon__thumb"]},{"name":"--inset","documented":true,"readBy":["bb-base-switch-icon","bb-base-switch-icon__thumb"]},{"name":"--travel","documented":true,"readBy":["bb-base-switch-icon__thumb"]}]}]},"css":{"classes":{"bb-switch-group":["","__empty","__item","__item--*","__item--aligned","__item--description","__item--disabled","__item--focus-visible","__item--focused","__item--input-align-*","__item--input-align-bottom","__item--input-align-center","__item--input-align-top","__item--label-align-*","__item--label-align-bottom","__item--label-align-center","__item--label-align-top","__item--reverse","__item--selected","__item--vertical","__item-description","__label","__list","__list--*","__list--errors","__list--tiles","__list--warnings","__loading"]},"locals":["--color-gray-200","--gap","--h","--hit","--row-gap","--tap-row-gap","--tile-min-width"]},"attrTargets":["div"],"removed":[{"name":"color","new":null,"since":"3.0.0-beta.15","migration":"ai/guides/migration/components/bb-checkbox-group.md","silent":true,"fix":{"kind":"manual"}},{"name":"labelPosition","new":"legendPosition","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-checkbox-group.md","silent":true,"fix":{"kind":"rename"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"inputDirection","new":"listLayout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename","valueMap":{"horizontal":"horizontal","vertical":"vertical-stretch"}}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"labelPosition","to":"legendPosition","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-checkbox-group.md","fix":{"kind":"rename"}},{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"inputDirection","to":"listLayout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename","valueMap":{"horizontal":"horizontal","vertical":"vertical-stretch"}}},{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
519
|
-
{"name":"BbTable","group":"Data Display","description":"Displays tabular data, configurable columns and data mapper.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTable.md","source":"ai/source/BbTable.md","props":[{"name":"accessibleLabel","type":"((columns: MappedCell[], item: any) => string) | undefined","required":false,"description":"Function that accepts the columns and the current item as\narguments and returns a label to be used for accessibility purposes.\nThe cells arrive in RENDER order (they follow `order`, so the\nlabel reads like the row) — look a cell up by `key`, never by position."},{"name":"actionsText","type":"string | undefined","required":false,"description":"Label used in the header of the actions column."},{"name":"align","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"\"left\"","description":"Text alignment of the columns."},{"name":"caption","type":"string | undefined","required":false,"description":"Caption that describes the content of the table. Used for accessibility purposes."},{"name":"columns","type":"BbTableColumn<T>[] | undefined","required":false,"default":"[]","description":"Array of definitions of how the columns should be rendered."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Adds a CSS class that applies a compact style to the component."},{"name":"dependencies","type":"unknown[] | undefined","required":false,"default":"[]","description":"Defines an array of dependencies that will trigger actions in the component upon change."},{"name":"depsDebounceTime","type":"number | undefined","required":false,"default":"0","description":"Timeout used to debounce response to changes to dependencies."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component"},{"name":"disableSelectAll","type":"boolean | undefined","required":false,"default":"false","description":"Hides the \"Select all\" checkbox that selectable multi-row tables\ndisplay by default."},{"name":"displayCaption","type":"boolean | undefined","required":false,"default":"false","description":"Shows the caption as a visible title. Off by default: the caption is\nhidden, and screen readers still hear it as the table's name."},{"name":"emptyText","type":"string | undefined","required":false,"default":"the localized `common.emptyText` (\"No data to display\")","description":"String displayed when there are no items to display."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"After every load, prunes `modelValue`, `unselected-items`, `highlighted`\nand `expanded-items` of values whose row is gone (a single value resets\nto `null`). Never on a provider-paginated table: a page change would\nprune the other pages' selection; reconcile in the provider instead."},{"name":"expandedItems","type":"any[] | undefined","required":false,"default":"[]","description":"Used by `v-model:expandedItems`. Array of the currently expanded items —\ntoggled by the row expand control and by external writes (mirrors the\n`highlighted`/`sort` v-model surfaces). Drives the `#expand` slot rows and\ntheir `aria-expanded`/`aria-controls` wiring."},{"name":"failedText","type":"string | undefined","required":false,"default":"the localized `common.failedText` (\"Couldn't load items\")","description":"String displayed in the empty state while the latest load FAILED (the\n`items` provider threw): the twin of `emptyText` for that case."},{"name":"fixed","type":"boolean | undefined","required":false,"default":"false","description":"Splits the width equally among the columns that declare no `width`\n(each undeclared column becomes a `minmax(0, 1fr)` track)\nmaking each column take up the same amount of space."},{"name":"fixedActions","type":"boolean | undefined","required":false,"default":"false","description":"Pins the actions column (the one the `#actions` slot creates) to the\nright edge, `position: sticky`, in place. Data columns pin through\n`column.fixed`; this is the same feature for the structural column that\nhas no definition to carry it. No effect without an `#actions` slot."},{"name":"fixedFirst","type":"boolean | undefined","required":false,"default":"false","description":"Sticks the `#<key>:first` row to the top of the scrollport (under a\nstuck header)."},{"name":"fixedHeaders","type":"boolean | undefined","required":false,"default":"false","description":"Boolean that sets the headers as sticky to the top of the table."},{"name":"fixedLast","type":"boolean | undefined","required":false,"default":"false","description":"Sticks the `#<key>:last` row (a totals row) to the bottom of the\nscrollport."},{"name":"fixedSelect","type":"boolean | undefined","required":false,"default":"false","description":"Pins the selection column to the left edge, `position: sticky`, in\nplace. Data columns pin through `column.fixed`; this is the same feature\nfor the structural column that has no definition to carry it. No effect\nunless the table is `selectable`."},{"name":"headerRowClass","type":"Classes | undefined","required":false,"description":"Defines the classes to be passed to the header row."},{"name":"highlightable","type":"boolean | ((item: Item) => boolean) | undefined","required":false,"default":"undefined","description":"Which rows a click, Enter or `toggleHighlighted` may highlight: `false`\nfor none, or a function of the row's item. Unset: every row, when\n`highlighted` is bound. A value the app sets still shows on a refused row."},{"name":"highlighted","type":"any","required":false,"default":"undefined","description":"Used by `v-model:highlighted`: the one row the UI is about (\"the row\nwhose details are open\"), a single item value or `null`. Opt-in: bound,\na row click highlights; unbound, it only emits `click:row`. The row gets\n`aria-current=\"true\"` and a shipped tint."},{"name":"id","type":"string | undefined","required":false,"description":"Stable id for this table's width context. When omitted a unique id is\ngenerated. Nested tables use the nearest ancestor id to inherit widths."},{"name":"inheritColumnWidths","type":"string | boolean | undefined","required":false,"description":"A nested table snaps its columns to an ancestor table's tracks: `true` =\nthe nearest ancestor, a table `id` = that ancestor (when an intermediate\ntable has a different column count). Off by default: a nested table sizes\nitself."},{"name":"interactiveWhileLoading","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the header and rows interactive while loading (by default they are\n`inert`: a refetch is about to replace them). For background refreshes\nthat must not interrupt an open editor."},{"name":"items","type":"Item[] | ((context: BbTableItemsContext) => Item[] | Promise<Item[]>)","required":true,"default":"[]","description":"Rows to render: an array, or a provider called with a\n`BbTableItemsContext` (`reason`, `modelValue`, `signal`), sync or async.\nA provider fails by THROWING, never by returning `[]`: the rows clear and\n`#empty` gets the `error`. Return the page as it is."},{"name":"itemValue","type":"ItemAccessor<Item> | undefined","required":false,"description":"Defines a path that returns a property of the row to use as its value (the\nselection, `expandedItems` and row keys compare by it) or a function that\nreturns any value."},{"name":"keyboardNavigation","type":"boolean | undefined","required":false,"default":"false","description":"Opt-in keyboard navigation: the table becomes an ARIA `grid` (a\n`treegrid` with an `#expand` slot) with ONE tab stop and a roving focus\nover its cells; controls inside cells leave the tab order (Enter/F2 go\nin). Ignored with a `#tbody` slot."},{"name":"legend","type":"string | undefined","required":false,"description":"The `<legend>` of a `selectable` table (it renders as a `<fieldset>`):\nthe selection's accessible name. Falls back to `caption`, then to a\nlocalized default."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles.\n\nWith no rows yet this renders skeletons; over existing rows the rows stay\non screen (dimmed, with an indeterminate bar) rather than being replaced —\na refetch should not blank a table the user is reading."},{"name":"loadingText","type":"string | undefined","required":false,"default":"the localized `common.loadingText` (\"Loading...\")","description":"Screen-reader announcement for the loading row's `aria-live` status.\nVisually hidden — the skeleton (or the `#loading` slot) is the visible\nsignal."},{"name":"max","type":"number | undefined","required":false,"default":"Infinity","description":"Maximum number of items that can be selected."},{"name":"modelValue","type":"any","required":false,"default":"[]","description":"Used by v-model. Can be any serializable type."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"true","description":"Allows the selection of multiple items."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"order","type":"string[] | undefined","required":false,"default":"[]","description":"Used by `v-model:order`: the column keys in render order. Declared\ncolumns it omits follow in declaration order; unknown keys stay in place.\nA `reorderable` move writes it back complete. Works unbound, like `sort`;\nnever holds `select` / `actions`."},{"name":"page","type":"string | number | undefined","required":false,"description":"Current page (from 1), for the rows' `aria-rowindex` and a `BbPagination`\npaired through `id`. Doesn't slice `items`: pass the current page's rows.\nNumeric strings are coerced."},{"name":"perPage","type":"string | number | undefined","required":false,"description":"Rows per page, for `aria-rowindex` and a paired `BbPagination`. Doesn't\nslice `items`. Unset, an array `items` infers it from its length; an\nexplicit value wins. Numeric strings are coerced."},{"name":"pt","type":"PtItemMap<BbTablePtPart, \"row\", BbTablePtState, Item> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:body","type":"PtValue | undefined","required":false},{"name":"pt:body:disabled","type":"PtValue | undefined","required":false},{"name":"pt:body:empty","type":"PtValue | undefined","required":false},{"name":"pt:body:expanded","type":"PtValue | undefined","required":false},{"name":"pt:body:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:body:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:body:loading","type":"PtValue | undefined","required":false},{"name":"pt:body:selected","type":"PtValue | undefined","required":false},{"name":"pt:body:sorted","type":"PtValue | undefined","required":false},{"name":"pt:body:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:caption","type":"PtValue | undefined","required":false},{"name":"pt:caption:disabled","type":"PtValue | undefined","required":false},{"name":"pt:caption:empty","type":"PtValue | undefined","required":false},{"name":"pt:caption:expanded","type":"PtValue | undefined","required":false},{"name":"pt:caption:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:caption:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:caption:loading","type":"PtValue | undefined","required":false},{"name":"pt:caption:selected","type":"PtValue | undefined","required":false},{"name":"pt:caption:sorted","type":"PtValue | undefined","required":false},{"name":"pt:caption:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:cell","type":"PtValue | undefined","required":false},{"name":"pt:cell:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cell:empty","type":"PtValue | undefined","required":false},{"name":"pt:cell:expanded","type":"PtValue | undefined","required":false},{"name":"pt:cell:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:cell:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:cell:loading","type":"PtValue | undefined","required":false},{"name":"pt:cell:selected","type":"PtValue | undefined","required":false},{"name":"pt:cell:sorted","type":"PtValue | undefined","required":false},{"name":"pt:cell:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:empty","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:expanded","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:loading","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:selected","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:sorted","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:disabled","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:empty","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:expanded","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:loading","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:selected","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:sorted","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:empty","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:expanded","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:loading","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:sorted","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:firstRow","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:empty","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:expanded","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:loading","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:selected","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:sorted","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:foot","type":"PtValue | undefined","required":false},{"name":"pt:foot:disabled","type":"PtValue | undefined","required":false},{"name":"pt:foot:empty","type":"PtValue | undefined","required":false},{"name":"pt:foot:expanded","type":"PtValue | undefined","required":false},{"name":"pt:foot:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:foot:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:foot:loading","type":"PtValue | undefined","required":false},{"name":"pt:foot:selected","type":"PtValue | undefined","required":false},{"name":"pt:foot:sorted","type":"PtValue | undefined","required":false},{"name":"pt:foot:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:head","type":"PtValue | undefined","required":false},{"name":"pt:head:disabled","type":"PtValue | undefined","required":false},{"name":"pt:head:empty","type":"PtValue | undefined","required":false},{"name":"pt:head:expanded","type":"PtValue | undefined","required":false},{"name":"pt:head:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:head:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:head:loading","type":"PtValue | undefined","required":false},{"name":"pt:head:selected","type":"PtValue | undefined","required":false},{"name":"pt:head:sorted","type":"PtValue | undefined","required":false},{"name":"pt:head:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:headerRow","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:empty","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:expanded","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:loading","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:selected","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:sorted","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:lastRow","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:empty","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:expanded","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:loading","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:selected","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:sorted","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:empty","type":"PtValue | undefined","required":false},{"name":"pt:root:expanded","type":"PtValue | undefined","required":false},{"name":"pt:root:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:root:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:root:sorted","type":"PtValue | undefined","required":false},{"name":"pt:root:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:row","type":"PtValue | ((ctx: PtItemCtx<Item, BbTablePtState>) => PtItemResult) | undefined","required":false},{"name":"pt:row:disabled","type":"PtValue | undefined","required":false},{"name":"pt:row:empty","type":"PtValue | undefined","required":false},{"name":"pt:row:expanded","type":"PtValue | undefined","required":false},{"name":"pt:row:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:row:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:row:loading","type":"PtValue | undefined","required":false},{"name":"pt:row:selected","type":"PtValue | undefined","required":false},{"name":"pt:row:sorted","type":"PtValue | undefined","required":false},{"name":"pt:row:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:empty","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:expanded","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:loading","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:sorted","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:empty","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:expanded","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:loading","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:sorted","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:table","type":"PtValue | undefined","required":false},{"name":"pt:table:disabled","type":"PtValue | undefined","required":false},{"name":"pt:table:empty","type":"PtValue | undefined","required":false},{"name":"pt:table:expanded","type":"PtValue | undefined","required":false},{"name":"pt:table:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:table:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:table:loading","type":"PtValue | undefined","required":false},{"name":"pt:table:selected","type":"PtValue | undefined","required":false},{"name":"pt:table:sorted","type":"PtValue | undefined","required":false},{"name":"pt:table:sortedDesc","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"reorderable","type":"boolean | undefined","required":false,"default":"false","description":"Lets the user reorder the data columns: drag a header, or Shift+←/→ on a\nfocused header. Every move writes `v-model:order`; a column panel that\nonly writes `order` does not need it. `select` / `actions` and a custom\n`#thead` never move."},{"name":"reorderableRows","type":"boolean | undefined","required":false,"default":"false","description":"Adds a grip at the start of each row: the user drags a row, or lifts it\nwith Space / Enter and the arrow keys, and `reorder:rows` reports\n`{ item, from, to }`. The table never reorders `items`: splice it in the\nhandler."},{"name":"resizable","type":"boolean | undefined","required":false,"default":"false","description":"Lets the user resize the data columns (drag a header's trailing edge, or\nAlt+←/→; double-click resets). Each commit fires `resize:column(key,\nwidth)` once: write the width back into the column definition to keep it.\nIgnored when inheriting widths."},{"name":"rowClass","type":"BbTableRowClasses<Item> | undefined","required":false,"description":"Defines the classes to be passed to each data row. Can also be a\nfunction of the row's item for dynamic values."},{"name":"selectable","type":"boolean | ((item: Item) => boolean) | undefined","required":false,"description":"Defines whether the table is selectable.\nCan be a global boolean that affects all rows or a function\nthat accepts an item and returns a boolean that only affects that item."},{"name":"selectAll","type":"boolean | undefined","required":false,"default":"false","description":"Defines whether the \"Select all\" checkbox is checked."},{"name":"selectAllLabel","type":"string | undefined","required":false,"description":"Text of the label used by the \"Select all\" boolean."},{"name":"selectText","type":"string | undefined","required":false,"description":"Text of the header used for the radio inputs when the table is not `multiple`."},{"name":"sort","type":"BbTableSortEntry[] | undefined","required":false,"default":"[]","description":"Used by `v-model:sort`: `[columnKey, direction]` entries in priority\norder, written by the `sortable` headers and shown by them. Doesn't sort\n`items`: apply it to your data or your server query."},{"name":"tdClass","type":"ColumnClasses<Item> | undefined","required":false,"description":"Defines the classes to be passed to every data cell. Can also be a function for dynamic values."},{"name":"thClass","type":"Classes | undefined","required":false,"description":"Defines the classes to be passed to every header cell."},{"name":"totalItems","type":"string | number | undefined","required":false,"description":"Total row count, for `aria-rowcount` and a paired `BbPagination`'s page\ncount. Unset, an array `items` infers it from its length; an explicit\nvalue wins. Numeric strings are coerced."},{"name":"totalPages","type":"string | number | undefined","required":false,"description":"Seeds a paired `BbPagination`'s page count when the server reports pages,\nnot rows; the table renders nothing from it. A known total (`totalItems`)\nalways wins. Numeric strings are coerced."},{"name":"unselectedItems","type":"any[] | undefined","required":false,"default":"[]","description":"Items that are not selected."},{"name":"virtual","type":"boolean | undefined","required":false,"default":"false","description":"Windows the body: only the rows near the scrollport are mounted. Bound\nthe table's height to make it the scroller; column widths are measured\nonce, from the first rows. Ignored when inheriting widths and under a\n`#tbody` slot."}],"events":[{"name":"click:row","signature":"(event: MouseEvent, item: any): void","description":"A body row was clicked, or activated with Enter/Space under\n`keyboardNavigation`. Carries the DOM `MouseEvent` and the raw record."},{"name":"contextmenu:row","signature":"(event: MouseEvent, item: any): void","description":"A body row was right-clicked. Carries the DOM `MouseEvent` and the raw record."},{"name":"dblclick:row","signature":"(event: MouseEvent, item: any): void","description":"A body row was double-clicked. Carries the DOM `MouseEvent` and the raw record."},{"name":"hide:column","signature":"(key: string): void","description":"A column was hidden through a header slot's `hideColumn()`. Fired once;\nwrite `hidden: true` into the column definition to persist it."},{"name":"item:selected","signature":"(value: any): void","description":"The user selected one row. Carries the row's value (read through\n`itemValue`, the same value the selection v-model holds)."},{"name":"item:unselected","signature":"(value: any): void","description":"The user unselected one row. Carries the row's value, like `item:selected`."},{"name":"reorder:rows","signature":"(payload: { item: any; from: number; to: number; }): void","description":"A row was moved (`reorderable-rows`): `item` is your object, `from` /\n`to` index the `items` the table holds. Splice `items` in the handler; a\ndrop in place emits nothing."},{"name":"resize:column","signature":"(key: string, width: number | null): void","description":"A column was resized by the user (`resizable`): the new width in\npx, or `null` when the handle was double-clicked to reset the column to\nits declared width."},{"name":"update:expandedItems","signature":"(value: any[]): void","description":"Emitted with the new value whenever `v-model:expandedItems` changes."},{"name":"update:highlighted","signature":"(value: any): void","description":"Emitted with the new value whenever `v-model:highlighted` changes."},{"name":"update:modelValue","signature":"(value: any): void","description":"Emitted with the new value whenever `v-model` changes."},{"name":"update:order","signature":"(value: string[]): void","description":"Emitted with the new value whenever `v-model:order` changes."},{"name":"update:selectAll","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model:selectAll` changes."},{"name":"update:sort","signature":"(value: BbTableSortEntry[]): void","description":"Emitted with the new value whenever `v-model:sort` changes."},{"name":"update:unselectedItems","signature":"(value: any[]): void","description":"Emitted with the new value whenever `v-model:unselectedItems` changes."}],"slots":[{"name":"actions","type":"{ expanded?: boolean | undefined; expandProps?: ExpandControllerProps | undefined; toggleExpanded?: (() => void) | undefined; highlighted?: boolean | undefined; toggleHighlighted?: (() => void) | undefined; selected?: boolean | undefined; toggleSelected?: (() => void) | undefined; item: Item; value: any; }","description":"Content rendered in the actions cell for each row. Providing this slot\nis what CREATES the actions column (there is no prop): the header cell\n(labelled by `actions-text`, replaceable through `#actions:header`) and\none cell per row appear with it, and go away with it. Pin it with\n`fixed-actions`."},{"name":"actions:header","type":"{ text: string; }","description":"Replaces the default actions header cell content."},{"name":"empty","type":"{ error: unknown; }","description":"Content shown when there are no rows and nothing is loading, inside the\ntable's own full-width cell: pass content, never a row. `error` is what\nthe latest failed load threw (`null` when none)."},{"name":"expand","type":"{ expanded: boolean; expandProps?: ExpandControllerProps | undefined; toggleExpanded: () => void; highlighted?: boolean | undefined; toggleHighlighted?: (() => void) | undefined; selected?: boolean | undefined; toggleSelected?: (() => void) | undefined; item: Item; value: any; }","description":"Full-width expandable content row rendered below each main row when expanded."},{"name":"header:append","type":"BbTableHeaderAffixSlotProps<Item>","fields":["classes?: Classes","columnKey: string","items?: Item[]","label?: string","sortable?: boolean","sortOrder?: \"asc\" | \"desc\" | null","toggleSort?: (() => void)","hideColumn?: (() => void)"],"description":"Content rendered after every data column's header cell content — the\nlabel + sort control, or the column's own `<key>:header` replacement.\nA column's `<key>:header:append` slot wins over this one for that\ncolumn; they never stack. Branch on `columnKey` for per-column output."},{"name":"header:prepend","type":"BbTableHeaderAffixSlotProps<Item>","fields":["classes?: Classes","columnKey: string","items?: Item[]","label?: string","sortable?: boolean","sortOrder?: \"asc\" | \"desc\" | null","toggleSort?: (() => void)","hideColumn?: (() => void)"],"description":"Content rendered before every data column's header cell content — the\nlabel + sort control, or the column's own `<key>:header` replacement.\nA column's `<key>:header:prepend` slot wins over this one for that\ncolumn; they never stack. Branch on `columnKey` for per-column output."},{"name":"loading","type":"{ items: Item[]; }","description":"Content shown while table rows are loading (replaces the skeleton rows)."},{"name":"select","type":"{ item: Item; value: any; checked: boolean; disabled: boolean; inputName: string; readonly: boolean; toggleSelected?: (() => void) | undefined; }","description":"Replaces the default checkbox/radio in the selection cell for each row."},{"name":"select:header","type":"{ multiple: boolean; selectAll: boolean; text: string; }","description":"Replaces the default selection header cell content (checkbox or radio label)."},{"name":"tbody","type":"object","description":"Replaces the content of the body row group (`.bb-table__body`). Use when\nyou need full control over the body markup. Provide role-complete rows —\n`<div role=\"row\">` holding one `<div role=\"cell\">` per column — never a\n`<tr>`/`<td>`. A full-width cell spans with `grid-column: 1 / -1`."},{"name":"tfoot","type":"{ columnCount: number; }","description":"Fills the footer row group (`.bb-table__foot`). Use when you need a\nfooter. Provide role-complete rows — `<div role=\"row\">` holding\n`<div role=\"cell\">` elements — never a `<tr>`/`<td>`."},{"name":"thead","type":"object","description":"Replaces the header row group's content (`.bb-table__head`). The table is\na CSS grid: provide `<div role=\"row\">` rows of `<div\nrole=\"columnheader\">` cells, never `<tr>` / `<th>`."},{"name":"<key>","type":"object","description":"One column's body cell in every row, by the column `key` through `slotKey`. Scope: `{ item, value, content, selected, expanded, highlighted, classes, sortOrder, toggleSelected, toggleExpanded, toggleHighlighted, expandProps }`.","dynamic":true},{"name":"<key>:header","type":"object","description":"One column's header content, replacing its label and the built-in sort button. Scope: `{ label, items, sortable, sortOrder, toggleSort, hideColumn, classes }`.","dynamic":true},{"name":"<key>:header:prepend","type":"BbTableHeaderAffixSlotProps<Item>","description":"Content before one column's header, keeping the sort button; beats `header:prepend` (they never stack).","dynamic":true},{"name":"<key>:header:append","type":"BbTableHeaderAffixSlotProps<Item>","description":"Content after one column's header, keeping the sort button; beats `header:append` (they never stack).","dynamic":true},{"name":"<key>:first","type":"BbTableEdgeCellSlotProps<Item>","description":"One column's cell in a row before the data rows; any such slot creates the row, aligned with the columns. Only over rows.","dynamic":true},{"name":"<key>:last","type":"BbTableEdgeCellSlotProps<Item>","description":"One column's cell in a row after the data rows (a totals row); any such slot creates that row, aligned like `<key>:first`.","dynamic":true}],"exposed":[],"models":[{"name":"expandedItems","type":"any[] | undefined"},{"name":"highlighted","type":"any"},{"name":"modelValue","type":"any"},{"name":"order","type":"string[] | undefined"},{"name":"selectAll","type":"boolean | undefined"},{"name":"sort","type":"BbTableSortEntry[] | undefined"},{"name":"unselectedItems","type":"any[] | undefined"}],"cssProps":[{"name":"--bg","value":"var(--bb-panel)","selector":".bb-table","description":"The table's surface colour. Cells are transparent at rest so the row can tint them, but anything that sticks over scrolled content — the stuck head band and pinned (`column.fixed`) cells — must be opaque, and paints this. Set it on the table (`.my-table { --bg: … }`) when the table sits on a surface that is not `--bb-panel`; a nested table re-declares its own."},{"name":"--px","value":"12px","selector":".bb-table"},{"name":"--cell-h","value":"36px","selector":".bb-table"},{"name":"--py","value":"6px","selector":".bb-table"},{"name":"--actions-spacing","value":"8px","selector":".bb-table"},{"name":"--offset-start","value":"0px","selector":".bb-table","description":"Raw structural edge offset measured by the component (the parent's select/actions track width). Default 0 keeps every calc at its base."},{"name":"--offset-end","value":"0px","selector":".bb-table"},{"name":"--offset-internal-start","value":"var(--offset-start)","selector":".bb-table","description":"Routing of that offset. By default it is \"internal\": added to the first/last cell padding and folded into the first/last column width. Swap internal↔external (set internal to 0 and external to the raw offset) to pad the whole table instead of the edge cells."},{"name":"--offset-internal-end","value":"var(--offset-end)","selector":".bb-table"},{"name":"--offset-external-start","value":"0px","selector":".bb-table"},{"name":"--offset-external-end","value":"0px","selector":".bb-table"},{"name":"--pin-l","value":"0px","selector":".bb-table","description":"Re-declared on every table: a nested table must not inherit its parent's fade or pinned edge."},{"name":"--pin-r","value":"0px","selector":".bb-table"},{"name":"--fade-l","value":"0px","selector":".bb-table"},{"name":"--fade-r","value":"0px","selector":".bb-table"},{"name":"--fade-a-l","value":"1","selector":".bb-table"},{"name":"--fade-a-r","value":"1","selector":".bb-table"},{"name":"--cue-l","value":"0px","selector":".bb-table"},{"name":"--cue-r","value":"0px","selector":".bb-table"},{"name":"--cue-w","value":"8px","selector":".bb-table"},{"name":"--cue","value":"rgb(0 0 0 / 0.1)","selector":".bb-table"},{"name":"--row-bg","value":"var(--bb-panel)","selector":".bb-table__row--lifted"}],"pt":{"parts":[{"name":"root","description":"The table's container."},{"name":"caption","description":"The visible caption (`caption` with `displayCaption`)."},{"name":"table","description":"The grid root: `role=\"table\"`, or `role=\"grid\"` with `keyboardNavigation` (`role=\"treegrid\"` with an `#expand` slot too)."},{"name":"head","description":"The header row group."},{"name":"headerRow","description":"The header row."},{"name":"cellColumnHeader","description":"Every column header cell (`role=\"columnheader\"`), the select and actions headers included — a broadcast resolved per header. Not a `<th>`: the grid is `div`s with ARIA roles."},{"name":"sortIcon","description":"A sortable column's sort arrow, resolved per header."},{"name":"body","description":"The body row group."},{"name":"row","description":"Every DATA row — a broadcast resolved per row. Expand rows and the skeleton are not parts. Also takes a per-item function, called with the row's raw item, once per rendered row: keep it cheap."},{"name":"cell","description":"Every data cell, the select and actions cells included — a broadcast resolved with its row's states (`role=\"cell\"`, `gridcell` under `keyboardNavigation`) — and the cells of the `firstRow` / `lastRow`, with no row state. Takes no function: use `tdClass` for a per-cell hook."},{"name":"firstRow","description":"The row of `#<key>:first` cells, before the data rows."},{"name":"lastRow","description":"The row of `#<key>:last` cells, after the data rows (a totals row: `pt:lastRow=\"font-semibold\"`)."},{"name":"selectIcon","description":"The selection glyph: each row's checkbox (radio with single selection) and the select-all checkbox — resolved per node. Not rendered when the `select` / `select:header` slots replace them."},{"name":"dragIcon","description":"The move glyph on the chip that follows a column drag (`reorderable`)."},{"name":"dragHandle","description":"Each row's grip button (`reorderable-rows`), resolved with its row's states. A class list or an object; no per-row function."},{"name":"foot","description":"The footer row group (the `tfoot` slot's container)."}],"states":[{"name":"empty","description":"Component-wide: there are no rows (`bb-table--empty`)."},{"name":"sorted","description":"Per node, on `cellColumnHeader` and `sortIcon`: the column is sorted, either direction (`bb-table__cell-column-header--sorted`)."},{"name":"sortedDesc","description":"Per node, on `cellColumnHeader` and `sortIcon`: sorted descending (`bb-table__cell-column-header--sorted-desc`). Ascending is `sorted` alone."},{"name":"selected","description":"Per node, on `row`, its cells and its `selectIcon`: a checked row; on the select-all glyph, every row is selected."},{"name":"indeterminate","description":"Per node, on the select-all `selectIcon`: some rows are selected, not all."},{"name":"disabled","description":"Per node, on `row`, its cells and its `selectIcon`: the row cannot be SELECTED — `selectable` rejects it, or the table is `disabled` (`bb-table__row--disabled`). It still clicks, highlights and expands. Never on a table without selection. The select-all glyph takes it from the table's `disabled`."},{"name":"expanded","description":"Per node, on `row` and its cells: the row's expand row is open (`bb-table__row--expanded`)."},{"name":"highlighted","description":"Per node, on `row` and its cells: the highlighted row."},{"name":"loading","description":"Component-wide: the table is `loading`."}]},"tree":{"bindings":[{"part":"caption","target":"div.bb-table__caption"},{"part":"dragIcon","target":"svg.bb-table__drag-icon"},{"part":"table","target":"div"},{"part":"head","target":"div.bb-table__head"},{"part":"headerRow","target":"div.bb-table__header-row"},{"part":"cellColumnHeader","target":"div.bb-table__cell-column-header"},{"part":"selectIcon","target":"BbBaseCheckboxIcon"},{"part":"sortIcon","target":"svg.bb-table__sort-icon"},{"part":"body","target":"div.bb-table__body"},{"part":"foot","target":"div.bb-table__foot"}],"nodes":[{"name":"BbBaseCheckboxIcon","kind":"public","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-base-checkbox-icon","bb-base-checkbox-icon--errors","bb-base-checkbox-icon--warnings","bb-base-checkbox-icon--checked","bb-base-checkbox-icon--indeterminate"]},{"name":"--check-color","documented":false,"readBy":["bb-base-checkbox-icon__check","bb-base-checkbox-icon__indeterminate"]},{"name":"--size","documented":false,"readBy":["bb-base-checkbox-icon"]},{"name":"--r","documented":true,"readBy":["bb-base-checkbox-icon"]},{"name":"--ring-color","documented":true,"readBy":["bb-base-checkbox-icon","bb-base-checkbox-icon--focus-visible"]},{"name":"--elev","documented":true,"readBy":["bb-base-checkbox-icon","bb-base-checkbox-icon--focus-visible"]},{"name":"--bg","documented":true,"readBy":["bb-base-checkbox-icon"]},{"name":"--border-color","documented":false,"readBy":["bb-base-checkbox-icon"]}]},{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]}]},"css":{"classes":{"bb-sr-only":[""],"bb-table":["","--align-*","--compact","--empty","--fixed","--fixed-header","--inherit-widths","--loading","--overflow-left","--overflow-right","--pinned-left","--pinned-right","--reorderable","--resizable","--row-dragging","--selectable","--virtual","--virtual-flat","__body","__caption","__cell","__cell--*","__cell--actions","__cell--clip","__cell--edge-end","__cell--edge-start","__cell--fluid","__cell--nowrap","__cell--resized","__cell--row-drag","__cell--select","__cell-column-header","__cell-column-header--*","__cell-column-header--actions","__cell-column-header--clip","__cell-column-header--dragging","__cell-column-header--edge-end","__cell-column-header--edge-start","__cell-column-header--floored","__cell-column-header--locked","__cell-column-header--resizing","__cell-column-header--row-drag","__cell-column-header--select","__cell-column-header--sortable","__cell-column-header--sorted","__cell-column-header--sorted-desc","__drag-icon","__edge-row","__edge-row--*","__edge-row--first","__edge-row--fixed","__edge-row--last","__foot","__head","__head--dragging","__head--resizing","__header-row","__reorder-status","__row","__row--disabled","__row--drag-source","__row--expanded","__row--highlightable","__row--highlighted","__row--lifted","__row-handle","__row-handle-icon","__row-reorder-status","__select-icon","__sort-icon","__table"],"bb-table-check":["","__label","__label--disabled","__label-text"],"bb-table-column-drag":[""],"bb-table-column-ghost":[""],"bb-table-empty":["__cell","__row","__text"],"bb-table-expand":["__cell","__row","__row--highlighted"],"bb-table-header":["__content","__resizer"],"bb-table-loading":["__text"],"bb-table-placeholder":["__row","__row--pending"],"bb-table-radio":["","__label","__label--disabled","__label-text"],"bb-table-resizing":[""],"bb-table-row-drag":[""],"bb-table-row-ghost":[""],"bb-table-skeleton":["__avatar","__avatar-text","__badge","__cell","__cell--*","__cell--actions","__cell--row-drag","__cell--select","__cell-content","__image","__line","__placeholder","__row"],"bb-table-sort":["","--asc","--desc"],"bb-table-spacer":["__row"]},"locals":["--actions-spacing","--arrow-preview","--bg","--cell-h","--color-gray-200","--cue","--cue-l","--cue-r","--cue-w","--drop","--fade-a-l","--fade-a-r","--fade-l","--fade-r","--floor","--line","--offset-end","--offset-external-end","--offset-external-start","--offset-internal-end","--offset-internal-start","--offset-start","--pin-l","--pin-r","--placeholder-bars","--px","--py","--row-bg","--row-h","--stuck-head-h","--stuck-outer","--stuck-top","--ts","--virtual-row-tracks"]},"removed":[{"name":"allowSelectAll","new":"disableSelectAll","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"invert"}},{"name":"enabledWhileLoading","new":"interactiveWhileLoading","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"actions","new":null,"since":"3.0.0-beta.21","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"remove"}},{"name":"fixedColumns","new":null,"since":"3.0.0-beta.21","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"manual"}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:select","new":"select:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:actions","new":"actions:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:<x>:prepend","new":"<x>:header:prepend","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:<x>:append","new":"<x>:header:append","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:<x>","new":"<x>:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"allowSelectAll","to":"disableSelectAll","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"invert"}},{"from":"enabledWhileLoading","to":"interactiveWhileLoading","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"header:select","to":"select:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"header:actions","to":"actions:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"header:<x>:prepend","to":"<x>:header:prepend","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"header:<x>:append","to":"<x>:header:append","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"header:<x>","to":"<x>:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}}]},
|
|
519
|
+
{"name":"BbTable","group":"Data Display","description":"Displays tabular data, configurable columns and data mapper.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTable.md","source":"ai/source/BbTable.md","props":[{"name":"accessibleLabel","type":"((columns: MappedCell[], item: any) => string) | undefined","required":false,"description":"The row's selection checkbox label, from `(columns, item)`. Unset: the\nrow's name in the locale's select template (its `rowHeader` cells, else\nits first column: \"Select INV-1041\"). The cells arrive in render order:\nlook one up by `key`, never by position."},{"name":"actionsText","type":"string | undefined","required":false,"description":"Label used in the header of the actions column."},{"name":"align","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"\"left\"","description":"Text alignment of the columns."},{"name":"caption","type":"string | undefined","required":false,"description":"Caption that describes the content of the table. Used for accessibility purposes."},{"name":"columns","type":"BbTableColumn<T>[] | undefined","required":false,"default":"[]","description":"Array of definitions of how the columns should be rendered."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Adds a CSS class that applies a compact style to the component."},{"name":"dependencies","type":"unknown[] | undefined","required":false,"default":"[]","description":"Defines an array of dependencies that will trigger actions in the component upon change."},{"name":"depsDebounceTime","type":"number | undefined","required":false,"default":"0","description":"Timeout used to debounce response to changes to dependencies."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component"},{"name":"disableSelectAll","type":"boolean | undefined","required":false,"default":"false","description":"Hides the \"Select all\" checkbox that selectable multi-row tables\ndisplay by default."},{"name":"displayCaption","type":"boolean | undefined","required":false,"default":"false","description":"Shows the caption as a visible title. Off by default: the caption is\nhidden, and screen readers still hear it as the table's name."},{"name":"emptyText","type":"string | undefined","required":false,"default":"the localized `common.emptyText` (\"No data to display\")","description":"String displayed when there are no items to display."},{"name":"enforceCoherence","type":"boolean | undefined","required":false,"default":"false","description":"After every load, prunes `modelValue`, `unselected-items`, `highlighted`\nand `expanded-items` of values whose row is gone (a single value resets\nto `null`). Never on a provider-paginated table: a page change would\nprune the other pages' selection; reconcile in the provider instead."},{"name":"expandedItems","type":"any[] | undefined","required":false,"default":"[]","description":"Used by `v-model:expandedItems`. Array of the currently expanded items —\ntoggled by the row expand control and by external writes (mirrors the\n`highlighted`/`sort` v-model surfaces). Drives the `#expand` slot rows and\ntheir `aria-expanded`/`aria-controls` wiring."},{"name":"failedText","type":"string | undefined","required":false,"default":"the localized `common.failedText` (\"Couldn't load items\")","description":"String displayed in the empty state while the latest load FAILED (the\n`items` provider threw): the twin of `emptyText` for that case."},{"name":"fixed","type":"boolean | undefined","required":false,"default":"false","description":"Splits the width equally among the columns that declare no `width`\n(each undeclared column becomes a `minmax(0, 1fr)` track)\nmaking each column take up the same amount of space."},{"name":"fixedActions","type":"boolean | undefined","required":false,"default":"false","description":"Pins the actions column (the one the `#actions` slot creates) to the\nright edge, `position: sticky`, in place. Data columns pin through\n`column.fixed`; this is the same feature for the structural column that\nhas no definition to carry it. No effect without an `#actions` slot."},{"name":"fixedFirst","type":"boolean | undefined","required":false,"default":"false","description":"Sticks the `#<key>:first` row to the top of the scrollport (under a\nstuck header)."},{"name":"fixedHeaders","type":"boolean | undefined","required":false,"default":"false","description":"Boolean that sets the headers as sticky to the top of the table."},{"name":"fixedLast","type":"boolean | undefined","required":false,"default":"false","description":"Sticks the `#<key>:last` row (a totals row) to the bottom of the\nscrollport."},{"name":"fixedSelect","type":"boolean | undefined","required":false,"default":"false","description":"Pins the selection column to the left edge, `position: sticky`, in\nplace. Data columns pin through `column.fixed`; this is the same feature\nfor the structural column that has no definition to carry it. No effect\nunless the table is `selectable`."},{"name":"headerRowClass","type":"Classes | undefined","required":false,"description":"Defines the classes to be passed to the header row."},{"name":"highlightable","type":"boolean | ((item: Item) => boolean) | undefined","required":false,"default":"undefined","description":"Which rows a click, Enter or `toggleHighlighted` may highlight: `false`\nfor none, or a function of the row's item. Unset: every row, when\n`highlighted` is bound. A value the app sets still shows on a refused row."},{"name":"highlighted","type":"any","required":false,"default":"undefined","description":"Used by `v-model:highlighted`: the one row the UI is about (\"the row\nwhose details are open\"), a single item value or `null`. Opt-in: bound,\na row click highlights; unbound, it only emits `click:row`. The row gets\n`aria-current=\"true\"` and a shipped tint."},{"name":"id","type":"string | undefined","required":false,"description":"Stable id for this table's width context. When omitted a unique id is\ngenerated. Nested tables use the nearest ancestor id to inherit widths."},{"name":"inheritColumnWidths","type":"string | boolean | undefined","required":false,"description":"A nested table snaps its columns to an ancestor table's tracks: `true` =\nthe nearest ancestor, a table `id` = that ancestor (when an intermediate\ntable has a different column count). Off by default: a nested table sizes\nitself."},{"name":"interactiveWhileLoading","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the header and rows interactive while loading (by default they are\n`inert`: a refetch is about to replace them). For background refreshes\nthat must not interrupt an open editor."},{"name":"items","type":"Item[] | ((context: BbTableItemsContext) => Item[] | Promise<Item[]>)","required":true,"default":"[]","description":"Rows to render: an array, or a provider called with a\n`BbTableItemsContext` (`reason`, `modelValue`, `signal`), sync or async.\nA provider fails by THROWING, never by returning `[]`: the rows clear and\n`#empty` gets the `error`. Return the page as it is."},{"name":"itemValue","type":"ItemAccessor<Item> | undefined","required":false,"description":"Defines a path that returns a property of the row to use as its value (the\nselection, `expandedItems` and row keys compare by it) or a function that\nreturns any value."},{"name":"keyboardNavigation","type":"boolean | undefined","required":false,"default":"false","description":"Opt-in keyboard navigation: the table becomes an ARIA `grid` (a\n`treegrid` with an `#expand` slot) with ONE tab stop and a roving focus\nover its cells; controls inside cells leave the tab order (Enter/F2 go\nin). Ignored with a `#tbody` slot."},{"name":"legend","type":"string | undefined","required":false,"description":"The `<legend>` of a `selectable` table (it renders as a `<fieldset>`):\nthe selection's accessible name. Falls back to `caption`, then to a\nlocalized default."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles.\n\nWith no rows yet this renders skeletons; over existing rows the rows stay\non screen (dimmed, with an indeterminate bar) rather than being replaced —\na refetch should not blank a table the user is reading."},{"name":"loadingText","type":"string | undefined","required":false,"default":"the localized `common.loadingText` (\"Loading...\")","description":"Screen-reader announcement for the loading row's `aria-live` status.\nVisually hidden — the skeleton (or the `#loading` slot) is the visible\nsignal."},{"name":"max","type":"number | undefined","required":false,"default":"Infinity","description":"Maximum number of items that can be selected."},{"name":"modelValue","type":"any","required":false,"default":"[]","description":"Used by v-model. Can be any serializable type."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"true","description":"Allows the selection of multiple items."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"order","type":"string[] | undefined","required":false,"default":"[]","description":"Used by `v-model:order`: the column keys in render order. Declared\ncolumns it omits follow in declaration order; unknown keys stay in place.\nA `reorderable` move writes it back complete. Works unbound, like `sort`;\nnever holds `select` / `actions`."},{"name":"page","type":"string | number | undefined","required":false,"description":"Current page (from 1), for the rows' `aria-rowindex` and a `BbPagination`\npaired through `id`. Doesn't slice `items`: pass the current page's rows.\nNumeric strings are coerced."},{"name":"perPage","type":"string | number | undefined","required":false,"description":"Rows per page, for `aria-rowindex` and a paired `BbPagination`. Doesn't\nslice `items`. Unset, an array `items` infers it from its length; an\nexplicit value wins. Numeric strings are coerced."},{"name":"pt","type":"PtItemMap<BbTablePtPart, \"row\", BbTablePtState, Item> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:body","type":"PtValue | undefined","required":false},{"name":"pt:body:disabled","type":"PtValue | undefined","required":false},{"name":"pt:body:empty","type":"PtValue | undefined","required":false},{"name":"pt:body:expanded","type":"PtValue | undefined","required":false},{"name":"pt:body:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:body:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:body:loading","type":"PtValue | undefined","required":false},{"name":"pt:body:selected","type":"PtValue | undefined","required":false},{"name":"pt:body:sorted","type":"PtValue | undefined","required":false},{"name":"pt:body:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:caption","type":"PtValue | undefined","required":false},{"name":"pt:caption:disabled","type":"PtValue | undefined","required":false},{"name":"pt:caption:empty","type":"PtValue | undefined","required":false},{"name":"pt:caption:expanded","type":"PtValue | undefined","required":false},{"name":"pt:caption:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:caption:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:caption:loading","type":"PtValue | undefined","required":false},{"name":"pt:caption:selected","type":"PtValue | undefined","required":false},{"name":"pt:caption:sorted","type":"PtValue | undefined","required":false},{"name":"pt:caption:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:cell","type":"PtValue | undefined","required":false},{"name":"pt:cell:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cell:empty","type":"PtValue | undefined","required":false},{"name":"pt:cell:expanded","type":"PtValue | undefined","required":false},{"name":"pt:cell:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:cell:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:cell:loading","type":"PtValue | undefined","required":false},{"name":"pt:cell:selected","type":"PtValue | undefined","required":false},{"name":"pt:cell:sorted","type":"PtValue | undefined","required":false},{"name":"pt:cell:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:empty","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:expanded","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:loading","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:selected","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:sorted","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:disabled","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:empty","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:expanded","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:loading","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:selected","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:sorted","type":"PtValue | undefined","required":false},{"name":"pt:dragHandle:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:empty","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:expanded","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:loading","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:sorted","type":"PtValue | undefined","required":false},{"name":"pt:dragIcon:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:firstRow","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:empty","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:expanded","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:loading","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:selected","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:sorted","type":"PtValue | undefined","required":false},{"name":"pt:firstRow:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:foot","type":"PtValue | undefined","required":false},{"name":"pt:foot:disabled","type":"PtValue | undefined","required":false},{"name":"pt:foot:empty","type":"PtValue | undefined","required":false},{"name":"pt:foot:expanded","type":"PtValue | undefined","required":false},{"name":"pt:foot:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:foot:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:foot:loading","type":"PtValue | undefined","required":false},{"name":"pt:foot:selected","type":"PtValue | undefined","required":false},{"name":"pt:foot:sorted","type":"PtValue | undefined","required":false},{"name":"pt:foot:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:head","type":"PtValue | undefined","required":false},{"name":"pt:head:disabled","type":"PtValue | undefined","required":false},{"name":"pt:head:empty","type":"PtValue | undefined","required":false},{"name":"pt:head:expanded","type":"PtValue | undefined","required":false},{"name":"pt:head:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:head:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:head:loading","type":"PtValue | undefined","required":false},{"name":"pt:head:selected","type":"PtValue | undefined","required":false},{"name":"pt:head:sorted","type":"PtValue | undefined","required":false},{"name":"pt:head:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:headerRow","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:empty","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:expanded","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:loading","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:selected","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:sorted","type":"PtValue | undefined","required":false},{"name":"pt:headerRow:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:lastRow","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:disabled","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:empty","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:expanded","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:loading","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:selected","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:sorted","type":"PtValue | undefined","required":false},{"name":"pt:lastRow:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:empty","type":"PtValue | undefined","required":false},{"name":"pt:root:expanded","type":"PtValue | undefined","required":false},{"name":"pt:root:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:root:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:root:sorted","type":"PtValue | undefined","required":false},{"name":"pt:root:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:row","type":"PtValue | ((ctx: PtItemCtx<Item, BbTablePtState>) => PtItemResult) | undefined","required":false},{"name":"pt:row:disabled","type":"PtValue | undefined","required":false},{"name":"pt:row:empty","type":"PtValue | undefined","required":false},{"name":"pt:row:expanded","type":"PtValue | undefined","required":false},{"name":"pt:row:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:row:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:row:loading","type":"PtValue | undefined","required":false},{"name":"pt:row:selected","type":"PtValue | undefined","required":false},{"name":"pt:row:sorted","type":"PtValue | undefined","required":false},{"name":"pt:row:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:empty","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:expanded","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:loading","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:sorted","type":"PtValue | undefined","required":false},{"name":"pt:selectIcon:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:empty","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:expanded","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:loading","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:selected","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:sorted","type":"PtValue | undefined","required":false},{"name":"pt:sortIcon:sortedDesc","type":"PtValue | undefined","required":false},{"name":"pt:table","type":"PtValue | undefined","required":false},{"name":"pt:table:disabled","type":"PtValue | undefined","required":false},{"name":"pt:table:empty","type":"PtValue | undefined","required":false},{"name":"pt:table:expanded","type":"PtValue | undefined","required":false},{"name":"pt:table:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:table:indeterminate","type":"PtValue | undefined","required":false},{"name":"pt:table:loading","type":"PtValue | undefined","required":false},{"name":"pt:table:selected","type":"PtValue | undefined","required":false},{"name":"pt:table:sorted","type":"PtValue | undefined","required":false},{"name":"pt:table:sortedDesc","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"reorderable","type":"boolean | undefined","required":false,"default":"false","description":"Lets the user reorder the data columns: drag a header, or Shift+←/→ on a\nfocused header. Every move writes `v-model:order`; a column panel that\nonly writes `order` does not need it. `select` / `actions` and a custom\n`#thead` never move."},{"name":"reorderableRows","type":"boolean | undefined","required":false,"default":"false","description":"Adds a drag handle at the start of each row: the user drags a row, or lifts it\nwith Space / Enter and the arrow keys, and `reorder:rows` reports\n`{ item, from, to }`. The table never reorders `items`: splice it in the\nhandler."},{"name":"resizable","type":"boolean | undefined","required":false,"default":"false","description":"Lets the user resize the data columns (drag a header's trailing edge, or\nAlt+←/→; double-click resets). Each commit fires `resize:column(key,\nwidth)` once: write the width back into the column definition to keep it.\nIgnored when inheriting widths."},{"name":"rowClass","type":"BbTableRowClasses<Item> | undefined","required":false,"description":"Defines the classes to be passed to each data row. Can also be a\nfunction of the row's item for dynamic values."},{"name":"selectable","type":"boolean | ((item: Item) => boolean) | undefined","required":false,"description":"Defines whether the table is selectable.\nCan be a global boolean that affects all rows or a function\nthat accepts an item and returns a boolean that only affects that item."},{"name":"selectAll","type":"boolean | undefined","required":false,"default":"false","description":"Defines whether the \"Select all\" checkbox is checked."},{"name":"selectAllLabel","type":"string | undefined","required":false,"description":"Text of the label used by the \"Select all\" boolean."},{"name":"selectText","type":"string | undefined","required":false,"description":"Text of the header used for the radio inputs when the table is not `multiple`."},{"name":"sort","type":"BbTableSortEntry[] | undefined","required":false,"default":"[]","description":"Used by `v-model:sort`: `[columnKey, direction]` entries in priority\norder, written by the `sortable` headers and shown by them. Doesn't sort\n`items`: apply it to your data or your server query."},{"name":"tdClass","type":"ColumnClasses<Item> | undefined","required":false,"description":"Defines the classes to be passed to every data cell. Can also be a function for dynamic values."},{"name":"thClass","type":"Classes | undefined","required":false,"description":"Defines the classes to be passed to every header cell."},{"name":"totalItems","type":"string | number | undefined","required":false,"description":"Total row count, for `aria-rowcount` and a paired `BbPagination`'s page\ncount. Unset, an array `items` infers it from its length; an explicit\nvalue wins. Numeric strings are coerced."},{"name":"totalPages","type":"string | number | undefined","required":false,"description":"Seeds a paired `BbPagination`'s page count when the server reports pages,\nnot rows; the table renders nothing from it. A known total (`totalItems`)\nalways wins. Numeric strings are coerced."},{"name":"unselectedItems","type":"any[] | undefined","required":false,"default":"[]","description":"Items that are not selected."},{"name":"virtual","type":"boolean | undefined","required":false,"default":"false","description":"Windows the body: only the rows near the scrollport are mounted. Bound\nthe table's height to make it the scroller; column widths are measured\nonce, from the first rows. Ignored when inheriting widths and under a\n`#tbody` slot."}],"events":[{"name":"click:row","signature":"(event: MouseEvent, item: any): void","description":"A body row was clicked, or activated with Enter/Space under\n`keyboardNavigation`. Carries the DOM `MouseEvent` and the raw record."},{"name":"contextmenu:row","signature":"(event: MouseEvent, item: any): void","description":"A body row was right-clicked. Carries the DOM `MouseEvent` and the raw record."},{"name":"dblclick:row","signature":"(event: MouseEvent, item: any): void","description":"A body row was double-clicked. Carries the DOM `MouseEvent` and the raw record."},{"name":"hide:column","signature":"(key: string): void","description":"A column was hidden through a header slot's `hideColumn()`. Fired once;\nwrite `hidden: true` into the column definition to persist it."},{"name":"item:selected","signature":"(value: any): void","description":"The user selected one row. Carries the row's value (read through\n`itemValue`, the same value the selection v-model holds)."},{"name":"item:unselected","signature":"(value: any): void","description":"The user unselected one row. Carries the row's value, like `item:selected`."},{"name":"reorder:rows","signature":"(payload: { item: any; from: number; to: number; }): void","description":"A row was moved (`reorderable-rows`): `item` is your object, `from` /\n`to` index the `items` the table holds. Splice `items` in the handler; a\ndrop in place emits nothing."},{"name":"resize:column","signature":"(key: string, width: number | null): void","description":"A column was resized by the user (`resizable`): the new width in\npx, or `null` when the handle was double-clicked to reset the column to\nits declared width."},{"name":"update:expandedItems","signature":"(value: any[]): void","description":"Emitted with the new value whenever `v-model:expandedItems` changes."},{"name":"update:highlighted","signature":"(value: any): void","description":"Emitted with the new value whenever `v-model:highlighted` changes."},{"name":"update:modelValue","signature":"(value: any): void","description":"Emitted with the new value whenever `v-model` changes."},{"name":"update:order","signature":"(value: string[]): void","description":"Emitted with the new value whenever `v-model:order` changes."},{"name":"update:selectAll","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model:selectAll` changes."},{"name":"update:sort","signature":"(value: BbTableSortEntry[]): void","description":"Emitted with the new value whenever `v-model:sort` changes."},{"name":"update:unselectedItems","signature":"(value: any[]): void","description":"Emitted with the new value whenever `v-model:unselectedItems` changes."}],"slots":[{"name":"actions","type":"{ expanded?: boolean | undefined; expandProps?: ExpandControllerProps | undefined; toggleExpanded?: (() => void) | undefined; highlighted?: boolean | undefined; toggleHighlighted?: (() => void) | undefined; selected?: boolean | undefined; toggleSelected?: (() => void) | undefined; item: Item; value: any; }","description":"Content rendered in the actions cell for each row. Providing this slot\nis what CREATES the actions column (there is no prop): the header cell\n(labelled by `actions-text`, replaceable through `#actions:header`) and\none cell per row appear with it, and go away with it. Pin it with\n`fixed-actions`."},{"name":"actions:header","type":"{ text: string; }","description":"Replaces the default actions header cell content."},{"name":"empty","type":"{ error: unknown; }","description":"Content shown when there are no rows and nothing is loading, inside the\ntable's own full-width cell: pass content, never a row. `error` is what\nthe latest failed load threw (`null` when none)."},{"name":"expand","type":"{ expanded: boolean; expandProps?: ExpandControllerProps | undefined; toggleExpanded: () => void; highlighted?: boolean | undefined; toggleHighlighted?: (() => void) | undefined; selected?: boolean | undefined; toggleSelected?: (() => void) | undefined; item: Item; value: any; }","description":"Full-width expandable content row rendered below each main row when expanded."},{"name":"header:append","type":"BbTableHeaderAffixSlotProps<Item>","fields":["classes?: Classes","columnKey: string","items?: Item[]","label?: string","sortable?: boolean","sortOrder?: \"asc\" | \"desc\" | null","toggleSort?: (() => void)","hideColumn?: (() => void)"],"description":"Content rendered after every data column's header cell content — the\nlabel + sort control, or the column's own `<key>:header` replacement.\nA column's `<key>:header:append` slot wins over this one for that\ncolumn; they never stack. Branch on `columnKey` for per-column output."},{"name":"header:prepend","type":"BbTableHeaderAffixSlotProps<Item>","fields":["classes?: Classes","columnKey: string","items?: Item[]","label?: string","sortable?: boolean","sortOrder?: \"asc\" | \"desc\" | null","toggleSort?: (() => void)","hideColumn?: (() => void)"],"description":"Content rendered before every data column's header cell content — the\nlabel + sort control, or the column's own `<key>:header` replacement.\nA column's `<key>:header:prepend` slot wins over this one for that\ncolumn; they never stack. Branch on `columnKey` for per-column output."},{"name":"loading","type":"{ items: Item[]; }","description":"Content shown while table rows are loading (replaces the skeleton rows)."},{"name":"select","type":"{ item: Item; value: any; checked: boolean; disabled: boolean; inputName: string; readonly: boolean; toggleSelected?: (() => void) | undefined; }","description":"Replaces the default checkbox/radio in the selection cell for each row."},{"name":"select:header","type":"{ multiple: boolean; selectAll: boolean; text: string; }","description":"Replaces the default selection header cell content (checkbox or radio label)."},{"name":"tbody","type":"object","description":"Replaces the content of the body row group (`.bb-table__body`). Use when\nyou need full control over the body markup. Provide role-complete rows —\n`<div role=\"row\">` holding one `<div role=\"cell\">` per column — never a\n`<tr>`/`<td>`. A full-width cell spans with `grid-column: 1 / -1`."},{"name":"tfoot","type":"{ columnCount: number; }","description":"Fills the footer row group (`.bb-table__foot`). Use when you need a\nfooter. Provide role-complete rows — `<div role=\"row\">` holding\n`<div role=\"cell\">` elements — never a `<tr>`/`<td>`."},{"name":"thead","type":"object","description":"Replaces the header row group's content (`.bb-table__head`). The table is\na CSS grid: provide `<div role=\"row\">` rows of `<div\nrole=\"columnheader\">` cells, never `<tr>` / `<th>`."},{"name":"<key>","type":"object","description":"One column's body cell in every row, by the column `key` through `slotKey`. Scope: `{ item, value, content, selected, expanded, highlighted, classes, sortOrder, toggleSelected, toggleExpanded, toggleHighlighted, expandProps }`.","dynamic":true},{"name":"<key>:header","type":"object","description":"One column's header content, replacing its label and the built-in sort button. Scope: `{ label, items, sortable, sortOrder, toggleSort, hideColumn, classes }`.","dynamic":true},{"name":"<key>:header:prepend","type":"BbTableHeaderAffixSlotProps<Item>","description":"Content before one column's header, keeping the sort button; beats `header:prepend` (they never stack).","dynamic":true},{"name":"<key>:header:append","type":"BbTableHeaderAffixSlotProps<Item>","description":"Content after one column's header, keeping the sort button; beats `header:append` (they never stack).","dynamic":true},{"name":"<key>:first","type":"BbTableEdgeCellSlotProps<Item>","description":"One column's cell in a row before the data rows; any such slot creates the row, aligned with the columns. Only over rows.","dynamic":true},{"name":"<key>:last","type":"BbTableEdgeCellSlotProps<Item>","description":"One column's cell in a row after the data rows (a totals row); any such slot creates that row, aligned like `<key>:first`.","dynamic":true}],"exposed":[],"models":[{"name":"expandedItems","type":"any[] | undefined"},{"name":"highlighted","type":"any"},{"name":"modelValue","type":"any"},{"name":"order","type":"string[] | undefined"},{"name":"selectAll","type":"boolean | undefined"},{"name":"sort","type":"BbTableSortEntry[] | undefined"},{"name":"unselectedItems","type":"any[] | undefined"}],"cssProps":[{"name":"--bg","value":"var(--bb-panel)","selector":".bb-table","description":"The table's surface colour. Cells are transparent at rest so the row can tint them, but anything that sticks over scrolled content — the stuck head band and pinned (`column.fixed`) cells — must be opaque, and paints this. Set it on the table (`.my-table { --bg: … }`) when the table sits on a surface that is not `--bb-panel`; a nested table re-declares its own."},{"name":"--px","value":"12px","selector":".bb-table"},{"name":"--cell-h","value":"36px","selector":".bb-table"},{"name":"--py","value":"6px","selector":".bb-table"},{"name":"--actions-spacing","value":"8px","selector":".bb-table"},{"name":"--offset-start","value":"0px","selector":".bb-table","description":"Raw structural edge offset measured by the component (the parent's select/actions track width). Default 0 keeps every calc at its base."},{"name":"--offset-end","value":"0px","selector":".bb-table"},{"name":"--ig","value":"0px","selector":".bb-table","description":"Nested indent locals (see `indentAnchor` in BbTable.vue): the step lands on ONE cell's leading padding. Reset on every table so a parent's step never inherits into a child's cells; the modifier picks the anchor."},{"name":"--is","value":"0px","selector":".bb-table"},{"name":"--ic","value":"0px","selector":".bb-table"},{"name":"--depth","value":"0","selector":".bb-table","description":"Nesting depth (0 at the root) and the parent-region floors of the own structural tracks, both set inline by the component on nested tables; declared here so a parent's values never inherit into a child."},{"name":"--min-g","value":"0px","selector":".bb-table"},{"name":"--min-s","value":"0px","selector":".bb-table"},{"name":"--min-a","value":"0px","selector":".bb-table"},{"name":"--offset-internal-start","value":"var(--offset-start)","selector":".bb-table","description":"Routing of that offset. By default it is \"internal\": added to the first/last cell padding and folded into the first/last column width. Swap internal↔external (set internal to 0 and external to the raw offset) to pad the whole table instead of the edge cells."},{"name":"--offset-internal-end","value":"var(--offset-end)","selector":".bb-table"},{"name":"--offset-external-start","value":"0px","selector":".bb-table"},{"name":"--offset-external-end","value":"0px","selector":".bb-table"},{"name":"--pin-l","value":"0px","selector":".bb-table","description":"Re-declared on every table: a nested table must not inherit its parent's fade or pinned edge."},{"name":"--pin-r","value":"0px","selector":".bb-table"},{"name":"--fade-l","value":"0px","selector":".bb-table"},{"name":"--fade-r","value":"0px","selector":".bb-table"},{"name":"--fade-a-l","value":"1","selector":".bb-table"},{"name":"--fade-a-r","value":"1","selector":".bb-table"},{"name":"--cue-l","value":"0px","selector":".bb-table"},{"name":"--cue-r","value":"0px","selector":".bb-table"},{"name":"--cue-w","value":"8px","selector":".bb-table"},{"name":"--cue","value":"rgb(0 0 0 / 0.1)","selector":".bb-table"},{"name":"--row-bg","value":"var(--bb-panel)","selector":".bb-table__row--lifted"}],"pt":{"parts":[{"name":"root","description":"The table's container."},{"name":"caption","description":"The visible caption (`caption` with `displayCaption`)."},{"name":"table","description":"The grid root: `role=\"table\"`, or `role=\"grid\"` with `keyboardNavigation` (`role=\"treegrid\"` with an `#expand` slot too)."},{"name":"head","description":"The header row group."},{"name":"headerRow","description":"The header row."},{"name":"cellColumnHeader","description":"Every column header cell (`role=\"columnheader\"`), the select and actions headers included — a broadcast resolved per header. Not a `<th>`: the grid is `div`s with ARIA roles."},{"name":"sortIcon","description":"A sortable column's sort arrow, resolved per header."},{"name":"body","description":"The body row group."},{"name":"row","description":"Every DATA row — a broadcast resolved per row. Expand rows and the skeleton are not parts. Also takes a per-item function, called with the row's raw item, once per rendered row: keep it cheap."},{"name":"cell","description":"Every data cell, the select and actions cells included — a broadcast resolved with its row's states (`role=\"cell\"`, `gridcell` under `keyboardNavigation`) — and the cells of the `firstRow` / `lastRow`, with no row state. Takes no function: use `tdClass` for a per-cell hook."},{"name":"firstRow","description":"The row of `#<key>:first` cells, before the data rows."},{"name":"lastRow","description":"The row of `#<key>:last` cells, after the data rows (a totals row: `pt:lastRow=\"font-semibold\"`)."},{"name":"selectIcon","description":"The selection glyph: each row's checkbox (radio with single selection) and the select-all checkbox — resolved per node. Not rendered when the `select` / `select:header` slots replace them."},{"name":"dragIcon","description":"The move glyph on the chip that follows a column drag (`reorderable`)."},{"name":"dragHandle","description":"Each row's drag handle button (`reorderable-rows`), resolved with its row's states. A class list or an object; no per-row function."},{"name":"foot","description":"The footer row group (the `tfoot` slot's container)."}],"states":[{"name":"empty","description":"Component-wide: there are no rows (`bb-table--empty`)."},{"name":"sorted","description":"Per node, on `cellColumnHeader` and `sortIcon`: the column is sorted, either direction (`bb-table__cell-column-header--sorted`)."},{"name":"sortedDesc","description":"Per node, on `cellColumnHeader` and `sortIcon`: sorted descending (`bb-table__cell-column-header--sorted-desc`). Ascending is `sorted` alone."},{"name":"selected","description":"Per node, on `row`, its cells and its `selectIcon`: a checked row; on the select-all glyph, every row is selected."},{"name":"indeterminate","description":"Per node, on the select-all `selectIcon`: some rows are selected, not all."},{"name":"disabled","description":"Per node, on `row`, its cells and its `selectIcon`: the row cannot be SELECTED — `selectable` rejects it, or the table is `disabled` (`bb-table__row--disabled`). It still clicks, highlights and expands. Never on a table without selection. The select-all glyph takes it from the table's `disabled`."},{"name":"expanded","description":"Per node, on `row` and its cells: the row's expand row is open (`bb-table__row--expanded`)."},{"name":"highlighted","description":"Per node, on `row` and its cells: the highlighted row."},{"name":"loading","description":"Component-wide: the table is `loading`."}]},"tree":{"bindings":[{"part":"caption","target":"div.bb-table__caption"},{"part":"dragIcon","target":"svg.bb-table__drag-icon"},{"part":"table","target":"div"},{"part":"head","target":"div.bb-table__head"},{"part":"headerRow","target":"div.bb-table__header-row"},{"part":"cellColumnHeader","target":"div.bb-table__cell-column-header"},{"part":"selectIcon","target":"BbBaseCheckboxIcon"},{"part":"sortIcon","target":"svg.bb-table__sort-icon"},{"part":"body","target":"div.bb-table__body"},{"part":"foot","target":"div.bb-table__foot"}],"nodes":[{"name":"BbBaseCheckboxIcon","kind":"public","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-base-checkbox-icon","bb-base-checkbox-icon--errors","bb-base-checkbox-icon--warnings","bb-base-checkbox-icon--checked","bb-base-checkbox-icon--indeterminate"]},{"name":"--check-color","documented":false,"readBy":["bb-base-checkbox-icon__check","bb-base-checkbox-icon__indeterminate"]},{"name":"--size","documented":false,"readBy":["bb-base-checkbox-icon"]},{"name":"--r","documented":true,"readBy":["bb-base-checkbox-icon"]},{"name":"--ring-color","documented":true,"readBy":["bb-base-checkbox-icon","bb-base-checkbox-icon--focus-visible"]},{"name":"--elev","documented":true,"readBy":["bb-base-checkbox-icon","bb-base-checkbox-icon--focus-visible"]},{"name":"--bg","documented":true,"readBy":["bb-base-checkbox-icon"]},{"name":"--border-color","documented":false,"readBy":["bb-base-checkbox-icon"]}]},{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]}]},"css":{"classes":{"bb-sr-only":[""],"bb-table":["","--align-*","--compact","--empty","--fixed","--fixed-header","--indent-*","--inherit-widths","--loading","--overflow-left","--overflow-right","--pinned-left","--pinned-right","--reorderable","--resizable","--row-dragging","--row-grabbing","--rows-reorderable","--selectable","--virtual","--virtual-flat","__body","__caption","__cell","__cell--*","__cell--actions","__cell--clip","__cell--edge-end","__cell--edge-start","__cell--fluid","__cell--nowrap","__cell--resized","__cell--row-drag","__cell--select","__cell-column-header","__cell-column-header--*","__cell-column-header--actions","__cell-column-header--clip","__cell-column-header--dragging","__cell-column-header--edge-end","__cell-column-header--edge-start","__cell-column-header--floored","__cell-column-header--locked","__cell-column-header--resizing","__cell-column-header--row-drag","__cell-column-header--select","__cell-column-header--sortable","__cell-column-header--sorted","__cell-column-header--sorted-desc","__drag-icon","__edge-row","__edge-row--*","__edge-row--first","__edge-row--fixed","__edge-row--last","__foot","__head","__head--dragging","__head--resizing","__header-row","__reorder-status","__row","__row--disabled","__row--drag-source","__row--expanded","__row--highlightable","__row--highlighted","__row--lifted","__row-handle","__row-handle-icon","__row-reorder-status","__select-icon","__sort-icon","__table"],"bb-table-check":["","__label","__label--disabled","__label-text"],"bb-table-column-drag":[""],"bb-table-column-ghost":[""],"bb-table-empty":["__cell","__row","__text"],"bb-table-expand":["__cell","__row","__row--highlighted"],"bb-table-header":["__content","__resizer"],"bb-table-loading":["__text"],"bb-table-placeholder":["__row","__row--pending"],"bb-table-radio":["","__label","__label--disabled","__label-text"],"bb-table-resizing":[""],"bb-table-row-drag":[""],"bb-table-row-ghost":[""],"bb-table-skeleton":["__avatar","__avatar-text","__badge","__cell","__cell--*","__cell--actions","__cell--row-drag","__cell--select","__cell-content","__image","__line","__placeholder","__row"],"bb-table-sort":["","--asc","--desc"],"bb-table-spacer":["__row"]},"locals":["--actions-spacing","--arrow-preview","--bg","--cell-h","--color-gray-200","--cue","--cue-l","--cue-r","--cue-w","--depth","--drop","--fade-a-l","--fade-a-r","--fade-l","--fade-r","--floor","--ic","--ig","--indent","--is","--line","--min-a","--min-g","--min-s","--offset-end","--offset-external-end","--offset-external-start","--offset-internal-end","--offset-internal-start","--offset-start","--pin-l","--pin-r","--placeholder-bars","--px","--py","--row-bg","--row-h","--stuck-head-h","--stuck-outer","--stuck-top","--ts","--virtual-row-tracks"]},"removed":[{"name":"allowSelectAll","new":"disableSelectAll","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"invert"}},{"name":"enabledWhileLoading","new":"interactiveWhileLoading","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"actions","new":null,"since":"3.0.0-beta.21","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"remove"}},{"name":"fixedColumns","new":null,"since":"3.0.0-beta.21","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"manual"}},{"name":"noDataText","new":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"no-data","new":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:select","new":"select:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:actions","new":"actions:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:<x>:prepend","new":"<x>:header:prepend","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:<x>:append","new":"<x>:header:append","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:<x>","new":"<x>:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"allowSelectAll","to":"disableSelectAll","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"invert"}},{"from":"enabledWhileLoading","to":"interactiveWhileLoading","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"noDataText","to":"emptyText","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"no-data","to":"empty","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"header:select","to":"select:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"header:actions","to":"actions:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"header:<x>:prepend","to":"<x>:header:prepend","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"header:<x>:append","to":"<x>:header:append","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}},{"from":"header:<x>","to":"<x>:header","surface":"slot","migration":"ai/guides/migration/components/bb-table.md","fix":{"kind":"rename"}}]},
|
|
520
520
|
{"name":"BbTabs","group":"Navigation","description":"Switches between views of one page from a row of tabs. For the tabs and their panels in different places of the layout, use BbTabsRoot with BbTabsList and BbTabsPanels.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTabs.md","source":"ai/source/BbTabs.md","props":[{"name":"block","type":"boolean | undefined","required":false,"default":"false","description":"Displays the component as full width."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Adds a CSS class that applies a compact style to the component."},{"name":"direction","type":"\"horizontal\" | \"vertical\" | undefined","required":false,"default":"\"horizontal\"","description":"Direction of the tabs component."},{"name":"disableAnimateX","type":"boolean | undefined","required":false,"default":"false","description":"Disables the horizontal slide transition between tab panels\n(enabled by default)."},{"name":"disableAnimateY","type":"boolean | undefined","required":false,"default":"false","description":"Disables the smooth height animation when switching between tab\npanels (enabled by default)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component"},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders every tab's panel at mount and keeps it mounted, hidden while\ninactive, instead of only the active one. One tab alone: its item's\n`eager`."},{"name":"headers","type":"Record<string, string> | undefined","required":false,"description":"Additional HTTP headers forwarded to Inertia when navigation is triggered.\nOnly meaningful in an Inertia context."},{"name":"id","type":"string | undefined","required":false,"description":"The root's `id`, and the key `useBbTabsContext(id)` pairs by. Generated\nwhen omitted."},{"name":"items","type":"BbTabsItem<K>[]","required":true,"description":"Array of items that define the tabs in the component."},{"name":"manualActivation","type":"boolean | undefined","required":false,"default":"`undefined` (on when `server` is set on the strip or an item)","description":"Arrow keys (and Home / End) only move focus; Enter or Space opens the\ntab (APG manual activation, Radix `activationMode=\"manual\"`). Unset:\non when the strip or an item has `server` (else every arrow press is\na visit), off elsewhere; `href` alone does not turn it on."},{"name":"modelValue","type":"K | null | undefined","required":false,"description":"The active tab's `value`. Used by v-model."},{"name":"navigation","type":"boolean | undefined","required":false,"default":"false","description":"Synchronizes the current tab with the URL query parameter.\n\nPair it with `replace` unless a tab is genuinely a separate destination —\nsee the `replace` prop."},{"name":"onBefore","type":"(() => boolean | void) | undefined","required":false,"description":"Inertia lifecycle hook — fired just before the request is sent.\nReturn `false` to cancel the visit."},{"name":"onCancel","type":"(() => void) | undefined","required":false,"description":"Inertia lifecycle hook — fired when the request is cancelled."},{"name":"onError","type":"((errors: Record<string, string>) => void) | undefined","required":false,"description":"Inertia lifecycle hook — fired when the server returns validation errors."},{"name":"onFinish","type":"(() => void) | undefined","required":false,"description":"Inertia lifecycle hook — fired after the visit finishes (success or error)."},{"name":"only","type":"string[] | undefined","required":false,"description":"Limits which server-side props are refreshed during a partial Inertia reload.\nOnly meaningful in an Inertia context."},{"name":"onProgress","type":"((progress: { percentage: number | undefined; }) => void) | undefined","required":false,"description":"Inertia lifecycle hook — fired when upload/download progress is available."},{"name":"onStart","type":"(() => void) | undefined","required":false,"description":"Inertia lifecycle hook — fired when the request starts."},{"name":"onSuccess","type":"(() => void) | undefined","required":false,"description":"Inertia lifecycle hook — fired when the visit completes successfully."},{"name":"preserveScroll","type":"boolean | ((props: Record<string, unknown>) => boolean) | undefined","required":false,"description":"Controls whether Inertia preserves the scroll position after navigation.\nOnly meaningful in an Inertia context."},{"name":"preserveState","type":"boolean | ((props: Record<string, unknown>) => boolean) | null | undefined","required":false,"description":"Controls whether Inertia preserves the current component state after navigation.\nOnly meaningful in an Inertia context."},{"name":"pt","type":"PtItemMap<BbTabsPtPart, \"item\", BbTabsPtState, BbTabsItem<K>> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:indicator","type":"PtValue | undefined","required":false},{"name":"pt:indicator:active","type":"PtValue | undefined","required":false},{"name":"pt:indicator:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | ((ctx: PtItemCtx<BbTabsItem<K>, BbTabsPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:item:active","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:active","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:active","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panels","type":"PtValue | undefined","required":false},{"name":"pt:panels:active","type":"PtValue | undefined","required":false},{"name":"pt:panels:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:active","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:wrapper","type":"PtValue | undefined","required":false},{"name":"pt:wrapper:active","type":"PtValue | undefined","required":false},{"name":"pt:wrapper:disabled","type":"PtValue | undefined","required":false},{"name":"queryKey","type":"string | undefined","required":false,"default":"\"tab\"","description":"Defines the query key used for URL-based navigation."},{"name":"replace","type":"boolean | undefined","required":false,"default":"false","description":"Replaces the history entry instead of pushing one when the tab\nchanges. Recommended with `navigation`: the query keeps the tab while\nBack leaves the page. Leave it off when a tab is a destination of its\nown (a `server` visit)."},{"name":"server","type":"boolean | undefined","required":false,"default":"false","description":"When true and in an Inertia context, triggers a real server-side Inertia\nvisit instead of a client-only `history.pushState`."},{"name":"variant","type":"keyof TabsVariantRegistry | undefined","required":false,"default":"\"pill\"","values":["none","pill","line"],"description":"Look of the tab strip: `pill` (segmented, a sliding raised pill),\n`line` (a baseline with a sliding underline) or `none` (no chrome).\nEach is a preset of the strip's tokens; register more with the vite\nplugin's `tabsVariants` and style `.bb-tabs-list--<variant>`."}],"events":[{"name":"update:modelValue","signature":"(value: K): void","description":"Emitted when the selected tab changes. Used by `v-model`."}],"slots":[{"name":"label","type":"BbTabsSlotProps<K>","fields":["current: K | null","currentIndex: number","disabled: boolean","isFirst: boolean","isLast: boolean","selected: boolean","label: string","value: K","goTo: (target: \"first\" | \"previous\" | \"next\" | \"last\") => void"],"description":"Fallback slot used for all tab labels when no per-tab `<value>:label` slot is provided."},{"name":"wrapper:append","type":"BbTabsScrollSlotProps","fields":["isScrolling: boolean","canScrollLeft: boolean","canScrollRight: boolean","scroll: (direction: \"left\" | \"right\") => void"],"description":"Content rendered after the scrollable tab label list (e.g. a right scroll arrow)."},{"name":"wrapper:prepend","type":"BbTabsScrollSlotProps","fields":["isScrolling: boolean","canScrollLeft: boolean","canScrollRight: boolean","scroll: (direction: \"left\" | \"right\") => void"],"description":"Content rendered before the scrollable tab label list (e.g. a left scroll arrow)."},{"name":"<value>","type":"BbTabsSlotProps<K>","description":"One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).","dynamic":true},{"name":"<value>:label","type":"BbTabsSlotProps<K>","description":"One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.","dynamic":true}],"exposed":[],"models":[{"name":"modelValue","type":"K | null | undefined"}],"cssProps":[{"name":"--gap","value":"8px","selector":".bb-tabs"},{"name":"--list-bg","value":"color-mix(in oklab, var(--bb-text) 8%, transparent)","selector":".bb-tabs-list","description":"The strip behind the triggers"},{"name":"--list-border","value":"transparent","selector":".bb-tabs-list","description":"The strip's edge line: a baseline under the triggers (beside them when vertical), --bb-border-w thick, painted inside the strip. `pill` draws none; `line` sets it to --bb-border"},{"name":"--p","value":"3px","selector":".bb-tabs-list","description":"strip inner padding — the gutter the indicator sits in, and the scroll inset"},{"name":"--list-r","value":"var(--bb-radius)","selector":".bb-tabs-list","description":"strip corners"},{"name":"--list-h","value":"var(--bb-control-h)","selector":".bb-tabs-list","description":"strip min height"},{"name":"--fs","value":"var(--bb-fs)","selector":".bb-tabs-list","description":"trigger label size"},{"name":"--trigger-gap","value":"0px","selector":".bb-tabs-list","description":"space between triggers"},{"name":"--trigger-px","value":"10px","selector":".bb-tabs-list","description":"trigger side padding"},{"name":"--trigger-r","value":"calc(var(--list-r) - var(--p))","selector":".bb-tabs-list","description":"Trigger corners, concentric inside --list-r"},{"name":"--trigger-min-h","value":"calc(var(--list-h) - var(--p) * 2)","selector":".bb-tabs-list","description":"Trigger height inside the padded strip"},{"name":"--list-fg","value":"var(--bb-text-muted)","selector":".bb-tabs-list","description":"inactive trigger label"},{"name":"--hover-fg","value":"var(--bb-text)","selector":".bb-tabs-list","description":"hovered trigger label"},{"name":"--active-fg","value":"var(--bb-text)","selector":".bb-tabs-list","description":"active trigger label"},{"name":"--active-fw","value":"500","selector":".bb-tabs-list","description":"active trigger label weight (inactive labels are 500)"},{"name":"--indicator-bg","value":"var(--bb-panel)","selector":".bb-tabs-list","description":"the indicator's fill"},{"name":"--indicator-border","value":"color-mix(in oklab, var(--bb-text) 8%, transparent)","selector":".bb-tabs-list","description":"The indicator's edge"},{"name":"--indicator-r","value":"var(--trigger-r)","selector":".bb-tabs-list","description":"The indicator's corners — the pill's, concentric inside --list-r"},{"name":"--indicator-h","value":"initial","selector":".bb-tabs-list","description":"The indicator's thickness: its height, its width on a vertical strip. `initial` fills the whole trigger box — the pill; a bar is `2px`, on the trigger's bottom edge (side edge when vertical)"},{"name":"--indicator-inset","value":"0px","selector":".bb-tabs-list","description":"Inset of the indicator from the trigger box — shrinks the pill; a bar keeps its thickness, shortens by it at both ends and floats it above the edge"},{"name":"--elev","value":"var(--bb-elev)","selector":".bb-tabs-list","description":"The theme's resting lift, composed UNDER the indicator's own shadow. Two names because they are two decisions: `--elev` is what the language lifts every plate by, `--indicator-shadow` is this component's own."},{"name":"--indicator-shadow","value":"var(--bb-shadow-sm)","selector":".bb-tabs-list","description":"Indicator lift, painted on top of --elev — the theme's selected-segment lift, so it holds in dark (a literal black 6% vanished there)."},{"name":"--transition-duration","value":"var(--bb-transition-slow)","selector":".bb-tabs-panels"},{"name":"--gap","value":"30px","selector":".bb-tabs-panels"},{"name":"--max-w","value":"initial","selector":".bb-tabs-panels","description":"The strip-width knob must not percolate into panel content: nested tabs rendered inside a panel start with a clean slate"}],"pt":{"parts":[{"name":"root","description":"The tabs' outer element, around the strip and the panels."},{"name":"wrapper","description":"The strip's outer element: the `wrapper:prepend` slot, the triggers, the `wrapper:append` slot. `BbTabsList`'s root in a split layout."},{"name":"list","description":"The `role=\"tablist\"` row the triggers sit in — it scrolls when they overflow, and the indicator slides inside it."},{"name":"item","description":"One tab trigger — a broadcast resolved per tab with its own `active` / `disabled`. Also takes a per-item function, called with the tab's descriptor."},{"name":"indicator","description":"The marker sliding under the active trigger: the pill, or the bar of the `line` variant. Its position and size are measured."},{"name":"panels","description":"The element around the panels. `BbTabsPanels`'s root in a split layout."},{"name":"panel","description":"One tab panel — a broadcast; `panel:active` is the panel on show. Takes no function."}],"states":[{"name":"disabled","description":"On every part while the whole tabs is `disabled`; per node on `item`: a tab that is disabled."},{"name":"active","description":"Per node, on `item` and `panel`: the selected tab's trigger and its shown panel."}]},"tree":{"forwards":[{"to":"BbTabsList","mapping":"passthrough.forwardInstance(LIST_PARTS)"},{"to":"BbTabsPanels","mapping":"passthrough.forwardInstance(PANELS_PARTS)"}],"nodes":[{"name":"BbTabsList","kind":"public","vocabulary":"BbTabs","bindings":[{"part":"list","target":"ul.bb-tabs-list__list"},{"part":"indicator","target":"li.bb-tabs-list__indicator"},{"part":"item","target":"BbBaseButton"}],"children":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]}]},{"name":"BbTabsPanels","kind":"public","vocabulary":"BbTabs","bindings":[{"part":"panel","target":"section.bb-tabs__panel"}]}]},"css":{"classes":{"bb-tabs":["","--*","--block","--compact","--disabled","--vertical","__panel","__panel--shown","__trigger-content","__trigger-label"]},"locals":["--active-fg","--active-fw","--color-gray-200","--elev","--eq","--fs","--gap","--height","--hover-fg","--indicator-bg","--indicator-border","--indicator-h","--indicator-inset","--indicator-r","--indicator-shadow","--left","--list-bg","--list-border","--list-fg","--list-h","--list-r","--max-w","--p","--top","--transition-duration","--trigger-gap","--trigger-min-h","--trigger-px","--trigger-r","--width"]},"attrTargets":["div"],"removed":[{"name":"animateX","new":"disableAnimateX","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-tabs.md","silent":true,"fix":{"kind":"invert"}},{"name":"animateY","new":"disableAnimateY","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-tabs.md","silent":true,"fix":{"kind":"invert"}},{"name":"querykey","new":"queryKey","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-tabs.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:prepend","new":"wrapper:prepend","surface":"slot","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:append","new":"wrapper:append","surface":"slot","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","silent":true,"fix":{"kind":"rename"}},{"name":"label:<x>","new":"<x>:label","surface":"slot","migration":"ai/guides/migration/components/bb-tabs.md","silent":true,"fix":{"kind":"rename"}},{"name":"items[].key","new":"items[].value","surface":"item","hint":"a tab's identity: what `v-model` holds and its `#<value>` / `#<value>:label` slots; `check --fix` renames it","since":"3.0.0-beta.49","migration":"ai/guides/migration/components/bb-tabs.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"animateX","to":"disableAnimateX","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-tabs.md","fix":{"kind":"invert"}},{"from":"animateY","to":"disableAnimateY","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-tabs.md","fix":{"kind":"invert"}},{"from":"querykey","to":"queryKey","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-tabs.md","fix":{"kind":"rename"}},{"from":"header:prepend","to":"wrapper:prepend","surface":"slot","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","fix":{"kind":"rename"}},{"from":"header:append","to":"wrapper:append","surface":"slot","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","fix":{"kind":"rename"}},{"from":"label:<x>","to":"<x>:label","surface":"slot","migration":"ai/guides/migration/components/bb-tabs.md","fix":{"kind":"rename"}}]},
|
|
521
521
|
{"name":"BbTabsList","group":"Navigation","description":"The trigger strip of a split BbTabsRoot layout (renders the tab buttons only).","referenceOnly":false,"hasGuide":false,"contract":"ai/BbTabsList.md","source":"ai/source/BbTabsList.md","props":[{"name":"pt","type":"PtItemMap<BbTabsListPtPart, \"item\", BbTabsPtState, BbTabsItem<string>> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:indicator","type":"PtValue | undefined","required":false},{"name":"pt:indicator:active","type":"PtValue | undefined","required":false},{"name":"pt:indicator:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | ((ctx: PtItemCtx<BbTabsItem<string>, BbTabsPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:item:active","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:list","type":"PtValue | undefined","required":false},{"name":"pt:list:active","type":"PtValue | undefined","required":false},{"name":"pt:list:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:active","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"variant","type":"keyof TabsVariantRegistry | undefined","required":false,"values":["none","pill","line"],"description":"Look of this strip — the `variant` of the owning `BbTabs` / `BbTabsRoot`\nunless set here. See `BbTabsProps.variant` for the values."}],"events":[],"slots":[{"name":"label","type":"BbTabsSlotProps<string>","fields":["current: K | null","currentIndex: number","disabled: boolean","isFirst: boolean","isLast: boolean","selected: boolean","label: string","value: K","goTo: (target: \"first\" | \"previous\" | \"next\" | \"last\") => void"],"description":"Fallback slot used for all tab labels when no per-tab `<value>:label` slot is provided."},{"name":"wrapper:append","type":"BbTabsScrollSlotProps","fields":["isScrolling: boolean","canScrollLeft: boolean","canScrollRight: boolean","scroll: (direction: \"left\" | \"right\") => void"],"description":"Content rendered after the scrollable tab label list (e.g. a right scroll arrow)."},{"name":"wrapper:prepend","type":"BbTabsScrollSlotProps","fields":["isScrolling: boolean","canScrollLeft: boolean","canScrollRight: boolean","scroll: (direction: \"left\" | \"right\") => void"],"description":"Content rendered before the scrollable tab label list (e.g. a left scroll arrow)."},{"name":"<value>:label","type":"BbTabsSlotProps<K>","description":"One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.","dynamic":true}],"exposed":[],"models":[],"cssProps":[{"name":"--gap","value":"8px","selector":".bb-tabs"},{"name":"--list-bg","value":"color-mix(in oklab, var(--bb-text) 8%, transparent)","selector":".bb-tabs-list","description":"The strip behind the triggers"},{"name":"--list-border","value":"transparent","selector":".bb-tabs-list","description":"The strip's edge line: a baseline under the triggers (beside them when vertical), --bb-border-w thick, painted inside the strip. `pill` draws none; `line` sets it to --bb-border"},{"name":"--p","value":"3px","selector":".bb-tabs-list","description":"strip inner padding — the gutter the indicator sits in, and the scroll inset"},{"name":"--list-r","value":"var(--bb-radius)","selector":".bb-tabs-list","description":"strip corners"},{"name":"--list-h","value":"var(--bb-control-h)","selector":".bb-tabs-list","description":"strip min height"},{"name":"--fs","value":"var(--bb-fs)","selector":".bb-tabs-list","description":"trigger label size"},{"name":"--trigger-gap","value":"0px","selector":".bb-tabs-list","description":"space between triggers"},{"name":"--trigger-px","value":"10px","selector":".bb-tabs-list","description":"trigger side padding"},{"name":"--trigger-r","value":"calc(var(--list-r) - var(--p))","selector":".bb-tabs-list","description":"Trigger corners, concentric inside --list-r"},{"name":"--trigger-min-h","value":"calc(var(--list-h) - var(--p) * 2)","selector":".bb-tabs-list","description":"Trigger height inside the padded strip"},{"name":"--list-fg","value":"var(--bb-text-muted)","selector":".bb-tabs-list","description":"inactive trigger label"},{"name":"--hover-fg","value":"var(--bb-text)","selector":".bb-tabs-list","description":"hovered trigger label"},{"name":"--active-fg","value":"var(--bb-text)","selector":".bb-tabs-list","description":"active trigger label"},{"name":"--active-fw","value":"500","selector":".bb-tabs-list","description":"active trigger label weight (inactive labels are 500)"},{"name":"--indicator-bg","value":"var(--bb-panel)","selector":".bb-tabs-list","description":"the indicator's fill"},{"name":"--indicator-border","value":"color-mix(in oklab, var(--bb-text) 8%, transparent)","selector":".bb-tabs-list","description":"The indicator's edge"},{"name":"--indicator-r","value":"var(--trigger-r)","selector":".bb-tabs-list","description":"The indicator's corners — the pill's, concentric inside --list-r"},{"name":"--indicator-h","value":"initial","selector":".bb-tabs-list","description":"The indicator's thickness: its height, its width on a vertical strip. `initial` fills the whole trigger box — the pill; a bar is `2px`, on the trigger's bottom edge (side edge when vertical)"},{"name":"--indicator-inset","value":"0px","selector":".bb-tabs-list","description":"Inset of the indicator from the trigger box — shrinks the pill; a bar keeps its thickness, shortens by it at both ends and floats it above the edge"},{"name":"--elev","value":"var(--bb-elev)","selector":".bb-tabs-list","description":"The theme's resting lift, composed UNDER the indicator's own shadow. Two names because they are two decisions: `--elev` is what the language lifts every plate by, `--indicator-shadow` is this component's own."},{"name":"--indicator-shadow","value":"var(--bb-shadow-sm)","selector":".bb-tabs-list","description":"Indicator lift, painted on top of --elev — the theme's selected-segment lift, so it holds in dark (a literal black 6% vanished there)."},{"name":"--transition-duration","value":"var(--bb-transition-slow)","selector":".bb-tabs-panels"},{"name":"--gap","value":"30px","selector":".bb-tabs-panels"},{"name":"--max-w","value":"initial","selector":".bb-tabs-panels","description":"The strip-width knob must not percolate into panel content: nested tabs rendered inside a panel start with a clean slate"}],"pt":{"parts":[{"name":"root","description":"The strip's outer element: the `wrapper:prepend` slot, the triggers, the `wrapper:append` slot (`BbTabs`'s `wrapper`)."},{"name":"list","description":"The `role=\"tablist\"` row the triggers sit in."},{"name":"item","description":"One tab trigger, per tab with its own `active` / `disabled`. Also takes a per-item function, called with the tab's descriptor."},{"name":"indicator","description":"The marker sliding under the active trigger."}],"states":[{"name":"disabled","description":"On every part while the whole tabs is `disabled`; per node on `item`: a tab that is disabled."},{"name":"active","description":"Per node, on `item` and `panel`: the selected tab's trigger and its shown panel."}]},"tree":{"bindings":[{"part":"list","target":"ul.bb-tabs-list__list"},{"part":"indicator","target":"li.bb-tabs-list__indicator"},{"part":"item","target":"BbBaseButton"}],"nodes":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]}]},"css":{"classes":{"bb-tabs-list":["","--*","--block","--compact","--disabled","--line","--none","--vertical","__append","__indicator","__item","__item--active","__list","__list--measuring","__list--no-transition","__prepend"]},"locals":["--active-fg","--active-fw","--color-gray-200","--elev","--eq","--fs","--gap","--height","--hover-fg","--indicator-bg","--indicator-border","--indicator-h","--indicator-inset","--indicator-r","--indicator-shadow","--left","--list-bg","--list-border","--list-fg","--list-h","--list-r","--max-w","--p","--top","--transition-duration","--trigger-gap","--trigger-min-h","--trigger-px","--trigger-r","--width"]},"attrTargets":["div"],"removed":[{"name":"header:prepend","new":"wrapper:prepend","surface":"slot","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","silent":true,"fix":{"kind":"rename"}},{"name":"header:append","new":"wrapper:append","surface":"slot","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","silent":true,"fix":{"kind":"rename"}},{"name":"label:<x>","new":"<x>:label","surface":"slot","migration":"ai/guides/migration/components/bb-tabs.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"header:prepend","to":"wrapper:prepend","surface":"slot","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","fix":{"kind":"rename"}},{"from":"header:append","to":"wrapper:append","surface":"slot","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","fix":{"kind":"rename"}},{"from":"label:<x>","to":"<x>:label","surface":"slot","migration":"ai/guides/migration/components/bb-tabs.md","fix":{"kind":"rename"}}]},
|
|
522
522
|
{"name":"BbTabsPanels","group":"Navigation","description":"The panel host of a split BbTabsRoot layout (renders the tab content only).","referenceOnly":false,"hasGuide":false,"contract":"ai/BbTabsPanels.md","source":"ai/source/BbTabsPanels.md","props":[{"name":"pt","type":"PtMap<BbTabsPanelsPtPart, BbTabsPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:active","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:active","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false}],"events":[],"slots":[{"name":"<value>","type":"BbTabsSlotProps<K>","description":"One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).","dynamic":true}],"exposed":[],"models":[],"cssProps":[{"name":"--gap","value":"8px","selector":".bb-tabs"},{"name":"--list-bg","value":"color-mix(in oklab, var(--bb-text) 8%, transparent)","selector":".bb-tabs-list","description":"The strip behind the triggers"},{"name":"--list-border","value":"transparent","selector":".bb-tabs-list","description":"The strip's edge line: a baseline under the triggers (beside them when vertical), --bb-border-w thick, painted inside the strip. `pill` draws none; `line` sets it to --bb-border"},{"name":"--p","value":"3px","selector":".bb-tabs-list","description":"strip inner padding — the gutter the indicator sits in, and the scroll inset"},{"name":"--list-r","value":"var(--bb-radius)","selector":".bb-tabs-list","description":"strip corners"},{"name":"--list-h","value":"var(--bb-control-h)","selector":".bb-tabs-list","description":"strip min height"},{"name":"--fs","value":"var(--bb-fs)","selector":".bb-tabs-list","description":"trigger label size"},{"name":"--trigger-gap","value":"0px","selector":".bb-tabs-list","description":"space between triggers"},{"name":"--trigger-px","value":"10px","selector":".bb-tabs-list","description":"trigger side padding"},{"name":"--trigger-r","value":"calc(var(--list-r) - var(--p))","selector":".bb-tabs-list","description":"Trigger corners, concentric inside --list-r"},{"name":"--trigger-min-h","value":"calc(var(--list-h) - var(--p) * 2)","selector":".bb-tabs-list","description":"Trigger height inside the padded strip"},{"name":"--list-fg","value":"var(--bb-text-muted)","selector":".bb-tabs-list","description":"inactive trigger label"},{"name":"--hover-fg","value":"var(--bb-text)","selector":".bb-tabs-list","description":"hovered trigger label"},{"name":"--active-fg","value":"var(--bb-text)","selector":".bb-tabs-list","description":"active trigger label"},{"name":"--active-fw","value":"500","selector":".bb-tabs-list","description":"active trigger label weight (inactive labels are 500)"},{"name":"--indicator-bg","value":"var(--bb-panel)","selector":".bb-tabs-list","description":"the indicator's fill"},{"name":"--indicator-border","value":"color-mix(in oklab, var(--bb-text) 8%, transparent)","selector":".bb-tabs-list","description":"The indicator's edge"},{"name":"--indicator-r","value":"var(--trigger-r)","selector":".bb-tabs-list","description":"The indicator's corners — the pill's, concentric inside --list-r"},{"name":"--indicator-h","value":"initial","selector":".bb-tabs-list","description":"The indicator's thickness: its height, its width on a vertical strip. `initial` fills the whole trigger box — the pill; a bar is `2px`, on the trigger's bottom edge (side edge when vertical)"},{"name":"--indicator-inset","value":"0px","selector":".bb-tabs-list","description":"Inset of the indicator from the trigger box — shrinks the pill; a bar keeps its thickness, shortens by it at both ends and floats it above the edge"},{"name":"--elev","value":"var(--bb-elev)","selector":".bb-tabs-list","description":"The theme's resting lift, composed UNDER the indicator's own shadow. Two names because they are two decisions: `--elev` is what the language lifts every plate by, `--indicator-shadow` is this component's own."},{"name":"--indicator-shadow","value":"var(--bb-shadow-sm)","selector":".bb-tabs-list","description":"Indicator lift, painted on top of --elev — the theme's selected-segment lift, so it holds in dark (a literal black 6% vanished there)."},{"name":"--transition-duration","value":"var(--bb-transition-slow)","selector":".bb-tabs-panels"},{"name":"--gap","value":"30px","selector":".bb-tabs-panels"},{"name":"--max-w","value":"initial","selector":".bb-tabs-panels","description":"The strip-width knob must not percolate into panel content: nested tabs rendered inside a panel start with a clean slate"}],"pt":{"parts":[{"name":"root","description":"The element around the panels (`BbTabs`'s `panels`)."},{"name":"panel","description":"One tab panel — a broadcast; `panel:active` is the panel on show. Takes no function."}],"states":[{"name":"disabled","description":"On every part while the whole tabs is `disabled`; per node on `item`: a tab that is disabled."},{"name":"active","description":"Per node, on `item` and `panel`: the selected tab's trigger and its shown panel."}]},"css":{"classes":{"bb-tabs-panels":[""]},"locals":["--active-fg","--active-fw","--color-gray-200","--elev","--eq","--fs","--gap","--height","--hover-fg","--indicator-bg","--indicator-border","--indicator-h","--indicator-inset","--indicator-r","--indicator-shadow","--left","--list-bg","--list-border","--list-fg","--list-h","--list-r","--max-w","--p","--top","--transition-duration","--trigger-gap","--trigger-min-h","--trigger-px","--trigger-r","--width"]},"attrTargets":["div"]},
|
|
@@ -524,18 +524,18 @@
|
|
|
524
524
|
{"name":"BbTag","group":"Inputs","description":"Captures and displays tag-like token values.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTag.md","source":"ai/source/BbTag.md","props":[{"name":"append:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the end of the input."},{"name":"autocomplete","type":"string | undefined","required":false,"default":"\"off\"","description":"Guides to the browser as to the type of information expected in the field."},{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"caseSensitive","type":"boolean | undefined","required":false,"default":"false","description":"Compares tags case-sensitively when rejecting duplicates (`Vue` and `vue`\nboth allowed); by default case folds. A tag keeps the casing typed either\nway, and entries are trimmed first."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Displays a clear button when the input has a value and is being interacted with."},{"name":"comma","type":"boolean | undefined","required":false,"default":"false","description":"Sets the display model for selected values to a list of comma separated string.\nIn this mode the user cannot deselect an option by pressing the close button."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-input-h`, `--bb-input-py` and\n`--bb-label-spacing-y` for their `-compact` twins on the field, so a\n`--bb-input-h` you set on the component is ignored while `compact` is on:\nsize a compact field with `--bb-input-h-compact` (and\n`--bb-input-py-compact`) instead."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"divider","type":"string | string[] | undefined","required":false,"default":"\"Enter\"","description":"The divider key used to separate values from one another. By default it is \"Enter\".\nAccepts a single key or an array of keys (e.g. `['Enter', ',']`) — any of them\ncommits the current text, split on every single-character divider in the\nset into one tag per trimmed, non-empty piece."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"floating\" | \"inside\" | undefined","required":false,"description":"Where the label sits relative to the field: `outside` above it, `inside`\nwithin the control, or `floating` (starts inside, lifts on focus/value).\nDefaults to `config.defaultInputLabelMode`, like the other inputs."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles."},{"name":"max","type":"number | undefined","required":false,"description":"Maximum number of selected items."},{"name":"modelValue","type":"string[] | undefined","required":false,"description":"Used by v-model. Contains all selected tags."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"placeholder","type":"string | undefined","required":false,"description":"Text shown while the field is empty."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the start of the input."},{"name":"pt","type":"(PtMap<TextControlPtPart, FormControlPtState> & { \"badge:loading\"?: PtValue | undefined; \"badge:disabled\"?: PtValue | undefined; \"badge:errors\"?: PtValue | undefined; \"badge:warnings\"?: PtValue | undefined; \"badge:readonly\"?: PtValue | undefined; \"badge:hasValue\"?: PtValue | undefined; \"comma:loading\"?: PtValue | undefined; \"comma:disabled\"?: PtValue | undefined; \"comma:errors\"?: PtValue | undefined; \"comma:warnings\"?: PtValue | undefined; \"comma:readonly\"?: PtValue | undefined; \"comma:hasValue\"?: PtValue | undefined; \"badge:highlighted\"?: PtValue | undefined; \"comma:highlighted\"?: PtValue | undefined; } & { badge?: PtValue | PtItemFn<string, BbTagPtState> | undefined; comma?: PtValue | PtItemFn<string, BbTagPtState> | undefined; }) | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:badge","type":"PtValue | ((ctx: PtItemCtx<string, BbTagPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:badge:disabled","type":"PtValue | undefined","required":false},{"name":"pt:badge:errors","type":"PtValue | undefined","required":false},{"name":"pt:badge:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:badge:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:badge:loading","type":"PtValue | undefined","required":false},{"name":"pt:badge:readonly","type":"PtValue | undefined","required":false},{"name":"pt:badge:warnings","type":"PtValue | undefined","required":false},{"name":"pt:box","type":"PtValue | undefined","required":false},{"name":"pt:box:disabled","type":"PtValue | undefined","required":false},{"name":"pt:box:errors","type":"PtValue | undefined","required":false},{"name":"pt:box:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:box:loading","type":"PtValue | undefined","required":false},{"name":"pt:box:readonly","type":"PtValue | undefined","required":false},{"name":"pt:box:warnings","type":"PtValue | undefined","required":false},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:errors","type":"PtValue | undefined","required":false},{"name":"pt:clear:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:clear:readonly","type":"PtValue | undefined","required":false},{"name":"pt:clear:warnings","type":"PtValue | undefined","required":false},{"name":"pt:comma","type":"PtValue | ((ctx: PtItemCtx<string, BbTagPtState>) => PtItemResult) | undefined","required":false},{"name":"pt:comma:disabled","type":"PtValue | undefined","required":false},{"name":"pt:comma:errors","type":"PtValue | undefined","required":false},{"name":"pt:comma:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:comma:highlighted","type":"PtValue | undefined","required":false},{"name":"pt:comma:loading","type":"PtValue | undefined","required":false},{"name":"pt:comma:readonly","type":"PtValue | undefined","required":false},{"name":"pt:comma:warnings","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:errors","type":"PtValue | undefined","required":false},{"name":"pt:input:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:input:loading","type":"PtValue | undefined","required":false},{"name":"pt:input:readonly","type":"PtValue | undefined","required":false},{"name":"pt:input:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:prefix","type":"PtValue | undefined","required":false},{"name":"pt:prefix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:prefix:errors","type":"PtValue | undefined","required":false},{"name":"pt:prefix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:prefix:loading","type":"PtValue | undefined","required":false},{"name":"pt:prefix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:prefix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:disabled","type":"PtValue | undefined","required":false},{"name":"pt:spinner:errors","type":"PtValue | undefined","required":false},{"name":"pt:spinner:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner:readonly","type":"PtValue | undefined","required":false},{"name":"pt:spinner:warnings","type":"PtValue | undefined","required":false},{"name":"pt:suffix","type":"PtValue | undefined","required":false},{"name":"pt:suffix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:suffix:errors","type":"PtValue | undefined","required":false},{"name":"pt:suffix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:suffix:loading","type":"PtValue | undefined","required":false},{"name":"pt:suffix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:suffix:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and\nthe input is swapped."},{"name":"rules","type":"RuleExpression<string[]>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"variant","type":"InputVariantType | undefined","required":false,"default":"'outline'","values":["outline","secondary","none","ghost"],"description":"Visual variant of the field box, with the `BbButton` names and tokens.\nColours only, so a form never reflows; `'ghost'` has no border in any\nstate, and `'none'` takes no look at all (you own hover, focus and the\nstates). Register more with the plugin's `inputVariants`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the tag input becomes active (focus/click enters it)."},{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the native input loses focus. Forwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when the native input fires a change event. Forwards the original DOM `Event`."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when the input receives a click interaction. Forwards the original DOM `MouseEvent`."},{"name":"compositionend","signature":"(event: CompositionEvent): void","description":"An IME composition ended. Forwards the DOM `CompositionEvent`."},{"name":"compositionstart","signature":"(event: CompositionEvent): void","description":"An IME composition started. Forwards the DOM `CompositionEvent`."},{"name":"duplicate","signature":"(string: string): void","description":"Emitted when an attempt is made to add a tag that already exists."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the native input gains focus. Forwards the original DOM `FocusEvent`."},{"name":"inactive","signature":"(): void","description":"Emitted when focus/click moves outside the tag input after it was active."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events. Forwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction. Forwards the original DOM `KeyboardEvent`."},{"name":"keyup","signature":"(event: KeyboardEvent): void","description":"Emitted when a key is released. Forwards the original DOM `KeyboardEvent`."},{"name":"max","signature":"(string: string): void","description":"Emitted when an attempt is made to add a tag while the `max` limit is already reached."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"A pointer button was pressed on the text field. Forwards the DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"A pointer button was released on the text field. Forwards the DOM `MouseEvent`."},{"name":"paste","signature":"(event: ClipboardEvent): void","description":"Native clipboard paste. Forwards the DOM `ClipboardEvent`."},{"name":"update:modelValue","signature":"(value: string[]): void","description":"Emitted when the tag array changes."}],"slots":[{"name":"append","type":"Record<string, never>","description":"Content appended inside the input field wrapper, after the tag chips."},{"name":"append:outer","type":"Record<string, never>","description":"Content appended outside the input field wrapper."},{"name":"description","type":"BbTagDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"label","type":"BbTagLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default label text rendered above the input."},{"name":"prefix","type":"Record<string, never>","description":"Content rendered as an inline prefix inside the input field."},{"name":"prepend","type":"Record<string, never>","description":"Content prepended inside the input field wrapper, before the tag chips."},{"name":"prepend:outer","type":"Record<string, never>","description":"Content prepended outside the input field wrapper."},{"name":"suffix","type":"Record<string, never>","description":"Content rendered as an inline suffix inside the input field."}],"exposed":[],"models":[{"name":"modelValue","type":"string[] | undefined"}],"cssProps":[{"name":"--compensation-multiplier","value":"0.3","selector":".bb-tag__field","description":"Fraction of the shell's inner padding the chip row is pulled back by when no prepend icon precedes it (see the negative margin below)."},{"name":"--border-color","value":"per variant","selector":"pt:box","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."}],"pt":{"parts":[{"name":"root","description":"The field's outer container: the label, the box and the lines under it."},{"name":"label","description":"The label text above the box (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line under the box. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"box","description":"The bordered box around the input — border, background and radius; the `variant` paints here."},{"name":"input","description":"The native input a new tag is typed into."},{"name":"icon","description":"The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error / warning glyph) is never in it."},{"name":"spinner","description":"The spinner inside the box while `loading`."},{"name":"prefix","description":"The `#prefix` slot's wrapper, inside the box before the input."},{"name":"suffix","description":"The `#suffix` slot's wrapper, inside the box after the input."},{"name":"clear","description":"The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕."},{"name":"badge","description":"Each tag's `BbBadge` root — a broadcast resolved per tag. The badge's own ✕ is chrome, never `clear`. Not rendered in `comma` mode."},{"name":"comma","description":"Each tag in `comma` mode — a broadcast resolved per tag. Not rendered in chips mode."}],"states":[{"name":"hasValue","description":"Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`)."},{"name":"readonly","description":"Component-wide: the control is `readonly` — shown, focusable, not editable."},{"name":"disabled","description":"Component-wide: the control is `disabled`."},{"name":"warnings","description":"Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together."},{"name":"errors","description":"Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red."},{"name":"highlighted","description":"Per node, on `badge` / `comma`: the tag the arrow keys are on (`bb-badge--highlighted` / `bb-tag__comma--highlighted`). A cursor, not focus: focus stays in the text input."},{"name":"loading","description":"Component-wide: `loading` is on; the box shows its `spinner`."}]},"tree":{"bindings":[{"part":"controlAttrs","target":"input.bb-tag__input"},{"part":"input","target":"input.bb-tag__input"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbTag","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"CommonFieldInput","kind":"internal","vocabulary":"BbTag","bindings":[{"part":"box","target":"span.bb-field-input__box"},{"part":"prefix","target":"span.bb-field-input__prefix"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"ClearableButton"},{"part":"spinner","target":"BbSpinner"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--bg-hover","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-field-input__box"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix","bb-field-input__prepend-icon","bb-field-input__append-icon"]},{"name":"--border-color","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--border-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-size","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-color","documented":true,"readBy":["bb-field-input__box"]},{"name":"--elev","documented":true,"readBy":["bb-field-input__box"]},{"name":"--frost","documented":true,"readBy":["bb-field-input__box"]},{"name":"--inside-label-clearance","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix"]}],"children":[{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]},{"name":"BbSmoothHeight","kind":"public"},{"name":"ChipsBox","kind":"internal","vocabulary":"BbTag","bindings":[{"part":"badge","target":"BbBadge"}],"children":[{"name":"BbBadge","kind":"public","vocabulary":"BbBadge","bindings":[{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"button.bb-badge__clear"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-badge"]},{"name":"--fg","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--bw","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--border-color","documented":false,"readBy":["bb-badge"]},{"name":"--ring-color","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--ring-size","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--min-size-md","documented":true,"readBy":["bb-badge"]},{"name":"--min-size","documented":true,"readBy":["bb-badge"]},{"name":"--elev","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--r","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--fs","documented":true,"readBy":["bb-badge"]},{"name":"--icon-size","documented":true,"readBy":["bb-badge__icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge__clear"]},{"name":"--gap","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--px","documented":true,"readBy":["bb-badge","bb-badge--icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge--clearable"]},{"name":"--clear-size","documented":true,"readBy":["bb-badge__clear","bb-icon"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--pad-left","documented":true,"readBy":["bb-badge__body"]},{"name":"--pad-right","documented":false,"readBy":["bb-badge__body","bb-badge__clear"]},{"name":"--size","documented":false}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]}]},{"name":"CommaBox","kind":"internal","vocabulary":"BbTag","bindings":[{"part":"comma","target":"span.bb-tag__comma"}]}]},"css":{"classes":{"bb-tag":["","__badge","__comma","__comma--highlighted","__field","__field--active","__field--compact","__input","__input-container"]},"locals":["--characters","--color-gray-200","--compensation-multiplier"]},"attrTargets":["div","input"],"removed":[{"name":"multiple","new":null,"since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-tag.md","silent":true,"fix":{"kind":"remove"}},{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-tag.md","silent":true,"fix":{"kind":"rename"}},{"name":"pt:item","new":null,"surface":"pt","hint":"each chip is `pt:badge`; in `comma` mode each entry is `pt:comma` (same states)","since":"3.0.0-beta.36","migration":"ai/guides/migration/v3-beta-css-classes.md","silent":true,"fix":{"kind":"manual"}},{"name":"prepend-outer","new":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append-outer","new":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-tag.md","fix":{"kind":"rename"}},{"from":"prepend-outer","to":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append-outer","to":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
525
525
|
{"name":"BbTextarea","group":"Inputs","description":"Captures multi-line text values.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTextarea.md","source":"ai/source/BbTextarea.md","props":[{"name":"append:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the end of the input."},{"name":"autocomplete","type":"string | undefined","required":false,"description":"Guides to the browser as to the type of information expected in the field."},{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"autoGrow","type":"boolean | undefined","required":false,"default":"false","description":"Expands the textarea to match its content. Empty, it is one BbTextInput\ntall (text on the same line); it never shrinks below that, or below `rows`."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Displays a clear button when the input has a value and is being interacted with."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-input-h`, `--bb-input-py` and\n`--bb-label-spacing-y` for their `-compact` twins on the field, so a\n`--bb-input-h` you set on the component is ignored while `compact` is on:\nsize a compact field with `--bb-input-h-compact` (and\n`--bb-input-py-compact`) instead."},{"name":"counter","type":"boolean | undefined","required":false,"default":"false","description":"Shows a character count at the end of the hint row: `42`, or `42 / 140`\nwith the native `maxlength` (which also stops input). It brightens from\n90 % and takes the warning colour at the limit; screen readers hear it\nonly when it crosses 90 % or the limit."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"floating\" | \"inside\" | undefined","required":false,"description":"Label rendering mode. `'outside'` (default) sits the label above/beside the\nfield; `'floating'`/`'inside'` overlay it, like the other text inputs."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles."},{"name":"modelValue","type":"string | null | undefined","required":false,"description":"Used by v-model."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"nullValue","type":"E | undefined","required":false,"description":"What the field emits once the user empties it (typing it empty, the\nclear button): `'null'` emits `null`, `'string'` emits `''`.\nUnset, the app's `formControls.textareaNullValue` applies (`'null'` by\ndefault). Also types the `update:modelValue` payload: with `'string'`\nit is `string`."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"placeholder","type":"string | undefined","required":false,"description":"Text shown while the field is empty."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the start of the input."},{"name":"pt","type":"PtMap<BbTextareaPtPart, BbTextareaPtState> | undefined","required":false,"description":"Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same\nkeys as the `pt:*` attributes without the prefix. See the `pt:<part>` row."},{"name":"pt:box","type":"PtValue | undefined","required":false},{"name":"pt:box:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:box:disabled","type":"PtValue | undefined","required":false},{"name":"pt:box:errors","type":"PtValue | undefined","required":false},{"name":"pt:box:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:box:loading","type":"PtValue | undefined","required":false},{"name":"pt:box:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:box:readonly","type":"PtValue | undefined","required":false},{"name":"pt:box:warnings","type":"PtValue | undefined","required":false},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:errors","type":"PtValue | undefined","required":false},{"name":"pt:clear:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:clear:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:clear:readonly","type":"PtValue | undefined","required":false},{"name":"pt:clear:warnings","type":"PtValue | undefined","required":false},{"name":"pt:counter","type":"PtValue | undefined","required":false},{"name":"pt:counter:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:counter:disabled","type":"PtValue | undefined","required":false},{"name":"pt:counter:errors","type":"PtValue | undefined","required":false},{"name":"pt:counter:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:counter:loading","type":"PtValue | undefined","required":false},{"name":"pt:counter:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:counter:readonly","type":"PtValue | undefined","required":false},{"name":"pt:counter:warnings","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:errors","type":"PtValue | undefined","required":false},{"name":"pt:input:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:input:loading","type":"PtValue | undefined","required":false},{"name":"pt:input:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:input:readonly","type":"PtValue | undefined","required":false},{"name":"pt:input:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:prefix","type":"PtValue | undefined","required":false},{"name":"pt:prefix:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:prefix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:prefix:errors","type":"PtValue | undefined","required":false},{"name":"pt:prefix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:prefix:loading","type":"PtValue | undefined","required":false},{"name":"pt:prefix:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:prefix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:prefix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:spinner:disabled","type":"PtValue | undefined","required":false},{"name":"pt:spinner:errors","type":"PtValue | undefined","required":false},{"name":"pt:spinner:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:spinner:readonly","type":"PtValue | undefined","required":false},{"name":"pt:spinner:warnings","type":"PtValue | undefined","required":false},{"name":"pt:suffix","type":"PtValue | undefined","required":false},{"name":"pt:suffix:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:suffix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:suffix:errors","type":"PtValue | undefined","required":false},{"name":"pt:suffix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:suffix:loading","type":"PtValue | undefined","required":false},{"name":"pt:suffix:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:suffix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:suffix:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and\nthe input is swapped."},{"name":"rows","type":"string | number | undefined","required":false,"description":"Sets the number of visible text lines for the control."},{"name":"rules","type":"RuleExpression<string | null>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"variant","type":"InputVariantType | undefined","required":false,"default":"'outline'","values":["outline","secondary","none","ghost"],"description":"Visual variant of the field box, with the `BbButton` names and tokens.\nColours only, so a form never reflows; `'ghost'` has no border in any\nstate, and `'none'` takes no look at all (you own hover, focus and the\nstates). Register more with the plugin's `inputVariants`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the native textarea loses focus.\nForwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when the native textarea fires a change event.\nForwards the original DOM `Event`."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when the textarea receives a click interaction.\nForwards the original DOM `MouseEvent`."},{"name":"compositionend","signature":"(event: CompositionEvent): void","description":"An IME composition ended. Forwards the original DOM `CompositionEvent`."},{"name":"compositionstart","signature":"(event: CompositionEvent): void","description":"An IME composition started. Forwards the original DOM `CompositionEvent`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the native textarea gains focus.\nForwards the original DOM `FocusEvent`."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from the textarea.\nForwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on the textarea.\nForwards the original DOM `KeyboardEvent`."},{"name":"keyup","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on the textarea.\nForwards the original DOM `KeyboardEvent`."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is pressed over the textarea.\nForwards the original DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is released over the textarea.\nForwards the original DOM `MouseEvent`."},{"name":"paste","signature":"(event: ClipboardEvent): void","description":"Native clipboard paste. Forwards the original DOM `ClipboardEvent`."},{"name":"update:modelValue","signature":"(value: string | NullValueOf<E>): void","description":"Emitted when the value changes. Carries the new text, or the empty value\n(`null-value`, else the app's, `null` by default) when emptied."}],"slots":[{"name":"append","type":"Record<string, never>","description":"Content rendered after the textarea, at the end of the inner container."},{"name":"append:outer","type":"Record<string, never>","description":"Content rendered after the entire textarea control, outside the input chrome."},{"name":"description","type":"BbTextareaDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"label","type":"BbTextareaLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default label text rendered above the textarea."},{"name":"prefix","type":"Record<string, never>","description":"Inline content rendered at the start of the textarea field area, before the text."},{"name":"prepend","type":"Record<string, never>","description":"Content rendered before the textarea, at the start of the inner container."},{"name":"prepend:outer","type":"Record<string, never>","description":"Content rendered before the entire textarea control, outside the input chrome."},{"name":"suffix","type":"Record<string, never>","description":"Inline content rendered at the end of the textarea field area, after the text."}],"exposed":[],"models":[{"name":"modelValue","type":"string | null | undefined"}],"cssProps":[{"name":"--min-height","value":"150px","selector":".bb-textarea__field","description":"height of the box when the consumer gives no `rows`"},{"name":"--inner-h","value":"max( calc(var(--bb-leading) + var(--bb-input-py) * 2), calc(var(--bb-input-h) - 2px), var(--bb-input-icon) )","selector":".bb-textarea__field","description":"The first text row's height: the tallest of one line plus its vertical padding, the input height less its borders, and the icon box."},{"name":"--floating-py","value":"calc((var(--inner-h) - var(--bb-input-icon)) / 2)","selector":".bb-textarea__field","description":"Top offset that centres the icons, affixes, spinner and clear button on that first row — the shell top-aligns them for a textarea."},{"name":"--border-color","value":"per variant","selector":"pt:box","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."}],"pt":{"parts":[{"name":"root","description":"The field's outer container: the label, the box and the lines under it."},{"name":"label","description":"The label text above the box (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line under the box. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"box","description":"The bordered box around the input — border, background and radius; the `variant` paints here."},{"name":"input","description":"The native input element inside the box."},{"name":"icon","description":"The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error / warning glyph) is never in it."},{"name":"spinner","description":"The spinner inside the box while `loading`."},{"name":"prefix","description":"The `#prefix` slot's wrapper, inside the box before the input."},{"name":"suffix","description":"The `#suffix` slot's wrapper, inside the box after the input."},{"name":"clear","description":"The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕."},{"name":"counter","description":"The character count at the end of the hint row (`counter`): `42`, or `42 / 140` with `maxlength`."}],"states":[{"name":"hasValue","description":"Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`)."},{"name":"nearLimit","description":"Component-wide: with `counter` and `maxlength`, the value is at 90 % of the limit or more, and still below it."},{"name":"atLimit","description":"Component-wide: with `counter` and `maxlength`, the value has reached the limit."},{"name":"readonly","description":"Component-wide: the control is `readonly` — shown, focusable, not editable."},{"name":"disabled","description":"Component-wide: the control is `disabled`."},{"name":"warnings","description":"Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together."},{"name":"errors","description":"Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red."},{"name":"loading","description":"Component-wide: `loading` is on; the box shows its `spinner`."}]},"tree":{"bindings":[{"part":"controlAttrs","target":"textarea.bb-textarea__input"},{"part":"input","target":"textarea.bb-textarea__input"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbTextarea","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"CommonFieldInput","kind":"internal","vocabulary":"BbTextarea","bindings":[{"part":"box","target":"span.bb-field-input__box"},{"part":"prefix","target":"span.bb-field-input__prefix"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"ClearableButton"},{"part":"spinner","target":"BbSpinner"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--bg-hover","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-field-input__box"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix","bb-field-input__prepend-icon","bb-field-input__append-icon"]},{"name":"--border-color","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--border-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-size","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-color","documented":true,"readBy":["bb-field-input__box"]},{"name":"--elev","documented":true,"readBy":["bb-field-input__box"]},{"name":"--frost","documented":true,"readBy":["bb-field-input__box"]},{"name":"--inside-label-clearance","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix"]}],"children":[{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]},{"name":"BbSmoothHeight","kind":"public"}]},"css":{"classes":{"bb-textarea":["","__field","__field--auto-grow","__input"]},"locals":["--color-gray-200","--floating-py","--inner-h","--min-height","--row-h"]},"attrTargets":["div","textarea"],"removed":[{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"prepend-outer","new":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append-outer","new":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"prepend-outer","to":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append-outer","to":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
526
526
|
{"name":"BbTextInput","group":"Inputs","description":"Captures single-line text values.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTextInput.md","source":"ai/source/BbTextInput.md","props":[{"name":"append:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the end of the input."},{"name":"autocomplete","type":"string | undefined","required":false,"description":"Guides to the browser as to the type of information expected in the field."},{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Displays a clear button when the input has a value and is being interacted with."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-input-h`, `--bb-input-py` and\n`--bb-label-spacing-y` for their `-compact` twins on the field, so a\n`--bb-input-h` you set on the component is ignored while `compact` is on:\nsize a compact field with `--bb-input-h-compact` (and\n`--bb-input-py-compact`) instead."},{"name":"counter","type":"boolean | undefined","required":false,"default":"false","description":"Shows a character count at the end of the hint row: `42`, or `42 / 140`\nwith the native `maxlength` (which also stops input). It brightens from\n90 % and takes the warning colour at the limit; screen readers hear it\nonly when it crosses 90 % or the limit."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"emitMasked","type":"boolean | undefined","required":false,"default":"false","description":"Emits the masked value of the input."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the\ncontrol's `aria-describedby`, so they are re-read when it regains focus."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"inputMode","type":"\"text\" | \"none\" | \"search\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined","required":false,"description":"The inputmode of the input."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"floating\" | \"inside\" | undefined","required":false,"description":"Label rendering mode."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles."},{"name":"mask","type":"MaskInputOptions | undefined","required":false,"description":"A maska options object, not a string: `{ mask: '#### #### #### ####' }`.\nPlease visit https://beholdr.github.io/maska/v3 for syntax examples."},{"name":"modelValue","type":"string | null | undefined","required":false,"description":"Used by v-model."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"nullValue","type":"E | undefined","required":false,"description":"What the field emits once emptied (typing, the clear button, an empty\nmask): `'null'` emits `null`, `'string'` emits `''`. Unset:\n`formControls.textInputNullValue` (`'null'`). With `'string'`, the\n`update:modelValue` payload types as `string`."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"placeholder","type":"string | undefined","required":false,"description":"Text shown while the field is empty."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the start of the input."},{"name":"pt","type":"PtMap<BbTextInputPtPart, BbTextInputPtState> | undefined","required":false,"description":"Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same\nkeys as the `pt:*` attributes without the prefix. See the `pt:<part>` row."},{"name":"pt:box","type":"PtValue | undefined","required":false},{"name":"pt:box:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:box:disabled","type":"PtValue | undefined","required":false},{"name":"pt:box:errors","type":"PtValue | undefined","required":false},{"name":"pt:box:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:box:loading","type":"PtValue | undefined","required":false},{"name":"pt:box:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:box:readonly","type":"PtValue | undefined","required":false},{"name":"pt:box:warnings","type":"PtValue | undefined","required":false},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:errors","type":"PtValue | undefined","required":false},{"name":"pt:clear:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:clear:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:clear:readonly","type":"PtValue | undefined","required":false},{"name":"pt:clear:warnings","type":"PtValue | undefined","required":false},{"name":"pt:counter","type":"PtValue | undefined","required":false},{"name":"pt:counter:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:counter:disabled","type":"PtValue | undefined","required":false},{"name":"pt:counter:errors","type":"PtValue | undefined","required":false},{"name":"pt:counter:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:counter:loading","type":"PtValue | undefined","required":false},{"name":"pt:counter:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:counter:readonly","type":"PtValue | undefined","required":false},{"name":"pt:counter:warnings","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:errors","type":"PtValue | undefined","required":false},{"name":"pt:input:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:input:loading","type":"PtValue | undefined","required":false},{"name":"pt:input:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:input:readonly","type":"PtValue | undefined","required":false},{"name":"pt:input:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:prefix","type":"PtValue | undefined","required":false},{"name":"pt:prefix:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:prefix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:prefix:errors","type":"PtValue | undefined","required":false},{"name":"pt:prefix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:prefix:loading","type":"PtValue | undefined","required":false},{"name":"pt:prefix:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:prefix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:prefix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:spinner:disabled","type":"PtValue | undefined","required":false},{"name":"pt:spinner:errors","type":"PtValue | undefined","required":false},{"name":"pt:spinner:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:spinner:readonly","type":"PtValue | undefined","required":false},{"name":"pt:spinner:warnings","type":"PtValue | undefined","required":false},{"name":"pt:suffix","type":"PtValue | undefined","required":false},{"name":"pt:suffix:atLimit","type":"PtValue | undefined","required":false},{"name":"pt:suffix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:suffix:errors","type":"PtValue | undefined","required":false},{"name":"pt:suffix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:suffix:loading","type":"PtValue | undefined","required":false},{"name":"pt:suffix:nearLimit","type":"PtValue | undefined","required":false},{"name":"pt:suffix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:suffix:warnings","type":"PtValue | undefined","required":false},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout. Applicable in every direction the order of the label and\nthe input is swapped."},{"name":"rules","type":"RuleExpression<string | null>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"type","type":"\"text\" | \"search\" | \"tel\" | \"url\" | \"email\" | \"password\" | undefined","required":false,"default":"\"text\"","description":"Type of the input. Restricted to the textual input types this component\nsupports — use `BbNumberInput` for numbers and `BbDatePickerInput` for dates."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"variant","type":"InputVariantType | undefined","required":false,"default":"'outline'","values":["outline","secondary","none","ghost"],"description":"Visual variant of the field box, with the `BbButton` names and tokens.\nColours only, so a form never reflows; `'ghost'` has no border in any\nstate, and `'none'` takes no look at all (you own hover, focus and the\nstates). Register more with the plugin's `inputVariants`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"blur","signature":"(event: FocusEvent): void","description":"Emitted when the native input loses focus.\nForwards the original DOM `FocusEvent`."},{"name":"change","signature":"(event: Event): void","description":"Emitted when the native input fires a change event.\nForwards the original DOM `Event`."},{"name":"click","signature":"(event: MouseEvent): void","description":"Emitted when the input receives a click interaction.\nForwards the original DOM `MouseEvent`."},{"name":"compositionend","signature":"(event: CompositionEvent): void","description":"Emitted when a composition session ends (e.g. CJK IME confirmed).\nForwards the original DOM `CompositionEvent`."},{"name":"compositionstart","signature":"(event: CompositionEvent): void","description":"Emitted when a composition session starts (e.g. CJK IME begins).\nForwards the original DOM `CompositionEvent`."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when the native input gains focus.\nForwards the original DOM `FocusEvent`."},{"name":"input","signature":"(event: Event): void","description":"Emitted on native input events from the text field.\nForwards the original DOM `Event`."},{"name":"keydown","signature":"(event: KeyboardEvent): void","description":"Emitted for keyboard interaction on the input.\nForwards the original DOM `KeyboardEvent`."},{"name":"keyup","signature":"(event: KeyboardEvent): void","description":"Emitted when a key is released over the input.\nForwards the original DOM `KeyboardEvent`."},{"name":"mousedown","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is pressed over the input.\nForwards the original DOM `MouseEvent`."},{"name":"mouseup","signature":"(event: MouseEvent): void","description":"Emitted when a pointing device button is released over the input.\nForwards the original DOM `MouseEvent`."},{"name":"paste","signature":"(event: ClipboardEvent): void","description":"Emitted when content is pasted into the input.\nForwards the original DOM `ClipboardEvent`."},{"name":"update:modelValue","signature":"(value: string | NullValueOf<E>): void","description":"Emitted when the value changes. Carries the new string, or the empty\nvalue (`null-value`, else the app's, `null` by default) when emptied.\nWhen `mask` is set, emits the masked or unmasked string depending on `emitMasked`."}],"slots":[{"name":"append","type":"object","description":"Content rendered after the text input, at the end of the field box."},{"name":"append:outer","type":"object","description":"Content rendered after the entire text input control, outside the input chrome."},{"name":"description","type":"BbTextInputDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"label","type":"BbTextInputLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default label text rendered above the input."},{"name":"prefix","type":"object","description":"Inline content rendered at the start of the input field area, before the typed text."},{"name":"prepend","type":"object","description":"Content rendered before the text input, at the start of the field box."},{"name":"prepend:outer","type":"object","description":"Content rendered before the entire text input control, outside the input chrome."},{"name":"suffix","type":"object","description":"Inline content rendered at the end of the input field area, after the typed text."}],"exposed":[],"models":[{"name":"modelValue","type":"string | null | undefined"}],"cssProps":[{"name":"--border-color","value":"per variant","selector":"pt:box","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."}],"pt":{"parts":[{"name":"root","description":"The field's outer container: the label, the box and the lines under it."},{"name":"label","description":"The label text above the box (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line under the box. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"box","description":"The bordered box around the input — border, background and radius; the `variant` paints here."},{"name":"input","description":"The native input element inside the box."},{"name":"icon","description":"The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error / warning glyph) is never in it."},{"name":"spinner","description":"The spinner inside the box while `loading`."},{"name":"prefix","description":"The `#prefix` slot's wrapper, inside the box before the input."},{"name":"suffix","description":"The `#suffix` slot's wrapper, inside the box after the input."},{"name":"clear","description":"The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕."},{"name":"counter","description":"The character count at the end of the hint row (`counter`): `42`, or `42 / 140` with `maxlength`."}],"states":[{"name":"hasValue","description":"Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`)."},{"name":"nearLimit","description":"Component-wide: with `counter` and `maxlength`, the value is at 90 % of the limit or more, and still below it."},{"name":"atLimit","description":"Component-wide: with `counter` and `maxlength`, the value has reached the limit."},{"name":"readonly","description":"Component-wide: the control is `readonly` — shown, focusable, not editable."},{"name":"disabled","description":"Component-wide: the control is `disabled`."},{"name":"warnings","description":"Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together."},{"name":"errors","description":"Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red."},{"name":"loading","description":"Component-wide: `loading` is on; the box shows its `spinner`."}]},"tree":{"bindings":[{"part":"controlAttrs","target":"input.bb-text-input__input"},{"part":"input","target":"input.bb-text-input__input"}],"nodes":[{"name":"CommonField","kind":"internal","vocabulary":"BbTextInput","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"CommonFieldInput","kind":"internal","vocabulary":"BbTextInput","bindings":[{"part":"box","target":"span.bb-field-input__box"},{"part":"prefix","target":"span.bb-field-input__prefix"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"ClearableButton"},{"part":"spinner","target":"BbSpinner"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--bg-hover","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-field-input__box"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix","bb-field-input__prepend-icon","bb-field-input__append-icon"]},{"name":"--border-color","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--border-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-size","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-color","documented":true,"readBy":["bb-field-input__box"]},{"name":"--elev","documented":true,"readBy":["bb-field-input__box"]},{"name":"--frost","documented":true,"readBy":["bb-field-input__box"]},{"name":"--inside-label-clearance","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix"]}],"children":[{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]}]},"css":{"classes":{"bb-text-input":["","__input"]},"locals":["--color-gray-200"]},"attrTargets":["div","input"],"removed":[{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-text-input.md","silent":true,"fix":{"kind":"rename"}},{"name":"prepend-outer","new":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append-outer","new":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}},{"name":"focus","new":null,"surface":"method","hint":"no template-ref API in v3. Reach the <input> through pt: `:pt=\"{ input: { attrs: { ref: (el) => (input = el) } } }\"`, then `input.focus()` on that element; `autofocus` for focus on mount","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-text-input.md","silent":true,"fix":{"kind":"manual"}},{"name":"blur","new":null,"surface":"method","hint":"no template-ref API in v3. Reach the <input> through pt: `:pt=\"{ input: { attrs: { ref: (el) => (input = el) } } }\"`, then `input.blur()` on that element; `autofocus` for focus on mount","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-text-input.md","silent":true,"fix":{"kind":"manual"}},{"name":"select","new":null,"surface":"method","hint":"no template-ref API in v3. Reach the <input> through pt: `:pt=\"{ input: { attrs: { ref: (el) => (input = el) } } }\"`, then `input.select()` on that element; `autofocus` for focus on mount","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-text-input.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/components/bb-text-input.md","fix":{"kind":"rename"}},{"from":"prepend-outer","to":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append-outer","to":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
527
|
-
{"name":"BbTimePicker","group":"Overlay","description":"Opens hour/minute(/second) columns in a popover on a trigger you own — the time analog of BbDatePicker; also the v-bb-time directive.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTimePicker.md","source":"ai/source/BbTimePicker.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref. When provided, the `activator`\nslot is not rendered and click + ARIA are attached programmatically to the\nreferenced element — mirroring `BbDatePicker`."},{"name":"activeSegment","type":"BbTimePickerSegment | undefined","required":false,"values":["start","end"],"description":"Which end the columns edit in range mode (`v-model:active-segment`).\nStandalone use manages this internally via the in-panel toggle; a host can\ndrive it. Ignored outside `range`."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile, open in a bottom off-canvas sheet instead of a floating popover.\nWhen unset, falls back to the global `config.adaptive`."},{"name":"ampm","type":"boolean | undefined","required":false,"default":"false","description":"12-hour display with an AM/PM column; emitted values stay 24-hour."},{"name":"anchor","type":"ElementOrComponentRef | undefined","required":false,"description":"Element or component ref the popover positions itself relative to.\nDefaults to the activator when omitted (anchor to a larger row while a\nsmaller element stays the click target)."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the popover within a bounding element or CSS selector."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the activator and the columns."},{"name":"disableFlip","type":"boolean | undefined","required":false,"default":"false","description":"Disable the automatic flip to the opposite side on overflow."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Render popover content before it is first shown."},{"name":"label","type":"string | undefined","required":false,"description":"Accessible label. The activator is named by it followed by the\nactivator's own text (\"Due date 12 Sep\"), through `aria-labelledby`."},{"name":"max","type":"string | undefined","required":false,"description":"Maximum selectable time, `HH:mm` (other shapes throw at setup). The\ncolumns disable the entries no in-range time can use; a typed value (or\nan hour beside an out-of-range minute) is clamped with a `disabled_time`\nerror."},{"name":"min","type":"string | undefined","required":false,"description":"Minimum selectable time, `HH:mm` (other shapes throw at setup). The\ncolumns disable the entries no in-range time can use; a typed value (or\nan hour beside an out-of-range minute) is clamped with a `disabled_time`\nerror."},{"name":"modelValue","type":"string | string[] | null","required":true,"description":"v-model value: `null` for empty, a 24-hour `HH:mm` (or `HH:mm:ss` with\n`seconds`) string, or a two-element `[start, end]` array when `range` is true."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the popover keeps from the activator."},{"name":"padding","type":"number | undefined","required":false,"description":"Minimum empty space to keep from the edge of the page."},{"name":"placement","type":"Placement | undefined","required":false,"values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end"],"description":"Position of the popover relative to the activator/anchor."},{"name":"pt","type":"PtMap<BbTimePickerPtPart, BbTimePickerPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:cellColumnHeader","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:open","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:selected","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:open","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"range","type":"boolean | undefined","required":false,"default":"false","description":"Range selection: the value is a two-element `[start, end]` array."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Prevents opening while keeping the activator visible."},{"name":"seconds","type":"boolean | undefined","required":false,"default":"false","description":"Adds the seconds column."},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"Minute-column granularity and arrow stepping."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Popover/sheet transition duration in milliseconds."}],"events":[{"name":"error","signature":"(error: TimePickerInputError): void","description":"Emitted on every normalization (clamped time)."},{"name":"hidden","signature":"(): void","description":"Emitted once the time panel has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the time panel starts to close."},{"name":"show","signature":"(): void","description":"Emitted as soon as the time panel (the popover, or the sheet on a phone) starts to open."},{"name":"shown","signature":"(): void","description":"Emitted once the time panel is open and its open transition has finished."},{"name":"time-pick","signature":"(payload: { unit: TimeUnit; value: string; }): void","description":"Relay of the raw column pick, before this component combines it into the\nvalue. A host binds this to run its own engine; clean consumers ignore it."},{"name":"update:activeSegment","signature":"(value: BbTimePickerSegment): void","description":"The active range end changed (range only)."},{"name":"update:modelValue","signature":"(value: string | string[] | null): void","description":"Emitted when the selected time changes (single/range/null)."}],"slots":[{"name":"activator","type":"BbTimePickerActivatorSlotProps","fields":["props: { ref: (el: unknown) => void; 'aria-haspopup': \"dialog\"; 'aria-expanded': \"true\" | \"false\"; 'aria-labelledby': string; }","anchorProps: { ref: (el: unknown) => void; }","open: boolean","value: string | string[] | null","disabled: boolean"],"description":"Custom activator element. Apply `v-bind=\"props\"` to your trigger."}],"exposed":[],"models":[{"name":"activeSegment","type":"BbTimePickerSegment | undefined"},{"name":"modelValue","type":"string | string[] | null"}],"cssProps":[{"name":"--bg","value":"var(--bb-panel)","selector":".bb-time-picker__segment--active"}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The time surface you see — the popover's painted bubble on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there."},{"name":"header","description":"The readout above the columns — the picked time as the fields show it; the calendar's heading on the date pickers."},{"name":"cellColumnHeader","description":"The letters above each column (`HH`, `MM`, `SS`) — a broadcast, like the calendar's weekday letters."},{"name":"item","description":"One entry in a column (hour, minute, second, AM / PM) — a broadcast resolved per entry."}],"states":[{"name":"selected","description":"Per node, on `item`: the current value's entry in each column."},{"name":"disabled","description":"Component-wide while the picker is `disabled`. Also per node, on `item`: an entry outside `min` / `max` — an hour with no minute in range, a minute out of range for the selected hour, an AM / PM half with no hour in range. Like the calendar's days: shown, not pickable."},{"name":"open","description":"Component-wide: the picker is showing."}]},"tree":{"bindings":[{"part":"panel","target":"div"},{"part":"panel","target":"CommonPopover"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ panel: 'root', sheet: 'root' }"}],"nodes":[{"name":"CommonTimeSelector","kind":"internal","vocabulary":"BbTimePicker","bindings":[{"part":"header","target":"div.bb-time-selector__header"},{"part":"cellColumnHeader","target":"div.bb-time-selector__cell-column-header"},{"part":"item","target":"BbBaseButton"}],"cssProps":[{"name":"--time-row-h","documented":false,"readBy":["bb-time-selector__item","bb-time-selector__scroll"]},{"name":"--time-col-w","documented":false,"readBy":["bb-time-selector__column"]},{"name":"--time-mark","documented":true,"readBy":["bb-time-selector__item"]}],"children":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"CommonPopover","kind":"internal"}]},"css":{"classes":{"bb-time-picker":["","__panel","__panel--sheet","__segment","__segment--active","__segments","__sheet"]},"locals":["--bg","--color-gray-200"]}},
|
|
527
|
+
{"name":"BbTimePicker","group":"Overlay","description":"Opens hour/minute(/second) columns in a popover on a trigger you own — the time analog of BbDatePicker; also the v-bb-time directive.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTimePicker.md","source":"ai/source/BbTimePicker.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref. When provided, the `activator`\nslot is not rendered and click + ARIA are attached programmatically to the\nreferenced element — mirroring `BbDatePicker`."},{"name":"activeSegment","type":"BbTimePickerSegment | undefined","required":false,"values":["start","end"],"description":"Which end the columns edit in range mode (`v-model:active-segment`).\nStandalone use manages this internally via the in-panel toggle; a host can\ndrive it. Ignored outside `range`."},{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile, open in a bottom off-canvas sheet instead of a floating popover.\nWhen unset, falls back to the global `config.adaptive`."},{"name":"ampm","type":"boolean | undefined","required":false,"default":"false","description":"12-hour display with an AM/PM column; emitted values stay 24-hour."},{"name":"anchor","type":"ElementOrComponentRef | undefined","required":false,"description":"Element or component ref the popover positions itself relative to.\nDefaults to the activator when omitted (anchor to a larger row while a\nsmaller element stays the click target)."},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the popover within a bounding element or CSS selector:\nsideways only, alongside the trigger; it flips at the viewport."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the activator and the columns."},{"name":"disableFlip","type":"boolean | undefined","required":false,"default":"false","description":"Disable the automatic flip to the opposite side on overflow."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Render popover content before it is first shown."},{"name":"label","type":"string | undefined","required":false,"description":"Accessible label. The activator is named by it followed by the\nactivator's own text (\"Due date 12 Sep\"), through `aria-labelledby`."},{"name":"max","type":"string | undefined","required":false,"description":"Maximum selectable time, `HH:mm` (other shapes throw at setup). The\ncolumns disable the entries no in-range time can use; a typed value (or\nan hour beside an out-of-range minute) is clamped with a `disabled_time`\nerror."},{"name":"min","type":"string | undefined","required":false,"description":"Minimum selectable time, `HH:mm` (other shapes throw at setup). The\ncolumns disable the entries no in-range time can use; a typed value (or\nan hour beside an out-of-range minute) is clamped with a `disabled_time`\nerror."},{"name":"modelValue","type":"string | string[] | null","required":true,"description":"v-model value: `null` for empty, a 24-hour `HH:mm` (or `HH:mm:ss` with\n`seconds`) string, or a two-element `[start, end]` array when `range` is true."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"offset","type":"number | undefined","required":false,"default":"4","description":"Space the popover keeps from the activator."},{"name":"padding","type":"number | undefined","required":false,"description":"Minimum empty space to keep from the edge of the page."},{"name":"placement","type":"Placement | undefined","required":false,"values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end"],"description":"Position of the popover relative to the activator/anchor."},{"name":"pt","type":"PtMap<BbTimePickerPtPart, BbTimePickerPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:cellColumnHeader","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:open","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:selected","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:open","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"range","type":"boolean | undefined","required":false,"default":"false","description":"Range selection: the value is a two-element `[start, end]` array."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Prevents opening while keeping the activator visible."},{"name":"seconds","type":"boolean | undefined","required":false,"default":"false","description":"Adds the seconds column."},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"Minute-column granularity and arrow stepping."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Popover/sheet transition duration in milliseconds."}],"events":[{"name":"error","signature":"(error: TimePickerInputError): void","description":"Emitted on every normalization (clamped time)."},{"name":"hidden","signature":"(): void","description":"Emitted once the time panel has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the time panel starts to close."},{"name":"show","signature":"(): void","description":"Emitted as soon as the time panel (the popover, or the sheet on a phone) starts to open."},{"name":"shown","signature":"(): void","description":"Emitted once the time panel is open and its open transition has finished."},{"name":"time-pick","signature":"(payload: { unit: TimeUnit; value: string; }): void","description":"Relay of the raw column pick, before this component combines it into the\nvalue. A host binds this to run its own engine; clean consumers ignore it."},{"name":"update:activeSegment","signature":"(value: BbTimePickerSegment): void","description":"The active range end changed (range only)."},{"name":"update:modelValue","signature":"(value: string | string[] | null): void","description":"Emitted when the selected time changes (single/range/null)."}],"slots":[{"name":"activator","type":"BbTimePickerActivatorSlotProps","fields":["props: { ref: (el: unknown) => void; 'aria-haspopup': \"dialog\"; 'aria-expanded': \"true\" | \"false\"; 'aria-labelledby': string; }","anchorProps: { ref: (el: unknown) => void; }","open: boolean","value: string | string[] | null","disabled: boolean"],"description":"Custom activator element. Apply `v-bind=\"props\"` to your trigger."}],"exposed":[],"models":[{"name":"activeSegment","type":"BbTimePickerSegment | undefined"},{"name":"modelValue","type":"string | string[] | null"}],"cssProps":[{"name":"--bg","value":"var(--bb-panel)","selector":".bb-time-picker__segment--active"}],"pt":{"parts":[{"name":"root","description":"The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`."},{"name":"panel","description":"The time surface you see — the popover's painted bubble on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there."},{"name":"header","description":"The readout above the columns — the picked time as the fields show it; the calendar's heading on the date pickers."},{"name":"cellColumnHeader","description":"The letters above each column (`HH`, `MM`, `SS`) — a broadcast, like the calendar's weekday letters."},{"name":"item","description":"One entry in a column (hour, minute, second, AM / PM) — a broadcast resolved per entry."}],"states":[{"name":"selected","description":"Per node, on `item`: the current value's entry in each column."},{"name":"disabled","description":"Component-wide while the picker is `disabled`. Also per node, on `item`: an entry outside `min` / `max` — an hour with no minute in range, a minute out of range for the selected hour, an AM / PM half with no hour in range. Like the calendar's days: shown, not pickable."},{"name":"open","description":"Component-wide: the picker is showing."}]},"tree":{"bindings":[{"part":"panel","target":"div"},{"part":"panel","target":"CommonPopover"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ panel: 'root', sheet: 'root' }"}],"nodes":[{"name":"CommonTimeSelector","kind":"internal","vocabulary":"BbTimePicker","bindings":[{"part":"header","target":"div.bb-time-selector__header"},{"part":"cellColumnHeader","target":"div.bb-time-selector__cell-column-header"},{"part":"item","target":"BbBaseButton"}],"cssProps":[{"name":"--time-row-h","documented":false,"readBy":["bb-time-selector__item","bb-time-selector__scroll"]},{"name":"--time-col-w","documented":false,"readBy":["bb-time-selector__column"]},{"name":"--time-mark","documented":true,"readBy":["bb-time-selector__item"]}],"children":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"CommonPopover","kind":"internal"}]},"css":{"classes":{"bb-time-picker":["","__panel","__panel--sheet","__segment","__segment--active","__segments","__sheet"]},"locals":["--bg","--color-gray-200"]}},
|
|
528
528
|
{"name":"BbTimePickerInput","group":"Inputs","description":"Segmented time field with hour/minute columns; 24-hour string model.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTimePickerInput.md","source":"ai/source/BbTimePickerInput.md","props":[{"name":"adaptive","type":"boolean | undefined","required":false,"default":"`config.adaptive` (`true`)","description":"On mobile the time columns open inside a bottom off-canvas sheet instead\nof a floating popover. When unset, falls back to the global\n`config.adaptive`."},{"name":"ampm","type":"boolean | undefined","required":false,"default":"false","description":"12-hour display with an AM/PM segment. Purely a field-composition\nconcern: the model stays 24-hour. Type `A`/`P` (or ArrowUp/Down) to set\nthe meridiem."},{"name":"append:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the end of the input."},{"name":"autocomplete","type":"string | undefined","required":false,"default":"\"off\"","description":"Guides the browser as to the type of information expected in the field."},{"name":"autofocus","type":"Booleanish | undefined","required":false,"description":"Sets autofocus on page load."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Displays a clear button when the input has a value and is being interacted with."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Compact density. Swaps `--bb-input-h`, `--bb-input-py` and\n`--bb-label-spacing-y` for their `-compact` twins on the field, so a\n`--bb-input-h` you set on the component is ignored while `compact` is on:\nsize a compact field with `--bb-input-h-compact` (and\n`--bb-input-py-compact`) instead."},{"name":"description","type":"string | undefined","required":false,"description":"Descriptive text displayed below the label and above the input. Always\nvisible and linked to the input via `aria-describedby` (after any\n`errors` / `warnings`, before the `hint`)."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component."},{"name":"disableWriting","type":"boolean | \"mobile\" | \"desktop\" | undefined","required":false,"default":"false","description":"Disables typing into the input.\nUse `'mobile'` / `'desktop'` to disable typing on one platform only."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Error messages under the field, a string or string array. They render in\nan `aria-live=\"polite\"` region and are referenced first from the segment\ninputs' `aria-describedby`, so they are re-read when a segment regains\nfocus."},{"name":"formless","type":"boolean | undefined","required":false,"default":"false","description":"Keep this control out of the enclosing `BbForm` entirely: not submitted,\nnot dirty, not reset, not validated. For a control that is not form data\n(a filter, a \"show advanced\" switch)."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Visually hides the label of the input while maintaining accessibility."},{"name":"hint","type":"string | undefined","required":false,"description":"Text box to be displayed near the input, usually to indicate instructions."},{"name":"id","type":"string | undefined","required":false,"description":"The `id` of the native control; the label's `for` and the description\nand message ids derive from it. Generated when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"label","type":"string","required":true,"description":"Text content of the label of the element."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"floating\" | \"inside\" | undefined","required":false,"description":"Label rendering mode."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"description":"Sets the text alignment of the label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"description":"How the label and the input sit together: `'vertical'`, `'horizontal'` (50/50),\n`'auto'`, `'label-fill'` (the label takes the free space, the input keeps\nits size), `'input-fill'` (the other way round), or a two-word ratio\npattern like `'xx xxxxx'`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Sets the component in a loading state, usually triggering some visual styles."},{"name":"max","type":"string | undefined","required":false,"description":"Maximum selectable time, `HH:mm` (other shapes throw at setup). The\ncolumns disable the entries no in-range time can use; a typed value (or\nan hour beside an out-of-range minute) is clamped with a `disabled_time`\nerror."},{"name":"min","type":"string | undefined","required":false,"description":"Minimum selectable time, `HH:mm` (other shapes throw at setup). The\ncolumns disable the entries no in-range time can use; a typed value (or\nan hour beside an out-of-range minute) is clamped with a `disabled_time`\nerror."},{"name":"modelValue","type":"string | string[] | null | undefined","required":false,"description":"v-model value: `null` for empty, a 24-hour `HH:mm` (or `HH:mm:ss` with\n`seconds`) string, or a two-element array when `range` is true."},{"name":"name","type":"string | undefined","required":false,"description":"Defines the name of the input."},{"name":"offCanvasProps","type":"Partial<BbOffCanvasProps> | undefined","required":false,"description":"Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on\nmobile), spread over its defaults. A `pt` inside it styles only the sheet\n(passthrough guide § Inside the sheet). The sheet hides its ✕; `{\nhideClose: false }` brings it back."},{"name":"persistentHint","type":"boolean | undefined","required":false,"default":"false","description":"Keeps the hint displayed."},{"name":"placeholder","type":"string | undefined","required":false,"description":"Text shown while the field is empty."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the start of the input."},{"name":"pt","type":"PtMap<BbTimePickerInputPtPart, BbTimePickerInputPtState> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:activator","type":"PtValue | undefined","required":false},{"name":"pt:activator:disabled","type":"PtValue | undefined","required":false},{"name":"pt:activator:errors","type":"PtValue | undefined","required":false},{"name":"pt:activator:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:activator:loading","type":"PtValue | undefined","required":false},{"name":"pt:activator:open","type":"PtValue | undefined","required":false},{"name":"pt:activator:readonly","type":"PtValue | undefined","required":false},{"name":"pt:activator:selected","type":"PtValue | undefined","required":false},{"name":"pt:activator:warnings","type":"PtValue | undefined","required":false},{"name":"pt:box","type":"PtValue | undefined","required":false},{"name":"pt:box:disabled","type":"PtValue | undefined","required":false},{"name":"pt:box:errors","type":"PtValue | undefined","required":false},{"name":"pt:box:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:box:loading","type":"PtValue | undefined","required":false},{"name":"pt:box:open","type":"PtValue | undefined","required":false},{"name":"pt:box:readonly","type":"PtValue | undefined","required":false},{"name":"pt:box:selected","type":"PtValue | undefined","required":false},{"name":"pt:box:warnings","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:disabled","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:errors","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:loading","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:open","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:readonly","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:selected","type":"PtValue | undefined","required":false},{"name":"pt:cellColumnHeader:warnings","type":"PtValue | undefined","required":false},{"name":"pt:clear","type":"PtValue | undefined","required":false},{"name":"pt:clear:disabled","type":"PtValue | undefined","required":false},{"name":"pt:clear:errors","type":"PtValue | undefined","required":false},{"name":"pt:clear:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:clear:loading","type":"PtValue | undefined","required":false},{"name":"pt:clear:open","type":"PtValue | undefined","required":false},{"name":"pt:clear:readonly","type":"PtValue | undefined","required":false},{"name":"pt:clear:selected","type":"PtValue | undefined","required":false},{"name":"pt:clear:warnings","type":"PtValue | undefined","required":false},{"name":"pt:description","type":"PtValue | undefined","required":false},{"name":"pt:description:disabled","type":"PtValue | undefined","required":false},{"name":"pt:description:errors","type":"PtValue | undefined","required":false},{"name":"pt:description:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:description:loading","type":"PtValue | undefined","required":false},{"name":"pt:description:open","type":"PtValue | undefined","required":false},{"name":"pt:description:readonly","type":"PtValue | undefined","required":false},{"name":"pt:description:selected","type":"PtValue | undefined","required":false},{"name":"pt:description:warnings","type":"PtValue | undefined","required":false},{"name":"pt:header","type":"PtValue | undefined","required":false},{"name":"pt:header:disabled","type":"PtValue | undefined","required":false},{"name":"pt:header:errors","type":"PtValue | undefined","required":false},{"name":"pt:header:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:header:loading","type":"PtValue | undefined","required":false},{"name":"pt:header:open","type":"PtValue | undefined","required":false},{"name":"pt:header:readonly","type":"PtValue | undefined","required":false},{"name":"pt:header:selected","type":"PtValue | undefined","required":false},{"name":"pt:header:warnings","type":"PtValue | undefined","required":false},{"name":"pt:hint","type":"PtValue | undefined","required":false},{"name":"pt:hint:disabled","type":"PtValue | undefined","required":false},{"name":"pt:hint:errors","type":"PtValue | undefined","required":false},{"name":"pt:hint:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:hint:loading","type":"PtValue | undefined","required":false},{"name":"pt:hint:open","type":"PtValue | undefined","required":false},{"name":"pt:hint:readonly","type":"PtValue | undefined","required":false},{"name":"pt:hint:selected","type":"PtValue | undefined","required":false},{"name":"pt:hint:warnings","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:disabled","type":"PtValue | undefined","required":false},{"name":"pt:icon:errors","type":"PtValue | undefined","required":false},{"name":"pt:icon:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon:open","type":"PtValue | undefined","required":false},{"name":"pt:icon:readonly","type":"PtValue | undefined","required":false},{"name":"pt:icon:selected","type":"PtValue | undefined","required":false},{"name":"pt:icon:warnings","type":"PtValue | undefined","required":false},{"name":"pt:input","type":"PtValue | undefined","required":false},{"name":"pt:input:disabled","type":"PtValue | undefined","required":false},{"name":"pt:input:errors","type":"PtValue | undefined","required":false},{"name":"pt:input:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:input:loading","type":"PtValue | undefined","required":false},{"name":"pt:input:open","type":"PtValue | undefined","required":false},{"name":"pt:input:readonly","type":"PtValue | undefined","required":false},{"name":"pt:input:selected","type":"PtValue | undefined","required":false},{"name":"pt:input:warnings","type":"PtValue | undefined","required":false},{"name":"pt:item","type":"PtValue | undefined","required":false},{"name":"pt:item:disabled","type":"PtValue | undefined","required":false},{"name":"pt:item:errors","type":"PtValue | undefined","required":false},{"name":"pt:item:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:item:loading","type":"PtValue | undefined","required":false},{"name":"pt:item:open","type":"PtValue | undefined","required":false},{"name":"pt:item:readonly","type":"PtValue | undefined","required":false},{"name":"pt:item:selected","type":"PtValue | undefined","required":false},{"name":"pt:item:warnings","type":"PtValue | undefined","required":false},{"name":"pt:label","type":"PtValue | undefined","required":false},{"name":"pt:label:disabled","type":"PtValue | undefined","required":false},{"name":"pt:label:errors","type":"PtValue | undefined","required":false},{"name":"pt:label:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:label:loading","type":"PtValue | undefined","required":false},{"name":"pt:label:open","type":"PtValue | undefined","required":false},{"name":"pt:label:readonly","type":"PtValue | undefined","required":false},{"name":"pt:label:selected","type":"PtValue | undefined","required":false},{"name":"pt:label:warnings","type":"PtValue | undefined","required":false},{"name":"pt:message","type":"PtValue | undefined","required":false},{"name":"pt:message:disabled","type":"PtValue | undefined","required":false},{"name":"pt:message:errors","type":"PtValue | undefined","required":false},{"name":"pt:message:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:message:loading","type":"PtValue | undefined","required":false},{"name":"pt:message:open","type":"PtValue | undefined","required":false},{"name":"pt:message:readonly","type":"PtValue | undefined","required":false},{"name":"pt:message:selected","type":"PtValue | undefined","required":false},{"name":"pt:message:warnings","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:disabled","type":"PtValue | undefined","required":false},{"name":"pt:panel:errors","type":"PtValue | undefined","required":false},{"name":"pt:panel:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:panel:loading","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:panel:readonly","type":"PtValue | undefined","required":false},{"name":"pt:panel:selected","type":"PtValue | undefined","required":false},{"name":"pt:panel:warnings","type":"PtValue | undefined","required":false},{"name":"pt:prefix","type":"PtValue | undefined","required":false},{"name":"pt:prefix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:prefix:errors","type":"PtValue | undefined","required":false},{"name":"pt:prefix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:prefix:loading","type":"PtValue | undefined","required":false},{"name":"pt:prefix:open","type":"PtValue | undefined","required":false},{"name":"pt:prefix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:prefix:selected","type":"PtValue | undefined","required":false},{"name":"pt:prefix:warnings","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:disabled","type":"PtValue | undefined","required":false},{"name":"pt:root:errors","type":"PtValue | undefined","required":false},{"name":"pt:root:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:root:loading","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"pt:root:readonly","type":"PtValue | undefined","required":false},{"name":"pt:root:selected","type":"PtValue | undefined","required":false},{"name":"pt:root:warnings","type":"PtValue | undefined","required":false},{"name":"pt:sheet","type":"PtValue | undefined","required":false},{"name":"pt:sheet:disabled","type":"PtValue | undefined","required":false},{"name":"pt:sheet:errors","type":"PtValue | undefined","required":false},{"name":"pt:sheet:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:sheet:loading","type":"PtValue | undefined","required":false},{"name":"pt:sheet:open","type":"PtValue | undefined","required":false},{"name":"pt:sheet:readonly","type":"PtValue | undefined","required":false},{"name":"pt:sheet:selected","type":"PtValue | undefined","required":false},{"name":"pt:sheet:warnings","type":"PtValue | undefined","required":false},{"name":"pt:spinner","type":"PtValue | undefined","required":false},{"name":"pt:spinner:disabled","type":"PtValue | undefined","required":false},{"name":"pt:spinner:errors","type":"PtValue | undefined","required":false},{"name":"pt:spinner:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:spinner:loading","type":"PtValue | undefined","required":false},{"name":"pt:spinner:open","type":"PtValue | undefined","required":false},{"name":"pt:spinner:readonly","type":"PtValue | undefined","required":false},{"name":"pt:spinner:selected","type":"PtValue | undefined","required":false},{"name":"pt:spinner:warnings","type":"PtValue | undefined","required":false},{"name":"pt:suffix","type":"PtValue | undefined","required":false},{"name":"pt:suffix:disabled","type":"PtValue | undefined","required":false},{"name":"pt:suffix:errors","type":"PtValue | undefined","required":false},{"name":"pt:suffix:hasValue","type":"PtValue | undefined","required":false},{"name":"pt:suffix:loading","type":"PtValue | undefined","required":false},{"name":"pt:suffix:open","type":"PtValue | undefined","required":false},{"name":"pt:suffix:readonly","type":"PtValue | undefined","required":false},{"name":"pt:suffix:selected","type":"PtValue | undefined","required":false},{"name":"pt:suffix:warnings","type":"PtValue | undefined","required":false},{"name":"range","type":"boolean | undefined","required":false,"default":"false","description":"Range selection: v-model expects a two-element array `[start, end]`.\nAn inverted pair swaps on finalize with an `end_before_start` error."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input in a readonly state."},{"name":"required","type":"boolean | undefined","required":false,"default":"false","description":"Sets the input as required."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Reverses the layout: the order of the label and the input is swapped."},{"name":"rules","type":"RuleExpression<string | string[] | null>","required":false,"description":"vee-validate rules for this field. Only inside a `BbForm`."},{"name":"seconds","type":"boolean | undefined","required":false,"default":"false","description":"Adds the seconds segment. Without it an incoming value carrying seconds\ndisplays truncated and zeroes out on the next user commit."},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"Minute granularity for the minute column and its arrow stepping.\nConstrains what the columns produce, never what typing accepts."},{"name":"transitionDuration","type":"number | undefined","required":false,"description":"Transition duration, in milliseconds, for the popover appearance."},{"name":"validationLabel","type":"string | undefined","required":false,"description":"The field's name in validation messages (`{field}`): \"Email is not\nvalid\". Defaults to the `label` (or `legend`), then \"This field\"; the\nfield's `name` never shows. Set it when the label is not a good noun for\na sentence (an icon-only label, a question) or is hidden. Only inside a\n`BbForm`."},{"name":"validationMode","type":"ValidationMode | undefined","required":false,"values":["aggressive","balanced","lazy","submit-only","submit-live"],"description":"When this field validates as the user works: `aggressive` (every change),\n`balanced` (on leave, then live while it shows an error), `lazy` (on\nleave), `submit-only` or `submit-live`. Unset: the `BbForm`'s\n`validation-mode`, then `formControls.validationMode` (`'balanced'`).\nOnly in a `BbForm`."},{"name":"variant","type":"InputVariantType | undefined","required":false,"default":"'outline'","values":["outline","secondary","none","ghost"],"description":"Visual variant of the field box, with the `BbButton` names and tokens.\nColours only, so a form never reflows; `'ghost'` has no border in any\nstate, and `'none'` takes no look at all (you own hover, focus and the\nstates). Register more with the plugin's `inputVariants`."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the field, a string or string array: amber, in\ntheir own `aria-live` region, and in the control's `aria-describedby`\nafter the errors. A non-empty list implies the warning state; errors win\nwhen both are set."}],"events":[{"name":"active","signature":"(): void","description":"Emitted when the composite control receives focus."},{"name":"error","signature":"(error: TimePickerInputError): void","description":"Emitted on every normalization (clamped time, swapped range)."},{"name":"focus","signature":"(event: FocusEvent): void","description":"Emitted when a native text field inside the control gains focus."},{"name":"hidden","signature":"(): void","description":"Emitted once the time panel has finished closing."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the time panel starts to close."},{"name":"inactive","signature":"(): void","description":"Emitted when focus/click moves outside the composite control."},{"name":"show","signature":"(): void","description":"Emitted as soon as the time panel (the popover, or the sheet on a phone) starts to open."},{"name":"shown","signature":"(): void","description":"Emitted once the time panel is open and its open transition has finished."},{"name":"update:modelValue","signature":"(value: string | string[] | null): void","description":"Emitted whenever the selected time changes. `null` for cleared values,\na `HH:mm(:ss)` string, or an array in range mode."}],"slots":[{"name":"append","type":"object","description":"Content rendered after the time fields (before the clock button)."},{"name":"append:outer","type":"object","description":"Content rendered after the entire control, outside the input chrome."},{"name":"description","type":"BbTimePickerInputDescriptionSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`."},{"name":"label","type":"BbTimePickerInputLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean"],"description":"Replaces the default label text rendered above the input."},{"name":"prefix","type":"object","description":"Inline content at the start of the field area."},{"name":"prepend","type":"object","description":"Content rendered before the time fields, at the start of the field box."},{"name":"prepend:outer","type":"object","description":"Content rendered before the entire control, outside the input chrome."},{"name":"suffix","type":"object","description":"Inline content at the end of the field area."}],"exposed":[],"models":[{"name":"modelValue","type":"string | string[] | null | undefined"}],"cssProps":[{"name":"--border-color","value":"per variant","selector":"pt:box","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."}],"pt":{"parts":[{"name":"root","description":"The field's outer container: the label, the box and the lines under it."},{"name":"label","description":"The label text above the box (the `label` prop)."},{"name":"description","description":"The muted line under the label (the `description` prop)."},{"name":"message","description":"The errors / warnings line under the box. A node of its own: it can show at the same time as `hint`."},{"name":"hint","description":"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`."},{"name":"box","description":"The bordered box around the input — border, background and radius; the `variant` paints here."},{"name":"input","description":"Every segment field (hours, minutes, seconds) — a broadcast."},{"name":"icon","description":"The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error / warning glyph) is never in it."},{"name":"spinner","description":"The spinner inside the box while `loading`."},{"name":"prefix","description":"The `#prefix` slot's wrapper, inside the box before the input."},{"name":"suffix","description":"The `#suffix` slot's wrapper, inside the box after the input."},{"name":"clear","description":"The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕."},{"name":"activator","description":"The button in the box that opens the panel. Merged after the input's own click handler, so a listener of yours runs after ours. Its glyph is not a part."},{"name":"panel","description":"The time surface — the popover's painted bubble on desktop, the sheet itself on a phone."},{"name":"sheet","description":"The bottom sheet around the panel on a phone only."},{"name":"header","description":"The readout above the columns — the picked time; the calendar's heading on the date pickers."},{"name":"cellColumnHeader","description":"The letters above each column (`HH`, `MM`, `SS`) — a broadcast, like the calendar's weekday letters."},{"name":"item","description":"One column entry (hour, minute, second, AM / PM) — a broadcast."}],"states":[{"name":"hasValue","description":"Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`)."},{"name":"selected","description":"Per node, on `item`: the current value's entries."},{"name":"readonly","description":"Component-wide: the control is `readonly` — shown, focusable, not editable."},{"name":"disabled","description":"Component-wide while the input is `disabled`. Also per node, on `item`: an entry outside `min` / `max` — an hour with no minute in range, a minute out of range for the selected hour, an AM / PM half with no hour in range. Like the calendar's days: shown, not pickable."},{"name":"warnings","description":"Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together."},{"name":"errors","description":"Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red."},{"name":"open","description":"Component-wide: the panel is showing — `pt:activator:open` styles the trigger while it is."},{"name":"loading","description":"Component-wide: `loading` is on; the box shows its `spinner`."}]},"tree":{"bindings":[{"part":"controlAttrs","target":"input.bb-segmented-field__input"},{"part":"input","target":"input.bb-segmented-field__input"},{"part":"activator","target":"button.bb-segmented-field__activator"},{"part":"suffix","target":"span.bb-field-input__suffix"},{"part":"panel","target":"div"},{"part":"panel","target":"CommonPopover"}],"forwards":[{"to":"BbOffCanvas","mapping":"{ panel: 'root', sheet: 'root' }"}],"nodes":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbOffCanvas","kind":"public","vocabulary":"BbOffCanvas","bindings":[{"part":"header","target":"div.bb-offcanvas__header"},{"part":"title","target":"span.bb-offcanvas__title"},{"part":"description","target":"p.bb-offcanvas__description"},{"part":"close","target":"CloseButton"},{"part":"content","target":"div.bb-offcanvas__content"},{"part":"footer","target":"div.bb-offcanvas__footer"}],"cssProps":[{"name":"--translate-x","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--translate","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-x","documented":true,"readBy":["bb-offcanvas"]},{"name":"--stack-y","documented":false,"readBy":["bb-offcanvas"]},{"name":"--stack-fill","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom"]},{"name":"--stack-transition-duration","documented":true,"readBy":["bb-offcanvas"]},{"name":"--px","documented":true,"readBy":["bb-offcanvas__header","bb-close-button","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--py","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content","bb-offcanvas__header","bb-close-button"]},{"name":"--handle-w","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-h","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--handle-bg","documented":true,"readBy":["bb-offcanvas__handle"]},{"name":"--transition-timing-function","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--open"]},{"name":"--bg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--fg","documented":false,"readBy":["bb-offcanvas"]},{"name":"--safe-top","documented":true,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--fullscreen"]},{"name":"--safe-right","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--right","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-bottom","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--right","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--safe-left","documented":false,"readBy":["bb-offcanvas","bb-offcanvas--left","bb-offcanvas--top","bb-offcanvas--bottom","bb-offcanvas--fullscreen"]},{"name":"--inset-top","documented":false,"readBy":["bb-offcanvas__content","bb-offcanvas__header"]},{"name":"--inset-right","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--inset-bottom","documented":false,"readBy":["bb-offcanvas__footer","bb-offcanvas__content"]},{"name":"--inset-left","documented":false,"readBy":["bb-offcanvas__header","bb-offcanvas__content","bb-offcanvas__footer"]},{"name":"--close-size","documented":true,"readBy":["bb-close-button"]}],"children":[{"name":"CloseButton","kind":"internal","cssProps":[{"name":"--size","documented":true,"readBy":["bb-close-button"]},{"name":"--p","documented":true,"readBy":["bb-close-button"]}]}]},{"name":"CommonField","kind":"internal","vocabulary":"BbTimePickerInput","bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"cssProps":[{"name":"--ctrl-line","documented":true,"readBy":["bb-field__label","bb-field__input-wrapper"]}],"children":[{"name":"BbAsterisk","kind":"public"}]},{"name":"CommonFieldInput","kind":"internal","vocabulary":"BbTimePickerInput","bindings":[{"part":"box","target":"span.bb-field-input__box"},{"part":"prefix","target":"span.bb-field-input__prefix"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"ClearableButton"},{"part":"spinner","target":"BbSpinner"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--bg-hover","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-field-input__box"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix","bb-field-input__prepend-icon","bb-field-input__append-icon"]},{"name":"--border-color","documented":true,"readBy":["bb-field-input","bb-field-input__box"]},{"name":"--border-focus","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-size","documented":true,"readBy":["bb-field-input__box"]},{"name":"--ring-color","documented":true,"readBy":["bb-field-input__box"]},{"name":"--elev","documented":true,"readBy":["bb-field-input__box"]},{"name":"--frost","documented":true,"readBy":["bb-field-input__box"]},{"name":"--inside-label-clearance","documented":true,"readBy":["bb-field-input__box","bb-field-input__prefix","bb-field-input__suffix"]}],"children":[{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]},{"name":"CommonPopover","kind":"internal"},{"name":"CommonTimeSelector","kind":"internal","vocabulary":"BbTimePickerInput","bindings":[{"part":"header","target":"div.bb-time-selector__header"},{"part":"cellColumnHeader","target":"div.bb-time-selector__cell-column-header"},{"part":"item","target":"BbBaseButton"}],"cssProps":[{"name":"--time-row-h","documented":false,"readBy":["bb-time-selector__item","bb-time-selector__scroll"]},{"name":"--time-col-w","documented":false,"readBy":["bb-time-selector__column"]},{"name":"--time-mark","documented":true,"readBy":["bb-time-selector__item"]}],"children":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]}]}]},"css":{"classes":{"bb-time-picker-input":["","__accessible-description","__field","__field--range","__panel","__panel--sheet","__popover","__sheet"]},"locals":["--color-gray-200"]},"attrTargets":["div","input"],"removed":[{"name":"hasWarning","new":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"direction","new":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"prepend-outer","new":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"append-outer","new":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"rename"}},{"name":"vid","new":null,"hint":"a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"byValue","display":"validationLabel","key":"name"}},{"name":"validateOn","new":"validationMode","hint":"an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `<BbForm validation-mode>` instead of per field","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"hasWarning","to":"hasWarnings","since":"3.0.0-beta.26","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"direction","to":"layout","since":"3.0.0-beta.33","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"prepend-outer","to":"prepend:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"append-outer","to":"append:outer","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"rename"}},{"from":"validateOn","to":"validationMode","since":"3.0.0-beta.41","migration":"ai/guides/migration/v2-to-v3.md","fix":{"kind":"manual"}}]},
|
|
529
529
|
{"name":"BbToast","group":"Feedback","description":"Shows transient notification messages (includes the co-located BbToastPortal export).","referenceOnly":false,"hasGuide":true,"contract":"ai/BbToast.md","source":"ai/source/BbToast.md","props":[{"name":"position","type":"BbToastPosition | undefined","required":false,"values":["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],"description":"Where toasts stack when the toast itself names no `position`\n(`toast({ position })` wins). Falls back to `config.toastPosition`."},{"name":"pt","type":"(PtMap<BbToastPtPart, never> & { \"icon:loading\"?: PtValue | undefined; \"text:loading\"?: PtValue | undefined; \"panel:loading\"?: PtValue | undefined; \"footer:loading\"?: PtValue | undefined; \"content:loading\"?: PtValue | undefined; \"title:loading\"?: PtValue | undefined; \"close:loading\"?: PtValue | undefined; \"action:loading\"?: PtValue | undefined; }) | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:action","type":"PtValue | undefined","required":false},{"name":"pt:action:loading","type":"PtValue | undefined","required":false},{"name":"pt:close","type":"PtValue | undefined","required":false},{"name":"pt:close:loading","type":"PtValue | undefined","required":false},{"name":"pt:content","type":"PtValue | undefined","required":false},{"name":"pt:content:loading","type":"PtValue | undefined","required":false},{"name":"pt:footer","type":"PtValue | undefined","required":false},{"name":"pt:footer:loading","type":"PtValue | undefined","required":false},{"name":"pt:icon","type":"PtValue | undefined","required":false},{"name":"pt:icon:loading","type":"PtValue | undefined","required":false},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:loading","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:text","type":"PtValue | undefined","required":false},{"name":"pt:text:loading","type":"PtValue | undefined","required":false},{"name":"pt:title","type":"PtValue | undefined","required":false},{"name":"pt:title:loading","type":"PtValue | undefined","required":false}],"events":[],"slots":[],"exposed":[],"models":[],"cssProps":[{"name":"--gap","value":"14px","selector":".bb-toast","description":"space between stacked toasts (the peek in the collapsed pile)"},{"name":"--offset","value":"20px","selector":".bb-toast","description":"distance from the viewport corner; 14px under 600px wide"},{"name":"--width","value":"356px","selector":".bb-toast","description":"stack width; `auto` (edge to edge) under 600px"},{"name":"--lift","value":"-1","selector":".bb-toast__panel","description":"Direction sign, not elevation: +1 for a top-anchored stack, -1 for a bottom-anchored one. Every vertical term (stack offset, enter/exit slide) is multiplied by it, so one set of formulas serves both corners."},{"name":"--stack-y","value":"0px","selector":".bb-toast__panel","description":"resting offset up/down the pile; composed by the layout rules below"},{"name":"--stack-scale","value":"1","selector":".bb-toast__panel","description":"resting scale — behind toasts shrink 5% per position in the collapsed pile"},{"name":"--enter-y","value":"0px","selector":".bb-toast__panel","description":"the enter/exit slide term of the same transform"},{"name":"--swipe-amount","value":"0px","selector":".bb-toast__panel","description":"live drag offset, set inline while the user swipes to dismiss"},{"name":"--z","value":"1","selector":".bb-toast__panel","description":"stacking order, set inline (front toast highest)"},{"name":"--r","value":"min(var(--bb-radius), 10px)","selector":".bb-toast__panel","description":"Card corners. `border-radius` caps whatever lands here again, at 14px."},{"name":"--ring-size","value":"2px","selector":".bb-toast__panel","description":"focus ring on the close button"},{"name":"--bg","value":"var(--bb-panel)","selector":".bb-toast__panel","description":"card fill, and the close button's own fill"},{"name":"--border-color","value":"var(--bb-border)","selector":".bb-toast__panel","description":"Card edge, painted as an inset ring (the card carries no `border`)"},{"name":"--fg","value":"var(--bb-text)","selector":".bb-toast__panel","description":"title, text and close glyph"},{"name":"--icon-color","value":"var(--bb-text)","selector":".bb-toast__panel","description":"The status glyph only — the variants below re-point this and nothing else"},{"name":"--icon-color","value":"var(--bb-success)","selector":".bb-toast__panel--success"},{"name":"--icon-color","value":"var(--bb-info)","selector":".bb-toast__panel--info"},{"name":"--icon-color","value":"var(--bb-warn)","selector":".bb-toast__panel--warning"},{"name":"--icon-color","value":"var(--bb-danger)","selector":".bb-toast__panel--destructive"},{"name":"--icon-color","value":"color-mix(in oklab, var(--bb-text) 75%, transparent)","selector":".bb-toast__panel--default"}],"pt":{"parts":[{"name":"root","description":"One region per corner in use — a broadcast over the corners."},{"name":"panel","description":"One toast card — a broadcast."},{"name":"icon","description":"A toast's icon box: its `icon`, or the spinner while it is `loading`. Not rendered for a toast with neither, nor for a portal toast."},{"name":"content","description":"A toast's body column — title, text and actions, or the wrapper around a portal's content."},{"name":"title","description":"A toast's heading. A portal toast renders its own body and has neither `title` nor `text`."},{"name":"text","description":"A toast's body copy."},{"name":"footer","description":"The row of a toast's `actions`. Not rendered without actions, nor for a portal toast."},{"name":"action","description":"Every button of a toast's `actions`, at the button's root — a broadcast. Never the ✕ (`close`)."},{"name":"close","description":"A toast's ✕."}],"states":[{"name":"loading","description":"Per toast, on its card parts (every part but `root`): the toast is `loading` (the spinner shows in its `icon`)."}]},"tree":{"nodes":[{"name":"BbToastRegion","kind":"internal","vocabulary":"BbToast","bindings":[{"part":"root","target":"ol.bb-toast"}],"children":[{"name":"BbToastMessage","kind":"internal","children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbButton","kind":"public","vocabulary":"BbButton","bindings":[{"part":"root","target":"BbBaseButton"},{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"text","target":"span.bb-button__text"}],"cssProps":[{"name":"--h-xs","documented":true,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--icon-size-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--px-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--fs-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--r-xs","documented":false,"readBy":["bb-button","bb-button--xs"]},{"name":"--gap-xs","documented":false,"readBy":["bb-button","bb-button--xs","bb-button--sm-xs","bb-button--md-xs","bb-button--lg-xs","bb-button--xl-xs","bb-button--2xl-xs"]},{"name":"--h-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--icon-size-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--px-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--fs-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--r-sm","documented":false,"readBy":["bb-button","bb-button--sm"]},{"name":"--gap-sm","documented":false,"readBy":["bb-button","bb-button--sm","bb-button--sm-sm","bb-button--md-sm","bb-button--lg-sm","bb-button--xl-sm","bb-button--2xl-sm"]},{"name":"--h-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--icon-size-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--px-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--fs-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--r-md","documented":false,"readBy":["bb-button","bb-button--md"]},{"name":"--gap-md","documented":false,"readBy":["bb-button","bb-button--md","bb-button--sm-md","bb-button--md-md","bb-button--lg-md","bb-button--xl-md","bb-button--2xl-md"]},{"name":"--h-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--icon-size-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--px-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--fs-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--r-lg","documented":false,"readBy":["bb-button","bb-button--lg"]},{"name":"--gap-lg","documented":false,"readBy":["bb-button","bb-button--lg","bb-button--sm-lg","bb-button--md-lg","bb-button--lg-lg","bb-button--xl-lg","bb-button--2xl-lg"]},{"name":"--h-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--icon-size-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--px-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--fs-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--r-xl","documented":false,"readBy":["bb-button","bb-button--xl"]},{"name":"--gap-xl","documented":false,"readBy":["bb-button","bb-button--xl","bb-button--sm-xl","bb-button--md-xl","bb-button--lg-xl","bb-button--xl-xl","bb-button--2xl-xl"]},{"name":"--h-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--icon-size-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--px-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--fs-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--r-2xl","documented":false,"readBy":["bb-button","bb-button--2xl"]},{"name":"--gap-2xl","documented":false,"readBy":["bb-button","bb-button--2xl","bb-button--sm-2xl","bb-button--md-2xl","bb-button--lg-2xl","bb-button--xl-2xl","bb-button--2xl-2xl"]},{"name":"--h","documented":true,"readBy":["bb-button","bb-button--icon"]},{"name":"--icon-size","documented":true,"readBy":["bb-button__text","bb-spinner","bb-button__icon","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--px","documented":true,"readBy":["bb-button","bb-button__prepend-icon","bb-button__append-icon"]},{"name":"--fs","documented":true,"readBy":["bb-button"]},{"name":"--r","documented":true,"readBy":["bb-button"]},{"name":"--gap","documented":true,"readBy":["bb-button","bb-button__text","bb-spinner"]},{"name":"--bg","documented":true,"readBy":["bb-button"]},{"name":"--bg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg","documented":true,"readBy":["bb-button"]},{"name":"--border-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-color","documented":true,"readBy":["bb-button"]},{"name":"--ring-size","documented":true,"readBy":["bb-button"]},{"name":"--bw","documented":true,"readBy":["bb-button"]},{"name":"--fg-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-hover","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--fg-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--border-pressed","documented":true,"readBy":["bb-button","bb-base-button--disabled"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--opacity-disabled","documented":true,"readBy":["bb-button","bb-base-button--disabled","bb-button--loading"]},{"name":"--elev-tier","documented":true,"readBy":["bb-button--primary","bb-button--secondary","bb-button--outline","bb-button--destructive"]},{"name":"--elev","documented":true,"readBy":["bb-button"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]}]}]},"css":{"classes":{"bb-toast":["","--*","--bottom-center","--bottom-left","--bottom-right","--expanded","--top-center","--top-left","--top-right","__action","__close","__content","__content--portal","__footer","__icon","__inner","__panel","__panel--*","__panel--default","__panel--destructive","__panel--front","__panel--hidden","__panel--info","__panel--mounted","__panel--removed","__panel--success","__panel--swiping","__panel--warning","__text","__title"]},"locals":["--bg","--border-color","--color-gray-200","--enter-y","--fg","--front-height","--front-index","--gap","--height-before","--hit","--icon-color","--lift","--offset","--r","--ring-size","--safe-h","--safe-v","--stack-scale","--stack-y","--swipe-amount","--toast-height","--width","--z"]},"removed":[{"name":"placement","new":"position","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-toast.md","silent":true,"fix":{"kind":"valueMap","valueMap":{"bottom":"bottom-center","bottom-start":"bottom-left","bottom-end":"bottom-right","top":"top-center","top-start":"top-left","top-end":"top-right"}}},{"name":"theme","new":"variant","surface":"option","hint":"a `toast()` / `useToast().toast()` option, not a prop: `toast({ variant: 'success' })` (plus an `icon` for the tone to show)","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-toast.md","silent":true,"fix":{"kind":"manual"}},{"name":"timeout","new":"duration","surface":"option","hint":"a `toast()` option: `toast({ duration: 4000 })`; the default fell from 6000 to 4000 ms","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-toast.md","silent":true,"fix":{"kind":"manual"}},{"name":"showClose","new":"hideClose","surface":"option","hint":"a `toast()` option, polarity inverted: `showClose: false` → `hideClose: true`; `showClose: true` was the default, delete it","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-toast.md","silent":true,"fix":{"kind":"manual"}}],"renamed":[{"from":"placement","to":"position","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-toast.md","fix":{"kind":"valueMap","valueMap":{"bottom":"bottom-center","bottom-start":"bottom-left","bottom-end":"bottom-right","top":"top-center","top-start":"top-left","top-end":"top-right"}}}]},
|
|
530
530
|
{"name":"BbToastPortal","group":"Feedback","description":"Registers named slot content that toast() renders via `portal`.","referenceOnly":false,"hasGuide":false,"contract":"ai/BbToastPortal.md","source":"ai/source/BbToastPortal.md","props":[{"name":"name","type":"string","required":true,"description":"The name a toast passes as `portal: '<name>'` to render this content."}],"events":[],"slots":[{"name":"default","type":"BbToastPortalContext","fields":["toast: BbToast","props: Record<string, unknown>","close: () => void"]}],"exposed":[],"models":[]},
|
|
531
|
-
{"name":"BbTooltip","group":"Overlay","description":"Displays contextual helper text on interaction.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTooltip.md","source":"ai/source/BbTooltip.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the activator slot is not rendered and event listeners\nare attached programmatically to the referenced element."},{"name":"arrowPadding","type":"number | undefined","required":false,"default":"10","description":"Space the arrow will maintain to the edge of the tooltip bubble.\nUseful when the floating element has border radius so it won't appear broken"},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the tooltip within a bounding element
|
|
531
|
+
{"name":"BbTooltip","group":"Overlay","description":"Displays contextual helper text on interaction.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTooltip.md","source":"ai/source/BbTooltip.md","props":[{"name":"activator","type":"ElementOrComponentRef | undefined","required":false,"description":"External activator element or component ref.\nWhen provided, the activator slot is not rendered and event listeners\nare attached programmatically to the referenced element."},{"name":"arrowPadding","type":"number | undefined","required":false,"default":"10","description":"Space the arrow will maintain to the edge of the tooltip bubble.\nUseful when the floating element has border radius so it won't appear broken"},{"name":"boundary","type":"ElementOrComponentRefOrSelector | undefined","required":false,"description":"Constrains the tooltip within a bounding element: it stays inside it\nalongside its trigger (sideways for a tooltip above or below); away from\nthe trigger it may pass the edge, and it flips at the viewport only.\nAccepts an HTMLElement, a Vue component ref, or a CSS selector string."},{"name":"delay","type":"number | undefined","required":false,"default":"100","description":"Milliseconds a pointer rests on the activator before the tooltip shows\n(`0`: at once). Keyboard focus shows it at once, and so does a pointer\narriving while another tooltip shows or within 300 ms of one closing."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Disables the component"},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the tooltip's popover and content at mount instead of on the\nfirst open. The description screen readers hear exists from mount either\nway."},{"name":"hideArrow","type":"boolean | undefined","required":false,"default":"false","description":"Hides the tooltip arrow. A tooltip shows its arrow by default (it's the\none popover-family surface where an arrow is meaningful — a speech bubble\npointing at its anchor); set this to drop it."},{"name":"id","type":"string | undefined","required":false,"description":"Seed for the tooltip's internal id. It is **prefixed** (`bb_<id>`) and set\non the inner content element, not on the root — so\n`document.getElementById(theIdYouPassed)` finds nothing. Pass it to make\nthe generated id stable (SSR snapshots, tests), not to look the element\nup."},{"name":"modelValue","type":"boolean | undefined","required":false,"default":"false","description":"Used by v-model to show / hide the tooltip. A tooltip with no `v-model`\nstarts hidden and is driven by hover / focus."},{"name":"padding","type":"number | undefined","required":false,"default":"10","description":"Minimum empty space to keep from the edge of the page"},{"name":"placement","type":"Placement | undefined","required":false,"default":"\"top\"","values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end"],"description":"Position of the overlay in respect to the related activator."},{"name":"pt","type":"PtMap<BbTooltipPtPart, \"open\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:panel","type":"PtValue | undefined","required":false},{"name":"pt:panel:open","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:open","type":"PtValue | undefined","required":false},{"name":"text","type":"string | undefined","required":false,"description":"Text content of the component."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds"},{"name":"variant","type":"keyof TooltipVariantRegistry | undefined","required":false,"default":"\"default\"","values":["destructive","default"],"description":"Visual variant. `'default'` is the inverted (primary) bubble,\n`'destructive'` is the danger-tinted bubble for warnings. Any other\nstring is applied as a `bb-tooltip--<name>` class hook."},{"name":"width","type":"string | number | undefined","required":false,"description":"Caps the bubble's width (it still shrinks to its text): a number is px, a\npercentage is of the activator, any other CSS length passes through.\nReplaces the default `40ch` cap, also `--max-w` on the tooltip root."}],"events":[{"name":"update:modelValue","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"activator","type":"BbTooltipActivatorSlotProps","fields":["props: { ref: (reference: unknown) => void; }","disabled?: boolean","open: boolean","placement: Placement"],"description":"Replaces the default trigger element that opens the tooltip."},{"name":"default","type":"object","description":"Content rendered inside the tooltip bubble."}],"exposed":[],"models":[{"name":"modelValue","type":"boolean | undefined"}],"cssProps":[{"name":"--bg","value":"var(--bb-primary)","selector":".bb-tooltip","description":"* Variant paint, resolved on the root — where the theme tokens still hold * the page's own values — then applied by re-declaring the popover paint * tokens (--bb-panel/--bb-border/--bb-text) on the bubble and arrow. That * single override retints the bubble and every arrow orientation without * touching CommonPopover. * * The one theme token still re-declared below is `--bb-text`, on the * bubble only, for slot content that paints it directly rather than * inheriting `color`. * * It does NOT reach the DERIVED tokens. A custom property resolves its * var() references where it is DECLARED, so --bb-text-muted, --bb-muted, * --bb-hover and friends keep the values computed at :root against the * page panel — on an inverted bubble --bb-text-muted is 60% black on * black. Tooltips carry short text, which uses --bb-text and is fine; * a token-driven component dropped in the slot is not. Ruled not worth * re-deriving the set here (Q4.11, owner 2026-08-08) — a consumer who * needs it re-applies a scheme class on that scope, per variables.css. * * Default is the shadcn-style inverted bubble: primary surface, * primary-foreground text, borderless (border blends into the surface)."},{"name":"--fg","value":"var(--bb-primary-fg)","selector":".bb-tooltip"},{"name":"--border-color","value":"var(--bb-primary)","selector":".bb-tooltip"},{"name":"--fs","value":"calc(var(--bb-fs) - 2px)","selector":".bb-tooltip"},{"name":"--max-w","value":"40ch","selector":".bb-tooltip","description":"* Default measure. CommonPopover caps the bubble at the viewport minus its * `padding`, which on a wide screen is a single line running the width of * the page — unreadable, and the reason a hint needs a cap of its own. * `ch` (not px) so the column tracks the font: the same 40ch measure the * dropdown item description uses. The `width` prop overrides it by writing * `--max-w` inline on the content; a consumer can override it in CSS on * this root."},{"name":"--px","value":"12px","selector":".bb-tooltip"},{"name":"--py","value":"6px","selector":".bb-tooltip"}],"pt":{"parts":[{"name":"root","description":"The floating element, arrow included; a `class` on the component lands here."},{"name":"panel","description":"The bubble that holds the text."}],"states":[{"name":"open","description":"Component-wide: the tooltip is showing."}]},"tree":{"bindings":[{"part":"root","target":"CommonPopover"},{"part":"panel","target":"span.bb-tooltip__panel"}],"nodes":[{"name":"CommonPopover","kind":"internal"}]},"css":{"classes":{"bb-tooltip":["","--*","__panel"],"bb-tooltip-escape":[""]},"locals":["--color-gray-200","--fg","--fs","--max-w","--px","--py"]},"removed":[{"name":"block","new":null,"since":"3.0.0-alpha.9","migration":"ai/guides/migration/components/bb-tooltip.md","silent":true,"fix":{"kind":"remove"}},{"name":"showClose","new":null,"since":"3.0.0-alpha.9","migration":"ai/guides/migration/components/bb-tooltip.md","silent":true,"fix":{"kind":"remove"}},{"name":"theme","new":"variant","since":"3.0.0-alpha.9","migration":"ai/guides/migration/components/bb-tooltip.md","silent":true,"fix":{"kind":"rename"}},{"name":"timeout","new":"delay","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-tooltip.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"theme","to":"variant","since":"3.0.0-alpha.9","migration":"ai/guides/migration/components/bb-tooltip.md","fix":{"kind":"rename"}},{"from":"timeout","to":"delay","since":"3.0.0-alpha.1","migration":"ai/guides/migration/components/bb-tooltip.md","fix":{"kind":"rename"}}]},
|
|
532
532
|
{"name":"BbTree","group":"Navigation","description":"Renders hierarchical expandable tree structures.","referenceOnly":false,"hasGuide":true,"contract":"ai/BbTree.md","source":"ai/source/BbTree.md","props":[{"name":"expandable","type":"BbTreeExpandable<Meta> | undefined","required":false,"description":"Defines nodes as expandable. It can be a global boolean, or a function\nthat receives the node, its depth, and its parent and returns a boolean."},{"name":"expandedItems","type":"any[] | undefined","required":false,"default":"[]","description":"Live expansion state: the list of expanded node values (see `itemValue`).\nBranch nodes not explicitly collapsed via `expanded: false` seed the list\nwhen they first appear in `items`; from then on this model is the single\nsource of truth."},{"name":"items","type":"BbTreeItem<Meta>[]","required":true,"default":"[]","description":"Tree-like structure of nodes to render."},{"name":"itemValue","type":"ItemAccessor<Meta> | undefined","required":false,"default":"the whole `meta` object","description":"Identity of a node, used to hash entries of `expandedItems` and to\nname per-node slots. A string reads that key from `meta`; a function\nreceives `meta` and returns the value."},{"name":"pt","type":"PtMap<BbTreePtPart, \"expanded\"> | undefined","required":false,"description":"Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:<part>` row."},{"name":"pt:item","type":"PtValue | undefined","required":false},{"name":"pt:item:expanded","type":"PtValue | undefined","required":false},{"name":"pt:root","type":"PtValue | undefined","required":false},{"name":"pt:root:expanded","type":"PtValue | undefined","required":false}],"events":[{"name":"update:expandedItems","signature":"(value: any[]): void","description":"Emitted with the new value whenever `v-model:expandedItems` changes."}],"slots":[{"name":"default","type":"BbTreeNodeSlotProps<Meta>","fields":["meta: Meta","item: BbTreeItem<Meta>","parent?: BbTreeItem<Meta>","index: number","depth: number","value: any","expanded: boolean","expandable: boolean","toggleExpanded: () => void","expandProps: BbTreeExpandControllerProps"]},{"name":"<value>","type":"BbTreeNodeSlotProps<Meta>","description":"One node, by its resolved `item-value` (string or number) through `slotKey`; beats `<depth>`, which beats `default`.","dynamic":true},{"name":"<depth>","type":"BbTreeNodeSlotProps<Meta>","description":"Every node at one depth (`0` = root); a numeric value can share this name.","dynamic":true},{"name":"<value>:children","type":"BbTreeNodeSlotProps<Meta>","description":"One node's children container, stopping the recursion there; beats `<depth>:children`. Renders for leaves too.","dynamic":true},{"name":"<depth>:children","type":"BbTreeNodeSlotProps<Meta>","description":"The children container of every node at one depth.","dynamic":true}],"exposed":[],"models":[{"name":"expandedItems","type":"any[] | undefined"}],"cssProps":[{"name":"--indent","value":"0px","selector":".bb-tree","description":"* Layout knobs, sealed on the root. `--indent` shifts every children * container; `--gap` adds vertical rhythm between sibling nodes. Both * default to zero so the tree is layout-neutral out of the box."},{"name":"--gap","value":"0px","selector":".bb-tree"}],"pt":{"parts":[{"name":"root","description":"The tree."},{"name":"item","description":"One node — a broadcast resolved per node at every depth. Its content is your slot markup, so there is no `icon`."}],"states":[{"name":"expanded","description":"Per node, on `item`: an expanded branch. Leaves count as expanded."}]},"tree":{"nodes":[{"name":"BbTreeLevel","kind":"internal"}]},"css":{"classes":{"bb-tree":["","__children","__content","__item","__item--depth-*","__item--expanded","__item--leaf","__row"]},"locals":["--color-gray-200","--gap","--indent"]},"attrTargets":["div"],"removed":[{"name":"<x>-children","new":"<x>:children","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/components/bb-tree.md","silent":true,"fix":{"kind":"rename"}},{"name":"pt:item:open","new":"pt:item:expanded","surface":"pt","migration":"ai/guides/migration/components/bb-tree.md","silent":true,"fix":{"kind":"rename"}},{"name":"pt:root:open","new":"pt:root:expanded","surface":"pt","migration":"ai/guides/migration/components/bb-tree.md","silent":true,"fix":{"kind":"rename"}}],"renamed":[{"from":"<x>-children","to":"<x>:children","surface":"slot","since":"3.0.0-beta.41","migration":"ai/guides/migration/components/bb-tree.md","fix":{"kind":"rename"}},{"from":"pt:item:open","to":"pt:item:expanded","surface":"pt","migration":"ai/guides/migration/components/bb-tree.md","fix":{"kind":"rename"}},{"from":"pt:root:open","to":"pt:root:expanded","surface":"pt","migration":"ai/guides/migration/components/bb-tree.md","fix":{"kind":"rename"}}]},
|
|
533
533
|
{"name":"ChipsBox","group":"Layout & Utility","description":"Layout helper for rendering chip collections.","referenceOnly":true,"hasGuide":false,"contract":"ai/ChipsBox.md","source":"ai/source/ChipsBox.md","props":[{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Whether the component is disabled."},{"name":"options","type":"Option[]","required":true,"description":"List of options to render as chips."},{"name":"passthrough","type":"PtBindings<\"badge\", \"highlighted\"> | undefined","required":false,"description":"Passthrough bindings resolved by the public control: `badge` is one\nchip, resolved per chip through `part()` with its `highlighted` and its\noption's raw item. Internal."},{"name":"size","type":"\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | undefined","required":false,"description":"The size of the chips."}],"events":[{"name":"option:unselected","signature":"(option: Option): void","description":"Emitted when the user clears (removes) an option chip."}],"slots":[],"exposed":[{"name":"blur","type":"() => void"},{"name":"confirmOption","type":"() => void"},{"name":"focusByHash","type":"(hash: string) => void"},{"name":"focusFirst","type":"() => void"},{"name":"focusFirstSelected","type":"() => void"},{"name":"focusLast","type":"() => void"},{"name":"focusLastSelected","type":"() => void"},{"name":"focusNext","type":"() => void"},{"name":"focusPrevious","type":"() => Promise<void>"},{"name":"getHighlighted","type":"() => Option | undefined"}],"models":[],"tree":{"bindings":[{"part":"badge","target":"BbBadge"}],"nodes":[{"name":"BbBadge","kind":"public","vocabulary":"BbBadge","bindings":[{"part":"spinner","target":"BbSpinner"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"button.bb-badge__clear"}],"cssProps":[{"name":"--bg","documented":true,"readBy":["bb-badge"]},{"name":"--fg","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--bw","documented":true,"readBy":["bb-badge","bb-badge__clear"]},{"name":"--border-color","documented":false,"readBy":["bb-badge"]},{"name":"--ring-color","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--ring-size","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--min-size-md","documented":true,"readBy":["bb-badge"]},{"name":"--min-size","documented":true,"readBy":["bb-badge"]},{"name":"--elev","documented":true,"readBy":["bb-badge","bb-badge__clear","bb-badge__body","bb-badge--highlighted"]},{"name":"--r","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--fs","documented":true,"readBy":["bb-badge"]},{"name":"--icon-size","documented":true,"readBy":["bb-badge__icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge__clear"]},{"name":"--gap","documented":true,"readBy":["bb-badge","bb-badge__body","bb-badge__trailing","bb-badge__clear"]},{"name":"--px","documented":true,"readBy":["bb-badge","bb-badge--icon","bb-badge__prepend-icon","bb-badge__append-icon","bb-badge--clearable"]},{"name":"--clear-size","documented":true,"readBy":["bb-badge__clear","bb-icon"]},{"name":"--bg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--fg-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--border-disabled","documented":true,"readBy":["bb-badge__body","bb-base-button--disabled","bb-badge--loading"]},{"name":"--pad-left","documented":true,"readBy":["bb-badge__body"]},{"name":"--pad-right","documented":false,"readBy":["bb-badge__body","bb-badge__clear"]},{"name":"--size","documented":false}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BadgeBodyContent","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","repeated":true}]}]}]}},
|
|
534
534
|
{"name":"ClearableButton","group":"Inputs","description":"Action button for clearing current input value.","referenceOnly":true,"hasGuide":false,"contract":"ai/ClearableButton.md","source":"ai/source/ClearableButton.md","props":[{"name":"label","type":"string | undefined","required":false,"description":"Accessible label announced by screen readers.\nFalls back to localized `common.clearLabel` when omitted."}],"events":[],"slots":[],"exposed":[],"models":[],"tree":{"nodes":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},"css":{"classes":{"bb-clearable-button":[""]},"locals":["--color-gray-200","--ring-color"]},"attrTargets":["button"]},
|
|
535
535
|
{"name":"CommaBox","group":"Layout & Utility","description":"Utility for comma-separated content rendering.","referenceOnly":true,"hasGuide":false,"contract":"ai/CommaBox.md","source":"ai/source/CommaBox.md","props":[{"name":"options","type":"Option[]","required":true,"description":"List of options to render as comma-separated text items."},{"name":"passthrough","type":"PtBindings<\"comma\", \"highlighted\"> | undefined","required":false,"description":"Passthrough bindings resolved by the public control: `comma` is one\nentry, resolved per entry through `part()` with its `highlighted` and its\noption's raw item. Internal."}],"events":[{"name":"option:unselected","signature":"(option: Option): void","description":"Emitted when the user removes an option."}],"slots":[],"exposed":[{"name":"blur","type":"() => void"},{"name":"confirmOption","type":"() => void"},{"name":"focusByHash","type":"(hash: string) => void"},{"name":"focusFirst","type":"() => void"},{"name":"focusFirstSelected","type":"() => void"},{"name":"focusLast","type":"() => void"},{"name":"focusLastSelected","type":"() => void"},{"name":"focusNext","type":"() => void"},{"name":"focusPrevious","type":"() => Promise<void>"},{"name":"getHighlighted","type":"() => Option | undefined"}],"models":[]},
|
|
536
536
|
{"name":"CommonField","group":"Reference Only - Base Primitive","description":"Internal wrapper for labels, hints, validation, and shared input layout.","referenceOnly":true,"hasGuide":false,"contract":"ai/CommonField.md","source":"ai/source/CommonField.md","props":[{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Whether the inner control exposes a clear action."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Apply the compact density variant to the container."},{"name":"counter","type":"CharacterCounter | undefined","required":false,"description":"The character counter (LI-5) from `useCharacterCounter`: rendered at the\nend of the hint row, visible whether or not the hint is. Its screen-reader\nlabel joins `ariaDescribedby` after the hint."},{"name":"description","type":"string | undefined","required":false,"description":"Always-visible muted text between the label and the input; its id joins\nthe input slot's `ariaDescribedby` after the error / warning ids, before\nthe hint. One line above the field in `floating` label mode, a second\nline under the label in `inside` mode."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Whether the inner control is disabled."},{"name":"errors","type":"string | string[] | undefined","required":false,"description":"Messages under the input, a string or array, one per line, in an\n`aria-live=\"polite\"` region. While non-empty, their container id is\nexposed to the input slot as `ariaDescribedby`, first in the list."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Forces the error state independently of `errors`, useful to pre-style the container."},{"name":"hasValue","type":"boolean | undefined","required":false,"default":"false","description":"Whether the inner control currently contains a value."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Forces the warning state independently of `warnings`. Same chrome as\nerrors but with `--bb-warn`; errors take priority when both are set."},{"name":"hideLabel","type":"boolean | undefined","required":false,"default":"false","description":"Hide the visual label while keeping it available to assistive technology."},{"name":"hint","type":"string | undefined","required":false,"description":"Hint text rendered below the input. While shown, its id is exposed to the input slot via\n`ariaDescribedby` — last in the list, after any error/warning ids and the description id."},{"name":"id","type":"string | undefined","required":false,"description":"Explicit id for the container and associated input. Falls back to an auto-generated id when omitted."},{"name":"inputAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the control in a side-by-side row; not\n`inputPosition`, the horizontal one. Omitted, the control's first line\nmeets the label's."},{"name":"inputPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"'left'","description":"Horizontal alignment of the input column when the layout is side by side.\nUnset, it follows the layout: `'right'` in a horizontal/ratio split (beside\nthe left-hand label), `'left'` otherwise — and `layout` is `'vertical'`\nby default, so the effective default is `'left'`."},{"name":"label","type":"string","required":true,"description":"Visible label text for the field. Also used to derive a fallback name."},{"name":"labelAlign","type":"FieldCrossAlign | undefined","required":false,"values":["top","center","bottom"],"description":"Vertical position of the label block in a side-by-side row; not\n`labelPosition`, the horizontal one. Omitted, the label's first line\nmeets the control's."},{"name":"labelMode","type":"\"outside\" | \"floating\" | \"inside\" | undefined","required":false,"description":"Label rendering mode."},{"name":"labelPosition","type":"\"left\" | \"center\" | \"right\" | undefined","required":false,"default":"\"left\"","description":"Horizontal alignment for the label column."},{"name":"labelTag","type":"LabelTag | undefined","required":false,"default":"\"label\"","values":["span","label","legend"],"description":"Element used for the label: `label` (default), `legend` inside a\n`fieldset` container, or `span` when the text must not steal the click\nbecause the control already carries its own label."},{"name":"layout","type":"FieldLayout | undefined","required":false,"default":"\"vertical\"","description":"Controls label/input layout.\nAccepts `'vertical'`, `'horizontal'`, `'auto'`, `'label-fill'`, `'input-fill'`,\nor a two-token ratio pattern such as `\"xx xxxxx\"` that sizes the\nlabel/input columns by token length.\nAn unrecognized value warns and falls back to `'auto'`."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Whether the inner control is in a loading state."},{"name":"mobile","type":"boolean | undefined","required":false,"default":"false","description":"Whether the inner control is in mobile viewport mode."},{"name":"name","type":"string | undefined","required":false,"description":"Explicit name attribute forwarded to the input. When omitted, a slug derived from `label` is used."},{"name":"passthrough","type":"(Partial<Record<FieldPtPart, Record<string, unknown>>> & { part?: ((part: FieldPtPart, states: Partial<Record<string, boolean>>, item?: unknown) => Record<string, unknown>) | undefined; rootAttrs?: Record<string, unknown> | undefined; } & Partial<Record<\"counter\", Record<string, unknown>>>) | undefined","required":false,"description":"Passthrough bindings resolved by the public control, one `v-bind` object\nper part (`root`, `label`, `description`, `message`: the errors OR the\nwarnings), bound last. Internal: the public `pt:*` props are the surface."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Whether the inner control is readonly."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Swap the label and input columns."},{"name":"showAsterisk","type":"boolean | undefined","required":false,"default":"false","description":"Render the required marker (`BbAsterisk`) after the label text. The\ncontrol decides (useFormBinding); a `#label` slot gets it as\n`showAsterisk` and renders its own."},{"name":"showHint","type":"boolean | undefined","required":false,"default":"false","description":"Keep the hint permanently visible, regardless of focus."},{"name":"ssrMarker","type":"string | undefined","required":false,"description":"The SSR-transfer marker of a provider-backed group (Q56.1): set, it\nrenders as the FIRST child of the root, where the hydrating group reads\nits payload key (`src/composables/ssrMarker.ts`). `''` still renders the\n(empty) marker; only an absent prop renders none."},{"name":"tag","type":"ContainerTag | undefined","required":false,"default":"\"span\"","values":["div","span","label","fieldset"],"description":"Element used for the inner wrapper: `span` (default) to remain inline,\n`div` for a block wrapper, `fieldset` for grouped controls (pair it with\n`labelTag=\"legend\"`), or `label` to make the whole wrapper activate the\ncontrol."},{"name":"warnings","type":"string | string[] | undefined","required":false,"description":"Warning messages under the input, one per line, in their own `aria-live`\nregion and `--bb-text-warn` (the chrome stays `--bb-warn`). A non-empty\nlist implies the warning state; errors win. Their container id joins the\ninput slot's `ariaDescribedby` after the errors."}],"events":[],"slots":[{"name":"description","type":"CommonFieldLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean","showAsterisk?: boolean"],"description":"Replaces the description text. Rendering the slot alone (no `description`\nprop) shows the description region and wires it into `aria-describedby`.\nStacks below the label, never beside it."},{"name":"input","type":"CommonFieldInputSlotProps","fields":["id: string","name: string","hasErrors: boolean","hasWarnings: boolean","ariaDescribedby: string","ariaLabelledby: string"],"description":"The form control to render, positioned in the input column. Receives pre-computed\nwiring attributes so the inner input can be correctly associated with the label and hint."},{"name":"label","type":"CommonFieldLabelSlotProps","fields":["text: string","hasErrors: boolean","hasWarnings: boolean","showAsterisk?: boolean"],"description":"Replaces the default label text. The outer label element and its `for` association are always rendered."}],"exposed":[],"models":[],"cssProps":[{"name":"--ctrl-line","value":"calc(var(--bb-input-h) / 2)","selector":".bb-field","description":"* First-line alignment of side-by-side fields (Q56.44) * ----------------------------------------------------------------- * In a side-by-side layout the label's FIRST line sits on the control's * first line: the text line of a box, the glyph of a toggle, the first * option of a group. Both sides are anchored to the top of the row, so a * taller label column (a description, a wrapped label) never pulls the * control down to its middle; then whichever side's first line is higher * is pushed down by the difference. * * `--ctrl-line` is where the control's first line is centred, from the * top of the control column: half the box height here, and each control * whose first line sits elsewhere (a textarea, a toggle, a group, the * stars) declares its own on the field root. The label's is half its * line box, `--bb-label-lh`. All of it is tokens, so compact and a * custom scale follow."}],"tree":{"bindings":[{"part":"root","target":"div.bb-field"},{"part":"label","target":"component"},{"part":"description","target":"span.bb-field__description"},{"part":"hint","target":"span.bb-field__hint"},{"part":"counter","target":"span.bb-field__counter"},{"part":"message","target":"div.bb-field__message"}],"nodes":[{"name":"BbAsterisk","kind":"public"}]},"css":{"classes":{"bb-field":["","--at-limit","--clearable","--compact","--description","--disabled","--errors","--floating-label","--has-value","--hint","--inside-label","--loading","--mobile","--near-limit","--readonly","--warnings","__counter","__counter--*","__counter--limit","__counter--near","__counter-text","__description","__error","__errors","__errors-wrap","__errors-wrap--open","__hint","__hint-wrap","__input-wrapper","__input-wrapper--*","__input-wrapper--align-*","__input-wrapper--align-bottom","__input-wrapper--align-center","__input-wrapper--align-top","__input-wrapper--center","__input-wrapper--right","__label","__label--*","__label--align-*","__label--align-bottom","__label--align-center","__label--align-top","__label--hidden","__label-text","__layout","__layout--*","__layout--aligned","__layout--horizontal","__layout--reverse","__layout--vertical","__legend","__message","__meta","__warning","__warnings","__warnings-wrap","__warnings-wrap--open"]},"locals":["--color-gray-200","--ctrl-line","--fl-desc-lh","--fl-edge-l","--fl-edge-r","--fl-h","--fl-icon-r","--fl-label-line","--fl-nudge","--fl-over-edge-l","--fl-over-l","--fl-over-r","--fl-prefix","--fl-prepend-icon","--fl-rest-l","--fl-rest-r","--fl-suffix","--inside-label-edge-l","--inside-label-edge-r","--inside-label-offset-l","--inside-label-offset-l-prefix","--inside-label-offset-r","--inside-label-offset-r-suffix","--label-bg","--label-outer","--star"]},"attrTargets":["div"]},
|
|
537
537
|
{"name":"CommonFieldInput","group":"Layout & Utility","description":"Shared wrapper utility for composed input controls.","referenceOnly":true,"hasGuide":false,"contract":"ai/CommonFieldInput.md","source":"ai/source/CommonFieldInput.md","props":[{"name":"active","type":"boolean | undefined","required":false,"default":"false","description":"Whether the input is in active/focused state (e.g. open dropdown)."},{"name":"append:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the end of the input."},{"name":"clearable","type":"boolean | undefined","required":false,"default":"false","description":"Whether the input is clearable."},{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Whether the input is in compact mode."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Whether the input is disabled."},{"name":"hasErrors","type":"boolean | undefined","required":false,"default":"false","description":"Whether the input has validation errors."},{"name":"hasValue","type":"boolean | undefined","required":false,"default":"undefined","description":"Whether the wrapped control currently has a value that can be cleared."},{"name":"hasWarnings","type":"boolean | undefined","required":false,"default":"false","description":"Whether the input has a warning state. Visually identical to `hasErrors`\nbut uses `--bb-warn` chrome; errors take priority when both are set."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Whether the input is in a loading state."},{"name":"passthrough","type":"PtBindings<FieldInputPtPart> | undefined","required":false,"description":"Passthrough bindings resolved by the public control, one `v-bind` object\nper part: `box`, `icon` (both content icons, never the clear button or\nthe state glyphs), `spinner`, `prefix`, `suffix`, `clear`. Bound last.\nInternal."},{"name":"prepend:icon","type":"string | undefined","required":false,"description":"Name of the icon to be added at the start of the input."},{"name":"preventFocus","type":"boolean | undefined","required":false,"default":"false","description":"Prevents the wrapper from focusing the inner input on click."},{"name":"readonly","type":"boolean | undefined","required":false,"default":"false","description":"Whether the input is readonly."},{"name":"reserveAppendSpace","type":"boolean | undefined","required":false,"default":"false","description":"Keeps trailing action/icon space reserved even when currently empty."},{"name":"variant","type":"InputVariantType | undefined","required":false,"default":"\"outline\"","values":["outline","secondary","none","ghost"],"description":"Visual variant of the field box, with the `BbButton` names and tokens.\nColours only, so a form never reflows; `'ghost'` has no border in any\nstate, and `'none'` takes no look at all (you own hover, focus and the\nstates). Register more with the plugin's `inputVariants`."}],"events":[{"name":"click:clear","signature":"(): void","description":"Emitted when the clear button is clicked."},{"name":"container:click","signature":"(): void","description":"Emitted when the input is clicked."}],"slots":[{"name":"append","type":"object","description":"Wraps the trailing suffix area. Renders a `<span>` containing the `suffix` sub-slot by default."},{"name":"append:outer","type":"object","description":"Content appended outside the field box."},{"name":"default","type":"object","description":"The main input element (e.g. `<input>` or `<textarea>`)."},{"name":"prefix","type":"object","description":"Content rendered as an inline text prefix inside the prepend span."},{"name":"prepend","type":"object","description":"Wraps the leading prefix area. Renders a `<span>` containing the `prefix` sub-slot by default."},{"name":"prepend:outer","type":"object","description":"Content prepended outside the field box."},{"name":"suffix","type":"object","description":"Content rendered as an inline text suffix inside the append span."}],"exposed":[],"models":[],"cssProps":[{"name":"--bg","value":"transparent","selector":".bb-field-input","description":"the shell's fill"},{"name":"--bg-hover","value":"var(--bg)","selector":".bb-field-input","description":"fill under the pointer"},{"name":"--bg-focus","value":"var(--bg)","selector":".bb-field-input","description":"fill while focus is inside, and under --active"},{"name":"--bg-disabled","value":"var(--bg)","selector":".bb-field-input","description":"fill while disabled; beats hover and focus"},{"name":"--fg-disabled","value":"color-mix(in oklab, var(--bb-text) 45%, var(--bb-panel))","selector":".bb-field-input","description":"value, affixes and icons while disabled — BbButton's disabled label grey"},{"name":"--border-color","value":"transparent","selector":".bb-field-input","description":"The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box=\"[--border-color:…]\"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`)."},{"name":"--border-focus","value":"var(--border-color)","selector":".bb-field-input","description":"frame while focused, or --active"},{"name":"--ring-size","value":"0px","selector":".bb-field-input","description":"ring width; 0 is a variant declining the ring"},{"name":"--ring-color","value":"var(--bb-ring)","selector":".bb-field-input","description":"ring colour; state owns it, not variants"},{"name":"--elev","value":"0 0 0 0 transparent","selector":".bb-field-input","description":"Resting lift, composed UNDER the ring at every box-shadow site below. `0 0 0 0 transparent` and not `none`, so the shadow list keeps a constant length and stays interpolable whatever a variant assigns — the same reason `--bb-elev` itself ships that value."},{"name":"--frost","value":"none","selector":".bb-field-input","description":"Plate frost — a full `backdrop-filter` value (see --bb-surface-filter). Routed through a local rather than read from the token directly, so a chrome-less variant can decline it: frosting a ghost field gives it the plate it is contractually not supposed to have."},{"name":"--inside-label-clearance","value":"0px","selector":".bb-field-input__box","description":"Height and top padding added above the text for a label rendered inside the box. Zero here; the `--inside-label` rules at the bottom of this file raise it to one label line, or two with a description."}],"tree":{"bindings":[{"part":"box","target":"span.bb-field-input__box"},{"part":"prefix","target":"span.bb-field-input__prefix"},{"part":"icon","target":"BbIcon"},{"part":"clear","target":"ClearableButton"},{"part":"spinner","target":"BbSpinner"},{"part":"suffix","target":"span.bb-field-input__suffix"}],"nodes":[{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"WarningIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-warning-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"ClearableButton","kind":"internal","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"BbSpinner","kind":"public","children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]},"css":{"classes":{"bb-field-input":["","--*","--active","--clearable","--compact","--disabled","--errors","--ghost","--loading","--readonly","--secondary","--warnings","__append-icon","__box","__clear","__icon-spacer","__icon-spacer--reserved","__prefix","__prepend-icon","__spinner","__suffix"],"bb-field-input-icon":[""],"bb-field-input-icon-enter-active":[""],"bb-field-input-icon-enter-from":[""],"bb-field-input-icon-leave-active":[""],"bb-field-input-icon-leave-to":[""]},"locals":["--bg","--bg-disabled","--bg-focus","--bg-hover","--border-color","--border-disabled","--border-focus","--color-gray-200","--elev","--fg-disabled","--frost","--h","--inside-label-clearance","--ring-color","--ring-size","--state-border","--state-frame"]},"attrTargets":["span"]},
|
|
538
|
-
{"name":"CommonPopover","group":"Overlay","description":"Shared popover behavior and structure primitive.","referenceOnly":true,"hasGuide":false,"contract":"ai/CommonPopover.md","source":"ai/source/CommonPopover.md","props":[{"name":"anchor","type":"any","required":false,"description":"The element the popover positions itself relative to.\nAccepts an HTMLElement, a Vue component ref, or a virtual element with a `getBoundingClientRect` method."},{"name":"arrowPadding","type":"number | undefined","required":false,"description":"Space the arrow will maintain to the edge of the dropdown.\nUseful when the floating element has border radius so it won't appear broken"},{"name":"boundary","type":"string | Record<string, any> | HTMLElement | null | undefined","required":false,"description":"
|
|
538
|
+
{"name":"CommonPopover","group":"Overlay","description":"Shared popover behavior and structure primitive.","referenceOnly":true,"hasGuide":false,"contract":"ai/CommonPopover.md","source":"ai/source/CommonPopover.md","props":[{"name":"anchor","type":"any","required":false,"description":"The element the popover positions itself relative to.\nAccepts an HTMLElement, a Vue component ref, or a virtual element with a `getBoundingClientRect` method."},{"name":"arrowPadding","type":"number | undefined","required":false,"description":"Space the arrow will maintain to the edge of the dropdown.\nUseful when the floating element has border radius so it won't appear broken"},{"name":"boundary","type":"string | Record<string, any> | HTMLElement | null | undefined","required":false,"description":"Keeps the popover inside this element alongside its anchor (sideways\nabove or below, vertically beside it); away from the anchor it may pass\nthe edge, and only the viewport flips it. It never clamps the size\n(that is `overflowBoundary`). An HTMLElement, component ref or selector."},{"name":"bubbleAttrs","type":"Record<string, unknown> | ((space: CommonPopoverAvailableSpace) => Record<string, unknown>) | undefined","required":false,"description":"Attributes bound on the bubble (`class`, `style`, `inert`, …) after its\nown class, so the owner can make the bubble its layout container. The\nfunction form receives the default slot's free space (for a height cap)."},{"name":"dialog","type":"boolean | undefined","required":false,"default":"false","description":"Renders the popover as a `<dialog>` element (modal overlay) instead of a `<span>` with the Popover API."},{"name":"disableFlip","type":"boolean | undefined","required":false,"default":"false","description":"Disables the automatic flip to the opposite side when the popover\nwould overflow (flipping is on by default)."},{"name":"eager","type":"boolean | undefined","required":false,"default":"false","description":"Renders the bubble's content at mount instead of on the first open.\nEither way it stays rendered once it has been."},{"name":"forceAutoUpdate","type":"boolean | undefined","required":false,"default":"false","description":"Keeps floating-ui's `autoUpdate` running while closed (by default only an\nopen popover tracks, so idle ones attach no listeners). Only when the\nanchor moves while closed and the next open must be exact."},{"name":"hideArrow","type":"boolean | undefined","required":false,"default":"false","description":"Hides the arrow indicator."},{"name":"modelValue","type":"boolean | undefined","required":false,"default":"false","description":"Used by v-model to show / hide the bubble. Closed until the owning\ncomponent opens it."},{"name":"offset","type":"number | undefined","required":false,"description":"Space the floating container will maintain from the activator."},{"name":"overflowBoundary","type":"string | Record<string, any> | HTMLElement | null | undefined","required":false,"description":"The element the `size` middleware measures free space against\n(`availableHeight` / `availableWidth`); defaults to the clipping\nancestors, whatever `boundary` is. An HTMLElement, a component ref or a\nCSS selector."},{"name":"padding","type":"number | undefined","required":false,"default":"0","description":"Minimum empty space to keep from the edge of the page"},{"name":"placement","type":"Placement | undefined","required":false,"values":["top","bottom","left","right","top-start","top-end","right-start","right-end","bottom-start","bottom-end","left-start","left-end"],"description":"Position of the overlay in respect to the related activator."},{"name":"tag","type":"PopoverTag | undefined","required":false,"default":"\"div\"","values":["div","span"],"description":"Element of the wrapper and of the bubble (`dialog` when `dialog` is set).\nThe wrapper is `position: fixed` either way: `div` for block content,\n`span` where only phrasing content is valid (`CommonField`'s inline\ncontrol column)."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"How long the transition has to last in milliseconds"}],"events":[{"name":"hidden","signature":"(): void","description":"Emitted once the popover has left the top layer after its close transition."},{"name":"hide","signature":"(): void","description":"Emitted as soon as the popover starts to close (the model becomes `false`)."},{"name":"show","signature":"(): void","description":"Emitted as soon as the popover starts to open (the model becomes `true`)."},{"name":"shown","signature":"(): void","description":"Emitted once the popover is open and its open transition has finished."},{"name":"update:modelValue","signature":"(value: boolean): void","description":"Emitted with the new value whenever `v-model` changes."}],"slots":[{"name":"default","type":"CommonPopoverAvailableSpace","fields":["availableWidth: number","availableHeight: number"],"description":"Content rendered inside the popover bubble.\n\nReceives the free space between the anchor and the boundary edge for the\nresolved placement, so the content can cap its own scroll container.\nBoth are `undefined` until the first reposition measurement."}],"exposed":[],"models":[{"name":"modelValue","type":"boolean | undefined"}],"css":{"classes":{"bb-common-popover":["","--*","--no-arrow","--open","__arrow","__bubble"]},"locals":["--arrow-h","--arrow-offset-x","--arrow-w","--bg","--border-color","--bubble-border-w","--color-gray-200","--page-padding","--transition-duration"]}},
|
|
539
539
|
{"name":"CommonTimeSelector","group":"Inputs","description":"Shared hour/minute(/second/AM-PM) time rail used by BbDatePicker, BbTimePicker and BbTimePickerInput.","referenceOnly":true,"hasGuide":false,"contract":"ai/CommonTimeSelector.md","source":"ai/source/CommonTimeSelector.md","props":[{"name":"ampm","type":"boolean | undefined","required":false,"default":"false","description":"12-hour hour column plus an AM/PM column; emitted hours stay 24-hour."},{"name":"disabled","type":"boolean | undefined","required":false,"default":"false","description":"Every column is inert: nothing can be picked."},{"name":"hour","type":"string","required":true,"description":"Current hour as a 24-hour field string (may be empty)."},{"name":"max","type":"string | undefined","required":false,"description":"Latest selectable time, `HH:mm`; the same rules as `min`."},{"name":"meridiem","type":"string | undefined","required":false,"description":"Current meridiem field text (the locale's word or `AM`/`PM`, may be empty)."},{"name":"min","type":"string | undefined","required":false,"description":"Earliest selectable time, `HH:mm` (minute-granular, seconds ignored). An\nentry no in-range time can use is disabled: an hour with no grid minute\nin range, a minute out of range for the selected hour (any hour while\nnone is), an AM / PM half with no hour."},{"name":"minute","type":"string","required":true,"description":"Current minute field string (may be empty)."},{"name":"passthrough","type":"PtBindings<\"header\" | \"item\" | \"cellColumnHeader\", \"disabled\" | \"selected\"> | undefined","required":false,"description":"The owning picker's passthrough resolver: `header` on the readout,\n`cellColumnHeader` on each column's letters, `item` per entry with\n`selected` / `disabled`. Internal."},{"name":"second","type":"string","required":true,"description":"Current second field string (may be empty)."},{"name":"seconds","type":"boolean | undefined","required":false,"default":"false","description":"Renders the seconds column."},{"name":"step","type":"number | undefined","required":false,"description":"Minute-column granularity; off-grid values highlight nothing."}],"events":[{"name":"select","signature":"(payload: { unit: TimeUnit; value: string; }): void","description":"A column entry was chosen. `hour` is always the 24-hour value (already\ncombined with the meridiem in `ampm` mode); `meridiem` carries `AM`/`PM`.\nNumeric values arrive zero-padded."}],"slots":[],"exposed":[],"models":[],"cssProps":[{"name":"--time-row-h","value":"28px","selector":".bb-time-selector"},{"name":"--time-col-w","value":"44px","selector":".bb-time-selector"},{"name":"--time-mark","value":"24px","selector":".bb-time-selector","description":"Visible mark = the day-cell mark (--cell - 4). Hit area stays the full row; only the painted knob matches the calendar's."}],"tree":{"bindings":[{"part":"header","target":"div.bb-time-selector__header"},{"part":"cellColumnHeader","target":"div.bb-time-selector__cell-column-header"},{"part":"item","target":"BbBaseButton"}],"nodes":[{"name":"BbBaseButton","kind":"public","vocabulary":"BbBaseButton","bindings":[{"part":"root","target":"RouterComponent"},{"part":"root","target":"a"},{"part":"root","target":"component"}],"children":[{"name":"RouterComponent","kind":"internal"}]}]},"css":{"classes":{"bb-time-selector":["","__cell-column-header","__column","__column--*","__column--meridiem","__columns","__header","__header--empty","__item","__item--disabled","__item--selected","__scroll"]},"locals":["--color-gray-200","--rail-w","--time-col-w","--time-mark","--time-row-h"]},"attrTargets":["div"]},
|
|
540
540
|
{"name":"ErrorIcon","group":"Feedback","description":"Renders the reusable error-state icon glyph used in validation UIs.","referenceOnly":true,"hasGuide":false,"contract":"ai/ErrorIcon.md","source":"ai/source/ErrorIcon.md","props":[],"events":[],"slots":[],"exposed":[],"models":[],"cssProps":[{"name":"--accent","value":"var(--bb-danger)","selector":".bb-error-icon"}],"tree":{"nodes":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]},"css":{"classes":{"bb-error-icon":[""]},"locals":["--accent","--color-gray-200"]},"attrTargets":["svg"]},
|
|
541
541
|
{"name":"FlatListBox","group":"Selection","description":"Flat listbox renderer for selectable option lists.","referenceOnly":true,"hasGuide":false,"contract":"ai/FlatListBox.md","source":"ai/source/FlatListBox.md","props":[{"name":"compact","type":"boolean | undefined","required":false,"default":"false","description":"Sets the listbox in a compact state."},{"name":"described","type":"boolean | undefined","required":false,"default":"false","description":"Every row carries a one-line description under its label (the owner's\n`itemProps` declares a `description`). Rows get a fixed two-line height and the\ndescription ellipsizes; an explicit `optionHeight` still wins."},{"name":"emptyText","type":"string | undefined","required":false,"description":"Text shown when no options are available."},{"name":"failedText","type":"string | undefined","required":false,"description":"Set while the latest items load FAILED: rendered above the listed options\n(a `stash` may keep rows on screen) so the failure is never silent. Internal."},{"name":"id","type":"string | undefined","required":false,"description":"Id applied to the `role=\"listbox\"` element itself (not the wrapper), so\na combobox's `aria-controls` reference resolves to the listbox role."},{"name":"listLabel","type":"string | undefined","required":false,"description":"Plain accessible name (`aria-label`) of the `role=\"listbox\"` element,\nused when `listLabelledby` is not set. Internal."},{"name":"listLabelledby","type":"string | undefined","required":false,"description":"Accessible name of the `role=\"listbox\"` element: the ids that name the\ncombobox it pops up from (`listLabelledby`), else a plain label\n(`listLabel`). Internal."},{"name":"loading","type":"boolean | undefined","required":false,"default":"false","description":"Shows the listbox in a loading state."},{"name":"loadingText","type":"string | undefined","required":false,"description":"Text shown while options are loading."},{"name":"multiple","type":"boolean | undefined","required":false,"default":"false","description":"Allows multiple options to be selected simultaneously."},{"name":"open","type":"boolean | undefined","required":false,"default":"false","description":"Whether the listbox is open (visible)."},{"name":"optionHeight","type":"number | undefined","required":false,"description":"Fixed height (in px) for each option row. Defaults to 28px (24px compact;\n44px / 36px on mobile viewports). An explicit value wins on every viewport."},{"name":"options","type":"Option<Item>[]","required":true,"description":"List of options to display."},{"name":"passthrough","type":"PtBindings<\"list\" | \"itemDescription\" | \"itemText\" | \"itemIcon\" | \"option\", \"disabled\" | \"selected\"> | undefined","required":false,"description":"Passthrough resolver handed down by the select popover: `list` is the\n`role=\"listbox\"` node (bound whole); `option` is one option, resolved per\nnode with its own `selected` / `disabled`. Internal."},{"name":"transitionDuration","type":"number | undefined","required":false,"default":"250","description":"Duration of open/close transition in milliseconds."}],"events":[{"name":"focused:change","signature":"(id: string | undefined): void","description":"Emitted when the keyboard-focused option changes."},{"name":"option:selected","signature":"(option: Option): void","description":"Emitted when an option is selected by the user."},{"name":"option:unselected","signature":"(option: Option): void","description":"Emitted when a previously selected option is deselected."}],"slots":[{"name":"empty","type":"object","description":"Content shown when no options are available (replaces the default \"no data\" text)."},{"name":"loading","type":"object","description":"Content shown while items are loading (replaces the default loading text)."},{"name":"option","type":"FlatListBoxOptionSlotProps<Item>","fields":["disabled: boolean","focused: boolean","index: number","item: Item","selected: boolean","text: string","value: any","description: string"],"description":"Replaces the default rendering of each option row."},{"name":"options:append","type":"object","description":"Content appended inside the options list, after the last option."},{"name":"options:prepend","type":"object","description":"Content prepended inside the options list, before the first option."}],"exposed":[],"models":[],"tree":{"bindings":[{"part":"list","target":"span.bb-listbox__list"},{"part":"option","target":"span.bb-listbox__option"},{"part":"itemIcon","target":"BbIcon"},{"part":"itemText","target":"span.bb-listbox__item-text"},{"part":"itemDescription","target":"span.bb-listbox__item-description"}],"nodes":[{"name":"BbIcon","kind":"public","cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]},{"name":"ErrorIcon","kind":"internal","cssProps":[{"name":"--accent","documented":false,"readBy":["bb-error-icon"]}],"children":[{"name":"BbIcon","kind":"public","repeated":true,"cssProps":[{"name":"--w","documented":true,"readBy":["bb-icon"]},{"name":"--size","documented":false,"readBy":["bb-icon"]}]}]}]},"attrTargets":["span"]},
|