@boostdev/design-system-components 1.1.1 → 1.2.0

package/src/web-components/interaction/form/bds-file-input.ts

@@ -0,0 +1,209 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-file-input>` — form-associated File Input with drag-and-drop zone.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   accept   — file types to accept (e.g. "image/*,.pdf")
+ *   multiple — boolean; allow selecting multiple files
+ *   disabled — boolean
+ *
+ * Events:
+ *   bds-change — fired with `{ detail: FileList }` when files are selected
+ *
+ * @example
+ * <bds-file-input name="avatar" accept="image/*">Upload photo</bds-file-input>
+ */
+export class BdsFileInput extends LitElement {
+  static formAssociated = true;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .zone {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--bds-space_s);
+      padding: var(--bds-space_xl);
+      border-radius: var(--bds-border_radius--m);
+      border: 2px dashed var(--file-input_border-color, var(--bds-color_bg--subtle));
+      background-color: var(--file-input_color_bg, var(--bds-color_bg));
+      color: var(--bds-color_on-bg);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      cursor: pointer;
+      text-align: center;
+      transition: var(--bds-animation_transition);
+    }
+
+    .zone.--dragging {
+      border-color: var(--bds-color_interactive);
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    .zone-input {
+      position: absolute;
+      opacity: 0;
+      inline-size: 0;
+      block-size: 0;
+      overflow: hidden;
+    }
+
+    .zone-label {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--bds-space_xs);
+      cursor: pointer;
+    }
+
+    .icon {
+      inline-size: 2.5rem;
+      block-size: 2.5rem;
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    .icon svg {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    .hint {
+      font-size: var(--bds-font_size--body--s);
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .zone:hover {
+        border-color: var(--bds-color_interactive);
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+  `;
+
+  static properties = {
+    name:        { type: String, reflect: true },
+    accept:      { type: String },
+    multiple:    { type: Boolean, reflect: true },
+    disabled:    { type: Boolean, reflect: true },
+  };
+
+  declare name: string;
+  declare accept: string;
+  declare multiple: boolean;
+  declare disabled: boolean;
+
+  private _internals!: ElementInternals;
+  private _isDragging = false;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.accept = '';
+    this.multiple = false;
+    this.disabled = false;
+  }
+
+  formResetCallback() {
+    this._internals.setFormValue?.(null);
+    const input = this.shadowRoot?.querySelector<HTMLInputElement>('input');
+    if (input) input.value = '';
+  }
+
+  private _handleFiles(files: FileList | null) {
+    if (!files || files.length === 0) return;
+    const formData = new FormData();
+    Array.from(files).forEach(file => formData.append(this.name, file));
+    this._internals.setFormValue?.(formData);
+    this.dispatchEvent(new CustomEvent('bds-change', {
+      bubbles: true,
+      composed: true,
+      detail: files,
+    }));
+  }
+
+  private _handleInputChange(e: Event) {
+    this._handleFiles((e.target as HTMLInputElement).files);
+  }
+
+  private _handleClick() {
+    this.shadowRoot?.querySelector<HTMLInputElement>('input')?.click();
+  }
+
+  private _handleDragover(e: DragEvent) {
+    e.preventDefault();
+    if (!this._isDragging) {
+      this._isDragging = true;
+      this.requestUpdate();
+    }
+  }
+
+  private _handleDragleave() {
+    this._isDragging = false;
+    this.requestUpdate();
+  }
+
+  private _handleDrop(e: DragEvent) {
+    e.preventDefault();
+    this._isDragging = false;
+    this.requestUpdate();
+    this._handleFiles(e.dataTransfer?.files ?? null);
+  }
+
+  render() {
+    const id = `bds-file-${this._uid}`;
+    return html`
+      <input
+        id=${id}
+        type="file"
+        class="zone-input"
+        name=${this.name}
+        accept=${this.accept}
+        ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
+        @change=${this._handleInputChange}
+      />
+      <div
+        class="zone ${this._isDragging ? '--dragging' : ''}"
+        role="button"
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-label="Upload file"
+        @click=${this._handleClick}
+        @keydown=${(e: KeyboardEvent) => (e.key === 'Enter' || e.key === ' ') && this._handleClick()}
+        @dragover=${this._handleDragover}
+        @dragleave=${this._handleDragleave}
+        @drop=${this._handleDrop}
+      >
+        <span class="icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0-3 3m3-3 3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.338-2.329 3 3 0 013.83 3.849A3.75 3.75 0 0118 19.5H6.75z" />
+          </svg>
+        </span>
+        <span class="zone-label">
+          <slot>Drag &amp; drop or click to browse</slot>
+        </span>
+        <span class="hint">${this.accept ? `Accepted: ${this.accept}` : 'Any file type'}</span>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-file-input', BdsFileInput);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-file-input': BdsFileInput;
+  }
+}

package/src/web-components/interaction/form/bds-number-input.spec.ts

@@ -0,0 +1,87 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsNumberInput } from './bds-number-input';
+
+describe('bds-number-input', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-number-input')).toBe(BdsNumberInput);
+  });
+
+  it('renders a number input in shadow DOM', async () => {
+    const el = await fixture('<bds-number-input name="qty"></bds-number-input>');
+    expect(el.shadowRoot!.querySelector('input[type="number"]')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders a decrease button with aria-label="Decrease"', async () => {
+    const el = await fixture('<bds-number-input name="qty"></bds-number-input>');
+    const btn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Decrease"]');
+    expect(btn).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders an increase button with aria-label="Increase"', async () => {
+    const el = await fixture('<bds-number-input name="qty"></bds-number-input>');
+    const btn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Increase"]');
+    expect(btn).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('increase button increments value by step', async () => {
+    const el = await fixture('<bds-number-input name="qty" step="2"></bds-number-input>') as BdsNumberInput;
+    const incBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Increase"]')!;
+    incBtn.click();
+    expect(el.value).toBe(2);
+    cleanup(el);
+  });
+
+  it('decrease button decrements value by step', async () => {
+    const el = await fixture('<bds-number-input name="qty" step="1"></bds-number-input>') as BdsNumberInput;
+    el.value = 5;
+    await el.updateComplete;
+    const decBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Decrease"]')!;
+    decBtn.click();
+    expect(el.value).toBe(4);
+    cleanup(el);
+  });
+
+  it('clamps value to max when increasing beyond max', async () => {
+    const el = await fixture('<bds-number-input name="qty" max="10"></bds-number-input>') as BdsNumberInput;
+    el.value = 10;
+    await el.updateComplete;
+    const incBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Increase"]')!;
+    incBtn.click();
+    expect(el.value).toBe(10);
+    cleanup(el);
+  });
+
+  it('clamps value to min when decreasing below min', async () => {
+    const el = await fixture('<bds-number-input name="qty" min="0"></bds-number-input>') as BdsNumberInput;
+    el.value = 0;
+    await el.updateComplete;
+    const decBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Decrease"]')!;
+    decBtn.click();
+    expect(el.value).toBe(0);
+    cleanup(el);
+  });
+
+  it('all inputs are disabled when disabled attribute is set', async () => {
+    const el = await fixture('<bds-number-input name="qty" disabled></bds-number-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('fires an input event on stepper click', async () => {
+    const el = await fixture('<bds-number-input name="qty"></bds-number-input>');
+    const handler = vi.fn();
+    el.addEventListener('input', handler);
+    const incBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Increase"]')!;
+    incBtn.click();
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsNumberInput.formAssociated).toBe(true);
+  });
+});

package/src/web-components/interaction/form/bds-number-input.ts

@@ -0,0 +1,220 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-number-input>` — form-associated Number Input with stepper buttons.
+ *
+ * Attributes:
+ *   name     — form field name
+ *   value    — current numeric value (default: 0)
+ *   min      — minimum allowed value
+ *   max      — maximum allowed value
+ *   step     — increment/decrement step (default: 1)
+ *   disabled — boolean
+ *
+ * Events:
+ *   input  — fired on stepper click and native input
+ *   change — native change event
+ *
+ * @example
+ * <bds-number-input name="qty" value="1" min="0" max="99" step="1"></bds-number-input>
+ */
+export class BdsNumberInput extends LitElement {
+  static formAssociated = true;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+    }
+
+    .input {
+      flex: 1;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      padding: var(--bds-space_s);
+      border: none;
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--xs);
+
+      border-radius: var(--number-input_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--number-input_shadow, var(--bdc-outline_shadow));
+      background-color: var(--number-input_color_bg, var(--bds-color_bg));
+      color: var(--number-input_color, var(--bds-color_on-bg));
+      text-align: center;
+      -moz-appearance: textfield;
+      min-inline-size: 0;
+    }
+
+    .input::-webkit-inner-spin-button,
+    .input::-webkit-outer-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+
+    .input:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    .input:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    .stepper {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 1px;
+      inline-size: 2rem;
+      block-size: 2rem;
+      border-radius: var(--bds-border_radius--xs);
+      cursor: pointer;
+      flex-shrink: 0;
+      color: var(--bds-color_interactive);
+      transition: var(--bds-animation_transition);
+    }
+
+    .stepper:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    .stepper:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .stepper:not(:disabled):hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .stepper svg {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+  `;
+
+  static properties = {
+    name:     { type: String, reflect: true },
+    value:    { type: Number },
+    min:      { type: Number },
+    max:      { type: Number },
+    step:     { type: Number },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  declare name: string;
+  declare value: number;
+  declare min: number | undefined;
+  declare max: number | undefined;
+  declare step: number;
+  declare disabled: boolean;
+
+  private _internals!: ElementInternals;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.value = 0;
+    this.min = undefined;
+    this.max = undefined;
+    this.step = 1;
+    this.disabled = false;
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('value')) {
+      this._internals.setFormValue?.(String(this.value));
+    }
+  }
+
+  formResetCallback() {
+    this.value = 0;
+    this._internals.setFormValue?.('0');
+  }
+
+  private _clamp(v: number): number {
+    let result = v;
+    if (this.min !== undefined) result = Math.max(this.min, result);
+    if (this.max !== undefined) result = Math.min(this.max, result);
+    return result;
+  }
+
+  private _adjust(delta: number) {
+    const next = this._clamp(this.value + delta);
+    this.value = next;
+    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+  }
+
+  private _handleChange(e: Event) {
+    const v = parseFloat((e.target as HTMLInputElement).value);
+    this.value = this._clamp(isNaN(v) ? 0 : v);
+  }
+
+  render() {
+    const atMin = this.min !== undefined && this.value <= this.min;
+    const atMax = this.max !== undefined && this.value >= this.max;
+
+    return html`
+      <div class="row">
+        <button
+          type="button"
+          class="stepper"
+          aria-label="Decrease"
+          tabindex="-1"
+          ?disabled=${this.disabled || atMin}
+          @click=${() => this._adjust(-this.step)}
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+          </svg>
+        </button>
+        <input
+          type="number"
+          class="input"
+          name=${this.name}
+          .value=${String(this.value)}
+          min=${this.min ?? ''}
+          max=${this.max ?? ''}
+          step=${this.step}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+        />
+        <button
+          type="button"
+          class="stepper"
+          aria-label="Increase"
+          tabindex="-1"
+          ?disabled=${this.disabled || atMax}
+          @click=${() => this._adjust(this.step)}
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" />
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-number-input', BdsNumberInput);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-number-input': BdsNumberInput;
+  }
+}

package/src/web-components/interaction/form/bds-radio.spec.ts

@@ -0,0 +1,70 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsRadio } from './bds-radio';
+
+describe('bds-radio', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-radio')).toBe(BdsRadio);
+  });
+
+  it('renders a radio input in shadow DOM', async () => {
+    const el = await fixture('<bds-radio name="size" value="m">Medium</bds-radio>');
+    expect(el.shadowRoot!.querySelector('input[type="radio"]')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('is not checked by default', async () => {
+    const el = await fixture('<bds-radio name="size" value="m">Medium</bds-radio>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.checked).toBe(false);
+    cleanup(el);
+  });
+
+  it('is checked when checked attribute is set', async () => {
+    const el = await fixture('<bds-radio name="size" value="m" checked>Medium</bds-radio>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.checked).toBe(true);
+    cleanup(el);
+  });
+
+  it('input is disabled when disabled attribute is set', async () => {
+    const el = await fixture('<bds-radio name="size" value="m" disabled>Medium</bds-radio>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('input has the correct name and value attributes', async () => {
+    const el = await fixture('<bds-radio name="size" value="m">Medium</bds-radio>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.name).toBe('size');
+    expect(input.value).toBe('m');
+    cleanup(el);
+  });
+
+  it('renders a label linked to the input', async () => {
+    const el = await fixture('<bds-radio name="size" value="m">Medium</bds-radio>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const label = el.shadowRoot!.querySelector('label')!;
+    expect(label.getAttribute('for')).toBe(input.id);
+    cleanup(el);
+  });
+
+  it('renders slotted label text', async () => {
+    const el = await fixture('<bds-radio name="size" value="m">Medium size</bds-radio>');
+    expect(el.textContent?.trim()).toBe('Medium size');
+    cleanup(el);
+  });
+
+  it('updates checked property on change', async () => {
+    const el = await fixture('<bds-radio name="size" value="m">Medium</bds-radio>') as BdsRadio;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.checked = true;
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(el.checked).toBe(true);
+    cleanup(el);
+  });
+
+  it('is form-associated', () => {
+    expect(BdsRadio.formAssociated).toBe(true);
+  });
+});