@dile/ui 3.18.0 → 3.18.2

package/components/floating-feedback/floating-feedback.spec.js

@@ -1,30 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './floating-feedback.js';
-
-describe('dile-floating-feedback', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-    const styles = document.getElementById('dile-floating-feedback-styles');
-    if (styles) styles.remove();
-  });
-
-  async function renderFloatingFeedback(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-floating-feedback');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the slotted content', async () => {
-    const el = await renderFloatingFeedback('<dile-floating-feedback feedback="Copied!"><button>Click</button></dile-floating-feedback>');
-    expect(el.shadowRoot.querySelector('slot')).toBeTruthy();
-    expect(el.textContent.trim()).toBe('Click');
-  });
-
-  it('creates a floating text element in the document body when shown', async () => {
-    const el = await renderFloatingFeedback('<dile-floating-feedback feedback="Copied!"><button>Click</button></dile-floating-feedback>');
-    el.show();
-
-    expect(document.body.querySelector('.dile-floating-feedback-text')).toBeTruthy();
-  });
-});

package/components/floating-menu/floating-menu-item.spec.js

@@ -1,27 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './floating-menu-item.js';
-
-describe('dile-floating-menu-item', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderItem(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-floating-menu-item');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the slotted content inside a link with the href property', async () => {
-    const el = await renderItem('<dile-floating-menu-item href="/home">Home</dile-floating-menu-item>');
-    const link = el.shadowRoot.querySelector('a');
-    expect(link.getAttribute('href')).toBe('/home');
-    expect(el.textContent.trim()).toBe('Home');
-  });
-
-  it('sets role listitem on the host', async () => {
-    const el = await renderItem('<dile-floating-menu-item href="/home">Home</dile-floating-menu-item>');
-    expect(el.getAttribute('role')).toBe('listitem');
-  });
-});

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

@@ -1,31 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './floating-menu.js';
-
-describe('dile-floating-menu', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderFloatingMenu(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-floating-menu');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders closed by default', async () => {
-    const el = await renderFloatingMenu('<dile-floating-menu></dile-floating-menu>');
-    expect(el.opened).toBe(false);
-    expect(el.shadowRoot.querySelector('button')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('.closed')).toBeTruthy();
-  });
-
-  it('toggles opened state when the button is clicked', async () => {
-    const el = await renderFloatingMenu('<dile-floating-menu></dile-floating-menu>');
-    el.shadowRoot.querySelector('button').click();
-    await el.updateComplete;
-
-    expect(el.opened).toBe(true);
-    expect(el.shadowRoot.querySelector('.opened')).toBeTruthy();
-  });
-});

package/components/form-separator/form-separator.spec.js

@@ -1,28 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './form-separator.js';
-
-describe('dile-form-separator', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderFormSeparator(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-form-separator');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders without a heading when label is not set', async () => {
-    const el = await renderFormSeparator('<dile-form-separator></dile-form-separator>');
-    expect(el.shadowRoot.querySelector('div')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('h3')).toBeNull();
-  });
-
-  it('renders the label as a heading when set', async () => {
-    const el = await renderFormSeparator('<dile-form-separator label="Section"></dile-form-separator>');
-    const heading = el.shadowRoot.querySelector('h3');
-    expect(heading).toBeTruthy();
-    expect(heading.textContent.trim()).toBe('Section');
-  });
-});

package/components/hamburger/hamburger.spec.js

@@ -1,28 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './hamburger.js';
-
-describe('dile-hamburger', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderHamburger(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-hamburger');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a button without the is-active class by default', async () => {
-    const el = await renderHamburger('<dile-hamburger></dile-hamburger>');
-    const button = el.shadowRoot.querySelector('button.hamburger');
-    expect(button).toBeTruthy();
-    expect(button.classList.contains('is-active')).toBe(false);
-  });
-
-  it('adds the is-active class when active is set', async () => {
-    const el = await renderHamburger('<dile-hamburger active></dile-hamburger>');
-    const button = el.shadowRoot.querySelector('button.hamburger');
-    expect(button.classList.contains('is-active')).toBe(true);
-  });
-});

package/components/icon/icon.spec.js

@@ -1,31 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { closeIcon } from '@dile/icons/index.js';
-import './icon.js';
-
-describe('dile-icon', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderIcon(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-icon');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the provided icon inside a span', async () => {
-    const el = await renderIcon('<dile-icon></dile-icon>');
-    el.icon = closeIcon;
-    await el.updateComplete;
-
-    const span = el.shadowRoot.querySelector('span');
-    expect(span).toBeTruthy();
-    expect(span.querySelector('svg')).toBeTruthy();
-  });
-
-  it('renders nothing extra when icon is not set', async () => {
-    const el = await renderIcon('<dile-icon></dile-icon>');
-    expect(el.shadowRoot.querySelector('span').querySelector('svg')).toBeNull();
-  });
-});

package/components/icon-switch/icon-switch-group.spec.js

@@ -1,46 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { closeIcon } from '@dile/icons/index.js';
-import './icon-switch-group.js';
-import './icon-switch.js';
-
-describe('dile-icon-switch-group', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderGroup(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-icon-switch-group');
-    const switches = el.querySelectorAll('dile-icon-switch');
-    switches.forEach((s) => { s.icon = closeIcon; });
-    await el.updateComplete;
-    for (const s of switches) await s.updateComplete;
-    return el;
-  }
-
-  it('renders the slotted dile-icon-switch children', async () => {
-    const el = await renderGroup(`
-      <dile-icon-switch-group>
-        <dile-icon-switch name="one"></dile-icon-switch>
-        <dile-icon-switch name="two"></dile-icon-switch>
-      </dile-icon-switch-group>
-    `);
-    expect(el.querySelectorAll('dile-icon-switch').length).toBe(2);
-  });
-
-  it('deactivates the other switches when one becomes active', async () => {
-    const el = await renderGroup(`
-      <dile-icon-switch-group>
-        <dile-icon-switch name="one" active></dile-icon-switch>
-        <dile-icon-switch name="two"></dile-icon-switch>
-      </dile-icon-switch-group>
-    `);
-    const [one, two] = el.querySelectorAll('dile-icon-switch');
-
-    two.shadowRoot.querySelector('dile-icon').click();
-    await el.updateComplete;
-
-    expect(two.active).toBe(true);
-    expect(one.active).toBe(false);
-  });
-});

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

@@ -1,35 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { closeIcon } from '@dile/icons/index.js';
-import './icon-switch.js';
-
-describe('dile-icon-switch', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderIconSwitch(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-icon-switch');
-    el.icon = closeIcon;
-    await el.updateComplete;
-    return el;
-  }
-
-  it('starts inactive by default', async () => {
-    const el = await renderIconSwitch('<dile-icon-switch name="one"></dile-icon-switch>');
-    expect(el.active).toBeFalsy();
-    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
-  });
-
-  it('toggles active and dispatches dile-icon-switch-changed on click', async () => {
-    const el = await renderIconSwitch('<dile-icon-switch name="one"></dile-icon-switch>');
-    let detail = null;
-    el.addEventListener('dile-icon-switch-changed', (e) => { detail = e.detail; });
-
-    el.shadowRoot.querySelector('dile-icon').click();
-    await el.updateComplete;
-
-    expect(el.active).toBe(true);
-    expect(detail).toEqual({ active: true, name: 'one' });
-  });
-});

package/components/info-box/info-box.spec.js

@@ -1,38 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './info-box.js';
-
-describe('dile-info-box', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInfoBox(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-info-box');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the slotted content and a default info icon', async () => {
-    const el = await renderInfoBox('<dile-info-box>Some info</dile-info-box>');
-    expect(el.textContent.trim()).toBe('Some info');
-    expect(el.shadowRoot.querySelector('.info dile-icon, .info svg')).toBeTruthy();
-  });
-
-  it('renders the title when set', async () => {
-    const el = await renderInfoBox('<dile-info-box title="Heads up">Some info</dile-info-box>');
-    const title = el.shadowRoot.querySelector('.title');
-    expect(title).toBeTruthy();
-    expect(title.textContent.trim()).toBe('Heads up');
-  });
-
-  it('shows the close button only when showCloseButton is set', async () => {
-    const el = await renderInfoBox('<dile-info-box>Some info</dile-info-box>');
-    expect(el.shadowRoot.querySelector('.close')).toBeNull();
-
-    el.showCloseButton = true;
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('.close button')).toBeTruthy();
-  });
-});

package/components/inline-feedback/inline-feedback.spec.js

@@ -1,46 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './inline-feedback.js';
-
-describe('dile-inline-feedback', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInlineFeedback(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-inline-feedback');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders an empty message section by default', async () => {
-    const el = await renderInlineFeedback('<dile-inline-feedback></dile-inline-feedback>');
-    const section = el.shadowRoot.querySelector('#msg');
-    expect(section).toBeTruthy();
-    expect(section.textContent.trim()).toBe('');
-  });
-
-  it('sets the message and status classes on positiveFeedback', async () => {
-    const el = await renderInlineFeedback('<dile-inline-feedback></dile-inline-feedback>');
-    el.positiveFeedback('Saved!');
-    await el.updateComplete;
-
-    expect(el.msg).toBe('Saved!');
-    expect(el.status).toBe('success');
-    expect(el.shadowRoot.querySelector('#msg').textContent.trim()).toBe('Saved!');
-    expect(el.shadowRoot.querySelector('#msg').classList.contains('success')).toBe(true);
-  });
-
-  it('clears the message and status on clear()', async () => {
-    const el = await renderInlineFeedback('<dile-inline-feedback></dile-inline-feedback>');
-    el.negativeFeedback('Oops');
-    await el.updateComplete;
-
-    el.clear();
-    await el.updateComplete;
-
-    expect(el.msg).toBe('');
-    expect(el.status).toBe('');
-    expect(el.opened).toBe(false);
-  });
-});

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

@@ -1,32 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input-contact.js';
-
-describe('dile-input-contact', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputContact(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input-contact');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native text input with the given value', async () => {
-    const el = await renderInputContact('<dile-input-contact name="phone" value="123"></dile-input-contact>');
-    const input = el.shadowRoot.querySelector('input');
-    expect(input).toBeTruthy();
-    expect(input.value).toBe('123');
-  });
-
-  it('marks invalid phone values as errored on blur', async () => {
-    const el = await renderInputContact('<dile-input-contact name="phone" phone value="abc"></dile-input-contact>');
-    const input = el.shadowRoot.querySelector('input');
-    input.dispatchEvent(new Event('blur'));
-    await el.updateComplete;
-
-    expect(el.valid).toBe(false);
-    expect(el.errored).toBe(true);
-  });
-});

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

@@ -1,166 +0,0 @@
-import { describe, it, expect, afterEach, vi } from 'vitest';
-import './input-icon.js';
-import '@dile/iconlib/lucide-icons/dot.js';
-
-describe('dile-input-icon', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputIcon(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input-icon');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a text input with the given value', async () => {
-    const el = await renderInputIcon('<dile-input-icon name="test" value="hello"></dile-input-icon>');
-    const input = el.shadowRoot.querySelector('input');
-    expect(input).toBeTruthy();
-    expect(input.value).toBe('hello');
-    expect(input.type).toBe('text');
-  });
-
-  it('renders the label when set', async () => {
-    const el = await renderInputIcon('<dile-input-icon label="Username"></dile-input-icon>');
-    const label = el.shadowRoot.querySelector('label');
-    expect(label).toBeTruthy();
-    expect(label.textContent.trim()).toBe('Username');
-  });
-
-  it('does not render icon button when icon is not set', async () => {
-    const el = await renderInputIcon('<dile-input-icon></dile-input-icon>');
-    const button = el.shadowRoot.querySelector('.input-icon-btn');
-    expect(button).toBeFalsy();
-  });
-
-  it('renders icon button when icon is set', async () => {
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot"></dile-input-icon>');
-    await new Promise(resolve => setTimeout(resolve, 50)); // Small delay for icon registration
-    const button = el.shadowRoot.querySelector('.input-icon-btn');
-    expect(button).toBeTruthy();
-  });
-
-  it('disables the icon button when input is disabled', async () => {
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" disabled></dile-input-icon>');
-    const button = el.shadowRoot.querySelector('.input-icon-btn');
-    expect(button).toBeTruthy();
-    expect(button.disabled).toBe(true);
-  });
-
-  it('dispatches dile-input-icon-clicked event when icon button is clicked', async () => {
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" value="test-value"></dile-input-icon>');
-    const button = el.shadowRoot.querySelector('.input-icon-btn');
-    
-    let eventData = null;
-    el.addEventListener('dile-input-icon-clicked', (e) => {
-      eventData = e.detail;
-    });
-
-    button.click();
-    await el.updateComplete;
-
-    expect(eventData).toBeTruthy();
-    expect(eventData.icon).toBe('lucide.dot');
-    expect(eventData.value).toBe('test-value');
-  });
-
-  it('calls onIconClick callback when icon button is clicked', async () => {
-    const callback = vi.fn();
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" value="test"></dile-input-icon>');
-    
-    el.onIconClick = callback;
-    const button = el.shadowRoot.querySelector('.input-icon-btn');
-    button.click();
-    await el.updateComplete;
-
-    expect(callback).toHaveBeenCalledWith(el);
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-
-  it('callback receives component instance with access to value property', async () => {
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" value="secret"></dile-input-icon>');
-    
-    let receivedComponent = null;
-    el.onIconClick = (component) => {
-      receivedComponent = component;
-    };
-
-    const button = el.shadowRoot.querySelector('.input-icon-btn');
-    button.click();
-    await el.updateComplete;
-
-    expect(receivedComponent).toBe(el);
-    expect(receivedComponent.value).toBe('secret');
-  });
-
-  it('renders a message when set', async () => {
-    const el = await renderInputIcon('<dile-input-icon></dile-input-icon>');
-    el.message = 'Required field';
-    await el.updateComplete;
-
-    const message = el.shadowRoot.querySelector('.message span');
-    expect(message).toBeTruthy();
-    expect(message.textContent.trim()).toBe('Required field');
-  });
-
-  it('updates the value property on user input', async () => {
-    const el = await renderInputIcon('<dile-input-icon name="test"></dile-input-icon>');
-    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('does not render tooltip wrapper when tooltip is not set', async () => {
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot"></dile-input-icon>');
-    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
-    expect(tooltip).toBeFalsy();
-  });
-
-  it('renders dile-tooltip when tooltip property is set', async () => {
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help text"></dile-input-icon>');
-    await el.updateComplete;
-    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
-    expect(tooltip).toBeTruthy();
-    expect(tooltip.getAttribute('tooltip')).toBe('Help text');
-  });
-
-  it('maps tooltipPosition to tooltip position attribute', async () => {
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help" tooltipPosition="bottom"></dile-input-icon>');
-    await el.updateComplete;
-    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
-    expect(tooltip.getAttribute('position')).toBe('bottom');
-  });
-
-  it('maps tooltipFadeIn to tooltip fadeIn attribute', async () => {
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help" tooltipFadeIn></dile-input-icon>');
-    await el.updateComplete;
-    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
-    expect(tooltip.getAttribute('fadeIn')).toBe('');
-  });
-
-  it('maps tooltipArrow to tooltip arrow attribute', async () => {
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help" tooltipArrow></dile-input-icon>');
-    await el.updateComplete;
-    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
-    expect(tooltip.getAttribute('arrow')).toBe('');
-  });
-
-  it('button is still clickable when wrapped in tooltip', async () => {
-    const callback = vi.fn();
-    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help"></dile-input-icon>');
-    el.onIconClick = callback;
-    await el.updateComplete;
-
-    const button = el.shadowRoot.querySelector('.input-icon-btn');
-    expect(button).toBeTruthy();
-    button.click();
-    await el.updateComplete;
-
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-});

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

@@ -1,31 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './input-integer.js';
-
-describe('dile-input-integer', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderInputInteger(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-input-integer');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native text input with the given value', async () => {
-    const el = await renderInputInteger('<dile-input-integer name="qty" value="5"></dile-input-integer>');
-    const input = el.shadowRoot.querySelector('input');
-    expect(input).toBeTruthy();
-    expect(input.value).toBe('5');
-  });
-
-  it('formats the value to an integer on blur', async () => {
-    const el = await renderInputInteger('<dile-input-integer name="qty" value="5.9"></dile-input-integer>');
-    const input = el.shadowRoot.querySelector('input');
-    input.value = '5.9';
-    input.dispatchEvent(new Event('blur'));
-
-    expect(el.value).toBe(5);
-  });
-});