fix: reactive translations

.changeset/pretty-bears-kneel.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/components': patch
+---
+
+Make sd-select and sd-combobox placeholders translatable.

packages/components/src/components/combobox/combobox.test.ts

@@ -1283,4 +1283,20 @@ describe.skip('<sd-combobox>', () => {
 
     expect(el.value).to.equal('Option 2');
   });
+
+  it('should display translated placeholder if lang attribute is set', async () => {
+    const el = await fixture<SdSelect>(html`
+      <sd-combobox lang="de">
+        <sd-option value="option-1">Option 1</sd-option>
+        <sd-option value="option-2">Option 2</sd-option>
+        <sd-option value="option-3">Option 3</sd-option>
+      </sd-combobox>
+    `);
+
+    const placeholder = el.shadowRoot!.querySelector('[part~="display-input"]')!;
+
+    await el.updateComplete;
+
+    expect(placeholder.getAttribute('placeholder')).to.equal('Bitte suchen und auswählen');
+  });
 });

packages/components/src/components/combobox/combobox.ts

@@ -154,7 +154,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
   @property({ reflect: true }) size: 'lg' | 'md' | 'sm' = 'lg';
 
   /** Placeholder text to show as a hint when the combobox is empty. */
-  @property() placeholder = this.localize.term('comboboxDefaultPlaceholder');
+  @property() placeholder = '';
 
   /** Disables the combobox control. */
   @property({ reflect: true, type: Boolean }) disabled = false;
@@ -1241,7 +1241,9 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
                   this.selectedTextLabel && !this.multiple ? 'placeholder-black' : 'placeholder-neutral-700'
                 )}
                 type="text"
-                placeholder=${this.selectedTextLabel && !this.multiple ? this.selectedTextLabel : this.placeholder}
+                placeholder=${this.selectedTextLabel && !this.multiple
+                  ? this.selectedTextLabel
+                  : this.placeholder || this.localize.term('comboboxDefaultPlaceholder')}
                 .disabled=${this.disabled}
                 .value=${this.displayInputValue}
                 autocomplete="off"

packages/components/src/components/select/select.test.ts

@@ -637,4 +637,22 @@ describe('<sd-select>', () => {
     expect(hideHandler).to.have.been.calledOnce;
     expect(afterHideHandler).to.have.been.calledOnce;
   });
+
+  it('should display translated placeholder and clear entry texts if lang attribute is set', async () => {
+    const el = await fixture<SdSelect>(html`
+      <sd-select lang="de" value="option-1" clearable>
+        <sd-option value="option-1">Option 1</sd-option>
+        <sd-option value="option-2">Option 2</sd-option>
+        <sd-option value="option-3">Option 3</sd-option>
+      </sd-select>
+    `);
+
+    const clearButton: HTMLButtonElement = el.shadowRoot!.querySelector('[part~="clear-button"]')!;
+    const placeholder = el.shadowRoot!.querySelector('[part~="display-input"]')!;
+
+    await el.updateComplete;
+
+    expect(placeholder.getAttribute('placeholder')).to.equal('Bitte auswählen');
+    expect(clearButton.getAttribute('aria-label')).to.equal('Eingabe löschen');
+  });
 });

packages/components/src/components/select/select.ts

@@ -132,7 +132,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
   @property() label = '';
 
   /** Placeholder text to show as a hint when the select is empty. */
-  @property() placeholder = this.localize.term('selectDefaultPlaceholder');
+  @property() placeholder = '';
 
   /** Disables the select control. */
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -990,8 +990,8 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
                   this.multiple && this.useTags && this.value.length > 0 ? 'hidden' : ''
                 )}
                 type="text"
-                placeholder=${this.placeholder}
                 .disabled=${this.disabled}
+                placeholder=${this.placeholder || this.localize.term('selectDefaultPlaceholder')}
                 .value=${this.displayLabel}
                 autocomplete="off"
                 spellcheck="false"