@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -61,4 +61,162 @@ describe('bds-field-group', () => {
     expect(el.style.getPropertyValue('--fieldGroup_field-count')).toBe('3');
     cleanup(el);
   });
+
+  it('renders the auto-collapse probe elements in the shadow DOM', async () => {
+    const el = await fixture('<bds-field-group></bds-field-group>');
+    expect(el.shadowRoot!.querySelector('.probeContainer')).not.toBeNull();
+    expect(el.shadowRoot!.querySelector('.probe')).not.toBeNull();
+    cleanup(el);
+  });
+
+  describe('disabled propagation to slotted controls', () => {
+    // A shadow-root <fieldset disabled> cannot disable light-DOM children
+    // projected through a <slot> — a slotted element's actual DOM parent
+    // stays the host, not the shadow fieldset, so the UA's fieldset-disables-
+    // descendants algorithm never reaches them. The component sets
+    // `.disabled` on each slotted control directly instead.
+
+    it('propagates disabled to slotted form controls', async () => {
+      const el = await fixture(
+        '<bds-field-group disabled><input id="a" /><input id="b" /></bds-field-group>',
+      ) as BdsFieldGroup;
+      const a = el.querySelector('#a') as HTMLInputElement;
+      const b = el.querySelector('#b') as HTMLInputElement;
+      expect(a.disabled).toBe(true);
+      expect(b.disabled).toBe(true);
+      cleanup(el);
+    });
+
+    it('re-enables slotted controls when disabled is cleared', async () => {
+      const el = await fixture(
+        '<bds-field-group disabled><input id="a" /></bds-field-group>',
+      ) as BdsFieldGroup;
+      el.disabled = false;
+      await el.updateComplete;
+      const a = el.querySelector('#a') as HTMLInputElement;
+      expect(a.disabled).toBe(false);
+      cleanup(el);
+    });
+
+    it('propagates disabled to controls slotted in after the group is already disabled', async () => {
+      const el = await fixture('<bds-field-group disabled></bds-field-group>') as BdsFieldGroup;
+      const input = document.createElement('input');
+      input.id = 'late';
+      el.appendChild(input);
+      // slotchange fires asynchronously; allow a microtask.
+      await new Promise(r => requestAnimationFrame(() => r(null)));
+      expect(input.disabled).toBe(true);
+      cleanup(el);
+    });
+
+    it('does not re-enable a slotted control the consumer had individually disabled', async () => {
+      const el = await fixture(
+        '<bds-field-group><input id="a" disabled /><input id="b" /></bds-field-group>',
+      ) as BdsFieldGroup;
+      const a = el.querySelector('#a') as HTMLInputElement;
+      const b = el.querySelector('#b') as HTMLInputElement;
+
+      el.disabled = true;
+      await el.updateComplete;
+      expect(a.disabled).toBe(true);
+      expect(b.disabled).toBe(true);
+
+      el.disabled = false;
+      await el.updateComplete;
+      expect(a.disabled).toBe(true); // consumer-set — must stay disabled
+      expect(b.disabled).toBe(false); // group-set — re-enabled
+      cleanup(el);
+    });
+  });
+
+  describe('auto-collapse (mocked ResizeObserver)', () => {
+    // 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 — mirrors the mock used in
+    // FieldGroup.spec.tsx for the React counterpart of this same mechanism.
+    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;
+      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', async () => {
+      const el = await fixture(
+        '<bds-field-group><input /><input /></bds-field-group>',
+      ) as BdsFieldGroup;
+      expect(instances).toHaveLength(1);
+
+      fireResize(instances[0], 200, 400);
+      expect(el.hasAttribute('data-collapsed')).toBe(true);
+      cleanup(el);
+    });
+
+    it('clears data-collapsed once the fieldset is wide enough for the row', async () => {
+      const el = await fixture(
+        '<bds-field-group><input /><input /></bds-field-group>',
+      ) as BdsFieldGroup;
+
+      fireResize(instances[0], 200, 400);
+      expect(el.hasAttribute('data-collapsed')).toBe(true);
+
+      fireResize(instances[0], 600, 400);
+      expect(el.hasAttribute('data-collapsed')).toBe(false);
+      cleanup(el);
+    });
+
+    it('never collapses the vertical variant', async () => {
+      const el = await fixture(
+        '<bds-field-group variant="vertical"><input /></bds-field-group>',
+      ) as BdsFieldGroup;
+
+      fireResize(instances[0], 50, 400);
+      expect(el.hasAttribute('data-collapsed')).toBe(false);
+      cleanup(el);
+    });
+  });
 });

package/src/web-components/interaction/form/bds-field-group.ts

@@ -6,14 +6,20 @@ export type FieldGroupVariant = 'horizontal' | 'vertical';
  * `<bds-field-group>` — framework-agnostic FieldGroup custom element.
  *
  * Semantically groups related form fields under a single `<fieldset>` and
- * lays them out either horizontally (with a CSS container query that
- * collapses to a vertical stack when the FieldGroup itself is too narrow)
- * or vertically. Mirrors the React `FieldGroup` component.
+ * lays them out either horizontally (auto-collapsing to a vertical stack
+ * when the FieldGroup itself is too narrow to fit a full row) or
+ * vertically. Mirrors the React `FieldGroup` component.
  *
  * Attributes:
  *   variant  — "horizontal" (default) | "vertical"
  *   legend   — optional legend text rendered above the fields
- *   disabled — boolean; forwarded to the inner <fieldset>
+ *   disabled — boolean; forwarded to the inner <fieldset> AND propagated to
+ *     each directly-slotted form control. A shadow-root `<fieldset disabled>`
+ *     cannot disable light-DOM children projected through a `<slot>` — its
+ *     "descendant" is defined over the DOM tree, and a slotted element's
+ *     actual parent stays the host, not the shadow fieldset — so the WC
+ *     sets `.disabled` on each slotted control directly (see
+ *     `_syncDisabledToSlotted`).
  *
  * Slots:
  *   (default) — form fields (any element). The slotted-element count is
@@ -21,6 +27,16 @@ export type FieldGroupVariant = 'horizontal' | 'vertical';
  *     `--fieldGroup_field-count` custom property, which the auto-derived
  *     collapse threshold reads.
  *
+ * Auto-collapse mechanism (mirrors FieldGroup.tsx):
+ *   `@container` query *conditions* cannot reference custom properties — a
+ *   var() inside a container-query feature value is invalid CSS and is
+ *   silently dropped, so it can never fire. Instead, an invisible `.probe`
+ *   element's own inline-size resolves --fieldGroup_collapse-threshold
+ *   through a normal property value (where var() is valid); a
+ *   ResizeObserver compares the probe's measured pixel width against the
+ *   `<fieldset>`'s own width and toggles a `data-collapsed` attribute on
+ *   the host, which drives the CSS.
+ *
  * @example
  * <bds-field-group variant="horizontal" legend="Contact details">
  *   <bds-form-input label="First name" name="first"></bds-form-input>
@@ -30,18 +46,25 @@ export type FieldGroupVariant = 'horizontal' | 'vertical';
  */
 export class BdsFieldGroup 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;
 
-      /* Establish an inline-size containment context so the @container rule
-         queries the host's own width — independent of the viewport. */
-      container-type: inline-size;
-      container-name: field-group;
-
       /* Auto-derived collapse threshold (mirror of the React component).
          --fieldGroup_field-count is set inline by _onSlotChange; the other
          tokens use foundation-default fallbacks so the calc rebuilds when
-         a consumer overrides --fieldGroup_min-field-width or _gap. */
+         a consumer overrides --fieldGroup_min-field-width or _gap. Read by
+         .probe's inline-size below — see the class doc comment for why a
+         direct @container condition can't use this. */
       --fieldGroup_collapse-threshold:
         calc(
           var(--fieldGroup_field-count, 1)
@@ -71,7 +94,8 @@ export class BdsFieldGroup extends LitElement {
 
       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:
@@ -80,6 +104,12 @@ export class BdsFieldGroup extends LitElement {
         var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
     }
 
+    /* Disabled group: dim the legend. Slotted fields dim via their own
+       :host([disabled]) rule. Parity with the React FieldGroup. */
+    :host([disabled]) .legend {
+      opacity: 0.5;
+    }
+
     .fields {
       display: flex;
       flex-direction: column;
@@ -95,17 +125,38 @@ export class BdsFieldGroup extends LitElement {
       min-inline-size: 0;
     }
 
-    /* Auto-collapse: when the host's inline-size can't fit a complete
-       horizontal row, switch to a single-column stack. Threshold scales
-       with the actual slotted-element count (see :host calc above). */
-    @container field-group (max-inline-size: var(--fieldGroup_collapse-threshold)) {
-      :host([variant='horizontal']) .fields {
-        flex-direction: column;
-      }
+    /* Zero-size, overflow-clipped box housing .probe. .probe's inline-size
+       is intentionally larger than the fieldset whenever the layout should
+       collapse, so it must be fully contained here — never left to poke
+       into the page — but 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;
+    }
 
-      :host([variant='horizontal']) .fields ::slotted(*) {
-        flex: 1 1 auto;
-      }
+    .probe {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      block-size: 0;
+      inline-size: var(--fieldGroup_collapse-threshold);
+      visibility: hidden;
+    }
+
+    /* JS (see _onResize/_updateCollapsed) toggles data-collapsed on the host
+       once the fieldset's own inline-size can no longer fit a complete
+       horizontal row. Threshold scales with the actual slotted-element
+       count (see :host calc above). */
+    :host([variant='horizontal'][data-collapsed='true']) .fields {
+      flex-direction: column;
+    }
+
+    :host([variant='horizontal'][data-collapsed='true']) .fields ::slotted(*) {
+      flex: 1 1 auto;
     }
   `;
 
@@ -119,6 +170,17 @@ export class BdsFieldGroup extends LitElement {
   declare legend: string;
   declare disabled: boolean;
 
+  private _ro?: ResizeObserver;
+  private _fieldsetEl?: HTMLFieldSetElement;
+  private _probeEl?: HTMLElement;
+  private _fieldsetSize = 0;
+  private _thresholdSize = 0;
+
+  // Slotted controls this instance disabled on the group's behalf, so
+  // re-enabling the group never overrides a control the consumer had
+  // individually disabled beforehand.
+  private _groupDisabledEls = new WeakSet<HTMLElement>();
+
   constructor() {
     super();
     this.variant = 'horizontal';
@@ -126,14 +188,93 @@ export class BdsFieldGroup extends LitElement {
     this.disabled = false;
   }
 
-  // Arrow-bound for stable identity (unused here but matches the
-  // bds-popover / bds-button conventions for handlers attached in render).
+  connectedCallback() {
+    super.connectedCallback();
+    // disconnectedCallback tears the observer down; firstUpdated() only
+    // fires once per element instance, so a reconnect (e.g. the element was
+    // moved in the DOM) needs its own re-arm. No-op on first connect — the
+    // shadow root hasn't rendered yet, so _setupObserver finds no elements
+    // and firstUpdated() performs the initial setup once it has.
+    if (this.hasUpdated) this._setupObserver();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._ro?.disconnect();
+    this._ro = undefined;
+  }
+
+  firstUpdated() {
+    this._fieldsetEl = this.renderRoot.querySelector('fieldset') ?? undefined;
+    this._probeEl = this.renderRoot.querySelector<HTMLElement>('.probe') ?? undefined;
+    this._setupObserver();
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('variant')) {
+      this._updateCollapsed();
+    }
+    if (changed.has('disabled')) {
+      this._syncDisabledToSlotted();
+    }
+  }
+
+  private _setupObserver() {
+    if (this._ro || typeof ResizeObserver === 'undefined') return;
+    if (!this._fieldsetEl || !this._probeEl) return;
+    this._ro = new ResizeObserver(this._onResize);
+    this._ro.observe(this._fieldsetEl);
+    this._ro.observe(this._probeEl);
+  }
+
+  // Arrow-bound for stable identity across connect/disconnect cycles.
+  private _onResize = (entries: ResizeObserverEntry[]) => {
+    for (const entry of entries) {
+      const size = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+      if (entry.target === this._fieldsetEl) this._fieldsetSize = size;
+      else if (entry.target === this._probeEl) this._thresholdSize = size;
+    }
+    this._updateCollapsed();
+  };
+
+  private _updateCollapsed() {
+    const shouldCollapse =
+      this.variant === 'horizontal' && this._fieldsetSize < this._thresholdSize;
+    this.toggleAttribute('data-collapsed', shouldCollapse);
+  }
+
+  // Arrow-bound for stable identity, matching the bds-popover/bds-button
+  // convention for handlers attached in render.
   private _onSlotChange = (e: Event) => {
     const slot = e.target as HTMLSlotElement;
     const count = slot.assignedElements().length;
     this.style.setProperty('--fieldGroup_field-count', String(count));
+    this._syncDisabledToSlotted();
   };
 
+  // Propagates `disabled` to each directly-slotted form control. Only
+  // touches controls this instance disabled itself (tracked in
+  // _groupDisabledEls) when re-enabling, so a control the consumer
+  // individually disabled stays disabled after the group re-enables.
+  private _syncDisabledToSlotted() {
+    const slot = this.renderRoot.querySelector('slot');
+    if (!slot) return;
+    for (const el of slot.assignedElements({ flatten: true })) {
+      if (!('disabled' in el)) continue;
+      const field = el as HTMLElement & { disabled: boolean };
+      if (this.disabled) {
+        if (!field.disabled) {
+          field.disabled = true;
+          this._groupDisabledEls.add(field);
+        }
+      } else if (this._groupDisabledEls.has(field)) {
+        field.disabled = false;
+        this._groupDisabledEls.delete(field);
+      }
+    }
+  }
+
   render() {
     return html`
       <fieldset ?disabled=${this.disabled}>
@@ -143,6 +284,9 @@ export class BdsFieldGroup extends LitElement {
         <div class="fields">
           <slot @slotchange=${this._onSlotChange}></slot>
         </div>
+        <div class="probeContainer">
+          <div class="probe"></div>
+        </div>
       </fieldset>
     `;
   }

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