@dile/ui 3.18.0 → 3.18.2

package/components/button/button.spec.js

@@ -1,234 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './button.js';
-
-describe('dile-button', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderButton(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-button');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the slotted content inside a native button', async () => {
-    const el = await renderButton('<dile-button>Click me</dile-button>');
-
-    expect(el.shadowRoot.querySelector('button')).toBeTruthy();
-    expect(el.textContent.trim()).toBe('Click me');
-  });
-
-  it('reflects the disabled property onto the native button', async () => {
-    const el = await renderButton('<dile-button disabled>Click me</dile-button>');
-
-    expect(el.shadowRoot.querySelector('button').disabled).toBe(true);
-  });
-
-  it('dispatches a click event when enabled', async () => {
-    const el = await renderButton('<dile-button>Click me</dile-button>');
-    let clicked = false;
-    el.addEventListener('click', () => { clicked = true; });
-
-    el.shadowRoot.querySelector('button').click();
-
-    expect(clicked).toBe(true);
-  });
-
-  it('shows a spinner icon while loading', async () => {
-    const el = await renderButton('<dile-button>Save</dile-button>');
-    expect(el.shadowRoot.querySelector('dile-spinner-icon')).toBeNull();
-
-    el.loading = true;
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('dile-spinner-icon')).toBeTruthy();
-  });
-
-  it('renders the loading spinner after the label (far right)', async () => {
-    const el = await renderButton('<dile-button loading>Save</dile-button>');
-    const children = [...el.shadowRoot.querySelector('button').children].map(n => n.tagName.toLowerCase());
-    expect(children.indexOf('dile-spinner-icon')).toBeGreaterThan(children.indexOf('slot'));
-  });
-
-  describe('icon support', () => {
-    it('does not render an icon element when no icon is provided (backwards compatible)', async () => {
-      const el = await renderButton('<dile-button>Plain</dile-button>');
-      expect(el.shadowRoot.querySelector('dile-iconlib')).toBeNull();
-    });
-
-    it('renders a dile-iconlib icon from a "family.name" string', async () => {
-      const el = await renderButton('<dile-button icon="lucide.rocket">Launch</dile-button>');
-      const icon = el.shadowRoot.querySelector('dile-iconlib');
-      expect(icon).toBeTruthy();
-      expect(icon.getAttribute('icon')).toBe('lucide.rocket');
-      expect(icon.getAttribute('aria-hidden')).toBe('true');
-    });
-
-    it('places the icon before the label by default and after it when iconPosition is "right"', async () => {
-      const el = await renderButton('<dile-button icon="lucide.rocket">Launch</dile-button>');
-      let children = [...el.shadowRoot.querySelector('button').children].map(n => n.tagName.toLowerCase());
-      expect(children.indexOf('dile-iconlib')).toBeLessThan(children.indexOf('slot'));
-
-      el.iconPosition = 'right';
-      await el.updateComplete;
-      children = [...el.shadowRoot.querySelector('button').children].map(n => n.tagName.toLowerCase());
-      expect(children.indexOf('dile-iconlib')).toBeGreaterThan(children.indexOf('slot'));
-    });
-
-    it('reads the icon position from the "icon-position" attribute', async () => {
-      const el = await renderButton('<dile-button icon="lucide.rocket" icon-position="right">Continue</dile-button>');
-      expect(el.iconPosition).toBe('right');
-      const children = [...el.shadowRoot.querySelector('button').children].map(n => n.tagName.toLowerCase());
-      expect(children.indexOf('dile-iconlib')).toBeGreaterThan(children.indexOf('slot'));
-    });
-
-    it('marks the button as having text only when the slot has content', async () => {
-      const withText = await renderButton('<dile-button icon="lucide.rocket">Launch</dile-button>');
-      expect(withText.shadowRoot.querySelector('button').classList.contains('has-text')).toBe(true);
-
-      const iconOnly = await renderButton('<dile-button icon="lucide.rocket" label="Launch"></dile-button>');
-      expect(iconOnly.shadowRoot.querySelector('button').classList.contains('has-text')).toBe(false);
-    });
-
-    it('exposes the label as the accessible name of the inner button', async () => {
-      const el = await renderButton('<dile-button icon="lucide.rocket" label="Launch rocket"></dile-button>');
-      expect(el.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe('Launch rocket');
-    });
-  });
-
-  describe('Native form submission', () => {
-    it('includes name/value in the FormData when clicked', async () => {
-      document.body.innerHTML = `
-        <form id="testForm">
-          <dile-button type="submit" name="action" value="save">Save</dile-button>
-        </form>
-      `;
-      const form = document.getElementById('testForm');
-      const el = document.body.querySelector('dile-button');
-      await el.updateComplete;
-
-      let capturedFormData = null;
-      form.addEventListener('submit', (e) => {
-        e.preventDefault();
-        capturedFormData = new FormData(form);
-      });
-
-      el.shadowRoot.querySelector('button').click();
-
-      expect(capturedFormData.get('action')).toBe('save');
-    });
-
-    it('does not submit a name/value pair when the button has no value', async () => {
-      document.body.innerHTML = `
-        <form id="testForm">
-          <dile-button type="submit" name="action">Save</dile-button>
-        </form>
-      `;
-      const form = document.getElementById('testForm');
-      const el = document.body.querySelector('dile-button');
-      await el.updateComplete;
-
-      let capturedFormData = null;
-      form.addEventListener('submit', (e) => {
-        e.preventDefault();
-        capturedFormData = new FormData(form);
-      });
-
-      el.shadowRoot.querySelector('button').click();
-
-      expect(capturedFormData.has('action')).toBe(false);
-    });
-
-    it('participates in FormData when name is set as a JS property', async () => {
-      document.body.innerHTML = `
-        <form id="testForm">
-          <dile-button type="submit" value="save">Save</dile-button>
-        </form>
-      `;
-      const form = document.getElementById('testForm');
-      const el = document.body.querySelector('dile-button');
-      el.name = 'action';
-      await el.updateComplete;
-
-      expect(el.getAttribute('name')).toBe('action');
-
-      let capturedFormData = null;
-      form.addEventListener('submit', (e) => {
-        e.preventDefault();
-        capturedFormData = new FormData(form);
-      });
-
-      el.shadowRoot.querySelector('button').click();
-
-      expect(capturedFormData.get('action')).toBe('save');
-    });
-
-    it('only includes the clicked button among two submit buttons with different values', async () => {
-      document.body.innerHTML = `
-        <form id="testForm">
-          <dile-button type="submit" name="action" value="save">Save</dile-button>
-          <dile-button type="submit" name="action" value="delete">Delete</dile-button>
-        </form>
-      `;
-      const form = document.getElementById('testForm');
-      const buttons = document.body.querySelectorAll('dile-button');
-      for (const b of buttons) await b.updateComplete;
-
-      let capturedFormData = null;
-      form.addEventListener('submit', (e) => {
-        e.preventDefault();
-        capturedFormData = new FormData(form);
-      });
-
-      buttons[1].shadowRoot.querySelector('button').click();
-
-      expect(capturedFormData.getAll('action')).toEqual(['delete']);
-    });
-
-    it('does not leak a stale value when the form is submitted again without a button click', async () => {
-      document.body.innerHTML = `
-        <form id="testForm">
-          <input name="text" value="hello" />
-          <dile-button type="submit" name="action" value="save">Save</dile-button>
-        </form>
-      `;
-      const form = document.getElementById('testForm');
-      const el = document.body.querySelector('dile-button');
-      await el.updateComplete;
-
-      let capturedFormData = null;
-      form.addEventListener('submit', (e) => {
-        e.preventDefault();
-        capturedFormData = new FormData(form);
-      });
-
-      // First submit via the button click - action=save should be present.
-      el.shadowRoot.querySelector('button').click();
-      expect(capturedFormData.get('action')).toBe('save');
-
-      // Second submit programmatically, with no submitter clicked - action should NOT leak.
-      form.requestSubmit();
-      expect(capturedFormData.get('action')).toBeNull();
-    });
-
-    it('does not submit when the button is disabled', async () => {
-      document.body.innerHTML = `
-        <form id="testForm">
-          <dile-button type="submit" name="action" value="save" disabled>Save</dile-button>
-        </form>
-      `;
-      const form = document.getElementById('testForm');
-      const el = document.body.querySelector('dile-button');
-      await el.updateComplete;
-
-      let submitted = false;
-      form.addEventListener('submit', (e) => { e.preventDefault(); submitted = true; });
-
-      el.shadowRoot.querySelector('button').click();
-
-      expect(submitted).toBe(false);
-    });
-  });
-});

package/components/card/card-slide.spec.js

@@ -1,30 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './card-slide.js';
-
-describe('dile-card-slide', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderCardSlide(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-card-slide');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the title as a toggle button', async () => {
-    const el = await renderCardSlide('<dile-card-slide title="My title">Content</dile-card-slide>');
-    const button = el.shadowRoot.querySelector('.card-title button');
-    expect(button).toBeTruthy();
-    expect(el.opened).toBe(false);
-  });
-
-  it('toggles opened state when clicked', async () => {
-    const el = await renderCardSlide('<dile-card-slide title="My title">Content</dile-card-slide>');
-    el.shadowRoot.querySelector('.card-title button').click();
-    await el.updateComplete;
-
-    expect(el.opened).toBe(true);
-  });
-});

package/components/card/card.spec.js

@@ -1,26 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './card.js';
-
-describe('dile-card', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderCard(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-card');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the title and slotted content', async () => {
-    const el = await renderCard('<dile-card title="My title">Content</dile-card>');
-    expect(el.shadowRoot.querySelector('.card-title').textContent.trim()).toBe('My title');
-    expect(el.textContent.trim()).toBe('Content');
-  });
-
-  it('does not render a title element when title is not set', async () => {
-    const el = await renderCard('<dile-card>Content</dile-card>');
-    expect(el.shadowRoot.querySelector('.card-title')).toBeNull();
-  });
-});

package/components/checkbox/checkbox.spec.js

@@ -1,235 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './checkbox.js';
-
-describe('dile-checkbox', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderCheckbox(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-checkbox');
-    await el.updateComplete;
-    return el;
-  }
-
-  function getControl(el) {
-    return el.shadowRoot.querySelector('[role="checkbox"]');
-  }
-
-  describe('Rendering', () => {
-    it('starts unchecked by default', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      expect(el.checked).toBe(false);
-      expect(getControl(el).getAttribute('aria-checked')).toBe('false');
-    });
-
-    it('renders the slotted label content', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms">Accept terms</dile-checkbox>');
-      const label = el.shadowRoot.querySelector('label.label');
-      expect(label).toBeTruthy();
-      expect(el.textContent.trim()).toBe('Accept terms');
-    });
-
-    it('does not render a label element when there is no slotted content', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      expect(el.shadowRoot.querySelector('label.label')).toBeNull();
-    });
-
-    it('renders a message when the message property is set', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      el.message = 'You must accept';
-      el.errored = true;
-      await el.updateComplete;
-
-      const message = el.shadowRoot.querySelector('dile-input-message');
-      expect(message).toBeTruthy();
-      expect(message.getAttribute('message')).toBe('You must accept');
-    });
-  });
-
-  describe('Toggling', () => {
-    it('toggles checked state on click', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      el.shadowRoot.querySelector('div').click();
-      await el.updateComplete;
-
-      expect(el.checked).toBe(true);
-    });
-
-    it('toggles checked state on Space key press', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      const control = getControl(el);
-      control.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }));
-      await el.updateComplete;
-
-      expect(el.checked).toBe(true);
-    });
-
-    it('does not toggle when disabled', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms" disabled></dile-checkbox>');
-      el.shadowRoot.querySelector('div').click();
-      await el.updateComplete;
-
-      expect(el.checked).toBe(false);
-    });
-
-    it('clears the checked state via clear()', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms" checked></dile-checkbox>');
-      expect(el.checked).toBe(true);
-
-      el.clear();
-      await el.updateComplete;
-
-      expect(el.checked).toBe(false);
-    });
-
-    it('mirrors checked through the value property', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      el.value = true;
-      await el.updateComplete;
-
-      expect(el.checked).toBe(true);
-      expect(el.value).toBe(true);
-    });
-  });
-
-  describe('Events', () => {
-    it('dispatches dile-checkbox-changed with checked and name', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      let detail = null;
-      el.addEventListener('dile-checkbox-changed', (e) => { detail = e.detail; });
-
-      el.shadowRoot.querySelector('div').click();
-      await el.updateComplete;
-
-      expect(detail).toEqual({ checked: true, name: 'terms' });
-    });
-
-    it('dispatches element-changed with name and value', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      let detail = null;
-      el.addEventListener('element-changed', (e) => { detail = e.detail; });
-
-      el.shadowRoot.querySelector('div').click();
-      await el.updateComplete;
-
-      expect(detail).toEqual({ name: 'terms', value: true });
-    });
-
-    it('clears the error state on toggle when hideErrorOnInput is set', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms" hideErrorOnInput></dile-checkbox>');
-      el.message = 'Required';
-      el.errored = true;
-      await el.updateComplete;
-
-      el.shadowRoot.querySelector('div').click();
-      await el.updateComplete;
-
-      expect(el.message).toBe('');
-      expect(el.errored).toBe(false);
-    });
-  });
-
-  describe('Native form submission', () => {
-    it('participates in FormData when name is set as an attribute', async () => {
-      document.body.innerHTML = `
-        <form id="testForm">
-          <dile-checkbox name="terms" checked></dile-checkbox>
-        </form>
-      `;
-      const el = document.body.querySelector('dile-checkbox');
-      await el.updateComplete;
-
-      const data = new FormData(document.getElementById('testForm'));
-      expect(data.get('terms')).toBe('true');
-    });
-
-    it('participates in FormData when name is set as a JS property', async () => {
-      document.body.innerHTML = `
-        <form id="testForm">
-          <dile-checkbox checked></dile-checkbox>
-        </form>
-      `;
-      const el = document.body.querySelector('dile-checkbox');
-      el.name = 'terms';
-      await el.updateComplete;
-
-      expect(el.getAttribute('name')).toBe('terms');
-
-      const data = new FormData(document.getElementById('testForm'));
-      expect(data.get('terms')).toBe('true');
-    });
-
-    it('is excluded from FormData when unchecked', async () => {
-      document.body.innerHTML = `
-        <form id="testForm">
-          <dile-checkbox name="terms"></dile-checkbox>
-        </form>
-      `;
-      const el = document.body.querySelector('dile-checkbox');
-      await el.updateComplete;
-
-      const data = new FormData(document.getElementById('testForm'));
-      expect(data.get('terms')).toBeNull();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('exposes role="checkbox" on the interactive control', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      expect(getControl(el)).toBeTruthy();
-    });
-
-    it('keeps aria-checked in sync with the checked state', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      const control = getControl(el);
-      expect(control.getAttribute('aria-checked')).toBe('false');
-
-      el.checked = true;
-      await el.updateComplete;
-
-      expect(control.getAttribute('aria-checked')).toBe('true');
-    });
-
-    it('is keyboard focusable when enabled', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      const control = getControl(el);
-      expect(control.getAttribute('tabindex')).toBe('0');
-    });
-
-    it('is removed from the tab order and marked aria-disabled when disabled', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms" disabled></dile-checkbox>');
-      const control = getControl(el);
-      expect(control.getAttribute('tabindex')).toBe('-1');
-      expect(control.getAttribute('aria-disabled')).toBe('true');
-    });
-
-    it('links the control to the slotted label via aria-labelledby', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms">Accept terms</dile-checkbox>');
-      const control = getControl(el);
-      const labelledbyId = control.getAttribute('aria-labelledby');
-
-      expect(labelledbyId).toBeTruthy();
-      expect(el.shadowRoot.getElementById(labelledbyId)).toBeTruthy();
-    });
-
-    it('does not set aria-labelledby when there is no slotted label', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      expect(getControl(el).hasAttribute('aria-labelledby')).toBe(false);
-    });
-
-    it('links the control to the message via aria-describedby when a message is set', async () => {
-      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
-      el.message = 'Required';
-      el.errored = true;
-      await el.updateComplete;
-
-      const control = getControl(el);
-      const describedbyId = control.getAttribute('aria-describedby');
-
-      expect(describedbyId).toBeTruthy();
-      expect(el.shadowRoot.getElementById(describedbyId)).toBeTruthy();
-    });
-  });
-});

package/components/chip/chip.spec.js

@@ -1,31 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './chip.js';
-
-describe('dile-chip', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderChip(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-chip');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the slotted content and a close icon', async () => {
-    const el = await renderChip('<dile-chip>Tag</dile-chip>');
-    expect(el.textContent.trim()).toBe('Tag');
-    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
-  });
-
-  it('dispatches dile-chip-icon-click with the name when the icon is clicked', async () => {
-    const el = await renderChip('<dile-chip name="tag1">Tag</dile-chip>');
-    let detail = null;
-    el.addEventListener('dile-chip-icon-click', (e) => { detail = e.detail; });
-
-    el.shadowRoot.querySelector('dile-icon').click();
-
-    expect(detail).toEqual({ name: 'tag1' });
-  });
-});