@descope/web-components-ui 1.0.322 → 1.0.323

package/dist/index.esm.js

@@ -1817,6 +1817,21 @@ 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;
+  }
+  `;
+};
+
 var commonStyles = `
 :host {
 	display: inline-flex;
@@ -2473,7 +2488,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' },
@@ -2491,11 +2509,8 @@ var textFieldMappings = {
   fontSize: [{}, host$i],
   fontFamily: [label$9, inputField$6, helperText$8, errorMessage$a],
 
-  hostWidth: { ...host$i, property: 'width' },
-  hostMinWidth: { ...host$i, property: 'min-width' },
-  hostDirection: { ...host$i, 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' },
@@ -2503,6 +2518,13 @@ var textFieldMappings = {
     { ...label$9, property: '-webkit-text-fill-color' },
     { ...requiredIndicator$9, property: '-webkit-text-fill-color' },
   ],
+
+  hostWidth: { ...host$i, property: 'width' },
+  hostMinWidth: { ...host$i, property: 'min-width' },
+  hostDirection: { ...host$i, property: 'direction' },
+
+  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
+
   errorMessageTextColor: { ...errorMessage$a, property: 'color' },
   helperTextColor: { ...helperText$8, property: '-webkit-text-fill-color' },
 
@@ -2542,11 +2564,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' },
+  ],
 };
 
 // since on load we can only sample the color of the placeholder,
@@ -2704,6 +2753,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,
@@ -2886,6 +2943,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$H,
@@ -3144,7 +3209,7 @@ class PasscodeInternal extends BaseInputClass$7 {
 
 const componentName$F = getComponentName('text-field');
 
-const observedAttrs = ['type'];
+const observedAttrs = ['type', 'label-type'];
 
 const customMixin$9 = (superclass) =>
   class TextFieldClass extends superclass {
@@ -3152,6 +3217,10 @@ const customMixin$9 = (superclass) =>
       return observedAttrs.concat(superclass.observedAttributes || []);
     }
 
+    onLabelClick() {
+      this.focus();
+    }
+
     attributeChangedCallback(attrName, oldVal, newVal) {
       super.attributeChangeCallback?.(attrName, oldVal, newVal);
 
@@ -3163,6 +3232,16 @@ const customMixin$9 = (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
@@ -3215,9 +3294,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$F,
@@ -3585,7 +3672,7 @@ const customMixin$7 = (superclass) =>
 const {
   host: host$f,
   inputField: inputField$5,
-  inputElement: inputElement$2,
+  inputElement: inputElement$3,
   inputElementPlaceholder,
   revealButtonContainer,
   revealButtonIcon,
@@ -3616,8 +3703,8 @@ const PasswordClass = compose(
       fontFamily: [label$7, inputField$5, errorMessage$8, helperText$7],
       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' },
 
@@ -3631,6 +3718,8 @@ const PasswordClass = compose(
       inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
       inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
 
+      labelFontSize: { ...label$7, property: 'font-size' },
+      labelFontWeight: { ...label$7, property: 'font-weight' },
       labelTextColor: [
         { ...label$7, property: 'color' },
         { ...requiredIndicator$7, property: 'color' },
@@ -3643,7 +3732,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' },
       ],
 
@@ -3653,6 +3742,22 @@ const PasswordClass = compose(
       ],
       revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
       revealButtonColor: { ...revealButtonIcon, property: 'color' },
+
+      labelPosition: { ...label$7, property: 'position' },
+      labelTopPosition: { ...label$7, property: 'top' },
+      labelHorizontalPosition: [
+        { ...label$7, property: 'left' },
+        { ...label$7, property: 'right' },
+      ],
+      inputTransformY: { ...label$7, property: 'transform' },
+      inputTransition: { ...label$7, property: 'transition' },
+      marginInlineStart: { ...label$7, 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,
@@ -3714,6 +3819,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$D,
@@ -4033,6 +4149,10 @@ const componentName$z = 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>`;
@@ -4233,6 +4353,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;
     }
@@ -4257,7 +4399,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,
@@ -4286,6 +4428,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' },
@@ -4321,10 +4465,24 @@ 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
       // for that to work, because ComboBox is not available
@@ -4405,7 +4563,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,
@@ -5662,15 +5834,18 @@ const comboBoxItem = ({ code, dialCode, name: country }) => `
 
 const componentName$y = getComponentName('phone-field-internal');
 
-const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
+const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly', 'label-type'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
 const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
+const labelTypeAttrs = ['country-input-label', 'phone-input-label'];
 const mapAttrs$1 = {
+  'country-input-label': 'label',
+  'phone-input-label': 'label',
   'country-input-placeholder': 'placeholder',
   'phone-input-placeholder': 'placeholder',
 };
 
-const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
+const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs, labelTypeAttrs);
 
 const BaseInputClass$6 = createBaseInputClass({ componentName: componentName$y, baseSelector: 'div' });
 
@@ -5699,6 +5874,12 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
     this.phoneNumberInput = this.querySelector('descope-text-field');
     this.inputs = [this.countryCodeInput, this.phoneNumberInput];
 
+    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?.(' ') || [];
@@ -5835,6 +6016,13 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
           this.countryCodeInput.setAttribute(attr, newValue);
         } else if (phoneAttrs.includes(attrName)) {
           this.phoneNumberInput.setAttribute(attr, newValue);
+        } else if (labelTypeAttrs.includes(attrName)) {
+          if (attrName === 'country-input-label') {
+            this.countryCodeInput.setAttribute(attr, newValue);
+          }
+          if (attrName === 'phone-input-label') {
+            this.phoneNumberInput.setAttribute(attr, newValue);
+          }
         }
       }
       if (attrName === 'restrict-countries') {
@@ -5885,6 +6073,10 @@ const customMixin$6 = (superclass) =>
           'phone-input-placeholder',
           'disabled',
           'restrict-countries',
+          'label-type',
+          'country-input-label',
+          'phone-input-label',
+          'readonly',
         ],
       });
     }
@@ -5897,6 +6089,7 @@ const {
   inputField: inputField$2,
   countryCodeInput,
   phoneInput: phoneInput$1,
+  phoneExternalInput,
   separator: separator$1,
   errorMessage: errorMessage$5,
   helperText: helperText$4,
@@ -5906,6 +6099,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)' },
@@ -5964,6 +6158,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' },
@@ -5987,6 +6188,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,
@@ -6057,10 +6272,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;
 			}
@@ -6088,6 +6308,7 @@ const observedAttributes$2 = [
   'phone-input-placeholder',
   'name',
   'autocomplete',
+  'label-type',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
@@ -6270,14 +6491,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' },
@@ -6306,6 +6539,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' },
@@ -6321,6 +6561,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,
@@ -6388,7 +6643,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$v,
@@ -6671,6 +6935,7 @@ const customMixin$4 = (superclass) =>
           'active-policies',
           'available-policies',
           'data-password-policy-value-minlength',
+          'label-type',
         ],
       });
     }
@@ -6734,6 +6999,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,
@@ -6822,6 +7093,7 @@ const commonAttrs = [
   'readonly',
   'draggable',
   'autocomplete',
+  'label-type',
 ];
 
 const inputRelatedAttrs = [].concat(
@@ -8923,6 +9195,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' },
@@ -8973,6 +9247,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
@@ -9087,6 +9374,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,
@@ -11881,6 +12183,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: "'*'",
@@ -11918,6 +12221,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%',
     },
@@ -11965,6 +12302,8 @@ const textField = {
   [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,
@@ -11987,6 +12326,21 @@ 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,
+    },
+  },
 };
 
 var textField$1 = /*#__PURE__*/Object.freeze({
@@ -12001,9 +12355,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,
@@ -12023,6 +12380,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({
@@ -12039,6 +12410,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,
@@ -12055,6 +12428,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({
@@ -12071,6 +12459,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,
@@ -12087,6 +12477,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({
@@ -12813,6 +13218,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,
@@ -12836,6 +13243,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',
   },
@@ -12894,6 +13316,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'
   // }
@@ -12913,6 +13343,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,
@@ -12926,6 +13358,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,
   },
@@ -12946,11 +13393,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.
@@ -13225,6 +13682,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,
@@ -13252,6 +13711,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',
   },