@boostdev/design-system-components 2.7.1 → 2.11.0

package/src/components/interaction/form/FieldGroup/FieldGroup.module.css

@@ -6,12 +6,6 @@
     padding: 0;
     min-inline-size: 0;
 
-    /* Establish an inline-size containment context so descendant rules can
-       use @container against the FieldGroup's own width — independent of the
-       viewport. Without this, the @container rule below would never match. */
-    container-type: inline-size;
-    container-name: field-group;
-
     /* Field count is injected by the React component as an inline style:
        `style={{ '--fieldGroup_field-count': N }}`. Read with a `1` fallback
        so the calc below stays well-formed if the property is ever missing
@@ -43,7 +37,8 @@
       var(--fieldGroup_legend-border-block-end, 1px solid var(--bds-color_bg--subtle));
     color:
       var(--fieldGroup_legend-color, var(--bds-color_on-bg));
-    font-family: var(--bds-font_family--body);
+    font-family:
+      var(--fieldGroup_legend-font-family, var(--bds-font_family--body));
     font-size:
       var(--fieldGroup_legend-font-size, var(--bds-font_size--heading-3));
     font-weight:
@@ -52,6 +47,13 @@
       var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
   }
 
+  /* Disabled group: <fieldset disabled> natively disables the contained
+     fields (each dims via its own :disabled rule); dim the legend too so the
+     whole group reads as disabled. */
+  .fieldGroup:disabled .legend {
+    opacity: 0.5;
+  }
+
   .fields {
     display: flex;
     flex-direction: column;
@@ -60,9 +62,9 @@
 
   /* Horizontal variant: row layout with flex-wrap. Each child claims at least
      --fieldGroup_min-field-width and grows to fill remaining space. The
-     `flex-wrap` already handles partial wrapping; the @container rule below
-     forces a clean single-column stack when the whole row would no longer
-     fit cleanly. */
+     `flex-wrap` already handles partial wrapping; the [data-collapsed] rule
+     below forces a clean single-column stack when the whole row would no
+     longer fit cleanly. */
   .fieldGroup.--variant_horizontal .fields {
     flex-flow: row wrap;
 
@@ -78,19 +80,51 @@
     min-inline-size: 0;
   }
 
-  /* When the FieldGroup itself is too narrow to fit a complete horizontal
-     row of all its fields at minimum width + gaps, collapse to a clean
-     single column. The threshold is derived automatically from the field
-     count + min-field-width + gap (see --fieldGroup_collapse-threshold
-     above), so the same FieldGroup adapts whether it has 2 or 6 fields,
-     in any container — no media-query wiring at the call site. */
-  @container field-group (max-inline-size: var(--fieldGroup_collapse-threshold)) {
-    .fieldGroup.--variant_horizontal .fields {
-      flex-direction: column;
-    }
+  /* `@container` query *conditions* cannot reference custom properties —
+     `var()` inside a container-query feature value is invalid CSS, so the
+     per-instance --fieldGroup_collapse-threshold above can't drive an
+     `@container` rule directly. `.probe` is an invisible element whose own
+     inline-size resolves that same threshold through a normal property
+     value (where `var()` is valid). FieldGroup.tsx compares the probe's
+     resolved pixel width against the fieldset's own width via
+     ResizeObserver and toggles `[data-collapsed]` — see the effect there
+     for the full mechanism.
+
+     `.probeContainer` is a zero-size, overflow-clipped box: `.probe`'s
+     inline-size is intentionally larger than the fieldset whenever the
+     layout should collapse, so it must be fully contained here — never
+     `position: absolute` directly against the page — or it would visually
+     poke out of the FieldGroup and could grow the document's scrollable
+     area. Clipping only affects paint/scroll, not `.probe`'s own resolved
+     box size, so ResizeObserver still reports its true width. */
+  .probeContainer {
+    position: relative;
+    inline-size: 0;
+    block-size: 0;
+    overflow: hidden;
+  }
+
+  .probe {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: 0;
+    inline-size: var(--fieldGroup_collapse-threshold);
+    visibility: hidden;
+  }
+
+  /* When JS determines the FieldGroup itself is too narrow to fit a
+     complete horizontal row of all its fields at minimum width + gaps,
+     collapse to a clean single column. The threshold is derived
+     automatically from the field count + min-field-width + gap (see
+     --fieldGroup_collapse-threshold above), so the same FieldGroup adapts
+     whether it has 2 or 6 fields, in any container — no media-query wiring
+     at the call site. */
+  .fieldGroup.--variant_horizontal[data-collapsed='true'] .fields {
+    flex-direction: column;
+  }
 
-    .fieldGroup.--variant_horizontal .fields > * {
-      flex: 1 1 auto;
-    }
+  .fieldGroup.--variant_horizontal[data-collapsed='true'] .fields > * {
+    flex: 1 1 auto;
   }
 }

package/src/components/interaction/form/FieldGroup/FieldGroup.spec.tsx

@@ -1,6 +1,6 @@
 import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { FieldGroup } from './FieldGroup';
 
 const cssSource = readFileSync(
@@ -93,9 +93,9 @@ describe('FieldGroup', () => {
       </FieldGroup>,
     );
     let fieldset = screen.getByRole('group') as HTMLFieldSetElement;
-    // The CSS @container rule resolves `--fieldGroup_collapse-threshold` from
-    // this value, so a wrong count silently makes the auto-collapse fire at
-    // the wrong width.
+    // `--fieldGroup_collapse-threshold` (and, through it, the auto-collapse
+    // probe) is derived from this value, so a wrong count silently makes the
+    // auto-collapse fire at the wrong width.
     expect(fieldset.style.getPropertyValue('--fieldGroup_field-count')).toBe('3');
 
     rerender(
@@ -108,10 +108,28 @@ describe('FieldGroup', () => {
     expect(fieldset.style.getPropertyValue('--fieldGroup_field-count')).toBe('2');
   });
 
+  it('does not count null/false conditional children toward the field count', () => {
+    // Regression: `Children.count` counts every slot, including `null`/`false`
+    // conditional children — inflating --fieldGroup_field-count (and so the
+    // derived collapse threshold) for a group that only actually renders 2
+    // fields. `Children.toArray` drops the non-rendered slots.
+    render(
+      <FieldGroup>
+        <input data-testid="email" />
+        {false}
+        {null}
+        <input data-testid="phone" />
+      </FieldGroup>,
+    );
+    const fieldset = screen.getByRole('group') as HTMLFieldSetElement;
+    expect(fieldset.style.getPropertyValue('--fieldGroup_field-count')).toBe('2');
+  });
+
   it('renders cleanly with zero children and sets the field count to 0', () => {
-    // Threshold calc with N=0 produces a negative max-inline-size; container
-    // queries with a negative length never match, so the layout stays in its
-    // declared variant. No fields, no row, no crash.
+    // No fields, no row, no crash — the collapse threshold with N=0 is
+    // degenerate (a non-positive inline-size), but that's a layout concern
+    // handled by the auto-collapse mechanism, not something that should
+    // throw at render time.
     const { container } = render(<FieldGroup legend="Empty section" />);
     const fieldset = container.querySelector('fieldset')!;
     expect(fieldset.style.getPropertyValue('--fieldGroup_field-count')).toBe('0');
@@ -127,6 +145,7 @@ describe('FieldGroup', () => {
       '--fieldGroup_gap',
       '--fieldGroup_min-field-width',
       '--fieldGroup_legend-color',
+      '--fieldGroup_legend-font-family',
       '--fieldGroup_legend-font-size',
       '--fieldGroup_legend-font-weight',
       '--fieldGroup_legend-line-height',
@@ -194,3 +213,106 @@ describe('FieldGroup', () => {
     expect(fieldset.disabled).toBe(true);
   });
 });
+
+describe('FieldGroup — auto-collapse', () => {
+  // Regression: the CSS @container condition previously read
+  // `var(--fieldGroup_collapse-threshold)` directly, which is invalid inside
+  // an @container feature value — the documented single-column collapse
+  // never fired in any browser. FieldGroup now measures a hidden probe
+  // element (whose inline-size resolves that same threshold) against the
+  // fieldset's own width via ResizeObserver and toggles `data-collapsed`.
+  // jsdom has no ResizeObserver — install a mock that records each
+  // constructed observer and the elements it was told to watch, so tests can
+  // drive its callback directly.
+  class MockResizeObserver {
+    callback: ResizeObserverCallback;
+    observed: Element[] = [];
+
+    constructor(callback: ResizeObserverCallback) {
+      this.callback = callback;
+      instances.push(this);
+    }
+
+    observe(el: Element) {
+      this.observed.push(el);
+    }
+
+    unobserve() {}
+
+    disconnect() {}
+  }
+
+  let instances: MockResizeObserver[] = [];
+  const originalResizeObserver = globalThis.ResizeObserver;
+
+  const fireResize = (
+    instance: MockResizeObserver,
+    fieldsetWidth: number,
+    probeWidth: number,
+  ) => {
+    const [fieldsetEl, probeEl] = instance.observed;
+    act(() => {
+      instance.callback(
+        [
+          { target: fieldsetEl, contentRect: { width: fieldsetWidth } },
+          { target: probeEl, contentRect: { width: probeWidth } },
+        ] as unknown as ResizeObserverEntry[],
+        instance as unknown as ResizeObserver,
+      );
+    });
+  };
+
+  beforeEach(() => {
+    instances = [];
+    (globalThis as unknown as { ResizeObserver: typeof ResizeObserver }).ResizeObserver =
+      MockResizeObserver as unknown as typeof ResizeObserver;
+  });
+
+  afterEach(() => {
+    if (originalResizeObserver) {
+      (globalThis as unknown as { ResizeObserver: typeof ResizeObserver }).ResizeObserver =
+        originalResizeObserver;
+    } else {
+      delete (globalThis as unknown as Record<string, unknown>).ResizeObserver;
+    }
+  });
+
+  it('sets data-collapsed when the fieldset is narrower than the derived threshold', () => {
+    const { container } = render(
+      <FieldGroup>
+        <input />
+        <input />
+      </FieldGroup>,
+    );
+    const fieldset = container.querySelector('fieldset')!;
+    expect(instances).toHaveLength(1);
+
+    fireResize(instances[0], 200, 400);
+    expect(fieldset.getAttribute('data-collapsed')).toBe('true');
+  });
+
+  it('clears data-collapsed once the fieldset is wide enough for the row', () => {
+    const { container } = render(
+      <FieldGroup>
+        <input />
+        <input />
+      </FieldGroup>,
+    );
+    const fieldset = container.querySelector('fieldset')!;
+
+    fireResize(instances[0], 200, 400);
+    expect(fieldset.getAttribute('data-collapsed')).toBe('true');
+
+    fireResize(instances[0], 600, 400);
+    expect(fieldset.hasAttribute('data-collapsed')).toBe(false);
+  });
+
+  it('never observes or collapses the vertical variant', () => {
+    render(
+      <FieldGroup variant="vertical">
+        <input />
+      </FieldGroup>,
+    );
+    expect(instances).toHaveLength(0);
+  });
+});

package/src/components/interaction/form/FieldGroup/FieldGroup.tsx

@@ -1,4 +1,12 @@
-import { Children, CSSProperties, FieldsetHTMLAttributes, ReactNode } from 'react';
+import {
+  Children,
+  CSSProperties,
+  FieldsetHTMLAttributes,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { cn } from '@boostdev/design-system-foundation';
 import css from './FieldGroup.module.css';
 import type { WithClassName } from '../../../../types';
@@ -7,9 +15,8 @@ import type { WithClassName } from '../../../../types';
  * Layout variants for FieldGroup.
  *
  * - `horizontal` (default) — fields flow into a row, each claiming at least
- *   `--fieldGroup_min-field-width`. When the container's inline-size is too
- *   narrow to fit the row, a CSS container query collapses the layout to a
- *   single column.
+ *   `--fieldGroup_min-field-width`. When the FieldGroup's own inline-size is
+ *   too narrow to fit the row, the layout collapses to a single column.
  * - `vertical` — fields always stack one per row.
  */
 export type FieldGroupVariant = 'horizontal' | 'vertical';
@@ -26,10 +33,13 @@ export interface FieldGroupProps
   legend?: ReactNode;
 }
 
+const getInlineSize = (entry: ResizeObserverEntry): number =>
+  entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+
 /**
  * `FieldGroup` semantically groups related form fields under a single
- * `<fieldset>` and lays them out either horizontally (with container-query
- * fallback to vertical) or vertically.
+ * `<fieldset>` and lays them out either horizontally (collapsing to a
+ * single column when the FieldGroup itself is too narrow) or vertically.
  */
 export function FieldGroup({
   variant = 'horizontal',
@@ -39,26 +49,76 @@ export function FieldGroup({
   style,
   ...rest
 }: Readonly<FieldGroupProps>) {
-  // Surface the field count to CSS so the @container collapse threshold
-  // scales with the actual content. The CSS uses
+  // Surface the field count to CSS so the auto-derived collapse threshold
+  // scales with the actual content:
   //   N * --fieldGroup_min-field-width + (N - 1) * --fieldGroup_gap
-  // which is exactly the inline-size required to lay all fields out at
-  // their minimum width with the configured gap. When the FieldGroup's own
-  // inline-size drops below that, the layout collapses to a single column.
-  const fieldCount = Children.count(children);
+  // is exactly the inline-size required to lay all fields out at their
+  // minimum width with the configured gap. `Children.toArray` (not
+  // `Children.count`, which also counts `null`/`false` conditional
+  // children) so only actually-rendered children inflate the threshold.
+  const fieldCount = Children.toArray(children).length;
   const styleWithCount = {
     ...style,
     '--fieldGroup_field-count': fieldCount,
   } as CSSProperties;
 
+  const fieldsetRef = useRef<HTMLFieldSetElement>(null);
+  const probeRef = useRef<HTMLDivElement>(null);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  // `@container` query conditions cannot reference custom properties, so the
+  // per-instance collapse threshold (which the CSS still computes via
+  // `--fieldGroup_collapse-threshold`, see FieldGroup.module.css) can't drive
+  // a CSS `@container` rule directly. Instead, `.probe` is an invisible
+  // element whose own inline-size resolves that threshold through the
+  // browser's normal layout/cascade; comparing its measured pixel width
+  // against the fieldset's own width — via ResizeObserver, so it stays
+  // correct across resizes and field-count changes — tells us when to
+  // collapse. `[data-collapsed="true"]` on the fieldset drives the CSS.
+  useEffect(() => {
+    const fieldsetEl = fieldsetRef.current;
+    const probeEl = probeRef.current;
+    if (
+      variant !== 'horizontal' ||
+      !fieldsetEl ||
+      !probeEl ||
+      typeof ResizeObserver === 'undefined'
+    ) {
+      setIsCollapsed(false);
+      return;
+    }
+
+    let fieldsetSize = 0;
+    let thresholdSize = 0;
+
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const size = getInlineSize(entry);
+        if (entry.target === fieldsetEl) fieldsetSize = size;
+        else if (entry.target === probeEl) thresholdSize = size;
+      }
+      setIsCollapsed(fieldsetSize < thresholdSize);
+    });
+
+    observer.observe(fieldsetEl);
+    observer.observe(probeEl);
+
+    return () => observer.disconnect();
+  }, [variant]);
+
   return (
     <fieldset
       {...rest}
+      ref={fieldsetRef}
       style={styleWithCount}
       className={cn(css.fieldGroup, css[`--variant_${variant}`], className)}
+      data-collapsed={variant === 'horizontal' && isCollapsed ? 'true' : undefined}
     >
       {legend !== undefined && <legend className={css.legend}>{legend}</legend>}
       <div className={css.fields}>{children}</div>
+      <div className={css.probeContainer}>
+        <div ref={probeRef} className={css.probe} />
+      </div>
     </fieldset>
   );
 }

package/src/components/interaction/form/FileInput/FileInput.mdx

@@ -40,9 +40,17 @@ File upload input with styled trigger button, hint, and error support.
 </thead>
 <tbody>
 <tr><td>`--fileInput_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
-<tr><td>`--fileInput_border-color`</td><td>`currentcolor`</td><td>Drop zone border colour</td></tr>
+<tr><td>`--fileInput_border`</td><td>`2px dashed currentcolor`</td><td>Drop zone border (resting state)</td></tr>
+<tr><td>`--fileInput_radius`</td><td>`var(--bds-border_radius--s)`</td><td>Drop zone corner radius</td></tr>
+<tr><td>`--fileInput_border-color`</td><td>`currentcolor`</td><td>Drop zone border colour when focused (focus-within)</td></tr>
 <tr><td>`--fileInput_border-color--hover`</td><td>`var(--bds-color_interactive)`</td><td>Drop zone border colour on hover</td></tr>
 <tr><td>`--fileInput_bg--hover`</td><td>`rgb(from var(--bds-color_interactive) r g b / 4%)`</td><td>Drop zone background on hover</td></tr>
+<tr><td>`--fileInput_bg--dragging`</td><td>`rgb(from currentcolor r g b / 8%)`</td><td>Drop zone background while a file is dragged over it</td></tr>
+<tr><td>`--fileInput_gap`</td><td>`var(--bds-space_xs)`</td><td>Gap between the icon and prompt text inside the drop zone</td></tr>
+<tr><td>`--fileInput_padding`</td><td>`var(--bds-space_l) var(--bds-space_m)`</td><td>Padding of the drop zone</td></tr>
+<tr><td>`--fileInput_label-margin`</td><td>`var(--bds-space_xs)`</td><td>Space below the field label</td></tr>
+<tr><td>`--fileInput_font-size`</td><td>`var(--bds-font_size--body)`</td><td>Font size of the prompt text</td></tr>
+<tr><td>`--fileInput_font-size--hint`</td><td>`var(--bds-font_size--body--s)`</td><td>Font size of the accept-type hint</td></tr>
 </tbody>
 </table>
 

package/src/components/interaction/form/FileInput/FileInput.module.css

@@ -9,7 +9,7 @@
     align-items: center;
     font-family: var(--bds-font_family--body);
     color: var(--bds-color_on-bg);
-    margin-block-end: var(--bds-space_xs);
+    margin-block-end: var(--fileInput_label-margin, var(--bds-space_xs));
   }
 
   .dropZone {
@@ -17,10 +17,10 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    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);
+    gap: var(--fileInput_gap, var(--bds-space_xs));
+    padding: var(--fileInput_padding, var(--bds-space_l) var(--bds-space_m));
+    border: var(--fileInput_border, 2px dashed currentcolor);
+    border-radius: var(--fileInput_radius, var(--bds-border_radius--s));
     color: var(--fileInput_color, var(--bds-color_on-bg));
     cursor: pointer;
     text-align: center;
@@ -35,7 +35,7 @@
 
   .isDragging {
     border-color: currentcolor;
-    background-color: rgb(from currentcolor r g b / 8%);
+    background-color: var(--fileInput_bg--dragging, rgb(from currentcolor r g b / 8%));
   }
 
   .hasError {
@@ -54,7 +54,7 @@
   }
 
   .prompt {
-    font-size: var(--bds-font_size--body);
+    font-size: var(--fileInput_font-size, var(--bds-font_size--body));
     color: var(--bds-color_on-bg);
   }
 
@@ -64,7 +64,7 @@
   }
 
   .acceptHint {
-    font-size: var(--bds-font_size--body--s);
+    font-size: var(--fileInput_font-size--hint, var(--bds-font_size--body--s));
     color: var(--bds-color_on-bg);
   }
 

package/src/components/interaction/form/FileInput/FileInput.spec.tsx

@@ -1,8 +1,44 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FileInput } from './FileInput';
 
+// jsdom does not implement DataTransfer (https://github.com/jsdom/jsdom/issues/1568); the
+// drop handler only needs an `items.add`/`files` surface, so a minimal stub is enough.
+class MockDataTransfer {
+  private addedFiles: File[] = [];
+  items = {
+    add: (file: File) => {
+      this.addedFiles.push(file);
+    },
+  };
+  get files() {
+    return this.addedFiles;
+  }
+}
+
+function getDropZone() {
+  const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+  // input.files has no public setter in jsdom; give this instance a writable own property
+  // so the component's `inputRef.current.files = ...` assignment doesn't throw.
+  Object.defineProperty(input, 'files', { configurable: true, writable: true, value: null });
+  return input.closest('label') as HTMLLabelElement;
+}
+
+function fireDragLeave(target: HTMLElement, relatedTarget: EventTarget | null) {
+  const event = new Event('dragleave', { bubbles: true, cancelable: true });
+  Object.defineProperty(event, 'relatedTarget', { value: relatedTarget });
+  fireEvent(target, event);
+}
+
 describe('FileInput', () => {
+  beforeEach(() => {
+    vi.stubGlobal('DataTransfer', MockDataTransfer);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
   it('renders with label', () => {
     render(<FileInput label="Upload file" name="file" />);
     expect(screen.getByText('Upload file')).toBeInTheDocument();
@@ -50,4 +86,56 @@ describe('FileInput', () => {
     await userEvent.upload(input, file);
     expect(onChange).toHaveBeenCalledOnce();
   });
+
+  it('keeps only the first dropped file when multiple is not set', () => {
+    const onChange = vi.fn();
+    render(<FileInput label="Upload" name="file" onChange={onChange} />);
+    const dropZone = getDropZone();
+    const fileA = new File(['a'], 'a.txt', { type: 'text/plain' });
+    const fileB = new File(['b'], 'b.txt', { type: 'text/plain' });
+
+    fireEvent.drop(dropZone, { dataTransfer: { files: [fileA, fileB] } });
+
+    expect(onChange).toHaveBeenCalledOnce();
+    const received = onChange.mock.calls[0][0] as unknown as File[];
+    expect(Array.from(received).map(f => f.name)).toEqual(['a.txt']);
+    expect(screen.getByText('a.txt')).toBeInTheDocument();
+  });
+
+  it('keeps every dropped file when multiple is set', () => {
+    const onChange = vi.fn();
+    render(<FileInput label="Upload" name="file" multiple onChange={onChange} />);
+    const dropZone = getDropZone();
+    const fileA = new File(['a'], 'a.txt', { type: 'text/plain' });
+    const fileB = new File(['b'], 'b.txt', { type: 'text/plain' });
+
+    fireEvent.drop(dropZone, { dataTransfer: { files: [fileA, fileB] } });
+
+    expect(onChange).toHaveBeenCalledOnce();
+    const received = onChange.mock.calls[0][0] as unknown as File[];
+    expect(Array.from(received).map(f => f.name)).toEqual(['a.txt', 'b.txt']);
+  });
+
+  it('keeps the dragging state when the drag leaves into a child element', () => {
+    render(<FileInput label="Upload" name="file" />);
+    const dropZone = getDropZone();
+    const icon = dropZone.querySelector('svg') as SVGElement;
+
+    fireEvent.dragOver(dropZone);
+    expect(dropZone).toHaveClass('isDragging');
+
+    fireDragLeave(dropZone, icon);
+    expect(dropZone).toHaveClass('isDragging');
+  });
+
+  it('clears the dragging state when the drag leaves the drop zone entirely', () => {
+    render(<FileInput label="Upload" name="file" />);
+    const dropZone = getDropZone();
+
+    fireEvent.dragOver(dropZone);
+    expect(dropZone).toHaveClass('isDragging');
+
+    fireDragLeave(dropZone, null);
+    expect(dropZone).not.toHaveClass('isDragging');
+  });
 });

package/src/components/interaction/form/FileInput/FileInput.tsx

@@ -61,7 +61,9 @@ export function FileInput({
     setIsDragging(false);
     if (disabled) return;
     const dt = new DataTransfer();
-    Array.from(e.dataTransfer.files).filter(isFileAccepted).forEach(f => dt.items.add(f));
+    const accepted = Array.from(e.dataTransfer.files).filter(isFileAccepted);
+    const filesToAdd = multiple ? accepted : accepted.slice(0, 1);
+    filesToAdd.forEach(f => dt.items.add(f));
     if (inputRef.current) inputRef.current.files = dt.files;
     handleFiles(dt.files.length > 0 ? dt.files : null);
   };
@@ -71,7 +73,9 @@ export function FileInput({
     if (!disabled) setIsDragging(true);
   };
 
-  const handleDragLeave = () => setIsDragging(false);
+  const handleDragLeave = (e: DragEvent<HTMLLabelElement>) => {
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsDragging(false);
+  };
 
   return (
     <InputContainer {...rest} className={cn(css.formGroup, className)}>

package/src/components/interaction/form/FormInput/FormInput.mdx

@@ -33,18 +33,21 @@ Text input field with label, optional hint, and error state. The label and input
 
 ## CSS variables
 
-
 <table>
 <thead>
-<tr><th>Variable</th><th>Description</th></tr>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--input_border-color`</td><td>Border colour (set by state — focus, error)</td></tr>
-<tr><td>`--input_color`</td><td>Background colour</td></tr>
-<tr><td>`--input_on-color`</td><td>Text colour</td></tr>
+<tr><td>`--formInput_color_bg`</td><td>`var(--bds-color_bg)`</td><td>Background colour</td></tr>
+<tr><td>`--formInput_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--formInput_border`</td><td>`none`</td><td>Border</td></tr>
+<tr><td>`--formInput_radius`</td><td>`var(--bds-border_radius--full)`</td><td>Corner radius</td></tr>
+<tr><td>`--formInput_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Box shadow</td></tr>
 </tbody>
 </table>
 
+`--input_*` (e.g. `--input_border`, `--input_radius`, `--input_shadow`, `--input_color`, `--input_color_bg`) are deprecated aliases for the `--formInput_*` tokens above — they still work but `--formInput_*` is the documented, forward-compatible name.
+
 
 ## Accessibility
 
@@ -52,3 +55,4 @@ Text input field with label, optional hint, and error state. The label and input
 - Error message uses `aria-describedby` to associate with the input
 - `required` sets both the HTML attribute and a visual indicator
 - `disabled` removes the field from the tab order
+- Set the native `aria-label` attribute to add an accessible name beyond the visible label (e.g. for extra context read by assistive tech). The `ariaLabel` prop is `@deprecated` — it still works, but prefer `aria-label`.