@adamosuiteservices/ui 2.18.6 → 2.19.1

package/docs/components/layout/toaster.md

@@ -6,14 +6,12 @@ Non-intrusive **toast notification system** that appears at the bottom of the sc
 
 ## Features
 
-- ✅ 4 visual variants (default, success, warning, destructive)
-- ✅ Automatic queue system for multiple toasts
+- ✅ 4 visual variants (info, success, warning, destructive)
 - ✅ Configurable auto-close (default 3000ms)
-- ✅ Persistent toasts (no auto-close)
 - ✅ Smooth entry and exit animations
 - ✅ Portal rendering for fixed positioning
 - ✅ Automatic unique IDs
-- ✅ Programmatic manual close
+- ✅ onClose callback support
 
 ## Import
 
@@ -21,9 +19,9 @@ Non-intrusive **toast notification system** that appears at the bottom of the sc
 import { Toaster, ToastManager } from "@adamosuiteservices/ui/toaster";
 ```
 
-## Setup Inicial
+## Initial setup
 
-Agrega el componente `Toaster` en el nivel más alto de tu aplicación:
+Add the `Toaster` component at the top level of your application:
 
 ```tsx
 import { Toaster } from "@adamosuiteservices/ui/toaster";
@@ -31,7 +29,7 @@ import { Toaster } from "@adamosuiteservices/ui/toaster";
 function App() {
   return (
     <>
-      {/* Tu app aquí */}
+      {/* Your app here */}
       <Toaster />
     </>
   );
@@ -64,22 +62,22 @@ function MyComponent() {
 
 ## Variants
 
-### default
+### info
 
-General informational toast with light blue background.
+General informational toast with neutral gray background.
 
 ```tsx
 ToastManager.show({
   message: "This is a general informational message",
-  variant: "default",
+  variant: "info",
 });
 ```
 
 **Styles**:
 
-- Background: `bg-primary-200`
-- Text: `text-foreground`
-- Use: General information, neutral confirmations
+- Background: `bg-accent` (light gray)
+- Text: `text-foreground` (dark gray)
+- Use: General information, neutral confirmations, tips
 
 ### success
 
@@ -95,7 +93,7 @@ ToastManager.show({
 **Styles**:
 
 - Background: `bg-success-50` (light green)
-- Text: `text-success`
+- Text: `text-success-foreground-subtle` (green)
 - Use: Successful saves, completed operations, confirmations
 
 ### warning
@@ -111,8 +109,8 @@ ToastManager.show({
 
 **Styles**:
 
-- Background: `bg-warning-50` (light yellow)
-- Text: `text-warning`
+- Background: `bg-warning-50` (light yellow/orange)
+- Text: `text-warning-foreground-subtle` (orange/brown)
 - Use: Warnings, validations, preventive alerts
 
 ### destructive
@@ -129,24 +127,24 @@ ToastManager.show({
 **Styles**:
 
 - Background: `bg-destructive-50` (light red)
-- Text: `text-destructive`
+- Text: `text-destructive-foreground-subtle` (red)
 - Use: Errors, operation failures, destructive actions
 
 ## Duration and control
 
-### Auto-cierre Personalizado
+### Custom auto-close
 
-Por defecto, los toasts se cierran automáticamente después de 3 segundos (3000ms).
+By default, toasts close automatically after 3 seconds (3000ms).
 
 ```tsx
-// Toast rápido (1 segundo)
+// Quick toast (1 second)
 ToastManager.show({
   message: "Quick notification",
-  variant: "default",
+  variant: "info",
   autoClose: 1000,
 });
 
-// Toast normal (3 segundos - default)
+// Normal toast (3 seconds - default)
 ToastManager.show({
   message: "Normal duration",
   variant: "success",
@@ -161,22 +159,6 @@ ToastManager.show({
 });
 ```
 
-### Persistent toast
-
-For messages that require user confirmation:
-
-```tsx
-// Show toast without auto-close
-ToastManager.show({
-  message: "This message requires your attention",
-  variant: "destructive",
-  autoClose: undefined, // Does not close automatically
-});
-
-// Persistent toasts can be manually closed by the user
-// by clicking on the toast or with specific actions from your app
-```
-
 ## API
 
 ### ToastManager.show()
@@ -197,7 +179,7 @@ ToastManager.show({
 type Toast = {
   id?: string;
   message: string;
-  variant?: "default" | "success" | "warning" | "destructive";
+  variant?: "info" | "success" | "warning" | "destructive";
   autoClose?: number;
   onClose?: () => void;
 };
@@ -207,13 +189,13 @@ type Toast = {
 
 ### Toast options
 
-| Prop      | Type                                                   | Default        | Description                                                    |
-| --------- | ------------------------------------------------------ | -------------- | -------------------------------------------------------------- |
-| id        | `string`                                               | Auto-generated | Unique toast identifier (optional)                             |
-| message   | `string`                                               | -              | **Required**. Text to display                                  |
-| variant   | `"default" \| "success" \| "warning" \| "destructive"` | `"default"`    | Color variant                                                  |
-| autoClose | `number \| undefined`                                  | `3000`         | Duration in ms before auto-closing. `undefined` for persistent |
-| onClose   | `() => void`                                           | `undefined`    | Callback executed when toast closes                            |
+| Prop      | Type                                                | Default        | Description                                                     |
+| --------- | --------------------------------------------------- | -------------- | --------------------------------------------------------------- |
+| id        | `string`                                            | Auto-generated | Unique toast identifier (optional)                              |
+| message   | `string`                                            | -              | **Required**. Text to display                                   |
+| variant   | `"info" \| "success" \| "warning" \| "destructive"` | `"info"`       | Color variant                                                   |
+| autoClose | `number \| undefined`                               | `3000`         | Duration in ms before auto-closing. Defaults to 3000 if omitted |
+| onClose   | `() => void`                                        | `undefined`    | Callback executed when toast closes                             |
 
 ### Toaster component
 
@@ -301,13 +283,13 @@ const showMultipleNotifications = () => {
   // Toasts will be displayed sequentially
   ToastManager.show({
     message: "Step 1: Processing data...",
-    variant: "default",
+    variant: "info",
     autoClose: 2000,
   });
 
   ToastManager.show({
     message: "Step 2: Validating information...",
-    variant: "default",
+    variant: "info",
     autoClose: 2000,
   });
 
@@ -321,14 +303,13 @@ const showMultipleNotifications = () => {
 
 ## Advanced features
 
-### Automatic queue system
+### Toast replacement behavior
 
-The Toaster includes an internal queue system that prevents overlaps:
+The Toaster shows one toast at a time. If a new toast is triggered while one is already visible, the new toast immediately replaces the current one:
 
-- Multiple toasts are automatically queued
 - Only one toast is shown at a time
-- Each toast waits for the previous one to close
-- Smooth transitions between toasts
+- New toasts replace the current toast immediately
+- Each toast has its own auto-close timer
 
 ### CSS animations
 
@@ -359,7 +340,7 @@ Execute custom logic when the toast closes:
 ```tsx
 ToastManager.show({
   message: "Processing...",
-  variant: "default",
+  variant: "info",
   onClose: () => {
     console.log("Toast closed");
     // Additional logic after closing
@@ -423,7 +404,6 @@ ToastManager.show({
 - ✅ Adequate color contrast in all variants
 - ✅ Non-intrusive positioning
 - ✅ Configurable auto-close
-- ✅ Manual close by click
 - ⚠️ No `role="alert"` or `aria-live` (future improvement)
 - ⚠️ No keyboard navigation
 

package/docs/components/ui/accordion-rounded.md

@@ -107,7 +107,7 @@ Individual container for each accordion item.
 **Applied styles**:
 
 - `rounded-2xl`: Very rounded borders
-- `bg-muted`: Light gray background
+- `bg-accent`: Subtle background
 - `mb-4`: Bottom margin of 1rem
 - `last:mb-0`: No margin on last item
 
@@ -541,16 +541,17 @@ Without badges for minimalist design:
 
 ## Differences with regular accordion
 
-| Feature         | Regular accordion       | Accordion rounded              |
-| --------------- | ----------------------- | ------------------------------ |
-| Borders         | Square corners          | `rounded-2xl` (very rounded)   |
-| Item background | Transparent with border | `bg-muted` (light gray)        |
-| Separation      | Border between items    | Margin `mb-4` between items    |
-| Badge support   | No (only children)      | Yes (dedicated `badge` prop)   |
-| Title style     | Normal                  | Uppercase, compact, gray color |
-| Icons           | ChevronDown             | add/remove                     |
-| Trigger height  | Variable                | Fixed `h-16` (3.5rem)          |
-| Main use        | General, documentation  | Forms, validation, steppers    |
+| Feature         | Regular accordion       | Accordion rounded            |
+| --------------- | ----------------------- | ---------------------------- |
+| Borders         | Square corners          | `rounded-2xl` (very rounded) |
+| Item background | Transparent with border | `bg-accent` (subtle)         |
+| Separation      | Border between items    | Margin `mb-4` between items  |
+| Badge support   | No (only children)      | Yes (dedicated `badge` prop) |
+| Title style     | Normal                  | Uppercase, compact           |
+| Icons           | ChevronDown             | add/remove                   |
+| Trigger height  | Variable                | Fixed `h-16` (3.5rem)        |
+| Text color      | `text-foreground`       | `text-accent-foreground`     |
+| Main use        | General, documentation  | Forms, validation, steppers  |
 
 ## Implementation notes
 

package/docs/components/ui/alert.md

@@ -2,17 +2,17 @@
 
 ## Description
 
-Versatile component for displaying **important messages** that require user attention. Uses an intelligent grid system for optional icons, supports 4 color variants, and allows rich content with buttons, lists, progress bars, and more.
+Versatile component for displaying **important messages** that require user attention. Uses an intelligent grid system for optional icons, supports 5 color variants, and allows rich content with buttons, lists, progress bars, and more.
 
 ## Features
 
-- ✅ 4 visual variants (default, destructive, success, warning)
+- ✅ 5 visual variants (default, info, destructive, success, warning)
 - ✅ Automatic grid for optional icons
 - ✅ Supports title only, description only, or both
 - ✅ Rich content: buttons, progress, checkboxes, badges
 - ✅ ARIA "alert" role for accessibility
 - ✅ Auto-sized icons (size-4)
-- ✅ Line clamp on long titles
+- ✅ Flexible grid layout (works with or without icons)
 - ✅ Slot system for composition
 
 ## Import
@@ -91,8 +91,31 @@ For neutral informative messages:
 
 - Background: `bg-card` (white/light gray depending on theme)
 - Text: `text-card-foreground`
+- Icon: `text-card-foreground` (same as text)
 - Usage: General information, tips, neutral notices
 
+### Info (informational messages)
+
+For informational messages that need subtle emphasis:
+
+```tsx
+<Alert variant="info">
+  <Icon symbol="info" />
+  <AlertTitle>Information</AlertTitle>
+  <AlertDescription>
+    Please review the details carefully before proceeding.
+  </AlertDescription>
+</Alert>
+```
+
+**Applied styles**:
+
+- Background: `bg-accent` (light gray)
+- Text: `text-foreground` (dark gray)
+- Icon: `text-foreground` (same as text)
+- Border: `border-border`
+- Usage: Informational messages, hints, neutral notifications with subtle emphasis
+
 ### Success (successful operations)
 
 For confirmations and positive feedback:
@@ -110,8 +133,8 @@ For confirmations and positive feedback:
 **Applied styles**:
 
 - Background: `bg-success-50` (light green)
-- Title/icon text: `text-success` (green)
-- Description text: `text-success/90` (green 90% opacity)
+- Text: `text-success-foreground-subtle` (green)
+- Icon: `text-success-foreground-subtle` (same as text)
 - Usage: Confirmations, completed operations, successful validations
 
 ### Warning (warnings)
@@ -131,8 +154,8 @@ For caution messages requiring attention:
 **Applied styles**:
 
 - Background: `bg-warning-50` (light orange/yellow)
-- Title/icon text: `text-warning` (orange/yellow)
-- Description text: `text-warning/90`
+- Text: `text-warning-foreground-subtle` (orange/brown)
+- Icon: `text-warning-foreground-subtle` (same as text)
 - Usage: Warnings, approaching limits, recommended actions
 
 ### Destructive (critical errors)
@@ -152,8 +175,8 @@ For errors, failures, and critical messages:
 **Applied styles**:
 
 - Background: `bg-destructive-50` (light red)
-- Title/icon text: `text-destructive` (red)
-- Description text: `text-destructive/90`
+- Text: `text-destructive-foreground-subtle` (red)
+- Icon: `text-destructive-foreground-subtle` (same as text)
 - Usage: Errors, validation failures, blocked actions
 
 ## Props
@@ -162,13 +185,13 @@ For errors, failures, and critical messages:
 
 Main alert container with ARIA role.
 
-| Prop      | Type                                                   | Default     | Description                                |
-| --------- | ------------------------------------------------------ | ----------- | ------------------------------------------ |
-| variant   | `"default" \| "destructive" \| "success" \| "warning"` | `"default"` | Visual variant of the alert                |
-| border    | `"default" \| "transparent"`                           | `"default"` | Border style (soft colored or transparent) |
-| className | `string`                                               | -           | Additional CSS classes                     |
-| children  | `ReactNode`                                            | -           | Content (icon, title, description)         |
-| ...props  | `HTMLAttributes<HTMLDivElement>`                       | -           | Native div props                           |
+| Prop      | Type                                                             | Default     | Description                                |
+| --------- | ---------------------------------------------------------------- | ----------- | ------------------------------------------ |
+| variant   | `"default" \| "info" \| "destructive" \| "success" \| "warning"` | `"default"` | Visual variant of the alert                |
+| border    | `"default" \| "transparent"`                                     | `"default"` | Border style (soft colored or transparent) |
+| className | `string`                                                         | -           | Additional CSS classes                     |
+| children  | `ReactNode`                                                      | -           | Content (icon, title, description)         |
+| ...props  | `HTMLAttributes<HTMLDivElement>`                                 | -           | Native div props                           |
 
 **Automatically applied attributes**:
 
@@ -177,7 +200,7 @@ Main alert container with ARIA role.
 
 ### AlertTitle
 
-Alert title with automatic line clamp.
+Alert title with flexible grid positioning.
 
 | Prop      | Type                             | Description            |
 | --------- | -------------------------------- | ---------------------- |
@@ -187,11 +210,11 @@ Alert title with automatic line clamp.
 
 **Features**:
 
-- `line-clamp-1`: Automatically truncates long text
-- `font-medium`: Medium font weight
+- `font-semibold`: Semibold font weight
 - `tracking-tight`: Adjusted letter spacing
 - `min-h-4`: Minimum height of 1rem
-- `col-start-2`: Starts in second grid column (after icon)
+- `row-start-1`: Aligns with icon in first row
+- Automatically positioned in grid (column 1 when no icon, column 2 when icon present)
 
 ### AlertDescription
 
@@ -205,38 +228,45 @@ Description container with rich content support.
 
 **Features**:
 
-- `text-muted-foreground`: Secondary text color (overridden by variants)
 - `grid`: Internal grid container
 - `justify-items-start`: Aligns items to the left
 - `gap-1`: Spacing of 0.25rem between elements
 - `[&_p]:leading-relaxed`: Relaxed line height for paragraphs
-- `col-start-2`: Starts in second grid column
+- `col-span-2 row-start-2`: Spans both grid columns in second row
+- Text color inherited from variant
 
 ## Intelligent grid system
 
-The Alert uses CSS Grid with **automatic icon detection**:
+The Alert uses a **2-row CSS Grid** with automatic layout and Figma-aligned spacing:
 
-### Without icon
+**Base styles**:
+
+- Padding: `p-6` (24px on all sides)
+- Border radius: `rounded-3xl` (24px)
+- Gap between title and description: `gap-y-2` (8px)
+- Gap between icon and title: `gap-x-3` (12px)
+
+**Grid structure**:
 
 ```css
-grid-cols-[0_1fr]
+grid-template-columns: auto 1fr;
+gap-x: 12px; /* Between icon and content */
+gap-y: 8px; /* Between rows */
 ```
 
-- Column 1: 0px (hidden)
-- Column 2: All available space
+**Row 1**: Icon (if present) + Title horizontally aligned
 
-### With icon
+- Icon: `col-start-1 row-start-1` (auto-sized)
+- Title: `row-start-1` (auto-positioned in next available column)
 
-```css
-grid-cols-[calc(var(--adm-spacing)*4)_1fr]
-has-[>svg]:gap-x-3
-```
+**Row 2**: Description spans full width
+
+- Description: `col-span-2 row-start-2` (spans both columns)
 
-- Column 1: 1rem (16px) for icon
-- Column 2: All remaining space
-- Horizontal gap: 0.75rem (12px)
+**Behavior**:
 
-**Automatic selector**: `has-[>svg]` detects if there's a direct SVG element
+- **With icon**: Title appears in column 2, aligned with icon
+- **Without icon**: Title automatically starts in column 1 (no empty space)
 
 ### Icon styles
 

package/docs/components/ui/amount-input.md

@@ -0,0 +1,229 @@
+# Amount input component
+
+A composable monetary input with automatic number formatting, regional flag display, and currency symbol derivation from a BCP 47 locale.
+
+## Description
+
+`AmountInput` is built from four composable sub-components that wrap `InputGroup` internally. The locale drives everything: the regional flag, the currency symbol, and the number formatting. No separate currency code is needed.
+
+## Features
+
+- Derives the country flag and currency symbol from a single BCP 47 locale tag (e.g. `"es-CO"`)
+- Formats numbers automatically on blur using `Intl.NumberFormat`
+- Supports controlled (`value` + `onValueChange`) and uncontrolled (`defaultValue`) modes
+- Raw number is always available via `onValueChange` — the formatted string stays in the input
+- Composable action slot (`AmountInputAction`) for inline link buttons (e.g. "use all")
+- Disabled state propagates from `<fieldset disabled>` automatically
+- Invalid state via `aria-invalid` triggers a destructive border on the container
+- Eurozone countries each show their own national flag (not the EU flag) for better context in a payment UI
+
+## Import
+
+```typescript
+import {
+  AmountInputContainer,
+  AmountInputFlag,
+  AmountInput,
+  AmountInputAction,
+  type AmountInputContainerProps,
+  type AmountInputFlagProps,
+  type AmountInputProps,
+  type AmountInputActionProps,
+} from "@adamosuiteservices/ui/amount-input";
+```
+
+Utilities are also exported for custom use:
+
+```typescript
+import {
+  REGION_CURRENCY_MAP,
+  getRegionFromLocale,
+  getCurrencySymbol,
+  formatAmount,
+} from "@adamosuiteservices/ui/amount-input";
+```
+
+## Basic usage
+
+```tsx
+<AmountInputContainer>
+  <AmountInputFlag locale="en-US" />
+  <AmountInput locale="en-US" placeholder="0.00" />
+</AmountInputContainer>
+```
+
+## Controlled
+
+```tsx
+const [value, setValue] = useState<number | undefined>(undefined);
+
+<AmountInputContainer>
+  <AmountInputFlag locale="es-CO" />
+  <AmountInput
+    locale="es-CO"
+    value={value}
+    onValueChange={setValue}
+    placeholder="0,00"
+  />
+</AmountInputContainer>;
+```
+
+## With action
+
+```tsx
+<AmountInputContainer>
+  <AmountInputFlag locale="es-CO" />
+  <AmountInput
+    locale="es-CO"
+    value={value}
+    onValueChange={setValue}
+    placeholder="0,00"
+  />
+  <AmountInputAction onClick={handleMax}>Usar todo</AmountInputAction>
+</AmountInputContainer>
+```
+
+## Inside a field
+
+```tsx
+<Field>
+  <FieldLabel>Amount</FieldLabel>
+  <AmountInputContainer>
+    <AmountInputFlag locale="de-DE" />
+    <AmountInput locale="de-DE" placeholder="0,00" />
+  </AmountInputContainer>
+  <FieldDescription>Available balance: €4,200.00</FieldDescription>
+</Field>
+```
+
+## Props
+
+### AmountInputContainer
+
+| Prop        | Type      | Default | Description                                                 |
+| ----------- | --------- | ------- | ----------------------------------------------------------- |
+| `disabled`  | `boolean` | —       | Propagates disabled styling to flag addon and action button |
+| `className` | `string`  | —       | Additional CSS classes                                      |
+
+Accepts all `<div>` props.
+
+### AmountInputFlag
+
+| Prop             | Type     | Default | Description                                                                              |
+| ---------------- | -------- | ------- | ---------------------------------------------------------------------------------------- |
+| `locale`         | `string` | —       | BCP 47 locale (e.g. `"es-CO"`, `"de-DE"`). Derives the regional flag and currency symbol |
+| `currencySymbol` | `string` | —       | Override the derived currency symbol                                                     |
+
+### AmountInput
+
+| Prop                    | Type                                   | Default   | Description                                                  |
+| ----------------------- | -------------------------------------- | --------- | ------------------------------------------------------------ |
+| `value`                 | `number \| string`                     | —         | Controlled value                                             |
+| `defaultValue`          | `number \| string`                     | —         | Uncontrolled initial value                                   |
+| `onValueChange`         | `(value: number \| undefined) => void` | —         | Called on blur with the parsed numeric value, or `undefined` |
+| `locale`                | `string`                               | `"en-US"` | BCP 47 locale used for `Intl.NumberFormat` formatting        |
+| `minimumFractionDigits` | `number`                               | `2`       | Minimum decimal places shown after formatting                |
+| `maximumFractionDigits` | `number`                               | `2`       | Maximum decimal places shown after formatting                |
+| `disabled`              | `boolean`                              | —         | Disables the native input                                    |
+| `placeholder`           | `string`                               | —         | Placeholder text                                             |
+| `aria-invalid`          | `boolean`                              | —         | Triggers destructive border on the container via `:has()`    |
+| `className`             | `string`                               | —         | Additional CSS classes                                       |
+
+Accepts all `<input>` props except `type`, `value` (native), `defaultValue` (native), and `onChange`.
+
+### AmountInputAction
+
+| Prop        | Type     | Default    | Description            |
+| ----------- | -------- | ---------- | ---------------------- |
+| `type`      | `string` | `"button"` | HTML button type       |
+| `className` | `string` | —          | Additional CSS classes |
+
+Accepts all `InputGroupButton` props except `variant` (locked to `"link"`).
+
+## Utilities
+
+### `REGION_CURRENCY_MAP`
+
+`Record<string, string>` — maps ISO 3166-1 alpha-2 region codes (lowercase) to ISO 4217 currency codes. Covers 40+ regions. Eurozone countries all map to `"EUR"`.
+
+### `getRegionFromLocale(locale: string): string | null`
+
+Extracts the lowercase region code from a BCP 47 locale tag using `Intl.Locale`. Returns `null` if the locale is invalid or has no region subtag.
+
+### `getCurrencySymbol(currencyCode: string): string`
+
+Returns the currency symbol (`$`, `€`, `£`, etc.) for an ISO 4217 code using `Intl.NumberFormat`. Falls back to the code itself if derivation fails.
+
+### `formatAmount(raw, locale, minimumFractionDigits, maximumFractionDigits): string`
+
+Formats a raw numeric string using `Intl.NumberFormat`. Returns the original string if it cannot be parsed as a number.
+
+## Examples
+
+### Disabled state
+
+Pass `disabled` to both `AmountInputContainer` (for addon styling) and `AmountInput` (for the native input):
+
+```tsx
+<AmountInputContainer disabled>
+  <AmountInputFlag locale="es-CO" />
+  <AmountInput locale="es-CO" defaultValue={9500000} disabled />
+</AmountInputContainer>
+```
+
+### Invalid state
+
+```tsx
+<AmountInputContainer>
+  <AmountInputFlag locale="en-GB" />
+  <AmountInput locale="en-GB" placeholder="0.00" aria-invalid />
+</AmountInputContainer>
+```
+
+### Inside a disabled fieldset
+
+```tsx
+<FieldSet disabled>
+  <FieldLegend>Payment details</FieldLegend>
+  <AmountInputContainer>
+    <AmountInputFlag locale="en-US" />
+    <AmountInput locale="en-US" defaultValue={250} />
+  </AmountInputContainer>
+</FieldSet>
+```
+
+### Multiple currencies
+
+```tsx
+const locales = ["en-US", "de-DE", "es-CO", "en-GB", "pt-BR", "es-MX"];
+
+{
+  locales.map((locale) => (
+    <AmountInputContainer key={locale}>
+      <AmountInputFlag locale={locale} />
+      <AmountInput locale={locale} placeholder="0.00" />
+    </AmountInputContainer>
+  ));
+}
+```
+
+## Implementation notes
+
+- `AmountInputFlag` resolves: locale → region code → `REGION_CURRENCY_MAP` → currency code → `getCurrencySymbol`
+- `AmountInput` uses a dual-state strategy: `displayValue` (formatted string shown in the input) and a raw number via `onValueChange`. On focus, formatting is stripped so the user types a plain number. On blur, formatting is re-applied.
+- `AmountInputContainer` passes `data-disabled` to `InputGroup`, which propagates opacity to addons via `group-data-[disabled=true]` selectors.
+- `data-slot="input-group-control"` on the inner `<input>` allows `InputGroup`'s `:has()` selectors to activate the focus ring and error border.
+
+## Accessibility
+
+- `aria-invalid` on `AmountInput` switches the container border to the destructive color automatically.
+- `inputMode="decimal"` on the inner `<input>` opens the numeric keyboard on mobile.
+- `disabled` on `AmountInput` maps to native HTML disabled, which prevents interaction and announces the state to screen readers.
+- Cards inside a `<fieldset disabled>` inherit the disabled state natively.
+
+## References
+
+- [MDN: Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)
+- [MDN: Intl.Locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
+- [flagcdn.com](https://flagcdn.com) — flag images by region code
+- [BCP 47 language tags](https://www.rfc-editor.org/rfc/rfc5646)