@jack-henry/jh-elements 2.0.0-beta.11 → 2.0.0-beta.13

package/components/input/input.js

@@ -11,7 +11,7 @@ let id = 0;
 
 /**
  * @cssprop --jh-input-label-color-text - The label text color. Defaults to `--jh-color-content-primary-enabled`.
- * @cssprop --jh-input-field-color-background - The input field background-color. Defaults to `--jh-color-container-primary-enabled`.
+ * @cssprop --jh-input-field-color-background - The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`.
  * @cssprop --jh-input-field-color-border-enabled - The input field border-color. Defaults to `--jh-border-control-color`.
  * @cssprop --jh-input-field-border-radius - The input field border radius. Defaults to `--jh-border-radius-100`.
  * @cssprop --jh-input-color-focus - The input field outline when it receives keyboard focus. Defaults to `--jh-border-focus-color`.
@@ -91,26 +91,33 @@ export class JhInput extends LitElement {
     // alphanumeric characters -> usernames, product codes, etc.
     '*': /[A-Za-z0-9]/,
   };
-  /** @type {Map} */
-  #activeSlottedElement = new Map();
+
+  get #inputEl() {
+    return this.renderRoot?.querySelector('input');
+  }
+
+  get #leftSlot() {
+    return this.renderRoot?.querySelector('slot[name="jh-input-left"]');
+  }
+
+  get #rightSlot() {
+    return this.renderRoot?.querySelector('slot[name="jh-input-right"]');
+  }
 
   static get styles() {
     return css`
       :host {
-        font-family: var(--jh-font-helper-regular-font-family);
-        font-weight: var(--jh-font-helper-regular-font-weight);
-        font-size: var(--jh-font-helper-regular-font-size);
-        line-height: var(--jh-font-helper-regular-line-height);
+        --input-helper-regular-font-family: var(--jh-font-helper-regular-font-family);
+        --input-helper-regular-font-weight: var(--jh-font-helper-regular-font-weight);
+        --input-helper-regular-font-size: var(--jh-font-helper-regular-font-size);
+        --input-helper-regular-line-height: var(--jh-font-helper-regular-line-height);
+        font-family: var(--input-helper-regular-font-family);
+        font-weight: var(--input-helper-regular-font-weight);
+        font-size: var(--input-helper-regular-font-size);
+        line-height: var(--input-helper-regular-line-height);
         display: inline-block;
         width: 100%;
-        --jh-button-size: var(--jh-dimension-800); 
-        /* input padding + slot padding */
-        --padding-with-left-slotted-content: calc(
-          var(--jh-dimension-400) + var(--jh-dimension-200)
-        );
-        --padding-with-right-slotted-content: calc(
-          var(--jh-dimension-400) + var(--jh-dimension-200)
-        );
+        --jh-button-size: var(--jh-dimension-800);
         --input-value-color-text: var(
           --jh-input-value-color-text,
           var(--jh-color-content-primary-enabled)
@@ -121,6 +128,10 @@ export class JhInput extends LitElement {
           --jh-input-label-color-text,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--jh-font-helper-medium-font-family);
+        font-weight: var(--jh-font-helper-medium-font-weight);
+        font-size: var(--jh-font-helper-medium-font-size);
+        line-height: var(--jh-font-helper-medium-line-height);
         display: block;
       }
       .helper-text {
@@ -138,13 +149,14 @@ export class JhInput extends LitElement {
       :host([show-char-count]) .helper-text {
         display: inline-block;
       }
-      .input-container {
-        position: relative;
-      }
       :host([label]) .input-container {
         margin-top: var(--jh-dimension-200);
       }
-      input {
+
+      /* Flex wrapper */
+      .input-wrapper {
+        display: flex;
+        align-items: center;
         background-color: var(
           --jh-input-field-color-background,
           var(--jh-color-container-primary-enabled)
@@ -153,123 +165,78 @@ export class JhInput extends LitElement {
         border-style: var(--jh-border-control-style);
         border-color: var(
           --jh-input-field-color-border-enabled,
-            var(--jh-border-control-color)
-          );
+          var(--jh-border-control-color)
+        );
         border-radius: var(
           --jh-input-field-border-radius,
           var(--jh-border-radius-100)
         );
-        color: var(--input-value-color-text);
-        font-family: var(--jh-font-body-regular-1-font-family);
-        font-weight: var(--jh-font-body-regular-1-font-weight);
-        font-size: var(--jh-font-body-regular-1-font-size);
-        line-height: var(--jh-font-body-regular-1-line-height);
-        padding: var(--jh-dimension-0) var(--jh-dimension-400) var(--jh-dimension-0) var(--jh-dimension-400);
+        padding: var(--jh-dimension-0) var(--jh-dimension-400);
         box-sizing: border-box;
         width: 100%;
       }
-      .jh-input-right {
-        padding-right: calc(var(--padding-with-right-slotted-content) + var(--jh-input-right-width));
-      }
-      .jh-input-left {
-        padding-left: calc(var(--padding-with-left-slotted-content) + var(--jh-input-left-width));
-      }
-      /* slot styles */
-      ::slotted(*),
-      ::slotted(*) {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      ::slotted([slot='jh-input-left']) {
-        left: var(--jh-dimension-400);
-      }
-      ::slotted([slot='jh-input-right']) {
-        right: var(--jh-dimension-400);
-      }
-      ::slotted([slot='jh-input-left']){
-        top: var(--jh-input-left-top);
-      }
-      ::slotted([slot='jh-input-right']) {
-        top: var(--jh-input-right-top);
-      }
-      /* clear button */
-      .clear-button {
-        right: var(--jh-dimension-400);
-        --jh-button-border-radius: var(--jh-input-clear-border-radius);
-        --jh-button-color-background-tertiary-enabled: var(--jh-input-clear-color-background-enabled);
-        --jh-button-color-border-tertiary-enabled: var(--jh-input-clear-color-border-enabled);
-        --jh-button-icon-color-fill-tertiary-enabled: var(--jh-input-clear-icon-color-fill-enabled);
-        --jh-button-color-background-tertiary-focus: var(--jh-input-clear-color-background-focus);
-        --jh-button-color-border-tertiary-focus: var(--jh-input-clear-color-border-focus);
-        --jh-button-color-focus: var(--jh-input-clear-color-focus);
-        --jh-button-icon-color-fill-tertiary-focus: var(--jh-input-clear-icon-color-fill-focus);
-        --jh-button-color-background-tertiary-hover: var(--jh-input-clear-color-background-hover);
-        --jh-button-color-border-tertiary-hover: var(--jh-input-clear-color-border-hover);
-        --jh-button-icon-color-fill-tertiary-hover: var(--jh-input-clear-icon-color-fill-hover);
-        --jh-button-color-background-tertiary-active: var(--jh-input-clear-color-background-active);
-        --jh-button-color-border-tertiary-active: var(--jh-input-clear-color-border-active);
-        --jh-button-icon-color-fill-tertiary-active: var(--jh-input-clear-icon-color-fill-active);
-        display: none;
-        position: absolute;
-      }
-      .display-clear-button .clear-button {
-        display: inherit;
-      }
-      :host([size='small']) .clear-button {
-        top: 4px;
-      }
-      :host([size='medium']) .clear-button {
-        top: 8px;
-      }
-      :host([size='large']) .clear-button {
-        top: 12px;
-      }
-      .jh-input-right ~ .clear-button {
-        right: calc(var(--padding-with-right-slotted-content) + var(--jh-input-right-width));
-      }
-      .display-clear-button input {
-        padding-right: calc(var(--padding-with-right-slotted-content) + var(--jh-dimension-800));
-      }
-      .display-clear-button .jh-input-right {
-        padding-right: calc(var(--padding-with-right-slotted-content) + var(--jh-input-right-width) + var(--jh-dimension-800) + var(--jh-dimension-200));
-      }
-      /* Sizes */
-      :host([size='small']) input {
+
+      /* Sizes on input wrapper */
+      :host([size='small']) .input-wrapper {
         height: var(--jh-dimension-1000);
       }
-      :host([size='medium']) input {
+      :host([size='medium']) .input-wrapper {
         height: var(--jh-dimension-1200);
       }
-      :host([size='large']) input {
+      :host([size='large']) .input-wrapper {
         height: var(--jh-dimension-1400);
       }
-      .footer-content {
-        margin: var(--jh-dimension-200) 0 0 0;
-        gap: var(--jh-dimension-200);
-        display: flex;
-        justify-content: space-between;
+
+      /* Input element — no border, grows to fill */
+      input {
+        flex: 1;
+        min-width: 0;
+        border: none;
+        background: transparent;
+        outline: none;
+        padding: 0;
+        color: var(--input-value-color-text);
+        font-family: var(--jh-font-body-regular-1-font-family);
+        font-weight: var(--jh-font-body-regular-1-font-weight);
+        font-size: var(--jh-font-body-regular-1-font-size);
+        line-height: var(--jh-font-body-regular-1-line-height);
+        height: 100%;
       }
-      .footer-content:has(.counter):not(:has(.error-text)) {
-        justify-content: flex-end;
+      :host([readonly]) input {
+        height: auto;
+      } 
+
+      /* Slot wrappers */
+      .slot-wrapper {
+        display: none;
+        align-items: center;
+        flex-shrink: 0;
       }
-      .counter {
-        color: var(--jh-input-counter-color-text, 
-          var(--jh-color-content-secondary-enabled)
-        );
+      slot[name="jh-input-left"] {
+        display: none;
+        align-items: center;
+        flex-shrink: 0;
+        padding-right: var(--jh-dimension-200);
       }
-      .error-text {
-        color: var(
-          --jh-input-error-color-text,
-          var(--jh-color-content-negative-enabled)
-        );
+      slot[name="jh-input-right"] {
+        display: none;
+        align-items: center;
+        flex-shrink: 0;
+        padding-left: var(--jh-dimension-200);
       }
-      p {
-        margin: 0;
+      slot[name="jh-input-left"].display-slot,
+      slot[name="jh-input-right"].display-slot {
+        display: flex;
       }
-      /* Input States */
-      input:active {
+
+      /* Slotted content alignment */
+      ::slotted(*) {
+        display: flex;
+        align-items: center;
+      }
+
+      /* States on input wrapper */
+      .input-wrapper:active {
         border-color: var(
           --jh-input-field-color-border-active,
           var(--jh-color-content-brand-active)
@@ -278,13 +245,15 @@ export class JhInput extends LitElement {
       :host([disabled]) {
         opacity: var(--jh-input-opacity-disabled, var(--jh-opacity-disabled));
       }
-      :host([disabled]) input {
+      :host([disabled]) .input-wrapper {
         border-color: var(
           --jh-input-field-color-border-disabled,
           var(--jh-border-control-color)
         );
       }
-      input:focus-visible {
+
+      /* Focus-visible on wrapper when input is focused */
+      .input-wrapper:has(input:focus-visible) {
         border-color: var(
           --jh-input-field-color-border-focus,
           var(--jh-color-content-brand-hover)
@@ -297,13 +266,16 @@ export class JhInput extends LitElement {
         outline-width: var(--jh-border-focus-width);
         outline-offset: 1px;
       }
-      input:hover {
+      input:focus-visible {
+        outline: none;
+      }
+      .input-wrapper:hover {
         border-color: var(
           --jh-input-field-color-border-hover,
           var(--jh-color-content-brand-hover)
         );
       }
-      :host([invalid]) input {
+      :host([invalid]) .input-wrapper {
         border-width: var(--jh-border-error-width);
         border-style: var(--jh-border-error-style);
         border-color: var(
@@ -311,26 +283,82 @@ export class JhInput extends LitElement {
           var(--jh-border-error-color)
         );
       }
-      /* readonly styles */
-      :host([readonly]) input {
+
+      /* Clear button */
+      .clear-button {
+        --jh-button-border-radius: var(--jh-input-clear-border-radius);
+        --jh-button-color-background-tertiary-enabled: var(--jh-input-clear-color-background-enabled);
+        --jh-button-color-border-tertiary-enabled: var(--jh-input-clear-color-border-enabled);
+        --jh-button-icon-color-fill-tertiary-enabled: var(--jh-input-clear-icon-color-fill-enabled);
+        --jh-button-color-background-tertiary-focus: var(--jh-input-clear-color-background-focus);
+        --jh-button-color-border-tertiary-focus: var(--jh-input-clear-color-border-focus);
+        --jh-button-color-focus: var(--jh-input-clear-color-focus);
+        --jh-button-icon-color-fill-tertiary-focus: var(--jh-input-clear-icon-color-fill-focus);
+        --jh-button-color-background-tertiary-hover: var(--jh-input-clear-color-background-hover);
+        --jh-button-color-border-tertiary-hover: var(--jh-input-clear-color-border-hover);
+        --jh-button-icon-color-fill-tertiary-hover: var(--jh-input-clear-icon-color-fill-hover);
+        --jh-button-color-background-tertiary-active: var(--jh-input-clear-color-background-active);
+        --jh-button-color-border-tertiary-active: var(--jh-input-clear-color-border-active);
+        --jh-button-icon-color-fill-tertiary-active: var(--jh-input-clear-icon-color-fill-active);
+        display: none;
+        flex-shrink: 0;
+      }
+      .display-clear-button .clear-button {
+        display: flex;
+        margin-left: var(--jh-dimension-200);  
+      }
+
+      /* Readonly styles */
+      :host([readonly]) .input-wrapper {
         height: auto;
         background-color: transparent;
         border: none;
         padding-left: 0;
         padding-right: 0;
       }
+
       /* Override Chrome autofill styles */
       input:autofill {
         -webkit-text-fill-color: var(--input-value-color-text);
         caret-color: var(--input-value-color-text);
         background-clip: text;
       }
+
+      /* Footer */
+      .footer-content {
+        margin: var(--jh-dimension-200) 0 0 0;
+        gap: var(--jh-dimension-200);
+        display: flex;
+        justify-content: space-between;
+      }
+      .footer-content:has(.counter):not(:has(.error-text)) {
+        justify-content: flex-end;
+      }
+      .counter {
+        color: var(--jh-input-counter-color-text, 
+          var(--jh-color-content-secondary-enabled)
+        );
+      }
+      .error-text {
+        color: var(
+          --jh-input-error-color-text,
+          var(--jh-color-content-negative-enabled)
+        );
+      }
+      p {
+        margin: 0;
+      }
+
       /* Optional/Required/Show-indicator */
       :host([show-indicator]) span {
         color: var(
           --jh-input-optional-color-text,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--input-helper-regular-font-family);
+        font-weight: var(--input-helper-regular-font-weight);
+        font-size: var(--input-helper-regular-font-size);
+        line-height: var(--input-helper-regular-line-height);
       }
       :host([show-indicator][required]) span {
         color: var(
@@ -338,7 +366,6 @@ export class JhInput extends LitElement {
           var(--jh-color-content-negative-enabled)
         );
       }
-
     `;
   }
 
@@ -370,7 +397,7 @@ export class JhInput extends LitElement {
       hideLeftSlot: { type: Boolean, attribute: 'hide-left-slot' },
       /** Hides the right slot from input. */
       hideRightSlot: { type: Boolean, attribute: 'hide-right-slot' },
-      /** Formats the user entered data on input. Does not apply to pasted values. See input mask documentation above for implementation details. */
+      /** Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details. */
       inputMask: { type: String, attribute: 'input-mask' },
       /** Indicates expected input value type and allows for browsers to display appropriate virtual keyboard.
        *
@@ -466,12 +493,15 @@ export class JhInput extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#resizeObserver.disconnect();
     if (this.inputMask) {
       this.removeEventListener('jh-select', this.#setSelection);
     }
   }
 
+  get uniqueId() {
+    return this.#id;
+  }
+
   firstUpdated() {
     // attach event listeners to show/hide clear button
     if (this.showClearButton) {
@@ -482,9 +512,43 @@ export class JhInput extends LitElement {
       ['mouseenter', 'mouseleave'].forEach(e => {
         inputContainer.addEventListener(e, this.#toggleFocus.bind(this));
       });
-     }
+    }
+
+    if (this.#leftSlot) this.#leftSlot.classList.toggle('display-slot', this.#checkSlotContent(this.#leftSlot));
+    if (this.#rightSlot) this.#rightSlot.classList.toggle('display-slot', this.#checkSlotContent(this.#rightSlot));
+
+    // clicking the wrapper should focus the input
+    const wrapper = this.shadowRoot.querySelector('.input-wrapper');
+    wrapper?.addEventListener('mousedown', (e) => {
+      if (e.target === wrapper || e.target.tagName === 'SLOT') {
+        //if the input already has focus, don't do anything. Prevent default to avoid flickering of the focus ring.
+        if (this.shadowRoot.activeElement === this.#inputEl) {
+          e.preventDefault();
+        } else {
+          //otherwise set focus to the input.
+          e.preventDefault();
+          this.#inputEl?.focus();
+        }
+      }
+    });
   }
 
+  #checkSlotContent(slot) {
+    // Slotted and fallback elements
+    const slottedElements = slot.assignedElements({ flatten: true });
+    if (slottedElements.length > 0) {
+        return true;
+    }
+
+    // Slotted and fallback text nodes that are not just whitespace
+    if (slot.assignedNodes({ flatten: true }).some(
+        (node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ''
+    )) {
+        return true;
+    }
+    return false;
+}
+
   #toggleFocus(e) {
     if (this.disabled || this.readonly || !this.showClearButton) {
       return;
@@ -581,7 +645,7 @@ export class JhInput extends LitElement {
     );
   }
 
-  #handleInput(e) {
+  _handleInput(e) {
     this.value = e.target.value;
     let inputType = e.inputType;
     this.#deletedChar = inputType === 'deleteContentBackward' || inputType === 'deleteByCut' || inputType === 'deleteContentForward';
@@ -596,7 +660,7 @@ export class JhInput extends LitElement {
     }
   }
 
-  #handleKeydown(e) {
+  _handleKeydown(e) {
     const value = e.target.value;
     let selectionStart = e.target.selectionStart;
     let selectionEnd = e.target.selectionEnd;
@@ -998,9 +1062,27 @@ export class JhInput extends LitElement {
         this.#selectedText.selectionStart = null;
       }
     }
+
+    // Handle slot visibility updates
+    if (changedProperties.has('hideLeftSlot')) {
+      this.#updateSlotVisibility(this.#leftSlot);
+    }
+    if (changedProperties.has('hideRightSlot')) {
+      this.#updateSlotVisibility(this.#rightSlot);
+    }
+    if (changedProperties.has('readonly')) {
+      this.#updateSlotVisibility(this.#leftSlot);
+      this.#updateSlotVisibility(this.#rightSlot);
+    }
+  }
+
+  #updateSlotVisibility(slot) {
+    if (slot) {
+      slot.classList.toggle('display-slot', this.#checkSlotContent(slot));
+    }
   }
 
-  #handleChange() {
+  _handleChange() {
     let payload = {
       'value': this.value,
     }
@@ -1012,7 +1094,7 @@ export class JhInput extends LitElement {
     this.#dispatch('jh-change', payload);
   }
 
-  #handleSelect(e) {
+  _handleSelect(e) {
     const selectedString = e.target.value.substring(
       e.target.selectionStart,
       e.target.selectionEnd
@@ -1028,11 +1110,11 @@ export class JhInput extends LitElement {
     }
   }
 
-  #handleMaxlength() {
+  _handleMaxlength() {
     this.#dispatch('jh-maxlength');
   }
 
-  #handleClearButtonClick() {
+  _handleClearButtonClick() {
     let previousValue = this.value;
     // clear input value
     this.value = '';
@@ -1051,115 +1133,67 @@ export class JhInput extends LitElement {
     );
   }
 
-  // capture dimensions of slotted content and set CSS variables to adjust input padding and vertically center slotted content
-  #resizeObserver = new ResizeObserver((entries) => {
-    let inputEl = this.shadowRoot.querySelector('input');
-
-    for (let entry of entries) {
-      let slottedEl = entry.target;
-      let slottedElWidth = entry.borderBoxSize[0].inlineSize;
-      let slottedElHeight = entry.borderBoxSize[0].blockSize;
-
-      this.style.setProperty(`--${slottedEl.slot}-width`, `${slottedElWidth}px`);
-
-      this.style.setProperty(`--${slottedEl.slot}-top`, `${(inputEl.offsetHeight - slottedElHeight) / 2}px`);
-    }
-  });
-
-  #handleSlotChange(e) {
+  _handleSlotChange(e) {
     let newSlottedElement = e.target.assignedElements()[0];
-    let slotName = e.target.name;
+    let slot = e.target;
 
-    // stop observing previous slotted element for each slot
-    if (this.#activeSlottedElement.has(slotName)) {
-      this.#resizeObserver.unobserve(this.#activeSlottedElement.get(slotName));
+    if (slot.name !== 'jh-input-left' && slot.name !== 'jh-input-right') {
+      return;
     }
+    
+    let hasContent = this.#checkSlotContent(slot);
+    slot.classList.toggle('display-slot', hasContent);
 
-    if (newSlottedElement) {
-      this.#activeSlottedElement.set(slotName, newSlottedElement);
-
-      if (newSlottedElement.tagName.startsWith('JH-ICON')) {
-        newSlottedElement.setAttribute('size', 'medium');
-      }
-      this.#resizeObserver.observe(newSlottedElement);
+    // Set icon size if applicable
+    if (newSlottedElement?.tagName.startsWith('JH-ICON')) {
+      newSlottedElement.setAttribute('size', 'medium');
     }
-    this.#addClass(slotName, newSlottedElement);
   }
 
-  // sets class on input element so padding can accomodate slotted content
-  #addClass(slotName, slottedElement) {
-    const inputEl = this.shadowRoot.querySelector('input');
+  renderLeftSlot() {
+    if (this.hideLeftSlot) return null;
+    return html`
+        <slot name="jh-input-left" @slotchange=${this._handleSlotChange}></slot>
+    `;
+  }
    
-    // add and remove class if slotted element is not present
-    if (!slottedElement) {
-      inputEl.classList.remove(slotName);
-    } else {
-      inputEl.classList.add(slotName);
-    }
+  renderRightSlot() {
+    if (this.hideRightSlot) return null;
+    return html`
+        <slot name="jh-input-right" @slotchange=${this._handleSlotChange}></slot>
+    `;
   }
 
-  #getSlots() {
-    if (this.readonly) {
-      return;
-    }
-
-    const leftSlot = this.hideLeftSlot
-      ? null
-      : html`<slot
-      name="jh-input-left"
-      @slotchange=${this.#handleSlotChange}
-      ></slot>
+  renderClearButton() {
+    if (!this.showClearButton || !this.value || this.disabled) return null;
+    return html`
+      <jh-button 
+        size="small" appearance="tertiary" class="clear-button" 
+        accessible-label=${ifDefined(this.accessibleLabelClearButton)}
+        @click=${this._handleClearButtonClick}>
+        <slot name="jh-input-clear-button" slot="jh-button-icon">
+          <jh-icon-circle-xmark slot="jh-button-icon" aria-hidden="true" size="medium"></jh-icon-circle-xmark>
+        </slot>
+      </jh-button>
     `;
-
-    const clearBtn = this.showClearButton && this.value && !this.disabled
-        ? html`
-          <jh-button 
-            size="small" appearance="tertiary" class="clear-button" 
-            accessible-label=${ifDefined(this.accessibleLabelClearButton)}
-            @click=${this.#handleClearButtonClick}>
-            <slot name="jh-input-clear-button" slot="jh-button-icon">
-              <jh-icon-circle-xmark slot="jh-button-icon" aria-hidden="true" size="medium"></jh-icon-circle-xmark>
-            </slot>
-          </jh-button>
-        `
-        : null;
-        
-
-    const rightSlot = this.hideRightSlot
-      ? null
-      : html`<slot
-        name="jh-input-right"
-        @slotchange=${this.#handleSlotChange}
-        ></slot>
-      `;
-
-    return html`${leftSlot}${clearBtn}${rightSlot}`;
   }
 
-  #getDescribedby() {
+  _getDescribedby() {
     let describedbyString = '';
 
     if (this.errorText) {
-      describedbyString += `jh-input-error-${this.#id}`;
+      describedbyString += `jh-input-error-${this.uniqueId}`;
     }
     if (this.helperText) {
-      describedbyString += ` jh-input-helper-${this.#id}`;
-    }
-    if (this.showCharCount) {
-      describedbyString += ` jh-input-counter-${this.#id}`;
+      describedbyString += ` jh-input-helper-${this.uniqueId}`;
     }
     return describedbyString;
   }
 
-  render() {
+  renderLabel() {
     let label;
     let indicator;
     let helperText;
-    let input;
-    let footer;
-    let errorText;
-    let charCount;
-    let describedby;
 
     if (this.label) {
       if (this.showIndicator) {
@@ -1172,17 +1206,24 @@ export class JhInput extends LitElement {
 
       if (this.helperText) {
         helperText = html`
-          <p id="jh-input-helper-${this.#id}" class="helper-text">
+          <p id="jh-input-helper-${this.uniqueId}" class="helper-text">
             ${this.helperText}
           </p>
         `;
       }
 
       label = html`
-        <label for="jh-input-${this.#id}">${this.label}${indicator}</label>
+        <label for="jh-input-${this.uniqueId}">${this.label}${indicator}</label>
         ${helperText}
       `;
     }
+    return label;
+  }
+
+  renderFooter() {
+    let footer;
+    let errorText;
+    let charCount;
 
     if (this.showCharCount) {
       let valueLength = this.value ? this.value.length : 0;
@@ -1192,7 +1233,7 @@ export class JhInput extends LitElement {
       }`;
 
       if (valueLength && valueLength === Number(this.maxlength)) {
-        this.#handleMaxlength();
+        this._handleMaxlength();
       }
 
       charCount = html`
@@ -1202,7 +1243,7 @@ export class JhInput extends LitElement {
 
     if (this.invalid && this.errorText) {
       errorText = html`
-        <p id="jh-input-error-${this.#id}" class="error-text">
+        <p id="jh-input-error-${this.uniqueId}" class="error-text">
           ${this.errorText}
         </p>
       `;
@@ -1216,42 +1257,62 @@ export class JhInput extends LitElement {
         </div>
       `;
     }
+    return footer;
+  }
+
+  renderInput() {
+    let describedby;
 
-    if (helperText || errorText || charCount) {
-      describedby = this.#getDescribedby();
+    if (this.helperText || (this.errorText && this.invalid)) {
+      describedby = this._getDescribedby();
     }
 
-    input = html`
+    const leftSlot = this.readonly ? null : this.renderLeftSlot();
+    const rightSlot = this.readonly ? null : this.renderRightSlot();
+    const clearButton = this.readonly ? null : this.renderClearButton();
+
+    return html`
       <div class="input-container">
-        <input
-          id="jh-input-${this.#id}"
-          aria-describedby=${describedby}
-          aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
-          aria-label=${ifDefined(
-            this.accessibleLabel === '' ? null : this.accessibleLabel
-          )}
-          autocomplete=${ifDefined(
-            this.autocomplete === '' ? null : this.autocomplete
-          )}
-          ?disabled=${this.disabled}
-          enterkeyhint=${ifDefined(
-            this.enterkeyhint === '' ? null : this.enterkeyhint
-          )}
-          inputmode=${ifDefined(this.inputmode === '' ? null : this.inputmode)}
-          maxlength=${ifDefined(this.maxlength === '' ? null : this.maxlength)}
-          minlength=${ifDefined(this.minlength === '' ? null : this.minlength)}
-          name=${ifDefined(this.name === '' ? null : this.name)}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          type="text"
-          .value=${this.value}
-          @keydown=${this.inputMask ? this.#handleKeydown : null}
-          @change=${this.#handleChange}
-          @input=${this.#handleInput}
-          @select=${this.#handleSelect}
-        />${this.#getSlots()}
+        <div class="input-wrapper">
+          ${leftSlot}
+          <input
+            id="jh-input-${this.uniqueId}"
+            aria-describedby=${describedby}
+            aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
+            aria-label=${ifDefined(
+              this.accessibleLabel === '' ? null : this.accessibleLabel
+            )}
+            autocomplete=${ifDefined(
+              this.autocomplete === '' ? null : this.autocomplete
+            )}
+            ?disabled=${this.disabled}
+            enterkeyhint=${ifDefined(
+              this.enterkeyhint === '' ? null : this.enterkeyhint
+            )}
+            inputmode=${ifDefined(this.inputmode === '' ? null : this.inputmode)}
+            maxlength=${ifDefined(this.maxlength === '' ? null : this.maxlength)}
+            minlength=${ifDefined(this.minlength === '' ? null : this.minlength)}
+            name=${ifDefined(this.name === '' ? null : this.name)}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            type="text"
+            .value=${this.value}
+            @keydown=${this.inputMask ? this._handleKeydown : null}
+            @change=${this._handleChange}
+            @input=${this._handleInput}
+            @select=${this._handleSelect}
+          />
+          ${clearButton}
+          ${rightSlot}
+        </div>
       </div>
     `;
+  }
+
+  render() {
+    const label = this.renderLabel();
+    const input = this.renderInput();
+    const footer = this.renderFooter();
 
     return html`
       ${label} ${input} ${footer}