@boostdev/design-system-components 2.7.1 → 2.11.0

package/src/web-components/interaction/form/bds-segmented-control.ts

@@ -23,7 +23,8 @@ export interface SegmentedOption {
  *   variant  — "outline" (inset border on active item, default) | "filled" (sliding thumb)
  *
  * Events:
- *   change — fired when a new segment is selected (radio mode only)
+ *   bds-change — fired when a new segment is selected (radio mode only); detail: { value }
+ *   change     — deprecated alias for bds-change, kept for backward compatibility (radio mode only)
  *
  * @example
  * <bds-segmented-control
@@ -43,6 +44,16 @@ export class BdsSegmentedControl 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: inline-flex;
     }
@@ -53,25 +64,35 @@ export class BdsSegmentedControl extends LitElement {
     }
 
     .control {
-      display: inline-flex;
       position: relative;
-      border-radius: var(--bds-border_radius--s);
-      background-color: var(--segmented_color_bg, var(--bds-color_bg--subtle));
-      padding: 0.25rem;
+      display: inline-grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      padding: var(--control_track-pad, var(--bds-space_xxs));
+      background-color: var(--control_track-bg, var(--segmented_color_bg, var(--bds-color_bg--subtle)));
+      border-radius: var(--control_radius, var(--bds-border_radius--full));
       gap: 0;
+      --control_dir: 1;
+    }
+
+    :host(:dir(rtl)) .control {
+      --control_dir: -1;
     }
 
-    /* Sliding thumb */
+    /* Sliding thumb (filled variant) — positioned entirely via CSS custom properties
+       (--control_count / --control_selected-index, set inline from render()) so it
+       stays correct across RTL and resize without any JS measurement. */
     .thumb {
       position: absolute;
-      inset-block: 0.25rem;
-      border-radius: calc(var(--bds-border_radius--s) - 2px);
-      background-color: var(--segmented_thumb-color, var(--bds-color_interactive));
-      box-shadow: var(--bds-shadow_m);
-      transition: inset-inline-start var(--bds-animation_transition-duration) var(--bds-animation_easing),
-                  inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      inset-block: var(--control_track-pad, var(--bds-space_xxs));
+      inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
+      inline-size: calc((100% - 2 * var(--control_track-pad, var(--bds-space_xxs))) / var(--control_count, 1));
+      border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
+      background-color: var(--control_thumb-bg, var(--segmented_thumb-color, var(--bds-color_interactive)));
+      box-shadow: var(--control_thumb-shadow, var(--bds-shadow_s));
       pointer-events: none;
-      /* Position set via JS in updated() */
+      transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     .radio {
@@ -84,6 +105,7 @@ export class BdsSegmentedControl extends LitElement {
 
     .item {
       position: relative;
+      z-index: 1;
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -91,9 +113,9 @@ export class BdsSegmentedControl extends LitElement {
       font-size: var(--bds-font_size--body--s);
       font-family: var(--bds-font_family--body);
       font-weight: var(--bds-font_weight--semibold);
-      color: var(--segmented_color, var(--bds-color_on-bg));
+      color: var(--control_label-color, var(--segmented_color, var(--bds-color_on-bg)));
       cursor: pointer;
-      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
       transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
       user-select: none;
       white-space: nowrap;
@@ -101,7 +123,7 @@ export class BdsSegmentedControl extends LitElement {
     }
 
     .item.--active {
-      color: var(--segmented_color--active, var(--bds-color_on-interactive));
+      color: var(--control_label-color--active, var(--segmented_color--active, var(--bds-color_on-interactive)));
     }
 
     .item.--disabled {
@@ -109,21 +131,34 @@ export class BdsSegmentedControl extends LitElement {
       cursor: not-allowed;
     }
 
-    .radio:focus-visible + .item-label {
+    /* Radio-mode items aren't directly focusable (the input is visually hidden inside
+       the label), so match focus-visible on the input itself via :has(); link-mode
+       items are focusable directly. */
+    .item:focus-visible,
+    .item:has(> .radio:focus-visible) {
       outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+      border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     }
 
-    /* Outline variant: sliding inset-border indicator (positioned via JS like .thumb) */
+    @media (hover: hover) and (pointer: fine) {
+      .item:not(.--active, .--disabled):hover {
+        color: var(--control_label-color--hover, var(--bds-color_on-bg));
+      }
+    }
+
+    /* Outline variant: sliding inset-border indicator (positioned like .thumb) */
     .indicator {
       position: absolute;
-      inset-block: 0.25rem;
-      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      inset-block: var(--control_track-pad, var(--bds-space_xxs));
+      inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
+      inline-size: calc((100% - 2 * var(--control_track-pad, var(--bds-space_xxs))) / var(--control_count, 1));
+      border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
       pointer-events: none;
       z-index: 2;
       display: none;
-      transition: inset-inline-start var(--bds-animation_transition-duration) var(--bds-animation_easing),
-                  inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     /* Outline variant — no thumb, sliding inset-border indicator, interactive active color */
@@ -132,17 +167,17 @@ export class BdsSegmentedControl extends LitElement {
     }
 
     :host([variant='outline']) .item {
-      background-color: var(--segmented_item-bg, transparent);
+      background-color: var(--control_item-bg, var(--segmented_item-bg, transparent));
     }
 
     :host([variant='outline']) .item.--active {
-      color: var(--segmented_color--active, var(--bds-color_interactive));
-      background-color: var(--segmented_item-bg--active, var(--bds-color_bg));
+      color: var(--control_label-color--active, var(--segmented_color--active, var(--bds-color_interactive)));
+      background-color: var(--control_item-bg--active, var(--segmented_item-bg--active, var(--bds-color_bg)));
     }
 
     :host([variant='outline']) .indicator {
       display: block;
-      box-shadow: inset 0 0 0 2px var(--bds-color_interactive);
+      box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -169,6 +204,7 @@ export class BdsSegmentedControl extends LitElement {
 
   private _internals!: ElementInternals;
   private readonly _uid = Math.random().toString(36).slice(2, 8);
+  private _initialValue = '';
 
   constructor() {
     super();
@@ -180,6 +216,11 @@ export class BdsSegmentedControl extends LitElement {
     this.variant = 'outline';
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialValue = this.value;
+  }
+
   private get _options(): SegmentedOption[] {
     try {
       return JSON.parse(this.options) as SegmentedOption[];
@@ -192,52 +233,33 @@ export class BdsSegmentedControl extends LitElement {
     super.updated(changed);
     if (changed.has('value') || changed.has('options')) {
       this._internals.setFormValue?.(this.value || null);
-      if (this.variant === 'filled') this._updateThumb();
-      if (this.variant === 'outline') this._updateIndicator();
-    }
-    if (changed.has('variant')) {
-      if (this.variant === 'filled') this._updateThumb();
-      if (this.variant === 'outline') this._updateIndicator();
     }
   }
 
-  private _positionSlider(el: HTMLElement | null | undefined, items: NodeListOf<HTMLElement>, selectedIndex: number) {
-    if (!el || items.length === 0) return;
-    const item = items[selectedIndex];
-    if (!item) return;
-    const controlRect = (item.parentElement as HTMLElement).getBoundingClientRect();
-    const itemRect = item.getBoundingClientRect();
-    el.style.insetInlineStart = `${itemRect.left - controlRect.left}px`;
-    el.style.inlineSize = `${itemRect.width}px`;
-  }
-
-  private _updateThumb() {
-    const selectedIndex = Math.max(0, this._options.findIndex(o => o.value === this.value));
-    const items = this.shadowRoot?.querySelectorAll<HTMLElement>('.item');
-    this._positionSlider(this.shadowRoot?.querySelector<HTMLElement>('.thumb'), items!, selectedIndex);
-  }
-
-  private _updateIndicator() {
-    const selectedIndex = Math.max(0, this._options.findIndex(o => o.value === this.value));
-    const items = this.shadowRoot?.querySelectorAll<HTMLElement>('.item');
-    this._positionSlider(this.shadowRoot?.querySelector<HTMLElement>('.indicator'), items!, selectedIndex);
-  }
-
   formResetCallback() {
-    const firstOption = this._options[0];
-    this.value = firstOption?.value ?? '';
+    const fallback = this._options[0]?.value ?? '';
+    this.value = this._initialValue || fallback;
     this._internals.setFormValue?.(this.value || null);
   }
 
   private _handleChange(optionValue: string) {
     this.value = optionValue;
+    this.dispatchEvent(new CustomEvent('bds-change', {
+      detail: { value: optionValue },
+      bubbles: true,
+      composed: true,
+    }));
+    // Deprecated: kept for backward compatibility, prefer 'bds-change'.
     this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
   }
 
   render() {
     const opts = this._options;
+    const selectedIndex = Math.max(0, opts.findIndex(o => o.value === this.value));
+    const controlStyle = `--control_count: ${Math.max(opts.length, 1)}; --control_selected-index: ${selectedIndex}`;
+
     return html`
-      <div class="control" role="group">
+      <div class="control" role="group" style=${controlStyle}>
         <span class="thumb" aria-hidden="true"></span>
         <span class="indicator" aria-hidden="true"></span>
         ${opts.map((opt, i) => {
@@ -251,7 +273,7 @@ export class BdsSegmentedControl extends LitElement {
                 class=${itemClass}
                 href=${isDisabled ? nothing : opt.href}
                 aria-current=${isActive ? 'page' : nothing}
-                ?aria-disabled=${isDisabled}
+                aria-disabled=${isDisabled ? 'true' : nothing}
               >${opt.label}</a>
             `;
           }

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

@@ -71,4 +71,61 @@ describe('bds-select', () => {
   it('is form-associated', () => {
     expect(BdsSelect.formAssociated).toBe(true);
   });
+
+  it('fires a composed bds-change event that reaches a host-level listener', async () => {
+    const el = await fixture(`<bds-select name="country" options='${OPTIONS}'></bds-select>`);
+    const values: string[] = [];
+    let composed = false;
+    el.addEventListener('bds-change', (e: Event) => {
+      composed = (e as CustomEvent).composed;
+      values.push((e as CustomEvent).detail.value);
+    });
+    const select = el.shadowRoot!.querySelector<HTMLSelectElement>('select')!;
+    select.value = 'be';
+    select.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(values).toEqual(['be']);
+    expect(composed).toBe(true);
+    cleanup(el);
+  });
+
+  it('renders a label when label attribute is set, associated via for/id', async () => {
+    const el = await fixture(`<bds-select name="country" label="Country" options='${OPTIONS}'></bds-select>`);
+    const label = el.shadowRoot!.querySelector('label')!;
+    const select = el.shadowRoot!.querySelector('select')!;
+    expect(label.textContent?.trim()).toContain('Country');
+    expect(select.id).toBeTruthy();
+    expect(label.getAttribute('for')).toBe(select.id);
+    cleanup(el);
+  });
+
+  it('forwards a host aria-label to the inner select when no label attribute is set', async () => {
+    const el = await fixture(`<bds-select name="country" aria-label="Country" options='${OPTIONS}'></bds-select>`);
+    const select = el.shadowRoot!.querySelector('select')!;
+    expect(select.getAttribute('aria-label')).toBe('Country');
+    cleanup(el);
+  });
+
+  it('does not set aria-label on the inner select when a label attribute is present', async () => {
+    const el = await fixture(`<bds-select name="country" label="Country" aria-label="Ignored" options='${OPTIONS}'></bds-select>`);
+    const select = el.shadowRoot!.querySelector('select')!;
+    expect(select.hasAttribute('aria-label')).toBe(false);
+    cleanup(el);
+  });
+
+  it('renders error message and sets aria-invalid/aria-describedby when error is set', async () => {
+    const el = await fixture(`<bds-select name="country" error="Please choose a country" options='${OPTIONS}'></bds-select>`);
+    const select = el.shadowRoot!.querySelector('select')!;
+    const errorMsg = el.shadowRoot!.querySelector('.message--error');
+    expect(select.getAttribute('aria-invalid')).toBe('true');
+    expect(errorMsg?.textContent?.trim()).toBe('Please choose a country');
+    expect(select.getAttribute('aria-describedby')).toContain('-error');
+    cleanup(el);
+  });
+
+  it('renders hint message when hint is set (no error)', async () => {
+    const el = await fixture(`<bds-select name="country" hint="Pick your country" options='${OPTIONS}'></bds-select>`);
+    const hint = el.shadowRoot!.querySelector('.message--hint');
+    expect(hint?.textContent?.trim()).toBe('Pick your country');
+    cleanup(el);
+  });
 });

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

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 
 export interface SelectOption {
   value: string;
@@ -17,15 +17,22 @@ export interface SelectOption {
  *   value       — currently selected value
  *   options     — JSON array of `{ value, label, disabled? }` option objects
  *   placeholder — placeholder option label (disabled, empty value)
+ *   label       — visible label text (rendered as a shadow <label for>)
+ *   hint        — helper text shown below the select
+ *   error       — error message; when set the select enters error state
  *   required    — boolean
  *   disabled    — boolean
  *
+ * When `label` is not provided, a host `aria-label` attribute (if present) is
+ * forwarded to the inner `<select>` so the control always has an accessible name.
+ *
  * Events:
- *   change — native change event (forwarded from inner select)
+ *   bds-change — fired when the selected value changes; `detail: { value: string }`
  *
  * @example
  * <bds-select
  *   name="country"
+ *   label="Country"
  *   placeholder="Choose…"
  *   options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
  * ></bds-select>
@@ -34,6 +41,16 @@ export class BdsSelect 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;
     }
@@ -43,6 +60,20 @@ export class BdsSelect 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);
+    }
+
+    .required {
+      color: var(--bds-color_error);
+      margin-inline-start: var(--bds-space_xxxs);
+    }
+
     .wrapper {
       position: relative;
       display: block;
@@ -52,11 +83,11 @@ export class BdsSelect extends LitElement {
       inline-size: 100%;
       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;
-      --bdc_color: var(--select_border-color, currentcolor);
-      --bdc-outline_radius: var(--bds-border_radius--xs);
+      padding: var(--select_padding, var(--bds-space_s));
+      padding-inline-end: var(--select_padding-end, var(--bds-space_xxl));
+      border: var(--select_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--full);
 
       border-radius: var(--select_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));
@@ -64,7 +95,8 @@ export class BdsSelect extends LitElement {
       color: var(--select_color, var(--bds-color_on-bg));
       appearance: none;
       cursor: pointer;
-      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     .select:focus {
@@ -76,6 +108,25 @@ export class BdsSelect extends LitElement {
       outline-offset: var(--bds-outline_offset);
     }
 
+    :host([error]) .select {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .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;
+    }
+
     .chevron {
       position: absolute;
       inset-inline-end: var(--bds-space_s);
@@ -98,6 +149,9 @@ export class BdsSelect extends LitElement {
     value:       { type: String },
     options:     { type: String },
     placeholder: { type: String },
+    label:       { type: String },
+    hint:        { type: String },
+    error:       { type: String, reflect: true },
     required:    { type: Boolean, reflect: true },
     disabled:    { type: Boolean, reflect: true },
   };
@@ -106,10 +160,14 @@ export class BdsSelect extends LitElement {
   declare value: string;
   declare options: string;
   declare placeholder: string;
+  declare label: string;
+  declare hint: string | undefined;
+  declare error: string | undefined;
   declare required: boolean;
   declare disabled: boolean;
 
   private _internals!: ElementInternals;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
 
   constructor() {
     super();
@@ -118,6 +176,7 @@ export class BdsSelect extends LitElement {
     this.value = '';
     this.options = '[]';
     this.placeholder = '';
+    this.label = '';
     this.required = false;
     this.disabled = false;
   }
@@ -144,18 +203,42 @@ export class BdsSelect extends LitElement {
 
   private _handleChange(e: Event) {
     this.value = (e.target as HTMLSelectElement).value;
+    this.dispatchEvent(new CustomEvent('bds-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   render() {
     const opts = this._options;
+    const id = `bds-select-${this._uid}`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(' ') || undefined;
+    const hostAriaLabel = this.getAttribute('aria-label');
+
     return html`
+      ${this.label
+        ? html`
+            <label class="label" for=${id}>
+              ${this.label}
+              ${this.required ? html`<span class="required" aria-hidden="true">*</span>` : ''}
+            </label>
+          `
+        : ''}
       <div class="wrapper">
         <select
+          id=${id}
           class="select"
           name=${this.name}
           .value=${this.value}
           ?required=${this.required}
           ?disabled=${this.disabled}
+          aria-invalid=${this.error ? 'true' : 'false'}
+          aria-required=${this.required ? 'true' : 'false'}
+          aria-describedby=${describedBy ?? ''}
+          aria-label=${this.label ? nothing : (hostAriaLabel ?? nothing)}
           @change=${this._handleChange}
         >
           ${this.placeholder ? html`
@@ -175,6 +258,11 @@ export class BdsSelect extends LitElement {
           </svg>
         </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>`
+          : ''}
     `;
   }
 }

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

@@ -38,4 +38,87 @@ describe('bds-slider', () => {
   it('is form-associated', () => {
     expect(BdsSlider.formAssociated).toBe(true);
   });
+
+  it('renders a label wired to the input via for/id', async () => {
+    const el = await fixture('<bds-slider name="volume" label="Volume"></bds-slider>');
+    const label = el.shadowRoot!.querySelector<HTMLLabelElement>('label')!;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(label).not.toBeNull();
+    expect(label.textContent?.trim()).toBe('Volume');
+    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-slider name="volume"></bds-slider>');
+    expect(el.shadowRoot!.querySelector('label')).toBeNull();
+    cleanup(el);
+  });
+
+  it('shows the current value next to the label when show-value is set', async () => {
+    const el = await fixture('<bds-slider name="volume" label="Volume" value="42" show-value></bds-slider>');
+    const value = el.shadowRoot!.querySelector('.value');
+    expect(value?.textContent?.trim()).toBe('42');
+    cleanup(el);
+  });
+
+  it('does not render a value element when show-value is unset', async () => {
+    const el = await fixture('<bds-slider name="volume" label="Volume" value="42"></bds-slider>');
+    expect(el.shadowRoot!.querySelector('.value')).toBeNull();
+    cleanup(el);
+  });
+
+  it('sets aria-invalid and aria-describedby and renders an error message when error is set', async () => {
+    const el = await fixture('<bds-slider name="volume" error="Too loud"></bds-slider>');
+    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('Too loud');
+    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-slider name="volume" hint="Adjust to taste"></bds-slider>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const message = el.shadowRoot!.querySelector<HTMLParagraphElement>('.message--hint')!;
+    expect(message).not.toBeNull();
+    expect(message.textContent).toBe('Adjust to taste');
+    expect(input.getAttribute('aria-invalid')).toBe('false');
+    expect(input.getAttribute('aria-describedby')).toBe(message.id);
+    cleanup(el);
+  });
+
+  it('fires a composed bds-change event that crosses the shadow boundary on release', async () => {
+    const el = await fixture('<bds-slider name="volume"></bds-slider>');
+    const values: number[] = [];
+    // A native `change` on the inner range input does not reliably cross the
+    // shadow boundary; `bds-change` is re-dispatched from the host so it does.
+    el.addEventListener('bds-change', (e: Event) => {
+      values.push((e as CustomEvent).detail.value);
+    });
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.value = '80';
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(values).toEqual([80]);
+    cleanup(el);
+  });
+
+  it('restores the initial value attribute (not 0) on form reset', async () => {
+    const el = await fixture('<bds-slider name="volume" value="30" min="0" max="100"></bds-slider>') as BdsSlider;
+    el.value = 90;
+    el.formResetCallback();
+    expect(el.value).toBe(30);
+    cleanup(el);
+  });
+
+  it('clamps the restored reset value to min/max', async () => {
+    const el = await fixture('<bds-slider name="rating" value="3" min="1" max="5"></bds-slider>') as BdsSlider;
+    el.value = 5;
+    el.formResetCallback();
+    expect(el.value).toBe(3);
+    cleanup(el);
+  });
 });