@crowdstrike/glide-core 0.11.0 → 0.12.0

package/dist/dropdown.test.validity.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 it('is valid if not required and no option is selected', async () => {
@@ -28,6 +28,23 @@ it('is invalid if required and no option is selected', async () => {
     expect(component.checkValidity()).to.be.false;
     expect(component.reportValidity()).to.be.false;
 });
+it('is invalid if required and no option is selected when `filterable`', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+      required
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+});
 it('is both invalid and valid if required but disabled and no option is selected', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -45,3 +62,157 @@ it('is both invalid and valid if required but disabled and no option is selected
     expect(component.checkValidity()).to.be.true;
     expect(component.reportValidity()).to.be.true;
 });
+it('sets the validity message with `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.setCustomValidity('validity message');
+    component.reportValidity();
+    await elementUpdated(component);
+    component.setCustomValidity('');
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('is invalid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.setValidity({ customError: true }, 'validity message');
+    expect(component.validity.valid).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.validity?.customError).to.be.true;
+    component.reportValidity();
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('is valid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.setValidity({ customError: true }, 'validity message');
+    component.setValidity({});
+    await elementUpdated(component);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity.customError).to.be.false;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('sets the validity message with `setCustomValidity()` when `filterable`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('removes a validity message with an empty argument to `setCustomValidity()` when `filterable`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.setCustomValidity('validity message');
+    component.reportValidity();
+    await elementUpdated(component);
+    component.setCustomValidity('');
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('is invalid when `setValidity()` is called when `filterable`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.setValidity({ customError: true }, 'validity message');
+    expect(component.validity.valid).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.validity?.customError).to.be.true;
+    component.reportValidity();
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('is valid when `setValidity()` is called when `filterable`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.setValidity({ customError: true }, 'validity message');
+    component.setValidity({});
+    await elementUpdated(component);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity.customError).to.be.false;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('retains existing validity state when `setCustomValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" required>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.validity?.valueMissing).to.be.true;
+});

package/dist/input.d.ts

@@ -29,6 +29,7 @@ export default class GlideCoreInput extends LitElement {
     label?: string;
     hideLabel: boolean;
     orientation: 'horizontal' | 'vertical';
+    pattern?: string;
     placeholder?: string;
     clearable: boolean;
     spellcheck: boolean;
@@ -53,11 +54,14 @@ export default class GlideCoreInput extends LitElement {
     get isClearIconVisible(): boolean;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    setValidity(flags?: ValidityStateFlags, message?: string): void;
     constructor();
     private hasFocus;
     private isBlurring;
     private isCheckingValidity;
     private isReportValidityOrSubmit;
     private passwordVisible;
+    private validityMessage?;
 }
 export {};

package/dist/input.js

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

package/dist/input.styles.js

@@ -11,6 +11,14 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
 
     .description {
       display: block;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .validity-message {
+      display: block;
     }
 
     .character-count {

package/dist/input.test.validity.js

@@ -50,67 +50,6 @@ it('is invalid after value is cleared when required', async () => {
     await elementUpdated(component);
     expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
-it('is valid when empty and does not exceed `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is valid when filled in and does not exceed `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
-    component.focus();
-    await sendKeys({ type: 'val' });
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-input
-      value="value"
-      maxlength="3"
-      disabled
-    ></glide-core-input>`);
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is valid when filled in, readonly, and value exceeds `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-input
-      value="value"
-      maxlength="3"
-      readonly
-    ></glide-core-input>`);
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is invalid when filled in and exceeds `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
-    component.focus();
-    await sendKeys({ type: 'value' });
-    expect(component.validity?.valid).to.be.false;
-    expect(component.validity?.tooLong).to.be.true;
-    expect(component.checkValidity()).to.be.false;
-    expect(component.reportValidity()).to.be.false;
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
-});
 it('is valid if no value and required but disabled', async () => {
     const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`);
     expect(component.validity?.valid).to.be.true;
@@ -162,7 +101,7 @@ it('is invalid when `value` is empty and `required` is set to `true` programmati
     expect(component.reportValidity()).to.be.false;
     expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
-it('is valid when `value` is empty and `required` is set to `false` programmatically', async () => {
+it('is valid when `value` is empty and `required` is updated to `false` programmatically', async () => {
     const component = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
     expect(component.validity?.valid).to.be.false;
     expect(component.validity?.valueMissing).to.be.true;
@@ -178,3 +117,142 @@ it('is valid when `value` is empty and `required` is set to `false` programmatic
     expect(component.reportValidity()).to.be.true;
     expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
+it('is valid when the `value` attribute matches `pattern`', async () => {
+    const component = await fixture(html `<glide-core-input
+      label="Label"
+      pattern="[a-z]{4,8}"
+      value="value"
+    ></glide-core-input>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.patternMismatch).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
+});
+it('is valid when `value` matches `pattern` after being set programmatically', async () => {
+    const component = await fixture(html `<glide-core-input
+      label="Label"
+      pattern="[a-z]{4,8}"
+    ></glide-core-input>`);
+    component.value = 'value';
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.patternMismatch).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
+});
+it('is invalid when `value` does not match `pattern`', async () => {
+    const component = await fixture(html `<glide-core-input
+      label="Label"
+      pattern="[a-z]{4,8}"
+      value="1234"
+    ></glide-core-input>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.patternMismatch).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+});
+it('is invalid when a programmatically set `value` does not match `pattern`', async () => {
+    const component = await fixture(html `<glide-core-input
+      label="Label"
+      pattern="[a-z]{4,8}"
+    ></glide-core-input>`);
+    component.value = 'val';
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.patternMismatch).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+});
+it('is invalid when `required` and `value` does not match `pattern`', async () => {
+    const component = await fixture(html `<glide-core-input
+      label="Label"
+      pattern="[a-z]{4,8}"
+      required
+    ></glide-core-input>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.patternMismatch).to.be.true;
+    expect(component.validity?.valueMissing).to.be.true;
+});
+it('is valid when `pattern` is programmatically removed', async () => {
+    const component = await fixture(html `<glide-core-input
+      label="Label"
+      pattern="[a-z]{4,8}"
+    ></glide-core-input>`);
+    component.pattern = undefined;
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.patternMismatch).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
+});
+it('sets the validity message with `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
+    component.setCustomValidity('validity message');
+    component.reportValidity();
+    await elementUpdated(component);
+    component.setCustomValidity('');
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('is invalid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
+    component.setValidity({ customError: true }, 'validity message');
+    expect(component.validity.valid).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.validity?.customError).to.be.true;
+    component.reportValidity();
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('is valid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
+    component.setValidity({ customError: true }, 'validity message');
+    component.setValidity({});
+    await elementUpdated(component);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity.customError).to.be.false;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('retains existing validity state when `setCustomValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-input
+      label="Label"
+      pattern="[a-z]{4,8}"
+      required
+    ></glide-core-input>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.validity?.patternMismatch).to.be.true;
+    expect(component.validity?.valueMissing).to.be.true;
+});

package/dist/menu.d.ts

@@ -13,6 +13,8 @@ export default class GlideCoreMenu extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    get offset(): number;
+    set offset(offset: number);
     get open(): boolean;
     set open(isOpen: boolean);
     placement: Placement;