@boostdev/design-system-components 1.2.0 → 1.2.2

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

@@ -0,0 +1,296 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-carousel>` — scroll-snap based carousel/slider.
+ *
+ * Attributes:
+ *   current-index — active slide index (0-based, default: 0)
+ *   indicators    — show dot indicators
+ *   loop          — wrap from last slide back to first and vice versa
+ *
+ * Slots:
+ *   (default) — slide content elements (each direct child = one slide)
+ *   prev      — custom previous button (renders a default button if omitted)
+ *   next      — custom next button (renders a default button if omitted)
+ *
+ * Events:
+ *   bds-slide-change — fired when active slide changes; `detail: { index: number }`
+ *
+ * @example
+ * <bds-carousel indicators loop>
+ *   <div>Slide 1</div>
+ *   <div>Slide 2</div>
+ *   <div>Slide 3</div>
+ * </bds-carousel>
+ */
+export class BdsCarousel extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    .track {
+      display: flex;
+      overflow-inline: auto;
+      scroll-snap-type: inline mandatory;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    .track::-webkit-scrollbar {
+      display: none;
+    }
+
+    ::slotted(*) {
+      flex-shrink: 0;
+      inline-size: 100%;
+      scroll-snap-align: start;
+    }
+
+    .controls {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-block-start: var(--bds-space_s);
+    }
+
+    .nav-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 2.5rem;
+      block-size: 2.5rem;
+      border: none;
+      border-radius: var(--bds-border_radius--full, 9999px);
+      background-color: var(--bds-color_bg--subtle);
+      color: var(--bds-color_on-bg);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+    }
+
+    .nav-btn:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .nav-btn:hover {
+        background-color: var(--bds-color_bg--strong);
+      }
+    }
+
+    .nav-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .nav-btn svg {
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+    }
+
+    .indicators {
+      display: flex;
+      gap: var(--bds-space_xxs);
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+    }
+
+    .dot {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-radius: 50%;
+      border: none;
+      padding: 0;
+      background-color: var(--bds-color_bg--strong);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+    }
+
+    .dot.--active {
+      background-color: var(--bds-color_interactive);
+      inline-size: 1rem;
+      border-radius: 0.25rem;
+    }
+
+    .dot:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .track {
+        scroll-behavior: auto;
+      }
+    }
+  `;
+
+  static properties = {
+    currentIndex: { type: Number, attribute: 'current-index', reflect: true },
+    indicators:   { type: Boolean, reflect: true },
+    loop:         { type: Boolean, reflect: true },
+  };
+
+  declare currentIndex: number;
+  declare indicators: boolean;
+  declare loop: boolean;
+
+  private _slideCount = 0;
+  private _io: IntersectionObserver | null = null;
+
+  constructor() {
+    super();
+    this.currentIndex = 0;
+    this.indicators = false;
+    this.loop = false;
+  }
+
+  private get _track(): HTMLElement | null {
+    return this.shadowRoot?.querySelector('.track') ?? null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Count slides from light DOM children
+    this._updateSlideCount();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._io?.disconnect();
+    this._io = null;
+  }
+
+  private _updateSlideCount() {
+    this._slideCount = this.children.length;
+    this.requestUpdate();
+  }
+
+  private _goTo(index: number) {
+    const count = this._slideCount;
+    if (count === 0) return;
+
+    let next = index;
+    if (this.loop) {
+      next = ((index % count) + count) % count;
+    } else {
+      next = Math.max(0, Math.min(index, count - 1));
+    }
+
+    if (next === this.currentIndex && index === next) return;
+
+    this.currentIndex = next;
+
+    const track = this._track;
+    const slides = track?.querySelector('slot')?.assignedElements() ?? [];
+    const target = slides[next] as HTMLElement | undefined;
+    if (target && typeof target.scrollIntoView === 'function') {
+      target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+    }
+
+    this.dispatchEvent(new CustomEvent('bds-slide-change', {
+      detail: { index: next },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private _onSlotChange() {
+    this._updateSlideCount();
+    // Set up IntersectionObserver on the default slot's items
+    this._io?.disconnect();
+    const track = this._track;
+    if (!track) return;
+
+    const slot = track.querySelector('slot') as HTMLSlotElement | null;
+    const slides = slot?.assignedElements() ?? [];
+
+    if (typeof IntersectionObserver === 'undefined') return;
+
+    this._io = new IntersectionObserver(
+      entries => {
+        const visible = entries.find(e => e.isIntersecting && e.intersectionRatio >= 0.5);
+        if (visible) {
+          const idx = slides.indexOf(visible.target as Element);
+          if (idx !== -1 && idx !== this.currentIndex) {
+            this.currentIndex = idx;
+            this.requestUpdate();
+          }
+        }
+      },
+      { root: track, threshold: 0.5 },
+    );
+
+    slides.forEach(slide => this._io!.observe(slide));
+  }
+
+  render() {
+    const atStart = this.currentIndex <= 0;
+    const atEnd = this.currentIndex >= this._slideCount - 1;
+    const showPrev = this.loop || !atStart;
+    const showNext = this.loop || !atEnd;
+
+    return html`
+      <div class="track" aria-label="Carousel" role="region">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div class="controls">
+        <slot name="prev">
+          <button
+            class="nav-btn"
+            type="button"
+            aria-label="Previous slide"
+            ?disabled=${!showPrev}
+            @click=${() => this._goTo(this.currentIndex - 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>
+        </slot>
+
+        ${this.indicators
+          ? html`
+              <div class="indicators" role="tablist" aria-label="Slides">
+                ${Array.from({ length: this._slideCount }, (_, i) => html`
+                  <button
+                    class="dot ${i === this.currentIndex ? '--active' : ''}"
+                    type="button"
+                    role="tab"
+                    aria-selected=${i === this.currentIndex ? 'true' : 'false'}
+                    aria-label="Slide ${i + 1}"
+                    @click=${() => this._goTo(i)}
+                  ></button>
+                `)}
+              </div>
+            `
+          : html`<span style="flex:1"></span>`}
+
+        <slot name="next">
+          <button
+            class="nav-btn"
+            type="button"
+            aria-label="Next slide"
+            ?disabled=${!showNext}
+            @click=${() => this._goTo(this.currentIndex + 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>
+        </slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-carousel', BdsCarousel);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-carousel': BdsCarousel;
+  }
+}

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

@@ -0,0 +1,67 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsPagination } from './bds-pagination';
+
+describe('bds-pagination', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-pagination')).toBe(BdsPagination);
+  });
+
+  it('renders a nav element', async () => {
+    const el = await fixture('<bds-pagination total-pages="5"></bds-pagination>');
+    expect(el.shadowRoot!.querySelector('nav')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('defaults current-page to 1', async () => {
+    const el = await fixture('<bds-pagination total-pages="5"></bds-pagination>') as BdsPagination;
+    expect(el.currentPage).toBe(1);
+    cleanup(el);
+  });
+
+  it('renders page buttons for small page count', async () => {
+    const el = await fixture('<bds-pagination current-page="1" total-pages="3"></bds-pagination>');
+    const buttons = el.shadowRoot!.querySelectorAll('.button:not(.--nav)');
+    expect(buttons.length).toBe(3);
+    cleanup(el);
+  });
+
+  it('marks active page with aria-current="page"', async () => {
+    const el = await fixture('<bds-pagination current-page="2" total-pages="5"></bds-pagination>');
+    const active = el.shadowRoot!.querySelector('[aria-current="page"]');
+    expect(active?.textContent?.trim()).toBe('2');
+    cleanup(el);
+  });
+
+  it('disables prev button on first page', async () => {
+    const el = await fixture('<bds-pagination current-page="1" total-pages="5"></bds-pagination>');
+    const prev = el.shadowRoot!.querySelector('[aria-label="Previous page"]') as HTMLButtonElement;
+    expect(prev.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('disables next button on last page', async () => {
+    const el = await fixture('<bds-pagination current-page="5" total-pages="5"></bds-pagination>');
+    const next = el.shadowRoot!.querySelector('[aria-label="Next page"]') as HTMLButtonElement;
+    expect(next.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('fires bds-page-change event on page click', async () => {
+    const el = await fixture('<bds-pagination current-page="1" total-pages="5"></bds-pagination>');
+    const pages: number[] = [];
+    el.addEventListener('bds-page-change', (e: Event) => {
+      pages.push((e as CustomEvent).detail.page);
+    });
+    const buttons = el.shadowRoot!.querySelectorAll<HTMLButtonElement>('.button:not(.--nav)');
+    buttons[1].click(); // click page 2
+    expect(pages).toEqual([2]);
+    cleanup(el);
+  });
+
+  it('renders ellipsis for large page counts', async () => {
+    const el = await fixture('<bds-pagination current-page="5" total-pages="20"></bds-pagination>');
+    const ellipsis = el.shadowRoot!.querySelectorAll('.ellipsis');
+    expect(ellipsis.length).toBeGreaterThan(0);
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,197 @@
+import { LitElement, css, html } from 'lit';
+
+function getPageRange(current: number, total: number): (number | '...')[] {
+  const delta = 1;
+  const range: (number | '...')[] = [];
+  for (let i = 1; i <= total; i++) {
+    if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) {
+      range.push(i);
+    } else if (range[range.length - 1] !== '...') {
+      range.push('...');
+    }
+  }
+  return range;
+}
+
+/**
+ * `<bds-pagination>` — pagination navigation control.
+ *
+ * Attributes:
+ *   current-page  — active page number (1-based, default: 1)
+ *   total-pages   — total number of pages (default: 1)
+ *
+ * Events:
+ *   bds-page-change — fired when the user navigates; `detail: { page: number }`
+ *
+ * @example
+ * <bds-pagination current-page="3" total-pages="10"></bds-pagination>
+ * <script>
+ *   document.querySelector('bds-pagination')
+ *     .addEventListener('bds-page-change', e => console.log(e.detail.page));
+ * </script>
+ */
+export class BdsPagination extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .pagination {
+      display: flex;
+      align-items: center;
+    }
+
+    .list {
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_xxs);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-inline-size: 2rem;
+      block-size: 2rem;
+      padding-inline: var(--bds-space_xs);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      border: none;
+      background: none;
+      border-radius: var(--bds-border_radius--xs);
+      cursor: pointer;
+      color: var(--bds-color_on-bg);
+      transition: var(--bds-animation_transition);
+      --bdc_color: transparent;
+      --bdc-outline_radius: var(--bds-border_radius--xs);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bdc-outline_shadow);
+    }
+
+    .button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .button:not(:disabled):not(.--active):hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .button.--active {
+      background-color: var(--bds-color_interactive);
+      color: var(--bds-color_on-interactive);
+      font-weight: var(--bds-font_weight--semibold);
+    }
+
+    .button.--nav {
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    .button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .ellipsis {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-inline-size: 2rem;
+      color: var(--bds-color_on-bg--subtle);
+      font-size: var(--bds-font_size--body--s);
+      user-select: none;
+    }
+
+    .nav-icon {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+  `;
+
+  static properties = {
+    currentPage: { type: Number, attribute: 'current-page', reflect: true },
+    totalPages:  { type: Number, attribute: 'total-pages', reflect: true },
+  };
+
+  declare currentPage: number;
+  declare totalPages: number;
+
+  constructor() {
+    super();
+    this.currentPage = 1;
+    this.totalPages = 1;
+  }
+
+  private _navigate(page: number) {
+    if (page < 1 || page > this.totalPages || page === this.currentPage) return;
+    this.currentPage = page;
+    this.dispatchEvent(new CustomEvent('bds-page-change', {
+      detail: { page },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  render() {
+    const pages = getPageRange(this.currentPage, this.totalPages);
+
+    return html`
+      <nav class="pagination" aria-label="Pagination">
+        <ul class="list">
+          <li>
+            <button
+              type="button"
+              class="button --nav"
+              ?disabled=${this.currentPage <= 1}
+              aria-label="Previous page"
+              @click=${() => this._navigate(this.currentPage - 1)}
+            >
+              <svg class="nav-icon" 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>
+          </li>
+          ${pages.map(page =>
+            page === '...'
+              ? html`<li><span class="ellipsis" aria-hidden="true">…</span></li>`
+              : html`
+                  <li>
+                    <button
+                      type="button"
+                      class="button ${page === this.currentPage ? '--active' : ''}"
+                      aria-current=${page === this.currentPage ? 'page' : 'false'}
+                      @click=${() => this._navigate(page as number)}
+                    >${page}</button>
+                  </li>
+                `
+          )}
+          <li>
+            <button
+              type="button"
+              class="button --nav"
+              ?disabled=${this.currentPage >= this.totalPages}
+              aria-label="Next page"
+              @click=${() => this._navigate(this.currentPage + 1)}
+            >
+              <svg class="nav-icon" 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>
+          </li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('bds-pagination', BdsPagination);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-pagination': BdsPagination;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsTable } from './bds-table';
+
+describe('bds-table', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-table')).toBe(BdsTable);
+  });
+
+  it('renders a wrapper div', async () => {
+    const el = await fixture('<bds-table></bds-table>');
+    expect(el.shadowRoot!.querySelector('.wrapper')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders a slot for table content', async () => {
+    const el = await fixture('<bds-table></bds-table>');
+    expect(el.shadowRoot!.querySelector('slot')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('sticky-header is false by default', async () => {
+    const el = await fixture('<bds-table></bds-table>') as BdsTable;
+    expect(el.stickyHeader).toBe(false);
+    cleanup(el);
+  });
+
+  it('sticky-header attribute is reflected', async () => {
+    const el = await fixture('<bds-table sticky-header></bds-table>') as BdsTable;
+    expect(el.stickyHeader).toBe(true);
+    cleanup(el);
+  });
+
+  it('wrapper has overflow style when sticky-header is set', async () => {
+    const el = await fixture('<bds-table sticky-header></bds-table>');
+    const wrapper = el.shadowRoot!.querySelector('.wrapper') as HTMLElement;
+    expect(wrapper.style.cssText).toContain('overflow');
+    cleanup(el);
+  });
+
+  it('accepts slotted table content', async () => {
+    const el = await fixture('<bds-table><table><tbody><tr><td>Cell</td></tr></tbody></table></bds-table>');
+    expect(el.querySelector('table')).not.toBeNull();
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,96 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-table>` — scrollable table wrapper with design-system styles.
+ *
+ * Slotted content should be a standard `<table>` with `<thead>` / `<tbody>`.
+ * Design-token styles are applied to the table and its cells via `::slotted`.
+ *
+ * Attributes:
+ *   sticky-header — freezes `<thead>` at the top when the table overflows vertically
+ *
+ * Slots:
+ *   (default) — a `<table>` element
+ *
+ * @example
+ * <bds-table sticky-header>
+ *   <table>
+ *     <thead><tr><th>Name</th><th>Value</th></tr></thead>
+ *     <tbody><tr><td>Alpha</td><td>1</td></tr></tbody>
+ *   </table>
+ * </bds-table>
+ */
+export class BdsTable extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .wrapper {
+      overflow-inline: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    ::slotted(table) {
+      inline-size: 100%;
+      border-collapse: collapse;
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+    }
+
+    ::slotted(thead) {
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    ::slotted(th) {
+      padding: var(--bds-space_xs) var(--bds-space_s);
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body--s);
+      text-align: start;
+      color: var(--bds-color_on-bg--subtle);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      white-space: nowrap;
+    }
+
+    ::slotted(td) {
+      padding: var(--bds-space_xs) var(--bds-space_s);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      vertical-align: middle;
+    }
+
+    ::slotted(tr:last-child td) {
+      border-block-end: none;
+    }
+  `;
+
+  static properties = {
+    stickyHeader: { type: Boolean, attribute: 'sticky-header', reflect: true },
+  };
+
+  declare stickyHeader: boolean;
+
+  constructor() {
+    super();
+    this.stickyHeader = false;
+  }
+
+  render() {
+    return html`
+      <div
+        class="wrapper"
+        style=${this.stickyHeader ? 'max-block-size: 100%; overflow-block: auto;' : ''}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-table', BdsTable);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-table': BdsTable;
+  }
+}