@boostdev/design-system-components 2.8.0 → 2.11.0

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

@@ -0,0 +1,123 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+export type ButtonContainerVariant = 'flow' | 'card' | 'modal' | 'content';
+
+/**
+ * `<bds-button-container>` — responsive layout wrapper for a row of action
+ * buttons (Cancel / Confirm, Back / Next, …). Web-component port of the React
+ * `ButtonContainer`.
+ *
+ * Buttons stack vertically (primary on top via `column-reverse`) on narrow
+ * containers and lay out in a row once the container is at least 30rem wide.
+ * The `variant` controls alignment:
+ *   - `flow`    — multi-step navigation (Back / Next); single child pushed to the end
+ *   - `card`    — single-form submit; centered / full-width
+ *   - `modal`   — dialog actions; aligned to the end
+ *   - `content` — inline content actions; aligned to the start
+ *
+ * Attributes:
+ *   variant     — `"flow"` | `"card"` | `"modal"` | `"content"`
+ *   aria-label  — accessible label for the group
+ *
+ * Slots:
+ *   (default) — `<bds-button>` elements
+ *
+ * @example
+ * <bds-button-container variant="modal" aria-label="Dialog actions">
+ *   <bds-button variant="outline">Cancel</bds-button>
+ *   <bds-button>Confirm</bds-button>
+ * </bds-button-container>
+ */
+export class BdsButtonContainer extends LitElement {
+  static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+      inline-size: 100%;
+      /* Span the full row when placed inside a bds-grid. */
+      grid-column: var(--bds-grid_span-100, 1 / -1);
+      container-type: inline-size;
+      container-name: button-container;
+    }
+
+    .container {
+      position: relative;
+      display: flex;
+      flex-direction: column-reverse;
+      gap: var(--buttonGroup_gap, var(--bds-space_l));
+      align-items: center;
+    }
+
+    :host([variant='card']) .container {
+      align-items: stretch;
+    }
+
+    :host([variant='flow']) .container,
+    :host([variant='modal']) .container {
+      align-items: center;
+    }
+
+    :host([variant='content']) .container {
+      align-items: flex-start;
+    }
+
+    @container button-container (min-width: 30rem) {
+      .container {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      /* A lone button in flow/modal is pushed to the end. */
+      :host([variant='modal']) ::slotted(:only-child),
+      :host([variant='flow']) ::slotted(:only-child) {
+        margin-inline-start: auto;
+      }
+
+      :host([variant='card']) .container {
+        justify-content: center;
+      }
+
+      :host([variant='modal']) .container {
+        justify-content: flex-end;
+      }
+
+      :host([variant='content']) .container {
+        justify-content: flex-start;
+        align-items: center;
+      }
+    }
+  `;
+
+  static properties = {
+    variant: { type: String, reflect: true },
+    'aria-label': { type: String },
+  };
+
+  declare variant: ButtonContainerVariant | undefined;
+  declare ['aria-label']: string | undefined;
+
+  render() {
+    return html`
+      <div class="container" role="group" aria-label=${this['aria-label'] ?? nothing}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-button-container', BdsButtonContainer);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-button-container': BdsButtonContainer;
+  }
+}

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

@@ -1,40 +1,34 @@
 import { fixture, cleanup } from '../test/helpers';
 import { BdsButtonGroup } from './bds-button-group';
+import { BdsButtonContainer } from './bds-button-container';
 
-describe('bds-button-group', () => {
+describe('bds-button-group (deprecated alias of bds-button-container)', () => {
   it('is registered as a custom element', () => {
     expect(customElements.get('bds-button-group')).toBe(BdsButtonGroup);
   });
 
+  it('is a subclass of BdsButtonContainer and importing it registers the real element', () => {
+    expect(new BdsButtonGroup()).toBeInstanceOf(BdsButtonContainer);
+    expect(customElements.get('bds-button-container')).toBe(BdsButtonContainer);
+  });
+
   it('renders a group role element', async () => {
     const el = await fixture('<bds-button-group>content</bds-button-group>');
     expect(el.shadowRoot!.querySelector('[role="group"]')).not.toBeNull();
     cleanup(el);
   });
 
-  it('defaults to horizontal orientation', async () => {
-    const el = await fixture('<bds-button-group>content</bds-button-group>') as BdsButtonGroup;
-    expect(el.orientation).toBe('horizontal');
-    cleanup(el);
-  });
-
-  it('reflects vertical orientation attribute', async () => {
-    const el = await fixture('<bds-button-group orientation="vertical">content</bds-button-group>') as BdsButtonGroup;
-    expect(el.orientation).toBe('vertical');
-    expect(el.getAttribute('orientation')).toBe('vertical');
-    cleanup(el);
-  });
-
-  it('renders a slot', async () => {
-    const el = await fixture('<bds-button-group><span>item</span></bds-button-group>');
-    expect(el.shadowRoot!.querySelector('slot')).not.toBeNull();
-    cleanup(el);
-  });
-
   it('sets aria-label on the group element', async () => {
     const el = await fixture('<bds-button-group aria-label="View options">content</bds-button-group>');
     const group = el.shadowRoot!.querySelector('[role="group"]')!;
     expect(group.getAttribute('aria-label')).toBe('View options');
     cleanup(el);
   });
+
+  it('omits the aria-label attribute entirely when unset, instead of rendering an empty string', async () => {
+    const el = await fixture('<bds-button-group>content</bds-button-group>');
+    const group = el.shadowRoot!.querySelector('[role="group"]')!;
+    expect(group.hasAttribute('aria-label')).toBe(false);
+    cleanup(el);
+  });
 });

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);
+  });
+});