bitboss-ui 3.0.0-beta.21 → 3.0.0-beta.23

package/dist/ai/guides/migration/v2-to-v3.md

@@ -39,6 +39,25 @@ explicitly (section 8).
 
 ## 0. Upgrade strategy — do it in this order
 
+> **Already on v3, bumping between prereleases?** This guide is the v2 → v3
+> move; you want the much shorter answer instead:
+>
+> ```bash
+> npx bitboss-ui changelog --since 3.0.0-beta.20   # what BREAKS in the bump
+> ```
+>
+> Then turn that list into **your** files, before you install anything:
+>
+> ```bash
+> npm pack bitboss-ui@3.0.0-beta.21 && tar -xzf bitboss-ui-3.0.0-beta.21.tgz
+> npx bitboss-ui check --manifest package/dist/ai/components.json
+> ```
+>
+> `check` normally judges the INSTALLED version, which can only tell you what
+> an upgrade broke after you took it. `--manifest` points it at the version you
+> are moving to, so the damage is visible first. Agents with the MCP server get
+> the same answer from `list_changes({ since })`.
+
 1. **Swap the setup** (section 1): install the build plugin and the runtime
    plugin. Nothing renders correctly until this is done.
 2. **Move your config** (section 2): everything you passed to
@@ -52,6 +71,13 @@ explicitly (section 8).
    fail loudly. Fix them component by component with the per-component guides.
 5. **Audit what the compiler cannot find** (section 8): untyped templates,
    `v-bind` objects, and behavioral flips are silent. Run the grep playbook.
+   **Your stylesheets are the silent half.** `vue-tsc` never reads CSS, so a
+   rule targeting a renamed or deleted class simply stops matching — no error,
+   no warning, and the page often still looks close enough to pass review. A
+   v2-era theme file can carry hundreds of lines that have done nothing since
+   the upgrade. Section 5.6 has the rename table and the grep that finds them;
+   run it before you conclude a component "has no token for this", because a
+   dead override and a missing affordance look identical from the browser.
 6. **Convert class overrides to variants** (section 7): userland
    `class="bb-button--outline"`-style overrides keep _working_ but are now the
    wrong pattern — the variant prop exists, is typed, and is the only form the
@@ -1031,28 +1057,29 @@ markup contract and the layout drift that comes with the substrate:
 
 **Everything else**
 
-| v2                                                                                                                                                                                                                                            | v3                                                                                                                                                                                                                            |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.bb-chip*`                                                                                                                                                                                                                                   | `.bb-badge*` (component replaced)                                                                                                                                                                                             |
-| `.bb-badge*` used as a floating count/dot (`--dot --floating --positioned --left --bottom --empty`, `__wrapper`, `__content-container`)                                                                                                       | `.bb-indicator*` (component renamed)                                                                                                                                                                                          |
-| `.bb-color-palette__*` (canvas, canvas-thumb, canvas-wrap, controls, eyedropper, preview, preview--alpha, preview-wrap, slider-thumb, slider-track, slider-wrap, slider-wrap--alpha, sliders, swatch, swatch--active, swatch-group, swatches) | `.bb-base-color-palette__*` — 1:1 on every one                                                                                                                                                                                |
-| `.bb-toast--top-start` / `--top` / `--top-end` / `--bottom-start` / `--bottom` / `--bottom-end`                                                                                                                                               | `.bb-toast--top-left` / `--top-center` / `--top-right` / `--bottom-left` / `--bottom-center` / `--bottom-right` (matching the `position` prop's corner set)                                                                   |
-| `.bb-toast-message__icon-container`                                                                                                                                                                                                           | **removed** — style `.bb-toast-message__icon` directly                                                                                                                                                                        |
-| `.bb-tree--open`                                                                                                                                                                                                                              | `.bb-tree__node--expanded`                                                                                                                                                                                                    |
-| `.bb-tree-row`                                                                                                                                                                                                                                | `.bb-tree__row`                                                                                                                                                                                                               |
-| `.bb-tree-main-content`                                                                                                                                                                                                                       | `.bb-tree__content`                                                                                                                                                                                                           |
-| `.bb-dropdown-button__dropdown-chevron`                                                                                                                                                                                                       | `.bb-dropdown-button__chevron`                                                                                                                                                                                                |
-| `.bb-dropdown-button--loading` / `__content` / `__icon` / `__prepend-icon` / `__append-icon`                                                                                                                                                  | **removed** — the split button delegates to `BbButton`'s internals; target `.bb-button__*` inside it                                                                                                                          |
-| `.bb-dropdown__wrapper`                                                                                                                                                                                                                       | **removed** — the extra wrapper element is gone                                                                                                                                                                               |
-| `.bb-select-popover__search-spinner`                                                                                                                                                                                                          | `.bb-select-popover__search-icon` (one element, spinner state included)                                                                                                                                                       |
-| `.bb-base-date-picker__header` (the tinted banner holding the month/year controls)                                                                                                                                                            | `.bb-base-date-picker__controls` (+ the inner `__nav-center`) — the banner is gone; the controls sit on the calendar surface. `__header-container` and `__header-cell` are unrelated and unchanged: they are the weekday row. |
-| `.bb-base-date-picker__control` / `__year-control`                                                                                                                                                                                            | `.bb-base-date-picker__nav-btn`                                                                                                                                                                                               |
-| `.bb-base-date-picker__month-button` / `__year-button`                                                                                                                                                                                        | `.bb-base-date-picker__heading-btn` (+ `--active`)                                                                                                                                                                            |
-| `.bb-base-date-picker__weekday`                                                                                                                                                                                                               | `.bb-base-date-picker__header-cell`                                                                                                                                                                                           |
-| `.bb-base-date-picker__monthday`                                                                                                                                                                                                              | `.bb-base-date-picker__date` (+ the inner `__date-button`)                                                                                                                                                                    |
-| `.bb-base-date-picker__year-container`                                                                                                                                                                                                        | `.bb-base-date-picker__year-selector`                                                                                                                                                                                         |
-| `.bb-base-date-picker__header--hidden`, `__selected-day-label`                                                                                                                                                                                | **removed**                                                                                                                                                                                                                   |
-| `.bb-commabox-item--has-comma`                                                                                                                                                                                                                | the select's comma list renders `.bb-base-select__comma-item` (`.bb-commabox-item` itself survives; `--has-comma` and `.bb-chipsbox-item--focused` do not)                                                                    |
+| v2                                                                                                                                                                                                                                            | v3                                                                                                                                                                                                                                                           |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `.bb-chip*`                                                                                                                                                                                                                                   | `.bb-badge*` (component replaced)                                                                                                                                                                                                                            |
+| `.bb-badge*` used as a floating count/dot (`--dot --floating --positioned --left --bottom --empty`, `__wrapper`, `__content-container`)                                                                                                       | `.bb-indicator*` (component renamed)                                                                                                                                                                                                                         |
+| `.bb-color-palette__*` (canvas, canvas-thumb, canvas-wrap, controls, eyedropper, preview, preview--alpha, preview-wrap, slider-thumb, slider-track, slider-wrap, slider-wrap--alpha, sliders, swatch, swatch--active, swatch-group, swatches) | `.bb-base-color-palette__*` — 1:1 on every one                                                                                                                                                                                                               |
+| `.bb-toast--top-start` / `--top` / `--top-end` / `--bottom-start` / `--bottom` / `--bottom-end`                                                                                                                                               | `.bb-toast--top-left` / `--top-center` / `--top-right` / `--bottom-left` / `--bottom-center` / `--bottom-right` (matching the `position` prop's corner set)                                                                                                  |
+| `.bb-toast-message__icon-container`                                                                                                                                                                                                           | **removed** — style `.bb-toast-message__icon` directly                                                                                                                                                                                                       |
+| `.bb-tree--open`                                                                                                                                                                                                                              | `.bb-tree__node--expanded`                                                                                                                                                                                                                                   |
+| `.bb-tree-row`                                                                                                                                                                                                                                | `.bb-tree__row`                                                                                                                                                                                                                                              |
+| `.bb-tree-main-content`                                                                                                                                                                                                                       | `.bb-tree__content`                                                                                                                                                                                                                                          |
+| `.bb-dropdown-button__dropdown-chevron`                                                                                                                                                                                                       | `.bb-dropdown-button__chevron`                                                                                                                                                                                                                               |
+| `.bb-dropdown-button--loading` / `__content` / `__icon` / `__prepend-icon` / `__append-icon`                                                                                                                                                  | **removed** — the split button delegates to `BbButton`'s internals; target `.bb-button__*` inside it                                                                                                                                                         |
+| `.bb-dropdown__wrapper`                                                                                                                                                                                                                       | **removed** — the extra wrapper element is gone                                                                                                                                                                                                              |
+| `.bb-select-popover__search-spinner`                                                                                                                                                                                                          | `.bb-select-popover__search-icon` (one element, spinner state included)                                                                                                                                                                                      |
+| `.bb-base-date-picker__header` (the tinted banner holding the month/year controls)                                                                                                                                                            | `.bb-base-date-picker__controls` (+ the inner `__nav-center`) — the banner is gone; the controls sit on the calendar surface. `__header-container` and `__header-cell` are unrelated and unchanged: they are the weekday row.                                |
+| `.bb-base-date-picker__control` / `__year-control`                                                                                                                                                                                            | `.bb-base-date-picker__nav-btn`                                                                                                                                                                                                                              |
+| `.bb-base-date-picker__month-button` / `__year-button`                                                                                                                                                                                        | `.bb-base-date-picker__heading-btn` (+ `--active`)                                                                                                                                                                                                           |
+| `.bb-base-date-picker__weekday`                                                                                                                                                                                                               | `.bb-base-date-picker__header-cell`                                                                                                                                                                                                                          |
+| `.bb-base-date-picker__monthday`                                                                                                                                                                                                              | `.bb-base-date-picker__date` (+ the inner `__date-button`)                                                                                                                                                                                                   |
+| `.bb-base-date-picker__year-container`                                                                                                                                                                                                        | `.bb-base-date-picker__year-selector`                                                                                                                                                                                                                        |
+| `.bb-base-date-picker__header--hidden`, `__selected-day-label`                                                                                                                                                                                | **removed**                                                                                                                                                                                                                                                  |
+| `.bb-commabox-item--has-comma`                                                                                                                                                                                                                | the select's comma list renders `.bb-base-select__comma-item` (`.bb-commabox-item` itself survives; `--has-comma` and `.bb-chipsbox-item--focused` do not)                                                                                                   |
+| `.sr-only` — the visually-hidden helper every component uses for accessible names and status text (it shared Tailwind's class name)                                                                                                           | `.bb-sr-only`. Only a selector reaching **into** a component (`.bb-table .sr-only`) breaks; your own Tailwind `sr-only` in your markup is untouched — which is why this one is deliberately **not** in the §8 grep: a hit there would be your code, not ours |
 
 The date **input**'s own field tree (`.bb-base-date-picker-input__field`,
 `__fields`, `__placeholder`, `__separator`, `__calendar-btn`) moved to a shared
@@ -1283,7 +1310,7 @@ rg -n 'disabled-while-loading|disabledWhileLoading'  # removed
 rg -n 'animate-x|animate-y|animateX|animateY'        # → disableAnimate*, now default-on
 rg -n 'thumb-translate|thumbTranslate'    # → disable-thumb-translate
 rg -n ':flip=|flip="'                     # → disable-flip on palette/select-popover
-rg -n 'hide-arrow|show-arrow|arrow-padding|hideArrow|showArrow|arrowPadding'  # removed off tooltips
+rg -n 'hide-arrow|show-arrow|arrow-padding|hideArrow|showArrow|arrowPadding'  # removed EVERYWHERE EXCEPT BbTooltip, which keeps hide-arrow + arrow-padding — hits on a tooltip are fine
 rg -n '<BbChip'                           # component removed → BbBadge clearable
 rg -n '<BbBadge'                          # v2 badges are v3 indicators — review each
 rg -n '<BbTab\b'                          # → BbTabs (\b so a tag name alone on its line still matches, and <BbTabs does not)

package/dist/ai/index.md

@@ -12,7 +12,7 @@ This index helps agents quickly find component intent and authored guides before
 - Setup policy: verify installation + plugin setup before proposing usage code.
 - Icon policy: discover available icons first and use only existing icon names.
 - Contract-first policy: each component link below is a typed contract (props/events/slots/v-model). Read `source/<Name>.md` only when the contract is not enough.
-- Machine-readable manifest: [components.json](./components.json) lists every component API surface for programmatic validation.
+- Machine-readable manifest: [components.json](./components.json) lists every component API surface for programmatic validation, plus a `types` array of the public TYPE exports (`BbTableColumn`, `BbDropdownItem`, …) naming the prop each one types and a `usage` tier — `api` is the two dozen you actually reach for, `wrapper` is for wrapping our components in yours, `advanced` is registries and contexts. Those are not components: import them, never write them as a tag.
 - Package path: use `dist/ai/guides/ai-router.md` (then `dist/ai/index.md`) inside the installed `bitboss-ui` package (`node_modules/bitboss-ui/dist/ai/`).
 
 ## Recipes (Page-Level Assemblies)

package/dist/ai/recipes/inertia/approvals-inbox.md

@@ -1286,7 +1286,7 @@ const selectedCount = computed(() =>
 		<!-- Receipt: bigger than the row thumbnail, with a full-size link out. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Receipt
 			</h3>
@@ -1333,7 +1333,7 @@ const selectedCount = computed(() =>
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1487,7 +1487,7 @@ const statusLabel = (status: ExpenseStatus) =>
 		<!-- Recent expenses: names drill down again — the stack keeps growing. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent expenses
 			</h3>

package/dist/ai/recipes/inertia/inline-edit-workspace.md

@@ -1585,7 +1585,7 @@ const selectedCount = computed(() =>
 		<!-- Description. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Description
 			</h3>
@@ -1597,7 +1597,7 @@ const selectedCount = computed(() =>
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>

package/dist/ai/recipes/inertia/onboarding.md

@@ -841,7 +841,7 @@ const ctx = useOnboardingWorkspace();
 		</span>
 		<span
 			v-if="step.status === 'skipped'"
-			class="shrink-0 text-xs uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+			class="shrink-0 text-xs tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 		>
 			Skipped
 		</span>
@@ -1467,7 +1467,7 @@ const cadences: { value: ReminderCadence; label: string }[] = [
 		<!-- What you'll get. -->
 		<section class="flex flex-col gap-2.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				What you'll get
 			</h3>

package/dist/ai/recipes/inertia/ownership-atlas.md

@@ -1122,7 +1122,7 @@ const onTransfer = (value: unknown) => {
 
 		<section v-if="owner.notes" class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Notes
 			</h3>
@@ -1132,7 +1132,7 @@ const onTransfer = (value: unknown) => {
 		<!-- Rollup by holding type. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				By type
 			</h3>
@@ -1144,11 +1144,11 @@ const onTransfer = (value: unknown) => {
 				>
 					<span class="min-w-0">{{ KIND_LABEL[row.kind] }}</span>
 					<span
-						class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+						class="text-xs text-[color:var(--bb-text-muted)] tabular-nums"
 						>{{ row.count }}</span
 					>
 					<span
-						class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+						class="text-xs text-[color:var(--bb-text-muted)] tabular-nums"
 						>{{ money(row.monthlyCost) }}</span
 					>
 				</li>
@@ -1158,7 +1158,7 @@ const onTransfer = (value: unknown) => {
 		<!-- The holdings themselves — a real list, not a summary sentence. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Holdings
 			</h3>
@@ -1179,7 +1179,7 @@ const onTransfer = (value: unknown) => {
 							{{ STATUS_LABEL[holding.status] }}
 						</BbBadge>
 						<span
-							class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+							class="text-xs text-[color:var(--bb-text-muted)] tabular-nums"
 							>{{ money(holding.monthlyCost) }}</span
 						>
 					</div>

package/dist/ai/recipes/inertia/record-form.md

@@ -686,7 +686,7 @@ const trail = computed(() => [
 <template>
 	<section class="flex flex-col gap-3">
 		<h2
-			class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+			class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 		>
 			Details
 		</h2>
@@ -801,7 +801,7 @@ const ctx = useInvoiceForm();
 	<section class="flex flex-col gap-3">
 		<div class="flex items-center justify-between">
 			<h2
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Line items
 			</h2>
@@ -1288,7 +1288,7 @@ const ctx = useInvoiceForm();
 		<!-- Billing profile: exactly the fields this form negotiates. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Billing profile
 			</h3>
@@ -1318,7 +1318,7 @@ const ctx = useInvoiceForm();
 		     through the route-leave guard. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent invoices
 			</h3>
@@ -1332,7 +1332,7 @@ const ctx = useInvoiceForm();
 						{{ recent.number }}
 					</BbBaseButton>
 					<BbBadge variant="outline">{{ recent.status }}</BbBadge>
-					<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+					<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums">
 						{{ currency.format(recent.amount) }}
 					</span>
 				</li>

package/dist/ai/recipes/inertia/records-workspace.md

@@ -1156,7 +1156,7 @@ const selectedCount = computed(() =>
 		<!-- Line items: a real mini-table, not a summary sentence. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Line items
 			</h3>
@@ -1180,7 +1180,7 @@ const selectedCount = computed(() =>
 		<!-- Payments so far. -->
 		<section v-if="invoice.payments.length" class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Payments
 			</h3>
@@ -1203,7 +1203,7 @@ const selectedCount = computed(() =>
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1353,7 +1353,7 @@ const longDate = (value: string) =>
 		     variant — same identity-cell rule as the invoices table. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent invoices
 			</h3>

package/dist/ai/recipes/inertia/upload-center.md

@@ -1174,7 +1174,7 @@ const formattedSize = computed(() => {
 			class="flex-1"
 			:model-value="upload.progress"
 		/>
-		<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+		<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums"
 			>{{ upload.progress }}%</span
 		>
 	</div>
@@ -1631,7 +1631,7 @@ const selectedCount = computed(() =>
 		<section class="flex flex-col gap-1.5">
 			<div class="flex items-center justify-between">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Extracted fields
 				</h3>
@@ -1671,7 +1671,7 @@ const selectedCount = computed(() =>
 		     one-click cell as in the table. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Details
 			</h3>
@@ -1688,7 +1688,7 @@ const selectedCount = computed(() =>
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1840,7 +1840,7 @@ const longDate = (value: string) =>
 		<!-- Recent receipts: names drill down again — the stack keeps growing. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent receipts
 			</h3>
@@ -1860,7 +1860,7 @@ const longDate = (value: string) =>
 					<BbBadge :variant="STATUS_VARIANT[recent.status]">{{
 						STATUS_LABEL[recent.status]
 					}}</BbBadge>
-					<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+					<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums">
 						{{ currency.format(recent.amount) }}
 					</span>
 				</li>

package/dist/ai/recipes/inertia/wizard-form.md

@@ -1087,7 +1087,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Audience
 				</h3>
@@ -1134,7 +1134,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Content
 				</h3>
@@ -1165,7 +1165,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Schedule
 				</h3>
@@ -1331,7 +1331,7 @@ const isReview = computed(() => ctx.step.value === 'review');
 		<!-- The segment's definition, so "who is in here" is answerable in place. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Conditions
 			</h3>
@@ -1350,7 +1350,7 @@ const isReview = computed(() => ctx.step.value === 'review');
 		<!-- Recent campaigns to this segment: fatigue check before sending. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent campaigns
 			</h3>

package/dist/ai/recipes/nuxt/approvals-inbox.md

@@ -1234,7 +1234,7 @@ const clearSelection = () => {
 		<!-- Receipt: bigger than the row thumbnail, with a full-size link out. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Receipt
 			</h3>
@@ -1281,7 +1281,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1435,7 +1435,7 @@ const statusLabel = (status: ExpenseStatus) =>
 		<!-- Recent expenses: names drill down again — the stack keeps growing. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent expenses
 			</h3>

package/dist/ai/recipes/nuxt/inline-edit-workspace.md

@@ -1548,7 +1548,7 @@ const clearSelection = () => {
 		<!-- Description. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Description
 			</h3>
@@ -1560,7 +1560,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>

package/dist/ai/recipes/nuxt/onboarding.md

@@ -808,7 +808,7 @@ const ctx = useOnboardingWorkspace();
 		</span>
 		<span
 			v-if="step.status === 'skipped'"
-			class="shrink-0 text-xs uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+			class="shrink-0 text-xs tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 		>
 			Skipped
 		</span>
@@ -1414,7 +1414,7 @@ const cadences: { value: ReminderCadence; label: string }[] = [
 		<!-- What you'll get. -->
 		<section class="flex flex-col gap-2.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				What you'll get
 			</h3>

package/dist/ai/recipes/nuxt/record-form.md

@@ -715,7 +715,7 @@ const trail = computed(() => [
 <template>
 	<section class="flex flex-col gap-3">
 		<h2
-			class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+			class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 		>
 			Details
 		</h2>
@@ -830,7 +830,7 @@ const ctx = useInvoiceForm();
 	<section class="flex flex-col gap-3">
 		<div class="flex items-center justify-between">
 			<h2
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Line items
 			</h2>
@@ -1317,7 +1317,7 @@ const ctx = useInvoiceForm();
 		<!-- Billing profile: exactly the fields this form negotiates. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Billing profile
 			</h3>
@@ -1347,7 +1347,7 @@ const ctx = useInvoiceForm();
 		     through the route-leave guard. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent invoices
 			</h3>
@@ -1361,7 +1361,7 @@ const ctx = useInvoiceForm();
 						{{ recent.number }}
 					</BbBaseButton>
 					<BbBadge variant="outline">{{ recent.status }}</BbBadge>
-					<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+					<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums">
 						{{ currency.format(recent.amount) }}
 					</span>
 				</li>

package/dist/ai/recipes/nuxt/records-workspace.md

@@ -1141,7 +1141,7 @@ const clearSelection = () => {
 		<!-- Line items: a real mini-table, not a summary sentence. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Line items
 			</h3>
@@ -1165,7 +1165,7 @@ const clearSelection = () => {
 		<!-- Payments so far. -->
 		<section v-if="invoice.payments.length" class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Payments
 			</h3>
@@ -1188,7 +1188,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1311,7 +1311,7 @@ const longDate = (value: string) =>
 		     variant — same identity-cell rule as the invoices table. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent invoices
 			</h3>

package/dist/ai/recipes/nuxt/upload-center.md

@@ -1102,7 +1102,7 @@ const formattedSize = computed(() => {
 			class="flex-1"
 			:model-value="upload.progress"
 		/>
-		<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+		<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums"
 			>{{ upload.progress }}%</span
 		>
 	</div>
@@ -1539,7 +1539,7 @@ const clearSelection = () => {
 		<section class="flex flex-col gap-1.5">
 			<div class="flex items-center justify-between">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Extracted fields
 				</h3>
@@ -1579,7 +1579,7 @@ const clearSelection = () => {
 		     one-click cell as in the table. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Details
 			</h3>
@@ -1596,7 +1596,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1746,7 +1746,7 @@ const longDate = (value: string) =>
 		<!-- Recent receipts: names drill down again — the stack keeps growing. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent receipts
 			</h3>
@@ -1764,7 +1764,7 @@ const longDate = (value: string) =>
 						{{ recent.filename }}
 					</BbButton>
 					<BbBadge variant="outline">{{ recent.status }}</BbBadge>
-					<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+					<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums">
 						{{ currency.format(recent.amount) }}
 					</span>
 				</li>