@aceshooting/lyra-ui 0.1.2 → 0.1.4

package/dist/components/chart/polar-area-chart.js

@@ -6,9 +6,22 @@ import { defineElement } from '../../internal/prefix.js';
  * @customElement lyra-polar-area-chart
  */
 export class LyraPolarAreaChart extends LyraChart {
-    constructor() {
-        super(...arguments);
-        this.type = 'polarArea';
-    }
 }
+// `type` is locked read-only rather than a settable class field with just a
+// default value — `LyraChart` declares it as a plain (decorator-managed)
+// class field, and TypeScript forbids a subclass from re-declaring a base
+// field as a getter/setter pair via ordinary class syntax (TS2611) — so the
+// accessor pair is installed directly on the prototype instead, which is
+// runtime-equivalent (same shadowing semantics as a class-syntax override)
+// without tripping that check.
+Object.defineProperty(LyraPolarAreaChart.prototype, 'type', {
+    configurable: true,
+    enumerable: true,
+    get() {
+        return 'polarArea';
+    },
+    set(_v) {
+        /* locked to 'polarArea'; direct writes are ignored */
+    },
+});
 defineElement('polar-area-chart', LyraPolarAreaChart);

package/dist/components/chart/radar-chart.d.ts

@@ -1,12 +1,11 @@
 import { LyraChart } from './chart.js';
-import type { LyraChartType } from './chart.js';
 /**
  * `<lyra-radar-chart>` — `<lyra-chart>` with `type` locked to `"radar"`.
  *
  * @customElement lyra-radar-chart
  */
 export declare class LyraRadarChart extends LyraChart {
-    type: LyraChartType;
+    type: 'radar';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/chart/radar-chart.js

@@ -6,9 +6,22 @@ import { defineElement } from '../../internal/prefix.js';
  * @customElement lyra-radar-chart
  */
 export class LyraRadarChart extends LyraChart {
-    constructor() {
-        super(...arguments);
-        this.type = 'radar';
-    }
 }
+// `type` is locked read-only rather than a settable class field with just a
+// default value — `LyraChart` declares it as a plain (decorator-managed)
+// class field, and TypeScript forbids a subclass from re-declaring a base
+// field as a getter/setter pair via ordinary class syntax (TS2611) — so the
+// accessor pair is installed directly on the prototype instead, which is
+// runtime-equivalent (same shadowing semantics as a class-syntax override)
+// without tripping that check.
+Object.defineProperty(LyraRadarChart.prototype, 'type', {
+    configurable: true,
+    enumerable: true,
+    get() {
+        return 'radar';
+    },
+    set(_v) {
+        /* locked to 'radar'; direct writes are ignored */
+    },
+});
 defineElement('radar-chart', LyraRadarChart);

package/dist/components/chart/scatter-chart.js

@@ -7,9 +7,22 @@ import { defineElement } from '../../internal/prefix.js';
  * @customElement lyra-scatter-chart
  */
 export class LyraScatterChart extends LyraChart {
-    constructor() {
-        super(...arguments);
-        this.type = 'scatter';
-    }
 }
+// `type` is locked read-only rather than a settable class field with just a
+// default value — `LyraChart` declares it as a plain (decorator-managed)
+// class field, and TypeScript forbids a subclass from re-declaring a base
+// field as a getter/setter pair via ordinary class syntax (TS2611) — so the
+// accessor pair is installed directly on the prototype instead, which is
+// runtime-equivalent (same shadowing semantics as a class-syntax override)
+// without tripping that check.
+Object.defineProperty(LyraScatterChart.prototype, 'type', {
+    configurable: true,
+    enumerable: true,
+    get() {
+        return 'scatter';
+    },
+    set(_v) {
+        /* locked to 'scatter'; direct writes are ignored */
+    },
+});
 defineElement('scatter-chart', LyraScatterChart);

package/dist/components/combobox/combobox.js

@@ -99,10 +99,9 @@ export class LyraCombobox extends LyraElement {
                 this._defaultCaptured = true;
                 // Seed the initial selection — and the reset default — from
                 // declarative `<lyra-option selected>` markup — mirrors native
-                // `<select><option selected>` — the exact case the audit found
-                // silently ignored (forms-core §combobox, Medium). This is the only
-                // place `_defaultSelected` is set; picking an option later (the
-                // `value` setter) never redefines the reset default, so an
+                // `<select><option selected>`, which was previously silently ignored.
+                // This is the only place `_defaultSelected` is set; picking an option
+                // later (the `value` setter) never redefines the reset default, so an
                 // initially-unselected combobox always resets back to empty even
                 // after the user has picked something.
                 const declared = this.options.filter((o) => o.selected).map((o) => o.value);

package/dist/components/combobox/combobox.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Multiple: Story;

package/dist/components/combobox/combobox.stories.js

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Combobox',
+    component: 'lyra-combobox',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-combobox label="Fruit" placeholder="Pick one…" with-clear style="max-width: 20rem">
+      <lyra-option value="a">Apple</lyra-option>
+      <lyra-option value="b">Banana</lyra-option>
+      <lyra-option value="c">Cherry</lyra-option>
+      <lyra-option value="d">Date</lyra-option>
+    </lyra-combobox>
+  `,
+};
+export const Multiple = {
+    render: () => html `
+    <lyra-combobox label="Fruit" multiple with-clear style="max-width: 20rem">
+      <lyra-option value="a">Apple</lyra-option>
+      <lyra-option value="b">Banana</lyra-option>
+      <lyra-option value="c">Cherry</lyra-option>
+      <lyra-option value="d">Date</lyra-option>
+    </lyra-combobox>
+  `,
+};

package/dist/components/combobox/combobox.styles.js

@@ -89,8 +89,8 @@ export const styles = css `
     color: var(--lyra-color-text-quiet);
     padding: var(--lyra-space-xs);
     /* Real touch target in *both* dimensions (WCAG 2.2 SC 2.5.8 needs
-       24x24 CSS px, not just height — a design-review fix that only set
-       min-block-size left these buttons ~21px wide). icon-button-size is
+       24x24 CSS px, not just height — min-block-size alone left these
+       buttons ~21px wide). icon-button-size is
        the ceiling, but never grow past what the [part=combobox] row's own
        2.5rem min-block-size has room for once its own block padding is
        subtracted. */

package/dist/components/date-picker/date-input.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/date-picker/date-input.stories.js

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+const meta = {
+    title: 'DatePicker/WithInput',
+    component: 'lyra-date-input',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-date-input label="Start date" with-clear style="max-width: 16rem"></lyra-date-input>
+  `,
+};

package/dist/components/date-picker/date-input.styles.js

@@ -60,8 +60,8 @@ export const styles = css `
     color: var(--lyra-color-text-quiet);
     padding: var(--lyra-space-xs);
     /* Real touch target in *both* dimensions (WCAG 2.2 SC 2.5.8 needs
-       24x24 CSS px, not just height — a design-review fix that only set
-       min-block-size left these buttons 24px tall but narrower than that).
+       24x24 CSS px, not just height — min-block-size alone left these
+       buttons 24px tall but narrower than that).
        The row has no explicit min-block-size of its own (unlike combobox's
        [part=combobox]), so it can grow to fit the full touch target. */
     min-inline-size: var(--lyra-icon-button-size);

package/dist/components/date-picker/date-picker.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Single: Story;
+export declare const Range: Story;

package/dist/components/date-picker/date-picker.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+const meta = {
+    title: 'DatePicker/Inline',
+    component: 'lyra-date-picker',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Single = {
+    render: () => html `<lyra-date-picker mode="single"></lyra-date-picker>`,
+};
+export const Range = {
+    render: () => html `<lyra-date-picker mode="range" months="2"></lyra-date-picker>`,
+};

package/dist/components/empty/empty.d.ts

@@ -2,7 +2,7 @@ import { type TemplateResult } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 /**
  * `<lyra-empty>` — a generic empty/no-data state. First-party invention (no
- * Web Awesome equivalent); fills the gap identified across ~30 surveyed repos.
+ * Web Awesome equivalent); fills a gap common to dashboard-style apps.
  *
  * @customElement lyra-empty
  * @slot - Custom icon or illustration (defaults to none).

package/dist/components/empty/empty.js

@@ -11,7 +11,7 @@ import { defineElement } from '../../internal/prefix.js';
 import { styles } from './empty.styles.js';
 /**
  * `<lyra-empty>` — a generic empty/no-data state. First-party invention (no
- * Web Awesome equivalent); fills the gap identified across ~30 surveyed repos.
+ * Web Awesome equivalent); fills a gap common to dashboard-style apps.
  *
  * @customElement lyra-empty
  * @slot - Custom icon or illustration (defaults to none).

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

@@ -4,8 +4,8 @@ import { type CsvColumn } from './csv.js';
 export type ExportFormat = 'csv' | 'json';
 /**
  * `<lyra-export-button>` — a CSV/JSON download button, single-format or a
- * format-choice menu. First-party invention; consolidates ad-hoc "export CSV"
- * buttons duplicated across surveyed repos.
+ * format-choice menu. First-party invention; consolidates the ad-hoc
+ * "export CSV" button pattern common across dashboard UIs.
  *
  * @customElement lyra-export-button
  * @event lyra-export - `detail: { format }`, cancelable — call `preventDefault()`

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

@@ -13,8 +13,8 @@ import { buildCsv, downloadBlob } from './csv.js';
 import { styles } from './export-button.styles.js';
 /**
  * `<lyra-export-button>` — a CSV/JSON download button, single-format or a
- * format-choice menu. First-party invention; consolidates ad-hoc "export CSV"
- * buttons duplicated across surveyed repos.
+ * format-choice menu. First-party invention; consolidates the ad-hoc
+ * "export CSV" button pattern common across dashboard UIs.
  *
  * @customElement lyra-export-button
  * @event lyra-export - `detail: { format }`, cancelable — call `preventDefault()`

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

@@ -2,8 +2,7 @@
  * Parses a native-`accept`-style string (`".csv,.xlsx"`, `"text/csv"`,
  * `"image/*"`, or any mix, comma-separated) and reports whether `file`
  * matches it — the same three forms the browser's own file picker accepts,
- * now also enforced on the drag-drop path (2026-07-10 audit,
- * "map-file-input" §lyra-file-input, High: previously `accept` only
+ * now also enforced on the drag-drop path (previously `accept` only
  * constrained the native picker dialog and had no effect on drop).
  *
  * `file` may be a `DataTransferItem` cast as `File` (the dragenter-preview

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

@@ -2,8 +2,7 @@
  * Parses a native-`accept`-style string (`".csv,.xlsx"`, `"text/csv"`,
  * `"image/*"`, or any mix, comma-separated) and reports whether `file`
  * matches it — the same three forms the browser's own file picker accepts,
- * now also enforced on the drag-drop path (2026-07-10 audit,
- * "map-file-input" §lyra-file-input, High: previously `accept` only
+ * now also enforced on the drag-drop path (previously `accept` only
  * constrained the native picker dialog and had no effect on drop).
  *
  * `file` may be a `DataTransferItem` cast as `File` (the dragenter-preview

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

@@ -6,8 +6,8 @@ export interface RejectedFile {
 }
 /**
  * `<lyra-file-input>` — a drag-drop + click-to-browse file dropzone. Emits
- * raw `File[]`; parsing (CSV/XLSX/etc.) is left to the host, matching every
- * surveyed upload seed (all of which upload raw files to a backend).
+ * raw `File[]`; parsing (CSV/XLSX/etc.) is left to the host, since that's
+ * where files ultimately get uploaded and processed anyway.
  *
  * @customElement lyra-file-input
  * @slot - Custom drop-zone content, overrides the `label` attribute.

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

@@ -12,8 +12,8 @@ import { styles } from './file-input.styles.js';
 import { matchesAccept } from './accept.js';
 /**
  * `<lyra-file-input>` — a drag-drop + click-to-browse file dropzone. Emits
- * raw `File[]`; parsing (CSV/XLSX/etc.) is left to the host, matching every
- * surveyed upload seed (all of which upload raw files to a backend).
+ * raw `File[]`; parsing (CSV/XLSX/etc.) is left to the host, since that's
+ * where files ultimately get uploaded and processed anyway.
  *
  * @customElement lyra-file-input
  * @slot - Custom drop-zone content, overrides the `label` attribute.

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Gallery: Story;

package/dist/components/flag/flag.stories.js

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Flag',
+    component: 'lyra-flag',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Gallery = {
+    render: () => html `
+    <div style="display:flex; gap:1rem; align-items:center;">
+      <lyra-flag country="fr" label="France" style="height: 1.5rem"></lyra-flag>
+      <lyra-flag language="en" label="English" style="height: 1.5rem"></lyra-flag>
+      <lyra-flag language="de" label="German" round style="height: 1.5rem"></lyra-flag>
+      <lyra-flag country="jp" label="Japan" round style="height: 1.5rem"></lyra-flag>
+    </div>
+  `,
+};

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

@@ -10,7 +10,7 @@ export const styles = css `
   [part='image'] {
     display: block;
     block-size: 100%;
-    inline-size: auto;
+    inline-size: 100%;
     border-radius: var(--lyra-flag-radius, 2px);
     box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08) inset;
     object-fit: cover;

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

@@ -3,7 +3,7 @@ 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 was found across the surveyed repos.
+ * generic gauge widget exists in Web Awesome.
  *
  * @customElement lyra-gauge
  * @csspart base, track, fill, value, label

package/dist/components/gauge/gauge.js

@@ -41,7 +41,7 @@ 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 was found across the surveyed repos.
+ * generic gauge widget exists in Web Awesome.
  *
  * @customElement lyra-gauge
  * @csspart base, track, fill, value, label

package/dist/components/graph/graph.d.ts

@@ -30,6 +30,8 @@ export declare class LyraGraph extends LyraElement {
     height: number;
     chargeStrength: number;
     linkDistance: number;
+    minZoom: number;
+    maxZoom: number;
     /** True until the lazy-loaded d3 peer dependencies have settled (success or failure). */
     private loading;
     private simNodes;
@@ -37,25 +39,52 @@ export declare class LyraGraph extends LyraElement {
     /** Current pan/zoom transform (SVG `transform` attribute syntax), driven by d3-zoom. */
     private transform;
     private simulation?;
+    /** The live charge/link force objects, kept so chargeStrength/linkDistance
+     *  changes can retune them in place (see updated()) instead of requiring a
+     *  full rebuildSimulation(). */
+    private chargeForce?;
+    private linkForce?;
     private d3?;
     /** The `<svg>` currently wired up with d3-zoom (guards a one-time bind). */
     private zoomedEl?;
     /** Node `<circle>`s already wired up with d3-drag; cleared on every simulation rebuild
      *  so DOM elements Lit reuses across a rebuild get rebound to their fresh datum. */
     private boundNodeEls;
+    /** Node/link/label DOM elements, index-aligned with simNodes/simLinks, cached
+     *  once per structural rebuild and written to directly by onTick() — this is
+     *  what lets ticks update positions without going through Lit's reactive
+     *  simNodes/simLinks properties (see rebuildSimulation()'s doc comment). */
+    private nodeEls;
+    private nodeLabelEls;
+    private linkEls;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private nodeRadius;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * Imperatively wires up d3-zoom (pan/zoom on the `<svg>`) and d3-drag
-     * (per-node drag) against the just-rendered DOM. Runs after every render:
-     * binding the `<svg>` is a one-time no-op guard (`zoomedEl`), and node
-     * `<circle>`s are skipped once bound (`boundNodeEls`) — a WeakSet reset on
-     * every `rebuildSimulation()` so DOM nodes Lit reuses across a rebuild get
+     * (per-node drag) against the just-rendered DOM. The zoom bind is a
+     * one-time no-op guard (`zoomedEl`); the node-drag bind + node/link/label
+     * element caching for `onTick()` only run when `structural` is true (a
+     * fresh structural render just happened), not on every call — otherwise
+     * this would re-scan the DOM via `querySelectorAll` on every Lit update,
+     * which used to include every single simulation tick. `<circle>`s already
+     * bound are skipped (`boundNodeEls`) — a WeakSet reset on every
+     * `rebuildSimulation()` so DOM nodes Lit reuses across a rebuild get
      * rebound against their new datum instead of a stale one.
      */
     private applyInteractions;
+    /**
+     * Runs on every d3-force simulation tick (up to ~300 while a graph settles
+     * on load, continuously while a node is being dragged via
+     * `alphaTarget(0.3)`). Writes positions straight to the already-rendered
+     * DOM via direct d3-selection `.attr()` calls instead of reassigning the
+     * reactive `simNodes`/`simLinks` properties, which would force a full Lit
+     * re-render (and, before the `structural` gate above, an unconditional
+     * `querySelectorAll` scan) on every single frame.
+     */
+    private onTick;
     private rebuildSimulation;
     private onNodeClick;
     private onLinkClick;