@crowdstrike/glide-core 0.8.0 → 0.9.0

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
@@ -21,7 +21,11 @@ it('opens on click', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('toggles open and closed when the button is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -37,7 +41,10 @@ it('toggles open and closed when the button is clicked', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    await elementUpdated(component);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not toggle open and closed when the button overflow text is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -53,7 +60,11 @@ it('does not toggle open and closed when the button overflow text is clicked', a
     component.shadowRoot
         ?.querySelector('[data-test="tag-overflow-text"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('selects an option on click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -62,6 +73,8 @@ it('selects an option on click', async () => {
         value="one"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.click();
     await elementUpdated(component);
@@ -77,11 +90,26 @@ it('selects an option on Space', async () => {
         value="one"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ press: ' ' });
     expect(option?.selected).to.be.true;
 });
+it('does not deselect options on Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.focus();
+    await sendKeys({ press: ' ' });
+    const option = component.querySelector('glide-core-dropdown-option');
+    expect(option?.selected).to.be.true;
+});
 it('selects an option on Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
@@ -89,6 +117,8 @@ it('selects an option on Enter', async () => {
         value="one"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ press: 'Enter' });
@@ -122,6 +152,17 @@ it('closes when an option is selected via click', async () => {
     component.querySelector('glide-core-dropdown-option')?.click();
     expect(component.open).to.be.false;
 });
+it('closes when an option is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ press: ' ' });
+    expect(component.open).to.be.false;
+});
 it('closes when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
@@ -129,6 +170,19 @@ it('closes when an option is selected via Enter', async () => {
         value="value"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.open).to.be.false;
+});
+it('closes when an option is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     component.querySelector('glide-core-dropdown-option')?.focus();
     await sendKeys({ press: 'Enter' });
     expect(component.open).to.be.false;
@@ -140,6 +194,8 @@ it('closes when an option is selected via Space', async () => {
         value="value"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ press: ' ' });
@@ -211,7 +267,7 @@ it('throws when `value` is changed programmatically to include more than one val
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('updates `value` when an option `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -274,6 +330,8 @@ it('updates `value` when an option is selected via Enter', async () => {
 
       <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].focus();
     await sendKeys({ press: 'Enter' });
@@ -283,7 +341,7 @@ it('updates `value` when an option is selected via Enter', async () => {
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
-    await elementUpdated(component);
+    await aTimeout(0);
     options[1].focus();
     await sendKeys({ press: 'Enter' });
     expect(component.value).to.deep.equal(['two']);
@@ -292,7 +350,7 @@ it('updates `value` when an option is selected via Enter', async () => {
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
-    await elementUpdated(component);
+    await aTimeout(0);
     options[2].focus();
     await sendKeys({ press: 'Enter' });
     expect(component.value).to.deep.equal([]);
@@ -311,6 +369,8 @@ it('updates `value` when an option is selected via Space', async () => {
 
       <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].focus();
     await sendKeys({ press: ' ' });
@@ -320,7 +380,7 @@ it('updates `value` when an option is selected via Space', async () => {
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
-    await elementUpdated(component);
+    await aTimeout(0);
     options[1].focus();
     await sendKeys({ press: ' ' });
     expect(component.value).to.deep.equal(['two']);
@@ -329,7 +389,7 @@ it('updates `value` when an option is selected via Space', async () => {
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
-    await elementUpdated(component);
+    await aTimeout(0);
     options[2].focus();
     await sendKeys({ press: ' ' });
     expect(component.value).to.deep.equal([]);
@@ -442,6 +502,8 @@ it('does not select an option on Enter when the option is not focused', async ()
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ down: 'Tab' });

package/dist/form-controls-layout.test.basics.js

@@ -49,7 +49,7 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('throws if its default slot is the incorrect type', async () => {
     await expectArgumentError(() => {

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

@@ -107,5 +107,5 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });

package/dist/icons/checked.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").TemplateResult;
+declare const _default: import("lit").TemplateResult<1>;
 export default _default;

package/dist/icons/checked.js

@@ -1 +1 @@
-import{svg}from"lit/static-html.js";export default svg`<svg fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+import{html}from"lit";export default html`<svg fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/icons/magnifying-glass.js

@@ -1 +1 @@
-import{svg}from"lit/static-html.js";export default svg`<svg class="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;
+import{svg}from"lit/static-html.js";export default svg`<svg class="search-icon" data-test="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;

package/dist/input.d.ts

@@ -41,24 +41,18 @@ export default class GlideCoreInput extends LitElement {
     disabled: boolean;
     privateSplit?: 'left' | 'middle';
     maxlength?: number;
-    descriptionNodes: NodeListOf<HTMLElement>;
-    prefixIconNodes: NodeListOf<HTMLElement>;
-    suffixIconNodes: NodeListOf<HTMLElement>;
     get form(): HTMLFormElement | null;
     get validity(): ValidityState;
     get willValidate(): boolean;
     blur(): void;
     checkValidity(): boolean;
     disconnectedCallback(): void;
-    firstUpdated(): void;
     formAssociatedCallback(): void;
     formResetCallback(): void;
-    get isTypeSearch(): boolean;
     get hasClearIcon(): boolean;
     get isClearIconVisible(): boolean;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
-    get valueCharacterCount(): number;
     constructor();
     private hasFocus;
     private isBlurring;

package/dist/input.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,i,o){var r,s=arguments.length,a=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s<3?r(a):s>3?r(e,i,a):r(e,i))||a);return s>3&&a&&Object.defineProperty(e,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,queryAssignedNodes,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.#t.form}get validity(){return this.#t.validity}get willValidate(){return this.#t.willValidate}blur(){this.#e?.blur()}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}firstUpdated(){this.#o()}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}get isTypeSearch(){return"search"===this.type}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return html`<glide-core-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.#s}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="${classMap({"input-box":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#r||this.#s})}" slot="control"><slot name="prefix"></slot><input aria-describedby="meta" 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.#a}" @blur="${this.#l}" @change="${this.#n}" @input="${this.#d}" ${ref(this.#p)}> ${this.hasClearIcon?html`<glide-core-icon-button variant="tertiary" class="${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}" aria-label="${this.#h.term("clearEntry")}" @click="${this.#c}" tabindex="-1"><slot name="clear-icon"><svg 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></slot></glide-core-icon-button>`:""} ${"password"===this.type&&this.passwordToggle&&!this.disabled?html`<glide-core-icon-button variant="tertiary" class="password-toggle" aria-label="${this.passwordVisible?"Hide password":"Show password"}" aria-controls="input" aria-expanded="${this.passwordVisible?"true":"false"}" @click="${this.#u}" tabindex="-1">${this.passwordVisible?html`<svg 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 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>`:""}<div class="suffix">${this.isTypeSearch?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.#s})}">${this.valueCharacterCount}/${this.maxlength}</div>`:nothing}</div></glide-core-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}get valueCharacterCount(){return this.value.length}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.#p=createRef(),this.#h=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#p;#t;#h;#i;get#s(){return Boolean(this.maxlength&&this.valueCharacterCount>this.maxlength)}get#r(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}get#e(){return this.#p.value}#l(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#n(t){ow(this.#e,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value,this.#o(),this.dispatchEvent(new Event(t.type,t))}#c(t){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),this.#e?.focus(),this.#o(),t.stopPropagation()}#a(){this.hasFocus=!0}#d(){ow(this.#e,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value,this.#o()}#u(){this.passwordVisible=!this.passwordVisible}async#o(){await this.updateComplete,this.#t.setValidity(this.#e?.validity,this.#e?.validationMessage,this.#e),this.isReportValidityOrSubmit&&this.reportValidity()}};__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({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:t=>t&&Number.parseInt(t,10)})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([queryAssignedNodes({slot:"description"})],GlideCoreInput.prototype,"descriptionNodes",void 0),__decorate([queryAssignedNodes({slot:"prefix"})],GlideCoreInput.prototype,"prefixIconNodes",void 0),__decorate([queryAssignedNodes({slot:"suffix"})],GlideCoreInput.prototype,"suffixIconNodes",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"></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}" ${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.#d.term("clearEntry",this.label)}" @click="${this.#h}"><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.#p}">${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.#d.term("displayedCharacterCount",this.#c,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#d.term("announcedCharacterCount",this.#c,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.#d=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;#d;get#c(){return this.value.length}#o;get#t(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#c>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))}#h(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}#p(){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({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;

package/dist/input.styles.js

@@ -1,4 +1,4 @@
-import{css}from"lit";export default css`
+import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default css`
   .meta {
     column-gap: var(--glide-core-spacing-xs);
     display: flex;
@@ -15,6 +15,10 @@ import{css}from"lit";export default css`
     &.error {
       font-weight: var(--glide-core-font-weight-bold);
     }
+
+    .hidden {
+      ${visuallyHidden};
+    }
   }
 
   .search-icon {
@@ -22,7 +26,7 @@ import{css}from"lit";export default css`
     display: flex;
   }
 
-  .input-box {
+  .input-container {
     align-items: center;
     background-color: var(--glide-core-surface-base-lighter);
     block-size: 2.125rem;
@@ -41,6 +45,7 @@ import{css}from"lit";export default css`
 
     &.focused:not(.error) {
       border-color: var(--glide-core-border-focus);
+      transition: border-color 200ms ease-in-out;
     }
 
     /* We had to resort to a class selector because there may be a bug in Chrome and Safari

package/dist/input.test.basics.js

@@ -54,7 +54,7 @@ it('changes to type text when password is revealed', async () => {
     const inputElement = element.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.getAttribute('type')).to.equal('password');
-    const passwordToggle = element.shadowRoot?.querySelector('.password-toggle');
+    const passwordToggle = element.shadowRoot?.querySelector('[data-test="password-toggle"]');
     passwordToggle?.click();
     await element.updateComplete;
     expect(inputElement?.getAttribute('type')).to.equal('text');
@@ -66,7 +66,7 @@ it('shows search icon with type search', async () => {
     const inputElement = element.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.getAttribute('type')).to.equal('search');
-    const searchIcon = element.shadowRoot?.querySelector('.search-icon');
+    const searchIcon = element.shadowRoot?.querySelector('[data-test="search-icon"]');
     expect(searchIcon).to.exist;
 });
 it('when using "focus() on input", the native input is focused', async () => {
@@ -100,7 +100,7 @@ it('clearable attribute allows for a button which can clear input', async () =>
     const element = await fixture(html `
     <glide-core-input label="Test" clearable></glide-core-input>
   `);
-    const clearButton = element.shadowRoot?.querySelector('.clear-icon-button');
+    const clearButton = element.shadowRoot?.querySelector('[data-test="clear-button"]');
     element.focus();
     await sendKeys({ type: 'testing' });
     expect(element.value).to.be.equal('testing');
@@ -119,8 +119,22 @@ it('displays a max character and current character count if maxlength is provide
     const element = await fixture(html `
     <glide-core-input label="Test label" maxlength="5"></glide-core-input>
   `);
-    const maxCharacterCountContainer = element.shadowRoot?.querySelector('.character-count');
-    expect(maxCharacterCountContainer?.textContent?.trim()).to.be.equal('0/5');
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('0/5');
+});
+it('displays visually hidden character count text for screenreaders', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test label" maxlength="5"></glide-core-input>
+  `);
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 0 of 5');
+});
+it('does not render a character count when attribute `maxlength` is set less than than zero', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test label" maxlength="0"></glide-core-input>
+  `);
+    const container = element.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">

package/dist/input.test.events.js

@@ -65,7 +65,7 @@ it('does not dispatch an "invalid" event after `checkValidity` is called when no
     input.addEventListener('invalid', spy);
     input.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    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');
@@ -74,7 +74,7 @@ it('does not dispatch an "invalid" event after `checkValidity` is called when re
     input.addEventListener('invalid', spy);
     input.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    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');
@@ -85,7 +85,7 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when no
     input.addEventListener('invalid', spy);
     input.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    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');
@@ -94,5 +94,5 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when re
     input.addEventListener('invalid', spy);
     input.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });

package/dist/input.test.focus.js

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './input.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import Input from './input.js';
-Input.shadowRootOptions.mode = 'open';
-it('focuses the input when `focus` is called', async () => {
+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');
@@ -27,7 +27,7 @@ it('blurs the input and reports validity if `blur` is called', async () => {
     await input.updateComplete;
     expect(input.shadowRoot?.activeElement).to.equal(null);
     expect(input.validity.valid).to.equal(false);
-    expect(input.shadowRoot?.querySelector('glide-core-label')?.error).to.equal(true);
+    expect(input.shadowRoot?.querySelector('glide-core-private-label')?.error).to.equal(true);
 });
 it('focuses the input after `reportValidity` is called when required and no value', async () => {
     const form = document.createElement('form');

package/dist/input.test.translations.d.ts

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

package/dist/input.test.translations.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreInput from './input.js';
+GlideCoreInput.shadowRootOptions.mode = 'open';
+it('renders dynamic strings in Japanese', async () => {
+    const element = await fixture(html `
+    <glide-core-input
+      label="Test"
+      value="lorem"
+      maxlength="40"
+      clearable
+    ></glide-core-input>
+  `);
+    document.documentElement.setAttribute('lang', 'ja');
+    await elementUpdated(element);
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
+    expect(element.shadowRoot?.querySelector('[data-test="clear-button"]')?.label).to.equal('Clear Test entry');
+});
+it('renders dynamic strings in French', async () => {
+    const element = await fixture(html `
+    <glide-core-input
+      label="Test"
+      value="lorem"
+      maxlength="40"
+      clearable
+    ></glide-core-input>
+  `);
+    document.documentElement.setAttribute('lang', 'fr');
+    await elementUpdated(element);
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
+    expect(element.shadowRoot?.querySelector('[data-test="clear-button"]')?.label).to.equal('Clear Test entry');
+});