@boostdev/design-system-components 2.8.0 → 2.11.0

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

@@ -12,16 +12,30 @@ describe('bds-file-input', () => {
     cleanup(el);
   });
 
-  it('renders a drop zone with role="button"', async () => {
+  it('renders the drop zone as a <label> associated with the shadow input', async () => {
     const el = await fixture('<bds-file-input name="avatar"></bds-file-input>');
-    expect(el.shadowRoot!.querySelector('[role="button"]')).not.toBeNull();
+    const zone = el.shadowRoot!.querySelector('.zone')!;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input[type="file"]')!;
+    expect(zone.tagName).toBe('LABEL');
+    expect(zone.getAttribute('for')).toBe(input.id);
     cleanup(el);
   });
 
-  it('drop zone has aria-label="Upload file"', async () => {
+  it('drop zone has no role/tabindex/aria-label overriding the slotted label', async () => {
     const el = await fixture('<bds-file-input name="avatar"></bds-file-input>');
-    const zone = el.shadowRoot!.querySelector('[role="button"]')!;
-    expect(zone.getAttribute('aria-label')).toBe('Upload file');
+    const zone = el.shadowRoot!.querySelector('.zone')!;
+    expect(zone.hasAttribute('role')).toBe(false);
+    expect(zone.hasAttribute('tabindex')).toBe(false);
+    expect(zone.hasAttribute('aria-label')).toBe(false);
+    cleanup(el);
+  });
+
+  it('shadow input is the only reachable tab stop (not a 0x0 second stop)', async () => {
+    const el = await fixture('<bds-file-input name="avatar"></bds-file-input>');
+    const zone = el.shadowRoot!.querySelector('.zone')!;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input[type="file"]')!;
+    expect(zone.hasAttribute('tabindex')).toBe(false);
+    expect(input.tabIndex).toBe(0);
     cleanup(el);
   });
 
@@ -55,4 +69,58 @@ describe('bds-file-input', () => {
   it('is form-associated', () => {
     expect(BdsFileInput.formAssociated).toBe(true);
   });
+
+  it('filters dropped files by the accept attribute before dispatching bds-change', async () => {
+    const el = await fixture('<bds-file-input name="avatar" accept="image/*"></bds-file-input>');
+    const zone = el.shadowRoot!.querySelector('.zone')!;
+    const acceptedFile = new File(['a'], 'photo.png', { type: 'image/png' });
+    const rejectedFile = new File(['b'], 'notes.txt', { type: 'text/plain' });
+
+    const handler = vi.fn();
+    el.addEventListener('bds-change', handler);
+
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true });
+    Object.defineProperty(dropEvent, 'dataTransfer', { value: { files: [acceptedFile, rejectedFile] } });
+    zone.dispatchEvent(dropEvent);
+    await el.updateComplete;
+
+    expect(handler).toHaveBeenCalledOnce();
+    const detail = handler.mock.calls[0][0].detail as File[];
+    expect(Array.from(detail).map(f => f.name)).toEqual(['photo.png']);
+    cleanup(el);
+  });
+
+  it('does not dispatch bds-change when no dropped files match accept', async () => {
+    const el = await fixture('<bds-file-input name="avatar" accept="image/*"></bds-file-input>');
+    const zone = el.shadowRoot!.querySelector('.zone')!;
+    const rejectedFile = new File(['b'], 'notes.txt', { type: 'text/plain' });
+
+    const handler = vi.fn();
+    el.addEventListener('bds-change', handler);
+
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true });
+    Object.defineProperty(dropEvent, 'dataTransfer', { value: { files: [rejectedFile] } });
+    zone.dispatchEvent(dropEvent);
+    await el.updateComplete;
+
+    expect(handler).not.toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('ignores drops while disabled', async () => {
+    const el = await fixture('<bds-file-input name="avatar" disabled></bds-file-input>');
+    const zone = el.shadowRoot!.querySelector('.zone')!;
+    const file = new File(['a'], 'photo.png', { type: 'image/png' });
+
+    const handler = vi.fn();
+    el.addEventListener('bds-change', handler);
+
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true });
+    Object.defineProperty(dropEvent, 'dataTransfer', { value: { files: [file] } });
+    zone.dispatchEvent(dropEvent);
+    await el.updateComplete;
+
+    expect(handler).not.toHaveBeenCalled();
+    cleanup(el);
+  });
 });

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

@@ -19,6 +19,16 @@ export class BdsFileInput extends LitElement {
   static formAssociated = true;
 
   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;
     }
@@ -33,12 +43,14 @@ export class BdsFileInput extends LitElement {
       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);
+      gap: var(--bds-space_xs);
+      padding: var(--bds-space_l) var(--bds-space_m);
+      border: 2px dashed currentcolor;
+      border-radius: var(--bds-border_radius--s);
+      /* --file-input_color_bg is a deprecated alias — React declares no base background (transparent is its effective default) */
+      background-color: var(--file-input_color_bg, transparent);
+      /* --fileInput_color drives the currentcolor dashed border (matches React) */
+      color: var(--fileInput_color, var(--bds-color_on-bg));
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       cursor: pointer;
@@ -46,17 +58,26 @@ export class BdsFileInput extends LitElement {
       transition: var(--bds-animation_transition);
     }
 
+    .zone:focus-within {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      /* --file-input_border-color is a deprecated alias — prefer --fileInput_border-color (matches React) */
+      border-color: var(--fileInput_border-color, var(--file-input_border-color, currentcolor));
+    }
+
     .zone.--dragging {
-      border-color: var(--bds-color_interactive);
-      background-color: var(--bds-color_bg--subtle);
+      border-color: currentcolor;
+      background-color: rgb(from currentcolor r g b / 8%);
     }
 
     .zone-input {
       position: absolute;
-      opacity: 0;
-      inline-size: 0;
-      block-size: 0;
+      inline-size: 1px;
+      block-size: 1px;
       overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
     }
 
     .zone-label {
@@ -85,8 +106,8 @@ export class BdsFileInput extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .zone:hover {
-        border-color: var(--bds-color_interactive);
-        background-color: var(--bds-color_bg--subtle);
+        border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
+        background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
       }
     }
   `;
@@ -122,7 +143,7 @@ export class BdsFileInput extends LitElement {
     if (input) input.value = '';
   }
 
-  private _handleFiles(files: FileList | null) {
+  private _handleFiles(files: FileList | File[] | null) {
     if (!files || files.length === 0) return;
     const formData = new FormData();
     Array.from(files).forEach(file => formData.append(this.name, file));
@@ -138,8 +159,14 @@ export class BdsFileInput extends LitElement {
     this._handleFiles((e.target as HTMLInputElement).files);
   }
 
-  private _handleClick() {
-    this.shadowRoot?.querySelector<HTMLInputElement>('input')?.click();
+  private _isFileAccepted(file: File): boolean {
+    if (!this.accept) return true;
+    return this.accept.split(',').some(token => {
+      const t = token.trim();
+      if (t.startsWith('.')) return file.name.toLowerCase().endsWith(t.toLowerCase());
+      if (t.endsWith('/*')) return file.type.startsWith(t.slice(0, -1));
+      return file.type === t;
+    });
   }
 
   private _handleDragover(e: DragEvent) {
@@ -159,29 +186,29 @@ export class BdsFileInput extends LitElement {
     e.preventDefault();
     this._isDragging = false;
     this.requestUpdate();
-    this._handleFiles(e.dataTransfer?.files ?? null);
+    if (this.disabled) return;
+    const dropped = e.dataTransfer?.files;
+    if (!dropped) return;
+    const accepted = Array.from(dropped).filter(file => this._isFileAccepted(file));
+    const input = this.shadowRoot?.querySelector<HTMLInputElement>('input');
+    // `DataTransfer` is unavailable in some test/runtime environments (e.g. jsdom) — fall back
+    // to notifying with the filtered files without syncing the native input's file list.
+    if (input && typeof DataTransfer !== 'undefined') {
+      const dt = new DataTransfer();
+      accepted.forEach(file => dt.items.add(file));
+      input.files = dt.files;
+      this._handleFiles(input.files);
+    } else {
+      this._handleFiles(accepted);
+    }
   }
 
   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
+      <label
+        for=${id}
         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}
@@ -195,7 +222,17 @@ export class BdsFileInput extends LitElement {
           <slot>Drag &amp; drop or click to browse</slot>
         </span>
         <span class="hint">${this.accept ? `Accepted: ${this.accept}` : 'Any file type'}</span>
-      </div>
+        <input
+          id=${id}
+          type="file"
+          class="zone-input"
+          name=${this.name}
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          @change=${this._handleInputChange}
+        />
+      </label>
     `;
   }
 }

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

@@ -68,6 +68,28 @@ describe('bds-form-input', () => {
     cleanup(el);
   });
 
+  it('renders both error and hint messages when both are set, and aria-describedby references both', async () => {
+    const el = await fixture(
+      '<bds-form-input name="email" error="Invalid email" hint="We will not share your email"></bds-form-input>',
+    );
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const errorMsg = el.shadowRoot!.querySelector('.message--error');
+    const hintMsg = el.shadowRoot!.querySelector('.message--hint');
+    expect(errorMsg?.textContent?.trim()).toBe('Invalid email');
+    expect(hintMsg?.textContent?.trim()).toBe('We will not share your email');
+    const describedBy = input.getAttribute('aria-describedby')!.split(' ');
+    expect(describedBy).toContain(errorMsg!.id);
+    expect(describedBy).toContain(hintMsg!.id);
+    cleanup(el);
+  });
+
+  it('omits aria-describedby when neither error nor hint is set', async () => {
+    const el = await fixture('<bds-form-input name="email"></bds-form-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.hasAttribute('aria-describedby')).toBe(false);
+    cleanup(el);
+  });
+
   it('fires bds-change on change', async () => {
     const el = await fixture('<bds-form-input name="email"></bds-form-input>');
     const values: string[] = [];

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

@@ -1,4 +1,5 @@
 import { LitElement, css, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * `<bds-form-input>` — form-associated text input with label, hint, and error support.
@@ -31,6 +32,16 @@ export class BdsFormInput extends LitElement {
   static formAssociated = true;
 
   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;
     }
@@ -58,17 +69,20 @@ export class BdsFormInput extends LitElement {
       position: relative;
       display: flex;
       align-items: center;
+      border: var(--formInput_border, var(--input_border, none));
+      /* deprecated: --formInput_border-color kept as a legacy override for the frame colour */
       --bdc_color: var(--formInput_border-color, currentcolor);
-      --bdc-outline_radius: var(--bds-border_radius--xs);
+      --bdc-outline_radius: var(--bds-border_radius--full);
 
-      border-radius: var(--formInput_radius, var(--bdc-outline_radius));
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--formInput_shadow, var(--bdc-outline_shadow));
-      background-color: var(--bds-color_bg);
-      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      border-radius: var(--formInput_radius, var(--input_radius, var(--bdc-outline_radius)));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--formInput_shadow, var(--input_shadow, var(--bdc-outline_shadow)));
+      background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     :host([error]) .wrapper {
-      --bdc_color: var(--bds-color_error);
+      --bdc_color: var(--bdc_color--error);
     }
 
     .wrapper:focus-within {
@@ -76,7 +90,7 @@ export class BdsFormInput extends LitElement {
     }
 
     :host([error]) .wrapper:focus-within {
-      --bdc_color: var(--bds-color_error);
+      --bdc_color: var(--bdc_color--error);
     }
 
     .input {
@@ -87,7 +101,7 @@ export class BdsFormInput extends LitElement {
       padding: var(--bds-space_s);
       font-size: var(--bds-font_size--body);
       font-family: var(--bds-font_family--body);
-      color: var(--bds-color_on-bg);
+      color: var(--formInput_color, var(--input_color, var(--bds-color_on-bg)));
       outline: none;
     }
 
@@ -99,10 +113,10 @@ export class BdsFormInput extends LitElement {
       outline: none;
     }
 
-    .wrapper:focus-within {
+    .wrapper:focus-within:has(:focus-visible) {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
-      border-radius: var(--formInput_radius, var(--bdc-outline_radius));
+      border-radius: var(--formInput_radius, var(--input_radius, var(--bdc-outline_radius)));
     }
 
     .prefix,
@@ -244,18 +258,15 @@ export class BdsFormInput extends LitElement {
           ?disabled=${this.disabled}
           ?required=${this.required}
           aria-invalid=${this.error ? 'true' : 'false'}
-          aria-describedby=${describedBy ?? ''}
+          aria-describedby=${ifDefined(describedBy)}
           aria-required=${this.required ? 'true' : 'false'}
           @input=${this._handleInput}
           @change=${this._handleChange}
         />
         <span class="suffix"><slot name="suffix"></slot></span>
       </div>
-      ${this.error
-        ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
-        : this.hint
-          ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
-          : ''}
+      ${this.error ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>` : ''}
+      ${this.hint ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>` : ''}
     `;
   }
 }

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

@@ -84,4 +84,53 @@ describe('bds-number-input', () => {
   it('is form-associated', () => {
     expect(BdsNumberInput.formAssociated).toBe(true);
   });
+
+  it('renders a label wired to the input via for/id', async () => {
+    const el = await fixture('<bds-number-input name="qty" label="Quantity"></bds-number-input>');
+    const label = el.shadowRoot!.querySelector<HTMLLabelElement>('label')!;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(label).not.toBeNull();
+    expect(label.textContent?.trim()).toBe('Quantity');
+    expect(label.getAttribute('for')).toBe(input.id);
+    expect(input.id).not.toBe('');
+    cleanup(el);
+  });
+
+  it('renders no label element when label is unset', async () => {
+    const el = await fixture('<bds-number-input name="qty"></bds-number-input>');
+    expect(el.shadowRoot!.querySelector('label')).toBeNull();
+    cleanup(el);
+  });
+
+  it('wires aria-controls on both steppers to the input id', async () => {
+    const el = await fixture('<bds-number-input name="qty"></bds-number-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const decBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Decrease"]')!;
+    const incBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Increase"]')!;
+    expect(decBtn.getAttribute('aria-controls')).toBe(input.id);
+    expect(incBtn.getAttribute('aria-controls')).toBe(input.id);
+    cleanup(el);
+  });
+
+  it('sets aria-invalid and aria-describedby and renders an error message when error is set', async () => {
+    const el = await fixture('<bds-number-input name="qty" error="Out of range"></bds-number-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const message = el.shadowRoot!.querySelector<HTMLParagraphElement>('.message--error')!;
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(input.getAttribute('aria-describedby')).toBe(message.id);
+    expect(message.textContent).toBe('Out of range');
+    expect(message.getAttribute('role')).toBe('alert');
+    cleanup(el);
+  });
+
+  it('renders a hint message and wires aria-describedby when hint is set (no error)', async () => {
+    const el = await fixture('<bds-number-input name="qty" hint="Whole numbers only"></bds-number-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const message = el.shadowRoot!.querySelector<HTMLParagraphElement>('.message--hint')!;
+    expect(message).not.toBeNull();
+    expect(message.textContent).toBe('Whole numbers only');
+    expect(input.getAttribute('aria-invalid')).toBe('false');
+    expect(input.getAttribute('aria-describedby')).toBe(message.id);
+    cleanup(el);
+  });
 });