@kubex/zinc 1.1.185 → 2.0.0

package/src/components/date-range/date-range.scss

@@ -0,0 +1,272 @@
+@use "../../wc";
+
+:host {
+  display: inline-block;
+}
+
+.date-range__trigger {
+  --zn-text-button-label-transform: none;
+  --zn-text-button-label-font-weight: var(--zn-input-font-weight);
+}
+
+.date-range__trigger::part(label) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.date-range__trigger::part(base) {
+  font-size: var(--zn-input-font-size-medium);
+  font-weight: var(--zn-input-font-weight);
+  color: var(--zn-input-color);
+  background-color: var(--zn-input-background-color);
+  border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+  border-radius: var(--zn-input-border-radius-medium);
+  box-shadow: var(--zn-input-shadow, none);
+}
+
+.date-range__trigger:hover::part(base) {
+  background-color: var(--zn-input-background-color-hover);
+  border-color: var(--zn-input-border-color-hover);
+}
+
+.date-range__trigger::part(icon),
+.date-range__chevron {
+  color: var(--zn-input-icon-color);
+}
+
+.date-range__pop {
+  position: fixed;
+  z-index: var(--zn-z-index-dropdown, 900);
+  display: flex;
+  width: min(736px, 94vw);
+  box-sizing: border-box;
+  max-height: calc(100vh - 16px);
+  overflow: auto;
+  background: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius-large, 8px);
+  box-shadow: var(--zn-shadow-large, 0 12px 32px rgb(15 23 42 / 0.14));
+  color: rgb(var(--zn-text));
+  font-size: var(--zn-font-size-small);
+}
+
+.date-range__presets {
+  display: flex;
+  flex: 0 0 168px;
+  flex-direction: column;
+  gap: 1px;
+  padding: var(--zn-spacing-x-small);
+  box-sizing: border-box;
+  background: color-mix(in srgb, rgb(var(--zn-primary)) 4%, rgb(var(--zn-panel)));
+  border-right: 1px solid rgb(var(--zn-border-color));
+}
+
+.date-range__preset {
+  height: var(--zn-menu-item-min-height, 36px);
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--zn-border-radius-medium, 6px);
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-weight: var(--zn-font-weight-medium, 500);
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: color-mix(in srgb, rgb(var(--zn-primary)) 8%, transparent);
+  }
+
+  &.is-active {
+    background: color-mix(in srgb, rgb(var(--zn-primary)) 8%, transparent);
+    color: rgb(var(--zn-primary));
+    font-weight: var(--zn-font-weight-bold, 600);
+  }
+
+  &[aria-disabled="true"] {
+    background: none;
+    color: color-mix(in srgb, rgb(var(--zn-text)) 35%, transparent);
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--zn-primary));
+    outline-offset: -2px;
+  }
+}
+
+.date-range__main {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: var(--zn-spacing-small, 16px);
+}
+
+.date-range__months {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.date-range__head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--zn-density-control-height, 36px);
+  font-weight: var(--zn-font-weight-bold, 600);
+}
+
+.date-range__nav {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+}
+
+.date-range__nav--prev {
+  left: 0;
+}
+
+.date-range__nav--next {
+  right: 0;
+}
+
+.date-range__week,
+.date-range__row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.date-range__grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.date-range__week span {
+  color: color-mix(in srgb, rgb(var(--zn-text)) 55%, transparent);
+  font-size: 11px;
+  font-weight: var(--zn-font-weight-bold, 600);
+  letter-spacing: 0.04em;
+  line-height: 19px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.date-range__day {
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--zn-border-radius-medium, 6px);
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-weight: var(--zn-font-weight-medium, 500);
+  cursor: pointer;
+
+  &:hover {
+    background: color-mix(in srgb, rgb(var(--zn-primary)) 10%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--zn-primary));
+    outline-offset: -2px;
+  }
+
+  &.is-today {
+    box-shadow: inset 0 0 0 1px rgb(var(--zn-primary));
+  }
+
+  &.is-in {
+    border-radius: 0;
+    background: color-mix(in srgb, rgb(var(--zn-primary)) 12%, transparent);
+  }
+
+  &.is-start,
+  &.is-end {
+    background: rgb(var(--zn-primary));
+    color: rgb(var(--zn-color-on-primary, 255, 255, 255));
+    font-weight: var(--zn-font-weight-bold, 600);
+  }
+
+  &.is-start.is-end {
+    border-radius: var(--zn-border-radius-medium, 6px);
+  }
+
+  &.is-start:not(.is-end) {
+    border-radius: var(--zn-border-radius-medium, 6px) 0 0 var(--zn-border-radius-medium, 6px);
+  }
+
+  &.is-end:not(.is-start) {
+    border-radius: 0 var(--zn-border-radius-medium, 6px) var(--zn-border-radius-medium, 6px) 0;
+  }
+
+  &[aria-disabled="true"] {
+    background: none;
+    box-shadow: none;
+    color: color-mix(in srgb, rgb(var(--zn-text)) 30%, transparent);
+    cursor: default;
+  }
+}
+
+.date-range__inputs {
+  --zn-input-label-line-height: 16px;
+
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: end;
+  gap: var(--zn-spacing-x-small, 8px);
+}
+
+.date-range__dash {
+  padding-bottom: 8px;
+  color: color-mix(in srgb, rgb(var(--zn-text)) 55%, transparent);
+}
+
+.date-range__note {
+  margin: 0;
+  color: color-mix(in srgb, rgb(var(--zn-text)) 55%, transparent);
+  font-size: var(--zn-font-size-x-small);
+  line-height: 18px;
+}
+
+.date-range__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small, 8px);
+  padding-top: 12px;
+  border-top: 1px solid rgb(var(--zn-border-color));
+}
+
+.date-range__summary {
+  flex: 1 1 auto;
+  color: color-mix(in srgb, rgb(var(--zn-text)) 65%, transparent);
+  font-size: var(--zn-font-size-x-small);
+}
+
+.date-range__pop.is-narrow {
+  flex-direction: column;
+}
+
+.date-range__pop.is-narrow .date-range__presets {
+  flex: none;
+  flex-flow: row wrap;
+  border-right: 0;
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+}
+
+.date-range__pop.is-narrow .date-range__preset {
+  flex: none;
+  white-space: nowrap;
+}
+
+.date-range__pop.is-narrow .date-range__months {
+  grid-template-columns: 1fr;
+}
+
+.date-range__pop.is-narrow .date-range__month + .date-range__month {
+  display: none;
+}

package/src/components/date-range/date-range.test.ts

@@ -0,0 +1,247 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+import {setViewport} from '@web/test-runner-commands';
+import type ZnButton from '../button';
+import type ZnDateRange from './date-range.component';
+import type ZnInput from '../input';
+
+const click = (el: Element) =>
+  el.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+
+const pop = (el: ZnDateRange) => el.shadowRoot!.querySelector('.date-range__pop');
+const day = (el: ZnDateRange, iso: string) => el.shadowRoot!.querySelector<HTMLElement>(`[data-date="${iso}"]`)!;
+const preset = (el: ZnDateRange, label: string) =>
+  [...el.shadowRoot!.querySelectorAll<HTMLElement>('.date-range__preset')].find(b => b.textContent!.trim() === label)!;
+const commit = async (el: ZnDateRange, end: 'from' | 'to', value: string) => {
+  const input = el.shadowRoot!.querySelector<ZnInput>(`.date-range__${end}`)!;
+  input.value = value;
+  input.dispatchEvent(new CustomEvent('zn-blur', {bubbles: true, composed: true}));
+  await el.updateComplete;
+};
+const inputValue = (el: ZnDateRange, end: 'from' | 'to') =>
+  el.shadowRoot!.querySelector<ZnInput>(`.date-range__${end}`)!.value as string;
+const apply = (el: ZnDateRange) => el.shadowRoot!.querySelector<ZnButton>('.date-range__apply')!;
+
+async function openRange(template = html`<zn-date-range from="2026-10-10" to="2026-10-12" max="2026-10-20"></zn-date-range>`) {
+  const el = await fixture<ZnDateRange>(template);
+  click(el.shadowRoot!.querySelector('.date-range__trigger')!);
+  await el.updateComplete;
+  return el;
+}
+
+describe('<zn-date-range>', () => {
+  it('opens a dialog with two month grids and eight quick ranges', async () => {
+    const el = await openRange();
+
+    expect(pop(el)).to.exist;
+    expect(pop(el)!.getAttribute('role')).to.equal('dialog');
+    expect(el.shadowRoot!.querySelectorAll('[role="grid"]')).to.have.length(2);
+    expect(el.shadowRoot!.querySelectorAll('.date-range__preset')).to.have.length(8);
+  });
+
+  it('greys out days after max and ignores clicks on them', async () => {
+    const el = await openRange();
+
+    expect(day(el, '2026-10-25').getAttribute('aria-disabled')).to.equal('true');
+    expect(day(el, '2026-10-20').getAttribute('aria-disabled')).to.equal('false');
+
+    click(day(el, '2026-10-25'));
+    await el.updateComplete;
+
+    expect(day(el, '2026-10-10').classList.contains('is-start')).to.be.true;
+    expect(day(el, '2026-10-12').classList.contains('is-end')).to.be.true;
+    expect(day(el, '2026-10-25').classList.contains('is-start')).to.be.false;
+  });
+
+  it('enables Apply only once both days are picked', async () => {
+    const el = await openRange();
+
+    click(day(el, '2026-10-14'));
+    await el.updateComplete;
+    expect(apply(el).disabled).to.be.true;
+
+    click(day(el, '2026-10-18'));
+    await el.updateComplete;
+    expect(apply(el).disabled).to.be.false;
+    expect(day(el, '2026-10-16').classList.contains('is-in')).to.be.true;
+  });
+
+  it('applies the picked range and fires zn-change once', async () => {
+    const el = await openRange();
+    const details: unknown[] = [];
+    el.addEventListener('zn-change', (e: Event) => details.push((e as CustomEvent).detail));
+
+    click(day(el, '2026-10-14'));
+    await el.updateComplete;
+    click(day(el, '2026-10-18'));
+    await el.updateComplete;
+    click(apply(el));
+    await el.updateComplete;
+
+    expect(el.from).to.equal('2026-10-14');
+    expect(el.to).to.equal('2026-10-18');
+    expect(el.getAttribute('from')).to.equal('2026-10-14');
+    expect(details).to.deep.equal([{from: '2026-10-14', to: '2026-10-18'}]);
+    expect(pop(el)).to.not.exist;
+  });
+
+  it('closes on Escape without changing the range or firing zn-change', async () => {
+    const el = await openRange();
+    let fired = 0;
+    el.addEventListener('zn-change', () => fired++);
+
+    click(day(el, '2026-10-14'));
+    click(day(el, '2026-10-18'));
+    await el.updateComplete;
+    document.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape', bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(pop(el)).to.not.exist;
+    expect(el.from).to.equal('2026-10-10');
+    expect(el.to).to.equal('2026-10-12');
+    expect(fired).to.equal(0);
+  });
+
+  it('stays open for clicks on its own arrows and inputs, and closes on an outside click', async () => {
+    const el = await openRange();
+
+    click(el.shadowRoot!.querySelector('.date-range__nav--next')!);
+    await el.updateComplete;
+    expect(pop(el)).to.exist;
+
+    click(el.shadowRoot!.querySelector('.date-range__from')!);
+    await el.updateComplete;
+    expect(pop(el)).to.exist;
+
+    click(document.body);
+    await el.updateComplete;
+    expect(pop(el)).to.not.exist;
+  });
+
+  it('submits name[from] and name[to] with its form', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form><zn-date-range name="period" from="2026-10-01" to="2026-10-20"></zn-date-range></form>`);
+    await (form.querySelector('zn-date-range')!).updateComplete;
+
+    const data = new FormData(form);
+    expect(data.get('period[from]')).to.equal('2026-10-01');
+    expect(data.get('period[to]')).to.equal('2026-10-20');
+  });
+  it('applies a quick range straight away and closes', async () => {
+    const el = await openRange(html`<zn-date-range from="2026-10-10" to="2026-10-12"
+      presets='[{"label":"Early Oct","from":"2026-10-01","to":"2026-10-05"}]'></zn-date-range>`);
+    const details: unknown[] = [];
+    el.addEventListener('zn-change', (e: Event) => details.push((e as CustomEvent).detail));
+
+    click(preset(el, 'Early Oct'));
+    await el.updateComplete;
+
+    expect(el.from).to.equal('2026-10-01');
+    expect(el.to).to.equal('2026-10-05');
+    expect(details).to.deep.equal([{from: '2026-10-01', to: '2026-10-05'}]);
+    expect(pop(el)).to.not.exist;
+  });
+
+  it('clamps a quick range to max and disables one wholly past it', async () => {
+    const el = await openRange(html`<zn-date-range from="2026-10-10" to="2026-10-12" max="2026-10-20"
+      presets='[{"label":"Wide","from":"2026-10-15","to":"2026-10-30"},{"label":"Later","from":"2026-11-01","to":"2026-11-05"}]'></zn-date-range>`);
+    let fired = 0;
+    el.addEventListener('zn-change', () => fired++);
+
+    expect(preset(el, 'Later').getAttribute('aria-disabled')).to.equal('true');
+    click(preset(el, 'Later'));
+    await el.updateComplete;
+    expect(fired).to.equal(0);
+    expect(pop(el)).to.exist;
+
+    click(preset(el, 'Wide'));
+    await el.updateComplete;
+    expect(el.from).to.equal('2026-10-15');
+    expect(el.to).to.equal('2026-10-20');
+  });
+
+  it('takes typed dates on commit, restarting when To is before From and ignoring partial years', async () => {
+    const el = await openRange();
+
+    await commit(el, 'to', '0202-10-05');
+    expect(inputValue(el, 'from')).to.equal('2026-10-10');
+    expect(apply(el).disabled).to.be.false;
+
+    await commit(el, 'to', '2026-10-05');
+    expect(inputValue(el, 'from')).to.equal('2026-10-05');
+    expect(inputValue(el, 'to')).to.equal('');
+    expect(apply(el).disabled).to.be.true;
+
+    await commit(el, 'to', '2026-10-08');
+    expect(apply(el).disabled).to.be.false;
+    expect(day(el, '2026-10-08').classList.contains('is-end')).to.be.true;
+
+    await commit(el, 'from', '2026-08-03');
+    expect(el.shadowRoot!.querySelector('.date-range__head')!.textContent).to.equal('August 2026');
+    expect(day(el, '2026-08-03').classList.contains('is-start')).to.be.true;
+  });
+
+  it('keeps Escape from reaching an enclosing element, and moves focus in and back out', async () => {
+    const wrap = await fixture<HTMLDivElement>(html`
+      <div><zn-date-range from="2026-10-10" to="2026-10-12"></zn-date-range></div>`);
+    const el = wrap.querySelector('zn-date-range')!;
+    let escapes = 0;
+    wrap.addEventListener('keydown', () => escapes++);
+
+    click(el.shadowRoot!.querySelector('.date-range__trigger')!);
+    await el.updateComplete;
+    await el.updateComplete;
+    expect(el.shadowRoot!.activeElement).to.equal(day(el, '2026-10-10'));
+
+    day(el, '2026-10-10').dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape', bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(pop(el)).to.not.exist;
+    expect(escapes).to.equal(0);
+    expect(el.shadowRoot!.activeElement).to.equal(el.shadowRoot!.querySelector('.date-range__trigger'));
+  });
+
+  it('shows one month on a narrow screen', async () => {
+    await setViewport({width: 375, height: 800});
+    try {
+      const el = await openRange();
+      const months = el.shadowRoot!.querySelectorAll('.date-range__month');
+      expect([window.innerWidth, matchMedia('(max-width: 560px)').matches]).to.deep.equal([375, true]);
+      expect(getComputedStyle(months[1]).display).to.equal('none');
+      expect(pop(el)!.getBoundingClientRect().right).to.be.at.most(375);
+      const popRect = pop(el)!.getBoundingClientRect();
+      el.shadowRoot!.querySelectorAll('.date-range__preset').forEach(p => {
+        expect(p.getBoundingClientRect().right).to.be.at.most(popRect.right);
+      });
+    } finally {
+      await setViewport({width: 800, height: 600});
+    }
+  });
+
+  it('opens above the trigger when there is no room below', async () => {
+    await setViewport({width: 1000, height: 1000});
+    try {
+      const el = await fixture<ZnDateRange>(html`
+        <zn-date-range style="display: block; margin-top: 900px" from="2026-10-10" to="2026-10-12"></zn-date-range>`);
+      click(el.shadowRoot!.querySelector('.date-range__trigger')!);
+      await el.updateComplete;
+      await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+      await el.updateComplete;
+
+      const rect = pop(el)!.getBoundingClientRect();
+      const trigger = el.shadowRoot!.querySelector('.date-range__trigger')!.getBoundingClientRect();
+      expect(rect.bottom).to.be.at.most(trigger.top);
+      expect(rect.top).to.be.at.least(8);
+    } finally {
+      await setViewport({width: 800, height: 600});
+    }
+  });
+
+  it('shows a note under the calendar only when given one', async () => {
+    const plain = await openRange();
+    expect(plain.shadowRoot!.querySelector('.date-range__note')).to.not.exist;
+
+    const noted = await openRange(html`<zn-date-range from="2026-10-10" to="2026-10-12" note="Compared day by day."></zn-date-range>`);
+    expect(noted.shadowRoot!.querySelector('.date-range__note')!.textContent).to.equal('Compared day by day.');
+  });
+});

package/src/components/date-range/index.ts

@@ -0,0 +1,12 @@
+import ZnDateRange from './date-range.component';
+
+export * from './date-range.component';
+export default ZnDateRange;
+
+ZnDateRange.define('zn-date-range');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-date-range': ZnDateRange;
+  }
+}

package/src/components/datepicker/datepicker.component.ts

@@ -71,6 +71,7 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
   @query('.input__control') input: HTMLInputElement;
 
   @state() private hasFocus = false;
+  private escapeSwallowed = false;
 
   @property() title = "" // make reactive pass through
 
@@ -127,6 +128,9 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
   /** Makes the input a required field. */
   @property({type: Boolean, reflect: true}) required = false;
 
+  /** Short text shown next to the label, styled like the help text, e.g. `optional`. */
+  @property({attribute: 'label-note'}) labelNote = '';
+
   /** Adds a clear button to the calendar for removing a selected date. **/
   @property({type: Boolean}) clearable = false;
 
@@ -300,7 +304,6 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
         container: this.container ?? this.getCalendarContainer(),
         altField: timestampField,
         onSelect: ({date}) => {
-        // Blur the input after selection to prevent invisible keyboard navigation
         if (this.timePicker || this.onlyTimepicker){
           // An inline calendar never hides, so there's no later event to report the time on
           if (this.inline) {
@@ -309,12 +312,11 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
           return
         }
         if (date && !this.range) {
-          // For single date selection, blur immediately
-          this.input.blur();
+          this.hideCalendarKeepingFocus();
           this.handleChange();
         } else if (date && this.range && Array.isArray(date) && date.length === 2) {
-           // For range selection, blur only after both dates are selected
-           this.input.blur();
+           // For range selection, hide only after both dates are selected
+           this.hideCalendarKeepingFocus();
            this.handleChange();
         }
         },
@@ -440,14 +442,30 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
 
   private handleKeyDown(event: KeyboardEvent) {
     if (this._instance && this._instance.visible) {
+      // AirDatepicker's own Escape handler would hide through its blurring hide()
+      if (event.key === 'Escape' && !this.inline) {
+        event.stopImmediatePropagation();
+        this.hideCalendarKeepingFocus();
+      }
+      return;
+    }
+
+    // The calendar only opens on focus, so a focused field needs another way to reopen it
+    if (event.key === 'ArrowDown' && this._instance && !this.inline) {
+      event.preventDefault();
+      this._instance.show();
       return;
     }
 
+    // The first Escape stays in the field so it doesn't also dismiss a containing popup; a repeat bubbles
     if (event.key === 'Escape') {
-      this.input.blur();
-      event.stopPropagation();
+      if (!this.escapeSwallowed) {
+        this.escapeSwallowed = true;
+        event.stopPropagation();
+      }
       return;
     }
+    this.escapeSwallowed = false;
 
     // Allow navigation and control keys
     const allowedKeys = [
@@ -489,6 +507,23 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
     }
   }
 
+  // AirDatepicker's hide() blurs its input, and refocusing would reopen the calendar
+  // shortcut: toggles AirDatepicker's private elIsInput (v3.6), recheck on upgrade
+  private hideCalendarKeepingFocus() {
+    if (this.inline) return;
+    const instance = this._instance as unknown as {elIsInput: boolean};
+    const elIsInput = instance.elIsInput;
+    instance.elIsInput = false;
+    this._instance.hide();
+    instance.elIsInput = elIsInput;
+  }
+
+  private handleInputClick() {
+    if (this._instance && !this._instance.visible) {
+      this._instance.show();
+    }
+  }
+
   private handleBlur() {
     if (this._instance && this._instance.visible) {
       return;
@@ -698,6 +733,7 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
                 <zn-icon src="info"></zn-icon>
               </zn-tooltip>`
             : ''}
+          ${this.labelNote ? html`<span class="form-control__label-note">${this.labelNote}</span>` : ''}
         </label>
 
         ${hasContextNote
@@ -745,6 +781,7 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
                    @input=${this.handleInput}
                    @invalid=${this.handleInvalid}
                    @keydown=${this.handleKeyDown}
+                   @click=${this.handleInputClick}
                    @paste=${this.handlePaste}
                    @blur=${this.handleBlur}>
             <input id="date-picker-timestamp" type="hidden">

package/src/components/datepicker/datepicker.scss

@@ -44,6 +44,15 @@
   color: var(--zn-input-color-focus);
 }
 
+/* Invalid, once the user has interacted */
+:host([data-user-invalid]) .input--standard:not(.input--disabled) {
+  border-color: var(--zn-input-border-color-invalid);
+}
+
+:host([data-user-invalid]) .input--standard.input--focused:not(.input--disabled) {
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color-invalid);
+}
+
 .input--standard.input--disabled {
   background-color: var(--zn-input-background-color-disabled);
   border-color: var(--zn-input-border-color-disabled);

package/src/components/datepicker/datepicker.test.ts

@@ -37,7 +37,7 @@ describe('<zn-datepicker>', () => {
   });
 
   describe('Escape key', () => {
-    it('blurs the inner input when focused and the calendar is closed', async () => {
+    it('keeps focus on the inner input when the calendar is closed', async () => {
       const el = await fixture<ZnDatepicker>(html`<zn-datepicker></zn-datepicker>`);
       await el.updateComplete;
 
@@ -62,7 +62,7 @@ describe('<zn-datepicker>', () => {
       }));
       await el.updateComplete;
 
-      expect(el.shadowRoot!.activeElement, 'inner input should be blurred').to.not.equal(el.input);
+      expect(el.shadowRoot!.activeElement, 'inner input should keep focus').to.equal(el.input);
     });
   });
 });