@aceshooting/lyra-ui 1.0.1 → 1.2.0

package/dist/components/chart/lite-chart.stories.js

@@ -0,0 +1,114 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/LiteChart',
+    component: 'lyra-lite-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+/** Zero-dependency alternative to `lyra-chart` — plain SVG/DOM, no `chart.js` peer dep. */
+export const Default = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
+        return html `
+      <lyra-lite-chart
+        type="bar"
+        height="16rem"
+        style="width: 22rem"
+        legend
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+      ></lyra-lite-chart>
+    `;
+    },
+};
+export const GroupedBars = {
+    render: () => {
+        const series = [
+            { label: 'This year', data: [12, 19, 14, 22] },
+            { label: 'Last year', data: [9, 15, 11, 18] },
+        ];
+        return html `
+      <lyra-lite-chart
+        type="bar"
+        height="16rem"
+        style="width: 24rem"
+        legend
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+      ></lyra-lite-chart>
+    `;
+    },
+};
+/** `stacked` sums each category's bars into one segmented bar instead of grouping them side by side. */
+export const StackedBars = {
+    render: () => {
+        const series = [
+            { label: 'Docs', data: [4, 6, 3, 8] },
+            { label: 'Bugs', data: [3, 2, 5, 4] },
+            { label: 'Features', data: [5, 7, 6, 3] },
+        ];
+        return html `
+      <lyra-lite-chart
+        type="bar"
+        stacked
+        height="16rem"
+        style="width: 24rem"
+        legend
+        x-label="Week"
+        y-label="Commits"
+        .labels=${['W1', 'W2', 'W3', 'W4']}
+        .datasets=${series}
+      ></lyra-lite-chart>
+    `;
+    },
+};
+export const Line = {
+    render: () => {
+        const series = [
+            { label: 'CPU', data: [20, 35, 42, 30, 55] },
+            { label: 'Memory', data: [40, 38, 45, 60, 58] },
+        ];
+        return html `
+      <lyra-lite-chart
+        type="line"
+        height="16rem"
+        style="width: 24rem"
+        legend
+        .labels=${['00:00', '00:05', '00:10', '00:15', '00:20']}
+        .datasets=${series}
+      ></lyra-lite-chart>
+    `;
+    },
+};
+/** Clicking (or Enter/Space on a focused) bar/point fires `lyra-point-click`, same detail shape as `lyra-chart`'s. */
+export const ClickToFilter = {
+    render: () => {
+        const series = [{ label: 'Runs', data: [12, 19, 14, 22] }];
+        return html `
+      <lyra-lite-chart
+        type="bar"
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+        @lyra-point-click=${(e) => alert(JSON.stringify(e.detail))}
+      ></lyra-lite-chart>
+    `;
+    },
+};
+/** `tickFormat` customizes y-axis tick labels (e.g. currency) instead of the built-in nice-number formatter. */
+export const CurrencyTickFormat = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [1204.37, 1890.5, 1420.1, 2260.75] }];
+        return html `
+      <lyra-lite-chart
+        type="bar"
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+        .tickFormat=${(v) => `$${v.toFixed(2)}`}
+      ></lyra-lite-chart>
+    `;
+    },
+};

package/dist/components/chart/lite-chart.styles.d.ts

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

package/dist/components/chart/lite-chart.styles.js

@@ -0,0 +1,83 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    block-size: var(--lyra-chart-height, 280px);
+    /* Same token names/fallback chain as chart.ts's --lyra-chart-* — a host
+       already theming lyra-chart gets lyra-lite-chart themed for free, and
+       vice versa. Unlike chart.ts (canvas-rendered, can't consume var()
+       directly), this component is plain SVG/DOM, so these are read natively
+       by the CSS below — no getComputedStyle()/JS-side resolution needed. */
+    --lyra-chart-grid-color: var(--lyra-color-border);
+    --lyra-chart-tick-color: var(--lyra-color-text-quiet);
+    --lyra-chart-legend-color: var(--lyra-color-text);
+    --lyra-chart-tooltip-bg: var(--lyra-color-surface);
+    --lyra-chart-tooltip-text: var(--lyra-color-text);
+  }
+  [part='base'] {
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+  }
+  svg {
+    flex: 1 1 auto;
+    inline-size: 100%;
+    block-size: 100%;
+    min-block-size: 0;
+    overflow: visible;
+  }
+  [part='grid-line'] {
+    stroke: var(--lyra-chart-grid-color);
+    stroke-width: 1;
+  }
+  [part='axis-label'] {
+    fill: var(--lyra-chart-tick-color);
+    font-size: 10px;
+    font-family: var(--lyra-font-family, inherit);
+  }
+  [part='axis-title'] {
+    fill: var(--lyra-chart-tick-color);
+    font-size: 11px;
+    font-weight: 600;
+    font-family: var(--lyra-font-family, inherit);
+  }
+  [part='bar'] {
+    cursor: pointer;
+  }
+  [part='bar']:focus-visible,
+  [part='point']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: 1px;
+  }
+  [part='line'] {
+    fill: none;
+    stroke-width: 2;
+  }
+  [part='point'] {
+    cursor: pointer;
+  }
+  [part='legend'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--lyra-space-s);
+    justify-content: center;
+    flex: 0 0 auto;
+  }
+  [part='legend-item'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35em;
+    font-size: 0.8rem;
+    color: var(--lyra-chart-legend-color);
+  }
+  [part='legend-swatch'] {
+    inline-size: 0.7em;
+    block-size: 0.7em;
+    border-radius: 2px;
+    flex: 0 0 auto;
+  }
+`;

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

@@ -29,15 +29,23 @@ export type ComboboxSource = (query: string) => Promise<ComboboxSourceRow[]>;
  * @event lyra-show - The listbox opened.
  * @event lyra-hide - The listbox closed.
  * @event lyra-clear - The value was cleared.
+ * @csspart form-control - The outer wrapper around label, combobox, listbox, error and hint.
+ * @csspart form-control-label - The `<label>` element.
  * @csspart combobox - The input container (positioning anchor).
  * @csspart combobox-input - The text input.
  * @csspart listbox - The options popover.
  * @csspart option - An option row.
+ * @csspart option-dot - An option row's leading status dot (when `dot-color` is set).
+ * @csspart option-label - An option row's label/sub wrapper.
+ * @csspart option-sub - An option row's secondary line (when `sub` is set).
+ * @csspart option-overflow - The "+N more" indicator shown when rows are capped by `maxRender`.
  * @csspart tags - The multi-select tag container.
  * @csspart tag - An individual selected tag.
+ * @csspart tag__remove-button - A tag's remove button.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The dropdown indicator.
  * @csspart error - The error message.
+ * @csspart hint - The hint message.
  */
 export declare class LyraCombobox extends LyraElement {
     static formAssociated: boolean;
@@ -79,6 +87,7 @@ export declare class LyraCombobox extends LyraElement {
     private listId;
     private inputId;
     private cleanup?;
+    private _isFirstUpdate;
     private _selected;
     private _defaultSelected;
     private _defaultCaptured;

package/dist/components/combobox/combobox.js

@@ -31,15 +31,23 @@ import './option.js';
  * @event lyra-show - The listbox opened.
  * @event lyra-hide - The listbox closed.
  * @event lyra-clear - The value was cleared.
+ * @csspart form-control - The outer wrapper around label, combobox, listbox, error and hint.
+ * @csspart form-control-label - The `<label>` element.
  * @csspart combobox - The input container (positioning anchor).
  * @csspart combobox-input - The text input.
  * @csspart listbox - The options popover.
  * @csspart option - An option row.
+ * @csspart option-dot - An option row's leading status dot (when `dot-color` is set).
+ * @csspart option-label - An option row's label/sub wrapper.
+ * @csspart option-sub - An option row's secondary line (when `sub` is set).
+ * @csspart option-overflow - The "+N more" indicator shown when rows are capped by `maxRender`.
  * @csspart tags - The multi-select tag container.
  * @csspart tag - An individual selected tag.
+ * @csspart tag__remove-button - A tag's remove button.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The dropdown indicator.
  * @csspart error - The error message.
+ * @csspart hint - The hint message.
  */
 export class LyraCombobox extends LyraElement {
     static { this.formAssociated = true; }
@@ -91,6 +99,7 @@ export class LyraCombobox extends LyraElement {
         this._rowsByValue = new Map();
         this.listId = nextId('combobox-list');
         this.inputId = nextId('combobox-input');
+        this._isFirstUpdate = true;
         this._selected = [];
         // What `form.reset()` restores to. Captured exactly once, from whatever
         // `<lyra-option selected>` markup was present the first time slotted
@@ -104,6 +113,7 @@ export class LyraCombobox extends LyraElement {
         this._defaultCaptured = false;
         this.collectOptions = (e) => {
             const slot = e.target;
+            const previous = new Set(this.options);
             this.options = slot
                 .assignedElements({ flatten: true })
                 .filter((el) => el instanceof LyraOption);
@@ -123,6 +133,20 @@ export class LyraCombobox extends LyraElement {
                     return; // `value=`'s setter already called reflectSelected()
                 }
             }
+            else {
+                // Options slotted in after the first pass (e.g. a lazily-populated
+                // list appended post-connect) still declare selection the same way a
+                // native `<select><option selected>` would -- seed newly-arrived ones
+                // into the live selection instead of letting reflectSelected() below
+                // strip their `selected` attribute back off.
+                const newlySelected = this.options.filter((o) => !previous.has(o) && o.selected).map((o) => o.value);
+                if (newlySelected.length) {
+                    this.value = this.multiple
+                        ? [...new Set([...this._selected, ...newlySelected])]
+                        : newlySelected[newlySelected.length - 1];
+                    return; // `value=`'s setter already called reflectSelected()
+                }
+            }
             this.reflectSelected();
         };
         this.onDocPointer = (e) => {
@@ -139,6 +163,12 @@ export class LyraCombobox extends LyraElement {
         };
         this.onInputBlur = () => {
             this.touched = true;
+            // A mouse click outside the element is already handled by
+            // onDocPointer/hide(), but that leaves keyboard users with no way to
+            // dismiss the listbox short of Escape -- tabbing focus away from the
+            // input should close it too, the same as it would for a native
+            // `<select>`'s popup.
+            this.hide();
         };
         this.onHintSlotChange = (e) => {
             this.hasHintSlot = e.target.assignedElements({ flatten: true }).length > 0;
@@ -227,6 +257,11 @@ export class LyraCombobox extends LyraElement {
         this.updateValidity();
     }
     willUpdate() {
+        // `hasUpdated` flips to `true` before `updated()` even sees its first
+        // call, so it can't distinguish "just mounted" from "just changed" there
+        // -- capture that distinction here, while it's still reliable, for
+        // `updated()`'s `open`-handling below to consult.
+        this._isFirstUpdate = !this.hasUpdated;
         if (!this.hasUpdated) {
             this.hasHintSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'hint');
             this.hasErrorSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'error');
@@ -255,10 +290,19 @@ export class LyraCombobox extends LyraElement {
     }
     syncFormValue() {
         if (this.multiple) {
+            // A FormData form value submits under the keys baked into the FormData
+            // itself, bypassing the element's own `name` the way a plain string
+            // value would use it -- so an unnamed multi-select must contribute
+            // nothing (matching a nameless native `<select multiple>`) rather than
+            // inventing a shared key that would merge with any other unnamed
+            // combobox in the same form.
+            if (!this.name) {
+                this.internals.setFormValue(null);
+                return;
+            }
             const fd = new FormData();
-            const key = this.name || 'value';
             for (const v of this._selected)
-                fd.append(key, v);
+                fd.append(this.name, v);
             this.internals.setFormValue(fd);
         }
         else {
@@ -281,6 +325,7 @@ export class LyraCombobox extends LyraElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.cleanup?.();
+        clearTimeout(this.sourceTimer);
         document.removeEventListener('pointerdown', this.onDocPointer);
     }
     reflectSelected() {
@@ -339,33 +384,41 @@ export class LyraCombobox extends LyraElement {
         if (this.open || this.disabled)
             return;
         this.open = true;
-        this.emit('lyra-show');
-        document.addEventListener('pointerdown', this.onDocPointer);
     }
     hide() {
         if (!this.open)
             return;
         this.open = false;
         this.activeIndex = -1;
-        this.emit('lyra-hide');
-        document.removeEventListener('pointerdown', this.onDocPointer);
     }
     updated(changed) {
         if (changed.has('open')) {
             this.cleanup?.();
             this.cleanup = undefined;
+            // All `open`-driven side effects (positioning, the click-outside
+            // listener, and the lyra-show/lyra-hide events) live here rather than
+            // in show()/hide() so they fire however `open` became true -- via
+            // show()/hide()'s own user-interaction paths, or a consumer/test
+            // setting `el.open` directly, which bypasses both entirely.
             if (this.open) {
+                document.addEventListener('pointerdown', this.onDocPointer);
+                // Don't announce a "show" transition for markup that's simply
+                // rendering open for the first time (e.g. `<lyra-combobox open>`) --
+                // only for an actual closed-to-open transition.
+                if (!this._isFirstUpdate)
+                    this.emit('lyra-show');
                 const anchor = this.renderRoot.querySelector('[part="combobox"]');
                 const listbox = this.renderRoot.querySelector('[part="listbox"]');
                 if (anchor && listbox)
                     this.cleanup = place(anchor, listbox);
-                // Reacting to the `open` property itself (not just inside show())
-                // means this fires however `open` became true — via show()'s own
-                // user-interaction paths, or a consumer/test setting `el.open = true`
-                // directly, which bypasses show() entirely.
                 if (this.source && this.asyncRows.length === 0)
                     this.runSource(this.query);
             }
+            else {
+                document.removeEventListener('pointerdown', this.onDocPointer);
+                if (!this._isFirstUpdate)
+                    this.emit('lyra-hide');
+            }
         }
         if (changed.has('required'))
             this.updateValidity();
@@ -388,6 +441,12 @@ export class LyraCombobox extends LyraElement {
             this.query = '';
             this.hide();
         }
+        // The query resets to '' above but `asyncRows` doesn't refresh on its
+        // own -- re-run `source` so the listbox (still open in multiple mode,
+        // and whatever `asyncRows` holds for the next time it reopens in single
+        // mode) matches the now-empty input instead of the stale prior query.
+        if (this.source)
+            this.runSource(this.query);
         this.emit('input');
         this.emit('change');
     }
@@ -398,6 +457,8 @@ export class LyraCombobox extends LyraElement {
     clear() {
         this.value = [];
         this.query = '';
+        if (this.source)
+            this.runSource(this.query);
         this.emit('lyra-clear');
         this.emit('change');
     }
@@ -488,11 +549,13 @@ export class LyraCombobox extends LyraElement {
             id=${this.inputId}
             part="combobox-input"
             role="combobox"
-            aria-label=${this.label || this.placeholder || 'Combobox'}
+            aria-label=${this.getAttribute('aria-label') || this.label || this.placeholder || 'Combobox'}
             aria-expanded=${this.open ? 'true' : 'false'}
             aria-controls=${this.listId}
             aria-activedescendant=${activeId}
             aria-autocomplete="list"
+            aria-required=${this.required ? 'true' : 'false'}
+            aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
             autocomplete="off"
             .value=${this.displayValue}
             placeholder=${hasValue && !this.multiple ? '' : this.placeholder}
@@ -526,9 +589,9 @@ export class LyraCombobox extends LyraElement {
           @click=${this.onListboxClick}
         >
           ${this.loading
-            ? html `<div class="loading">Loading…</div>`
+            ? html `<div class="loading" role="option" aria-selected="false" aria-disabled="true">Loading…</div>`
             : rows.length === 0
-                ? html `<div class="empty">${this.emptyText}</div>`
+                ? html `<div class="empty" role="option" aria-selected="false" aria-disabled="true">${this.emptyText}</div>`
                 : html `${this.renderRows(rows, activeId)}
                   ${overflow > 0
                     ? html `<div part="option-overflow">+${overflow} more — refine your search</div>`

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

@@ -4,3 +4,21 @@ export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
 export declare const Multiple: Story;
+/**
+ * Rows come from `<lyra-option>` children plus `group` (section headers),
+ * `sub` (a secondary line), and `dot-color` (a leading status dot) — useful
+ * for richer pickers like a device or status list.
+ */
+export declare const RichRows: Story;
+/**
+ * `source` replaces the light-DOM `<lyra-option>` list with an async
+ * `(query) => Promise<ComboboxSourceRow[]>` lookup, debounced ~200ms after
+ * each keystroke. A "Loading…" row is shown while a call is in flight.
+ */
+export declare const AsyncSource: Story;
+/**
+ * `filter` overrides the default label/searchText matcher entirely, e.g. to
+ * match only from the start of the label instead of anywhere within it.
+ */
+export declare const CustomFilter: Story;
+export declare const States: Story;

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

@@ -25,3 +25,78 @@ export const Multiple = {
     </lyra-combobox>
   `,
 };
+/**
+ * Rows come from `<lyra-option>` children plus `group` (section headers),
+ * `sub` (a secondary line), and `dot-color` (a leading status dot) — useful
+ * for richer pickers like a device or status list.
+ */
+export const RichRows = {
+    render: () => html `
+    <lyra-combobox 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-combobox>
+  `,
+};
+/**
+ * `source` replaces the light-DOM `<lyra-option>` list with an async
+ * `(query) => Promise<ComboboxSourceRow[]>` lookup, debounced ~200ms after
+ * each keystroke. A "Loading…" row is shown while a call is in flight.
+ */
+export const AsyncSource = {
+    render: () => {
+        const all = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
+        const source = async (query) => {
+            await new Promise((r) => setTimeout(r, 400));
+            return all
+                .filter((label) => label.toLowerCase().includes(query.toLowerCase()))
+                .map((label) => ({ value: label.toLowerCase(), label }));
+        };
+        return html `
+      <lyra-combobox label="Fruit (async)" placeholder="Type to search…" with-clear
+        style="max-width: 22rem" .source=${source}
+      ></lyra-combobox>
+    `;
+    },
+};
+/**
+ * `filter` overrides the default label/searchText matcher entirely, e.g. to
+ * match only from the start of the label instead of anywhere within it.
+ */
+export const CustomFilter = {
+    render: () => {
+        const startsWith = (option, query) => option.label.toLowerCase().startsWith(query.toLowerCase());
+        return html `
+      <lyra-combobox label="Fruit (starts with…)" placeholder="Try “an”…" style="max-width: 22rem"
+        .filter=${startsWith}
+      >
+        <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 States = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 1.5rem; max-width: 22rem">
+      <lyra-combobox label="Disabled" disabled placeholder="Can't touch this">
+        <lyra-option value="a">Apple</lyra-option>
+      </lyra-combobox>
+      <lyra-combobox label="Required" required hint="Pick your favorite">
+        <lyra-option value="a">Apple</lyra-option>
+      </lyra-combobox>
+      <lyra-combobox label="Invalid" required error-text="Selection required">
+        <lyra-option value="a">Apple</lyra-option>
+      </lyra-combobox>
+    </div>
+  `,
+};

package/dist/components/date-picker/calendar-core.js

@@ -5,8 +5,19 @@ export function parseISO(s) {
     const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s.trim());
     if (!m)
         return null;
-    const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
-    return isNaN(d.getTime()) ? null : d;
+    const year = Number(m[1]);
+    const month = Number(m[2]);
+    const day = Number(m[3]);
+    const d = new Date(year, month - 1, day);
+    if (isNaN(d.getTime()))
+        return null;
+    // The Date constructor silently rolls invalid components over into the
+    // next month/year (e.g. month 13 or Feb 30) instead of producing an
+    // invalid date, so a calendar-invalid input must be caught by comparing
+    // the constructed date back against what was actually typed.
+    if (d.getFullYear() !== year || d.getMonth() !== month - 1 || d.getDate() !== day)
+        return null;
+    return d;
 }
 /** Format a Date as local `YYYY-MM-DD`. */
 export function formatISO(d) {

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

@@ -16,8 +16,10 @@ declare const LyraDateInput_base: typeof LyraElement & (new (...args: any[]) =>
  * @event change - Fired on committed date transitions.
  * @event lyra-show / lyra-hide - Calendar popover lifecycle.
  * @event lyra-clear - The clear button was used.
- * @csspart form-control, form-control-label, input-wrapper, input, clear-button, expand-button, popup, date-picker, hint, error
+ * @csspart form-control, form-control-label, input-wrapper, input, clear-button, expand-button, expand-icon, popup, date-picker, hint, error
+ * @slot label - Custom label content.
  * @slot error - Custom error content.
+ * @slot hint - Custom hint content.
  */
 export declare class LyraDateInput extends LyraDateInput_base {
     static styles: import("lit").CSSResultGroup[];
@@ -35,8 +37,12 @@ export declare class LyraDateInput extends LyraDateInput_base {
     months: 1 | 2;
     firstDayOfWeek: string;
     weekdayFormat: WeekdayFormat;
+    disablePast: boolean;
+    disableFuture: boolean;
+    withOutsideDays: boolean;
     private cleanupFn?;
     private inputId;
+    private popupId;
     private touched;
     private hasHintSlot;
     private hasErrorSlot;
@@ -54,10 +60,12 @@ export declare class LyraDateInput extends LyraDateInput_base {
     protected updated(changed: PropertyValues): void;
     private onInputChange;
     private onInputKey;
+    private onFormControlKey;
     private onInputBlur;
     private onHintSlotChange;
     private onErrorSlotChange;
     private onLabelSlotChange;
+    private onPickerInput;
     private onPickerChange;
     render(): TemplateResult;
 }