bitboss-ui 3.0.0-beta.47 → 3.0.0-beta.49

package/dist/ai/BbDropdownButton.md

@@ -95,16 +95,16 @@ const last = ref('Unsaved changes');
 
 /** `items[0]` is the primary action; later rows open from the chevron. */
 const items: BbDropdownItem[] = [
-	{ key: 'save', text: 'Save', onClick: () => (last.value = 'Saved') },
+	{ value: 'save', label: 'Save', onClick: () => (last.value = 'Saved') },
 	{
-		key: 'draft',
-		text: 'Save as draft',
+		value: 'draft',
+		label: 'Save as draft',
 		'prepend:icon': 'lucide:pencil',
 		onClick: () => (last.value = 'Saved as draft'),
 	},
 	{
-		key: 'template',
-		text: 'Save as template',
+		value: 'template',
+		label: 'Save as template',
 		'prepend:icon': 'lucide:copy',
 		onClick: () => (last.value = 'Saved as template'),
 	},
@@ -149,25 +149,25 @@ const last = ref('Not exported yet');
 /** Primary Export (default CSV) plus format alternates via `href`. */
 const items: BbDropdownItem[] = [
 	{
-		key: 'export',
-		text: 'Export',
+		value: 'export',
+		label: 'Export',
 		onClick: () => (last.value = 'Exported as CSV'),
 	},
 	{
-		key: 'csv',
-		text: 'Export as CSV',
+		value: 'csv',
+		label: 'Export as CSV',
 		'prepend:icon': 'lucide:file-spreadsheet',
 		href: '#export-csv',
 	},
 	{
-		key: 'json',
-		text: 'Export as JSON',
+		value: 'json',
+		label: 'Export as JSON',
 		'prepend:icon': 'lucide:braces',
 		href: '#export-json',
 	},
 	{
-		key: 'pdf',
-		text: 'Export as PDF',
+		value: 'pdf',
+		label: 'Export as PDF',
 		'prepend:icon': 'lucide:file-text',
 		href: '#export-pdf',
 	},
@@ -192,17 +192,17 @@ both halves at once.
 	<BbDropdownButton
 		variant="outline"
 		:items="[
-			{ key: 'export', text: 'Export', href: '#export' },
-			{ key: 'csv', text: 'Export as CSV', href: '#csv' },
-			{ key: 'json', text: 'Export as JSON', href: '#json' },
+			{ value: 'export', label: 'Export', href: '#export' },
+			{ value: 'csv', label: 'Export as CSV', href: '#csv' },
+			{ value: 'json', label: 'Export as JSON', href: '#json' },
 		]"
 	/>
 	<BbDropdownButton
 		:size="{ sm: 'sm', lg: 'md' }"
 		variant="secondary"
 		:items="[
-			{ key: 'invite', text: 'Invite member', href: '#invite' },
-			{ key: 'link', text: 'Copy invite link', href: '#link' },
+			{ value: 'invite', label: 'Invite member', href: '#invite' },
+			{ value: 'link', label: 'Copy invite link', href: '#link' },
 		]"
 	/>
 </div>
@@ -251,8 +251,8 @@ const status = ref('Draft');
  */
 const items: BbDropdownItem[] = [
 	{
-		key: 'publish',
-		text: 'Publish',
+		value: 'publish',
+		label: 'Publish',
 		onClick: async () => {
 			status.value = 'Publishing…';
 			await new Promise((resolve) => setTimeout(resolve, 700));
@@ -260,14 +260,14 @@ const items: BbDropdownItem[] = [
 		},
 	},
 	{
-		key: 'schedule',
-		text: 'Schedule…',
+		value: 'schedule',
+		label: 'Schedule…',
 		'prepend:icon': 'lucide:clock',
 		href: '#schedule',
 	},
 	{
-		key: 'draft',
-		text: 'Revert to draft',
+		value: 'draft',
+		label: 'Revert to draft',
 		onClick: () => (status.value = 'Draft'),
 	},
 ];
@@ -324,18 +324,18 @@ const { confirm } = useConfirm();
 /** Dangerous alternate stays behind the chevron, gated by `useConfirm`. */
 const items: BbDropdownItem[] = [
 	{
-		key: 'redeploy',
-		text: 'Redeploy',
+		value: 'redeploy',
+		label: 'Redeploy',
 		onClick: async () => {
 			status.value = 'Rebuilding…';
 			await new Promise((resolve) => setTimeout(resolve, 700));
 			status.value = 'dpl_9m4a · deployed just now';
 		},
 	},
-	{ key: 'logs', text: 'View build logs', href: '#logs' },
+	{ value: 'logs', label: 'View build logs', href: '#logs' },
 	{
-		key: 'delete',
-		text: 'Delete deployment',
+		value: 'delete',
+		label: 'Delete deployment',
 		variant: 'destructive',
 		'prepend:icon': 'lucide:trash-2',
 		onClick: async () => {
@@ -367,9 +367,9 @@ activator slot: the toggle button is part of the component's contract.
 	toggle:icon="lucide:ellipsis"
 	variant="outline"
 	:items="[
-		{ key: 'open', text: 'Open', href: '#open' },
-		{ key: 'rename', text: 'Rename', href: '#rename' },
-		{ key: 'archive', text: 'Archive', href: '#archive' },
+		{ value: 'open', label: 'Open', href: '#open' },
+		{ value: 'rename', label: 'Rename', href: '#rename' },
+		{ value: 'archive', label: 'Archive', href: '#archive' },
 	]"
 />
 ```
@@ -421,18 +421,18 @@ const status = ref('2 approvals · all checks passed');
  */
 const items = computed<BbDropdownItem[]>(() => [
 	{
-		key: 'merge-pr',
-		text: labels[method.value],
+		value: 'merge-pr',
+		label: labels[method.value],
 		onClick: () => (status.value = `Merged into main (${method.value})`),
 	},
 	{
-		key: 'method',
+		id: 'method',
 		label: 'Merge method',
 		selectable: true,
 		items: [
-			{ key: 'merge', text: 'Create a merge commit' },
-			{ key: 'squash', text: 'Squash and merge' },
-			{ key: 'rebase', text: 'Rebase and merge' },
+			{ value: 'merge', label: 'Create a merge commit' },
+			{ value: 'squash', label: 'Squash and merge' },
+			{ value: 'rebase', label: 'Rebase and merge' },
 		],
 	},
 ]);
@@ -448,10 +448,10 @@ reaching for the inner dropdown.
 Every slot except `activator` is forwarded into the inner `BbDropdown`:
 `header` / `footer` pin content around the scrolling items, `item:prepend` /
 `item:append` replace every row's icons, and named slots replace one row's
-content (`#<key>`) or edges (`#<key>:prepend` / `:append`) — see the
+content (`#<value>`) or edges (`#<value>:prepend` / `:append`) — see the
 [BbDropdown guide](./BbDropdown.md) for payloads, naming and which slot wins.
 A `#activator` you pass is ignored: the toggle is part of this component
-(`toggle:icon` swaps its glyph). One caveat: a per-key slot for `items[0]` does nothing — that
+(`toggle:icon` swaps its glyph). One caveat: a per-row slot for `items[0]` does nothing — that
 item is promoted into the main button and never renders as a menu row.
 
 The dropdown's positioning surface passes through as props: `placement`,
@@ -471,9 +471,9 @@ click), `anchor` (hard-wired to the split control) and `boundary`.
 	variant="outline"
 	:width="230"
 	:items="[
-		{ key: 'new-doc', text: 'New document', href: '#new' },
-		{ key: 'from-template', text: 'From template…', href: '#template' },
-		{ key: 'import', text: 'Import file', href: '#import' },
+		{ value: 'new-doc', label: 'New document', href: '#new' },
+		{ value: 'from-template', label: 'From template…', href: '#template' },
+		{ value: 'import', label: 'Import file', href: '#import' },
 	]"
 >
 	<template #item:prepend>
@@ -552,16 +552,16 @@ import type { BbDropdownItem } from 'bitboss-ui';
 const last = ref('Unsaved changes');
 
 const items: BbDropdownItem[] = [
-	{ key: 'save', text: 'Save', onClick: () => (last.value = 'Saved') },
+	{ value: 'save', label: 'Save', onClick: () => (last.value = 'Saved') },
 	{
-		key: 'draft',
-		text: 'Save as draft',
+		value: 'draft',
+		label: 'Save as draft',
 		'prepend:icon': 'lucide:pencil',
 		onClick: () => (last.value = 'Saved as draft'),
 	},
 	{
-		key: 'template',
-		text: 'Save as template',
+		value: 'template',
+		label: 'Save as template',
 		'prepend:icon': 'lucide:copy',
 		disabled: true,
 	},
@@ -637,7 +637,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `compact` | `boolean \| undefined` | `false` |  | Apply the compact density variant — the same ladder `BbSelect` uses, on both surfaces: flyout rows go 28px → 24px, sheet rows 44px → 36px. The label size does not change; density here is height, as it is for a select. A menu row is a touch target in a way a select option is not quite — a mis-tap fires the neighbouring COMMAND rather than picking the wrong value — so the compact sheet stops at 36px and never follows the flyout down to 24px. That is the same floor the select's sheet holds. |
 | `disableAutoLoading` | `boolean \| undefined` | `false` |  | Disables the automatic loading state that tracks async actions (enabled by default). Only affects the main action button: the split toggle half still mirrors the dropdown's internal async-action loading state. |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the component |
-| `eager` | `boolean \| undefined` | `false` |  | Prevents rendering content before it's made visible. |
+| `eager` | `boolean \| undefined` | `false` |  | Renders the menu panel at mount instead of on the first open (the phone sheet's too), and keeps its rows after a close. Without it the rows mount on each open and go once the menu has closed. |
 | `id` | `string \| undefined` |  |  | Names this dropdown: the activator's id (unless it already has one), the menu's `menu_<id>`, and the key `useBbDropdownContext(id)` and a companion `BbDropdownGroup` pair by. Generated when omitted. |
 | `items` | `BbDropdownItem[]` | `[]` | yes | Array used to render each dropdown button. They can act as `button`, as `a`, or as `router-link` as they are based on the functionality provided by `BbBaseButton`. Pass a flat array for a single group, nest arrays for divider-separated groups, or pass {@link InternalGroup} objects for titled / selectable sections. An item may carry its own `items` to open a submenu. The shapes can be mixed. |
 | `loading` | `boolean \| undefined` | `false` |  | Triggers a loading indicator. |
@@ -670,9 +670,9 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `footer` | 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`. |
 | `input` | 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`. |
 | `item` | One menu entry, submenus included — a broadcast resolved per entry. Also takes a per-item function, called with the entry. |
-| `itemText` | An entry's label (its `text`) — resolved with that entry's states. A per-entry `#<key>` slot replaces it. Also takes a per-item function. |
+| `itemText` | 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. |
 | `itemIcon` | An entry's prepend / append icons — resolved with that entry's states. Also takes a per-item function. |
-| `itemDescription` | An entry's muted second line (its `description`) — resolved with that entry's states. A per-entry `#<key>` slot replaces it. Also takes a per-item function. |
+| `itemDescription` | 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 are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
 
@@ -695,21 +695,21 @@ States are listed in precedence order: when two are on at once and their entries
 ## Slots
 
 - `default` — scope: `any` — Companion content forwarded into the dropdown (e.g. `<BbDropdownGroup>`).
-- `empty` — scope: `BbDropdownPlaceholderSlotProps` `{ groupKey?: string; text: string; error?: unknown }` — Replaces the default "no data" placeholder row shown in a pipeline group that resolved to no items. Rendered once per empty group. Forwarded to the underlying `BbDropdown`.
+- `empty` — scope: `BbDropdownPlaceholderSlotProps` `{ groupId?: string; text: string; error?: unknown }` — Replaces the default "no data" placeholder row shown in a pipeline group that resolved to no items. Rendered once per empty group. Forwarded to the underlying `BbDropdown`.
 - `footer` — scope: `BbDropdownButtonEdgeSlotProps` `{ disabled?: boolean; open: boolean; placement: Placement \| "cursor" }` — Content pinned to the bottom of the dropdown panel, outside the scroll area.
 - `header` — scope: `BbDropdownButtonEdgeSlotProps` `{ disabled?: boolean; open: boolean; placement: Placement \| "cursor" }` — Content pinned to the top of the dropdown panel, outside the scroll area.
-- `item:append` — scope: `BbDropdownButtonItemSlotProps` `{ disabled?: boolean; index: number; item: InternalItem; open: boolean; placement: Placement \| "cursor"; text: string }` — The trailing region of every menu row, replacing its `append:icon`; the submenu chevron and the check on a selected row take its place (BbDropdown's rules).
-- `item:prepend` — scope: `BbDropdownButtonItemSlotProps` `{ disabled?: boolean; index: number; item: InternalItem; open: boolean; placement: Placement \| "cursor"; text: string }` — The leading region of every menu row, replacing its `prepend:icon` (BbDropdown's rules).
-- `loading` — scope: `BbDropdownPlaceholderSlotProps` `{ groupKey?: string; text: string; error?: unknown }` — Replaces the default loading placeholder row shown in a pipeline group while its async items load. Rendered once per loading group. Forwarded to the underlying `BbDropdown`.
-- `#<key>` (named from data) — scope: `BbDropdownItemSlotProps` — One row's content (text and description), by its key; in a fetched group, by its resolved `itemValue`. Reserved keys (their slot is one of this component's own, so a key spelled like them is an error): `default`, `empty`, `footer`, `header`, `item`, `loading`.
-- `#<key>:prepend` (named from data) — scope: `BbDropdownItemSlotProps` — One row's leading region; replaces its `prepend:icon`.
-- `#<key>:append` (named from data) — scope: `BbDropdownItemSlotProps` — One row's trailing region; replaces its `append:icon` and its submenu chevron. The check takes its place on the selected row.
-- `#<groupKey>:item` (named from data) — scope: `BbDropdownItemSlotProps` — The content of every row of that group, and no other; a row's own `#<key>` still wins.
-- `#<groupKey>:item:prepend` (named from data) — scope: `BbDropdownItemSlotProps` — 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`.
-- `#<groupKey>:item:append` (named from data) — scope: `BbDropdownItemSlotProps` — The trailing region of every row of that group; replaces their `append:icon`. The check takes its place on the selected row.
-- `#<groupKey>` (named from data) — scope: `BbDropdownItemSlotProps` — That group's title line (the group is passed as `item`, `groupTitle` is `true`). Reserved keys (their slot is one of this component's own, so a key spelled like them is an error): `default`, `empty`, `footer`, `header`, `item`, `loading`.
-- `#<groupKey>:prepend` (named from data) — scope: `BbDropdownItemSlotProps` — The leading region of that group's title line.
-- `#<groupKey>:append` (named from data) — scope: `BbDropdownItemSlotProps` — The trailing region of that group's title line.
+- `item:append` — scope: `BbDropdownButtonItemSlotProps` `{ disabled?: boolean; index: number; item: InternalItem; open: boolean; placement: Placement \| "cursor"; label: string }` — The trailing region of every menu row, replacing its `append:icon`; the submenu chevron and the check on a selected row take its place (BbDropdown's rules).
+- `item:prepend` — scope: `BbDropdownButtonItemSlotProps` `{ disabled?: boolean; index: number; item: InternalItem; open: boolean; placement: Placement \| "cursor"; label: string }` — The leading region of every menu row, replacing its `prepend:icon` (BbDropdown's rules).
+- `loading` — scope: `BbDropdownPlaceholderSlotProps` `{ groupId?: string; text: string; error?: unknown }` — Replaces the default loading placeholder row shown in a pipeline group while its async items load. Rendered once per loading group. Forwarded to the underlying `BbDropdown`.
+- `#<value>` (named from data) — scope: `BbDropdownItemSlotProps` — One row's content (label and description), by its value; in a fetched group, by its resolved `itemValue`. Reserved names (their slot is one of this component's own, so an item value or column key spelled like them is an error): `default`, `empty`, `footer`, `header`, `item`, `loading`.
+- `#<value>:prepend` (named from data) — scope: `BbDropdownItemSlotProps` — One row's leading region; replaces its `prepend:icon`.
+- `#<value>:append` (named from data) — scope: `BbDropdownItemSlotProps` — One row's trailing region; replaces its `append:icon` and its submenu chevron. The check takes its place on the selected row.
+- `#<groupId>:item` (named from data) — scope: `BbDropdownItemSlotProps` — The content of every row of that group, and no other; a row's own `#<value>` still wins.
+- `#<groupId>:item:prepend` (named from data) — scope: `BbDropdownItemSlotProps` — 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`.
+- `#<groupId>:item:append` (named from data) — scope: `BbDropdownItemSlotProps` — The trailing region of every row of that group; replaces their `append:icon`. The check takes its place on the selected row.
+- `#<groupId>` (named from data) — scope: `BbDropdownItemSlotProps` — That group's title line (the group is passed as `item`, `groupTitle` is `true`). Reserved names (their slot is one of this component's own, so an item value or column key spelled like them is an error): `default`, `empty`, `footer`, `header`, `item`, `loading`.
+- `#<groupId>:prepend` (named from data) — scope: `BbDropdownItemSlotProps` — The leading region of that group's title line.
+- `#<groupId>:append` (named from data) — scope: `BbDropdownItemSlotProps` — The trailing region of that group's title line.
 
 ## Component tree
 
@@ -724,7 +724,7 @@ States are listed in precedence order: when two are on at once and their entries
   - `BbButton` _(public — [contract](./BbButton.md))_ — its own pt parts (`BbButton`): `root` → `BbBaseButton`, `spinner` → `BbSpinner`, `icon` → `BbIcon`, `text` → `span.bb-button__text`; documented CSS variables: `--h-xs`, `--h`, `--icon-size`, `--px`, `--fs`, `--r`, `--gap`, `--bg`, `--bg-hover`, `--bg-pressed`, `--fg`, `--border-color`, `--ring-color`, `--ring-size`, `--bw`, `--fg-hover`, `--border-hover`, `--fg-pressed`, `--border-pressed`, `--bg-disabled`, `--fg-disabled`, `--border-disabled`, `--opacity-disabled`, `--elev-tier`, `--elev`; also mounts `BbIcon`, `BbSpinner`
     - `BbBaseButton` _(public — [contract](./BbBaseButton.md))_ — its own pt parts (`BbBaseButton`): `root` → `RouterComponent`, `root` → `a`, `root` → `component`; also mounts `RouterComponent`
   - `BbDropdown` _(public — [contract](./BbDropdown.md))_ — its own pt parts (`BbDropdown`): `panel` → `CommonPopover`, `root` → `CommonPopover`, `header` → `div.bb-dropdown__header`, `list` → `span.bb-dropdown__list`, `footer` → `div.bb-dropdown__footer`; documented CSS variables: `--menu-inset`; also mounts `CommonPopover`, `DropdownPipelineResolver`
-    - `BbDropdownList` _(internal — not importable, reach it through `BbDropdown`)_ — also mounts `BbBaseButton`, `BbIcon`, `ErrorIcon`, `CommonPopover`, `BbDropdownList`
+    - `BbDropdownList` _(internal — not importable, reach it through `BbDropdown`)_ — also mounts `BbIcon`, `ErrorIcon`, `CommonPopover`, `BbDropdownList`
       - `BbBadge` _(public — [contract](./BbBadge.md))_ — its own pt parts (`BbBadge`): `spinner` → `BbSpinner`, `icon` → `BbIcon`, `clear` → `button.bb-badge__clear`; documented CSS variables: `--bg`, `--fg`, `--bw`, `--ring-color`, `--ring-size`, `--min-size-md`, `--min-size`, `--elev`, `--r`, `--fs`, `--icon-size`, `--gap`, `--px`, `--clear-size`, `--bg-disabled`, `--fg-disabled`, `--border-disabled`, `--pad-left`; also mounts `BbIcon`, `BbSpinner`, `BadgeBodyContent`
     - `AdaptiveDropdown` _(internal — not importable, reach it through `BbDropdown`)_ — hands `BbOffCanvas` the pt map `{ header: 'header', footer: 'footer', panel: 'root', sheet: 'root' }` (ours → theirs); also mounts `BbSmoothHeight`, `BbButton`, `BbDropdownList`
       - `BbOffCanvas` _(public — [contract](./BbOffCanvas.md))_ — its own pt parts (`BbOffCanvas`): `header` → `div.bb-offcanvas__header`, `title` → `span.bb-offcanvas__title`, `description` → `p.bb-offcanvas__description`, `close` → `CloseButton`, `content` → `div.bb-offcanvas__content`, `footer` → `div.bb-offcanvas__footer`; documented CSS variables: `--stack-x`, `--stack-fill`, `--stack-transition-duration`, `--px`, `--handle-w`, `--handle-h`, `--handle-bg`, `--safe-top`, `--close-size`

package/dist/ai/BbDropdownGroup.md

@@ -16,12 +16,12 @@
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `id` | `string` |  | yes | Identifier of the group to bind to — must match the `key` of a group declared in the host `BbDropdown`'s `items`. |
+| `id` | `string` |  | yes | Identifier of the group to bind to — must match the `id` of a group declared in the host `BbDropdown`'s `items`. |
 | `modelValue` | `any` |  |  | The group's selection: one value for a single group, an array for a `multiple` one. Read by the owning BbDropdown through the group's `id`. |
 
 ## Events
 
-- `item:selected` — `(value: any): void` — The user picked a row, at the click, a pick you then refuse included — with the item's resolved value (its `item-value` for pipeline groups, else its `key`), symmetric with `BbTable`. Your own `v-model` changes fire none.
+- `item:selected` — `(value: any): void` — The user picked a row, at the click, a pick you then refuse included — with the row's value (its `item-value` for pipeline groups, else its `value`), symmetric with `BbTable`. Your own `v-model` changes fire none.
 - `item:unselected` — `(value: any): void` — The user unpicked a row (or a single pick replaced it), with its resolved value.
 - `update:modelValue` — `(value: any): void` — The value a user change asks for (a pick, a chip ×, a coherence prune). With a listener the group is controlled: the rows tick when you write the value, and ignoring it leaves them as they are.
 

package/dist/ai/BbDropzone.md

@@ -264,9 +264,9 @@ const onError = (error: DropZoneError) => {
 	display: flex;
 	gap: 0.5rem;
 	justify-content: center;
+	padding-inline-end: 0.75rem;
+	padding-inline-start: 0.75rem;
 	padding-bottom: 0.5rem;
-	padding-left: 0.75rem;
-	padding-right: 0.75rem;
 	padding-top: 0.5rem;
 	transition:
 		border-color var(--bb-transition-fast) var(--bb-ease),
@@ -462,9 +462,9 @@ const remove = (file: File) => {
 	border-radius: var(--bb-radius);
 	display: flex;
 	gap: 0.5rem;
+	padding-inline-end: 0.75rem;
+	padding-inline-start: 0.75rem;
 	padding-bottom: 0.375rem;
-	padding-left: 0.75rem;
-	padding-right: 0.75rem;
 	padding-top: 0.375rem;
 }
 </style>
@@ -697,9 +697,9 @@ const onError = (error: DropZoneError) => {
 	border-radius: var(--bb-radius-sm);
 	color: var(--bb-text-muted);
 	font-size: 0.75rem;
+	padding-inline-end: 0.375rem;
+	padding-inline-start: 0.375rem;
 	padding-bottom: 0.125rem;
-	padding-left: 0.375rem;
-	padding-right: 0.375rem;
 	padding-top: 0.125rem;
 }
 
@@ -954,8 +954,8 @@ const remove = (file: File) => {
 	display: flex;
 	gap: 0.5rem;
 	min-height: 2.75rem;
-	padding-left: 0.75rem;
-	padding-right: 0.25rem;
+	padding-inline-end: 0.25rem;
+	padding-inline-start: 0.75rem;
 }
 </style>
 ```
@@ -1358,9 +1358,9 @@ const submit = () => {
 	border-radius: var(--bb-radius);
 	display: flex;
 	gap: 0.5rem;
+	padding-inline-end: 0.75rem;
+	padding-inline-start: 0.75rem;
 	padding-bottom: 0.375rem;
-	padding-left: 0.75rem;
-	padding-right: 0.75rem;
 	padding-top: 0.375rem;
 }
 

package/dist/ai/BbForm.md

@@ -82,7 +82,6 @@ covers Zod 3.24+ and 4, Valibot 1, ArkType 2 and Yup 1.7+.
 	-->
 	<BbForm
 		id="signup"
-		v-slot="{ isSubmitting }"
 		class="grid max-w-md gap-3 rounded-(--bb-radius) border p-4"
 		:schema="signup"
 		@submit="createAccount"
@@ -105,9 +104,7 @@ covers Zod 3.24+ and 4, Valibot 1, ArkType 2 and Yup 1.7+.
 		</div>
 		<BbCheckbox label="I accept the terms" name="terms" />
 
-		<BbButton :loading="isSubmitting" type="submit" variant="primary">
-			Create account
-		</BbButton>
+		<BbButton type="submit" variant="primary"> Create account </BbButton>
 
 		<p v-if="created" class="text-sm" data-testid="created" role="status">
 			Welcome, {{ created.name }} ({{ created.email }}).
@@ -175,8 +172,8 @@ What you get from the one prop:
   handler as `(values: z.output<typeof schema>) => …` (or
   `v.InferOutput<…>`) and it checks. Joi has no static types, so with a Joi
   schema the payload is `any`: annotate the handler yourself.
-- **`isSubmitting` still covers your handler**: return its promise and the
-  button spins until it settles.
+- **Return the handler's promise** and the form locks while it runs: fields
+  read-only, the submit button spinning ([While it saves](#while-it-saves)).
 
 The same form in Valibot, with array rows:
 
@@ -191,7 +188,6 @@ The same form in Valibot, with array rows:
 		also what a native form post (and PHP / Laravel) nests correctly.
 	-->
 	<BbForm
-		v-slot="{ isSubmitting }"
 		class="grid max-w-lg gap-3 rounded-(--bb-radius) border p-4"
 		:model="draft"
 		:schema="order"
@@ -239,9 +235,7 @@ The same form in Valibot, with array rows:
 			</BbButton>
 		</fieldset>
 
-		<BbButton :loading="isSubmitting" type="submit" variant="primary">
-			Save order
-		</BbButton>
+		<BbButton type="submit" variant="primary"> Save order </BbButton>
 
 		<pre
 			v-if="saved"
@@ -360,12 +354,10 @@ const save = async (values: Record<string, unknown>) => {
 </script>
 
 <template>
-	<BbForm v-slot="{ isSubmitting }" @submit="save">
+	<BbForm @submit="save">
 		<BbTextInput label="Full name" rules="required" />
 		<BbTextInput label="Email" rules="required|email" type="email" />
-		<BbButton :loading="isSubmitting" type="submit" variant="primary">
-			Save
-		</BbButton>
+		<BbButton type="submit" variant="primary"> Save </BbButton>
 	</BbForm>
 </template>
 ```
@@ -400,10 +392,10 @@ const send = async (values: Record<string, unknown>) => {
 
 <template>
 	<p>Inviting {{ who }}</p>
-	<BbForm id="invite" v-slot="{ values, isSubmitting }" @submit="send">
+	<BbForm id="invite" v-slot="{ values }" @submit="send">
 		<BbTextInput label="Email" name="email" rules="required|email" />
 		<p>{{ values.email ? `Send to ${values.email}` : 'Type an email' }}</p>
-		<BbButton :loading="isSubmitting" type="submit">Invite</BbButton>
+		<BbButton type="submit">Invite</BbButton>
 	</BbForm>
 </template>
 ```
@@ -538,7 +530,6 @@ step you cannot leave is simply a submit that does not pass.
 		a step you cannot leave is a submit that does not pass.
 	-->
 	<BbForm
-		v-slot="{ isSubmitting }"
 		class="grid max-w-md gap-4 rounded-(--bb-radius) border p-4"
 		keep-values-on-unmount
 		:model="checkout"
@@ -606,12 +597,7 @@ step you cannot leave is simply a submit that does not pass.
 			<BbButton v-if="step > 0" variant="ghost" @click="go(step - 1)">
 				Back
 			</BbButton>
-			<BbButton
-				class="ms-auto"
-				:loading="isSubmitting"
-				type="submit"
-				variant="primary"
-			>
+			<BbButton class="ms-auto" type="submit" variant="primary">
 				{{ step < steps.length - 1 ? 'Next' : 'Place order' }}
 			</BbButton>
 		</footer>
@@ -841,33 +827,46 @@ const bodyRules = computed(() => (publishing.value ? 'required' : ''));
 Both switch live: the next validation uses the new schema or rules, and
 switching back lets a submit through that was blocked a moment ago.
 
-### `isSubmitting` covers your submit, not just validation
+### While it saves
 
-Bind a button's `loading` to `isSubmitting` (or to `submitting` from
-`useBbFormContext`) and it stays on for as long as your handler is actually
-working — **return the promise** and the form waits for it:
+**Return the promise** from `@submit` and the form treats the save as running
+until it settles:
 
 ```vue
-<!-- the spinner runs until save() settles -->
 <BbForm
 	@submit="
 		async (values) => {
 			await api.save(values);
 		}
 	"
-/>
+>
+	<BbTextInput label="Name" name="name" />
+	<BbButton type="submit">Save</BbButton>
+</BbForm>
 ```
 
-A synchronous handler resolves immediately, as you would expect. If your
-handler throws or rejects, the flag still clears (so the button never spins
-forever) and the error is routed to `app.config.errorHandler`, the same place
-Vue sends any other event-handler failure — so a global reporter keeps seeing
-it.
-
-> Fixed in 3.0.0-beta.15 (Q18.3). Before that, `isSubmitting` cleared as soon
-> as _validation_ resolved, so the spinner flashed for a frame and the user
-> could double-submit a save still in flight. If you worked around it with your
-> own `saving` ref, you can drop it.
+While it runs:
+
+- **Every field joined to the form is read-only**, never disabled: values stay
+  visible, focus stays where it was, nothing greys out, and assistive tech
+  hears `aria-readonly`. A `useBbFormField` control reads the same state from
+  its handle's `readonly` (its `controlAttrs` carry `aria-readonly`, and writes
+  to `value` are ignored).
+- **Every `type="submit"` BbButton inside the form spins**, so it cannot be
+  pressed twice. Other buttons (Cancel, a row action) are untouched. A submit
+  button outside the form (a dialog footer's `form="…"`) binds
+  `:loading="useBbFormContext(id).submitting.value"` itself.
+- When the promise settles each field goes back to its own `readonly`, so a
+  field that was read-only stays read-only.
+
+A synchronous handler never locks. A handler that throws or rejects still ends
+the save (nothing spins forever), and the error goes to
+`app.config.errorHandler`, where Vue sends any other event-handler failure.
+`isSubmitting` (slot) and `submitting` (`useBbFormContext`) follow the same
+save, for anything else you show meanwhile.
+
+To keep the fields editable during the save, set `disable-submit-lock` on the
+form.
 
 ### Saving in place: `snapshot()`
 
@@ -1089,11 +1088,7 @@ const save = async (values: Record<string, unknown>) => {
 </script>
 
 <template>
-	<BbForm
-		id="signup"
-		v-slot="{ errors, unmatchedErrors, isSubmitting }"
-		@submit="save"
-	>
+	<BbForm id="signup" v-slot="{ errors, unmatchedErrors }" @submit="save">
 		<!-- Every error in one summary: the two maps never share a path. -->
 		<BbAlert
 			v-if="Object.keys({ ...errors, ...unmatchedErrors }).length"
@@ -1108,7 +1103,7 @@ const save = async (values: Record<string, unknown>) => {
 		</BbAlert>
 		<BbTextInput label="Email" name="email" type="email" />
 		<BbTextInput label="City" name="address[city]" />
-		<BbButton :loading="isSubmitting" type="submit">Create account</BbButton>
+		<BbButton type="submit">Create account</BbButton>
 	</BbForm>
 </template>
 ```
@@ -1259,7 +1254,7 @@ lifting state into the page. It carries `values`, `isSubmitting`, `submitCount`,
 
 ```vue
 <template>
-	<BbForm v-slot="{ dirty, valid, isSubmitting, resetForm }" @submit="save">
+	<BbForm v-slot="{ dirty, valid, resetForm }" @submit="save">
 		<BbTextInput label="Display name" rules="required" />
 		<BbTextarea label="Bio" rules="max:280" />
 
@@ -1267,12 +1262,7 @@ lifting state into the page. It carries `values`, `isSubmitting`, `submitCount`,
 			<BbButton :disabled="!dirty" variant="ghost" @click="resetForm()">
 				Discard
 			</BbButton>
-			<BbButton
-				:disabled="!valid"
-				:loading="isSubmitting"
-				type="submit"
-				variant="primary"
-			>
+			<BbButton :disabled="!valid" type="submit" variant="primary">
 				Save changes
 			</BbButton>
 		</footer>
@@ -1435,6 +1425,7 @@ marker stays consistent with the rules.
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
+| `disableSubmitLock` | `boolean \| undefined` | `false` |  | Keep the fields editable while a save runs. By default, while a `@submit` that returned a promise is pending, every field joined to the form is read-only (never disabled: values stay readable and focusable) and every `type="submit"` BbButton inside the form shows its spinner; both end when the promise settles. A `@submit` that returns nothing never locks. |
 | `fieldErrors` | `Record<string, unknown> \| null \| undefined` |  |  | A server's validation errors, shown on the fields they name, for as long as they are in the object: `form.errors` from Inertia's `useForm()`, `$page.props.errors`, a Laravel 422 body you kept in a `ref`. Keys are field paths (`email`, `address.city`, `address[city]`, `lines.0.qty`); a value is a message or a list of them; a nested object reads as dot paths. `null`, `undefined` and anything that is not a message show nothing. A key no field on the form has is in `unmatchedErrors`. The page owns them: editing the field does not hide its message, the next object you pass does. They never block a submit, and a field's own rule errors show first. When new messages arrive after a submit, the first field that has one takes focus. For a one-off message the form drops once the user edits the field, call `setErrors` instead. |
 | `id` | `string \| undefined` |  |  | Explicit id, so anything outside the form can read and drive it through `useBbFormContext(id)` — a dialog footer's submit button, a page toolbar, a leave guard. It is also the `<form>`'s own id, so a native `<button form="id" type="submit">` outside it submits it. Omit it when the form is self-contained: the slot scope already carries the same state for chrome that lives inside. |
 | `keepValuesOnUnmount` | `boolean \| Ref<boolean, boolean> \| undefined` |  |  | Keep a field's value (and its place in `@submit`) when it unmounts — the `v-if` wizard step you left, a collapsed section. Off, an unmounted field drops out of the values. |

package/dist/ai/BbHoverCard.md

@@ -214,10 +214,12 @@ const events = [
 
 ### Timing and the safe zone
 
-`delay` (default `350` ms, the same prop name as `BbTooltip`'s) is how long the
+`delay` (default `350` ms, the same prop name as `BbTooltip`'s, whose default
+is `100`) is how long the
 pointer has to rest on the activator before the card opens — long enough that a
 pointer passing over a list of names doesn't flash a card for each. Keyboard
-focus opens it after `delay` too. Closing has no prop: once the pointer has left
+focus opens it after `delay` too, and there is no skip delay: unlike a
+tooltip, each card waits its full `delay`. Closing has no prop: once the pointer has left
 both the activator and the card, the card waits a fixed 200 ms, the time the
 pointer needs to cross the gap into the card.
 
@@ -292,7 +294,8 @@ A directive has no slot, so the card's body is a **portal**, as in
   `person-card` is `person` minus `card`, and nothing opens (`check` flags it).
   The portal's slot gets `{ props, close }`.
 - **A component:** `v-bb-hover-card="PersonCard"` renders `PersonCard` in the
-  card. It can close the card with `emit('close')`.
+  card, with `portalProps` as its real props. It gets no `close`: content that
+  needs one is a named portal, or the `BbHoverCard` component.
 - **The object form** takes either one as `portal`, data for it as
   `portalProps` (the named portal's `props`, or the component's real props),
   and any `BbHoverCard` prop: `{ portal: 'person-card', portalProps: { person },
@@ -302,6 +305,15 @@ The portal's content sees the page around it, as if it were written inline:
 a component portal injects from where the trigger is, a named portal from
 where its `<BbHoverCardPortal>` is declared.
 
+**Names are checked.** A name is a string on one side and a `<BbHoverCardPortal
+name>` on the other, so `bitboss-ui check` and the ESLint rules (in
+`recommended`) read both across the project: `bitboss-ui/portal-names`
+fails on a name no file declares, with a did-you-mean (`'renam'` → `rename`),
+and on a popover portal opened by `v-bb-hover-card` (it names the family the portal belongs to); `bitboss-ui/unused-portal` warns on a
+`<BbHoverCardPortal>` nothing opens. Only literal names are judged: a `:name`
+binding or a name held in a variable is never reported. The slot's `props`
+is `any` per key, so `props.person.name` needs no cast.
+
 **A card per row, from the directive**
 
 ```vue
@@ -328,11 +340,11 @@ where its `<BbHoverCardPortal>` is declared.
 	<BbHoverCardPortal v-slot="{ props }" name="person-card">
 		<div class="grid gap-0.5">
 			<div class="font-medium text-(--bb-text)">
-				{{ (props.person as Person).name }}
+				{{ props.person.name }}
 			</div>
 			<div class="text-xs text-(--bb-text-muted)">
-				{{ (props.person as Person).team }} ·
-				{{ (props.person as Person).city }}
+				{{ props.person.team }} ·
+				{{ props.person.city }}
 			</div>
 		</div>
 	</BbHoverCardPortal>
@@ -454,7 +466,7 @@ value written in `<script>` is typed as `BbHoverCardProps['pt']`.
 | `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the card within a bounding element. When provided, the card will not overflow this container's bounds (e.g. a sidebar). Accepts an HTMLElement, a Vue component ref, or a CSS selector string. |
 | `delay` | `number \| undefined` | `350` |  | The delay in milliseconds before the card is shown: how long the pointer rests on the activator, or keyboard focus stays on it. BbTooltip's name; a different default, because a card that opened on every pass of the pointer would be in the way. Closing has a fixed grace instead (see the guide § Timing and the safe zone). |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the component. Disabling an open card closes it. |
-| `eager` | `boolean \| undefined` | `false` |  | Prevents rendering content before it's made visible. |
+| `eager` | `boolean \| undefined` | `false` |  | Renders the card's content at mount instead of on the first open. |
 | `id` | `string \| undefined` |  |  | The activator's id (the card is `bbhc_<id>`, and is labelled by it once it holds a control). Generated when omitted. |
 | `modelValue` | `boolean \| undefined` | `false` |  | Used by v-model to open / close the card. A card with no `v-model` starts closed and is driven by hover and keyboard focus. |
 | `offset` | `number \| undefined` | `4` |  | Space the floating container will maintain from the activator. |