@boostdev/design-system-components 2.8.0 → 2.11.0

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

@@ -1,178 +1,45 @@
-import { LitElement, css, html } from 'lit';
-
-/** Format a Date to ISO 8601 `YYYY-MM-DD` string in local time. */
-function toISO(date: Date): string {
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, '0');
-  const d = String(date.getDate()).padStart(2, '0');
-  return `${y}-${m}-${d}`;
-}
-
-/** Parse `YYYY-MM-DD` to a local-time Date, or null if invalid. */
-function parseISO(iso: string): Date | null {
-  if (!iso) return null;
-  const [y, m, d] = iso.split('-').map(Number);
-  if (!y || !m || !d) return null;
-  const date = new Date(y, m - 1, d);
-  return isNaN(date.getTime()) ? null : date;
-}
+import { LitElement, html, nothing } from 'lit';
+import { calendarStyles } from './calendar-styles';
+import {
+  toISO, parseISO, isDisabled as coreIsDisabled,
+  buildMonthGrid, getWeekdayNames, getMonthLabel, getDayLabel, nextFocusDate, type ISODate,
+} from '../../components/ui/Calendar/calendar-core';
 
 /**
  * `<bds-calendar>` — form-associated date picker calendar.
  *
- * Renders a month grid for selecting a date. Keyboard-navigable. Participates
- * in HTML forms via the Form-Associated Custom Elements API.
- *
- * Attributes:
- *   name     — form field name
- *   value    — selected date in ISO 8601 format (`YYYY-MM-DD`)
- *   min      — minimum selectable date (ISO 8601)
- *   max      — maximum selectable date (ISO 8601)
- *   disabled — disables all interaction
- *
- * Events:
- *   bds-date-select — fired when user selects a date; `detail: { date: string }` (ISO 8601)
+ * Month grid for selecting a date, keyboard-navigable via the WAI-ARIA grid
+ * pattern (roving tabindex). Participates in forms via the Form-Associated
+ * Custom Elements API. Shares all date logic with the React <Calendar> through
+ * calendar-core.
  *
- * @example
- * <bds-calendar name="birthday" value="2024-03-15"></bds-calendar>
+ * Attributes: name, value (YYYY-MM-DD), min, max, disabled, months,
+ *   page-by ("months"|"single"), first-day-of-week (0–6, default 1),
+ *   locale, previous-label, next-label.
+ * Properties (JS only): isDateDisallowed, formatWeekday, formatMonth, formatDay.
+ * Events: bds-date-select — detail: { date: string } (ISO 8601).
  */
 export class BdsCalendar extends LitElement {
   static formAssociated = true;
 
-  static styles = css`
-    :host {
-      display: inline-block;
-      font-family: var(--bds-font_family--body);
-      font-size: var(--bds-font_size--body);
-    }
-
-    :host([disabled]) {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-
-    .calendar {
-      background-color: var(--bds-color_bg);
-      border-radius: var(--bds-border_radius--m);
-      box-shadow: var(--bds-shadow_s);
-      padding: var(--bds-space_s);
-      inline-size: fit-content;
-    }
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-block-end: var(--bds-space_s);
-    }
-
-    .month-label {
-      font-weight: var(--bds-font_weight--semibold);
-      color: var(--bds-color_on-bg);
-    }
-
-    .nav-btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      inline-size: 2rem;
-      block-size: 2rem;
-      border: none;
-      border-radius: var(--bds-border_radius--xs);
-      background: none;
-      color: var(--bds-color_on-bg);
-      cursor: pointer;
-      transition: var(--bds-animation_transition);
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      .nav-btn:hover {
-        background-color: var(--bds-color_bg--subtle);
-      }
-    }
-
-    .nav-btn:focus-visible {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
-    }
-
-    .nav-btn svg {
-      inline-size: 1rem;
-      block-size: 1rem;
-    }
-
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(7, 2.25rem);
-      gap: var(--bds-space_xxxs);
-    }
-
-    .weekday {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      block-size: 2rem;
-      font-size: var(--bds-font_size--body--s);
-      font-weight: var(--bds-font_weight--semibold);
-      color: var(--bds-color_on-bg--subtle);
-      user-select: none;
-    }
-
-    .day {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      inline-size: 2.25rem;
-      block-size: 2.25rem;
-      border: none;
-      border-radius: var(--bds-border_radius--xs);
-      background: none;
-      color: var(--bds-color_on-bg);
-      cursor: pointer;
-      font-size: var(--bds-font_size--body--s);
-      font-family: inherit;
-      transition: var(--bds-animation_transition);
-    }
-
-    .day:focus-visible {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      .day:not(.--selected):not(.--outside):not([disabled]):hover {
-        background-color: var(--bds-color_bg--subtle);
-      }
-    }
-
-    .day.--today {
-      font-weight: var(--bds-font_weight--semibold);
-      color: var(--bds-color_interactive_on-bg);
-    }
-
-    .day.--selected {
-      background-color: var(--bds-color_interactive);
-      color: var(--bds-color_on-interactive);
-      font-weight: var(--bds-font_weight--semibold);
-    }
-
-    .day.--outside {
-      color: var(--bds-color_on-bg--subtle);
-      opacity: 0.4;
-    }
-
-    .day[disabled] {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
-  `;
+  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 },
+    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;
@@ -180,10 +47,21 @@ export class BdsCalendar extends LitElement {
   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; // 0-based
+  private _viewMonth: number;
+  private _focusedIso: ISODate | null = null;
 
   constructor() {
     super();
@@ -193,228 +71,192 @@ export class BdsCalendar extends LitElement {
     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') && this.value) {
+      const d = parseISO(this.value);
+      // Only re-center when the value's month isn't already visible, so selecting a
+      // date within the shown months doesn't jump the view (matches the React side).
+      if (d && !this._monthVisible(d)) { this._viewYear = d.getFullYear(); this._viewMonth = d.getMonth(); }
+    }
+  }
+
   updated(changed: Map<string, unknown>) {
     super.updated(changed);
-    if (changed.has('value')) {
-      this._internals.setFormValue?.(this.value);
-      if (this.value) {
-        const d = parseISO(this.value);
-        if (d) {
-          this._viewYear = d.getFullYear();
-          this._viewMonth = d.getMonth();
-        }
-      }
-    }
+    if (changed.has('value')) this._internals.setFormValue?.(this.value);
   }
 
-  formResetCallback() {
-    this.value = '';
-    this._internals.setFormValue?.('');
+  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 _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 _prevMonth() {
-    if (this._viewMonth === 0) {
-      this._viewMonth = 11;
-      this._viewYear--;
-    } else {
-      this._viewMonth--;
-    }
+  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 _nextMonth() {
-    if (this._viewMonth === 11) {
-      this._viewMonth = 0;
-      this._viewYear++;
-    } else {
-      this._viewMonth++;
-    }
-    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: string) {
-    if (this._isDisabledDate(iso)) return;
+  private _selectDate(iso: ISODate) {
+    if (this.disabled || this._isDisabledDate(iso)) return;
     this.value = iso;
     this._internals.setFormValue?.(iso);
     this.dispatchEvent(new CustomEvent('bds-date-select', {
-      detail: { date: iso },
-      bubbles: true,
-      composed: true,
+      detail: { date: iso }, bubbles: true, composed: true,
     }));
   }
 
-  private _isDisabledDate(iso: string): boolean {
-    if (this.min && iso < this.min) return true;
-    if (this.max && iso > this.max) return true;
-    return false;
-  }
-
   private _handleKeydown = (e: KeyboardEvent) => {
+    if (this.disabled) return;
     const focused = this.shadowRoot?.activeElement as HTMLButtonElement | null;
     if (!focused?.dataset.date) return;
-
     const current = parseISO(focused.dataset.date);
     if (!current) return;
 
-    let next: Date | null = null;
-
-    if (e.key === 'ArrowRight') {
-      e.preventDefault();
-      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
-    } else if (e.key === 'ArrowLeft') {
-      e.preventDefault();
-      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
-    } else if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 7);
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 7);
-    } else if (e.key === 'Home') {
-      e.preventDefault();
-      const dow = current.getDay(); // 0 = Sunday
-      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - dow);
-    } else if (e.key === 'End') {
-      e.preventDefault();
-      const dow = current.getDay();
-      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + (6 - dow));
-    } else if (e.key === 'PageUp') {
-      e.preventDefault();
-      this._prevMonth();
-      return;
-    } else if (e.key === 'PageDown') {
-      e.preventDefault();
-      this._nextMonth();
-      return;
-    }
-
-    if (next) {
-      const iso = toISO(next);
-      // Navigate view if needed
-      if (next.getMonth() !== this._viewMonth || next.getFullYear() !== this._viewYear) {
-        this._viewYear = next.getFullYear();
-        this._viewMonth = next.getMonth();
-        this.requestUpdate();
-        // Focus after update
-        this.updateComplete.then(() => {
-          this.shadowRoot?.querySelector<HTMLButtonElement>(`[data-date="${iso}"]`)?.focus();
-        });
-      } else {
-        this.shadowRoot?.querySelector<HTMLButtonElement>(`[data-date="${iso}"]`)?.focus();
-      }
-    }
+    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 _buildGrid(): { iso: string; outside: boolean }[] {
-    const year = this._viewYear;
-    const month = this._viewMonth;
-
-    // Days in month
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-    // First weekday of the month (0=Sun … 6=Sat)
-    const firstDow = new Date(year, month, 1).getDay();
-
-    const cells: { iso: string; outside: boolean }[] = [];
-
-    // Leading days from previous month
-    const prevMonthDays = new Date(year, month, 0).getDate();
-    for (let i = firstDow - 1; i >= 0; i--) {
-      const d = new Date(year, month - 1, prevMonthDays - i);
-      cells.push({ iso: toISO(d), outside: true });
-    }
-
-    // Current month days
-    for (let d = 1; d <= daysInMonth; d++) {
-      cells.push({ iso: toISO(new Date(year, month, d)), outside: false });
-    }
-
-    // Trailing days to complete last row
-    const trailing = (7 - (cells.length % 7)) % 7;
-    for (let d = 1; d <= trailing; d++) {
-      cells.push({ iso: toISO(new Date(year, month + 1, d)), outside: true });
+  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);
+  }
 
-    return cells;
+  private _monthLabel(year: number, month: number): string {
+    return this.formatMonth ? this.formatMonth(new Date(year, month, 1)) : getMonthLabel(year, month, this._localeOrUndefined);
   }
 
-  render() {
-    const today = toISO(new Date());
-    const cells = this._buildGrid();
+  private _dayLabel(date: Date): string {
+    return this.formatDay ? this.formatDay(date) : getDayLabel(date, this._localeOrUndefined);
+  }
 
-    const fmt = new Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' });
-    const monthLabel = fmt.format(new Date(this._viewYear, this._viewMonth, 1));
+  private _tabbableIso(): ISODate {
+    const today = new Date();
+    const selected = parseISO(this.value);
+    if (this._focusedIso) return this._focusedIso;
+    if (selected && this._monthVisible(selected)) return toISO(selected);
+    if (this._monthVisible(today)) return toISO(today);
+    return toISO(new Date(this._viewYear, this._viewMonth, 1));
+  }
 
-    const weekdayFmt = new Intl.DateTimeFormat(undefined, { weekday: 'short' });
-    const weekdays = Array.from({ length: 7 }, (_, i) => {
-      const sunday = new Date(2023, 0, 1 + i); // Jan 1 2023 = Sunday
-      return weekdayFmt.format(sunday);
-    });
+  private _renderMonth(index: number, weekdays: string[], 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="calendar" @keydown=${this._handleKeydown}>
+      <div class="month">
         <div class="header">
-          <button
-            class="nav-btn"
-            type="button"
-            aria-label="Previous month"
-            @click=${this._prevMonth}
-          >
-            <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>
-          <span class="month-label" aria-live="polite">${monthLabel}</span>
-          <button
-            class="nav-btn"
-            type="button"
-            aria-label="Next month"
-            @click=${this._nextMonth}
-          >
-            <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>
+          <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=${monthLabel}>
-          ${weekdays.map(day => html`<div class="weekday" role="columnheader" aria-label=${day}>${day}</div>`)}
-          ${cells.map(({ iso, outside }) => {
-            const isSelected = iso === this.value;
-            const isToday = iso === today;
-            const isDisabled = this._isDisabledDate(iso);
-            const classes = [
-              'day',
-              outside ? '--outside' : '',
-              isSelected ? '--selected' : '',
-              isToday && !isSelected ? '--today' : '',
-            ].filter(Boolean).join(' ');
+        <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 isSelected = !outside && iso === this.value;
+                const isToday = !outside && iso === todayIso;
+                const isDisabled = this._isDisabledDate(iso) || this.disabled;
+                const classes = [
+                  'day',
+                  outside ? '--outside' : '',
+                  isSelected ? '--selected' : '',
+                  isToday && !isSelected ? '--today' : '',
+                ].filter(Boolean).join(' ');
+                return html`
+                  <div class="cell" role="gridcell" aria-selected=${isSelected ? '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)}
+                    >${day}</button>
+                  </div>`;
+              })}
+            </div>`)}
+        </div>
+      </div>`;
+  }
 
-            return html`
-              <button
-                class=${classes}
-                type="button"
-                role="gridcell"
-                data-date=${iso}
-                ?disabled=${isDisabled || outside}
-                aria-selected=${isSelected ? 'true' : 'false'}
-                aria-current=${isToday ? 'date' : 'false'}
-                aria-disabled=${isDisabled ? 'true' : 'false'}
-                tabindex=${isSelected || (!this.value && isToday) ? '0' : '-1'}
-                @click=${() => this._selectDate(iso)}
-              >
-                ${new Date(iso + 'T00:00:00').getDate()}
-              </button>
-            `;
-          })}
+  render() {
+    const weekdays = this._weekdayNames();
+    const tabbableIso = this._tabbableIso();
+    return html`
+      <div class="calendar" @keydown=${this._handleKeydown}>
+        <div class="months">
+          ${Array.from({ length: this._count }, (_, i) => this._renderMonth(i, weekdays, tabbableIso))}
         </div>
-      </div>
-    `;
+      </div>`;
   }
 }
 

package/src/web-components/ui/bds-card.spec.ts

@@ -65,4 +65,36 @@ describe('bds-card', () => {
     expect(el.getAttribute('variant')).toBe('outlined');
     cleanup(el);
   });
+
+  it('defaults to padding="medium" and applies the --padding-medium class', async () => {
+    const el = await fixture('<bds-card>Content</bds-card>') as BdsCard;
+    expect(el.getAttribute('padding')).toBe('medium');
+    const card = el.shadowRoot!.querySelector('.card')!;
+    expect(card.classList.contains('--padding-medium')).toBe(true);
+    cleanup(el);
+  });
+
+  it('applies the matching --padding-* class for each padding variant', async () => {
+    const el = await fixture('<bds-card padding="extra-large">Content</bds-card>');
+    const card = el.shadowRoot!.querySelector('.card')!;
+    expect(card.classList.contains('--padding-extra-large')).toBe(true);
+    cleanup(el);
+  });
+
+  it('reflects padding property update', async () => {
+    const el = await fixture('<bds-card>Content</bds-card>') as BdsCard;
+    el.padding = 'none';
+    await el.updateComplete;
+    expect(el.getAttribute('padding')).toBe('none');
+    const card = el.shadowRoot!.querySelector('.card')!;
+    expect(card.classList.contains('--padding-none')).toBe(true);
+    cleanup(el);
+  });
+
+  it('uses --bds-outline_default/--bds-outline_offset for the clickable focus ring', () => {
+    const cssText = BdsCard.styles.cssText;
+    expect(cssText).toMatch(/\.card\.--clickable:focus-visible\s*{[^}]*outline:\s*var\(--bds-outline_default\)/);
+    expect(cssText).toMatch(/\.card\.--clickable:focus-visible\s*{[^}]*outline-offset:\s*var\(--bds-outline_offset\)/);
+    expect(cssText).not.toContain('--color_focus');
+  });
 });