# Changelog

All notable changes to CountrySelect Pro. Versions follow [Semantic Versioning](https://semver.org/).

## [Unreleased]

## [6.6.0] – 2026-11-06

### Added
- **Web Component `<country-select>`**: a form-associated custom element (ElementInternals) – the value is submitted with its `name`; `required` (validation message from the browser, focus on the visible control), form reset, `disabled` / disabled `<fieldset>`, `readonly` and `<label for>` work natively. Options as attributes (the `data-*` names without `data-`); properties `value`, `country`, `instance`, `validity`, `checkValidity()`, `reportValidity()`; events bubble from the element. Rebuilt immediately after htmx morph / cloning; reserves its height before the script loads. TypeScript: `CountrySelectElement`, `HTMLElementTagNameMap['country-select']`.
- `CountrySelect.getInstance()` accepts a `<country-select>` element.


## [6.5.0] – 2026-11-06

### Added
- **The list is no longer clipped inside modals, offcanvas, `<dialog>` or `overflow: hidden` containers**: it opens in the browser's top layer (Popover API) while staying in the same place in the DOM – so Bootstrap's focus trap, clicks and <kbd>Esc</kbd> (closes only the list, not the modal / dialog) keep working. It is positioned under / above the control and follows it on scroll, resize, modal animations and page changes; it closes when the control scrolls off screen. `data-popover="false"` keeps the previous in-page list; browsers without the Popover API use it automatically.

### Development
- Tests: overflow / transformed modal / `<dialog>` / scroll, real Bootstrap 5.3 modal and offcanvas.

## [6.4.1] – 2026-11-06

### Fixed
- Screen-reader result count in the singular: "1 result" / "1 αποτέλεσμα" (was "1 results"); new text option `result`.

### Development
- **Automated tests** with Playwright on Chromium, Firefox and WebKit plus the minified build: keyboard (Enter with preferred countries, Escape, typing), ARIA and axe-core accessibility scan, search (accents, former names, calling codes), values and events, custom lists, `<select>`, htmx swap / morph (no flash, server error message kept) / clone / history copy, CSS file under a strict CSP, ES module, built-in country list.
- **GitHub Actions CI**: build, TypeScript check and all tests on every push and pull request.
- **Automated releases**: `npm version patch|minor|major` updates the version everywhere and the CHANGELOG; pushing the tag runs the tests, publishes to npm with Trusted Publishing (provenance, no token / OTP) and creates the GitHub Release from the CHANGELOG.

## [6.4.0] – 2026-11-06

### Changed
- **New built-in country list with clear sources and licenses** (the previous `data.json` came from an unknown API):
  ISO 3166-1 alpha-2 codes, English names from **Unicode CLDR** (Unicode License V3), calling codes per **ITU-T E.164**
  checked with libphonenumber-js (MIT). Generated by `npm run build:data` (`scripts/build-data.js`); sources and
  license text in `dist/data.LICENSE.md`.
- **The list is inside the script** (~5 KB, ~2 KB gzip) – no `data.json` request any more (was 86 KB), works offline and
  needs no `connect-src` for the CDN. `baseUrl` is now only the folder of the flags; its default is the same version on
  jsDelivr (npm) instead of `gh/…@6.1.3`.
- `dist/data.json` is a plain array `[{code, name, phone}]` (12 KB) for your own use.
- 11 English names follow CLDR now: *Türkiye* (Turkey), *Côte d’Ivoire* (Ivory Coast), *Cape Verde* (Cabo Verde),
  *Macao* (Macau), *DR Congo* (DRC), *U.S. Virgin Islands*, *U.S. Minor Outlying Islands*, *Saint Helena*,
  *South Georgia and the South Sandwich Islands*, *French Southern Territories*, *Heard and McDonald Islands*.
  The former names are still found by the search and by `data-value-type="name"` (stored values keep working),
  together with official ISO names such as *Korea, Republic of*.
- Calling codes: Vatican City `+39` (in use; `+379` is reserved but unused), Bouvet Island none (uninhabited).

### Fixed
- `data-value-type="phone"` no longer lists territories without a calling code (Bouvet Island).

## [6.3.1] – 2026-11-06

### Fixed
- **htmx morph (idiomorph): no more flash of the raw input.** The morph keeps the same `<input>` but removes the control and the attributes that hide the input; it was re-initialized only on `htmx:afterSettle`, so the browser painted the plain input for a moment. It is now re-initialized immediately (same task, before paint) when the control or `data-cs-initialized` disappears; `htmx:afterSwap` is handled too.
- **htmx morph could delete a server element next to the selector** (e.g. a field error message): idiomorph may turn the old `.cs-wrapper` into the next `<div>` of the new HTML, and the re-init removed it. Only an element that is still the library's own `.cs-wrapper` is removed now.
- `destroy()` by the developer is final: the element is no longer re-initialized automatically (htmx, `CountrySelect.init`) – `new CountrySelect(el)` sets it up again.

## [6.3.0] – 2026-11-06

### Added
- **ES module** build `dist/country-select.mjs`: `import CountrySelect from 'country-select-pro'` (default and named export); `package.json` `exports` for `import` / `require` / `types`.
- **TypeScript types** `dist/country-select.d.ts`: options, custom list items, `getCountry()`, `country-change` event detail, `window.CountrySelectConfig`.
- **Stylesheet** `dist/country-select.css` / `.min.css` (`import 'country-select-pro/css'`): for a strict Content Security Policy – when it is loaded the script adds no `<style>`.
- Flag attribution: flag-icons (MIT, © Panayiotis Lipiridis) in `dist/flags/LICENSE` and the README.

### Changed
- `destroy()` restores the original inline style through `style.cssText` (allowed under a strict CSP).
- `browser` field removed from `package.json` (bundlers use `exports` / `module`).

## [6.2.0] – 2026-11-06

### Fixed
- **Keyboard selection picked the wrong country** when preferred countries or a search were active (Enter on *Greece* selected *Albania*): the index of the visible list is now used.
- Shared phone codes resolve to the main country: `+1` → United States, `+44` → United Kingdom, `+7` → Russia … (preferred countries first) – was the first one alphabetically (American Samoa, Guernsey …). A selected country with a shared code (e.g. Canada `+1`) stays selected.
- `data-value-type="name"`: the selected country is highlighted when the list opens; ISO codes are matched case-insensitively (`gr` = `GR`).
- One request for `data.json` per page instead of one per selector; an error message instead of an endless "Loading..." when it fails.
- Cloned HTML (`cloneNode`, htmx history) and htmx morph swaps re-initialize instead of leaving a dead dropdown; no more document listeners left behind by removed selectors.
- <kbd>Esc</kbd> no longer closes the surrounding Bootstrap modal / offcanvas; `disabled` and `readonly` are respected; the hidden input is no longer an invisible <kbd>Tab</kbd> stop.
- `new CountrySelect('#selector', options)` works as documented (selector string, `defaultCountry`, `preferredCountries`, `onlyCountries`, `search`).
- Search box no longer broken by page CSS such as `input[type=text] { … }`; `box-sizing` / fonts work without Bootstrap.

### Added
- **Accessibility:** ARIA combobox / listbox, `aria-activedescendant`, labels from `aria-label`, `aria-labelledby` or `<label for>`; <kbd>Home</kbd> <kbd>End</kbd> <kbd>PgUp</kbd> <kbd>PgDn</kbd>, open with <kbd>Enter</kbd> / <kbd>Space</kbd> / typing; result count for screen readers; `forced-colors` and `prefers-reduced-motion` support; WCAG AA contrast.
- **Custom lists:** `data-countries` (inline JSON), `data-src` (URL / ajax), `<select>` options (progressive enhancement), `countries` array or function, `setCountries()`; missing names / phone codes are filled from the built-in list.
- **Search:** accent-insensitive (`cote`, `curacao`, `ελλαδα`), by ISO or phone code, aliases (`uk`, `usa`, `hellas` …), best matches first.
- **Localized country names** with `data-lang` (`Intl.DisplayNames`), Greek UI texts for `el`.
- **Theming:** `--cs-*` CSS variables falling back to Bootstrap's `--bs-*` (Bootstrap dark mode works out of the box), works without a framework, `window.CountrySelectConfig = {css: false}` for your own CSS.
- Options: `onlyCountries`, `excludeCountries`, `defaultCountry`, `flags`, `sort`, `flagPath`, `baseUrl`, `searchPlaceholder`, `noResults`, global defaults via `window.CountrySelectConfig`.
- API: `setValue`, `getValue`, `getCountry`, `open`, `close`, `toggle`, `refresh`, `destroy`, `ready`, `CountrySelect.getInstance`, `CountrySelect.init`; `country-change` carries `detail.country`.
- Rotating arrow (follows the text color), selected option in bold, grey placeholder.

### Changed
- `dist/country-select.min.js` is built on `npm publish` and no longer kept in git (jsDelivr also minifies on the fly).
- `jsdelivr` / `unpkg` fields point to the minified file.

## [6.1.4] – 2026-11-06

### Fixed
- When the list opens and the selected country is already visible from the top (e.g. preferred `bg, cy, gr` with Greece selected), the list starts at the top instead of centering the selection – the first preferred countries are no longer hidden.

## [6.1.3] – 2026-07-09

### Fixed
- Double initialization with htmx: the instance is marked before the asynchronous data load.

### Added
- 1x1 flags.

## [6.1.2] – 2026-07-09

### Changed
- SVG flags (4x3) served from the repository instead of emoji flags; `baseUrl` for `data.json` and flags.

## [6.1.1] – 2026-07-09

### Added
- Flag set (`dist/flags`), "Not found" message for empty searches.

## [6.1] – 2026-07-08

### Changed
- Country data from `dist/data.json` (names, ISO codes, phone codes) on jsDelivr.

## [5.6.x] – 2026-03-07

### Changed
- Bootstrap 5 look (sizes, colors, focus ring), SVG arrow, validation styles, htmx initialization guard.

## [5.6] / [4.9.x] – 2026-03-07

### Added
- Preferred countries at the top of the list, drop-up near the bottom of the screen, htmx (`htmx:afterSettle`) and `MutationObserver` auto-initialization.

## [4.8.x] – 2026-03-05

- First releases: search, templates (`data-schema`, `data-schema-return`), phone / code values, dropdown width, row count.

[6.6.0]: https://github.com/nikmauro/country-select-pro/compare/6.5.0...6.6.0
[6.5.0]: https://github.com/nikmauro/country-select-pro/compare/6.4.1...6.5.0
[6.4.1]: https://github.com/nikmauro/country-select-pro/compare/6.4.0...6.4.1
[6.4.0]: https://github.com/nikmauro/country-select-pro/compare/6.3.1...6.4.0
[6.3.1]: https://github.com/nikmauro/country-select-pro/compare/6.3.0...6.3.1
[6.3.0]: https://github.com/nikmauro/country-select-pro/compare/6.2.0...6.3.0
[6.2.0]: https://github.com/nikmauro/country-select-pro/compare/6.1.4...6.2.0
[6.1.4]: https://github.com/nikmauro/country-select-pro/compare/6.1.3...6.1.4
[6.1.3]: https://github.com/nikmauro/country-select-pro/compare/6.1.2...6.1.3
[6.1.2]: https://github.com/nikmauro/country-select-pro/compare/6.1.1...6.1.2
[6.1.1]: https://github.com/nikmauro/country-select-pro/compare/6.1...6.1.1
[6.1]: https://github.com/nikmauro/country-select-pro/compare/v6...6.1
[5.6.x]: https://github.com/nikmauro/country-select-pro/compare/5.6...5.6.4
[5.6]: https://github.com/nikmauro/country-select-pro/compare/4.9.1...5.6
[4.9.x]: https://github.com/nikmauro/country-select-pro/compare/4.8.1...4.9.1
[4.8.x]: https://github.com/nikmauro/country-select-pro/releases/tag/4.8.1