@aceshooting/lyra-ui 1.2.0 → 2.1.0

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,9 +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;
-export declare const ExactValueSubProseCompact: Story;

package/dist/components/stat/stat.stories.js

@@ -1,81 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Stat',
-    component: 'lyra-stat',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Gallery = {
-    render: () => html `
-    <div class="flex flex-wrap gap-4">
-      <lyra-stat label="Revenue" value="12.4" unit="k€" trend="3.2" variant="success"></lyra-stat>
-      <lyra-stat label="Errors" value="128" trend="-5.1" variant="danger"></lyra-stat>
-      <lyra-stat label="Pending Reviews" value="42" trend="8.6" variant="warning"></lyra-stat>
-      <lyra-stat label="Sessions" value="9,204"></lyra-stat>
-      <lyra-stat label="Uptime" value="99.98" unit="%" caption="Last 30 days">
-        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="12" cy="12" r="9"></circle>
-        </svg>
-      </lyra-stat>
-      <lyra-stat label="Latency" value="182" unit="ms" trend="14" good-direction="down">
-        <span slot="caption">Median over <strong>1,000</strong> requests</span>
-      </lyra-stat>
-    </div>
-  `,
-};
-export const SparkAndBreakdown = {
-    render: () => html `
-    <div class="flex flex-wrap gap-4">
-      <lyra-stat label="Revenue" value="12.4" unit="k€" trend="3.2" variant="success" caption="Last 30 days">
-        <lyra-sparkline
-          slot="spark"
-          type="line"
-          .values=${[4, 6, 5, 8, 7, 9, 12, 10, 13, 12.4]}
-        ></lyra-sparkline>
-      </lyra-stat>
-      <lyra-stat label="Sessions" value="9,204" caption="By channel">
-        <lyra-sparkline slot="spark" type="bar" .values=${[3, 5, 4, 6, 8, 7, 9]}></lyra-sparkline>
-      </lyra-stat>
-    </div>
-  `,
-};
-export const BreakdownRows = {
-    render: () => html `
-    <div class="flex flex-wrap gap-4">
-      <lyra-stat label="Sessions" value="9,204" caption="By channel"></lyra-stat>
-    </div>
-  `,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('lyra-stat');
-        el.rows = [
-            { label: 'Direct', value: '64%' },
-            { label: 'Referral', value: '21%' },
-            { label: 'Other', value: '15%' },
-        ];
-    },
-};
-export const Emphasis = {
-    render: () => html `
-    <div class="flex flex-wrap gap-4">
-      <lyra-stat label="Revenue" value="12.4" unit="k€" trend="3.2" emphasis></lyra-stat>
-      <lyra-stat label="Errors" value="128" trend="-5.1" variant="danger" emphasis></lyra-stat>
-    </div>
-  `,
-};
-export const ExactValueSubProseCompact = {
-    render: () => html `
-    <div class="flex flex-wrap gap-4">
-      <lyra-stat
-        label="Revenue"
-        value="$1.2K"
-        exact-value="$1,204.37"
-        sub="vs. last week"
-        caption="Updated 2h ago"
-        trend="3.2"
-        variant="success"
-      ></lyra-stat>
-      <lyra-stat label="Status" prose value="Waiting for the next sync…"></lyra-stat>
-      <lyra-stat label="Sessions" value="9,204" sub="+312 today" compact></lyra-stat>
-    </div>
-  `,
-};

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

@@ -1,12 +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 Empty: Story;
-export declare const NoColumnsConfigured: Story;
-export declare const ActiveSort: Story;
-export declare const SelectedRow: Story;
-export declare const LoadMore: Story;
-export declare const PriorityAndSticky: Story;
-export declare const RowActions: Story;

package/dist/components/table/table.stories.js

@@ -1,67 +0,0 @@
-import { html } from 'lit';
-const rows = [
-    { id: 'a', name: 'Alpha', score: 92 },
-    { id: 'b', name: 'Beta', score: 81 },
-    { id: 'c', name: 'Gamma', score: 76 },
-];
-const columns = [
-    { key: 'name', label: 'Name', sortable: true, cell: (r) => r.name },
-    { key: 'score', label: 'Score', sortable: true, align: 'end', cell: (r) => r.score },
-];
-const meta = {
-    title: 'Table',
-    component: 'lyra-table',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `<lyra-table .columns=${columns} .rows=${rows}></lyra-table>`,
-};
-export const Empty = {
-    render: () => html `<lyra-table .columns=${columns} .rows=${[]}></lyra-table>`,
-};
-export const NoColumnsConfigured = {
-    render: () => html `<lyra-table .columns=${[]} .rows=${rows}></lyra-table>`,
-};
-export const ActiveSort = {
-    render: () => html `<lyra-table .columns=${columns} .rows=${rows} sort-key="score" sort-dir="desc"></lyra-table>`,
-};
-export const SelectedRow = {
-    render: () => html `<lyra-table .columns=${columns} .rows=${rows} .selectedKey=${'b'}></lyra-table>`,
-};
-export const LoadMore = {
-    render: () => html `<lyra-table .columns=${columns} .rows=${rows} has-more more-label="Load more rows"></lyra-table>`,
-};
-const detailRows = [
-    { id: 'a', name: 'Alpha', score: 92, region: 'EU-West', updated: '2 min ago' },
-    { id: 'b', name: 'Beta', score: 81, region: 'US-East', updated: '5 min ago' },
-    { id: 'c', name: 'Gamma', score: 76, region: 'AP-South', updated: '1 hr ago' },
-];
-// Narrow the story's own container, so the `priority`-hidden columns below
-// actually hide without needing to shrink the whole Storybook viewport.
-const priorityColumns = [
-    { key: 'name', label: 'Name', sortable: true, sticky: true, cell: (r) => r.name },
-    { key: 'score', label: 'Score', sortable: true, align: 'end', cell: (r) => r.score },
-    { key: 'region', label: 'Region', priority: 'medium', cell: (r) => r.region },
-    { key: 'updated', label: 'Updated', priority: 'low', cell: (r) => r.updated },
-];
-export const PriorityAndSticky = {
-    render: () => html `<div style="max-width: 420px;">
-      <lyra-table .columns=${priorityColumns} .rows=${detailRows}></lyra-table>
-    </div>`,
-};
-// A <button> inside cell() must own its own click/Enter activation — the
-// table's row-click delegation must not intercept it (see table.ts's
-// INTERACTIVE_SELECTOR guard).
-const actionColumns = [
-    { key: 'name', label: 'Name', cell: (r) => r.name },
-    { key: 'score', label: 'Score', align: 'end', cell: (r) => r.score },
-    {
-        key: 'actions',
-        label: 'Actions',
-        cell: (r) => html `<button type="button" @click=${() => alert(`Editing ${r.name}`)}>Edit</button>`,
-    },
-];
-export const RowActions = {
-    render: () => html `<lyra-table .columns=${actionColumns} .rows=${rows}></lyra-table>`,
-};

package/dist/components/time-range/time-range.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 Default: Story;
-export declare const Disabled: Story;
-export declare const CoarseStep: Story;
-export declare const DiscretePresets: Story;

package/dist/components/time-range/time-range.stories.js

@@ -1,26 +0,0 @@
-import { html } from 'lit';
-const presets = [
-    { label: 'Last 7 days', start: 0, end: 7 },
-    { label: 'Last 30 days', start: 0, end: 30 },
-    { label: 'Last 90 days', start: 0, end: 90 },
-];
-const meta = {
-    title: 'TimeRange',
-    component: 'lyra-time-range',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `<lyra-time-range min="0" max="100" start="20" end="80"></lyra-time-range>`,
-};
-export const Disabled = {
-    render: () => html `<lyra-time-range min="0" max="100" start="20" end="80" disabled></lyra-time-range>`,
-};
-export const CoarseStep = {
-    render: () => html `<lyra-time-range min="0" max="100" start="20" end="80" step="10"></lyra-time-range>`,
-};
-export const DiscretePresets = {
-    render: () => html `
-    <lyra-time-range min="0" max="90" start="0" end="30" .presets=${presets}></lyra-time-range>
-  `,
-};

package/dist/components/toast/toast.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 Triggers: Story;
-export declare const Sizes: Story;
-export declare const WithIcon: Story;
-export declare const Placements: Story;

package/dist/components/toast/toast.stories.js

@@ -1,72 +0,0 @@
-import { html } from 'lit';
-import { toast } from '../../lyra.js';
-const meta = {
-    title: 'Toast',
-    component: 'lyra-toast',
-    tags: ['autodocs'],
-    parameters: {
-        docs: {
-            description: {
-                component: 'Click a button to fire a toast via the `toast()` helper — the ergonomic entry point that lazily mounts one `<lyra-toast>` region per placement on `document.body`.',
-            },
-        },
-    },
-};
-export default meta;
-export const Triggers = {
-    render: () => html `
-    <div style="display:flex; gap:1rem;">
-      <button @click=${() => toast('Just so you know')}>Neutral</button>
-      <button @click=${() => toast({ message: 'Saved!', variant: 'success' })}>Success</button>
-      <button
-        @click=${() => toast({
-        message: 'Item deleted',
-        variant: 'danger',
-        duration: 0,
-        action: { label: 'Undo', onClick: (item) => item.hide() },
-    })}
-      >
-        Danger + action
-      </button>
-    </div>
-  `,
-};
-const sizes = ['xs', 's', 'm', 'l', 'xl'];
-export const Sizes = {
-    render: () => html `
-    <div style="display:flex; gap:1rem;">
-      ${sizes.map((size) => html `<button @click=${() => toast({ message: `Size "${size}"`, size })}>${size}</button>`)}
-    </div>
-  `,
-};
-export const WithIcon = {
-    render: () => html `
-    <div style="display:flex; gap:1rem;">
-      <button
-        @click=${() => toast({ message: 'Upload complete', variant: 'success', withIcon: true }).item.then((item) => {
-        const icon = document.createElement('span');
-        icon.slot = 'icon';
-        icon.textContent = '✓';
-        item.appendChild(icon);
-    })}
-      >
-        Success + icon
-      </button>
-    </div>
-  `,
-};
-const placements = [
-    'top-start',
-    'top-center',
-    'top-end',
-    'bottom-start',
-    'bottom-center',
-    'bottom-end',
-];
-export const Placements = {
-    render: () => html `
-    <div style="display:flex; flex-wrap:wrap; gap:1rem;">
-      ${placements.map((placement) => html `<button @click=${() => toast({ message: placement, placement })}>${placement}</button>`)}
-    </div>
-  `,
-};

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

@@ -1,9 +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;
-/** Demonstrates the imperative `expandAll()`/`collapseAll()` methods. */
-export declare const ExpandCollapseAll: Story;
-/** A single branch nested well past the 8rem indentation cap, so the capped indent and truncated label are both visible without expanding anything by hand. */
-export declare const DeeplyNested: Story;

package/dist/components/tree/tree.stories.js

@@ -1,52 +0,0 @@
-import { html } from 'lit';
-const data = [
-    {
-        id: '1',
-        label: 'Root',
-        badge: 2,
-        children: [
-            { id: '1.1', label: 'Child A' },
-            { id: '1.2', label: 'Child B' },
-        ],
-    },
-    { id: '2', label: 'Leaf' },
-];
-const meta = {
-    title: 'Tree',
-    component: 'lyra-tree',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `<lyra-tree style="max-width: 20rem" label="File explorer" .data=${data}></lyra-tree>`,
-};
-/** Demonstrates the imperative `expandAll()`/`collapseAll()` methods. */
-export const ExpandCollapseAll = {
-    render: () => {
-        const getTree = () => document.getElementById('imperative-tree');
-        return html `
-      <div style="display:flex; flex-direction:column; gap:1rem; max-width:20rem">
-        <div style="display:flex; gap:0.5rem">
-          <button @click=${() => getTree().expandAll()}>Expand all</button>
-          <button @click=${() => getTree().collapseAll()}>Collapse all</button>
-        </div>
-        <lyra-tree id="imperative-tree" label="File explorer" .data=${data}></lyra-tree>
-      </div>
-    `;
-    },
-};
-const buildDeepData = (depth) => {
-    let node = { id: `d${depth}`, label: `A very long deeply-nested label all the way at depth ${depth}` };
-    for (let d = depth - 1; d >= 0; d--) {
-        node = { id: `d${d}`, label: `Level ${d} node with a fairly long descriptive label`, children: [node] };
-    }
-    return [node];
-};
-/** A single branch nested well past the 8rem indentation cap, so the capped indent and truncated label are both visible without expanding anything by hand. */
-export const DeeplyNested = {
-    render: () => html `<lyra-tree style="max-width: 20rem" label="Deeply nested example" .data=${buildDeepData(12)}></lyra-tree>`,
-    play: async ({ canvasElement }) => {
-        const tree = canvasElement.querySelector('lyra-tree');
-        tree.expandAll();
-    },
-};

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

@@ -1,9 +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 CollapsedInitially: Story;
-export declare const FullscreenInitially: Story;
-export declare const FullscreenWithSidebarInset: Story;
-export declare const Compact: Story;

package/dist/components/widget/widget.stories.js

@@ -1,74 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Widget',
-    component: 'lyra-widget',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-widget
-      label="Load profile"
-      sublabel="Last 7 days"
-      collapsible
-      expandable
-      style="max-width: 28rem;"
-    >
-      <span slot="actions"><button>Refresh</button></span>
-      <div style="padding: 1rem;">
-        <p style="margin: 0 0 0.5rem;">Panel body content — a chart, a table, anything.</p>
-        <p style="margin: 0; color: #666;">Click the chevron to collapse, or the expand icon to go fullscreen.</p>
-      </div>
-    </lyra-widget>
-  `,
-};
-export const CollapsedInitially = {
-    render: () => html `
-    <lyra-widget label="Alerts" sublabel="3 active" collapsible collapsed style="max-width: 28rem;">
-      <div style="padding: 1rem;">This body is hidden until the panel is expanded.</div>
-    </lyra-widget>
-  `,
-};
-export const FullscreenInitially = {
-    render: () => html `
-    <lyra-widget label="Load profile" sublabel="Last 7 days" expandable fullscreen style="max-width: 28rem;">
-      <span slot="actions"><button>Refresh</button></span>
-      <div style="padding: 1rem;">
-        <p style="margin: 0;">Rendered already fullscreen — backdrop, fixed panel, and dialog semantics.</p>
-      </div>
-    </lyra-widget>
-  `,
-};
-export const FullscreenWithSidebarInset = {
-    render: () => html `
-    <div style="position: relative;">
-      <div
-        style="position: fixed; inset: 0 auto 0 0; inline-size: 240px; background: #1e293b; color: #fff; padding: 1rem; z-index: 1001;"
-      >
-        Persistent sidebar (stays visible above the widget's fullscreen panel)
-      </div>
-      <lyra-widget
-        label="Load profile"
-        sublabel="Last 7 days"
-        expandable
-        fullscreen
-        fullscreen-inset="0 0 0 240px"
-        style="max-width: 28rem;"
-      >
-        <div style="padding: 1rem;">
-          <p style="margin: 0;">
-            Fullscreen with <code>fullscreen-inset="0 0 0 240px"</code> — the panel and backdrop leave
-            room for the 240px sidebar instead of covering it.
-          </p>
-        </div>
-      </lyra-widget>
-    </div>
-  `,
-};
-export const Compact = {
-    render: () => html `
-    <lyra-widget label="Alerts" sublabel="3 active" compact collapsible expandable style="max-width: 28rem;">
-      <div style="padding: 0.5rem;">Tighter header/body padding for constrained spaces.</div>
-    </lyra-widget>
-  `,
-};

package/dist/components/word-cloud/word-cloud.stories.d.ts

@@ -1,10 +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 SqrtScale: Story;
-export declare const MixedOrientation: Story;
-export declare const GroupedColors: Story;
-export declare const CustomPalette: Story;
-export declare const Empty: Story;

package/dist/components/word-cloud/word-cloud.stories.js

@@ -1,55 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'WordCloud',
-    component: 'lyra-word-cloud',
-    tags: ['autodocs'],
-};
-export default meta;
-const WORDS = [
-    { text: 'JavaScript', weight: 90 },
-    { text: 'TypeScript', weight: 75 },
-    { text: 'Lit', weight: 60 },
-    { text: 'Web Components', weight: 55 },
-    { text: 'HTML', weight: 40 },
-    { text: 'CSS', weight: 38 },
-    { text: 'Shadow DOM', weight: 25 },
-    { text: 'Custom Elements', weight: 22 },
-    { text: 'Accessibility', weight: 18 },
-    { text: 'SVG', weight: 15 },
-    { text: 'Design Tokens', weight: 12 },
-    { text: 'Testing', weight: 10 },
-];
-export const Default = {
-    render: () => html `<lyra-word-cloud .words=${WORDS} style="height: 20rem"></lyra-word-cloud>`,
-};
-export const SqrtScale = {
-    render: () => html `<lyra-word-cloud .words=${WORDS} scale="sqrt" style="height: 20rem"></lyra-word-cloud>`,
-};
-export const MixedOrientation = {
-    render: () => html `<lyra-word-cloud .words=${WORDS} orientations="mixed" style="height: 20rem"></lyra-word-cloud>`,
-};
-export const GroupedColors = {
-    render: () => html `<lyra-word-cloud
-      style="height: 20rem"
-      .words=${[
-        { text: 'React', weight: 80, group: 'framework' },
-        { text: 'Vue', weight: 60, group: 'framework' },
-        { text: 'Svelte', weight: 40, group: 'framework' },
-        { text: 'Jest', weight: 55, group: 'testing' },
-        { text: 'Playwright', weight: 45, group: 'testing' },
-        { text: 'Vitest', weight: 30, group: 'testing' },
-        { text: 'Vite', weight: 50, group: 'tooling' },
-        { text: 'esbuild', weight: 20, group: 'tooling' },
-    ]}
-    ></lyra-word-cloud>`,
-};
-export const CustomPalette = {
-    render: () => html `<lyra-word-cloud
-      style="height: 20rem"
-      .words=${WORDS}
-      .palette=${['#e63946', '#f1a208', '#2a9d8f', '#264653']}
-    ></lyra-word-cloud>`,
-};
-export const Empty = {
-    render: () => html `<lyra-word-cloud style="height: 10rem"></lyra-word-cloud>`,
-};