@descope/web-components-ui 1.0.334 → 1.0.336

package/dist/index.esm.js

@@ -4,6 +4,7 @@ import '@vaadin/checkbox';
 import '@vaadin/text-field';
 import '@vaadin/email-field';
 import '@vaadin/number-field';
+import '@vaadin/icon';
 import '@vaadin/password-field';
 import MarkdownIt from 'markdown-it';
 import '@vaadin/text-area';
@@ -15,7 +16,6 @@ import '@vaadin/multi-select-combo-box';
 import '@vaadin/dialog';
 import '@vaadin/notification';
 import '@vaadin/avatar';
-import '@vaadin/icon';
 import '@vaadin/icons';
 import '@vaadin/custom-field';
 import hljs from 'highlight.js';
@@ -985,7 +985,7 @@ const proxyInputMixin =
   ({
     proxyProps = [],
     // useProxyTargets flag allows to forwardProps to other targets, other than
-    // `this.inputElement`. It's to be used within `external-input` components,
+    // `this.inputElement`.
     // if needed
     useProxyTargets = false,
     // allows us to set the event that should trigger validation
@@ -1114,10 +1114,7 @@ const proxyInputMixin =
 
           // sync properties
           proxyProps.forEach((prop) => {
-            const externalInput = this.querySelector('input[slot="external-input"]') || null;
-            const proxyTargets = useProxyTargets
-              ? [this.baseElement, externalInput].filter(Boolean)
-              : [];
+            const proxyTargets = useProxyTargets ? [this.baseElement].filter(Boolean) : [];
             forwardProps(this, [this.inputElement, ...proxyTargets], prop);
           });
 
@@ -2496,10 +2493,7 @@ const {
   errorMessage: errorMessage$a,
   disabledPlaceholder,
   inputDisabled,
-  externalInput,
-  externalInputDisabled,
-  externalPlaceholder,
-  externalDisabledPlaceholder,
+  inputIcon,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -2514,10 +2508,7 @@ const {
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
-  externalInput: { selector: () => '::slotted(input)' },
-  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
-  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
-  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
+  inputIcon: { selector: 'vaadin-icon' },
 };
 
 var textFieldMappings = {
@@ -2547,12 +2538,8 @@ var textFieldMappings = {
   inputValueTextColor: [
     { ...inputField$6, property: 'color' },
     { ...inputDisabled, property: '-webkit-text-fill-color' },
-    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
-  ],
-  inputCaretTextColor: [
-    { ...input, property: 'color' },
-    { ...externalInput, property: 'color' },
   ],
+  inputCaretTextColor: [{ ...input, property: 'color' }],
 
   labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
 
@@ -2565,8 +2552,6 @@ var textFieldMappings = {
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
-    { ...externalInput, property: 'padding-left' },
-    { ...externalInput, property: 'padding-right' },
   ],
 
   inputOutlineColor: { ...inputField$6, property: 'outline-color' },
@@ -2574,17 +2559,12 @@ var textFieldMappings = {
   inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
   inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
 
-  inputTextAlign: [
-    { ...input, property: 'text-align' },
-    { ...externalInput, property: 'text-align' },
-  ],
+  inputTextAlign: [{ ...input, property: 'text-align' }],
 
   inputPlaceholderColor: [
     { selector: () => ':host input:placeholder-shown', property: 'color' },
     { ...placeholder$3, property: 'color' },
-    { ...externalPlaceholder, property: 'color' },
     { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
-    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
   ],
 
   labelPosition: { ...label$9, property: 'position' },
@@ -2596,99 +2576,17 @@ var textFieldMappings = {
   inputTransformY: { ...label$9, property: 'transform' },
   inputTransition: { ...label$9, property: 'transition' },
   marginInlineStart: { ...label$9, property: 'margin-inline-start' },
-  placeholderOpacity: [
-    { selector: '> input:placeholder-shown', property: 'opacity' },
-    { ...externalPlaceholder, property: 'opacity' },
-  ],
-  inputVerticalAlignment: [
-    { ...inputField$6, property: 'align-items' },
-    { ...externalInput, property: 'align-items' },
-  ],
-  valueInputHeight: [
-    { ...input, property: 'height' },
-    { ...externalInput, property: 'height' },
-  ],
-  valueInputMarginBottom: [
-    { ...input, property: 'margin-bottom' },
-    { ...externalInput, property: 'margin-bottom' },
+  placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
+  inputVerticalAlignment: [{ ...inputField$6, property: 'align-items' }],
+  valueInputHeight: [{ ...input, property: 'height' }],
+  valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
+
+  inputIconOffset: [
+    { ...inputIcon, property: 'margin-right' },
+    { ...inputIcon, property: 'margin-left' },
   ],
-};
-
-// since on load we can only sample the color of the placeholder,
-// we need to temporarily populate the input in order to sample the value color
-const getValueColor = (ele, computedStyle) => {
-  // eslint-disable-next-line no-param-reassign
-  ele.value = '_';
-
-  const valueColor = computedStyle.getPropertyValue('color');
-
-  // eslint-disable-next-line no-param-reassign
-  ele.value = '';
-
-  return valueColor;
-};
-
-const createExternalInputSlot = (slotName, targetSlotName) => {
-  const slotEle = document.createElement('slot');
-
-  slotEle.setAttribute('name', slotName);
-  slotEle.setAttribute('slot', targetSlotName);
-
-  return slotEle;
-};
-
-const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
-  const inputEle = document.createElement('input');
-
-  inputEle.setAttribute('slot', targetSlotName);
-  inputEle.setAttribute('type', type);
-  inputEle.setAttribute('data-hidden-input', 'true');
-  inputEle.setAttribute('autocomplete', autocompleteType);
-
-  return inputEle;
-};
-
-// We apply the original input's style to the external-input.
-// Eventually, the user should interact directly with the external input.
-// We keep the original input
-const applyExternalInputStyles = (sourceInputEle, targetInputEle, labelType) => {
-  const computedStyle = getComputedStyle(sourceInputEle);
-
-  // Get minimal set of computed theme properties to set on external input
-  const height = computedStyle.getPropertyValue('height');
-  const paddingLeft = computedStyle.getPropertyValue('padding-left');
-  const paddingRight = computedStyle.getPropertyValue('padding-right');
-  const fontSize = computedStyle.getPropertyValue('font-size');
-  const fontFamily = computedStyle.getPropertyValue('font-family');
-  const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
-  const caretColor = computedStyle.getPropertyValue('caret-color');
-
-  const valueColor = getValueColor(sourceInputEle, computedStyle);
-
-  const commonThemeStyles = [
-    ['all', 'unset'],
-    ['position', 'absolute'],
-    ['background-color', 'transparent'],
-    ['height', height],
-    ['left', paddingLeft],
-    ['right', paddingRight],
-    ['font-size', fontSize],
-    ['font-family', fontFamily],
-    ['letter-spacing', letterSpacing],
-    ['width', `calc(100% - ${paddingLeft} - ${paddingRight}`],
-    ['caret-color', caretColor], // this is for seeing caret when focusing on external input
-    ['color', valueColor],
-  ];
-
-  commonThemeStyles.forEach(([key, val]) =>
-    targetInputEle.style.setProperty(key, val, 'important')
-  );
-
-  // Handle floating label theme properties
-  if (labelType === 'floating') {
-    const marginBottom = computedStyle.getPropertyValue('margin-bottom');
-    targetInputEle.style.setProperty('margin-bottom', marginBottom, 'important');
-  }
+  inputIconSize: { ...inputIcon, property: 'font-size' },
+  inputIconColor: { ...inputIcon, property: 'color' },
 };
 
 const componentName$M = getComponentName('email-field');
@@ -2700,103 +2598,12 @@ const customMixin$a = (superclass) =>
 
       this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
 
-      if (!this.isNoExternalInput) {
-        this.externalInput = this.handleExternalInput();
-
-        this.addEventListener('focus', () => {
-          this.externalInput.focus();
-        });
-      } else {
-        this.setAttribute('autocomplete', this.getAutocompleteType());
-      }
-    }
-
-    get isNoExternalInput() {
-      return this.getAttribute('no-external-input') === 'true';
-    }
-
-    forwardInputValue(source, target) {
-      // set internal sync events
-      const valueDescriptor = Object.getOwnPropertyDescriptor(
-        this.inputElement.constructor.prototype,
-        'value'
-      );
-
-      Object.defineProperty(source, 'value', {
-        ...valueDescriptor,
-
-        set(v) {
-          valueDescriptor.set.call(this, v);
-          // eslint-disable-next-line no-param-reassign
-          target.value = v;
-        },
-        configurable: true,
-      });
-    }
-
-    handleExternalInput() {
-      // set safety attribute `external-input`
-      this.setAttribute('external-input', 'true');
-
-      // use original input element as reference
-      const origInput = this.baseElement.querySelector('input');
-
-      // to avoid focus loop between external-input and origInput
-      // we set origInput's tabindex to -1
-      // otherwise, shift-tab will never leave the component focus
-      origInput.setAttribute('tabindex', '-1');
-
-      // create external slot
-      const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
-      // append external slot to base element
-      this.baseElement.appendChild(externalInputSlot);
-
-      const externalInput = createExternalInputEle(
-        'external-input',
-        'text',
-        this.getAutocompleteType()
-      );
-
-      // apply original input's styles to external input
-      setTimeout(() => {
-        applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
-      });
-
-      // set external input events
-      this.handleExternalInputEvents(externalInput);
-
-      // 1Password catches the internal input, so we forward the value to the external input
-      this.forwardInputValue(origInput, externalInput);
-
-      syncAttrs(origInput, externalInput, {
-        includeAttrs: ['disabled', 'readonly', 'pattern'],
-      });
-
-      // append external input to component's DOM
-      this.appendChild(externalInput);
-
-      return externalInput;
+      this.setAttribute('autocomplete', this.getAutocompleteType());
     }
 
     getAutocompleteType() {
       return this.getAttribute('autocomplete') || 'username';
     }
-
-    handleExternalInputEvents(externalInput) {
-      // sync value of insible input back to original input
-      externalInput.addEventListener('input', (e) => {
-        this.value = e.target.value;
-      });
-
-      // sync `focused` attribute on host when focusing on external input
-      externalInput.addEventListener('focus', () => {
-        this.setAttribute('focused', 'true');
-      });
-
-      externalInput.addEventListener('blur', () => {
-        this.removeAttribute('focused');
-      });
-    }
   };
 
 const EmailFieldClass = compose(
@@ -2804,7 +2611,7 @@ const EmailFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$a
 )(
@@ -2832,10 +2639,6 @@ const EmailFieldClass = compose(
         opacity: 0;
       }
 
-      vaadin-email-field:not([no-external-input="true"]) > input:not(:placeholder-shown) {
-        opacity: 0;
-      }
-
       :host ::slotted(*) {
         -webkit-mask-image: none;
       }
@@ -3287,7 +3090,7 @@ class PasscodeInternal extends BaseInputClass$7 {
 
 const componentName$F = getComponentName('text-field');
 
-const observedAttrs = ['type', 'label-type'];
+const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
 
 const customMixin$9 = (superclass) =>
   class TextFieldClass extends superclass {
@@ -3295,6 +3098,47 @@ const customMixin$9 = (superclass) =>
       return observedAttrs.concat(superclass.observedAttributes || []);
     }
 
+    icon;
+
+    init() {
+      super.init?.();
+    }
+
+    renderCopyToClipboard(shouldRender) {
+      if (!shouldRender) {
+        this.icon?.remove();
+        return;
+      }
+
+      const iconInitConfig = {
+        icon: 'vaadin:copy-o',
+        title: 'Copy',
+        style: 'cursor: pointer',
+      };
+
+      const iconCopiedConfig = {
+        icon: 'vaadin:check-circle-o',
+        title: 'Copied',
+        style: 'cursor: initial',
+      };
+
+      this.icon = Object.assign(document.createElement('vaadin-icon'), {
+        slot: 'suffix',
+        ...iconInitConfig,
+      });
+
+      this.baseElement.appendChild(this.icon);
+      this.icon.addEventListener('click', () => {
+        navigator.clipboard.writeText(this.value);
+        Object.assign(this.icon, iconCopiedConfig);
+
+        // we want the icon to go back to the initial state after 5 seconds
+        setTimeout(() => {
+          Object.assign(this.icon, iconInitConfig);
+        }, 5000);
+      });
+    }
+
     onLabelClick() {
       this.focus();
     }
@@ -3318,34 +3162,11 @@ const customMixin$9 = (superclass) =>
           } else {
             this.removeEventListener('click', this.onLabelClick);
           }
+        } else if (attrName === 'copy-to-clipboard') {
+          this.renderCopyToClipboard(newVal === 'true');
         }
       }
     }
-
-    // webauthn is not working when the native input element is nested inside multiple shadow roots
-    // so we need to be able move the input outside the shadow root for some cases
-    get isExternalInput() {
-      return this.getAttribute('external-input') === 'true';
-    }
-
-    constructor() {
-      super();
-
-      if (this.isExternalInput) {
-        const origInput = this.baseElement.querySelector('input');
-        this.inputSlot = document.createElement('slot');
-
-        this.focus = () => {
-          origInput.focus();
-        };
-
-        this.inputSlot.setAttribute('name', 'input');
-        this.inputSlot.setAttribute('slot', 'input');
-        this.baseElement.appendChild(this.inputSlot);
-
-        this.appendChild(origInput);
-      }
-    }
   };
 
 const TextFieldClass = compose(
@@ -3353,7 +3174,7 @@ const TextFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$9
 )(
@@ -3375,14 +3196,18 @@ const TextFieldClass = compose(
 
       vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
         opacity: 0;
-      }        
+      }
       vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
         opacity: 0;
-      }        
+      }
       ${resetInputLabelPosition('vaadin-text-field')}
 			${useHostExternalPadding(TextFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
       ${inputFloatingLabelStyle()}
+
+      vaadin-text-field vaadin-icon {
+        align-self: center;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$F,
@@ -3618,106 +3443,6 @@ const componentName$D = getComponentName('password');
 
 const customMixin$7 = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
-    init() {
-      super.init?.();
-
-      // reset vaadin's checkValidity
-      this.baseElement.checkValidity = () => {};
-      // set safety attribute `external-input`
-      this.setAttribute('external-input', 'true');
-
-      // use original input element as reference
-      const origInput = this.baseElement.querySelector('input');
-
-      // to avoid focus loop between external-input and origInput
-      // we set origInput's tabindex to -1
-      // otherwise, shift-tab will never leave the component focus
-      origInput.setAttribute('tabindex', '-1');
-
-      // create external slot
-      const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
-      // append external slot to base element
-      this.baseElement.appendChild(externalInputSlot);
-
-      // create external input
-      const externalInput = createExternalInputEle(
-        'external-input',
-        'password',
-        this.getAutocompleteType()
-      );
-
-      this.handlePasswordVisibility(externalInput);
-
-      // apply original input's styles to external input
-      setTimeout(() => {
-        applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
-      });
-
-      // set external input events
-      this.handleExternalInputEvents(externalInput);
-
-      // sync input stateful attributes: `type` (for visibility state change) and `readonly`
-      syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
-      syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
-
-      origInput.addEventListener('focus', (e) => {
-        e.preventDefault();
-        if (e.isTrusted) {
-          externalInput.focus();
-        }
-      });
-
-      externalInput.addEventListener('input', (e) => {
-        if (!e.target.value) {
-          this.removeAttribute('has-value');
-        } else {
-          this.setAttribute('has-value', 'true');
-        }
-      });
-
-      // append external input to component's DOM
-      this.appendChild(externalInput);
-    }
-
-    // override vaadin's password visibility toggle.
-    // we need this override in order to to resolve the external input `focus` race condition,
-    // which is caused due to the focus sync between the two inputs.
-    handlePasswordVisibility(externalInput) {
-      // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
-      const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
-      this.baseElement
-        .querySelector('vaadin-password-field-button')
-        .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
-
-      // disable vaadin's `_passwordVisibleChanged` observer
-      this.baseElement._passwordVisibleChanged = () => {};
-
-      // override vaadin's `_togglePasswordVisibility`
-      this.baseElement._togglePasswordVisibility = () => {
-        const currVisibility = externalInput.getAttribute('type');
-        if (currVisibility === 'password') {
-          this.showPasswordVisibility(externalInput);
-        } else {
-          this.hidePasswordVisibility(externalInput);
-        }
-      };
-
-      // on component blur, if password is revealed - hide it
-      // this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
-      // (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
-      // and then focusing in the input again
-      this.addEventListener('blur', () => {
-        setTimeout(() => {
-          const isHiddenAndFocused =
-            externalInput.getAttribute('type') !== 'password' &&
-            externalInput.getAttribute('focused') !== 'true';
-          if (isHiddenAndFocused) {
-            this.hidePasswordVisibility(externalInput);
-          }
-        });
-      });
-    }
-
     hidePasswordVisibility(input) {
       // handle input element's type
       input.setAttribute('type', 'password');
@@ -3735,22 +3460,6 @@ const customMixin$7 = (superclass) =>
     getAutocompleteType() {
       return this.getAttribute('autocomplete') || 'current-password';
     }
-
-    handleExternalInputEvents(inputEle) {
-      // sync value of insible input back to original input
-      inputEle.addEventListener('input', (e) => {
-        this.value = e.target.value;
-      });
-
-      // sync `focused` attribute on host when focusing on external input
-      inputEle.addEventListener('focus', () => {
-        this.setAttribute('focused', 'true');
-      });
-
-      inputEle.addEventListener('blur', () => {
-        this.removeAttribute('focused');
-      });
-    }
   };
 
 const {
@@ -3909,10 +3618,6 @@ const PasswordClass = compose(
       ::part(reveal-button) {
         align-self: center;
       }
-
-      vaadin-password-field > input:not(:placeholder-shown) {
-        opacity: 0;
-      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$D,
@@ -5948,7 +5653,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
       ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
       </descope-combo-box>
       <div class="separator"></div>
-      <descope-text-field type="tel" external-input="true"></descope-text-field>
+      <descope-text-field type="tel"></descope-text-field>
     </div>
     `;
 
@@ -5959,9 +5664,6 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
     forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });
     forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type'] });
 
-    const externalInput = this.phoneNumberInput.querySelector('input');
-    syncAttrs(this.phoneNumberInput, externalInput, { includeAttrs: ['focused'] });
-
     // override combo box setter to display dialCode value in input
     this.countryCodeInput.customValueTransformFn = (val) => {
       const [, dialCode] = val?.split?.(' ') || [];
@@ -6206,7 +5908,6 @@ const {
   inputField: inputField$2,
   countryCodeInput,
   phoneInput: phoneInput$1,
-  phoneExternalInput,
   separator: separator$1,
   errorMessage: errorMessage$5,
   helperText: helperText$4,
@@ -6216,7 +5917,6 @@ const {
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   inputField: { selector: '::part(input-field)' },
   phoneInput: { selector: () => 'descope-text-field' },
-  phoneExternalInput: { selector: () => '::slotted(input)' },
   countryCodeInput: { selector: () => 'descope-combo-box' },
   separator: { selector: 'descope-phone-field-internal .separator' },
   helperText: { selector: '::part(helper-text)' },
@@ -6306,17 +6006,10 @@ const PhoneFieldClass = compose(
       inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
       inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
 
-      valueInputHeight: [
-        { ...phoneExternalInput, property: textVars$1.valueInputHeight },
-        { ...countryCodeInput, property: comboVars.valueInputHeight },
-      ],
-      valueInputMarginBottom: [
-        { ...phoneInput$1, property: textVars$1.valueInputMarginBottom },
-        { ...phoneExternalInput, property: 'margin-bottom' },
-      ],
+      valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],
+      valueInputMarginBottom: [{ ...phoneInput$1, property: textVars$1.valueInputMarginBottom }],
       marginInlineStart: [
         { ...phoneInput$1, property: textVars$1.marginInlineStart },
-        { ...phoneExternalInput, property: 'margin-inline-start' },
         { ...countryCodeInput, property: comboVars.marginInlineStart },
       ],
     },
@@ -6446,7 +6139,7 @@ class PhoneFieldInternal extends BaseInputClass$5 {
 
     this.innerHTML = `
       <div>
-        <descope-text-field tabindex="1" external-input="true"></descope-text-field>
+        <descope-text-field tabindex="1"></descope-text-field>
       </div>
       `;
 
@@ -7023,20 +6716,10 @@ const customMixin$4 = (superclass) =>
       </${componentName$u}>
 			`;
 
-      this.setAttribute('external-input', 'true');
-
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(componentName$u);
 
-      // get descope input components
-      this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
-      this.confirmInput = this.inputElement.querySelector('[data-id="confirm"]');
-
-      // create slots for external password input
-      this.createExternalInput(this.passwordInput, 'external-password-input');
-      this.createExternalInput(this.confirmInput, 'external-confirm-input');
-
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
           'password-label',
@@ -7060,20 +6743,6 @@ const customMixin$4 = (superclass) =>
         ],
       });
     }
-
-    createExternalInput(node, slotName) {
-      const externalInput = node.querySelector('input');
-      const slotEle = document.createElement('slot');
-      const targetSlot = externalInput.getAttribute('slot');
-      slotEle.setAttribute('name', slotName);
-      slotEle.setAttribute('slot', targetSlot);
-      node.appendChild(slotEle);
-
-      // move external input
-      externalInput.setAttribute('slot', slotName);
-      externalInput.setAttribute('data-hidden-input', 'true');
-      this.appendChild(externalInput);
-    }
   };
 
 const {
@@ -12171,15 +11840,15 @@ const globals = {
 };
 const vars$J = getThemeVars(globals);
 
-const globalRefs$r = getThemeRefs(globals);
+const globalRefs$s = getThemeRefs(globals);
 const compVars$5 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$r.colors.primary,
-  secondary: globalRefs$r.colors.secondary,
-  success: globalRefs$r.colors.success,
-  error: globalRefs$r.colors.error,
-  surface: globalRefs$r.colors.surface,
+  primary: globalRefs$s.colors.primary,
+  secondary: globalRefs$s.colors.secondary,
+  success: globalRefs$s.colors.success,
+  error: globalRefs$s.colors.error,
+  surface: globalRefs$s.colors.surface,
 };
 
 const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$V);
@@ -12187,15 +11856,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
 const button = {
   ...helperTheme$3,
 
-  [compVars$5.fontFamily]: globalRefs$r.fonts.font1.family,
+  [compVars$5.fontFamily]: globalRefs$s.fonts.font1.family,
 
   [compVars$5.cursor]: 'pointer',
   [compVars$5.hostHeight]: '3em',
   [compVars$5.hostWidth]: 'auto',
-  [compVars$5.hostDirection]: globalRefs$r.direction,
+  [compVars$5.hostDirection]: globalRefs$s.direction,
 
-  [compVars$5.borderRadius]: globalRefs$r.radius.sm,
-  [compVars$5.borderWidth]: globalRefs$r.border.xs,
+  [compVars$5.borderRadius]: globalRefs$s.radius.sm,
+  [compVars$5.borderWidth]: globalRefs$s.border.xs,
   [compVars$5.borderStyle]: 'solid',
   [compVars$5.borderColor]: 'transparent',
 
@@ -12239,11 +11908,11 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$r.colors.surface.light,
-    [helperVars$3.dark]: globalRefs$r.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$r.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$r.colors.surface.main,
-    [compVars$5.iconColor]: globalRefs$r.colors.surface.main,
+    [helperVars$3.main]: globalRefs$s.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$s.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$s.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$s.colors.surface.main,
+    [compVars$5.iconColor]: globalRefs$s.colors.surface.main,
   },
 
   variant: {
@@ -12304,40 +11973,41 @@ var button$1 = /*#__PURE__*/Object.freeze({
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$q = getThemeRefs(globals);
+const globalRefs$r = getThemeRefs(globals);
 
 const [theme$1, refs, vars$H] = createHelperVars(
   {
-    labelTextColor: globalRefs$q.colors.surface.dark,
+    labelTextColor: globalRefs$r.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
     labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
-    valueTextColor: globalRefs$q.colors.surface.contrast,
-    placeholderTextColor: globalRefs$q.colors.surface.dark,
+    valueTextColor: globalRefs$r.colors.surface.contrast,
+    placeholderTextColor: globalRefs$r.colors.surface.dark,
     requiredIndicator: "'*'",
-    helperTextColor: globalRefs$q.colors.surface.dark,
-    errorMessageTextColor: globalRefs$q.colors.error.main,
-    successMessageTextColor: globalRefs$q.colors.success.main,
+    helperTextColor: globalRefs$r.colors.surface.dark,
+    errorMessageTextColor: globalRefs$r.colors.error.main,
+    successMessageTextColor: globalRefs$r.colors.success.main,
 
-    borderWidth: globalRefs$q.border.xs,
-    borderRadius: globalRefs$q.radius.xs,
+    borderWidth: globalRefs$r.border.xs,
+    borderRadius: globalRefs$r.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$q.border.sm,
+    outlineWidth: globalRefs$r.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
 
     minWidth: '10em',
     toggleButtonSize: '1.5em',
+    inputIconSize: '1em',
     inputHeight: '3em',
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$q.colors.surface.main,
+    backgroundColor: globalRefs$r.colors.surface.main,
 
-    fontFamily: globalRefs$q.fonts.font1.family,
+    fontFamily: globalRefs$r.fonts.font1.family,
 
-    direction: globalRefs$q.direction,
+    direction: globalRefs$r.direction,
 
     overlayOpacity: '0.3',
 
@@ -12387,28 +12057,28 @@ const [theme$1, refs, vars$H] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$q.colors.surface.light,
+      outlineColor: globalRefs$r.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$q.colors.error.main,
+        outlineColor: globalRefs$r.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$q.border.xs,
-      borderColor: globalRefs$q.colors.surface.light,
+      outlineWidth: globalRefs$r.border.xs,
+      borderColor: globalRefs$r.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$q.colors.error.main,
+        borderColor: globalRefs$r.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$q.colors.surface.light,
-      borderColor: globalRefs$q.colors.surface.light,
-      valueTextColor: globalRefs$q.colors.surface.light,
-      placeholderTextColor: globalRefs$q.colors.surface.light,
-      helperTextColor: globalRefs$q.colors.surface.light,
-      backgroundColor: globalRefs$q.colors.surface.main,
+      labelTextColor: globalRefs$r.colors.surface.light,
+      borderColor: globalRefs$r.colors.surface.light,
+      valueTextColor: globalRefs$r.colors.surface.light,
+      placeholderTextColor: globalRefs$r.colors.surface.light,
+      helperTextColor: globalRefs$r.colors.surface.light,
+      backgroundColor: globalRefs$r.colors.surface.main,
     },
   },
   componentName
@@ -12421,6 +12091,7 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   vars: vars$H
 });
 
+const globalRefs$q = getThemeRefs(globals);
 const vars$G = TextFieldClass.cssVarList;
 
 const textField = {
@@ -12453,21 +12124,19 @@ const textField = {
     left: { [vars$G.inputTextAlign]: 'left' },
     center: { [vars$G.inputTextAlign]: 'center' },
   },
-
-  labelType: {
-    floating: {
-      [vars$G.labelPosition]: refs.labelPosition,
-      [vars$G.labelTopPosition]: refs.labelTopPosition,
-      [vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars$G.inputTransformY]: refs.inputTransformY,
-      [vars$G.inputTransition]: refs.inputTransition,
-      [vars$G.marginInlineStart]: refs.marginInlineStart,
-      [vars$G.placeholderOpacity]: refs.placeholderOpacity,
-      [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars$G.valueInputHeight]: refs.valueInputHeight,
-      [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
-    },
-  },
+  [vars$G.labelPosition]: refs.labelPosition,
+  [vars$G.labelTopPosition]: refs.labelTopPosition,
+  [vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$G.inputTransformY]: refs.inputTransformY,
+  [vars$G.inputTransition]: refs.inputTransition,
+  [vars$G.marginInlineStart]: refs.marginInlineStart,
+  [vars$G.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$G.valueInputHeight]: refs.valueInputHeight,
+  [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$G.inputIconOffset]: globalRefs$q.spacing.md,
+  [vars$G.inputIconSize]: refs.inputIconSize,
+  [vars$G.inputIconColor]: refs.placeholderTextColor,
 };
 
 var textField$1 = /*#__PURE__*/Object.freeze({
@@ -12507,20 +12176,15 @@ const password = {
   [vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
   [vars$F.revealButtonSize]: refs.toggleButtonSize,
   [vars$F.revealButtonColor]: refs.placeholderTextColor,
-
-  labelType: {
-    floating: {
-      [vars$F.labelPosition]: refs.labelPosition,
-      [vars$F.labelTopPosition]: refs.labelTopPosition,
-      [vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars$F.inputTransformY]: refs.inputTransformY,
-      [vars$F.inputTransition]: refs.inputTransition,
-      [vars$F.marginInlineStart]: refs.marginInlineStart,
-      [vars$F.placeholderOpacity]: refs.placeholderOpacity,
-      [vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars$F.valueInputHeight]: refs.valueInputHeight,
-    },
-  },
+  [vars$F.labelPosition]: refs.labelPosition,
+  [vars$F.labelTopPosition]: refs.labelTopPosition,
+  [vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$F.inputTransformY]: refs.inputTransformY,
+  [vars$F.inputTransition]: refs.inputTransition,
+  [vars$F.marginInlineStart]: refs.marginInlineStart,
+  [vars$F.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$F.valueInputHeight]: refs.valueInputHeight,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
@@ -12555,21 +12219,16 @@ const numberField = {
   [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$E.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$E.inputHeight]: refs.inputHeight,
-
-  labelType: {
-    floating: {
-      [vars$E.labelPosition]: refs.labelPosition,
-      [vars$E.labelTopPosition]: refs.labelTopPosition,
-      [vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars$E.inputTransformY]: refs.inputTransformY,
-      [vars$E.inputTransition]: refs.inputTransition,
-      [vars$E.marginInlineStart]: refs.marginInlineStart,
-      [vars$E.placeholderOpacity]: refs.placeholderOpacity,
-      [vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars$E.valueInputHeight]: refs.valueInputHeight,
-      [vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
-    },
-  },
+  [vars$E.labelPosition]: refs.labelPosition,
+  [vars$E.labelTopPosition]: refs.labelTopPosition,
+  [vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$E.inputTransformY]: refs.inputTransformY,
+  [vars$E.inputTransition]: refs.inputTransition,
+  [vars$E.marginInlineStart]: refs.marginInlineStart,
+  [vars$E.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$E.valueInputHeight]: refs.valueInputHeight,
+  [vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
@@ -12604,21 +12263,16 @@ const emailField = {
   [vars$D.inputBackgroundColor]: refs.backgroundColor,
   [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$D.inputHeight]: refs.inputHeight,
-
-  labelType: {
-    floating: {
-      [vars$D.labelPosition]: refs.labelPosition,
-      [vars$D.labelTopPosition]: refs.labelTopPosition,
-      [vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars$D.inputTransformY]: refs.inputTransformY,
-      [vars$D.inputTransition]: refs.inputTransition,
-      [vars$D.marginInlineStart]: refs.marginInlineStart,
-      [vars$D.placeholderOpacity]: refs.placeholderOpacity,
-      [vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars$D.valueInputHeight]: refs.valueInputHeight,
-      [vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
-    },
-  },
+  [vars$D.labelPosition]: refs.labelPosition,
+  [vars$D.labelTopPosition]: refs.labelTopPosition,
+  [vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$D.inputTransformY]: refs.inputTransformY,
+  [vars$D.inputTransition]: refs.inputTransition,
+  [vars$D.marginInlineStart]: refs.marginInlineStart,
+  [vars$D.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$D.valueInputHeight]: refs.valueInputHeight,
+  [vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
@@ -13369,21 +13023,16 @@ const comboBox = {
   [vars$o.inputDropdownButtonOffset]: globalRefs$g.spacing.xs,
   [vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
   [vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
-
-  labelType: {
-    floating: {
-      [vars$o.labelPosition]: refs.labelPosition,
-      [vars$o.labelTopPosition]: refs.labelTopPosition,
-      [vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars$o.inputTransformY]: refs.inputTransformY,
-      [vars$o.inputTransition]: refs.inputTransition,
-      [vars$o.marginInlineStart]: refs.marginInlineStart,
-      [vars$o.placeholderOpacity]: refs.placeholderOpacity,
-      [vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars$o.valueInputHeight]: refs.valueInputHeight,
-      [vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
-    },
-  },
+  [vars$o.labelPosition]: refs.labelPosition,
+  [vars$o.labelTopPosition]: refs.labelTopPosition,
+  [vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$o.inputTransformY]: refs.inputTransformY,
+  [vars$o.inputTransition]: refs.inputTransition,
+  [vars$o.marginInlineStart]: refs.marginInlineStart,
+  [vars$o.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars$o.valueInputHeight]: refs.valueInputHeight,
+  [vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
   _readonly: {
     [vars$o.inputDropdownButtonCursor]: 'default',
@@ -13442,14 +13091,9 @@ const phoneField = {
   [vars$m.phoneInputWidth]: refs.minWidth,
   [vars$m.countryCodeInputWidth]: '5em',
   [vars$m.countryCodeDropdownWidth]: '20em',
-
-  labelType: {
-    floating: {
-      [vars$m.marginInlineStart]: '-0.25em',
-      [vars$m.valueInputHeight]: '1.65em',
-      [vars$m.valueInputMarginBottom]: '0.25em',
-    },
-  },
+  [vars$m.marginInlineStart]: '-0.25em',
+  [vars$m.valueInputHeight]: refs.valueInputHeight,
+  [vars$m.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
@@ -13485,20 +13129,15 @@ const phoneInputBoxField = {
   [vars$l.inputOutlineWidth]: refs.outlineWidth,
   [vars$l.inputOutlineColor]: refs.outlineColor,
   [vars$l.inputOutlineOffset]: refs.outlineOffset,
-
-  labelType: {
-    floating: {
-      [vars$l.labelPosition]: refs.labelPosition,
-      [vars$l.labelTopPosition]: refs.labelTopPosition,
-      [vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars$l.inputTransformY]: refs.inputTransformY,
-      [vars$l.inputTransition]: refs.inputTransition,
-      [vars$l.marginInlineStart]: refs.marginInlineStart,
-      [vars$l.valueInputHeight]: refs.valueInputHeight,
-      [vars$l.valueInputMarginBottom]: '0.25em',
-      [vars$l.inputHorizontalPadding]: '0',
-    },
-  },
+  [vars$l.labelPosition]: refs.labelPosition,
+  [vars$l.labelTopPosition]: refs.labelTopPosition,
+  [vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$l.inputTransformY]: refs.inputTransformY,
+  [vars$l.inputTransition]: refs.inputTransition,
+  [vars$l.marginInlineStart]: refs.marginInlineStart,
+  [vars$l.valueInputHeight]: refs.valueInputHeight,
+  [vars$l.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$l.inputHorizontalPadding]: '0',
 
   _fullWidth: {
     [vars$l.hostWidth]: refs.width,
@@ -13527,12 +13166,7 @@ const newPassword = {
   [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$k.policyPreviewBackgroundColor]: 'none',
   [vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
-
-  labelType: {
-    floating: {
-      [vars$k.valueInputHeight]: refs.valueInputHeight,
-    },
-  },
+  [vars$k.valueInputHeight]: refs.valueInputHeight,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
@@ -13837,20 +13471,19 @@ const multiSelectComboBox = {
   [vars$c.chipFontSize]: refs.chipFontSize,
   [vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
   [vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
+  [vars$c.labelPosition]: refs.labelPosition,
+  [vars$c.labelTopPosition]: refs.labelTopPosition,
+  [vars$c.labelLeftPosition]: refs.labelLeftPosition,
+  [vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars$c.inputTransformY]: refs.inputTransformY,
+  [vars$c.inputTransition]: refs.inputTransition,
+  [vars$c.marginInlineStart]: refs.marginInlineStart,
+  [vars$c.placeholderOpacity]: refs.placeholderOpacity,
+  [vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
 
   labelType: {
     floating: {
-      [vars$c.labelPosition]: refs.labelPosition,
-      [vars$c.labelTopPosition]: refs.labelTopPosition,
-      [vars$c.labelLeftPosition]: refs.labelLeftPosition,
-      [vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars$c.inputTransformY]: refs.inputTransformY,
-      [vars$c.inputTransition]: refs.inputTransition,
-      [vars$c.marginInlineStart]: refs.marginInlineStart,
-      [vars$c.placeholderOpacity]: refs.placeholderOpacity,
-      [vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
       [vars$c.inputHorizontalPadding]: '0.25em',
-
       _hasValue: {
         [vars$c.inputHorizontalPadding]: '0.45em',
       },