@crowdstrike/glide-core 0.9.1 → 0.9.2

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
-import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
@@ -97,6 +97,35 @@ it('selects an option on Space', async () => {
     await sendKeys({ press: ' ' });
     expect(option?.selected).to.be.true;
 });
+it('selects an option when its icon is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option label="One" value="one">
+        <svg
+          slot="icon"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          style="height: 1rem; width: 1rem;"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+          />
+        </svg>
+      </glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const option = component.querySelector('glide-core-dropdown-option');
+    option?.shadowRoot
+        ?.querySelector('[data-test="icon-slot"]')
+        ?.assignedElements()
+        ?.at(0)
+        ?.dispatchEvent(new Event('click', { bubbles: true }));
+    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
@@ -490,8 +519,8 @@ it('hides Select All', async () => {
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.checkVisibility()).to.not.be.ok;
 });
-it('does not select an option on Enter when the option is not focused', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+it('cannot be tabbed to when `disabled`', async () => {
+    await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -502,28 +531,21 @@ 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' });
-    await sendKeys({ down: 'Shift' });
-    await sendKeys({ up: 'Tab' });
-    await sendKeys({ press: 'Enter' });
-    expect(option?.selected).to.be.false;
+    expect(document.activeElement).to.equal(document.body);
 });
-it('cannot be tabbed to when `disabled`', async () => {
-    await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
+it('clicks the button when `click()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
-        label="Two"
-        value="two"
+        label="Label"
+        value="value"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
-    await sendKeys({ down: 'Tab' });
-    expect(document.activeElement).to.equal(document.body);
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    assert(button);
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
 });

package/dist/icon-button.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".component:focus-visible")}
+  `,css`
     :host {
       /* Contains elements with "padding" and "width". Inline by default. */
       display: inline-flex;
@@ -24,10 +26,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         outline: none;
       }
 
-      &:focus-visible {
-        ${focusOutline};
-      }
-
       &:disabled {
         cursor: not-allowed;
         opacity: 1;

package/dist/icons/checked.d.ts

@@ -1,2 +1,7 @@
+/**
+ * The class="check" on the path below is used as a CSS selector
+ * in checkbox.styles.ts.  Please be cautious when making changes
+ * here as to not break the Checkbox selectors.
+ */
 declare const _default: import("lit").TemplateResult<1>;
 export default _default;

package/dist/icons/checked.js

@@ -1 +1 @@
-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>`;
+import{html}from"lit";export default html`<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path class="check" d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/input.d.ts

@@ -24,7 +24,7 @@ export default class GlideCoreInput extends LitElement {
     #private;
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     type: SupportedTypes;
     name?: string;
     value: string;

package/dist/input.js

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

package/dist/input.stories.d.ts

@@ -6,10 +6,6 @@ export default meta;
 export declare const Default: StoryObj;
 export declare const Password: StoryObj;
 export declare const WithError: StoryObj;
-export declare const Description: StoryObj;
-export declare const Readonly: StoryObj;
-export declare const Disabled: StoryObj;
-export declare const Placeholder: StoryObj;
 export declare const Clearable: StoryObj;
 export declare const SuffixIcon: StoryObj;
 export declare const PrefixIcon: StoryObj;

package/dist/input.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
 export default _default;

package/dist/input.styles.js

@@ -1,115 +1,115 @@
-import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default css`
-  .meta {
-    column-gap: var(--glide-core-spacing-xs);
-    display: flex;
-    font-size: 0.75rem;
-    grid-column: 2;
-    justify-content: space-between;
-  }
-
-  .description {
-    display: block;
-  }
+import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${visuallyHidden(".character-count .hidden")}
+  `,css`
+    .meta {
+      column-gap: var(--glide-core-spacing-xs);
+      display: flex;
+      font-size: 0.75rem;
+      grid-column: 2;
+      justify-content: space-between;
+    }
 
-  .character-count {
-    &.error {
-      font-weight: var(--glide-core-font-weight-bold);
+    .description {
+      display: block;
     }
 
-    .hidden {
-      ${visuallyHidden};
+    .character-count {
+      &.error {
+        font-weight: var(--glide-core-font-weight-bold);
+      }
     }
-  }
 
-  .search-icon {
-    align-items: center;
-    display: flex;
-  }
+    .search-icon {
+      align-items: center;
+      display: flex;
+    }
 
-  .input-container {
-    align-items: center;
-    background-color: var(--glide-core-surface-base-lighter);
-    block-size: 2.125rem;
-    border: 1px solid var(--glide-core-border-base-light);
-    border-radius: var(--glide-core-spacing-xs);
-    box-sizing: border-box;
-    color: var(--glide-core-text-body-1);
-    display: flex;
-    gap: var(--glide-core-spacing-xxs);
-    line-height: var(--glide-core-body-xs-line-height);
-    padding-inline: var(--glide-core-spacing-sm);
+    .input-container {
+      align-items: center;
+      background-color: var(--glide-core-surface-base-lighter);
+      block-size: 2.125rem;
+      border: 1px solid var(--glide-core-border-base);
+      border-radius: var(--glide-core-spacing-xs);
+      box-sizing: border-box;
+      color: var(--glide-core-text-body-1);
+      display: flex;
+      gap: var(--glide-core-spacing-xxs);
+      line-height: var(--glide-core-body-xs-line-height);
+      padding-inline: var(--glide-core-spacing-sm);
 
-    &.error {
-      border-color: var(--glide-core-status-error);
-    }
+      &.focused,
+      &:hover {
+        border-color: var(--glide-core-border-focus);
+        transition: border-color 200ms ease-in-out;
+      }
 
-    &.focused:not(.error) {
-      border-color: var(--glide-core-border-focus);
-      transition: border-color 200ms ease-in-out;
-    }
+      &.error {
+        border-color: var(--glide-core-status-error);
+      }
 
-    /* We had to resort to a class selector because there may be a bug in Chrome and Safari
+      /* We had to resort to a class selector because there may be a bug in Chrome and Safari
     * with ":read-only"
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
     */
-    &.readonly {
-      border: 1px solid transparent;
-      padding-inline-start: 0;
-    }
+      &.readonly {
+        border: 1px solid transparent;
+        padding-inline-start: 0;
+      }
 
-    &.disabled {
-      background-color: var(--glide-core-surface-disabled);
-      color: var(--glide-core-text-tertiary-disabled);
-    }
+      &.disabled {
+        background-color: var(--glide-core-surface-disabled);
+        border-color: var(--glide-core-border-base-light);
+        color: var(--glide-core-text-tertiary-disabled);
+      }
 
-    input {
-      background-color: transparent;
-      border: none;
-      color: inherit;
-      cursor: inherit;
-      font-family: var(--glide-core-font-sans);
-      font-size: var(--glide-core-body-sm-font-size);
-      font-weight: var(--glide-core-body-xs-font-weight);
-      inline-size: 100%;
-      min-inline-size: 0;
-      outline: none;
-      padding: 0;
+      input {
+        background-color: transparent;
+        border: none;
+        color: inherit;
+        cursor: inherit;
+        font-family: var(--glide-core-font-sans);
+        font-size: var(--glide-core-body-sm-font-size);
+        font-weight: var(--glide-core-body-xs-font-weight);
+        inline-size: 100%;
+        min-inline-size: 0;
+        outline: none;
+        padding: 0;
+
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button,
+        &::-webkit-search-results-button,
+        &::-webkit-search-results-decoration {
+          appearance: none;
+        }
+      }
 
-      &::-webkit-search-decoration,
-      &::-webkit-search-cancel-button,
-      &::-webkit-search-results-button,
-      &::-webkit-search-results-decoration {
-        appearance: none;
+      .suffix {
+        align-items: center;
+        display: flex;
       }
     }
 
-    .suffix {
+    .clear-icon-button,
+    .password-toggle,
+    ::slotted([slot='suffix']) {
       align-items: center;
-      display: flex;
+      background: none;
+      border: none;
+      color: var(--glide-core-icon-default);
+      display: inline-flex;
+      justify-content: center;
+      padding: 0;
     }
-  }
-
-  .clear-icon-button,
-  .password-toggle,
-  ::slotted([slot='suffix']) {
-    align-items: center;
-    background: none;
-    border: none;
-    color: var(--glide-core-icon-default);
-    display: inline-flex;
-    justify-content: center;
-    padding: 0;
-  }
 
-  .clear-icon-button,
-  .password-toggle,
-  .search-icon,
-  ::slotted([slot='prefix']),
-  ::slotted([slot='suffix']) {
-    display: flex;
-  }
+    .clear-icon-button,
+    .password-toggle,
+    .search-icon,
+    ::slotted([slot='prefix']),
+    ::slotted([slot='suffix']) {
+      display: flex;
+    }
 
-  .empty .clear-icon-button {
-    visibility: hidden;
-  }
-`;
+    .empty .clear-icon-button {
+      visibility: hidden;
+    }
+  `];

package/dist/input.test.basics.js

@@ -7,43 +7,43 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-input')).to.equal(GlideCoreInput);
 });
 it('is accessible', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" value="lorem"></glide-core-input>
   `);
-    await expect(element).to.be.accessible();
+    await expect(component).to.be.accessible();
 });
 it('accepts and contains "value" attribute', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" value="lorem"></glide-core-input>
   `);
-    expect(element.value).to.equal('lorem');
+    expect(component.value).to.equal('lorem');
 });
 it('accepts disable attribute and disables the underlying input', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" disabled></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.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 `
+    const component = await fixture(html `
     <glide-core-input label="Test" readonly></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.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 `
+    const component = await fixture(html `
     <glide-core-input label="Test" type="number"></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.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 `
+    const component = await fixture(html `
     <glide-core-input
       label="Test"
       value="password123"
@@ -51,89 +51,89 @@ it('changes to type text when password is revealed', async () => {
       password-toggle
     ></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.getAttribute('type')).to.equal('password');
-    const passwordToggle = element.shadowRoot?.querySelector('[data-test="password-toggle"]');
+    const passwordToggle = component.shadowRoot?.querySelector('[data-test="password-toggle"]');
     passwordToggle?.click();
-    await element.updateComplete;
+    await component.updateComplete;
     expect(inputElement?.getAttribute('type')).to.equal('text');
 });
 it('shows search icon with type search', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" type="search"></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.getAttribute('type')).to.equal('search');
-    const searchIcon = element.shadowRoot?.querySelector('[data-test="search-icon"]');
+    const searchIcon = component.shadowRoot?.querySelector('[data-test="search-icon"]');
     expect(searchIcon).to.exist;
 });
 it('when using "focus() on input", the native input is focused', async () => {
-    const element = await fixture(html `
+    const component = 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);
+    const inputElement = component.shadowRoot?.querySelector('input');
+    component.focus();
+    expect(document.activeElement).to.equal(component);
+    expect(component.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 `
+    const component = await fixture(html `
     <glide-core-input label="Test"></glide-core-input>
   `);
     let inputEventCaught = false;
     let value = '';
-    element.addEventListener('input', (event) => {
+    component.addEventListener('input', (event) => {
         inputEventCaught = true;
         if (event.target instanceof GlideCoreInput) {
             value = event.target.value;
         }
     });
-    element.focus();
+    component.focus();
     await sendKeys({ type: 'testing' });
-    element.blur();
+    component.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 `
+    const component = await fixture(html `
     <glide-core-input label="Test" clearable></glide-core-input>
   `);
-    const clearButton = element.shadowRoot?.querySelector('[data-test="clear-button"]');
-    element.focus();
+    const clearButton = component.shadowRoot?.querySelector('[data-test="clear-button"]');
+    component.focus();
     await sendKeys({ type: 'testing' });
-    expect(element.value).to.be.equal('testing');
+    expect(component.value).to.be.equal('testing');
     clearButton?.click();
-    expect(element.value).to.be.equal('');
+    expect(component.value).to.be.equal('');
 });
 it('label correctly displays when provided as an attribute', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test label"></glide-core-input>
   `);
-    const labelElement = element?.shadowRoot?.querySelector('label');
+    const labelElement = component?.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 `
+    const component = await fixture(html `
     <glide-core-input label="Test label" maxlength="5"></glide-core-input>
   `);
-    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    const maxCharacterCountText = component.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 `
+    const component = await fixture(html `
     <glide-core-input label="Test label" maxlength="5"></glide-core-input>
   `);
-    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    const maxCharacterCountAnnouncement = component.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 `
+    const component = await fixture(html `
     <glide-core-input label="Test label" maxlength="0"></glide-core-input>
   `);
-    const container = element.shadowRoot?.querySelector('[data-test="character-count-container"]');
+    const container = component.shadowRoot?.querySelector('[data-test="character-count-container"]');
     expect(container).to.be.null;
 });
 it('supports a "tooltip" slot', async () => {
@@ -146,25 +146,25 @@ it('supports a "tooltip" slot', async () => {
     expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
 });
 it('supports a "description" slot', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test">
       <div slot="description">Description</div>
     </glide-core-input>
   `);
-    const assignedElements = element.shadowRoot
+    const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="description"]')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Description');
 });
 it('supports a "prefix" icon slot', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test">
       <div slot="prefix">
         <span data-svg></span>
       </div>
     </glide-core-input>
   `);
-    const assignedElements = element.shadowRoot
+    const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="prefix"]')
         ?.assignedElements();
     const slottedSvg = assignedElements
@@ -173,14 +173,14 @@ it('supports a "prefix" icon slot', async () => {
     expect(slottedSvg).to.exist;
 });
 it('supports a "suffix" icon slot', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test">
       <div slot="suffix">
         <span data-svg></span>
       </div>
     </glide-core-input>
   `);
-    const assignedElements = element.shadowRoot
+    const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="suffix"]')
         ?.assignedElements();
     const slottedSvg = assignedElements