@adia-ai/web-components 0.8.19 → 0.8.21

package/components/datetime-picker/datetime-picker.test.js

@@ -1,454 +0,0 @@
-/**
- * datetime-picker-ui — unit tests covering the SPEC-038 contract.
- *
- * Composition: <calendar-picker-ui> (date pane) + <time-picker-ui>
- * (time pane) inside a single <popover>. The host emits an ISO 8601
- * datetime string on commit.
- *
- * Run under happy-dom (per vitest.config.js). showPopover/hidePopover
- * are stubbed to no-ops by `packages/web-components/test-setup.js`, so
- * popover state is tracked via the `open` reflected attribute and the
- * `<popover>` div's presence, not via `:popover-open` selector matching.
- */
-
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import '../button/button.js';
-import '../popover/popover.js';
-import '../calendar-picker/calendar-picker.js';
-import '../time-picker/time-picker.js';
-import '../divider/divider.js';
-import './datetime-picker.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html.trim();
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-describe('datetime-picker-ui — structure + defaults', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('registers the custom element', () => {
-    expect(customElements.get('datetime-picker-ui')).toBeTruthy();
-  });
-
-  it('stamps a default <button-ui slot="trigger"> when no trigger is authored', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    expect(trigger).not.toBeNull();
-    expect(trigger.localName).toBe('button-ui');
-  });
-
-  it('stamps a popover container with role=dialog', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    const popover = el.querySelector(':scope > [slot="popover"]');
-    expect(popover).not.toBeNull();
-    expect(popover.getAttribute('role')).toBe('dialog');
-  });
-
-  it('stamps a single <calendar-grid-ui> as the date pane inside the popover', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    const popover = el.querySelector(':scope > [slot="popover"]');
-    const cal = popover.querySelector(':scope > calendar-grid-ui[data-cal-pane]');
-    expect(cal).not.toBeNull();
-  });
-
-  it('stamps a single <time-picker-ui> as the time pane inside the popover', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    const popover = el.querySelector(':scope > [slot="popover"]');
-    const time = popover.querySelector(':scope > time-picker-ui[data-time-pane]');
-    expect(time).not.toBeNull();
-  });
-
-  it('stamps a vertical <divider-ui> between the panes', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    const popover = el.querySelector(':scope > [slot="popover"]');
-    const div = popover.querySelector(':scope > divider-ui[data-pane-divider]');
-    expect(div).not.toBeNull();
-    expect(div.hasAttribute('vertical')).toBe(true);
-  });
-
-  it('host carries role=combobox + aria-haspopup=dialog + aria-expanded=false', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    expect(el.getAttribute('role')).toBe('combobox');
-    expect(el.getAttribute('aria-haspopup')).toBe('dialog');
-    expect(el.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  it('renders the placeholder in the trigger when value is empty', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    expect(trigger.getAttribute('text')).toBe('Select date and time');
-  });
-
-  it('uses a custom placeholder when supplied', async () => {
-    const el = mount('<datetime-picker-ui placeholder="Pick a moment"></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    expect(trigger.getAttribute('text')).toBe('Pick a moment');
-  });
-});
-
-describe('datetime-picker-ui — value reflection', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('parses ISO datetime value into date + time', async () => {
-    const el = mount('<datetime-picker-ui value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    expect(el.datetimeValue).toEqual({ date: '2026-05-24', time: '14:30' });
-  });
-
-  it('reflects value into the calendar pane (date portion)', async () => {
-    const el = mount('<datetime-picker-ui value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    const cal = el.querySelector('calendar-grid-ui[data-cal-pane]');
-    expect(cal.value).toBe('2026-05-24');
-  });
-
-  it('reflects value into the time pane (time portion)', async () => {
-    const el = mount('<datetime-picker-ui value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    expect(time.value).toBe('14:30');
-  });
-
-  it('renders formatted datetime in the trigger when value is set', async () => {
-    const el = mount('<datetime-picker-ui value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    expect(trigger.getAttribute('text')).toContain('May 24, 2026');
-    expect(trigger.getAttribute('text')).toContain('14:30');
-  });
-
-  it('format="long" renders the long-form month', async () => {
-    const el = mount('<datetime-picker-ui format="long" value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    expect(trigger.getAttribute('text')).toContain('May 24, 2026');
-  });
-
-  it('format="iso" renders the raw ISO date portion', async () => {
-    const el = mount('<datetime-picker-ui format="iso" value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    expect(trigger.getAttribute('text')).toContain('2026-05-24');
-  });
-
-  it('reflects [min] onto the calendar pane (date portion)', async () => {
-    const el = mount('<datetime-picker-ui min="2026-01-01T00:00"></datetime-picker-ui>');
-    await tick();
-    const cal = el.querySelector('calendar-grid-ui[data-cal-pane]');
-    expect(cal.getAttribute('min')).toBe('2026-01-01');
-  });
-
-  it('reflects [max] onto the calendar pane (date portion)', async () => {
-    const el = mount('<datetime-picker-ui max="2026-12-31T23:59"></datetime-picker-ui>');
-    await tick();
-    const cal = el.querySelector('calendar-grid-ui[data-cal-pane]');
-    expect(cal.getAttribute('max')).toBe('2026-12-31');
-  });
-
-  it('reflects [precision] onto the time pane', async () => {
-    const el = mount('<datetime-picker-ui precision="second"></datetime-picker-ui>');
-    await tick();
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    expect(time.getAttribute('precision')).toBe('second');
-  });
-
-  it('precision="second" stamps a seconds segment in the time pane', async () => {
-    const el = mount('<datetime-picker-ui precision="second" value="2026-05-24T14:30:45"></datetime-picker-ui>');
-    await tick();
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    expect(time.querySelector('[data-segment="second"]')).not.toBeNull();
-  });
-
-  it('hour-cycle="h12" stamps an AM/PM segment in the time pane', async () => {
-    const el = mount('<datetime-picker-ui hour-cycle="h12" value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    expect(time.querySelector('[data-segment="meridiem"]')).not.toBeNull();
-  });
-
-  it('hour-cycle="h23" hides the AM/PM segment in the time pane', async () => {
-    const el = mount('<datetime-picker-ui hour-cycle="h23" value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    expect(time.querySelector('[data-segment="meridiem"]')).toBeNull();
-  });
-
-  it('reflects [step] onto the time pane', async () => {
-    const el = mount('<datetime-picker-ui step="900"></datetime-picker-ui>');
-    await tick();
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    expect(time.getAttribute('step')).toBe('900');
-  });
-});
-
-describe('datetime-picker-ui — open / close behavior', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('opens on trigger click + emits `open` event', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    let openDetail = null;
-    el.addEventListener('open', (e) => { openDetail = e.detail; });
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    trigger.click();
-    await tick();
-    expect(el.open).toBe(true);
-    expect(el.hasAttribute('open')).toBe(true);
-    expect(el.getAttribute('aria-expanded')).toBe('true');
-    expect(openDetail?.trigger).toBe('click');
-  });
-
-  it('closes on second trigger click + emits `close`', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    let closeDetail = null;
-    el.addEventListener('close', (e) => { closeDetail = e.detail; });
-    trigger.click();
-    await tick();
-    trigger.click();
-    await tick();
-    expect(el.open).toBe(false);
-    expect(closeDetail).not.toBeNull();
-  });
-
-  it('Escape closes the popover + emits close with reason "escape"', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    el.open = true;
-    await tick();
-    let reason = null;
-    el.addEventListener('close', (e) => { reason = e.detail?.reason; });
-    const popover = el.querySelector(':scope > [slot="popover"]');
-    const ev = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
-    popover.dispatchEvent(ev);
-    await tick();
-    expect(el.open).toBe(false);
-    expect(reason).toBe('escape');
-  });
-
-  it('Enter on the trigger opens with trigger=keyboard', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    let openDetail = null;
-    el.addEventListener('open', (e) => { openDetail = e.detail; });
-    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
-    await tick();
-    expect(el.open).toBe(true);
-    expect(openDetail?.trigger).toBe('keyboard');
-  });
-
-  it('[disabled] blocks the trigger from opening', async () => {
-    const el = mount('<datetime-picker-ui disabled></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    trigger.click();
-    await tick();
-    expect(el.open).toBe(false);
-  });
-
-  it('[readonly] blocks the popover from opening', async () => {
-    const el = mount('<datetime-picker-ui readonly></datetime-picker-ui>');
-    await tick();
-    const trigger = el.querySelector(':scope > [slot="trigger"]');
-    trigger.click();
-    await tick();
-    expect(el.open).toBe(false);
-  });
-
-  it('openPopover() opens programmatically with trigger=programmatic', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    let openDetail = null;
-    el.addEventListener('open', (e) => { openDetail = e.detail; });
-    el.openPopover();
-    await tick();
-    expect(el.open).toBe(true);
-    expect(openDetail?.trigger).toBe('programmatic');
-  });
-});
-
-describe('datetime-picker-ui — selection + commit', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('emits `input` (partial state) when only the date is picked', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    let inputDetail = null;
-    let changeFired = false;
-    el.addEventListener('input', (e) => { inputDetail = e.detail; });
-    el.addEventListener('change', () => { changeFired = true; });
-    const cal = el.querySelector('calendar-grid-ui[data-cal-pane]');
-    cal.value = '2026-03-15';
-    cal.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '2026-03-15' } }));
-    await tick();
-    expect(inputDetail).not.toBeNull();
-    expect(inputDetail.value).toContain('2026-03-15');
-    expect(changeFired).toBe(false);
-  });
-
-  it('commits `change` when both panes have selections', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    let detail = null;
-    el.addEventListener('change', (e) => { detail = e.detail; });
-    const cal = el.querySelector('calendar-grid-ui[data-cal-pane]');
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    cal.value = '2026-03-01';
-    cal.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '2026-03-01' } }));
-    await tick();
-    time.value = '14:30';
-    time.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '14:30', segment: 'minute' } }));
-    await tick();
-    expect(detail).not.toBeNull();
-    expect(detail.value).toBe('2026-03-01T14:30');
-    expect(el.value).toBe('2026-03-01T14:30');
-  });
-
-  it('time-pane change with existing date in value commits without re-picking date', async () => {
-    const el = mount('<datetime-picker-ui value="2026-03-01T09:00"></datetime-picker-ui>');
-    await tick();
-    let detail = null;
-    el.addEventListener('change', (e) => { detail = e.detail; });
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    time.value = '14:30';
-    time.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '14:30', segment: 'hour' } }));
-    await tick();
-    expect(detail.value).toBe('2026-03-01T14:30');
-  });
-
-  it('out-of-range commit fires `invalid`, not `change`', async () => {
-    const el = mount('<datetime-picker-ui min="2026-06-01T00:00" max="2026-06-30T23:59"></datetime-picker-ui>');
-    await tick();
-    let invalidDetail = null;
-    let changeFired = false;
-    el.addEventListener('invalid', (e) => { invalidDetail = e.detail; });
-    el.addEventListener('change', () => { changeFired = true; });
-    const cal = el.querySelector('calendar-grid-ui[data-cal-pane]');
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    cal.value = '2026-05-01';
-    cal.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '2026-05-01' } }));
-    await tick();
-    time.value = '12:00';
-    time.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '12:00', segment: 'hour' } }));
-    await tick();
-    expect(invalidDetail).not.toBeNull();
-    expect(invalidDetail.reason).toBe('below-min');
-    expect(changeFired).toBe(false);
-  });
-
-  it('precision="second" emits HH:mm:ss-formatted value on commit', async () => {
-    const el = mount('<datetime-picker-ui precision="second" step="1"></datetime-picker-ui>');
-    await tick();
-    let detail = null;
-    el.addEventListener('change', (e) => { detail = e.detail; });
-    const cal = el.querySelector('calendar-grid-ui[data-cal-pane]');
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    cal.value = '2026-03-01';
-    cal.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '2026-03-01' } }));
-    await tick();
-    time.value = '14:30:45';
-    time.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '14:30:45', segment: 'second' } }));
-    await tick();
-    expect(detail.value).toBe('2026-03-01T14:30:45');
-  });
-
-  it('clear() resets the value', async () => {
-    const el = mount('<datetime-picker-ui value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    el.clear();
-    await tick();
-    expect(el.value).toBe('');
-    expect(el.datetimeValue).toBeNull();
-  });
-
-  it('change event carries source field', async () => {
-    const el = mount('<datetime-picker-ui></datetime-picker-ui>');
-    await tick();
-    let detail = null;
-    el.addEventListener('change', (e) => { detail = e.detail; });
-    const cal = el.querySelector('calendar-grid-ui[data-cal-pane]');
-    const time = el.querySelector('time-picker-ui[data-time-pane]');
-    cal.value = '2026-03-01';
-    cal.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '2026-03-01' } }));
-    await tick();
-    time.value = '14:30';
-    time.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '14:30', segment: 'hour' } }));
-    await tick();
-    expect(detail.source).toBe('click');
-  });
-});
-
-describe('datetime-picker-ui — form participation', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('is form-associated', () => {
-    expect(customElements.get('datetime-picker-ui').formAssociated).toBe(true);
-  });
-
-  it('exposes ElementInternals via the host', async () => {
-    const el = mount('<datetime-picker-ui name="appointment"></datetime-picker-ui>');
-    await tick();
-    expect(el.internals).toBeDefined();
-    expect(typeof el.internals.setFormValue).toBe('function');
-  });
-
-  it('syncValue writes the ISO datetime to the form', async () => {
-    const el = mount('<datetime-picker-ui name="appointment" value="2026-05-24T14:30"></datetime-picker-ui>');
-    await tick();
-    expect(() => el.syncValue('2026-05-24T14:30')).not.toThrow();
-  });
-
-  it('invalid datetime string does not throw under syncValue', async () => {
-    const el = mount('<datetime-picker-ui name="appointment"></datetime-picker-ui>');
-    await tick();
-    expect(() => el.syncValue('not-a-datetime')).not.toThrow();
-  });
-});
-
-describe('datetime-picker-ui — slots', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('consumer-supplied [slot="trigger"] is preserved', async () => {
-    const el = mount(`
-      <datetime-picker-ui>
-        <button-ui slot="trigger" variant="primary" text="Pick"></button-ui>
-      </datetime-picker-ui>
-    `);
-    await tick();
-    const triggers = el.querySelectorAll(':scope > [slot="trigger"]');
-    expect(triggers.length).toBe(1);
-    expect(triggers[0].getAttribute('variant')).toBe('primary');
-  });
-
-  it('consumer-supplied [slot="footer"] is lifted into the popover', async () => {
-    const el = mount(`
-      <datetime-picker-ui>
-        <div slot="footer">
-          <button-ui data-action="cancel" text="Cancel"></button-ui>
-          <button-ui data-action="apply" variant="primary" text="Apply"></button-ui>
-        </div>
-      </datetime-picker-ui>
-    `);
-    await tick();
-    const popover = el.querySelector(':scope > [slot="popover"]');
-    const footer = popover.querySelector(':scope > [slot="footer"]');
-    expect(footer).not.toBeNull();
-    expect(footer.children.length).toBe(2);
-  });
-});

package/components/demo-toggle/demo-toggle.test.js

@@ -1,102 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './demo-toggle.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html;
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-describe('demo-toggle-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('registers demo-toggle-ui as a custom element', () => {
-    expect(customElements.get('demo-toggle-ui')).toBeDefined();
-  });
-
-  it('defaults to state="off" when [initial] is not set', async () => {
-    const el = mount('<demo-toggle-ui></demo-toggle-ui>');
-    await tick();
-    expect(el.state).toBe('off');
-    expect(el.getAttribute('state')).toBe('off');
-  });
-
-  it('honors [initial="on"] on connect', async () => {
-    const el = mount('<demo-toggle-ui initial="on"></demo-toggle-ui>');
-    await tick();
-    expect(el.state).toBe('on');
-  });
-
-  it('renders the auto-stamped header bar with switch + label', async () => {
-    const el = mount('<demo-toggle-ui label-on="Foo" label-off="Bar"></demo-toggle-ui>');
-    await tick();
-    const bar = el.querySelector('[slot="bar"]');
-    const sw  = el.querySelector('[data-demo-toggle-switch]');
-    const label = el.querySelector('[data-demo-toggle-label]');
-    expect(bar).toBeTruthy();
-    expect(sw).toBeTruthy();
-    expect(label).toBeTruthy();
-    // state defaults to "off"; label-off should be active
-    expect(label.textContent).toBe('Bar');
-  });
-
-  it('toggle() flips state and emits change with detail.state', async () => {
-    const el = mount('<demo-toggle-ui></demo-toggle-ui>');
-    await tick();
-    const events = [];
-    el.addEventListener('change', (e) => events.push(e.detail));
-
-    el.toggle();
-    expect(el.state).toBe('on');
-    expect(events).toHaveLength(1);
-    expect(events[0]).toEqual({ state: 'on' });
-
-    el.toggle();
-    expect(el.state).toBe('off');
-    expect(events).toHaveLength(2);
-    expect(events[1]).toEqual({ state: 'off' });
-  });
-
-  it('clicking the embedded switch flips host state and bubbles change', async () => {
-    const el = mount('<demo-toggle-ui></demo-toggle-ui>');
-    await tick();
-    const sw = el.querySelector('[data-demo-toggle-switch]');
-
-    const events = [];
-    el.addEventListener('change', (e) => events.push(e.detail));
-
-    sw.click();
-    await tick();
-    expect(el.state).toBe('on');
-    expect(events).toHaveLength(1);
-    expect(events[0]).toEqual({ state: 'on' });
-  });
-
-  it('reflects state to the [state] attribute', async () => {
-    const el = mount('<demo-toggle-ui initial="on"></demo-toggle-ui>');
-    await tick();
-    expect(el.getAttribute('state')).toBe('on');
-    el.toggle();
-    expect(el.getAttribute('state')).toBe('off');
-  });
-
-  it('coerces an invalid [state] attribute to "off"', async () => {
-    const el = mount('<demo-toggle-ui state="garbage"></demo-toggle-ui>');
-    await tick();
-    expect(el.state).toBe('off');
-  });
-
-  it('updates the active label when state flips', async () => {
-    const el = mount('<demo-toggle-ui label-on="With trait" label-off="Without trait"></demo-toggle-ui>');
-    await tick();
-    const label = el.querySelector('[data-demo-toggle-label]');
-    expect(label.textContent).toBe('Without trait');
-    el.toggle();
-    await tick();
-    expect(label.textContent).toBe('With trait');
-  });
-});

package/components/description-list/description-list.test.js

@@ -1,72 +0,0 @@
-/**
- * <description-list-ui> behavioral tests.
- *
- * FB-51 #3 (v0.5.19): align="stretch" lets <dd> fill the remaining
- * inline-grid track width so block-level form controls inside (e.g.
- * <slider-ui>, <select-ui>, <color-picker-ui>) reach the column edge
- * rather than shrink-wrapping to content.
- */
-
-import { describe, it, expect, beforeAll, beforeEach, afterEach } from 'vitest';
-import { readFileSync } from 'node:fs';
-import { resolve, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const HERE = dirname(fileURLToPath(import.meta.url));
-
-beforeAll(async () => {
-  await import('./description-list.js');
-});
-
-describe('<description-list-ui> align="stretch" (FB-51 #3)', () => {
-  let host;
-  let dl;
-
-  beforeEach(async () => {
-    host = document.createElement('div');
-    host.style.width = '600px';
-    document.body.appendChild(host);
-
-    dl = document.createElement('description-list-ui');
-    dl.setAttribute('layout', 'inline');
-    dl.setAttribute('align', 'stretch');
-
-    const dt = document.createElement('dt');
-    dt.textContent = 'Source hue';
-    const dd = document.createElement('dd');
-    dd.id = 'fb51-stretch-dd';
-    const probe = document.createElement('div');
-    probe.id = 'fb51-stretch-probe';
-    probe.textContent = 'inner';
-    dd.appendChild(probe);
-    dl.appendChild(dt);
-    dl.appendChild(dd);
-
-    host.appendChild(dl);
-    await new Promise((r) => setTimeout(r, 50));
-  });
-
-  afterEach(() => {
-    host.remove();
-  });
-
-  it('CSS source declares justify-self: stretch + width: 100% for align="stretch" inline layout', () => {
-    const cssText = readFileSync(resolve(HERE, 'description-list.css'), 'utf8');
-    expect(cssText).toMatch(/\[layout="inline"\]\[align="stretch"\][^{]*\{[^}]*justify-self:\s*stretch/);
-    expect(cssText).toMatch(/\[layout="inline"\]\[align="stretch"\][^{]*\{[^}]*width:\s*100%/);
-  });
-
-  it('host carries the align="stretch" attribute (CSS selector match precondition)', () => {
-    expect(dl.getAttribute('align')).toBe('stretch');
-    expect(dl.getAttribute('layout')).toBe('inline');
-  });
-
-  it('yaml enum includes "stretch" (schema contract)', () => {
-    const yamlText = readFileSync(resolve(HERE, 'description-list.yaml'), 'utf8');
-    // Match the align enum block specifically (between `align:` and the next prop).
-    const alignBlock = yamlText.match(/align:[\s\S]*?(?=\n  \w+:)/)?.[0] || '';
-    expect(alignBlock).toMatch(/enum:[\s\S]*-\s+start/);
-    expect(alignBlock).toMatch(/enum:[\s\S]*-\s+between/);
-    expect(alignBlock).toMatch(/enum:[\s\S]*-\s+stretch/);
-  });
-});