@crowdstrike/glide-core 0.5.1 → 0.6.0

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

@@ -0,0 +1,110 @@
+import './icon-button.js';
+import { ArgumentError } from 'ow';
+import { assert, 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
+    >`);
+    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);
+    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.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);
+});
+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>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});

package/dist/icons/checked.js

@@ -1 +1 @@
-"use strict";import{svg as e}from"lit/static-html.js";export default e`<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{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>`;

package/dist/icons/magnifying-glass.js

@@ -1 +1 @@
-"use strict";import{svg as o}from"lit/static-html.js";export default o`<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" 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.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{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 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="${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.#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.#h=new LocalizeController(this),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;#h;#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))}#c(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()}#u(){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,11 +53,12 @@
     }
 
     &.disabled {
-      background-color: var(--glide-core-surface-base-gray-light);
+      background-color: var(--glide-core-surface-disabled);
       color: var(--glide-core-text-tertiary-disabled);
     }
 
     input {
+      background-color: transparent;
       border: none;
       color: inherit;
       cursor: inherit;
@@ -106,4 +107,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;
+});