@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/flag/flag.js

@@ -1,241 +1,6 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './flag.class.js';
+import { LyraFlag } from './flag.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './flag.styles.js';
-import { ALPHA2_RE, languageToCountry } from './language-map.js';
-import '../skeleton/skeleton.js';
-/**
- * Resolves the optional peer dependency `@aceshooting/lyra-flags`'s `flagUrl`
- * via the given importer (a real dynamic import by default). Uncached and
- * dependency-injectable — unlike `loadFlagUrlResolver()` below — so the
- * caught-error warning path is directly testable without needing to
- * actually uninstall the package.
- */
-export async function loadFlagUrl(importFlags = () => import('@aceshooting/lyra-flags')) {
-    try {
-        return (await importFlags()).flagUrl;
-    }
-    catch {
-        console.warn("<lyra-flag> needs the optional peer dependency '@aceshooting/lyra-flags' to render " +
-            'flag images — install it with `pnpm add @aceshooting/lyra-flags`.');
-        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
- * the default accessible name (`alt`) instead of a bare code read
- * letter-by-letter by most screen readers. Falls back to the uppercase code
- * itself if `Intl.DisplayNames` throws (unrecognized region) or isn't
- * available in the current runtime.
- */
-function displayNameFor(code) {
-    try {
-        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();
-    }
-}
-let flagUrlResolver;
-/**
- * Lazily loads the optional peer dependency '@aceshooting/lyra-flags' once per
- * page. Resolves to `null` (with a one-time warning, see `loadFlagUrl()`) if
- * it isn't installed.
- */
-function loadFlagUrlResolver() {
-    if (!flagUrlResolver) {
-        flagUrlResolver = loadFlagUrl();
-    }
-    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.
- *
- * Flag images are shipped by the optional peer package `@aceshooting/lyra-flags`,
- * not bundled into lyra-ui itself, so importing the core library pulls zero flag
- * weight. Give it a `country` (ISO 3166-1 alpha-2) or a `language` tag (mapped to
- * a representative country). While that peer package's `flagUrl()` resolves (or
- * if it isn't installed), the host carries `aria-busy="true"` and a skeleton
- * placeholder renders in its place.
- *
- * **Bundle-size note:** `country`/`language` resolve through the peer package's
- * `flagUrl(code)`, which is itself genuinely code-split per flag (see that
- * package's docs) — using `<lyra-flag country="fr">` anywhere in an app ships
- * only the flags actually requested at runtime, not all 249. If you already
- * have a flag's URL at build time (e.g. from your own literal
- * `import frUrl from '@aceshooting/lyra-flags/flags/fr.svg?url'`), pass it as
- * `src` instead to skip the peer-package round trip (and its loading-skeleton
- * flash) entirely.
- *
- * 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" variant="compact"></lyra-flag>
- * @example <lyra-flag country="es" variant="detailed"></lyra-flag>
- * @csspart image - The underlying <img>.
- */
-export class LyraFlag extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Render as a circular flag. */
-        this.round = false;
-        /**
-         * @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. */
-        this.loading = true;
-        /**
-         * Bumped on every `willUpdate` pass; captured by each in-flight resolver
-         * `.then()` so a resolution for a `country`/`language` that's since changed
-         * (or been cleared) can recognize itself as stale and no-op instead of
-         * overwriting newer state.
-         */
-        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;
-        }
-        if (this.language)
-            return languageToCountry(this.language);
-        return undefined;
-    }
-    willUpdate(changed) {
-        // `this.hasUpdated` (not just `changed`) forces this body to run once on
-        // the very first update even when none of `country`/`language`/`src` is
-        // ever set: an unset optional property's first "assignment" is
-        // undefined -> undefined (no-op to Lit), so none of `changed.has(...)`
-        // would otherwise ever become true for a `<lyra-flag>` that never
-        // receives one, leaving `loading` stuck at its initial `true` forever.
-        if (this.hasUpdated &&
-            !changed.has('country') &&
-            !changed.has('language') &&
-            !changed.has('src') &&
-            !changed.has('variant') &&
-            !changed.has('detailed')) {
-            return;
-        }
-        const token = ++this.resolveToken; // invalidates any in-flight peer resolution either way
-        if (this.src) {
-            this.resolvedSrc = undefined;
-            this.loading = false;
-            return;
-        }
-        const code = this.code;
-        if (!code) {
-            this.resolvedSrc = undefined;
-            this.loading = false;
-            return;
-        }
-        this.loading = true;
-        const variant = this.effectiveVariant;
-        void loadFlagUrlResolver()
-            .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() {
-        if (this.loading)
-            this.setAttribute('aria-busy', 'true');
-        else
-            this.removeAttribute('aria-busy');
-    }
-    render() {
-        if (this.loading)
-            return html `<lyra-skeleton variant="rect"></lyra-skeleton>`;
-        const url = this.src ?? this.resolvedSrc;
-        if (!url)
-            return html ``;
-        const code = this.code;
-        const alt = this.label ?? (code ? displayNameFor(code) : '');
-        return html `<img part="image" src=${url} alt=${alt} loading="lazy" decoding="async" />`;
-    }
-}
-__decorate([
-    property()
-], LyraFlag.prototype, "country", void 0);
-__decorate([
-    property()
-], LyraFlag.prototype, "language", void 0);
-__decorate([
-    property()
-], LyraFlag.prototype, "src", void 0);
-__decorate([
-    property()
-], LyraFlag.prototype, "label", void 0);
-__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);
-__decorate([
-    state()
-], LyraFlag.prototype, "resolvedSrc", void 0);
-__decorate([
-    state()
-], LyraFlag.prototype, "loading", void 0);
+import "../skeleton/skeleton.js";
 defineElement('flag', LyraFlag);
+//# sourceMappingURL=flag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flag.js","sourceRoot":"","sources":["../../../src/components/flag/flag.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC"}

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

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=flag.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flag.styles.d.ts","sourceRoot":"","sources":["../../../src/components/flag/flag.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyBlB,CAAC"}

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

@@ -3,7 +3,7 @@ export const styles = css `
   :host {
     display: inline-block;
     aspect-ratio: 4 / 3;
-    block-size: 1em;
+    block-size: var(--lyra-size-1em);
     line-height: 0;
     vertical-align: middle;
   }
@@ -12,12 +12,12 @@ export const styles = css `
     block-size: 100%;
     inline-size: 100%;
     border-radius: var(--lyra-flag-radius, calc(var(--lyra-radius) * 0.33));
-    box-shadow: 0 0 0 1px var(--lyra-color-border) inset;
+    box-shadow: 0 0 0 var(--lyra-size-1px) var(--lyra-color-border) inset;
     object-fit: cover;
   }
   :host([round]) {
-    block-size: 1em;
-    inline-size: 1em;
+    block-size: var(--lyra-size-1em);
+    inline-size: var(--lyra-size-1em);
   }
   :host([round]) [part='image'] {
     inline-size: 100%;
@@ -25,3 +25,4 @@ export const styles = css `
     border-radius: 50%;
   }
 `;
+//# sourceMappingURL=flag.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flag.styles.js","sourceRoot":"","sources":["../../../src/components/flag/flag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,CAAC"}

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

@@ -23,3 +23,4 @@ export declare const LANGUAGE_TO_COUNTRY: Record<string, string>;
  * scanned for the first 2-letter alpha match rather than assuming it's always `parts[1]`.
  */
 export declare function languageToCountry(language: string): string | undefined;
+//# sourceMappingURL=language-map.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"language-map.d.ts","sourceRoot":"","sources":["../../../src/components/flag/language-map.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,QAAgB,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA4CtD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAMtE"}

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

@@ -74,3 +74,4 @@ export function languageToCountry(language) {
         return region;
     return LANGUAGE_TO_COUNTRY[base];
 }
+//# sourceMappingURL=language-map.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"language-map.js","sourceRoot":"","sources":["../../../src/components/flag/language-map.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAC;AAEvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAA2B;IACzD,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACT,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB,CAAC,QAAgB;IAChD,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACnE,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC;IAC1B,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;AACnC,CAAC"}

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

@@ -0,0 +1,41 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type GaugeType = 'radial' | 'linear';
+/**
+ * `<lyra-gauge>` — a radial or linear meter. First-party invention; no
+ * generic gauge widget exists in Web Awesome.
+ *
+ * @customElement lyra-gauge
+ * @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[];
+    value: number;
+    min: number;
+    max: number;
+    type: GaugeType;
+    label: string;
+    /** 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;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-gauge': LyraGauge;
+    }
+}
+//# sourceMappingURL=gauge.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.class.d.ts","sourceRoot":"","sources":["../../../src/components/gauge/gauge.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAqC5C;;;;;;;;;;GAUG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,iCAAgC;IAEjB,KAAK,SAAK;IACV,GAAG,SAAK;IACR,GAAG,SAAO;IACT,IAAI,EAAE,SAAS,CAAY;IAC5C,KAAK,SAAM;IACvB;6FACyF;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpD,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,KAAK,KAAK,GAMhB;IAED;;mEAE+D;IAC/D,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,UAAU,IAAI,IAAI,CAsB3B;IAED,OAAO,CAAC,YAAY;IAoBpB,OAAO,CAAC,YAAY;IAoBpB,MAAM,IAAI,cAAc,CAEvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/gauge/gauge.class.js

@@ -0,0 +1,178 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { finiteNumber } from '../../internal/numbers.js';
+import { styles } from './gauge.styles.js';
+// Radial gauge sweeps 270° (like a speedometer), leaving a 90° gap at the bottom.
+const SWEEP_DEG = 270;
+const START_DEG = 135; // rotate so the gap is centered at the bottom
+const RADIUS = 40;
+const CENTER = 50;
+const STROKE = 10;
+// Linear gauge: keep the bar thin and low in the 0..20 viewBox so the top
+// ~12 units are free for a value/label text row above it.
+const LINEAR_STROKE = 6;
+const LINEAR_BAR_Y = 15;
+const LINEAR_TEXT_Y = 8;
+// Length of the x1=0 -> x2=100 horizontal fill/track line (Euclidean, y1==y2).
+const LINEAR_LENGTH = 100;
+function polarToCartesian(angleDeg) {
+    const rad = (angleDeg * Math.PI) / 180;
+    return [CENTER + RADIUS * Math.cos(rad), CENTER + RADIUS * Math.sin(rad)];
+}
+function arcPath(startDeg, endDeg) {
+    const [sx, sy] = polarToCartesian(startDeg);
+    const [ex, ey] = polarToCartesian(endDeg);
+    const largeArc = endDeg - startDeg > 180 ? 1 : 0;
+    return `M ${sx} ${sy} A ${RADIUS} ${RADIUS} 0 ${largeArc} 1 ${ex} ${ey}`;
+}
+// The radial fill's `d` is fixed geometry (the full 270° sweep), built once —
+// a `d` rebuilt from `ratio` on every render is not reliably CSS-transitionable
+// across browsers. Animated progress instead rides stroke-dasharray/
+// stroke-dashoffset (always transitionable) over this constant path, the same
+// technique used for the linear variant's fill line below.
+const RADIAL_ARC_D = arcPath(START_DEG, START_DEG + SWEEP_DEG);
+const RADIAL_ARC_LENGTH = (SWEEP_DEG / 360) * 2 * Math.PI * RADIUS;
+/**
+ * `<lyra-gauge>` — a radial or linear meter. First-party invention; no
+ * generic gauge widget exists in Web Awesome.
+ *
+ * @customElement lyra-gauge
+ * @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 class LyraGauge extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.min = 0;
+        this.max = 100;
+        this.type = 'radial';
+        this.label = '';
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    // Normalizes a reversed min > max domain by swapping lo/hi, but only once
+    // both bounds are finite -- shared by `ratio` (fill geometry) and
+    // `willUpdate` (aria-value* trio) so the two can never silently diverge.
+    get domain() {
+        const min = finiteNumber(this.min, 0);
+        const max = finiteNumber(this.max, 100);
+        return { lo: Math.min(min, max), hi: Math.max(min, max) };
+    }
+    get ratio() {
+        if (!Number.isFinite(this.value))
+            return 0;
+        const { lo, hi } = this.domain;
+        if (!Number.isFinite(lo) || !Number.isFinite(hi))
+            return 0;
+        const span = hi - lo || 1;
+        return Math.min(1, Math.max(0, (this.value - lo) / span));
+    }
+    /** 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). */
+    get displayText() {
+        return this.valueLabel || (!Number.isFinite(this.value) ? '' : String(this.value));
+    }
+    willUpdate() {
+        this.setAttribute('role', 'meter');
+        // Normalize a reversed min > max domain the same way `ratio` does, so the
+        // announced aria-value* trio always agrees with the visual fill instead
+        // of aria-valuenow pinning to one bound regardless of `value` (and
+        // aria-valuemin/valuemax reporting an inverted, invalid ARIA range).
+        const { lo, hi } = this.domain;
+        const finiteTrio = Number.isFinite(this.value) && Number.isFinite(lo) && Number.isFinite(hi);
+        if (finiteTrio) {
+            const clamped = Math.min(hi, Math.max(lo, this.value));
+            this.setAttribute('aria-valuenow', String(clamped));
+        }
+        else {
+            this.removeAttribute('aria-valuenow');
+        }
+        if (Number.isFinite(lo))
+            this.setAttribute('aria-valuemin', String(lo));
+        else
+            this.removeAttribute('aria-valuemin');
+        if (Number.isFinite(hi))
+            this.setAttribute('aria-valuemax', String(hi));
+        else
+            this.removeAttribute('aria-valuemax');
+        if (this.label)
+            this.setAttribute('aria-label', this.label);
+        else
+            this.removeAttribute('aria-label');
+        if (this.valueLabel)
+            this.setAttribute('aria-valuetext', this.valueLabel);
+        else
+            this.removeAttribute('aria-valuetext');
+    }
+    renderRadial() {
+        const text = this.displayText;
+        // Dashoffset counts down from the full arc length (nothing revealed) to 0
+        // (whole sweep revealed) as ratio goes 0 -> 1 — the classic "draw an SVG
+        // path" technique, which transitions smoothly via plain CSS.
+        const dashoffset = RADIAL_ARC_LENGTH * (1 - this.ratio);
+        return html `<svg part="base" viewBox="0 0 100 100">
+      <path part="track" stroke-width=${STROKE} d=${RADIAL_ARC_D}></path>
+      <path
+        part="fill"
+        stroke-width=${STROKE}
+        d=${RADIAL_ARC_D}
+        stroke-dasharray=${RADIAL_ARC_LENGTH}
+        stroke-dashoffset=${dashoffset}
+      ></path>
+      <text part="value" x="50" y="52" aria-hidden="true">${text}</text>
+      ${this.label ? svg `<text part="label" x="50" y="68" aria-hidden="true">${this.label}</text>` : ''}
+    </svg>`;
+    }
+    renderLinear() {
+        const text = this.displayText;
+        const dashoffset = LINEAR_LENGTH * (1 - this.ratio);
+        return html `<svg part="base" viewBox="0 0 100 20" preserveAspectRatio="none">
+      <line part="track" x1="0" y1=${LINEAR_BAR_Y} x2="100" y2=${LINEAR_BAR_Y} stroke-width=${LINEAR_STROKE}></line>
+      <line
+        part="fill"
+        x1="0"
+        y1=${LINEAR_BAR_Y}
+        x2="100"
+        y2=${LINEAR_BAR_Y}
+        stroke-width=${LINEAR_STROKE}
+        stroke-dasharray=${LINEAR_LENGTH}
+        stroke-dashoffset=${dashoffset}
+      ></line>
+      ${this.label ? svg `<text part="label" x="0" y=${LINEAR_TEXT_Y} aria-hidden="true">${this.label}</text>` : ''}
+      <text part="value" x="100" y=${LINEAR_TEXT_Y} aria-hidden="true">${text}</text>
+    </svg>`;
+    }
+    render() {
+        return this.type === 'linear' ? this.renderLinear() : this.renderRadial();
+    }
+}
+__decorate([
+    property({ type: Number })
+], LyraGauge.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], LyraGauge.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], LyraGauge.prototype, "max", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraGauge.prototype, "type", void 0);
+__decorate([
+    property()
+], LyraGauge.prototype, "label", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraGauge.prototype, "valueLabel", void 0);
+//# sourceMappingURL=gauge.class.js.map

package/dist/components/gauge/gauge.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.class.js","sourceRoot":"","sources":["../../../src/components/gauge/gauge.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAuB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAI3C,kFAAkF;AAClF,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,8CAA8C;AACrE,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,0EAA0E;AAC1E,0DAA0D;AAC1D,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,+EAA+E;AAC/E,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,SAAS,gBAAgB,CAAC,QAAgB;IACxC,MAAM,GAAG,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;IACvC,OAAO,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5E,CAAC;AAED,SAAS,OAAO,CAAC,QAAgB,EAAE,MAAc;IAC/C,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC1C,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,MAAM,IAAI,MAAM,MAAM,QAAQ,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC;AAC3E,CAAC;AAED,8EAA8E;AAC9E,gFAAgF;AAChF,qEAAqE;AACrE,8EAA8E;AAC9E,2DAA2D;AAC3D,MAAM,YAAY,GAAG,OAAO,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAC/D,MAAM,iBAAiB,GAAG,CAAC,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;AAEnE;;;;;;;;;;GAUG;AACH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAA1C;;QAG8B,UAAK,GAAG,CAAC,CAAC;QACV,QAAG,GAAG,CAAC,CAAC;QACR,QAAG,GAAG,GAAG,CAAC;QACT,SAAI,GAAc,QAAQ,CAAC;QAC5C,UAAK,GAAG,EAAE,CAAC;IAgGzB,CAAC;aAtGQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAW7C,0EAA0E;IAC1E,kEAAkE;IAClE,yEAAyE;IACzE,IAAY,MAAM;QAChB,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QACtC,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QACxC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5D,CAAC;IAED,IAAY,KAAK;QACf,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,CAAC,CAAC;QAC3C,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;YAAE,OAAO,CAAC,CAAC;QAC3D,MAAM,IAAI,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;QAC1B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;IAC5D,CAAC;IAED;;mEAE+D;IAC/D,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IACrF,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,0EAA0E;QAC1E,wEAAwE;QACxE,mEAAmE;QACnE,qEAAqE;QACrE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC;QAC/B,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC7F,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YACvD,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;;YACnE,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC3C,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;;YACnE,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC3C,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;;YACvD,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;;YACrE,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC9C,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,0EAA0E;QAC1E,yEAAyE;QACzE,6DAA6D;QAC7D,MAAM,UAAU,GAAG,iBAAiB,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACxD,OAAO,IAAI,CAAA;wCACyB,MAAM,MAAM,YAAY;;;uBAGzC,MAAM;YACjB,YAAY;2BACG,iBAAiB;4BAChB,UAAU;;4DAEsB,IAAI;QACxD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAA,uDAAuD,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;WAC5F,CAAC;IACV,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,MAAM,UAAU,GAAG,aAAa,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACpD,OAAO,IAAI,CAAA;qCACsB,YAAY,gBAAgB,YAAY,iBAAiB,aAAa;;;;aAI9F,YAAY;;aAEZ,YAAY;uBACF,aAAa;2BACT,aAAa;4BACZ,UAAU;;QAE9B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAA,8BAA8B,aAAa,uBAAuB,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;qCAC7E,aAAa,uBAAuB,IAAI;WAClE,CAAC;IACV,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;IAC5E,CAAC;CACF;AApG6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAS;AACR;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAW;AACT;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA4B;AAC5C;IAAX,QAAQ,EAAE;wCAAY;AAGS;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAAqB"}

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

@@ -1,40 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-export type GaugeType = 'radial' | 'linear';
-/**
- * `<lyra-gauge>` — a radial or linear meter. First-party invention; no
- * generic gauge widget exists in Web Awesome.
- *
- * @customElement lyra-gauge
- * @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[];
-    value: number;
-    min: number;
-    max: number;
-    type: GaugeType;
-    label: string;
-    /** 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;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-gauge': LyraGauge;
-    }
-}
+export * from './gauge.class.js';
+//# sourceMappingURL=gauge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.d.ts","sourceRoot":"","sources":["../../../src/components/gauge/gauge.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}