@aceshooting/lyra-ui 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -6
- package/custom-elements.json +12015 -0
- package/dist/components/chart/bar-chart.d.ts +14 -0
- package/dist/components/chart/bar-chart.js +14 -0
- package/dist/components/chart/box-plot.d.ts +46 -0
- package/dist/components/chart/box-plot.js +145 -0
- package/dist/components/chart/box-plot.styles.d.ts +1 -0
- package/dist/components/chart/box-plot.styles.js +22 -0
- package/dist/components/chart/bubble-chart.d.ts +19 -0
- package/dist/components/chart/bubble-chart.js +18 -0
- package/dist/components/chart/chart-loader.d.ts +8 -0
- package/dist/components/chart/chart-loader.js +26 -0
- package/dist/components/chart/chart.d.ts +91 -0
- package/dist/components/chart/chart.js +275 -0
- package/dist/components/chart/chart.styles.d.ts +1 -0
- package/dist/components/chart/chart.styles.js +33 -0
- package/dist/components/chart/doughnut-chart.d.ts +15 -0
- package/dist/components/chart/doughnut-chart.js +14 -0
- package/dist/components/chart/histogram-bin.d.ts +6 -0
- package/dist/components/chart/histogram-bin.js +19 -0
- package/dist/components/chart/histogram.d.ts +20 -0
- package/dist/components/chart/histogram.js +70 -0
- package/dist/components/chart/histogram.styles.d.ts +1 -0
- package/dist/components/chart/histogram.styles.js +1 -0
- package/dist/components/chart/line-chart.d.ts +14 -0
- package/dist/components/chart/line-chart.js +14 -0
- package/dist/components/chart/pie-chart.d.ts +16 -0
- package/dist/components/chart/pie-chart.js +15 -0
- package/dist/components/chart/polar-area-chart.d.ts +15 -0
- package/dist/components/chart/polar-area-chart.js +14 -0
- package/dist/components/chart/radar-chart.d.ts +15 -0
- package/dist/components/chart/radar-chart.js +14 -0
- package/dist/components/chart/scatter-chart.d.ts +15 -0
- package/dist/components/chart/scatter-chart.js +15 -0
- package/dist/components/combobox/combobox.d.ts +16 -0
- package/dist/components/combobox/combobox.js +113 -6
- package/dist/components/combobox/combobox.styles.js +68 -7
- package/dist/components/combobox/option.d.ts +2 -2
- package/dist/components/combobox/option.js +11 -7
- package/dist/components/date-picker/date-input.d.ts +12 -1
- package/dist/components/date-picker/date-input.js +68 -6
- package/dist/components/date-picker/date-input.styles.js +58 -6
- package/dist/components/date-picker/date-picker.js +5 -2
- package/dist/components/date-picker/date-picker.styles.js +9 -2
- package/dist/components/empty/empty.d.ts +1 -0
- package/dist/components/empty/empty.js +14 -2
- package/dist/components/export-button/csv.d.ts +10 -0
- package/dist/components/export-button/csv.js +28 -0
- package/dist/components/export-button/export-button.d.ts +41 -0
- package/dist/components/export-button/export-button.js +151 -0
- package/dist/components/export-button/export-button.styles.d.ts +1 -0
- package/dist/components/export-button/export-button.styles.js +79 -0
- package/dist/components/file-input/accept.d.ts +14 -0
- package/dist/components/file-input/accept.js +30 -0
- package/dist/components/file-input/file-input.d.ts +47 -0
- package/dist/components/file-input/file-input.js +182 -0
- package/dist/components/file-input/file-input.styles.d.ts +1 -0
- package/dist/components/file-input/file-input.styles.js +44 -0
- package/dist/components/flag/flag.d.ts +4 -0
- package/dist/components/flag/flag.js +24 -1
- package/dist/components/flag/flag.styles.js +1 -1
- package/dist/components/gauge/gauge.d.ts +29 -0
- package/dist/components/gauge/gauge.js +133 -0
- package/dist/components/gauge/gauge.styles.d.ts +1 -0
- package/dist/components/gauge/gauge.styles.js +60 -0
- package/dist/components/graph/graph.d.ts +68 -0
- package/dist/components/graph/graph.js +276 -0
- package/dist/components/graph/graph.styles.d.ts +1 -0
- package/dist/components/graph/graph.styles.js +34 -0
- package/dist/components/heatmap/heatmap-scale.d.ts +8 -0
- package/dist/components/heatmap/heatmap-scale.js +17 -0
- package/dist/components/heatmap/heatmap.d.ts +66 -0
- package/dist/components/heatmap/heatmap.js +252 -0
- package/dist/components/heatmap/heatmap.styles.d.ts +1 -0
- package/dist/components/heatmap/heatmap.styles.js +39 -0
- package/dist/components/map/map-loader.d.ts +8 -0
- package/dist/components/map/map-loader.js +17 -0
- package/dist/components/map/map.d.ts +49 -0
- package/dist/components/map/map.js +189 -0
- package/dist/components/map/map.styles.d.ts +1 -0
- package/dist/components/map/map.styles.js +48 -0
- package/dist/components/playback/playback.d.ts +51 -0
- package/dist/components/playback/playback.js +146 -0
- package/dist/components/playback/playback.styles.d.ts +1 -0
- package/dist/components/playback/playback.styles.js +40 -0
- package/dist/components/split/split.d.ts +41 -0
- package/dist/components/split/split.js +171 -0
- package/dist/components/split/split.styles.d.ts +1 -0
- package/dist/components/split/split.styles.js +51 -0
- package/dist/components/stat/stat.d.ts +9 -0
- package/dist/components/stat/stat.js +52 -7
- package/dist/components/stat/stat.styles.js +15 -5
- package/dist/components/table/table.d.ts +18 -6
- package/dist/components/table/table.js +76 -24
- package/dist/components/table/table.styles.js +32 -0
- package/dist/components/time-range/time-range.d.ts +40 -0
- package/dist/components/time-range/time-range.js +219 -0
- package/dist/components/time-range/time-range.styles.d.ts +1 -0
- package/dist/components/time-range/time-range.styles.js +78 -0
- package/dist/components/toast/toast-item.js +10 -2
- package/dist/components/toast/toast-item.styles.js +13 -4
- package/dist/components/toast/toast.styles.js +0 -1
- package/dist/components/tree/tree-node.d.ts +50 -0
- package/dist/components/tree/tree-node.js +196 -0
- package/dist/components/tree/tree.d.ts +65 -0
- package/dist/components/tree/tree.js +227 -0
- package/dist/components/tree/tree.styles.d.ts +1 -0
- package/dist/components/tree/tree.styles.js +13 -0
- package/dist/internal/form-associated.js +49 -1
- package/dist/internal/icons.d.ts +11 -0
- package/dist/internal/icons.js +64 -0
- package/dist/internal/tokens.styles.js +41 -1
- package/dist/lyra.d.ts +67 -0
- package/dist/lyra.js +55 -0
- package/llms-full.txt +1425 -0
- package/llms.txt +47 -0
- package/package.json +53 -4
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Lyra UI
|
|
2
2
|
|
|
3
|
+
[](https://github.com/aceshooting/lyra-ui/actions/workflows/ci.yml)
|
|
4
|
+
|
|
3
5
|
Free, clean-room [Lit](https://lit.dev) web components — a companion to
|
|
4
6
|
[Web Awesome](https://webawesome.com) that provides open-source equivalents of several
|
|
5
7
|
Web Awesome **Pro** components, plus a few extras. Token-compatible with Web Awesome, so
|
|
@@ -15,6 +17,12 @@ the components look native inside a WA app, and fully usable standalone.
|
|
|
15
17
|
npm install @aceshooting/lyra-ui
|
|
16
18
|
# peer: Lit is bundled; Floating UI ships with the positioned components
|
|
17
19
|
# optional peer: @aceshooting/lyra-flags, only needed for <lyra-flag>
|
|
20
|
+
# optional peer: d3-force, d3-drag, d3-zoom, d3-selection, only needed for <lyra-graph>
|
|
21
|
+
# optional peer: chart.js, chartjs-plugin-zoom, only needed for the <lyra-*-chart>/<lyra-histogram> family
|
|
22
|
+
# optional peer: @sgratzl/chartjs-chart-boxplot, only needed for <lyra-box-plot>
|
|
23
|
+
# optional peer: maplibre-gl, only needed for <lyra-map> — also import
|
|
24
|
+
# `maplibre-gl/dist/maplibre-gl.css` yourself once, since lyra-map only
|
|
25
|
+
# ships its own legend/popup chrome CSS, not maplibre-gl's own stylesheet
|
|
18
26
|
```
|
|
19
27
|
|
|
20
28
|
## Usage
|
|
@@ -46,6 +54,14 @@ import { toast } from '@aceshooting/lyra-ui';
|
|
|
46
54
|
toast({ message: 'Saved', variant: 'success' });
|
|
47
55
|
```
|
|
48
56
|
|
|
57
|
+
## For AI agents / LLMs
|
|
58
|
+
|
|
59
|
+
- **Using this library from a consuming project?** See [`llms.txt`](./llms.txt) (short index) and
|
|
60
|
+
[`llms-full.txt`](./llms-full.txt) (full API reference) in this package directory — a
|
|
61
|
+
consumer-facing reference for coding assistants integrating `@aceshooting/lyra-ui`.
|
|
62
|
+
- **Contributing to this repo itself?** See [`../../AGENTS.md`](../../AGENTS.md) instead — that's a
|
|
63
|
+
contributor guide for agents working *on* lyra-ui, not the same document as the two above.
|
|
64
|
+
|
|
49
65
|
## Migrating from Web Awesome Pro
|
|
50
66
|
|
|
51
67
|
Everything a consumer touches is mirrored 1:1 — only the prefix differs:
|
|
@@ -62,7 +78,12 @@ WA app they inherit your theme automatically; standalone, they use sensible defa
|
|
|
62
78
|
|
|
63
79
|
## Components
|
|
64
80
|
|
|
65
|
-
|
|
81
|
+
All 34 tags below have shipped across five incremental releases (v1, then Tier 1, Tier 2,
|
|
82
|
+
Tier 3, then a map/file-input batch). Grouped by the release that introduced each — see
|
|
83
|
+
[`../../docs/superpowers/specs/2026-07-10-lyra-ui-post-audit-roadmap.md`](../../docs/superpowers/specs/2026-07-10-lyra-ui-post-audit-roadmap.md)
|
|
84
|
+
for what's planned next.
|
|
85
|
+
|
|
86
|
+
**v1 — form controls, toasts, sparkline**
|
|
66
87
|
|
|
67
88
|
| Component | Mirrors | Notes |
|
|
68
89
|
|-----------|---------|-------|
|
|
@@ -73,12 +94,62 @@ WA app they inherit your theme automatically; standalone, they use sensible defa
|
|
|
73
94
|
| `<lyra-sparkline>` | `wa-sparkline` | Zero-dependency inline SVG |
|
|
74
95
|
| `<lyra-flag>` | — (extra) | Country/language flags for i18n pickers — needs the optional peer `@aceshooting/lyra-flags` |
|
|
75
96
|
|
|
76
|
-
**
|
|
97
|
+
**Tier 1 — dashboard atoms**
|
|
98
|
+
|
|
99
|
+
| Component | Mirrors | Notes |
|
|
100
|
+
|-----------|---------|-------|
|
|
101
|
+
| `<lyra-empty>` | — (extra) | Generic empty/no-data state |
|
|
102
|
+
| `<lyra-skeleton>` | — (extra) | Loading placeholder (pulse/sheen) |
|
|
103
|
+
| `<lyra-stat>` | — (extra) | KPI/stat card with trend pill |
|
|
104
|
+
| `<lyra-table>` | — (extra) | Presentational, sort/select-aware data table |
|
|
105
|
+
| `<lyra-gauge>` | — (extra) | Radial or linear meter |
|
|
106
|
+
| `<lyra-export-button>` | — (extra) | CSV/JSON download button, injection-safe CSV export |
|
|
107
|
+
| `<lyra-split>` | — (extra) | Resizable panel layout |
|
|
108
|
+
|
|
109
|
+
**Tier 2 — temporal & graph**
|
|
110
|
+
|
|
111
|
+
| Component | Mirrors | Notes |
|
|
112
|
+
|-----------|---------|-------|
|
|
113
|
+
| `<lyra-time-range>` | — (extra) | Two-handle brush/scrubber over a numeric domain |
|
|
114
|
+
| `<lyra-playback>` | — (extra) | Play/pause index stepper on a fixed interval |
|
|
115
|
+
| `<lyra-heatmap>` | — (extra) | DPR-aware Canvas matrix heatmap (matrix layout only today — see Known limitations) |
|
|
116
|
+
| `<lyra-graph>` | — (extra) | Force-directed node-link diagram with pan/zoom/drag — needs the optional peer deps `d3-force`, `d3-drag`, `d3-zoom`, `d3-selection` |
|
|
117
|
+
| `<lyra-tree>` + `<lyra-tree-node>` | — (extra) | Expand/collapse hierarchy for graph/document navigation |
|
|
118
|
+
|
|
119
|
+
**Tier 3 — charts**
|
|
77
120
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
-
|
|
81
|
-
-
|
|
121
|
+
| Component | Mirrors | Notes |
|
|
122
|
+
|-----------|---------|-------|
|
|
123
|
+
| `<lyra-chart>` | `wa-chart` | Core Chart.js wrapper (`Series`-based, plus raw `config` passthrough) — needs the optional peer deps `chart.js`, `chartjs-plugin-zoom` |
|
|
124
|
+
| `<lyra-bar-chart>`, `<lyra-line-chart>`, `<lyra-pie-chart>`, `<lyra-doughnut-chart>`, `<lyra-scatter-chart>`, `<lyra-bubble-chart>`, `<lyra-radar-chart>`, `<lyra-polar-area-chart>` | `wa-chart` | Typed `<lyra-chart>` subclasses with `type` locked — same optional peer deps as `<lyra-chart>` |
|
|
125
|
+
| `<lyra-box-plot>` | — (extra) | Box-and-whisker chart from precomputed five-number summaries — needs `chart.js`, `chartjs-plugin-zoom`, and `@sgratzl/chartjs-chart-boxplot` |
|
|
126
|
+
| `<lyra-histogram>` | — (extra) | Bins raw values (`binValues()`) and renders a bar chart — same optional peer deps as `<lyra-chart>` |
|
|
127
|
+
|
|
128
|
+
**Map & file-input**
|
|
129
|
+
|
|
130
|
+
| Component | Mirrors | Notes |
|
|
131
|
+
|-----------|---------|-------|
|
|
132
|
+
| `<lyra-map>` | — (extra) | maplibre-gl wrapper with declarative legend + choropleth GeoJSON layer, plus a raw `map` escape hatch — needs the optional peer `maplibre-gl` (see Install above) |
|
|
133
|
+
| `<lyra-file-input>` | — (extra) | Drag-drop + click-to-browse file dropzone, emits raw `File[]` (no CSV/XLSX parsing — that's host-specific) |
|
|
134
|
+
|
|
135
|
+
## Known limitations
|
|
136
|
+
|
|
137
|
+
A non-exhaustive list of gaps a new consumer should know about before adopting — full detail and
|
|
138
|
+
fix status in
|
|
139
|
+
[`.superpowers/sdd/2026-07-10-cross-repo-audit-report.md`](../../.superpowers/sdd/2026-07-10-cross-repo-audit-report.md)
|
|
140
|
+
and
|
|
141
|
+
[`docs/superpowers/plans/2026-07-10-lyra-ui-tier4-hardening.md`](../../docs/superpowers/plans/2026-07-10-lyra-ui-tier4-hardening.md):
|
|
142
|
+
|
|
143
|
+
- `required` doesn't yet enforce constraint validation on `<lyra-date-input>`/`<lyra-combobox>` —
|
|
144
|
+
neither calls `internals.setValidity()`, so `form.reportValidity()`/`checkValidity()` always
|
|
145
|
+
return `true` regardless of whether a required field is empty.
|
|
146
|
+
- `<lyra-tree>` has no keyboard interaction yet — only the expand/collapse button is focusable;
|
|
147
|
+
row selection and tree navigation (arrow keys, Home/End) have no keyboard path.
|
|
148
|
+
- `<lyra-heatmap>` is matrix-only today, despite its description mentioning calendar layouts — a
|
|
149
|
+
calendar-heatmap rendering mode isn't implemented yet.
|
|
150
|
+
- `<lyra-file-input>`'s `accept` attribute only constrains the native file-picker dialog; it has
|
|
151
|
+
no effect on the drag-drop path, so dropped files of a type `accept` would otherwise exclude are
|
|
152
|
+
silently accepted unless you also set `allowedMimeTypes`/`forbiddenMimeTypes`.
|
|
82
153
|
|
|
83
154
|
## Development
|
|
84
155
|
|