@crowdstrike/glide-core 0.9.1 → 0.9.3

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

@@ -3,17 +3,6 @@ import './input.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Default: StoryObj;
-export declare const Password: StoryObj;
+export declare const Input: 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;
-export declare const SearchType: StoryObj;
-export declare const MaxLength: StoryObj;
-export declare const MaxLengthAndDescription: StoryObj;
-export declare const Tooltip: StoryObj;
+export declare const WithIcons: 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

package/dist/input.test.form.js

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './input.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreInput from './input.js';
+import sinon from 'sinon';
 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>`, {
@@ -55,3 +58,17 @@ it('has no `formData` value when it has a value but without a `name`', async ()
     const formData = new FormData(form);
     expect(formData.get('name')).to.be.null;
 });
+it('submits its form on Enter', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
+    });
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(1);
+});

package/dist/label.styles.js

@@ -1,4 +1,7 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${focusOutline(".optional-tooltip-target:focus-visible ")}
+    ${visuallyHidden(".tooltips-and-label.hidden")}
+  `,css`
     .component {
       &.horizontal {
         --column-gap: var(--glide-core-spacing-sm);
@@ -34,11 +37,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       column-gap: var(--glide-core-spacing-xs);
       display: flex;
 
-      /* 
-        Allows for an ellipsis on the label. See the linked comment for why it's "3ch" 
+      /*
+        Allows for an ellipsis on the label. See the linked comment for why it's "3ch"
         instead of "0".
 
-        - https://github.com/CrowdStrike/glide-core/pull/317#issuecomment-2297025365 
+        - https://github.com/CrowdStrike/glide-core/pull/317#issuecomment-2297025365
         - https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child
       */
       min-inline-size: 3ch;
@@ -47,10 +50,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       &.left {
         justify-content: flex-end;
       }
-
-      &.hidden {
-        ${visuallyHidden};
-      }
     }
 
     .optional-tooltip {
@@ -83,10 +82,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       display: flex;
       padding: 0;
-
-      &:focus-visible {
-        ${focusOutline};
-      }
     }
 
     .label {

package/dist/library/localize.test.js

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { LocalizeController } from './localize.js';
+import { customElement } from 'lit/decorators.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import en from '../translations/en.js';
+let GlideCoreMockComponent = class GlideCoreMockComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.localize = new LocalizeController(this);
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
+};
+GlideCoreMockComponent = __decorate([
+    customElement('mock-component')
+], GlideCoreMockComponent);
+it('can call any term from en translation if locale is Japanese', async () => {
+    const component = await fixture(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    html `<mock-component></mock-component>`);
+    component.lang = 'ja';
+    expect(component.localize.lang()).to.equal('ja');
+    const keys = Object.keys(en);
+    for (const key of keys) {
+        expect(component.localize.term(key)).to.be.ok;
+    }
+});
+it('can call any term from en translation if locale is French', async () => {
+    const component = await fixture(html `<mock-component></mock-component>`);
+    component.lang = 'fr';
+    expect(component.localize.lang()).to.equal('fr');
+    const keys = Object.keys(en);
+    for (const key of keys) {
+        expect(component.localize.term(key)).to.be.ok;
+    }
+});

package/dist/menu.button.styles.js

@@ -11,6 +11,7 @@ import{css}from"lit";export default[css`
       inline-size: 100%;
       padding-block: var(--padding-block);
       padding-inline: var(--padding-inline);
+      transition: background-color 100ms ease-in-out;
       user-select: none;
 
       &.active {