@aceshooting/lyra-ui 1.0.0 → 1.1.0

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');
     }
@@ -493,6 +554,8 @@ export class LyraCombobox extends LyraElement {
             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;
 }

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>
+  `,
+};