@aceshooting/lyra-ui 1.0.1 → 1.2.0

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

@@ -29,8 +29,10 @@ import './date-picker.js';
  * @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 class LyraDateInput extends FormAssociated(LyraElement) {
     constructor() {
@@ -49,7 +51,11 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
         this.months = 1;
         this.firstDayOfWeek = 'auto';
         this.weekdayFormat = 'short';
+        this.disablePast = false;
+        this.disableFuture = false;
+        this.withOutsideDays = false;
         this.inputId = nextId('date-input');
+        this.popupId = nextId('date-popup');
         // Set on the date input's first `blur`; gates the `data-invalid`
         // reflection below so validity styling never flashes on first render.
         this.touched = false;
@@ -78,7 +84,13 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
                 this.emit('change');
                 return;
             }
-            const parsed = parseISO(raw) ?? (isNaN(Date.parse(raw)) ? null : new Date(Date.parse(raw)));
+            // A string that already looks like strict ISO (YYYY-MM-DD) must be judged
+            // by parseISO alone: it validates calendar correctness (rejects e.g.
+            // "2026-02-30"), but Date.parse() doesn't -- falling through to it for an
+            // ISO-shaped string would silently resurrect the same rollover parseISO
+            // guards against (Date.parse('2026-02-30') also normalizes to March 2).
+            const looksLikeISO = /^\d{4}-\d{2}-\d{2}$/.test(raw);
+            const parsed = looksLikeISO ? parseISO(raw) : isNaN(Date.parse(raw)) ? null : new Date(Date.parse(raw));
             if (parsed) {
                 this.value = formatISO(parsed);
                 this.emit('input');
@@ -100,6 +112,17 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
                 this.show();
             }
         };
+        // Attached to the whole form-control, not just the text input, so Escape
+        // closes the popover from anywhere inside it -- including the nested
+        // picker's own day/nav buttons, which take real DOM focus (roving
+        // tabindex) rather than the input keeping focus throughout.
+        this.onFormControlKey = (e) => {
+            if (e.key === 'Escape' && this.open) {
+                e.preventDefault();
+                this.hide();
+                this.renderRoot.querySelector('[part="expand-button"]')?.focus();
+            }
+        };
         this.onInputBlur = () => {
             this.touched = true;
         };
@@ -112,14 +135,25 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
         this.onLabelSlotChange = (e) => {
             this.hasLabelSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
-        this.onPickerChange = (e) => {
+        // The nested picker's `input` event isn't wired anywhere else, so without
+        // this listener it bubbles+composes straight through this shadow boundary
+        // (LyraElement.emit always dispatches bubbles:true, composed:true) and
+        // fires on this host a *second* time, on top of the explicit emit below.
+        this.onPickerInput = (e) => {
             e.stopPropagation();
             const picker = e.target;
             this.value = picker.value;
             this.emit('input');
+        };
+        this.onPickerChange = (e) => {
+            e.stopPropagation();
+            const picker = e.target;
+            this.value = picker.value;
             this.emit('change');
-            if (this.mode === 'single')
-                this.hide();
+            // The picker only fires `change` once a selection is finalized (a single
+            // pick, or the second click of a range), so this is always the right
+            // moment to close, in either mode.
+            this.hide();
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
@@ -189,7 +223,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
         const hasError = this.hasErrorSlot || this.errorText.length > 0;
         const hasLabel = this.hasLabelSlot || this.label.length > 0;
         return html `
-      <div part="form-control">
+      <div part="form-control" @keydown=${this.onFormControlKey}>
         <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
           ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
         </label>
@@ -223,13 +257,14 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             aria-label="Open calendar"
             aria-haspopup="dialog"
             aria-expanded=${this.open ? 'true' : 'false'}
+            aria-controls=${this.popupId}
             ?disabled=${this.disabled || this.readonly}
             @click=${() => (this.open ? this.hide() : this.show())}
           >
             <span part="expand-icon" aria-hidden="true">${calendarIcon()}</span>
           </button>
         </div>
-        <div part="popup" role="dialog" aria-label="Choose date">
+        <div id=${this.popupId} part="popup" role="dialog" aria-label="Choose date">
           <lyra-date-picker
             part="date-picker"
             .value=${this.value}
@@ -240,8 +275,12 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             .locale=${this.locale}
             .disabled=${this.disabled}
             .readonly=${this.readonly}
+            .disablePast=${this.disablePast}
+            .disableFuture=${this.disableFuture}
+            .withOutsideDays=${this.withOutsideDays}
             first-day-of-week=${this.firstDayOfWeek}
             weekday-format=${this.weekdayFormat}
+            @input=${this.onPickerInput}
             @change=${this.onPickerChange}
           ></lyra-date-picker>
         </div>
@@ -297,6 +336,15 @@ __decorate([
 __decorate([
     property({ attribute: 'weekday-format' })
 ], LyraDateInput.prototype, "weekdayFormat", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-past' })
+], LyraDateInput.prototype, "disablePast", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-future' })
+], LyraDateInput.prototype, "disableFuture", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'with-outside-days' })
+], LyraDateInput.prototype, "withOutsideDays", void 0);
 __decorate([
     state()
 ], LyraDateInput.prototype, "touched", void 0);

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

@@ -3,3 +3,8 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
+export declare const MinMax: Story;
+export declare const DisablePast: Story;
+export declare const DisableFuture: Story;
+export declare const Range: Story;
+export declare const WithOutsideDays: Story;

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

@@ -10,3 +10,39 @@ export const Default = {
     <lyra-date-input label="Start date" with-clear style="max-width: 16rem"></lyra-date-input>
   `,
 };
+export const MinMax = {
+    render: () => html `
+    <lyra-date-input
+      label="Appointment date"
+      min="2026-07-10"
+      max="2026-07-20"
+      value="2026-07-15"
+      style="max-width: 16rem"
+    ></lyra-date-input>
+  `,
+};
+export const DisablePast = {
+    render: () => html `
+    <lyra-date-input label="Upcoming date" disable-past style="max-width: 16rem"></lyra-date-input>
+  `,
+};
+export const DisableFuture = {
+    render: () => html `
+    <lyra-date-input label="Historical date" disable-future style="max-width: 16rem"></lyra-date-input>
+  `,
+};
+export const Range = {
+    render: () => html `
+    <lyra-date-input label="Trip dates" mode="range" months="2" style="max-width: 20rem"></lyra-date-input>
+  `,
+};
+export const WithOutsideDays = {
+    render: () => html `
+    <lyra-date-input
+      label="Meeting date"
+      with-outside-days
+      value="2026-07-15"
+      style="max-width: 16rem"
+    ></lyra-date-input>
+  `,
+};

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);