@descope/web-components-ui 3.3.5 → 3.5.0

package/dist/index.esm.js

@@ -5277,7 +5277,7 @@ const ComboBoxMixin = (superclass) =>
       return ['label-type', 'require-match'];
     }
 
-    // eslint-disable-next-line class-methods-use-this
+     
     #renderItem = ({ displayName, value, label }) => {
       return `<span data-name="${label}" data-id="${value}">${
         displayName || label
@@ -5328,7 +5328,7 @@ const ComboBoxMixin = (superclass) =>
             return data;
           }
         } catch (e) {
-          // eslint-disable-next-line no-console
+           
           console.error(
             'could not parse data string from attribute "data" -',
             e.message,
@@ -5347,14 +5347,16 @@ const ComboBoxMixin = (superclass) =>
     }
 
     get requireMatch() {
-      return this.getAttribute('require-match') === 'true' && !this.allowCustomValue;
+      return (
+        this.getAttribute('require-match') === 'true' && !this.allowCustomValue
+      );
     }
 
-    // eslint-disable-next-line class-methods-use-this
+     
     isValidDataType(data) {
       const isValid = Array.isArray(data);
       if (!isValid) {
-        // eslint-disable-next-line no-console
+         
         console.error('data must be an array, received:', data);
       }
 
@@ -5403,7 +5405,7 @@ const ComboBoxMixin = (superclass) =>
       }
     }
 
-    // eslint-disable-next-line class-methods-use-this
+     
     customValueTransformFn(val) {
       return val;
     }
@@ -5488,7 +5490,7 @@ const ComboBoxMixin = (superclass) =>
       // and not via default renderer, which renders only the data-name's value
       // in its own HTML template
       this.baseElement.renderer = (root, combo, model) => {
-        // eslint-disable-next-line no-param-reassign
+         
         root.innerHTML = model.item.outerHTML;
       };
     }
@@ -5506,7 +5508,9 @@ const ComboBoxMixin = (superclass) =>
       const val = this.baseElement.querySelector('input').value;
 
       if (val) {
-        return this.baseElement.items.some(item => item.dataset.name === val || item.dataset.id === val);
+        return this.baseElement.items.some(
+          (item) => item.dataset.name === val || item.dataset.id === val,
+        );
       }
 
       return true;
@@ -5515,7 +5519,7 @@ const ComboBoxMixin = (superclass) =>
     init() {
       super.init?.();
 
-      // eslint-disable-next-line func-names
+       
       this.getValidity = function () {
         if (this.requireMatch && !this.isValueMatch()) {
           return {
@@ -5581,7 +5585,8 @@ const ComboBoxMixin = (superclass) =>
     }
 
     handleRequireMatchChange(shouldValidate) {
-      this.baseElement.allowCustomValue = shouldValidate || this.allowCustomValue;
+      this.baseElement.allowCustomValue =
+        shouldValidate || this.allowCustomValue;
     }
 
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -5693,6 +5698,10 @@ const ComboBoxClass = compose$1(
       fontFamily: [label$a, placeholder$3, inputField$6, helperText$8, errorMessage$b],
       labelFontSize: { ...label$a, property: 'font-size' },
       labelFontWeight: { ...label$a, property: 'font-weight' },
+      inputValueFontWeight: { ...inputField$6, property: 'font-weight' },
+      inputPlaceholderFontWeight: { ...placeholder$3, property: 'font-weight' },
+      helperTextFontWeight: { ...helperText$8, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage$b, property: 'font-weight' },
       labelTextColor: [
         { ...label$a, property: 'color' },
         { ...label$a, property: '-webkit-text-fill-color' },
@@ -7390,6 +7399,17 @@ var textFieldMappings = {
   labelFontSize: { ...label$8, property: 'font-size' },
   labelFontWeight: { ...label$8, property: 'font-weight' },
 
+  inputValueFontWeight: [
+    { ...input$1, property: 'font-weight' },
+    { ...externalInput, property: 'font-weight' },
+  ],
+  inputPlaceholderFontWeight: [
+    { selector: () => ':host input:placeholder-shown', property: 'font-weight' },
+    { ...externalPlaceholder, property: 'font-weight' },
+  ],
+  helperTextFontWeight: { ...helperText$7, property: 'font-weight' },
+  errorMessageFontWeight: { ...errorMessage$a, property: 'font-weight' },
+
   labelTextColor: [
     { ...label$8, property: 'color' },
     { ...requiredIndicator$8, property: 'color' },
@@ -8650,6 +8670,26 @@ 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({
@@ -9325,6 +9365,12 @@ const PasscodeClass = compose(
       hostWidth: { property: 'width' },
       hostDirection: { ...host$n, property: 'direction' },
       fontFamily: [host$n, { ...label$7 }],
+      labelFontWeight: { ...label$7, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage$9, property: 'font-weight' },
+      digitValueFontWeight: {
+        selector: TextFieldClass.componentName,
+        property: textVars$3.inputValueFontWeight,
+      },
       labelTextColor: [
         { ...label$7, property: 'color' },
         { ...label$7, property: '-webkit-text-fill-color' },
@@ -9650,6 +9696,16 @@ const PasswordClass = compose(
 
       labelFontSize: { ...label$6, property: 'font-size' },
       labelFontWeight: { ...label$6, property: 'font-weight' },
+      inputValueFontWeight: [
+        { ...inputElement$2, 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$6, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage$8, property: 'font-weight' },
       labelTextColor: [
         { ...label$6, property: 'color' },
         { ...label$6, property: '-webkit-text-fill-color' },
@@ -9811,6 +9867,12 @@ const TextAreaClass = compose(
       hostDirection: { ...host$l, property: 'direction' },
       fontSize: [host$l, textArea$2],
       fontFamily: [label$5, inputField$3, helperText$5, errorMessage$7],
+      labelFontSize: { ...label$5, property: 'font-size' },
+      labelFontWeight: { ...label$5, property: 'font-weight' },
+      inputValueFontWeight: { ...textArea$2, property: 'font-weight' },
+      inputPlaceholderFontWeight: { ...placeholder$1, property: 'font-weight' },
+      helperTextFontWeight: { ...helperText$5, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage$7, property: 'font-weight' },
       labelTextColor: [
         { ...label$5, property: 'color' },
         { ...label$5, property: '-webkit-text-fill-color' },
@@ -11640,6 +11702,15 @@ const PhoneFieldClass = compose(
         { ...countryCodeInput, property: 'padding-right' },
       ],
 
+      labelFontSize: { ...label$4, property: 'font-size' },
+      labelFontWeight: { ...label$4, property: 'font-weight' },
+      inputValueFontWeight: [
+        { ...phoneInput$1, property: textVars$2.inputValueFontWeight },
+        { ...countryCodeInput, property: comboVars.inputValueFontWeight },
+      ],
+      inputPlaceholderFontWeight: { ...phoneInput$1, property: textVars$2.inputPlaceholderFontWeight },
+      helperTextFontWeight: { ...helperText$4, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage$6, property: 'font-weight' },
       labelTextColor: [
         { ...label$4, property: 'color' },
         { ...label$4, property: '-webkit-text-fill-color' },
@@ -12176,6 +12247,10 @@ const PhoneFieldInputBoxClass = compose(
 
       labelFontSize: { ...label$3, property: 'font-size' },
       labelFontWeight: { ...label$3, property: 'font-weight' },
+      inputValueFontWeight: { ...phoneInput, property: textVars$1.inputValueFontWeight },
+      inputPlaceholderFontWeight: { ...phoneInput, property: textVars$1.inputPlaceholderFontWeight },
+      helperTextFontWeight: { ...helperText$3, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage$5, property: 'font-weight' },
       labelTextColor: [
         { ...label$3, property: 'color' },
         { ...label$3, property: '-webkit-text-fill-color' },
@@ -12717,6 +12792,16 @@ const NewPasswordClass = compose(
       fontFamily: [label$2, errorMessage$4, helperText$2],
       labelFontSize: { ...label$2, property: 'font-size' },
       labelFontWeight: { ...label$2, property: 'font-weight' },
+      inputValueFontWeight: {
+        ...passwordInput,
+        property: PasswordClass.cssVarList.inputValueFontWeight,
+      },
+      inputPlaceholderFontWeight: {
+        ...passwordInput,
+        property: PasswordClass.cssVarList.inputPlaceholderFontWeight,
+      },
+      helperTextFontWeight: { ...helperText$2, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage$4, property: 'font-weight' },
       labelTextColor: { ...label$2, property: 'color' },
       errorMessageTextColor: { ...errorMessage$4, property: 'color' },
       errorMessageIcon: { ...errorMessage$4, property: 'background-image' },
@@ -15728,6 +15813,10 @@ const MultiSelectComboBoxClass = compose(
       fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$2, chipLabel],
       labelFontSize: { ...label, property: 'font-size' },
       labelFontWeight: { ...label, property: 'font-weight' },
+      inputValueFontWeight: { ...inputField, property: 'font-weight' },
+      inputPlaceholderFontWeight: { ...placeholder, property: 'font-weight' },
+      helperTextFontWeight: { ...helperText$1, property: 'font-weight' },
+      errorMessageFontWeight: { ...errorMessage$2, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...requiredIndicator, property: 'color' },
@@ -19438,6 +19527,56 @@ 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,
@@ -20396,6 +20535,10 @@ const [theme$2, refs$1] = createHelperVars$1(
     labelTextColor: globalRefs$D.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$D.colors.surface.contrast,
     placeholderTextColor: globalRefs$D.colors.surface.dark,
     requiredIndicator: "'*'",
@@ -20435,7 +20578,6 @@ const [theme$2, refs$1] = createHelperVars$1(
     errorMessageIconPosition: '0 0.4em',
     errorMessageFontSize: '0.8125rem',
     errorMessageIconRepeat: 'no-repeat',
-    errorMessageIconRepeat: 'no-repeat',
 
     size: {
       xs: { fontSize: '12px', chipFontSize: '10px' },
@@ -20524,6 +20666,10 @@ const comboBox = {
   [vars$11.fontFamily]: refs$1.fontFamily,
   [vars$11.labelFontSize]: refs$1.labelFontSize,
   [vars$11.labelFontWeight]: refs$1.labelFontWeight,
+  [vars$11.inputValueFontWeight]: refs$1.inputValueFontWeight,
+  [vars$11.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
+  [vars$11.helperTextFontWeight]: refs$1.helperTextFontWeight,
+  [vars$11.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
   [vars$11.labelTextColor]: refs$1.labelTextColor,
   [vars$11.errorMessageTextColor]: refs$1.errorMessageTextColor,
   [vars$11.inputBorderColor]: refs$1.borderColor,
@@ -22441,26 +22587,85 @@ class RawTimerButton extends BaseClass$4 {
       .wrapper {
         display: flex;
         flex-direction: column;
-        gap: 0.5em;
         align-items: center;
         width: 100%;
       }
-      .timer {
+      /* allow timer to grow along the main axis in the wrapper flex container */
+      :host(:not([timer-inside="true"])) .timer {
         flex: 1;
       }
+      :host([timer-inside="true"]) .timer {
+        flex: 0 0 auto;
+      }
     `,
       this,
     );
 
+    this.wrapper = this.shadowRoot.querySelector('.wrapper');
     this.timer = this.shadowRoot.querySelector('.timer');
     this.button = this.shadowRoot.querySelector('.button');
+    this.forwardingSlot = this.shadowRoot.querySelector('.button slot');
 
     this.timer.addEventListener('timer-started', () => this.onTimerStarted());
     this.timer.addEventListener('timer-ended', () => this.onTimerEnded());
 
+    this.syncTimerPlacement();
+
     this.button.addEventListener('click', this.onClick.bind(this));
   }
 
+  static get observedAttributes() {
+    return [
+      ...(super.observedAttributes || []),
+      'timer-inside',
+      'timer-position',
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+    if (name === 'timer-inside' || name === 'timer-position') {
+      this.syncTimerPlacement();
+    }
+  }
+
+  get #isTimerInside() {
+    return this.getAttribute('timer-inside') === 'true';
+  }
+
+  get #isReversed() {
+    return this.getAttribute('timer-position') === 'end';
+  }
+
+  syncTimerPlacement() {
+    if (this.#isTimerInside) {
+      this.#placeTimerInsideButton(this.#isReversed);
+    } else {
+      this.#placeTimerOutsideButton();
+    }
+  }
+
+  #placeTimerInsideButton(reversed) {
+    if (reversed) {
+      // timer after label text (right)
+      if (this.timer.previousSibling !== this.forwardingSlot) {
+        this.button.appendChild(this.timer);
+      }
+    } else {
+      // timer before label text (left) — matches default outside position (above/before button)
+      if (this.timer.nextSibling !== this.forwardingSlot) {
+        this.button.insertBefore(this.timer, this.forwardingSlot);
+      }
+    }
+  }
+
+  #placeTimerOutsideButton() {
+    // move timer back as a wrapper sibling, before the button so flex-column puts it above
+    if (this.timer.parentElement !== this.wrapper) {
+      this.wrapper.insertBefore(this.timer, this.button);
+    }
+  }
+
   set onclick(val) {
     this.button.onclick = val;
   }
@@ -22508,8 +22713,26 @@ class RawTimerButton extends BaseClass$4 {
   }
 }
 
-const { host: host$4 } = {
-  host: { selector: () => ':host' }};
+const {
+  host: host$4,
+  nestedTimer,
+  nestedButton,
+  timerInsideNotReversed,
+  timerInsideReversed,
+} = {
+  host: { selector: () => ':host' },
+  nestedTimer: { selector: () => ':host([timer-inside="true"]) .timer' },
+  nestedButton: {
+    selector: () => ':host([timer-inside="true"]) .button',
+  },
+  timerInsideNotReversed: {
+    selector: () =>
+      ':host([timer-inside="true"]:not([timer-position="end"])) .timer',
+  },
+  timerInsideReversed: {
+    selector: () => ':host([timer-inside="true"][timer-position="end"]) .timer',
+  },
+};
 
 const TimerButtonClass = compose$1(
   createStyleMixin$1({
@@ -22518,6 +22741,30 @@ const TimerButtonClass = compose$1(
       flexDirection: {},
       hostWidth: { ...host$4, property: 'width' },
       hostDirection: { ...host$4, property: 'direction' },
+      timerTextColor: {
+        ...nestedTimer,
+        property: TimerClass.cssVarList.textColor,
+      },
+      timerIconColor: {
+        ...nestedTimer,
+        property: TimerClass.cssVarList.iconColor,
+      },
+      timerHostWidth: {
+        ...nestedTimer,
+        property: TimerClass.cssVarList.hostWidth,
+      },
+      buttonLabelSpacing: {
+        ...nestedButton,
+        property: ButtonClass.cssVarList.labelSpacing,
+      },
+      timerInsideGapEnd: {
+        ...timerInsideNotReversed,
+        property: 'margin-inline-end',
+      },
+      timerInsideGapStart: {
+        ...timerInsideReversed,
+        property: 'margin-inline-start',
+      },
     },
   }),
   draggableMixin$1,
@@ -22533,11 +22780,35 @@ const timerButton = {
 
   _horizontal: {
     [vars$S.flexDirection]: 'row',
+    timerPosition: {
+      end: {
+        [vars$S.flexDirection]: 'row-reverse',
+      },
+    },
+  },
+
+  timerPosition: {
+    end: {
+      [vars$S.flexDirection]: 'column-reverse',
+    },
   },
 
   _fullWidth: {
     [vars$S.hostWidth]: '100%',
   },
+
+  _timerInside: {
+    [vars$S.timerTextColor]: 'currentColor',
+    [vars$S.timerIconColor]: 'currentColor',
+    [vars$S.timerHostWidth]: 'auto',
+    [vars$S.buttonLabelSpacing]: '0',
+    [vars$S.timerInsideGapEnd]: `var(${vars$S.gap})`,
+    timerPosition: {
+      end: {
+        [vars$S.timerInsideGapStart]: `var(${vars$S.gap})`,
+      },
+    },
+  },
 };
 
 var timerButton$1 = /*#__PURE__*/Object.freeze({
@@ -25713,6 +25984,10 @@ const [theme$1, refs, vars$I] = createHelperVars(
     labelTextColor: globalRefs$p.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$p.colors.surface.contrast,
     placeholderTextColor: globalRefs$p.colors.surface.dark,
     requiredIndicator: "'*'",
@@ -25852,6 +26127,10 @@ const textField = {
   [vars$H.fontFamily]: refs.fontFamily,
   [vars$H.labelFontSize]: refs.labelFontSize,
   [vars$H.labelFontWeight]: refs.labelFontWeight,
+  [vars$H.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$H.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$H.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$H.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$H.labelTextColor]: refs.labelTextColor,
   [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -25919,6 +26198,10 @@ const password = {
   [vars$G.fontFamily]: refs.fontFamily,
   [vars$G.labelFontSize]: refs.labelFontSize,
   [vars$G.labelFontWeight]: refs.labelFontWeight,
+  [vars$G.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$G.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$G.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$G.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$G.labelTextColor]: refs.labelTextColor,
   [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$G.inputHorizontalPadding]: refs.horizontalPadding,
@@ -25973,6 +26256,10 @@ const numberField = {
   [vars$F.fontFamily]: refs.fontFamily,
   [vars$F.labelFontSize]: refs.labelFontSize,
   [vars$F.labelFontWeight]: refs.labelFontWeight,
+  [vars$F.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$F.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$F.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$F.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$F.labelTextColor]: refs.labelTextColor,
   [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$F.inputValueTextColor]: refs.valueTextColor,
@@ -26025,6 +26312,10 @@ const emailField = {
   [vars$E.fontFamily]: refs.fontFamily,
   [vars$E.labelFontSize]: refs.labelFontSize,
   [vars$E.labelFontWeight]: refs.labelFontWeight,
+  [vars$E.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$E.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$E.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$E.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$E.labelTextColor]: refs.labelTextColor,
   [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$E.inputValueTextColor]: refs.valueTextColor,
@@ -26075,6 +26366,12 @@ const textArea = {
   [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.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$D.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$D.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$D.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$D.labelTextColor]: refs.labelTextColor,
   [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -26463,8 +26760,11 @@ const passcode = {
   [vars$v.fontSize]: refs.fontSize,
   [vars$v.labelTextColor]: refs.labelTextColor,
   [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$v.labelFontWeight]: refs.labelFontWeight,
   [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$v.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$v.digitValueTextColor]: refs.valueTextColor,
+  [vars$v.digitValueFontWeight]: refs.inputValueFontWeight,
   [vars$v.digitPadding]: '0',
   [vars$v.digitTextAlign]: 'center',
   [vars$v.digitSpacing]: '4px',
@@ -26611,6 +26911,12 @@ const phoneField = {
   [vars$s.hostDirection]: refs.direction,
   [vars$s.fontSize]: refs.fontSize,
   [vars$s.fontFamily]: refs.fontFamily,
+  [vars$s.labelFontSize]: refs.labelFontSize,
+  [vars$s.labelFontWeight]: refs.labelFontWeight,
+  [vars$s.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$s.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$s.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$s.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$s.labelTextColor]: refs.labelTextColor,
   [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -26656,6 +26962,10 @@ const phoneInputBoxField = {
   [vars$r.fontFamily]: refs.fontFamily,
   [vars$r.labelFontSize]: refs.labelFontSize,
   [vars$r.labelFontWeight]: refs.labelFontWeight,
+  [vars$r.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$r.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$r.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$r.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$r.labelTextColor]: refs.labelTextColor,
   [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -26709,6 +27019,10 @@ const newPassword = {
   [vars$q.fontFamily]: refs.fontFamily,
   [vars$q.labelFontSize]: refs.labelFontSize,
   [vars$q.labelFontWeight]: refs.labelFontWeight,
+  [vars$q.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$q.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$q.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$q.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$q.labelTextColor]: refs.labelTextColor,
   [vars$q.spaceBetweenInputs]: '1em',
   [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -27022,6 +27336,10 @@ const multiSelectComboBox = {
   [vars$i.fontFamily]: refs.fontFamily,
   [vars$i.labelFontSize]: refs.labelFontSize,
   [vars$i.labelFontWeight]: refs.labelFontWeight,
+  [vars$i.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$i.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$i.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$i.errorMessageFontWeight]: refs.errorMessageFontWeight,
   [vars$i.labelTextColor]: refs.labelTextColor,
   [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars$i.inputBorderColor]: refs.borderColor,
@@ -27580,6 +27898,12 @@ const dateField = {
   [vars$8.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
   [vars$8.errorMessageIconPosition]: refs.errorMessageIconPosition,
   [vars$8.errorMessageFontSize]: refs.errorMessageFontSize,
+
+  [vars$8.labelFontWeight]: refs.labelFontWeight,
+  [vars$8.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$8.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$8.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$8.errorMessageFontWeight]: refs.errorMessageFontWeight,
 };
 
 var dateField$1 = /*#__PURE__*/Object.freeze({
@@ -27678,6 +28002,11 @@ const vars$3 = HybridFieldClass.cssVarList;
 
 const hybridField = {
   [vars$3.hostDirection]: refs.direction,
+  [vars$3.labelFontWeight]: refs.labelFontWeight,
+  [vars$3.inputValueFontWeight]: refs.inputValueFontWeight,
+  [vars$3.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+  [vars$3.helperTextFontWeight]: refs.helperTextFontWeight,
+  [vars$3.errorMessageFontWeight]: refs.errorMessageFontWeight,
 
   // error message icon
   [vars$3.errorMessageIcon]: refs.errorMessageIcon,