@dile/ui 3.4.4 → 3.4.6

package/components/accordion/accordion-item.js

@@ -1,3 +1,5 @@
 import { DileAccordionItem } from './src/DileAccordionItem.js';
 
-window.customElements.define('dile-accordion-item', DileAccordionItem);
+if (!customElements.get('dile-accordion-item')) {
+  window.customElements.define('dile-accordion-item', DileAccordionItem);
+}

package/components/accordion/accordion.js

@@ -1,3 +1,5 @@
 import { DileAccordion } from './src/DileAccordion.js';
 
-window.customElements.define('dile-accordion', DileAccordion);
+if (!customElements.get('dile-accordion')) {
+  window.customElements.define('dile-accordion', DileAccordion);
+}

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

@@ -1,3 +1,5 @@
 import { DileAppDrawer } from "./src/DileAppDrawer.js";
 
-customElements.define("dile-app-drawer", DileAppDrawer);
+if (!customElements.get("dile-app-drawer")) {
+  customElements.define("dile-app-drawer", DileAppDrawer);
+}

package/components/avatar/avatar.js

@@ -1,3 +1,5 @@
 import { DileAvatar } from "./src/DileAvatar.js";
 
-window.customElements.define("dile-avatar", DileAvatar);
+if (!customElements.get("dile-avatar")) {
+  window.customElements.define("dile-avatar", DileAvatar);
+}

package/components/avatar/avatar.spec.js

@@ -0,0 +1,25 @@
+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/box-selector/box-selector-item.js

@@ -1,2 +1,4 @@
 import { DileBoxSelectorItem } from './src/DileBoxSelectorItem.js';
-customElements.define("dile-box-selector-item", DileBoxSelectorItem);
+if (!customElements.get("dile-box-selector-item")) {
+  customElements.define("dile-box-selector-item", DileBoxSelectorItem);
+}

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

@@ -0,0 +1,27 @@
+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.js

@@ -1,2 +1,4 @@
 import { DileBoxSelector } from './src/DileBoxSelector.js'
-customElements.define("dile-box-selector", DileBoxSelector);
+if (!customElements.get("dile-box-selector")) {
+  customElements.define("dile-box-selector", DileBoxSelector);
+}

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

@@ -0,0 +1,27 @@
+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);
+  });
+});

package/components/breadcrumbs/breadcrumbs-item.js

@@ -1,3 +1,5 @@
 import { DileBreadcrumbsItem } from "./src/DileBreadcrumbsItem.js";
 
-window.customElements.define("dile-breadcrumbs-item", DileBreadcrumbsItem);
+if (!customElements.get("dile-breadcrumbs-item")) {
+  window.customElements.define("dile-breadcrumbs-item", DileBreadcrumbsItem);
+}

package/components/breadcrumbs/breadcrumbs-item.spec.js

@@ -0,0 +1,28 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './breadcrumbs-item.js';
+
+describe('dile-breadcrumbs-item', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderItem(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-breadcrumbs-item');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an anchor when href is set', async () => {
+    const el = await renderItem('<dile-breadcrumbs-item href="/home">Home</dile-breadcrumbs-item>');
+    const anchor = el.shadowRoot.querySelector('a');
+    expect(anchor).toBeTruthy();
+    expect(anchor.getAttribute('href')).toBe('/home');
+  });
+
+  it('renders a span when href is not set', async () => {
+    const el = await renderItem('<dile-breadcrumbs-item>Current</dile-breadcrumbs-item>');
+    expect(el.shadowRoot.querySelector('span')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('a')).toBeNull();
+  });
+});

package/components/breadcrumbs/breadcrumbs.js

@@ -1,4 +1,6 @@
 import './breadcrumbs-item.js';
 import { DileBreadcrumbs } from "./src/DileBreadcrumbs.js";
 
-window.customElements.define("dile-breadcrumbs", DileBreadcrumbs);
+if (!customElements.get("dile-breadcrumbs")) {
+  window.customElements.define("dile-breadcrumbs", DileBreadcrumbs);
+}

package/components/breadcrumbs/breadcrumbs.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './breadcrumbs.js';
+
+describe('dile-breadcrumbs', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderBreadcrumbs(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-breadcrumbs');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders slotted breadcrumb items', async () => {
+    const el = await renderBreadcrumbs(`
+      <dile-breadcrumbs>
+        <dile-breadcrumbs-item href="/">Home</dile-breadcrumbs-item>
+        <dile-breadcrumbs-item>Current</dile-breadcrumbs-item>
+      </dile-breadcrumbs>
+    `);
+    expect(el.querySelectorAll('dile-breadcrumbs-item').length).toBe(2);
+  });
+
+  it('renders items from the items property', async () => {
+    const el = await renderBreadcrumbs('<dile-breadcrumbs></dile-breadcrumbs>');
+    el.items = [{ text: 'Home', href: '/' }, { text: 'Page' }];
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelectorAll('dile-breadcrumbs-item').length).toBe(2);
+  });
+});

package/components/button/button-icon.js

@@ -1,3 +1,5 @@
 import { DileButtonIcon } from "./src/DileButtonIcon.js";
 
-window.customElements.define("dile-button-icon", DileButtonIcon);
+if (!customElements.get("dile-button-icon")) {
+  window.customElements.define("dile-button-icon", DileButtonIcon);
+}

package/components/button/button.js

@@ -1,3 +1,5 @@
 import { DileButton } from "./src/DileButton.js";
 
-window.customElements.define("dile-button", DileButton);
+if (!customElements.get("dile-button")) {
+  window.customElements.define("dile-button", DileButton);
+}

package/components/button/button.spec.js

@@ -45,4 +45,138 @@ describe('dile-button', () => {
 
     expect(el.shadowRoot.querySelector('dile-spinner-icon')).toBeTruthy();
   });
+
+  describe('Native form submission', () => {
+    it('includes name/value in the FormData when clicked', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-button type="submit" name="action" value="save">Save</dile-button>
+        </form>
+      `;
+      const form = document.getElementById('testForm');
+      const el = document.body.querySelector('dile-button');
+      await el.updateComplete;
+
+      let capturedFormData = null;
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        capturedFormData = new FormData(form);
+      });
+
+      el.shadowRoot.querySelector('button').click();
+
+      expect(capturedFormData.get('action')).toBe('save');
+    });
+
+    it('does not submit a name/value pair when the button has no value', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-button type="submit" name="action">Save</dile-button>
+        </form>
+      `;
+      const form = document.getElementById('testForm');
+      const el = document.body.querySelector('dile-button');
+      await el.updateComplete;
+
+      let capturedFormData = null;
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        capturedFormData = new FormData(form);
+      });
+
+      el.shadowRoot.querySelector('button').click();
+
+      expect(capturedFormData.has('action')).toBe(false);
+    });
+
+    it('participates in FormData when name is set as a JS property', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-button type="submit" value="save">Save</dile-button>
+        </form>
+      `;
+      const form = document.getElementById('testForm');
+      const el = document.body.querySelector('dile-button');
+      el.name = 'action';
+      await el.updateComplete;
+
+      expect(el.getAttribute('name')).toBe('action');
+
+      let capturedFormData = null;
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        capturedFormData = new FormData(form);
+      });
+
+      el.shadowRoot.querySelector('button').click();
+
+      expect(capturedFormData.get('action')).toBe('save');
+    });
+
+    it('only includes the clicked button among two submit buttons with different values', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-button type="submit" name="action" value="save">Save</dile-button>
+          <dile-button type="submit" name="action" value="delete">Delete</dile-button>
+        </form>
+      `;
+      const form = document.getElementById('testForm');
+      const buttons = document.body.querySelectorAll('dile-button');
+      for (const b of buttons) await b.updateComplete;
+
+      let capturedFormData = null;
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        capturedFormData = new FormData(form);
+      });
+
+      buttons[1].shadowRoot.querySelector('button').click();
+
+      expect(capturedFormData.getAll('action')).toEqual(['delete']);
+    });
+
+    it('does not leak a stale value when the form is submitted again without a button click', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <input name="text" value="hello" />
+          <dile-button type="submit" name="action" value="save">Save</dile-button>
+        </form>
+      `;
+      const form = document.getElementById('testForm');
+      const el = document.body.querySelector('dile-button');
+      await el.updateComplete;
+
+      let capturedFormData = null;
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        capturedFormData = new FormData(form);
+      });
+
+      // First submit via the button click - action=save should be present.
+      el.shadowRoot.querySelector('button').click();
+      expect(capturedFormData.get('action')).toBe('save');
+
+      // Second submit programmatically, with no submitter clicked - action should NOT leak.
+      form.requestSubmit();
+      expect(capturedFormData.get('action')).toBeNull();
+    });
+
+    it('does not submit when the button is disabled', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-button type="submit" name="action" value="save" disabled>Save</dile-button>
+        </form>
+      `;
+      const form = document.getElementById('testForm');
+      const el = document.body.querySelector('dile-button');
+      await el.updateComplete;
+
+      let submitted = false;
+      form.addEventListener('submit', (e) => { e.preventDefault(); submitted = true; });
+
+      el.shadowRoot.querySelector('button').click();
+
+      expect(submitted).toBe(false);
+    });
+  });
 });

package/components/button/src/DileButton.js

@@ -9,8 +9,9 @@ export class DileButton extends LitElement {
     return {
       disabled: { type: Boolean },
       loading: { type: Boolean, reflect: true },
-      name: { type: String },
+      name: { type: String, reflect: true },
       type: { type: String },
+      value: { type: String },
     };
   }
 
@@ -134,7 +135,12 @@ export class DileButton extends LitElement {
     }
 
     if (this.type === "submit") {
-      this._internals.form?.requestSubmit();
+      const form = this._internals.form;
+      if (form) {
+        this._internals.setFormValue(this.value ?? null);
+        form.requestSubmit();
+        this._internals.setFormValue(null);
+      }
     } else if (this.type === "reset") {
       this._internals.form?.reset();
     }

package/components/card/card-slide.js

@@ -1,3 +1,5 @@
 import { DileCardSlide } from "./src/DileCardSlide.js";
 
-window.customElements.define("dile-card-slide", DileCardSlide);
+if (!customElements.get("dile-card-slide")) {
+  window.customElements.define("dile-card-slide", DileCardSlide);
+}

package/components/card/card-slide.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './card-slide.js';
+
+describe('dile-card-slide', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCardSlide(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-card-slide');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the title as a toggle button', async () => {
+    const el = await renderCardSlide('<dile-card-slide title="My title">Content</dile-card-slide>');
+    const button = el.shadowRoot.querySelector('.card-title button');
+    expect(button).toBeTruthy();
+    expect(el.opened).toBe(false);
+  });
+
+  it('toggles opened state when clicked', async () => {
+    const el = await renderCardSlide('<dile-card-slide title="My title">Content</dile-card-slide>');
+    el.shadowRoot.querySelector('.card-title button').click();
+    await el.updateComplete;
+
+    expect(el.opened).toBe(true);
+  });
+});

package/components/card/card.js

@@ -1,3 +1,5 @@
 import { DileCard } from "./src/DileCard.js";
 
-window.customElements.define("dile-card", DileCard);
+if (!customElements.get("dile-card")) {
+  window.customElements.define("dile-card", DileCard);
+}

package/components/card/card.spec.js

@@ -0,0 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './card.js';
+
+describe('dile-card', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCard(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-card');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the title and slotted content', async () => {
+    const el = await renderCard('<dile-card title="My title">Content</dile-card>');
+    expect(el.shadowRoot.querySelector('.card-title').textContent.trim()).toBe('My title');
+    expect(el.textContent.trim()).toBe('Content');
+  });
+
+  it('does not render a title element when title is not set', async () => {
+    const el = await renderCard('<dile-card>Content</dile-card>');
+    expect(el.shadowRoot.querySelector('.card-title')).toBeNull();
+  });
+});

package/components/checkbox/checkbox.js

@@ -1,3 +1,5 @@
 import { DileCheckbox } from "./src/DileCheckbox.js";
 
-window.customElements.define("dile-checkbox", DileCheckbox);
+if (!customElements.get("dile-checkbox")) {
+  window.customElements.define("dile-checkbox", DileCheckbox);
+}