@dile/ui 3.18.0 → 3.18.1

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

@@ -1,139 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './selector-overlay.js';
-import './selector-item.js';
-
-describe('dile-selector-overlay', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSelectorOverlay(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-selector-overlay');
-    await el.updateComplete;
-    return el;
-  }
-
-  function wait(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  it('renders a bare rounded icon trigger with the default icon when label is empty', async () => {
-    const el = await renderSelectorOverlay(`
-      <dile-selector-overlay>
-        <dile-selector-item>One</dile-selector-item>
-        <dile-selector-item>Two</dile-selector-item>
-      </dile-selector-overlay>
-    `);
-
-    const trigger = el.shadowRoot.getElementById('trigger');
-    const icon = trigger.querySelector('dile-lucide-icon');
-    expect(icon).toBeTruthy();
-    expect(icon.getAttribute('icon')).toBe('ellipsis-vertical');
-    expect(icon.hasAttribute('rounded')).toBe(true);
-    // dile-lucide-icon forwards `rounded` to the inner icon it renders in its own shadow DOM
-    expect(icon.shadowRoot.querySelector('[rounded]')).toBeTruthy();
-    expect(trigger.querySelector('dile-lucide-badge')).toBeFalsy();
-  });
-
-  it('by default, label is shown as static text regardless of the selection', async () => {
-    const el = await renderSelectorOverlay(`
-      <dile-selector-overlay label="Menu" selected="0">
-        <dile-selector-item>One</dile-selector-item>
-        <dile-selector-item>Two</dile-selector-item>
-      </dile-selector-overlay>
-    `);
-
-    const trigger = el.shadowRoot.getElementById('trigger');
-    const badge = trigger.querySelector('dile-lucide-badge');
-    expect(badge).toBeTruthy();
-    expect(badge.textContent.trim()).toBe('Menu');
-    expect(badge.getAttribute('icon')).toBe('ellipsis-vertical');
-    expect(trigger.querySelector('dile-lucide-icon')).toBeFalsy();
-
-    el.querySelectorAll('dile-selector-item')[1].shadowRoot.querySelector('article').click();
-    await el.updateComplete;
-
-    expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('Menu');
-  });
-
-  it('with dynamicLabel, the trigger label follows the selected item text and updates when selection changes', async () => {
-    const el = await renderSelectorOverlay(`
-      <dile-selector-overlay dynamicLabel selected="1">
-        <dile-selector-item>One</dile-selector-item>
-        <dile-selector-item>Two</dile-selector-item>
-      </dile-selector-overlay>
-    `);
-
-    const trigger = el.shadowRoot.getElementById('trigger');
-    expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('Two');
-
-    el.querySelectorAll('dile-selector-item')[0].shadowRoot.querySelector('article').click();
-    await el.updateComplete;
-
-    expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('One');
-  });
-
-  it('with dynamicLabel and nothing selected, label falls back to the label property', async () => {
-    const el = await renderSelectorOverlay(`
-      <dile-selector-overlay dynamicLabel label="Choose an option">
-        <dile-selector-item>One</dile-selector-item>
-        <dile-selector-item>Two</dile-selector-item>
-      </dile-selector-overlay>
-    `);
-
-    const trigger = el.shadowRoot.getElementById('trigger');
-    expect(trigger.querySelector('dile-lucide-badge').textContent.trim()).toBe('Choose an option');
-  });
-
-  it('uses a custom icon name when the icon property is set', async () => {
-    const el = await renderSelectorOverlay(`
-      <dile-selector-overlay icon="star" label="Two">
-        <dile-selector-item>One</dile-selector-item>
-        <dile-selector-item>Two</dile-selector-item>
-      </dile-selector-overlay>
-    `);
-
-    const trigger = el.shadowRoot.getElementById('trigger');
-    expect(trigger.querySelector('dile-lucide-badge').getAttribute('icon')).toBe('star');
-  });
-
-  it('opens the internal dile-menu-overlay when the trigger is clicked', async () => {
-    const el = await renderSelectorOverlay(`
-      <dile-selector-overlay>
-        <dile-selector-item>One</dile-selector-item>
-        <dile-selector-item>Two</dile-selector-item>
-      </dile-selector-overlay>
-    `);
-
-    const menuOverlay = el.shadowRoot.querySelector('dile-menu-overlay');
-    el.shadowRoot.getElementById('trigger').click();
-    await wait(100);
-
-    expect(menuOverlay.shadowRoot.getElementById('overlay').classList.contains('opened')).toBe(true);
-  });
-
-  it('selecting an item dispatches dile-selected-changed and closes the overlay', async () => {
-    const el = await renderSelectorOverlay(`
-      <dile-selector-overlay>
-        <dile-selector-item>One</dile-selector-item>
-        <dile-selector-item>Two</dile-selector-item>
-      </dile-selector-overlay>
-    `);
-
-    const menuOverlay = el.shadowRoot.querySelector('dile-menu-overlay');
-    el.shadowRoot.getElementById('trigger').click();
-    await wait(100);
-
-    let detail = null;
-    el.addEventListener('dile-selected-changed', (e) => { detail = e.detail; });
-
-    const items = el.querySelectorAll('dile-selector-item');
-    items[1].shadowRoot.querySelector('article').click();
-    await el.updateComplete;
-
-    expect(detail.selected).toBe(1);
-    expect(el.selected).toBe(1);
-    expect(menuOverlay.shadowRoot.getElementById('overlay').classList.contains('opened')).toBe(false);
-  });
-});

package/components/selector/selector.spec.js

@@ -1,45 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './selector.js';
-import './selector-item.js';
-
-describe('dile-selector', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSelector(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-selector');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a slot with the selector items', async () => {
-    const el = await renderSelector(`
-      <dile-selector>
-        <dile-selector-item>One</dile-selector-item>
-        <dile-selector-item>Two</dile-selector-item>
-      </dile-selector>
-    `);
-
-    expect(el.shadowRoot.querySelector('slot')).toBeTruthy();
-    expect(el.querySelectorAll('dile-selector-item').length).toBe(2);
-  });
-
-  it('selects an item by index when clicked, marking it selected', async () => {
-    const el = await renderSelector(`
-      <dile-selector>
-        <dile-selector-item>One</dile-selector-item>
-        <dile-selector-item>Two</dile-selector-item>
-      </dile-selector>
-    `);
-
-    const items = el.querySelectorAll('dile-selector-item');
-    items[1].shadowRoot.querySelector('article').click();
-    await el.updateComplete;
-
-    expect(el.selected).toBe(1);
-    expect(items[1].selected).toBe(true);
-    expect(items[0].selected).toBe(false);
-  });
-});

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

@@ -1,38 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './slide-menu.js';
-
-describe('dile-slide-menu', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSlideMenu(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-slide-menu');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders closed by default with a nav control', async () => {
-    const el = await renderSlideMenu('<dile-slide-menu>Content</dile-slide-menu>');
-    expect(el.opened).toBe(false);
-
-    const nav = el.shadowRoot.querySelector('nav');
-    expect(nav).toBeTruthy();
-    expect(nav.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  it('opens when toggled', async () => {
-    const el = await renderSlideMenu('<dile-slide-menu>Content</dile-slide-menu>');
-    el.toggle();
-    await el.updateComplete;
-
-    expect(el.opened).toBe(true);
-    expect(el.shadowRoot.querySelector('nav').getAttribute('aria-expanded')).toBe('true');
-  });
-
-  it('uses the label property in the nav control', async () => {
-    const el = await renderSlideMenu('<dile-slide-menu label="Options">Content</dile-slide-menu>');
-    expect(el.shadowRoot.querySelector('nav').getAttribute('aria-label')).toBe('Options');
-  });
-});

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

@@ -1,34 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './slide-show.js';
-
-describe('dile-slide-show', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSlideShow(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-slide-show');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders closed by default with the showLabel text', async () => {
-    const el = await renderSlideShow('<dile-slide-show>Content</dile-slide-show>');
-    const link = el.shadowRoot.querySelector('a');
-
-    expect(link).toBeTruthy();
-    expect(link.textContent.trim()).toBe('Open');
-    expect(link.classList.contains('showmoreclose')).toBe(true);
-  });
-
-  it('opens and shows the hideLabel text', async () => {
-    const el = await renderSlideShow('<dile-slide-show hideLabel="Close it">Content</dile-slide-show>');
-    el.toggle();
-    await el.updateComplete;
-
-    const link = el.shadowRoot.querySelector('a');
-    expect(link.textContent.trim()).toBe('Close it');
-    expect(link.classList.contains('showmoreopen')).toBe(true);
-  });
-});

package/components/social-icon/social-icon.spec.js

@@ -1,26 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './social-icon.js';
-
-describe('dile-social-icon', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSocialIcon(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-social-icon');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('defaults to the facebook icon and renders an svg', async () => {
-    const el = await renderSocialIcon('<dile-social-icon></dile-social-icon>');
-    expect(el.icon).toBe('facebook');
-    expect(el.shadowRoot.querySelector('svg')).toBeTruthy();
-  });
-
-  it('renders a different icon based on the icon property', async () => {
-    const el = await renderSocialIcon('<dile-social-icon icon="twitter"></dile-social-icon>');
-    expect(el.shadowRoot.querySelector('svg')).toBeTruthy();
-  });
-});

package/components/spinner/spinner-bar.spec.js

@@ -1,26 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './spinner-bar.js';
-
-describe('dile-spinner-bar', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSpinnerBar(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-spinner-bar');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders nothing when inactive', async () => {
-    const el = await renderSpinnerBar('<dile-spinner-bar></dile-spinner-bar>');
-    expect(el.active).toBe(false);
-    expect(el.shadowRoot.querySelector('.bar')).toBeNull();
-  });
-
-  it('renders the bar when active', async () => {
-    const el = await renderSpinnerBar('<dile-spinner-bar active></dile-spinner-bar>');
-    expect(el.shadowRoot.querySelector('.bar')).toBeTruthy();
-  });
-});

package/components/spinner/spinner-block.spec.js

@@ -1,21 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './spinner-block.js';
-
-describe('dile-spinner-block', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('renders an active dile-spinner inside the loading section', async () => {
-    document.body.innerHTML = '<dile-spinner-block></dile-spinner-block>';
-    const el = document.body.querySelector('dile-spinner-block');
-    await el.updateComplete;
-
-    const section = el.shadowRoot.querySelector('section.loading');
-    expect(section).toBeTruthy();
-
-    const spinner = section.querySelector('dile-spinner');
-    expect(spinner).toBeTruthy();
-    expect(spinner.hasAttribute('active')).toBe(true);
-  });
-});

package/components/spinner/spinner-horizontal.spec.js

@@ -1,25 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './spinner-horizontal.js';
-
-describe('dile-spinner-horizontal', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSpinnerHorizontal(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-spinner-horizontal');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders nothing when inactive', async () => {
-    const el = await renderSpinnerHorizontal('<dile-spinner-horizontal></dile-spinner-horizontal>');
-    expect(el.shadowRoot.querySelector('.loader')).toBeNull();
-  });
-
-  it('renders the loader when active', async () => {
-    const el = await renderSpinnerHorizontal('<dile-spinner-horizontal active></dile-spinner-horizontal>');
-    expect(el.shadowRoot.querySelector('.loader')).toBeTruthy();
-  });
-});

package/components/spinner/spinner-icon.spec.js

@@ -1,25 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './spinner-icon.js';
-
-describe('dile-spinner-icon', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSpinnerIcon(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-spinner-icon');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('is inactive by default', async () => {
-    const el = await renderSpinnerIcon('<dile-spinner-icon></dile-spinner-icon>');
-    expect(el.active).toBe(false);
-  });
-
-  it('renders the loader icon when active', async () => {
-    const el = await renderSpinnerIcon('<dile-spinner-icon active></dile-spinner-icon>');
-    expect(el.shadowRoot.querySelector('dile-lucide-icon-loader-circle')).toBeTruthy();
-  });
-});

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

@@ -1,26 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './spinner-modal.js';
-
-describe('dile-spinner-modal', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSpinnerModal(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-spinner-modal');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders nothing when inactive', async () => {
-    const el = await renderSpinnerModal('<dile-spinner-modal></dile-spinner-modal>');
-    expect(el.shadowRoot.querySelector('div')).toBeNull();
-  });
-
-  it('renders the modal overlay with a spinner when active', async () => {
-    const el = await renderSpinnerModal('<dile-spinner-modal active></dile-spinner-modal>');
-    expect(el.shadowRoot.querySelector('div')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('dile-spinner')).toBeTruthy();
-  });
-});

package/components/spinner/spinner.spec.js

@@ -1,26 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './spinner.js';
-
-describe('dile-spinner', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSpinner(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-spinner');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders nothing when inactive', async () => {
-    const el = await renderSpinner('<dile-spinner></dile-spinner>');
-    expect(el.active).toBe(false);
-    expect(el.shadowRoot.querySelector('i')).toBeNull();
-  });
-
-  it('renders the spinner markup when active', async () => {
-    const el = await renderSpinner('<dile-spinner active></dile-spinner>');
-    expect(el.shadowRoot.querySelector('i')).toBeTruthy();
-  });
-});

package/components/steps/steps.spec.js

@@ -1,84 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './steps.js';
-
-describe('dile-steps', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSteps(attributes = '') {
-    document.body.innerHTML = `<dile-steps ${attributes}></dile-steps>`;
-    const el = document.body.querySelector('dile-steps');
-    el.steps = ['Customer', 'Products', 'Review'];
-    await el.updateComplete;
-    return el;
-  }
-
-  function bubbles(el) {
-    return [...el.shadowRoot.querySelectorAll('dile-step')];
-  }
-
-  it('renders one step bubble and label per step', async () => {
-    const el = await renderSteps();
-
-    expect(bubbles(el)).toHaveLength(3);
-    const labels = [...el.shadowRoot.querySelectorAll('.h-label')].map(label => label.textContent);
-    expect(labels).toEqual(['Customer', 'Products', 'Review']);
-  });
-
-  it('marks the current step as active and with aria-current', async () => {
-    const el = await renderSteps('current="1" reached="1"');
-
-    expect(bubbles(el).map(step => step.active)).toEqual([false, true, false]);
-    const items = [...el.shadowRoot.querySelectorAll('[role="listitem"]')];
-    expect(items[1].getAttribute('aria-current')).toBe('step');
-    expect(items[0].getAttribute('aria-current')).toBe('false');
-  });
-
-  it('only enables the steps already reached', async () => {
-    const el = await renderSteps('current="0" reached="1"');
-    await Promise.all(bubbles(el).map(step => step.updateComplete));
-
-    const buttons = bubbles(el).map(step => step.shadowRoot.querySelector('button'));
-    expect(buttons.map(button => button.disabled)).toEqual([false, false, true]);
-  });
-
-  it('enables every step with freeNavigation', async () => {
-    const el = await renderSteps('freeNavigation');
-    await Promise.all(bubbles(el).map(step => step.updateComplete));
-
-    const buttons = bubbles(el).map(step => step.shadowRoot.querySelector('button'));
-    expect(buttons.every(button => !button.disabled)).toBe(true);
-  });
-
-  it('dispatches dile-steps-select when a reached step is clicked', async () => {
-    const el = await renderSteps('reached="2"');
-    await Promise.all(bubbles(el).map(step => step.updateComplete));
-    let detail;
-    let innerClickEscaped = false;
-    el.addEventListener('dile-steps-select', e => { detail = e.detail; });
-    document.body.addEventListener('dile-step-click', () => { innerClickEscaped = true; });
-
-    bubbles(el)[2].shadowRoot.querySelector('button').click();
-
-    expect(detail).toEqual({ index: 2, label: 'Review' });
-    expect(innerClickEscaped).toBe(false);
-  });
-
-  it('renders the bubbles without buttons in readonly mode', async () => {
-    const el = await renderSteps('readonly reached="2"');
-    await Promise.all(bubbles(el).map(step => step.updateComplete));
-
-    bubbles(el).forEach(step => {
-      expect(step.shadowRoot.querySelector('button')).toBeNull();
-      expect(step.shadowRoot.querySelector('.step').textContent).toBe(String(step.index + 1));
-    });
-  });
-
-  it('renders the vertical layout', async () => {
-    const el = await renderSteps('vertical');
-
-    expect(el.shadowRoot.querySelector('.vertical')).toBeTruthy();
-    expect(el.shadowRoot.querySelectorAll('.connector')).toHaveLength(2);
-  });
-});

package/components/switch/switch.spec.js

@@ -1,33 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './switch.js';
-
-describe('dile-switch', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSwitch(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-switch');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('starts unchecked by default', async () => {
-    const el = await renderSwitch('<dile-switch name="notify"></dile-switch>');
-    expect(el.checked).toBe(false);
-    expect(el.shadowRoot.querySelector('section button')).toBeTruthy();
-  });
-
-  it('toggles checked state and dispatches dile-switch-changed', async () => {
-    const el = await renderSwitch('<dile-switch name="notify"></dile-switch>');
-    let detail = null;
-    el.addEventListener('dile-switch-changed', (e) => { detail = e.detail; });
-
-    el.shadowRoot.querySelector('div').click();
-    await el.updateComplete;
-
-    expect(el.checked).toBe(true);
-    expect(detail).toEqual({ checked: true, name: 'notify' });
-  });
-});

package/components/tabs/tabs.spec.js

@@ -1,85 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './tabs.js';
-
-describe('dile-tabs', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderTabs(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-tabs');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders slotted dile-tab items', async () => {
-    const el = await renderTabs(`
-      <dile-tabs selected="0">
-        <dile-tab>One</dile-tab>
-        <dile-tab>Two</dile-tab>
-      </dile-tabs>
-    `);
-
-    const tabs = el.querySelectorAll('dile-tab');
-    expect(tabs.length).toBe(2);
-    await tabs[0].updateComplete;
-    expect(tabs[0].selected).toBe(true);
-  });
-
-  it('selects a tab when clicked', async () => {
-    const el = await renderTabs(`
-      <dile-tabs>
-        <dile-tab>One</dile-tab>
-        <dile-tab>Two</dile-tab>
-      </dile-tabs>
-    `);
-
-    const tabs = el.querySelectorAll('dile-tab');
-    await tabs[1].updateComplete;
-    tabs[1].shadowRoot.querySelector('article').click();
-    await el.updateComplete;
-
-    expect(el.selected).toBe(1);
-  });
-
-  it('renders a native link when the tab has an href', async () => {
-    const el = await renderTabs(`
-      <dile-tabs>
-        <dile-tab href="/one">One</dile-tab>
-        <dile-tab href="https://example.com" target="_blank">Two</dile-tab>
-        <dile-tab>Three</dile-tab>
-      </dile-tabs>
-    `);
-
-    const tabs = el.querySelectorAll('dile-tab');
-    await Promise.all([...tabs].map((tab) => tab.updateComplete));
-
-    const link1 = tabs[0].shadowRoot.querySelector('a');
-    expect(link1.getAttribute('href')).toBe('/one');
-    expect(link1.hasAttribute('target')).toBe(false);
-    expect(link1.querySelector('article')).not.toBeNull();
-
-    const link2 = tabs[1].shadowRoot.querySelector('a');
-    expect(link2.getAttribute('target')).toBe('_blank');
-
-    expect(tabs[2].shadowRoot.querySelector('a')).toBeNull();
-  });
-
-  it('keeps selection working for tabs with href', async () => {
-    const el = await renderTabs(`
-      <dile-tabs attrForSelected="name" selected="two">
-        <dile-tab name="one" href="#one">One</dile-tab>
-        <dile-tab name="two" href="#two">Two</dile-tab>
-      </dile-tabs>
-    `);
-
-    const tabs = el.querySelectorAll('dile-tab');
-    await tabs[1].updateComplete;
-    expect(tabs[1].selected).toBe(true);
-
-    tabs[0].shadowRoot.querySelector('article').click();
-    await el.updateComplete;
-    expect(el.selected).toBe('one');
-  });
-});