@aceshooting/lyra-ui 2.1.0 → 2.3.0

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":"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"}

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"}

package/dist/components/gauge/gauge.js

@@ -1,179 +1,5 @@
-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';
+export * from './gauge.class.js';
+import { LyraGauge } from './gauge.class.js';
 import { defineElement } from '../../internal/prefix.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);
 defineElement('gauge', LyraGauge);
+//# sourceMappingURL=gauge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","sourceRoot":"","sources":["../../../src/components/gauge/gauge.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC"}

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

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

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

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

package/dist/components/gauge/gauge.styles.js

@@ -2,12 +2,12 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: inline-block;
-    inline-size: 8em;
-    block-size: 8em;
+    inline-size: var(--lyra-size-8em);
+    block-size: var(--lyra-size-8em);
   }
   :host([type='linear']) {
-    inline-size: 12em;
-    block-size: 1.5em;
+    inline-size: var(--lyra-size-12em);
+    block-size: var(--lyra-size-1-5em);
   }
   svg {
     display: block;
@@ -26,14 +26,14 @@ export const styles = css `
     transition: stroke-dashoffset var(--lyra-transition-base);
   }
   [part='value'] {
-    font-size: 1rem;
-    font-weight: 700;
+    font-size: var(--lyra-font-size-md);
+    font-weight: var(--lyra-font-weight-bold);
     text-anchor: middle;
     fill: var(--lyra-color-text);
     font-family: var(--lyra-font);
   }
   [part='label'] {
-    font-size: 0.625rem;
+    font-size: var(--lyra-font-size-2xs);
     text-anchor: middle;
     fill: var(--lyra-color-text-quiet);
     font-family: var(--lyra-font);
@@ -44,7 +44,7 @@ export const styles = css `
   }
   :host([type='linear']) [part='value'],
   :host([type='linear']) [part='label'] {
-    font-size: 0.5rem;
+    font-size: var(--lyra-size-0-5rem);
   }
   :host([type='linear']) [part='value'] {
     text-anchor: end;
@@ -58,3 +58,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=gauge.styles.js.map

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

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