@descope/web-components-ui 1.0.333 → 1.0.335

package/dist/index.esm.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,6 @@ const {
   errorMessage: errorMessage$a,
   disabledPlaceholder,
   inputDisabled,
-  externalInput,
-  externalInputDisabled,
-  externalPlaceholder,
-  externalDisabledPlaceholder,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -2514,10 +2507,6 @@ 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)' },
 };
 
 var textFieldMappings = {
@@ -2547,12 +2536,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 +2550,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 +2557,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 +2574,10 @@ 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' },
-  ],
-};
-
-// 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');
-  }
+  placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
+  inputVerticalAlignment: [{ ...inputField$6, property: 'align-items' }],
+  valueInputHeight: [{ ...input, property: 'height' }],
+  valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
 };
 
 const componentName$M = getComponentName('email-field');
@@ -2700,103 +2589,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 +2602,7 @@ const EmailFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$a
 )(
@@ -2832,10 +2630,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;
       }
@@ -3321,31 +3115,6 @@ const customMixin$9 = (superclass) =>
         }
       }
     }
-
-    // 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 +3122,7 @@ const TextFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$9
 )(
@@ -3618,106 +3387,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 +3404,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 +3562,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 +5597,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 +5608,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 +5852,6 @@ const {
   inputField: inputField$2,
   countryCodeInput,
   phoneInput: phoneInput$1,
-  phoneExternalInput,
   separator: separator$1,
   errorMessage: errorMessage$5,
   helperText: helperText$4,
@@ -6216,7 +5861,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 +5950,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 +6083,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 +6660,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 +6687,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 {
@@ -8856,6 +8469,7 @@ const GridClass = compose(
         { ...rowSeparator, property: 'border-top-color' },
       ],
       resizeHandleColor: { ...resizeHandle, property: 'background-color' },
+      hostDirection: { ...host$6, property: 'direction', fallback: 'ltr' },
     },
   }),
   draggableMixin,
@@ -12452,21 +12066,16 @@ 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,
 };
 
 var textField$1 = /*#__PURE__*/Object.freeze({
@@ -12506,20 +12115,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({
@@ -12554,21 +12158,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({
@@ -12603,21 +12202,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({
@@ -13368,21 +12962,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',
@@ -13441,14 +13030,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'
@@ -13484,20 +13068,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,
@@ -13526,12 +13105,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.
@@ -13732,6 +13306,7 @@ const grid = {
 
   [vars$e.valueTextColor]: globalRefs$b.colors.surface.contrast,
   [vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
+  [vars$e.hostDirection]: globalRefs$b.direction,
 
   _bordered: {
     [vars$e.borderColor]: refs.borderColor,
@@ -13835,20 +13410,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',
       },