@kubex/zinc 1.1.184 → 2.0.0

package/src/components/data-table-search/data-table-search.component.ts

@@ -186,6 +186,8 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
       <div class="data-table-search">
         <zn-input
           type="search"
+          size="small"
+          autocomplete="off"
           name="${this.name}"
           placeholder="${this.placeholder}"
           help-text="${this.helpText}"
@@ -193,11 +195,11 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
           clearable
           @zn-input="${this.handleInput}"
           @zn-clear="${this.handleClear}">
+          <zn-icon slot="prefix" src="search@lu" size="16"></zn-icon>
           ${this.helpText ? html`
             <zn-tooltip slot="suffix" class="data-table-search__tooltip" content="${this.helpText}">
-              <zn-icon src="info@lu" size="20"></zn-icon>
+              <zn-icon src="info@lu" size="16"></zn-icon>
             </zn-tooltip>` : nothing}
-          <zn-icon slot="suffix" src="search@lu" size="20"></zn-icon>
         </zn-input>
         <slot style="display: none"></slot>
       </div>

package/src/components/data-table-search/data-table-search.scss

@@ -2,13 +2,20 @@
 
 :host {
   display: block;
+  min-width: 0;
 }
 
 .data-table-search {
+  width: 100%;
   display: flex;
   align-items: center;
   gap: var(--zn-spacing-small);
-  min-width: 200px;
+  min-width: 0;
+}
+
+zn-input {
+  flex: 1;
+  min-width: 0;
 }
 
 // Keeps the focus ring inside the component's own box, so a toolbar or header that

package/src/components/data-table-search/data-table-search.test.ts

@@ -1,6 +1,7 @@
 import '../../../dist/zn.min.js';
 import {expect, fixture, html} from '@open-wc/testing';
 import type ZnDataTableSearch from './data-table-search.component';
+import type ZnInput from '../input/input.component';
 import type ZnSelect from '../select/select.component';
 
 describe('<zn-data-table-search>', () => {
@@ -32,4 +33,32 @@ describe('<zn-data-table-search>', () => {
 
     expect(el.getFormData().status).to.equal('closed');
   });
+
+  it('puts the search icon in the prefix slot, before the input', async () => {
+    const el = await fixture<ZnDataTableSearch>(html`<zn-data-table-search></zn-data-table-search>`);
+    const input = el.shadowRoot!.querySelector<HTMLElement>('zn-input')!;
+    const icon = input.querySelector<HTMLElement>('zn-icon[slot="prefix"]')!;
+    expect(icon).to.exist;
+    expect(input.querySelector('zn-icon[slot="suffix"]')).to.not.exist;
+    await (input as unknown as ZnInput).updateComplete;
+    const control = input.shadowRoot!.querySelector('input')!;
+    expect(icon.getBoundingClientRect().right).to.be.lessThanOrEqual(control.getBoundingClientRect().left + 1);
+  });
+
+  it('can shrink below 200px in a narrow container', async () => {
+    const wrap = await fixture<HTMLElement>(html`
+      <div style="display: flex; width: 120px"><zn-data-table-search></zn-data-table-search></div>`);
+    const el = wrap.querySelector<ZnDataTableSearch>('zn-data-table-search')!;
+    await el.updateComplete;
+    expect(getComputedStyle(el).minWidth).to.not.equal('200px');
+    expect(el.getBoundingClientRect().width).to.be.at.most(120);
+  });
+
+  it('turns off the browser autofill history on the native input', async () => {
+    const el = await fixture<ZnDataTableSearch>(html`<zn-data-table-search></zn-data-table-search>`);
+    const input = el.shadowRoot!.querySelector('zn-input') as unknown as ZnInput;
+    await input.updateComplete;
+
+    expect(input.shadowRoot!.querySelector('input')!.getAttribute('autocomplete')).to.equal('off');
+  });
 });

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

@@ -0,0 +1,78 @@
+import {addMonths, clampRange, defaultPresets, isIso, monthGrid, pick, rangeLabel, todayIso} from './date-range-math';
+import {expect} from '@open-wc/testing';
+
+describe('date-range-math', () => {
+  it('moves by months, clamping to the shorter month', () => {
+    expect(addMonths('2026-01-31', 1)).to.equal('2026-02-28');
+    expect(addMonths('2026-03-15', -1)).to.equal('2026-02-15');
+    expect(addMonths('2026-12-10', 1)).to.equal('2027-01-10');
+    expect(addMonths('2024-02-29', 12)).to.equal('2025-02-28');
+  });
+
+  it('lists the eight quick ranges relative to today', () => {
+    const presets = defaultPresets('2026-10-20');
+    const byLabel = Object.fromEntries(presets.map(p => [p.label, {from: p.from, to: p.to}]));
+
+    expect(presets.map(p => p.label)).to.deep.equal([
+      'Today', 'Yesterday', 'Last 7 days', 'Last 14 days', 'Last 30 days', 'This month', 'Last month', 'Last 90 days'
+    ]);
+    expect(byLabel['Today']).to.deep.equal({from: '2026-10-20', to: '2026-10-20'});
+    expect(byLabel['Yesterday']).to.deep.equal({from: '2026-10-19', to: '2026-10-19'});
+    expect(byLabel['Last 7 days']).to.deep.equal({from: '2026-10-13', to: '2026-10-20'});
+    expect(byLabel['Last 90 days']).to.deep.equal({from: '2026-07-22', to: '2026-10-20'});
+    expect(byLabel['This month']).to.deep.equal({from: '2026-10-01', to: '2026-10-20'});
+    expect(byLabel['Last month']).to.deep.equal({from: '2026-09-01', to: '2026-09-30'});
+  });
+
+  it('handles last month across a year boundary', () => {
+    const lastMonth = defaultPresets('2026-01-15').find(p => p.label === 'Last month');
+    expect(lastMonth).to.deep.include({from: '2025-12-01', to: '2025-12-31'});
+  });
+
+  it('builds a 42-cell Monday-first month grid', () => {
+    const grid = monthGrid(2026, 9);
+    expect(grid).to.have.length(42);
+    expect(grid.slice(0, 3)).to.deep.equal([null, null, null]);
+    expect(grid[3]).to.equal('2026-10-01');
+    expect(grid[33]).to.equal('2026-10-31');
+    expect(grid[34]).to.equal(null);
+  });
+
+  it('formats a range label, or a single date when both ends match', () => {
+    expect(rangeLabel('2026-10-19', '2026-10-20')).to.equal('19 Oct 2026 to 20 Oct 2026');
+    expect(rangeLabel('2026-10-20', '2026-10-20')).to.equal('20 Oct 2026');
+    expect(rangeLabel('2026-09-01', '2026-09-30')).to.equal('1 Sep 2026 to 30 Sep 2026');
+  });
+
+  it('picks a start, then an end, and restarts on an earlier day or after a full range', () => {
+    let state = pick({from: '', to: ''}, '2026-10-10');
+    expect(state).to.deep.equal({from: '2026-10-10', to: ''});
+
+    state = pick(state, '2026-10-15');
+    expect(state).to.deep.equal({from: '2026-10-10', to: '2026-10-15'});
+
+    state = pick(state, '2026-10-12');
+    expect(state).to.deep.equal({from: '2026-10-12', to: ''});
+
+    state = pick(state, '2026-10-05');
+    expect(state).to.deep.equal({from: '2026-10-05', to: ''});
+
+    expect(pick({from: '2026-10-05', to: ''}, '2026-10-05')).to.deep.equal({from: '2026-10-05', to: '2026-10-05'});
+  });
+
+  it('clamps a range to min and max, or returns null when it lies wholly outside', () => {
+    expect(clampRange({from: '2026-10-13', to: '2026-10-20'}, '', '2026-10-18')).to.deep.equal({from: '2026-10-13', to: '2026-10-18'});
+    expect(clampRange({from: '2026-10-13', to: '2026-10-20'}, '2026-10-15', '')).to.deep.equal({from: '2026-10-15', to: '2026-10-20'});
+    expect(clampRange({from: '2026-10-19', to: '2026-10-20'}, '', '2026-10-18')).to.equal(null);
+  });
+
+  it('rejects partial years a date input reports while typing', () => {
+    expect(isIso('0202-10-20')).to.be.false;
+    expect(isIso('2026-02-30')).to.be.false;
+    expect(isIso('2026-10-20')).to.be.true;
+  });
+
+  it('uses the local date for today', () => {
+    expect(todayIso(new Date(2026, 9, 20, 23, 59))).to.equal('2026-10-20');
+  });
+});

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

@@ -0,0 +1,105 @@
+export type Iso = string;
+
+export interface DatePreset {
+  label: string;
+  from: Iso;
+  to: Iso;
+}
+
+export interface RangeState {
+  from: Iso | '';
+  to: Iso | '';
+}
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+// Day arithmetic runs in UTC so DST changes can't shift a date
+export function toUtc(iso: Iso): Date {
+  const [y, m, d] = iso.split('-').map(Number);
+  return new Date(Date.UTC(y, m - 1, d));
+}
+
+export function fromUtc(date: Date): Iso {
+  return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
+}
+
+// Years below 1000 are rejected: Chromium's date input reports partial years like 0202 while typing
+export function isIso(value: unknown): value is Iso {
+  return typeof value === 'string' && /^[1-9]\d{3}-\d{2}-\d{2}$/.test(value) && fromUtc(toUtc(value)) === value;
+}
+
+export function addDays(iso: Iso, days: number): Iso {
+  const date = toUtc(iso);
+  date.setUTCDate(date.getUTCDate() + days);
+  return fromUtc(date);
+}
+
+/** The same day `months` away, clamped to the target month's last day. */
+export function addMonths(iso: Iso, months: number): Iso {
+  const date = toUtc(iso);
+  const target = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1));
+  const lastDay = new Date(Date.UTC(target.getUTCFullYear(), target.getUTCMonth() + 1, 0)).getUTCDate();
+  target.setUTCDate(Math.min(date.getUTCDate(), lastDay));
+  return fromUtc(target);
+}
+
+export function daysBetween(from: Iso, to: Iso): number {
+  return Math.round((toUtc(to).getTime() - toUtc(from).getTime()) / 86400000);
+}
+
+export function todayIso(now: Date = new Date()): Iso {
+  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+}
+
+export function defaultPresets(today: Iso): DatePreset[] {
+  const [y, m] = today.split('-').map(Number);
+  const lastDayPrev = fromUtc(new Date(Date.UTC(y, m - 1, 0)));
+  const days = (n: number) => ({label: `Last ${n} days`, from: addDays(today, -n), to: today});
+
+  return [
+    {label: 'Today', from: today, to: today},
+    {label: 'Yesterday', from: addDays(today, -1), to: addDays(today, -1)},
+    days(7),
+    days(14),
+    days(30),
+    {label: 'This month', from: `${today.slice(0, 7)}-01`, to: today},
+    {label: 'Last month', from: `${lastDayPrev.slice(0, 7)}-01`, to: lastDayPrev},
+    days(90),
+  ];
+}
+
+export function monthGrid(year: number, month0: number, weekStart = 1): (Iso | null)[] {
+  const first = new Date(Date.UTC(year, month0, 1));
+  const length = new Date(Date.UTC(year, month0 + 1, 0)).getUTCDate();
+  const lead = (first.getUTCDay() - weekStart + 7) % 7;
+
+  return Array.from({length: 42}, (_, i) => {
+    const day = i - lead + 1;
+    return day >= 1 && day <= length ? fromUtc(new Date(Date.UTC(year, month0, day))) : null;
+  });
+}
+
+// Fixed rather than Intl: ICU builds disagree on short months (en-GB gives "Sept" in Chromium)
+const SHORT_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+export function formatDate(iso: Iso): string {
+  const [y, m, d] = iso.split('-').map(Number);
+  return `${d} ${SHORT_MONTHS[m - 1]} ${y}`;
+}
+
+export function rangeLabel(from: Iso, to: Iso): string {
+  return from === to ? formatDate(from) : `${formatDate(from)} to ${formatDate(to)}`;
+}
+
+export function clampRange(range: {from: Iso; to: Iso}, min: Iso | '', max: Iso | ''): {from: Iso; to: Iso} | null {
+  const from = min && range.from < min ? min : range.from;
+  const to = max && range.to > max ? max : range.to;
+  return from <= to ? {from, to} : null;
+}
+
+export function pick(state: RangeState, day: Iso): {from: Iso; to: Iso | ''} {
+  if (!state.from || state.to || day < state.from) {
+    return {from: day, to: ''};
+  }
+  return {from: state.from, to: day};
+}

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

@@ -0,0 +1,375 @@
+import {
+  addDays,
+  addMonths,
+  clampRange,
+  type DatePreset,
+  daysBetween,
+  defaultPresets,
+  formatDate,
+  isIso,
+  type Iso,
+  monthGrid,
+  pick,
+  rangeLabel,
+  todayIso,
+  toUtc
+} from './date-range-math';
+import {AnchoredPopoverController} from '../../internal/anchored-popover';
+import {classMap} from 'lit/directives/class-map.js';
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnButton from '../button';
+import ZnIcon from '../icon';
+import ZnInput from '../input';
+
+import styles from './date-range.scss';
+
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const POP_WIDTH = 736;
+const NARROW = '(max-width: 560px)';
+const KEY_STEPS: Record<string, number> = {ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7};
+
+const presetsConverter = {
+  fromAttribute: (value: string | null): DatePreset[] | undefined => {
+    try {
+      const parsed: unknown = value ? JSON.parse(value) : undefined;
+      return Array.isArray(parsed) ? parsed as DatePreset[] : undefined;
+    } catch {
+      return undefined;
+    }
+  },
+  toAttribute: (value: DatePreset[] | undefined) => value ? JSON.stringify(value) : null,
+};
+
+/**
+ * @summary A button showing a date range that opens a two-month calendar with quick ranges.
+ * @documentation https://zinc.style/components/date-range
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-button
+ * @dependency zn-icon
+ * @dependency zn-input
+ *
+ * @event zn-change - Emitted when a range is applied, with `{from, to}` as its detail.
+ *
+ * @csspart trigger - The button that opens the picker.
+ * @csspart popover - The picker popover.
+ */
+export default class ZnDateRange extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static formAssociated = true;
+  static dependencies = {
+    'zn-button': ZnButton,
+    'zn-icon': ZnIcon,
+    'zn-input': ZnInput,
+  };
+
+  /** The first day of the range, `YYYY-MM-DD`. Defaults to today. */
+  @property({reflect: true}) from = '';
+
+  /** The last day of the range, `YYYY-MM-DD`. Defaults to today. */
+  @property({reflect: true}) to = '';
+
+  /** The earliest day that can be picked. */
+  @property() min = '';
+
+  /** The latest day that can be picked. */
+  @property() max = '';
+
+  /** Quick ranges as a JSON array of `{label, from, to}`, replacing the default ones. */
+  @property({converter: presetsConverter}) presets: DatePreset[] | undefined;
+
+  /** A short line shown under the calendar, such as how the range is used. */
+  @property() note = '';
+
+  /** Submits `name[from]` and `name[to]` with the form. */
+  @property() name = '';
+
+  /** The trigger button's size. */
+  @property() size: 'small' | 'medium' | 'large' = 'small';
+
+  @state() private draft: {from: Iso | ''; to: Iso | ''} = {from: '', to: ''};
+  @state() private view = {year: 0, month0: 0};
+  @state() private focusDay: Iso = '';
+  private readonly internals: ElementInternals | null;
+  // Not `popover`: that is the native Popover API attribute on every HTMLElement
+  private readonly anchor = new AnchoredPopoverController(this, {
+    trigger: '.date-range__trigger',
+    popover: '.date-range__pop',
+    width: () => Math.min(POP_WIDTH, window.innerWidth * 0.94),
+    align: 'start',
+    onHide: reason => {
+      if (reason === 'escape') this.focusTrigger();
+    },
+  });
+
+  constructor() {
+    super();
+    this.internals = typeof this.attachInternals === 'function' ? this.attachInternals() : null;
+  }
+
+  protected updated(changed: PropertyValues) {
+    if (changed.has('from') || changed.has('to') || changed.has('name')) {
+      this.syncFormValue();
+    }
+  }
+
+  private get rangeFrom(): Iso {
+    return isIso(this.from) ? this.from : todayIso();
+  }
+
+  private get rangeTo(): Iso {
+    return isIso(this.to) ? this.to : this.rangeFrom;
+  }
+
+  // A class rather than a media query: WebKit doesn't re-evaluate media queries in adopted sheets on resize
+  private get narrow(): boolean {
+    return window.matchMedia(NARROW).matches;
+  }
+
+  private get bounds(): [Iso | '', Iso | ''] {
+    return [isIso(this.min) ? this.min : '', isIso(this.max) ? this.max : ''];
+  }
+
+  private syncFormValue() {
+    if (!this.internals) return;
+    if (!this.name) {
+      this.internals.setFormValue(null);
+      return;
+    }
+    const data = new FormData();
+    data.append(`${this.name}[from]`, this.rangeFrom);
+    data.append(`${this.name}[to]`, this.rangeTo);
+    this.internals.setFormValue(data);
+  }
+
+  /** Opens the picker. */
+  async show() {
+    this.draft = {from: this.rangeFrom, to: this.rangeTo};
+    this.showMonth(this.draft.from);
+    this.focusDay = this.draft.from;
+    this.anchor.show();
+    await this.updateComplete;
+    this.shadowRoot?.querySelector<HTMLElement>('.date-range__day[tabindex="0"]')?.focus();
+  }
+
+  /** Closes the picker without applying. */
+  hide() {
+    this.anchor.hide();
+  }
+
+  private close() {
+    this.hide();
+    this.focusTrigger();
+  }
+
+  private toggle = () => {
+    if (this.anchor.open) {
+      this.hide();
+    } else {
+      void this.show();
+    }
+  };
+
+  private presetRange(preset: DatePreset) {
+    return clampRange(preset, ...this.bounds);
+  }
+
+  private focusTrigger() {
+    const trigger = this.anchor.trigger();
+    (trigger?.shadowRoot?.querySelector<HTMLElement>('button, a') ?? trigger)?.focus();
+  }
+
+  private applyRange(range: {from: Iso | ''; to: Iso | ''}) {
+    if (!range.from || !range.to || this.isDisabled(range.from) || this.isDisabled(range.to)) return;
+    this.from = range.from;
+    this.to = range.to;
+    this.close();
+    // Dispatched directly: zn-change's registered type carries no detail
+    this.dispatchEvent(new CustomEvent('zn-change', {
+      bubbles: true,
+      composed: true,
+      detail: {from: this.from, to: this.to}
+    }));
+  }
+
+  private showMonth(iso: Iso) {
+    const [y, m] = iso.split('-').map(Number);
+    this.view = {year: y, month0: m - 1};
+  }
+
+  private shiftMonth(by: number) {
+    this.shiftTo(this.view.year, this.view.month0 + by);
+  }
+
+  private shiftTo(year: number, month0: number) {
+    const date = new Date(Date.UTC(year, month0, 1));
+    this.view = {year: date.getUTCFullYear(), month0: date.getUTCMonth()};
+  }
+
+  private isDisabled(iso: Iso): boolean {
+    const [min, max] = this.bounds;
+    return (!!min && iso < min) || (!!max && iso > max);
+  }
+
+  private choose(iso: Iso) {
+    if (this.isDisabled(iso)) return;
+    this.draft = pick(this.draft, iso);
+    this.focusDay = iso;
+  }
+
+  private visible(iso: Iso): boolean {
+    const months = this.narrow ? 1 : 2;
+    const first = Date.UTC(this.view.year, this.view.month0, 1);
+    const end = Date.UTC(this.view.year, this.view.month0 + months, 1);
+    const at = toUtc(iso).getTime();
+    return at >= first && at < end;
+  }
+
+  private dayKeydown = async (e: KeyboardEvent) => {
+    const current = (e.target as HTMLElement).dataset.date;
+    if (!current) return;
+    // Weeks start on Monday
+    const weekday = (toUtc(current).getUTCDay() + 6) % 7;
+    const pageBy = e.shiftKey ? 12 : 1;
+    const next = KEY_STEPS[e.key] ? addDays(current, KEY_STEPS[e.key])
+      : e.key === 'Home' ? addDays(current, -weekday)
+        : e.key === 'End' ? addDays(current, 6 - weekday)
+          : e.key === 'PageUp' ? addMonths(current, -pageBy)
+            : e.key === 'PageDown' ? addMonths(current, pageBy)
+              : null;
+    if (!next) return;
+    e.preventDefault();
+    if (!this.visible(next)) {
+      // Backwards lands in the first visible month, forwards in the last
+      const lastVisible = next < current ? 0 : (this.narrow ? 0 : 1);
+      const at = toUtc(next);
+      this.shiftTo(at.getUTCFullYear(), at.getUTCMonth() - lastVisible);
+    }
+    this.focusDay = next;
+    await this.updateComplete;
+    this.shadowRoot?.querySelector<HTMLElement>(`[data-date="${next}"]`)?.focus();
+  };
+
+  // On commit (blur or Enter), not per keystroke: a date input reports each segment edit as a new valid value
+  private typed(end: 'from' | 'to', e: Event) {
+    const value = (e.target as ZnInput).value as string;
+    if (!isIso(value) || this.isDisabled(value)) return;
+
+    if (end === 'from') {
+      this.draft = this.draft.to && value <= this.draft.to ? {from: value, to: this.draft.to} : {from: value, to: ''};
+    } else {
+      this.draft = this.draft.from && value >= this.draft.from ? {from: this.draft.from, to: value} : {from: value, to: ''};
+    }
+    this.focusDay = value;
+    this.showMonth(value);
+  }
+
+  private stop = (e: Event) => e.stopPropagation();
+
+  render() {
+    return html`
+      <zn-button class="date-range__trigger" part="trigger" panel-bg size="${this.size}" icon="calendar@lu"
+                 icon-size="16" aria-haspopup="dialog" aria-expanded="${this.anchor.open}" @click="${this.toggle}">
+        ${rangeLabel(this.rangeFrom, this.rangeTo)}
+        <zn-icon class="date-range__chevron" src="chevron-down@lu" size="14"></zn-icon>
+      </zn-button>
+      ${this.anchor.open ? this.renderPopover() : nothing}`;
+  }
+
+  private renderPopover() {
+    const presets = this.presets ?? defaultPresets(todayIso());
+    const {from, to} = this.draft;
+    const next = new Date(Date.UTC(this.view.year, this.view.month0 + 1, 1));
+
+    return html`
+      <div class="${classMap({'date-range__pop': true, 'is-narrow': this.narrow})}" part="popover" role="dialog" aria-label="Date range"
+           style="${this.anchor.style}" @zn-change="${this.stop}" @zn-input="${this.stop}"
+           @zn-focus="${this.stop}" @zn-blur="${this.stop}">
+        <div class="date-range__presets" role="group" aria-label="Quick ranges">
+          ${presets.map(preset => {
+            const range = this.presetRange(preset);
+            const active = !!range && range.from === from && range.to === to;
+            return html`
+              <button type="button" class="${classMap({'date-range__preset': true, 'is-active': active})}"
+                      aria-pressed="${active}" aria-disabled="${!range}"
+                      @click="${() => range && this.applyRange(range)}">${preset.label}</button>`;
+          })}
+        </div>
+        <div class="date-range__main">
+          <div class="date-range__inputs">
+            <zn-input class="date-range__from" type="date" label="From" .value="${from}"
+                      min="${this.min || nothing}" max="${this.max || nothing}"
+                      @zn-blur="${(e: Event) => this.typed('from', e)}"
+                      @keydown="${(e: KeyboardEvent) => e.key === 'Enter' && this.typed('from', e)}"></zn-input>
+            <span class="date-range__dash">to</span>
+            <zn-input class="date-range__to" type="date" label="To" .value="${to}"
+                      min="${this.min || nothing}" max="${this.max || nothing}"
+                      @zn-blur="${(e: Event) => this.typed('to', e)}"
+                      @keydown="${(e: KeyboardEvent) => e.key === 'Enter' && this.typed('to', e)}"></zn-input>
+          </div>
+          <div class="date-range__months">
+            <zn-button class="date-range__nav date-range__nav--prev" icon="chevron-left@lu" icon-size="16"
+                       icon-button plain aria-label="Previous month"
+                       @click="${() => this.shiftMonth(-1)}"></zn-button>
+            ${this.renderMonth(this.view.year, this.view.month0)}
+            ${this.renderMonth(next.getUTCFullYear(), next.getUTCMonth())}
+            <zn-button class="date-range__nav date-range__nav--next" icon="chevron-right@lu" icon-size="16"
+                       icon-button plain aria-label="Next month"
+                       @click="${() => this.shiftMonth(1)}"></zn-button>
+          </div>
+          ${this.note ? html`<p class="date-range__note">${this.note}</p>` : nothing}
+          <div class="date-range__foot">
+            <span class="date-range__summary">
+              ${from && to ? `${rangeLabel(from, to)} · ${daysBetween(from, to) + 1} days` : 'Pick a last day'}
+            </span>
+            <zn-button color="transparent" @click="${() => this.close()}">Cancel</zn-button>
+            <zn-button class="date-range__apply" color="primary" ?disabled="${!from || !to}"
+                       @click="${() => this.applyRange(this.draft)}">Apply
+            </zn-button>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  private renderMonth(year: number, month0: number) {
+    const cells = monthGrid(year, month0);
+    const rows = Array.from({length: 6}, (_, i) => cells.slice(i * 7, i * 7 + 7)).filter(row => row.some(Boolean));
+    const title = new Intl.DateTimeFormat('en-GB', {month: 'long', year: 'numeric', timeZone: 'UTC'})
+      .format(new Date(Date.UTC(year, month0, 1)));
+    const today = todayIso();
+    const {from, to} = this.draft;
+    const tabStop = [this.focusDay, from].find(d => d && this.visible(d))
+      ?? `${this.view.year}-${String(this.view.month0 + 1).padStart(2, '0')}-01`;
+
+    return html`
+      <div class="date-range__month">
+        <div class="date-range__head">${title}</div>
+        <div class="date-range__grid" role="grid" aria-label="${title}" @keydown="${this.dayKeydown}">
+          <div class="date-range__week" role="row">
+            ${WEEKDAYS.map(d => html`<span role="columnheader">${d}</span>`)}
+          </div>
+          ${rows.map(row => html`
+            <div class="date-range__row" role="row">
+              ${row.map(iso => iso ? html`
+                <button type="button" role="gridcell" data-date="${iso}"
+                        class="${classMap({
+                          'date-range__day': true,
+                          'is-start': iso === from,
+                          'is-end': !!to && iso === to,
+                          'is-in': !!from && !!to && iso > from && iso < to,
+                          'is-today': iso === today,
+                        })}"
+                        tabindex="${iso === tabStop ? 0 : -1}"
+                        aria-label="${formatDate(iso)}"
+                        aria-selected="${!!from && iso >= from && iso <= (to || from)}"
+                        aria-disabled="${this.isDisabled(iso)}"
+                        @click="${() => this.choose(iso)}">${Number(iso.slice(8))}</button>` : html`
+                <span class="date-range__pad" role="gridcell"></span>`)}
+            </div>`)}
+        </div>
+      </div>`;
+  }
+}