@dile/ui 3.4.4 → 3.4.5

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/checkbox/checkbox.spec.js

@@ -0,0 +1,235 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './checkbox.js';
+
+describe('dile-checkbox', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCheckbox(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-checkbox');
+    await el.updateComplete;
+    return el;
+  }
+
+  function getControl(el) {
+    return el.shadowRoot.querySelector('[role="checkbox"]');
+  }
+
+  describe('Rendering', () => {
+    it('starts unchecked by default', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      expect(el.checked).toBe(false);
+      expect(getControl(el).getAttribute('aria-checked')).toBe('false');
+    });
+
+    it('renders the slotted label content', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms">Accept terms</dile-checkbox>');
+      const label = el.shadowRoot.querySelector('label.label');
+      expect(label).toBeTruthy();
+      expect(el.textContent.trim()).toBe('Accept terms');
+    });
+
+    it('does not render a label element when there is no slotted content', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      expect(el.shadowRoot.querySelector('label.label')).toBeNull();
+    });
+
+    it('renders a message when the message property is set', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      el.message = 'You must accept';
+      el.errored = true;
+      await el.updateComplete;
+
+      const message = el.shadowRoot.querySelector('dile-input-message');
+      expect(message).toBeTruthy();
+      expect(message.getAttribute('message')).toBe('You must accept');
+    });
+  });
+
+  describe('Toggling', () => {
+    it('toggles checked state on click', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(el.checked).toBe(true);
+    });
+
+    it('toggles checked state on Space key press', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      const control = getControl(el);
+      control.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }));
+      await el.updateComplete;
+
+      expect(el.checked).toBe(true);
+    });
+
+    it('does not toggle when disabled', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms" disabled></dile-checkbox>');
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(el.checked).toBe(false);
+    });
+
+    it('clears the checked state via clear()', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms" checked></dile-checkbox>');
+      expect(el.checked).toBe(true);
+
+      el.clear();
+      await el.updateComplete;
+
+      expect(el.checked).toBe(false);
+    });
+
+    it('mirrors checked through the value property', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      el.value = true;
+      await el.updateComplete;
+
+      expect(el.checked).toBe(true);
+      expect(el.value).toBe(true);
+    });
+  });
+
+  describe('Events', () => {
+    it('dispatches dile-checkbox-changed with checked and name', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      let detail = null;
+      el.addEventListener('dile-checkbox-changed', (e) => { detail = e.detail; });
+
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(detail).toEqual({ checked: true, name: 'terms' });
+    });
+
+    it('dispatches element-changed with name and value', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      let detail = null;
+      el.addEventListener('element-changed', (e) => { detail = e.detail; });
+
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(detail).toEqual({ name: 'terms', value: true });
+    });
+
+    it('clears the error state on toggle when hideErrorOnInput is set', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms" hideErrorOnInput></dile-checkbox>');
+      el.message = 'Required';
+      el.errored = true;
+      await el.updateComplete;
+
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(el.message).toBe('');
+      expect(el.errored).toBe(false);
+    });
+  });
+
+  describe('Native form submission', () => {
+    it('participates in FormData when name is set as an attribute', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-checkbox name="terms" checked></dile-checkbox>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-checkbox');
+      await el.updateComplete;
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('terms')).toBe('true');
+    });
+
+    it('participates in FormData when name is set as a JS property', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-checkbox checked></dile-checkbox>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-checkbox');
+      el.name = 'terms';
+      await el.updateComplete;
+
+      expect(el.getAttribute('name')).toBe('terms');
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('terms')).toBe('true');
+    });
+
+    it('is excluded from FormData when unchecked', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-checkbox name="terms"></dile-checkbox>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-checkbox');
+      await el.updateComplete;
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('terms')).toBeNull();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('exposes role="checkbox" on the interactive control', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      expect(getControl(el)).toBeTruthy();
+    });
+
+    it('keeps aria-checked in sync with the checked state', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      const control = getControl(el);
+      expect(control.getAttribute('aria-checked')).toBe('false');
+
+      el.checked = true;
+      await el.updateComplete;
+
+      expect(control.getAttribute('aria-checked')).toBe('true');
+    });
+
+    it('is keyboard focusable when enabled', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      const control = getControl(el);
+      expect(control.getAttribute('tabindex')).toBe('0');
+    });
+
+    it('is removed from the tab order and marked aria-disabled when disabled', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms" disabled></dile-checkbox>');
+      const control = getControl(el);
+      expect(control.getAttribute('tabindex')).toBe('-1');
+      expect(control.getAttribute('aria-disabled')).toBe('true');
+    });
+
+    it('links the control to the slotted label via aria-labelledby', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms">Accept terms</dile-checkbox>');
+      const control = getControl(el);
+      const labelledbyId = control.getAttribute('aria-labelledby');
+
+      expect(labelledbyId).toBeTruthy();
+      expect(el.shadowRoot.getElementById(labelledbyId)).toBeTruthy();
+    });
+
+    it('does not set aria-labelledby when there is no slotted label', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      expect(getControl(el).hasAttribute('aria-labelledby')).toBe(false);
+    });
+
+    it('links the control to the message via aria-describedby when a message is set', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      el.message = 'Required';
+      el.errored = true;
+      await el.updateComplete;
+
+      const control = getControl(el);
+      const describedbyId = control.getAttribute('aria-describedby');
+
+      expect(describedbyId).toBeTruthy();
+      expect(el.shadowRoot.getElementById(describedbyId)).toBeTruthy();
+    });
+  });
+});

package/components/checkbox/src/DileCheckbox.js

@@ -1,5 +1,6 @@
 import { html, css, LitElement } from "lit";
-import { DileEmmitChange } from '../../../mixins/form/index.js'; 
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
 import { checkboxBlankIcon, checkboxCheckedIcon } from '@dile/icons';
 import '../../icon/icon.js';
 import '../../input/input-message.js';
@@ -10,7 +11,7 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
       checked: { type: Boolean, reflect: true, },
       disabled: { type: Boolean, reflect: true, },
       _hasInner: { type: Boolean },
-      name: { type: String },
+      name: { type: String, reflect: true, },
       message: { type: String },
       errored: { type: Boolean },
       hideErrorOnInput: { type: Boolean },
@@ -24,9 +25,11 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
   constructor() {
     super();
     this.checked = false;
+    this.disabled = false;
     this.name = '';
     this.internals = this.attachInternals();
-    this.message = ''
+    this.message = '';
+    this._id = `dile-checkbox-${Math.random().toString(36).substr(2, 9)}`;
   }
 
   static get styles() {
@@ -50,6 +53,10 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
         align-items: center;
         justify-content: center;
       }
+      .checkbox:focus-visible {
+        outline: var(--dile-checkbox-focus-outline, 2px solid #4A90E2);
+        outline-offset: 2px;
+      }
       .isUnchecked {
         --dile-icon-color: var(--dile-checkbox-unchecked-color, var(--dile-on-background-color, #303030));
       }
@@ -86,13 +93,22 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
   render() {
     return html`
       <div @click="${this.doClick}" class="${this.disabled ? "disabled" : ""}">
-        <a href="#" @click="${this.linkClick}" @keypress="${this.doKeyPress}" class="checkbox ${this.checked ? "isChecked" : "isUnchecked"}">
+        <span
+          role="checkbox"
+          aria-checked="${this.checked}"
+          aria-disabled="${this.disabled ? "true" : "false"}"
+          aria-labelledby="${ifDefined(this._hasInner ? `${this._id}-label` : undefined)}"
+          aria-describedby="${ifDefined(this.message ? `${this._id}-message` : undefined)}"
+          tabindex="${this.disabled ? "-1" : "0"}"
+          @keydown="${this.doKeyDown}"
+          class="checkbox ${this.checked ? "isChecked" : "isUnchecked"}"
+        >
           ${this.checked ? this.checkedIcon : this.unCheckedIcon}
-        </a>
+        </span>
         ${this.innerTemplate}
       </div>
       ${this.message
-        ? html`<dile-input-message message="${this.message}" ?errored=${this.errored}></dile-input-message>`
+        ? html`<dile-input-message id="${this._id}-message" message="${this.message}" ?errored=${this.errored}></dile-input-message>`
         : ''
       }
     `;
@@ -101,14 +117,14 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
   get innerTemplate() {
     return html`
       ${this._hasInner
-        ? html` <label class="label">
+        ? html` <label id="${this._id}-label" class="label">
             <slot></slot>
           </label>`
         : ""
       }
     `
   }
-  
+
   doClick() {
     if (this.disabled) {
       return;
@@ -137,16 +153,12 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
     return html`<dile-icon .icon="${checkboxBlankIcon}"></dile-icon>`;
   }
 
-  doKeyPress(e) {
-    e.preventDefault();
-    if (e.keyCode == 32 || e.code == "Space") {
+  doKeyDown(e) {
+    if (e.key == " " || e.code == "Space" || e.keyCode == 32) {
+      e.preventDefault();
       this.doClick();
     }
   }
-  
-  linkClick(e) {
-    e.preventDefault();
-  }
 
   clear() {
     this.checked = false;

package/components/color-picker/color-picker.spec.js

@@ -114,4 +114,20 @@ describe('dile-color-picker', () => {
 
     expect(data.get('color')).toBe('#123456');
   });
+
+  it('participates in FormData when name is set as a JS property', async () => {
+    document.body.innerHTML = `
+      <form id="testForm">
+        <dile-color-picker value="#123456"></dile-color-picker>
+      </form>
+    `;
+    const el = document.body.querySelector('dile-color-picker');
+    el.name = 'color';
+    await el.updateComplete;
+
+    expect(el.getAttribute('name')).toBe('color');
+
+    const data = new FormData(document.getElementById('testForm'));
+    expect(data.get('color')).toBe('#123456');
+  });
 });

package/components/color-picker/src/DileColorPicker.js

@@ -26,7 +26,7 @@ export class DileColorPicker extends DileOverlay(
       label: { type: String },
 
       /** Name for this input field */
-      name: { type: String },
+      name: { type: String, reflect: true },
 
       /** Set initial value to the input. Must be a 6-digit hex color, e.g. "#3366ff" */
       value: { type: String },

package/components/drop-file/src/DileDropFile.js

@@ -60,7 +60,7 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
       selectedFileLabel: { type: String },
       allowedExtensions: { type: Array },
       extensionErrorMessage: { type: String },
-      name: { type: String },
+      name: { type: String, reflect: true },
     };
   }
 

package/components/input/src/DileInput.js

@@ -35,7 +35,7 @@ export class DileInput extends DileEmmitChange(LitElement) {
           value: { type: String },
 
           /** Name for this input field */
-          name: { type: String },
+          name: { type: String, reflect: true },
 
           /** Has error on this input field */
           errored: { type: Boolean },

package/components/number-picker/src/DileNumberPicker.js

@@ -37,7 +37,7 @@ export class DileNumberPicker extends DileEmmitChange(LitElement) {
       disabled: { type: Boolean },
 
       /** Name for this input field */
-      name: { type: String },
+      name: { type: String, reflect: true },
 
       /** Message Displayed */
       message: { type: String },

package/components/otp-input/src/DileOtpInput.js

@@ -35,7 +35,7 @@ export class DileOtpInput extends DileEmmitChange(LitElement) {
       value: { type: String },
 
       /** Name for this input field */
-      name: { type: String },
+      name: { type: String, reflect: true },
 
       /** Disable the input field */
       disabled: { type: Boolean },

package/components/radio-group/src/DileRadioGroup.js

@@ -26,7 +26,7 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
     return {
       label: { type: String },
       value: { type: String },
-      name: { type: String },
+      name: { type: String, reflect: true },
       message: { type: String },
       errored: { type: Boolean },
       hideErrorOnInput: { type: Boolean },

package/components/range/src/DileRange.js

@@ -96,7 +96,7 @@ export class DileRange extends DileEmmitChange(LitElement) {
       min: { type: Number },
       step: { type: Number },
       value: { type: Number },
-      name: { type: String },
+      name: { type: String, reflect: true },
       label: { type: String },
       message: { type: String },
       errored: { type: Boolean, reflect: true },

package/components/select/select.spec.js

@@ -531,5 +531,44 @@ describe('dile-select', () => {
 
       expect(el.internals.form).toBeDefined();
     });
+
+    it('participates in FormData when name is set as an attribute', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-select name="fruit" value="1">
+            <select slot="select">
+              <option value="1">Option 1</option>
+              <option value="2">Option 2</option>
+            </select>
+          </dile-select>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-select');
+      await el.updateComplete;
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('fruit')).toBe('1');
+    });
+
+    it('participates in FormData when name is set as a JS property', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-select value="1">
+            <select slot="select">
+              <option value="1">Option 1</option>
+              <option value="2">Option 2</option>
+            </select>
+          </dile-select>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-select');
+      el.name = 'fruit';
+      await el.updateComplete;
+
+      expect(el.getAttribute('name')).toBe('fruit');
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('fruit')).toBe('1');
+    });
   });
 });

package/components/select/src/DileSelect.js

@@ -98,7 +98,7 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     return {
       label: { type: String },
       value: { type: String },
-      name: { type: String },
+      name: { type: String, reflect: true },
       disabled: { type: Boolean },
       errored: { type: Boolean },
       message: { type: String },

package/components/select/src/DileSelectAjax.js

@@ -66,7 +66,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       endpoint: { type: String },
       label: { type: String },
       value: { type: String },
-      name: { type: String },
+      name: { type: String, reflect: true },
       disabled: { type: Boolean },
       errored: { type: Boolean },
       data: { type: Array },

package/components/select/src/DileSelectBoolean.js

@@ -19,7 +19,7 @@ export class DileSelectBoolean extends DileEmmitChange(LitElement) {
     return {
       label: { type: String },
       value: {},
-      name: { type: String },
+      name: { type: String, reflect: true },
       disabled: { type: Boolean },
       errored: { type: Boolean },
       message: { type: String },

package/components/textarea/src/DileTextarea.js

@@ -58,7 +58,7 @@ export class DileTextarea extends DileEmmitChange(LitElement) {
 
   static get properties() {
     return {
-      name: { type: String },
+      name: { type: String, reflect: true },
       label: { type: String },
       errored: { 
         type: Boolean,

package/components/time-picker/src/DileTimePicker.js

@@ -37,7 +37,7 @@ export class DileTimePicker extends DileEmmitChange(LitElement) {
       errored: { type: Boolean },
       hideErrorOnInput: { type: Boolean },
       focusOnStart: { type: Boolean },
-      name: { type: String },
+      name: { type: String, reflect: true },
     };
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.4.4",
+  "version": "3.4.5",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "addd7ce4fc5edbd5145fbe1202e61894b42e0c0a"
+  "gitHead": "31136286663cc7482a95a8813d845e73c3f6c57d"
 }