@boostdev/design-system-components 2.7.1 → 2.11.0

package/src/web-components/ui/bds-button-group.ts

@@ -1,76 +1,25 @@
-import { LitElement, css, html } from 'lit';
+import { BdsButtonContainer, type ButtonContainerVariant } from './bds-button-container';
 
-export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+// Importing this module also registers <bds-button-container> (side effect of
+// the import above), so a deprecated `bds-button-group` deep-import still pulls
+// in the real component.
 
 /**
- * `<bds-button-group>` — groups related buttons into a flex container.
+ * `<bds-button-group>` — **deprecated** alias of `<bds-button-container>`.
  *
- * Attributes:
- *   orientation — `"horizontal"` (default) | `"vertical"`
- *   aria-label  — accessible label for the group
- *
- * Slots:
- *   (default) — `<bds-button>` elements
- *
- * @example
- * <bds-button-group aria-label="View options">
- *   <bds-button>Day</bds-button>
- *   <bds-button>Week</bds-button>
- *   <bds-button>Month</bds-button>
- * </bds-button-group>
+ * @deprecated Use `<bds-button-container>` (class `BdsButtonContainer`) instead.
+ * `bds-button-group` is a backwards-compatible alias and will be removed in a
+ * future major version. It behaves identically to `<bds-button-container>`.
  */
-export class BdsButtonGroup extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    .group {
-      display: inline-flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 0;
-    }
-
-    :host([orientation='vertical']) .group {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    /* Collapse border radius between adjacent buttons */
-    ::slotted(*:not(:first-child)) {
-      --button_radius-start: 0;
-    }
-
-    ::slotted(*:not(:last-child)) {
-      --button_radius-end: 0;
-    }
-  `;
+export class BdsButtonGroup extends BdsButtonContainer {}
 
-  static properties = {
-    orientation: { type: String, reflect: true },
-    'aria-label': { type: String },
-  };
+/** @deprecated Use `ButtonContainerVariant` instead. */
+export type ButtonGroupVariant = ButtonContainerVariant;
 
-  declare orientation: ButtonGroupOrientation;
-  declare ['aria-label']: string | undefined;
-
-  constructor() {
-    super();
-    this.orientation = 'horizontal';
-  }
-
-  render() {
-    return html`
-      <div class="group" role="group" aria-label=${this['aria-label'] ?? ''}>
-        <slot></slot>
-      </div>
-    `;
-  }
+if (!customElements.get('bds-button-group')) {
+  customElements.define('bds-button-group', BdsButtonGroup);
 }
 
-customElements.define('bds-button-group', BdsButtonGroup);
-
 declare global {
   interface HTMLElementTagNameMap {
     'bds-button-group': BdsButtonGroup;

package/src/web-components/ui/bds-calendar-range.spec.ts

@@ -0,0 +1,123 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsCalendarRange } from './bds-calendar-range';
+
+const day = (el: HTMLElement, iso: string) =>
+  el.shadowRoot!.querySelector<HTMLButtonElement>(`[data-date="${iso}"]`)!;
+
+describe('bds-calendar-range', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-calendar-range')).toBe(BdsCalendarRange);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsCalendarRange.formAssociated).toBe(true);
+  });
+
+  it('paints a committed range from the value attribute', async () => {
+    const el = await fixture('<bds-calendar-range value="2024-01-10/2024-01-12"></bds-calendar-range>');
+    expect(day(el, '2024-01-10').classList.contains('--range-start')).toBe(true);
+    expect(day(el, '2024-01-12').classList.contains('--range-end')).toBe(true);
+    expect(day(el, '2024-01-11').classList.contains('--in-range')).toBe(true);
+    cleanup(el);
+  });
+
+  it('fires bds-range-select with a sorted { start, end } after two clicks', async () => {
+    const el = await fixture('<bds-calendar-range value="2024-01-10/2024-01-12"></bds-calendar-range>') as BdsCalendarRange;
+    const events: Array<{ start: string; end: string }> = [];
+    el.addEventListener('bds-range-select', (e: Event) => events.push((e as CustomEvent).detail));
+    day(el, '2024-01-08').click(); // anchor
+    day(el, '2024-01-05').click(); // end (before anchor → sorted)
+    expect(events).toHaveLength(1);
+    expect(events[0]).toEqual({ start: '2024-01-05', end: '2024-01-08' });
+    expect(el.value).toBe('2024-01-05/2024-01-08');
+    cleanup(el);
+  });
+
+  it('fires bds-range-start on the first click', async () => {
+    const el = await fixture('<bds-calendar-range value="2024-01-10/2024-01-12"></bds-calendar-range>') as BdsCalendarRange;
+    const starts: Array<{ start: string }> = [];
+    el.addEventListener('bds-range-start', (e: Event) => starts.push((e as CustomEvent).detail));
+    day(el, '2024-01-06').click();
+    expect(starts).toEqual([{ start: '2024-01-06' }]);
+    cleanup(el);
+  });
+
+  it('previews the range on hover after the first click', async () => {
+    const el = await fixture('<bds-calendar-range value="2024-01-10/2024-01-12"></bds-calendar-range>') as BdsCalendarRange;
+    day(el, '2024-01-05').click();
+    day(el, '2024-01-08').dispatchEvent(new Event('pointerenter', { bubbles: true }));
+    await el.updateComplete;
+    expect(day(el, '2024-01-05').classList.contains('--range-start')).toBe(true);
+    expect(day(el, '2024-01-08').classList.contains('--range-end')).toBe(true);
+    expect(day(el, '2024-01-06').classList.contains('--in-range')).toBe(true);
+    cleanup(el);
+  });
+
+  it('does not start a range on a disallowed date', async () => {
+    const el = await fixture('<bds-calendar-range value="2024-01-10/2024-01-12" min="2024-01-06"></bds-calendar-range>') as BdsCalendarRange;
+    const events: unknown[] = [];
+    el.addEventListener('bds-range-start', () => events.push(1));
+    const disallowed = day(el, '2024-01-04');
+    expect(disallowed.getAttribute('aria-disabled')).toBe('true');
+    disallowed.click();
+    expect(events).toHaveLength(0);
+    cleanup(el);
+  });
+
+  it('renders `months` month grids', async () => {
+    const el = await fixture('<bds-calendar-range value="2024-01-10/2024-01-12" months="2"></bds-calendar-range>');
+    expect(el.shadowRoot!.querySelectorAll('.grid').length).toBe(2);
+    cleanup(el);
+  });
+
+  it('keeps exactly one tabbable day and moves focus across months when months=2', async () => {
+    // Range start (Jan 31) is real in January's grid and a greyed --outside cell in
+    // February's; only the real cell is tabbable, and arrow focus lands on the real
+    // Feb cell, not the disabled outside duplicate.
+    const el = await fixture('<bds-calendar-range value="2024-01-31/2024-01-31" months="2"></bds-calendar-range>') as BdsCalendarRange;
+    expect(el.shadowRoot!.querySelectorAll('.day[tabindex="0"]').length).toBe(1);
+    const jan31 = el.shadowRoot!.querySelector<HTMLButtonElement>('.day:not(.--outside)[data-date="2024-01-31"]')!;
+    Object.defineProperty(el.shadowRoot, 'activeElement', { value: jan31, configurable: true });
+    jan31.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await el.updateComplete;
+    const feb1 = el.shadowRoot!.querySelector<HTMLButtonElement>('.day:not(.--outside)[data-date="2024-02-01"]')!;
+    expect(feb1.getAttribute('tabindex')).toBe('0');
+    expect(el.shadowRoot!.querySelectorAll('.day[tabindex="0"]').length).toBe(1);
+    cleanup(el);
+  });
+
+  it('cancels an in-progress selection on Escape', async () => {
+    const el = await fixture('<bds-calendar-range value="2024-01-10/2024-01-12"></bds-calendar-range>') as BdsCalendarRange;
+    const committed: unknown[] = [];
+    el.addEventListener('bds-range-select', () => committed.push(1));
+    day(el, '2024-01-05').click(); // anchor at Jan 5
+    await el.updateComplete;
+    expect(day(el, '2024-01-05').classList.contains('--range-start')).toBe(true);
+    el.shadowRoot!.querySelector('.calendar')!
+      .dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(committed).toHaveLength(0);
+    expect(day(el, '2024-01-05').classList.contains('--range-start')).toBe(false);
+    expect(day(el, '2024-01-10').classList.contains('--range-start')).toBe(true);
+    expect(day(el, '2024-01-12').classList.contains('--range-end')).toBe(true);
+    cleanup(el);
+  });
+
+  it('never paints range/endpoint state onto outside days', async () => {
+    const el = await fixture('<bds-calendar-range value="2024-01-28/2024-02-02"></bds-calendar-range>') as BdsCalendarRange;
+    const feb2 = day(el, '2024-02-02');
+    expect(feb2.classList.contains('--outside')).toBe(true);
+    expect(feb2.classList.contains('--range-end')).toBe(false);
+    expect(feb2.closest('[role="gridcell"]')!.getAttribute('aria-selected')).toBe('false');
+    expect(day(el, '2024-02-01').classList.contains('--in-range')).toBe(false);
+    cleanup(el);
+  });
+
+  it('sorts an externally reversed value attribute', async () => {
+    const el = await fixture('<bds-calendar-range value="2024-01-12/2024-01-10"></bds-calendar-range>');
+    expect(day(el, '2024-01-10').classList.contains('--range-start')).toBe(true);
+    expect(day(el, '2024-01-12').classList.contains('--range-end')).toBe(true);
+    expect(day(el, '2024-01-11').classList.contains('--in-range')).toBe(true);
+    cleanup(el);
+  });
+});

package/src/web-components/ui/bds-calendar-range.ts

@@ -0,0 +1,307 @@
+import { LitElement, html, nothing } from 'lit';
+import { calendarStyles } from './calendar-styles';
+import {
+  toISO, parseISO, isSameDay, isInRange, sortRange,
+  isDisabled as coreIsDisabled, buildMonthGrid, getWeekdayNames,
+  getMonthLabel, getDayLabel, nextFocusDate, type ISODate,
+} from '../../components/ui/Calendar/calendar-core';
+
+/**
+ * `<bds-calendar-range>` — form-associated range date picker.
+ *
+ * Two-click range selection with hover/focus preview. Value is an ISO range
+ * `"YYYY-MM-DD/YYYY-MM-DD"`. Shares all date logic with the React <CalendarRange>
+ * through calendar-core.
+ *
+ * Attributes: name, value, min, max, disabled, months, page-by,
+ *   first-day-of-week (default 1), locale, previous-label, next-label.
+ * Properties (JS only): isDateDisallowed, formatWeekday, formatMonth, formatDay.
+ * Events: bds-range-select — detail: { start, end }; bds-range-start — detail: { start }.
+ */
+export class BdsCalendarRange extends LitElement {
+  static formAssociated = true;
+
+  static styles = calendarStyles;
+
+  static properties = {
+    name:           { type: String, reflect: true },
+    value:          { type: String, reflect: true },
+    min:            { type: String },
+    max:            { type: String },
+    disabled:       { type: Boolean, reflect: true },
+    months:         { type: Number, reflect: true },
+    pageBy:         { type: String, attribute: 'page-by' },
+    firstDayOfWeek: { type: Number, attribute: 'first-day-of-week' },
+    locale:         { type: String },
+    previousLabel:  { type: String, attribute: 'previous-label' },
+    nextLabel:      { type: String, attribute: 'next-label' },
+    isDateDisallowed: { attribute: false },
+    formatWeekday:    { attribute: false },
+    formatMonth:      { attribute: false },
+    formatDay:        { attribute: false },
+  };
+
+  declare name: string;
+  declare value: string;
+  declare min: string;
+  declare max: string;
+  declare disabled: boolean;
+  declare months: number;
+  declare pageBy: 'months' | 'single';
+  declare firstDayOfWeek: number;
+  declare locale: string;
+  declare previousLabel: string;
+  declare nextLabel: string;
+  declare isDateDisallowed?: (date: Date) => boolean;
+  declare formatWeekday?: (date: Date) => string;
+  declare formatMonth?: (date: Date) => string;
+  declare formatDay?: (date: Date) => string;
+
+  private _internals!: ElementInternals;
+  private _viewYear: number;
+  private _viewMonth: number;
+  private _focusedIso: ISODate | null = null;
+  private _anchorIso: ISODate | null = null;
+  private _hoverIso: ISODate | null = null;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.value = '';
+    this.min = '';
+    this.max = '';
+    this.disabled = false;
+    this.months = 1;
+    this.pageBy = 'months';
+    this.firstDayOfWeek = 1;
+    this.locale = '';
+    this.previousLabel = 'Previous month';
+    this.nextLabel = 'Next month';
+    const now = new Date();
+    this._viewYear = now.getFullYear();
+    this._viewMonth = now.getMonth();
+  }
+
+  willUpdate(changed: Map<string, unknown>) {
+    if (changed.has('value')) {
+      const committed = this._committed();
+      // Only re-center when the range start isn't already visible (matches React),
+      // so committing a range within the shown months doesn't jump the view.
+      if (committed && !this._monthVisible(committed[0])) {
+        this._viewYear = committed[0].getFullYear();
+        this._viewMonth = committed[0].getMonth();
+      }
+      this._internals.setFormValue?.(this.value);
+    }
+  }
+
+  formResetCallback() { this.value = ''; this._internals.setFormValue?.(''); }
+  formDisabledCallback(disabled: boolean) { this.disabled = disabled; }
+
+  private get _localeOrUndefined(): string | undefined { return this.locale || undefined; }
+  private get _count(): number { return Math.max(1, this.months || 1); }
+
+  private _committed(): [Date, Date] | null {
+    const [s, e] = (this.value || '').split('/');
+    const sd = parseISO(s ?? '');
+    const ed = parseISO(e ?? '');
+    // Sort so an externally-set out-of-order value ("end/start") still paints correctly.
+    return sd && ed ? sortRange(sd, ed) : null;
+  }
+
+  private _paint(): [Date, Date] | null {
+    if (this._anchorIso) {
+      const a = parseISO(this._anchorIso)!;
+      const pe = parseISO(this._hoverIso ?? this._focusedIso ?? this._anchorIso) ?? a;
+      return sortRange(a, pe);
+    }
+    return this._committed();
+  }
+
+  private _monthVisible(date: Date): boolean {
+    const start = this._viewYear * 12 + this._viewMonth;
+    const idx = date.getFullYear() * 12 + date.getMonth();
+    return idx >= start && idx < start + this._count;
+  }
+  private _setView(d: Date) { this._viewYear = d.getFullYear(); this._viewMonth = d.getMonth(); }
+
+  private _page(dir: number) {
+    this._focusedIso = null;
+    const step = this.pageBy === 'single' ? 1 : this._count;
+    this._setView(new Date(this._viewYear, this._viewMonth + dir * step, 1));
+    this.requestUpdate();
+  }
+
+  private _isDisabledDate(iso: ISODate): boolean {
+    const date = parseISO(iso);
+    if (!date) return false;
+    return coreIsDisabled(date, {
+      min: parseISO(this.min) ?? undefined,
+      max: parseISO(this.max) ?? undefined,
+      isDateDisallowed: this.isDateDisallowed,
+    });
+  }
+
+  private _selectDate(iso: ISODate) {
+    if (this.disabled || this._isDisabledDate(iso)) return;
+    const date = parseISO(iso);
+    if (!date) return;
+    if (!this._anchorIso) {
+      this._anchorIso = iso;
+      this._hoverIso = null;
+      this.dispatchEvent(new CustomEvent('bds-range-start', { detail: { start: iso }, bubbles: true, composed: true }));
+      this.requestUpdate();
+    } else {
+      const [s, e] = sortRange(parseISO(this._anchorIso)!, date);
+      const startIso = toISO(s);
+      const endIso = toISO(e);
+      this.value = `${startIso}/${endIso}`;
+      this._internals.setFormValue?.(this.value);
+      this.dispatchEvent(new CustomEvent('bds-range-select', { detail: { start: startIso, end: endIso }, bubbles: true, composed: true }));
+      this._anchorIso = null;
+      this._hoverIso = null;
+    }
+  }
+
+  private _handleKeydown = (e: KeyboardEvent) => {
+    if (this.disabled) return;
+    if (e.key === 'Escape') { this._anchorIso = null; this._hoverIso = null; this.requestUpdate(); return; }
+    const focused = this.shadowRoot?.activeElement as HTMLButtonElement | null;
+    if (!focused?.dataset.date) return;
+    const current = parseISO(focused.dataset.date);
+    if (!current) return;
+    const next = nextFocusDate(current, e.key, { shiftKey: e.shiftKey, firstDayOfWeek: this.firstDayOfWeek });
+    if (!next) return;
+    e.preventDefault();
+    const iso = toISO(next);
+    this._focusedIso = iso;
+    if (!this._monthVisible(next)) this._setView(next);
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector<HTMLButtonElement>(`.day:not(.--outside)[data-date="${iso}"]`)?.focus();
+    });
+  };
+
+  private _onDayEnter(iso: ISODate) {
+    if (!this._anchorIso) return;
+    this._hoverIso = iso;
+    this.requestUpdate();
+  }
+
+  private _weekdayNames(): string[] {
+    if (this.formatWeekday) {
+      return Array.from({ length: 7 }, (_, i) =>
+        this.formatWeekday!(new Date(2023, 0, 1 + ((this.firstDayOfWeek + i) % 7))));
+    }
+    return getWeekdayNames(this._localeOrUndefined, this.firstDayOfWeek);
+  }
+  private _monthLabel(year: number, month: number): string {
+    return this.formatMonth ? this.formatMonth(new Date(year, month, 1)) : getMonthLabel(year, month, this._localeOrUndefined);
+  }
+  private _dayLabel(date: Date): string {
+    return this.formatDay ? this.formatDay(date) : getDayLabel(date, this._localeOrUndefined);
+  }
+
+  private _tabbableIso(paint: [Date, Date] | null): ISODate {
+    const today = new Date();
+    if (this._focusedIso) return this._focusedIso;
+    if (this._anchorIso && this._monthVisible(parseISO(this._anchorIso)!)) return this._anchorIso;
+    if (paint && this._monthVisible(paint[0])) return toISO(paint[0]);
+    if (this._monthVisible(today)) return toISO(today);
+    return toISO(new Date(this._viewYear, this._viewMonth, 1));
+  }
+
+  private _renderMonth(index: number, weekdays: string[], paint: [Date, Date] | null, tabbableIso: ISODate) {
+    const first = new Date(this._viewYear, this._viewMonth + index, 1);
+    const year = first.getFullYear();
+    const month = first.getMonth();
+    const todayIso = toISO(new Date());
+    const cells = buildMonthGrid(year, month, this.firstDayOfWeek);
+    const rows: typeof cells[] = [];
+    for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));
+    const label = this._monthLabel(year, month);
+
+    return html`
+      <div class="month">
+        <div class="header">
+          <span class="nav-slot">
+            ${index === 0 ? html`
+              <button class="nav-btn" type="button" aria-label=${this.previousLabel} ?disabled=${this.disabled} @click=${() => this._page(-1)}>
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>` : null}
+          </span>
+          <span class="month-label" aria-live="polite">${label}</span>
+          <span class="nav-slot">
+            ${index === this._count - 1 ? html`
+              <button class="nav-btn" type="button" aria-label=${this.nextLabel} ?disabled=${this.disabled} @click=${() => this._page(1)}>
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+                </svg>
+              </button>` : null}
+          </span>
+        </div>
+
+        <div class="grid" role="grid" aria-label=${label}>
+          <div class="row" role="row">
+            ${weekdays.map(d => html`<div class="weekday" role="columnheader" aria-label=${d}>${d}</div>`)}
+          </div>
+          ${rows.map(week => html`
+            <div class="row" role="row">
+              ${week.map(({ iso, date, day, outside }) => {
+                const isStart = !outside && !!paint && isSameDay(date, paint[0]);
+                const isEnd = !outside && !!paint && isSameDay(date, paint[1]);
+                const inRange = !outside && !!paint && !isStart && !isEnd && isInRange(date, paint[0], paint[1]);
+                const isToday = !outside && iso === todayIso;
+                const isDisabled = this._isDisabledDate(iso) || this.disabled;
+                const classes = [
+                  'day',
+                  outside ? '--outside' : '',
+                  isStart ? '--range-start' : '',
+                  isEnd ? '--range-end' : '',
+                  inRange ? '--in-range' : '',
+                  isToday && !isStart && !isEnd ? '--today' : '',
+                ].filter(Boolean).join(' ');
+                return html`
+                  <div class="cell" role="gridcell" aria-selected=${isStart || isEnd ? 'true' : 'false'}>
+                    <button
+                      class=${classes}
+                      type="button"
+                      data-date=${iso}
+                      aria-label=${this._dayLabel(date)}
+                      ?disabled=${isDisabled || outside}
+                      aria-current=${isToday ? 'date' : nothing}
+                      aria-disabled=${isDisabled ? 'true' : 'false'}
+                      tabindex=${!outside && iso === tabbableIso ? '0' : '-1'}
+                      @click=${() => this._selectDate(iso)}
+                      @pointerenter=${() => this._onDayEnter(iso)}
+                    >${day}</button>
+                  </div>`;
+              })}
+            </div>`)}
+        </div>
+      </div>`;
+  }
+
+  render() {
+    const weekdays = this._weekdayNames();
+    const paint = this._paint();
+    const tabbableIso = this._tabbableIso(paint);
+    return html`
+      <div class="calendar" @keydown=${this._handleKeydown}>
+        <div class="months">
+          ${Array.from({ length: this._count }, (_, i) => this._renderMonth(i, weekdays, paint, tabbableIso))}
+        </div>
+      </div>`;
+  }
+}
+
+customElements.define('bds-calendar-range', BdsCalendarRange);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-calendar-range': BdsCalendarRange;
+  }
+}