@saasicat/ui-vue 0.23.0 → 0.24.0

package/src/pages-standard/DashboardPage.vue

@@ -215,7 +215,10 @@ const cards = reactive<KpiCardState[]>([]);
 const loading = ref(false);
 const error = ref<Error | null>(null);
 
-const defaultBarColor = 'linear-gradient(90deg, #3f6bff, #1d4ed8)';
+// Two stops of the brand accent rather than two fixed blues: a host that sets
+// its own `$primary` had a brand-coloured admin with platform-blue KPI bars.
+const defaultBarColor =
+    'linear-gradient(90deg, var(--sa-color-accent), var(--sa-color-accent-strong))';
 
 watch(
     () => props.manifest,
@@ -412,7 +415,7 @@ function barWidth(value: number, max?: number): number {
     margin-bottom: 14px;
     align-items: start;
 }
-@media (max-width: 1280px) {
+@media (max-width: 1439.98px) {
     .sa-dashboard__rows {
         grid-template-columns: 1fr;
     }

package/src/pages-standard/MarketingCatalogPage.vue

@@ -164,7 +164,9 @@ import type {
     ResolvedMarketing,
 } from './marketing-catalog/types.js';
 
-const DEFAULT_ACCENT = '#64748b';
+import { IDENTITY_NEUTRAL, identityAccentAt } from '../client/identity-accents.js';
+
+const DEFAULT_ACCENT = IDENTITY_NEUTRAL;
 
 const props = defineProps<{
     adminEndpoint: string;
@@ -650,7 +652,7 @@ function promoFineprintOf(row: MarketingRow): string {
     return promo.i18n?.[activeLocale.value]?.fineprint || promo.i18n?.de?.fineprint || '';
 }
 function promoColorOf(row: MarketingRow): string {
-    return promoOf(row)?.color ?? '#10b981';
+    return promoOf(row)?.color ?? identityAccentAt(0);
 }
 
 // ─── CTA ───
@@ -999,12 +1001,22 @@ async function onLocaleChange(loc: string): Promise<void> {
 
 .sa-marketing-toolbar {
     display: flex;
+    /* The tab bar and the meta line do not fit side by side below ~672px, and
+     * without this they simply pushed the page off its own right edge — at every
+     * viewport narrower than that, not just the smallest. Nothing measured it
+     * until the overflow guard started asking at each breakpoint band. */
+    flex-wrap: wrap;
     gap: 12px;
     align-items: center;
     margin: 0px;
 }
 .sa-marketing-tabbar {
     display: inline-flex;
+    /* Scrolls rather than wraps: a row of tabs broken across two lines reads as
+     * two groups. It fits every band except the narrowest phone, where the four
+     * tabs need 389px. */
+    overflow-x: auto;
+    max-width: 100%;
     gap: 2px;
     background: var(--sa-color-bg-surface);
     border: 1px solid var(--sa-color-border);
@@ -1043,6 +1055,10 @@ async function onLocaleChange(loc: string): Promise<void> {
 }
 .sa-marketing-meta {
     margin-left: auto;
+    /* Its own contents wrap too: `catalogVersion <code> · locale <code>` is
+     * wider than a phone on its own, so wrapping only the toolbar would move
+     * the overflow one level down instead of removing it. */
+    flex-wrap: wrap;
     font-size: var(--sa-text-sm);
     color: var(--sa-color-fg-secondary);
     display: flex;
@@ -1715,7 +1731,7 @@ async function onLocaleChange(loc: string): Promise<void> {
     cursor: not-allowed;
 }
 
-@media (max-width: 980px) {
+@media (max-width: 1023.98px) {
     .sa-marketing-expand-grid {
         grid-template-columns: 1fr;
     }

package/src/pages-standard/PromoCodesPage.vue

@@ -110,7 +110,9 @@
 import AdminTable from '../components/admin-page/AdminTable.vue';
 import type { PromoCodePlanOption } from '../components/dialogs/types.js';
 
-const PLAN_COLOR_PALETTE = ['#0ea5e9', '#10b981', '#f59e0b', '#7c3aed', '#dc2626', '#64748b'];
+import { IDENTITY_ACCENTS } from '../client/identity-accents.js';
+
+const PLAN_COLOR_PALETTE = IDENTITY_ACCENTS;
 
 /**
  * Heuristic from a consumer wrapper: assigns each plan a stable color so plan

package/src/pages-standard/TenantsPage.vue

@@ -176,7 +176,8 @@ import {
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import TenantActionConfirmDialog from '../components/TenantActionConfirmDialog.vue';
 import StatusPill, { type PillTone } from './tenants/StatusPill.vue';
-import { DEFAULT_PLAN_ACCENTS, formatDate, planAccent, tenantInitials } from './tenants/format.js';
+import { identityChipStyle } from '../client/identity-accents.js';
+import { formatDate, planAccent, tenantInitials } from './tenants/format.js';
 
 // Platform standard page: tenant list.
 //
@@ -323,7 +324,7 @@ const props = withDefaults(
         pageSize: 25,
         showPlanColumn: true,
         planLabelField: 'plan',
-        planAccents: () => DEFAULT_PLAN_ACCENTS,
+        planAccents: () => ({}),
         usageFields: () => [],
         manifest: null,
     },
@@ -484,8 +485,8 @@ const combinedActions = computed<TenantRowAction[]>(() => {
 const hasActions = computed(() => combinedActions.value.length > 0);
 
 function avatarStyle(row: TenantRow): Record<string, string> {
-    const accent = planAccentFor(row);
-    return { background: `${accent}18`, color: accent };
+    const { background, color } = identityChipStyle(planAccentFor(row));
+    return { background, color };
 }
 
 function planAccentFor(row: TenantRow): string {

package/src/pages-standard/discovery-page/discovery-ui.ts

@@ -122,16 +122,19 @@ export function reviewMenuActions(
 
 // ─── Capability kind styling (read-only code facts, #20) ─────────────────────
 
-const KIND_COLORS: Record<string, string> = {
-    endpoint: '#2563eb',
-    service: '#7c3aed',
-    job: '#0891b2',
-    event: '#f59e0b',
+// A capability kind is a category with no ranking, so it takes the identity
+// ramp rather than a status colour: an endpoint is not "better" than a job.
+import { IDENTITY_NEUTRAL, identityChipStyle } from '../../client/identity-accents.js';
+
+const KIND_ACCENTS: Record<string, string> = {
+    endpoint: 'var(--sa-color-identity-1)',
+    service: 'var(--sa-color-identity-2)',
+    job: 'var(--sa-color-identity-5)',
+    event: 'var(--sa-color-identity-4)',
 };
 
 export function kindStyle(kind: string): Record<string, string> {
-    const c = KIND_COLORS[kind] ?? '#64748b';
-    return { background: `${c}1a`, color: c, borderColor: `${c}33` };
+    return identityChipStyle(KIND_ACCENTS[kind] ?? IDENTITY_NEUTRAL);
 }
 
 /**

package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue

@@ -26,11 +26,7 @@
                         <div class="sa-marketing-plan-cell">
                             <div
                                 class="sa-marketing-plan-mark"
-                                :style="{
-                                    background: row.accent + '15',
-                                    color: row.accent,
-                                    borderColor: row.accent + '33',
-                                }"
+                                :style="identityChipStyle(row.accent)"
                             >
                                 {{ row.plan.planKey.slice(0, 3) }}
                             </div>
@@ -462,6 +458,7 @@
 
 <script setup lang="ts">
 import type { MarketingTopFeature, PlanRow, PlanVersionRow } from '@saasicat/types';
+import { identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { FeatureSuggestion, MarketingRow, ResolvedMarketing } from './types.js';

package/src/pages-standard/plan-versions/PlanDiffCard.vue

@@ -11,10 +11,7 @@
     </div>
     <div v-else class="sa-pv-diff-card">
         <header class="sa-pv-diff-card__head">
-            <span
-                class="sa-pv-diff-card__accent"
-                :style="{ background: `${accent}14`, borderColor: `${accent}40` }"
-            >
+            <span class="sa-pv-diff-card__accent" :style="accentWashStyle">
                 <q-icon name="inventory_2" size="14px" :style="{ color: accent }" />
             </span>
             <span class="sa-pv-diff-card__name">{{ title }}</span>
@@ -38,6 +35,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { VersionChange } from '@saasicat/types';
+import { identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import VersionDiffPreview from '../../components/VersionDiffPreview.vue';
@@ -52,6 +50,15 @@ const props = defineProps<{
 }>();
 
 const msg = useSaMessages('planVersions');
+
+// The wash and the edge this badge always had — deliberately not the chip
+// helper's third property. `identityChipStyle` also sets a text colour, and
+// the icon inside already sets its own; no fixture renders this card, so a
+// change nobody can observe is a change nobody should make.
+const accentWashStyle = computed(() => {
+    const { background, borderColor } = identityChipStyle(props.accent);
+    return { background, borderColor };
+});
 const common = useSaMessages('common');
 
 const changeCountLabel = computed(() => {

package/src/pages-standard/plan-versions/PlanVersionsDiff.vue

@@ -66,8 +66,10 @@ const props = defineProps<{
 
 const msg = useSaMessages('planVersions');
 
+import { identityAccentFor } from '../../client/identity-accents.js';
+
 function planAccent(planId: string): string {
-    return props.planAccents?.[planId] ?? '#3f6bff';
+    return identityAccentFor(planId, props.planAccents ?? {});
 }
 
 const planDiffs = computed<SnapshotEntityDiff[]>(() => {

package/src/pages-standard/tenants/format.ts

@@ -1,16 +1,15 @@
 // Formatting helpers for the tenants page.
 //
 // Shared between TenantsPage.vue and subcomponents (Avatar, Pill).
-// Apps with their own plan accents pass them through via the `planAccents` prop;
-// the default map covers the standard plan IDs (BASIC..ENTERPRISE).
+// Apps with their own plan accents pass them through via the `planAccents` prop.
+//
+// The default map used to live here as five hex literals, and it disagreed with
+// the two in `PlanList`/`PlanMatrix`: `STANDARD` was the brand blue on this page
+// and a plain blue on the plans page, `ENTERPRISE` near-black here and teal
+// there. Same plan, three colours, depending on which screen you were looking
+// at. It now comes from the shared ramp, so the answer is one.
 
-export const DEFAULT_PLAN_ACCENTS: Record<string, string> = {
-    BASIC: '#94a3b8',
-    STANDARD: '#3f6bff',
-    PROFESSIONAL: '#7c3aed',
-    BUSINESS: '#0ea5e9',
-    ENTERPRISE: '#0f172a',
-};
+import { IDENTITY_NEUTRAL, identityAccentFor } from '../../client/identity-accents.js';
 
 export function tenantInitials(name: string | null | undefined): string {
     if (!name) return '?';
@@ -22,10 +21,10 @@ export function tenantInitials(name: string | null | undefined): string {
 
 export function planAccent(
     planId: string | null | undefined,
-    accents: Record<string, string> = DEFAULT_PLAN_ACCENTS,
+    accents: Record<string, string> = {},
 ): string {
-    if (!planId) return '#94a3b8';
-    return accents[planId] ?? '#3f6bff';
+    if (!planId) return IDENTITY_NEUTRAL;
+    return identityAccentFor(planId, accents);
 }
 
 /** `locale` is a BCP-47 tag — pages pass `intlLocale.value` of the active UI locale. */

package/src/pages-tenant/MySubscriptionBundlesPage.vue

@@ -188,6 +188,7 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
 import type { SubscriptionBundleRecord } from '@saasicat/types';
+import type { HttpClient } from '../client/types.js';
 
 import { useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useTenantSubscriptionBundles } from '../vue/use-tenant-subscription-bundles.js';
@@ -213,6 +214,13 @@ interface BookableBundle {
 const props = withDefaults(
     defineProps<{
         billingEndpoint: string;
+        /**
+         * App-specific HTTP adapter, as every other tenant-facing component
+         * takes. Without it this page fell through to `defaultHttpClient()`,
+         * so an app using axios with an auth interceptor got a bare `fetch()`
+         * here and nowhere else — and no fixture could reach it either.
+         */
+        http?: HttpClient;
         /**
          * Mapping `bundleVersionId → BundleKey/Label` (the consumer can
          * preload this from the public catalog). Without a mapping we show the
@@ -253,6 +261,7 @@ const effectiveI18n = computed<TenantPlanSectionI18n>(() => ({
 const { bundles, loading, error, load, add, cancel } = useTenantSubscriptionBundles({
     billingEndpoint: props.billingEndpoint,
     getAuthToken: props.getAuthToken,
+    http: props.http,
 });
 
 onMounted(() => load());

package/src/pages-tenant/OnboardingConfigurator.vue

@@ -328,7 +328,7 @@ defineExpose({ draft });
     gap: 24px;
     align-items: start;
 }
-@media (max-width: 1100px) {
+@media (max-width: 1023.98px) {
     .sp-onb__layout {
         grid-template-columns: 1fr;
     }

package/src/pages-tenant/PlanChangeWizard.vue

@@ -223,6 +223,7 @@ import PlanGrid from '../components/plan/PlanGrid.vue';
 import { useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import type { BillingCycleStr, PlanChangePreviewShape } from '../vue/use-tenant-billing.js';
 import type { CatalogPlan } from '../vue/use-tenant-billing-catalog.js';
+import type { PlanChangeWizardI18n } from './default-i18n.js';
 
 // PlanChangeWizard — 3-step dialog for plan changes.
 //
@@ -231,54 +232,6 @@ import type { CatalogPlan } from '../vue/use-tenant-billing-catalog.js';
 // the limits check + proration + feature diff + blockers, step 3 calls `changePlan`.
 // Data-driven via the passed `catalogQuotaKeys[]` — no hard-coded trinity.
 
-interface I18nStrings {
-    title: string;
-    close: string;
-    currentLabel: string;
-    cycleMonthly: string;
-    cycleYearly: string;
-    badgeCurrent: string;
-    badgePopular: string;
-    priceUnitMonthly: string;
-    priceUnitYearly: string;
-    priceOnRequest: string;
-    stepChoose: string;
-    stepChooseIntro: string;
-    stepPreview: string;
-    stepConfirm: string;
-    next: string;
-    back: string;
-    previewLoading: string;
-    effectiveAtLabel: string;
-    effectiveImmediate: string;
-    prorationTitle: string;
-    prorationLine: string;
-    prorationDays: string;
-    limitsTitle: string;
-    limitsUsed: string;
-    limitsCurrent: string;
-    limitsTarget: string;
-    featuresGained: string;
-    featuresLost: string;
-    blockersTitle: string;
-    confirmImmediate: string;
-    confirmScheduled: string;
-    confirmAction: string;
-    confirmInProgress: string;
-    confirmPriceTitle: string;
-    confirmProratedNow: string;
-    confirmRecurringNext: string;
-    confirmRecurringFrom: string;
-    perCycleMonthly: string;
-    perCycleYearly: string;
-    confirmTrialNote: string;
-    confirmRecurringTrialEnd: string;
-    changeTypeUpgrade: string;
-    changeTypeDowngrade: string;
-    changeTypeCycle: string;
-    changeTypeNoop: string;
-}
-
 interface Props {
     modelValue: boolean;
     plans: CatalogPlan[];
@@ -314,7 +267,7 @@ interface Props {
     /** Preview caller (passed through from the consumer composable). */
     previewPlanChange: (plan: string, cycle: BillingCycleStr) => Promise<PlanChangePreviewShape>;
     changePlan: (plan: string, cycle: BillingCycleStr, immediate: boolean) => Promise<void>;
-    i18n: I18nStrings;
+    i18n: PlanChangeWizardI18n;
 }
 
 const props = defineProps<Props>();

package/src/pages-tenant/TenantPlanSection.vue

@@ -198,7 +198,11 @@ import { computed, ref } from 'vue';
 import PackageSnapshotPanel from './PackageSnapshotPanel.vue';
 import PendingVersionBanner from './PendingVersionBanner.vue';
 import PlanChangeWizard from './PlanChangeWizard.vue';
-import { defaultTenantPlanSectionI18n, type TenantPlanSectionI18n } from './default-i18n.js';
+import {
+    defaultTenantPlanSectionI18n,
+    planChangeWizardI18n,
+    type TenantPlanSectionI18n,
+} from './default-i18n.js';
 import BundlePreviewDialog from './tenant-plan-section/BundlePreviewDialog.vue';
 import TenantBundleStore from './tenant-plan-section/TenantBundleStore.vue';
 import TenantFeatureMatrix from './tenant-plan-section/TenantFeatureMatrix.vue';
@@ -429,53 +433,7 @@ const statusColor = computed(() => {
     }
 });
 
-const wizardI18n = computed(() => ({
-    title: effectiveI18n.value.wizardTitle,
-    close: effectiveI18n.value.wizardClose,
-    currentLabel: effectiveI18n.value.wizardCurrent,
-    cycleMonthly: effectiveI18n.value.cycleMonthly,
-    cycleYearly: effectiveI18n.value.cycleYearly,
-    badgeCurrent: effectiveI18n.value.wizardBadgeCurrent,
-    badgePopular: effectiveI18n.value.wizardBadgePopular,
-    priceUnitMonthly: effectiveI18n.value.wizardPriceUnitMonthly,
-    priceUnitYearly: effectiveI18n.value.wizardPriceUnitYearly,
-    priceOnRequest: effectiveI18n.value.wizardPriceOnRequest,
-    stepChoose: effectiveI18n.value.wizardStepChoose,
-    stepChooseIntro: effectiveI18n.value.wizardStepChooseIntro,
-    stepPreview: effectiveI18n.value.wizardStepPreview,
-    stepConfirm: effectiveI18n.value.wizardStepConfirm,
-    next: effectiveI18n.value.wizardNext,
-    back: effectiveI18n.value.wizardBack,
-    previewLoading: effectiveI18n.value.wizardPreviewLoading,
-    effectiveAtLabel: effectiveI18n.value.wizardEffectiveAtLabel,
-    effectiveImmediate: effectiveI18n.value.wizardEffectiveImmediate,
-    prorationTitle: effectiveI18n.value.wizardProrationTitle,
-    prorationLine: effectiveI18n.value.wizardProrationLine,
-    prorationDays: effectiveI18n.value.wizardProrationDays,
-    limitsTitle: effectiveI18n.value.wizardLimitsTitle,
-    limitsUsed: effectiveI18n.value.wizardLimitsUsed,
-    limitsCurrent: effectiveI18n.value.wizardLimitsCurrent,
-    limitsTarget: effectiveI18n.value.wizardLimitsTarget,
-    featuresGained: effectiveI18n.value.wizardFeaturesGained,
-    featuresLost: effectiveI18n.value.wizardFeaturesLost,
-    blockersTitle: effectiveI18n.value.wizardBlockersTitle,
-    confirmImmediate: effectiveI18n.value.wizardConfirmImmediate,
-    confirmScheduled: effectiveI18n.value.wizardConfirmScheduled,
-    confirmAction: effectiveI18n.value.wizardConfirmAction,
-    confirmInProgress: effectiveI18n.value.wizardConfirmInProgress,
-    confirmPriceTitle: effectiveI18n.value.wizardConfirmPriceTitle,
-    confirmProratedNow: effectiveI18n.value.wizardConfirmProratedNow,
-    confirmRecurringNext: effectiveI18n.value.wizardConfirmRecurringNext,
-    confirmRecurringFrom: effectiveI18n.value.wizardConfirmRecurringFrom,
-    perCycleMonthly: effectiveI18n.value.wizardConfirmPerCycleMonthly,
-    perCycleYearly: effectiveI18n.value.wizardConfirmPerCycleYearly,
-    confirmTrialNote: effectiveI18n.value.wizardConfirmTrialNote,
-    confirmRecurringTrialEnd: effectiveI18n.value.wizardConfirmRecurringTrialEnd,
-    changeTypeUpgrade: effectiveI18n.value.wizardChangeTypeUpgrade,
-    changeTypeDowngrade: effectiveI18n.value.wizardChangeTypeDowngrade,
-    changeTypeCycle: effectiveI18n.value.wizardChangeTypeCycle,
-    changeTypeNoop: effectiveI18n.value.wizardChangeTypeNoop,
-}));
+const wizardI18n = computed(() => planChangeWizardI18n(effectiveI18n.value));
 
 // Helper hooks with defaults
 function quotaLabelResolved(key: string): string {

package/src/pages-tenant/default-i18n.ts

@@ -494,3 +494,116 @@ export const DEFAULT_I18N_EN: TenantPlanSectionI18n = {
 export function defaultTenantPlanSectionI18n(locale: SaLocale): TenantPlanSectionI18n {
     return locale === 'en' ? DEFAULT_I18N_EN : DEFAULT_I18N_DE;
 }
+
+/**
+ * The strings `PlanChangeWizard` takes.
+ *
+ * A projection of `TenantPlanSectionI18n` with the `wizard` prefix dropped, so
+ * the wizard's own template reads `i18n.stepChoose` rather than
+ * `i18n.wizardStepChoose`.
+ */
+export interface PlanChangeWizardI18n {
+    title: string;
+    close: string;
+    currentLabel: string;
+    cycleMonthly: string;
+    cycleYearly: string;
+    badgeCurrent: string;
+    badgePopular: string;
+    priceUnitMonthly: string;
+    priceUnitYearly: string;
+    priceOnRequest: string;
+    stepChoose: string;
+    stepChooseIntro: string;
+    stepPreview: string;
+    stepConfirm: string;
+    next: string;
+    back: string;
+    previewLoading: string;
+    effectiveAtLabel: string;
+    effectiveImmediate: string;
+    prorationTitle: string;
+    prorationLine: string;
+    prorationDays: string;
+    limitsTitle: string;
+    limitsUsed: string;
+    limitsCurrent: string;
+    limitsTarget: string;
+    featuresGained: string;
+    featuresLost: string;
+    blockersTitle: string;
+    confirmImmediate: string;
+    confirmScheduled: string;
+    confirmAction: string;
+    confirmInProgress: string;
+    confirmPriceTitle: string;
+    confirmProratedNow: string;
+    confirmRecurringNext: string;
+    confirmRecurringFrom: string;
+    perCycleMonthly: string;
+    perCycleYearly: string;
+    confirmTrialNote: string;
+    confirmRecurringTrialEnd: string;
+    changeTypeUpgrade: string;
+    changeTypeDowngrade: string;
+    changeTypeCycle: string;
+    changeTypeNoop: string;
+}
+
+/**
+ * Builds the wizard's strings from the section's.
+ *
+ * Here rather than inline in `TenantPlanSection.vue`, because the wizard is an
+ * exported component: a consumer who mounts it directly would otherwise have to
+ * reproduce all 44 keys of this mapping by hand, and a visual fixture had to do
+ * exactly that before it moved.
+ */
+export function planChangeWizardI18n(i18n: TenantPlanSectionI18n): PlanChangeWizardI18n {
+    return {
+        title: i18n.wizardTitle,
+        close: i18n.wizardClose,
+        currentLabel: i18n.wizardCurrent,
+        cycleMonthly: i18n.cycleMonthly,
+        cycleYearly: i18n.cycleYearly,
+        badgeCurrent: i18n.wizardBadgeCurrent,
+        badgePopular: i18n.wizardBadgePopular,
+        priceUnitMonthly: i18n.wizardPriceUnitMonthly,
+        priceUnitYearly: i18n.wizardPriceUnitYearly,
+        priceOnRequest: i18n.wizardPriceOnRequest,
+        stepChoose: i18n.wizardStepChoose,
+        stepChooseIntro: i18n.wizardStepChooseIntro,
+        stepPreview: i18n.wizardStepPreview,
+        stepConfirm: i18n.wizardStepConfirm,
+        next: i18n.wizardNext,
+        back: i18n.wizardBack,
+        previewLoading: i18n.wizardPreviewLoading,
+        effectiveAtLabel: i18n.wizardEffectiveAtLabel,
+        effectiveImmediate: i18n.wizardEffectiveImmediate,
+        prorationTitle: i18n.wizardProrationTitle,
+        prorationLine: i18n.wizardProrationLine,
+        prorationDays: i18n.wizardProrationDays,
+        limitsTitle: i18n.wizardLimitsTitle,
+        limitsUsed: i18n.wizardLimitsUsed,
+        limitsCurrent: i18n.wizardLimitsCurrent,
+        limitsTarget: i18n.wizardLimitsTarget,
+        featuresGained: i18n.wizardFeaturesGained,
+        featuresLost: i18n.wizardFeaturesLost,
+        blockersTitle: i18n.wizardBlockersTitle,
+        confirmImmediate: i18n.wizardConfirmImmediate,
+        confirmScheduled: i18n.wizardConfirmScheduled,
+        confirmAction: i18n.wizardConfirmAction,
+        confirmInProgress: i18n.wizardConfirmInProgress,
+        confirmPriceTitle: i18n.wizardConfirmPriceTitle,
+        confirmProratedNow: i18n.wizardConfirmProratedNow,
+        confirmRecurringNext: i18n.wizardConfirmRecurringNext,
+        confirmRecurringFrom: i18n.wizardConfirmRecurringFrom,
+        perCycleMonthly: i18n.wizardConfirmPerCycleMonthly,
+        perCycleYearly: i18n.wizardConfirmPerCycleYearly,
+        confirmTrialNote: i18n.wizardConfirmTrialNote,
+        confirmRecurringTrialEnd: i18n.wizardConfirmRecurringTrialEnd,
+        changeTypeUpgrade: i18n.wizardChangeTypeUpgrade,
+        changeTypeDowngrade: i18n.wizardChangeTypeDowngrade,
+        changeTypeCycle: i18n.wizardChangeTypeCycle,
+        changeTypeNoop: i18n.wizardChangeTypeNoop,
+    };
+}

package/src/ui/theme/_breakpoints.scss

@@ -7,8 +7,14 @@
 //
 // They are Quasar's own breakpoints, deliberately. A component that changes
 // layout at 980px inside an app whose grid changes at 1024px produces a band
-// 44px wide where the two disagree — and the admin surface had six such
-// values (540, 600, 980, 1100, 1180, 1280), so it had several such bands.
+// 44px wide where the two disagree — and the admin surface had six such values
+// (540, 600, 980, 1100, 1180, 1280), so it had several such bands. All six are
+// now on the bounds below; the audit fails on a seventh.
+//
+// Moving 1100 and 1180 DOWN to 1023.98 keeps the wide layout for another 76 and
+// 156 pixels respectively, which is the one direction of this change that could
+// push content off the page. `visual-baseline.spec.ts` measures horizontal
+// overflow at both edges of every band, on every page, for exactly that reason.
 //
 // Usage:
 //     @use '@saasicat/ui-vue/theme/breakpoints' as bp;

package/src/ui/theme/components/card.css

@@ -32,6 +32,32 @@
     color: var(--sa-color-fg-body);
 }
 
+/* Quasar's stepper, for the same reason and one component further along.
+ *
+ * Only the steps you are NOT on. Their titles are a hard-coded grey —
+ * `rgb(158,158,158)`, 2.68:1 on a white card — which is below the floor for
+ * text whose whole job is to say which steps exist. The ACTIVE step is left
+ * alone: Quasar marks it `text-primary`, and that accent is the "you are here"
+ * affordance. A first attempt here painted every title with the heading role
+ * and quietly took that affordance away; the baseline diff showed it.
+ *
+ * The theme could not see any of this until the contrast checker learned to
+ * look inside teleported nodes: the only stepper in the package is in a dialog.
+ */
+.sa-page .q-stepper,
+.sa-portal .q-stepper {
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-body);
+}
+.sa-page .q-stepper__tab:not(.q-stepper__tab--active) .q-stepper__title,
+.sa-portal .q-stepper__tab:not(.q-stepper__tab--active) .q-stepper__title {
+    color: var(--sa-color-fg-muted);
+}
+.sa-page .q-stepper__caption,
+.sa-portal .q-stepper__caption {
+    color: var(--sa-color-fg-subtle);
+}
+
 .sa-card {
     background: var(--sa-color-bg-surface);
     border: 1px solid var(--sa-color-border);

package/src/ui/theme/tokens.primitive.css

@@ -100,6 +100,10 @@
     --sa-sky-50: #f0f9ff;
     --sa-sky-200: #bae6fd;
     --sa-sky-500: #0ea5e9;
+    /* Sky-500 is 2.6:1 on a white card — fine as a dot or a border, too pale to
+     * carry a label. The identity ramp needs a readable sky, so here is the
+     * rung below it. */
+    --sa-sky-700: #0369a1;
 
     /* ── Type families. ─────────────────────────────────────────────────── */
     --sa-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

package/src/ui/theme/tokens.semantic.dark.css

@@ -125,6 +125,18 @@ body.body--dark {
     --sa-color-bundle: var(--sa-amber-500);
     --sa-color-bundle-surface: color-mix(in srgb, var(--sa-amber-500) 16%, transparent);
 
+    /* The identity ramp, one rung lighter throughout — see the light file for
+     * what it is for. This is the half that did not exist while the ramps lived
+     * as hex literals in TypeScript, and its absence is the whole reason the
+     * plan mark sat at 2.96:1 here. */
+    --sa-color-identity-1: var(--sa-blue-300);
+    --sa-color-identity-2: var(--sa-violet-200);
+    --sa-color-identity-3: var(--sa-green-200);
+    --sa-color-identity-4: var(--sa-amber-300);
+    --sa-color-identity-5: var(--sa-sky-200);
+    --sa-color-identity-6: var(--sa-red-300);
+    --sa-color-identity-neutral: var(--sa-neutral-400);
+
     /* Identical to the light theme, and that is the point — see there. */
     --sa-color-inverse-bg: var(--sa-neutral-950);
     --sa-color-inverse-surface: var(--sa-neutral-800);