# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

## [0.7.0] - 2026-01-30

### Added
- **Internationalization (i18n)** - Disclaimer text now supports 8 languages
  - Supported locales: `en`, `de`, `es`, `fr`, `it`, `nl`, `pl`, `pt`
  - Auto-detects browser locale by default
  - Can be explicitly set via `locale` option in `SDKConfig`
  - Falls back to English if browser locale is not supported
- New `locale` option in `SDKConfig` and `InflowPayProvider` config
- New `Locale` type export for TypeScript users
- New `i18n/` module for translations and locale utilities

## [0.6.0] - 2025-12-17

### Added
- Auto-advance between input fields and reverse auto-advance on backspace
- Enter key submit from any input field if form is valid

### Changed
- Updated UI design
- CVC maxlength updated to support Amex cards (3 → 4)

## [0.5.3] - 2025-11-23

### Changed
- **Removed `theme` prop** - Theme styles now automatically follow system preference via CSS media queries
  - No manual theme control needed - styles adapt based on user's system settings
  - `light` styles now only apply in light mode (scoped via media query)
  - `dark` styles now only apply in dark mode (scoped via media query)
  - Base styles apply to both themes unless overridden by theme-specific styles

### Fixed
- Fixed issue where `light` styles were applying to both light and dark modes

## [0.5.2] - 2025-11-23

### Fixed
- **Theme Switching** - Fixed issue where `theme="light"` or `theme="dark"` didn't work without custom `styles.light` or `styles.dark` properties
  - Theme switching now works even without custom theme styles
  - `theme="dark"` applies default dark styles when no custom styles provided
  - `theme="light"` properly overrides system dark mode preference

## [0.5.1] - 2025-11-23

### ⚠️ Breaking Changes
- **Styling API Completely Changed** - The styling structure has been completely refactored
  - Old flat structure (`backgroundColor`, `color`, `fontSize`, etc.) is no longer supported
  - New element-based structure: use `inputContainer` and `input` properties
  - Migration required: Update your `style` prop to use the new structure
  - See [README.md](./README.md#styling) for migration guide and examples

### Added
- **Theme Support** - Added `theme` prop to control light/dark mode
  - `"auto"` (default) - Follows system preference using CSS media queries
  - `"light"` - Forces light theme, ignores system preference
  - `"dark"` - Forces dark theme, ignores system preference
- **Improved Styling Structure** - Refactored CSSProperties for better scalability
  - Element-based styling: `inputContainer` and `input` properties
  - Theme-specific overrides: `light` and `dark` properties
  - Removed deprecated properties: `iconColor`, `fontSize`, `fontStyle`
- **ButtonStyle Interface** - Extracted button styling into dedicated interface
  - Supports both flat CSS properties and structured states (base, hover, disabled, loaderColor)

### Changed
- **Default Input Design** - Updated default input field styling
  - Added borders and border-radius to inputs
  - Improved spacing and layout
  - Better visual hierarchy
- **Styling API** - Improved organization and scalability
  - `inputContainer` replaces flat container styles
  - `input` property for individual input field styling
  - `placeholder` nested under `input` for better organization

### Documentation
- Updated README.md with comprehensive styling documentation
- Updated QUICK_START.md with new styling examples
- Added complete parameter reference for all styling options

## [0.4.2] - 2025-11-22

### Fixed
- Input width no longer shifts when validation messages appear

## [0.4.1] - 2025-11-22

### Fixed
- Fixed input field width issues in card element
- Added `inputmode="numeric"` attribute to expiry field for better mobile keyboard experience

## [0.4.0] - 2025-11-22

### Added
- **Shadow DOM Implementation** - Complete CSS isolation for card element
  - Prevents style conflicts with parent page styles
  - Isolated styling ensures consistent appearance across all integrations
  - Improved encapsulation and security

### Changed
- Refactored card element rendering to use Shadow DOM
- Updated UI controller to work with Shadow DOM structure