@momentum-design/components 0.84.3 → 0.84.5

package/dist/components/formfieldwrapper/formfieldwrapper.subcomponent.js

@@ -6,10 +6,10 @@ import FormfieldWrapper from './formfieldwrapper.component';
 class SubComponentFormFieldWrapper extends FormfieldWrapper {
     render() {
         return html `
-          ${this.renderLabel()}
-          <slot></slot>
-          ${this.renderHelperText()}
-        `;
+      ${this.renderLabel()}
+      <slot></slot>
+      ${this.renderHelperText()}
+    `;
     }
 }
 SubComponentFormFieldWrapper.register('mdc-subcomponent-formfieldwrapper');

package/dist/components/icon/icon.component.js

@@ -9,10 +9,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import styles from './icon.styles';
 import { Component } from '../../models';
 import providerUtils from '../../utils/provider';
 import IconProvider from '../iconprovider/iconprovider.component';
+import styles from './icon.styles';
 import { svgFetch } from './icon.utils';
 import { DEFAULTS } from './icon.constants';
 /**
@@ -124,22 +124,22 @@ class Icon extends Component {
                     cacheStrategy,
                     renewSignal,
                 })
-                    .then((iconData) => {
+                    .then(iconData => {
                     // parse the fetched icon string to an html element and set the attributes
                     const iconElement = this.prepareIconElement(iconData);
                     this.handleIconLoadedSuccess(iconElement);
                 })
-                    .catch((error) => {
+                    .catch(error => {
                     this.handleIconLoadedFailure(error);
                 });
             }
             if (iconSet === 'momentum-icons' && this.name) {
                 // dynamic import of the lit template from the momentum icons package
                 return import(`@momentum-design/icons/dist/ts/${this.name}.ts`)
-                    .then((module) => {
+                    .then(module => {
                     this.handleIconLoadedSuccess(module.default());
                 })
-                    .catch((error) => {
+                    .catch(error => {
                     this.handleIconLoadedFailure(error);
                 });
             }
@@ -196,14 +196,14 @@ class Icon extends Component {
         super.updated(changedProperties);
         if (changedProperties.has('name')) {
             // fetch icon data if name changes:
-            this.getIconData().catch((err) => {
+            this.getIconData().catch(err => {
                 if (err.name !== 'AbortError' && this.onerror) {
                     this.onerror(err);
                 }
             });
         }
         if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
-            this.role = (this.ariaLabel || this.ariaLabelledBy) ? 'img' : null;
+            this.role = this.ariaLabel || this.ariaLabelledBy ? 'img' : null;
         }
         if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
             this.updateSize();

package/dist/components/icon/icon.utils.d.ts

@@ -28,5 +28,5 @@ interface Args {
  * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
-declare const svgFetch: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }: Args) => Promise<string>;
+declare const svgFetch: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal }: Args) => Promise<string>;
 export { svgFetch };

package/dist/components/icon/icon.utils.js

@@ -6,7 +6,7 @@ import { iconsCache } from '../../utils/icon-cache';
  * @returns Promise<Response> - The response from the fetch
  * @throws Error if the response is not ok
  */
-const fetchIcon = async (request) => fetch(request).then((response) => {
+const fetchIcon = async (request) => fetch(request).then(response => {
     if (!response.ok) {
         throw new Error('There was a problem while fetching the icon!');
     }
@@ -33,7 +33,7 @@ const fetchIcon = async (request) => fetch(request).then((response) => {
  * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
-const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }) => {
+const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal }) => {
     // abort the previous fetch request if it is still pending
     // and create a new signal
     const signal = renewSignal();
@@ -43,11 +43,11 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
     // if there is no cache defined (cacheName and cacheStrategy properly set),
     // fetch the icon and return the response
     if (!cacheName || !cacheStrategy || !['in-memory-cache', 'web-cache-api'].includes(cacheStrategy)) {
-        return fetchIcon(request).then((response) => response.text());
+        return fetchIcon(request).then(response => response.text());
     }
-    return iconsCache(cacheName, cacheStrategy).then((iconsCache) => iconsCache
+    return iconsCache(cacheName, cacheStrategy).then(iconsCache => iconsCache
         .get(request)
-        .then((responseFromCache) => {
+        .then(responseFromCache => {
         // **If entry in cache, return**
         if (responseFromCache) {
             return responseFromCache;
@@ -56,7 +56,7 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
         // Both fetchIcon() and iconsCache.set() "consume" the request,
         // so we need to make a copy.
         // (see https://developer.mozilla.org/en-US/docs/Web/API/Request/clone)
-        return fetchIcon(request.clone()).then((response) => {
+        return fetchIcon(request.clone()).then(response => {
             var _a;
             // This avoids caching responses that we know are errors
             // (i.e. HTTP status code of 4xx or 5xx).
@@ -68,7 +68,7 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
             return response.text();
         });
     })
-        .catch((error) => {
+        .catch(error => {
         // Note that a HTTP error response (e.g. 404) will NOT trigger
         // an exception.
         // It will return a normal response object that has the appropriate

package/dist/components/iconprovider/iconprovider.component.js

@@ -110,13 +110,13 @@ class IconProvider extends Provider {
         }
     }
     updateContext() {
-        if (this.context.value.fileExtension !== this.fileExtension
-            || this.context.value.iconSet !== this.iconSet
-            || this.context.value.url !== this.url
-            || this.context.value.lengthUnit !== this.lengthUnit
-            || this.context.value.size !== this.size
-            || this.context.value.cacheName !== this.cacheName
-            || this.context.value.cacheStrategy !== this.cacheStrategy) {
+        if (this.context.value.fileExtension !== this.fileExtension ||
+            this.context.value.iconSet !== this.iconSet ||
+            this.context.value.url !== this.url ||
+            this.context.value.lengthUnit !== this.lengthUnit ||
+            this.context.value.size !== this.size ||
+            this.context.value.cacheName !== this.cacheName ||
+            this.context.value.cacheStrategy !== this.cacheStrategy) {
             this.updateValuesInContext();
             this.context.updateObservers();
         }

package/dist/components/input/input.component.d.ts

@@ -1,8 +1,8 @@
 import { CSSResult, nothing, PropertyValueMap } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { IconNames } from '../icon/icon.types';
-import type { AutoCapitalizeType, AutoCompleteType, InputType } from './input.types';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
+import type { AutoCapitalizeType, AutoCompleteType, InputType } from './input.types';
 declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * mdc-input is a component that allows users to input text.
@@ -164,10 +164,10 @@ declare class Input extends Input_base implements AssociatedFormControl {
      */
     private onChange;
     /**
-       * Handles the keydown event of the input field.
-       * If the key pressed is 'Enter', it submits the form.
-       * @param event - Keyboard event
-       */
+     * Handles the keydown event of the input field.
+     * If the key pressed is 'Enter', it submits the form.
+     * @param event - Keyboard event
+     */
     protected handleKeyDown(event: KeyboardEvent): void;
     /**
      * Renders the leading icon before the input field.

package/dist/components/input/input.component.js

@@ -10,12 +10,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './input.styles';
 import FormfieldWrapper from '../formfieldwrapper';
-import { AUTO_CAPITALIZE, AUTO_COMPLETE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { AUTO_CAPITALIZE, AUTO_COMPLETE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
+import styles from './input.styles';
 /**
  * mdc-input is a component that allows users to input text.
  *  It contains:
@@ -97,13 +97,15 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.updateComplete.then(() => {
+        this.updateComplete
+            .then(() => {
             if (this.inputElement) {
                 this.inputElement.checkValidity();
                 this.setInputValidity();
                 this.internals.setFormValue(this.inputElement.value);
             }
-        }).catch((error) => {
+        })
+            .catch(error => {
             if (this.onerror) {
                 this.onerror(error);
             }
@@ -124,9 +126,11 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * @returns void
      */
     handleValueChange() {
-        this.updateComplete.then(() => {
+        this.updateComplete
+            .then(() => {
             this.setInputValidity();
-        }).catch((error) => {
+        })
+            .catch(error => {
             if (this.onerror) {
                 this.onerror(error);
             }
@@ -157,16 +161,13 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      */
     attributeChangedCallback(name, old, value) {
         super.attributeChangedCallback(name, old, value);
-        const validationRelatedAttributes = [
-            'maxlength',
-            'minlength',
-            'pattern',
-            'required',
-        ];
+        const validationRelatedAttributes = ['maxlength', 'minlength', 'pattern', 'required'];
         if (validationRelatedAttributes.includes(name)) {
-            this.updateComplete.then(() => {
+            this.updateComplete
+                .then(() => {
                 this.setInputValidity();
-            }).catch((error) => {
+            })
+                .catch(error => {
                 if (this.onerror) {
                     this.onerror(error);
                 }
@@ -208,10 +209,10 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.dispatchEvent(new EventConstructor(event.type, event));
     }
     /**
-       * Handles the keydown event of the input field.
-       * If the key pressed is 'Enter', it submits the form.
-       * @param event - Keyboard event
-       */
+     * Handles the keydown event of the input field.
+     * If the key pressed is 'Enter', it submits the form.
+     * @param event - Keyboard event
+     */
     handleKeyDown(event) {
         var _a;
         if (event.key === 'Enter') {
@@ -229,12 +230,13 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             return nothing;
         }
         return html `
-      <mdc-icon 
-        class="leading-icon" 
+      <mdc-icon
+        class="leading-icon"
         part="leading-icon"
-        name=${this.leadingIcon} 
-        size="${DEFAULTS.ICON_SIZE_VALUE}" 
-        length-unit="${DEFAULTS.ICON_SIZE_UNIT}">
+        name=${this.leadingIcon}
+        size="${DEFAULTS.ICON_SIZE_VALUE}"
+        length-unit="${DEFAULTS.ICON_SIZE_UNIT}"
+      >
       </mdc-icon>
     `;
     }
@@ -253,9 +255,9 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             return nothing;
         }
         return html `
-      <mdc-text 
-        class="prefix-text" 
-        tagname="${DEFAULTS.PREFIX_TEXT_TAG}" 
+      <mdc-text
+        class="prefix-text"
+        tagname="${DEFAULTS.PREFIX_TEXT_TAG}"
         type="${DEFAULTS.PREFIX_TEXT_TYPE}"
         aria-hidden="true"
       >
@@ -282,11 +284,11 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             return nothing;
         }
         return html `
-      <mdc-button 
-        part='trailing-button'
-        class='own-focus-ring ${!showBtn ? 'hidden' : ''}'
-        prefix-icon='${DEFAULTS.CLEAR_BUTTON_ICON}'
-        variant='${DEFAULTS.CLEAR_BUTTON_VARIANT}'
+      <mdc-button
+        part="trailing-button"
+        class="own-focus-ring ${!showBtn ? 'hidden' : ''}"
+        prefix-icon="${DEFAULTS.CLEAR_BUTTON_ICON}"
+        variant="${DEFAULTS.CLEAR_BUTTON_VARIANT}"
         size="${DEFAULTS.CLEAR_BUTTON_SIZE}"
         aria-label="${this.clearAriaLabel}"
         @click=${this.clearInputText}
@@ -297,43 +299,43 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     renderInputElement(type, hidePlaceholder = false) {
         var _a;
         const placeholderText = hidePlaceholder ? '' : this.placeholder;
-        return html `<input 
-                  aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-                  class='input'
-                  part='input'
-                  id="${this.id}"
-                  name="${this.name}"
-                  .value="${this.value}"
-                  ?disabled="${this.disabled}"
-                  ?readonly="${this.readonly}"
-                  ?required="${this.required}"
-                  type="${type}"
-                  aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
-                  aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
-                  placeholder=${ifDefined(placeholderText)}
-                  minlength=${ifDefined(this.minlength)}
-                  maxlength=${ifDefined(this.maxlength)}
-                  autocapitalize=${this.autocapitalize}
-                  autocomplete=${this.autocomplete}
-                  ?autofocus="${this.autofocus}"
-                  dirname=${ifDefined(this.dirname)}
-                  pattern=${ifDefined(this.pattern)}
-                  list=${ifDefined(this.list)}
-                  size=${ifDefined(this.size)}
-                  @input=${this.onInput}
-                  @change=${this.onChange}
-                  @keydown=${this.handleKeyDown}
-                />`;
+        return html `<input
+      aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+      class="input"
+      part="input"
+      id="${this.id}"
+      name="${this.name}"
+      .value="${this.value}"
+      ?disabled="${this.disabled}"
+      ?readonly="${this.readonly}"
+      ?required="${this.required}"
+      type="${type}"
+      aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
+      aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
+      placeholder=${ifDefined(placeholderText)}
+      minlength=${ifDefined(this.minlength)}
+      maxlength=${ifDefined(this.maxlength)}
+      autocapitalize=${this.autocapitalize}
+      autocomplete=${this.autocomplete}
+      ?autofocus="${this.autofocus}"
+      dirname=${ifDefined(this.dirname)}
+      pattern=${ifDefined(this.pattern)}
+      list=${ifDefined(this.list)}
+      size=${ifDefined(this.size)}
+      @input=${this.onInput}
+      @change=${this.onChange}
+      @keydown=${this.handleKeyDown}
+    />`;
     }
     render() {
         return html `
       ${this.renderLabel()}
       <div class="input-container mdc-focus-ring" part="input-container">
         <slot name="input-leading-icon">${this.renderLeadingIcon()}</slot>
-       <div class="input-section" part="input-section">
-       <slot name="input-prefix-text">${this.renderPrefixText()}</slot>
-        <slot name="input">${this.renderInputElement(DEFAULTS.INPUT_TYPE)}</slot>
-       </div>
+        <div class="input-section" part="input-section">
+          <slot name="input-prefix-text">${this.renderPrefixText()}</slot>
+          <slot name="input">${this.renderInputElement(DEFAULTS.INPUT_TYPE)}</slot>
+        </div>
         <slot name="trailing-button">${this.renderTrailingButton()}</slot>
       </div>
       ${this.helpText ? this.renderHelperText() : nothing}

package/dist/components/input/input.styles.js

@@ -1,120 +1,131 @@
 import { css } from 'lit';
 import { hostFocusRingStyles } from '../../utils/styles';
-const styles = [css `
-  :host{
-    --mdc-input-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
-    --mdc-input-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-input-disabled-background-color: var(--mds-color-theme-background-input-disabled);
-    --mdc-input-border-color: var(--mds-color-theme-outline-input-normal);
-    --mdc-input-text-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-input-background-color: var(--mds-color-theme-background-primary-ghost);
-    --mdc-input-selection-background-color: var(--mds-color-theme-background-accent-active);
-    --mdc-input-selection-text-color: var(--mds-color-theme-inverted-text-primary-normal);
-    --mdc-input-support-text-color: var(--mds-color-theme-text-secondary-normal);
-    --mdc-input-hover-background-color: var(--mds-color-theme-background-primary-hover);
-    --mdc-input-focused-background-color: var(--mds-color-theme-background-primary-ghost);
-    --mdc-input-focused-border-color: var(--mds-color-theme-outline-input-active);
-    --mdc-input-error-border-color: var(--mds-color-theme-text-error-normal);
-    --mdc-input-warning-border-color: var(--mds-color-theme-text-warning-normal);
-    --mdc-input-success-border-color: var(--mds-color-theme-text-success-normal);
-    --mdc-input-primary-border-color: var(--mds-color-theme-text-accent-normal);
-  }
-
-  :host, .input-container, .input-section, .input{
-    width: 100%;
-  }
-
-  input{
-    font-family: inherit;
-  }
-
-  :host([readonly]) .leading-icon {
-    color: var(--mdc-input-support-text-color);
-  }
-
-  :host([disabled]) .input,
-  :host([disabled]) .input::placeholder,
-  :host([disabled]) .prefix-text{
-    color: var(--mdc-input-disabled-text-color);
-  }
-
-  :host([disabled]) .input-container,
-  :host([readonly]) .input-container,
-  :host([disabled][help-text-type="default"]) .input-container,
-  :host([disabled][help-text-type="success"]) .input-container,
-  :host([disabled][help-text-type="warning"]) .input-container,
-  :host([disabled][help-text-type="error"]) .input-container,
-  :host([disabled][help-text-type="priority"]) .input-container{
-    border-color: var(--mdc-input-disabled-border-color);
-    background: var(--mdc-input-disabled-background-color);
-  }
-
-  .leading-icon{
-    aspect-ratio: 1;
-  }
-
-  .input-container{
-    height: 2rem;
-    border-radius: 0.5rem;
-    border: 0.0625rem solid var(--mdc-input-border-color);
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.34375rem 0.375rem 0.34375rem 0.75rem;
-    min-width: 3.25rem;
-  }
-
-  .input-section{
-    display: flex;
-    gap: 0.25rem;
-  }
-
-  .input {
-    border: none;
-    color: var(--mdc-input-text-color);
-    background-color: var(--mdc-input-background-color);
-    outline: none;
-  }
-
-  .input::selection { 
-    background-color: var(--mdc-input-selection-background-color);
-    color: var(--mdc-input-selection-text-color);
-  }
-
-  .prefix-text{
-    color: var(--mdc-input-support-text-color);
-    white-space: nowrap; // restrict prefix text to be in one line
-  }
-
-  :host(:not([disabled])) .input-container:hover{
-    background-color: var(--mdc-input-hover-background-color);
-  }
-
-  :host(:not([disabled])) .input-container:active, :host(:not([disabled])) .input-container:focus-within{
-    background-color: var(--mdc-input-focused-background-color);
-    border-color: var(--mdc-input-focused-border-color);
-  }
-
-  .input::placeholder{
-    color: var(--mdc-input-support-text-color);
-  }
-
-  :host([help-text-type="error"]) .input-container, :host([help-text-type="error"]) .input-container:focus-within {
-    border-color: var(--mdc-input-error-border-color);
-  }
-  :host([help-text-type="warning"]) .input-container, :host([help-text-type="warning"]) .input-container:focus-within {
-    border-color: var(--mdc-input-warning-border-color);
-  }
-  :host([help-text-type="success"]) .input-container, :host([help-text-type="success"]) .input-container:focus-within {
-    border-color: var(--mdc-input-success-border-color);
-  }
-  :host([help-text-type="priority"]) .input-container, :host([help-text-type="priority"]) input-container:focus-within {
-    border-color: var(--mdc-input-primary-border-color);
-  }
-
-  .hidden{
-    opacity: 0;
-    pointer-events: none;
-  }
-`, ...hostFocusRingStyles(true)];
+const styles = [
+    css `
+    :host {
+      --mdc-input-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-input-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-input-disabled-background-color: var(--mds-color-theme-background-input-disabled);
+      --mdc-input-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-input-text-color: var(--mds-color-theme-text-primary-normal);
+      --mdc-input-background-color: var(--mds-color-theme-background-primary-ghost);
+      --mdc-input-selection-background-color: var(--mds-color-theme-background-accent-active);
+      --mdc-input-selection-text-color: var(--mds-color-theme-inverted-text-primary-normal);
+      --mdc-input-support-text-color: var(--mds-color-theme-text-secondary-normal);
+      --mdc-input-hover-background-color: var(--mds-color-theme-background-primary-hover);
+      --mdc-input-focused-background-color: var(--mds-color-theme-background-primary-ghost);
+      --mdc-input-focused-border-color: var(--mds-color-theme-outline-input-active);
+      --mdc-input-error-border-color: var(--mds-color-theme-text-error-normal);
+      --mdc-input-warning-border-color: var(--mds-color-theme-text-warning-normal);
+      --mdc-input-success-border-color: var(--mds-color-theme-text-success-normal);
+      --mdc-input-primary-border-color: var(--mds-color-theme-text-accent-normal);
+    }
+
+    :host,
+    .input-container,
+    .input-section,
+    .input {
+      width: 100%;
+    }
+
+    input {
+      font-family: inherit;
+    }
+
+    :host([readonly]) .leading-icon {
+      color: var(--mdc-input-support-text-color);
+    }
+
+    :host([disabled]) .input,
+    :host([disabled]) .input::placeholder,
+    :host([disabled]) .prefix-text {
+      color: var(--mdc-input-disabled-text-color);
+    }
+
+    :host([disabled]) .input-container,
+    :host([readonly]) .input-container,
+    :host([disabled][help-text-type='default']) .input-container,
+    :host([disabled][help-text-type='success']) .input-container,
+    :host([disabled][help-text-type='warning']) .input-container,
+    :host([disabled][help-text-type='error']) .input-container,
+    :host([disabled][help-text-type='priority']) .input-container {
+      border-color: var(--mdc-input-disabled-border-color);
+      background: var(--mdc-input-disabled-background-color);
+    }
+
+    .leading-icon {
+      aspect-ratio: 1;
+    }
+
+    .input-container {
+      height: 2rem;
+      border-radius: 0.5rem;
+      border: 0.0625rem solid var(--mdc-input-border-color);
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.34375rem 0.375rem 0.34375rem 0.75rem;
+      min-width: 3.25rem;
+    }
+
+    .input-section {
+      display: flex;
+      gap: 0.25rem;
+    }
+
+    .input {
+      border: none;
+      color: var(--mdc-input-text-color);
+      background-color: var(--mdc-input-background-color);
+      outline: none;
+    }
+
+    .input::selection {
+      background-color: var(--mdc-input-selection-background-color);
+      color: var(--mdc-input-selection-text-color);
+    }
+
+    .prefix-text {
+      color: var(--mdc-input-support-text-color);
+      white-space: nowrap; // restrict prefix text to be in one line
+    }
+
+    :host(:not([disabled])) .input-container:hover {
+      background-color: var(--mdc-input-hover-background-color);
+    }
+
+    :host(:not([disabled])) .input-container:active,
+    :host(:not([disabled])) .input-container:focus-within {
+      background-color: var(--mdc-input-focused-background-color);
+      border-color: var(--mdc-input-focused-border-color);
+    }
+
+    .input::placeholder {
+      color: var(--mdc-input-support-text-color);
+    }
+
+    :host([help-text-type='error']) .input-container,
+    :host([help-text-type='error']) .input-container:focus-within {
+      border-color: var(--mdc-input-error-border-color);
+    }
+    :host([help-text-type='warning']) .input-container,
+    :host([help-text-type='warning']) .input-container:focus-within {
+      border-color: var(--mdc-input-warning-border-color);
+    }
+    :host([help-text-type='success']) .input-container,
+    :host([help-text-type='success']) .input-container:focus-within {
+      border-color: var(--mdc-input-success-border-color);
+    }
+    :host([help-text-type='priority']) .input-container,
+    :host([help-text-type='priority']) input-container:focus-within {
+      border-color: var(--mdc-input-primary-border-color);
+    }
+
+    .hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  `,
+    ...hostFocusRingStyles(true),
+];
 export default styles;