@boostdev/design-system-components 2.7.1 → 2.11.0

package/src/web-components/interaction/form/bds-file-input.ts

@@ -19,6 +19,16 @@ export class BdsFileInput 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;
     }
@@ -33,12 +43,14 @@ export class BdsFileInput extends LitElement {
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: var(--bds-space_s);
-      padding: var(--bds-space_xl);
-      border-radius: var(--bds-border_radius--m);
-      border: 2px dashed var(--file-input_border-color, var(--bds-color_bg--subtle));
-      background-color: var(--file-input_color_bg, var(--bds-color_bg));
-      color: var(--bds-color_on-bg);
+      gap: var(--bds-space_xs);
+      padding: var(--bds-space_l) var(--bds-space_m);
+      border: 2px dashed currentcolor;
+      border-radius: var(--bds-border_radius--s);
+      /* --file-input_color_bg is a deprecated alias — React declares no base background (transparent is its effective default) */
+      background-color: var(--file-input_color_bg, transparent);
+      /* --fileInput_color drives the currentcolor dashed border (matches React) */
+      color: var(--fileInput_color, var(--bds-color_on-bg));
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       cursor: pointer;
@@ -46,17 +58,26 @@ export class BdsFileInput extends LitElement {
       transition: var(--bds-animation_transition);
     }
 
+    .zone:focus-within {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      /* --file-input_border-color is a deprecated alias — prefer --fileInput_border-color (matches React) */
+      border-color: var(--fileInput_border-color, var(--file-input_border-color, currentcolor));
+    }
+
     .zone.--dragging {
-      border-color: var(--bds-color_interactive);
-      background-color: var(--bds-color_bg--subtle);
+      border-color: currentcolor;
+      background-color: rgb(from currentcolor r g b / 8%);
     }
 
     .zone-input {
       position: absolute;
-      opacity: 0;
-      inline-size: 0;
-      block-size: 0;
+      inline-size: 1px;
+      block-size: 1px;
       overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
     }
 
     .zone-label {
@@ -85,8 +106,8 @@ export class BdsFileInput extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .zone:hover {
-        border-color: var(--bds-color_interactive);
-        background-color: var(--bds-color_bg--subtle);
+        border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
+        background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
       }
     }
   `;
@@ -122,7 +143,7 @@ export class BdsFileInput extends LitElement {
     if (input) input.value = '';
   }
 
-  private _handleFiles(files: FileList | null) {
+  private _handleFiles(files: FileList | File[] | null) {
     if (!files || files.length === 0) return;
     const formData = new FormData();
     Array.from(files).forEach(file => formData.append(this.name, file));
@@ -138,8 +159,14 @@ export class BdsFileInput extends LitElement {
     this._handleFiles((e.target as HTMLInputElement).files);
   }
 
-  private _handleClick() {
-    this.shadowRoot?.querySelector<HTMLInputElement>('input')?.click();
+  private _isFileAccepted(file: File): boolean {
+    if (!this.accept) return true;
+    return this.accept.split(',').some(token => {
+      const t = token.trim();
+      if (t.startsWith('.')) return file.name.toLowerCase().endsWith(t.toLowerCase());
+      if (t.endsWith('/*')) return file.type.startsWith(t.slice(0, -1));
+      return file.type === t;
+    });
   }
 
   private _handleDragover(e: DragEvent) {
@@ -159,29 +186,29 @@ export class BdsFileInput extends LitElement {
     e.preventDefault();
     this._isDragging = false;
     this.requestUpdate();
-    this._handleFiles(e.dataTransfer?.files ?? null);
+    if (this.disabled) return;
+    const dropped = e.dataTransfer?.files;
+    if (!dropped) return;
+    const accepted = Array.from(dropped).filter(file => this._isFileAccepted(file));
+    const input = this.shadowRoot?.querySelector<HTMLInputElement>('input');
+    // `DataTransfer` is unavailable in some test/runtime environments (e.g. jsdom) — fall back
+    // to notifying with the filtered files without syncing the native input's file list.
+    if (input && typeof DataTransfer !== 'undefined') {
+      const dt = new DataTransfer();
+      accepted.forEach(file => dt.items.add(file));
+      input.files = dt.files;
+      this._handleFiles(input.files);
+    } else {
+      this._handleFiles(accepted);
+    }
   }
 
   render() {
     const id = `bds-file-${this._uid}`;
     return html`
-      <input
-        id=${id}
-        type="file"
-        class="zone-input"
-        name=${this.name}
-        accept=${this.accept}
-        ?multiple=${this.multiple}
-        ?disabled=${this.disabled}
-        @change=${this._handleInputChange}
-      />
-      <div
+      <label
+        for=${id}
         class="zone ${this._isDragging ? '--dragging' : ''}"
-        role="button"
-        tabindex=${this.disabled ? '-1' : '0'}
-        aria-label="Upload file"
-        @click=${this._handleClick}
-        @keydown=${(e: KeyboardEvent) => (e.key === 'Enter' || e.key === ' ') && this._handleClick()}
         @dragover=${this._handleDragover}
         @dragleave=${this._handleDragleave}
         @drop=${this._handleDrop}
@@ -195,7 +222,17 @@ export class BdsFileInput extends LitElement {
           <slot>Drag &amp; drop or click to browse</slot>
         </span>
         <span class="hint">${this.accept ? `Accepted: ${this.accept}` : 'Any file type'}</span>
-      </div>
+        <input
+          id=${id}
+          type="file"
+          class="zone-input"
+          name=${this.name}
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          @change=${this._handleInputChange}
+        />
+      </label>
     `;
   }
 }

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

@@ -68,6 +68,28 @@ describe('bds-form-input', () => {
     cleanup(el);
   });
 
+  it('renders both error and hint messages when both are set, and aria-describedby references both', async () => {
+    const el = await fixture(
+      '<bds-form-input name="email" error="Invalid email" hint="We will not share your email"></bds-form-input>',
+    );
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const errorMsg = el.shadowRoot!.querySelector('.message--error');
+    const hintMsg = el.shadowRoot!.querySelector('.message--hint');
+    expect(errorMsg?.textContent?.trim()).toBe('Invalid email');
+    expect(hintMsg?.textContent?.trim()).toBe('We will not share your email');
+    const describedBy = input.getAttribute('aria-describedby')!.split(' ');
+    expect(describedBy).toContain(errorMsg!.id);
+    expect(describedBy).toContain(hintMsg!.id);
+    cleanup(el);
+  });
+
+  it('omits aria-describedby when neither error nor hint is set', async () => {
+    const el = await fixture('<bds-form-input name="email"></bds-form-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.hasAttribute('aria-describedby')).toBe(false);
+    cleanup(el);
+  });
+
   it('fires bds-change on change', async () => {
     const el = await fixture('<bds-form-input name="email"></bds-form-input>');
     const values: string[] = [];

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

@@ -1,4 +1,5 @@
 import { LitElement, css, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * `<bds-form-input>` — form-associated text input with label, hint, and error support.
@@ -31,6 +32,16 @@ export class BdsFormInput 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;
     }
@@ -58,17 +69,20 @@ export class BdsFormInput extends LitElement {
       position: relative;
       display: flex;
       align-items: center;
+      border: var(--formInput_border, var(--input_border, none));
+      /* deprecated: --formInput_border-color kept as a legacy override for the frame colour */
       --bdc_color: var(--formInput_border-color, currentcolor);
-      --bdc-outline_radius: var(--bds-border_radius--xs);
+      --bdc-outline_radius: var(--bds-border_radius--full);
 
-      border-radius: var(--formInput_radius, var(--bdc-outline_radius));
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--formInput_shadow, var(--bdc-outline_shadow));
-      background-color: var(--bds-color_bg);
-      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      border-radius: var(--formInput_radius, var(--input_radius, var(--bdc-outline_radius)));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--formInput_shadow, var(--input_shadow, var(--bdc-outline_shadow)));
+      background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     :host([error]) .wrapper {
-      --bdc_color: var(--bds-color_error);
+      --bdc_color: var(--bdc_color--error);
     }
 
     .wrapper:focus-within {
@@ -76,7 +90,7 @@ export class BdsFormInput extends LitElement {
     }
 
     :host([error]) .wrapper:focus-within {
-      --bdc_color: var(--bds-color_error);
+      --bdc_color: var(--bdc_color--error);
     }
 
     .input {
@@ -87,7 +101,7 @@ export class BdsFormInput extends LitElement {
       padding: var(--bds-space_s);
       font-size: var(--bds-font_size--body);
       font-family: var(--bds-font_family--body);
-      color: var(--bds-color_on-bg);
+      color: var(--formInput_color, var(--input_color, var(--bds-color_on-bg)));
       outline: none;
     }
 
@@ -99,10 +113,10 @@ export class BdsFormInput extends LitElement {
       outline: none;
     }
 
-    .wrapper:focus-within {
+    .wrapper:focus-within:has(:focus-visible) {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
-      border-radius: var(--formInput_radius, var(--bdc-outline_radius));
+      border-radius: var(--formInput_radius, var(--input_radius, var(--bdc-outline_radius)));
     }
 
     .prefix,
@@ -244,18 +258,15 @@ export class BdsFormInput extends LitElement {
           ?disabled=${this.disabled}
           ?required=${this.required}
           aria-invalid=${this.error ? 'true' : 'false'}
-          aria-describedby=${describedBy ?? ''}
+          aria-describedby=${ifDefined(describedBy)}
           aria-required=${this.required ? 'true' : 'false'}
           @input=${this._handleInput}
           @change=${this._handleChange}
         />
         <span class="suffix"><slot name="suffix"></slot></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>`
-          : ''}
+      ${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-number-input.spec.ts

@@ -84,4 +84,53 @@ describe('bds-number-input', () => {
   it('is form-associated', () => {
     expect(BdsNumberInput.formAssociated).toBe(true);
   });
+
+  it('renders a label wired to the input via for/id', async () => {
+    const el = await fixture('<bds-number-input name="qty" label="Quantity"></bds-number-input>');
+    const label = el.shadowRoot!.querySelector<HTMLLabelElement>('label')!;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(label).not.toBeNull();
+    expect(label.textContent?.trim()).toBe('Quantity');
+    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-number-input name="qty"></bds-number-input>');
+    expect(el.shadowRoot!.querySelector('label')).toBeNull();
+    cleanup(el);
+  });
+
+  it('wires aria-controls on both steppers to the input id', async () => {
+    const el = await fixture('<bds-number-input name="qty"></bds-number-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const decBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Decrease"]')!;
+    const incBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="Increase"]')!;
+    expect(decBtn.getAttribute('aria-controls')).toBe(input.id);
+    expect(incBtn.getAttribute('aria-controls')).toBe(input.id);
+    cleanup(el);
+  });
+
+  it('sets aria-invalid and aria-describedby and renders an error message when error is set', async () => {
+    const el = await fixture('<bds-number-input name="qty" error="Out of range"></bds-number-input>');
+    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('Out of range');
+    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-number-input name="qty" hint="Whole numbers only"></bds-number-input>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const message = el.shadowRoot!.querySelector<HTMLParagraphElement>('.message--hint')!;
+    expect(message).not.toBeNull();
+    expect(message.textContent).toBe('Whole numbers only');
+    expect(input.getAttribute('aria-invalid')).toBe('false');
+    expect(input.getAttribute('aria-describedby')).toBe(message.id);
+    cleanup(el);
+  });
 });

package/src/web-components/interaction/form/bds-number-input.ts

@@ -10,18 +10,31 @@ import { LitElement, css, html } from 'lit';
  *   max      — maximum allowed value
  *   step     — increment/decrement step (default: 1)
  *   disabled — boolean
+ *   label    — visible label text, associated with the input via `for`/`id`
+ *   hint     — helper text shown below the input
+ *   error    — error message; when set the input enters error state
  *
  * Events:
  *   input  — fired on stepper click and native input
  *   change — native change event
  *
  * @example
- * <bds-number-input name="qty" value="1" min="0" max="99" step="1"></bds-number-input>
+ * <bds-number-input name="qty" label="Quantity" value="1" min="0" max="99" step="1"></bds-number-input>
  */
 export class BdsNumberInput 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;
     }
@@ -31,42 +44,67 @@ export class BdsNumberInput 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);
+    }
+
     .row {
       display: flex;
-      align-items: center;
+      align-items: stretch;
+      border: var(--numberInput_border, none);
+      /* deprecated: --number-input_border-color kept as a legacy override for the frame colour */
+      --bdc_color: var(--number-input_border-color, currentcolor);
+      --bdc-outline_radius: var(--bds-border_radius--full);
+
+      /* deprecated: --number-input_radius kept as a legacy fallback below --numberInput_radius */
+      --_radius: var(--numberInput_radius, var(--number-input_radius, var(--bdc-outline_radius)));
+
+      border-radius: var(--_radius);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--numberInput_shadow, var(--number-input_shadow, var(--bdc-outline_shadow)));
+      overflow: hidden;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([error]) .row {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .row:focus-within {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    :host([error]) .row:focus-within {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .row:focus-within:has(:focus-visible) {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
     }
 
     .input {
       flex: 1;
-      font-family: var(--bds-font_family--body);
-      font-size: var(--bds-font_size--body);
-      padding: var(--bds-space_s);
       border: none;
-      --bdc_color: var(--number-input_border-color, currentcolor);
-      --bdc-outline_radius: var(--bds-border_radius--xs);
-
-      border-radius: var(--number-input_radius, var(--bdc-outline_radius));
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--number-input_shadow, var(--bdc-outline_shadow));
-      background-color: var(--number-input_color_bg, var(--bds-color_bg));
-      color: var(--number-input_color, var(--bds-color_on-bg));
+      outline: none;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--numberInput_font-size, var(--bds-font_size--body));
+      padding: var(--numberInput_padding, var(--bds-space_s));
+      /* deprecated: --number-input_color_bg kept as a legacy override; React default is transparent */
+      background: var(--number-input_color_bg, transparent);
+      color: var(--numberInput_color, var(--number-input_color, var(--bds-color_on-bg)));
       text-align: center;
-      -moz-appearance: textfield;
+      appearance: textfield;
       min-inline-size: 0;
     }
 
     .input::-webkit-inner-spin-button,
     .input::-webkit-outer-spin-button {
       appearance: none;
-      margin: 0;
-    }
-
-    .input:focus {
-      --bdc_color: var(--bdc_color--focus);
-    }
-
-    .input:focus-visible {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
     }
 
     .stepper {
@@ -74,16 +112,25 @@ export class BdsNumberInput extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: 1px;
-      inline-size: 2rem;
-      block-size: 2rem;
-      border-radius: var(--bds-border_radius--xs);
+      padding: var(--numberInput_stepper-padding, var(--bds-space_xs));
+      margin: var(--bdc-outline_width);
       cursor: pointer;
       flex-shrink: 0;
-      color: var(--bds-color_interactive);
+      background-color: var(--numberInput_stepper-bg, var(--bds-color_bg--subtle));
+      color: var(--numberInput_stepper-color, var(--bds-color_interactive));
       transition: var(--bds-animation_transition);
     }
 
+    .stepper:first-child {
+      border-start-start-radius: var(--_radius);
+      border-end-start-radius: var(--_radius);
+    }
+
+    .stepper:last-child {
+      border-start-end-radius: var(--_radius);
+      border-end-end-radius: var(--_radius);
+    }
+
     .stepper:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
@@ -96,13 +143,30 @@ export class BdsNumberInput extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .stepper:not(:disabled):hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
+        opacity: var(--numberInput_stepper-opacity--hover, 0.7);
       }
     }
 
     .stepper svg {
       inline-size: 1rem;
       block-size: 1rem;
+      color: var(--numberInput_stepper-color, var(--bds-color_interactive));
+    }
+
+    .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;
     }
   `;
 
@@ -113,6 +177,9 @@ export class BdsNumberInput extends LitElement {
     max:      { type: Number },
     step:     { type: Number },
     disabled: { type: Boolean, reflect: true },
+    label:    { type: String },
+    hint:     { type: String },
+    error:    { type: String, reflect: true },
   };
 
   declare name: string;
@@ -121,8 +188,12 @@ export class BdsNumberInput extends LitElement {
   declare max: number | undefined;
   declare step: number;
   declare disabled: boolean;
+  declare label: string;
+  declare hint: string | undefined;
+  declare error: string | undefined;
 
   private _internals!: ElementInternals;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
 
   constructor() {
     super();
@@ -133,6 +204,9 @@ export class BdsNumberInput extends LitElement {
     this.max = undefined;
     this.step = 1;
     this.disabled = false;
+    this.label = '';
+    this.hint = undefined;
+    this.error = undefined;
   }
 
   updated(changed: Map<string, unknown>) {
@@ -168,13 +242,19 @@ export class BdsNumberInput extends LitElement {
   render() {
     const atMin = this.min !== undefined && this.value <= this.min;
     const atMax = this.max !== undefined && this.value >= this.max;
+    const id = `bds-number-input-${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`<label class="label" for=${id}>${this.label}</label>` : ''}
       <div class="row">
         <button
           type="button"
           class="stepper"
           aria-label="Decrease"
+          aria-controls=${id}
           tabindex="-1"
           ?disabled=${this.disabled || atMin}
           @click=${() => this._adjust(-this.step)}
@@ -184,6 +264,7 @@ export class BdsNumberInput extends LitElement {
           </svg>
         </button>
         <input
+          id=${id}
           type="number"
           class="input"
           name=${this.name}
@@ -192,12 +273,15 @@ export class BdsNumberInput extends LitElement {
           max=${this.max ?? ''}
           step=${this.step}
           ?disabled=${this.disabled}
+          aria-invalid=${this.error ? 'true' : 'false'}
+          aria-describedby=${describedBy ?? ''}
           @change=${this._handleChange}
         />
         <button
           type="button"
           class="stepper"
           aria-label="Increase"
+          aria-controls=${id}
           tabindex="-1"
           ?disabled=${this.disabled || atMax}
           @click=${() => this._adjust(this.step)}
@@ -207,6 +291,11 @@ export class BdsNumberInput extends LitElement {
           </svg>
         </button>
       </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>`
+          : ''}
     `;
   }
 }