@boostdev/design-system-components 2.15.0 → 2.16.0

package/src/web-components/interaction/form/BdsSegmentedControl.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsSegmentedControl.stories';
 
 Form-associated segmented control. Renders a group of radio buttons (or anchor links) styled as a unified segmented bar. Supports two visual variants: `outline` (sliding inset-border indicator) and `filled` (sliding filled thumb).
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/interaction/form/BdsSegmentedControl.stories.tsx

@@ -45,7 +45,7 @@ function BdsSegmentedControl({
 const meta = {
   title: 'Web Components/Form/SegmentedControl',
   component: BdsSegmentedControl,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     variant: { control: 'select', options: ['outline', 'filled'] },

package/src/web-components/interaction/form/BdsSelect.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsSelect.stories';
 
 Form-associated select custom element. Wraps a native `<select>` with consistent styling. Options are passed as a JSON attribute because slotting `<option>` elements into shadow DOM is not supported cross-browser.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -82,6 +82,10 @@ When `label` is omitted, set `aria-label` on the host element (`<bds-select aria
 ></bds-select>
 ```
 
+## Error state
+
+With `error`, the message gets a warning icon and the field ring widens to `--bdc-outline_width--error` (2px). Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.
+
 ## Accessibility
 
 - Wraps a native `<select>` which has full browser and assistive technology support

package/src/web-components/interaction/form/BdsSelect.stories.tsx

@@ -54,7 +54,7 @@ function BdsSelect({
 const meta = {
   title: 'Web Components/Form/Select',
   component: BdsSelect,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     required: { control: 'boolean' },

package/src/web-components/interaction/form/BdsSlider.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsSlider.stories';
 
 Form-associated range slider. Wraps a native `<input type="range">` with a styled fill track driven by the `--slider_fill` CSS custom property, plus label/hint/error wiring matching the other form web components.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -84,6 +84,10 @@ Use `<bds-slider>` for continuous or stepped numeric ranges — volume controls,
 <bds-slider name="volume" label="Volume" value="50" min="0" max="100" step="5" show-value></bds-slider>
 ```
 
+## Error state
+
+With `error`, the message gets a warning icon. Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.
+
 ## Accessibility
 
 - Wraps a native `<input type="range">` which has full browser and assistive technology support

package/src/web-components/interaction/form/BdsSlider.stories.tsx

@@ -42,7 +42,7 @@ function BdsSlider({
 const meta = {
   title: 'Web Components/Form/Slider',
   component: BdsSlider,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     value: { control: 'number' },

package/src/web-components/interaction/form/BdsSwitch.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsSwitch.stories';
 
 Form-associated toggle switch. Visually a sliding toggle but semantically equivalent to a checkbox (`role="switch"`). Participates in HTML forms via the Form-Associated Custom Elements API.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -89,6 +89,10 @@ Use `<bds-switch>` for binary on/off settings where the change takes immediate e
 | `--switch_border-color--error` | `var(--bds-color_error)`               | Track border colour when `error` is set   |
 | `--switch_shadow`              | `var(--bdc-outline_shadow)`            | Track box-shadow tail                     |
 
+## Error state
+
+With `error`, the track ring widens to `--bdc-outline_width--error` (2px). Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.
+
 ## Accessibility
 
 - Uses `role="switch"` on the inner `<input type="checkbox">` for correct screen reader announcement

package/src/web-components/interaction/form/BdsSwitch.stories.tsx

@@ -39,7 +39,7 @@ function BdsSwitch({
 const meta = {
   title: 'Web Components/Form/Switch',
   component: BdsSwitch,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     checked: { control: 'boolean' },

package/src/web-components/interaction/form/BdsTextarea.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsTextarea.stories';
 
 Form-associated multiline text input. Wraps a native `<textarea>` with consistent styling while participating in HTML forms via the Form-Associated Custom Elements API.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 
@@ -88,6 +88,10 @@ Use `<bds-textarea>` for multiline text entry — messages, comments, descriptio
 <bds-textarea name="feedback" label="Feedback" error="Feedback is required"></bds-textarea>
 ```
 
+## Error state
+
+With `error`, the message gets a warning icon and the field ring widens to `--bdc-outline_width--error` (2px). Message hooks (`--formMessage_*`: font-size, gap, icon-size, color--error, font-weight--error, color--hint, font-style--hint) are listed on `<bds-form-input>`.
+
 ## Accessibility
 
 - Wraps a native `<textarea>` which has full browser and assistive technology support

package/src/web-components/interaction/form/BdsTextarea.stories.tsx

@@ -39,7 +39,7 @@ function BdsTextarea({
 const meta = {
   title: 'Web Components/Form/Textarea',
   component: BdsTextarea,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     rows: { control: 'number' },

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

@@ -137,9 +137,9 @@ describe('bds-checkbox-group', () => {
   });
 
   it('uses medium font-weight token for the legend (not semibold)', () => {
-    const styles = BdsCheckboxGroup.styles.toString();
-    expect(styles).toContain('--bds-font_weight--medium');
-    expect(styles).not.toContain('--bds-font_weight--semibold');
+    const legendRule = BdsCheckboxGroup.styles.toString().match(/\.legend \{[^}]*\}/)?.[0] ?? '';
+    expect(legendRule).toContain('--bds-font_weight--medium');
+    expect(legendRule).not.toContain('--bds-font_weight--semibold');
   });
 
   it('uses the on-bg error color token for the error message (not the raw error token)', () => {
@@ -151,4 +151,33 @@ describe('bds-checkbox-group', () => {
     const styles = BdsCheckboxGroup.styles.toString();
     expect(styles).toContain(':host([disabled])');
   });
+
+  it('shows the error icon in the message', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test" error="Required field"></bds-checkbox-group>');
+    const message = el.shadowRoot!.querySelector('.message--error')!;
+    expect(message.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true');
+    expect(message.textContent).toContain('Required field');
+    cleanup(el);
+  });
+
+  it('propagates error to slotted bds-checkbox elements', async () => {
+    const el = await fixture(
+      '<bds-checkbox-group label="Test" error="Required field"><bds-checkbox value="a">A</bds-checkbox><bds-checkbox value="b">B</bds-checkbox></bds-checkbox-group>',
+    );
+    const children = Array.from(el.querySelectorAll('bds-checkbox'));
+    expect(children.every(child => child.hasAttribute('error'))).toBe(true);
+    cleanup(el);
+  });
+
+  it('removes propagated error when the group error clears, keeping an individual error', async () => {
+    const el = await fixture(
+      '<bds-checkbox-group label="Test" error="Required field"><bds-checkbox value="a">A</bds-checkbox><bds-checkbox value="b" error>B</bds-checkbox></bds-checkbox-group>',
+    ) as BdsCheckboxGroup;
+    el.error = undefined;
+    await el.updateComplete;
+    const [first, second] = Array.from(el.querySelectorAll('bds-checkbox'));
+    expect(first.hasAttribute('error')).toBe(false);
+    expect(second.hasAttribute('error')).toBe(true);
+    cleanup(el);
+  });
 });

package/src/web-components/interaction/form/bds-checkbox-group.ts

@@ -1,4 +1,5 @@
 import { LitElement, css, html, nothing } from 'lit';
+import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 /**
  * `<bds-checkbox-group>` — groups related checkboxes with a shared label.
@@ -96,19 +97,10 @@ export class BdsCheckboxGroup extends LitElement {
       gap: var(--bds-space_xs);
     }
 
+    ${fieldMessageStyles}
+
     .message {
       margin-block-start: var(--bds-space_xs);
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-    }
-
-    .message--error {
-      color: var(--bds-color_error_on-bg);
-    }
-
-    .message--hint {
-      color: var(--bds-color_on-bg--subtle);
-      font-style: italic;
     }
   `;
 
@@ -156,16 +148,40 @@ export class BdsCheckboxGroup extends LitElement {
     });
   };
 
+  /**
+   * Propagates the group's `error` to slotted `<bds-checkbox>` elements so they
+   * show the error ring. A checkbox individually marked `error` in markup keeps it.
+   */
+  private _propagateError = () => {
+    this.querySelectorAll('bds-checkbox').forEach(checkbox => {
+      const el = checkbox as HTMLElement;
+      if (this.error) {
+        if (!el.hasAttribute('error')) {
+          el.setAttribute('data-bds-group-error', '');
+        }
+        el.setAttribute('error', '');
+      } else if (el.hasAttribute('data-bds-group-error')) {
+        el.removeAttribute('error');
+        el.removeAttribute('data-bds-group-error');
+      }
+    });
+  };
+
+  private _propagateToCheckboxes = () => {
+    this._propagateDisabled();
+    this._propagateError();
+  };
+
   connectedCallback() {
     super.connectedCallback();
     // Propagate after slot content has been parsed
-    Promise.resolve().then(this._propagateDisabled);
+    Promise.resolve().then(this._propagateToCheckboxes);
   }
 
   updated(changed: Map<string, unknown>) {
     super.updated(changed);
-    if (changed.has('disabled')) {
-      this._propagateDisabled();
+    if (changed.has('disabled') || changed.has('error')) {
+      this._propagateToCheckboxes();
     }
   }
 
@@ -183,12 +199,12 @@ export class BdsCheckboxGroup extends LitElement {
             : ''}
         </legend>
         <div class="items">
-          <slot @slotchange=${this._propagateDisabled}></slot>
+          <slot @slotchange=${this._propagateToCheckboxes}></slot>
         </div>
         ${this.error
-          ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
+          ? renderFieldMessage('error', errorId, this.error)
           : this.hint
-            ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
+            ? renderFieldMessage('hint', hintId, this.hint)
             : ''}
       </fieldset>
     `;

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

@@ -103,6 +103,7 @@ export class BdsCheckbox extends LitElement {
 
     :host([error]) .input {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     label {

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

@@ -1,4 +1,5 @@
 import { LitElement, css, html, nothing } from 'lit';
+import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 export interface ComboboxOption {
   value: string;
@@ -99,10 +100,12 @@ export class BdsCombobox extends LitElement {
 
     :host([error]) .input {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     :host([error]) .input:focus {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .chevron {
@@ -176,20 +179,7 @@ export class BdsCombobox extends LitElement {
       color: var(--bds-color_on-bg--subtle);
     }
 
-    .message {
-      margin-block-start: var(--bds-space_xxs);
-      font-size: var(--bds-font_size--body--s);
-      font-family: var(--bds-font_family--body);
-    }
-
-    .message--error {
-      color: var(--bds-color_error);
-    }
-
-    .message--hint {
-      color: var(--bds-color_on-bg--subtle);
-      font-style: italic;
-    }
+    ${fieldMessageStyles}
   `;
 
   static properties = {
@@ -402,9 +392,9 @@ export class BdsCombobox extends LitElement {
         ` : ''}
       </div>
       ${this.error
-        ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
+        ? renderFieldMessage('error', errorId, this.error)
         : this.hint
-          ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
+          ? renderFieldMessage('hint', hintId, this.hint)
           : ''}
     `;
   }

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

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 /**
  * `<bds-form-input>` — form-associated text input with label, hint, and error support.
@@ -83,6 +84,7 @@ export class BdsFormInput extends LitElement {
 
     :host([error]) .wrapper {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .wrapper:focus-within {
@@ -91,6 +93,7 @@ export class BdsFormInput extends LitElement {
 
     :host([error]) .wrapper:focus-within {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .input {
@@ -140,20 +143,7 @@ export class BdsFormInput extends LitElement {
       display: none;
     }
 
-    .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;
-    }
+    ${fieldMessageStyles}
   `;
 
   static properties = {
@@ -265,8 +255,8 @@ export class BdsFormInput extends LitElement {
         />
         <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 ? renderFieldMessage('error', errorId, this.error) : ''}
+      ${this.hint ? renderFieldMessage('hint', hintId, this.hint) : ''}
     `;
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, css, html } from 'lit';
+import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 /**
  * `<bds-number-input>` — form-associated Number Input with stepper buttons.
@@ -72,6 +73,7 @@ export class BdsNumberInput extends LitElement {
 
     :host([error]) .row {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .row:focus-within {
@@ -80,6 +82,7 @@ export class BdsNumberInput extends LitElement {
 
     :host([error]) .row:focus-within {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .row:focus-within:has(:focus-visible) {
@@ -154,20 +157,7 @@ export class BdsNumberInput extends LitElement {
       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;
-    }
+    ${fieldMessageStyles}
   `;
 
   static properties = {
@@ -292,9 +282,9 @@ export class BdsNumberInput extends LitElement {
         </button>
       </div>
       ${this.error
-        ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
+        ? renderFieldMessage('error', errorId, this.error)
         : this.hint
-          ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
+          ? renderFieldMessage('hint', hintId, this.hint)
           : ''}
     `;
   }

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

@@ -112,8 +112,37 @@ describe('bds-radio-group', () => {
   });
 
   it('uses medium font-weight token for the legend (not semibold)', () => {
-    const styles = BdsRadioGroup.styles.toString();
-    expect(styles).toContain('--bds-font_weight--medium');
-    expect(styles).not.toContain('--bds-font_weight--semibold');
+    const legendRule = BdsRadioGroup.styles.toString().match(/\.legend \{[^}]*\}/)?.[0] ?? '';
+    expect(legendRule).toContain('--bds-font_weight--medium');
+    expect(legendRule).not.toContain('--bds-font_weight--semibold');
+  });
+
+  it('shows the error icon in the message', async () => {
+    const el = await fixture('<bds-radio-group label="Test" error="Required field"></bds-radio-group>');
+    const message = el.shadowRoot!.querySelector('.message--error')!;
+    expect(message.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true');
+    expect(message.textContent).toContain('Required field');
+    cleanup(el);
+  });
+
+  it('propagates error to slotted bds-radio elements', async () => {
+    const el = await fixture(
+      '<bds-radio-group label="Test" error="Required field"><bds-radio value="a">A</bds-radio><bds-radio value="b">B</bds-radio></bds-radio-group>',
+    );
+    const children = Array.from(el.querySelectorAll('bds-radio'));
+    expect(children.every(child => child.hasAttribute('error'))).toBe(true);
+    cleanup(el);
+  });
+
+  it('removes propagated error when the group error clears, keeping an individual error', async () => {
+    const el = await fixture(
+      '<bds-radio-group label="Test" error="Required field"><bds-radio value="a">A</bds-radio><bds-radio value="b" error>B</bds-radio></bds-radio-group>',
+    ) as BdsRadioGroup;
+    el.error = undefined;
+    await el.updateComplete;
+    const [first, second] = Array.from(el.querySelectorAll('bds-radio'));
+    expect(first.hasAttribute('error')).toBe(false);
+    expect(second.hasAttribute('error')).toBe(true);
+    cleanup(el);
   });
 });

package/src/web-components/interaction/form/bds-radio-group.ts

@@ -1,4 +1,5 @@
 import { LitElement, css, html, nothing } from 'lit';
+import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 /**
  * `<bds-radio-group>` — groups related radio buttons with a shared label and name.
@@ -67,19 +68,10 @@ export class BdsRadioGroup extends LitElement {
       gap: var(--bds-space_xs);
     }
 
+    ${fieldMessageStyles}
+
     .message {
       margin-block-start: var(--bds-space_xs);
-      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;
     }
   `;
 
@@ -136,9 +128,29 @@ export class BdsRadioGroup extends LitElement {
     });
   };
 
+  /**
+   * Propagates the group's `error` to slotted `<bds-radio>` elements so they show
+   * the error ring. A radio individually marked `error` in markup keeps it.
+   */
+  private _propagateError = () => {
+    this.querySelectorAll('bds-radio').forEach(radio => {
+      const el = radio as HTMLElement;
+      if (this.error) {
+        if (!el.hasAttribute('error')) {
+          el.setAttribute('data-bds-group-error', '');
+        }
+        el.setAttribute('error', '');
+      } else if (el.hasAttribute('data-bds-group-error')) {
+        el.removeAttribute('error');
+        el.removeAttribute('data-bds-group-error');
+      }
+    });
+  };
+
   private _propagateToRadios = () => {
     this._propagateName();
     this._propagateDisabled();
+    this._propagateError();
   };
 
   connectedCallback() {
@@ -149,7 +161,7 @@ export class BdsRadioGroup extends LitElement {
 
   updated(changed: Map<string, unknown>) {
     super.updated(changed);
-    if (changed.has('name') || changed.has('disabled')) {
+    if (changed.has('name') || changed.has('disabled') || changed.has('error')) {
       this._propagateToRadios();
     }
   }
@@ -173,9 +185,9 @@ export class BdsRadioGroup extends LitElement {
           <slot @slotchange=${this._propagateToRadios}></slot>
         </div>
         ${this.error
-          ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
+          ? renderFieldMessage('error', errorId, this.error)
           : this.hint
-            ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
+            ? renderFieldMessage('hint', hintId, this.hint)
             : ''}
       </fieldset>
     `;

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

@@ -103,6 +103,7 @@ export class BdsRadio extends LitElement {
 
     :host([error]) .input {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
     .textWrapper {

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

@@ -1,4 +1,5 @@
 import { LitElement, css, html, nothing } from 'lit';
+import { fieldMessageStyles, renderFieldMessage } from './field-message';
 
 export interface SelectOption {
   value: string;
@@ -110,22 +111,9 @@ export class BdsSelect extends LitElement {
 
     :host([error]) .select {
       --bdc_color: var(--bdc_color--error);
+      --bdc-outline_width: var(--bdc-outline_width--error, 2px);
     }
 
-    .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;
@@ -142,6 +130,8 @@ export class BdsSelect extends LitElement {
       inline-size: 100%;
       block-size: 100%;
     }
+
+    ${fieldMessageStyles}
   `;
 
   static properties = {
@@ -259,9 +249,9 @@ export class BdsSelect extends LitElement {
         </span>
       </div>
       ${this.error
-        ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
+        ? renderFieldMessage('error', errorId, this.error)
         : this.hint
-          ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
+          ? renderFieldMessage('hint', hintId, this.hint)
           : ''}
     `;
   }