@aceshooting/lyra-ui 0.1.1 → 0.1.3

package/dist/components/tree/tree.d.ts

@@ -0,0 +1,65 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import './tree-node.js';
+export interface TreeItem {
+    id: string;
+    label: string;
+    children?: TreeItem[];
+    badge?: string | number;
+}
+/**
+ * `<lyra-tree>` — an expand/collapse hierarchy for graph/document navigation.
+ *
+ * Implements the WAI-ARIA treeitem keyboard pattern: a single roving
+ * `tabindex` (tracked here as `activeId`, pushed down to every
+ * `<lyra-tree-node>` — including nested ones, recursively) and
+ * ArrowUp/Down/Right/Left/Home/End/Enter/Space handled by one delegated
+ * `keydown` listener. Native `KeyboardEvent`s are `composed: true` and
+ * bubble across shadow-DOM boundaries, so a press inside a deeply-nested
+ * `<lyra-tree-node>`'s own shadow root still reaches this listener.
+ *
+ * @customElement lyra-tree
+ * @event lyra-node-toggle - `detail: { id, expanded }`, re-emitted from a child `<lyra-tree-node>`.
+ * @event lyra-node-select - `detail: { id }`, re-emitted from a child `<lyra-tree-node>`.
+ * @csspart base
+ * @slot - `<lyra-tree-node>` elements (top-level tree items).
+ */
+export declare class LyraTree extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    data: TreeItem[];
+    private activeId;
+    private get nodeElements();
+    private childrenOf;
+    /** Every currently *visible* (ancestor-expanded) node, top-to-bottom. */
+    private visibleNodeElements;
+    private findItem;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** Unchanged from the existing implementation — by-id reconciliation of top-level items. */
+    private syncNodes;
+    private focusNode;
+    /**
+     * `updated()` only pushes the new `activeId` to *top-level* nodes; a
+     * nested node only receives it once its ancestor chain's own renders
+     * cascade it down (one more pending update per depth level). Cascade
+     * `updateComplete` itself to match: awaiting `<lyra-tree>`'s (or any
+     * `<lyra-tree-node>`'s — see the matching override there) `updateComplete`
+     * now transitively waits for every visible descendant node's own update,
+     * not just this element's. Without this, `focusNode()`'s `.focus()` call
+     * can run while a nested target is still mid-cascade (no `tabindex`
+     * attribute committed yet), and `.focus()` on an element with no
+     * `tabindex` attribute at all is a silent no-op.
+     */
+    protected getUpdateComplete(): Promise<boolean>;
+    private onTreeKeyDown;
+    /** Expand every node in the tree, recursively. (unchanged) */
+    expandAll(): void;
+    /** Collapse every node in the tree. (unchanged) */
+    collapseAll(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tree': LyraTree;
+    }
+}

package/dist/components/tree/tree.js

@@ -0,0 +1,227 @@
+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';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './tree.styles.js';
+import './tree-node.js';
+/**
+ * `<lyra-tree>` — an expand/collapse hierarchy for graph/document navigation.
+ *
+ * Implements the WAI-ARIA treeitem keyboard pattern: a single roving
+ * `tabindex` (tracked here as `activeId`, pushed down to every
+ * `<lyra-tree-node>` — including nested ones, recursively) and
+ * ArrowUp/Down/Right/Left/Home/End/Enter/Space handled by one delegated
+ * `keydown` listener. Native `KeyboardEvent`s are `composed: true` and
+ * bubble across shadow-DOM boundaries, so a press inside a deeply-nested
+ * `<lyra-tree-node>`'s own shadow root still reaches this listener.
+ *
+ * @customElement lyra-tree
+ * @event lyra-node-toggle - `detail: { id, expanded }`, re-emitted from a child `<lyra-tree-node>`.
+ * @event lyra-node-select - `detail: { id }`, re-emitted from a child `<lyra-tree-node>`.
+ * @csspart base
+ * @slot - `<lyra-tree-node>` elements (top-level tree items).
+ */
+export class LyraTree extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.activeId = null;
+        this.onTreeKeyDown = (e) => {
+            const visible = this.visibleNodeElements();
+            if (visible.length === 0)
+                return;
+            const currentIndex = visible.findIndex((n) => n.item.id === this.activeId);
+            const current = currentIndex >= 0 ? visible[currentIndex] : visible[0];
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.focusNode(visible[Math.min(visible.length - 1, currentIndex + 1)]);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.focusNode(visible[Math.max(0, currentIndex - 1)]);
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    this.focusNode(visible[0]);
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    this.focusNode(visible[visible.length - 1]);
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    if (!current.hasChildren)
+                        break;
+                    if (!current.expanded) {
+                        current.expand(); // focus stays put; a 2nd ArrowRight steps into the first child
+                    }
+                    else {
+                        const child = visible[currentIndex + 1];
+                        if (child && child.depth > current.depth)
+                            this.focusNode(child);
+                    }
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    if (current.hasChildren && current.expanded) {
+                        current.collapse();
+                    }
+                    else {
+                        for (let i = currentIndex - 1; i >= 0; i--) {
+                            if (visible[i].depth < current.depth) {
+                                this.focusNode(visible[i]);
+                                break;
+                            }
+                        }
+                    }
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    current.select();
+                    break;
+                default:
+                    return;
+            }
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get nodeElements() {
+        return [...this.querySelectorAll('lyra-tree-node')];
+    }
+    childrenOf(node) {
+        return [...(node.shadowRoot?.querySelectorAll('lyra-tree-node') ?? [])];
+    }
+    /** Every currently *visible* (ancestor-expanded) node, top-to-bottom. */
+    visibleNodeElements() {
+        const acc = [];
+        const walk = (nodes) => {
+            for (const n of nodes) {
+                acc.push(n);
+                if (n.expanded)
+                    walk(this.childrenOf(n));
+            }
+        };
+        walk(this.nodeElements);
+        return acc;
+    }
+    findItem(items, id) {
+        for (const item of items) {
+            if (item.id === id)
+                return item;
+            const nested = item.children && this.findItem(item.children, id);
+            if (nested)
+                return nested;
+        }
+        return undefined;
+    }
+    willUpdate(changed) {
+        if (changed.has('data')) {
+            this.syncNodes();
+            if (!this.activeId || !this.findItem(this.data, this.activeId)) {
+                this.activeId = this.data[0]?.id ?? null;
+            }
+        }
+    }
+    updated(changed) {
+        if (changed.has('activeId') || changed.has('data')) {
+            const count = this.data.length;
+            this.nodeElements.forEach((node, i) => {
+                node.activeId = this.activeId;
+                node.setSize = count;
+                node.posInSet = i + 1;
+            });
+        }
+    }
+    /** Unchanged from the existing implementation — by-id reconciliation of top-level items. */
+    syncNodes() {
+        const existingById = new Map();
+        for (const node of this.nodeElements) {
+            if (node.item)
+                existingById.set(node.item.id, node);
+        }
+        const seen = new Set();
+        let previousSibling = null;
+        for (const item of this.data) {
+            const reused = !seen.has(item.id) ? existingById.get(item.id) : undefined;
+            const node = reused ?? document.createElement('lyra-tree-node');
+            node.item = item;
+            node.depth = 0;
+            seen.add(item.id);
+            const targetPosition = previousSibling
+                ? previousSibling.nextElementSibling
+                : this.firstElementChild;
+            if (targetPosition !== node)
+                this.insertBefore(node, targetPosition);
+            previousSibling = node;
+        }
+        for (const [id, node] of existingById) {
+            if (!seen.has(id))
+                node.remove();
+        }
+    }
+    focusNode(node) {
+        if (!node)
+            return;
+        this.activeId = node.item.id;
+        node.focus();
+    }
+    /**
+     * `updated()` only pushes the new `activeId` to *top-level* nodes; a
+     * nested node only receives it once its ancestor chain's own renders
+     * cascade it down (one more pending update per depth level). Cascade
+     * `updateComplete` itself to match: awaiting `<lyra-tree>`'s (or any
+     * `<lyra-tree-node>`'s — see the matching override there) `updateComplete`
+     * now transitively waits for every visible descendant node's own update,
+     * not just this element's. Without this, `focusNode()`'s `.focus()` call
+     * can run while a nested target is still mid-cascade (no `tabindex`
+     * attribute committed yet), and `.focus()` on an element with no
+     * `tabindex` attribute at all is a silent no-op.
+     */
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await Promise.all(this.nodeElements.map((n) => n.updateComplete));
+        return result;
+    }
+    /** Expand every node in the tree, recursively. (unchanged) */
+    expandAll() {
+        const setAll = (nodes) => {
+            for (const n of nodes) {
+                n.expanded = true;
+                void n.updateComplete.then(() => setAll(this.childrenOf(n)));
+            }
+        };
+        setAll(this.nodeElements);
+    }
+    /** Collapse every node in the tree. (unchanged) */
+    collapseAll() {
+        const setAll = (nodes) => {
+            for (const n of nodes) {
+                setAll(this.childrenOf(n));
+                n.expanded = false;
+            }
+        };
+        setAll(this.nodeElements);
+    }
+    render() {
+        return html `
+      <div part="base" role="tree" @keydown=${this.onTreeKeyDown}>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraTree.prototype, "data", void 0);
+__decorate([
+    state()
+], LyraTree.prototype, "activeId", void 0);
+defineElement('tree', LyraTree);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/tree/tree.styles.js

@@ -0,0 +1,13 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    /* Fallback for a deeply-indented node whose row still overflows despite
+       the [part=label] truncation + padding-inline-start cap in tree-node.ts. */
+    overflow-x: auto;
+  }
+`;

package/dist/internal/form-associated.js

@@ -24,6 +24,16 @@ export function FormAssociated(Base) {
             this.disabled = false;
             this.required = false;
             this._value = '';
+            // What native `defaultValue`/`form.reset()` restores to. Mirrors the
+            // `value` *content attribute* only (see `attributeChangedCallback`
+            // below) — exactly like native `<input>`: setting the `.value` IDL
+            // property (whether from a user typing, a picker commit, or a
+            // consumer's own script) never touches `defaultValue`, only
+            // `setAttribute('value', ...)`/declarative markup does. Using the
+            // property setter itself to capture "whichever assignment happens
+            // first" would wrongly let a user's first-ever edit become permanent
+            // (a required field could never be reset back to blank again).
+            this._defaultValue = '';
             this.internals = this.attachInternals();
         }
         get value() {
@@ -33,12 +43,36 @@ export function FormAssociated(Base) {
             const old = this._value;
             this._value = next ?? '';
             this.internals.setFormValue(this._value);
+            this.updateValidity();
             this.requestUpdate('value', old);
         }
+        attributeChangedCallback(name, old, value) {
+            super.attributeChangedCallback(name, old, value);
+            if (name === 'value') {
+                // Runs after the base class has already applied the attribute to
+                // the `value` property (via the setter above), so `_value` here
+                // reflects the newly-parsed/assigned attribute value.
+                this._defaultValue = this._value;
+            }
+        }
         /** Programmatically set the submitted value (alias kept for clarity). */
         setFormValue(next) {
             this.value = next;
         }
+        /**
+         * Recomputes `ElementInternals`'s validity state. Without this,
+         * `internals` defaults to permanently "valid" and `required` never
+         * blocks form submission — the single highest-leverage correctness gap
+         * the 2026-07-10 cross-repo audit found (forms-core §internal/, High).
+         */
+        updateValidity() {
+            if (this.required && this._value === '') {
+                this.internals.setValidity({ valueMissing: true }, 'Please fill out this field.');
+            }
+            else {
+                this.internals.setValidity({});
+            }
+        }
         checkValidity() {
             return this.internals.checkValidity();
         }
@@ -46,11 +80,25 @@ export function FormAssociated(Base) {
             return this.internals.reportValidity();
         }
         formResetCallback() {
-            this.value = '';
+            // Restore the constructed default value (native `defaultValue`
+            // semantics) — previously this unconditionally blanked the field.
+            this.value = this._defaultValue;
         }
         formDisabledCallback(disabled) {
             this.disabled = disabled;
         }
+        connectedCallback() {
+            super.connectedCallback();
+            // `required` may already be set from an attribute by the time this
+            // runs; reflect validity from the start, not only after the first
+            // `value` write.
+            this.updateValidity();
+        }
+        updated(changed) {
+            super.updated(changed);
+            if (changed.has('required'))
+                this.updateValidity();
+        }
     }
     return FormAssociatedElement;
 }

package/dist/internal/icons.d.ts

@@ -0,0 +1,11 @@
+import { type SVGTemplateResult } from 'lit';
+/** A single right-pointing chevron. Rotate the wrapping element for other directions. */
+export declare function chevronIcon(): SVGTemplateResult;
+/** An "x" close/clear glyph. */
+export declare function closeIcon(): SVGTemplateResult;
+/** A right-pointing play triangle. */
+export declare function playIcon(): SVGTemplateResult;
+/** Two vertical pause bars. */
+export declare function pauseIcon(): SVGTemplateResult;
+/** A calendar/date glyph, for date-input's open-calendar toggle. */
+export declare function calendarIcon(): SVGTemplateResult;

package/dist/internal/icons.js

@@ -0,0 +1,64 @@
+import { svg } from 'lit';
+/**
+ * Shared inline-SVG icon set. Every component in this library previously
+ * rendered functional icons (chevrons, close buttons, play/pause, the
+ * date-input calendar toggle) as literal Unicode/HTML-entity/emoji text
+ * glyphs — font-dependent, non-recolorable beyond plain text color, and
+ * inconsistent in weight/size across the OS/browser font stack a host page
+ * happens to ship (2026-07-10 design review). These replace all of them.
+ *
+ * Every icon shares one 24x24 viewBox and one stroke-width so the whole set
+ * reads as one visual language; each renders at `1em` so it inherits the
+ * caller's own font-size instead of imposing a fixed pixel size. None bakes
+ * in a direction/rotation — callers needing "up"/"left"/"open" etc. rotate
+ * the *wrapping part element* via CSS `transform: rotate(...)`, not the svg.
+ */
+const STROKE_WIDTH = '1.75';
+const VIEW_BOX = '0 0 24 24';
+function icon(paths) {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox=${VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >${paths}</svg>
+  `;
+}
+/** A single right-pointing chevron. Rotate the wrapping element for other directions. */
+export function chevronIcon() {
+    return icon(svg `<polyline points="9 6 15 12 9 18"></polyline>`);
+}
+/** An "x" close/clear glyph. */
+export function closeIcon() {
+    return icon(svg `
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  `);
+}
+/** A right-pointing play triangle. */
+export function playIcon() {
+    return icon(svg `<polygon points="6 4 20 12 6 20 6 4"></polygon>`);
+}
+/** Two vertical pause bars. */
+export function pauseIcon() {
+    return icon(svg `
+    <rect x="6" y="4" width="4" height="16" rx="1"></rect>
+    <rect x="14" y="4" width="4" height="16" rx="1"></rect>
+  `);
+}
+/** A calendar/date glyph, for date-input's open-calendar toggle. */
+export function calendarIcon() {
+    return icon(svg `
+    <rect x="3" y="5" width="18" height="16" rx="2"></rect>
+    <line x1="16" y1="3" x2="16" y2="7"></line>
+    <line x1="8" y1="3" x2="8" y2="7"></line>
+    <line x1="3" y1="10" x2="21" y2="10"></line>
+  `);
+}

package/dist/internal/tokens.styles.js

@@ -6,7 +6,7 @@ export const tokens = css `
     --lyra-color-surface: var(--wa-color-surface-default, #fff);
     --lyra-color-text: var(--wa-color-text-normal, #1a1a1a);
     --lyra-color-text-quiet: var(--wa-color-text-quiet, #6b7280);
-    --lyra-color-border: var(--wa-color-neutral-fill-normal, #d4d4d8);
+    --lyra-color-border: var(--wa-color-neutral-fill-normal, #8a8a90);
     --lyra-color-brand: var(--wa-color-brand-fill-loud, #0969da);
     --lyra-color-brand-quiet: var(--wa-color-brand-fill-quiet, #ddf4ff);
     --lyra-color-success: var(--wa-color-success-fill-loud, #1a7f37);
@@ -20,10 +20,50 @@ export const tokens = css `
     --lyra-shadow: var(--wa-shadow-m, 0 2px 8px rgb(0 0 0 / 0.15));
     --lyra-font: var(--wa-font-family-body, system-ui, sans-serif);
 
+    /* Motion — every component that animates (popovers, gauge fill, toast)
+       reads from these two instead of hand-rolling its own duration/easing,
+       so the library has one consistent rhythm (2026-07-10 design review). */
+    --lyra-transition-fast: var(--wa-transition-fast, 120ms ease-out);
+    --lyra-transition-base: var(--wa-transition-normal, 180ms ease-out);
+
+    /* Disabled state — one opacity value for every disabled control,
+       replacing three previously-independent hardcoded values (0.5/0.4/0.35). */
+    --lyra-opacity-disabled: var(--wa-opacity-disabled, 0.5);
+
+    /* Focus ring — every :focus-visible rule in the library should reference
+       these three instead of hardcoding its own width/color/offset. */
+    --lyra-focus-ring-width: 2px;
+    --lyra-focus-ring-color: var(--lyra-color-brand);
+    --lyra-focus-ring-offset: 2px;
+
+    /* Minimum tappable box for an icon-only button (close/dismiss/nav
+       controls). Visual icon size is unaffected; components pad out to this
+       via min-inline-size/min-block-size, not by growing the glyph itself. */
+    --lyra-icon-button-size: 2.5rem;
+
     font-family: var(--lyra-font);
     color: var(--lyra-color-text);
     box-sizing: border-box;
   }
+
+  /* Standalone (no Web Awesome theme) dark-mode fallback. A real --wa-* value
+     from a consumer's theme always wins — this only changes what a bare
+     lyra-ui component renders when dropped, unstyled, onto a dark host page
+     (2026-07-10 design review: previously zero dark-mode adaptation existed
+     in the pure-fallback case). */
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --lyra-color-surface: var(--wa-color-surface-default, #1a1a1a);
+      --lyra-color-text: var(--wa-color-text-normal, #f2f2f2);
+      --lyra-color-text-quiet: var(--wa-color-text-quiet, #9aa1ac);
+      --lyra-color-border: var(--wa-color-neutral-fill-normal, #4a4a52);
+      --lyra-color-brand: var(--wa-color-brand-fill-loud, #4d9fef);
+      --lyra-color-brand-quiet: var(--wa-color-brand-fill-quiet, #163650);
+      --lyra-color-success: var(--wa-color-success-fill-loud, #3fb950);
+      --lyra-color-warning: var(--wa-color-warning-fill-loud, #d29922);
+      --lyra-color-danger: var(--wa-color-danger-fill-loud, #f85149);
+    }
+  }
   :host([hidden]) {
     display: none !important;
   }

package/dist/lyra.d.ts

@@ -6,6 +6,32 @@ import './components/combobox/option.js';
 import './components/date-picker/date-picker.js';
 import './components/date-picker/date-input.js';
 import './components/flag/flag.js';
+import './components/empty/empty.js';
+import './components/skeleton/skeleton.js';
+import './components/stat/stat.js';
+import './components/table/table.js';
+import './components/gauge/gauge.js';
+import './components/export-button/export-button.js';
+import './components/split/split.js';
+import './components/time-range/time-range.js';
+import './components/playback/playback.js';
+import './components/heatmap/heatmap.js';
+import './components/graph/graph.js';
+import './components/tree/tree.js';
+import './components/tree/tree-node.js';
+import './components/chart/chart.js';
+import './components/chart/bar-chart.js';
+import './components/chart/line-chart.js';
+import './components/chart/pie-chart.js';
+import './components/chart/doughnut-chart.js';
+import './components/chart/scatter-chart.js';
+import './components/chart/bubble-chart.js';
+import './components/chart/radar-chart.js';
+import './components/chart/polar-area-chart.js';
+import './components/chart/box-plot.js';
+import './components/chart/histogram.js';
+import './components/map/map.js';
+import './components/file-input/file-input.js';
 export { LyraSparkline } from './components/sparkline/sparkline.js';
 export { LyraToast } from './components/toast/toast.js';
 export type { ToastPlacement, ToastCreateOptions } from './components/toast/toast.js';
@@ -21,6 +47,47 @@ export type { DateRange } from './components/date-picker/date-picker.js';
 export { LyraDateInput } from './components/date-picker/date-input.js';
 export { LyraFlag } from './components/flag/flag.js';
 export { LANGUAGE_TO_COUNTRY, languageToCountry } from './components/flag/language-map.js';
+export { LyraEmpty } from './components/empty/empty.js';
+export { LyraSkeleton } from './components/skeleton/skeleton.js';
+export type { SkeletonVariant, SkeletonEffect } from './components/skeleton/skeleton.js';
+export { LyraStat } from './components/stat/stat.js';
+export type { StatVariant } from './components/stat/stat.js';
+export { LyraTable } from './components/table/table.js';
+export type { TableColumn } from './components/table/table.js';
+export { LyraGauge } from './components/gauge/gauge.js';
+export type { GaugeType } from './components/gauge/gauge.js';
+export { LyraExportButton } from './components/export-button/export-button.js';
+export type { ExportFormat } from './components/export-button/export-button.js';
+export { escapeCsvField, buildCsv, downloadBlob } from './components/export-button/csv.js';
+export type { CsvColumn } from './components/export-button/csv.js';
+export { LyraSplit } from './components/split/split.js';
+export { LyraTimeRange } from './components/time-range/time-range.js';
+export { LyraPlayback } from './components/playback/playback.js';
+export { LyraHeatmap } from './components/heatmap/heatmap.js';
+export { linearAlpha, sqrtStep } from './components/heatmap/heatmap-scale.js';
+export { LyraGraph } from './components/graph/graph.js';
+export type { GraphNode, GraphLink } from './components/graph/graph.js';
+export { LyraTree } from './components/tree/tree.js';
+export type { TreeItem } from './components/tree/tree.js';
+export { LyraTreeNode } from './components/tree/tree-node.js';
+export { LyraChart } from './components/chart/chart.js';
+export type { Series, LyraChartType } from './components/chart/chart.js';
+export { LyraBarChart } from './components/chart/bar-chart.js';
+export { LyraLineChart } from './components/chart/line-chart.js';
+export { LyraPieChart } from './components/chart/pie-chart.js';
+export { LyraDoughnutChart } from './components/chart/doughnut-chart.js';
+export { LyraScatterChart } from './components/chart/scatter-chart.js';
+export { LyraBubbleChart } from './components/chart/bubble-chart.js';
+export { LyraRadarChart } from './components/chart/radar-chart.js';
+export { LyraPolarAreaChart } from './components/chart/polar-area-chart.js';
+export { LyraBoxPlot } from './components/chart/box-plot.js';
+export type { BoxPlotSeries, BoxPlotPoint } from './components/chart/box-plot.js';
+export { LyraHistogram } from './components/chart/histogram.js';
+export { binValues } from './components/chart/histogram-bin.js';
+export type { HistogramBucket } from './components/chart/histogram-bin.js';
+export { LyraMap } from './components/map/map.js';
+export type { LegendEntry, ChoroplethLayer } from './components/map/map.js';
+export { LyraFileInput } from './components/file-input/file-input.js';
 export { LyraElement } from './internal/lyra-element.js';
 export { FormAssociated } from './internal/form-associated.js';
 export { LYRA_PREFIX, tag, defineElement } from './internal/prefix.js';