@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/graph/graph.stories.js

@@ -1,68 +0,0 @@
-import { html } from 'lit';
-const nodes = [
-    { id: 'a', label: 'A' },
-    { id: 'b', label: 'B' },
-    { id: 'c', label: 'C' },
-    { id: 'd', label: 'D' },
-];
-const links = [
-    { source: 'a', target: 'b' },
-    { source: 'a', target: 'c' },
-    { source: 'b', target: 'd' },
-    { source: 'c', target: 'd' },
-];
-const meta = {
-    title: 'Graph',
-    component: 'lyra-graph',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-graph
-      width="480"
-      height="320"
-      style="height: 20rem"
-      .nodes=${nodes}
-      .links=${links}
-    ></lyra-graph>
-  `,
-};
-export const TunedForces = {
-    render: () => html `
-    <lyra-graph
-      width="480"
-      height="320"
-      style="height: 20rem"
-      charge-strength="-900"
-      link-distance="200"
-      .nodes=${nodes}
-      .links=${links}
-    ></lyra-graph>
-  `,
-};
-export const BoundedZoom = {
-    render: () => html `
-    <lyra-graph
-      width="480"
-      height="320"
-      style="height: 20rem"
-      min-zoom="1"
-      max-zoom="2"
-      .nodes=${nodes}
-      .links=${links}
-    ></lyra-graph>
-  `,
-};
-export const SeededLayout = {
-    render: () => html `
-    <p>
-      Both graphs below share <code>seed="42"</code> — reload the page or diff a screenshot across builds and their
-      node positions are bit-identical, unlike the non-seeded <code>Default</code> story above.
-    </p>
-    <div style="display: flex; gap: 1rem; flex-wrap: wrap">
-      <lyra-graph width="320" height="240" style="height: 15rem" seed="42" .nodes=${nodes} .links=${links}></lyra-graph>
-      <lyra-graph width="320" height="240" style="height: 15rem" seed="42" .nodes=${nodes} .links=${links}></lyra-graph>
-    </div>
-  `,
-};

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

@@ -1,22 +0,0 @@
-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 SqrtScaleFitToWidth: Story;
-export declare const CalendarMode: Story;
-export declare const CustomTheme: Story;
-/**
- * Hover a cell for its tooltip, tab to the grid and use the arrow keys to
- * move the focus ring (a visually-hidden live region announces each move),
- * and click or press Enter/Space on a cell to see its `lyra-cell-click`
- * detail logged below.
- */
-export declare const HoverFocusClick: Story;
-/**
- * Cells flagged via `annotations` get a stroked ring; ones with a `label`
- * also surface a swatch + text entry in the legend.
- */
-export declare const Annotations: Story;
-/** `annotations` in calendar mode match by ISO `date` instead of `row`/`col`. */
-export declare const CalendarAnnotations: Story;

package/dist/components/heatmap/heatmap.stories.js

@@ -1,154 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Heatmap',
-    component: 'lyra-heatmap',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-heatmap
-      cell-size="24"
-      value-label="events"
-      .rowLabels=${['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
-      .colLabels=${['0h', '6h', '12h', '18h']}
-      .values=${[
-        [1, 4, 9, 2],
-        [0, 2, 6, 3],
-        [5, 8, 3, 1],
-        [-1, 1, 4, 7],
-        [2, 3, 5, 6],
-    ]}
-    ></lyra-heatmap>
-  `,
-};
-export const SqrtScaleFitToWidth = {
-    render: () => html `
-    <lyra-heatmap
-      scale="sqrt"
-      fit-to-width
-      value-label="requests"
-      .rowLabels=${['Mon', 'Tue', 'Wed']}
-      .colLabels=${['0h', '6h', '12h', '18h']}
-      .values=${[
-        [1, 8, 400, 20],
-        [0, 2, 6, 3],
-        [-1, 1, 4, 7],
-    ]}
-    ></lyra-heatmap>
-  `,
-};
-export const CalendarMode = {
-    render: () => {
-        const days = [];
-        const start = Date.UTC(2026, 0, 1);
-        for (let i = 0; i < 120; i++) {
-            const date = new Date(start + i * 86_400_000).toISOString().slice(0, 10);
-            const value = Math.round(Math.abs(Math.sin(i / 6)) * 10);
-            days.push({ date, value });
-        }
-        return html `
-      <lyra-heatmap mode="calendar" value-label="commits" bucket-count="5" .days=${days}></lyra-heatmap>
-    `;
-    },
-};
-export const CustomTheme = {
-    render: () => html `
-    <lyra-heatmap
-      style="
-        --lyra-heatmap-scale-lo: #fde7e9;
-        --lyra-heatmap-scale-hi: #b3122f;
-        --lyra-heatmap-no-data-fill: rgba(0, 0, 0, 0.08);
-        --lyra-heatmap-label-font: 11px monospace;
-      "
-      cell-size="24"
-      value-label="events"
-      .rowLabels=${['Mon', 'Tue', 'Wed']}
-      .colLabels=${['0h', '6h', '12h']}
-      .values=${[
-        [1, 4, 9],
-        [0, 2, 6],
-        [-1, 1, 4],
-    ]}
-    ></lyra-heatmap>
-  `,
-};
-/**
- * Hover a cell for its tooltip, tab to the grid and use the arrow keys to
- * move the focus ring (a visually-hidden live region announces each move),
- * and click or press Enter/Space on a cell to see its `lyra-cell-click`
- * detail logged below.
- */
-export const HoverFocusClick = {
-    render: () => {
-        const onCellClick = (e) => {
-            const detail = e.detail;
-            const out = document.getElementById('cell-click-out');
-            if (out)
-                out.textContent = JSON.stringify(detail);
-        };
-        return html `
-      <lyra-heatmap
-        cell-size="28"
-        value-label="events"
-        .rowLabels=${['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
-        .colLabels=${['0h', '6h', '12h', '18h']}
-        .values=${[
-            [1, 4, 9, 2],
-            [0, 2, 6, 3],
-            [5, 8, 3, 1],
-            [-1, 1, 4, 7],
-            [2, 3, 5, 6],
-        ]}
-        @lyra-cell-click=${onCellClick}
-      ></lyra-heatmap>
-      <p>Last <code>lyra-cell-click</code> detail: <code id="cell-click-out">(none yet)</code></p>
-    `;
-    },
-};
-/**
- * Cells flagged via `annotations` get a stroked ring; ones with a `label`
- * also surface a swatch + text entry in the legend.
- */
-export const Annotations = {
-    render: () => html `
-    <lyra-heatmap
-      cell-size="24"
-      value-label="events"
-      .rowLabels=${['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
-      .colLabels=${['0h', '6h', '12h', '18h']}
-      .values=${[
-        [1, 4, 9, 2],
-        [0, 2, 6, 3],
-        [5, 8, 3, 1],
-        [-1, 1, 4, 7],
-        [2, 3, 5, 6],
-    ]}
-      .annotations=${[
-        { row: 0, col: 2, label: 'Peak load' },
-        { row: 2, col: 1, label: 'Incident' },
-    ]}
-    ></lyra-heatmap>
-  `,
-};
-/** `annotations` in calendar mode match by ISO `date` instead of `row`/`col`. */
-export const CalendarAnnotations = {
-    render: () => {
-        const days = [];
-        const start = Date.UTC(2026, 0, 1);
-        for (let i = 0; i < 120; i++) {
-            const date = new Date(start + i * 86_400_000).toISOString().slice(0, 10);
-            const value = Math.round(Math.abs(Math.sin(i / 6)) * 10);
-            days.push({ date, value });
-        }
-        return html `
-      <lyra-heatmap
-        mode="calendar"
-        value-label="commits"
-        bucket-count="5"
-        .days=${days}
-        .annotations=${[{ date: '2026-02-14', label: 'Release day' }]}
-      ></lyra-heatmap>
-    `;
-    },
-};

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

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-/**
- * `choropleth` adds a GeoJSON fill layer, colored by interpolating `field`'s
- * value across `stops` -- pair it with `legend` to label the color ramp.
- */
-export declare const Choropleth: Story;
-/**
- * `markers` renders a pin per entry, each with an optional colored tint and
- * an openable popup built from `label` (plain text) or `html` (raw markup).
- */
-export declare const Markers: Story;

package/dist/components/map/map.stories.js

@@ -1,135 +0,0 @@
-import { html } from 'lit';
-const legend = [
-    { color: '#5b8def', label: 'Low' },
-    { color: '#e5484d', label: 'High' },
-];
-const RASTER_STYLE = {
-    version: 8,
-    sources: {
-        demo: {
-            type: 'raster',
-            tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
-            tileSize: 256,
-            attribution: '© OpenStreetMap contributors',
-        },
-    },
-    layers: [{ id: 'demo', type: 'raster', source: 'demo' }],
-};
-const meta = {
-    title: 'Map',
-    component: 'lyra-map',
-    tags: ['autodocs'],
-    parameters: {
-        docs: {
-            description: {
-                component: 'Demoed with a raster OpenStreetMap tile style since a vector style needs an API key.',
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-map
-      style="height: 20rem"
-      center="[2.3522, 48.8566]"
-      zoom="4"
-      .legend=${legend}
-      .mapStyle=${RASTER_STYLE}
-    ></lyra-map>
-  `,
-};
-/**
- * `choropleth` adds a GeoJSON fill layer, colored by interpolating `field`'s
- * value across `stops` -- pair it with `legend` to label the color ramp.
- */
-export const Choropleth = {
-    render: () => {
-        const choropleth = {
-            sourceId: 'regions',
-            field: 'value',
-            stops: [
-                [0, '#5b8def'],
-                [50, '#f2c94c'],
-                [100, '#e5484d'],
-            ],
-            geojson: {
-                type: 'FeatureCollection',
-                features: [
-                    {
-                        type: 'Feature',
-                        properties: { value: 20 },
-                        geometry: {
-                            type: 'Polygon',
-                            coordinates: [
-                                [
-                                    [2.25, 48.9],
-                                    [2.35, 48.9],
-                                    [2.35, 48.85],
-                                    [2.25, 48.85],
-                                    [2.25, 48.9],
-                                ],
-                            ],
-                        },
-                    },
-                    {
-                        type: 'Feature',
-                        properties: { value: 80 },
-                        geometry: {
-                            type: 'Polygon',
-                            coordinates: [
-                                [
-                                    [2.35, 48.9],
-                                    [2.45, 48.9],
-                                    [2.45, 48.85],
-                                    [2.35, 48.85],
-                                    [2.35, 48.9],
-                                ],
-                            ],
-                        },
-                    },
-                ],
-            },
-        };
-        return html `
-      <lyra-map
-        style="height: 20rem"
-        center="[2.3522, 48.8566]"
-        zoom="10"
-        .legend=${[
-            { color: '#5b8def', label: 'Low' },
-            { color: '#f2c94c', label: 'Medium' },
-            { color: '#e5484d', label: 'High' },
-        ]}
-        .choropleth=${choropleth}
-        .mapStyle=${RASTER_STYLE}
-      ></lyra-map>
-    `;
-    },
-};
-/**
- * `markers` renders a pin per entry, each with an optional colored tint and
- * an openable popup built from `label` (plain text) or `html` (raw markup).
- */
-export const Markers = {
-    render: () => {
-        const markers = [
-            { id: 'eiffel', lngLat: [2.2945, 48.8584], label: 'Eiffel Tower' },
-            {
-                id: 'louvre',
-                lngLat: [2.3364, 48.8606],
-                color: '#e5484d',
-                html: '<strong>Louvre</strong><br>Museum',
-            },
-        ];
-        return html `
-      <lyra-map
-        style="height: 20rem"
-        center="[2.3522, 48.8566]"
-        zoom="12"
-        .markers=${markers}
-        .mapStyle=${RASTER_STYLE}
-      ></lyra-map>
-    `;
-    },
-};

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

@@ -1,7 +0,0 @@
-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 NoLoop: Story;
-export declare const SingleFrame: Story;

package/dist/components/playback/playback.stories.js

@@ -1,16 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Playback',
-    component: 'lyra-playback',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `<lyra-playback length="10" interval-ms="500" loop></lyra-playback>`,
-};
-export const NoLoop = {
-    render: () => html `<lyra-playback length="10" interval-ms="500" .loop=${false}></lyra-playback>`,
-};
-export const SingleFrame = {
-    render: () => html `<lyra-playback length="1"></lyra-playback>`,
-};

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

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-/** `<lyra-option selected>` seeds the initial value, mirroring `<option selected>`. */
-export declare const PreSelectedValue: Story;
-/**
- * Rows come from `<lyra-option>` children plus `group` (section headers),
- * `sub` (a secondary line), and `dot-color` (a leading status dot) — same
- * rich-row support as `<lyra-combobox>`.
- */
-export declare const RichRows: Story;
-export declare const Disabled: Story;
-/**
- * `required` blocks form submission while empty; `error-text` renders a
- * validation message alongside the shared `hint`.
- */
-export declare const RequiredWithValidation: Story;

package/dist/components/select/select.stories.js

@@ -1,75 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Select',
-    component: 'lyra-select',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-select label="Fruit" placeholder="Pick one…" 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-select>
-  `,
-};
-/** `<lyra-option selected>` seeds the initial value, mirroring `<option selected>`. */
-export const PreSelectedValue = {
-    render: () => html `
-    <lyra-select label="Fruit" style="max-width: 20rem">
-      <lyra-option value="a">Apple</lyra-option>
-      <lyra-option value="b" selected>Banana</lyra-option>
-      <lyra-option value="c">Cherry</lyra-option>
-      <lyra-option value="d">Date</lyra-option>
-    </lyra-select>
-  `,
-};
-/**
- * Rows come from `<lyra-option>` children plus `group` (section headers),
- * `sub` (a secondary line), and `dot-color` (a leading status dot) — same
- * rich-row support as `<lyra-combobox>`.
- */
-export const RichRows = {
-    render: () => html `
-    <lyra-select label="Inverter" placeholder="Pick one…" style="max-width: 22rem">
-      <lyra-option value="inv-1" group="Building A" sub="Running" dot-color="var(--lyra-color-success)">
-        Inverter 1
-      </lyra-option>
-      <lyra-option value="inv-2" group="Building A" sub="Idle" dot-color="var(--lyra-color-text-quiet)">
-        Inverter 2
-      </lyra-option>
-      <lyra-option value="inv-3" group="Building B" sub="Fault" dot-color="var(--lyra-color-danger)">
-        Inverter 3
-      </lyra-option>
-    </lyra-select>
-  `,
-};
-export const Disabled = {
-    render: () => html `
-    <lyra-select label="Disabled" disabled placeholder="Can't touch this" style="max-width: 20rem">
-      <lyra-option value="a">Apple</lyra-option>
-      <lyra-option value="b">Banana</lyra-option>
-    </lyra-select>
-  `,
-};
-/**
- * `required` blocks form submission while empty; `error-text` renders a
- * validation message alongside the shared `hint`.
- */
-export const RequiredWithValidation = {
-    render: () => html `
-    <form style="display: flex; flex-direction: column; gap: 1.5rem; max-width: 22rem">
-      <lyra-select label="Required" required hint="Pick your favorite">
-        <lyra-option value="a">Apple</lyra-option>
-        <lyra-option value="b">Banana</lyra-option>
-      </lyra-select>
-      <lyra-select label="Invalid" required error-text="Selection required">
-        <lyra-option value="a">Apple</lyra-option>
-        <lyra-option value="b">Banana</lyra-option>
-      </lyra-select>
-      <button type="submit">Submit</button>
-    </form>
-  `,
-};

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

@@ -1,5 +0,0 @@
-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/skeleton/skeleton.stories.js

@@ -1,16 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Skeleton',
-    component: 'lyra-skeleton',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Gallery = {
-    render: () => html `
-    <div style="display:flex; gap:1rem; align-items:center;">
-      <lyra-skeleton width="10rem" height="1rem"></lyra-skeleton>
-      <lyra-skeleton variant="circle" width="3rem" height="3rem"></lyra-skeleton>
-      <lyra-skeleton variant="rect" effect="sheen" width="6rem" height="3rem"></lyra-skeleton>
-    </div>
-  `,
-};

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

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Line: Story;
-export declare const Area: Story;
-export declare const Bar: Story;
-export declare const ExplicitRange: Story;
-export declare const NoData: Story;
-export declare const FlatData: Story;
-export declare const SingleValue: Story;

package/dist/components/sparkline/sparkline.stories.js

@@ -1,39 +0,0 @@
-import { html } from 'lit';
-const DATA = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
-const meta = {
-    title: 'Sparkline',
-    component: 'lyra-sparkline',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Line = {
-    render: () => html `<lyra-sparkline type="line" .values=${DATA}></lyra-sparkline>`,
-};
-export const Area = {
-    render: () => html `<lyra-sparkline type="area" .values=${DATA}></lyra-sparkline>`,
-};
-export const Bar = {
-    render: () => html `<lyra-sparkline type="bar" .values=${DATA}></lyra-sparkline>`,
-};
-export const ExplicitRange = {
-    render: () => html `
-    <lyra-sparkline type="bar" .values=${[20, 40, 30]} min="0" max="100"></lyra-sparkline>
-    <lyra-sparkline type="bar" .values=${[70, 90, 80]} min="0" max="100"></lyra-sparkline>
-  `,
-};
-export const NoData = {
-    render: () => html `<lyra-sparkline></lyra-sparkline>`,
-};
-export const FlatData = {
-    render: () => html `
-    <lyra-sparkline type="line" .values=${[5, 5, 5, 5]}></lyra-sparkline>
-    <lyra-sparkline type="area" .values=${[5, 5, 5, 5]}></lyra-sparkline>
-    <lyra-sparkline type="bar" .values=${[5, 5, 5, 5]}></lyra-sparkline>
-  `,
-};
-export const SingleValue = {
-    render: () => html `
-    <lyra-sparkline type="line" .values=${[5]}></lyra-sparkline>
-    <lyra-sparkline type="bar" .values=${[5]}></lyra-sparkline>
-  `,
-};

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

@@ -1,7 +0,0 @@
-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 Vertical: Story;
-export declare const FixedPixelRangePanel: Story;

package/dist/components/split/split.stories.js

@@ -1,36 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Split',
-    component: 'lyra-split',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-split style="height: 8rem; border: 1px solid #ddd">
-      <div style="padding: 0.5rem">Panel A</div>
-      <div style="padding: 0.5rem">Panel B</div>
-      <div style="padding: 0.5rem">Panel C</div>
-    </lyra-split>
-  `,
-};
-export const Vertical = {
-    render: () => html `
-    <lyra-split orientation="vertical" style="height: 16rem; border: 1px solid #ddd">
-      <div style="padding: 0.5rem">Panel A</div>
-      <div style="padding: 0.5rem">Panel B</div>
-      <div style="padding: 0.5rem">Panel C</div>
-    </lyra-split>
-  `,
-};
-export const FixedPixelRangePanel = {
-    render: () => html `
-    <lyra-split
-      style="height: 8rem; border: 1px solid #ddd"
-      .panelConstraints=${[{ minPx: 160, maxPx: 320 }, null]}
-    >
-      <div style="padding: 0.5rem">Sidebar — pinned between 160px and 320px regardless of the split's own percent-based sizing or a container resize</div>
-      <div style="padding: 0.5rem">Main content — fills the rest, percent-based as usual</div>
-    </lyra-split>
-  `,
-};

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

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