@crowdstrike/glide-core 0.5.0 → 0.5.2

package/dist/button.test.basics.js

@@ -0,0 +1,196 @@
+import './button.js';
+import { ArgumentError } from 'ow';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreButton from './button.js';
+import sinon from 'sinon';
+GlideCoreButton.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-button')).to.equal(GlideCoreButton);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-button>Button</glide-core-button>`);
+    await expect(component).to.be.accessible();
+});
+it('has defaults', async () => {
+    const component = await fixture(html `
+    <glide-core-button>Button</glide-core-button>
+  `);
+    expect(component.type).to.equal('button');
+    expect(component.disabled).to.equal(false);
+    expect(component.textContent).to.equal('Button');
+    const button = component.shadowRoot?.querySelector('button');
+    expect(button?.getAttribute('type')).to.equal('button');
+    expect(button?.disabled).to.equal(false);
+    expect([...button.classList]).to.deep.equal([
+        'component',
+        'primary',
+        'large',
+    ]);
+});
+it('delegates focus', async () => {
+    const component = await fixture(html `<glide-core-button>Button</glide-core-button>`);
+    component.focus();
+    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('button'));
+});
+it('renders a secondary variant', async () => {
+    const component = await fixture(html `
+    <glide-core-button variant="secondary">Button</glide-core-button>
+  `);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'secondary', 'large']);
+});
+it('renders a tertiary variant', async () => {
+    const component = await fixture(html `
+    <glide-core-button variant="tertiary">Button</glide-core-button>
+  `);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'tertiary', 'large']);
+});
+it('sets the size to "large" by default', async () => {
+    const component = await fixture(html `
+    <glide-core-button>Button</glide-core-button>
+  `);
+    expect(component.size).to.equal('large');
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'primary', 'large']);
+});
+it('sets the size attribute to "large"', async () => {
+    const component = await fixture(html `
+    <glide-core-button size="large">Button</glide-core-button>
+  `);
+    expect(component.size).to.equal('large');
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'primary', 'large']);
+});
+it('sets the size attribute to "small"', async () => {
+    const component = await fixture(html `
+    <glide-core-button size="small">Button</glide-core-button>
+  `);
+    expect(component.size).to.equal('small');
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'primary', 'small']);
+});
+it('sets the disabled attribute', async () => {
+    const component = await fixture(html `
+    <glide-core-button disabled>Button</glide-core-button>
+  `);
+    expect(component.disabled).to.equal(true);
+    expect(component.shadowRoot.querySelector('button')?.disabled).to.equal(true);
+});
+it('sets the type attribute to "submit"', async () => {
+    const component = await fixture(html `
+    <glide-core-button type="submit">Button</glide-core-button>
+  `);
+    expect(component.type).to.equal('submit');
+    expect(component.shadowRoot.querySelector('button')?.getAttribute('type')).to.equal('submit');
+});
+it('sets the type attribute to "reset"', async () => {
+    const component = await fixture(html `
+    <glide-core-button type="reset">Button</glide-core-button>
+  `);
+    expect(component.type).to.equal('reset');
+    expect(component.shadowRoot?.querySelector('button')?.getAttribute('type')).to.equal('reset');
+});
+it('renders with a prefix slot', async () => {
+    const component = await fixture(html `
+    <glide-core-button>
+      <span slot="prefix" data-prefix>prefix</span>
+      Button
+    </glide-core-button>
+  `);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'primary', 'large', 'has-prefix']);
+    expect(document.querySelector('[data-prefix]')).to.be.ok;
+});
+it('renders with a suffix slot', async () => {
+    const component = await fixture(html `
+    <glide-core-button>
+      Button
+      <span slot="suffix" data-suffix>suffix</span>
+    </glide-core-button>
+  `);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'primary', 'large', 'has-suffix']);
+    expect(document.querySelector('[data-suffix]')).to.be.ok;
+});
+it('renders with a prefix and suffix slot when both are present initially', async () => {
+    const component = await fixture(html `
+    <glide-core-button>
+      <span slot="prefix" data-prefix>prefix</span>
+      Button
+      <span slot="suffix" data-suffix>suffix</span>
+    </glide-core-button>
+  `);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal([
+        'component',
+        'primary',
+        'large',
+        'has-prefix',
+        'has-suffix',
+    ]);
+    expect(document.querySelector('[data-prefix]')).to.be.ok;
+    expect(document.querySelector('[data-suffix]')).to.be.ok;
+});
+it('renders with prefix and suffix classes when both are dynamically added', async () => {
+    const component = await fixture(html `
+    <glide-core-button>Button</glide-core-button>
+  `);
+    const prefix = document.createElement('span');
+    prefix.setAttribute('slot', 'prefix');
+    prefix.dataset.prefix = undefined;
+    prefix.textContent = 'prefix';
+    component.append(prefix);
+    const suffix = document.createElement('span');
+    suffix.setAttribute('slot', 'suffix');
+    prefix.dataset.suffix = undefined;
+    suffix.textContent = 'suffix';
+    component.append(suffix);
+    await elementUpdated(component);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal([
+        'component',
+        'primary',
+        'large',
+        'has-prefix',
+        'has-suffix',
+    ]);
+    expect(document.querySelector('[data-prefix]')).to.be.ok;
+    expect(document.querySelector('[data-suffix]')).to.be.ok;
+});
+it('renders without prefix and suffix classes after both are removed', async () => {
+    const component = await fixture(html `
+    <glide-core-button>
+      <span slot="prefix">prefix</span>
+      Button
+      <span slot="suffix">suffix</span>
+    </glide-core-button>
+  `);
+    component.querySelector('[slot="prefix"]')?.remove();
+    component.querySelector('[slot="suffix"]')?.remove();
+    await elementUpdated(component);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'primary', 'large']);
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-button></glide-core-button>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});

package/dist/button.test.events.js

@@ -0,0 +1,25 @@
+import './button.js';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreButton from './button.js';
+GlideCoreButton.shadowRootOptions.mode = 'open';
+it('dispatches an event when clicked and type="button"', async () => {
+    const component = await fixture(html `
+    <glide-core-button type="button">Button</glide-core-button>
+  `);
+    const clickEvent = oneEvent(component, 'click');
+    component.shadowRoot?.querySelector('button')?.click();
+    const event = await clickEvent;
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an event when hitting "enter" and type="button"', async () => {
+    const component = await fixture(html `
+    <glide-core-button type="button">Button</glide-core-button>
+  `);
+    const keyDownEvent = oneEvent(component, 'keydown');
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    const event = await keyDownEvent;
+    expect(event instanceof Event).to.be.true;
+    expect(event.key).to.equal('Enter');
+});

package/dist/button.test.form.js

@@ -0,0 +1,49 @@
+import './button.js';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreButton from './button.js';
+GlideCoreButton.shadowRootOptions.mode = 'open';
+it('participates in a form when type="reset"', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    const formResetEvent = oneEvent(form, 'reset');
+    component.shadowRoot?.querySelector('button')?.click();
+    const event = await formResetEvent;
+    expect(event instanceof Event).to.be.true;
+});
+it('participates in a form when hitting "enter" and type="reset"', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    const formResetEvent = oneEvent(form, 'reset');
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    const event = await formResetEvent;
+    expect(event instanceof Event).to.be.true;
+});
+it('participates in a form when type="submit"', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    form.addEventListener('submit', (event) => event.preventDefault());
+    const formSubmitEvent = oneEvent(form, 'submit');
+    component.shadowRoot?.querySelector('button')?.click();
+    const event = await formSubmitEvent;
+    expect(event instanceof Event).to.be.true;
+});
+it('participates in a form when hitting "enter" and type="submit"', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
+        parentNode: form,
+    });
+    form.addEventListener('submit', (event) => event.preventDefault());
+    const formSubmitEvent = oneEvent(form, 'submit');
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    const event = await formSubmitEvent;
+    expect(event instanceof Event).to.be.true;
+});

package/dist/checkbox-group.js

@@ -1 +1 @@
-"use strict";var H=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var n=(a,s,t,i)=>{for(var f=i>1?void 0:i?I(s,t):s,k=a.length-1,R;k>=0;k--)(R=a[k])&&(f=(i?R(s,t,f):R(f))||f);return i&&f&&H(s,t,f),f};var S=(a,s,t)=>{if(!s.has(a))throw TypeError("Cannot "+t)};var e=(a,s,t)=>(S(a,s,"read from private field"),t?t.call(a):s.get(a)),d=(a,s,t)=>{if(s.has(a))throw TypeError("Cannot add the same private member more than once");s instanceof WeakSet?s.add(a):s.set(a,t)},g=(a,s,t,i)=>(S(a,s,"write to private field"),i?i.call(a,t):s.set(a,t),t);var L=(a,s,t)=>(S(a,s,"access private method"),t);var u,c,r,v,p,o,h,b,y,D,V,F,E,A;import"./label.js";import{LitElement as q,html as U}from"lit";import{createRef as w,ref as O}from"lit/directives/ref.js";import{customElement as N,property as m,state as B}from"lit/decorators.js";import{owSlot as M,owSlotType as T}from"./library/ow.js";import $ from"./checkbox.js";import x from"./checkbox-group.styles.js";let l=class extends q{constructor(){super();d(this,o);d(this,y);d(this,V);d(this,E);this.hideLabel=!1;this.value=[];this.isCheckingValidity=!1;this.isReportValidityOrSubmit=!1;d(this,u,w());d(this,c,w());d(this,r,void 0);d(this,v,!1);d(this,p,!1);d(this,b,({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,JSON.stringify(this.value))});g(this,r,this.attachInternals()),this.addEventListener("invalid",t=>{t?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())})}get disabled(){return e(this,v)}set disabled(t){g(this,v,t);for(const i of e(this,o,h))i.disabled=t}get required(){return e(this,p)}set required(t){g(this,p,t);for(const i of e(this,o,h))t?i.setValidity(e(this,r).validity," "):i.setValidity({}),i.requestUpdate()}checkValidity(){return this.isCheckingValidity=!0,e(this,r).checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",e(this,b))}firstUpdated(){if(M(e(this,c).value),T(e(this,c).value,[$]),this.disabled)for(const t of e(this,o,h))t.disabled=!0;this.value=e(this,o,h).filter(({checked:t,disabled:i})=>t&&!i).map(({value:t})=>t).filter(t=>!!t);for(const t of e(this,o,h))t.privateVariant="minimal"}get form(){return e(this,r).form}get validity(){const t=e(this,o,h).some(({checked:i})=>i);this.required&&!t?e(this,r).setValidity({valueMissing:!0}," ",e(this,u).value):e(this,r).setValidity({});for(const i of e(this,o,h))i.setValidity(e(this,r).validity," "),i.requestUpdate();return e(this,r).validity}get willValidate(){return e(this,r).willValidate}focus(t){e(this,o,h).at(0)?.focus(t)}formAssociatedCallback(){this.form?.addEventListener("formdata",e(this,b))}formResetCallback(){for(const t of e(this,o,h))t.formResetCallback()}render(){return U`<div class="component" data-test="component" ${O(e(this,u))}><glide-core-label ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${e(this,y,D)}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control"><slot class="checkboxes" @change="${L(this,V,F)}" @slotchange="${L(this,E,A)}" ${O(e(this,c))}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return e(this,r).reportValidity()}};u=new WeakMap,c=new WeakMap,r=new WeakMap,v=new WeakMap,p=new WeakMap,o=new WeakSet,h=function(){return e(this,c).value?e(this,c).value.assignedElements().filter(t=>t instanceof $):[]},b=new WeakMap,y=new WeakSet,D=function(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit},V=new WeakSet,F=function(){this.value=e(this,o,h).filter(({checked:t,disabled:i})=>t&&!i).map(({value:t})=>t).filter(t=>!!t)},E=new WeakSet,A=function(){M(e(this,c).value),T(e(this,c).value,[$])},l.formAssociated=!0,l.shadowRootOptions={...q.shadowRootOptions,mode:"closed"},l.styles=x,n([m({reflect:!0,type:Boolean})],l.prototype,"disabled",1),n([m({attribute:"hide-label",type:Boolean})],l.prototype,"hideLabel",2),n([m({reflect:!0})],l.prototype,"label",2),n([m({reflect:!0})],l.prototype,"name",2),n([m({reflect:!0,type:Boolean})],l.prototype,"required",1),n([m({reflect:!0})],l.prototype,"summary",2),n([m({type:Array})],l.prototype,"value",2),n([B()],l.prototype,"isCheckingValidity",2),n([B()],l.prototype,"isReportValidityOrSubmit",2),l=n([N("glide-core-checkbox-group")],l);export{l as default};
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,l=arguments.length,s=l<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 a=e.length-1;a>=0;a--)(r=e[a])&&(s=(l<3?r(s):l>3?r(t,i,s):r(t,i))||s);return l>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}checkValidity(){return this.isCheckingValidity=!0,this.#o.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){if(owSlot(this.#l.value),owSlotType(this.#l.value,[GlideCoreCheckbox]),this.disabled)for(const e of this.#t)e.disabled=!0;this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)));for(const e of this.#t)e.privateVariant="minimal"}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e?this.#o.setValidity({valueMissing:!0}," ",this.#s.value):this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}get willValidate(){return this.#o.willValidate}focus(e){this.#t.at(0)?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div class="component" data-test="component" ${ref(this.#s)}><glide-core-label ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${this.#a}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control"><slot class="checkboxes" @change="${this.#d}" @slotchange="${this.#c}" ${ref(this.#l)}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#o.reportValidity()}constructor(){super(),this.hideLabel=!1,this.value=[],this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#s=createRef(),this.#l=createRef(),this.#e=!1,this.#i=!1,this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#s;#l;#o;#e;#i;get#t(){return this.#l.value?this.#l.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#a(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#d(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#c(){owSlot(this.#l.value),owSlotType(this.#l.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({type:Array})],GlideCoreCheckboxGroup.prototype,"value",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;

package/dist/checkbox-group.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";export default[css`
     :host(:not(:disabled)) .component {
       &.error {
         .checkbox {
@@ -17,4 +17,4 @@
       grid-column: 2;
       row-gap: var(--glide-core-spacing-xxs);
     }
-  `];
+  `];

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

@@ -0,0 +1,119 @@
+import './checkbox.js';
+import { ArgumentError } from 'ow';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreCheckboxGroup from './checkbox-group.js';
+import expectArgumentError from './library/expect-argument-error.js';
+import sinon from 'sinon';
+GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-checkbox-group')).to.equal(GlideCoreCheckboxGroup);
+});
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    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.getAttribute('name')).to.be.null;
+    expect(component.name).to.equal(undefined);
+    expect(component.hasAttribute('required')).to.be.false;
+    expect(component.required).to.be.false;
+    // Not reflected, so no attribute assertion is necessary.
+    expect(component.value).to.deep.equal([]);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+      <div slot="tooltip">Tooltip</div>
+      <div slot="description">Description</div>
+    </glide-core-checkbox-group>`);
+    await expect(component).to.be.accessible();
+});
+it('can have a label', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    expect(component.getAttribute('label')).to.equal('Checkbox Group');
+    expect(component.label).to.equal('Checkbox Group');
+});
+it('can have a description', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+      <div slot="description">Description</div>
+    </glide-core-checkbox-group>`);
+    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-group label="Checkbox Group" name="name">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    expect(component.getAttribute('name')).to.equal('name');
+    expect(component.name).to.equal('name');
+});
+it('can have a tooltip', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+      <div slot="tooltip">Tooltip</div>
+    </glide-core-checkbox-group>`);
+    const assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="tooltip"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
+});
+it('can be disabled initially', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled>
+      <glide-core-checkbox label="One"></glide-core-checkbox>
+      <glide-core-checkbox label="Two"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    const checkboxes = component.querySelectorAll('glide-core-checkbox');
+    expect(checkboxes[0].disabled).to.equal(true);
+    expect(checkboxes[1].disabled).to.equal(true);
+    expect(component.hasAttribute('disabled')).to.be.true;
+    expect(component.disabled).to.equal(true);
+});
+it('can be disabled dynamically', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="One"></glide-core-checkbox>
+      <glide-core-checkbox label="Two"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    component.disabled = true;
+    await elementUpdated(component);
+    const checkboxes = component.querySelectorAll('glide-core-checkbox');
+    expect(checkboxes[0].disabled).to.equal(true);
+    expect(checkboxes[1].disabled).to.equal(true);
+    expect(component.hasAttribute('disabled')).to.be.true;
+    expect(component.disabled).to.equal(true);
+});
+it('can be required', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    expect(component.hasAttribute('required')).to.be.true;
+    expect(component.required).to.equal(true);
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-checkbox-group
+        label="Checkbox Group"
+      ></glide-core-checkbox-group>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('throws if the default slot is the incorrect type', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+        <button>Button</button>
+      </glide-core-checkbox-group>`);
+    });
+});

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

@@ -0,0 +1,110 @@
+import './checkbox.js';
+import * as sinon from 'sinon';
+import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
+import GlideCoreCheckboxGroup from './checkbox-group.js';
+GlideCoreCheckboxGroup.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-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    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-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    const checkbox = component.querySelector('glide-core-checkbox');
+    setTimeout(() => checkbox?.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-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    const checkbox = component.querySelector('glide-core-checkbox');
+    setTimeout(() => checkbox?.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 the checkbox is unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { 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 the checkbox is unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { 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 the checkbox is unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { 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-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { 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 disabled but required and the checkbox is unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { 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-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { 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 disabled but required and the checkbox is unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { parentNode: form });
+    const spy = sinon.spy();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});

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

@@ -0,0 +1,45 @@
+import './checkbox.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreCheckboxGroup from './checkbox-group.js';
+GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
+it('focuses the first checkbox when `focus` is called', async () => {
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`);
+    component.focus();
+    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
+});
+it('focuses the first checkbox after submit when required but the checkbox is unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, {
+        parentNode: form,
+    });
+    form.requestSubmit();
+    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
+});
+it('focuses the first checkbox after `reportValidity` is called when required but the checkbox is unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { parentNode: form });
+    component.reportValidity();
+    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
+});
+it('focuses the first checkbox after `requestSubmit` is called when required but the checkbox is unchecked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { parentNode: form });
+    form.requestSubmit();
+    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
+});
+it('does not focus the input after `checkValidity` is called', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
+      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { parentNode: form });
+    component.checkValidity();
+    expect(document.activeElement).to.not.equal(component.querySelector('glide-core-checkbox'));
+});