@boostdev/design-system-components 1.2.0 → 1.2.1

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

@@ -0,0 +1,78 @@
+import { LitElement, css, html } from 'lit';
+
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+
+/**
+ * `<bds-button-group>` — groups related buttons into a flex 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>
+ */
+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;
+    }
+  `;
+
+  static properties = {
+    orientation: { type: String, reflect: true },
+    'aria-label': { type: String },
+  };
+
+  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>
+    `;
+  }
+}
+
+customElements.define('bds-button-group', BdsButtonGroup);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-button-group': BdsButtonGroup;
+  }
+}

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

@@ -0,0 +1,91 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsCalendar } from './bds-calendar';
+
+describe('bds-calendar', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-calendar')).toBe(BdsCalendar);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsCalendar.formAssociated).toBe(true);
+  });
+
+  it('renders a calendar grid', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>');
+    expect(el.shadowRoot!.querySelector('.grid')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders prev and next month navigation buttons', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>');
+    expect(el.shadowRoot!.querySelector('[aria-label="Previous month"]')).not.toBeNull();
+    expect(el.shadowRoot!.querySelector('[aria-label="Next month"]')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders 7 weekday column headers', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>');
+    const headers = el.shadowRoot!.querySelectorAll('.weekday');
+    expect(headers.length).toBe(7);
+    cleanup(el);
+  });
+
+  it('marks today with aria-current="date"', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>');
+    const today = el.shadowRoot!.querySelector('[aria-current="date"]');
+    expect(today).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('marks selected date with aria-selected="true"', async () => {
+    const today = new Date();
+    const iso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+    const el = await fixture(`<bds-calendar value="${iso}"></bds-calendar>`);
+    const selected = el.shadowRoot!.querySelector('[aria-selected="true"]');
+    expect(selected).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('fires bds-date-select when a date is clicked', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>');
+    const dates: string[] = [];
+    el.addEventListener('bds-date-select', (e: Event) => {
+      dates.push((e as CustomEvent).detail.date);
+    });
+    const dayBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('.day:not(.--outside):not([disabled])')!;
+    dayBtn.click();
+    expect(dates.length).toBe(1);
+    expect(dates[0]).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    cleanup(el);
+  });
+
+  it('fires bds-date-select with a valid ISO date string', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>') as BdsCalendar;
+    const dates: string[] = [];
+    el.addEventListener('bds-date-select', (e: Event) => {
+      dates.push((e as CustomEvent).detail.date);
+    });
+    const dayBtns = el.shadowRoot!.querySelectorAll<HTMLButtonElement>('.day:not(.--outside):not([disabled])');
+    dayBtns[0].click();
+    expect(dates.length).toBe(1);
+    expect(dates[0]).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    cleanup(el);
+  });
+
+  it('navigates to next month on next button click', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15"></bds-calendar>') as BdsCalendar;
+    const label = el.shadowRoot!.querySelector('.month-label')!;
+    const initialLabel = label.textContent;
+    el.shadowRoot!.querySelector<HTMLButtonElement>('[aria-label="Next month"]')!.click();
+    await el.updateComplete;
+    expect(label.textContent).not.toBe(initialLabel);
+    cleanup(el);
+  });
+
+  it('disables dates outside min/max range', async () => {
+    const el = await fixture('<bds-calendar value="2024-03-15" min="2024-03-10" max="2024-03-20"></bds-calendar>');
+    const disabled = el.shadowRoot!.querySelectorAll<HTMLButtonElement>('[aria-disabled="true"]');
+    expect(disabled.length).toBeGreaterThan(0);
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,427 @@
+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;
+}
+
+/**
+ * `<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)
+ *
+ * @example
+ * <bds-calendar name="birthday" value="2024-03-15"></bds-calendar>
+ */
+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 properties = {
+    name:     { type: String, reflect: true },
+    value:    { type: String, reflect: true },
+    min:      { type: String },
+    max:      { type: String },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  declare name: string;
+  declare value: string;
+  declare min: string;
+  declare max: string;
+  declare disabled: boolean;
+
+  private _internals!: ElementInternals;
+  private _viewYear: number;
+  private _viewMonth: number; // 0-based
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.value = '';
+    this.min = '';
+    this.max = '';
+    this.disabled = false;
+
+    const now = new Date();
+    this._viewYear = now.getFullYear();
+    this._viewMonth = now.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();
+        }
+      }
+    }
+  }
+
+  formResetCallback() {
+    this.value = '';
+    this._internals.setFormValue?.('');
+  }
+
+  private _prevMonth() {
+    if (this._viewMonth === 0) {
+      this._viewMonth = 11;
+      this._viewYear--;
+    } else {
+      this._viewMonth--;
+    }
+    this.requestUpdate();
+  }
+
+  private _nextMonth() {
+    if (this._viewMonth === 11) {
+      this._viewMonth = 0;
+      this._viewYear++;
+    } else {
+      this._viewMonth++;
+    }
+    this.requestUpdate();
+  }
+
+  private _selectDate(iso: string) {
+    if (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,
+    }));
+  }
+
+  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) => {
+    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();
+      }
+    }
+  };
+
+  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 });
+    }
+
+    return cells;
+  }
+
+  render() {
+    const today = toISO(new Date());
+    const cells = this._buildGrid();
+
+    const fmt = new Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' });
+    const monthLabel = fmt.format(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);
+    });
+
+    return html`
+      <div class="calendar" @keydown=${this._handleKeydown}>
+        <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>
+        </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(' ');
+
+            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>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-calendar', BdsCalendar);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-calendar': BdsCalendar;
+  }
+}

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

@@ -0,0 +1,64 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsCarousel } from './bds-carousel';
+
+describe('bds-carousel', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-carousel')).toBe(BdsCarousel);
+  });
+
+  it('renders a track region', async () => {
+    const el = await fixture('<bds-carousel><div>Slide 1</div></bds-carousel>');
+    expect(el.shadowRoot!.querySelector('.track')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('defaults current-index to 0', async () => {
+    const el = await fixture('<bds-carousel><div>S1</div></bds-carousel>') as BdsCarousel;
+    expect(el.currentIndex).toBe(0);
+    cleanup(el);
+  });
+
+  it('renders prev and next buttons', async () => {
+    const el = await fixture('<bds-carousel><div>S1</div><div>S2</div></bds-carousel>');
+    const prev = el.shadowRoot!.querySelector('[aria-label="Previous slide"]');
+    const next = el.shadowRoot!.querySelector('[aria-label="Next slide"]');
+    expect(prev).not.toBeNull();
+    expect(next).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('prev button is disabled when loop is off and at first slide', async () => {
+    const el = await fixture('<bds-carousel><div>S1</div><div>S2</div></bds-carousel>');
+    const prev = el.shadowRoot!.querySelector<HTMLButtonElement>('[aria-label="Previous slide"]')!;
+    expect(prev.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('next button is disabled when loop is off and at last slide', async () => {
+    const el = await fixture('<bds-carousel current-index="1"><div>S1</div><div>S2</div></bds-carousel>') as BdsCarousel;
+    await el.updateComplete;
+    const next = el.shadowRoot!.querySelector<HTMLButtonElement>('[aria-label="Next slide"]')!;
+    expect(next.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('fires bds-slide-change on next click', async () => {
+    const el = await fixture('<bds-carousel><div>S1</div><div>S2</div></bds-carousel>') as BdsCarousel;
+    const changes: number[] = [];
+    el.addEventListener('bds-slide-change', (e: Event) => {
+      changes.push((e as CustomEvent).detail.index);
+    });
+    const next = el.shadowRoot!.querySelector<HTMLButtonElement>('[aria-label="Next slide"]')!;
+    next.click();
+    expect(changes).toEqual([1]);
+    cleanup(el);
+  });
+
+  it('renders dot indicators when indicators attribute is set', async () => {
+    const el = await fixture('<bds-carousel indicators><div>S1</div><div>S2</div><div>S3</div></bds-carousel>');
+    await el.updateComplete;
+    const dots = el.shadowRoot!.querySelectorAll('.dot');
+    expect(dots.length).toBe(3);
+    cleanup(el);
+  });
+});