@aceshooting/lyra-ui 0.1.0 → 0.1.2

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

@@ -14,6 +14,7 @@ export type OptionFilter = (option: LyraOption, query: string) => boolean;
  * @slot - `<lyra-option>` elements.
  * @slot label - Custom label content.
  * @slot hint - Custom hint content.
+ * @slot error - Custom error content.
  * @event change - The selection changed.
  * @event input - The user typed in the filter or changed the selection.
  * @event lyra-show - The listbox opened.
@@ -27,6 +28,7 @@ export type OptionFilter = (option: LyraOption, query: string) => boolean;
  * @csspart tag - An individual selected tag.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The dropdown indicator.
+ * @csspart error - The error message.
  */
 export declare class LyraCombobox extends LyraElement {
     static formAssociated: boolean;
@@ -43,6 +45,7 @@ export declare class LyraCombobox extends LyraElement {
     name: string;
     label: string;
     hint: string;
+    errorText: string;
     open: boolean;
     withClear: boolean;
     maxOptionsVisible: number;
@@ -51,14 +54,23 @@ export declare class LyraCombobox extends LyraElement {
     private query;
     private activeIndex;
     private options;
+    private touched;
+    private hasHintSlot;
+    private hasErrorSlot;
+    private hasLabelSlot;
     private internals;
     private listId;
     private cleanup?;
     private _selected;
+    private _defaultSelected;
+    private _defaultCaptured;
     constructor();
+    connectedCallback(): void;
+    protected willUpdate(): void;
     /** The selected value(s): a string in single mode, a string[] in `multiple` mode. */
     get value(): string | string[];
     set value(next: string | string[]);
+    private updateValidity;
     private syncFormValue;
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
@@ -78,6 +90,10 @@ export declare class LyraCombobox extends LyraElement {
     private removeValue;
     private clear;
     private onInput;
+    private onInputBlur;
+    private onHintSlotChange;
+    private onErrorSlotChange;
+    private onLabelSlotChange;
     private onKeyDown;
     private onComboMouseDown;
     private renderRows;

package/dist/components/combobox/combobox.js

@@ -10,6 +10,7 @@ import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { place } from '../../internal/positioner.js';
 import { nextId } from '../../internal/a11y.js';
+import { chevronIcon, closeIcon } from '../../internal/icons.js';
 import { styles } from './combobox.styles.js';
 import { LyraOption } from './option.js';
 import './option.js';
@@ -24,6 +25,7 @@ import './option.js';
  * @slot - `<lyra-option>` elements.
  * @slot label - Custom label content.
  * @slot hint - Custom hint content.
+ * @slot error - Custom error content.
  * @event change - The selection changed.
  * @event input - The user typed in the filter or changed the selection.
  * @event lyra-show - The listbox opened.
@@ -37,6 +39,7 @@ import './option.js';
  * @csspart tag - An individual selected tag.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The dropdown indicator.
+ * @csspart error - The error message.
  */
 export class LyraCombobox extends LyraElement {
     static { this.formAssociated = true; }
@@ -53,6 +56,7 @@ export class LyraCombobox extends LyraElement {
         this.name = '';
         this.label = '';
         this.hint = '';
+        this.errorText = '';
         this.open = false;
         this.withClear = false;
         this.maxOptionsVisible = 3;
@@ -61,13 +65,53 @@ export class LyraCombobox extends LyraElement {
         this.query = '';
         this.activeIndex = -1;
         this.options = [];
+        // Set on the combobox input's first `blur`; gates the `data-invalid`
+        // reflection below so validity styling never flashes on first render.
+        this.touched = false;
+        // `[part]:empty` never matches — the part always contains a literal
+        // `<slot>` child element regardless of assigned content — so real
+        // emptiness is tracked in JS instead (same fix as lyra-stat's
+        // icon/caption, commit 6c1004c) and reflected via `hidden`. Applies to
+        // `form-control-label` too: the required-asterisk `::after` attaches to
+        // that box, so leaving it always-visible orphans a stray ' *' when no
+        // `label` is set.
+        this.hasHintSlot = false;
+        this.hasErrorSlot = false;
+        this.hasLabelSlot = false;
         this.listId = nextId('combobox-list');
         this._selected = [];
+        // What `form.reset()` restores to. Captured exactly once, from whatever
+        // `<lyra-option selected>` markup was present the first time slotted
+        // options are collected (mirrors native `<select><option selected>`) —
+        // never from the `value` setter, so a user picking an option (even the
+        // very first pick on an initially-unselected combobox) can't itself
+        // become the reset default (native `defaultValue`/`defaultSelected`
+        // semantics: only declarative/attribute state feeds the default, plain
+        // property assignment never does).
+        this._defaultSelected = [];
+        this._defaultCaptured = false;
         this.collectOptions = (e) => {
             const slot = e.target;
             this.options = slot
                 .assignedElements({ flatten: true })
                 .filter((el) => el instanceof LyraOption);
+            if (!this._defaultCaptured) {
+                this._defaultCaptured = true;
+                // Seed the initial selection — and the reset default — from
+                // declarative `<lyra-option selected>` markup — mirrors native
+                // `<select><option selected>` — the exact case the audit found
+                // silently ignored (forms-core §combobox, Medium). This is the only
+                // place `_defaultSelected` is set; picking an option later (the
+                // `value` setter) never redefines the reset default, so an
+                // initially-unselected combobox always resets back to empty even
+                // after the user has picked something.
+                const declared = this.options.filter((o) => o.selected).map((o) => o.value);
+                this._defaultSelected = [...declared];
+                if (declared.length) {
+                    this.value = this.multiple ? declared : declared[0];
+                    return; // `value=`'s setter already called reflectSelected()
+                }
+            }
             this.reflectSelected();
         };
         this.onDocPointer = (e) => {
@@ -80,6 +124,18 @@ export class LyraCombobox extends LyraElement {
             this.show();
             this.emit('input');
         };
+        this.onInputBlur = () => {
+            this.touched = true;
+        };
+        this.onHintSlotChange = (e) => {
+            this.hasHintSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onErrorSlotChange = (e) => {
+            this.hasErrorSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onLabelSlotChange = (e) => {
+            this.hasLabelSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
         this.onKeyDown = (e) => {
             const opts = this.filtered.filter((o) => !o.disabled);
             switch (e.key) {
@@ -135,6 +191,17 @@ export class LyraCombobox extends LyraElement {
         };
         this.internals = this.attachInternals();
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateValidity();
+    }
+    willUpdate() {
+        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');
+            this.hasLabelSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'label');
+        }
+    }
     /** The selected value(s): a string in single mode, a string[] in `multiple` mode. */
     get value() {
         return this.multiple ? [...this._selected] : (this._selected[0] ?? '');
@@ -144,8 +211,17 @@ export class LyraCombobox extends LyraElement {
         this._selected = Array.isArray(next) ? [...next] : next ? [next] : [];
         this.syncFormValue();
         this.reflectSelected();
+        this.updateValidity();
         this.requestUpdate('value', old);
     }
+    updateValidity() {
+        if (this.required && this._selected.length === 0) {
+            this.internals.setValidity({ valueMissing: true }, 'Please select an option.');
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
     syncFormValue() {
         if (this.multiple) {
             const fd = new FormData();
@@ -159,7 +235,7 @@ export class LyraCombobox extends LyraElement {
         }
     }
     formResetCallback() {
-        this.value = [];
+        this.value = [...this._defaultSelected];
         this.query = '';
     }
     formDisabledCallback(disabled) {
@@ -225,6 +301,11 @@ export class LyraCombobox extends LyraElement {
                     this.cleanup = place(anchor, listbox);
             }
         }
+        if (changed.has('required'))
+            this.updateValidity();
+        if (changed.has('touched') || changed.has('required') || changed.has('value')) {
+            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
+        }
     }
     pick(option) {
         if (option.disabled)
@@ -288,9 +369,14 @@ export class LyraCombobox extends LyraElement {
         const shownTags = this.multiple ? this._selected.slice(0, this.maxOptionsVisible) : [];
         const extra = this.multiple ? this._selected.length - shownTags.length : 0;
         const hasValue = this._selected.length > 0;
+        const hasHint = this.hasHintSlot || this.hint.length > 0;
+        const hasError = this.hasErrorSlot || this.errorText.length > 0;
+        const hasLabel = this.hasLabelSlot || this.label.length > 0;
         return html `
       <div part="form-control">
-        <label part="form-control-label">${this.label}<slot name="label"></slot></label>
+        <label part="form-control-label" ?hidden=${!hasLabel}>
+          ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
+        </label>
         <div part="combobox" @mousedown=${this.onComboMouseDown}>
           <div part="tags" style="display:contents">
             ${shownTags.map((v) => html `<span part="tag"
@@ -303,7 +389,7 @@ export class LyraCombobox extends LyraElement {
             this.removeValue(v);
         }}
                 >
-                  &times;</button
+                  ${closeIcon()}</button
                 ></span
               >`)}
             ${extra > 0 ? html `<span part="tag">+${extra}</span>` : ''}
@@ -323,6 +409,7 @@ export class LyraCombobox extends LyraElement {
             @input=${this.onInput}
             @keydown=${this.onKeyDown}
             @focus=${() => this.show()}
+            @blur=${this.onInputBlur}
           />
           ${this.withClear && hasValue
             ? html `<button
@@ -334,17 +421,22 @@ export class LyraCombobox extends LyraElement {
                 this.clear();
             }}
               >
-                &times;
+                ${closeIcon()}
               </button>`
             : ''}
-          <span part="expand-icon" aria-hidden="true">▾</span>
+          <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
         </div>
         <div part="listbox" id=${this.listId} role="listbox" aria-multiselectable=${this.multiple ? 'true' : 'false'}>
           ${filtered.length === 0
             ? html `<div class="empty">${this.emptyText}</div>`
             : this.renderRows(filtered, activeId)}
         </div>
-        <div part="hint">${this.hint}<slot name="hint"></slot></div>
+        <div part="error" ?hidden=${!hasError}>
+          ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
+        </div>
+        <div part="hint" ?hidden=${!hasHint}>
+          ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
+        </div>
       </div>
       <slot @slotchange=${this.collectOptions} hidden></slot>
     `;
@@ -371,6 +463,9 @@ __decorate([
 __decorate([
     property()
 ], LyraCombobox.prototype, "hint", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], LyraCombobox.prototype, "errorText", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraCombobox.prototype, "open", void 0);
@@ -395,4 +490,16 @@ __decorate([
 __decorate([
     state()
 ], LyraCombobox.prototype, "options", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "touched", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "hasHintSlot", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "hasErrorSlot", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "hasLabelSlot", void 0);
 defineElement('combobox', LyraCombobox);

package/dist/components/combobox/combobox.styles.js

@@ -9,9 +9,19 @@ export const styles = css `
     font-size: 0.875rem;
     font-weight: 600;
   }
-  [part='form-control-label']:empty {
+  /* :empty never matches here -- the part always contains a literal slot
+     child element regardless of assigned/text content -- so real emptiness
+     is tracked in JS (hasLabelSlot) and reflected via the hidden attribute
+     instead (same fix as [part='hint']/[part='error'] below). Without this,
+     the required-asterisk ::after below (which attaches to this box)
+     renders a stray ' *' with nothing before it whenever label is unset. */
+  [part='form-control-label'][hidden] {
     display: none;
   }
+  :host([required]) [part='form-control-label']::after {
+    content: ' *';
+    color: var(--lyra-color-danger);
+  }
 
   [part='combobox'] {
     display: flex;
@@ -31,7 +41,9 @@ export const styles = css `
     outline: 2px solid transparent;
   }
   :host([disabled]) [part='combobox'] {
-    opacity: 0.5;
+    /* was a literal 0.5; now the shared library-wide disabled-state token
+       (still 0.5 by default fallback, so no visual change here). */
+    opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
   }
 
@@ -68,16 +80,34 @@ export const styles = css `
   [part='clear-button'],
   [part='expand-icon'] {
     flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border: none;
     background: none;
     cursor: pointer;
     color: var(--lyra-color-text-quiet);
-    padding: 0 var(--lyra-space-xs);
+    padding: var(--lyra-space-xs);
+    /* Real touch target in *both* dimensions (WCAG 2.2 SC 2.5.8 needs
+       24x24 CSS px, not just height — a design-review fix that only set
+       min-block-size left these buttons ~21px wide). icon-button-size is
+       the ceiling, but never grow past what the [part=combobox] row's own
+       2.5rem min-block-size has room for once its own block padding is
+       subtracted. */
+    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
     line-height: 1;
   }
+  [part='expand-icon'] svg {
+    transform: rotate(90deg);
+  }
+  [part='clear-button']:focus-visible,
+  [part='tag__remove-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
 
   [part='listbox'] {
-    display: none;
     position: fixed;
     z-index: 900;
     box-sizing: border-box;
@@ -91,9 +121,26 @@ export const styles = css `
     border: 1px solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
+    /* Closed state: invisible + slightly raised. visibility (not
+       display:none) so opacity/transform can actually transition; hit-testing
+       and a11y exposure stay off since this part is already position:fixed. */
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-0.25rem);
+    transition:
+      opacity var(--lyra-transition-fast),
+      transform var(--lyra-transition-fast),
+      visibility var(--lyra-transition-fast);
   }
   :host([open]) [part='listbox'] {
-    display: block;
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='listbox'] {
+      transition: none !important;
+    }
   }
 
   [part='option'] {
@@ -120,7 +167,9 @@ export const styles = css `
     font-weight: 600;
   }
   [part='option'][aria-disabled='true'] {
-    opacity: 0.4;
+    /* was a literal 0.4; unified with the rest of the library's single
+       disabled-state opacity token (intentionally changes 0.4 -> 0.5). */
+    opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
   }
 
@@ -142,7 +191,19 @@ export const styles = css `
     font-size: 0.8125rem;
     color: var(--lyra-color-text-quiet);
   }
-  [part='hint']:empty {
+  /* :empty never matches here -- the part always contains a literal
+     slot child element regardless of assigned/text content -- so real
+     emptiness is tracked in JS (hasHintSlot/hasErrorSlot) and reflected via
+     the hidden attribute instead (same fix as lyra-stat's icon/caption). */
+  [part='hint'][hidden] {
+    display: none;
+  }
+  [part='error'] {
+    margin-block-start: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+    color: var(--lyra-color-danger);
+  }
+  [part='error'][hidden] {
     display: none;
   }
 `;

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

@@ -10,7 +10,7 @@ import { LyraElement } from '../../internal/lyra-element.js';
  * @customElement lyra-option
  */
 export declare class LyraOption extends LyraElement {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResultGroup[];
     /** The selection key submitted with the form. */
     value: string;
     /** Disable selecting this option. */
@@ -21,7 +21,7 @@ export declare class LyraOption extends LyraElement {
     group: string;
     /** Extra text the filter should match beyond the label. */
     searchText: string;
-    /** Resolved label: explicit `label` attribute wins, else trimmed text content. */
+    /** Resolved label: explicit non-empty `label` attribute wins, else trimmed text content. */
     get label(): string;
     render(): TemplateResult;
 }

package/dist/components/combobox/option.js

@@ -31,14 +31,18 @@ export class LyraOption extends LyraElement {
         /** Extra text the filter should match beyond the label. */
         this.searchText = '';
     }
-    static { this.styles = css `
-    :host {
-      display: none;
-    }
-  `; }
-    /** Resolved label: explicit `label` attribute wins, else trimmed text content. */
+    static { this.styles = [
+        LyraElement.styles,
+        css `
+      :host {
+        display: none;
+      }
+    `,
+    ]; }
+    /** Resolved label: explicit non-empty `label` attribute wins, else trimmed text content. */
     get label() {
-        return (this.getAttribute('label') ?? this.textContent ?? '').trim();
+        const attr = this.getAttribute('label');
+        return (attr ? attr : (this.textContent ?? '')).trim();
     }
     render() {
         return html `<slot></slot>`;

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

@@ -16,7 +16,8 @@ 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
+ * @csspart form-control, form-control-label, input-wrapper, input, clear-button, expand-button, popup, date-picker, hint, error
+ * @slot error - Custom error content.
  */
 export declare class LyraDateInput extends LyraDateInput_base {
     static styles: import("lit").CSSResultGroup[];
@@ -28,13 +29,19 @@ export declare class LyraDateInput extends LyraDateInput_base {
     withClear: boolean;
     label: string;
     hint: string;
+    errorText: string;
     placeholder: string;
     locale: string;
     months: 1 | 2;
     firstDayOfWeek: string;
     weekdayFormat: WeekdayFormat;
     private cleanupFn?;
+    private touched;
+    private hasHintSlot;
+    private hasErrorSlot;
+    private hasLabelSlot;
     private get displayText();
+    protected willUpdate(): void;
     /** Open the calendar popover. */
     show(): void;
     /** Close the calendar popover. */
@@ -46,6 +53,10 @@ export declare class LyraDateInput extends LyraDateInput_base {
     protected updated(changed: PropertyValues): void;
     private onInputChange;
     private onInputKey;
+    private onInputBlur;
+    private onHintSlotChange;
+    private onErrorSlotChange;
+    private onLabelSlotChange;
     private onPickerChange;
     render(): TemplateResult;
 }

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

@@ -10,6 +10,7 @@ import { LyraElement } from '../../internal/lyra-element.js';
 import { FormAssociated } from '../../internal/form-associated.js';
 import { defineElement } from '../../internal/prefix.js';
 import { place } from '../../internal/positioner.js';
+import { closeIcon, calendarIcon } from '../../internal/icons.js';
 import { parseISO, formatISO } from './calendar-core.js';
 import { styles } from './date-input.styles.js';
 import { LyraDatePicker } from './date-picker.js';
@@ -27,7 +28,8 @@ 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
+ * @csspart form-control, form-control-label, input-wrapper, input, clear-button, expand-button, popup, date-picker, hint, error
+ * @slot error - Custom error content.
  */
 export class LyraDateInput extends FormAssociated(LyraElement) {
     constructor() {
@@ -40,11 +42,25 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
         this.withClear = false;
         this.label = '';
         this.hint = '';
+        this.errorText = '';
         this.placeholder = '';
         this.locale = '';
         this.months = 1;
         this.firstDayOfWeek = 'auto';
         this.weekdayFormat = 'short';
+        // 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;
+        // `[part]:empty` never matches — the part always contains a literal
+        // `<slot>` child element regardless of assigned content — so real
+        // emptiness is tracked in JS instead (same fix as lyra-stat's
+        // icon/caption, commit 6c1004c) and reflected via `hidden`. Applies to
+        // `form-control-label` too: the required-asterisk `::after` attaches to
+        // that box, so leaving it always-visible orphans a stray ' *' when no
+        // `label` is set.
+        this.hasHintSlot = false;
+        this.hasErrorSlot = false;
+        this.hasLabelSlot = false;
         this.onDocPointer = (e) => {
             if (!e.composedPath().includes(this))
                 this.hide();
@@ -70,6 +86,18 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
                 this.show();
             }
         };
+        this.onInputBlur = () => {
+            this.touched = true;
+        };
+        this.onHintSlotChange = (e) => {
+            this.hasHintSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onErrorSlotChange = (e) => {
+            this.hasErrorSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onLabelSlotChange = (e) => {
+            this.hasLabelSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
         this.onPickerChange = (e) => {
             e.stopPropagation();
             const picker = e.target;
@@ -90,6 +118,13 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
         const fmt = (d) => d.toLocaleDateString(this.locale || undefined);
         return this.mode === 'range' && to ? `${fmt(from)} – ${fmt(to)}` : fmt(from);
     }
+    willUpdate() {
+        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');
+            this.hasLabelSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'label');
+        }
+    }
     /** Open the calendar popover. */
     show() {
         if (this.open || this.disabled || this.readonly)
@@ -119,6 +154,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
         document.removeEventListener('pointerdown', this.onDocPointer);
     }
     updated(changed) {
+        super.updated(changed);
         if (changed.has('open')) {
             this.cleanupFn?.();
             this.cleanupFn = undefined;
@@ -129,12 +165,20 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
                     this.cleanupFn = place(anchor, popup);
             }
         }
+        if (changed.has('touched') || changed.has('required') || changed.has('value')) {
+            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
+        }
     }
     render() {
         const hasValue = this.value.length > 0;
+        const hasHint = this.hasHintSlot || this.hint.length > 0;
+        const hasError = this.hasErrorSlot || this.errorText.length > 0;
+        const hasLabel = this.hasLabelSlot || this.label.length > 0;
         return html `
       <div part="form-control">
-        <label part="form-control-label">${this.label}<slot name="label"></slot></label>
+        <label part="form-control-label" ?hidden=${!hasLabel}>
+          ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
+        </label>
         <div part="input-wrapper">
           <input
             part="input"
@@ -146,6 +190,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             ?readonly=${this.readonly}
             @change=${this.onInputChange}
             @keydown=${this.onInputKey}
+            @blur=${this.onInputBlur}
           />
           ${this.withClear && hasValue
             ? html `<button
@@ -154,7 +199,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
                 aria-label="Clear"
                 @click=${() => this.clear()}
               >
-                &times;
+                ${closeIcon()}
               </button>`
             : ''}
           <button
@@ -166,7 +211,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             ?disabled=${this.disabled || this.readonly}
             @click=${() => (this.open ? this.hide() : this.show())}
           >
-            <span part="expand-icon" aria-hidden="true">📅</span>
+            <span part="expand-icon" aria-hidden="true">${calendarIcon()}</span>
           </button>
         </div>
         <div part="popup" role="dialog" aria-label="Choose date">
@@ -183,7 +228,12 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             @change=${this.onPickerChange}
           ></lyra-date-picker>
         </div>
-        <div part="hint">${this.hint}<slot name="hint"></slot></div>
+        <div part="error" ?hidden=${!hasError}>
+          ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
+        </div>
+        <div part="hint" ?hidden=${!hasHint}>
+          ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
+        </div>
       </div>
     `;
     }
@@ -212,6 +262,9 @@ __decorate([
 __decorate([
     property()
 ], LyraDateInput.prototype, "hint", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], LyraDateInput.prototype, "errorText", void 0);
 __decorate([
     property()
 ], LyraDateInput.prototype, "placeholder", void 0);
@@ -229,5 +282,14 @@ __decorate([
 ], LyraDateInput.prototype, "weekdayFormat", void 0);
 __decorate([
     state()
-], LyraDateInput.prototype, "cleanupFn", void 0);
+], LyraDateInput.prototype, "touched", void 0);
+__decorate([
+    state()
+], LyraDateInput.prototype, "hasHintSlot", void 0);
+__decorate([
+    state()
+], LyraDateInput.prototype, "hasErrorSlot", void 0);
+__decorate([
+    state()
+], LyraDateInput.prototype, "hasLabelSlot", void 0);
 defineElement('date-input', LyraDateInput);