@dile/ui 3.18.0 → 3.18.1

package/components/input/input.spec.js

@@ -1,47 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input.js';
-
-describe('dile-input', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInput(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native text input with the given value', async () => {
-    const el = await renderInput('<dile-input name="first" value="hello"></dile-input>');
-    const input = el.shadowRoot.querySelector('input');
-    expect(input).toBeTruthy();
-    expect(input.value).toBe('hello');
-  });
-
-  it('renders the label when set', async () => {
-    const el = await renderInput('<dile-input label="First name"></dile-input>');
-    const label = el.shadowRoot.querySelector('label');
-    expect(label).toBeTruthy();
-    expect(label.textContent.trim()).toBe('First name');
-  });
-
-  it('updates the value property on user input', async () => {
-    const el = await renderInput('<dile-input name="first"></dile-input>');
-    const input = el.shadowRoot.querySelector('input');
-    input.value = 'typed';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await el.updateComplete;
-
-    expect(el.value).toBe('typed');
-  });
-
-  it('renders a message when the message property is set', async () => {
-    const el = await renderInput('<dile-input></dile-input>');
-    el.message = 'Required field';
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('.message span').textContent.trim()).toBe('Required field');
-  });
-});

package/components/light-mode-switch/light-mode-switch.spec.js

@@ -1,34 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './light-mode-switch.js';
-
-describe('dile-light-mode-switch', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-    localStorage.removeItem('dile_light_mode_switch_state');
-    document.documentElement.classList.remove('dark-theme');
-  });
-
-  async function renderLightModeSwitch(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-light-mode-switch');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders an icon and a switch', async () => {
-    const el = await renderLightModeSwitch('<dile-light-mode-switch></dile-light-mode-switch>');
-    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('dile-switch')).toBeTruthy();
-  });
-
-  it('toggles darkMode and reflects the attribute', async () => {
-    const el = await renderLightModeSwitch('<dile-light-mode-switch></dile-light-mode-switch>');
-    const initial = el.darkMode;
-
-    el.toggle();
-    await el.updateComplete;
-
-    expect(el.darkMode).toBe(!initial);
-    expect(el.hasAttribute('darkMode')).toBe(!initial);
-  });
-});

package/components/menu-hamburger/menu-hamburger.spec.js

@@ -1,34 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './menu-hamburger.js';
-
-describe('dile-menu-hamburger', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderMenuHamburger(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-menu-hamburger');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a hamburger and a drawer, closed by default', async () => {
-    const el = await renderMenuHamburger('<dile-menu-hamburger><nav slot="menu">Links</nav></dile-menu-hamburger>');
-    expect(el.opened).toBe(false);
-    expect(el.shadowRoot.querySelector('dile-hamburger')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('dile-app-drawer')).toBeTruthy();
-  });
-
-  it('opens on toggle and dispatches dile-menu-hamburger-opened', async () => {
-    const el = await renderMenuHamburger('<dile-menu-hamburger><nav slot="menu">Links</nav></dile-menu-hamburger>');
-    let opened = false;
-    el.addEventListener('dile-menu-hamburger-opened', () => { opened = true; });
-
-    el.toggle();
-    await el.updateComplete;
-
-    expect(el.opened).toBe(true);
-    expect(opened).toBe(true);
-  });
-});

package/components/menu-overlay/menu-overlay.spec.js

@@ -1,44 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './menu-overlay.js';
-
-describe('dile-menu-overlay', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderMenuOverlay(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-menu-overlay');
-    await el.updateComplete;
-    return el;
-  }
-
-  function wait(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  it('renders the trigger and content slots', async () => {
-    const el = await renderMenuOverlay(`
-      <dile-menu-overlay>
-        <button slot="trigger">Open</button>
-        <div slot="content">Menu content</div>
-      </dile-menu-overlay>
-    `);
-    expect(el.shadowRoot.getElementById('trigger')).toBeTruthy();
-    expect(el.shadowRoot.getElementById('overlay')).toBeTruthy();
-  });
-
-  it('opens the overlay when the trigger is clicked', async () => {
-    const el = await renderMenuOverlay(`
-      <dile-menu-overlay>
-        <button slot="trigger">Open</button>
-        <div slot="content">Menu content</div>
-      </dile-menu-overlay>
-    `);
-
-    el.shadowRoot.getElementById('trigger').click();
-    await wait(100);
-
-    expect(el.shadowRoot.getElementById('overlay').classList.contains('opened')).toBe(true);
-  });
-});

package/components/message/message.spec.js

@@ -1,42 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './message.js';
-
-describe('dile-message', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderMessage(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-message');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders closed by default with a close icon', async () => {
-    const el = await renderMessage('<dile-message></dile-message>');
-    expect(el.opened).toBe(false);
-    expect(el.shadowRoot.querySelector('dile-icon.icon')).toBeTruthy();
-  });
-
-  it('opens and shows the message text via openMessage()', async () => {
-    const el = await renderMessage('<dile-message></dile-message>');
-    el.openMessage('Saved successfully');
-    await el.updateComplete;
-
-    expect(el.opened).toBe(true);
-    expect(el.shadowRoot.querySelector('.content').textContent.trim()).toBe('Saved successfully');
-  });
-
-  it('dispatches dile-message-closed-by-user when the close icon is clicked', async () => {
-    const el = await renderMessage('<dile-message opened></dile-message>');
-    let closed = false;
-    el.addEventListener('dile-message-closed-by-user', () => { closed = true; });
-
-    el.shadowRoot.querySelector('dile-icon.icon').click();
-    await el.updateComplete;
-
-    expect(closed).toBe(true);
-    expect(el.opened).toBe(false);
-  });
-});

package/components/modal/modal-help.spec.js

@@ -1,32 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './modal-help.js';
-
-describe('dile-modal-help', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderModalHelp(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-modal-help');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a trigger button with the default label and a closed inner modal', async () => {
-    const el = await renderModalHelp('<dile-modal-help>Help content</dile-modal-help>');
-    const button = el.shadowRoot.querySelector('dile-button-icon');
-    expect(button).toBeTruthy();
-    expect(button.textContent.trim()).toBe('Help');
-    expect(el.elmodal.opened).toBe(false);
-  });
-
-  it('opens the inner modal on open()', async () => {
-    const el = await renderModalHelp('<dile-modal-help title="Info">Help content</dile-modal-help>');
-    el.open();
-    await el.elmodal.updateComplete;
-
-    expect(el.elmodal.opened).toBe(true);
-    expect(el.shadowRoot.querySelector('h1').textContent.trim()).toBe('Info');
-  });
-});

package/components/modal/modal.spec.js

@@ -1,250 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './modal.js';
-
-describe('dile-modal', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderModal(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-modal');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders closed by default with slotted content', async () => {
-    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
-    expect(el.opened).toBe(false);
-    expect(el.textContent.trim()).toBe('Modal content');
-    expect(el.shadowRoot.querySelector('section').classList.contains('opaque')).toBe(false);
-  });
-
-  it('opens the modal via open()', async () => {
-    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
-    el.open();
-    await el.updateComplete;
-
-    expect(el.opened).toBe(true);
-    expect(el.shadowRoot.querySelector('section').classList.contains('opened')).toBe(true);
-  });
-
-  it('closes and dispatches dile-modal-closed via close()', async () => {
-    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
-    el.open();
-    await el.updateComplete;
-
-    let closed = false;
-    el.addEventListener('dile-modal-closed', () => { closed = true; });
-
-    el.close();
-    await el.updateComplete;
-
-    expect(el.opened).toBe(false);
-    expect(closed).toBe(true);
-  });
-
-  it('releases the background layer immediately when the animation duration is 0s', async () => {
-    const el = await renderModal('<dile-modal style="--dile-modal-animation-duration: 0s">Modal content</dile-modal>');
-    el.open();
-    await el.updateComplete;
-
-    el.close();
-    await el.updateComplete;
-
-    const section = el.shadowRoot.querySelector('section');
-    expect(getComputedStyle(section).display).toBe('none');
-  });
-
-  it('releases the background layer after the close animation even without transitionend', async () => {
-    const el = await renderModal('<dile-modal style="--dile-modal-animation-duration: 0.1s">Modal content</dile-modal>');
-    el.open();
-    await el.updateComplete;
-
-    el.close();
-    await el.updateComplete;
-    const section = el.shadowRoot.querySelector('section');
-    expect(getComputedStyle(section).pointerEvents).toBe('none');
-
-    await new Promise((resolve) => setTimeout(resolve, 250));
-    await el.updateComplete;
-    expect(getComputedStyle(section).display).toBe('none');
-  });
-
-  it('ignores transitionend events coming from inner elements', async () => {
-    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
-    el.open();
-    await el.updateComplete;
-    el.close();
-    await el.updateComplete;
-
-    const section = el.shadowRoot.querySelector('section');
-    const content = el.shadowRoot.querySelector('.content');
-    content.dispatchEvent(new TransitionEvent('transitionend', { bubbles: true, propertyName: 'opacity' }));
-    await el.updateComplete;
-
-    expect(section.classList.contains('opened')).toBe(true);
-  });
-
-  it('dispatches dile-modal-closed and animates when the opened property is set to false', async () => {
-    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
-    el.opened = true;
-    await el.updateComplete;
-
-    let closed = false;
-    el.addEventListener('dile-modal-closed', () => { closed = true; });
-
-    el.opened = false;
-    await el.updateComplete;
-
-    expect(closed).toBe(true);
-    expect(el.shadowRoot.querySelector('section').classList.contains('opened')).toBe(true);
-  });
-
-  it('opens and closes through the opened attribute', async () => {
-    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
-    let closed = false;
-    el.addEventListener('dile-modal-closed', () => { closed = true; });
-
-    el.setAttribute('opened', '');
-    await el.updateComplete;
-    expect(el.opened).toBe(true);
-
-    el.removeAttribute('opened');
-    await el.updateComplete;
-    expect(el.opened).toBe(false);
-    expect(closed).toBe(true);
-  });
-
-  it('reflects the opened property to the attribute', async () => {
-    const el = await renderModal('<dile-modal opened>Modal content</dile-modal>');
-    el.close();
-    await el.updateComplete;
-    expect(el.hasAttribute('opened')).toBe(false);
-
-    el.setAttribute('opened', '');
-    await el.updateComplete;
-    expect(el.opened).toBe(true);
-  });
-
-  it('closes a blocking modal when Esc is pressed', async () => {
-    const el = await renderModal('<dile-modal blocking>Modal content</dile-modal>');
-    el.open();
-    await el.updateComplete;
-
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    await el.updateComplete;
-
-    expect(el.opened).toBe(false);
-  });
-
-  it('closes only the topmost modal when Esc is pressed', async () => {
-    document.body.innerHTML = '<dile-modal id="first">First</dile-modal><dile-modal id="second">Second</dile-modal>';
-    const first = document.getElementById('first');
-    const second = document.getElementById('second');
-    await first.updateComplete;
-    await second.updateComplete;
-    first.open();
-    second.open();
-
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    expect(second.opened).toBe(false);
-    expect(first.opened).toBe(true);
-
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    expect(first.opened).toBe(false);
-  });
-
-  it('exposes the content as an accessible modal dialog', async () => {
-    const el = await renderModal('<dile-modal label="Settings">Modal content</dile-modal>');
-    const dialog = el.shadowRoot.querySelector('[role="dialog"]');
-
-    expect(dialog).not.toBeNull();
-    expect(dialog.getAttribute('aria-modal')).toBe('true');
-    expect(dialog.getAttribute('aria-label')).toBe('Settings');
-  });
-
-  it('renders the close icon as an accessible button', async () => {
-    const el = await renderModal('<dile-modal showCloseIcon closeLabel="Cerrar">Modal content</dile-modal>');
-    el.open();
-    await el.updateComplete;
-
-    const button = el.shadowRoot.querySelector('button.closebutton');
-    expect(button.getAttribute('aria-label')).toBe('Cerrar');
-
-    button.click();
-    expect(el.opened).toBe(false);
-  });
-
-  it('moves the focus into the modal and restores it on close', async () => {
-    document.body.innerHTML = '<button id="opener">Open</button><dile-modal>Modal content</dile-modal>';
-    const opener = document.getElementById('opener');
-    const el = document.querySelector('dile-modal');
-    await el.updateComplete;
-
-    opener.focus();
-    el.open();
-    await el.updateComplete;
-    expect(el.shadowRoot.activeElement).toBe(el.shadowRoot.querySelector('.content'));
-
-    el.close();
-    expect(document.activeElement).toBe(opener);
-  });
-
-  it('keeps the focus on content focused by the user when opening', async () => {
-    const el = await renderModal('<dile-modal><input id="field"></dile-modal>');
-    const field = document.getElementById('field');
-
-    el.open();
-    await el.updateComplete;
-    field.focus();
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    expect(document.activeElement).toBe(field);
-  });
-
-  it('dispatches dile-modal-opened when opened', async () => {
-    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
-    let opened = false;
-    el.addEventListener('dile-modal-opened', () => { opened = true; });
-
-    el.open();
-    expect(opened).toBe(true);
-  });
-
-  it('becomes opaque after opening', async () => {
-    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
-    el.open();
-    await el.updateComplete;
-
-    const section = el.shadowRoot.querySelector('section');
-    await expect.poll(() => section.classList.contains('opaque')).toBe(true);
-  });
-
-  it('locks the page scroll while any modal is opened', async () => {
-    document.body.innerHTML = '<dile-modal id="first">First</dile-modal><dile-modal id="second">Second</dile-modal>';
-    const first = document.getElementById('first');
-    const second = document.getElementById('second');
-    await second.updateComplete;
-    const root = document.documentElement;
-
-    first.open();
-    second.open();
-    expect(root.style.overflow).toBe('hidden');
-
-    second.close();
-    expect(root.style.overflow).toBe('hidden');
-
-    first.close();
-    expect(root.style.overflow).toBe('');
-  });
-
-  it('unlocks the page scroll when an opened modal is removed from the document', async () => {
-    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
-    el.open();
-    expect(document.documentElement.style.overflow).toBe('hidden');
-
-    el.remove();
-    expect(document.documentElement.style.overflow).toBe('');
-  });
-});

package/components/nav/nav.spec.js

@@ -1,33 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './nav.js';
-
-describe('dile-nav', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderNav(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-nav');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the menu, title and actions slots', async () => {
-    const el = await renderNav(`
-      <dile-nav>
-        <span slot="title">My App</span>
-      </dile-nav>
-    `);
-
-    expect(el.shadowRoot.querySelector('slot[name="menu"]')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('slot[name="title"]')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('slot[name="actions"]')).toBeTruthy();
-    expect(el.menu).toBe('left');
-  });
-
-  it('reflects the menu property as an attribute', async () => {
-    const el = await renderNav('<dile-nav menu="right"></dile-nav>');
-    expect(el.getAttribute('menu')).toBe('right');
-  });
-});

package/components/number-picker/number-picker-element.spec.js

@@ -1,30 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './number-picker-element.js';
-
-describe('dile-number-picker-element', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderNumberPickerElement(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-number-picker-element');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders an input and increment/decrement icons', async () => {
-    const el = await renderNumberPickerElement('<dile-number-picker-element value="3"></dile-number-picker-element>');
-
-    expect(el.shadowRoot.querySelector('input')).toBeTruthy();
-    expect(el.shadowRoot.querySelectorAll('dile-icon').length).toBe(2);
-  });
-
-  it('increments the value when calling increment()', async () => {
-    const el = await renderNumberPickerElement('<dile-number-picker-element value="3" step="1"></dile-number-picker-element>');
-    el.increment();
-    await el.updateComplete;
-
-    expect(el.value).toBe('4');
-  });
-});

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

@@ -1,30 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './number-picker.js';
-
-describe('dile-number-picker', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderNumberPicker(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-number-picker');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders an inner dile-number-picker-element with the given value', async () => {
-    const el = await renderNumberPicker('<dile-number-picker name="qty" value="5"></dile-number-picker>');
-
-    const inner = el.shadowRoot.querySelector('dile-number-picker-element');
-    expect(inner).toBeTruthy();
-    expect(el.value).toBe('5');
-  });
-
-  it('renders the label when set', async () => {
-    const el = await renderNumberPicker('<dile-number-picker label="Quantity"></dile-number-picker>');
-    const label = el.shadowRoot.querySelector('label');
-    expect(label).toBeTruthy();
-    expect(label.textContent.trim()).toBe('Quantity');
-  });
-});

package/components/order-switch/order-switch.spec.js

@@ -1,57 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './order-switch.js';
-
-describe('dile-order-switch', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderOrderSwitch(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-order-switch');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('defaults to ascending order', async () => {
-    const el = await renderOrderSwitch('<dile-order-switch label="Name"></dile-order-switch>');
-
-    expect(el.value).toBe('asc');
-    expect(el.shadowRoot.querySelector('dile-button-icon')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('a').textContent.trim()).toBe('Name');
-  });
-
-  it('toggles between asc and desc', async () => {
-    const el = await renderOrderSwitch('<dile-order-switch></dile-order-switch>');
-    el.toggle();
-    await el.updateComplete;
-
-    expect(el.value).toBe('desc');
-  });
-
-  it('clicking the label re-announces the current value without toggling when not selected', async () => {
-    const el = await renderOrderSwitch('<dile-order-switch name="name" label="Name" value="asc"></dile-order-switch>');
-
-    let receivedDetail = null;
-    el.addEventListener('element-changed', (e) => { receivedDetail = e.detail; });
-
-    el.shadowRoot.querySelector('a').click();
-    await el.updateComplete;
-
-    expect(el.value).toBe('asc'); // unchanged
-    expect(receivedDetail).toEqual({ name: 'name', value: 'asc' });
-  });
-
-  it('clicking the label toggles the order when selected', async () => {
-    const el = await renderOrderSwitch('<dile-order-switch name="name" label="Name" value="asc" selected></dile-order-switch>');
-
-    let receivedDetail = null;
-    el.addEventListener('element-changed', (e) => { receivedDetail = e.detail; });
-
-    el.shadowRoot.querySelector('a').click();
-    await el.updateComplete;
-
-    expect(el.value).toBe('desc'); // toggled
-    expect(receivedDetail).toEqual({ name: 'name', value: 'desc' });
-  });
-});