@descope/web-components-ui 1.0.321 → 1.0.323

package/src/theme/components/newPassword.js

@@ -12,11 +12,21 @@ const newPassword = {
   [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.spaceBetweenInputs]: '1em',
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.policyPreviewBackgroundColor]: 'none',
   [vars.policyPreviewPadding]: globalRefs.spacing.lg,
 
+  labelType: {
+    floating: {
+      [vars.inputHeight]: refs.inputHeight,
+      [vars.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.

package/src/theme/components/numberField.js

@@ -9,6 +9,8 @@ const numberField = {
   [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 numberField = {
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [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 numberField;

package/src/theme/components/password.js

@@ -8,9 +8,12 @@ const vars = PasswordClass.cssVarList;
 
 const password = {
   [vars.hostWidth]: refs.width,
+  [vars.hostMinWidth]: refs.minWidth,
   [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.inputHorizontalPadding]: refs.horizontalPadding,
@@ -30,6 +33,20 @@ const password = {
   [vars.revealButtonOffset]: globalRefs.spacing.md,
   [vars.revealButtonSize]: refs.toggleButtonSize,
   [vars.revealButtonColor]: refs.placeholderTextColor,
+
+  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,
+    },
+  },
 };
 
 export default password;

package/src/theme/components/phoneField.js

@@ -25,6 +25,14 @@ const phoneField = {
   [vars.countryCodeInputWidth]: '5em',
   [vars.countryCodeDropdownWidth]: '20em',
 
+  labelType: {
+    floating: {
+      [vars.marginInlineStart]: '-0.25em',
+      [vars.valueInputHeight]: '1.65em',
+      [vars.valueInputMarginBottom]: '0.25em',
+    },
+  },
+
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
   // }

package/src/theme/components/phoneInputBoxField.js

@@ -9,6 +9,8 @@ const phoneInputBoxField = {
   [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.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -22,6 +24,21 @@ const phoneInputBoxField = {
   [vars.inputOutlineWidth]: refs.outlineWidth,
   [vars.inputOutlineColor]: refs.outlineColor,
   [vars.inputOutlineOffset]: refs.outlineOffset,
+
+  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.valueInputHeight]: refs.valueInputHeight,
+      [vars.valueInputMarginBottom]: '0.25em',
+      [vars.inputHorizontalPadding]: '0',
+    },
+  },
+
   _fullWidth: {
     [vars.hostWidth]: refs.width,
   },

package/src/theme/components/textField.js

@@ -9,6 +9,8 @@ export const textField = {
   [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.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -31,6 +33,21 @@ export const textField = {
     left: { [vars.inputTextAlign]: 'left' },
     center: { [vars.inputTextAlign]: 'center' },
   },
+
+  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 textField;