@boostdev/design-system-components 2.8.0 → 2.11.0

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

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 
 export interface ComboboxOption {
   value: string;
@@ -17,6 +17,9 @@ export interface ComboboxOption {
  *   value       — currently selected value
  *   options     — JSON array of `{ value, label, disabled? }` option objects
  *   placeholder — input placeholder text
+ *   label       — visible label text (associated to the input via `<label for>`)
+ *   hint        — helper text shown below the input
+ *   error       — error message; when set the input enters error state
  *   disabled    — boolean
  *
  * Events:
@@ -25,6 +28,7 @@ export interface ComboboxOption {
  * @example
  * <bds-combobox
  *   name="country"
+ *   label="Country"
  *   placeholder="Search…"
  *   options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
  * ></bds-combobox>
@@ -33,6 +37,16 @@ export class BdsCombobox 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;
       position: relative;
@@ -43,6 +57,15 @@ export class BdsCombobox extends LitElement {
       pointer-events: none;
     }
 
+    .label {
+      display: block;
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      margin-block-end: var(--bds-space_xxs);
+    }
+
     .wrapper {
       position: relative;
     }
@@ -52,8 +75,8 @@ export class BdsCombobox extends LitElement {
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       padding: var(--bds-space_s);
-      padding-inline-end: var(--bds-space_xl);
-      border: none;
+      padding-inline-end: var(--bds-space_xxl);
+      border: var(--combobox_border, none);
       --bdc_color: var(--combobox_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--full);
 
@@ -74,6 +97,14 @@ export class BdsCombobox extends LitElement {
       outline-offset: var(--bds-outline_offset);
     }
 
+    :host([error]) .input {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    :host([error]) .input:focus {
+      --bdc_color: var(--bdc_color--error);
+    }
+
     .chevron {
       position: absolute;
       inset-inline-end: var(--bds-space_s);
@@ -92,31 +123,39 @@ export class BdsCombobox extends LitElement {
 
     .listbox {
       position: absolute;
-      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-block-start: calc(100% + var(--bds-space_xxs));
       inset-inline-start: 0;
       inline-size: 100%;
       max-block-size: 15rem;
-      overflow-y: auto;
-      background-color: var(--combobox_list-bg, var(--bds-color_bg));
-      border-radius: var(--bds-border_radius--s);
-      box-shadow: var(--bds-shadow_m);
-      z-index: var(--combobox_z-index, 100);
-      padding-block: var(--bds-space_xs);
+      overflow-block: auto;
+      list-style: none;
+      margin: 0;
+      border: var(--combobox_listbox-border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--s);
+
+      border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
+      background-color: var(--combobox_color_bg, var(--bds-color_bg));
+      color: var(--combobox_on-color, var(--bds-color_on-bg));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
+      z-index: var(--combobox_z-index, var(--bds-z-index_dropdown));
+      padding: var(--bds-space_xxs) 0;
     }
 
     .option {
       display: block;
-      padding: var(--bds-space_s) var(--bds-space_m);
+      padding: var(--bds-space_xs) var(--bds-space_m);
       cursor: pointer;
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
-      color: var(--bds-color_on-bg);
+      color: var(--combobox_on-color, var(--bds-color_on-bg));
       transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     .option:hover,
     .option[aria-selected='true'] {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
+      color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
     }
 
     .option[aria-disabled='true'] {
@@ -125,7 +164,8 @@ export class BdsCombobox extends LitElement {
     }
 
     .option.--focused {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
+      color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
       outline: none;
     }
 
@@ -135,6 +175,21 @@ export class BdsCombobox extends LitElement {
       font-size: var(--bds-font_size--body--s);
       color: var(--bds-color_on-bg--subtle);
     }
+
+    .message {
+      margin-block-start: var(--bds-space_xxs);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+    }
+
+    .message--error {
+      color: var(--bds-color_error);
+    }
+
+    .message--hint {
+      color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
+    }
   `;
 
   static properties = {
@@ -142,6 +197,9 @@ export class BdsCombobox extends LitElement {
     value:       { type: String },
     options:     { type: String },
     placeholder: { type: String },
+    label:       { type: String },
+    hint:        { type: String },
+    error:       { type: String, reflect: true },
     disabled:    { type: Boolean, reflect: true },
   };
 
@@ -149,9 +207,13 @@ export class BdsCombobox extends LitElement {
   declare value: string;
   declare options: string;
   declare placeholder: string;
+  declare label: string;
+  declare hint: string | undefined;
+  declare error: string | undefined;
   declare disabled: boolean;
 
   private _internals!: ElementInternals;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
   private _open = false;
   private _query = '';
   private _focusedIndex = -1;
@@ -163,6 +225,7 @@ export class BdsCombobox extends LitElement {
     this.value = '';
     this.options = '[]';
     this.placeholder = '';
+    this.label = '';
     this.disabled = false;
   }
 
@@ -280,16 +343,32 @@ export class BdsCombobox extends LitElement {
   render() {
     const filtered = this._filtered;
     const inputValue = this._open ? this._query : this._displayLabel;
+    const id = `bds-combobox-${this._uid}`;
+    const listboxId = `${id}-listbox`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(' ') || undefined;
+    const activeDescendant =
+      this._focusedIndex >= 0 && this._focusedIndex < filtered.length
+        ? `${id}-option-${this._focusedIndex}`
+        : undefined;
 
     return html`
+      ${this.label ? html`<label class="label" for=${id}>${this.label}</label>` : ''}
       <div class="wrapper">
         <input
+          id=${id}
           type="text"
           class="input"
           role="combobox"
           aria-expanded=${this._open}
           aria-autocomplete="list"
           aria-haspopup="listbox"
+          aria-controls=${listboxId}
+          aria-activedescendant=${activeDescendant ?? nothing}
+          aria-invalid=${this.error ? 'true' : 'false'}
+          aria-describedby=${describedBy ?? nothing}
+          autocomplete="off"
           name=${this.name}
           placeholder=${this.placeholder}
           .value=${inputValue}
@@ -305,11 +384,12 @@ export class BdsCombobox extends LitElement {
           </svg>
         </span>
         ${this._open ? html`
-          <ul class="listbox" role="listbox" aria-label="Options">
+          <ul id=${listboxId} class="listbox" role="listbox" aria-label="Options">
             ${filtered.length === 0
-              ? html`<li class="no-results">No results</li>`
+              ? html`<li class="no-results" role="presentation">No results</li>`
               : filtered.map((opt, i) => html`
                   <li
+                    id="${id}-option-${i}"
                     class="option ${i === this._focusedIndex ? '--focused' : ''}"
                     role="option"
                     aria-selected=${opt.value === this.value}
@@ -321,6 +401,11 @@ export class BdsCombobox extends LitElement {
           </ul>
         ` : ''}
       </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>`
+          : ''}
     `;
   }
 }

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>
     `;
   }