@boostdev/design-system-components 2.7.1 → 2.11.0

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,54 +80,108 @@ export class BdsSlider extends LitElement {
     }
 
     .input {
+      color: var(--slider_color, var(--bds-color_on-bg));
       inline-size: 100%;
       appearance: none;
-      block-size: 0.25rem;
-      border-radius: 999px;
+      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,
-        var(--slider_fill-color, var(--bds-color_interactive)) var(--slider_fill, 0%),
-        var(--slider_track-color, var(--bds-color_bg--subtle)) var(--slider_fill, 0%)
+        var(--slider_color-active, var(--bdc-color_active)) 0%,
+        var(--slider_color-active, var(--bdc-color_active)) 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%
       );
       outline: none;
       cursor: pointer;
+      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: 1.25rem;
-      block-size: 1.25rem;
-      border-radius: 50%;
-      background-color: var(--slider_thumb-color, var(--bds-color_interactive));
-      box-shadow: var(--bds-shadow_m);
+      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);
       cursor: pointer;
       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: 1.25rem;
-      block-size: 1.25rem;
-      border-radius: 50%;
+      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;
-      background-color: var(--slider_thumb-color, var(--bds-color_interactive));
-      box-shadow: var(--bds-shadow_m);
+      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);
       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;
+    }
+
     .input:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
-      border-radius: 999px;
+      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,
+      .input::-moz-range-thumb {
+        transition: none;
+      }
     }
   `;
 
   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;
@@ -97,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();
@@ -109,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>) {
@@ -119,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 {
@@ -133,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);
+  });
 });

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

@@ -13,17 +13,35 @@ import { LitElement, css, html } from 'lit';
  *   checked  — boolean; whether the switch is on
  *   required — boolean
  *   disabled — boolean
+ *   error    — error message; when set the track shows the error colour and
+ *              the input reports `aria-invalid="true"`
+ *   size     — "small" | "medium" (default) | "large"
  *
  * Slots:
  *   (default) — label text
  *
+ * Events:
+ *   bds-change — composed CustomEvent fired when the switch is toggled
+ *                (crosses the shadow boundary); `detail: { checked: boolean }`
+ *
  * @example
  * <bds-switch name="notifications" value="enabled">Enable notifications</bds-switch>
+ * <bds-switch name="darkMode" size="small" error="Required">Dark mode</bds-switch>
  */
 export class BdsSwitch 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;
       align-items: center;
@@ -31,7 +49,20 @@ export class BdsSwitch extends LitElement {
       cursor: pointer;
       font-size: var(--bds-font_size--body);
       font-family: var(--bds-font_family--body);
-      color: var(--bds-color_on-bg);
+      color: var(--switch_color, var(--bds-color_on-bg));
+
+      --switch_thumb-size: 1.25em;
+      --switch_track-pad: var(--bds-space_xxxs);
+      --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
+      --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
+    }
+
+    :host([size='small']) {
+      --switch_thumb-size: 1em;
+    }
+
+    :host([size='large']) {
+      --switch_thumb-size: 1.5em;
     }
 
     :host([disabled]) {
@@ -40,53 +71,104 @@ export class BdsSwitch extends LitElement {
       pointer-events: none;
     }
 
-    .track {
-      position: relative;
-      inline-size: 2.75rem;
-      block-size: 1.5rem;
-      border-radius: 999px;
-      background-color: var(--switch_color_bg, var(--bds-color_bg--subtle));
-      --bdc_color: var(--switch_border-color, currentcolor);
-
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
-      transition: background-color 0.2s ease;
-      flex-shrink: 0;
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--bds-space_xs);
+      cursor: pointer;
     }
 
-    .thumb {
-      position: absolute;
-      inset-block-start: 0.2rem;
-      inset-inline-start: 0.2rem;
-      inline-size: 1.1rem;
-      block-size: 1.1rem;
-      border-radius: 50%;
-      background-color: var(--switch_thumb_color, var(--bds-color_interactive));
-      transition: inset-inline-start 0.2s ease;
+    /* Positioned ancestor for the invisible overlay input — without this the
+       input's position:absolute + inset:0 climbs to the nearest positioned
+       ancestor outside the component (often the whole page), so clicks
+       anywhere would toggle the switch. Matches React's .trackWrapper. */
+    .track-wrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      inline-size: var(--switch_track-width);
+      block-size: var(--switch_track-height);
     }
 
     .input {
       position: absolute;
+      inset: 0;
+      appearance: none;
       opacity: 0;
-      inline-size: 0;
-      block-size: 0;
+      inline-size: 100%;
+      block-size: 100%;
       margin: 0;
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    .input:disabled {
+      cursor: not-allowed;
+    }
+
+    .track {
+      /* Shadow DOM does not inherit the global box-sizing reset — without this
+         the padding-inline is added on top of inline-size (content-box), so the
+         thumb's checked translate falls short of the track end. */
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      inline-size: var(--switch_track-width);
+      block-size: var(--switch_track-height);
+      border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
+      background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
+      padding-inline: var(--switch_track-pad);
+      --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--switch_shadow, var(--bdc-outline_shadow));
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      flex-shrink: 0;
+      pointer-events: none;
+    }
+
+    .thumb {
+      display: block;
+      inline-size: var(--switch_thumb-size);
+      block-size: var(--switch_thumb-size);
+      border-radius: var(--switch_thumb-radius, var(--bds-border_radius--circle));
+      background-color: var(--switch_thumb-bg, var(--bds-color_interactive));
+      box-shadow: var(--bds-shadow_s);
+      transition: var(--bds-animation_transition);
+      transform: translateX(0);
+    }
+
+    /* Error state — lower specificity than :checked below, so a checked
+       switch still shows the active colour even when it also has an error. */
+    :host([error]) .track {
+      --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
     }
 
     .input:checked + .track {
-      background-color: var(--switch_color-active, var(--bdc-color_active--subtle));
+      background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
+      --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
     }
 
     .input:checked + .track .thumb {
-      inset-inline-start: calc(100% - 1.3rem);
+      background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
+      transform: translateX(var(--switch_thumb-size));
     }
 
     .input:focus-visible + .track {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
+      border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
     }
 
-    label {
-      cursor: pointer;
+    .input:disabled + .track {
+      opacity: 0.4;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .track,
+      .thumb {
+        transition: none;
+      }
     }
   `;
 
@@ -96,6 +178,8 @@ export class BdsSwitch extends LitElement {
     checked:  { type: Boolean, reflect: true },
     required: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
+    error:    { type: String, reflect: true },
+    size:     { type: String, reflect: true },
   };
 
   declare name: string;
@@ -103,9 +187,12 @@ export class BdsSwitch extends LitElement {
   declare checked: boolean;
   declare required: boolean;
   declare disabled: boolean;
+  declare error: string | undefined;
+  declare size: 'small' | 'medium' | 'large';
 
   private _internals!: ElementInternals;
   private readonly _uid = Math.random().toString(36).slice(2, 8);
+  private _initialChecked = false;
 
   constructor() {
     super();
@@ -115,6 +202,12 @@ export class BdsSwitch extends LitElement {
     this.checked = false;
     this.required = false;
     this.disabled = false;
+    this.size = 'medium';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialChecked = this.checked;
   }
 
   updated(changed: Map<string, unknown>) {
@@ -125,30 +218,38 @@ export class BdsSwitch extends LitElement {
   }
 
   formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue?.(null);
+    this.checked = this._initialChecked;
+    this._internals.setFormValue?.(this.checked ? this.value : null);
   }
 
   private _handleChange(e: Event) {
     this.checked = (e.target as HTMLInputElement).checked;
+    this.dispatchEvent(new CustomEvent('bds-change', {
+      detail: { checked: this.checked },
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   render() {
     const id = `bds-switch-${this._uid}`;
     return html`
-      <input
-        id=${id}
-        type="checkbox"
-        role="switch"
-        class="input"
-        .checked=${this.checked}
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        @change=${this._handleChange}
-      />
       <label for=${id}>
-        <span class="track">
-          <span class="thumb"></span>
+        <span class="track-wrapper">
+          <input
+            id=${id}
+            type="checkbox"
+            role="switch"
+            class="input"
+            .checked=${this.checked}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            aria-invalid=${this.error ? 'true' : 'false'}
+            @change=${this._handleChange}
+          />
+          <span class="track">
+            <span class="thumb"></span>
+          </span>
         </span>
         <slot></slot>
       </label>