@dile/ui 3.18.0 → 3.18.2

package/components/accordion/accordion.spec.js

@@ -1,253 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import './accordion.js';
-import './accordion-item.js';
-
-describe('DileAccordion - Accessibility', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderAccordion(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-accordion-item') || document.body.querySelector('dile-accordion');
-    await el.updateComplete;
-    return el;
-  }
-
-  async function renderAccordionGroup(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-accordion');
-    const items = el.querySelectorAll('dile-accordion-item');
-    await el.updateComplete;
-    for (const item of items) {
-      await item.updateComplete;
-    }
-    return { accordion: el, items };
-  }
-
-  describe('Semantic Structure & ARIA', () => {
-    it('should have region role with aria-label on container', async () => {
-      const { accordion } = await renderAccordionGroup(`
-        <dile-accordion>
-          <dile-accordion-item title="Item 1">
-            <div slot="accordion-item-content">Content 1</div>
-          </dile-accordion-item>
-        </dile-accordion>
-      `);
-      
-      const region = accordion.shadowRoot.querySelector('[role="region"]');
-      
-      expect(region).toBeTruthy();
-      expect(region.getAttribute('aria-label')).toBe('Accordion');
-    });
-
-    it('button should have aria-expanded attribute', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Expandable">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      expect(button.getAttribute('aria-expanded')).toBe('false');
-      
-      button.click();
-      await el.updateComplete;
-      
-      expect(button.getAttribute('aria-expanded')).toBe('true');
-    });
-
-    it('button should have aria-controls pointing to content', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      const contentContainer = el.shadowRoot.querySelector('.contentContainer');
-      
-      const controlsId = button.getAttribute('aria-controls');
-      expect(controlsId).toBeTruthy();
-      expect(contentContainer.id).toBe(controlsId);
-    });
-
-    it('content region should have aria-labelledby pointing to button', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Section Title">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      const contentRegion = el.shadowRoot.querySelector('[role="region"]');
-      
-      expect(contentRegion.getAttribute('aria-labelledby')).toBe(button.id);
-    });
-
-    it('icon should be hidden from screen readers with aria-hidden', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const icon = el.shadowRoot.querySelector('span.icon');
-      expect(icon.getAttribute('aria-hidden')).toBe('true');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('button should be keyboard focusable', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      button.focus();
-      
-      expect(el.shadowRoot.activeElement).toBe(button);
-    });
-
-    it('button should toggle on click', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      
-      expect(el.opened).toBe(false);
-      button.click();
-      await el.updateComplete;
-      
-      expect(el.opened).toBe(true);
-    });
-  });
-
-  describe('Focus Management', () => {
-    it('should have visible focus outline (focus-visible)', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      
-      // Verify focus-visible CSS exists
-      const styles = el.shadowRoot.adoptedStyleSheets[0];
-      let hasFocusVisible = false;
-      for (const rule of styles.cssRules) {
-        if (rule.selectorText && rule.selectorText.includes('focus-visible')) {
-          hasFocusVisible = true;
-          break;
-        }
-      }
-      
-      expect(hasFocusVisible).toBe(true);
-    });
-  });
-
-  describe('Live Region Announcements', () => {
-    it('should dispatch live region announcement on expand', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Settings">
-          <div slot="accordion-item-content">Expanded content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      button.click();
-      await el.updateComplete;
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Verify that a live region element exists with status role
-      const liveRegions = el.querySelectorAll('[role="status"][aria-live]');
-      expect(liveRegions.length).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  describe('Content Visibility & Structure', () => {
-    it('content should be hidden when closed', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Hidden Content</div>
-        </dile-accordion-item>
-      `);
-      
-      expect(el.opened).toBe(false);
-      const button = el.shadowRoot.querySelector('button');
-      expect(button.className).not.toContain('opened');
-    });
-
-    it('content should be visible when opened', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item" opened>
-          <div slot="accordion-item-content">Visible Content</div>
-        </dile-accordion-item>
-      `);
-      
-      // Give time for animation to trigger
-      await new Promise(resolve => setTimeout(resolve, 150));
-      
-      expect(el.opened).toBe(true);
-      const button = el.shadowRoot.querySelector('button');
-      expect(button.className).toContain('opened');
-    });
-  });
-
-  describe('Multiple Items', () => {
-    it('only one item should be open at a time (mutually exclusive)', async () => {
-      const { accordion, items } = await renderAccordionGroup(`
-        <dile-accordion>
-          <dile-accordion-item title="Item 1">
-            <div slot="accordion-item-content">Content 1</div>
-          </dile-accordion-item>
-          <dile-accordion-item title="Item 2">
-            <div slot="accordion-item-content">Content 2</div>
-          </dile-accordion-item>
-        </dile-accordion>
-      `);
-      
-      const button1 = items[0].shadowRoot.querySelector('button');
-      const button2 = items[1].shadowRoot.querySelector('button');
-      
-      button1.click();
-      await items[0].updateComplete;
-      expect(items[0].opened).toBe(true);
-      
-      button2.click();
-      await items[1].updateComplete;
-      await items[0].updateComplete;
-      
-      expect(items[0].opened).toBe(false);
-      expect(items[1].opened).toBe(true);
-    });
-  });
-
-  describe('Unique IDs', () => {
-    it('each accordion item should have unique IDs', async () => {
-      const { items } = await renderAccordionGroup(`
-        <dile-accordion>
-          <dile-accordion-item title="Item 1">
-            <div slot="accordion-item-content">Content 1</div>
-          </dile-accordion-item>
-          <dile-accordion-item title="Item 2">
-            <div slot="accordion-item-content">Content 2</div>
-          </dile-accordion-item>
-        </dile-accordion>
-      `);
-      
-      const button1Id = items[0].shadowRoot.querySelector('button').id;
-      const button2Id = items[1].shadowRoot.querySelector('button').id;
-      
-      expect(button1Id).toBeTruthy();
-      expect(button2Id).toBeTruthy();
-      expect(button1Id).not.toBe(button2Id);
-    });
-  });
-});

package/components/app-drawer/app-drawer.spec.js

@@ -1,262 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './app-drawer.js';
-import { DILE_APP_DRAWER_EVENT_CLOSED, DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE } from './index.js';
-
-describe('dile-app-drawer', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  function wait(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  async function renderDrawer(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-app-drawer');
-    await el.updateComplete;
-    return el;
-  }
-
-  describe('Default state', () => {
-    it('defaults to direction "top" and closed', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-
-      expect(el.direction).toBe('top');
-      expect(el.opened).toBe(false);
-    });
-
-    it('reflects the opened property to the opened attribute', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-
-      el.open();
-      await el.updateComplete;
-
-      expect(el.hasAttribute('opened')).toBe(true);
-    });
-  });
-
-  describe('Public API', () => {
-    it('open() sets opened to true', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-
-      el.open();
-      await el.updateComplete;
-
-      expect(el.opened).toBe(true);
-    });
-
-    it('close() sets opened to false and dispatches dile-app-drawer-closed', async () => {
-      const el = await renderDrawer('<dile-app-drawer opened></dile-app-drawer>');
-      let fired = false;
-      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSED, () => { fired = true; });
-
-      el.close();
-      await el.updateComplete;
-
-      expect(el.opened).toBe(false);
-      expect(fired).toBe(true);
-    });
-
-    it('toggle() flips the opened state', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-
-      el.toggle();
-      await el.updateComplete;
-      expect(el.opened).toBe(true);
-
-      el.toggle();
-      await el.updateComplete;
-      expect(el.opened).toBe(false);
-    });
-  });
-
-  describe('Modal overlay', () => {
-    it('renders a modal overlay by default', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-
-      expect(el.shadowRoot.querySelector('.modal')).toBeTruthy();
-    });
-
-    it('does not render a modal overlay when no-modal is set', async () => {
-      const el = await renderDrawer('<dile-app-drawer no-modal></dile-app-drawer>');
-
-      expect(el.shadowRoot.querySelector('.modal')).toBeNull();
-    });
-
-    it('clicking the overlay closes the drawer and dispatches closed + click-outside events', async () => {
-      const el = await renderDrawer('<dile-app-drawer opened></dile-app-drawer>');
-      let closedFired = false;
-      let outsideFired = false;
-      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSED, () => { closedFired = true; });
-      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE, () => { outsideFired = true; });
-
-      el.shadowRoot.querySelector('.modal').click();
-      await el.updateComplete;
-
-      expect(el.opened).toBe(false);
-      expect(closedFired).toBe(true);
-      expect(outsideFired).toBe(true);
-    });
-
-    it('clicking the overlay while already closed does not dispatch events', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-      let outsideFired = false;
-      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE, () => { outsideFired = true; });
-
-      el.shadowRoot.querySelector('.modal').click();
-      await el.updateComplete;
-
-      expect(outsideFired).toBe(false);
-    });
-
-    it('stops click events on the menu content from bubbling past the drawer', async () => {
-      const el = await renderDrawer('<div id="wrapper"><dile-app-drawer opened></dile-app-drawer></div>');
-      const wrapper = document.querySelector('#wrapper');
-      let wrapperClicked = false;
-      wrapper.addEventListener('click', () => { wrapperClicked = true; });
-
-      el.shadowRoot.querySelector('.menu').click();
-
-      expect(wrapperClicked).toBe(false);
-      expect(el.opened).toBe(true);
-    });
-  });
-
-  describe('Dialog accessibility', () => {
-    it('renders the menu as a labeled, described dialog', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-      const menu = el.shadowRoot.querySelector('.menu');
-
-      expect(menu.getAttribute('role')).toBe('dialog');
-      expect(menu.getAttribute('aria-label')).toBe('Application menu');
-      expect(menu.getAttribute('aria-description')).toContain('Escape');
-    });
-
-    it('sets aria-modal to reflect the opened state', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-      const menu = el.shadowRoot.querySelector('.menu');
-
-      expect(menu.getAttribute('aria-modal')).toBe('false');
-
-      el.open();
-      await el.updateComplete;
-
-      expect(menu.getAttribute('aria-modal')).toBe('true');
-    });
-
-    it('marks the menu (and overlay) inert while closed, interactive while opened', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-      const menu = el.shadowRoot.querySelector('.menu');
-      const modal = el.shadowRoot.querySelector('.modal');
-
-      expect(menu.hasAttribute('inert')).toBe(true);
-      expect(modal.hasAttribute('inert')).toBe(true);
-
-      el.open();
-      await el.updateComplete;
-
-      expect(menu.hasAttribute('inert')).toBe(false);
-      expect(modal.hasAttribute('inert')).toBe(false);
-    });
-  });
-
-  describe('Keyboard - Escape', () => {
-    it('closes the drawer when Escape is pressed while opened', async () => {
-      const el = await renderDrawer('<dile-app-drawer opened></dile-app-drawer>');
-
-      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-      await el.updateComplete;
-
-      expect(el.opened).toBe(false);
-    });
-
-    it('does nothing when Escape is pressed while already closed', async () => {
-      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
-
-      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-      await el.updateComplete;
-
-      expect(el.opened).toBe(false);
-    });
-  });
-
-  describe('Focus management', () => {
-    it('moves focus into the menu when opened', async () => {
-      const el = await renderDrawer('<dile-app-drawer><button>Item</button></dile-app-drawer>');
-
-      el.open();
-      await el.updateComplete;
-
-      expect(el.shadowRoot.activeElement).toBe(el.shadowRoot.querySelector('.menu'));
-    });
-
-    it('restores focus to the trigger element after closing', async () => {
-      document.body.innerHTML = '<button id="trigger">Open</button><dile-app-drawer></dile-app-drawer>';
-      const trigger = document.querySelector('#trigger');
-      const el = document.querySelector('dile-app-drawer');
-      await el.updateComplete;
-
-      trigger.focus();
-      el.open();
-      await el.updateComplete;
-      el.close();
-      await el.updateComplete;
-      await wait(10);
-
-      expect(document.activeElement).toBe(trigger);
-    });
-
-    it('traps Tab focus: wraps from the last focusable element to the first', async () => {
-      const el = await renderDrawer(`
-        <dile-app-drawer opened>
-          <button id="first">First</button>
-          <button id="last">Last</button>
-        </dile-app-drawer>
-      `);
-      await el.updateComplete;
-      const first = el.querySelector('#first');
-      const last = el.querySelector('#last');
-
-      last.focus();
-      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true }));
-
-      expect(document.activeElement).toBe(first);
-    });
-
-    it('traps Shift+Tab focus: wraps from the first focusable element to the last', async () => {
-      const el = await renderDrawer(`
-        <dile-app-drawer opened>
-          <button id="first">First</button>
-          <button id="last">Last</button>
-        </dile-app-drawer>
-      `);
-      await el.updateComplete;
-      const first = el.querySelector('#first');
-      const last = el.querySelector('#last');
-
-      first.focus();
-      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, cancelable: true }));
-
-      expect(document.activeElement).toBe(last);
-    });
-
-    it('does not move focus when Tab is pressed with focus outside the drawer', async () => {
-      document.body.innerHTML = `
-        <input id="outside" />
-        <dile-app-drawer opened>
-          <button id="first">First</button>
-          <button id="last">Last</button>
-        </dile-app-drawer>
-      `;
-      const el = document.querySelector('dile-app-drawer');
-      await el.updateComplete;
-      const outside = document.querySelector('#outside');
-
-      outside.focus();
-      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true }));
-
-      expect(document.activeElement).toBe(outside);
-    });
-  });
-});

package/components/avatar/avatar.spec.js

@@ -1,25 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './avatar.js';
-
-describe('dile-avatar', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderAvatar(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-avatar');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders an image placeholder div when no initial is set', async () => {
-    const el = await renderAvatar('<dile-avatar></dile-avatar>');
-    expect(el.shadowRoot.querySelector('#img')).toBeTruthy();
-  });
-
-  it('renders the first letter of the initial property', async () => {
-    const el = await renderAvatar('<dile-avatar initial="Miguel"></dile-avatar>');
-    expect(el.shadowRoot.querySelector('.initial').textContent.trim()).toBe('M');
-  });
-});