@dile/ui 3.18.0 → 3.18.2

package/components/input/input-mask.spec.js

@@ -1,314 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input-mask.js';
-
-describe('dile-input-mask', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputMask(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input-mask');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native text input', async () => {
-    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000 0000 0000 0000"></dile-input-mask>');
-    expect(el.shadowRoot.querySelector('input')).toBeTruthy();
-  });
-
-  it('masks input with letters and digits', async () => {
-    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000 0000 0000 0000"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    const chars = ['E', 'S', '9', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0'];
-    chars.forEach((char) => {
-      const keydownEvent = new KeyboardEvent('keydown', {
-        key: char,
-        bubbles: true,
-        cancelable: true,
-      });
-      input.dispatchEvent(keydownEvent);
-      input.value += char;
-      const inputEvent = new Event('input', { bubbles: true });
-      input.dispatchEvent(inputEvent);
-    });
-
-    await el.updateComplete;
-
-    expect(el.maskedValue).toBe('ES91 0000 0000 0000 0000');
-  });
-
-  it('validates invalid format on blur', async () => {
-    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000 0000 0000 0000"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // Try to start with a digit instead of a letter
-    input.value = '91ES0000000000000000';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    input.dispatchEvent(new Event('blur', { bubbles: true }));
-    await el.updateComplete;
-
-    expect(el.errored).toBe(true);
-    expect(el.message).toContain('expected a letter');
-  });
-
-  it('supports multiple languages for error messages', async () => {
-    // English (default)
-    const elEn = await renderInputMask('<dile-input-mask name="iban" mask="AA00" language="en"></dile-input-mask>');
-    const inputEn = elEn.shadowRoot.querySelector('input');
-    inputEn.value = '9100';
-    inputEn.dispatchEvent(new Event('input', { bubbles: true }));
-    await elEn.updateComplete;
-    inputEn.dispatchEvent(new Event('blur', { bubbles: true }));
-    await elEn.updateComplete;
-
-    expect(elEn.message).toContain('expected a letter');
-
-    // Spanish
-    const elEs = await renderInputMask('<dile-input-mask name="iban" mask="AA00" language="es"></dile-input-mask>');
-    const inputEs = elEs.shadowRoot.querySelector('input');
-    inputEs.value = '9100';
-    inputEs.dispatchEvent(new Event('input', { bubbles: true }));
-    await elEs.updateComplete;
-    inputEs.dispatchEvent(new Event('blur', { bubbles: true }));
-    await elEs.updateComplete;
-
-    expect(elEs.message).toContain('se esperaba una letra');
-
-    // French
-    const elFr = await renderInputMask('<dile-input-mask name="iban" mask="AA00" language="fr"></dile-input-mask>');
-    const inputFr = elFr.shadowRoot.querySelector('input');
-    inputFr.value = '9100';
-    inputFr.dispatchEvent(new Event('input', { bubbles: true }));
-    await elFr.updateComplete;
-    inputFr.dispatchEvent(new Event('blur', { bubbles: true }));
-    await elFr.updateComplete;
-
-    expect(elFr.message).toContain('lettre attendue');
-  });
-
-  it('allows selecting and replacing characters', async () => {
-    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // First, enter some initial value
-    const initialChars = ['E', 'S', '9', '1', '0', '0', '0', '0'];
-    initialChars.forEach((char) => {
-      input.value += char;
-      const inputEvent = new Event('input', { bubbles: true });
-      input.dispatchEvent(inputEvent);
-    });
-    await el.updateComplete;
-
-    expect(el.maskedValue).toBe('ES91 0000');
-
-    // Now simulate selecting characters at positions 3-5 (the "91") and replacing with "AB"
-    // In the masked value "ES91 0000", positions 3-5 contain "91"
-    input.value = 'ESAB 0000';
-    input.setSelectionRange(5, 5); // Cursor after the replacement
-    const inputEvent = new Event('input', { bubbles: true });
-    input.dispatchEvent(inputEvent);
-    await el.updateComplete;
-
-    // Should have replaced with AB and maintained format
-    expect(el.value).toContain('ESAB');
-    expect(el.maskedValue).toBe('ESAB 0000');
-  });
-
-  it('does not show error while typing incomplete input', async () => {
-    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA00 0000 0000 0000 0000"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // User starts typing correctly
-    input.value = 'ES91';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-
-    expect(el.errored).toBeFalsy();
-  });
-
-  it('transforms to uppercase when pattern uses A', async () => {
-    const el = await renderInputMask('<dile-input-mask name="test" mask="AA00 AA"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // User types lowercase, should transform to uppercase
-    const chars = ['e', 's', '9', '1', 'a', 'b'];
-    chars.forEach((char) => {
-      input.value += char;
-      const inputEvent = new Event('input', { bubbles: true });
-      input.dispatchEvent(inputEvent);
-    });
-
-    await el.updateComplete;
-
-    expect(el.maskedValue).toBe('ES91 AB');
-    expect(el.value).toBe('ES91AB');
-  });
-
-  it('transforms to lowercase when pattern uses a', async () => {
-    const el = await renderInputMask('<dile-input-mask name="test" mask="aa00 aa"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // User types uppercase, should transform to lowercase
-    const chars = ['E', 'S', '9', '1', 'A', 'B'];
-    chars.forEach((char) => {
-      input.value += char;
-      const inputEvent = new Event('input', { bubbles: true });
-      input.dispatchEvent(inputEvent);
-    });
-
-    await el.updateComplete;
-
-    expect(el.maskedValue).toBe('es91 ab');
-    expect(el.value).toBe('es91ab');
-  });
-
-  it('handles mixed case transformation', async () => {
-    const el = await renderInputMask('<dile-input-mask name="test" mask="AA-aa-00"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // User types: first two should be uppercase, next two lowercase, then digits
-    const chars = ['a', 'b', 'c', 'd', '1', '2'];
-    chars.forEach((char) => {
-      input.value += char;
-      const inputEvent = new Event('input', { bubbles: true });
-      input.dispatchEvent(inputEvent);
-    });
-
-    await el.updateComplete;
-
-    expect(el.maskedValue).toBe('AB-cd-12');
-    expect(el.value).toBe('ABcd12');
-  });
-
-  it('supports X pattern for alphanumeric uppercase', async () => {
-    const el = await renderInputMask('<dile-input-mask name="test" mask="XX-0000"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // X accepts both letters and digits
-    const chars = ['a', 'B', '1', '2', '3', '4'];
-    chars.forEach((char) => {
-      input.value += char;
-      const inputEvent = new Event('input', { bubbles: true });
-      input.dispatchEvent(inputEvent);
-    });
-
-    await el.updateComplete;
-
-    // Letters should be uppercase, digits unchanged
-    expect(el.maskedValue).toBe('AB-1234');
-    expect(el.value).toBe('AB1234');
-  });
-
-  it('supports x pattern for alphanumeric lowercase', async () => {
-    const el = await renderInputMask('<dile-input-mask name="test" mask="xx-0000"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // x accepts both letters and digits
-    const chars = ['A', 'b', '1', '2', '3', '4'];
-    chars.forEach((char) => {
-      input.value += char;
-      const inputEvent = new Event('input', { bubbles: true });
-      input.dispatchEvent(inputEvent);
-    });
-
-    await el.updateComplete;
-
-    // Letters should be lowercase, digits unchanged
-    expect(el.maskedValue).toBe('ab-1234');
-    expect(el.value).toBe('ab1234');
-  });
-
-  it('applies lazy separators only when next block is filled', async () => {
-    const el = await renderInputMask('<dile-input-mask name="iban" mask="AA-XXXX-0000" lazySeparators></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // Type 'ES' - should show 'ES' without trailing separator
-    input.value = 'ES';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES');
-
-    // Type 'ESW' - should show 'ES-W' (separator added when next block starts)
-    input.value = 'ESW';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES-W');
-
-    // Type 'ESWSWQ' - should show 'ES-WSWQ'
-    input.value = 'ESWSWQ';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES-WSWQ');
-
-    // Type 'ESWSWQ0' - should show 'ES-WSWQ-0' (separator added when digits block starts)
-    input.value = 'ESWSWQ0';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES-WSWQ-0');
-
-    // Type complete 'ESWSWQ0000' - should show 'ES-WSWQ-0000'
-    input.value = 'ESWSWQ0000';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES-WSWQ-0000');
-  });
-
-  it('uses normal separators by default (lazySeparators=false)', async () => {
-    const el = await renderInputMask('<dile-input-mask name="test" mask="AA-XXXX-0000"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // Type 'ES' - should show 'ES-' (separator added immediately)
-    input.value = 'ES';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES-');
-
-    // Type 'ESWSWQ0000' - separators already included
-    input.value = 'ESWSWQ0000';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES-WSWQ-0000');
-  });
-
-  it('supports lazySeparators property', async () => {
-    const el = await renderInputMask('<dile-input-mask name="test" mask="AA-XXXX-0000" lazySeparators></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // Type 'ES' - should show 'ES' without separator (lazy behavior)
-    input.value = 'ES';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES');
-
-    // Type 'ESW' - should show 'ES-W' (separator added when next block starts)
-    input.value = 'ESW';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES-W');
-  });
-
-  it('can toggle lazySeparators property dynamically', async () => {
-    const el = await renderInputMask('<dile-input-mask name="test" mask="AA-XXXX-0000"></dile-input-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // Initially with normal separators
-    input.value = 'ES';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES-');
-
-    // Toggle to lazy separators
-    el.lazySeparators = true;
-    await el.updateComplete;
-    input.value = 'ES';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-    expect(el.maskedValue).toBe('ES');
-  });
-});
-
-

package/components/input/input-message.spec.js

@@ -1,27 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input-message.js';
-
-describe('dile-input-message', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputMessage(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input-message');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders nothing when there is no message', async () => {
-    const el = await renderInputMessage('<dile-input-message></dile-input-message>');
-    expect(el.shadowRoot.querySelector('.message')).toBeNull();
-  });
-
-  it('renders the message text when set', async () => {
-    const el = await renderInputMessage('<dile-input-message message="Required"></dile-input-message>');
-    const message = el.shadowRoot.querySelector('.message span');
-    expect(message).toBeTruthy();
-    expect(message.textContent.trim()).toBe('Required');
-  });
-});

package/components/input/input-money.spec.js

@@ -1,30 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input-money.js';
-
-describe('dile-input-money', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputMoney(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input-money');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native text input with the given value', async () => {
-    const el = await renderInputMoney('<dile-input-money name="price" value="9.5"></dile-input-money>');
-    const input = el.shadowRoot.querySelector('input');
-    expect(input).toBeTruthy();
-    expect(input.value).toBe('9.5');
-  });
-
-  it('formats the value to two decimals via set()', async () => {
-    const el = await renderInputMoney('<dile-input-money name="price"></dile-input-money>');
-    el.set('9.5');
-    await el.updateComplete;
-
-    expect(el.value).toBe('9.50');
-  });
-});

package/components/input/input-number-mask.spec.js

@@ -1,48 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input-number-mask.js';
-
-describe('dile-input-number-mask', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputNumberMask(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input-number-mask');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native text input', async () => {
-    const el = await renderInputNumberMask('<dile-input-number-mask name="code" mask="00-00"></dile-input-number-mask>');
-    expect(el.shadowRoot.querySelector('input')).toBeTruthy();
-  });
-
-  it('masks digit keydowns following the given pattern', async () => {
-    const el = await renderInputNumberMask('<dile-input-number-mask name="code" mask="00-00"></dile-input-number-mask>');
-    const input = el.shadowRoot.querySelector('input');
-
-    // Simular el usuario escribiendo números: keydown + input event
-    ['1', '2', '3'].forEach((key) => {
-      // El navegador primero dispara keydown
-      const keydownEvent = new KeyboardEvent('keydown', { 
-        key, 
-        bubbles: true, 
-        cancelable: true 
-      });
-      input.dispatchEvent(keydownEvent);
-      
-      // Simular que el navegador actualiza el value del input
-      input.value += key;
-      
-      // Luego dispara input event
-      const inputEvent = new Event('input', { bubbles: true });
-      input.dispatchEvent(inputEvent);
-    });
-    
-    // Esperar a que Lit procese los cambios
-    await el.updateComplete;
-
-    expect(el.maskedValue).toBe('12-3');
-  });
-});

package/components/input/input-number.spec.js

@@ -1,109 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input-number.js';
-
-describe('dile-input-number', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputNumber(content) {
-    document.body.innerHTML = content;
-    const el = document.body.querySelector('dile-input-number');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('normalizes comma separator to dot by default', async () => {
-    const el = await renderInputNumber('<dile-input-number name="amount"></dile-input-number>');
-    const input = el.shadowRoot.querySelector('input');
-
-    input.value = '12,75';
-    input.dispatchEvent(new Event('input'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('12.75');
-    expect(input.value).toBe('12.75');
-  });
-
-  it('normalizes dot separator to comma when configured', async () => {
-    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator=","></dile-input-number>');
-    const input = el.shadowRoot.querySelector('input');
-
-    input.value = '12.75';
-    input.dispatchEvent(new Event('input'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('12.75');
-    expect(input.value).toBe('12,75');
-  });
-
-  it('applies min, max and decimals on blur', async () => {
-    const el = await renderInputNumber('<dile-input-number name="amount" min="1" max="10" decimals="2"></dile-input-number>');
-    const input = el.shadowRoot.querySelector('input');
-
-    input.value = '10.987';
-    input.dispatchEvent(new Event('blur'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('10.00');
-    expect(input.value).toBe('10.00');
-  });
-
-  it('applies step rounding and decimal separator formatting on blur', async () => {
-    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator="," step="0.25" decimals="2"></dile-input-number>');
-    const input = el.shadowRoot.querySelector('input');
-
-    input.value = '1.37';
-    input.dispatchEvent(new Event('blur'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('1.25');
-    expect(input.value).toBe('1,25');
-  });
-
-  it('normalizes separator only on blur when normalizeOn is blur', async () => {
-    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator="," normalizeOn="blur"></dile-input-number>');
-    const input = el.shadowRoot.querySelector('input');
-
-    input.dispatchEvent(new Event('focus'));
-    input.value = '12.75';
-    input.dispatchEvent(new Event('input'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('12.75');
-    expect(input.value).toBe('12.75');
-
-    input.dispatchEvent(new Event('blur'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('12.75');
-    expect(input.value).toBe('12,75');
-  });
-
-  it('falls back to input normalization when normalizeOn is invalid', async () => {
-    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator="," normalizeOn="foo"></dile-input-number>');
-    const input = el.shadowRoot.querySelector('input');
-
-    await el.updateComplete;
-    expect(el.normalizeOn).toBe('input');
-
-    input.value = '12.75';
-    input.dispatchEvent(new Event('input'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('12.75');
-    expect(input.value).toBe('12,75');
-  });
-
-  it('keeps canonical value when normalizeOn fallback applies', async () => {
-    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator="," normalizeOn="foo"></dile-input-number>');
-    const input = el.shadowRoot.querySelector('input');
-
-    input.value = '8,5';
-    input.dispatchEvent(new Event('input'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('8.5');
-    expect(input.value).toBe('8,5');
-  });
-});

package/components/input/input-percentage.spec.js

@@ -1,31 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input-percentage.js';
-
-describe('dile-input-percentage', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputPercentage(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input-percentage');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native text input with the given value and a % label', async () => {
-    const el = await renderInputPercentage('<dile-input-percentage name="rate" value="10"></dile-input-percentage>');
-    const input = el.shadowRoot.querySelector('input');
-    expect(input).toBeTruthy();
-    expect(input.value).toBe('10');
-    expect(el.shadowRoot.querySelector('.labelright').textContent.trim()).toBe('%');
-  });
-
-  it('formats the value as a float via doFormat()', async () => {
-    const el = await renderInputPercentage('<dile-input-percentage name="rate" value="10.5"></dile-input-percentage>');
-    el.doFormat();
-    await el.updateComplete;
-
-    expect(el.value).toBe(10.5);
-  });
-});

package/components/input/input-search.spec.js

@@ -1,91 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input-search.js';
-
-describe('dile-input-search', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputSearch(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input-search');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native search input and a search icon', async () => {
-    const el = await renderInputSearch('<dile-input-search placeholder="Search..."></dile-input-search>');
-    const input = el.shadowRoot.querySelector('input');
-    expect(input).toBeTruthy();
-    expect(input.placeholder).toBe('Search...');
-    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
-  });
-
-  it('renders the input as a search field with browser and password manager autofill disabled', async () => {
-    const el = await renderInputSearch('<dile-input-search></dile-input-search>');
-    const input = el.shadowRoot.querySelector('input');
-    expect(input.type).toBe('search');
-    expect(input.getAttribute('autocomplete')).toBe('off');
-    expect(input.hasAttribute('data-1p-ignore')).toBe(true);
-    expect(input.getAttribute('data-lpignore')).toBe('true');
-    expect(input.getAttribute('data-form-type')).toBe('other');
-  });
-
-  it('does not show an empty error box when errored without error slot content', async () => {
-    const el = await renderInputSearch('<dile-input-search errored></dile-input-search>');
-
-    const errorMessage = el.shadowRoot.getElementById('error-msg');
-    expect(errorMessage.hidden).toBe(true);
-    expect(errorMessage.getBoundingClientRect().height).toBe(0);
-    // Only the search box itself gets the bordered box styles
-    expect(getComputedStyle(errorMessage).borderTopStyle).toBe('none');
-  });
-
-  it('shows the error slot content when errored', async () => {
-    const el = await renderInputSearch('<dile-input-search errored><span slot="error">Wrong search</span></dile-input-search>');
-    await el.updateComplete;
-
-    const errorMessage = el.shadowRoot.getElementById('error-msg');
-    expect(errorMessage.hidden).toBe(false);
-    expect(el.shadowRoot.querySelector('input').getAttribute('aria-describedby')).toBe('error-msg');
-  });
-
-  it('labels the button in English by default, with configurable texts', async () => {
-    const el = await renderInputSearch('<dile-input-search></dile-input-search>');
-    const button = el.shadowRoot.querySelector('button');
-    expect(button.getAttribute('aria-label')).toBe('Search');
-    expect(el.shadowRoot.querySelector('input').getAttribute('aria-label')).toBe('Search');
-
-    el.value = 'lit';
-    await el.updateComplete;
-    expect(button.getAttribute('aria-label')).toBe('Clear search');
-
-    el.clearButtonLabel = 'Limpiar búsqueda';
-    await el.updateComplete;
-    expect(button.getAttribute('aria-label')).toBe('Limpiar búsqueda');
-  });
-
-  it('uses accessibleLabel as aria-label, falling back to name', async () => {
-    const named = await renderInputSearch('<dile-input-search name="Products"></dile-input-search>');
-    expect(named.shadowRoot.querySelector('input').getAttribute('aria-label')).toBe('Products');
-
-    const labelled = await renderInputSearch('<dile-input-search name="Products" accessibleLabel="Search products"></dile-input-search>');
-    expect(labelled.shadowRoot.querySelector('input').getAttribute('aria-label')).toBe('Search products');
-  });
-
-  it('updates the value on input and dispatches dile-input-search after the delay', async () => {
-    const el = await renderInputSearch('<dile-input-search delay="10"></dile-input-search>');
-    const input = el.shadowRoot.querySelector('input');
-    let detail = null;
-    el.addEventListener('dile-input-search', (e) => { detail = e.detail; });
-
-    input.value = 'lit';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-
-    expect(el.value).toBe('lit');
-
-    await new Promise((resolve) => setTimeout(resolve, 30));
-    expect(detail).toEqual({ keyword: 'lit' });
-  });
-});