← All Releases

2.5.0

July 21, 2026

Tabs and OTP Input components, full MFA setup and login flow, and shippable design-token CSS files importable from consumer apps

Summary

  • Added new Tabs and OtpInput components.
  • Added a complete two-factor authentication flow — TwoFactorSetupForm and TwoFactorLoginForm blocks, matching installable pages, and setup2FA / verify2FA / signInWith2FA composables on useAccAuth.
  • Exposed the design-token CSS files (reset.css, variables.css, app.css, and a concatenated index.css) as package exports so consumer apps can import them directly, with a new /design-tokens docs page.

Added

Components

  • Added Tabs — a v-model tab list with options, disabled, and an isLink mode that renders each option as a NuxtLink (using the option's to) for route-driven navigation. Fully themeable via --lev-tabs-* CSS variables, including separate --lev-tabs-item-border-width / -style / -color for per-item border control.
  • Added OtpInput — a one-time-password / verification-code input with v-model support, configurable length, numericOnly / alphanumeric modes, disabled and invalid states, autocomplete="one-time-code" for password-manager / SMS autofill, click-to-first-empty focus, paste distribution with whitespace stripping, and arrow-key / backspace navigation. Themeable via --lev-otp-input-* CSS variables.

Auth

  • Added setup2FA(), verify2FA(), and signInWith2FA() to useAccAuth for the full TOTP-based 2FA lifecycle: generate a secret + QR URI, verify the user's 6-digit code, and complete sign-in when signInWithPassword returns MFA_REQUIRED. See 2FA setup, verify2FA, and signInWith2FA.
  • Added MFA_ALREADY_ENABLED to AuthErrorCode.
  • Added challengeToken to SignInResult — present on signInWithPassword and verify when MFA is required, and consumed by signInWith2FA to complete the login.

Installable templates

  • Added TwoFactorSetupForm as an installable block — single-view setup that calls setup2FA to generate a TOTP secret, displays the QR code + secret text, and verifies the 6-digit code via verify2FA. Shows a "Back to login" action on UNAUTHORIZED rather than auto-redirecting.
  • Added TwoFactorLoginForm as an installable block — prompts for the 6-digit TOTP code, reads the challenge token from shared state set by LoginForm, and calls signInWith2FA to complete login.
  • Added Two-Factor Setup and Two-Factor Login as installable page templates, both using the shared AuthPage layout.

Design tokens

  • Exposed the package's CSS files as importable package exports: @levarnebv/accelerator-nuxtv3-module/styles (concatenated index.css), as well as /styles/reset.css, /styles/variables.css, and /styles/app.css individually. Consumers can now import the design-token system directly instead of redefining tokens.
  • Added a /design-tokens docs page that enumerates every token in variables.css and app.css, resolves var(--…) chains, and groups them by category (Color Palette, Mapped Colors, Theme tokens, Spacing, Radius, Shadow, Typography, …) for at-a-glance reference.

Changed

  • LoginForm now handles MFA_REQUIRED from signInWithPassword: it stores the challengeToken in shared state and redirects to the 2FA login page, so consumers using the installable block get the MFA flow automatically.
  • SegmentedControl focus-visible outline fallback changed from #5298f5 to #1d66bf to align with the updated brand color.

Breaking Changes

  • The newly exposed @levarnebv/accelerator-nuxtv3-module/styles entry (and /styles/reset.css individually) ships a full element reset — box-sizing: border-box, zeroed margin/padding, border: 0 solid, a normalized line-height, and more. If your consumer app does not already apply a CSS reset, importing ./styles or ./styles/reset.css will strip browser default styling (heading sizes, list indentation, link underlines, form control chrome, etc.) and can change how existing pages render.