Changelog

Added#

• layout: 'overlay': the widget leaves your input exactly where it is, keeps every style it had, and floats the country button inside it. Built for hosts that own the field — WooCommerce checkout, Contact Form 7, WPForms, any theme with its own input styling — and for design systems where the field is styled by the app, not the widget. The input keeps its own class list and gains dxp-overlay-input as a styling hook.

Fixed#

• The overlay follows the input wherever the page puts it: its position is measured and corrected against the input's real box, so inline wrappers (WooCommerce's .woocommerce-input-wrapper) and late layout shifts line up, and it is re-placed on resize, focus and pointer entry.
• The overlay's position is written inline, so host resets that hit every element — WPForms' div.wpforms-container-full * { position: static } — can no longer drop it into the page flow.
• Placement now writes a style only when the value actually changes, so a field that is already in the right place costs nothing on hover, focus or resize.

Added#

• theme: 'auto' now matches the host page: the nearest .dark / .light, data-theme, data-bs-theme, data-mode or data-color-scheme marker, otherwise the real background colour (including oklch()). It follows theme toggles live.
• classNames for every part (root, button, flag, dial, input, panel, search, list, option, empty) and icons.chevron.
• phone-input.layer.css (@devix-labs/phone-input/styles.layer.css): the same styles in @layer devix, so app styles win without !important.
• New variables: --dxp-panel-font-size, --dxp-panel-radius, --dxp-panel-max-height, --dxp-option-height, --dxp-flag-width and --dxp-font-weight-selected.
• Styling and theming guide with shadcn/ui, Bootstrap and Material recipes; Theming demo.

Changed#

• Compact defaults: 36px field, 14px text, 13px list, neutral grey palette.
• The bottom sheet is used only on touch phones ((max-width: 640px) and (pointer: coarse)). Narrow desktop windows and iframes keep the dropdown.
• The dropdown opens above the field when there's more room there, and shortens to fit rather than being cut off.

Added#

• International phone field for any <input>: searchable country list, flags, dial code, as-you-type formatting and validation.
• Validation from libphonenumber's own metadata — 254 regions, every number type, specific reasons (too_short, too_long, invalid_country_code, possible_local_only, not_allowed_type…).
• Lazy per-country rules: about 0.5 KB per region, loaded the first time that country is used.
• Caret-stable editing, paste of any format, Arabic-Indic / Persian / full-width digits, autofill, extensions, and shared calling codes resolved by area code (+1 204 → Canada).
• Wrappers: React, Vue 3, Svelte action, form-associated <dx-phone-input> web component, jQuery plugin.
• DOM-free core (@devix-labs/phone-input/core) for Node, workers and edge runtimes.
• Accessible combobox/listbox, full keyboard support, RTL, localized country names, bottom sheet on phones, works inside <dialog>.
• Theming through CSS custom properties with light, dark and automatic themes.