@descope/web-components-ui 1.0.321 → 1.0.323

package/src/components/descope-password/PasswordClass.js

@@ -12,12 +12,13 @@ import {
   resetInputLabelPosition,
   resetInputCursor,
   useHostExternalPadding,
+  inputFloatingLabelStyle,
 } from '../../helpers/themeHelpers/resetHelpers';
 import {
   applyExternalInputStyles,
   createExternalInputEle,
   createExternalInputSlot,
-} from './helpers';
+} from '../../helpers/externalInputs';
 
 export const componentName = getComponentName('password');
 
@@ -40,13 +41,23 @@ const customMixin = (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
@@ -191,6 +202,8 @@ export const PasswordClass = compose(
       inputOutlineOffset: { ...inputField, property: 'outline-offset' },
       inputOutlineWidth: { ...inputField, property: 'outline-width' },
 
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...requiredIndicator, property: 'color' },
@@ -213,6 +226,22 @@ export const PasswordClass = compose(
       ],
       revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
       revealButtonColor: { ...revealButtonIcon, property: 'color' },
+
+      labelPosition: { ...label, property: 'position' },
+      labelTopPosition: { ...label, property: 'top' },
+      labelHorizontalPosition: [
+        { ...label, property: 'left' },
+        { ...label, property: 'right' },
+      ],
+      inputTransformY: { ...label, property: 'transform' },
+      inputTransition: { ...label, property: 'transition' },
+      marginInlineStart: { ...label, property: 'margin-inline-start' },
+      placeholderOpacity: [
+        { selector: '> input:placeholder-shown', property: 'opacity' },
+        { ...inputElement, property: 'opacity' },
+      ],
+      inputVerticalAlignment: { ...inputField, property: 'align-items' },
+      valueInputHeight: { ...inputElement, property: 'height' },
     },
   }),
   draggableMixin,
@@ -274,6 +303,17 @@ export 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,

package/src/components/descope-text-field/TextFieldClass.js

@@ -9,6 +9,7 @@ import textFieldMappings from './textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import {
+  inputFloatingLabelStyle,
   resetInputLabelPosition,
   resetInputOverrides,
   useHostExternalPadding,
@@ -16,7 +17,7 @@ import {
 
 export const componentName = getComponentName('text-field');
 
-const observedAttrs = ['type'];
+const observedAttrs = ['type', 'label-type'];
 
 const customMixin = (superclass) =>
   class TextFieldClass extends superclass {
@@ -24,6 +25,10 @@ const customMixin = (superclass) =>
       return observedAttrs.concat(superclass.observedAttributes || []);
     }
 
+    onLabelClick() {
+      this.focus();
+    }
+
     attributeChangedCallback(attrName, oldVal, newVal) {
       super.attributeChangeCallback?.(attrName, oldVal, newVal);
 
@@ -35,6 +40,16 @@ const customMixin = (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
@@ -87,9 +102,17 @@ export 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,

package/src/components/descope-text-field/textFieldMappings.js

@@ -17,7 +17,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' },
@@ -35,11 +38,8 @@ export default {
   fontSize: [{}, host],
   fontFamily: [label, inputField, helperText, errorMessage],
 
-  hostWidth: { ...host, property: 'width' },
-  hostMinWidth: { ...host, property: 'min-width' },
-  hostDirection: { ...host, property: 'direction' },
-
-  inputBackgroundColor: { ...inputField, property: 'background-color' },
+  labelFontSize: { ...label, property: 'font-size' },
+  labelFontWeight: { ...label, property: 'font-weight' },
 
   labelTextColor: [
     { ...label, property: 'color' },
@@ -47,6 +47,13 @@ export default {
     { ...label, property: '-webkit-text-fill-color' },
     { ...requiredIndicator, property: '-webkit-text-fill-color' },
   ],
+
+  hostWidth: { ...host, property: 'width' },
+  hostMinWidth: { ...host, property: 'min-width' },
+  hostDirection: { ...host, property: 'direction' },
+
+  inputBackgroundColor: { ...inputField, property: 'background-color' },
+
   errorMessageTextColor: { ...errorMessage, property: 'color' },
   helperTextColor: { ...helperText, property: '-webkit-text-fill-color' },
 
@@ -86,9 +93,36 @@ export default {
   ],
 
   inputPlaceholderColor: [
+    { selector: () => ':host input:placeholder-shown', property: 'color' },
     { ...placeholder, property: 'color' },
     { ...externalPlaceholder, property: 'color' },
     { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
     { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
   ],
+
+  labelPosition: { ...label, property: 'position' },
+  labelTopPosition: { ...label, property: 'top' },
+  labelHorizontalPosition: [
+    { ...label, property: 'left' },
+    { ...label, property: 'right' },
+  ],
+  inputTransformY: { ...label, property: 'transform' },
+  inputTransition: { ...label, property: 'transition' },
+  marginInlineStart: { ...label, property: 'margin-inline-start' },
+  placeholderOpacity: [
+    { selector: '> input:placeholder-shown', property: 'opacity' },
+    { ...externalPlaceholder, property: 'opacity' },
+  ],
+  inputVerticalAlignment: [
+    { ...inputField, property: 'align-items' },
+    { ...externalInput, property: 'align-items' },
+  ],
+  valueInputHeight: [
+    { ...input, property: 'height' },
+    { ...externalInput, property: 'height' },
+  ],
+  valueInputMarginBottom: [
+    { ...input, property: 'margin-bottom' },
+    { ...externalInput, property: 'margin-bottom' },
+  ],
 };

package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js

@@ -52,6 +52,10 @@ const customMixin = (superclass) =>
           'phone-input-placeholder',
           'disabled',
           'restrict-countries',
+          'label-type',
+          'country-input-label',
+          'phone-input-label',
+          'readonly',
         ],
       });
     }
@@ -64,6 +68,7 @@ const {
   inputField,
   countryCodeInput,
   phoneInput,
+  phoneExternalInput,
   separator,
   errorMessage,
   helperText,
@@ -73,6 +78,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)' },
@@ -131,6 +137,13 @@ export const PhoneFieldClass = compose(
       },
       phoneInputWidth: { ...phoneInput, property: 'width' },
 
+      horizontalPadding: [
+        { ...phoneInput, property: 'padding-left' },
+        { ...phoneInput, property: 'padding-right' },
+        { ...countryCodeInput, property: 'padding-left' },
+        { ...countryCodeInput, property: 'padding-right' },
+      ],
+
       labelTextColor: [
         { ...label, property: 'color' },
         { ...requiredIndicator, property: 'color' },
@@ -154,6 +167,20 @@ export const PhoneFieldClass = compose(
       inputOutlineColor: { ...inputField, property: 'outline-color' },
       inputOutlineWidth: { ...inputField, property: 'outline-width' },
       inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+
+      valueInputHeight: [
+        { ...phoneExternalInput, property: textVars.valueInputHeight },
+        { ...countryCodeInput, property: comboVars.valueInputHeight },
+      ],
+      valueInputMarginBottom: [
+        { ...phoneInput, property: textVars.valueInputMarginBottom },
+        { ...phoneExternalInput, property: 'margin-bottom' },
+      ],
+      marginInlineStart: [
+        { ...phoneInput, property: textVars.marginInlineStart },
+        { ...phoneExternalInput, property: 'margin-inline-start' },
+        { ...countryCodeInput, property: comboVars.marginInlineStart },
+      ],
     },
   }),
   draggableMixin,
@@ -224,10 +251,15 @@ export const PhoneFieldClass = compose(
 				${textVars.inputOutlineOffset}: 0;
 				${textVars.inputBorderWidth}: 0;
 				${textVars.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;
 			}

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -1,19 +1,22 @@
 import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
-import { getComponentName } from '../../../../helpers/componentHelpers';
+import { forwardAttrs, getComponentName, syncAttrs } from '../../../../helpers/componentHelpers';
 import CountryCodes from '../../CountryCodes';
 import { comboBoxItem } from '../helpers';
 
 export const componentName = getComponentName('phone-field-internal');
 
-const commonAttrs = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
+const commonAttrs = ['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 = {
+  'country-input-label': 'label',
+  'phone-input-label': 'label',
   'country-input-placeholder': 'placeholder',
   'phone-input-placeholder': 'placeholder',
 };
 
-const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs);
+const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);
 
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
 
@@ -42,6 +45,12 @@ class PhoneFieldInternal extends BaseInputClass {
     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?.(' ') || [];
@@ -178,6 +187,13 @@ class PhoneFieldInternal extends BaseInputClass {
           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') {

package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js

@@ -10,6 +10,7 @@ import {
   resetInputFieldDefaultWidth,
   resetInputFieldInvalidBackgroundColor,
   useHostExternalPadding,
+  inputFloatingLabelStyle,
 } from '../../../helpers/themeHelpers/resetHelpers';
 
 const textVars = TextFieldClass.cssVarList;
@@ -48,14 +49,26 @@ const customMixin = (superclass) =>
           'default-code',
           'disabled',
           'phone-input-placeholder',
+          'label-type',
         ],
       });
     }
   };
 
-const { host, label, requiredIndicator, inputField, phoneInput, errorMessage, helperText } = {
+const {
+  host,
+  label,
+  inputElement,
+  requiredIndicator,
+  inputField,
+  phoneInput,
+  errorMessage,
+  helperText,
+} = {
   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' },
@@ -84,6 +97,13 @@ export const PhoneFieldInputBoxClass = compose(
       inputBorderColor: { ...inputField, property: 'border-color' },
       inputBorderRadius: { ...inputField, property: 'border-radius' },
 
+      inputHorizontalPadding: [
+        { ...phoneInput, property: 'padding-left' },
+        { ...phoneInput, property: 'padding-right' },
+      ],
+
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...requiredIndicator, property: 'color' },
@@ -99,6 +119,21 @@ export const PhoneFieldInputBoxClass = compose(
       inputOutlineColor: { ...inputField, property: 'outline-color' },
       inputOutlineWidth: { ...inputField, property: 'outline-width' },
       inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+
+      labelPosition: { ...label, property: 'position' },
+      labelTopPosition: { ...label, property: 'top' },
+      labelHorizontalPosition: [
+        { ...label, property: 'left' },
+        { ...label, property: 'right' },
+      ],
+      inputTransformY: { ...label, property: 'transform' },
+      inputTransition: { ...label, property: 'transition' },
+      marginInlineStart: { ...label, property: 'margin-inline-start' },
+      valueInputHeight: { ...inputElement, property: 'height' },
+      valueInputMarginBottom: {
+        selector: TextFieldClass.componentName,
+        property: textVars.valueInputMarginBottom,
+      },
     },
   }),
   draggableMixin,
@@ -166,7 +201,16 @@ export 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,

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js

@@ -13,6 +13,7 @@ const observedAttributes = [
   'phone-input-placeholder',
   'name',
   'autocomplete',
+  'label-type',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',

package/src/{components/descope-password/helpers.js → helpers/externalInputs.js}

@@ -1,6 +1,6 @@
 // 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) => {
+export const getValueColor = (ele, computedStyle) => {
   // eslint-disable-next-line no-param-reassign
   ele.value = '_';
 
@@ -21,18 +21,18 @@ export const createExternalInputSlot = (slotName, targetSlotName) => {
   return slotEle;
 };
 
-export const createExternalInputEle = (targetSlotName, autocompleteType) => {
+export 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;
 };
 
-export const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
+export const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) => {
   const computedStyle = getComputedStyle(sourceInputEle);
   const height = computedStyle.getPropertyValue('height');
   const paddingLeft = computedStyle.getPropertyValue('padding-left');
@@ -48,7 +48,6 @@ export 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;
@@ -58,5 +57,6 @@ export const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
   font-family: ${fontFamily} !important;
   letter-spacing: ${letterSpacing} !important;
   caret-color: ${caretColor} !important;
+  ${customStyle || ''}
   `;
 };

package/src/helpers/themeHelpers/resetHelpers.js

@@ -126,3 +126,18 @@ export const resetInputLabelPosition = (name) => `
       padding-bottom: 0.5em;
     }
 `;
+
+export 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;
+  }
+  `;
+};

package/src/theme/components/comboBox.js

@@ -11,6 +11,8 @@ export const comboBox = {
   [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
+  [vars.labelFontSize]: refs.labelFontSize,
+  [vars.labelFontWeight]: refs.labelFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.inputBorderColor]: refs.borderColor,
@@ -34,6 +36,21 @@ export const comboBox = {
   [vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,
   [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
 
+  labelType: {
+    floating: {
+      [vars.labelPosition]: refs.labelPosition,
+      [vars.labelTopPosition]: refs.labelTopPosition,
+      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+      [vars.inputTransformY]: refs.inputTransformY,
+      [vars.inputTransition]: refs.inputTransition,
+      [vars.marginInlineStart]: refs.marginInlineStart,
+      [vars.placeholderOpacity]: refs.placeholderOpacity,
+      [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+      [vars.valueInputHeight]: refs.valueInputHeight,
+      [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
+    },
+  },
+
   _readonly: {
     [vars.inputDropdownButtonCursor]: 'default',
   },

package/src/theme/components/emailField.js

@@ -9,6 +9,8 @@ const emailField = {
   [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
+  [vars.labelFontSize]: refs.labelFontSize,
+  [vars.labelFontWeight]: refs.labelFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.inputValueTextColor]: refs.valueTextColor,
@@ -25,6 +27,21 @@ const emailField = {
   [vars.inputBackgroundColor]: refs.backgroundColor,
   [vars.inputHorizontalPadding]: refs.horizontalPadding,
   [vars.inputHeight]: refs.inputHeight,
+
+  labelType: {
+    floating: {
+      [vars.labelPosition]: refs.labelPosition,
+      [vars.labelTopPosition]: refs.labelTopPosition,
+      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+      [vars.inputTransformY]: refs.inputTransformY,
+      [vars.inputTransition]: refs.inputTransition,
+      [vars.marginInlineStart]: refs.marginInlineStart,
+      [vars.placeholderOpacity]: refs.placeholderOpacity,
+      [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+      [vars.valueInputHeight]: refs.valueInputHeight,
+      [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
+    },
+  },
 };
 
 export default emailField;

package/src/theme/components/inputWrapper.js

@@ -9,6 +9,7 @@ const [theme, refs, vars] = createHelperVars(
   {
     labelTextColor: globalRefs.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.colors.surface.contrast,
     placeholderTextColor: globalRefs.colors.surface.dark,
     requiredIndicator: "'*'",
@@ -46,6 +47,40 @@ const [theme, refs, vars] = 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%',
     },

package/src/theme/components/multiSelectComboBox.js

@@ -11,6 +11,8 @@ export const multiSelectComboBox = {
   [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
+  [vars.labelFontSize]: refs.labelFontSize,
+  [vars.labelFontWeight]: refs.labelFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.inputBorderColor]: refs.borderColor,
@@ -38,6 +40,26 @@ export const multiSelectComboBox = {
   [vars.chipTextColor]: globalRefs.colors.surface.contrast,
   [vars.chipBackgroundColor]: globalRefs.colors.surface.light,
 
+  labelType: {
+    floating: {
+      [vars.labelPosition]: refs.labelPosition,
+      [vars.labelTopPosition]: refs.labelTopPosition,
+      [vars.labelLeftPosition]: refs.labelLeftPosition,
+      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+      [vars.inputTransformY]: refs.inputTransformY,
+      [vars.inputTransition]: refs.inputTransition,
+      [vars.marginInlineStart]: refs.marginInlineStart,
+      [vars.placeholderOpacity]: refs.placeholderOpacity,
+      [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+      [vars.valueInputHeight]: refs.valueInputHeight,
+      [vars.inputHorizontalPadding]: '0.25em',
+
+      _hasValue: {
+        [vars.inputHorizontalPadding]: '0.45em',
+      },
+    },
+  },
+
   _readonly: {
     [vars.inputDropdownButtonCursor]: 'default',
   },