@aceshooting/lyra-ui 1.0.0 → 1.1.0

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

@@ -14,8 +14,8 @@ export interface DateRange {
  * @customElement lyra-date-picker
  * @event change - The user committed a value.
  * @event input - The value changed during interaction (range: after the first click).
- * @csspart base, month, header, title, previous, next, weekdays, weekday, grid
- * @csspart day, day-today, day-outside, day-selected, day-range-start, day-range-end, day-range-inner
+ * @csspart base, month, header, title, previous, next, weekdays, weekday, grid, week
+ * @csspart day, day-today, day-outside, day-selected, day-range-start, day-range-end, day-range-inner, day-placeholder
  */
 export declare class LyraDatePicker extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -36,6 +36,7 @@ export declare class LyraDatePicker extends LyraElement {
     private viewDate;
     private focusedDate;
     private focusPending;
+    private suppressViewSync;
     get selection(): DateRange;
     /** Read-only Date view of a single-mode value. */
     get valueAsDate(): Date | null;
@@ -48,10 +49,17 @@ export declare class LyraDatePicker extends LyraElement {
     clear(): void;
     /** Navigate to today and focus it. */
     goToToday(): void;
-    /** Navigate the view to a date and focus it. */
+    /** Navigate the view to a date and focus it, clamped to `min`/`max`. */
     goToDate(date: string | Date): void;
     private nav;
     private onGridKey;
+    /**
+     * The anchor month for a newly-focused date, sliding the view by the
+     * minimum amount needed to bring it into view. With `months` > 1, a date
+     * that's already visible in a later grid must not discard an earlier grid
+     * that's already on-screen.
+     */
+    private viewDateForFocus;
     protected updated(): void;
     private renderDay;
     private renderMonth;

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

@@ -4,13 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { chevronIcon } from '../../internal/icons.js';
 import { styles } from './date-picker.styles.js';
-import { monthMatrix, weekdayLabels, monthTitle, formatISO, parseISO, isSameDay, addMonths, resolveFirstDayOfWeek, } from './calendar-core.js';
+import { monthMatrix, weekdayLabels, monthTitle, formatISO, parseISO, isSameDay, addMonths, clampDate, resolveFirstDayOfWeek, } from './calendar-core.js';
 /**
  * `<lyra-date-picker>` — an inline month-grid calendar for picking a single date
  * or a date range. Mirrors the core `<wa-date-picker>` API under `lyra-`.
@@ -20,8 +20,8 @@ import { monthMatrix, weekdayLabels, monthTitle, formatISO, parseISO, isSameDay,
  * @customElement lyra-date-picker
  * @event change - The user committed a value.
  * @event input - The value changed during interaction (range: after the first click).
- * @csspart base, month, header, title, previous, next, weekdays, weekday, grid
- * @csspart day, day-today, day-outside, day-selected, day-range-start, day-range-end, day-range-inner
+ * @csspart base, month, header, title, previous, next, weekdays, weekday, grid, week
+ * @csspart day, day-today, day-outside, day-selected, day-range-start, day-range-end, day-range-inner, day-placeholder
  */
 export class LyraDatePicker extends LyraElement {
     constructor() {
@@ -43,6 +43,12 @@ export class LyraDatePicker extends LyraElement {
         this.viewDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
         this.focusedDate = null;
         this.focusPending = false;
+        // Set right before `commit()` assigns `value`, so `willUpdate` can tell its
+        // own write apart from an external assignment. Internal commits already
+        // know the right date is on-screen (it's the cell the user just clicked, or
+        // the view the user navigated to), so they must not force the view back to
+        // `selection.from`'s month -- only an externally-set `value` should do that.
+        this.suppressViewSync = false;
         this.onGridKey = (e) => {
             const current = this.focusedDate ?? this.selection.from ?? new Date();
             let next = null;
@@ -81,7 +87,7 @@ export class LyraDatePicker extends LyraElement {
             }
             e.preventDefault();
             this.focusedDate = next;
-            this.viewDate = new Date(next.getFullYear(), next.getMonth(), 1);
+            this.viewDate = this.viewDateForFocus(next);
             this.focusPending = true;
         };
     }
@@ -95,26 +101,26 @@ export class LyraDatePicker extends LyraElement {
         return this.mode === 'single' ? this.selection.from : null;
     }
     willUpdate(changed) {
-        if (changed.has('value') && this.value) {
-            const from = this.selection.from;
-            if (from)
-                this.viewDate = new Date(from.getFullYear(), from.getMonth(), 1);
+        if (changed.has('value')) {
+            const external = !this.suppressViewSync;
+            this.suppressViewSync = false;
+            if (external && this.value) {
+                const from = this.selection.from;
+                if (from)
+                    this.viewDate = new Date(from.getFullYear(), from.getMonth(), 1);
+            }
         }
     }
     get fdow() {
         return resolveFirstDayOfWeek(this.firstDayOfWeek, this.locale);
     }
-    isDisabled(d) {
+    isDisabled(d, min, max, today) {
         if (this.disabled || this.readonly)
             return true;
-        const min = parseISO(this.min);
-        const max = parseISO(this.max);
         if (min && d < min)
             return true;
         if (max && d > max)
             return true;
-        const today = new Date();
-        today.setHours(0, 0, 0, 0);
         if (this.disablePast && d < today)
             return true;
         if (this.disableFuture && d > today)
@@ -122,22 +128,31 @@ export class LyraDatePicker extends LyraElement {
         return false;
     }
     commit(from, to, fire) {
-        this.value =
-            this.mode === 'range'
-                ? from && to
-                    ? `${formatISO(from)}/${formatISO(to)}`
-                    : from
-                        ? formatISO(from)
-                        : ''
+        const next = this.mode === 'range'
+            ? from && to
+                ? `${formatISO(from)}/${formatISO(to)}`
                 : from
                     ? formatISO(from)
-                    : '';
+                    : ''
+            : from
+                ? formatISO(from)
+                : '';
+        // Only arm the suppression when `value` is actually about to change --
+        // that's the only case `willUpdate` will see `changed.has('value')` and
+        // get a chance to consume (and clear) the flag.
+        if (next !== this.value)
+            this.suppressViewSync = true;
+        this.value = next;
         this.emit('input');
         if (fire)
             this.emit('change');
     }
     selectDate(date) {
-        if (this.isDisabled(date))
+        const min = parseISO(this.min);
+        const max = parseISO(this.max);
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        if (this.isDisabled(date, min, max, today))
             return;
         this.focusedDate = date;
         if (this.mode === 'range') {
@@ -165,18 +180,35 @@ export class LyraDatePicker extends LyraElement {
     goToToday() {
         this.goToDate(new Date());
     }
-    /** Navigate the view to a date and focus it. */
+    /** Navigate the view to a date and focus it, clamped to `min`/`max`. */
     goToDate(date) {
         const d = typeof date === 'string' ? parseISO(date) : date;
         if (!d)
             return;
-        this.viewDate = new Date(d.getFullYear(), d.getMonth(), 1);
-        this.focusedDate = d;
+        const clamped = clampDate(d, parseISO(this.min), parseISO(this.max));
+        this.viewDate = new Date(clamped.getFullYear(), clamped.getMonth(), 1);
+        this.focusedDate = clamped;
         this.focusPending = true;
     }
     nav(delta) {
         this.viewDate = addMonths(this.viewDate, delta);
     }
+    /**
+     * The anchor month for a newly-focused date, sliding the view by the
+     * minimum amount needed to bring it into view. With `months` > 1, a date
+     * that's already visible in a later grid must not discard an earlier grid
+     * that's already on-screen.
+     */
+    viewDateForFocus(next) {
+        const firstMonth = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1);
+        const nextMonth = new Date(next.getFullYear(), next.getMonth(), 1);
+        const lastMonth = addMonths(firstMonth, this.months - 1);
+        if (nextMonth < firstMonth)
+            return nextMonth;
+        if (nextMonth > lastMonth)
+            return addMonths(nextMonth, -(this.months - 1));
+        return firstMonth;
+    }
     updated() {
         if (this.focusPending && this.focusedDate) {
             this.focusPending = false;
@@ -185,16 +217,24 @@ export class LyraDatePicker extends LyraElement {
             cell?.focus();
         }
     }
-    renderDay(date, shownMonth) {
+    renderDay(date, shownMonth, selection, min, max, today, rowHasVisibleDay) {
         const outside = date.getMonth() !== shownMonth;
         // Outside-month days are empty placeholders by default (matches WA), keeping the
         // 6-row grid aligned without low-contrast faded numbers.
         if (outside && !this.withOutsideDays) {
-            return html `<span part="day-placeholder" role="gridcell"></span>`;
+            // role="gridcell" stays either way. A trailing week can land entirely
+            // outside the shown month (monthMatrix always emits 6 rows of 7), and
+            // ARIA's row role requires at least one visible gridcell descendant --
+            // so only rows that already have a real, visible day cell may hide
+            // their placeholders from the accessibility tree.
+            return html `<span
+        part="day-placeholder"
+        role="gridcell"
+        aria-hidden=${rowHasVisibleDay ? 'true' : nothing}
+      ></span>`;
         }
-        const { from, to } = this.selection;
-        const disabled = this.isDisabled(date);
-        const today = new Date();
+        const { from, to } = selection;
+        const disabled = this.isDisabled(date, min, max, today);
         const isToday = isSameDay(date, today);
         const isStart = from && isSameDay(date, from);
         const isEnd = to && isSameDay(date, to);
@@ -232,12 +272,11 @@ export class LyraDatePicker extends LyraElement {
       ${date.getDate()}
     </button>`;
     }
-    renderMonth(offset) {
+    renderMonth(offset, selection, min, max, today, fdow, labels) {
         const base = addMonths(this.viewDate, offset);
         const year = base.getFullYear();
         const month = base.getMonth();
-        const matrix = monthMatrix(year, month, this.fdow);
-        const labels = weekdayLabels(this.fdow, this.weekdayFormat, this.locale);
+        const matrix = monthMatrix(year, month, fdow);
         const isFirst = offset === 0;
         const isLast = offset === this.months - 1;
         return html `<div part="month">
@@ -256,14 +295,25 @@ export class LyraDatePicker extends LyraElement {
       </div>
       <div part="weekdays">${labels.map((l) => html `<span part="weekday">${l}</span>`)}</div>
       <div part="grid" role="grid" @keydown=${this.onGridKey}>
-        ${matrix.map((week) => html `<div part="week" role="row">${week.map((d) => this.renderDay(d, month))}</div>`)}
+        ${matrix.map((week) => {
+            const rowHasVisibleDay = week.some((d) => d.getMonth() === month);
+            return html `<div part="week" role="row">${week.map((d) => this.renderDay(d, month, selection, min, max, today, rowHasVisibleDay))}</div>`;
+        })}
       </div>
     </div>`;
     }
     render() {
+        const selection = this.selection;
+        const min = parseISO(this.min);
+        const max = parseISO(this.max);
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const fdow = this.fdow;
+        const labels = weekdayLabels(fdow, this.weekdayFormat, this.locale);
         const monthEls = [];
-        for (let i = 0; i < this.months; i++)
-            monthEls.push(this.renderMonth(i));
+        for (let i = 0; i < this.months; i++) {
+            monthEls.push(this.renderMonth(i, selection, min, max, today, fdow, labels));
+        }
         return html `<div part="base">${monthEls}</div>`;
     }
 }

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

@@ -4,3 +4,7 @@ export default meta;
 type Story = StoryObj;
 export declare const Single: Story;
 export declare const Range: Story;
+export declare const MinMax: Story;
+export declare const DisablePast: Story;
+export declare const DisableFuture: Story;
+export declare const WithOutsideDays: Story;

package/dist/components/date-picker/date-picker.stories.js

@@ -11,3 +11,15 @@ export const Single = {
 export const Range = {
     render: () => html `<lyra-date-picker mode="range" months="2"></lyra-date-picker>`,
 };
+export const MinMax = {
+    render: () => html `<lyra-date-picker min="2026-07-10" max="2026-07-20" value="2026-07-15"></lyra-date-picker>`,
+};
+export const DisablePast = {
+    render: () => html `<lyra-date-picker disable-past></lyra-date-picker>`,
+};
+export const DisableFuture = {
+    render: () => html `<lyra-date-picker disable-future></lyra-date-picker>`,
+};
+export const WithOutsideDays = {
+    render: () => html `<lyra-date-picker with-outside-days value="2026-07-15"></lyra-date-picker>`,
+};

package/dist/components/date-picker/date-picker.styles.js

@@ -102,7 +102,7 @@ export const styles = css `
   }
   [part~='day']:disabled {
     color: var(--lyra-color-text-quiet);
-    opacity: 0.35;
+    opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
   }
   [part~='day']:focus-visible {

package/dist/components/empty/empty.d.ts

@@ -7,7 +7,11 @@ import { LyraElement } from '../../internal/lyra-element.js';
  * @customElement lyra-empty
  * @slot - Custom icon or illustration (defaults to none).
  * @slot actions - Buttons/links shown below the description.
- * @csspart base, icon, heading, description, actions
+ * @csspart base - The outer container.
+ * @csspart icon - The wrapper around the default-slotted icon/illustration.
+ * @csspart heading - The heading paragraph.
+ * @csspart description - The description paragraph.
+ * @csspart actions - The wrapper around the `actions`-slotted content.
  */
 export declare class LyraEmpty extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -15,6 +19,13 @@ export declare class LyraEmpty extends LyraElement {
     heading: string;
     /** Supporting copy, e.g. "Try a different search." */
     description: string;
+    /**
+     * Compact rendering for use inside a constrained space (e.g. a widget body
+     * or table cell) rather than as a full-page state: left-aligned, tighter
+     * padding, and a lighter heading weight instead of the centered/spacious
+     * default.
+     */
+    compact: boolean;
     private hasIcon;
     private hasActions;
     protected willUpdate(): void;

package/dist/components/empty/empty.js

@@ -16,7 +16,11 @@ import { styles } from './empty.styles.js';
  * @customElement lyra-empty
  * @slot - Custom icon or illustration (defaults to none).
  * @slot actions - Buttons/links shown below the description.
- * @csspart base, icon, heading, description, actions
+ * @csspart base - The outer container.
+ * @csspart icon - The wrapper around the default-slotted icon/illustration.
+ * @csspart heading - The heading paragraph.
+ * @csspart description - The description paragraph.
+ * @csspart actions - The wrapper around the `actions`-slotted content.
  */
 export class LyraEmpty extends LyraElement {
     constructor() {
@@ -25,6 +29,13 @@ export class LyraEmpty extends LyraElement {
         this.heading = '';
         /** Supporting copy, e.g. "Try a different search." */
         this.description = '';
+        /**
+         * Compact rendering for use inside a constrained space (e.g. a widget body
+         * or table cell) rather than as a full-page state: left-aligned, tighter
+         * padding, and a lighter heading weight instead of the centered/spacious
+         * default.
+         */
+        this.compact = false;
         // `[part='icon']:empty` never matches because the part always contains a
         // `<slot>` element (CSS `:empty` only ignores text/comment nodes). Track
         // real slot assignment in JS instead and key the CSS off these instead.
@@ -44,7 +55,10 @@ export class LyraEmpty extends LyraElement {
         // `firstUpdated` (after the update completes) would schedule a second,
         // wasted update (Lit's dev-mode "change-in-update" warning).
         if (!this.hasUpdated) {
-            this.hasIcon = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
+            // An explicit `slot=""` still assigns to the default slot per the HTML
+            // slot algorithm, so check the attribute's value rather than its mere
+            // presence.
+            this.hasIcon = Array.from(this.children).some((el) => !el.getAttribute('slot'));
             this.hasActions = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
         }
     }
@@ -64,7 +78,7 @@ export class LyraEmpty extends LyraElement {
     }
     render() {
         return html `
-      <div part="base">
+      <div part="base" role="status" aria-live="polite">
         <div part="icon" ?hidden=${!this.hasIcon}><slot @slotchange=${this.onIconSlotChange}></slot></div>
         <p part="heading">${this.heading}</p>
         <p part="description">${this.description}</p>
@@ -81,6 +95,9 @@ __decorate([
 __decorate([
     property()
 ], LyraEmpty.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraEmpty.prototype, "compact", void 0);
 __decorate([
     state()
 ], LyraEmpty.prototype, "hasIcon", void 0);

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

@@ -3,3 +3,5 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const Compact: Story;

package/dist/components/empty/empty.stories.js

@@ -12,3 +12,23 @@ export const Default = {
     </lyra-empty>
   `,
 };
+export const WithIcon = {
+    render: () => html `
+    <lyra-empty heading="No results" description="Try a different search.">
+      <svg slot="" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+        <circle cx="11" cy="11" r="7" stroke-width="2"></circle>
+        <path d="M21 21l-4.35-4.35" stroke-width="2" stroke-linecap="round"></path>
+      </svg>
+      <span slot="actions"><button>Reset</button></span>
+    </lyra-empty>
+  `,
+};
+export const Compact = {
+    render: () => html `
+    <div style="max-width: 16rem; border: 1px solid var(--lyra-color-border);">
+      <lyra-empty compact heading="No results" description="Try a different search.">
+        <span slot="actions"><button>Reset</button></span>
+      </lyra-empty>
+    </div>
+  `,
+};

package/dist/components/empty/empty.styles.js

@@ -13,6 +13,11 @@ export const styles = css `
     color: var(--lyra-color-text-quiet);
     inline-size: 100%;
   }
+  :host([compact]) [part='base'] {
+    align-items: flex-start;
+    text-align: start;
+    padding: var(--lyra-space-xs);
+  }
   [part='icon'] {
     font-size: 2rem;
     line-height: 1;
@@ -26,6 +31,12 @@ export const styles = css `
     color: var(--lyra-color-text);
     margin: 0;
   }
+  [part='heading']:empty {
+    display: none;
+  }
+  :host([compact]) [part='heading'] {
+    font-weight: 400;
+  }
   [part='description'] {
     font-size: 0.875rem;
     margin: 0;

package/dist/components/export-button/csv.js

@@ -1,5 +1,9 @@
-const UNSAFE_LEADING = /^[=+\-@\t\r]/;
-const NEEDS_QUOTING = /[",\n]/;
+// A bare leading '-' is not itself formula syntax (only '=', and context-dependent '+'/'@',
+// reliably trigger spreadsheet formula evaluation) — guarding it forces text rendering on
+// ordinary negative numbers/currency. Per OWASP CSV-injection guidance, '-' is intentionally
+// excluded here.
+const UNSAFE_LEADING = /^[=+@\t\r]/;
+const NEEDS_QUOTING = /[",\r\n]/;
 /** Escapes a CSV field: quotes as needed, guards against formula injection. */
 export function escapeCsvField(value) {
     let s = value == null ? '' : String(value);

package/dist/components/export-button/export-button.d.ts

@@ -11,7 +11,9 @@ export type ExportFormat = 'csv' | 'json';
  * @event lyra-export - `detail: { format }`, cancelable — call `preventDefault()`
  *   to substitute the built-in client-side download with a server-generated one.
  * @event lyra-export-complete - Fired after a non-cancelled download completes.
- * @csspart trigger, menu, menu-item
+ * @csspart trigger - The button that triggers the export (or opens the format menu).
+ * @csspart menu - The format-choice menu, shown when more than one format is configured.
+ * @csspart menu-item - A single format option inside the menu.
  */
 export declare class LyraExportButton extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -22,14 +24,26 @@ export declare class LyraExportButton extends LyraElement {
     disabled: boolean;
     label: string;
     open: boolean;
+    private triggerEl?;
+    private menuEl?;
+    private readonly menuId;
     private cleanup?;
+    /** Which menu item to focus the next time `open` flips true; reset after use. */
+    private pendingMenuFocusIndex;
     disconnectedCallback(): void;
     private onDocPointer;
     private openMenu;
     private closeMenu;
+    private menuItemEls;
+    /** Focuses the menu item at `index` (clamped), if the menu is already open and rendered. */
+    private focusMenuItem;
+    /** Opens the menu (if closed) and focuses `index`, or moves focus there directly if already open. */
+    private focusMenuItemOnOpen;
     private onKeyDown;
     protected firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
+    /** Applies the same `columns` allow-list CSV exports use, so JSON can't leak fields CSV hides. */
+    private rowsForExport;
     private doExport;
     private onTriggerClick;
     render(): TemplateResult;