@boostdev/design-system-components 2.8.0 → 2.11.0

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,10 +83,10 @@ 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);
+      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));
@@ -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);
+  });
 });

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

@@ -4,27 +4,45 @@ import { LitElement, css, html } from 'lit';
  * `<bds-slider>` — form-associated Slider / Range Input custom element.
  *
  * Uses a native `<input type="range">` with a CSS fill track driven by
- * the `--slider_fill` custom property.
+ * the `--slider_fill` custom property. Renders an associated `<label>`
+ * when `label` is set, with `hint`/`error` messages wired to the input
+ * via `aria-describedby`.
  *
  * Attributes:
- *   name     — form field name
- *   value    — current value (default: 0)
- *   min      — minimum value (default: 0)
- *   max      — maximum value (default: 100)
- *   step     — step increment (default: 1)
- *   disabled — boolean
+ *   name       — form field name
+ *   value      — current value (default: 0)
+ *   min        — minimum value (default: 0)
+ *   max        — maximum value (default: 100)
+ *   step       — step increment (default: 1)
+ *   label      — visible label text, associated with the input via `for`/`id`
+ *   hint       — helper text shown below the slider
+ *   error      — error message; when set the slider enters error state (aria-invalid)
+ *   show-value — shows the current value next to the label
+ *   disabled   — boolean
  *
  * Events:
- *   input  — fired as the user drags
- *   change — fired when the user releases
+ *   input      — native event, fired continuously as the user drags
+ *   bds-change — fired when the user releases; `detail: { value: number }`.
+ *                Re-dispatched from the host (composed) so it reliably
+ *                crosses the shadow boundary, unlike the native `change`.
  *
  * @example
- * <bds-slider name="volume" value="50" min="0" max="100" step="5"></bds-slider>
+ * <bds-slider name="volume" label="Volume" value="50" min="0" max="100" step="5"></bds-slider>
  */
 export class BdsSlider 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;
     }
@@ -34,6 +52,27 @@ export class BdsSlider extends LitElement {
       pointer-events: none;
     }
 
+    .label-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin-block-end: var(--bds-space_xxs);
+    }
+
+    .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);
+    }
+
+    .value {
+      font-size: var(--bds-font_size--body--s);
+      font-variant-numeric: tabular-nums;
+      color: var(--bds-color_on-bg--subtle);
+    }
+
     .track-wrapper {
       position: relative;
       display: flex;
@@ -41,13 +80,10 @@ export class BdsSlider extends LitElement {
     }
 
     .input {
-      --slider_track-height: var(--bds-space_xxs);
-      --slider_thumb-size: calc(var(--bds-space_s) * 2);
-
       color: var(--slider_color, var(--bds-color_on-bg));
       inline-size: 100%;
       appearance: none;
-      block-size: var(--slider_track-height);
+      block-size: var(--slider_track-height, var(--bds-space_xxs));
       border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
       background: linear-gradient(
         to right,
@@ -61,10 +97,20 @@ export class BdsSlider extends LitElement {
       transition: var(--bds-animation_transition);
     }
 
+    :host([error]) .input {
+      background: linear-gradient(
+        to right,
+        var(--slider_color--error, var(--bds-color_error)) 0%,
+        var(--slider_color--error, var(--bds-color_error)) var(--slider_fill, 0%),
+        var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill, 0%),
+        var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%
+      );
+    }
+
     .input::-webkit-slider-thumb {
       appearance: none;
-      inline-size: var(--slider_thumb-size);
-      block-size: var(--slider_thumb-size);
+      inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
+      block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
       border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
       background-color: var(--slider_color-active, var(--bdc-color_active));
       box-shadow: var(--bds-shadow_s);
@@ -72,9 +118,13 @@ export class BdsSlider extends LitElement {
       transition: var(--bds-animation_transition);
     }
 
+    :host([error]) .input::-webkit-slider-thumb {
+      background-color: var(--slider_color--error, var(--bds-color_error));
+    }
+
     .input::-moz-range-thumb {
-      inline-size: var(--slider_thumb-size);
-      block-size: var(--slider_thumb-size);
+      inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
+      block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
       border: none;
       border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
       background-color: var(--slider_color-active, var(--bdc-color_active));
@@ -82,6 +132,10 @@ export class BdsSlider extends LitElement {
       cursor: pointer;
     }
 
+    :host([error]) .input::-moz-range-thumb {
+      background-color: var(--slider_color--error, var(--bds-color_error));
+    }
+
     .input:disabled {
       opacity: 0.4;
       cursor: not-allowed;
@@ -93,6 +147,21 @@ export class BdsSlider extends LitElement {
       border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
     }
 
+    .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;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .input,
       .input::-webkit-slider-thumb,
@@ -103,12 +172,16 @@ export class BdsSlider extends LitElement {
   `;
 
   static properties = {
-    name:     { type: String, reflect: true },
-    value:    { type: Number },
-    min:      { type: Number },
-    max:      { type: Number },
-    step:     { type: Number },
-    disabled: { type: Boolean, reflect: true },
+    name:      { type: String, reflect: true },
+    value:     { type: Number },
+    min:       { type: Number },
+    max:       { type: Number },
+    step:      { type: Number },
+    disabled:  { type: Boolean, reflect: true },
+    label:     { type: String },
+    hint:      { type: String },
+    error:     { type: String, reflect: true },
+    showValue: { type: Boolean, attribute: 'show-value', reflect: true },
   };
 
   declare name: string;
@@ -117,8 +190,14 @@ export class BdsSlider extends LitElement {
   declare max: number;
   declare step: number;
   declare disabled: boolean;
+  declare label: string;
+  declare hint: string | undefined;
+  declare error: string | undefined;
+  declare showValue: boolean;
 
   private _internals!: ElementInternals;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+  private _initialValue = 0;
 
   constructor() {
     super();
@@ -129,6 +208,18 @@ export class BdsSlider extends LitElement {
     this.max = 100;
     this.step = 1;
     this.disabled = false;
+    this.label = '';
+    this.hint = undefined;
+    this.error = undefined;
+    this.showValue = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Capture the value as it stands when this element enters the DOM (i.e.
+    // the parsed `value` attribute, or the constructor default), clamped to
+    // min/max. formResetCallback restores this rather than hardcoding 0.
+    this._initialValue = this._clamp(this.value);
   }
 
   updated(changed: Map<string, unknown>) {
@@ -139,8 +230,12 @@ export class BdsSlider extends LitElement {
   }
 
   formResetCallback() {
-    this.value = 0;
-    this._internals.setFormValue?.('0');
+    this.value = this._initialValue;
+    this._internals.setFormValue?.(String(this.value));
+  }
+
+  private _clamp(v: number): number {
+    return Math.min(this.max, Math.max(this.min, v));
   }
 
   private get _fillPct(): number {
@@ -153,22 +248,55 @@ export class BdsSlider extends LitElement {
     this.value = parseFloat((e.target as HTMLInputElement).value);
   }
 
+  private _handleChange(e: Event) {
+    this.value = parseFloat((e.target as HTMLInputElement).value);
+    // The native `change` event does not reliably cross the shadow
+    // boundary, so re-dispatch a composed bds-change from the host.
+    this.dispatchEvent(new CustomEvent('bds-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
   render() {
+    const id = `bds-slider-${this._uid}`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(' ') || undefined;
+
     return html`
+      ${this.label
+        ? html`
+            <div class="label-row">
+              <label class="label" for=${id}>${this.label}</label>
+              ${this.showValue ? html`<span class="value">${this.value}</span>` : ''}
+            </div>
+          `
+        : ''}
       <div class="track-wrapper">
         <input
           type="range"
           class="input"
+          id=${id}
           name=${this.name}
           .value=${String(this.value)}
           min=${this.min}
           max=${this.max}
           step=${this.step}
           ?disabled=${this.disabled}
+          aria-invalid=${this.error ? 'true' : 'false'}
+          aria-describedby=${describedBy ?? ''}
           style="--slider_fill: ${this._fillPct}%"
           @input=${this._handleInput}
+          @change=${this._handleChange}
         />
       </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-switch.spec.ts

@@ -59,4 +59,72 @@ describe('bds-switch', () => {
   it('is form-associated', () => {
     expect(BdsSwitch.formAssociated).toBe(true);
   });
+
+  it('constrains the overlay input to a positioned track-wrapper (not the whole component)', async () => {
+    const el = await fixture('<bds-switch name="notify">Notifications</bds-switch>');
+    const wrapper = el.shadowRoot!.querySelector('.track-wrapper');
+    expect(wrapper).not.toBeNull();
+    expect(wrapper!.querySelector('input.input')).not.toBeNull();
+    expect(wrapper!.querySelector('.track')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('fires a composed bds-change event when toggled', async () => {
+    const el = await fixture('<bds-switch name="notify">Notifications</bds-switch>') as BdsSwitch;
+    const events: CustomEvent[] = [];
+    el.addEventListener('bds-change', (e: Event) => {
+      events.push(e as CustomEvent);
+    });
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.checked = true;
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(events).toHaveLength(1);
+    expect(events[0].composed).toBe(true);
+    expect(events[0].detail).toEqual({ checked: true });
+    cleanup(el);
+  });
+
+  it('defaults to size="medium"', async () => {
+    const el = await fixture('<bds-switch name="notify">Notifications</bds-switch>');
+    expect(el.getAttribute('size')).toBe('medium');
+    cleanup(el);
+  });
+
+  it('reflects size property to attribute', async () => {
+    const el = await fixture('<bds-switch name="notify">Notifications</bds-switch>') as BdsSwitch;
+    el.size = 'small';
+    await el.updateComplete;
+    expect(el.getAttribute('size')).toBe('small');
+    cleanup(el);
+  });
+
+  it('marks the input aria-invalid when error is set', async () => {
+    const el = await fixture('<bds-switch name="notify" error="Required">Notifications</bds-switch>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    cleanup(el);
+  });
+
+  it('input is not aria-invalid when error is unset', async () => {
+    const el = await fixture('<bds-switch name="notify">Notifications</bds-switch>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.getAttribute('aria-invalid')).toBe('false');
+    cleanup(el);
+  });
+
+  it('restores the initial checked state on form reset', async () => {
+    const el = await fixture('<bds-switch name="notify" checked>Notifications</bds-switch>') as BdsSwitch;
+    el.checked = false;
+    el.formResetCallback();
+    expect(el.checked).toBe(true);
+    cleanup(el);
+  });
+
+  it('restores unchecked as the initial state when checked was never set', async () => {
+    const el = await fixture('<bds-switch name="notify">Notifications</bds-switch>') as BdsSwitch;
+    el.checked = true;
+    el.formResetCallback();
+    expect(el.checked).toBe(false);
+    cleanup(el);
+  });
 });