@crowdstrike/glide-core 0.29.1 → 0.30.0

package/dist/input.js

@@ -1,19 +1,185 @@
-var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(r=(o<3?a(r):o>3?a(e,i,r):a(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";import"./label.js";import{html,LitElement,nothing}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import styles from"./input.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Input=class Input extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern&&this.pattern.length>0?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:Boolean(this.value&&!new RegExp(`^(?:${this.pattern})$`,"v").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)}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")??""}render(){return html`
+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 './icon-button.js';
+import './label.js';
+import { html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { when } from 'lit/directives/when.js';
+import packageJson from '../package.json' with { type: 'json' };
+import { LocalizeController } from './library/localize.js';
+import magnifyingGlassIcon from './icons/magnifying-glass.js';
+import styles from './input.styles.js';
+import xIcon from './icons/x.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {string} [aria-controls]
+ * @attr {'true'|'false'|null} [aria-expanded=null]
+ * @attr {'true'|'false'|null} [aria-haspopup=null]
+ * @attr {'on'|'off'|'none'|'sentences'|'words'|'characters'} [autocapitalize='on']
+ * @attr {'on'|'off'} [autocomplete='on']
+ * @attr {boolean} [clearable=false]
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {number} [maxlength]
+ * @attr {string} [name='']
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {boolean} [password-toggle=false] - For 'password' type, whether to show a button to toggle the password's visibility
+ * @attr {string} [pattern='']
+ * @attr {string} [placeholder]
+ * @attr {boolean} [readonly=false]
+ * @attr {boolean} [required=false]
+ * @attr {boolean} [spellcheck=false]
+ * @attr {string} [tooltip]
+ * @attr {'color'|'date'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'} [type='text']
+ * @attr {string} [value='']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} [description] - Additional information or context
+ * @slot {Element} [prefix-icon] - An icon before the input field
+ * @slot {Element} [suffix-icon] - An icon after the input field
+ *
+ * @fires {Event} change
+ * @fires {Event} input
+ * @fires {Event} invalid
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
+ */
+let Input = class Input extends LitElement {
+    static { this.formAssociated = true; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = styles; }
+    get form() {
+        return this.#internals.form;
+    }
+    get validity() {
+        if (this.pattern && this.pattern.length > 0) {
+            // A validation message is required but unused because we disable native validation
+            // feedback. And an empty string isn't allowed. Thus a single space.
+            this.#internals.setValidity({
+                customError: Boolean(this.validityMessage),
+                // Empty values do not trigger a pattern mismatch error to align
+                // with native behavior¹.
+                //
+                // When checking pattern validity like the native input element, we
+                // need to ensure it matches the entire string, not just a portion of it¹.
+                //
+                // The regex we use internally matches native's according to the documentation².
+                //
+                // 1: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern#constraint_validation
+                // 2: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern#overview
+                patternMismatch: Boolean(this.value &&
+                    !new RegExp(`^(?:${this.pattern})$`, 'v').test(this.value)),
+                valueMissing: Boolean(this.required && !this.value),
+            }, ' ', this.#inputElementRef.value);
+            return this.#internals.validity;
+        }
+        if (!this.pattern && this.#internals.validity.patternMismatch) {
+            this.#internals.setValidity({});
+            return this.#internals.validity;
+        }
+        if (this.required && !this.value && !this.disabled) {
+            // A validation message is required but unused because we disable native validation
+            // feedback. And an empty string isn't allowed. Thus a single space.
+            this.#internals.setValidity({ customError: Boolean(this.validityMessage), valueMissing: true }, ' ', this.#inputElementRef.value);
+            return this.#internals.validity;
+        }
+        if (this.required && this.#internals.validity.valueMissing && this.value) {
+            this.#internals.setValidity({});
+            return this.#internals.validity;
+        }
+        if (!this.required &&
+            this.#internals.validity.valueMissing &&
+            !this.value) {
+            this.#internals.setValidity({});
+            return this.#internals.validity;
+        }
+        return this.#internals.validity;
+    }
+    checkValidity() {
+        this.isCheckingValidity = true;
+        const isValid = this.#internals.checkValidity();
+        this.isCheckingValidity = false;
+        return isValid;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.form?.removeEventListener('formdata', this.#onFormdata);
+    }
+    formAssociatedCallback() {
+        this.form?.addEventListener('formdata', this.#onFormdata);
+    }
+    formResetCallback() {
+        this.value = this.getAttribute('value') ?? '';
+    }
+    render() {
+        return html `
       <glide-core-private-label
-        class=${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}
+        class=${classMap({
+            left: this.privateSplit === 'left',
+            middle: this.privateSplit === 'middle',
+        })}
         label=${ifDefined(this.label)}
         orientation=${this.orientation}
-        split=${ifDefined(this.privateSplit??void 0)}
+        split=${ifDefined(this.privateSplit ?? undefined)}
         tooltip=${ifDefined(this.tooltip)}
         ?disabled=${this.disabled}
-        ?error=${this.#s||this.#a}
+        ?error=${this.#isShowValidationFeedback ||
+            this.#isMaxCharacterCountExceeded}
         ?hide=${this.hideLabel}
         ?required=${this.required}
       >
         <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})}
+          class=${classMap({
+            'input-container': true,
+            focused: this.hasFocus,
+            empty: this.value === '',
+            disabled: this.disabled,
+            readonly: this.readonly && !this.disabled,
+            error: this.#isShowValidationFeedback ||
+                this.#isMaxCharacterCountExceeded,
+        })}
           slot="control"
         >
           <slot name="prefix-icon">
@@ -24,55 +190,76 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
           </slot>
 
           <input
+            aria-controls=${ifDefined(this.ariaControls)}
             aria-describedby="meta"
-            aria-invalid=${this.#s||this.#a}
+            aria-expanded=${ifDefined(this.ariaExpanded ?? undefined)}
+            aria-haspopup=${ifDefined(this.ariaHasPopup ?? undefined)}
+            aria-invalid=${this.#isShowValidationFeedback ||
+            this.#isMaxCharacterCountExceeded}
+            autocapitalize=${this.autocapitalize}
+            autocomplete=${this.autocomplete}
             class="input"
             data-test="input"
             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}
+            type=${this.type === 'password' && this.passwordVisible
+            ? 'text'
+            : this.type}
+            .value=${this.value}
             ?required=${this.required}
             ?readonly=${this.readonly}
             ?disabled=${this.disabled}
-            @focus=${this.#o}
-            @blur=${this.#r}
-            @change=${this.#l}
-            @input=${this.#n}
-            @keydown=${this.#d}
-            ${ref(this.#e)}
+            @focus=${this.#onInputFocus}
+            @blur=${this.#onInputBlur}
+            @change=${this.#onInputChange}
+            @input=${this.#onInputInput}
+            @keydown=${this.#onInputKeydown}
+            ${ref(this.#inputElementRef)}
           />
 
-          ${this.#p?html`
+          ${this.#hasClearButton
+            ? html `
                 <glide-core-icon-button
                   variant="tertiary"
-                  class=${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.#h})}
+                  class=${classMap({
+                'clear-icon-button': true,
+                'clear-icon-button--visible': this.#isClearButtonVisible,
+            })}
                   data-test="clear-button"
-                  label=${this.#c.term("clearEntry",this.label)}
-                  @click=${this.#u}
+                  label=${this.#localize.term('clearEntry', 
+            // `this.label` is always defined because it's a required attribute.
+            //
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.label)}
+                  @click=${this.#onClearButtonClick}
                 >
                   ${xIcon}
                 </glide-core-icon-button>
-              `:nothing}
-          ${"password"===this.type&&this.passwordToggle&&!this.disabled?html`
+              `
+            : nothing}
+          ${this.type === 'password' && 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"}
+                  label=${this.passwordVisible
+                ? 'Hide password'
+                : 'Show password'}
                   aria-controls="input"
-                  aria-expanded=${this.passwordVisible?"true":"false"}
-                  @click=${this.#y}
+                  aria-expanded=${this.passwordVisible ? 'true' : 'false'}
+                  @click=${this.#onPasswordToggle}
                 >
-                  ${this.passwordVisible?icons.eyeWithSlash:icons.eye}
+                  ${this.passwordVisible ? icons.eyeWithSlash : icons.eye}
                 </glide-core-icon-button>
-              `:nothing}
+              `
+            : nothing}
 
           <div class="suffix-icon">
-            ${"search"===this.type?magnifyingGlassIcon:html`
+            ${this.type === 'search'
+            ? magnifyingGlassIcon
+            : html `
                   <slot name="suffix-icon">
                     <!--
                       An icon after the input field
@@ -85,7 +272,10 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
 
         <div class="meta" id="meta" slot="description">
           <slot
-            class=${classMap({description:!0,hidden:Boolean(this.#s&&this.validityMessage)})}
+            class=${classMap({
+            description: true,
+            hidden: Boolean(this.#isShowValidationFeedback && this.validityMessage),
+        })}
             name="description"
           >
             <!--
@@ -94,12 +284,16 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
             -->
           </slot>
 
-          ${when(this.#s&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+          ${when(this.#isShowValidationFeedback && this.validityMessage, () => html `<span class="validity-message" data-test="validity-message"
                 >${unsafeHTML(this.validityMessage)}</span
-              >`))}
-          ${this.maxlength?html`
+              >`)}
+          ${this.maxlength
+            ? html `
                 <div
-                  class=${classMap({"character-count":!0,error:this.#a})}
+                  class=${classMap({
+                'character-count': true,
+                error: this.#isMaxCharacterCountExceeded,
+            })}
                   data-test="character-count-container"
                 >
                   <!--
@@ -108,19 +302,284 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
                     more accesible, verbose description below.
                   -->
                   <span aria-hidden="true" data-test="character-count-text">
-                    ${this.#c.term("displayedCharacterCount",this.#m,this.maxlength)}
+                    ${this.#localize.term('displayedCharacterCount', this.#valueCharacterCount, this.maxlength)}
                   </span>
 
                   <span class="hidden" data-test="character-count-announcement">
-                    ${this.#c.term("announcedCharacterCount",this.#m,this.maxlength)}
+                    ${this.#localize.term('announcedCharacterCount', this.#valueCharacterCount, this.maxlength)}
                   </span>
                 </div>
-              `:nothing}
+              `
+            : nothing}
         </div>
       </glide-core-private-label>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}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.autocapitalize="on",this.autocomplete="on",this.clearable=!1,this.disabled=!1,this.hideLabel=!1,this.name="",this.orientation="horizontal",this.passwordToggle=!1,this.pattern="",this.readonly=!1,this.required=!1,this.spellcheck=!1,this.type="text",this.value="",this.version=packageJson.version,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=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;#c;get#p(){return this.clearable&&!this.disabled&&!this.readonly}get#h(){return this.#p&&this.value.length>0}get#m(){return this.value.length}#i;get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#m>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(){this.#e.value?.value&&(this.value=this.#e.value?.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#o(){this.hasFocus=!0}#n(){this.#e.value&&(this.value=this.#e.value.value)}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#y(){this.passwordVisible=!this.passwordVisible}};__decorate([property({reflect:!0}),required],Input.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"autocomplete",void 0),__decorate([property({reflect:!0,type:Boolean})],Input.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],Input.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],Input.prototype,"hideLabel",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],Input.prototype,"maxlength",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"orientation",void 0),__decorate([property({attribute:"password-toggle",reflect:!0,type:Boolean})],Input.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0})],Input.prototype,"placeholder",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"pattern",void 0),__decorate([property()],Input.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],Input.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],Input.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean,useDefault:!0})],Input.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],Input.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"type",void 0),__decorate([property()],Input.prototype,"value",void 0),__decorate([property({reflect:!0})],Input.prototype,"version",void 0),__decorate([state()],Input.prototype,"hasFocus",void 0),__decorate([state()],Input.prototype,"isBlurring",void 0),__decorate([state()],Input.prototype,"isCheckingValidity",void 0),__decorate([state()],Input.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Input.prototype,"passwordVisible",void 0),__decorate([state()],Input.prototype,"validityMessage",void 0),Input=__decorate([customElement("glide-core-input"),final],Input);export default Input;const icons={eye:html`<svg
+    `;
+    }
+    reportValidity() {
+        this.isReportValidityOrSubmit = true;
+        const isValid = this.#internals.reportValidity();
+        // Ensures that getters referencing `this.validity.valid` are updated.
+        this.requestUpdate();
+        return isValid;
+    }
+    resetValidityFeedback() {
+        this.isReportValidityOrSubmit = false;
+    }
+    setCustomValidity(message) {
+        this.validityMessage = message;
+        if (message === '') {
+            this.#internals.setValidity({ customError: false }, '', this.#inputElementRef.value);
+        }
+        else {
+            // A validation message is required but unused because we disable native validation
+            // feedback. And an empty string isn't allowed. Thus a single space.
+            this.#internals.setValidity({
+                customError: true,
+                patternMismatch: this.#internals.validity.patternMismatch,
+                valueMissing: this.#internals.validity.valueMissing,
+            }, ' ', this.#inputElementRef.value);
+        }
+    }
+    setValidity(flags, message) {
+        this.validityMessage = message;
+        // A validation message is required but unused because we disable native validation
+        // feedback. And an empty string isn't allowed. Thus a single space.
+        this.#internals.setValidity(flags, ' ', this.#inputElementRef.value);
+    }
+    constructor() {
+        super();
+        this.ariaExpanded = null;
+        this.ariaHasPopup = null;
+        this.autocapitalize = 'on';
+        this.autocomplete = 'on';
+        this.clearable = false;
+        this.disabled = false;
+        this.hideLabel = false;
+        this.name = '';
+        this.orientation = 'horizontal';
+        /** For 'password' type, whether to show a button to toggle the password's visibility */
+        this.passwordToggle = false;
+        this.pattern = '';
+        this.readonly = false;
+        this.required = false;
+        // It's typed by TypeScript as a boolean. But we treat it as a string throughout.
+        this.spellcheck = false;
+        this.type = 'text';
+        // Intentionally not reflected to match native.
+        this.value = '';
+        this.version = packageJson.version;
+        this.hasFocus = false;
+        this.isBlurring = false;
+        this.isCheckingValidity = false;
+        this.isReportValidityOrSubmit = false;
+        this.passwordVisible = false;
+        this.#inputElementRef = createRef();
+        this.#localize = new LocalizeController(this);
+        this.#onFormdata = ({ formData }) => {
+            if (this.name && this.value && !this.disabled) {
+                formData.append(this.name, this.value);
+            }
+        };
+        this.#internals = this.attachInternals();
+        // Event handlers on the host aren't great because consumers can remove them.
+        // Unfortunately, the host is the only thing on which this event is dispatched
+        // because it's the host that is form-associated.
+        this.addEventListener('invalid', (event) => {
+            event?.preventDefault(); // Canceled so a native validation message isn't shown.
+            // We only want to focus the input if the "invalid" event resulted from either:
+            //
+            // 1. A form submission.
+            // 2. A call of `reportValidity()` that did not result from the input's "blur"
+            //    event.
+            if (this.isCheckingValidity || this.isBlurring) {
+                return;
+            }
+            this.isReportValidityOrSubmit = true;
+            const isFirstInvalidFormElement = this.form?.querySelector(':invalid') === this;
+            if (isFirstInvalidFormElement) {
+                // - `this.#internals.delegatesFocus` is preferred because it's declarative. But
+                //    it's limited to focusing the first focusable element. That doesn't work for
+                //    us because our first focusable element is the tooltip when it's present.
+                //
+                // - Canceling this event means the input won't get focus, even if we were to use
+                //   `this.#internals.delegatesFocus`.
+                //
+                // - The browser will ignore this if Input isn't the first invalid form control.
+                //
+                // TODO
+                // Try passing `focusVisible` after browsers support it. It may prevent the issue
+                // where the input itself has a focus outline after this call.
+                //
+                // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
+                this.focus();
+            }
+        });
+    }
+    #inputElementRef;
+    #internals;
+    #localize;
+    get #hasClearButton() {
+        return this.clearable && !this.disabled && !this.readonly;
+    }
+    get #isClearButtonVisible() {
+        return this.#hasClearButton && this.value.length > 0;
+    }
+    get #valueCharacterCount() {
+        return this.value.length;
+    }
+    #onFormdata;
+    get #isMaxCharacterCountExceeded() {
+        return Boolean(!this.disabled &&
+            !this.readonly &&
+            this.maxlength &&
+            this.#valueCharacterCount > this.maxlength);
+    }
+    get #isShowValidationFeedback() {
+        return (!this.disabled && !this.validity?.valid && this.isReportValidityOrSubmit);
+    }
+    #onClearButtonClick(event) {
+        this.value = '';
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        this.#inputElementRef.value?.focus();
+        event.stopPropagation();
+    }
+    #onInputBlur() {
+        this.isBlurring = true;
+        this.reportValidity();
+        this.isBlurring = false;
+        this.hasFocus = false;
+    }
+    #onInputChange() {
+        if (this.#inputElementRef.value?.value) {
+            this.value = this.#inputElementRef.value?.value;
+        }
+        // Unlike "input" events, "change" events aren't composed. So we have to
+        // manually dispatch them.
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    #onInputFocus() {
+        this.hasFocus = true;
+    }
+    #onInputInput() {
+        if (this.#inputElementRef.value) {
+            this.value = this.#inputElementRef.value.value;
+        }
+    }
+    #onInputKeydown(event) {
+        if (event.key === 'Enter') {
+            this.form?.requestSubmit();
+        }
+    }
+    #onPasswordToggle() {
+        this.passwordVisible = !this.passwordVisible;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Input.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'aria-controls', reflect: true })
+], Input.prototype, "ariaControls", void 0);
+__decorate([
+    property({ attribute: 'aria-expanded', reflect: true })
+], Input.prototype, "ariaExpanded", void 0);
+__decorate([
+    property({ attribute: 'aria-haspopup', reflect: true })
+], Input.prototype, "ariaHasPopup", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Input.prototype, "autocapitalize", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Input.prototype, "autocomplete", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Input.prototype, "clearable", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Input.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'hide-label', reflect: true, type: Boolean })
+], Input.prototype, "hideLabel", void 0);
+__decorate([
+    property({
+        type: Number,
+        converter(value) {
+            return value && Number.parseInt(value, 10);
+        },
+        reflect: true,
+    })
+], Input.prototype, "maxlength", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Input.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Input.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'password-toggle', reflect: true, type: Boolean })
+], Input.prototype, "passwordToggle", void 0);
+__decorate([
+    property({ reflect: true })
+], Input.prototype, "placeholder", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Input.prototype, "pattern", void 0);
+__decorate([
+    property()
+], Input.prototype, "privateSplit", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Input.prototype, "readonly", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Input.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean, useDefault: true })
+], Input.prototype, "spellcheck", void 0);
+__decorate([
+    property({ reflect: true })
+], Input.prototype, "tooltip", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Input.prototype, "type", void 0);
+__decorate([
+    property()
+], Input.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], Input.prototype, "version", void 0);
+__decorate([
+    state()
+], Input.prototype, "hasFocus", void 0);
+__decorate([
+    state()
+], Input.prototype, "isBlurring", void 0);
+__decorate([
+    state()
+], Input.prototype, "isCheckingValidity", void 0);
+__decorate([
+    state()
+], Input.prototype, "isReportValidityOrSubmit", void 0);
+__decorate([
+    state()
+], Input.prototype, "passwordVisible", void 0);
+__decorate([
+    state()
+], Input.prototype, "validityMessage", void 0);
+Input = __decorate([
+    customElement('glide-core-input'),
+    final
+], Input);
+export default Input;
+const icons = {
+    eye: html `<svg
     aria-hidden="true"
-    style=${styleMap({height:"1rem",width:"1rem"})}
+    style=${styleMap({
+        height: '1rem',
+        width: '1rem',
+    })}
     fill="none"
     viewBox="0 0 24 24"
     stroke-width="1.5"
@@ -136,9 +595,13 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
       stroke-linejoin="round"
       d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
     />
-  </svg>`,eyeWithSlash:html`<svg
+  </svg>`,
+    eyeWithSlash: html `<svg
     aria-hidden="true"
-    style=${styleMap({height:"1rem",width:"1rem"})}
+    style=${styleMap({
+        height: '1rem',
+        width: '1rem',
+    })}
     fill="none"
     viewBox="0 0 24 24"
     stroke-width="1.5"
@@ -149,4 +612,5 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
       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>`};
+  </svg>`,
+};