@descope/web-components-ui 1.0.321 → 1.0.323

package/dist/cjs/index.cjs.js

@@ -2941,7 +2941,10 @@ const {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-  placeholder: { selector: '> input:placeholder-shown' },
+  placeholder: [
+    { selector: '> input:placeholder-shown' },
+    { selector: () => ':host::slotted(input:placeholder-shown)' },
+  ],
   disabledPlaceholder: { selector: '> input:disabled::placeholder' },
   inputField: { selector: '::part(input-field)' },
   input: { selector: 'input' },
@@ -2959,11 +2962,8 @@ var textFieldMappings = {
   fontSize: [{}, host$m],
   fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
 
-  hostWidth: { ...host$m, property: 'width' },
-  hostMinWidth: { ...host$m, property: 'min-width' },
-  hostDirection: { ...host$m, property: 'direction' },
-
-  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
+  labelFontSize: { ...label$9, property: 'font-size' },
+  labelFontWeight: { ...label$9, property: 'font-weight' },
 
   labelTextColor: [
     { ...label$9, property: 'color' },
@@ -2971,6 +2971,13 @@ var textFieldMappings = {
     { ...label$9, property: '-webkit-text-fill-color' },
     { ...requiredIndicator$b, property: '-webkit-text-fill-color' },
   ],
+
+  hostWidth: { ...host$m, property: 'width' },
+  hostMinWidth: { ...host$m, property: 'min-width' },
+  hostDirection: { ...host$m, property: 'direction' },
+
+  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
+
   errorMessageTextColor: { ...errorMessage$c, property: 'color' },
   helperTextColor: { ...helperText$a, property: '-webkit-text-fill-color' },
 
@@ -3010,11 +3017,38 @@ var textFieldMappings = {
   ],
 
   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' },
+  labelTopPosition: { ...label$9, property: 'top' },
+  labelHorizontalPosition: [
+    { ...label$9, property: 'left' },
+    { ...label$9, property: 'right' },
+  ],
+  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' },
+  ],
 };
 
 const useHostExternalPadding = (cssVarList) => `
@@ -3146,9 +3180,24 @@ const resetInputLabelPosition = (name) => `
     }
 `;
 
+const inputFloatingLabelStyle = () => {
+  return `
+  :host([label-type="floating"]) {
+    position: relative;
+  }
+  :host([label-type="floating"][has-label]) [slot="label"] {
+    padding: 0;
+  }
+  :host([label-type="floating"][has-label]) > ::part(label) {
+    z-index: 1;
+    padding: 0;
+  }
+  `;
+};
+
 const componentName$Q = getComponentName('text-field');
 
-const observedAttrs = ['type'];
+const observedAttrs = ['type', 'label-type'];
 
 const customMixin$a = (superclass) =>
   class TextFieldClass extends superclass {
@@ -3156,6 +3205,10 @@ const customMixin$a = (superclass) =>
       return observedAttrs.concat(superclass.observedAttributes || []);
     }
 
+    onLabelClick() {
+      this.focus();
+    }
+
     attributeChangedCallback(attrName, oldVal, newVal) {
       super.attributeChangeCallback?.(attrName, oldVal, newVal);
 
@@ -3167,6 +3220,16 @@ const customMixin$a = (superclass) =>
       if (attrName === 'type') {
         this.baseElement._setType(newVal);
       }
+
+      if (oldVal !== newVal) {
+        if (attrName === 'label-type') {
+          if (newVal === 'floating') {
+            this.addEventListener('click', this.onLabelClick);
+          } else {
+            this.removeEventListener('click', this.onLabelClick);
+          }
+        }
+      }
     }
 
     // webauthn is not working when the native input element is nested inside multiple shadow roots
@@ -3219,9 +3282,17 @@ const TextFieldClass = compose(
       :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
         opacity: 1;
       }
+
+      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()}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$Q,
@@ -3235,6 +3306,7 @@ const [theme$1, refs, vars$H] = createHelperVars(
   {
     labelTextColor: globalRefs$q.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,
     requiredIndicator: "'*'",
@@ -3272,6 +3344,40 @@ const [theme$1, refs, vars$H] = createHelperVars(
       lg: { fontSize: '18px', chipFontSize: '16px' },
     },
 
+    labelType: {
+      floating: {
+        labelPosition: 'absolute',
+        labelTopPosition: '0',
+        labelHorizontalPosition: '0.9em',
+        labelFontSize: '1em',
+        placeholderOpacity: 0,
+        inputHeight: '3.5em',
+        inputVerticalAlignment: 'flex-end',
+        inputTransformY: 'translateY(1.55em)',
+        inputTransition: 'all 75ms ease-in-out',
+        marginInlineStart: '0', // `calc(0.25em + ${globalRefs.border.sm})`,
+        valueInputHeight: '1.5702em',
+        valueInputMarginBottom: '0.5em',
+
+        _focused: {
+          labelFontSize: '0.75em',
+          inputTransformY: 'translateY(1.05em)',
+          labelFontWeight: '400',
+          placeholderOpacity: 1,
+        },
+
+        _readOnly: {
+          placeholderOpacity: 0,
+        },
+
+        _hasValue: {
+          inputTransformY: 'translateY(1.05em)',
+          labelFontSize: '0.75em',
+          labelFontWeight: '400',
+        },
+      },
+    },
+
     _fullWidth: {
       width: '100%',
     },
@@ -3319,6 +3425,8 @@ const textField$1 = {
   [vars$G.hostDirection]: refs.direction,
   [vars$G.fontSize]: refs.fontSize,
   [vars$G.fontFamily]: refs.fontFamily,
+  [vars$G.labelFontSize]: refs.labelFontSize,
+  [vars$G.labelFontWeight]: refs.labelFontWeight,
   [vars$G.labelTextColor]: refs.labelTextColor,
   [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -3341,6 +3449,21 @@ const textField$1 = {
     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,
+    },
+  },
 };
 
 var textField$2 = /*#__PURE__*/Object.freeze({
@@ -3412,18 +3535,18 @@ const createExternalInputSlot = (slotName, targetSlotName) => {
   return slotEle;
 };
 
-const createExternalInputEle = (targetSlotName, autocompleteType) => {
+const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
   const inputEle = document.createElement('input');
 
   inputEle.setAttribute('slot', targetSlotName);
-  inputEle.setAttribute('type', 'password');
+  inputEle.setAttribute('type', type);
   inputEle.setAttribute('data-hidden-input', 'true');
   inputEle.setAttribute('autocomplete', autocompleteType);
 
   return inputEle;
 };
 
-const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
+const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) => {
   const computedStyle = getComputedStyle(sourceInputEle);
   const height = computedStyle.getPropertyValue('height');
   const paddingLeft = computedStyle.getPropertyValue('padding-left');
@@ -3439,7 +3562,6 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
   targetInputEle.style = `
   all: unset !important;
   position: absolute !important;
-  width: calc(100% - 3em) !important;
   background-color: transparent !important;
   color: ${valueColor} !important;
   height: ${height} !important;
@@ -3449,6 +3571,7 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
   font-family: ${fontFamily} !important;
   letter-spacing: ${letterSpacing} !important;
   caret-color: ${caretColor} !important;
+  ${customStyle || ''}
   `;
 };
 
@@ -3473,13 +3596,23 @@ const customMixin$9 = (superclass) =>
       this.baseElement.appendChild(externalInputSlot);
 
       // create external input
-      const externalInput = createExternalInputEle('external-input', this.getAutocompleteType());
+      const externalInput = createExternalInputEle(
+        'external-input',
+        'password',
+        this.getAutocompleteType()
+      );
 
       this.handlePasswordVisibility(externalInput);
 
       // apply original input's styles to external input
       setTimeout(() => {
-        applyExternalInputStyles(origInput, externalInput);
+        applyExternalInputStyles(
+          origInput,
+          externalInput,
+          `
+          width: calc(100% - 3em) !important;
+        `
+        );
       });
 
       // set external input events
@@ -3578,7 +3711,7 @@ const customMixin$9 = (superclass) =>
 const {
   host: host$l,
   inputField: inputField$5,
-  inputElement: inputElement$2,
+  inputElement: inputElement$3,
   inputElementPlaceholder,
   revealButtonContainer,
   revealButtonIcon,
@@ -3609,8 +3742,8 @@ const PasswordClass = compose(
       fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
       inputHeight: { ...inputField$5, property: 'height' },
       inputHorizontalPadding: [
-        { ...inputElement$2, property: 'padding-left' },
-        { ...inputElement$2, property: 'padding-right' },
+        { ...inputElement$3, property: 'padding-left' },
+        { ...inputElement$3, property: 'padding-right' },
       ],
       inputBackgroundColor: { ...inputField$5, property: 'background-color' },
 
@@ -3624,6 +3757,8 @@ const PasswordClass = compose(
       inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
       inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
 
+      labelFontSize: { ...label$8, property: 'font-size' },
+      labelFontWeight: { ...label$8, property: 'font-weight' },
       labelTextColor: [
         { ...label$8, property: 'color' },
         { ...requiredIndicator$a, property: 'color' },
@@ -3636,7 +3771,7 @@ const PasswordClass = compose(
         { selector: () => ':host ::slotted(input:placeholder-shown)', property: 'color' },
       ],
       inputValueTextColor: [
-        { ...inputElement$2, property: 'color' },
+        { ...inputElement$3, property: 'color' },
         { selector: () => ':host ::slotted(input)', property: 'color' },
       ],
 
@@ -3646,6 +3781,22 @@ const PasswordClass = compose(
       ],
       revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
       revealButtonColor: { ...revealButtonIcon, property: 'color' },
+
+      labelPosition: { ...label$8, property: 'position' },
+      labelTopPosition: { ...label$8, property: 'top' },
+      labelHorizontalPosition: [
+        { ...label$8, property: 'left' },
+        { ...label$8, property: 'right' },
+      ],
+      inputTransformY: { ...label$8, property: 'transform' },
+      inputTransition: { ...label$8, property: 'transition' },
+      marginInlineStart: { ...label$8, property: 'margin-inline-start' },
+      placeholderOpacity: [
+        { selector: '> input:placeholder-shown', property: 'opacity' },
+        { ...inputElement$3, property: 'opacity' },
+      ],
+      inputVerticalAlignment: { ...inputField$5, property: 'align-items' },
+      valueInputHeight: { ...inputElement$3, property: 'height' },
     },
   }),
   draggableMixin,
@@ -3707,6 +3858,17 @@ const PasswordClass = compose(
 			vaadin-password-field-button[focus-ring] {
 				box-shadow: 0 0 0 2px var(${PasswordClass.cssVarList.inputOutlineColor});
 			}
+
+      ${inputFloatingLabelStyle()}
+
+      :host ::slotted(input) {
+        display: none !important;
+      }
+    
+      ::part(reveal-button) {
+        align-self: center;
+      }      
+        
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$O,
@@ -3718,9 +3880,12 @@ const vars$F = PasswordClass.cssVarList;
 
 const password = {
   [vars$F.hostWidth]: refs.width,
+  [vars$F.hostMinWidth]: refs.minWidth,
   [vars$F.hostDirection]: refs.direction,
   [vars$F.fontSize]: refs.fontSize,
   [vars$F.fontFamily]: refs.fontFamily,
+  [vars$F.labelFontSize]: refs.labelFontSize,
+  [vars$F.labelFontWeight]: refs.labelFontWeight,
   [vars$F.labelTextColor]: refs.labelTextColor,
   [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$F.inputHorizontalPadding]: refs.horizontalPadding,
@@ -3740,6 +3905,20 @@ 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,
+    },
+  },
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
@@ -3772,6 +3951,14 @@ const NumberFieldClass = compose(
       ${resetInputLabelPosition('vaadin-number-field')}
 			${useHostExternalPadding(NumberFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
+      ${inputFloatingLabelStyle()}
+
+      vaadin-number-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+        opacity: 0;
+      }
+      vaadin-number-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+        opacity: 0;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$N,
@@ -3786,6 +3973,8 @@ const numberField = {
   [vars$E.hostDirection]: refs.direction,
   [vars$E.fontSize]: refs.fontSize,
   [vars$E.fontFamily]: refs.fontFamily,
+  [vars$E.labelFontSize]: refs.labelFontSize,
+  [vars$E.labelFontWeight]: refs.labelFontWeight,
   [vars$E.labelTextColor]: refs.labelTextColor,
   [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$E.inputValueTextColor]: refs.valueTextColor,
@@ -3802,6 +3991,21 @@ 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,
+    },
+  },
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
@@ -3816,9 +4020,68 @@ const customMixin$8 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
+
       this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
+
+      this.handleExternalInput();
+    }
+
+    handleExternalInput() {
+      // 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');
+
+      // 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);
+      });
+
+      // set external input events
+      this.handleExternalInputEvents(externalInput);
+
+      syncAttrs(origInput, externalInput, { includeAttrs: ['disabled', 'readonly', 'pattern'] });
+
+      // append external input to component's DOM
+      this.appendChild(externalInput);
+    }
+
+    getAutocompleteType() {
+      return this.getAttribute('autocomplete') || 'username';
+    }
+
+    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 EmailFieldClass = compose(
   createStyleMixin({
     mappings: textFieldMappings,
@@ -3843,6 +4106,14 @@ const EmailFieldClass = compose(
       ${resetInputLabelPosition('vaadin-email-field')}
 			${useHostExternalPadding(EmailFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
+      ${inputFloatingLabelStyle()}
+
+      vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+        opacity: 0;
+      }        
+      vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+        opacity: 0;
+      }        
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$M,
@@ -3857,6 +4128,8 @@ const emailField = {
   [vars$D.hostDirection]: refs.direction,
   [vars$D.fontSize]: refs.fontSize,
   [vars$D.fontFamily]: refs.fontFamily,
+  [vars$D.labelFontSize]: refs.labelFontSize,
+  [vars$D.labelFontWeight]: refs.labelFontWeight,
   [vars$D.labelTextColor]: refs.labelTextColor,
   [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$D.inputValueTextColor]: refs.valueTextColor,
@@ -3873,6 +4146,21 @@ 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,
+    },
+  },
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
@@ -5847,6 +6135,10 @@ const componentName$v = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
+    static get observedAttributes() {
+      return ['label-type'];
+    }
+
     // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ displayName, value, label }) => {
       return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
@@ -6047,6 +6339,28 @@ const ComboBoxMixin = (superclass) =>
       });
     }
 
+    onLabelClick() {
+      if (this.isReadOnly || this.isDisabled) {
+        return;
+      }
+      this.focus();
+      this.setAttribute('opened', 'true');
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (oldValue !== newValue) {
+        if (attrName === 'label-type') {
+          if (newValue === 'floating') {
+            this.addEventListener('click', this.onLabelClick);
+          } else {
+            this.removeEventListener('click', this.onLabelClick);
+          }
+        }
+      }
+    }
+
     setDefaultValue() {
       this.value = this.defaultValue;
     }
@@ -6071,7 +6385,7 @@ const ComboBoxMixin = (superclass) =>
 const {
   host: host$d,
   inputField: inputField$3,
-  inputElement: inputElement$1,
+  inputElement: inputElement$2,
   placeholder: placeholder$1,
   toggle: toggle$1,
   clearButton: clearButton$1,
@@ -6100,6 +6414,8 @@ const ComboBoxClass = compose(
       // we apply font-size also on the host so we can set its width with em
       fontSize: [{}, host$d],
       fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
+      labelFontSize: { ...label$5, property: 'font-size' },
+      labelFontWeight: { ...label$5, property: 'font-weight' },
       labelTextColor: [
         { ...label$5, property: 'color' },
         { ...requiredIndicator$5, property: 'color' },
@@ -6135,9 +6451,23 @@ const ComboBoxClass = compose(
       inputOutlineStyle: { ...inputField$3, property: 'outline-style' },
       inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
       inputHorizontalPadding: [
-        { ...inputElement$1, property: 'padding-left' },
-        { ...inputElement$1, property: 'padding-right' },
+        { ...inputElement$2, property: 'padding-left' },
+        { ...inputElement$2, property: 'padding-right' },
+      ],
+
+      labelPosition: { ...label$5, property: 'position' },
+      labelTopPosition: { ...label$5, property: 'top' },
+      labelHorizontalPosition: [
+        { ...label$5, property: 'left' },
+        { ...label$5, property: 'right' },
       ],
+      inputTransformY: { ...label$5, property: 'transform' },
+      inputTransition: { ...label$5, property: 'transition' },
+      marginInlineStart: { ...label$5, property: 'margin-inline-start' },
+      placeholderOpacity: { ...placeholder$1, property: 'opacity' },
+      inputVerticalAlignment: { ...inputField$3, property: 'align-items' },
+      valueInputHeight: { ...inputElement$2, property: 'height' },
+      valueInputMarginBottom: { ...inputElement$2, property: 'margin-bottom' },
 
       // we need to use the variables from the portal mixin
       // so we need to use an arrow function on the selector
@@ -6219,7 +6549,21 @@ const ComboBoxClass = compose(
 			padding: 0;
 			box-shadow: none;
 		}
+
+    vaadin-combo-box::part(toggle-button),
+    vaadin-combo-box::part(clear-button) {
+      align-self: center;
+    }
+
+    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+      opacity: 0;
+    }
+    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+      opacity: 0;
+    }
+  
     ${resetInputLabelPosition('vaadin-combo-box')}
+    ${inputFloatingLabelStyle()}
 		`,
     // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
     // with the same name. Including it will cause Vaadin to calculate NaN size,
@@ -6239,6 +6583,8 @@ const comboBox = {
   [vars$o.hostDirection]: refs.direction,
   [vars$o.fontSize]: refs.fontSize,
   [vars$o.fontFamily]: refs.fontFamily,
+  [vars$o.labelFontSize]: refs.labelFontSize,
+  [vars$o.labelFontWeight]: refs.labelFontWeight,
   [vars$o.labelTextColor]: refs.labelTextColor,
   [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$o.inputBorderColor]: refs.borderColor,
@@ -6262,6 +6608,21 @@ const comboBox = {
   [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,
+    },
+  },
+
   _readonly: {
     [vars$o.inputDropdownButtonCursor]: 'default',
   },
@@ -7599,6 +7960,10 @@ const customMixin$6 = (superclass) =>
           'phone-input-placeholder',
           'disabled',
           'restrict-countries',
+          'label-type',
+          'country-input-label',
+          'phone-input-label',
+          'readonly',
         ],
       });
     }
@@ -7611,6 +7976,7 @@ const {
   inputField: inputField$2,
   countryCodeInput,
   phoneInput: phoneInput$1,
+  phoneExternalInput,
   separator: separator$1,
   errorMessage: errorMessage$5,
   helperText: helperText$4,
@@ -7620,6 +7986,7 @@ 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)' },
@@ -7678,6 +8045,13 @@ const PhoneFieldClass = compose(
       },
       phoneInputWidth: { ...phoneInput$1, property: 'width' },
 
+      horizontalPadding: [
+        { ...phoneInput$1, property: 'padding-left' },
+        { ...phoneInput$1, property: 'padding-right' },
+        { ...countryCodeInput, property: 'padding-left' },
+        { ...countryCodeInput, property: 'padding-right' },
+      ],
+
       labelTextColor: [
         { ...label$4, property: 'color' },
         { ...requiredIndicator$4, property: 'color' },
@@ -7701,6 +8075,20 @@ const PhoneFieldClass = compose(
       inputOutlineColor: { ...inputField$2, property: 'outline-color' },
       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' },
+      ],
+      marginInlineStart: [
+        { ...phoneInput$1, property: textVars$1.marginInlineStart },
+        { ...phoneExternalInput, property: 'margin-inline-start' },
+        { ...countryCodeInput, property: comboVars.marginInlineStart },
+      ],
     },
   }),
   draggableMixin,
@@ -7771,10 +8159,15 @@ const PhoneFieldClass = compose(
 				${textVars$1.inputOutlineOffset}: 0;
 				${textVars$1.inputBorderWidth}: 0;
 				${textVars$1.inputBorderRadius}: 0;
-			}
-			vaadin-text-field[readonly] > input:placeholder-shown {
-				opacity: 1;
-			}
+      }
+
+      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+        opacity: 0;
+      }
+      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+        opacity: 0;
+      }
+
 			vaadin-text-field::part(input-field)::after {
 				border: none;
 			}
@@ -7809,6 +8202,14 @@ const phoneField = {
   [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',
+    },
+  },
+
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
   // }
@@ -7860,14 +8261,26 @@ const customMixin$5 = (superclass) =>
           'default-code',
           'disabled',
           'phone-input-placeholder',
+          'label-type',
         ],
       });
     }
   };
 
-const { host: host$b, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
+const {
+  host: host$b,
+  label: label$3,
+  inputElement: inputElement$1,
+  requiredIndicator: requiredIndicator$3,
+  inputField: inputField$1,
+  phoneInput,
+  errorMessage: errorMessage$4,
+  helperText: helperText$3,
+} = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
+  placeholder: { selector: '> input:placeholder-shown' },
+  inputElement: { selector: 'input' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   inputField: { selector: '::part(input-field)' },
   phoneInput: { selector: () => 'descope-text-field' },
@@ -7896,6 +8309,13 @@ const PhoneFieldInputBoxClass = compose(
       inputBorderColor: { ...inputField$1, property: 'border-color' },
       inputBorderRadius: { ...inputField$1, property: 'border-radius' },
 
+      inputHorizontalPadding: [
+        { ...phoneInput, property: 'padding-left' },
+        { ...phoneInput, property: 'padding-right' },
+      ],
+
+      labelFontSize: { ...label$3, property: 'font-size' },
+      labelFontWeight: { ...label$3, property: 'font-weight' },
       labelTextColor: [
         { ...label$3, property: 'color' },
         { ...requiredIndicator$3, property: 'color' },
@@ -7911,6 +8331,21 @@ const PhoneFieldInputBoxClass = compose(
       inputOutlineColor: { ...inputField$1, property: 'outline-color' },
       inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
       inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
+
+      labelPosition: { ...label$3, property: 'position' },
+      labelTopPosition: { ...label$3, property: 'top' },
+      labelHorizontalPosition: [
+        { ...label$3, property: 'left' },
+        { ...label$3, property: 'right' },
+      ],
+      inputTransformY: { ...label$3, property: 'transform' },
+      inputTransition: { ...label$3, property: 'transition' },
+      marginInlineStart: { ...label$3, property: 'margin-inline-start' },
+      valueInputHeight: { ...inputElement$1, property: 'height' },
+      valueInputMarginBottom: {
+        selector: TextFieldClass.componentName,
+        property: textVars.valueInputMarginBottom,
+      },
     },
   }),
   draggableMixin,
@@ -7978,7 +8413,16 @@ const PhoneFieldInputBoxClass = compose(
     vaadin-text-field::part(input-field)::after {
       border: none;
     }
+
+    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')}
+    ${inputFloatingLabelStyle()}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$q,
@@ -7993,6 +8437,8 @@ const phoneInputBoxField = {
   [vars$l.hostDirection]: refs.direction,
   [vars$l.fontSize]: refs.fontSize,
   [vars$l.fontFamily]: refs.fontFamily,
+  [vars$l.labelFontSize]: refs.labelFontSize,
+  [vars$l.labelFontWeight]: refs.labelFontWeight,
   [vars$l.labelTextColor]: refs.labelTextColor,
   [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -8006,6 +8452,21 @@ 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',
+    },
+  },
+
   _fullWidth: {
     [vars$l.hostWidth]: refs.width,
   },
@@ -8291,6 +8752,7 @@ const customMixin$4 = (superclass) =>
           'active-policies',
           'available-policies',
           'data-password-policy-value-minlength',
+          'label-type',
         ],
       });
     }
@@ -8354,6 +8816,12 @@ const NewPasswordClass = compose(
         property: policyPreviewVars.backgroundColor,
       },
       policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
+
+      valueInputHeight: { ...passwordInput, property: PasswordClass.cssVarList.valueInputHeight },
+      valueInputMarginBottom: {
+        ...passwordInput,
+        property: PasswordClass.cssVarList.valueInputMarginBottom,
+      },
     },
   }),
   draggableMixin,
@@ -8430,11 +8898,21 @@ const newPassword = {
   [vars$k.hostDirection]: refs.direction,
   [vars$k.fontSize]: refs.fontSize,
   [vars$k.fontFamily]: refs.fontFamily,
+  [vars$k.labelFontSize]: refs.labelFontSize,
+  [vars$k.labelFontWeight]: refs.labelFontWeight,
+  [vars$k.labelTextColor]: refs.labelTextColor,
   [vars$k.spaceBetweenInputs]: '1em',
   [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$k.policyPreviewBackgroundColor]: 'none',
   [vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
 
+  labelType: {
+    floating: {
+      [vars$k.inputHeight]: refs.inputHeight,
+      [vars$k.valueInputHeight]: refs.valueInputHeight,
+    },
+  },
+
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
@@ -10487,6 +10965,8 @@ const MultiSelectComboBoxClass = compose(
       fontSize: [{}, host$5],
       chipFontSize: { ...chipLabel, property: 'font-size' },
       fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...requiredIndicator, property: 'color' },
@@ -10537,6 +11017,19 @@ const MultiSelectComboBoxClass = compose(
         { ...overflowChipSecondBorder, property: 'border-color' },
       ],
 
+      labelPosition: { ...label, property: 'position' },
+      labelTopPosition: { ...label, property: 'top' },
+      labelLeftPosition: { ...label, property: 'left' },
+      labelHorizontalPosition: [
+        { ...label, property: 'left' },
+        { ...label, property: 'right' },
+      ],
+      inputTransformY: { ...label, property: 'transform' },
+      inputTransition: { ...label, property: 'transition' },
+      marginInlineStart: { ...label, property: 'margin-inline-start' },
+      placeholderOpacity: { ...placeholder, property: 'opacity' },
+      inputVerticalAlignment: { ...inputField, property: 'align-items' },
+
       // we need to use the variables from the portal mixin
       // so we need to use an arrow function on the selector
       // for that to work, because ComboBox is not available
@@ -10651,6 +11144,21 @@ const MultiSelectComboBoxClass = compose(
     :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
       display: none;
     }
+
+    ${inputFloatingLabelStyle()}
+
+    vaadin-multi-select-combo-box::part(toggle-button),
+    vaadin-multi-select-combo-box::part(clear-button) {
+      align-self: center;
+    }
+
+    vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+      opacity: 0;
+    }
+    vaadin-multi-select-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+      opacity: 0;
+    }
+
 		`,
     // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
     // with the same name. Including it will cause Vaadin to calculate NaN size,
@@ -10672,6 +11180,8 @@ const multiSelectComboBox = {
   [vars$c.hostDirection]: refs.direction,
   [vars$c.fontSize]: refs.fontSize,
   [vars$c.fontFamily]: refs.fontFamily,
+  [vars$c.labelFontSize]: refs.labelFontSize,
+  [vars$c.labelFontWeight]: refs.labelFontWeight,
   [vars$c.labelTextColor]: refs.labelTextColor,
   [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$c.inputBorderColor]: refs.borderColor,
@@ -10699,6 +11209,26 @@ const multiSelectComboBox = {
   [vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
   [vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
 
+  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.valueInputHeight]: refs.valueInputHeight,
+      [vars$c.inputHorizontalPadding]: '0.25em',
+
+      _hasValue: {
+        [vars$c.inputHorizontalPadding]: '0.45em',
+      },
+    },
+  },
+
   _readonly: {
     [vars$c.inputDropdownButtonCursor]: 'default',
   },