@crowdstrike/glide-core 0.9.6 → 0.10.0

package/dist/dropdown.test.interactions.single.js

@@ -119,10 +119,8 @@ it('selects an option when its icon is clicked', async () => {
     // Wait for it to open.
     await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
-    option?.shadowRoot
-        ?.querySelector('[data-test="icon-slot"]')
-        ?.assignedElements()
-        ?.at(0)
+    option
+        ?.querySelector('[slot="icon"]')
         ?.dispatchEvent(new Event('click', { bubbles: true }));
     expect(option?.selected).to.be.true;
 });
@@ -549,3 +547,27 @@ it('clicks the button when `click()` is called', async () => {
     const event = await oneEvent(button, 'click');
     expect(event instanceof PointerEvent).to.be.true;
 });
+it('unhides its options when made unfilterable', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    component.filterable = false;
+    const options = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ hidden }) => !hidden);
+    expect(options.length).to.equal(2);
+});

package/dist/form-controls-layout.d.ts

@@ -8,8 +8,6 @@ declare global {
     }
 }
 /**
- * @description Aligns form control labels and the controls themselves in two columns. Only horizontally oriented controls are supported.
- *
  * @slot - GlideCoreCheckbox | GlideCoreCheckboxGroup | GlideCoreDropdown | GlideCoreInput | GlideCoreTextArea.
  */
 export default class GlideCoreFormControlsLayout extends LitElement {

package/dist/icon-button.d.ts

@@ -5,9 +5,7 @@ declare global {
     }
 }
 /**
- * @description A button with only an icon.
- *
- * @slot - Reserved for the icon to display inside of the button.
+ * @slot - An icon.
  */
 export default class GlideCoreIconButton extends LitElement {
     #private;
@@ -17,9 +15,9 @@ export default class GlideCoreIconButton extends LitElement {
     ariaExpanded: 'true' | 'false' | null;
     ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
     disabled: boolean;
-    /** For screenreaders. Required. */
     label: string;
     variant: 'primary' | 'secondary' | 'tertiary';
+    click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/icon-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,l=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(l=(a<3?i(l):a>3?i(e,o,l):i(e,o))||l);return a>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./icon-button.styles.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.label="",this.variant="primary",this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${this.label}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" type="button" ?disabled="${this.disabled}"><slot @slotchange="${this.#e}" ${ref(this.#t)}></slot></button>`}#t;#e(){owSlot(this.#t.value)}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"variant",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button")],GlideCoreIconButton);export default GlideCoreIconButton;
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,l=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(l=(a<3?i(l):a>3?i(e,o,l):i(e,o))||l);return a>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./icon-button.styles.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.label="",this.variant="primary",this.#t=createRef(),this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#t.value?.click()}firstUpdated(){owSlot(this.#e.value)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${this.label}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#t)}><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></button>`}#t;#e;#o(){owSlot(this.#e.value)}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"variant",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button")],GlideCoreIconButton);export default GlideCoreIconButton;

package/dist/icon-button.test.basics.js

@@ -1,106 +1,38 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './icon-button.js';
 import { ArgumentError } from 'ow';
-import { assert, expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreIconButton from './icon-button.js';
 import sinon from 'sinon';
 GlideCoreIconButton.shadowRootOptions.mode = 'open';
-const icon = html `<svg
-  width="16"
-  height="16"
-  stroke="currentColor"
-  fill="none"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  stroke-width="2"
-  viewBox="0 0 24 24"
-  aria-hidden="true"
->
-  <path d="M16.51 9.873l-4.459 4.31-4.458-4.31"></path>
-</svg>`;
 it('registers', async () => {
     expect(window.customElements.get('glide-core-icon-button')).to.equal(GlideCoreIconButton);
 });
 it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      >${icon}</glide-core-icon-button
-    >`);
+    const component = await fixture(html `<glide-core-icon-button label="Label">
+      <div>Icon</div>
+    </glide-core-icon-button>`);
     await expect(component).to.be.accessible();
 });
 it('has defaults', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      >${icon}</glide-core-icon-button
-    >`);
-    const button = component.shadowRoot?.querySelector('button');
-    assert(button);
+    const component = await fixture(html `<glide-core-icon-button label="Label">
+      <div>Icon</div>
+    </glide-core-icon-button>`);
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
     expect(component.ariaControls).to.equal(null);
     expect(component.ariaExpanded).to.equal(null);
     expect(component.ariaHasPopup).to.equal(null);
-    expect(component.disabled).to.equal(false);
+    expect(component.disabled).to.be.false;
     expect(component.variant).to.equal('primary');
-    expect(button.getAttribute('aria-controls')).to.equal(null);
-    expect(button.ariaExpanded).to.equal(null);
-    expect(button.ariaHasPopup).to.equal(null);
-    expect(button.disabled).to.equal(false);
-    expect([...button.classList]).to.deep.equal(['component', 'primary']);
-});
-it('delegates focus', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      >${icon}</glide-core-icon-button
-    >`);
-    component.focus();
-    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('button'));
-});
-it('uses the provided "label" for the aria-label', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      >${icon}</glide-core-icon-button
-    >`);
-    expect(component.shadowRoot?.querySelector('button')?.getAttribute('aria-label')).to.equal('test-icon-button');
-});
-it('renders a default slot', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      ><span data-content>Inner content</span></glide-core-icon-button
-    >`);
-    expect(component.querySelector('[data-content]')).to.be.ok;
-    expect(component.querySelector('[data-content]')).to.be.visible;
-});
-it('renders a primary variant', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" variant="primary"
-      >${icon}</glide-core-icon-button
-    >`);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'primary']);
-});
-it('renders a secondary variant', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" variant="secondary"
-      >${icon}</glide-core-icon-button
-    >`);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'secondary']);
-});
-it('renders a tertiary variant', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" variant="tertiary"
-      >${icon}</glide-core-icon-button
-    >`);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'tertiary']);
-});
-it('sets the disabled attribute', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" disabled
-      >${icon}</glide-core-icon-button
-    >`);
-    expect(component.disabled).to.equal(true);
-    expect(component.shadowRoot?.querySelector('button')?.disabled).to.equal(true);
+    expect(button?.getAttribute('aria-controls')).to.equal(null);
+    expect(button?.ariaExpanded).to.equal(null);
+    expect(button?.ariaHasPopup).to.equal(null);
+    expect(button?.disabled).to.be.false;
 });
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();
     try {
-        await fixture(html `<glide-core-icon-button
-        label="test-icon-button"
-      ></glide-core-icon-button>`);
+        await fixture(html `<glide-core-icon-button label="Label"></glide-core-icon-button>`);
     }
     catch (error) {
         if (error instanceof ArgumentError) {

package/dist/icon-button.test.focus.d.ts

@@ -0,0 +1 @@
+import './icon-button.js';

package/dist/icon-button.test.focus.js

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './icon-button.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreIconButton from './icon-button.js';
+GlideCoreIconButton.shadowRootOptions.mode = 'open';
+it('focuses its button when `focus()` is called', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="Label">
+      <div>Icon</div>
+    </glide-core-icon-button>`);
+    component.focus();
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    expect(component.shadowRoot?.activeElement).to.equal(button);
+});

package/dist/input.d.ts

@@ -9,16 +9,14 @@ declare global {
 export declare const SUPPORTED_TYPES: readonly ["email", "number", "password", "search", "tel", "text", "url"];
 type SupportedTypes = (typeof SUPPORTED_TYPES)[number];
 /**
- * @description An input 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`
  *
  * @slot tooltip - Content for the tooltip.
  * @slot description - Additional information or context.
- * @slot prefix - An optional icon slot to display before the input.
- * @slot suffix - An optional icon slot to display after the input.
+ * @slot prefix-icon - An optional icon before the input field.
+ * @slot suffix-icon - An optional icon after the input field.
  */
 export default class GlideCoreInput extends LitElement {
     #private;
@@ -26,7 +24,7 @@ export default class GlideCoreInput extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     type: SupportedTypes;
-    name?: string;
+    name: string;
     value: string;
     label?: string;
     hideLabel: boolean;
@@ -35,6 +33,7 @@ export default class GlideCoreInput extends LitElement {
     clearable: boolean;
     spellcheck: boolean;
     autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
+    autocomplete: 'on' | 'off';
     /** For 'password' type, whether to show a button to toggle the password's visibility */
     passwordToggle: boolean;
     required: boolean;

package/dist/input.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(s<3?r(a):s>3?r(t,i,a):r(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./icon-button.js";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 magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#e.form}get validity(){return!this.required||this.value||this.disabled?this.#t?this.#e.setValidity({tooLong:!0}," ",this.#i.value):this.#e.setValidity({}):this.#e.setValidity({valueMissing:!0}," ",this.#i.value),this.#e.validity}get willValidate(){return this.#e.willValidate}blur(){this.#i.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#o)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#o)}formResetCallback(){this.value=this.getAttribute("value")??""}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return html`<glide-core-private-label class="${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#r||this.#t}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="${classMap({"input-container":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#r||this.#t})}" slot="control"><slot name="prefix"></slot><input aria-describedby="meta" aria-invalid="${this.#r||this.#t}" id="input" type="${"password"===this.type&&this.passwordVisible?"text":this.type}" .value="${this.value}" placeholder="${ifDefined(this.placeholder)}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focus="${this.#s}" @blur="${this.#a}" @change="${this.#l}" @input="${this.#n}" @keydown="${this.#d}" ${ref(this.#i)}> ${this.hasClearIcon?html`<glide-core-icon-button variant="tertiary" class="${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}" data-test="clear-button" label="${this.#h.term("clearEntry",this.label)}" @click="${this.#p}"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button>`:nothing} ${"password"===this.type&&this.passwordToggle&&!this.disabled?html`<glide-core-icon-button variant="tertiary" class="password-toggle" data-test="password-toggle" label="${this.passwordVisible?"Hide password":"Show password"}" aria-controls="input" aria-expanded="${this.passwordVisible?"true":"false"}" @click="${this.#c}">${this.passwordVisible?html`<svg aria-hidden="true" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>`:html`<svg aria-hidden="true" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>`}</glide-core-icon-button>`:nothing}<div class="suffix">${"search"===this.type?magnifyingGlassIcon:html`<slot name="suffix"></slot>`}</div></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.#t})}" data-test="character-count-container"><span aria-hidden="true" data-test="character-count-text">${this.#h.term("displayedCharacterCount",this.#u,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#h.term("announcedCharacterCount",this.#u,this.maxlength)}</span></div>`:nothing}</div></glide-core-private-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.type="text",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#i=createRef(),this.#h=new LocalizeController(this),this.#o=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#i;#e;#h;get#u(){return this.value.length}#o;get#t(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#u>this.maxlength)}get#r(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#a(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(e){ow(this.#i.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#i.value?.value,this.dispatchEvent(new Event(e.type,e))}#p(e){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),this.#i.value?.focus(),e.stopPropagation()}#s(){this.hasFocus=!0}#n(){ow(this.#i.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#i.value.value}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#c(){this.passwordVisible=!this.passwordVisible}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property()],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property()],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property()],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10)})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(s<3?r(a):s>3?r(t,i,a):r(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./icon-button.js";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 magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#e.form}get validity(){return!this.required||this.value||this.disabled?this.#t?this.#e.setValidity({tooLong:!0}," ",this.#i.value):this.#e.setValidity({}):this.#e.setValidity({valueMissing:!0}," ",this.#i.value),this.#e.validity}get willValidate(){return this.#e.willValidate}blur(){this.#i.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#o)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#o)}formResetCallback(){this.value=this.getAttribute("value")??""}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return html`<glide-core-private-label class="${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#r||this.#t}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="${classMap({"input-container":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#r||this.#t})}" slot="control"><slot name="prefix-icon"></slot><input aria-describedby="meta" aria-invalid="${this.#r||this.#t}" id="input" type="${"password"===this.type&&this.passwordVisible?"text":this.type}" .value="${this.value}" placeholder="${ifDefined(this.placeholder)}" autocapitalize="${this.autocapitalize}" autocomplete="${this.autocomplete}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focus="${this.#s}" @blur="${this.#a}" @change="${this.#l}" @input="${this.#n}" @keydown="${this.#d}" ${ref(this.#i)}> ${this.hasClearIcon?html`<glide-core-icon-button variant="tertiary" class="${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}" data-test="clear-button" label="${this.#h.term("clearEntry",this.label)}" @click="${this.#p}"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button>`:nothing} ${"password"===this.type&&this.passwordToggle&&!this.disabled?html`<glide-core-icon-button variant="tertiary" class="password-toggle" data-test="password-toggle" label="${this.passwordVisible?"Hide password":"Show password"}" aria-controls="input" aria-expanded="${this.passwordVisible?"true":"false"}" @click="${this.#c}">${this.passwordVisible?html`<svg aria-hidden="true" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>`:html`<svg aria-hidden="true" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>`}</glide-core-icon-button>`:nothing}<div class="suffix-icon">${"search"===this.type?magnifyingGlassIcon:html`<slot name="suffix-icon"></slot>`}</div></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.#t})}" data-test="character-count-container"><span aria-hidden="true" data-test="character-count-text">${this.#h.term("displayedCharacterCount",this.#u,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#h.term("announcedCharacterCount",this.#u,this.maxlength)}</span></div>`:nothing}</div></glide-core-private-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.type="text",this.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#i=createRef(),this.#h=new LocalizeController(this),this.#o=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#i;#e;#h;get#u(){return this.value.length}#o;get#t(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#u>this.maxlength)}get#r(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#a(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(e){ow(this.#i.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#i.value?.value,this.dispatchEvent(new Event(e.type,e))}#p(e){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),this.#i.value?.focus(),e.stopPropagation()}#s(){this.hasFocus=!0}#n(){ow(this.#i.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#i.value.value}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#c(){this.passwordVisible=!this.passwordVisible}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;

package/dist/input.styles.js

@@ -83,7 +83,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
         }
       }
 
-      .suffix {
+      .suffix-icon {
         align-items: center;
         display: flex;
       }
@@ -91,7 +91,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
 
     .clear-icon-button,
     .password-toggle,
-    ::slotted([slot='suffix']) {
+    ::slotted([slot='suffix-icon']) {
       align-items: center;
       background: none;
       border: none;
@@ -104,8 +104,8 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
     .clear-icon-button,
     .password-toggle,
     .search-icon,
-    ::slotted([slot='prefix']),
-    ::slotted([slot='suffix']) {
+    ::slotted([slot='prefix-icon']),
+    ::slotted([slot='suffix-icon']) {
       display: flex;
     }
 

package/dist/input.test.basics.js

@@ -136,55 +136,3 @@ it('does not render a character count when attribute `maxlength` is set less tha
     const container = component.shadowRoot?.querySelector('[data-test="character-count-container"]');
     expect(container).to.be.null;
 });
-it('supports a "tooltip" slot', async () => {
-    const component = await fixture(html `<glide-core-input label="test">
-      <div slot="tooltip">Tooltip</div>
-    </glide-core-input>`);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="tooltip"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
-});
-it('supports a "description" slot', async () => {
-    const component = await fixture(html `
-    <glide-core-input label="Test">
-      <div slot="description">Description</div>
-    </glide-core-input>
-  `);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="description"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Description');
-});
-it('supports a "prefix" icon slot', async () => {
-    const component = await fixture(html `
-    <glide-core-input label="Test">
-      <div slot="prefix">
-        <span data-svg></span>
-      </div>
-    </glide-core-input>
-  `);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="prefix"]')
-        ?.assignedElements();
-    const slottedSvg = assignedElements
-        ?.at(0)
-        ?.querySelector('[data-svg]');
-    expect(slottedSvg).to.exist;
-});
-it('supports a "suffix" icon slot', async () => {
-    const component = await fixture(html `
-    <glide-core-input label="Test">
-      <div slot="suffix">
-        <span data-svg></span>
-      </div>
-    </glide-core-input>
-  `);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="suffix"]')
-        ?.assignedElements();
-    const slottedSvg = assignedElements
-        ?.at(0)
-        ?.querySelector('[data-svg]');
-    expect(slottedSvg).to.exist;
-});

package/dist/input.test.events.js

@@ -9,90 +9,90 @@ import { sendKeys } from '@web/test-runner-commands';
 // 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 "change" event when typed in', async () => {
-    const input = await fixture(html `<glide-core-input></glide-core-input>`);
+    const component = await fixture(html `<glide-core-input></glide-core-input>`);
     setTimeout(async () => {
-        input.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        input.blur();
+        component.blur();
     });
-    const event = await oneEvent(input, 'change');
+    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 typed in', async () => {
-    const input = await fixture(html `<glide-core-input></glide-core-input>`);
+    const component = await fixture(html `<glide-core-input></glide-core-input>`);
     setTimeout(() => {
-        input.focus();
+        component.focus();
         sendKeys({ type: 'testing' });
     });
-    const event = await oneEvent(input, 'input');
+    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 no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
     setTimeout(() => form.requestSubmit());
-    const event = await oneEvent(input, '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 input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
-    setTimeout(() => input.checkValidity());
-    const event = await oneEvent(input, '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 input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
-    setTimeout(() => input.reportValidity());
-    const event = await oneEvent(input, '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 input = await fixture(html `<glide-core-input></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input></glide-core-input>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    input.addEventListener('invalid', spy);
-    input.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 and no value but disabled', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
+    const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
     const spy = sinon.spy();
-    input.addEventListener('invalid', spy);
-    input.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 input = await fixture(html `<glide-core-input></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input></glide-core-input>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    input.addEventListener('invalid', spy);
-    input.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 and no value but disabled', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
+    const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
     const spy = sinon.spy();
-    input.addEventListener('invalid', spy);
-    input.reportValidity();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });

package/dist/input.test.focus.js

@@ -4,54 +4,55 @@ import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreInput from './input.js';
 GlideCoreInput.shadowRootOptions.mode = 'open';
 it('focuses the input when `focus()` is called', async () => {
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
-    input.focus();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement).to.equal(inputElement);
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`);
+    component.focus();
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement).to.equal(inputElement);
 });
 it('focuses the input after submit when required and no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
     form.requestSubmit();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement).to.be.equal(inputElement);
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement).to.be.equal(inputElement);
 });
 it('blurs the input and reports validity if `blur` is called', async () => {
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
-    input.focus();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement).to.equal(inputElement);
-    input.blur();
-    await input.updateComplete;
-    expect(input.shadowRoot?.activeElement).to.equal(null);
-    expect(input.validity.valid).to.equal(false);
-    expect(input.shadowRoot?.querySelector('glide-core-private-label')?.error).to.equal(true);
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`);
+    component.focus();
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement).to.equal(inputElement);
+    component.blur();
+    await component.updateComplete;
+    expect(component.shadowRoot?.activeElement).to.equal(null);
+    expect(component.validity.valid).to.be.false;
+    expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
+        .to.be.true;
 });
 it('focuses the input after `reportValidity` is called when required and no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
-    input.reportValidity();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement).to.equal(inputElement);
+    component.reportValidity();
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement).to.equal(inputElement);
 });
 it('focuses the input after `requestSubmit` is called when required and no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
     form.requestSubmit();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement === inputElement).to.be.true;
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement === inputElement).to.be.true;
 });
 it('does not focus the input after `checkValidity` is called', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
-    input.checkValidity();
-    expect(input.shadowRoot?.activeElement === null).to.be.true;
+    component.checkValidity();
+    expect(component.shadowRoot?.activeElement === null).to.be.true;
 });

package/dist/input.test.form.js

@@ -6,21 +6,21 @@ import GlideCoreInput from './input.js';
 import sinon from 'sinon';
 it('can be reset to initial value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
         parentNode: form,
     });
-    input.value = '';
+    component.value = '';
     form.reset();
-    expect(input.value).to.equal('value');
+    expect(component.value).to.equal('value');
 });
 it('can be reset if there was no initial value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input></glide-core-input>`, {
         parentNode: form,
     });
-    input.value = 'value';
+    component.value = 'value';
     form.reset();
-    expect(input.value).to.equal('');
+    expect(component.value).to.equal('');
 });
 it('has `formData` value when it has a value', async () => {
     const form = document.createElement('form');