`/``. 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 — `` holding\n` ` elements — never a ` `/``."
},
{
"name": "thead",
"type": "object",
"description": "Replaces the content of the header row group (`.bb-table__head`). Use when\nyou need full control over the header markup. The table is a CSS grid,\nnot a ``: provide role-complete rows — `` holding\none ` ` per column — and never a ` `/`| `.\nRows are subgrid rows, so each cell lands on the matching column track."
}
],
"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"
}
],
"removed": [
{
"name": "allowSelectAll",
"new": "disableSelectAll",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-table.md",
"silent": true,
"fix": {
"kind": "invert"
}
},
{
"name": "enabledWhileLoading",
"new": "interactiveWhileLoading",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-table.md",
"silent": true,
"fix": {
"kind": "rename"
}
}
],
"renamed": [
{
"from": "allowSelectAll",
"to": "disableSelectAll",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-table.md",
"fix": {
"kind": "invert"
}
},
{
"from": "enabledWhileLoading",
"to": "interactiveWhileLoading",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-table.md",
"fix": {
"kind": "rename"
}
}
]
},
{
"name": "BbTabs",
"group": "Navigation",
"description": "Switches between tabbed content views (shadcn-like strip; the co-located BbTabsRoot / BbTabsList / BbTabsPanes exports enable split layouts).",
"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": "Prevents rendering content before it's made visible."
},
{
"name": "headers",
"type": "Record | 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 identifier of the component."
},
{
"name": "items",
"type": "BbTabsItem[]",
"required": true,
"description": "Array of items that define the tabs in the component."
},
{
"name": "modelValue",
"type": "K | null | undefined",
"required": false,
"description": "The current tab key. 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) => 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) => 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) => boolean) | null | undefined",
"required": false,
"description": "Controls whether Inertia preserves the current component state after navigation.\nOnly meaningful in an Inertia context."
},
{
"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 history rather than pushing it when changing tab.\n\nRecommended default whenever `navigation` is on: the query keeps the\nactive tab (deep-linkable, survives reload) while Back still returns to\nthe page the user came from, instead of undoing one tab click at a time.\nLeave it off only when a tab is a destination of its own — typically a\n`server` visit whose content the user should be able to go Back to."
},
{
"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`."
}
],
"events": [
{
"name": "update:modelValue",
"signature": "(e: \"update:modelValue\", value: K): void",
"description": "Emitted when the selected tab changes. Used by `v-model`."
}
],
"slots": [
{
"name": "header:append",
"type": "BbTabsScrollSlotProps",
"description": "Content rendered after the scrollable tab label list (e.g. a right scroll arrow)."
},
{
"name": "header:prepend",
"type": "BbTabsScrollSlotProps",
"description": "Content rendered before the scrollable tab label list (e.g. a left scroll arrow)."
},
{
"name": "label",
"type": "BbTabsSlotProps",
"description": "Fallback slot used for all tab labels when no per-tab `label:{key}` slot is provided."
}
],
"exposed": [],
"models": [
{
"name": "modelValue",
"type": "K | null | undefined"
}
],
"removed": [
{
"name": "animateX",
"new": "disableAnimateX",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"silent": true,
"fix": {
"kind": "invert"
}
},
{
"name": "animateY",
"new": "disableAnimateY",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"silent": true,
"fix": {
"kind": "invert"
}
},
{
"name": "querykey",
"new": "queryKey",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"silent": true,
"fix": {
"kind": "rename"
}
}
],
"renamed": [
{
"from": "animateX",
"to": "disableAnimateX",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"fix": {
"kind": "invert"
}
},
{
"from": "animateY",
"to": "disableAnimateY",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"fix": {
"kind": "invert"
}
},
{
"from": "querykey",
"to": "queryKey",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"fix": {
"kind": "rename"
}
}
]
},
{
"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": [],
"events": [],
"slots": [
{
"name": "header:append",
"type": "BbTabsScrollSlotProps",
"description": "Content rendered after the scrollable tab label list (e.g. a right scroll arrow)."
},
{
"name": "header:prepend",
"type": "BbTabsScrollSlotProps",
"description": "Content rendered before the scrollable tab label list (e.g. a left scroll arrow)."
},
{
"name": "label",
"type": "BbTabsSlotProps",
"description": "Fallback slot used for all tab labels when no per-tab `label:{key}` slot is provided."
}
],
"exposed": [],
"models": []
},
{
"name": "BbTabsPanes",
"group": "Navigation",
"description": "The pane host of a split BbTabsRoot layout (renders the tab content only).",
"referenceOnly": false,
"hasGuide": false,
"contract": "ai/BbTabsPanes.md",
"source": "ai/source/BbTabsPanes.md",
"props": [],
"events": [],
"slots": [],
"exposed": [],
"models": []
},
{
"name": "BbTabsRoot",
"group": "Navigation",
"description": "Provide/inject root that lets BbTabsList and BbTabsPanes live in separate layout slots.",
"referenceOnly": false,
"hasGuide": false,
"contract": "ai/BbTabsRoot.md",
"source": "ai/source/BbTabsRoot.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": "Prevents rendering content before it's made visible."
},
{
"name": "headers",
"type": "Record | 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 identifier of the component."
},
{
"name": "items",
"type": "BbTabsItem[]",
"required": true,
"description": "Array of items that define the tabs in the component."
},
{
"name": "modelValue",
"type": "K | null | undefined",
"required": false,
"description": "The current tab key. 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) => 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) => 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) => boolean) | null | undefined",
"required": false,
"description": "Controls whether Inertia preserves the current component state after navigation.\nOnly meaningful in an Inertia context."
},
{
"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 history rather than pushing it when changing tab.\n\nRecommended default whenever `navigation` is on: the query keeps the\nactive tab (deep-linkable, survives reload) while Back still returns to\nthe page the user came from, instead of undoing one tab click at a time.\nLeave it off only when a tab is a destination of its own — typically a\n`server` visit whose content the user should be able to go Back to."
},
{
"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`."
}
],
"events": [
{
"name": "update:modelValue",
"signature": "(e: \"update:modelValue\", value: K): void",
"description": "Emitted when the selected tab changes. Used by `v-model`."
}
],
"slots": [
{
"name": "default",
"type": "BbTabsRootSlotProps",
"description": "Arbitrary layout hosting `BbTabsList` / `BbTabsPanes` anywhere in its subtree."
}
],
"exposed": [],
"models": [
{
"name": "modelValue",
"type": "K | null | undefined"
}
],
"removed": [
{
"name": "animateX",
"new": "disableAnimateX",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"silent": true,
"fix": {
"kind": "invert"
}
},
{
"name": "animateY",
"new": "disableAnimateY",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"silent": true,
"fix": {
"kind": "invert"
}
},
{
"name": "querykey",
"new": "queryKey",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"silent": true,
"fix": {
"kind": "rename"
}
}
],
"renamed": [
{
"from": "animateX",
"to": "disableAnimateX",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"fix": {
"kind": "invert"
}
},
{
"from": "animateY",
"to": "disableAnimateY",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"fix": {
"kind": "invert"
}
},
{
"from": "querykey",
"to": "queryKey",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tabs.md",
"fix": {
"kind": "rename"
}
}
]
},
{
"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,
"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": "Compare tags case-sensitively when rejecting duplicates, so `Vue` and\n`vue` can both exist. By default matching folds case, because two chips\ndiffering only in case read as duplicates to a user.\n\nEither way the tag is stored with the casing the user typed — this only\ndecides what counts as a duplicate. Entries are always 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": "Sets the component in a compact mode."
},
{
"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": "direction",
"type": "InputDirection | undefined",
"required": false,
"description": "Direction of the layout of the component. Can either be a predefined value or a\npattern separated by a space like `xx xxxxx`."
},
{
"name": "disabled",
"type": "boolean | undefined",
"required": false,
"default": "false",
"description": "Disables the component."
},
{
"name": "divider",
"type": "string | string[] | undefined",
"required": false,
"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."
},
{
"name": "errors",
"type": "string | string[] | undefined",
"required": false,
"description": "Can be a string or an array of string containing the messages to display.\nThey render in an `aria-live=\"polite\"` region (announced when they appear)\nand, while the list is non-empty, are referenced FIRST from the control's\n`aria-describedby`, so the reason the field is invalid is re-read whenever\nthe control regains focus."
},
{
"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": "hasWarning",
"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 identifier of the component."
},
{
"name": "label",
"type": "string",
"required": true,
"description": "Text content of the label of the element."
},
{
"name": "labelMode",
"type": "\"floating\" | \"outside\" | \"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": "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[]",
"required": true,
"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": "String displayed when there's no data."
},
{
"name": "prepend:icon",
"type": "string | undefined",
"required": false,
"description": "Name of the icon to be added at the start of the input."
},
{
"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": "warnings",
"type": "string | string[] | undefined",
"required": false,
"description": "Warning messages to display beneath the field, in their own `aria-live`\nregion and amber (`--bb-text-warn`). A string or array; a non-empty list\nimplies the warning state. Errors suppress warnings when both are set.\nWhile displayed they are also referenced from the control's\n`aria-describedby`, after any errors and before the description/hint."
}
],
"events": [
{
"name": "active",
"signature": "(event: \"active\"): void"
},
{
"name": "blur",
"signature": "(event: \"blur\", event: FocusEvent): void"
},
{
"name": "change",
"signature": "(event: \"change\", event: Event): void"
},
{
"name": "click",
"signature": "(event: \"click\", event: MouseEvent): void"
},
{
"name": "compositionend",
"signature": "(event: \"compositionend\", event: CompositionEvent): void"
},
{
"name": "compositionstart",
"signature": "(event: \"compositionstart\", event: CompositionEvent): void"
},
{
"name": "duplicate",
"signature": "(event: \"duplicate\", string: string): void"
},
{
"name": "focus",
"signature": "(event: \"focus\", event: FocusEvent): void"
},
{
"name": "inactive",
"signature": "(event: \"inactive\"): void"
},
{
"name": "input",
"signature": "(event: \"input\", event: Event): void"
},
{
"name": "keydown",
"signature": "(event: \"keydown\", event: KeyboardEvent): void"
},
{
"name": "keyup",
"signature": "(event: \"keyup\", event: KeyboardEvent): void"
},
{
"name": "max",
"signature": "(event: \"max\", string: string): void"
},
{
"name": "mousedown",
"signature": "(event: \"mousedown\", event: MouseEvent): void"
},
{
"name": "mouseup",
"signature": "(event: \"mouseup\", event: MouseEvent): void"
},
{
"name": "paste",
"signature": "(event: \"paste\", event: ClipboardEvent): void"
},
{
"name": "update:modelValue",
"signature": "(event: \"update:modelValue\", value: string[]): void"
}
],
"slots": [
{
"name": "append",
"type": "Record",
"description": "Content appended inside the input field wrapper, after the tag chips."
},
{
"name": "append-outer",
"type": "Record",
"description": "Content appended outside the input field wrapper."
},
{
"name": "label",
"type": "BbTagLabelSlotProps",
"description": "Replaces the default label text rendered above the input."
},
{
"name": "prefix",
"type": "Record",
"description": "Content rendered as an inline prefix inside the input field."
},
{
"name": "prepend",
"type": "Record",
"description": "Content prepended inside the input field wrapper, before the tag chips."
},
{
"name": "prepend-outer",
"type": "Record",
"description": "Content prepended outside the input field wrapper."
},
{
"name": "suffix",
"type": "Record",
"description": "Content rendered as an inline suffix inside the input field."
}
],
"exposed": [],
"models": [
{
"name": "modelValue",
"type": "string[]"
}
],
"validated": {
"entrypoint": "bitboss-ui/validated",
"props": [
{
"name": "rules",
"type": "RuleExpression",
"required": false,
"description": "vee-validate rules for this field."
},
{
"name": "validateOn",
"type": "ValidateTiming[] | undefined",
"required": false,
"default": "[\"inactive\"]",
"description": "Which interactions trigger validation (see\n`ValidatedFieldProps.validateOn` for the timing vocabulary)."
},
{
"name": "vid",
"type": "string | undefined",
"required": false,
"description": "Explicit vee-validate field name. **Usually omit it** — the name is derived\nautomatically from the control's `label`/`legend`. Only set `vid` when that\nderivation wouldn't be unique (e.g. v-for rows, or array `v-model`s that\nshare a label). A control with no `label`/`legend` (like `BbDropzone`) must\nprovide it."
}
]
},
"removed": [
{
"name": "multiple",
"new": null,
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tag.md",
"silent": true,
"fix": {
"kind": "remove"
}
}
]
},
{
"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."
},
{
"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": "Sets the component in a compact state."
},
{
"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": "direction",
"type": "InputDirection | undefined",
"required": false,
"description": "Direction of the layout of the component. Can either be a predefined value or a\npattern separated by a space like `xx xxxxx`."
},
{
"name": "disabled",
"type": "boolean | undefined",
"required": false,
"default": "false",
"description": "Disables the component."
},
{
"name": "errors",
"type": "string | string[] | undefined",
"required": false,
"description": "Can be a string or an array of string containing the messages to display.\nThey render in an `aria-live=\"polite\"` region (announced when they appear)\nand, while the list is non-empty, are referenced FIRST from the control's\n`aria-describedby`, so the reason the field is invalid is re-read whenever\nthe control regains focus."
},
{
"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": "hasWarning",
"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 identifier of the component."
},
{
"name": "label",
"type": "string",
"required": true,
"description": "Text content of the label of the element."
},
{
"name": "labelMode",
"type": "\"floating\" | \"outside\" | \"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": "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",
"required": true,
"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": "String displayed when there's no data."
},
{
"name": "prepend:icon",
"type": "string | undefined",
"required": false,
"description": "Name of the icon to be added at the start of the input."
},
{
"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": "warnings",
"type": "string | string[] | undefined",
"required": false,
"description": "Warning messages to display beneath the field, in their own `aria-live`\nregion and amber (`--bb-text-warn`). A string or array; a non-empty list\nimplies the warning state. Errors suppress warnings when both are set.\nWhile displayed they are also referenced from the control's\n`aria-describedby`, after any errors and before the description/hint."
}
],
"events": [
{
"name": "blur",
"signature": "(event: \"blur\", event: FocusEvent): void"
},
{
"name": "change",
"signature": "(event: \"change\", event: Event): void"
},
{
"name": "click",
"signature": "(event: \"click\", event: MouseEvent): void"
},
{
"name": "compositionend",
"signature": "(event: \"compositionend\", event: CompositionEvent): void"
},
{
"name": "compositionstart",
"signature": "(event: \"compositionstart\", event: CompositionEvent): void"
},
{
"name": "focus",
"signature": "(event: \"focus\", event: FocusEvent): void"
},
{
"name": "input",
"signature": "(event: \"input\", event: Event): void"
},
{
"name": "keydown",
"signature": "(event: \"keydown\", event: KeyboardEvent): void"
},
{
"name": "keyup",
"signature": "(event: \"keyup\", event: KeyboardEvent): void"
},
{
"name": "mousedown",
"signature": "(event: \"mousedown\", event: MouseEvent): void"
},
{
"name": "mouseup",
"signature": "(event: \"mouseup\", event: MouseEvent): void"
},
{
"name": "paste",
"signature": "(event: \"paste\", event: ClipboardEvent): void"
},
{
"name": "update:modelValue",
"signature": "(event: \"update:modelValue\", value: string | null): void"
}
],
"slots": [
{
"name": "append",
"type": "Record",
"description": "Content rendered after the textarea, at the end of the inner container."
},
{
"name": "append-outer",
"type": "Record",
"description": "Content rendered after the entire textarea control, outside the input chrome."
},
{
"name": "label",
"type": "BbTextareaLabelSlotProps",
"description": "Replaces the default label text rendered above the textarea."
},
{
"name": "prefix",
"type": "Record",
"description": "Inline content rendered at the start of the textarea field area, before the text."
},
{
"name": "prepend",
"type": "Record",
"description": "Content rendered before the textarea, at the start of the inner container."
},
{
"name": "prepend-outer",
"type": "Record",
"description": "Content rendered before the entire textarea control, outside the input chrome."
},
{
"name": "suffix",
"type": "Record",
"description": "Inline content rendered at the end of the textarea field area, after the text."
}
],
"exposed": [],
"models": [
{
"name": "modelValue",
"type": "string | null"
}
],
"validated": {
"entrypoint": "bitboss-ui/validated",
"props": [
{
"name": "rules",
"type": "RuleExpression",
"required": false,
"description": "vee-validate rules for this field."
},
{
"name": "validateOn",
"type": "ValidateTiming[] | undefined",
"required": false,
"default": "[\"blur\"]",
"description": "Which interactions trigger validation (see\n`ValidatedFieldProps.validateOn` for the timing vocabulary)."
},
{
"name": "vid",
"type": "string | undefined",
"required": false,
"description": "Explicit vee-validate field name. **Usually omit it** — the name is derived\nautomatically from the control's `label`/`legend`. Only set `vid` when that\nderivation wouldn't be unique (e.g. v-for rows, or array `v-model`s that\nshare a label). A control with no `label`/`legend` (like `BbDropzone`) must\nprovide it."
}
]
}
},
{
"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": "Displays the component in a compact version."
},
{
"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": "direction",
"type": "InputDirection | undefined",
"required": false,
"description": "Direction of the layout of the component. Can either be a predefined value or a\npattern separated by a space like `xx xxxxx`."
},
{
"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": "Can be a string or an array of string containing the messages to display.\nThey render in an `aria-live=\"polite\"` region (announced when they appear)\nand, while the list is non-empty, are referenced FIRST from the control's\n`aria-describedby`, so the reason the field is invalid is re-read whenever\nthe control regains focus."
},
{
"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": "hasWarning",
"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 identifier of the component."
},
{
"name": "inputMode",
"type": "\"text\" | \"search\" | \"email\" | \"url\" | \"tel\" | \"none\" | \"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": "labelMode",
"type": "\"floating\" | \"outside\" | \"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": "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": "The mask to be applied to the input.\nPlease visit https://beholdr.github.io/maska/v3 for syntax examples."
},
{
"name": "modelValue",
"type": "string | null",
"required": true,
"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": "String displayed when there's no data."
},
{
"name": "prepend:icon",
"type": "string | undefined",
"required": false,
"description": "Name of the icon to be added at the start of the input."
},
{
"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": "type",
"type": "\"text\" | \"search\" | \"email\" | \"url\" | \"tel\" | \"password\" | undefined",
"required": false,
"description": "Type of the input. Restricted to the textual input types this component\nsupports — use `BbNumberInput` for numbers and `BbDatePickerInput` for dates."
},
{
"name": "warnings",
"type": "string | string[] | undefined",
"required": false,
"description": "Warning messages to display beneath the field, in their own `aria-live`\nregion and amber (`--bb-text-warn`). A string or array; a non-empty list\nimplies the warning state. Errors suppress warnings when both are set.\nWhile displayed they are also referenced from the control's\n`aria-describedby`, after any errors and before the description/hint."
}
],
"events": [
{
"name": "blur",
"signature": "(event: \"blur\", event: FocusEvent): void"
},
{
"name": "change",
"signature": "(event: \"change\", event: Event): void"
},
{
"name": "click",
"signature": "(event: \"click\", event: MouseEvent): void"
},
{
"name": "compositionend",
"signature": "(event: \"compositionend\", event: CompositionEvent): void"
},
{
"name": "compositionstart",
"signature": "(event: \"compositionstart\", event: CompositionEvent): void"
},
{
"name": "focus",
"signature": "(event: \"focus\", event: FocusEvent): void"
},
{
"name": "input",
"signature": "(event: \"input\", event: Event): void"
},
{
"name": "keydown",
"signature": "(event: \"keydown\", event: KeyboardEvent): void"
},
{
"name": "keyup",
"signature": "(event: \"keyup\", event: KeyboardEvent): void"
},
{
"name": "mousedown",
"signature": "(event: \"mousedown\", event: MouseEvent): void"
},
{
"name": "mouseup",
"signature": "(event: \"mouseup\", event: MouseEvent): void"
},
{
"name": "paste",
"signature": "(event: \"paste\", event: ClipboardEvent): void"
},
{
"name": "update:modelValue",
"signature": "(event: \"update:modelValue\", value: string | null): void"
}
],
"slots": [
{
"name": "append",
"type": "object",
"description": "Content rendered after the text input, at the end of the inner container."
},
{
"name": "append-outer",
"type": "object",
"description": "Content rendered after the entire text input control, outside the input chrome."
},
{
"name": "label",
"type": "BbTextInputLabelSlotProps",
"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 inner container."
},
{
"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"
}
],
"validated": {
"entrypoint": "bitboss-ui/validated",
"props": [
{
"name": "rules",
"type": "RuleExpression",
"required": false,
"description": "vee-validate rules for this field."
},
{
"name": "validateOn",
"type": "ValidateTiming[] | undefined",
"required": false,
"default": "[\"blur\"]",
"description": "Which interactions trigger validation (see\n`ValidatedFieldProps.validateOn` for the timing vocabulary)."
},
{
"name": "vid",
"type": "string | undefined",
"required": false,
"description": "Explicit vee-validate field name. **Usually omit it** — the name is derived\nautomatically from the control's `label`/`legend`. Only set `vid` when that\nderivation wouldn't be unique (e.g. v-for rows, or array `v-model`s that\nshare a label). A control with no `label`/`legend` (like `BbDropzone`) must\nprovide it."
}
]
}
},
{
"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,
"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 applied to the activator via `aria-label`."
},
{
"name": "max",
"type": "string | undefined",
"required": false,
"description": "Maximum selectable time in `HH:mm` format. Values outside the pattern\nthrow during setup to surface configuration mistakes."
},
{
"name": "min",
"type": "string | undefined",
"required": false,
"description": "Minimum selectable time in `HH:mm` format. Values outside the pattern\nthrow during setup to surface configuration mistakes."
},
{
"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 | undefined",
"required": false,
"description": "Extra props forwarded to the `BbOffCanvas` sheet when adaptive on mobile."
},
{
"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,
"description": "Position of the popover relative to the activator/anchor."
},
{
"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": "(event: \"error\", error: TimePickerInputError): void"
},
{
"name": "time-pick",
"signature": "(event: \"time-pick\", payload: { unit: TimeUnit; value: string; }): void"
},
{
"name": "update:activeSegment",
"signature": "(event: \"update:activeSegment\", value: BbTimePickerSegment): void"
},
{
"name": "update:modelValue",
"signature": "(event: \"update:modelValue\", value: string | string[] | null): void"
}
],
"slots": [
{
"name": "activator",
"type": "BbTimePickerActivatorSlotProps",
"description": "Custom activator element. Apply `v-bind=\"props\"` to your trigger."
}
],
"exposed": [],
"models": [
{
"name": "activeSegment",
"type": "BbTimePickerSegment | undefined"
},
{
"name": "modelValue",
"type": "string | string[] | null"
}
]
},
{
"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,
"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": "Sets the component in a compact state."
},
{
"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": "direction",
"type": "InputDirection | undefined",
"required": false,
"description": "Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like `xx xxxxx`."
},
{
"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": "Can be a string or an array of string containing the messages to display.\nThey render in an `aria-live=\"polite\"` region (announced when they appear)\nand, while the list is non-empty, are referenced FIRST from the segment\ninputs' `aria-describedby`, so the reason the field is invalid is re-read\nwhenever a segment regains focus."
},
{
"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": "hasWarning",
"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 identifier of the component."
},
{
"name": "label",
"type": "string",
"required": true,
"description": "Text content of the label of the element."
},
{
"name": "labelMode",
"type": "\"floating\" | \"outside\" | \"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": "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 in `HH:mm` format. Values outside the pattern\nthrow during setup to surface configuration mistakes."
},
{
"name": "min",
"type": "string | undefined",
"required": false,
"description": "Minimum selectable time in `HH:mm` format. Values outside the pattern\nthrow during setup to surface configuration mistakes."
},
{
"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 array when `range` is true."
},
{
"name": "name",
"type": "string | undefined",
"required": false,
"description": "Defines the name of the input."
},
{
"name": "offCanvasProps",
"type": "Partial | undefined",
"required": false,
"description": "Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is\nactive on mobile (e.g. `title`, `size`, `persistent`)."
},
{
"name": "persistentHint",
"type": "boolean | undefined",
"required": false,
"default": "false",
"description": "Keeps the hint displayed."
},
{
"name": "placeholder",
"type": "string | undefined",
"required": false,
"description": "String displayed when there's no data."
},
{
"name": "prepend:icon",
"type": "string | undefined",
"required": false,
"description": "Name of the icon to be added at the start of the input."
},
{
"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": "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": "warnings",
"type": "string | string[] | undefined",
"required": false,
"description": "Warning messages to display beneath the field, in their own `aria-live`\nregion and amber (`--bb-text-warn`). A string or array; a non-empty list\nimplies the warning state. Errors suppress warnings when both are set.\nWhile displayed they are also referenced from the control's\n`aria-describedby`, after any errors and before the description/hint."
}
],
"events": [
{
"name": "active",
"signature": "(event: \"active\"): void"
},
{
"name": "error",
"signature": "(event: \"error\", error: TimePickerInputError): void"
},
{
"name": "focus",
"signature": "(event: \"focus\", event: FocusEvent): void"
},
{
"name": "inactive",
"signature": "(event: \"inactive\"): void"
},
{
"name": "update:modelValue",
"signature": "(event: \"update:modelValue\", value: string | string[] | null): void"
}
],
"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": "label",
"type": "BbTimePickerInputLabelSlotProps",
"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 inner container."
},
{
"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"
}
],
"validated": {
"entrypoint": "bitboss-ui/validated",
"props": [
{
"name": "rules",
"type": "RuleExpression",
"required": false,
"description": "vee-validate rules for this field."
},
{
"name": "validateOn",
"type": "ValidateTiming[] | undefined",
"required": false,
"default": "[\"inactive\"]",
"description": "Which interactions trigger validation (see\n`ValidatedFieldProps.validateOn` for the timing vocabulary)."
},
{
"name": "vid",
"type": "string | undefined",
"required": false,
"description": "Explicit vee-validate field name. **Usually omit it** — the name is derived\nautomatically from the control's `label`/`legend`. Only set `vid` when that\nderivation wouldn't be unique (e.g. v-for rows, or array `v-model`s that\nshare a label). A control with no `label`/`legend` (like `BbDropzone`) must\nprovide it."
}
]
}
},
{
"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
}
],
"events": [],
"slots": [],
"exposed": [],
"models": [],
"removed": [
{
"name": "placement",
"new": "position",
"since": "3.0.0-unreleased",
"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",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-toast.md",
"silent": true,
"fix": {
"kind": "rename"
}
}
],
"renamed": [
{
"from": "placement",
"to": "position",
"since": "3.0.0-unreleased",
"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"
}
}
},
{
"from": "theme",
"to": "variant",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-toast.md",
"fix": {
"kind": "rename"
}
}
]
},
{
"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
}
],
"events": [],
"slots": [
{
"name": "default",
"type": "BbToastPortalContext"
}
],
"exposed": [],
"models": []
},
{
"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.\nWhen provided, the tooltip will not overflow this container's bounds (e.g. a sidebar).\nAccepts an HTMLElement, a Vue component ref, or a CSS selector string."
},
{
"name": "delay",
"type": "number | undefined",
"required": false,
"default": "0",
"description": "The delay in milliseconds before the tooltip is shown."
},
{
"name": "disabled",
"type": "boolean | undefined",
"required": false,
"default": "false",
"description": "Disables the component"
},
{
"name": "eager",
"type": "boolean | undefined",
"required": false,
"default": "false",
"description": "Prevents rendering content before it's made visible."
},
{
"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_`) 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\"",
"description": "Position of the overlay in respect to the related activator."
},
{
"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\"",
"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--` class hook."
},
{
"name": "width",
"type": "string | number | undefined",
"required": false,
"description": "Width of the tooltip bubble in pixels, or as a percentage of the activator."
}
],
"events": [
{
"name": "update:modelValue",
"signature": "(event: \"update:modelValue\", value: boolean): void"
}
],
"slots": [
{
"name": "activator",
"type": "BbTooltipActivatorSlotProps",
"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"
}
],
"removed": [
{
"name": "block",
"new": null,
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tooltip.md",
"silent": true,
"fix": {
"kind": "remove"
}
},
{
"name": "showClose",
"new": null,
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tooltip.md",
"silent": true,
"fix": {
"kind": "remove"
}
},
{
"name": "theme",
"new": "variant",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tooltip.md",
"silent": true,
"fix": {
"kind": "rename"
}
},
{
"name": "timeout",
"new": "delay",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tooltip.md",
"silent": true,
"fix": {
"kind": "rename"
}
}
],
"renamed": [
{
"from": "theme",
"to": "variant",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tooltip.md",
"fix": {
"kind": "rename"
}
},
{
"from": "timeout",
"to": "delay",
"since": "3.0.0-unreleased",
"migration": "ai/guides/migration/components/bb-tooltip.md",
"fix": {
"kind": "rename"
}
}
]
},
{
"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 | 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[]",
"required": true,
"default": "[]",
"description": "Tree-like structure of nodes to render."
},
{
"name": "itemValue",
"type": "ItemAccessor | 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."
}
],
"events": [
{
"name": "update:expandedItems",
"signature": "(event: \"update:expandedItems\", value: any[]): void"
}
],
"slots": [
{
"name": "default",
"type": "BbTreeNodeSlotProps"
}
],
"exposed": [],
"models": [
{
"name": "expandedItems",
"type": "any[] | undefined"
}
]
},
{
"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": "size",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | undefined",
"required": false,
"description": "The size of the chips."
}
],
"events": [
{
"name": "option:unselected",
"signature": "(event: \"option:unselected\", option: Option): void"
}
],
"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"
},
{
"name": "getHighlighted",
"type": "() => Option | undefined"
}
],
"models": []
},
{
"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": []
},
{
"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."
}
],
"events": [
{
"name": "option:unselected",
"signature": "(event: \"option:unselected\", option: Option): void"
}
],
"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"
},
{
"name": "getHighlighted",
"type": "() => Option | undefined"
}
],
"models": []
},
{
"name": "CommonInputWrapper",
"group": "Layout & Utility",
"description": "Shared wrapper utility for composed input controls.",
"referenceOnly": true,
"hasGuide": false,
"contract": "ai/CommonInputWrapper.md",
"source": "ai/source/CommonInputWrapper.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": "hasWarning",
"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": "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."
}
],
"events": [
{
"name": "click:clear",
"signature": "(event: \"click:clear\"): void"
},
{
"name": "container:click",
"signature": "(event: \"container:click\"): void"
}
],
"slots": [
{
"name": "append",
"type": "object",
"description": "Wraps the trailing suffix area. Renders a `` containing the `suffix` sub-slot by default."
},
{
"name": "append-outer",
"type": "object",
"description": "Content appended outside the inner input container."
},
{
"name": "default",
"type": "object",
"description": "The main input element (e.g. `` or ` | | |