@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/export-button/export-button.d.ts

@@ -18,10 +18,16 @@ export type ExportFormat = 'csv' | 'json';
 export declare class LyraExportButton extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
     rows: Record<string, unknown>[];
+    /** Column allow-list (and CSV header labels) for both export formats. Left
+     *  at its default empty array, both formats fall back to the union of the
+     *  rows' own keys instead (see `effectiveColumns()`), rather than CSV
+     *  degrading to a blank file while only JSON had a fallback. */
     columns: CsvColumn[];
     filename: string;
     formats: ExportFormat[];
     disabled: boolean;
+    /** Trigger button text, also feeds the format menu's `aria-label` (as
+     *  "`${label} format`") so assistive tech gets an accessible name for it. */
     label: string;
     open: boolean;
     private triggerEl?;
@@ -42,6 +48,12 @@ export declare class LyraExportButton extends LyraElement {
     private onKeyDown;
     protected firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
+    /** Falls back to the union of the rows' own keys when `columns` is left at
+     *  its default empty array, so an unconfigured export still produces a
+     *  proper header + data file instead of blank lines. Both `rowsForExport()`
+     *  and the CSV branch of `doExport()` share this same fallback, rather than
+     *  only the JSON path having one. */
+    private effectiveColumns;
     /** Applies the same `columns` allow-list CSV exports use, so JSON can't leak fields CSV hides. */
     private rowsForExport;
     private doExport;

package/dist/components/export-button/export-button.js

@@ -29,10 +29,16 @@ export class LyraExportButton extends LyraElement {
     constructor() {
         super(...arguments);
         this.rows = [];
+        /** Column allow-list (and CSV header labels) for both export formats. Left
+         *  at its default empty array, both formats fall back to the union of the
+         *  rows' own keys instead (see `effectiveColumns()`), rather than CSV
+         *  degrading to a blank file while only JSON had a fallback. */
         this.columns = [];
         this.filename = 'export';
         this.formats = ['csv'];
         this.disabled = false;
+        /** Trigger button text, also feeds the format menu's `aria-label` (as
+         *  "`${label} format`") so assistive tech gets an accessible name for it. */
         this.label = 'Export';
         this.open = false;
         this.menuId = nextId('export-menu');
@@ -76,6 +82,12 @@ export class LyraExportButton extends LyraElement {
                         this.focusMenuItem(items.length - 1);
                     }
                     break;
+                case 'Tab':
+                    // No preventDefault -- native Tab navigation proceeds untouched, only
+                    // the now-stale open menu closes (mirrors lyra-menu's identical
+                    // Tab handling).
+                    this.closeMenu();
+                    break;
             }
         };
     }
@@ -83,7 +95,9 @@ export class LyraExportButton extends LyraElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.cleanup?.();
+        this.cleanup = undefined;
         document.removeEventListener('pointerdown', this.onDocPointer);
+        this.open = false;
     }
     openMenu() {
         if (this.open)
@@ -141,11 +155,24 @@ export class LyraExportButton extends LyraElement {
             }
         }
     }
+    /** Falls back to the union of the rows' own keys when `columns` is left at
+     *  its default empty array, so an unconfigured export still produces a
+     *  proper header + data file instead of blank lines. Both `rowsForExport()`
+     *  and the CSV branch of `doExport()` share this same fallback, rather than
+     *  only the JSON path having one. */
+    effectiveColumns() {
+        if (this.columns.length > 0)
+            return this.columns;
+        const keys = new Set();
+        for (const row of this.rows) {
+            for (const key of Object.keys(row))
+                keys.add(key);
+        }
+        return Array.from(keys, (key) => ({ key, label: key }));
+    }
     /** Applies the same `columns` allow-list CSV exports use, so JSON can't leak fields CSV hides. */
     rowsForExport() {
-        if (this.columns.length === 0)
-            return this.rows;
-        const keys = this.columns.map((c) => c.key);
+        const keys = this.effectiveColumns().map((c) => c.key);
         return this.rows.map((row) => {
             const picked = {};
             for (const key of keys)
@@ -154,13 +181,15 @@ export class LyraExportButton extends LyraElement {
         });
     }
     doExport(format) {
+        if (this.disabled)
+            return;
         this.closeMenu();
         this.triggerEl?.focus();
         const ev = this.emit('lyra-export', { format });
         if (ev.defaultPrevented)
             return;
         if (format === 'csv') {
-            downloadBlob(buildCsv(this.rows, this.columns), `${this.filename}.csv`, 'text/csv;charset=utf-8;');
+            downloadBlob(buildCsv(this.rows, this.effectiveColumns()), `${this.filename}.csv`, 'text/csv;charset=utf-8;');
         }
         else {
             downloadBlob(JSON.stringify(this.rowsForExport(), null, 2), `${this.filename}.json`, 'application/json');
@@ -189,11 +218,12 @@ export class LyraExportButton extends LyraElement {
         ${this.label}
       </button>
       ${this.formats.length > 1
-            ? html `<div id=${this.menuId} part="menu" role="menu">
+            ? html `<div id=${this.menuId} part="menu" role="menu" aria-label="${this.label} format">
             ${this.formats.map((f) => html `<button
                   part="menu-item"
                   role="menuitem"
                   type="button"
+                  ?disabled=${this.disabled}
                   @click=${() => this.doExport(f)}
                 >
                   ${f.toUpperCase()}

package/dist/components/export-button/export-button.styles.js

@@ -77,11 +77,15 @@ export const styles = css `
     cursor: pointer;
     border-radius: var(--lyra-radius);
   }
-  [part='menu-item']:hover {
+  [part='menu-item']:hover:not(:disabled) {
     background: var(--lyra-color-brand-quiet);
   }
   [part='menu-item']:focus-visible {
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
     outline-offset: var(--lyra-focus-ring-offset);
   }
+  [part='menu-item']:disabled {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
 `;

package/dist/components/file-input/accept.js

@@ -28,6 +28,8 @@ export function matchesAccept(file, accept, assumeExtensionMatch = false) {
     return parts.some((p) => {
         if (p.startsWith('.'))
             return name === undefined ? assumeExtensionMatch : name.endsWith(p);
+        if (p === '*/*')
+            return true;
         if (p.endsWith('/*'))
             return type.startsWith(p.slice(0, -1));
         return type === p;

package/dist/components/file-input/file-input.d.ts

@@ -14,7 +14,9 @@ export interface RejectedFile {
  * accessible name always comes from `label`, so icon-only slot content
  * remains announced correctly.
  * @event lyra-files - `detail: { files, rejected }`, fired on drop and manual selection.
- * @csspart base, input, status
+ * @csspart base - The dropzone's root, clickable/focusable container.
+ * @csspart input - The visually-hidden native `<input type="file">`.
+ * @csspart status - The visually-hidden live region announcing drag accept/reject state.
  */
 export declare class LyraFileInput extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -25,7 +27,14 @@ export declare class LyraFileInput extends LyraElement {
     forbiddenMimeTypes: string[];
     maxFileSize: number;
     label: string;
+    /** Message announced after an accepted selection; `{count}` is replaced by
+     * the number of accepted files. */
+    acceptedMessage: string;
+    /** Message announced after rejected files; `{count}` is replaced by the
+     * number of rejected files. */
+    rejectedMessage: string;
     private dragState;
+    private resultStatus;
     private inputEl?;
     private dragCounter;
     private isAllowed;

package/dist/components/file-input/file-input.js

@@ -21,7 +21,9 @@ import { matchesAccept } from './accept.js';
  * accessible name always comes from `label`, so icon-only slot content
  * remains announced correctly.
  * @event lyra-files - `detail: { files, rejected }`, fired on drop and manual selection.
- * @csspart base, input, status
+ * @csspart base - The dropzone's root, clickable/focusable container.
+ * @csspart input - The visually-hidden native `<input type="file">`.
+ * @csspart status - The visually-hidden live region announcing drag accept/reject state.
  */
 export class LyraFileInput extends LyraElement {
     constructor() {
@@ -33,20 +35,30 @@ export class LyraFileInput extends LyraElement {
         this.forbiddenMimeTypes = [];
         this.maxFileSize = 0;
         this.label = 'Drop files here or click to browse';
+        /** Message announced after an accepted selection; `{count}` is replaced by
+         * the number of accepted files. */
+        this.acceptedMessage = '{count} file(s) added.';
+        /** Message announced after rejected files; `{count}` is replaced by the
+         * number of rejected files. */
+        this.rejectedMessage = '{count} file(s) rejected.';
         this.dragState = 'default';
+        this.resultStatus = '';
         this.dragCounter = 0;
         this.onDragEnter = (e) => {
+            e.preventDefault();
             if (this.disabled)
                 return;
-            e.preventDefault();
             this.dragCounter++;
             const items = e.dataTransfer ? [...e.dataTransfer.items].filter((i) => i.kind === 'file') : [];
             this.dragState = items.length ? this.previewState(items) : 'default';
         };
         this.onDragOver = (e) => {
+            // Always suppress the browser's default drop action (e.g. navigating the
+            // whole page to the dropped file), even while disabled — only the
+            // subsequent classification/emit logic is gated on `disabled`.
+            e.preventDefault();
             if (this.disabled)
                 return;
-            e.preventDefault();
         };
         this.onDragLeave = (e) => {
             if (this.disabled)
@@ -57,9 +69,11 @@ export class LyraFileInput extends LyraElement {
                 this.dragState = 'default';
         };
         this.onDrop = (e) => {
+            // Same rationale as `onDragOver`: prevent the browser's default drop
+            // action unconditionally, before the `disabled` gate.
+            e.preventDefault();
             if (this.disabled)
                 return;
-            e.preventDefault();
             this.dragCounter = 0;
             this.dragState = 'default';
             const files = [...(e.dataTransfer?.files ?? [])];
@@ -118,10 +132,18 @@ export class LyraFileInput extends LyraElement {
     }
     emitFiles(fileList) {
         const { files, rejected } = this.classify(fileList);
+        const messages = [];
+        if (files.length)
+            messages.push(this.acceptedMessage.replace('{count}', String(files.length)));
+        if (rejected.length)
+            messages.push(this.rejectedMessage.replace('{count}', String(rejected.length)));
+        this.resultStatus = messages.join(' ');
         this.emit('lyra-files', { files, rejected });
     }
     /** Programmatically open the native file picker. */
     openPicker() {
+        if (this.disabled)
+            return;
         this.inputEl?.click();
     }
     previewState(fileList) {
@@ -133,7 +155,7 @@ export class LyraFileInput extends LyraElement {
             return 'Release to add the file.';
         if (this.dragState === 'reject')
             return 'This file type is not accepted.';
-        return '';
+        return this.resultStatus;
     }
     render() {
         return html `
@@ -188,9 +210,18 @@ __decorate([
 __decorate([
     property()
 ], LyraFileInput.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'accepted-message' })
+], LyraFileInput.prototype, "acceptedMessage", void 0);
+__decorate([
+    property({ attribute: 'rejected-message' })
+], LyraFileInput.prototype, "rejectedMessage", void 0);
 __decorate([
     state()
 ], LyraFileInput.prototype, "dragState", void 0);
+__decorate([
+    state()
+], LyraFileInput.prototype, "resultStatus", void 0);
 __decorate([
     query('input[type="file"]')
 ], LyraFileInput.prototype, "inputEl", void 0);

package/dist/components/flag/flag.d.ts

@@ -1,8 +1,9 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 import '../skeleton/skeleton.js';
+export type FlagVariant = 'compact' | 'standard' | 'detailed';
 type FlagUrlResolver = (code: string, options?: {
-    variant?: 'detailed';
+    variant?: FlagVariant;
 }) => Promise<string | undefined>;
 /**
  * Resolves the optional peer dependency `@aceshooting/lyra-flags`'s `flagUrl`
@@ -33,16 +34,19 @@ export declare function loadFlagUrl(importFlags?: () => Promise<{
  * `src` instead to skip the peer-package round trip (and its loading-skeleton
  * flash) entirely.
  *
- * A handful of flags (e.g. `es`, `pt` — any whose design includes a detailed coat of
- * arms/seal/emblem) ship a second, full-detail source SVG alongside the default icon-optimized
- * one; set `detailed` to request it (e.g. for a hero-scale display where the extra illustrative
- * detail is actually visible). A no-op for every other code — see `detailed`'s own doc.
+ * The ~65 flags whose design includes a detailed coat of arms/seal/emblem (e.g. `es`, `pt`) ship
+ * three fidelity tiers; choose one with `variant`: `"compact"` (a tiny WebP raster for icon-scale
+ * use — menu items, language selectors, dense lists), the default `"standard"` (icon-optimized
+ * vector for card/row sizes), or `"detailed"` (the pristine full-detail vector for hero-scale
+ * display). A no-op for every other code — all tiers resolve to the same file. See `variant`'s own
+ * doc.
  *
  * @customElement lyra-flag
  * @example <lyra-flag country="fr"></lyra-flag>
  * @example <lyra-flag language="en" label="English"></lyra-flag>
  * @example <lyra-flag src=${frUrl} label="French"></lyra-flag>
- * @example <lyra-flag country="es" detailed></lyra-flag>
+ * @example <lyra-flag country="es" variant="compact"></lyra-flag>
+ * @example <lyra-flag country="es" variant="detailed"></lyra-flag>
  * @csspart image - The underlying <img>.
  */
 export declare class LyraFlag extends LyraElement {
@@ -73,15 +77,27 @@ export declare class LyraFlag extends LyraElement {
     /** Render as a circular flag. */
     round: boolean;
     /**
-     * Requests the pristine, full-detail source SVG instead of the default icon-optimized one —
-     * only meaningful for the minority of `country`/`language` codes whose source art was large
-     * enough to need optimizing (e.g. `es`, `pt`, a national coat of arms/seal/emblem); for every
-     * other code this is a safe no-op (the default and detailed variants are the same file). Has no
-     * effect when `src` is set — a pre-resolved URL is used as-is regardless. Intended for rendering
-     * a flag larger than icon scale (e.g. a hero display) where the extra illustrative detail is
-     * actually visible.
+     * Which fidelity tier to load, for the ~65 `country`/`language` codes whose source art embeds a
+     * coat of arms/seal/emblem (for every other code all tiers are the same file, so this is a safe
+     * no-op):
+     * - `"compact"` — a tiny WebP raster for icon-scale use (menu items, language selectors, dense
+     *   lists; ~12–28px), where the emblem detail is invisible anyway.
+     * - `"standard"` (default) — the icon-optimized vector, for card/row sizes (~28–96px).
+     * - `"detailed"` — the pristine, full-detail vector, for rendering larger than icon scale (e.g.
+     *   a hero display) where the extra illustrative detail is actually visible.
+     *
+     * Has no effect when `src` is set — a pre-resolved URL is used as-is regardless. Takes precedence
+     * over the deprecated `detailed` boolean.
+     */
+    variant?: FlagVariant;
+    /**
+     * @deprecated Use `variant="detailed"` instead. Kept as an alias for one minor cycle; when
+     * `variant` is unset, `detailed` still maps to the detailed tier. Removed in the next major.
      */
     detailed: boolean;
+    /** The effective tier to request: an explicit `variant` wins; otherwise the deprecated
+     *  `detailed` boolean is honored; otherwise `"standard"`. */
+    private get effectiveVariant();
     private resolvedSrc?;
     /** True while the lazy-loaded `@aceshooting/lyra-flags` peer resolver is in flight. */
     private loading;

package/dist/components/flag/flag.js

@@ -28,6 +28,14 @@ export async function loadFlagUrl(importFlags = () => import('@aceshooting/lyra-
         return null;
     }
 }
+/**
+ * One `Intl.DisplayNames` instance per locale, shared across every `<lyra-flag>` on the page.
+ * Constructing one is an ICU locale-data lookup, and `displayNameFor()` runs on every `render()`
+ * pass for a flag without an explicit `label` (e.g. toggling `round`), not just on country/language
+ * change -- multi-flag lists (language pickers, country lists) would otherwise pay this cost once
+ * per element per render. Mirrors the module-level caching `flagUrlResolver` already gets above.
+ */
+const displayNamesCache = new Map();
 /**
  * Resolves an ISO 3166-1 alpha-2 region code to a human-readable, localized
  * display name (e.g. `'FR'` -> `'France'`) via `Intl.DisplayNames`, for use as
@@ -38,7 +46,13 @@ export async function loadFlagUrl(importFlags = () => import('@aceshooting/lyra-
  */
 function displayNameFor(code) {
     try {
-        return new Intl.DisplayNames([navigator.language], { type: 'region' }).of(code.toUpperCase()) ?? code.toUpperCase();
+        const locale = navigator.language;
+        let dn = displayNamesCache.get(locale);
+        if (!dn) {
+            dn = new Intl.DisplayNames([locale], { type: 'region' });
+            displayNamesCache.set(locale, dn);
+        }
+        return dn.of(code.toUpperCase()) ?? code.toUpperCase();
     }
     catch {
         return code.toUpperCase();
@@ -56,6 +70,17 @@ function loadFlagUrlResolver() {
     }
     return flagUrlResolver;
 }
+/**
+ * @internal Test-only seam: overrides (or, with `undefined`, clears) the module-level cache that
+ * `willUpdate()` reads through `loadFlagUrlResolver()`. The real `@aceshooting/lyra-flags` peer's
+ * `flagUrl(code)` never actually rejects (unknown codes just resolve `undefined`), so this is the
+ * only way to exercise a resolver-function rejection — e.g. a network failure fetching a flag
+ * asset — without uninstalling the real package. Not part of the public API; not re-exported from
+ * the root barrel.
+ */
+export function __setFlagUrlResolverForTesting(value) {
+    flagUrlResolver = value;
+}
 /**
  * `<lyra-flag>` — a country/language flag.
  *
@@ -75,16 +100,19 @@ function loadFlagUrlResolver() {
  * `src` instead to skip the peer-package round trip (and its loading-skeleton
  * flash) entirely.
  *
- * A handful of flags (e.g. `es`, `pt` — any whose design includes a detailed coat of
- * arms/seal/emblem) ship a second, full-detail source SVG alongside the default icon-optimized
- * one; set `detailed` to request it (e.g. for a hero-scale display where the extra illustrative
- * detail is actually visible). A no-op for every other code — see `detailed`'s own doc.
+ * The ~65 flags whose design includes a detailed coat of arms/seal/emblem (e.g. `es`, `pt`) ship
+ * three fidelity tiers; choose one with `variant`: `"compact"` (a tiny WebP raster for icon-scale
+ * use — menu items, language selectors, dense lists), the default `"standard"` (icon-optimized
+ * vector for card/row sizes), or `"detailed"` (the pristine full-detail vector for hero-scale
+ * display). A no-op for every other code — all tiers resolve to the same file. See `variant`'s own
+ * doc.
  *
  * @customElement lyra-flag
  * @example <lyra-flag country="fr"></lyra-flag>
  * @example <lyra-flag language="en" label="English"></lyra-flag>
  * @example <lyra-flag src=${frUrl} label="French"></lyra-flag>
- * @example <lyra-flag country="es" detailed></lyra-flag>
+ * @example <lyra-flag country="es" variant="compact"></lyra-flag>
+ * @example <lyra-flag country="es" variant="detailed"></lyra-flag>
  * @csspart image - The underlying <img>.
  */
 export class LyraFlag extends LyraElement {
@@ -93,13 +121,8 @@ export class LyraFlag extends LyraElement {
         /** Render as a circular flag. */
         this.round = false;
         /**
-         * Requests the pristine, full-detail source SVG instead of the default icon-optimized one —
-         * only meaningful for the minority of `country`/`language` codes whose source art was large
-         * enough to need optimizing (e.g. `es`, `pt`, a national coat of arms/seal/emblem); for every
-         * other code this is a safe no-op (the default and detailed variants are the same file). Has no
-         * effect when `src` is set — a pre-resolved URL is used as-is regardless. Intended for rendering
-         * a flag larger than icon scale (e.g. a hero display) where the extra illustrative detail is
-         * actually visible.
+         * @deprecated Use `variant="detailed"` instead. Kept as an alias for one minor cycle; when
+         * `variant` is unset, `detailed` still maps to the detailed tier. Removed in the next major.
          */
         this.detailed = false;
         /** True while the lazy-loaded `@aceshooting/lyra-flags` peer resolver is in flight. */
@@ -113,6 +136,11 @@ export class LyraFlag extends LyraElement {
         this.resolveToken = 0;
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    /** The effective tier to request: an explicit `variant` wins; otherwise the deprecated
+     *  `detailed` boolean is honored; otherwise `"standard"`. */
+    get effectiveVariant() {
+        return this.variant ?? (this.detailed ? 'detailed' : 'standard');
+    }
     get code() {
         if (this.country) {
             return ALPHA2_RE.test(this.country) ? this.country.toLowerCase() : undefined;
@@ -132,6 +160,7 @@ export class LyraFlag extends LyraElement {
             !changed.has('country') &&
             !changed.has('language') &&
             !changed.has('src') &&
+            !changed.has('variant') &&
             !changed.has('detailed')) {
             return;
         }
@@ -148,13 +177,21 @@ export class LyraFlag extends LyraElement {
             return;
         }
         this.loading = true;
+        const variant = this.effectiveVariant;
         void loadFlagUrlResolver()
-            .then((resolve) => resolve?.(code, this.detailed ? { variant: 'detailed' } : undefined))
+            .then((resolve) => resolve?.(code, variant === 'standard' ? undefined : { variant }))
             .then((url) => {
             if (token !== this.resolveToken)
                 return; // superseded by a later country/language/src change
             this.resolvedSrc = url;
             this.loading = false;
+        })
+            .catch((err) => {
+            if (token !== this.resolveToken)
+                return; // superseded by a later country/language/src change
+            console.warn(`<lyra-flag> failed to resolve a flag URL for "${code}":`, err);
+            this.resolvedSrc = undefined;
+            this.loading = false;
         });
     }
     updated() {
@@ -189,6 +226,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraFlag.prototype, "round", void 0);
+__decorate([
+    property()
+], LyraFlag.prototype, "variant", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraFlag.prototype, "detailed", void 0);

package/dist/components/flag/flag.styles.js

@@ -11,7 +11,7 @@ export const styles = css `
     display: block;
     block-size: 100%;
     inline-size: 100%;
-    border-radius: var(--lyra-flag-radius, 2px);
+    border-radius: var(--lyra-flag-radius, calc(var(--lyra-radius) * 0.33));
     box-shadow: 0 0 0 1px var(--lyra-color-border) inset;
     object-fit: cover;
   }

package/dist/components/flag/language-map.d.ts

@@ -17,6 +17,9 @@ export declare const ALPHA2_RE: RegExp;
 export declare const LANGUAGE_TO_COUNTRY: Record<string, string>;
 /**
  * Resolve a BCP-47-ish language tag to a flag country code.
- * A region subtag wins (`en-US` → `us`); otherwise the base language is mapped.
+ * A region subtag wins (`en-US` → `us`); otherwise the base language is mapped. The region subtag
+ * isn't always in the second position -- a script subtag (e.g. `zh-Hant-TW`, ISO 15924, always 4
+ * letters) can sit between the base language and the region, so every subtag after the base is
+ * scanned for the first 2-letter alpha match rather than assuming it's always `parts[1]`.
  */
 export declare function languageToCountry(language: string): string | undefined;

package/dist/components/flag/language-map.js

@@ -61,13 +61,16 @@ export const LANGUAGE_TO_COUNTRY = {
 };
 /**
  * Resolve a BCP-47-ish language tag to a flag country code.
- * A region subtag wins (`en-US` → `us`); otherwise the base language is mapped.
+ * A region subtag wins (`en-US` → `us`); otherwise the base language is mapped. The region subtag
+ * isn't always in the second position -- a script subtag (e.g. `zh-Hant-TW`, ISO 15924, always 4
+ * letters) can sit between the base language and the region, so every subtag after the base is
+ * scanned for the first 2-letter alpha match rather than assuming it's always `parts[1]`.
  */
 export function languageToCountry(language) {
     const parts = language.toLowerCase().split(/[-_]/);
     const base = parts[0];
-    const region = parts[1];
-    if (region && ALPHA2_RE.test(region))
+    const region = parts.slice(1).find((part) => ALPHA2_RE.test(part));
+    if (region)
         return region;
     return LANGUAGE_TO_COUNTRY[base];
 }

package/dist/components/gauge/gauge.d.ts

@@ -6,7 +6,11 @@ export type GaugeType = 'radial' | 'linear';
  * generic gauge widget exists in Web Awesome.
  *
  * @customElement lyra-gauge
- * @csspart base, track, fill, value, label
+ * @csspart base - The root `<svg>`.
+ * @csspart track - The background track arc/line.
+ * @csspart fill - The animated fill arc/line.
+ * @csspart value - The value text.
+ * @csspart label - The label text.
  */
 export declare class LyraGauge extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -18,7 +22,12 @@ export declare class LyraGauge extends LyraElement {
     /** Imperative override for the displayed/announced value text, e.g. `'72°F'` for a raw `value` of `72`.
      * An empty string is treated the same as unset and falls back to the numeric `value`. */
     valueLabel?: string;
+    private get domain();
     private get ratio();
+    /** The text rendered/announced for the current value: `valueLabel` when set,
+     * else the numeric `value`, blanked (like the ARIA attributes and fill) when
+     * `value` is non-finite (NaN/undefined/Infinity/-Infinity). */
+    private get displayText();
     protected willUpdate(): void;
     private renderRadial;
     private renderLinear;