@dile/ui 3.17.1 → 3.18.1

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');
-  });
-});

package/components/bottom-nav/bottom-nav.spec.js

@@ -1,340 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import '@dile/iconlib/lucide-icons/house.js';
-import './bottom-nav.js';
-
-describe('dile-bottom-nav', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-    document.documentElement.style.overflow = '';
-  });
-
-  async function renderNav(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-bottom-nav');
-    await el.updateComplete;
-    const items = [...el.querySelectorAll('dile-bottom-nav-item')];
-    await Promise.all(items.map((item) => item.updateComplete));
-    // Wait for slotchange to detect the sheets.
-    await new Promise((resolve) => setTimeout(resolve));
-    await Promise.all(items.map((item) => item.updateComplete));
-    return { el, items };
-  }
-
-  function trigger(item) {
-    return item.shadowRoot.querySelector('.trigger');
-  }
-
-  it('renders a navigation landmark with the slotted items', async () => {
-    const { el, items } = await renderNav(`
-      <dile-bottom-nav label="App navigation">
-        <dile-bottom-nav-item label="Home"></dile-bottom-nav-item>
-        <dile-bottom-nav-item label="Search"></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    const nav = el.shadowRoot.querySelector('nav');
-    expect(nav.getAttribute('aria-label')).toBe('App navigation');
-    expect(items.length).toBe(2);
-    expect(items[0].shadowRoot.querySelector('.label').textContent).toBe('Home');
-  });
-
-  it('is fixed by default and in the document flow when static', async () => {
-    const { el } = await renderNav(`<dile-bottom-nav></dile-bottom-nav>`);
-    expect(getComputedStyle(el).position).toBe('fixed');
-
-    el.static = true;
-    await el.updateComplete;
-    expect(getComputedStyle(el).position).toBe('relative');
-  });
-
-  it('compensates the scrollbar width in the fixed bar while the page scroll is locked', async () => {
-    const { el } = await renderNav(`<dile-bottom-nav></dile-bottom-nav>`);
-    document.documentElement.style.setProperty('--dile-bottom-nav-scrollbar-width', '15px');
-
-    expect(getComputedStyle(el).paddingRight).toBe('15px');
-    el.static = true;
-    await el.updateComplete;
-    expect(getComputedStyle(el).paddingRight).toBe('0px');
-
-    document.documentElement.style.removeProperty('--dile-bottom-nav-scrollbar-width');
-  });
-
-  it('renders the icon of the item from a dile-iconlib string', async () => {
-    const { items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item label="Home" icon="lucide.house"></dile-bottom-nav-item>
-        <dile-bottom-nav-item label="Search"></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    const icon = items[0].shadowRoot.querySelector('dile-iconlib');
-    expect(icon.getAttribute('icon')).toBe('lucide.house');
-    expect(items[1].shadowRoot.querySelector('dile-iconlib')).toBeNull();
-  });
-
-  it('marks the selected item by attribute and changes selection on click', async () => {
-    const { el, items } = await renderNav(`
-      <dile-bottom-nav attrForSelected="name" selected="home">
-        <dile-bottom-nav-item name="home" label="Home"></dile-bottom-nav-item>
-        <dile-bottom-nav-item name="search" label="Search"></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    expect(items[0].selected).toBe(true);
-    expect(trigger(items[0]).getAttribute('aria-current')).toBe('page');
-
-    let detail;
-    el.addEventListener('dile-selected-changed', (e) => { detail = e.detail; });
-    trigger(items[1]).click();
-    await el.updateComplete;
-
-    expect(el.selected).toBe('search');
-    expect(detail.selected).toBe('search');
-    expect(items[1].selected).toBe(true);
-    expect(items[0].selected).toBe(false);
-  });
-
-  it('dispatches dile-bottom-nav-item-click with the item name', async () => {
-    const { el, items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item name="home" label="Home"></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    let detail;
-    el.addEventListener('dile-bottom-nav-item-click', (e) => { detail = e.detail; });
-    trigger(items[0]).click();
-
-    expect(detail.name).toBe('home');
-  });
-
-  it('renders a native link when the item has an href', async () => {
-    const { items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item label="Home" href="#home" target="_self"></dile-bottom-nav-item>
-        <dile-bottom-nav-item label="Search"></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    const link = items[0].shadowRoot.querySelector('a');
-    expect(link.getAttribute('href')).toBe('#home');
-    expect(link.getAttribute('target')).toBe('_self');
-    expect(items[1].shadowRoot.querySelector('a')).toBeNull();
-  });
-
-  it('opens the bottom sheet of an item with slotted content without changing the selection', async () => {
-    const { el, items } = await renderNav(`
-      <dile-bottom-nav attrForSelected="name" selected="home">
-        <dile-bottom-nav-item name="home" label="Home"></dile-bottom-nav-item>
-        <dile-bottom-nav-item name="create" label="Create">
-          <a href="#new">New</a>
-        </dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    const button = trigger(items[1]);
-    expect(button.getAttribute('aria-haspopup')).toBe('dialog');
-    expect(button.getAttribute('aria-expanded')).toBe('false');
-
-    let opened = false;
-    el.addEventListener('dile-bottom-nav-sheet-opened', () => { opened = true; });
-    button.click();
-    await items[1].updateComplete;
-
-    expect(items[1].opened).toBe(true);
-    expect(opened).toBe(true);
-    expect(button.getAttribute('aria-expanded')).toBe('true');
-    expect(document.documentElement.style.overflow).toBe('hidden');
-    expect(el.selected).toBe('home');
-    expect(items[0].selected).toBe(true);
-  });
-
-  it('closes the sheet when clicking the overlay', async () => {
-    const { items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item label="Create"><p>Content</p></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    await items[0].open();
-    let closed = false;
-    items[0].addEventListener('dile-bottom-nav-sheet-closed', () => { closed = true; });
-    items[0].shadowRoot.querySelector('.overlay').click();
-    await items[0].updateComplete;
-
-    expect(items[0].opened).toBe(false);
-    expect(closed).toBe(true);
-    expect(document.documentElement.style.overflow).toBe('');
-  });
-
-  it('closes the sheet when pressing Escape', async () => {
-    const { items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item label="Create"><p>Content</p></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    await items[0].open();
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    await items[0].updateComplete;
-
-    expect(items[0].opened).toBe(false);
-  });
-
-  it('closes the sheet when clicking an element with data-close', async () => {
-    const { items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item label="Create">
-          <button id="keep">Keep</button>
-          <button id="close" data-close>Close</button>
-        </dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    await items[0].open();
-    document.getElementById('keep').click();
-    await items[0].updateComplete;
-    expect(items[0].opened).toBe(true);
-
-    document.getElementById('close').click();
-    await items[0].updateComplete;
-    expect(items[0].opened).toBe(false);
-  });
-
-  it('closes the sheet when clicking any link or button with close-on-click', async () => {
-    const { items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item label="Create" close-on-click>
-          <button id="action">Action</button>
-        </dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    await items[0].open();
-    document.getElementById('action').click();
-    await items[0].updateComplete;
-
-    expect(items[0].opened).toBe(false);
-  });
-
-  it('keeps only one sheet opened at a time', async () => {
-    const { items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item label="One"><p>One</p></dile-bottom-nav-item>
-        <dile-bottom-nav-item label="Two"><p>Two</p></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    await items[0].open();
-    await items[1].open();
-    await items[0].updateComplete;
-
-    expect(items[0].opened).toBe(false);
-    expect(items[1].opened).toBe(true);
-  });
-
-  it('replaces the item icon with the close icon while the sheet is opened', async () => {
-    const { items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item label="Create"><p>Content</p></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    expect(items[0].shadowRoot.querySelector('.close-icon')).toBeNull();
-    await items[0].open();
-    expect(items[0].shadowRoot.querySelector('.close-icon dile-iconlib').getAttribute('icon')).toBe('lucide.x');
-    expect(items[0].shadowRoot.querySelector('.trigger').textContent).toContain('Create');
-
-    trigger(items[0]).click();
-    await items[0].updateComplete;
-    expect(items[0].opened).toBe(false);
-    expect(items[0].shadowRoot.querySelector('.close-icon')).toBeNull();
-  });
-
-  it('places the sheet and the overlay above the bar', async () => {
-    const { el, items } = await renderNav(`
-      <dile-bottom-nav>
-        <dile-bottom-nav-item label="Create"><p>Content</p></dile-bottom-nav-item>
-      </dile-bottom-nav>
-    `);
-
-    await items[0].open();
-    await items[0].updateComplete;
-    const barTop = el.getBoundingClientRect().top;
-    const barHeight = window.innerHeight - barTop;
-    // Read the computed bottom instead of the bounding box, which is affected by the opening transition.
-    const sheetBottom = parseFloat(getComputedStyle(items[0].shadowRoot.querySelector('.sheet')).bottom);
-    const overlay = items[0].shadowRoot.querySelector('.overlay').getBoundingClientRect();
-
-    expect(sheetBottom).toBeGreaterThanOrEqual(Math.floor(barHeight));
-    expect(Math.round(overlay.bottom)).toBe(Math.round(barTop));
-  });
-
-  describe('static bar', () => {
-    async function renderStatic() {
-      const result = await renderNav(`
-        <div style="height: 400px"></div>
-        <dile-bottom-nav static style="width: 300px; margin: 0 auto;">
-          <dile-bottom-nav-item label="Home"></dile-bottom-nav-item>
-          <dile-bottom-nav-item label="Create"><button id="inside">Inside</button></dile-bottom-nav-item>
-        </dile-bottom-nav>
-        <button id="outside">Outside</button>
-      `);
-      await result.items[1].open();
-      await result.items[1].updateComplete;
-      return result;
-    }
-
-    it('opens a floating sheet without overlay and without locking the page scroll', async () => {
-      const { items } = await renderStatic();
-      const overlay = items[1].shadowRoot.querySelector('.overlay');
-      const sheet = items[1].shadowRoot.querySelector('.sheet');
-
-      expect(getComputedStyle(overlay).display).toBe('none');
-      expect(sheet.classList.contains('floating')).toBe(true);
-      expect(sheet.getAttribute('aria-modal')).toBe('false');
-      expect(document.documentElement.style.overflow).toBe('');
-    });
-
-    it('places the floating sheet above the trigger, centered and inside the viewport', async () => {
-      const { items } = await renderStatic();
-      const sheet = items[1].shadowRoot.querySelector('.sheet');
-      const triggerRect = trigger(items[1]).getBoundingClientRect();
-      // Inline position set by DileOverlay, not affected by the opening transition.
-      const top = parseFloat(sheet.style.top);
-      const left = parseFloat(sheet.style.left);
-      const width = sheet.offsetWidth;
-
-      expect(top + sheet.offsetHeight).toBeLessThanOrEqual(triggerRect.top);
-      expect(left).toBeGreaterThanOrEqual(10);
-      expect(left + width).toBeLessThanOrEqual(document.documentElement.clientWidth - 10);
-      const centered = triggerRect.left + triggerRect.width / 2 - width / 2;
-      const clamped = Math.min(Math.max(centered, 10), document.documentElement.clientWidth - width - 15);
-      expect(Math.round(left)).toBe(Math.round(clamped));
-    });
-
-    it('closes the floating sheet when clicking outside, but not inside', async () => {
-      const { items } = await renderStatic();
-
-      document.getElementById('inside').click();
-      await items[1].updateComplete;
-      expect(items[1].opened).toBe(true);
-
-      document.getElementById('outside').click();
-      await items[1].updateComplete;
-      expect(items[1].opened).toBe(false);
-    });
-
-    it('toggles the floating sheet from the trigger', async () => {
-      const { items } = await renderStatic();
-
-      trigger(items[1]).click();
-      await items[1].updateComplete;
-      expect(items[1].opened).toBe(false);
-
-      trigger(items[1]).click();
-      await items[1].updateComplete;
-      expect(items[1].opened).toBe(true);
-    });
-  });
-});

package/components/box-selector/box-selector-item.spec.js

@@ -1,27 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './box-selector-item.js';
-
-describe('dile-box-selector-item', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderItem(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-box-selector-item');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the label property', async () => {
-    const el = await renderItem('<dile-box-selector-item label="Option A"></dile-box-selector-item>');
-    expect(el.shadowRoot.textContent.trim()).toBe('Option A');
-  });
-
-  it('reflects selected attribute when clicked', async () => {
-    const el = await renderItem('<dile-box-selector-item label="Option A"></dile-box-selector-item>');
-    el.select();
-    await el.updateComplete;
-    expect(el.selected).toBe(false);
-  });
-});

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

@@ -1,27 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './box-selector.js';
-import './box-selector-item.js';
-
-describe('dile-box-selector', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderSelector(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-box-selector');
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders the slotted items', async () => {
-    const el = await renderSelector(`
-      <dile-box-selector>
-        <dile-box-selector-item label="One"></dile-box-selector-item>
-        <dile-box-selector-item label="Two"></dile-box-selector-item>
-      </dile-box-selector>
-    `);
-    expect(el.shadowRoot.querySelector('slot')).toBeTruthy();
-    expect(el.querySelectorAll('dile-box-selector-item').length).toBe(2);
-  });
-});