@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/tag.test.events.js

@@ -1,16 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tag.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import GlideCoreTag from './tag.js';
+import sinon from 'sinon';
 GlideCoreTag.shadowRootOptions.mode = 'open';
-it('dispatches a "remove" event when the icon button is clicked', async () => {
-    const component = await fixture(html `<glide-core-tag removable-label="test-aria-label"
-      ><span slot="prefix">Prefix</span
-      ><span data-content>Tag</span></glide-core-tag
-    >`);
-    const iconButton = component.shadowRoot?.querySelector('[data-test="button"]');
+it('dispatches one "remove" event', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    const spy = sinon.spy();
+    component.addEventListener('remove', spy);
     setTimeout(() => {
-        iconButton?.click();
+        component.shadowRoot
+            ?.querySelector('[data-test="button"]')
+            ?.click();
     });
     const event = await oneEvent(component, 'remove');
-    expect(event?.type).to.be.equal('remove');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });

package/dist/tag.test.focus.js

@@ -1,10 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTag from './tag.js';
 GlideCoreTag.shadowRootOptions.mode = 'open';
 it('calling `focus()` focuses the button', async () => {
-    const component = await fixture(html `<glide-core-tag removable-label="Removable Label"
-      >Tag</glide-core-tag
-    >`);
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
     component.focus();
     const button = component.shadowRoot?.querySelector('[data-test="button"]');
     expect(component.shadowRoot?.activeElement).to.equal(button);

package/dist/tag.test.interactions.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tag.test.interactions.js

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreTag from './tag.js';
+GlideCoreTag.shadowRootOptions.mode = 'open';
+it('removes itself on click', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    component.click();
+    // Wait for the animation to complete.
+    await aTimeout(200);
+    expect(document.querySelector('glide-core-tag')).to.be.null;
+});
+it('does not remove itself on click when disabled', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" disabled removable></glide-core-tag>`);
+    component.click();
+    // Wait for the animation to complete.
+    await aTimeout(200);
+    expect(document.querySelector('glide-core-tag') instanceof GlideCoreTag).to.be
+        .true;
+});
+it('removes itself on Space', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    component.focus();
+    await sendKeys({ press: ' ' });
+    // Wait for the animation to complete.
+    await aTimeout(200);
+    expect(document.querySelector('glide-core-tag')).to.be.null;
+});
+it('removes itself on Enter', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    // Wait for the animation to complete.
+    await aTimeout(200);
+    expect(document.querySelector('glide-core-tag')).to.be.null;
+});

package/dist/textarea.d.ts

@@ -6,8 +6,6 @@ declare global {
     }
 }
 /**
- * @description A text area with a label and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
- *
  * @event change - `(event: Event) => void`
  * @event input - `(event: Event) => void`
  * @event invalid - `(event: Event) => void`
@@ -30,9 +28,10 @@ export default class GlideCoreTextarea extends LitElement {
     readonly: boolean;
     disabled: boolean;
     maxlength?: number;
-    name?: string;
+    name: string;
     spellcheck: boolean;
     autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
+    autocomplete: 'on' | 'off';
     privateSplit?: 'left' | 'middle';
     blur(): void;
     checkValidity(): boolean;

package/dist/textarea.js

@@ -1,2 +1,2 @@
-var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,l=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,a);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(o<3?r(l):o>3?r(t,i,l):r(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l};import"./label.js";import{LitElement,html,nothing}from"lit";import{LocalizeController}from"./library/localize.js";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 ow from"./library/ow.js";import styles from"./textarea.styles.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#t.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get form(){return this.#t.form}get validity(){return!this.required||this.value||this.disabled?this.#a?this.#t.setValidity({tooLong:!0}," ",this.#e.value):this.#t.setValidity({}):this.#t.setValidity({valueMissing:!0}," ",this.#e.value),this.#t.validity}get willValidate(){return this.#t.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#r||this.#a}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label class="label" for="textarea">${this.label}</label><div class="textarea-container" slot="control"><textarea aria-describedby="meta" aria-invalid="${this.#r||this.#a}" class="${classMap({error:this.#r||this.#a})}" id="textarea" name="${ifDefined(this.name)}" placeholder="${ifDefined(this.placeholder)}" rows="${this.rows}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" .value="${this.value}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ${ref(this.#e)} @input="${this.#o}" @change="${this.#l}" @blur="${this.#s}">
-        </textarea></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?html`<div class="${classMap({"character-count":!0,error:this.#a})}" data-test="character-count-container"><span aria-hidden="true" data-test="character-count-text">${this.#d.term("displayedCharacterCount",this.#n,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#d.term("announcedCharacterCount",this.#n,this.maxlength)}</span></div>`:nothing}</div></glide-core-private-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#t.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.spellcheck=!1,this.autocapitalize="on",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=new LocalizeController(this),this.#e=createRef(),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#t;#d;#e;#i;get#r(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#n(){return this.value.length}get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#n>this.maxlength)}#s(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#l(e){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value,this.dispatchEvent(new Event(e.type,e))}#o(){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property()],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property()],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10)})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property()],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;
+var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,l=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,a);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(o<3?r(l):o>3?r(t,i,l):r(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l};import"./label.js";import{LitElement,html,nothing}from"lit";import{LocalizeController}from"./library/localize.js";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 ow from"./library/ow.js";import styles from"./textarea.styles.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#t.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get form(){return this.#t.form}get validity(){return!this.required||this.value||this.disabled?this.#a?this.#t.setValidity({tooLong:!0}," ",this.#e.value):this.#t.setValidity({}):this.#t.setValidity({valueMissing:!0}," ",this.#e.value),this.#t.validity}get willValidate(){return this.#t.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#r||this.#a}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label class="label" for="textarea">${this.label}</label><div class="textarea-container" slot="control"><textarea aria-describedby="meta" aria-invalid="${this.#r||this.#a}" class="${classMap({error:this.#r||this.#a})}" id="textarea" name="${ifDefined(this.name)}" placeholder="${ifDefined(this.placeholder)}" rows="${this.rows}" autocapitalize="${this.autocapitalize}" autocomplete="${this.autocomplete}" spellcheck="${this.spellcheck}" .value="${this.value}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ${ref(this.#e)} @input="${this.#o}" @change="${this.#l}" @blur="${this.#s}">
+        </textarea></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?html`<div class="${classMap({"character-count":!0,error:this.#a})}" data-test="character-count-container"><span aria-hidden="true" data-test="character-count-text">${this.#d.term("displayedCharacterCount",this.#n,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#d.term("announcedCharacterCount",this.#n,this.maxlength)}</span></div>`:nothing}</div></glide-core-private-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#t.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=new LocalizeController(this),this.#e=createRef(),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#t;#d;#e;#i;get#r(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#n(){return this.value.length}get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#n>this.maxlength)}#s(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#l(e){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value,this.dispatchEvent(new Event(e.type,e))}#o(){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement)),this.value=this.#e.value.value}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;

package/dist/textarea.test.basics.js

@@ -20,9 +20,9 @@ it('renders a textarea with two rows and value when attribute `value` is set ',
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
     expect(component);
-    expect(component).to.have.attribute('rows', '2');
+    expect(component?.getAttribute('rows')).to.equal('2');
     expect(textarea).to.exist;
-    expect(textarea).to.have.attribute('rows', '2');
+    expect(textarea?.getAttribute('rows')).to.equal('2');
 });
 it('renders the `rows` attribute on the textarea when set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -31,7 +31,7 @@ it('renders the `rows` attribute on the textarea when set', async () => {
       rows="5"
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('rows', '5');
+    expect(textarea?.getAttribute('rows')).to.equal('5');
 });
 it('renders a label when attribute `label` is set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -49,7 +49,7 @@ it('renders the textarea as readonly when attribute `readonly` is set', async ()
       readonly
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('readonly');
+    expect(textarea?.hasAttribute('readonly')).to.be.true;
 });
 it('renders the textarea as disabled when attribute `disabled` is set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -58,7 +58,7 @@ it('renders the textarea as disabled when attribute `disabled` is set', async ()
       disabled
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('disabled');
+    expect(textarea?.hasAttribute('disabled')).to.be.true;
 });
 it('renders the textarea with a placeholder when attribute `placeholder` is set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -67,7 +67,7 @@ it('renders the textarea with a placeholder when attribute `placeholder` is set'
       placeholder="placeholder"
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('placeholder', 'placeholder');
+    expect(textarea?.getAttribute('placeholder')).to.equal('placeholder');
 });
 it('renders `required` on textarea when set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -76,7 +76,7 @@ it('renders `required` on textarea when set', async () => {
       required
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('required');
+    expect(textarea?.hasAttribute('required')).to.be.true;
 });
 it('renders a `name` attribute on the textarea when set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -85,7 +85,7 @@ it('renders a `name` attribute on the textarea when set', async () => {
       name="test-name"
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('name', 'test-name');
+    expect(textarea?.getAttribute('name')).to.equal('test-name');
 });
 it('supports a "tooltip" slot', async () => {
     const component = await fixture(html `

package/dist/textarea.test.events.js

@@ -4,68 +4,68 @@ import * as sinon from 'sinon';
 import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 it('dispatches a `input` event when typed in', async () => {
-    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        textarea.blur();
+        component.blur();
     });
-    const event = await oneEvent(textarea, 'input');
+    const event = await oneEvent(component, 'input');
     expect(event instanceof Event).to.be.true;
     expect(event.bubbles).to.be.true;
 });
 it('dispatches an `change` event when typed in', async () => {
-    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        textarea.blur();
+        component.blur();
     });
-    const event = await oneEvent(textarea, 'change');
+    const event = await oneEvent(component, 'change');
     expect(event instanceof Event).to.be.true;
     expect(event.bubbles).to.be.true;
 });
 it('dispatches an `invalid` event on submit when required and no value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(() => form.requestSubmit());
-    const event = await oneEvent(textarea, 'invalid');
+    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 no value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
-    setTimeout(() => textarea.checkValidity());
-    const event = await oneEvent(textarea, 'invalid');
+    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 no value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
-    setTimeout(() => textarea.reportValidity());
-    const event = await oneEvent(textarea, 'invalid');
+    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 textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.checkValidity();
+    component.addEventListener('invalid', spy);
+    component.checkValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an `invalid` event after `checkValidity` is called when required, no value, and disabled', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       required
       disabled
@@ -73,25 +73,25 @@ it('does not dispatch an `invalid` event after `checkValidity` is called when re
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.checkValidity();
+    component.addEventListener('invalid', spy);
+    component.checkValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an `invalid` event when `reportValidity` is called when not required,', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.reportValidity();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an `invalid` event when `reportValidity` is called when required, no value, and disabled', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       required
       disabled
@@ -99,78 +99,78 @@ it('does not dispatch an `invalid` event when `reportValidity` is called when re
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.reportValidity();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('dispatches an `invalid` event after `requestSubmit` is called when `maxlength` exceeded', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
         form.requestSubmit();
     });
-    const event = await oneEvent(textarea, 'invalid');
+    const event = await oneEvent(component, 'invalid');
     expect(event instanceof Event).to.be.true;
 });
 it('dispatches an `invalid` event after `checkValidity` is called when `maxlength` exceeded', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        textarea.checkValidity();
+        component.checkValidity();
     });
-    const event = await oneEvent(textarea, 'invalid');
+    const event = await oneEvent(component, 'invalid');
     expect(event instanceof Event).to.be.true;
 });
 it('dispatches an `invalid` event after `reportValidity` is called when `maxlength` exceeded', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        textarea.reportValidity();
+        component.reportValidity();
     });
-    const event = await oneEvent(textarea, 'invalid');
+    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 `maxlength` not exceeded', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.focus();
+    component.addEventListener('invalid', spy);
+    component.focus();
     await sendKeys({ type: 'ab' });
-    textarea.checkValidity();
+    component.checkValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` exceeded and disabled', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
       disabled
@@ -178,32 +178,32 @@ it('does not dispatch an `invalid` event after `checkValidity` is called when `m
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.focus();
+    component.addEventListener('invalid', spy);
+    component.focus();
     await sendKeys({ type: 'test' });
-    textarea.checkValidity();
+    component.checkValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an `invalid` event when `reportValidity` is called and `maxlength` is not exceeded,', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.focus();
+    component.addEventListener('invalid', spy);
+    component.focus();
     await sendKeys({ type: 'ab' });
-    textarea.reportValidity();
+    component.reportValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an `invalid` event when `reportValidity` is called `maxlength` exceeded and disabled,', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
       disabled
@@ -211,10 +211,10 @@ it('does not dispatch an `invalid` event when `reportValidity` is called `maxlen
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.focus();
+    component.addEventListener('invalid', spy);
+    component.focus();
     await sendKeys({ type: 'test' });
-    textarea.reportValidity();
+    component.reportValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });

package/dist/textarea.test.form.js

@@ -4,22 +4,22 @@ import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 it('can be reset to initial value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="testing"
       label="label"
     ></glide-core-textarea>`, { parentNode: form });
-    textarea.focus();
+    component.focus();
     await sendKeys({ type: '-value' });
-    await expect(textarea.value).to.equal('testing-value');
+    await expect(component.value).to.equal('testing-value');
     form.reset();
-    expect(textarea.value).to.equal('testing');
+    expect(component.value).to.equal('testing');
 });
 it('can be reset if there was no initial value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, { parentNode: form });
-    textarea.value = 'value';
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, { parentNode: form });
+    component.value = 'value';
     form.reset();
-    expect(textarea.value).to.equal('');
+    expect(component.value).to.equal('');
 });
 it('has `formData` when it has a `value` and `name`', async () => {
     const form = document.createElement('form');
@@ -33,12 +33,12 @@ it('has `formData` when it has a `value` and `name`', async () => {
 });
 it('has `formData` when text is entered and has a `name`', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value=""
       label="label"
       name="name"
     ></glide-core-textarea>`, { parentNode: form });
-    textarea?.focus();
+    component?.focus();
     await sendKeys({ type: 'testing' });
     const formData = new FormData(form);
     expect(formData.get('name')).to.be.equal('testing');