@descope/web-components-ui 3.3.5 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "3.3.5",
+  "version": "3.4.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -51,10 +51,10 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "rollup-replace-plugin": "3.3.5",
-    "test-drivers": "3.3.5",
-    "webpack-extract-font-loader": "3.3.5",
-    "webpack-replace-plugin": "3.3.5"
+    "rollup-replace-plugin": "3.4.0",
+    "webpack-replace-plugin": "3.4.0",
+    "test-drivers": "3.4.0",
+    "webpack-extract-font-loader": "3.4.0"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -78,33 +78,33 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "3.3.5",
-    "@descope-ui/descope-address-field": "3.3.5",
-    "@descope-ui/descope-country-subdivision-city-field": "3.3.5",
-    "@descope-ui/descope-apps-list": "3.3.5",
-    "@descope-ui/descope-autocomplete-field": "3.3.5",
-    "@descope-ui/descope-avatar": "3.3.5",
-    "@descope-ui/descope-badge": "3.3.5",
-    "@descope-ui/descope-button": "3.3.5",
-    "@descope-ui/descope-collapsible-container": "3.3.5",
-    "@descope-ui/descope-enriched-text": "3.3.5",
-    "@descope-ui/descope-combo-box": "3.3.5",
-    "@descope-ui/descope-icon": "3.3.5",
-    "@descope-ui/descope-image": "3.3.5",
-    "@descope-ui/descope-link": "3.3.5",
-    "@descope-ui/descope-list": "3.3.5",
-    "@descope-ui/descope-list-item": "3.3.5",
-    "@descope-ui/descope-outbound-app-button": "3.3.5",
-    "@descope-ui/descope-outbound-apps": "3.3.5",
-    "@descope-ui/descope-password-strength": "3.3.5",
-    "@descope-ui/descope-ponyhot": "3.3.5",
-    "@descope-ui/descope-recovery-codes": "3.3.5",
-    "@descope-ui/descope-text": "3.3.5",
-    "@descope-ui/descope-tooltip": "3.3.5",
-    "@descope-ui/descope-trusted-devices": "3.3.5",
-    "@descope-ui/descope-attachment": "3.3.5",
-    "@descope-ui/descope-timer-button": "3.3.5",
-    "@descope-ui/descope-timer": "3.3.5"
+    "@descope-ui/common": "3.4.0",
+    "@descope-ui/descope-address-field": "3.4.0",
+    "@descope-ui/descope-country-subdivision-city-field": "3.4.0",
+    "@descope-ui/descope-apps-list": "3.4.0",
+    "@descope-ui/descope-autocomplete-field": "3.4.0",
+    "@descope-ui/descope-badge": "3.4.0",
+    "@descope-ui/descope-avatar": "3.4.0",
+    "@descope-ui/descope-button": "3.4.0",
+    "@descope-ui/descope-collapsible-container": "3.4.0",
+    "@descope-ui/descope-enriched-text": "3.4.0",
+    "@descope-ui/descope-icon": "3.4.0",
+    "@descope-ui/descope-image": "3.4.0",
+    "@descope-ui/descope-link": "3.4.0",
+    "@descope-ui/descope-list": "3.4.0",
+    "@descope-ui/descope-list-item": "3.4.0",
+    "@descope-ui/descope-outbound-app-button": "3.4.0",
+    "@descope-ui/descope-outbound-apps": "3.4.0",
+    "@descope-ui/descope-password-strength": "3.4.0",
+    "@descope-ui/descope-ponyhot": "3.4.0",
+    "@descope-ui/descope-recovery-codes": "3.4.0",
+    "@descope-ui/descope-text": "3.4.0",
+    "@descope-ui/descope-timer": "3.4.0",
+    "@descope-ui/descope-timer-button": "3.4.0",
+    "@descope-ui/descope-tooltip": "3.4.0",
+    "@descope-ui/descope-attachment": "3.4.0",
+    "@descope-ui/descope-trusted-devices": "3.4.0",
+    "@descope-ui/descope-combo-box": "3.4.0"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-date-field/DateFieldClass.js

@@ -935,6 +935,26 @@ export const DateFieldClass = compose(
         selector: TextFieldClass.componentName,
         property: TextFieldClass.cssVarList.errorMessageFontSize,
       },
+      labelFontWeight: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.labelFontWeight,
+      },
+      inputValueFontWeight: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.inputValueFontWeight,
+      },
+      inputPlaceholderFontWeight: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.inputPlaceholderFontWeight,
+      },
+      helperTextFontWeight: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.helperTextFontWeight,
+      },
+      errorMessageFontWeight: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.errorMessageFontWeight,
+      },
     },
   }),
   portalMixin({

package/src/components/descope-hybrid-field/HybridFieldClass.js

@@ -400,6 +400,56 @@ export const HybridFieldClass = compose(
           property: PhoneFieldInputBoxClass.cssVarList.errorMessageFontSize,
         },
       ],
+      labelFontWeight: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.labelFontWeight,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.labelFontWeight,
+        },
+      ],
+      inputValueFontWeight: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.inputValueFontWeight,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.inputValueFontWeight,
+        },
+      ],
+      inputPlaceholderFontWeight: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.inputPlaceholderFontWeight,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.inputPlaceholderFontWeight,
+        },
+      ],
+      helperTextFontWeight: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.helperTextFontWeight,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.helperTextFontWeight,
+        },
+      ],
+      errorMessageFontWeight: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageFontWeight,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageFontWeight,
+        },
+      ],
     },
   }),
   draggableMixin,

package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js

@@ -468,6 +468,10 @@ export const MultiSelectComboBoxClass = compose(
       fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
       labelFontSize: { ...label, property: 'font-size' },
       labelFontWeight: { ...label, property: 'font-weight' },
+      inputValueFontWeight: { ...inputField, property: 'font-weight' },
+      inputPlaceholderFontWeight: { ...placeholder, property: 'font-weight' },
+      helperTextFontWeight: { ...helperText, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...requiredIndicator, property: 'color' },

package/src/components/descope-new-password/NewPasswordClass.js

@@ -126,6 +126,16 @@ export const NewPasswordClass = compose(
       fontFamily: [label, errorMessage, helperText],
       labelFontSize: { ...label, property: 'font-size' },
       labelFontWeight: { ...label, property: 'font-weight' },
+      inputValueFontWeight: {
+        ...passwordInput,
+        property: PasswordClass.cssVarList.inputValueFontWeight,
+      },
+      inputPlaceholderFontWeight: {
+        ...passwordInput,
+        property: PasswordClass.cssVarList.inputPlaceholderFontWeight,
+      },
+      helperTextFontWeight: { ...helperText, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
       labelTextColor: { ...label, property: 'color' },
       errorMessageTextColor: { ...errorMessage, property: 'color' },
       errorMessageIcon: { ...errorMessage, property: 'background-image' },

package/src/components/descope-passcode/PasscodeClass.js

@@ -118,6 +118,12 @@ export const PasscodeClass = compose(
       hostWidth: { property: 'width' },
       hostDirection: { ...host, property: 'direction' },
       fontFamily: [host, { ...label }],
+      labelFontWeight: { ...label, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
+      digitValueFontWeight: {
+        selector: TextFieldClass.componentName,
+        property: textVars.inputValueFontWeight,
+      },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...label, property: '-webkit-text-fill-color' },

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

@@ -175,6 +175,16 @@ export const PasswordClass = compose(
 
       labelFontSize: { ...label, property: 'font-size' },
       labelFontWeight: { ...label, property: 'font-weight' },
+      inputValueFontWeight: [
+        { ...inputElement, property: 'font-weight' },
+        { selector: () => ':host ::slotted(input)', property: 'font-weight' },
+      ],
+      inputPlaceholderFontWeight: [
+        { ...inputElementPlaceholder, property: 'font-weight' },
+        { selector: () => ':host ::slotted(input:placeholder-shown)', property: 'font-weight' },
+      ],
+      helperTextFontWeight: { ...helperText, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...label, property: '-webkit-text-fill-color' },

package/src/components/descope-text-area/TextAreaClass.js

@@ -46,6 +46,12 @@ export const TextAreaClass = compose(
       hostDirection: { ...host, property: 'direction' },
       fontSize: [host, textArea],
       fontFamily: [label, inputField, helperText, errorMessage],
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
+      inputValueFontWeight: { ...textArea, property: 'font-weight' },
+      inputPlaceholderFontWeight: { ...placeholder, property: 'font-weight' },
+      helperTextFontWeight: { ...helperText, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...label, property: '-webkit-text-fill-color' },

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

@@ -45,6 +45,17 @@ export default {
   labelFontSize: { ...label, property: 'font-size' },
   labelFontWeight: { ...label, property: 'font-weight' },
 
+  inputValueFontWeight: [
+    { ...input, property: 'font-weight' },
+    { ...externalInput, property: 'font-weight' },
+  ],
+  inputPlaceholderFontWeight: [
+    { selector: () => ':host input:placeholder-shown', property: 'font-weight' },
+    { ...externalPlaceholder, property: 'font-weight' },
+  ],
+  helperTextFontWeight: { ...helperText, property: 'font-weight' },
+  errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
+
   labelTextColor: [
     { ...label, property: 'color' },
     { ...requiredIndicator, property: 'color' },

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

@@ -174,6 +174,15 @@ export const PhoneFieldClass = compose(
         { ...countryCodeInput, property: 'padding-right' },
       ],
 
+      labelFontSize: { ...label, property: 'font-size' },
+      labelFontWeight: { ...label, property: 'font-weight' },
+      inputValueFontWeight: [
+        { ...phoneInput, property: textVars.inputValueFontWeight },
+        { ...countryCodeInput, property: comboVars.inputValueFontWeight },
+      ],
+      inputPlaceholderFontWeight: { ...phoneInput, property: textVars.inputPlaceholderFontWeight },
+      helperTextFontWeight: { ...helperText, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...label, property: '-webkit-text-fill-color' },

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

@@ -125,6 +125,10 @@ export const PhoneFieldInputBoxClass = compose(
 
       labelFontSize: { ...label, property: 'font-size' },
       labelFontWeight: { ...label, property: 'font-weight' },
+      inputValueFontWeight: { ...phoneInput, property: textVars.inputValueFontWeight },
+      inputPlaceholderFontWeight: { ...phoneInput, property: textVars.inputPlaceholderFontWeight },
+      helperTextFontWeight: { ...helperText, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...label, property: '-webkit-text-fill-color' },

package/src/theme/components/dateField.js

@@ -33,6 +33,12 @@ const dateField = {
   [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
   [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
   [vars.errorMessageFontSize]: refs.errorMessageFontSize,
+
+  [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
 };
 
 export default dateField;

package/src/theme/components/emailField.js

@@ -11,6 +11,10 @@ const emailField = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelFontSize]: refs.labelFontSize,
   [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.inputValueTextColor]: refs.valueTextColor,

package/src/theme/components/hybridField.js

@@ -5,6 +5,11 @@ const vars = HybridFieldClass.cssVarList;
 
 const hybridField = {
   [vars.hostDirection]: refs.direction,
+  [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
 
   // error message icon
   [vars.errorMessageIcon]: refs.errorMessageIcon,

package/src/theme/components/inputWrapper.js

@@ -10,6 +10,10 @@ 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
+    inputValueFontWeight: '400',
+    inputPlaceholderFontWeight: '400',
+    helperTextFontWeight: '400',
+    errorMessageFontWeight: '400',
     valueTextColor: globalRefs.colors.surface.contrast,
     placeholderTextColor: globalRefs.colors.surface.dark,
     requiredIndicator: "'*'",

package/src/theme/components/multiSelectComboBox.js

@@ -13,6 +13,10 @@ export const multiSelectComboBox = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelFontSize]: refs.labelFontSize,
   [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.inputBorderColor]: refs.borderColor,

package/src/theme/components/newPassword.js

@@ -14,6 +14,10 @@ const newPassword = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelFontSize]: refs.labelFontSize,
   [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.spaceBetweenInputs]: '1em',
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,

package/src/theme/components/numberField.js

@@ -11,6 +11,10 @@ const numberField = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelFontSize]: refs.labelFontSize,
   [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.inputValueTextColor]: refs.valueTextColor,

package/src/theme/components/passcode.js

@@ -9,8 +9,11 @@ const passcode = {
   [vars.fontSize]: refs.fontSize,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.labelFontWeight]: refs.labelFontWeight,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.digitValueTextColor]: refs.valueTextColor,
+  [vars.digitValueFontWeight]: refs.inputValueFontWeight,
   [vars.digitPadding]: '0',
   [vars.digitTextAlign]: 'center',
   [vars.digitSpacing]: '4px',

package/src/theme/components/password.js

@@ -14,6 +14,10 @@ const password = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelFontSize]: refs.labelFontSize,
   [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.inputHorizontalPadding]: refs.horizontalPadding,

package/src/theme/components/phoneField.js

@@ -8,6 +8,12 @@ const phoneField = {
   [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
+  [vars.labelFontSize]: refs.labelFontSize,
+  [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,

package/src/theme/components/phoneInputBoxField.js

@@ -11,6 +11,10 @@ const phoneInputBoxField = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelFontSize]: refs.labelFontSize,
   [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,

package/src/theme/components/textArea.js

@@ -9,6 +9,12 @@ const textArea = {
   [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
+  [vars.labelFontSize]: refs.labelFontSize,
+  [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,

package/src/theme/components/textField.js

@@ -14,6 +14,10 @@ export const textField = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelFontSize]: refs.labelFontSize,
   [vars.labelFontWeight]: refs.labelFontWeight,
+  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,