@dile/ui 3.18.0 → 3.18.1

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

@@ -1,41 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './otp-input.js';
-
-describe('dile-otp-input', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderOtpInput(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-otp-input');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders one input box per digit', async () => {
-    const el = await renderOtpInput('<dile-otp-input name="code" length="4"></dile-otp-input>');
-
-    expect(el.shadowRoot.querySelectorAll('input').length).toBe(4);
-  });
-
-  it('renders the slotted-in value across the boxes', async () => {
-    const el = await renderOtpInput('<dile-otp-input length="4" value="12"></dile-otp-input>');
-    const boxes = el.shadowRoot.querySelectorAll('input');
-
-    expect(boxes[0].value).toBe('1');
-    expect(boxes[1].value).toBe('2');
-    expect(boxes[2].value).toBe('');
-  });
-
-  it('dispatches dile-otp-input-completed when the last box is filled', async () => {
-    const el = await renderOtpInput('<dile-otp-input name="code" length="2"></dile-otp-input>');
-    let detail = null;
-    el.addEventListener('dile-otp-input-completed', (e) => { detail = e.detail; });
-
-    el.value = '12';
-    await el.updateComplete;
-
-    expect(detail).toEqual({ name: 'code', value: '12' });
-  });
-});

package/components/pages/pages.spec.js

@@ -1,44 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './pages.js';
-
-describe('dile-pages', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderPages(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-pages');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('shows only the selected page', async () => {
-    const el = await renderPages(`
-      <dile-pages selected="1">
-        <div>Page 0</div>
-        <div>Page 1</div>
-      </dile-pages>
-    `);
-
-    const [page0, page1] = el.children;
-    expect(page0.style.display).toBe('none');
-    expect(page1.style.display).toBe('block');
-  });
-
-  it('hides the previous page and shows the new one when selected changes', async () => {
-    const el = await renderPages(`
-      <dile-pages selected="0">
-        <div>Page 0</div>
-        <div>Page 1</div>
-      </dile-pages>
-    `);
-
-    el.selected = 1;
-    await el.updateComplete;
-
-    const [page0, page1] = el.children;
-    expect(page0.style.display).toBe('none');
-    expect(page1.style.display).toBe('block');
-  });
-});

package/components/password/password.spec.js

@@ -1,35 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './password.js';
-
-describe('dile-password', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderPassword(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-password');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a password type input by default', async () => {
-    const el = await renderPassword('<dile-password name="pwd"></dile-password>');
-    const input = el.shadowRoot.querySelector('input');
-
-    expect(input).toBeTruthy();
-    expect(input.type).toBe('password');
-  });
-
-  it('toggles input type to text when the visibility toggle is shown and clicked', async () => {
-    const el = await renderPassword('<dile-password name="pwd" showPasswordToggle></dile-password>');
-    const toggle = el.shadowRoot.querySelector('.password-toggle-btn');
-    expect(toggle).toBeTruthy();
-
-    toggle.click();
-    await el.updateComplete;
-
-    expect(el.passwordVisible).toBe(true);
-    expect(el.shadowRoot.querySelector('input').type).toBe('text');
-  });
-});

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

@@ -1,28 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './progress-bar.js';
-
-describe('dile-progress-bar', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderProgressBar(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-progress-bar');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the progress bar width and percentage from the value property', async () => {
-    const el = await renderProgressBar('<dile-progress-bar value="42"></dile-progress-bar>');
-    const bar = el.shadowRoot.querySelector('.progress-bar');
-
-    expect(bar.getAttribute('style')).toContain('width: 42%');
-    expect(bar.querySelector('span').textContent.trim()).toBe('42%');
-  });
-
-  it('renders the title when set', async () => {
-    const el = await renderProgressBar('<dile-progress-bar title="Loading"></dile-progress-bar>');
-    expect(el.shadowRoot.querySelector('.progress-bar-title').textContent.trim()).toBe('Loading');
-  });
-});

package/components/radio-group/radio-group-dialog.spec.js

@@ -1,126 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './radio-group-dialog.js';
-
-describe('dile-radio-group-dialog', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderRadioGroupDialog(attrs = '', dialogItems = []) {
-    document.body.innerHTML = `<dile-radio-group-dialog ${attrs}></dile-radio-group-dialog>`;
-    const el = document.body.querySelector('dile-radio-group-dialog');
-    el.dialogItems = dialogItems;
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the title and description', async () => {
-    const el = await renderRadioGroupDialog('title="Select Option" description="Choose one option below"');
-
-    expect(el.shadowRoot.querySelector('.dialog-title').textContent).toBe('Select Option');
-    expect(el.shadowRoot.querySelector('.dialog-description').textContent).toBe('Choose one option below');
-  });
-
-  it('renders dialog items with labels and values', async () => {
-    const dialogItems = [
-      { value: 'a', label: 'Option A', description: 'First option' },
-      { value: 'b', label: 'Option B', description: 'Second option' },
-    ];
-
-    const el = await renderRadioGroupDialog('title="Select Option"', dialogItems);
-
-    const items = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
-    expect(items.length).toBe(2);
-  });
-
-  it('updates value when an option is clicked', async () => {
-    const dialogItems = [
-      { value: 'a', label: 'Option A' },
-      { value: 'b', label: 'Option B' },
-    ];
-
-    const el = await renderRadioGroupDialog('', dialogItems);
-
-    const wrappers = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
-    wrappers[1].click();
-    await el.updateComplete;
-
-    expect(el.value).toBe('b');
-  });
-
-  it('renders items with optional description', async () => {
-    const dialogItems = [
-      { value: 'a', label: 'Option A', description: 'Description for A' },
-      { value: 'b', label: 'Option B' },
-    ];
-
-    const el = await renderRadioGroupDialog('', dialogItems);
-
-    const descriptions = el.shadowRoot.querySelectorAll('.item-description');
-    expect(descriptions.length).toBe(1);
-    expect(descriptions[0].textContent).toBe('Description for A');
-  });
-
-  it('exposes radiogroup and radio roles with the accessible name wired up', async () => {
-    const el = await renderRadioGroupDialog('title="Select Option"', [
-      { value: 'a', label: 'Option A' },
-      { value: 'b', label: 'Option B' },
-    ]);
-
-    const group = el.shadowRoot.querySelector('.radio-items');
-    expect(group.getAttribute('role')).toBe('radiogroup');
-    expect(group.getAttribute('aria-labelledby')).toBe(el.shadowRoot.querySelector('.dialog-title').id);
-
-    const wrappers = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
-    wrappers.forEach(wrapper => {
-      expect(wrapper.getAttribute('role')).toBe('radio');
-      const labelId = wrapper.getAttribute('aria-labelledby');
-      expect(el.shadowRoot.getElementById(labelId).textContent.trim()).not.toBe('');
-    });
-  });
-
-  it('reflects the selected item via aria-checked and keeps a single tab stop', async () => {
-    const el = await renderRadioGroupDialog('', [
-      { value: 'a', label: 'Option A' },
-      { value: 'b', label: 'Option B' },
-    ]);
-    el.value = 'b';
-    await el.updateComplete;
-
-    const wrappers = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
-    expect(wrappers[0].getAttribute('aria-checked')).toBe('false');
-    expect(wrappers[1].getAttribute('aria-checked')).toBe('true');
-    expect(wrappers[0].getAttribute('tabindex')).toBe('-1');
-    expect(wrappers[1].getAttribute('tabindex')).toBe('0');
-  });
-
-  it('selects an option on Space/Enter and moves selection with arrow keys', async () => {
-    const el = await renderRadioGroupDialog('', [
-      { value: 'a', label: 'Option A' },
-      { value: 'b', label: 'Option B' },
-      { value: 'c', label: 'Option C' },
-    ]);
-
-    const wrappers = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
-    wrappers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true }));
-    await el.updateComplete;
-    expect(el.value).toBe('a');
-
-    el.shadowRoot.querySelector('.radio-item-wrapper[aria-checked="true"]')
-      .dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true }));
-    await el.updateComplete;
-    expect(el.value).toBe('b');
-  });
-
-  it('marks the group and items as disabled', async () => {
-    const el = await renderRadioGroupDialog('disabled', [
-      { value: 'a', label: 'Option A' },
-    ]);
-
-    const group = el.shadowRoot.querySelector('.radio-items');
-    expect(group.getAttribute('aria-disabled')).toBe('true');
-    const wrapper = el.shadowRoot.querySelector('.radio-item-wrapper');
-    expect(wrapper.getAttribute('aria-disabled')).toBe('true');
-    expect(wrapper.getAttribute('tabindex')).toBe('-1');
-  });
-});

package/components/radio-group/radio-group.spec.js

@@ -1,128 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './radio-group.js';
-
-describe('dile-radio-group', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderRadioGroup(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-radio-group');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the slotted radios and label', async () => {
-    const el = await renderRadioGroup(`
-      <dile-radio-group name="opt" label="Choose one">
-        <dile-radio value="a" label="A"></dile-radio>
-        <dile-radio value="b" label="B"></dile-radio>
-      </dile-radio-group>
-    `);
-
-    expect(el.shadowRoot.querySelector('.label').textContent.trim()).toBe('Choose one');
-    expect(el.querySelectorAll('dile-radio').length).toBe(2);
-  });
-
-  it('updates value and selection when a radio is clicked', async () => {
-    const el = await renderRadioGroup(`
-      <dile-radio-group name="opt">
-        <dile-radio value="a" label="A"></dile-radio>
-        <dile-radio value="b" label="B"></dile-radio>
-      </dile-radio-group>
-    `);
-
-    const radios = el.querySelectorAll('dile-radio');
-    radios[1].shadowRoot.querySelector('article').click();
-    await el.updateComplete;
-
-    expect(el.value).toBe('b');
-    expect(radios[1].selected).toBe(true);
-    expect(radios[0].selected).toBe(false);
-  });
-
-  it('exposes radiogroup role wired to the visible label', async () => {
-    const el = await renderRadioGroup(`
-      <dile-radio-group name="opt" label="Choose one">
-        <dile-radio value="a" label="A"></dile-radio>
-        <dile-radio value="b" label="B"></dile-radio>
-      </dile-radio-group>
-    `);
-
-    const group = el.shadowRoot.querySelector('div');
-    const labelId = el.shadowRoot.querySelector('.label').id;
-    expect(group.getAttribute('role')).toBe('radiogroup');
-    expect(group.getAttribute('aria-labelledby')).toBe(labelId);
-  });
-
-  it('gives each radio role=radio with aria-checked reflecting selection', async () => {
-    const el = await renderRadioGroup(`
-      <dile-radio-group name="opt" value="a">
-        <dile-radio value="a" label="A"></dile-radio>
-        <dile-radio value="b" label="B"></dile-radio>
-      </dile-radio-group>
-    `);
-    await new Promise(resolve => setTimeout(resolve, 210));
-    const radios = el.querySelectorAll('dile-radio');
-    await Promise.all([...radios].map(r => r.updateComplete));
-
-    const articles = [...radios].map(r => r.shadowRoot.querySelector('article'));
-    expect(articles[0].getAttribute('role')).toBe('radio');
-    expect(articles[0].getAttribute('aria-checked')).toBe('true');
-    expect(articles[1].getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('keeps a single roving tab stop that follows the selection', async () => {
-    const el = await renderRadioGroup(`
-      <dile-radio-group name="opt">
-        <dile-radio value="a" label="A"></dile-radio>
-        <dile-radio value="b" label="B"></dile-radio>
-      </dile-radio-group>
-    `);
-    const radios = el.querySelectorAll('dile-radio');
-    await Promise.all([...radios].map(r => r.updateComplete));
-    let articles = [...radios].map(r => r.shadowRoot.querySelector('article'));
-    expect(articles[0].getAttribute('tabindex')).toBe('0');
-    expect(articles[1].getAttribute('tabindex')).toBe('-1');
-
-    radios[1].shadowRoot.querySelector('article').click();
-    await el.updateComplete;
-    await Promise.all([...radios].map(r => r.updateComplete));
-    articles = [...radios].map(r => r.shadowRoot.querySelector('article'));
-    expect(articles[0].getAttribute('tabindex')).toBe('-1');
-    expect(articles[1].getAttribute('tabindex')).toBe('0');
-  });
-
-  it('moves selection with arrow keys', async () => {
-    const el = await renderRadioGroup(`
-      <dile-radio-group name="opt" value="a">
-        <dile-radio value="a" label="A"></dile-radio>
-        <dile-radio value="b" label="B"></dile-radio>
-      </dile-radio-group>
-    `);
-    await new Promise(resolve => setTimeout(resolve, 210));
-
-    el.shadowRoot.querySelector('div').dispatchEvent(
-      new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true })
-    );
-    await el.updateComplete;
-
-    expect(el.value).toBe('b');
-  });
-
-  it('propagates disabled state to the slotted radios', async () => {
-    const el = await renderRadioGroup(`
-      <dile-radio-group name="opt" disabled>
-        <dile-radio value="a" label="A"></dile-radio>
-      </dile-radio-group>
-    `);
-    const radio = el.querySelector('dile-radio');
-    await radio.updateComplete;
-
-    expect(radio.disabled).toBe(true);
-    const article = radio.shadowRoot.querySelector('article');
-    expect(article.getAttribute('tabindex')).toBe('-1');
-    expect(article.getAttribute('aria-disabled')).toBe('true');
-  });
-});

package/components/radio-group/radio.spec.js

@@ -1,32 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './radio.js';
-
-describe('dile-radio', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderRadio(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-radio');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the label and starts unselected', async () => {
-    const el = await renderRadio('<dile-radio value="a" label="Option A"></dile-radio>');
-
-    expect(el.selected).toBe(false);
-    expect(el.shadowRoot.querySelector('.label').textContent.trim()).toBe('Option A');
-  });
-
-  it('dispatches dile-radio-selected with value and label on click', async () => {
-    const el = await renderRadio('<dile-radio value="a" label="Option A"></dile-radio>');
-    let detail = null;
-    el.addEventListener('dile-radio-selected', (e) => { detail = e.detail; });
-
-    el.shadowRoot.querySelector('article').click();
-
-    expect(detail).toEqual({ value: 'a', label: 'Option A' });
-  });
-});

package/components/range/range.spec.js

@@ -1,36 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './range.js';
-
-describe('dile-range', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderRange(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-range');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders a native range input with min/max/value', async () => {
-    const el = await renderRange('<dile-range name="vol" min="0" max="20" value="5"></dile-range>');
-    const input = el.shadowRoot.querySelector('input[type="range"]');
-
-    expect(input).toBeTruthy();
-    expect(input.min).toBe('0');
-    expect(input.max).toBe('20');
-    expect(input.value).toBe('5');
-  });
-
-  it('updates the value property when the input changes', async () => {
-    const el = await renderRange('<dile-range name="vol"></dile-range>');
-    const input = el.shadowRoot.querySelector('input[type="range"]');
-
-    input.value = '7';
-    input.dispatchEvent(new Event('input'));
-    await el.updateComplete;
-
-    expect(el.value).toBe('7');
-  });
-});

package/components/rating/rating.spec.js

@@ -1,34 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './rating.js';
-
-describe('dile-rating', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderRating(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-rating');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders five dile-star elements', async () => {
-    const el = await renderRating('<dile-rating value="3"></dile-rating>');
-    expect(el.shadowRoot.querySelectorAll('dile-star').length).toBe(5);
-    expect(el.value).toBe(3);
-  });
-
-  it('updates value and dispatches dile-rating-selected when a star is selected', async () => {
-    const el = await renderRating('<dile-rating value="0"></dile-rating>');
-    let detail = null;
-    el.addEventListener('dile-rating-selected', (e) => { detail = e.detail; });
-
-    el.shadowRoot.querySelectorAll('dile-star')[2].dispatchEvent(new CustomEvent('dile-star-selected', {
-      detail: { index: 2 },
-    }));
-
-    expect(el.value).toBe(3);
-    expect(detail).toEqual({ value: 3 });
-  });
-});

package/components/rating/star.spec.js

@@ -1,30 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './star.js';
-
-describe('dile-star', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderStar(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-star');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders an inner dile-icon', async () => {
-    const el = await renderStar('<dile-star value="1" index="0"></dile-star>');
-    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
-  });
-
-  it('dispatches dile-star-selected with the index on click', async () => {
-    const el = await renderStar('<dile-star value="1" index="2"></dile-star>');
-    let detail = null;
-    el.addEventListener('dile-star-selected', (e) => { detail = e.detail; });
-
-    el.shadowRoot.querySelector('dile-icon').dispatchEvent(new Event('click'));
-
-    expect(detail).toEqual({ index: 2 });
-  });
-});

package/components/rating-scale-question/rating-scale-option.spec.js

@@ -1,32 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './rating-scale-option.js';
-
-describe('dile-rating-scale-option', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderOption(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-rating-scale-option');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the label and starts unselected', async () => {
-    const el = await renderOption('<dile-rating-scale-option value="3" label="Agree"></dile-rating-scale-option>');
-
-    expect(el.selected).toBe(false);
-    expect(el.shadowRoot.querySelector('.radio_label').textContent.trim()).toBe('Agree');
-  });
-
-  it('dispatches dile-rating-scale-option-selected with the value on click', async () => {
-    const el = await renderOption('<dile-rating-scale-option value="3"></dile-rating-scale-option>');
-    let detail = null;
-    el.addEventListener('dile-rating-scale-option-selected', (e) => { detail = e.detail; });
-
-    el.shadowRoot.querySelector('span').click();
-
-    expect(detail).toEqual({ value: '3' });
-  });
-});

package/components/rating-scale-question/rating-scale-question.spec.js

@@ -1,35 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './rating-scale-question.js';
-
-describe('dile-rating-scale-question', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderQuestion(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-rating-scale-question');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the label and default 7-point options', async () => {
-    const el = await renderQuestion('<dile-rating-scale-question name="q1" label="How satisfied are you?"></dile-rating-scale-question>');
-
-    expect(el.shadowRoot.querySelector('legend').textContent.trim()).toBe('How satisfied are you?');
-    expect(el.shadowRoot.querySelectorAll('dile-rating-scale-option').length).toBe(7);
-  });
-
-  it('updates value when an option is selected', async () => {
-    const el = await renderQuestion('<dile-rating-scale-question name="q1"></dile-rating-scale-question>');
-    const option = el.shadowRoot.querySelector('dile-rating-scale-option');
-    option.dispatchEvent(new CustomEvent('dile-rating-scale-option-selected', {
-      bubbles: true,
-      composed: true,
-      detail: { value: option.value },
-    }));
-    await el.updateComplete;
-
-    expect(el.value).toBe(option.value);
-  });
-});