@crowdstrike/glide-core 0.11.0 → 0.12.0

package/dist/checkbox-group.d.ts

@@ -41,8 +41,11 @@ export default class GlideCoreCheckboxGroup extends LitElement {
     formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    setValidity(flags?: ValidityStateFlags, message?: string): void;
     constructor();
     private isBlurring;
     private isCheckingValidity;
     private isReportValidityOrSubmit;
+    private validityMessage?;
 }

package/dist/checkbox-group.js

@@ -1 +1,43 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,i,l):r(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};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{ifDefined}from"lit/directives/if-defined.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()}get value(){return this.#r}set value(e){this.#r=e;for(const t of this.#t){e.some((e=>e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#s)}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",e.addEventListener("blur",this.#a.bind(this))}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.#d.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){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div class="component" data-test="component" ${ref(this.#d)}><glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${this.#c}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control" class="${classMap({"checkbox-container":!0,invalid:this.#c})}"><slot class="checkboxes" @change="${this.#n}" @private-value-change="${this.#h}" @slotchange="${this.#p}" ${ref(this.#l)}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#l=createRef(),this.#e=!1,this.#i=!1,this.#r=[],this.#s=({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=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#d;#l;#o;#e;#i;#r;get#t(){return this.#l.value?this.#l.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#s;get#c(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.isReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#n(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#r.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#r.filter((t=>t!==e.detail.old)))}#p(){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()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",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;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var s,l=arguments.length,r=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(r=(l<3?s(r):l>3?s(t,i,r):s(t,i))||r);return l>3&&r&&Object.defineProperty(t,i,r),r};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{ifDefined}from"lit/directives/if-defined.js";import{owSlot,owSlotType}from"./library/ow.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.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()}get value(){return this.#s}set value(e){this.#s=e;for(const t of this.#t){e.some((e=>e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#l)}firstUpdated(){if(owSlot(this.#r.value),owSlotType(this.#r.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",e.addEventListener("blur",this.#a.bind(this))}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#o.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#d.value),this.required&&this.#o.validity.valueMissing&&e&&this.#o.setValidity({}),this.required||!this.#o.validity.valueMissing||e||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){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#l)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div
+      class="component"
+      data-test="component"
+      ${ref(this.#d)}
+    >
+      <glide-core-private-label
+        split=${ifDefined(this.privateSplit??void 0)}
+        ?hide=${this.hideLabel}
+        ?disabled=${this.disabled}
+        ?error=${this.#n}
+        ?required=${this.required}
+      >
+        <slot name="tooltip" slot="tooltip"></slot>
+        <label id="label">${this.label}</label>
+
+        <!-- "aria-describedby" is more appropriate for a description but isn't read by VoiceOver. -->
+        <div
+          aria-labelledby="label description"
+          role="group"
+          slot="control"
+          class=${classMap({"checkbox-container":!0,invalid:this.#n})}
+        >
+          <slot
+            class="checkboxes"
+            @change=${this.#c}
+            @private-value-change=${this.#h}
+            @slotchange=${this.#p}
+            ${ref(this.#r)}
+          ></slot>
+        </div>
+
+        <div id="description" slot="description">
+          <slot
+            class=${classMap({description:!0,hidden:Boolean(this.#n&&this.validityMessage)})}
+            name="description"
+          ></slot>
+
+          ${when(this.#n&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+                >${unsafeHTML(this.validityMessage)}</span
+              >`))}
+        </div>
+      </glide-core-private-label>
+    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#l=({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=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#d;#r;#o;#e;#i;#s;get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#l;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.isReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#c(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#p(){owSlot(this.#r.value),owSlotType(this.#r.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()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;

package/dist/checkbox-group.styles.js

@@ -29,4 +29,16 @@ import{css}from"lit";export default[css`
       grid-column: 2;
       row-gap: var(--glide-core-spacing-xs);
     }
+
+    .description {
+      display: block;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .validity-message {
+      display: block;
+    }
   `];

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

@@ -74,3 +74,72 @@ it('sets the checkbox as invalid when `required` is set to `true` dynamically',
     const checkbox = component.querySelector('glide-core-checkbox');
     expect(checkbox?.validity.valid).to.be.false;
 });
+it('sets the validity message with `setCustomValidity()`', 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.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('removes a validity message with an empty argument to `setCustomValidity()`', 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.setCustomValidity('validity message');
+    component.reportValidity();
+    await elementUpdated(component);
+    component.setCustomValidity('');
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('is invalid when `setValidity()` is called', 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.setValidity({ customError: true }, 'validity message');
+    expect(component.validity.valid).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.validity?.customError).to.be.true;
+    component.reportValidity();
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('is valid when `setValidity()` is called', 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.setValidity({ customError: true }, 'validity message');
+    component.setValidity({});
+    await elementUpdated(component);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity.customError).to.be.false;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('retains existing validity state when `setCustomValidity()` 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" value="value"></glide-core-checkbox>
+    </glide-core-checkbox-group>`, { parentNode: form });
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.validity?.valueMissing).to.be.true;
+});

package/dist/checkbox.d.ts

@@ -51,11 +51,13 @@ export default class GlideCoreCheckbox extends LitElement {
     formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
-    setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+    setCustomValidity(message: string): void;
+    setValidity(flags?: ValidityStateFlags, message?: string): void;
     get willValidate(): boolean;
     updated(): void;
     constructor();
     private isBlurring;
     private isCheckingValidity;
     private isLabelOverflow;
+    private validityMessage?;
 }

package/dist/checkbox.js

@@ -1 +1,135 @@
-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 l=e.length-1;l>=0;l--)(r=e[l])&&(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"./tooltip.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{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=html`<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 label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#o.form}blur(){this.#r.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#r.value?.click()}connectedCallback(){super.connectedCallback(),this.#a=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#a.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#s),this.#a?.disconnect()}get validity(){return"minimal"===this.privateVariant||(this.required&&!this.checked?this.#o.setValidity({valueMissing:!0}," ",this.#r.value):this.#o.setValidity({})),this.#o.validity}focus(e){this.#r.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}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="${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}" part="private-label-and-input-and-checkbox"><div class="input-and-checkbox"><input aria-invalid="${this.#l}" data-test="input" type="checkbox" .checked="${this.checked}" .inert="${this.internallyInert}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#n}" @input="${this.#n}" @keydown="${this.#d}" ${ref(this.#r)}><div class="${classMap({checkbox:!0,disabled:this.disabled})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div><div class="icon-and-label"><slot name="private-icon"></slot><glide-core-tooltip class="label-tooltip" offset="${this.privateLabelTooltipOffset}" ?disabled="${!this.isLabelOverflow}" ?open="${this.privateShowLabelTooltip}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" slot="target" ${ref(this.#h)}>${this.label}</div></glide-core-tooltip></div></label>`),(()=>html`<glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#l}" ?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.#l}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @blur="${this.#c}" @change="${this.#n}" @input="${this.#n}" @keydown="${this.#d}" ${ref(this.#r)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#l})}"><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-private-label>`))}</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setValidity(e,t,i){return this.#o.setValidity(e,t,i)}get willValidate(){return this.#o.willValidate}updated(){this.#r.value&&(this.#r.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.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateSize="large",this.required=!1,this.isReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#r=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#s=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#r;#o;#a;#e;#h;#i;#s;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.isReportValidityOrSubmit:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.value.clientWidth)}};__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",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",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",null),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;
+var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length,r=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(r=(o<3?a(r):o>3?a(t,i,r):a(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r};import"./label.js";import"./tooltip.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{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=html`
+  <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 label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#s.form}blur(){this.#a.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#s.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#a.value?.click()}connectedCallback(){super.connectedCallback(),this.#o=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#o.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r),this.#o?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#s.validity:this.required&&!this.checked?(this.#s.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#a.value),this.#s.validity):this.required&&this.#s.validity.valueMissing&&this.checked?(this.#s.setValidity({}),this.#s.validity):(this.required||!this.#s.validity.valueMissing||this.checked||this.#s.setValidity({}),this.#s.validity)}focus(e){this.#a.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}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=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
+            part="private-label-and-input-and-checkbox"
+          >
+            <div class="input-and-checkbox">
+              <input
+                aria-invalid=${this.#l}
+                data-test="input"
+                type="checkbox"
+                .checked=${this.checked}
+                .inert=${this.internallyInert}
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                @change=${this.#n}
+                @input=${this.#n}
+                @keydown=${this.#d}
+                ${ref(this.#a)}
+              />
+
+              <div
+                class=${classMap({checkbox:!0,disabled:this.disabled})}
+              >
+                <div class="checked-icon">${checkedIcon}</div>
+                ${indeterminateIcon}
+              </div>
+            </div>
+
+            <div class="icon-and-label">
+              <slot name="private-icon"></slot>
+
+              <glide-core-tooltip
+                class="label-tooltip"
+                offset=${this.privateLabelTooltipOffset}
+                ?disabled=${!this.isLabelOverflow}
+                ?open=${this.privateShowLabelTooltip}
+              >
+                <div aria-hidden="true" data-test="tooltip">${this.label}</div>
+
+                <div class="label" slot="target" ${ref(this.#h)}>
+                  ${this.label}
+                </div>
+              </glide-core-tooltip>
+            </div>
+          </label>
+        `),(()=>html`<glide-core-private-label
+            orientation=${this.orientation}
+            split=${ifDefined(this.privateSplit??void 0)}
+            ?disabled=${this.disabled}
+            ?error=${this.#l}
+            ?hide=${this.hideLabel}
+            ?required=${this.required}
+          >
+            <slot name="tooltip" slot="tooltip"></slot>
+            <label for="input"> ${this.label} </label>
+
+            <!--
+              The input is described by the summary and description but not the tooltip.
+              Screenreaders will come across the tooltip naturally as focus moves toward
+              the Checkbox.
+
+              —
+
+              A native input isn't necessary given the component itself is form associated.
+              A button, for example, could also be made to work. But an input gives us a
+              few things that together make using one worthwhile:
+
+              - "change" and "input" events.
+              - Toggling checked using the spacebar.
+              - ":checked" and ":indeterminate" pseudo classes, which browsers don't support
+                on hosts even when a component is form-associated.
+
+              -
+
+              aria-invalid is set based on whether the validation feedback is displayed. This
+              is to handle an odd behavior with checkboxes where "Invalid Data" is announced
+              on required unchecked inputs. While this is technically correct, it's
+              inconsistent with how other form controls behave as their validity isn’t announced
+              on screen readers by default before validation.
+            -->
+            <div class="input-and-checkbox" slot="control">
+              <input
+                aria-describedby="summary description"
+                aria-invalid=${this.#l}
+                data-test="input"
+                id="input"
+                type="checkbox"
+                .checked=${this.checked}
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                @blur=${this.#c}
+                @change=${this.#n}
+                @input=${this.#n}
+                @keydown=${this.#d}
+                ${ref(this.#a)}
+              />
+
+              <div
+                class=${classMap({checkbox:!0,disabled:this.disabled,error:this.#l})}
+              >
+                <div class="checked-icon">${checkedIcon}</div>
+                ${indeterminateIcon}
+              </div>
+            </div>
+
+            <div id="summary" slot="summary">${this.summary}</div>
+
+            <div id="description" slot="description">
+              <slot
+                class=${classMap({description:!0,hidden:Boolean(this.#l&&this.validityMessage)})}
+                name="description"
+              ></slot>
+              ${when(this.#l&&this.validityMessage,(()=>html`<span
+                    class="validity-message"
+                    data-test="validity-message"
+                    >${unsafeHTML(this.validityMessage)}</span
+                  >`))}
+            </div>
+          </glide-core-private-label>`))}
+    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#s.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#s.setValidity({customError:!1},"",this.#a.value):this.#s.setValidity({customError:!0,valueMissing:this.#s.validity.valueMissing}," ",this.#a.value)}setValidity(e,t){this.validityMessage=t,this.#s.setValidity(e," ",this.#a.value)}get willValidate(){return this.#s.willValidate}updated(){this.#a.value&&(this.#a.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.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateSize="large",this.required=!1,this.isReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#a=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#r=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#s=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#a;#s;#o;#e;#h;#i;#r;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.isReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.value.clientWidth)}};__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",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",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",null),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;

package/dist/checkbox.styles.js

@@ -185,4 +185,16 @@ when browsers support them.
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    .description {
+      display: block;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .validity-message {
+      display: block;
+    }
   `];

package/dist/checkbox.test.validity.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreCheckbox from './checkbox.js';
 GlideCoreCheckbox.shadowRootOptions.mode = 'open';
 it('is valid if unchecked but not required', async () => {
@@ -50,3 +50,79 @@ it('is both invalid and valid if unchecked and required but disabled', async ()
     expect(component.checkValidity()).to.be.true;
     expect(component.reportValidity()).to.be.true;
 });
+it('is valid when `value` is empty and `required` is updated to `false` programmatically', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`);
+    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;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+    component.required = false;
+    await elementUpdated(component);
+    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;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
+});
+it('sets the validity message with `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    component.setCustomValidity('validity message');
+    component.reportValidity();
+    await elementUpdated(component);
+    component.setCustomValidity('');
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('is invalid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    component.setValidity({ customError: true }, 'validity message');
+    expect(component.validity.valid).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.validity?.customError).to.be.true;
+    component.reportValidity();
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('is valid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
+    component.setValidity({ customError: true }, 'validity message');
+    component.setValidity({});
+    await elementUpdated(component);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity.customError).to.be.false;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('retains existing validity state when `setCustomValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.validity?.valueMissing).to.be.true;
+});

package/dist/dropdown.d.ts

@@ -65,6 +65,8 @@ export default class GlideCoreDropdown extends LitElement {
     formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    setValidity(flags?: ValidityStateFlags, message?: string): void;
     constructor();
     private ariaActivedescendant;
     private isBlurring;
@@ -75,4 +77,5 @@ export default class GlideCoreDropdown extends LitElement {
     private isReportValidityOrSubmit;
     private isShowSingleSelectIcon;
     private tagOverflowLimit;
+    private validityMessage?;
 }