@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/checkbox-group.test.form.js

@@ -0,0 +1,130 @@
+import './checkbox.js';
+import { assert, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreCheckboxGroup from './checkbox-group.js';
+GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
+it('exposes standard form control properties and methods', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { parentNode: form });
+    expect(component.form).to.equal(form);
+    expect(component.validity instanceof ValidityState).to.be.true;
+    expect(component.willValidate).to.be.true;
+    expect(component.checkValidity).to.be.a('function');
+    expect(component.reportValidity).to.be.a('function');
+});
+it('can be reset', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox
+        label="Checkbox"
+        value="value"
+        checked
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`, {
+        parentNode: form,
+    });
+    const checkbox = component.querySelector('glide-core-checkbox');
+    assert(checkbox);
+    checkbox.checked = false;
+    form.reset();
+    expect(component.value).to.deep.equal(['value']);
+});
+it('has `formData` when the checkboxes are checked', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
+      <glide-core-checkbox
+        label="One"
+        value="one"
+        checked
+      ></glide-core-checkbox>
+      <glide-core-checkbox
+        label="Two"
+        value="two"
+        checked
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('["one","two"]');
+});
+it('has `formData` when the checkbox is checked and indeterminate', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
+      <glide-core-checkbox
+        label="Checkbox"
+        value="value"
+        checked
+        indeterminate
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('["value"]');
+});
+it('has no `formData` when the checkboxes are unchecked', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
+      <glide-core-checkbox label="One" value="one"></glide-core-checkbox>
+      <glide-core-checkbox label="Two" value="two"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` when disabled and the checkbox is checked', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name" disabled>
+      <glide-core-checkbox
+        label="Checkbox"
+        value="value"
+        checked
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` when the checkbox is checked but disabled', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
+      <glide-core-checkbox
+        label="Checkbox"
+        value="value"
+        checked
+        disabled
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` when without a `name` but the checkbox is checked', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox
+        label="Checkbox"
+        value="value"
+        checked
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` value when the checkbox is checked but without a `value`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
+      <glide-core-checkbox label="Checkbox" checked></glide-core-checkbox>
+    </glide-core-checkbox-group>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});

package/dist/checkbox-group.test.validity.js

@@ -0,0 +1,75 @@
+import './checkbox.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreCheckboxGroup from './checkbox-group.js';
+GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
+it('is valid if not required and the checkbox is unchecked', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+});
+it('is valid if required and the checkbox is checked', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    component.querySelector('glide-core-checkbox')?.click();
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+});
+it('is invalid if required and the checkbox is unchecked', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+});
+it('is invalid after being unchecked when required', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox
+        label="Checkbox"
+        value="value"
+        checked
+      ></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    component.querySelector('glide-core-checkbox')?.click();
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+});
+it('is both invalid and valid if required but disabled and the checkbox is unchecked', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
+      <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+});
+it('sets the checkbox as valid when `required` is set to `false` dynamically', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { parentNode: form });
+    component.required = false;
+    await elementUpdated(component);
+    const checkbox = component.querySelector('glide-core-checkbox');
+    expect(checkbox?.validity.valid).to.be.true;
+});
+it('sets the checkbox as invalid when `required` is set to `true` dynamically', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { parentNode: form });
+    component.required = true;
+    await elementUpdated(component);
+    const checkbox = component.querySelector('glide-core-checkbox');
+    expect(checkbox?.validity.valid).to.be.false;
+});

package/dist/checkbox.js

@@ -1 +1 @@
-"use strict";var M=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var r=(s,a,t,c)=>{for(var o=c>1?void 0:c?B(a,t):a,f=s.length-1,y;f>=0;f--)(y=s[f])&&(o=(c?y(a,t,o):y(o))||o);return c&&o&&M(a,t,o),o};var b=(s,a,t)=>{if(!a.has(s))throw TypeError("Cannot "+t)};var i=(s,a,t)=>(b(s,a,"read from private field"),t?t.call(s):a.get(s)),u=(s,a,t)=>{if(a.has(s))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(s):a.set(s,t)},k=(s,a,t,c)=>(b(s,a,"write to private field"),c?c.call(s,t):a.set(s,t),t);var g=(s,a,t)=>(b(s,a,"access private method"),t);var d,l,p,h,m,v,V;import"./label.js";import{LitElement as E,html as $}from"lit";import{classMap as L}from"lit/directives/class-map.js";import{createRef as O,ref as w}from"lit/directives/ref.js";import{customElement as S,property as n,state as q}from"lit/decorators.js";import{svg as F}from"lit/static-html.js";import{when as H}from"lit/directives/when.js";import I from"./icons/checked.js";import T from"./checkbox.styles.js";const R=F`<svg class="indeterminate-icon" fill="none" height="14" viewBox="0 0 24 24" width="14"><path d="M8 10C8 8.89543 8.89543 8 10 8H14.7929C15.2383 8 15.4614 8.53857 15.1464 8.85355L8.85355 15.1464C8.53857 15.4614 8 15.2383 8 14.7929V10Z" fill="currentColor"/></svg>`;let e=class extends E{constructor(){super();u(this,h);u(this,v);this.checked=!1;this.internallyInert=!1;this.disabled=!1;this.hideLabel=!1;this.indeterminate=!1;this.orientation="horizontal";this.required=!1;this.value="";this.isCheckingValidity=!1;this.isReportValidityOrSubmit=!1;u(this,d,O());u(this,l,void 0);u(this,p,({formData:t})=>{this.checked&&this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)});k(this,l,this.attachInternals()),this.addEventListener("invalid",t=>{t?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())})}get form(){return i(this,l).form}checkValidity(){return this.isCheckingValidity=!0,i(this,l).checkValidity()}click(){i(this,d).value?.click()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",i(this,p))}get validity(){return this.privateVariant==="minimal"?i(this,l).validity:(this.required&&!this.checked?i(this,l).setValidity({valueMissing:!0}," ",i(this,d).value):i(this,l).setValidity({}),i(this,l).validity)}focus(t){i(this,d).value?.focus(t)}formAssociatedCallback(){this.form?.addEventListener("formdata",i(this,p))}formResetCallback(){this.checked=this.getAttribute("checked")==="",this.indeterminate=this.getAttribute("indeterminate")===""}render(){return $`<div class="component" data-test="component">${H(this.privateVariant==="minimal",()=>$`<label class="label-and-input-and-checkbox" part="private-label-and-input-and-checkbox"><div class="input-and-checkbox"><input aria-invalid="${i(this,h,m)}" data-test="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${g(this,v,V)}" ?inert="${this.internallyInert}" ${w(i(this,d))}><div class="${L({checkbox:!0,disabled:this.disabled,error:i(this,h,m)})}"><div class="checked-icon">${I}</div>${R}</div></div>${this.label}</label>`,()=>$`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${i(this,h,m)}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="input-and-checkbox" slot="control"><input aria-describedby="summary description" aria-invalid="${i(this,h,m)}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${g(this,v,V)}" ${w(i(this,d))}><div class="${L({checkbox:!0,disabled:this.disabled,error:i(this,h,m)})}"><div class="checked-icon">${I}</div>${R}</div></div><div id="summary" slot="summary">${this.summary}</div><slot id="description" name="description" slot="description"></slot></glide-core-label>`)}</div>`}reportValidity(){return i(this,l).reportValidity()}setValidity(t,c,o){return i(this,l).setValidity(t,c,o)}get willValidate(){return i(this,l).willValidate}updated(){i(this,d).value&&(i(this,d).value.indeterminate=this.indeterminate)}};d=new WeakMap,l=new WeakMap,p=new WeakMap,h=new WeakSet,m=function(){return this.privateVariant==="minimal"?!this.validity.valid:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit},v=new WeakSet,V=function(t){t.target instanceof HTMLInputElement&&(this.checked=t.target.checked),this.indeterminate=!1,this.dispatchEvent(new Event(t.type,t))},e.formAssociated=!0,e.shadowRootOptions={...E.shadowRootOptions,mode:"closed"},e.styles=T,r([n({type:Boolean})],e.prototype,"checked",2),r([n({attribute:"internally-inert",type:Boolean})],e.prototype,"internallyInert",2),r([n({reflect:!0,type:Boolean})],e.prototype,"disabled",2),r([n({attribute:"hide-label",type:Boolean})],e.prototype,"hideLabel",2),r([n({type:Boolean})],e.prototype,"indeterminate",2),r([n({reflect:!0})],e.prototype,"label",2),r([n({reflect:!0})],e.prototype,"orientation",2),r([n({reflect:!0})],e.prototype,"name",2),r([n({attribute:"private-variant"})],e.prototype,"privateVariant",2),r([n({reflect:!0,type:Boolean})],e.prototype,"required",2),r([n({reflect:!0})],e.prototype,"summary",2),r([n({reflect:!0})],e.prototype,"value",2),r([q()],e.prototype,"isCheckingValidity",2),r([q()],e.prototype,"isReportValidityOrSubmit",2),e=r([S("glide-core-checkbox")],e);export{e as default};
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length,s=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(s=(a<3?r(s):a>3?r(t,i,s):r(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{svg}from"lit/static-html.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=svg`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="indeterminate-icon"><rect x="0.5" y="0.5" width="13" height="13" rx="3.5"/><path d="M3 5C3 3.89543 3.89543 3 5 3H9.79289C10.2383 3 10.4614 3.53857 10.1464 3.85355L3.85355 10.1464C3.53857 10.4614 3 10.2383 3 9.79289V5Z" fill="currentColor"/></svg>`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get form(){return this.#e.form}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}click(){this.#t.value?.click()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get validity(){return"minimal"===this.privateVariant||(this.required&&!this.checked?this.#e.setValidity({valueMissing:!0}," ",this.#t.value):this.#e.setValidity({})),this.#e.validity}focus(e){this.#t.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">${when("minimal"===this.privateVariant,(()=>html`<label class="label-and-input-and-checkbox" part="private-label-and-input-and-checkbox"><div class="input-and-checkbox"><input aria-invalid="${this.#o}" data-test="input" type="checkbox" .checked="${this.checked}" .inert="${this.internallyInert}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#r}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#o})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div>${this.label}</label>`),(()=>html`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#o}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="input-and-checkbox" slot="control"><input aria-describedby="summary description" aria-invalid="${this.#o}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#r}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#o})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div><div id="summary" slot="summary">${this.summary}</div><slot id="description" name="description" slot="description"></slot></glide-core-label>`))}</div>`}reportValidity(){return this.#e.reportValidity()}setValidity(e,t,i){return this.#e.setValidity(e,t,i)}get willValidate(){return this.#e.willValidate}updated(){this.#t.value&&(this.#t.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.required=!1,this.value="",this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#t=createRef(),this.#i=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#t;#e;#i;get#o(){return"minimal"===this.privateVariant?!this.validity.valid:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#r(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;

package/dist/checkbox.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";import i from"./styles/focus-outline.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     /*
 Most states are handled on the host. But ":checked" and ":indeterminate" are
 handled on the input because browsers don't support those classes on the host.
@@ -81,8 +81,7 @@ when browsers support them.
       }
 
       &:focus-visible ~ .checkbox {
-        ${i};
-        outline-offset: 4px;
+        ${focusOutline};
       }
 
       &:is(:checked, :indeterminate):not(:disabled) ~ .checkbox {
@@ -112,5 +111,9 @@ when browsers support them.
 
     .indeterminate-icon {
       display: none;
+
+      /* Hard-coded colors since the value of --glide-core-icon-active presently doesn't work in dark mode */
+      fill: #0073e6;
+      stroke: #0073e6;
     }
-  `];
+  `];

package/dist/checkbox.test.basics.js

@@ -0,0 +1,89 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreCheckbox from './checkbox.js';
+GlideCoreCheckbox.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-checkbox')).to.equal(GlideCoreCheckbox);
+});
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.checked).to.be.false;
+    expect(component.hasAttribute('disabled')).to.be.false;
+    expect(component.disabled).to.be.false;
+    expect(component.hasAttribute('hide-label')).to.be.false;
+    expect(component.hideLabel).to.be.false;
+    expect(component.hasAttribute('indeterminate')).to.be.false;
+    expect(component.indeterminate).to.be.false;
+    expect(component.getAttribute('name')).to.be.null;
+    expect(component.name).to.equal(undefined);
+    expect(component.getAttribute('orientation')).to.equal('horizontal');
+    expect(component.orientation).to.equal('horizontal');
+    expect(component.hasAttribute('required')).to.be.false;
+    expect(component.required).to.be.false;
+    expect(component.getAttribute('summary')).to.be.null;
+    expect(component.summary).to.equal(undefined);
+    expect(component.getAttribute('value')).to.equal('');
+    expect(component.value).to.equal('');
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label">
+      <div slot="tooltip">Tooltip</div>
+      <div slot="description">Description</div>
+    </glide-core-checkbox>`);
+    await expect(component).to.be.accessible();
+});
+it('can have a label', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label">
+      <div slot="description">Description</div>
+    </glide-core-checkbox>`);
+    const label = component.shadowRoot?.querySelector('label');
+    expect(label?.textContent?.trim()).to.equal('Label');
+});
+it('can have a description', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label">
+      <div slot="description">Description</div>
+    </glide-core-checkbox>`);
+    const assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="description"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Description');
+});
+it('can have a name', async () => {
+    const component = await fixture(html `<glide-core-checkbox name="name"></glide-core-checkbox> `);
+    expect(component.getAttribute('name')).to.equal('name');
+    expect(component.name).to.equal('name');
+});
+it('can have a summary', async () => {
+    const component = await fixture(html `<glide-core-checkbox summary="Summary"></glide-core-checkbox> `);
+    expect(component.getAttribute('summary')).to.equal('Summary');
+    expect(component.summary).to.equal('Summary');
+});
+it('can have a tooltip', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label">
+      <div slot="tooltip">Tooltip</div>
+    </glide-core-checkbox>`);
+    const assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="tooltip"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
+});
+it('can be checked', async () => {
+    const component = await fixture(html `<glide-core-checkbox checked></glide-core-checkbox> `);
+    expect(component.hasAttribute('checked')).to.be.true;
+    expect(component.checked).to.equal(true);
+});
+it('can be disabled', async () => {
+    const component = await fixture(html `<glide-core-checkbox disabled></glide-core-checkbox> `);
+    expect(component.hasAttribute('disabled')).to.be.true;
+    expect(component.disabled).to.equal(true);
+});
+it('can be indeterminate', async () => {
+    const component = await fixture(html `<glide-core-checkbox indeterminate></glide-core-checkbox> `);
+    expect(component.hasAttribute('indeterminate')).to.be.true;
+    expect(component.indeterminate).to.equal(true);
+});
+it('can be required', async () => {
+    const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox> `);
+    expect(component.hasAttribute('required')).to.be.true;
+    expect(component.required).to.equal(true);
+});

package/dist/checkbox.test.events.js

@@ -0,0 +1,87 @@
+import * as sinon from 'sinon';
+import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
+import GlideCoreCheckbox from './checkbox.js';
+GlideCoreCheckbox.shadowRootOptions.mode = 'open';
+// `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
+// expecting it to throw would work. But it wouldn't throw until its
+// timeout, which would make for a slow test. Its timeout can likely be
+// configured. But waiting a turn of the event loop, after which the event
+// will have been dispatched, gets the job done as well.
+it('dispatches a "click" event when clicked', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    setTimeout(() => component.click());
+    const event = await oneEvent(component, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches a "change" event when clicked', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    setTimeout(() => component.click());
+    const event = await oneEvent(component, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches an "input" event when clicked', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    setTimeout(() => component.click());
+    const event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches an "invalid" event on submit when required and unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox>`, { parentNode: form });
+    setTimeout(() => form.requestSubmit());
+    const event = await oneEvent(component, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an "invalid" event after `checkValidity` is called when required and unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox>`, { parentNode: form });
+    setTimeout(() => component.checkValidity());
+    const event = await oneEvent(component, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an "invalid" event after `reportValidity` is called when required and unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox>`, { parentNode: form });
+    setTimeout(() => component.reportValidity());
+    const event = await oneEvent(component, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('does not dispatch an "invalid" event after `checkValidity` is called when not required', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, { parentNode: form });
+    const spy = sinon.spy();
+    component.addEventListener('invalid', spy);
+    component.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an "invalid" event after `checkValidity` is called when required and unchecked but disabled', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox disabled required></glide-core-checkbox>`, { parentNode: form });
+    const spy = sinon.spy();
+    component.addEventListener('invalid', spy);
+    component.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, { parentNode: form });
+    const spy = sinon.spy();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an "invalid" event when `reportValidity` is called when required and unchecked but disabled', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox disabled required></glide-core-checkbox>`, { parentNode: form });
+    const spy = sinon.spy();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});

package/dist/checkbox.test.focus.js

@@ -0,0 +1,38 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreCheckbox from './checkbox.js';
+GlideCoreCheckbox.shadowRootOptions.mode = 'open';
+it('focuses the input when `focus` is called', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    component.focus();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+});
+it('focuses the input after submit when required and unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    form.requestSubmit();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.be.equal(input);
+});
+it('focuses the input after `reportValidity` is called when required and unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
+    component.reportValidity();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+});
+it('focuses the input after `requestSubmit` is called when required and unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
+    form.requestSubmit();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+});
+it('does not focus the input after `checkValidity` is called', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
+    component.checkValidity();
+    expect(component.shadowRoot?.activeElement).to.equal(null);
+});

package/dist/checkbox.test.form.js

@@ -0,0 +1,115 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreCheckbox from './checkbox.js';
+GlideCoreCheckbox.shadowRootOptions.mode = 'open';
+it('exposes standard form control properties and methods', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, { parentNode: form });
+    expect(component.form).to.equal(form);
+    expect(component.validity instanceof ValidityState).to.be.true;
+    expect(component.willValidate).to.be.true;
+    expect(component.checkValidity).to.be.a('function');
+    expect(component.reportValidity).to.be.a('function');
+});
+it('can be reset', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox
+      label="Label"
+      checked
+      indeterminate
+    ></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    component.checked = false;
+    component.indeterminate = false;
+    form.reset();
+    expect(component.checked).to.be.true;
+    expect(component.indeterminate).to.be.true;
+});
+it('has `formData` value when checked', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox
+      label="Label"
+      name="name"
+      value="value"
+      checked
+    ></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('value');
+});
+it('has `formData` value when checked and indeterminate', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox
+      name="name"
+      value="value"
+      checked
+      indeterminate
+    ></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('value');
+});
+it('has no `formData` value when unchecked', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox
+      label="Label"
+      name="name"
+      value="value"
+    ></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` value when unchecked and indeterminate', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox
+      label="Label"
+      name="name"
+      value="value"
+      indeterminate
+    ></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` value when checked but disabled', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox
+      name="name"
+      value="value"
+      checked
+      disabled
+    ></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` value when checked but without a `name`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox
+      label="Label"
+      value="value"
+      checked
+    ></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` value when checked but without a `value`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-checkbox
+      label="Label"
+      name="name"
+      checked
+    ></glide-core-checkbox>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});