tempest-react-sdk 0.73.0 → 0.75.0

package/README.md

@@ -203,7 +203,7 @@ import "tempest-react-sdk/styles.css";
 
 This injects the design tokens (`--tempest-primary`, `--tempest-radius-md`, ...), a minimal CSS reset, and the per-component CSS Modules. Tokens live on `:root` and on `[data-tempest-theme="dark"]`, so the app can override them globally or per subtree (see [Theming](#theming-reference)).
 
-The reset claims the document surface too — `body { margin: 0 }` plus the theme's background and text colour, and a zero-specificity `height: 100%` chain down to `#root`. Without it an `AppShell` app opens with a spurious scrollbar and an unpainted frame around the shell in dark mode. All four are one ordinary declaration away from being overridden; see [The document surface](https://mauriciobenjamin700.github.io/tempest-react-sdk/en/styles/#the-document-surface).
+The reset claims the document surface too — `body { margin: 0 }` plus the theme's background and text colour, and a zero-specificity height chain: `height: 100%` on `html` and `body`, `min-height: 100%` on `#root`, which takes the fixed height only when it holds a single child — so a full-screen shell fills the viewport and a sticky `Navbar` placed directly in `#root` stays on screen. Without it an `AppShell` app opens with a spurious scrollbar and an unpainted frame around the shell in dark mode. All four are one ordinary declaration away from being overridden; see [The document surface](https://mauriciobenjamin700.github.io/tempest-react-sdk/en/styles/#the-document-surface).
 
 The styles ship hashed under the `tempest_` namespace — they do **not** collide with Tailwind, Stitches, Linaria, or app-level CSS Modules.
 
@@ -229,7 +229,7 @@ export default defineConfig({ plugins: [react(), tempestStyles()] });
 import "tempest-react-sdk/styles/auto.css";
 ```
 
-**If your app owns its own layout,** do not reach for `core.css`: 44 of its 46 selectors dress markup you own (`html`, `body`, `#root`, `button`, `table`, `:where(ul, ol)[class]`). Dropping it is not the fix either — the components are written _against_ that reset, so without it they lose their box model, not their polish. Take the foundation in two pieces instead, which is also what `tempestStyles()` emits by default:
+**If your app owns its own layout,** do not reach for `core.css`: 46 of its 48 rules dress markup you own (`html`, `body`, `#root`, `button`, `table`, `:where(ul, ol)[class]`). Dropping it is not the fix either — the components are written _against_ that reset, so without it they lose their box model, not their polish. Take the foundation in two pieces instead, which is also what `tempestStyles()` emits by default:
 
 ```ts
 import "tempest-react-sdk/styles/tokens.css"; // the 220 --tempest-* tokens
@@ -249,6 +249,8 @@ applyTheme(createTheme(themePresets.violet)); // or start from a preset
 
 The ramp is derived in OKLCH (HSL lightness is not perceptual, which is what makes generated palettes look broken for some hues) and **anchored at step `500`**, so the color you pass is the color your buttons get. `--tempest-primary-foreground` and the text-on-soft step are picked by **measured** contrast, not convention — hardcoding white breaks a yellow brand. See [Theme › createTheme](https://mauriciobenjamin700.github.io/tempest-react-sdk/theme/).
 
+**A section in the brand color (opt-in).** `<Section tone="inverse">` (or `data-tempest-tone="inverse"` on any element) paints a hero, CTA band or footer in the brand and redefines every color token the components read inside it — text ≥ 7:1, muted and subtle text ≥ 4.5:1, focus ring ≥ 3:1, each measured against the fill and a lighter glow over it. Load `tempest-react-sdk/styles/inverse.css` for the SDK's blue, or pass `createTheme({ primary, inverse: createInverseSurface })` for yours; apps that do neither pay nothing. Inside the band, `data-tempest-tone="default"` (or `<Section tone="default">`) brings a region — a white `Card` in a navy hero — back to the page's tokens, light or dark. See [Theme › Inverse surface](https://mauriciobenjamin700.github.io/tempest-react-sdk/en/theme/#inverse-surface-a-section-in-the-brand-color). `Navbar` and `AppBar` take `tone="inverse"` for a bar in the brand color whose buttons, links and focus ring invert with it; `tone="primary"` keeps painting only the background.
+
 **Optional layout layer.** CSS Modules cover the inside of each component; the layer _around_ them (page shell, two-column form, action row, card, a region that scrolls sideways instead of the page) is a second, opt-in stylesheet:
 
 ```ts
@@ -297,7 +299,7 @@ Every module is re-exported from the package root — `import { Button, useDebou
 | `feature-flags`                                                                                   | `FeatureFlagsProvider`, `useFeatureFlag`, `useFlagValue`, `createInMemoryFlags`, `createGrowthBookFeatureFlagsAdapter`, `createLaunchDarklyFeatureFlagsAdapter`, types: `FeatureFlagsAdapter`, `FlagValue`, `GrowthBookLike`, `LDClientLike`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `share`                                                                                           | `share`, `isShareSupported`, `shareOrDownloadBlob` (Web Share file → download fallback), types: `SharePayload`, `ShareResult`, `ShareOrDownloadOptions`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `utils`                                                                                           | `cn`, format BR (`formatCurrency`, `formatDate`, `formatDateForInput`, `formatDateTime`, `formatPhone`, `formatCPF`, `formatPercent`), `storage`, strings (`slugify`, `truncate`, `capitalize`, `camelCase`, `kebabCase`, `pluralize`), numbers (`clamp`, `formatBytes`, `formatCompactNumber`, `percentOf`), arrays (`groupBy`, `uniqueBy`, `chunk`, `range`), objects (`pick`, `omit`, `deepMerge`, `isEmpty`), guards (`isDefined`, `isString`, `isNumber`, `isPlainObject`, `assertNever`), functions (`debounce`, `throttle`, `once`, `memoizeOne`), promises (`sleep`, `withTimeout`), `randomId`, `relativeTime`, `writeXlsx` (generic single-sheet OOXML `.xlsx` writer → `Uint8Array`), CSV (`toCsv`, `downloadCsv` — RFC 4180 escaping + BOM), `setDevBuild` (tell the SDK your build is dev — required under Vite)                                                                                                                           |
-| generic components                                                                                | display (`CopyButton`, `RelativeTime`, `Money`, `TruncateText`, `VisuallyHidden`), headless (`Portal`, `ClickOutside`, `ConditionalWrapper`, `For`, `ErrorText`), media/content (`Image`, `DataList`, `DescriptionList`)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| generic components                                                                                | display (`CopyButton`, `RelativeTime`, `Money`, `TruncateText`, `VisuallyHidden`), motion (`Reveal`), headless (`Portal`, `ClickOutside`, `ConditionalWrapper`, `For`, `ErrorText`), media/content (`Image`, `DataList`, `DescriptionList`)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | Module                                                                                            | Exports                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------                                                                                                                                                                                                                                                                                                                                                                    |
 | `components`                                                                                      | `Avatar`, `Badge`, `Breadcrumbs`, `Button`, `Card`, `Checkbox`, `ChipInput`, `ConfirmDialog`, `Container`, `DatePicker`, `Drawer`, `EmptyState`, `ErrorState`, `FileUpload`, `Form` (`FormSection`, `FormRow`, `FormActions`), `Grid`, `Input`, `InstallBanner`, `InstallButton`, `Modal`, `Pagination`, `Progress`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `Skeleton`, `Spinner`, `Stack`, `Stepper`, `Switch`, `Table`, `Tabs`, `Textarea`, `Toast` (`ToastProvider`, `useToast`), `Tooltip`, `VirtualList`                                                                                                                                                                                                                                                                                                                                                                                                                                    |
@@ -335,7 +337,7 @@ Every module is re-exported from the package root — `import { Button, useDebou
 | `feature-flags`                                                                                   | `FeatureFlagsProvider`, `useFeatureFlag`, `useFlagValue`, `createInMemoryFlags`, `createGrowthBookFeatureFlagsAdapter`, `createLaunchDarklyFeatureFlagsAdapter`, types: `FeatureFlagsAdapter`, `FlagValue`, `GrowthBookLike`, `LDClientLike`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `share`                                                                                           | `share`, `isShareSupported`, `shareOrDownloadBlob` (Web Share file → download fallback), types: `SharePayload`, `ShareResult`, `ShareOrDownloadOptions`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `utils`                                                                                           | `cn`, format BR (`formatCurrency`, `formatDate`, `formatDateForInput`, `formatDateTime`, `formatPhone`, `formatCPF`, `formatPercent`), `storage`, strings (`slugify`, `truncate`, `capitalize`, `camelCase`, `kebabCase`, `pluralize`), numbers (`clamp`, `formatBytes`, `formatCompactNumber`, `percentOf`), arrays (`groupBy`, `uniqueBy`, `chunk`, `range`), objects (`pick`, `omit`, `deepMerge`, `isEmpty`), guards (`isDefined`, `isString`, `isNumber`, `isPlainObject`, `assertNever`), functions (`debounce`, `throttle`, `once`, `memoizeOne`), promises (`sleep`, `withTimeout`), `randomId`, `relativeTime`, `writeXlsx` (generic single-sheet OOXML `.xlsx` writer → `Uint8Array`), CSV (`toCsv`, `downloadCsv` — RFC 4180 escaping + BOM), `setDevBuild` (tell the SDK your build is dev — required under Vite)                                                                                                                           |
-| generic components                                                                                | display (`CopyButton`, `RelativeTime`, `Money`, `TruncateText`, `VisuallyHidden`), headless (`Portal`, `ClickOutside`, `ConditionalWrapper`, `For`, `ErrorText`), media/content (`Image`, `DataList`, `DescriptionList`)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| generic components                                                                                | display (`CopyButton`, `RelativeTime`, `Money`, `TruncateText`, `VisuallyHidden`), motion (`Reveal`), headless (`Portal`, `ClickOutside`, `ConditionalWrapper`, `For`, `ErrorText`), media/content (`Image`, `DataList`, `DescriptionList`)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 
 Full per-module docs are published as a bilingual MkDocs site on GitHub Pages — **[Português (BR)](https://mauriciobenjamin700.github.io/tempest-react-sdk/)** / **[English (US)](https://mauriciobenjamin700.github.io/tempest-react-sdk/en/)** (one page per module + draw.io diagrams in [`docs/diagrams/`](./docs/diagrams)). The source markdown lives in [`docs/`](./docs) (PT-BR base files + `.en.md` translations).
 

package/dist/br/BrazilMap.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BrazilMap.module.cjs","names":[],"sources":["../../src/br/BrazilMap.module.css"],"sourcesContent":[".map {\n    position: relative;\n    width: 100%;\n    background: var(--tempest-surface-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    font-family: var(--tempest-font-sans);\n    overflow: hidden;\n}\n\n.svg {\n    display: block;\n    width: 100%;\n}\n\n.loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.state {\n    fill: var(--tempest-surface-3);\n    stroke: var(--tempest-border-strong);\n    stroke-width: 0.75;\n    stroke-linejoin: round;\n    transition:\n        fill 0.12s ease,\n        opacity 0.12s ease;\n}\n\n.state[role=\"button\"] {\n    cursor: pointer;\n}\n\n.state[role=\"button\"]:hover {\n    fill: var(--tempest-primary-soft);\n}\n\n.state[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-primary);\n    stroke-width: 1.5;\n}\n\n.selected {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-primary-active);\n    stroke-width: 1.25;\n}\n\n.selected:hover {\n    fill: var(--tempest-primary-hover);\n}\n\n.label {\n    fill: var(--tempest-text);\n    font-size: 10px;\n    font-weight: var(--tempest-weight-medium);\n    pointer-events: none;\n    user-select: none;\n}\n\n.tooltip {\n    position: absolute;\n    z-index: 2;\n    transform: translate(12px, 12px);\n    max-width: 240px;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));\n    font-size: var(--tempest-text-xs);\n    line-height: var(--tempest-leading-snug);\n    pointer-events: none;\n    white-space: nowrap;\n}\n\n.tooltipTitle {\n    font-weight: var(--tempest-weight-semibold);\n    font-size: var(--tempest-text-sm);\n}\n\n.tooltipMeta {\n    color: var(--tempest-text-muted);\n}\n\n.marker {\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.marker[role=\"button\"] {\n    cursor: pointer;\n}\n\n.marker[role=\"button\"]:hover {\n    stroke: var(--tempest-primary-active);\n}\n\n.marker[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-primary);\n    stroke-width: 3;\n}\n\n.zoomReset {\n    position: absolute;\n    top: var(--tempest-space-2);\n    right: var(--tempest-space-2);\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text);\n    background: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n}\n\n.zoomReset:hover {\n    background: var(--tempest-surface-2);\n}\n"],"mappings":";"}
+{"version":3,"file":"BrazilMap.module.cjs","names":[],"sources":["../../src/br/BrazilMap.module.css"],"sourcesContent":[".map {\n    position: relative;\n    width: 100%;\n    background: var(--tempest-surface-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    font-family: var(--tempest-font-sans);\n    overflow: hidden;\n}\n\n.svg {\n    display: block;\n    width: 100%;\n}\n\n.loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.state {\n    fill: var(--tempest-surface-3);\n    stroke: var(--tempest-border-strong);\n    stroke-width: 0.75;\n    stroke-linejoin: round;\n    transition:\n        fill 0.12s ease,\n        opacity 0.12s ease;\n}\n\n.state[role=\"button\"] {\n    cursor: pointer;\n}\n\n.state[role=\"button\"]:hover {\n    fill: var(--tempest-primary-soft);\n}\n\n.state[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-focus-ring-color);\n    stroke-width: 1.5;\n}\n\n.selected {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-primary-active);\n    stroke-width: 1.25;\n}\n\n.selected:hover {\n    fill: var(--tempest-primary-hover);\n}\n\n.label {\n    fill: var(--tempest-text);\n    font-size: 10px;\n    font-weight: var(--tempest-weight-medium);\n    pointer-events: none;\n    user-select: none;\n}\n\n.tooltip {\n    position: absolute;\n    z-index: 2;\n    transform: translate(12px, 12px);\n    max-width: 240px;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));\n    font-size: var(--tempest-text-xs);\n    line-height: var(--tempest-leading-snug);\n    pointer-events: none;\n    white-space: nowrap;\n}\n\n.tooltipTitle {\n    font-weight: var(--tempest-weight-semibold);\n    font-size: var(--tempest-text-sm);\n}\n\n.tooltipMeta {\n    color: var(--tempest-text-muted);\n}\n\n.marker {\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.marker[role=\"button\"] {\n    cursor: pointer;\n}\n\n.marker[role=\"button\"]:hover {\n    stroke: var(--tempest-primary-active);\n}\n\n.marker[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-focus-ring-color);\n    stroke-width: 3;\n}\n\n.zoomReset {\n    position: absolute;\n    top: var(--tempest-space-2);\n    right: var(--tempest-space-2);\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text);\n    background: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n}\n\n.zoomReset:hover {\n    background: var(--tempest-surface-2);\n}\n"],"mappings":";"}

package/dist/br/BrazilMap.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrazilMap.module.js","names":[],"sources":["../../src/br/BrazilMap.module.css"],"sourcesContent":[".map {\n    position: relative;\n    width: 100%;\n    background: var(--tempest-surface-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    font-family: var(--tempest-font-sans);\n    overflow: hidden;\n}\n\n.svg {\n    display: block;\n    width: 100%;\n}\n\n.loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.state {\n    fill: var(--tempest-surface-3);\n    stroke: var(--tempest-border-strong);\n    stroke-width: 0.75;\n    stroke-linejoin: round;\n    transition:\n        fill 0.12s ease,\n        opacity 0.12s ease;\n}\n\n.state[role=\"button\"] {\n    cursor: pointer;\n}\n\n.state[role=\"button\"]:hover {\n    fill: var(--tempest-primary-soft);\n}\n\n.state[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-primary);\n    stroke-width: 1.5;\n}\n\n.selected {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-primary-active);\n    stroke-width: 1.25;\n}\n\n.selected:hover {\n    fill: var(--tempest-primary-hover);\n}\n\n.label {\n    fill: var(--tempest-text);\n    font-size: 10px;\n    font-weight: var(--tempest-weight-medium);\n    pointer-events: none;\n    user-select: none;\n}\n\n.tooltip {\n    position: absolute;\n    z-index: 2;\n    transform: translate(12px, 12px);\n    max-width: 240px;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));\n    font-size: var(--tempest-text-xs);\n    line-height: var(--tempest-leading-snug);\n    pointer-events: none;\n    white-space: nowrap;\n}\n\n.tooltipTitle {\n    font-weight: var(--tempest-weight-semibold);\n    font-size: var(--tempest-text-sm);\n}\n\n.tooltipMeta {\n    color: var(--tempest-text-muted);\n}\n\n.marker {\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.marker[role=\"button\"] {\n    cursor: pointer;\n}\n\n.marker[role=\"button\"]:hover {\n    stroke: var(--tempest-primary-active);\n}\n\n.marker[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-primary);\n    stroke-width: 3;\n}\n\n.zoomReset {\n    position: absolute;\n    top: var(--tempest-space-2);\n    right: var(--tempest-space-2);\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text);\n    background: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n}\n\n.zoomReset:hover {\n    background: var(--tempest-surface-2);\n}\n"],"mappings":";"}
+{"version":3,"file":"BrazilMap.module.js","names":[],"sources":["../../src/br/BrazilMap.module.css"],"sourcesContent":[".map {\n    position: relative;\n    width: 100%;\n    background: var(--tempest-surface-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    font-family: var(--tempest-font-sans);\n    overflow: hidden;\n}\n\n.svg {\n    display: block;\n    width: 100%;\n}\n\n.loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.state {\n    fill: var(--tempest-surface-3);\n    stroke: var(--tempest-border-strong);\n    stroke-width: 0.75;\n    stroke-linejoin: round;\n    transition:\n        fill 0.12s ease,\n        opacity 0.12s ease;\n}\n\n.state[role=\"button\"] {\n    cursor: pointer;\n}\n\n.state[role=\"button\"]:hover {\n    fill: var(--tempest-primary-soft);\n}\n\n.state[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-focus-ring-color);\n    stroke-width: 1.5;\n}\n\n.selected {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-primary-active);\n    stroke-width: 1.25;\n}\n\n.selected:hover {\n    fill: var(--tempest-primary-hover);\n}\n\n.label {\n    fill: var(--tempest-text);\n    font-size: 10px;\n    font-weight: var(--tempest-weight-medium);\n    pointer-events: none;\n    user-select: none;\n}\n\n.tooltip {\n    position: absolute;\n    z-index: 2;\n    transform: translate(12px, 12px);\n    max-width: 240px;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));\n    font-size: var(--tempest-text-xs);\n    line-height: var(--tempest-leading-snug);\n    pointer-events: none;\n    white-space: nowrap;\n}\n\n.tooltipTitle {\n    font-weight: var(--tempest-weight-semibold);\n    font-size: var(--tempest-text-sm);\n}\n\n.tooltipMeta {\n    color: var(--tempest-text-muted);\n}\n\n.marker {\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.marker[role=\"button\"] {\n    cursor: pointer;\n}\n\n.marker[role=\"button\"]:hover {\n    stroke: var(--tempest-primary-active);\n}\n\n.marker[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-focus-ring-color);\n    stroke-width: 3;\n}\n\n.zoomReset {\n    position: absolute;\n    top: var(--tempest-space-2);\n    right: var(--tempest-space-2);\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text);\n    background: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n}\n\n.zoomReset:hover {\n    background: var(--tempest-surface-2);\n}\n"],"mappings":";"}

package/dist/br/MapMarkers.cjs

@@ -1,2 +1,2 @@
-const e=require("./BrazilMap.module.cjs");let t=require("react/jsx-runtime");function n({projection:n,markers:r,onMarkerClick:i}){return(0,t.jsx)(`g`,{className:e.default.markers,children:r.map((r,a)=>{let o=n.project(r),s=!!i;return(0,t.jsx)(`circle`,{className:e.default.marker,cx:o.x,cy:o.y,r:r.radius??6,fill:r.color??`var(--tempest-primary)`,"data-marker-id":r.id??a,tabIndex:s?0:void 0,role:s?`button`:void 0,"aria-label":r.label,onClick:s?()=>i?.(r,a):void 0,onKeyDown:s?e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),i?.(r,a))}:void 0,children:r.label?(0,t.jsx)(`title`,{children:r.label}):null},r.id??a)})})}exports.MapMarkers=n;
+const e=require("./BrazilMap.module.cjs");let t=require("react/jsx-runtime");function n({projection:n,markers:r,onMarkerClick:i}){return(0,t.jsx)(`g`,{children:r.map((r,a)=>{let o=n.project(r),s=!!i;return(0,t.jsx)(`circle`,{className:e.default.marker,cx:o.x,cy:o.y,r:r.radius??6,fill:r.color??`var(--tempest-primary)`,"data-marker-id":r.id??a,tabIndex:s?0:void 0,role:s?`button`:void 0,"aria-label":r.label,onClick:s?()=>i?.(r,a):void 0,onKeyDown:s?e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),i?.(r,a))}:void 0,children:r.label?(0,t.jsx)(`title`,{children:r.label}):null},r.id??a)})})}exports.MapMarkers=n;
 //# sourceMappingURL=MapMarkers.cjs.map

package/dist/br/MapMarkers.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MapMarkers.cjs","names":[],"sources":["../../src/br/MapMarkers.tsx"],"sourcesContent":["import type { FittedProjection } from \"@/geo/projection\";\nimport type { GeoMarker } from \"@/geo/types\";\nimport styles from \"./BrazilMap.module.css\";\n\nexport interface MapMarkersProps {\n    /** Projection used by the host map (markers must share it to line up). */\n    projection: FittedProjection;\n    /** Pins to plot. */\n    markers: readonly GeoMarker[];\n    /** Fired when a marker is clicked. */\n    onMarkerClick?: (marker: GeoMarker, index: number) => void;\n}\n\n/**\n * SVG overlay of point markers, projected with the host map's projection so\n * they align with its shapes. Each marker carries a native `<title>` (its\n * `label`) and is clickable when `onMarkerClick` is set.\n */\nexport function MapMarkers({ projection, markers, onMarkerClick }: MapMarkersProps) {\n    return (\n        <g className={styles.markers}>\n            {markers.map((marker, index) => {\n                const p = projection.project(marker);\n                const interactive = Boolean(onMarkerClick);\n                return (\n                    <circle\n                        key={marker.id ?? index}\n                        className={styles.marker}\n                        cx={p.x}\n                        cy={p.y}\n                        r={marker.radius ?? 6}\n                        fill={marker.color ?? \"var(--tempest-primary)\"}\n                        data-marker-id={marker.id ?? index}\n                        tabIndex={interactive ? 0 : undefined}\n                        role={interactive ? \"button\" : undefined}\n                        aria-label={marker.label}\n                        onClick={interactive ? () => onMarkerClick?.(marker, index) : undefined}\n                        onKeyDown={\n                            interactive\n                                ? (e) => {\n                                      if (e.key === \"Enter\" || e.key === \" \") {\n                                          e.preventDefault();\n                                          onMarkerClick?.(marker, index);\n                                      }\n                                  }\n                                : undefined\n                        }\n                    >\n                        {marker.label ? <title>{marker.label}</title> : null}\n                    </circle>\n                );\n            })}\n        </g>\n    );\n}\n"],"mappings":"6EAkBA,SAAgB,EAAW,CAAE,aAAY,UAAS,iBAAkC,CAChF,OACI,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,QAChB,SAAA,EAAQ,KAAK,EAAQ,IAAU,CAC5B,IAAM,EAAI,EAAW,QAAQ,CAAM,EAC7B,EAAc,EAAQ,EAC5B,OACI,EAAA,EAAA,IAAA,CAAC,SAAD,CAEI,UAAW,EAAA,QAAO,OAClB,GAAI,EAAE,EACN,GAAI,EAAE,EACN,EAAG,EAAO,QAAU,EACpB,KAAM,EAAO,OAAS,yBACtB,iBAAgB,EAAO,IAAM,EAC7B,SAAU,EAAc,EAAI,IAAA,GAC5B,KAAM,EAAc,SAAW,IAAA,GAC/B,aAAY,EAAO,MACnB,QAAS,MAAoB,IAAgB,EAAQ,CAAK,EAAI,IAAA,GAC9D,UACI,EACO,GAAM,EACC,EAAE,MAAQ,SAAW,EAAE,MAAQ,OAC/B,EAAE,eAAe,EACjB,IAAgB,EAAQ,CAAK,EAErC,EACA,IAAA,GAGT,SAAA,EAAO,OAAQ,EAAA,EAAA,IAAA,CAAC,QAAD,CAAA,SAAQ,EAAO,KAAa,CAAA,EAAI,IAC5C,EAvBC,EAAO,IAAM,CAuBd,CAEhB,CAAC,CACF,CAAA,CAEX"}
+{"version":3,"file":"MapMarkers.cjs","names":[],"sources":["../../src/br/MapMarkers.tsx"],"sourcesContent":["import type { FittedProjection } from \"@/geo/projection\";\nimport type { GeoMarker } from \"@/geo/types\";\nimport styles from \"./BrazilMap.module.css\";\n\nexport interface MapMarkersProps {\n    /** Projection used by the host map (markers must share it to line up). */\n    projection: FittedProjection;\n    /** Pins to plot. */\n    markers: readonly GeoMarker[];\n    /** Fired when a marker is clicked. */\n    onMarkerClick?: (marker: GeoMarker, index: number) => void;\n}\n\n/**\n * SVG overlay of point markers, projected with the host map's projection so\n * they align with its shapes. Each marker carries a native `<title>` (its\n * `label`) and is clickable when `onMarkerClick` is set.\n */\nexport function MapMarkers({ projection, markers, onMarkerClick }: MapMarkersProps) {\n    return (\n        <g>\n            {markers.map((marker, index) => {\n                const p = projection.project(marker);\n                const interactive = Boolean(onMarkerClick);\n                return (\n                    <circle\n                        key={marker.id ?? index}\n                        className={styles.marker}\n                        cx={p.x}\n                        cy={p.y}\n                        r={marker.radius ?? 6}\n                        fill={marker.color ?? \"var(--tempest-primary)\"}\n                        data-marker-id={marker.id ?? index}\n                        tabIndex={interactive ? 0 : undefined}\n                        role={interactive ? \"button\" : undefined}\n                        aria-label={marker.label}\n                        onClick={interactive ? () => onMarkerClick?.(marker, index) : undefined}\n                        onKeyDown={\n                            interactive\n                                ? (e) => {\n                                      if (e.key === \"Enter\" || e.key === \" \") {\n                                          e.preventDefault();\n                                          onMarkerClick?.(marker, index);\n                                      }\n                                  }\n                                : undefined\n                        }\n                    >\n                        {marker.label ? <title>{marker.label}</title> : null}\n                    </circle>\n                );\n            })}\n        </g>\n    );\n}\n"],"mappings":"6EAkBA,SAAgB,EAAW,CAAE,aAAY,UAAS,iBAAkC,CAChF,OACI,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SACK,EAAQ,KAAK,EAAQ,IAAU,CAC5B,IAAM,EAAI,EAAW,QAAQ,CAAM,EAC7B,EAAc,EAAQ,EAC5B,OACI,EAAA,EAAA,IAAA,CAAC,SAAD,CAEI,UAAW,EAAA,QAAO,OAClB,GAAI,EAAE,EACN,GAAI,EAAE,EACN,EAAG,EAAO,QAAU,EACpB,KAAM,EAAO,OAAS,yBACtB,iBAAgB,EAAO,IAAM,EAC7B,SAAU,EAAc,EAAI,IAAA,GAC5B,KAAM,EAAc,SAAW,IAAA,GAC/B,aAAY,EAAO,MACnB,QAAS,MAAoB,IAAgB,EAAQ,CAAK,EAAI,IAAA,GAC9D,UACI,EACO,GAAM,EACC,EAAE,MAAQ,SAAW,EAAE,MAAQ,OAC/B,EAAE,eAAe,EACjB,IAAgB,EAAQ,CAAK,EAErC,EACA,IAAA,GAGT,SAAA,EAAO,OAAQ,EAAA,EAAA,IAAA,CAAC,QAAD,CAAA,SAAQ,EAAO,KAAa,CAAA,EAAI,IAC5C,EAvBC,EAAO,IAAM,CAuBd,CAEhB,CAAC,CACF,CAAA,CAEX"}

package/dist/br/MapMarkers.js

@@ -2,28 +2,25 @@ import e from "./BrazilMap.module.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/br/MapMarkers.tsx
 function n({ projection: n, markers: r, onMarkerClick: i }) {
-	return /* @__PURE__ */ t("g", {
-		className: e.markers,
-		children: r.map((r, a) => {
-			let o = n.project(r), s = !!i;
-			return /* @__PURE__ */ t("circle", {
-				className: e.marker,
-				cx: o.x,
-				cy: o.y,
-				r: r.radius ?? 6,
-				fill: r.color ?? "var(--tempest-primary)",
-				"data-marker-id": r.id ?? a,
-				tabIndex: s ? 0 : void 0,
-				role: s ? "button" : void 0,
-				"aria-label": r.label,
-				onClick: s ? () => i?.(r, a) : void 0,
-				onKeyDown: s ? (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), i?.(r, a));
-				} : void 0,
-				children: r.label ? /* @__PURE__ */ t("title", { children: r.label }) : null
-			}, r.id ?? a);
-		})
-	});
+	return /* @__PURE__ */ t("g", { children: r.map((r, a) => {
+		let o = n.project(r), s = !!i;
+		return /* @__PURE__ */ t("circle", {
+			className: e.marker,
+			cx: o.x,
+			cy: o.y,
+			r: r.radius ?? 6,
+			fill: r.color ?? "var(--tempest-primary)",
+			"data-marker-id": r.id ?? a,
+			tabIndex: s ? 0 : void 0,
+			role: s ? "button" : void 0,
+			"aria-label": r.label,
+			onClick: s ? () => i?.(r, a) : void 0,
+			onKeyDown: s ? (e) => {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), i?.(r, a));
+			} : void 0,
+			children: r.label ? /* @__PURE__ */ t("title", { children: r.label }) : null
+		}, r.id ?? a);
+	}) });
 }
 //#endregion
 export { n as MapMarkers };

package/dist/br/MapMarkers.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapMarkers.js","names":[],"sources":["../../src/br/MapMarkers.tsx"],"sourcesContent":["import type { FittedProjection } from \"@/geo/projection\";\nimport type { GeoMarker } from \"@/geo/types\";\nimport styles from \"./BrazilMap.module.css\";\n\nexport interface MapMarkersProps {\n    /** Projection used by the host map (markers must share it to line up). */\n    projection: FittedProjection;\n    /** Pins to plot. */\n    markers: readonly GeoMarker[];\n    /** Fired when a marker is clicked. */\n    onMarkerClick?: (marker: GeoMarker, index: number) => void;\n}\n\n/**\n * SVG overlay of point markers, projected with the host map's projection so\n * they align with its shapes. Each marker carries a native `<title>` (its\n * `label`) and is clickable when `onMarkerClick` is set.\n */\nexport function MapMarkers({ projection, markers, onMarkerClick }: MapMarkersProps) {\n    return (\n        <g className={styles.markers}>\n            {markers.map((marker, index) => {\n                const p = projection.project(marker);\n                const interactive = Boolean(onMarkerClick);\n                return (\n                    <circle\n                        key={marker.id ?? index}\n                        className={styles.marker}\n                        cx={p.x}\n                        cy={p.y}\n                        r={marker.radius ?? 6}\n                        fill={marker.color ?? \"var(--tempest-primary)\"}\n                        data-marker-id={marker.id ?? index}\n                        tabIndex={interactive ? 0 : undefined}\n                        role={interactive ? \"button\" : undefined}\n                        aria-label={marker.label}\n                        onClick={interactive ? () => onMarkerClick?.(marker, index) : undefined}\n                        onKeyDown={\n                            interactive\n                                ? (e) => {\n                                      if (e.key === \"Enter\" || e.key === \" \") {\n                                          e.preventDefault();\n                                          onMarkerClick?.(marker, index);\n                                      }\n                                  }\n                                : undefined\n                        }\n                    >\n                        {marker.label ? <title>{marker.label}</title> : null}\n                    </circle>\n                );\n            })}\n        </g>\n    );\n}\n"],"mappings":";;;AAkBA,SAAgB,EAAW,EAAE,eAAY,YAAS,oBAAkC;CAChF,OACI,kBAAC,KAAD;EAAG,WAAW,EAAO;EAChB,UAAA,EAAQ,KAAK,GAAQ,MAAU;GAC5B,IAAM,IAAI,EAAW,QAAQ,CAAM,GAC7B,IAAc,EAAQ;GAC5B,OACI,kBAAC,UAAD;IAEI,WAAW,EAAO;IAClB,IAAI,EAAE;IACN,IAAI,EAAE;IACN,GAAG,EAAO,UAAU;IACpB,MAAM,EAAO,SAAS;IACtB,kBAAgB,EAAO,MAAM;IAC7B,UAAU,IAAc,IAAI,KAAA;IAC5B,MAAM,IAAc,WAAW,KAAA;IAC/B,cAAY,EAAO;IACnB,SAAS,UAAoB,IAAgB,GAAQ,CAAK,IAAI,KAAA;IAC9D,WACI,KACO,MAAM;KACH,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC/B,EAAE,eAAe,GACjB,IAAgB,GAAQ,CAAK;IAErC,IACA,KAAA;IAGT,UAAA,EAAO,QAAQ,kBAAC,SAAD,EAAA,UAAQ,EAAO,MAAa,CAAA,IAAI;GAC5C,GAvBC,EAAO,MAAM,CAuBd;EAEhB,CAAC;CACF,CAAA;AAEX"}
+{"version":3,"file":"MapMarkers.js","names":[],"sources":["../../src/br/MapMarkers.tsx"],"sourcesContent":["import type { FittedProjection } from \"@/geo/projection\";\nimport type { GeoMarker } from \"@/geo/types\";\nimport styles from \"./BrazilMap.module.css\";\n\nexport interface MapMarkersProps {\n    /** Projection used by the host map (markers must share it to line up). */\n    projection: FittedProjection;\n    /** Pins to plot. */\n    markers: readonly GeoMarker[];\n    /** Fired when a marker is clicked. */\n    onMarkerClick?: (marker: GeoMarker, index: number) => void;\n}\n\n/**\n * SVG overlay of point markers, projected with the host map's projection so\n * they align with its shapes. Each marker carries a native `<title>` (its\n * `label`) and is clickable when `onMarkerClick` is set.\n */\nexport function MapMarkers({ projection, markers, onMarkerClick }: MapMarkersProps) {\n    return (\n        <g>\n            {markers.map((marker, index) => {\n                const p = projection.project(marker);\n                const interactive = Boolean(onMarkerClick);\n                return (\n                    <circle\n                        key={marker.id ?? index}\n                        className={styles.marker}\n                        cx={p.x}\n                        cy={p.y}\n                        r={marker.radius ?? 6}\n                        fill={marker.color ?? \"var(--tempest-primary)\"}\n                        data-marker-id={marker.id ?? index}\n                        tabIndex={interactive ? 0 : undefined}\n                        role={interactive ? \"button\" : undefined}\n                        aria-label={marker.label}\n                        onClick={interactive ? () => onMarkerClick?.(marker, index) : undefined}\n                        onKeyDown={\n                            interactive\n                                ? (e) => {\n                                      if (e.key === \"Enter\" || e.key === \" \") {\n                                          e.preventDefault();\n                                          onMarkerClick?.(marker, index);\n                                      }\n                                  }\n                                : undefined\n                        }\n                    >\n                        {marker.label ? <title>{marker.label}</title> : null}\n                    </circle>\n                );\n            })}\n        </g>\n    );\n}\n"],"mappings":";;;AAkBA,SAAgB,EAAW,EAAE,eAAY,YAAS,oBAAkC;CAChF,OACI,kBAAC,KAAD,EAAA,UACK,EAAQ,KAAK,GAAQ,MAAU;EAC5B,IAAM,IAAI,EAAW,QAAQ,CAAM,GAC7B,IAAc,EAAQ;EAC5B,OACI,kBAAC,UAAD;GAEI,WAAW,EAAO;GAClB,IAAI,EAAE;GACN,IAAI,EAAE;GACN,GAAG,EAAO,UAAU;GACpB,MAAM,EAAO,SAAS;GACtB,kBAAgB,EAAO,MAAM;GAC7B,UAAU,IAAc,IAAI,KAAA;GAC5B,MAAM,IAAc,WAAW,KAAA;GAC/B,cAAY,EAAO;GACnB,SAAS,UAAoB,IAAgB,GAAQ,CAAK,IAAI,KAAA;GAC9D,WACI,KACO,MAAM;IACH,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC/B,EAAE,eAAe,GACjB,IAAgB,GAAQ,CAAK;GAErC,IACA,KAAA;GAGT,UAAA,EAAO,QAAQ,kBAAC,SAAD,EAAA,UAAQ,EAAO,MAAa,CAAA,IAAI;EAC5C,GAvBC,EAAO,MAAM,CAuBd;CAEhB,CAAC,EACF,CAAA;AAEX"}

package/dist/br/MunicipalitySearch.cjs

@@ -1,2 +1,2 @@
-const e=require("../components/Input/Input.cjs"),t=require("../hooks/use-debounce.cjs"),n=require("./geocode.cjs"),r=require("./MunicipalitySearch.module.cjs");let i=require("react"),a=require("react/jsx-runtime");function o({uf:o,onSelect:s,label:c,placeholder:l=`Buscar município…`,limit:u=8,debounceMs:d=250,disabled:f=!1}){let[p,m]=(0,i.useState)(``),[h,g]=(0,i.useState)([]),[_,v]=(0,i.useState)(!1),y=t.useDebounce(p,d),b=(0,i.useId)(),x=(0,i.useRef)(null);(0,i.useEffect)(()=>{let e=!0;if(!y.trim()){g([]);return}return n.searchMunicipalities(y,{uf:o,limit:u}).then(t=>{e&&g(t)}),()=>{e=!1}},[y,o,u]);function S(e){s(e),m(e.name),v(!1)}return(0,a.jsxs)(`div`,{className:r.default.search,children:[(0,a.jsx)(e.Input,{label:c,value:p,placeholder:l,disabled:f,role:`combobox`,"aria-expanded":_&&h.length>0,"aria-controls":b,autoComplete:`off`,onChange:e=>{m(e.target.value),v(!0)},onFocus:()=>v(!0),onBlur:()=>{x.current=setTimeout(()=>v(!1),120)}}),_&&h.length>0&&(0,a.jsx)(`ul`,{id:b,className:r.default.results,role:`listbox`,children:h.map(e=>(0,a.jsx)(`li`,{children:(0,a.jsxs)(`button`,{type:`button`,role:`option`,"aria-selected":!1,className:r.default.result,onMouseDown:e=>e.preventDefault(),onClick:()=>{x.current&&clearTimeout(x.current),S(e)},children:[(0,a.jsx)(`span`,{children:e.name}),(0,a.jsx)(`span`,{className:r.default.uf,children:e.uf})]})},e.id))})]})}exports.MunicipalitySearch=o;
+const e=require("../utils/cn.cjs"),t=require("../components/Input/Input.cjs"),n=require("../hooks/use-debounce.cjs"),r=require("./geocode.cjs"),i=require("./MunicipalitySearch.module.cjs");let a=require("react"),o=require("react/jsx-runtime");function s(e){e.preventDefault()}function c({uf:c,onSelect:l,label:u,placeholder:d=`Buscar município…`,limit:f=8,debounceMs:p=250,disabled:m=!1}){let[h,g]=(0,a.useState)(``),[_,v]=(0,a.useState)([]),[y,b]=(0,a.useState)(!1),[x,S]=(0,a.useState)(0),C=n.useDebounce(h,p),w=(0,a.useId)(),T=y&&_.length>0,E=e=>`${w}-option-${e}`;(0,a.useEffect)(()=>{let e=!0;if(!C.trim()){v([]);return}return r.searchMunicipalities(C,{uf:c,limit:f}).then(t=>{e&&(v(t),S(0))}),()=>{e=!1}},[C,c,f]);function D(e){l(e),g(e.name),b(!1)}function O(e){if(e.key===`ArrowDown`){if(e.preventDefault(),!T){b(!0);return}S(e=>Math.min(_.length-1,e+1))}else if(e.key===`ArrowUp`)e.preventDefault(),S(e=>Math.max(0,e-1));else if(e.key===`Enter`){let t=T?_[x]:void 0;if(!t)return;e.preventDefault(),D(t)}else e.key===`Escape`&&(T&&e.preventDefault(),b(!1))}return(0,o.jsxs)(`div`,{className:i.default.search,children:[(0,o.jsx)(t.Input,{label:u,value:h,placeholder:d,disabled:m,role:`combobox`,"aria-expanded":T,"aria-controls":w,"aria-autocomplete":`list`,"aria-activedescendant":T?E(x):void 0,autoComplete:`off`,onChange:e=>{g(e.target.value),b(!0)},onFocus:()=>b(!0),onBlur:()=>b(!1),onKeyDown:O}),T&&(0,o.jsx)(`ul`,{id:w,className:i.default.results,role:`listbox`,onMouseDown:s,children:_.map((t,n)=>(0,o.jsxs)(`li`,{id:E(n),role:`option`,"aria-selected":n===x,className:e.cn(i.default.result,n===x&&i.default.active),onMouseEnter:()=>S(n),onClick:()=>D(t),children:[(0,o.jsx)(`span`,{children:t.name}),(0,o.jsx)(`span`,{className:i.default.uf,children:t.uf})]},t.id))})]})}exports.MunicipalitySearch=c;
 //# sourceMappingURL=MunicipalitySearch.cjs.map

package/dist/br/MunicipalitySearch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MunicipalitySearch.cjs","names":[],"sources":["../../src/br/MunicipalitySearch.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type ReactElement } from \"react\";\nimport { Input } from \"@/components/Input\";\nimport { useDebounce } from \"@/hooks\";\nimport { searchMunicipalities, type MunicipalityCentroid } from \"./geocode\";\nimport type { UF } from \"./locations\";\nimport styles from \"./MunicipalitySearch.module.css\";\n\nexport interface MunicipalitySearchProps {\n    /** Restrict the search to a single UF. */\n    uf?: UF;\n    /** Fired when a municipality is picked from the results. */\n    onSelect: (municipality: MunicipalityCentroid) => void;\n    /** Field label. */\n    label?: string;\n    /** Input placeholder. Default: `\"Buscar município…\"`. */\n    placeholder?: string;\n    /** Max results shown. Default: `8`. */\n    limit?: number;\n    /** Debounce in ms before searching. Default: `250`. */\n    debounceMs?: number;\n    /** Disable the field. */\n    disabled?: boolean;\n}\n\n/**\n * Debounced municipality autocomplete backed by the offline\n * {@link searchMunicipalities} index — no network. Type a partial name, pick a\n * result, and `onSelect` fires with its `{ id, name, uf, latitude, longitude }`.\n * Wire `onSelect` to a `BrazilStateMap` `selected` to highlight it on the map.\n *\n * @example\n * const [uf, setUf] = useState<UF>(\"SP\");\n * const [city, setCity] = useState<string | null>(null);\n * <MunicipalitySearch uf={uf} onSelect={(m) => setCity(m.name)} />\n * <BrazilStateMap uf={uf} selected={city} />\n */\nexport function MunicipalitySearch({\n    uf,\n    onSelect,\n    label,\n    placeholder = \"Buscar município…\",\n    limit = 8,\n    debounceMs = 250,\n    disabled = false,\n}: MunicipalitySearchProps): ReactElement {\n    const [query, setQuery] = useState<string>(\"\");\n    const [results, setResults] = useState<MunicipalityCentroid[]>([]);\n    const [open, setOpen] = useState<boolean>(false);\n    const debounced = useDebounce(query, debounceMs);\n    const listId = useId();\n    const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        let active = true;\n        if (!debounced.trim()) {\n            setResults([]);\n            return;\n        }\n        void searchMunicipalities(debounced, { uf, limit }).then((hits) => {\n            if (active) setResults(hits);\n        });\n        return () => {\n            active = false;\n        };\n    }, [debounced, uf, limit]);\n\n    function choose(municipality: MunicipalityCentroid): void {\n        onSelect(municipality);\n        setQuery(municipality.name);\n        setOpen(false);\n    }\n\n    return (\n        <div className={styles.search}>\n            <Input\n                label={label}\n                value={query}\n                placeholder={placeholder}\n                disabled={disabled}\n                role=\"combobox\"\n                aria-expanded={open && results.length > 0}\n                aria-controls={listId}\n                autoComplete=\"off\"\n                onChange={(e) => {\n                    setQuery(e.target.value);\n                    setOpen(true);\n                }}\n                onFocus={() => setOpen(true)}\n                onBlur={() => {\n                    // Delay so a result click registers before the list closes.\n                    blurTimer.current = setTimeout(() => setOpen(false), 120);\n                }}\n            />\n            {open && results.length > 0 && (\n                <ul id={listId} className={styles.results} role=\"listbox\">\n                    {results.map((m) => (\n                        <li key={m.id}>\n                            <button\n                                type=\"button\"\n                                role=\"option\"\n                                aria-selected={false}\n                                className={styles.result}\n                                onMouseDown={(e) => e.preventDefault()}\n                                onClick={() => {\n                                    if (blurTimer.current) clearTimeout(blurTimer.current);\n                                    choose(m);\n                                }}\n                            >\n                                <span>{m.name}</span>\n                                <span className={styles.uf}>{m.uf}</span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":"sNAoCA,SAAgB,EAAmB,CAC/B,KACA,WACA,QACA,cAAc,oBACd,QAAQ,EACR,aAAa,IACb,WAAW,IAC2B,CACtC,GAAM,CAAC,EAAO,IAAA,EAAY,EAAA,SAAA,CAAiB,EAAE,EACvC,CAAC,EAAS,IAAA,EAAc,EAAA,SAAA,CAAiC,CAAC,CAAC,EAC3D,CAAC,EAAM,IAAA,EAAW,EAAA,SAAA,CAAkB,EAAK,EACzC,EAAY,EAAA,YAAY,EAAO,CAAU,EACzC,GAAA,EAAS,EAAA,MAAA,CAAM,EACf,GAAA,EAAY,EAAA,OAAA,CAA6C,IAAI,GAEnE,EAAA,EAAA,UAAA,KAAgB,CACZ,IAAI,EAAS,GACb,GAAI,CAAC,EAAU,KAAK,EAAG,CACnB,EAAW,CAAC,CAAC,EACb,MACJ,CAIA,OAHA,EAAK,qBAAqB,EAAW,CAAE,KAAI,OAAM,CAAC,CAAC,CAAC,KAAM,GAAS,CAC3D,GAAQ,EAAW,CAAI,CAC/B,CAAC,MACY,CACT,EAAS,EACb,CACJ,EAAG,CAAC,EAAW,EAAI,CAAK,CAAC,EAEzB,SAAS,EAAO,EAA0C,CACtD,EAAS,CAAY,EACrB,EAAS,EAAa,IAAI,EAC1B,EAAQ,EAAK,CACjB,CAEA,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAvB,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACW,QACP,MAAO,EACM,cACH,WACV,KAAK,WACL,gBAAe,GAAQ,EAAQ,OAAS,EACxC,gBAAe,EACf,aAAa,MACb,SAAW,GAAM,CACb,EAAS,EAAE,OAAO,KAAK,EACvB,EAAQ,EAAI,CAChB,EACA,YAAe,EAAQ,EAAI,EAC3B,WAAc,CAEV,EAAU,QAAU,eAAiB,EAAQ,EAAK,EAAG,GAAG,CAC5D,CACH,CAAA,EACA,GAAQ,EAAQ,OAAS,IACtB,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,GAAI,EAAQ,UAAW,EAAA,QAAO,QAAS,KAAK,UAC3C,SAAA,EAAQ,IAAK,IACV,EAAA,EAAA,IAAA,CAAC,KAAD,CAAA,UACI,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,KAAK,SACL,KAAK,SACL,gBAAe,GACf,UAAW,EAAA,QAAO,OAClB,YAAc,GAAM,EAAE,eAAe,EACrC,YAAe,CACP,EAAU,SAAS,aAAa,EAAU,OAAO,EACrD,EAAO,CAAC,CACZ,EATJ,SAAA,EAWI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,EAAE,IAAW,CAAA,GACpB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,GAAK,SAAA,EAAE,EAAS,CAAA,CACpC,CACR,CAAA,CAAA,EAfK,EAAE,EAeP,CACP,CACD,CAAA,CAEP,GAEb"}
+{"version":3,"file":"MunicipalitySearch.cjs","names":[],"sources":["../../src/br/MunicipalitySearch.tsx"],"sourcesContent":["import {\n    useEffect,\n    useId,\n    useState,\n    type KeyboardEvent,\n    type MouseEvent,\n    type ReactElement,\n} from \"react\";\nimport { Input } from \"@/components/Input\";\nimport { useDebounce } from \"@/hooks\";\nimport { cn } from \"@/utils/cn\";\nimport { searchMunicipalities, type MunicipalityCentroid } from \"./geocode\";\nimport type { UF } from \"./locations\";\nimport styles from \"./MunicipalitySearch.module.css\";\n\nexport interface MunicipalitySearchProps {\n    /** Restrict the search to a single UF. */\n    uf?: UF;\n    /** Fired when a municipality is picked from the results. */\n    onSelect: (municipality: MunicipalityCentroid) => void;\n    /** Field label. */\n    label?: string;\n    /** Input placeholder. Default: `\"Buscar município…\"`. */\n    placeholder?: string;\n    /** Max results shown. Default: `8`. */\n    limit?: number;\n    /** Debounce in ms before searching. Default: `250`. */\n    debounceMs?: number;\n    /** Disable the field. */\n    disabled?: boolean;\n}\n\n/**\n * Keeps focus on the input when a press lands anywhere on the list — an option,\n * the padding or the scrollbar — so the input never blurs and the list closes\n * only when focus really leaves the field.\n *\n * @param event - The `mousedown` on the list.\n */\nfunction keepInputFocus(event: MouseEvent<HTMLUListElement>): void {\n    event.preventDefault();\n}\n\n/**\n * Debounced municipality autocomplete backed by the offline\n * {@link searchMunicipalities} index — no network. Type a partial name, pick a\n * result, and `onSelect` fires with its `{ id, name, uf, latitude, longitude }`.\n * Wire `onSelect` to a `BrazilStateMap` `selected` to highlight it on the map.\n *\n * Keyboard follows the SDK's `Combobox` (the WAI-ARIA combobox pattern): focus\n * stays on the input, `ArrowDown`/`ArrowUp` move the active result — announced\n * through `aria-activedescendant` — `Enter` picks it, `Escape` closes the list\n * and `Tab` leaves the field, closing the list on the way out.\n *\n * The list used to close on a 120 ms timer after the input blurred, with each\n * result a focusable `<button>`. Measured in Chromium (gallery build, issue\n * #426): `Tab` moved focus to the first result, the timer then unmounted it and\n * focus fell to `<body>`; arrows, `Enter` and `Escape` did nothing. Results are\n * now plain options outside the tab order, and a press on the list cancels the\n * blur instead of racing it.\n *\n * @example\n * const [uf, setUf] = useState<UF>(\"SP\");\n * const [city, setCity] = useState<string | null>(null);\n * <MunicipalitySearch uf={uf} onSelect={(m) => setCity(m.name)} />\n * <BrazilStateMap uf={uf} selected={city} />\n */\nexport function MunicipalitySearch({\n    uf,\n    onSelect,\n    label,\n    placeholder = \"Buscar município…\",\n    limit = 8,\n    debounceMs = 250,\n    disabled = false,\n}: MunicipalitySearchProps): ReactElement {\n    const [query, setQuery] = useState<string>(\"\");\n    const [results, setResults] = useState<MunicipalityCentroid[]>([]);\n    const [open, setOpen] = useState<boolean>(false);\n    const [activeIndex, setActiveIndex] = useState<number>(0);\n    const debounced = useDebounce(query, debounceMs);\n    const listId = useId();\n    const expanded = open && results.length > 0;\n    const optionId = (index: number): string => `${listId}-option-${index}`;\n\n    useEffect(() => {\n        let active = true;\n        if (!debounced.trim()) {\n            setResults([]);\n            return;\n        }\n        void searchMunicipalities(debounced, { uf, limit }).then((hits) => {\n            if (!active) return;\n            setResults(hits);\n            setActiveIndex(0);\n        });\n        return () => {\n            active = false;\n        };\n    }, [debounced, uf, limit]);\n\n    function choose(municipality: MunicipalityCentroid): void {\n        onSelect(municipality);\n        setQuery(municipality.name);\n        setOpen(false);\n    }\n\n    /**\n     * Keyboard model of the input, the same as `Combobox`'s.\n     *\n     * `Escape` calls `preventDefault()` only while the list is open, so an\n     * enclosing `Modal` or `Drawer` stays open and the next `Escape` reaches it.\n     * `Enter` is consumed only when it picks a result, so with the list closed\n     * it still submits an enclosing form.\n     *\n     * @param event - The `keydown` on the input.\n     */\n    function handleKeyDown(event: KeyboardEvent<HTMLInputElement>): void {\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            if (!expanded) {\n                setOpen(true);\n                return;\n            }\n            setActiveIndex((current) => Math.min(results.length - 1, current + 1));\n        } else if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            setActiveIndex((current) => Math.max(0, current - 1));\n        } else if (event.key === \"Enter\") {\n            const municipality = expanded ? results[activeIndex] : undefined;\n            if (!municipality) return;\n            event.preventDefault();\n            choose(municipality);\n        } else if (event.key === \"Escape\") {\n            if (expanded) event.preventDefault();\n            setOpen(false);\n        }\n    }\n\n    return (\n        <div className={styles.search}>\n            <Input\n                label={label}\n                value={query}\n                placeholder={placeholder}\n                disabled={disabled}\n                role=\"combobox\"\n                aria-expanded={expanded}\n                aria-controls={listId}\n                aria-autocomplete=\"list\"\n                aria-activedescendant={expanded ? optionId(activeIndex) : undefined}\n                autoComplete=\"off\"\n                onChange={(e) => {\n                    setQuery(e.target.value);\n                    setOpen(true);\n                }}\n                onFocus={() => setOpen(true)}\n                onBlur={() => setOpen(false)}\n                onKeyDown={handleKeyDown}\n            />\n            {expanded && (\n                <ul\n                    id={listId}\n                    className={styles.results}\n                    role=\"listbox\"\n                    onMouseDown={keepInputFocus}\n                >\n                    {results.map((m, index) => (\n                        <li\n                            key={m.id}\n                            id={optionId(index)}\n                            role=\"option\"\n                            aria-selected={index === activeIndex}\n                            className={cn(styles.result, index === activeIndex && styles.active)}\n                            onMouseEnter={() => setActiveIndex(index)}\n                            onClick={() => choose(m)}\n                        >\n                            <span>{m.name}</span>\n                            <span className={styles.uf}>{m.uf}</span>\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":"mPAuCA,SAAS,EAAe,EAA2C,CAC/D,EAAM,eAAe,CACzB,CA0BA,SAAgB,EAAmB,CAC/B,KACA,WACA,QACA,cAAc,oBACd,QAAQ,EACR,aAAa,IACb,WAAW,IAC2B,CACtC,GAAM,CAAC,EAAO,IAAA,EAAY,EAAA,SAAA,CAAiB,EAAE,EACvC,CAAC,EAAS,IAAA,EAAc,EAAA,SAAA,CAAiC,CAAC,CAAC,EAC3D,CAAC,EAAM,IAAA,EAAW,EAAA,SAAA,CAAkB,EAAK,EACzC,CAAC,EAAa,IAAA,EAAkB,EAAA,SAAA,CAAiB,CAAC,EAClD,EAAY,EAAA,YAAY,EAAO,CAAU,EACzC,GAAA,EAAS,EAAA,MAAA,CAAM,EACf,EAAW,GAAQ,EAAQ,OAAS,EACpC,EAAY,GAA0B,GAAG,EAAO,UAAU,KAEhE,EAAA,EAAA,UAAA,KAAgB,CACZ,IAAI,EAAS,GACb,GAAI,CAAC,EAAU,KAAK,EAAG,CACnB,EAAW,CAAC,CAAC,EACb,MACJ,CAMA,OALA,EAAK,qBAAqB,EAAW,CAAE,KAAI,OAAM,CAAC,CAAC,CAAC,KAAM,GAAS,CAC1D,IACL,EAAW,CAAI,EACf,EAAe,CAAC,EACpB,CAAC,MACY,CACT,EAAS,EACb,CACJ,EAAG,CAAC,EAAW,EAAI,CAAK,CAAC,EAEzB,SAAS,EAAO,EAA0C,CACtD,EAAS,CAAY,EACrB,EAAS,EAAa,IAAI,EAC1B,EAAQ,EAAK,CACjB,CAYA,SAAS,EAAc,EAA8C,CACjE,GAAI,EAAM,MAAQ,YAAa,CAE3B,GADA,EAAM,eAAe,EACjB,CAAC,EAAU,CACX,EAAQ,EAAI,EACZ,MACJ,CACA,EAAgB,GAAY,KAAK,IAAI,EAAQ,OAAS,EAAG,EAAU,CAAC,CAAC,CACzE,MAAO,GAAI,EAAM,MAAQ,UACrB,EAAM,eAAe,EACrB,EAAgB,GAAY,KAAK,IAAI,EAAG,EAAU,CAAC,CAAC,OACjD,GAAI,EAAM,MAAQ,QAAS,CAC9B,IAAM,EAAe,EAAW,EAAQ,GAAe,IAAA,GACvD,GAAI,CAAC,EAAc,OACnB,EAAM,eAAe,EACrB,EAAO,CAAY,CACvB,MAAW,EAAM,MAAQ,WACjB,GAAU,EAAM,eAAe,EACnC,EAAQ,EAAK,EAErB,CAEA,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAvB,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACW,QACP,MAAO,EACM,cACH,WACV,KAAK,WACL,gBAAe,EACf,gBAAe,EACf,oBAAkB,OAClB,wBAAuB,EAAW,EAAS,CAAW,EAAI,IAAA,GAC1D,aAAa,MACb,SAAW,GAAM,CACb,EAAS,EAAE,OAAO,KAAK,EACvB,EAAQ,EAAI,CAChB,EACA,YAAe,EAAQ,EAAI,EAC3B,WAAc,EAAQ,EAAK,EAC3B,UAAW,CACd,CAAA,EACA,IACG,EAAA,EAAA,IAAA,CAAC,KAAD,CACI,GAAI,EACJ,UAAW,EAAA,QAAO,QAClB,KAAK,UACL,YAAa,EAEZ,SAAA,EAAQ,KAAK,EAAG,KACb,EAAA,EAAA,KAAA,CAAC,KAAD,CAEI,GAAI,EAAS,CAAK,EAClB,KAAK,SACL,gBAAe,IAAU,EACzB,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,IAAU,GAAe,EAAA,QAAO,MAAM,EACnE,iBAAoB,EAAe,CAAK,EACxC,YAAe,EAAO,CAAC,EAP3B,SAAA,EASI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,EAAE,IAAW,CAAA,GACpB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,GAAK,SAAA,EAAE,EAAS,CAAA,CACxC,CAVK,EAAA,EAAE,EAUP,CACP,CACD,CAAA,CAEP,GAEb"}

package/dist/br/MunicipalitySearch.js

@@ -1,74 +1,92 @@
-import { Input as e } from "../components/Input/Input.js";
-import { useDebounce as t } from "../hooks/use-debounce.js";
-import { searchMunicipalities as n } from "./geocode.js";
-import r from "./MunicipalitySearch.module.js";
-import { useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { cn as e } from "../utils/cn.js";
+import { Input as t } from "../components/Input/Input.js";
+import { useDebounce as n } from "../hooks/use-debounce.js";
+import { searchMunicipalities as r } from "./geocode.js";
+import i from "./MunicipalitySearch.module.js";
+import { useEffect as a, useId as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/br/MunicipalitySearch.tsx
-function u({ uf: u, onSelect: d, label: f, placeholder: p = "Buscar município…", limit: m = 8, debounceMs: h = 250, disabled: g = !1 }) {
-	let [_, v] = s(""), [y, b] = s([]), [x, S] = s(!1), C = t(_, h), w = a(), T = o(null);
-	i(() => {
+function u(e) {
+	e.preventDefault();
+}
+function d({ uf: d, onSelect: f, label: p, placeholder: m = "Buscar município…", limit: h = 8, debounceMs: g = 250, disabled: _ = !1 }) {
+	let [v, y] = s(""), [b, x] = s([]), [S, C] = s(!1), [w, T] = s(0), E = n(v, g), D = o(), O = S && b.length > 0, k = (e) => `${D}-option-${e}`;
+	a(() => {
 		let e = !0;
-		if (!C.trim()) {
-			b([]);
+		if (!E.trim()) {
+			x([]);
 			return;
 		}
-		return n(C, {
-			uf: u,
-			limit: m
+		return r(E, {
+			uf: d,
+			limit: h
 		}).then((t) => {
-			e && b(t);
+			e && (x(t), T(0));
 		}), () => {
 			e = !1;
 		};
 	}, [
-		C,
-		u,
-		m
+		E,
+		d,
+		h
 	]);
-	function E(e) {
-		d(e), v(e.name), S(!1);
+	function A(e) {
+		f(e), y(e.name), C(!1);
+	}
+	function j(e) {
+		if (e.key === "ArrowDown") {
+			if (e.preventDefault(), !O) {
+				C(!0);
+				return;
+			}
+			T((e) => Math.min(b.length - 1, e + 1));
+		} else if (e.key === "ArrowUp") e.preventDefault(), T((e) => Math.max(0, e - 1));
+		else if (e.key === "Enter") {
+			let t = O ? b[w] : void 0;
+			if (!t) return;
+			e.preventDefault(), A(t);
+		} else e.key === "Escape" && (O && e.preventDefault(), C(!1));
 	}
 	return /* @__PURE__ */ l("div", {
-		className: r.search,
-		children: [/* @__PURE__ */ c(e, {
-			label: f,
-			value: _,
-			placeholder: p,
-			disabled: g,
+		className: i.search,
+		children: [/* @__PURE__ */ c(t, {
+			label: p,
+			value: v,
+			placeholder: m,
+			disabled: _,
 			role: "combobox",
-			"aria-expanded": x && y.length > 0,
-			"aria-controls": w,
+			"aria-expanded": O,
+			"aria-controls": D,
+			"aria-autocomplete": "list",
+			"aria-activedescendant": O ? k(w) : void 0,
 			autoComplete: "off",
 			onChange: (e) => {
-				v(e.target.value), S(!0);
+				y(e.target.value), C(!0);
 			},
-			onFocus: () => S(!0),
-			onBlur: () => {
-				T.current = setTimeout(() => S(!1), 120);
-			}
-		}), x && y.length > 0 && /* @__PURE__ */ c("ul", {
-			id: w,
-			className: r.results,
+			onFocus: () => C(!0),
+			onBlur: () => C(!1),
+			onKeyDown: j
+		}), O && /* @__PURE__ */ c("ul", {
+			id: D,
+			className: i.results,
 			role: "listbox",
-			children: y.map((e) => /* @__PURE__ */ c("li", { children: /* @__PURE__ */ l("button", {
-				type: "button",
+			onMouseDown: u,
+			children: b.map((t, n) => /* @__PURE__ */ l("li", {
+				id: k(n),
 				role: "option",
-				"aria-selected": !1,
-				className: r.result,
-				onMouseDown: (e) => e.preventDefault(),
-				onClick: () => {
-					T.current && clearTimeout(T.current), E(e);
-				},
-				children: [/* @__PURE__ */ c("span", { children: e.name }), /* @__PURE__ */ c("span", {
-					className: r.uf,
-					children: e.uf
+				"aria-selected": n === w,
+				className: e(i.result, n === w && i.active),
+				onMouseEnter: () => T(n),
+				onClick: () => A(t),
+				children: [/* @__PURE__ */ c("span", { children: t.name }), /* @__PURE__ */ c("span", {
+					className: i.uf,
+					children: t.uf
 				})]
-			}) }, e.id))
+			}, t.id))
 		})]
 	});
 }
 //#endregion
-export { u as MunicipalitySearch };
+export { d as MunicipalitySearch };
 
 //# sourceMappingURL=MunicipalitySearch.js.map

package/dist/br/MunicipalitySearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"MunicipalitySearch.js","names":[],"sources":["../../src/br/MunicipalitySearch.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type ReactElement } from \"react\";\nimport { Input } from \"@/components/Input\";\nimport { useDebounce } from \"@/hooks\";\nimport { searchMunicipalities, type MunicipalityCentroid } from \"./geocode\";\nimport type { UF } from \"./locations\";\nimport styles from \"./MunicipalitySearch.module.css\";\n\nexport interface MunicipalitySearchProps {\n    /** Restrict the search to a single UF. */\n    uf?: UF;\n    /** Fired when a municipality is picked from the results. */\n    onSelect: (municipality: MunicipalityCentroid) => void;\n    /** Field label. */\n    label?: string;\n    /** Input placeholder. Default: `\"Buscar município…\"`. */\n    placeholder?: string;\n    /** Max results shown. Default: `8`. */\n    limit?: number;\n    /** Debounce in ms before searching. Default: `250`. */\n    debounceMs?: number;\n    /** Disable the field. */\n    disabled?: boolean;\n}\n\n/**\n * Debounced municipality autocomplete backed by the offline\n * {@link searchMunicipalities} index — no network. Type a partial name, pick a\n * result, and `onSelect` fires with its `{ id, name, uf, latitude, longitude }`.\n * Wire `onSelect` to a `BrazilStateMap` `selected` to highlight it on the map.\n *\n * @example\n * const [uf, setUf] = useState<UF>(\"SP\");\n * const [city, setCity] = useState<string | null>(null);\n * <MunicipalitySearch uf={uf} onSelect={(m) => setCity(m.name)} />\n * <BrazilStateMap uf={uf} selected={city} />\n */\nexport function MunicipalitySearch({\n    uf,\n    onSelect,\n    label,\n    placeholder = \"Buscar município…\",\n    limit = 8,\n    debounceMs = 250,\n    disabled = false,\n}: MunicipalitySearchProps): ReactElement {\n    const [query, setQuery] = useState<string>(\"\");\n    const [results, setResults] = useState<MunicipalityCentroid[]>([]);\n    const [open, setOpen] = useState<boolean>(false);\n    const debounced = useDebounce(query, debounceMs);\n    const listId = useId();\n    const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        let active = true;\n        if (!debounced.trim()) {\n            setResults([]);\n            return;\n        }\n        void searchMunicipalities(debounced, { uf, limit }).then((hits) => {\n            if (active) setResults(hits);\n        });\n        return () => {\n            active = false;\n        };\n    }, [debounced, uf, limit]);\n\n    function choose(municipality: MunicipalityCentroid): void {\n        onSelect(municipality);\n        setQuery(municipality.name);\n        setOpen(false);\n    }\n\n    return (\n        <div className={styles.search}>\n            <Input\n                label={label}\n                value={query}\n                placeholder={placeholder}\n                disabled={disabled}\n                role=\"combobox\"\n                aria-expanded={open && results.length > 0}\n                aria-controls={listId}\n                autoComplete=\"off\"\n                onChange={(e) => {\n                    setQuery(e.target.value);\n                    setOpen(true);\n                }}\n                onFocus={() => setOpen(true)}\n                onBlur={() => {\n                    // Delay so a result click registers before the list closes.\n                    blurTimer.current = setTimeout(() => setOpen(false), 120);\n                }}\n            />\n            {open && results.length > 0 && (\n                <ul id={listId} className={styles.results} role=\"listbox\">\n                    {results.map((m) => (\n                        <li key={m.id}>\n                            <button\n                                type=\"button\"\n                                role=\"option\"\n                                aria-selected={false}\n                                className={styles.result}\n                                onMouseDown={(e) => e.preventDefault()}\n                                onClick={() => {\n                                    if (blurTimer.current) clearTimeout(blurTimer.current);\n                                    choose(m);\n                                }}\n                            >\n                                <span>{m.name}</span>\n                                <span className={styles.uf}>{m.uf}</span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,EAAmB,EAC/B,OACA,aACA,UACA,iBAAc,qBACd,WAAQ,GACR,gBAAa,KACb,cAAW,MAC2B;CACtC,IAAM,CAAC,GAAO,KAAY,EAAiB,EAAE,GACvC,CAAC,GAAS,KAAc,EAAiC,CAAC,CAAC,GAC3D,CAAC,GAAM,KAAW,EAAkB,EAAK,GACzC,IAAY,EAAY,GAAO,CAAU,GACzC,IAAS,EAAM,GACf,IAAY,EAA6C,IAAI;CAEnE,QAAgB;EACZ,IAAI,IAAS;EACb,IAAI,CAAC,EAAU,KAAK,GAAG;GACnB,EAAW,CAAC,CAAC;GACb;EACJ;EAIA,OAHA,EAA0B,GAAW;GAAE;GAAI;EAAM,CAAC,CAAC,CAAC,MAAM,MAAS;GAC/D,AAAI,KAAQ,EAAW,CAAI;EAC/B,CAAC,SACY;GACT,IAAS;EACb;CACJ,GAAG;EAAC;EAAW;EAAI;CAAK,CAAC;CAEzB,SAAS,EAAO,GAA0C;EAGtD,AAFA,EAAS,CAAY,GACrB,EAAS,EAAa,IAAI,GAC1B,EAAQ,EAAK;CACjB;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAvB,UAAA,CACI,kBAAC,GAAD;GACW;GACP,OAAO;GACM;GACH;GACV,MAAK;GACL,iBAAe,KAAQ,EAAQ,SAAS;GACxC,iBAAe;GACf,cAAa;GACb,WAAW,MAAM;IAEb,AADA,EAAS,EAAE,OAAO,KAAK,GACvB,EAAQ,EAAI;GAChB;GACA,eAAe,EAAQ,EAAI;GAC3B,cAAc;IAEV,EAAU,UAAU,iBAAiB,EAAQ,EAAK,GAAG,GAAG;GAC5D;EACH,CAAA,GACA,KAAQ,EAAQ,SAAS,KACtB,kBAAC,MAAD;GAAI,IAAI;GAAQ,WAAW,EAAO;GAAS,MAAK;GAC3C,UAAA,EAAQ,KAAK,MACV,kBAAC,MAAD,EAAA,UACI,kBAAC,UAAD;IACI,MAAK;IACL,MAAK;IACL,iBAAe;IACf,WAAW,EAAO;IAClB,cAAc,MAAM,EAAE,eAAe;IACrC,eAAe;KAEX,AADI,EAAU,WAAS,aAAa,EAAU,OAAO,GACrD,EAAO,CAAC;IACZ;IATJ,UAAA,CAWI,kBAAC,QAAD,EAAA,UAAO,EAAE,KAAW,CAAA,GACpB,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAK,UAAA,EAAE;IAAS,CAAA,CACpC;GACR,CAAA,EAAA,GAfK,EAAE,EAeP,CACP;EACD,CAAA,CAEP;;AAEb"}
+{"version":3,"file":"MunicipalitySearch.js","names":[],"sources":["../../src/br/MunicipalitySearch.tsx"],"sourcesContent":["import {\n    useEffect,\n    useId,\n    useState,\n    type KeyboardEvent,\n    type MouseEvent,\n    type ReactElement,\n} from \"react\";\nimport { Input } from \"@/components/Input\";\nimport { useDebounce } from \"@/hooks\";\nimport { cn } from \"@/utils/cn\";\nimport { searchMunicipalities, type MunicipalityCentroid } from \"./geocode\";\nimport type { UF } from \"./locations\";\nimport styles from \"./MunicipalitySearch.module.css\";\n\nexport interface MunicipalitySearchProps {\n    /** Restrict the search to a single UF. */\n    uf?: UF;\n    /** Fired when a municipality is picked from the results. */\n    onSelect: (municipality: MunicipalityCentroid) => void;\n    /** Field label. */\n    label?: string;\n    /** Input placeholder. Default: `\"Buscar município…\"`. */\n    placeholder?: string;\n    /** Max results shown. Default: `8`. */\n    limit?: number;\n    /** Debounce in ms before searching. Default: `250`. */\n    debounceMs?: number;\n    /** Disable the field. */\n    disabled?: boolean;\n}\n\n/**\n * Keeps focus on the input when a press lands anywhere on the list — an option,\n * the padding or the scrollbar — so the input never blurs and the list closes\n * only when focus really leaves the field.\n *\n * @param event - The `mousedown` on the list.\n */\nfunction keepInputFocus(event: MouseEvent<HTMLUListElement>): void {\n    event.preventDefault();\n}\n\n/**\n * Debounced municipality autocomplete backed by the offline\n * {@link searchMunicipalities} index — no network. Type a partial name, pick a\n * result, and `onSelect` fires with its `{ id, name, uf, latitude, longitude }`.\n * Wire `onSelect` to a `BrazilStateMap` `selected` to highlight it on the map.\n *\n * Keyboard follows the SDK's `Combobox` (the WAI-ARIA combobox pattern): focus\n * stays on the input, `ArrowDown`/`ArrowUp` move the active result — announced\n * through `aria-activedescendant` — `Enter` picks it, `Escape` closes the list\n * and `Tab` leaves the field, closing the list on the way out.\n *\n * The list used to close on a 120 ms timer after the input blurred, with each\n * result a focusable `<button>`. Measured in Chromium (gallery build, issue\n * #426): `Tab` moved focus to the first result, the timer then unmounted it and\n * focus fell to `<body>`; arrows, `Enter` and `Escape` did nothing. Results are\n * now plain options outside the tab order, and a press on the list cancels the\n * blur instead of racing it.\n *\n * @example\n * const [uf, setUf] = useState<UF>(\"SP\");\n * const [city, setCity] = useState<string | null>(null);\n * <MunicipalitySearch uf={uf} onSelect={(m) => setCity(m.name)} />\n * <BrazilStateMap uf={uf} selected={city} />\n */\nexport function MunicipalitySearch({\n    uf,\n    onSelect,\n    label,\n    placeholder = \"Buscar município…\",\n    limit = 8,\n    debounceMs = 250,\n    disabled = false,\n}: MunicipalitySearchProps): ReactElement {\n    const [query, setQuery] = useState<string>(\"\");\n    const [results, setResults] = useState<MunicipalityCentroid[]>([]);\n    const [open, setOpen] = useState<boolean>(false);\n    const [activeIndex, setActiveIndex] = useState<number>(0);\n    const debounced = useDebounce(query, debounceMs);\n    const listId = useId();\n    const expanded = open && results.length > 0;\n    const optionId = (index: number): string => `${listId}-option-${index}`;\n\n    useEffect(() => {\n        let active = true;\n        if (!debounced.trim()) {\n            setResults([]);\n            return;\n        }\n        void searchMunicipalities(debounced, { uf, limit }).then((hits) => {\n            if (!active) return;\n            setResults(hits);\n            setActiveIndex(0);\n        });\n        return () => {\n            active = false;\n        };\n    }, [debounced, uf, limit]);\n\n    function choose(municipality: MunicipalityCentroid): void {\n        onSelect(municipality);\n        setQuery(municipality.name);\n        setOpen(false);\n    }\n\n    /**\n     * Keyboard model of the input, the same as `Combobox`'s.\n     *\n     * `Escape` calls `preventDefault()` only while the list is open, so an\n     * enclosing `Modal` or `Drawer` stays open and the next `Escape` reaches it.\n     * `Enter` is consumed only when it picks a result, so with the list closed\n     * it still submits an enclosing form.\n     *\n     * @param event - The `keydown` on the input.\n     */\n    function handleKeyDown(event: KeyboardEvent<HTMLInputElement>): void {\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            if (!expanded) {\n                setOpen(true);\n                return;\n            }\n            setActiveIndex((current) => Math.min(results.length - 1, current + 1));\n        } else if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            setActiveIndex((current) => Math.max(0, current - 1));\n        } else if (event.key === \"Enter\") {\n            const municipality = expanded ? results[activeIndex] : undefined;\n            if (!municipality) return;\n            event.preventDefault();\n            choose(municipality);\n        } else if (event.key === \"Escape\") {\n            if (expanded) event.preventDefault();\n            setOpen(false);\n        }\n    }\n\n    return (\n        <div className={styles.search}>\n            <Input\n                label={label}\n                value={query}\n                placeholder={placeholder}\n                disabled={disabled}\n                role=\"combobox\"\n                aria-expanded={expanded}\n                aria-controls={listId}\n                aria-autocomplete=\"list\"\n                aria-activedescendant={expanded ? optionId(activeIndex) : undefined}\n                autoComplete=\"off\"\n                onChange={(e) => {\n                    setQuery(e.target.value);\n                    setOpen(true);\n                }}\n                onFocus={() => setOpen(true)}\n                onBlur={() => setOpen(false)}\n                onKeyDown={handleKeyDown}\n            />\n            {expanded && (\n                <ul\n                    id={listId}\n                    className={styles.results}\n                    role=\"listbox\"\n                    onMouseDown={keepInputFocus}\n                >\n                    {results.map((m, index) => (\n                        <li\n                            key={m.id}\n                            id={optionId(index)}\n                            role=\"option\"\n                            aria-selected={index === activeIndex}\n                            className={cn(styles.result, index === activeIndex && styles.active)}\n                            onMouseEnter={() => setActiveIndex(index)}\n                            onClick={() => choose(m)}\n                        >\n                            <span>{m.name}</span>\n                            <span className={styles.uf}>{m.uf}</span>\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;AAuCA,SAAS,EAAe,GAA2C;CAC/D,EAAM,eAAe;AACzB;AA0BA,SAAgB,EAAmB,EAC/B,OACA,aACA,UACA,iBAAc,qBACd,WAAQ,GACR,gBAAa,KACb,cAAW,MAC2B;CACtC,IAAM,CAAC,GAAO,KAAY,EAAiB,EAAE,GACvC,CAAC,GAAS,KAAc,EAAiC,CAAC,CAAC,GAC3D,CAAC,GAAM,KAAW,EAAkB,EAAK,GACzC,CAAC,GAAa,KAAkB,EAAiB,CAAC,GAClD,IAAY,EAAY,GAAO,CAAU,GACzC,IAAS,EAAM,GACf,IAAW,KAAQ,EAAQ,SAAS,GACpC,KAAY,MAA0B,GAAG,EAAO,UAAU;CAEhE,QAAgB;EACZ,IAAI,IAAS;EACb,IAAI,CAAC,EAAU,KAAK,GAAG;GACnB,EAAW,CAAC,CAAC;GACb;EACJ;EAMA,OALA,EAA0B,GAAW;GAAE;GAAI;EAAM,CAAC,CAAC,CAAC,MAAM,MAAS;GAC1D,MACL,EAAW,CAAI,GACf,EAAe,CAAC;EACpB,CAAC,SACY;GACT,IAAS;EACb;CACJ,GAAG;EAAC;EAAW;EAAI;CAAK,CAAC;CAEzB,SAAS,EAAO,GAA0C;EAGtD,AAFA,EAAS,CAAY,GACrB,EAAS,EAAa,IAAI,GAC1B,EAAQ,EAAK;CACjB;CAYA,SAAS,EAAc,GAA8C;EACjE,IAAI,EAAM,QAAQ,aAAa;GAE3B,IADA,EAAM,eAAe,GACjB,CAAC,GAAU;IACX,EAAQ,EAAI;IACZ;GACJ;GACA,GAAgB,MAAY,KAAK,IAAI,EAAQ,SAAS,GAAG,IAAU,CAAC,CAAC;EACzE,OAAO,IAAI,EAAM,QAAQ,WAErB,AADA,EAAM,eAAe,GACrB,GAAgB,MAAY,KAAK,IAAI,GAAG,IAAU,CAAC,CAAC;OACjD,IAAI,EAAM,QAAQ,SAAS;GAC9B,IAAM,IAAe,IAAW,EAAQ,KAAe,KAAA;GACvD,IAAI,CAAC,GAAc;GAEnB,AADA,EAAM,eAAe,GACrB,EAAO,CAAY;EACvB,OAAO,AAAI,EAAM,QAAQ,aACjB,KAAU,EAAM,eAAe,GACnC,EAAQ,EAAK;CAErB;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAvB,UAAA,CACI,kBAAC,GAAD;GACW;GACP,OAAO;GACM;GACH;GACV,MAAK;GACL,iBAAe;GACf,iBAAe;GACf,qBAAkB;GAClB,yBAAuB,IAAW,EAAS,CAAW,IAAI,KAAA;GAC1D,cAAa;GACb,WAAW,MAAM;IAEb,AADA,EAAS,EAAE,OAAO,KAAK,GACvB,EAAQ,EAAI;GAChB;GACA,eAAe,EAAQ,EAAI;GAC3B,cAAc,EAAQ,EAAK;GAC3B,WAAW;EACd,CAAA,GACA,KACG,kBAAC,MAAD;GACI,IAAI;GACJ,WAAW,EAAO;GAClB,MAAK;GACL,aAAa;GAEZ,UAAA,EAAQ,KAAK,GAAG,MACb,kBAAC,MAAD;IAEI,IAAI,EAAS,CAAK;IAClB,MAAK;IACL,iBAAe,MAAU;IACzB,WAAW,EAAG,EAAO,QAAQ,MAAU,KAAe,EAAO,MAAM;IACnE,oBAAoB,EAAe,CAAK;IACxC,eAAe,EAAO,CAAC;IAP3B,UAAA,CASI,kBAAC,QAAD,EAAA,UAAO,EAAE,KAAW,CAAA,GACpB,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAK,UAAA,EAAE;IAAS,CAAA,CACxC;GAVK,GAAA,EAAE,EAUP,CACP;EACD,CAAA,CAEP;;AAEb"}

package/dist/br/MunicipalitySearch.module.cjs

@@ -1,3 +1,3 @@
 require("../styles/component/MunicipalitySearch.css");
-var e=`tempest_search_iYSqC`,t=`tempest_results_-a0Jg`,n=`tempest_result_D5-no`,r=`tempest_uf_Rj15X`,i={search:e,results:t,result:n,uf:r};exports.default=i,exports.result=n,exports.results=t,exports.search=e,exports.uf=r;
+var e=`tempest_search_iYSqC`,t=`tempest_results_-a0Jg`,n=`tempest_result_D5-no`,r=`tempest_active_qX2ct`,i=`tempest_uf_Rj15X`,a={search:e,results:t,result:n,active:r,uf:i};exports.active=r,exports.default=a,exports.result=n,exports.results=t,exports.search=e,exports.uf=i;
 //# sourceMappingURL=MunicipalitySearch.module.cjs.map

package/dist/br/MunicipalitySearch.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MunicipalitySearch.module.cjs","names":[],"sources":["../../src/br/MunicipalitySearch.module.css"],"sourcesContent":[".search {\n    position: relative;\n    font-family: var(--tempest-font-sans);\n}\n\n.results {\n    position: absolute;\n    z-index: 10;\n    top: 100%;\n    left: 0;\n    right: 0;\n    margin: var(--tempest-space-1) 0 0;\n    padding: var(--tempest-space-1);\n    list-style: none;\n    max-height: 260px;\n    overflow-y: auto;\n    background: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));\n}\n\n.result {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: none;\n    background: transparent;\n    border-radius: var(--tempest-radius-sm);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text);\n    text-align: left;\n    cursor: pointer;\n}\n\n.result:hover,\n.result:focus-visible {\n    outline: none;\n    background: var(--tempest-primary-soft);\n}\n\n.uf {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-medium);\n}\n"],"mappings":";"}
+{"version":3,"file":"MunicipalitySearch.module.cjs","names":[],"sources":["../../src/br/MunicipalitySearch.module.css"],"sourcesContent":[".search {\n    position: relative;\n    font-family: var(--tempest-font-sans);\n}\n\n.results {\n    position: absolute;\n    z-index: 10;\n    top: 100%;\n    left: 0;\n    right: 0;\n    margin: var(--tempest-space-1) 0 0;\n    padding: var(--tempest-space-1);\n    list-style: none;\n    max-height: 260px;\n    overflow-y: auto;\n    background: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));\n}\n\n.result {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: none;\n    background: transparent;\n    border-radius: var(--tempest-radius-sm);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text);\n    text-align: left;\n    cursor: pointer;\n}\n\n.result:hover,\n.result.active {\n    background: var(--tempest-primary-soft);\n}\n\n.uf {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-medium);\n}\n"],"mappings":";"}

package/dist/br/MunicipalitySearch.module.js

@@ -1,12 +1,13 @@
 import "../styles/component/MunicipalitySearch.css";
 //#region src/br/MunicipalitySearch.module.css
-var e = "tempest_search_iYSqC", t = "tempest_results_-a0Jg", n = "tempest_result_D5-no", r = "tempest_uf_Rj15X", i = {
+var e = "tempest_search_iYSqC", t = "tempest_results_-a0Jg", n = "tempest_result_D5-no", r = "tempest_active_qX2ct", i = "tempest_uf_Rj15X", a = {
 	search: e,
 	results: t,
 	result: n,
-	uf: r
+	active: r,
+	uf: i
 };
 //#endregion
-export { i as default, n as result, t as results, e as search, r as uf };
+export { r as active, a as default, n as result, t as results, e as search, i as uf };
 
 //# sourceMappingURL=MunicipalitySearch.module.js.map

package/dist/br/MunicipalitySearch.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"MunicipalitySearch.module.js","names":[],"sources":["../../src/br/MunicipalitySearch.module.css"],"sourcesContent":[".search {\n    position: relative;\n    font-family: var(--tempest-font-sans);\n}\n\n.results {\n    position: absolute;\n    z-index: 10;\n    top: 100%;\n    left: 0;\n    right: 0;\n    margin: var(--tempest-space-1) 0 0;\n    padding: var(--tempest-space-1);\n    list-style: none;\n    max-height: 260px;\n    overflow-y: auto;\n    background: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));\n}\n\n.result {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: none;\n    background: transparent;\n    border-radius: var(--tempest-radius-sm);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text);\n    text-align: left;\n    cursor: pointer;\n}\n\n.result:hover,\n.result:focus-visible {\n    outline: none;\n    background: var(--tempest-primary-soft);\n}\n\n.uf {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-medium);\n}\n"],"mappings":";"}
+{"version":3,"file":"MunicipalitySearch.module.js","names":[],"sources":["../../src/br/MunicipalitySearch.module.css"],"sourcesContent":[".search {\n    position: relative;\n    font-family: var(--tempest-font-sans);\n}\n\n.results {\n    position: absolute;\n    z-index: 10;\n    top: 100%;\n    left: 0;\n    right: 0;\n    margin: var(--tempest-space-1) 0 0;\n    padding: var(--tempest-space-1);\n    list-style: none;\n    max-height: 260px;\n    overflow-y: auto;\n    background: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));\n}\n\n.result {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: none;\n    background: transparent;\n    border-radius: var(--tempest-radius-sm);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text);\n    text-align: left;\n    cursor: pointer;\n}\n\n.result:hover,\n.result.active {\n    background: var(--tempest-primary-soft);\n}\n\n.uf {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-medium);\n}\n"],"mappings":";"}

package/dist/br.d.ts

@@ -964,6 +964,18 @@ export declare interface MunicipalityFeature {
  * result, and `onSelect` fires with its `{ id, name, uf, latitude, longitude }`.
  * Wire `onSelect` to a `BrazilStateMap` `selected` to highlight it on the map.
  *
+ * Keyboard follows the SDK's `Combobox` (the WAI-ARIA combobox pattern): focus
+ * stays on the input, `ArrowDown`/`ArrowUp` move the active result — announced
+ * through `aria-activedescendant` — `Enter` picks it, `Escape` closes the list
+ * and `Tab` leaves the field, closing the list on the way out.
+ *
+ * The list used to close on a 120 ms timer after the input blurred, with each
+ * result a focusable `<button>`. Measured in Chromium (gallery build, issue
+ * #426): `Tab` moved focus to the first result, the timer then unmounted it and
+ * focus fell to `<body>`; arrows, `Enter` and `Escape` did nothing. Results are
+ * now plain options outside the tab order, and a press on the list cancels the
+ * blur instead of racing it.
+ *
  * @example
  * const [uf, setUf] = useState<UF>("SP");
  * const [city, setCity] = useState<string | null>(null);