@crowdstrike/glide-core 0.5.0 → 0.5.2

package/dist/input.js

@@ -1 +1 @@
-"use strict";var Y=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var i=(r,a,t,u)=>{for(var p=u>1?void 0:u?Z(a,t):a,S=r.length-1,B;S>=0;S--)(B=r[S])&&(p=(u?B(a,t,p):B(p))||p);return u&&p&&Y(a,t,p),p};var R=(r,a,t)=>{if(!a.has(r))throw TypeError("Cannot "+t)};var s=(r,a,t)=>(R(r,a,"read from private field"),t?t.call(r):a.get(r)),l=(r,a,t)=>{if(a.has(r))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(r):a.set(r,t)},P=(r,a,t,u)=>(R(r,a,"write to private field"),u?u.call(r,t):a.set(r,t),t);var n=(r,a,t)=>(R(r,a,"access private method"),t);var g,h,y,b,$,w,F,d,c,x,H,E,j,V,z,L,D,T,C,M,U,v,f;import"./icon-button.js";import"./label.js";import{LitElement as q,html as m,nothing as _}from"lit";import{classMap as N}from"lit/directives/class-map.js";import{createRef as J,ref as K}from"lit/directives/ref.js";import{customElement as Q,property as o,queryAssignedNodes as O,state as k}from"lit/decorators.js";import{ifDefined as A}from"lit/directives/if-defined.js";import W from"./icons/magnifying-glass.js";import X from"./input.styles.js";export const SUPPORTED_TYPES=["email","number","password","search","tel","text","url"];let e=class extends q{constructor(){super();l(this,b);l(this,w);l(this,d);l(this,x);l(this,E);l(this,V);l(this,L);l(this,T);l(this,M);l(this,v);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.isReportValidityOrSubmit=!1;this.passwordVisible=!1;l(this,g,J());l(this,h,void 0);l(this,y,({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)});P(this,h,this.attachInternals()),this.addEventListener("invalid",t=>{t?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())})}get form(){return s(this,h).form}get validity(){return s(this,h).validity}get willValidate(){return s(this,h).willValidate}blur(){s(this,d,c)?.blur()}checkValidity(){return this.isCheckingValidity=!0,s(this,h).checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",s(this,y))}firstUpdated(){n(this,v,f).call(this)}formAssociatedCallback(){this.form?.addEventListener("formdata",s(this,y))}formResetCallback(){this.value=this.getAttribute("value")??""}get isTypeSearch(){return this.type==="search"}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return m`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${s(this,w,F)||s(this,b,$)}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="${N({"input-box":!0,focused:this.hasFocus,empty:this.value==="",disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:s(this,w,F)||s(this,b,$)})}" slot="control"><slot name="prefix"></slot><input aria-describedby="meta" id="input" type="${this.type==="password"&&this.passwordVisible?"text":this.type}" .value="${this.value}" placeholder="${A(this.placeholder)}" autocapitalize="${A(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focus="${n(this,L,D)}" @blur="${n(this,x,H)}" @change="${n(this,E,j)}" @input="${n(this,T,C)}" ${K(s(this,g))}> ${this.hasClearIcon?m`<glide-core-icon-button variant="tertiary" class="${N({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}" aria-label="Clear entry" @click="${n(this,V,z)}" 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>`:""} ${this.type==="password"&&this.passwordToggle&&!this.disabled?m`<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="${n(this,M,U)}" tabindex="-1">${this.passwordVisible?m`<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>`:m`<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?W:m`<slot name="suffix"></slot>`}</div></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?m`<div class="${N({"character-count":!0,error:s(this,b,$)})}">${this.valueCharacterCount}/${this.maxlength}</div>`:_}</div></glide-core-label>`}reportValidity(){return s(this,h).reportValidity()}get valueCharacterCount(){return this.value.length}};g=new WeakMap,h=new WeakMap,y=new WeakMap,b=new WeakSet,$=function(){return!!(this.maxlength&&this.valueCharacterCount>this.maxlength)},w=new WeakSet,F=function(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit},d=new WeakSet,c=function(){return s(this,g).value},x=new WeakSet,H=function(){this.hasFocus=!1},E=new WeakSet,j=function(t){this.value=s(this,d,c).value,n(this,v,f).call(this),this.dispatchEvent(new Event(t.type,t))},V=new WeakSet,z=function(t){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),s(this,d,c)?.focus(),n(this,v,f).call(this),t.stopPropagation()},L=new WeakSet,D=function(){this.hasFocus=!0},T=new WeakSet,C=function(){const t=s(this,d,c).value;this.value=t,n(this,v,f).call(this)},M=new WeakSet,U=function(){this.passwordVisible=!this.passwordVisible},v=new WeakSet,f=async function(){await this.updateComplete,s(this,h).setValidity(s(this,d,c)?.validity,s(this,d,c)?.validationMessage,s(this,d,c))},e.formAssociated=!0,e.shadowRootOptions={...q.shadowRootOptions,mode:"closed",delegatesFocus:!0},e.styles=X,i([o()],e.prototype,"type",2),i([o({reflect:!0})],e.prototype,"name",2),i([o()],e.prototype,"value",2),i([o()],e.prototype,"label",2),i([o({attribute:"hide-label",type:Boolean})],e.prototype,"hideLabel",2),i([o({reflect:!0})],e.prototype,"orientation",2),i([o()],e.prototype,"placeholder",2),i([o({type:Boolean})],e.prototype,"clearable",2),i([o({type:Boolean})],e.prototype,"spellcheck",2),i([o()],e.prototype,"autocapitalize",2),i([o({attribute:"password-toggle",type:Boolean})],e.prototype,"passwordToggle",2),i([o({reflect:!0,type:Boolean})],e.prototype,"required",2),i([o({type:Boolean})],e.prototype,"readonly",2),i([o({type:Boolean})],e.prototype,"disabled",2),i([o({type:Number,converter(t){return t&&Number.parseInt(t,10)}})],e.prototype,"maxlength",2),i([O({slot:"description"})],e.prototype,"descriptionNodes",2),i([O({slot:"prefix"})],e.prototype,"prefixIconNodes",2),i([O({slot:"suffix"})],e.prototype,"suffixIconNodes",2),i([k()],e.prototype,"hasFocus",2),i([k()],e.prototype,"isCheckingValidity",2),i([k()],e.prototype,"isReportValidityOrSubmit",2),i([k()],e.prototype,"passwordVisible",2),e=i([Q("glide-core-input")],e);export{e as default};
+var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,a=r<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--)(s=e[l])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import"./icon-button.js";import"./label.js";import{LitElement,html,nothing}from"lit";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 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.#e.validity}get willValidate(){return this.#e.willValidate}blur(){this.#t?.blur()}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}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 orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#s||this.#r}" ?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.#s||this.#r})}" 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="Clear entry" @click="${this.#h}" 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.#c}" 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.#r})}">${this.valueCharacterCount}/${this.maxlength}</div>`:nothing}</div></glide-core-label>`}reportValidity(){return this.#e.reportValidity()}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.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#p=createRef(),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#p;#e;#i;get#r(){return Boolean(this.maxlength&&this.valueCharacterCount>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}get#t(){return this.#p.value}#l(){this.hasFocus=!1}#n(e){this.value=this.#t.value,this.#o(),this.dispatchEvent(new Event(e.type,e))}#h(e){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),this.#t?.focus(),this.#o(),e.stopPropagation()}#a(){this.hasFocus=!0}#d(){const e=this.#t.value;this.value=e,this.#o()}#c(){this.passwordVisible=!this.passwordVisible}async#o(){await this.updateComplete,this.#e.setValidity(this.#t?.validity,this.#t?.validationMessage,this.#t)}};__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({type:Number,converter:e=>e&&Number.parseInt(e,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,"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 @@
-"use strict";import{css as e}from"lit";export default e`
+import{css}from"lit";export default css`
   .meta {
     column-gap: var(--glide-core-spacing-xs);
     display: flex;
@@ -53,7 +53,7 @@
     }
 
     &.disabled {
-      background-color: var(--glide-core-surface-base-gray-light);
+      background-color: var(--glide-core-surface-disabled);
       color: var(--glide-core-text-tertiary-disabled);
     }
 
@@ -106,4 +106,4 @@
   .empty .clear-icon-button {
     visibility: hidden;
   }
-`;
+`;

package/dist/input.test.basics.js

@@ -0,0 +1,169 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreInput from './input.js';
+GlideCoreInput.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-input')).to.equal(GlideCoreInput);
+});
+it('accepts and contains "value" attribute', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test" value="lorem"></glide-core-input>
+  `);
+    expect(element.value).to.equal('lorem');
+});
+it('accepts disable attribute and disables the underlying input', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test" disabled></glide-core-input>
+  `);
+    const inputElement = element.shadowRoot?.querySelector('input');
+    expect(inputElement).to.exist;
+    expect(inputElement?.hasAttribute('disabled')).to.be.true;
+});
+it('accepts readonly attribute and applies readonly to the underlying input', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test" readonly></glide-core-input>
+  `);
+    const inputElement = element.shadowRoot?.querySelector('input');
+    expect(inputElement).to.exist;
+    expect(inputElement?.hasAttribute('readonly')).to.be.true;
+});
+it('accepts a type attribute', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test" type="number"></glide-core-input>
+  `);
+    const inputElement = element.shadowRoot?.querySelector('input');
+    expect(inputElement).to.exist;
+    expect(inputElement?.getAttribute('type')).to.equal('number');
+});
+it('changes to type text when password is revealed', async () => {
+    const element = await fixture(html `
+    <glide-core-input
+      label="Test"
+      value="password123"
+      type="password"
+      password-toggle
+    ></glide-core-input>
+  `);
+    const inputElement = element.shadowRoot?.querySelector('input');
+    expect(inputElement).to.exist;
+    expect(inputElement?.getAttribute('type')).to.equal('password');
+    const passwordToggle = element.shadowRoot?.querySelector('.password-toggle');
+    passwordToggle?.click();
+    await element.updateComplete;
+    expect(inputElement?.getAttribute('type')).to.equal('text');
+});
+it('shows search icon with type search', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test" type="search"></glide-core-input>
+  `);
+    const inputElement = element.shadowRoot?.querySelector('input');
+    expect(inputElement).to.exist;
+    expect(inputElement?.getAttribute('type')).to.equal('search');
+    const searchIcon = element.shadowRoot?.querySelector('.search-icon');
+    expect(searchIcon).to.exist;
+});
+it('when using "focus() on input", the native input is focused', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test"></glide-core-input>
+  `);
+    const inputElement = element.shadowRoot?.querySelector('input');
+    element.focus();
+    expect(document.activeElement).to.equal(element);
+    expect(element.shadowRoot?.activeElement).to.equal(inputElement);
+});
+it('emits input events when text is changed and reports a value through the event target', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test"></glide-core-input>
+  `);
+    let inputEventCaught = false;
+    let value = '';
+    element.addEventListener('input', (event) => {
+        inputEventCaught = true;
+        if (event.target instanceof GlideCoreInput) {
+            value = event.target.value;
+        }
+    });
+    element.focus();
+    await sendKeys({ type: 'testing' });
+    element.blur();
+    expect(inputEventCaught).to.be.true;
+    expect(value).to.be.equal('testing');
+});
+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');
+    element.focus();
+    await sendKeys({ type: 'testing' });
+    expect(element.value).to.be.equal('testing');
+    clearButton?.click();
+    expect(element.value).to.be.equal('');
+});
+it('label correctly displays when provided as an attribute', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test label"></glide-core-input>
+  `);
+    const labelElement = element?.shadowRoot?.querySelector('label');
+    const labelText = labelElement?.textContent?.trim();
+    expect(labelText).to.be.equal('Test label');
+});
+it('displays a max character and current character count if maxlength is provided', async () => {
+    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');
+});
+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 element = await fixture(html `
+    <glide-core-input label="Test">
+      <div slot="description">Description</div>
+    </glide-core-input>
+  `);
+    const assignedElements = element.shadowRoot
+        ?.querySelector('slot[name="description"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Description');
+});
+it('supports a "prefix" icon slot', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test">
+      <div slot="prefix">
+        <span data-svg></span>
+      </div>
+    </glide-core-input>
+  `);
+    const assignedElements = element.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 element = await fixture(html `
+    <glide-core-input label="Test">
+      <div slot="suffix">
+        <span data-svg></span>
+      </div>
+    </glide-core-input>
+  `);
+    const assignedElements = element.shadowRoot
+        ?.querySelector('slot[name="suffix"]')
+        ?.assignedElements();
+    const slottedSvg = assignedElements
+        ?.at(0)
+        ?.querySelector('[data-svg]');
+    expect(slottedSvg).to.exist;
+});

package/dist/input.test.events.js

@@ -0,0 +1,97 @@
+import './input.js';
+import * as sinon from 'sinon';
+import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+// `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
+// expecting it to throw would work. But it wouldn't throw until its
+// timeout, which would make for a slow test. Its timeout can likely be
+// configured. But waiting a turn of the event loop, after which the event
+// will have been dispatched, gets the job done as well.
+it('dispatches a "change" event when typed in', async () => {
+    const input = await fixture(html `<glide-core-input></glide-core-input>`);
+    setTimeout(async () => {
+        input.focus();
+        await sendKeys({ type: 'testing' });
+        input.blur();
+    });
+    const event = await oneEvent(input, '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>`);
+    setTimeout(() => {
+        input.focus();
+        sendKeys({ type: 'testing' });
+    });
+    const event = await oneEvent(input, '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>`, {
+        parentNode: form,
+    });
+    setTimeout(() => form.requestSubmit());
+    const event = await oneEvent(input, '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>`, {
+        parentNode: form,
+    });
+    setTimeout(() => input.checkValidity());
+    const event = await oneEvent(input, '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>`, {
+        parentNode: form,
+    });
+    setTimeout(() => input.reportValidity());
+    const event = await oneEvent(input, '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>`, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    input.addEventListener('invalid', spy);
+    input.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+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 spy = sinon.spy();
+    input.addEventListener('invalid', spy);
+    input.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
+    const form = document.createElement('form');
+    const input = await fixture(html `<glide-core-input></glide-core-input>`, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    input.addEventListener('invalid', spy);
+    input.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+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 spy = sinon.spy();
+    input.addEventListener('invalid', spy);
+    input.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});

package/dist/input.test.focus.js

@@ -0,0 +1,54 @@
+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 () => {
+    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);
+});
+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>`, {
+        parentNode: form,
+    });
+    form.requestSubmit();
+    const inputElement = input.shadowRoot?.querySelector('input');
+    expect(input.shadowRoot?.activeElement).to.be.equal(inputElement);
+});
+it('blurs the input 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);
+});
+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>`, {
+        parentNode: form,
+    });
+    input.reportValidity();
+    const inputElement = input.shadowRoot?.querySelector('input');
+    expect(input.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>`, {
+        parentNode: form,
+    });
+    form.requestSubmit();
+    const inputElement = input.shadowRoot?.querySelector('input');
+    expect(input.shadowRoot?.activeElement).to.equal(inputElement);
+});
+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>`, {
+        parentNode: form,
+    });
+    input.checkValidity();
+    expect(input.shadowRoot?.activeElement).to.equal(null);
+});

package/dist/input.test.form.js

@@ -0,0 +1,56 @@
+import './input.js';
+import { expect, fixture, html } from '@open-wc/testing';
+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>`, {
+        parentNode: form,
+    });
+    input.value = '';
+    form.reset();
+    expect(input.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>`, {
+        parentNode: form,
+    });
+    input.value = 'value';
+    form.reset();
+    expect(input.value).to.equal('');
+});
+it('has `formData` value when it has a value', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-input name="name" value="value"></glide-core-input>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('value');
+});
+it('has no `formData` value when no value', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-input name="name"></glide-core-input>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` value when it has a value but disabled', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-input
+      name="name"
+      value="value"
+      disabled
+    ></glide-core-input>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` value when it has a value but without a `name`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});

package/dist/input.test.validity.js

@@ -0,0 +1,50 @@
+import './input.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import Input from './input.js';
+Input.shadowRootOptions.mode = 'open';
+it('is valid if empty but not required', async () => {
+    const input = await fixture(html `<glide-core-input></glide-core-input>`);
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+});
+it('is valid after being filled in when empty and required', async () => {
+    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
+    input.focus();
+    await sendKeys({ type: 'value' });
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+});
+it('is invalid if no value and required', async () => {
+    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
+    expect(input.validity?.valid).to.be.false;
+    expect(input.validity?.valueMissing).to.be.true;
+    expect(input.willValidate).to.be.true;
+    expect(input.checkValidity()).to.be.false;
+    expect(input.reportValidity()).to.be.false;
+});
+it('is invalid after value is cleared when required', async () => {
+    const input = await fixture(html `<glide-core-input
+      clearable
+      value="value"
+      required
+    ></glide-core-input>`);
+    const clearButton = input.shadowRoot?.querySelector('.clear-icon-button');
+    clearButton?.click();
+    await input.updateComplete;
+    expect(input.validity?.valid).to.be.false;
+    expect(input.validity?.valueMissing).to.be.true;
+    expect(input.checkValidity()).to.be.false;
+    expect(input.reportValidity()).to.be.false;
+});
+it('is valid if no value and required but disabled', async () => {
+    const input = await fixture(html `<glide-core-input disabled required></glide-core-input>`);
+    expect(input.validity?.valid).to.be.true;
+    expect(input.validity?.valueMissing).to.be.false;
+    expect(input.checkValidity()).to.be.true;
+    expect(input.reportValidity()).to.be.true;
+});

package/dist/label.js

@@ -1 +1 @@
-"use strict";var O=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var r=(o,e,t,S)=>{for(var n=S>1?void 0:S?U(e,t):e,R=o.length-1,w;R>=0;R--)(w=o[R])&&(n=(S?w(e,t,n):w(n))||n);return S&&n&&O(e,t,n),n};var N=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var i=(o,e,t)=>(N(o,e,"read from private field"),t?t.call(o):e.get(o)),l=(o,e,t)=>{if(e.has(o))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(o):e.set(o,t)};var h=(o,e,t)=>(N(o,e,"access private method"),t);var c,d,v,f,g,y,k,E,D,T,z,b,q,M,I;import"./tooltip.js";import{LitElement as x,html as H}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{createRef as m,ref as p}from"lit/directives/ref.js";import{customElement as j,property as u,state as B}from"lit/decorators.js";import{owSlot as $}from"./library/ow.js";import A from"./label.styles.js";import{svg as F}from"lit/static-html.js";const J=F`<svg aria-label="More information" width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`;let s=class extends x{constructor(){super(...arguments);l(this,y);l(this,E);l(this,T);l(this,b);l(this,M);this.disabled=!1;this.error=!1;this.hide=!1;this.orientation="horizontal";this.required=!1;this.hasDescriptionSlot=!1;this.hasSummarySlot=!1;this.hasTooltipSlot=!1;l(this,c,m());l(this,d,m());l(this,v,m());l(this,f,m());l(this,g,m())}firstUpdated(){$(i(this,d).value),$(i(this,c).value)}render(){return H`<div class="${a({component:!0,horizontal:this.orientation==="horizontal",vertical:this.orientation==="vertical","hidden-label":this.hide})}"><div class="${a({"tooltip-and-label":!0,hidden:this.hide})}" part="tooltip-and-label-container"><div class="tooltip-and-label"><glide-core-tooltip class="${a({tooltip:!0,vertical:this.orientation==="vertical",visible:this.hasTooltipSlot})}" placement="${this.orientation==="vertical"?"right":"bottom"}"><span class="tooltip-target" slot="target" tabindex="0">${J}</span><slot class="${a({tooltip:!0,visible:this.hasTooltipSlot})}" name="tooltip" @slotchange="${h(this,M,I)}" ${p(i(this,g))}></slot></glide-core-tooltip><div class="${a({label:!0,disabled:this.disabled})}" data-test="label"><slot @slotchange="${h(this,E,D)}" ${p(i(this,d))}></slot>${this.required?H`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></div></div><div class="control-and-summary"><slot class="${a({control:!0,error:this.error,disabled:this.disabled,vertical:this.orientation==="vertical",summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${h(this,y,k)}" ${p(i(this,c))}></slot><slot class="${a({summary:!0,error:this.error})}" name="summary" @slotchange="${h(this,b,q)}" ${p(i(this,f))}></slot></div><slot class="${a({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${h(this,T,z)}" ${p(i(this,v))}></slot></div>`}};c=new WeakMap,d=new WeakMap,v=new WeakMap,f=new WeakMap,g=new WeakMap,y=new WeakSet,k=function(){$(i(this,c).value)},E=new WeakSet,D=function(){$(i(this,d).value)},T=new WeakSet,z=function(){const t=i(this,v).value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=!!(t&&t.length>0)},b=new WeakSet,q=function(){const t=i(this,f).value?.assignedNodes({flatten:!0});this.hasSummarySlot=!!(t&&t.length>0)},M=new WeakSet,I=function(){const t=i(this,g).value?.assignedNodes({flatten:!0});this.hasTooltipSlot=!!(t&&t.length>0)},s.shadowRootOptions={...x.shadowRootOptions,mode:"closed"},s.styles=A,r([u({reflect:!0,type:Boolean})],s.prototype,"disabled",2),r([u({reflect:!0,type:Boolean})],s.prototype,"error",2),r([u({reflect:!0,type:Boolean})],s.prototype,"hide",2),r([u({reflect:!0})],s.prototype,"orientation",2),r([u({reflect:!0,type:Boolean})],s.prototype,"required",2),r([B()],s.prototype,"hasDescriptionSlot",2),r([B()],s.prototype,"hasSummarySlot",2),r([B()],s.prototype,"hasTooltipSlot",2),s=r([j("glide-core-label")],s);export{s as default};
+var __decorate=this&&this.__decorate||function(t,e,o,l){var i,s=arguments.length,r=s<3?e:null===l?l=Object.getOwnPropertyDescriptor(e,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,o,l);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(r=(s<3?i(r):s>3?i(e,o,r):i(e,o))||r);return s>3&&r&&Object.defineProperty(e,o,r),r};import"./tooltip.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./label.styles.js";import{svg}from"lit/static-html.js";const infoCircleIcon=svg`<svg aria-label="More information" width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescriptionSlot=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.#t=createRef(),this.#e=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlot(this.#t.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,"hidden-label":this.hide})}"><div class="${classMap({"tooltip-and-label":!0,hidden:this.hide})}" part="tooltip-and-label-container"><div class="tooltip-and-label"><glide-core-tooltip class="${classMap({tooltip:!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="tooltip-target" slot="target" tabindex="0">${infoCircleIcon}</span><slot class="${classMap({tooltip:!0,visible:this.hasTooltipSlot})}" name="tooltip" @slotchange="${this.#s}" ${ref(this.#i)}></slot></glide-core-tooltip><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label"><slot @slotchange="${this.#r}" ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></div></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#a}" ${ref(this.#t)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#n}" ${ref(this.#l)}></slot></div><slot class="${classMap({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${this.#c}" ${ref(this.#o)}></slot></div>`}#t;#e;#o;#l;#i;#a(){owSlot(this.#t.value)}#r(){owSlot(this.#e.value)}#c(){const t=this.#o.value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=Boolean(t&&t.length>0)}#n(){const t=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(t&&t.length>0)}#s(){const t=this.#i.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescriptionSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),GlideCoreLabel=__decorate([customElement("glide-core-label")],GlideCoreLabel);export default GlideCoreLabel;

package/dist/label.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";import o from"./styles/visually-hidden.js";export default[e`
+import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
     .component {
       &.horizontal {
         column-gap: var(--glide-core-spacing-sm);
@@ -29,7 +29,7 @@
       display: flex;
 
       &.hidden {
-        ${o};
+        ${visuallyHidden};
       }
     }
 
@@ -151,4 +151,4 @@ make it difficult to center vertically with the label.
         display: block;
       }
     }
-  `];
+  `];