@descope/web-components-ui 1.0.232 → 1.0.234

package/src/components/descope-divider/DividerClass.js

@@ -2,6 +2,7 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { TextClass } from '../descope-text/TextClass';
 
 export const componentName = getComponentName('divider');
 class RawDivider extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
@@ -49,6 +50,7 @@ class RawDivider extends createBaseClass({ componentName, baseSelector: ':host >
   }
 }
 
+const textVars = TextClass.cssVarList;
 const { host, before, after, text } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
@@ -61,11 +63,13 @@ export const DividerClass = compose(
     mappings: {
       hostWidth: { ...host, property: 'width' },
       hostPadding: { ...host, property: 'padding' },
+      hostDirection: { ...text, property: 'direction' },
 
       minHeight: {},
       alignItems: {},
       alignSelf: {},
       flexDirection: {},
+      textAlign: { ...text, property: textVars.textAlign },
 
       labelTextWidth: { ...text, property: 'width' },
       labelTextMaxWidth: { ...text, property: 'max-width' },

package/src/components/descope-email-field/EmailFieldClass.js

@@ -9,6 +9,7 @@ import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import {
+  resetInputLabelPosition,
   resetInputOverrides,
   useHostExternalPadding,
 } from '../../helpers/themeHelpers/resetHelpers';
@@ -41,8 +42,9 @@ export const EmailFieldClass = compose(
 				padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${
           EmailFieldClass.cssVarList.inputOutlineOffset
         }));
-        box-sizing: border-box;        
+        box-sizing: border-box;
 			}
+      ${resetInputLabelPosition('vaadin-email-field')}
 			${useHostExternalPadding(EmailFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
 		`,

package/src/components/descope-grid/GridClass.js

@@ -19,6 +19,9 @@ const GridMixin = (superclass) =>
       super.init?.();
       this.handleColumns();
       this.forwardSelectedItemsChange();
+
+      // disable the grid sort
+      this.baseElement._mapSorters = () => {};
     }
 
     forwardSelectedItemsChange() {

package/src/components/descope-grid/descope-grid-status-column/index.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-param-reassign */
-import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
+import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 import { getComponentName } from '../../../helpers/componentHelpers';
 
 export const componentName = getComponentName('grid-status-column');
-class GridStatusColumnClass extends GridColumn {
+class GridStatusColumnClass extends GridSortColumn {
   _defaultRenderer(cell, _col, model) {
     const contentAttr = this.getAttribute('status');
     if (!contentAttr) {

package/src/components/descope-grid/descope-grid-text-column/index.js

@@ -1,10 +1,14 @@
-import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
+import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
+
+// if we do not want the sort column, we should import this class
+// import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
+
 import '../../descope-button';
 import { getComponentName } from '../../../helpers/componentHelpers';
 
 export const componentName = getComponentName('grid-text-column');
 
-class GridTextColumnClass extends GridColumn {}
+class GridTextColumnClass extends GridSortColumn {}
 
 customElements.define(componentName, GridTextColumnClass);
 

package/src/components/descope-link/LinkClass.js

@@ -58,6 +58,7 @@ export const LinkClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...text, property: 'direction' },
       textAlign: wrapper,
       textColor: [
         { ...anchor, property: 'color' },

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

@@ -45,12 +45,13 @@ const customMixin = (superclass) =>
     }
   };
 
-const { host, label, internalInputsWrapper, errorMessage, helperText } = {
+const { host, label, internalInputsWrapper, errorMessage, helperText, passwordInput } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
+  passwordInput: { selector: 'descope-password' },
 };
 
 export const NewPasswordClass = compose(
@@ -68,6 +69,10 @@ export const NewPasswordClass = compose(
       errorMessageTextColor: { ...errorMessage, property: 'color' },
       hostWidth: { ...host, property: 'width' },
       hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
+      ],
       inputsRequiredIndicator: { ...host, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
     },
@@ -85,6 +90,9 @@ export const NewPasswordClass = compose(
 			max-width: 100%;
 			box-sizing: border-box;
 		}
+    :host ::part(error-message) {
+      direction: ltr;
+    }
 		${useHostExternalPadding(PasswordClass.cssVarList)}
 		vaadin-text-field {
 			padding: 0;
@@ -120,7 +128,7 @@ export const NewPasswordClass = compose(
 		}
 		descope-new-password-internal vaadin-password-field::before {
 			height: initial;
-		},
+		}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName,

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -113,9 +113,14 @@ class NewPasswordInternal extends BaseInputClass {
     this.inputs.forEach((input) => {
       const styleTag = document.createElement('style');
       styleTag.innerHTML = `
-				:host::part(required-indicator)::after {
+				:host ::part(required-indicator)::after {
 					content: var(${NewPasswordClass.cssVarList.inputsRequiredIndicator});
+          width: 1em;
+          text-align: center;
 				}
+        :host ::part(required-indicator) {
+          display: inline-flex;
+        }
 				`;
       input?.shadowRoot.appendChild(styleTag);
     });

package/src/components/descope-number-field/NumberFieldClass.js

@@ -9,6 +9,7 @@ import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import {
+  resetInputLabelPosition,
   resetInputOverrides,
   useHostExternalPadding,
 } from '../../helpers/themeHelpers/resetHelpers';
@@ -34,6 +35,7 @@ export const NumberFieldClass = compose(
           NumberFieldClass.cssVarList.inputOutlineOffset
         }));
 			}
+      ${resetInputLabelPosition('vaadin-number-field')}
 			${useHostExternalPadding(NumberFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,

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

@@ -11,6 +11,7 @@ import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import {
   resetInputCursor,
+  resetInputLabelPosition,
   resetInputFieldDefaultWidth,
 } from '../../helpers/themeHelpers/resetHelpers';
 
@@ -82,6 +83,7 @@ export const PasscodeClass = compose(
     mappings: {
       fontSize: [{ ...digitField, property: textVars.fontSize }, host],
       hostWidth: { property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
       fontFamily: [host, { ...label }],
       labelTextColor: [
         { ...label, property: 'color' },
@@ -178,6 +180,7 @@ export const PasscodeClass = compose(
 				box-shadow: none;
 			}
 
+      ${resetInputLabelPosition('vaadin-text-field')}
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],

package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js

@@ -26,7 +26,12 @@ class PasscodeInternal extends BaseInputClass {
 				display: flex;
 				width: 100%;
 				justify-content: space-between;
+        direction: ltr;
 			}
+
+      descope-text-field {
+        direction: ltr;
+      }
 		</style>
 		`;
 

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

@@ -8,7 +8,11 @@ import {
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import passwordDraggableMixin from './passwordDraggableMixin';
-import { resetInputCursor, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
+import {
+  resetInputLabelPosition,
+  resetInputCursor,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('password');
 
@@ -41,6 +45,7 @@ export const PasswordClass = compose(
     mappings: {
       hostWidth: { ...host, property: 'width' },
       hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: { ...host, property: 'direction' },
       fontSize: [{}, host],
       fontFamily: [label, inputField, errorMessage, helperText],
       inputHeight: { ...inputField, property: 'height' },
@@ -93,10 +98,11 @@ export const PasswordClass = compose(
 				display: inline-block;
 				max-width: 100%;
 				min-width: 10em;
-        box-sizing: border-box;        
+        box-sizing: border-box;
 			}
 			${useHostExternalPadding(PasswordClass.cssVarList)}
 			${resetInputCursor('vaadin-password-field')}
+      ${resetInputLabelPosition('vaadin-password-field')}
 
 			vaadin-password-field {
 				width: 100%;

package/src/components/descope-text/TextClass.js

@@ -45,6 +45,7 @@ export const TextClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
       fontSize: {},
       textColor: { property: 'color' },
       textLineHeight: { property: 'line-height' },

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

@@ -10,6 +10,7 @@ import { getComponentName } from '../../helpers/componentHelpers';
 import {
   resetInputContainer,
   resetInputCursor,
+  resetInputLabelPosition,
   resetInputField,
   resetInputPlaceholder,
   useHostExternalPadding,
@@ -42,6 +43,7 @@ export const TextAreaClass = compose(
     mappings: {
       hostWidth: { ...host, property: 'width' },
       hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: { ...host, property: 'direction' },
       fontSize: [host, textArea],
       fontFamily: [label, inputField, helperText, errorMessage],
       labelTextColor: [
@@ -76,11 +78,12 @@ export const TextAreaClass = compose(
 			:host {
 				display: inline-block;
 				max-width: 100%;
-        box-sizing: border-box;        
+        box-sizing: border-box;
 			}
 			textarea {
 				height: 100%;
 			}
+      ${resetInputLabelPosition('vaadin-text-area')}
 			${useHostExternalPadding(TextAreaClass.cssVarList)}
 			${resetInputContainer('vaadin-text-area')}
 			${resetInputField('vaadin-text-area')}

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 {
+  resetInputLabelPosition,
   resetInputOverrides,
   useHostExternalPadding,
 } from '../../helpers/themeHelpers/resetHelpers';
@@ -56,8 +57,9 @@ export const TextFieldClass = compose(
 				padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${
           TextFieldClass.cssVarList.inputOutlineOffset
         }));
-        box-sizing: border-box;        
+        box-sizing: border-box;
 			}
+      ${resetInputLabelPosition('vaadin-text-field')}
 			${useHostExternalPadding(TextFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,

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

@@ -17,6 +17,7 @@ export default {
 
   hostWidth: { ...host, property: 'width' },
   hostMinWidth: { ...host, property: 'min-width' },
+  hostDirection: { ...host, property: 'direction' },
 
   inputBackgroundColor: { ...inputField, property: 'background-color' },
 

package/src/components/descope-upload-file/UploadFileClass.js

@@ -2,6 +2,7 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
+import { ButtonClass } from '../descope-button/ButtonClass';
 import { getFileBase64, getFilename } from './helpers';
 
 export const componentName = getComponentName('upload-file');
@@ -190,6 +191,7 @@ class RawUploadFile extends BaseInputClass {
   }
 }
 
+const buttonVars = ButtonClass.cssVarList;
 const { host, wrapper, icon, title, description, requiredIndicator } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
@@ -212,6 +214,10 @@ export const UploadFileClass = compose(
       hostHeight: { ...host, property: 'height' },
       hostWidth: { ...host, property: 'width' },
       hostPadding: { property: 'padding' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
+      ],
       gap: { ...wrapper },
       lineHeight: { ...wrapper, property: 'line-height' },
       titleFontSize: { ...title, property: 'font-size' },

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

@@ -7,6 +7,7 @@ import { ComboBoxClass } from '../../descope-combo-box/ComboBoxClass';
 import CountryCodes from '../CountryCodes';
 import {
   resetInputCursor,
+  resetInputLabelPosition,
   resetInputFieldDefaultWidth,
   resetInputFieldInvalidBackgroundColor,
   useHostExternalPadding,
@@ -107,6 +108,7 @@ export const PhoneFieldClass = compose(
         { ...phoneInput, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
+      hostDirection: { ...host, property: 'direction' },
 
       inputBorderStyle: [
         { ...inputField, property: 'border-style' },
@@ -190,16 +192,15 @@ export const PhoneFieldClass = compose(
 			}
 			vaadin-text-field::part(input-field) {
 				padding: 0;
-				min-height: 0;
 				background: transparent;
 				overflow: hidden;
 			}
 			descope-phone-field-internal {
 				-webkit-mask-image: none;
 				padding: 0;
-				min-height: 0;
 				width: 100%;
 				height: 100%;
+        direction: ltr;
 			}
 			descope-phone-field-internal > div {
 				width: 100%;
@@ -230,6 +231,7 @@ export const PhoneFieldClass = compose(
 			vaadin-text-field::part(input-field)::after {
 				border: none;
 			}
+      ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName,

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

@@ -5,6 +5,7 @@ import { createProxy, createStyleMixin, draggableMixin, proxyInputMixin } from '
 import { TextFieldClass } from '../../descope-text-field/TextFieldClass';
 import CountryCodes from '../CountryCodes';
 import {
+  resetInputLabelPosition,
   resetInputCursor,
   resetInputFieldDefaultWidth,
   resetInputFieldInvalidBackgroundColor,
@@ -76,6 +77,7 @@ export const PhoneFieldInputBoxClass = compose(
       fontFamily: [label, errorMessage, helperText],
       hostWidth: { ...host, property: 'width' },
       hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: { ...host, property: 'direction' },
 
       inputBorderStyle: { ...inputField, property: 'border-style' },
       inputBorderWidth: { ...inputField, property: 'border-width' },
@@ -131,7 +133,6 @@ export const PhoneFieldInputBoxClass = compose(
     }
     vaadin-text-field::part(input-field) {
       padding: 0;
-      min-height: 0;
       background: transparent;
       overflow: hidden;
       -webkit-mask-image: none;
@@ -139,7 +140,6 @@ export const PhoneFieldInputBoxClass = compose(
     descope-phone-field-internal-input-box {
       -webkit-mask-image: none;
       padding: 0;
-      min-height: 0;
       width: 100%;
       height: 100%;
     }
@@ -158,6 +158,7 @@ export const PhoneFieldInputBoxClass = compose(
       ${textVars.inputOutlineOffset}: 0;
       ${textVars.inputBorderWidth}: 0;
       ${textVars.inputBorderRadius}: 0;
+      direction: ltr;
     }
     vaadin-text-field[readonly] > input:placeholder-shown {
       opacity: 1;
@@ -165,6 +166,7 @@ export const PhoneFieldInputBoxClass = compose(
     vaadin-text-field::part(input-field)::after {
       border: none;
     }
+    ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName,

package/src/helpers/themeHelpers/resetHelpers.js

@@ -98,3 +98,31 @@ export const resetInputOverrides = (name, cssVarList) => `
     ${resetInputElement(name)}
     ${resetInputFieldUnderlayingBorder(name)}
 `;
+
+// This function is used to support RTL correctly for input components.
+// It also fixes the error message to be displayed LTR since we currently
+// don't support RTL for error messages.
+export const resetInputLabelPosition = (name) => `
+    :host ::part(error-message) {
+      direction: ltr;
+    }
+    :host([required]) ::part(required-indicator) {
+      width: 1em;
+      display: inline-flex;
+    }
+    :host([required]) ::part(required-indicator)::after {
+      position: static;
+    }
+    :host([has-label]) ::part(label) {
+      padding-right: 0;
+      padding-bottom: 0;
+      display: flex;
+      width: 100%;
+    }
+    ${name} [slot="label"] {
+      max-width: calc(100% - 1em);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.5em;
+    }
+`;

package/src/theme/components/button.js

@@ -23,6 +23,7 @@ const button = {
   [compVars.cursor]: 'pointer',
   [compVars.hostHeight]: '3em',
   [compVars.hostWidth]: 'auto',
+  [compVars.hostDirection]: globalRefs.direction,
 
   [compVars.borderRadius]: globalRefs.radius.sm,
   [compVars.borderWidth]: globalRefs.border.xs,

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroup.js

@@ -7,6 +7,7 @@ const globalRefs = getThemeRefs(globals);
 const vars = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
+  [vars.hostDirection]: refs.direction,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js

@@ -7,6 +7,7 @@ const globalRefs = getThemeRefs(globals);
 export const vars = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
+  [vars.hostDirection]: 'inherit',
   [vars.backgroundColor]: globalRefs.colors.surface.light,
   [vars.labelTextColor]: globalRefs.colors.surface.contrast,
   [vars.borderColor]: globalRefs.colors.surface.main,

package/src/theme/components/checkbox.js

@@ -6,6 +6,7 @@ const checkboxSize = '1.35em';
 
 const checkbox = {
   [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,

package/src/theme/components/comboBox.js

@@ -8,6 +8,7 @@ const vars = ComboBoxClass.cssVarList;
 
 export const comboBox = {
   [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,
@@ -30,6 +31,8 @@ export const comboBox = {
   [vars.inputDropdownButtonCursor]: 'pointer',
   [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
+  [vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,
+  [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
 
   _readonly: {
     [vars.inputDropdownButtonCursor]: 'default',

package/src/theme/components/divider.js

@@ -16,6 +16,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
 const divider = {
   ...helperTheme,
 
+  [compVars.hostDirection]: globalRefs.direction,
   [compVars.alignItems]: 'center',
   [compVars.flexDirection]: 'row',
   [compVars.alignSelf]: 'stretch',
@@ -26,6 +27,7 @@ const divider = {
   [compVars.labelTextWidth]: 'fit-content',
   [compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
   [compVars.labelTextHorizontalSpacing]: helperRefs.spacing,
+  [compVars.textAlign]: 'center',
 
   _vertical: {
     [compVars.minHeight]: '200px',

package/src/theme/components/emailField.js

@@ -6,6 +6,7 @@ const vars = EmailFieldClass.cssVarList;
 const emailField = {
   [vars.hostWidth]: refs.width,
   [vars.hostMinWidth]: refs.minWidth,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,

package/src/theme/components/inputWrapper.js

@@ -32,6 +32,8 @@ const [theme, refs, vars] = createHelperVars(
 
     fontFamily: globalRefs.fonts.font1.family,
 
+    direction: globalRefs.direction,
+
     size: {
       xs: { fontSize: '12px' },
       sm: { fontSize: '14px' },

package/src/theme/components/link.js

@@ -6,6 +6,7 @@ const globalRefs = getThemeRefs(globals);
 const vars = LinkClass.cssVarList;
 
 const link = {
+  [vars.hostDirection]: globalRefs.direction,
   [vars.cursor]: 'pointer',
 
   [vars.textColor]: globalRefs.colors.primary.main,

package/src/theme/components/newPassword.js

@@ -6,6 +6,7 @@ const vars = NewPasswordClass.cssVarList;
 const newPassword = {
   [vars.hostWidth]: refs.width,
   [vars.hostMinWidth]: refs.minWidth,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.spaceBetweenInputs]: '1em',

package/src/theme/components/numberField.js

@@ -6,6 +6,7 @@ const vars = NumberFieldClass.cssVarList;
 const numberField = {
   [vars.hostWidth]: refs.width,
   [vars.hostMinWidth]: refs.minWidth,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,

package/src/theme/components/passcode.js

@@ -4,6 +4,7 @@ import { refs } from './inputWrapper';
 const vars = PasscodeClass.cssVarList;
 
 const passcode = {
+  [vars.hostDirection]: refs.direction,
   [vars.fontFamily]: refs.fontFamily,
   [vars.fontSize]: refs.fontSize,
   [vars.labelTextColor]: refs.labelTextColor,

package/src/theme/components/password.js

@@ -8,6 +8,7 @@ const vars = PasswordClass.cssVarList;
 
 const password = {
   [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,

package/src/theme/components/phoneField.js

@@ -5,6 +5,7 @@ const vars = PhoneFieldClass.cssVarList;
 
 const phoneField = {
   [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,

package/src/theme/components/phoneInputBoxField.js

@@ -6,6 +6,7 @@ const vars = PhoneFieldInputBoxClass.cssVarList;
 const phoneInputBoxField = {
   [vars.hostWidth]: '16em',
   [vars.hostMinWidth]: refs.minWidth,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,

package/src/theme/components/switchToggle.js

@@ -11,6 +11,7 @@ const vars = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
   [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
 

package/src/theme/components/text.js

@@ -6,6 +6,7 @@ const globalRefs = getThemeRefs(globals);
 const vars = TextClass.cssVarList;
 
 const text = {
+  [vars.hostDirection]: globalRefs.direction,
   [vars.textLineHeight]: '1.35em',
   [vars.textAlign]: 'left',
   [vars.textColor]: globalRefs.colors.surface.dark,

package/src/theme/components/textArea.js

@@ -9,6 +9,7 @@ const vars = TextAreaClass.cssVarList;
 const textArea = {
   [vars.hostWidth]: refs.width,
   [vars.hostMinWidth]: refs.minWidth,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,

package/src/theme/components/textField.js

@@ -6,6 +6,7 @@ const vars = TextFieldClass.cssVarList;
 export const textField = {
   [vars.hostWidth]: refs.width,
   [vars.hostMinWidth]: refs.minWidth,
+  [vars.hostDirection]: refs.direction,
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,