@descope/web-components-ui 1.0.233 → 1.0.234

package/dist/cjs/index.cjs.js

@@ -350,6 +350,8 @@ const genColors = (colors) => {
   }, {});
 };
 
+const direction = 'ltr';
+
 const colors = genColors({
   surface: {
     main: 'lightgray',
@@ -495,6 +497,7 @@ const globals = {
   radius,
   shadow,
   fonts,
+  direction,
 };
 const vars$u = getThemeVars(globals);
 
@@ -2412,8 +2415,9 @@ let loadingIndicatorStyles;
 const ButtonClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host$g, property: 'width' },
+      hostWidth: { property: 'width' },
       hostHeight: { property: 'height' },
+      hostDirection: { ...host$g, property: 'direction' },
       fontSize: {},
       fontFamily: {},
 
@@ -2452,6 +2456,9 @@ const ButtonClass = compose(
 			:host {
 				padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));
 			}
+      :host([full-width="true"]) {
+        width: var(${ButtonClass.cssVarList.hostWidth});
+      }
 			vaadin-button {
 				height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
 			}
@@ -2519,6 +2526,7 @@ const button = {
   [compVars$4.cursor]: 'pointer',
   [compVars$4.hostHeight]: '3em',
   [compVars$4.hostWidth]: 'auto',
+  [compVars$4.hostDirection]: globalRefs$f.direction,
 
   [compVars$4.borderRadius]: globalRefs$f.radius.sm,
   [compVars$4.borderWidth]: globalRefs$f.border.xs,
@@ -2636,6 +2644,7 @@ var textFieldMappings = {
 
   hostWidth: { ...host$f, property: 'width' },
   hostMinWidth: { ...host$f, property: 'min-width' },
+  hostDirection: { ...host$f, property: 'direction' },
 
   inputBackgroundColor: { ...inputField$5, property: 'background-color' },
 
@@ -2772,6 +2781,34 @@ const resetInputOverrides = (name, cssVarList) => `
     ${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.
+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;
+    }
+`;
+
 const componentName$z = getComponentName('text-field');
 
 const observedAttrs = ['type'];
@@ -2815,8 +2852,9 @@ 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)}
 		`,
@@ -2855,6 +2893,8 @@ const [theme$1, refs, vars$s] = createHelperVars(
 
     fontFamily: globalRefs$e.fonts.font1.family,
 
+    direction: globalRefs$e.direction,
+
     size: {
       xs: { fontSize: '12px' },
       sm: { fontSize: '14px' },
@@ -2905,6 +2945,7 @@ const vars$r = TextFieldClass.cssVarList;
 const textField = {
   [vars$r.hostWidth]: refs.width,
   [vars$r.hostMinWidth]: refs.minWidth,
+  [vars$r.hostDirection]: refs.direction,
   [vars$r.fontSize]: refs.fontSize,
   [vars$r.fontFamily]: refs.fontFamily,
   [vars$r.labelTextColor]: refs.labelTextColor,
@@ -2997,6 +3038,7 @@ const PasswordClass = compose(
     mappings: {
       hostWidth: { ...host$e, property: 'width' },
       hostMinWidth: { ...host$e, property: 'min-width' },
+      hostDirection: { ...host$e, property: 'direction' },
       fontSize: [{}, host$e],
       fontFamily: [label$7, inputField$4, errorMessage$9, helperText$7],
       inputHeight: { ...inputField$4, property: 'height' },
@@ -3049,10 +3091,11 @@ 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%;
@@ -3104,6 +3147,7 @@ const vars$q = PasswordClass.cssVarList;
 
 const password = {
   [vars$q.hostWidth]: refs.width,
+  [vars$q.hostDirection]: refs.direction,
   [vars$q.fontSize]: refs.fontSize,
   [vars$q.fontFamily]: refs.fontFamily,
   [vars$q.labelTextColor]: refs.labelTextColor,
@@ -3153,6 +3197,7 @@ const NumberFieldClass = compose(
           NumberFieldClass.cssVarList.inputOutlineOffset
         }));
 			}
+      ${resetInputLabelPosition('vaadin-number-field')}
 			${useHostExternalPadding(NumberFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
@@ -3166,6 +3211,7 @@ const vars$p = NumberFieldClass.cssVarList;
 const numberField = {
   [vars$p.hostWidth]: refs.width,
   [vars$p.hostMinWidth]: refs.minWidth,
+  [vars$p.hostDirection]: refs.direction,
   [vars$p.fontSize]: refs.fontSize,
   [vars$p.fontFamily]: refs.fontFamily,
   [vars$p.labelTextColor]: refs.labelTextColor,
@@ -3220,8 +3266,9 @@ 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)}
 		`,
@@ -3235,6 +3282,7 @@ const vars$o = EmailFieldClass.cssVarList;
 const emailField = {
   [vars$o.hostWidth]: refs.width,
   [vars$o.hostMinWidth]: refs.minWidth,
+  [vars$o.hostDirection]: refs.direction,
   [vars$o.fontSize]: refs.fontSize,
   [vars$o.fontFamily]: refs.fontFamily,
   [vars$o.labelTextColor]: refs.labelTextColor,
@@ -3288,6 +3336,7 @@ const TextAreaClass = compose(
     mappings: {
       hostWidth: { ...host$d, property: 'width' },
       hostMinWidth: { ...host$d, property: 'min-width' },
+      hostDirection: { ...host$d, property: 'direction' },
       fontSize: [host$d, textArea$2],
       fontFamily: [label$6, inputField$3, helperText$6, errorMessage$8],
       labelTextColor: [
@@ -3322,11 +3371,12 @@ 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')}
@@ -3344,6 +3394,7 @@ const vars$n = TextAreaClass.cssVarList;
 const textArea = {
   [vars$n.hostWidth]: refs.width,
   [vars$n.hostMinWidth]: refs.minWidth,
+  [vars$n.hostDirection]: refs.direction,
   [vars$n.fontSize]: refs.fontSize,
   [vars$n.fontFamily]: refs.fontFamily,
   [vars$n.labelTextColor]: refs.labelTextColor,
@@ -3466,7 +3517,7 @@ vaadin-checkbox [slot="label"] {
   padding: 0;
 }
 [required] vaadin-checkbox [slot="label"]:not(:empty) {
-	padding-right: 1em;
+	padding-inline-end: 1em;
 }
 descope-boolean-field-internal {
   -webkit-mask-image: none;
@@ -3500,12 +3551,13 @@ const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$c, property: 'width' },
+      hostDirection: { ...host$c, property: 'direction' },
 
       fontSize: [host$c, checkboxElement, checkboxLabel$1],
       fontFamily: [checkboxLabel$1, helperText$5, errorMessage$7],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
-      labelSpacing: { ...checkboxLabel$1, property: 'padding-left' },
+      labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
       labelLineHeight: { ...checkboxLabel$1, property: 'line-height' },
       labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
       labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
@@ -3545,12 +3597,16 @@ const CheckboxClass = compose(
     style: () => `
 			${commonStyles}
       ${useHostExternalPadding(CheckboxClass.cssVarList)}
-      
+
       :host {
 				display: inline-flex;
 				max-width: 100%;
       }
 
+      :host ::part(error-message) {
+        direction: ltr;
+      }
+
       vaadin-text-field {
         width: 100%;
       }
@@ -3584,6 +3640,7 @@ const checkboxSize = '1.35em';
 
 const checkbox = {
   [vars$m.hostWidth]: refs.width,
+  [vars$m.hostDirection]: refs.direction,
   [vars$m.fontSize]: refs.fontSize,
   [vars$m.fontFamily]: refs.fontFamily,
   [vars$m.labelTextColor]: refs.labelTextColor,
@@ -3644,12 +3701,13 @@ const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$b, property: 'width' },
+      hostDirection: { ...host$b, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
       fontFamily: [checkboxLabel, helperText$4, errorMessage$6],
 
       labelTextColor: { ...checkboxLabel, property: 'color' },
-      labelSpacing: { ...checkboxLabel, property: 'padding-left' },
+      labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
       labelLineHeight: { ...checkboxLabel, property: 'line-height' },
       labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
       labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
@@ -3701,6 +3759,10 @@ const SwitchToggleClass = compose(
 				max-width: 100%;
       }
 
+      :host ::part(error-message) {
+        direction: ltr;
+      }
+
       vaadin-text-field {
         width: 100%;
       }
@@ -3757,6 +3819,7 @@ const vars$l = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
   [vars$l.hostWidth]: refs.width,
+  [vars$l.hostDirection]: refs.direction,
   [vars$l.fontSize]: refs.fontSize,
   [vars$l.fontFamily]: refs.fontFamily,
 
@@ -4123,6 +4186,7 @@ const TextClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
       fontSize: {},
       textColor: { property: 'color' },
       textLineHeight: { property: 'line-height' },
@@ -4147,6 +4211,7 @@ const globalRefs$9 = getThemeRefs(globals);
 const vars$h = TextClass.cssVarList;
 
 const text$2 = {
+  [vars$h.hostDirection]: globalRefs$9.direction,
   [vars$h.textLineHeight]: '1.35em',
   [vars$h.textAlign]: 'left',
   [vars$h.textColor]: globalRefs$9.colors.surface.dark,
@@ -4286,6 +4351,7 @@ const LinkClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$a, property: 'width' },
+      hostDirection: { ...text$1, property: 'direction' },
       textAlign: wrapper$1,
       textColor: [
         { ...anchor, property: 'color' },
@@ -4302,6 +4368,7 @@ const globalRefs$8 = getThemeRefs(globals);
 const vars$g = LinkClass.cssVarList;
 
 const link = {
+  [vars$g.hostDirection]: globalRefs$8.direction,
   [vars$g.cursor]: 'pointer',
 
   [vars$g.textColor]: globalRefs$8.colors.primary.main,
@@ -4384,6 +4451,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$l, baseS
   }
 }
 
+const textVars$3 = TextClass.cssVarList;
 const { host: host$9, before, after: after$1, text } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
@@ -4396,11 +4464,13 @@ const DividerClass = compose(
     mappings: {
       hostWidth: { ...host$9, property: 'width' },
       hostPadding: { ...host$9, property: 'padding' },
+      hostDirection: { ...text, property: 'direction' },
 
       minHeight: {},
       alignItems: {},
       alignSelf: {},
       flexDirection: {},
+      textAlign: { ...text, property: textVars$3.textAlign },
 
       labelTextWidth: { ...text, property: 'width' },
       labelTextMaxWidth: { ...text, property: 'max-width' },
@@ -4449,6 +4519,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
 const divider = {
   ...helperTheme$1,
 
+  [compVars$2.hostDirection]: globalRefs$7.direction,
   [compVars$2.alignItems]: 'center',
   [compVars$2.flexDirection]: 'row',
   [compVars$2.alignSelf]: 'stretch',
@@ -4459,6 +4530,7 @@ const divider = {
   [compVars$2.labelTextWidth]: 'fit-content',
   [compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
   [compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
+  [compVars$2.textAlign]: 'center',
 
   _vertical: {
     [compVars$2.minHeight]: '200px',
@@ -4557,6 +4629,7 @@ const PasscodeClass = compose(
     mappings: {
       fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$8],
       hostWidth: { property: 'width' },
+      hostDirection: { ...host$8, property: 'direction' },
       fontFamily: [host$8, { ...label$5 }],
       labelTextColor: [
         { ...label$5, property: 'color' },
@@ -4653,6 +4726,7 @@ const PasscodeClass = compose(
 				box-shadow: none;
 			}
 
+      ${resetInputLabelPosition('vaadin-text-field')}
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
@@ -4663,6 +4737,7 @@ const PasscodeClass = compose(
 const vars$e = PasscodeClass.cssVarList;
 
 const passcode = {
+  [vars$e.hostDirection]: refs.direction,
   [vars$e.fontFamily]: refs.fontFamily,
   [vars$e.fontSize]: refs.fontSize,
   [vars$e.labelTextColor]: refs.labelTextColor,
@@ -5147,6 +5222,7 @@ const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$6, property: 'width' },
+      hostDirection: { ...host$6, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
       fontSize: [{}, host$6],
       fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
@@ -5190,6 +5266,12 @@ const ComboBoxClass = compose(
       overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
       overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
       overlayItemBoxShadow: { property: () => ComboBoxClass.cssVarList.overlay.itemBoxShadow },
+      overlayItemPaddingInlineStart: {
+        property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
+      },
+      overlayItemPaddingInlineEnd: {
+        property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
+      },
     },
   }),
   draggableMixin,
@@ -5204,6 +5286,11 @@ const ComboBoxClass = compose(
       fontFamily: { selector: 'vaadin-combo-box-item' },
       fontSize: { selector: 'vaadin-combo-box-item' },
       itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
+      itemPaddingInlineStart: {
+        selector: 'vaadin-combo-box-item',
+        property: 'padding-inline-start',
+      },
+      itemPaddingInlineEnd: { selector: 'vaadin-combo-box-item', property: 'padding-inline-end' },
     },
     forward: {
       include: false,
@@ -5245,6 +5332,7 @@ const ComboBoxClass = compose(
 			padding: 0;
 			box-shadow: none;
 		}
+    ${resetInputLabelPosition('vaadin-combo-box')}
 		`,
     // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
     // with the same name. Including it will cause Vaadin to calculate NaN size,
@@ -5261,6 +5349,7 @@ const vars$b = ComboBoxClass.cssVarList;
 
 const comboBox = {
   [vars$b.hostWidth]: refs.width,
+  [vars$b.hostDirection]: refs.direction,
   [vars$b.fontSize]: refs.fontSize,
   [vars$b.fontFamily]: refs.fontFamily,
   [vars$b.labelTextColor]: refs.labelTextColor,
@@ -5283,6 +5372,8 @@ const comboBox = {
   [vars$b.inputDropdownButtonCursor]: 'pointer',
   [vars$b.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars$b.inputDropdownButtonOffset]: globalRefs$4.spacing.xs,
+  [vars$b.overlayItemPaddingInlineStart]: globalRefs$4.spacing.xs,
+  [vars$b.overlayItemPaddingInlineEnd]: globalRefs$4.spacing.lg,
 
   _readonly: {
     [vars$b.inputDropdownButtonCursor]: 'default',
@@ -6672,6 +6763,7 @@ const PhoneFieldClass = compose(
         { ...phoneInput$1, property: 'width' },
         { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
       ],
+      hostDirection: { ...host$5, property: 'direction' },
 
       inputBorderStyle: [
         { ...inputField$1, property: 'border-style' },
@@ -6755,16 +6847,15 @@ 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%;
@@ -6795,6 +6886,7 @@ const PhoneFieldClass = compose(
 			vaadin-text-field::part(input-field)::after {
 				border: none;
 			}
+      ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$d,
@@ -6805,6 +6897,7 @@ const vars$9 = PhoneFieldClass.cssVarList;
 
 const phoneField = {
   [vars$9.hostWidth]: refs.width,
+  [vars$9.hostDirection]: refs.direction,
   [vars$9.fontSize]: refs.fontSize,
   [vars$9.fontFamily]: refs.fontFamily,
   [vars$9.labelTextColor]: refs.labelTextColor,
@@ -6904,6 +6997,7 @@ const PhoneFieldInputBoxClass = compose(
       fontFamily: [label$2, errorMessage$2, helperText$1],
       hostWidth: { ...host$4, property: 'width' },
       hostMinWidth: { ...host$4, property: 'min-width' },
+      hostDirection: { ...host$4, property: 'direction' },
 
       inputBorderStyle: { ...inputField, property: 'border-style' },
       inputBorderWidth: { ...inputField, property: 'border-width' },
@@ -6959,7 +7053,6 @@ const PhoneFieldInputBoxClass = compose(
     }
     vaadin-text-field::part(input-field) {
       padding: 0;
-      min-height: 0;
       background: transparent;
       overflow: hidden;
       -webkit-mask-image: none;
@@ -6967,7 +7060,6 @@ const PhoneFieldInputBoxClass = compose(
     descope-phone-field-internal-input-box {
       -webkit-mask-image: none;
       padding: 0;
-      min-height: 0;
       width: 100%;
       height: 100%;
     }
@@ -6986,6 +7078,7 @@ const PhoneFieldInputBoxClass = compose(
       ${textVars.inputOutlineOffset}: 0;
       ${textVars.inputBorderWidth}: 0;
       ${textVars.inputBorderRadius}: 0;
+      direction: ltr;
     }
     vaadin-text-field[readonly] > input:placeholder-shown {
       opacity: 1;
@@ -6993,6 +7086,7 @@ const PhoneFieldInputBoxClass = compose(
     vaadin-text-field::part(input-field)::after {
       border: none;
     }
+    ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$b,
@@ -7004,6 +7098,7 @@ const vars$8 = PhoneFieldInputBoxClass.cssVarList;
 const phoneInputBoxField = {
   [vars$8.hostWidth]: '16em',
   [vars$8.hostMinWidth]: refs.minWidth,
+  [vars$8.hostDirection]: refs.direction,
   [vars$8.fontSize]: refs.fontSize,
   [vars$8.fontFamily]: refs.fontFamily,
   [vars$8.labelTextColor]: refs.labelTextColor,
@@ -7072,12 +7167,13 @@ const customMixin$2 = (superclass) =>
     }
   };
 
-const { host: host$3, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
+const { host: host$3, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, 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' },
 };
 
 const NewPasswordClass = compose(
@@ -7095,6 +7191,10 @@ const NewPasswordClass = compose(
       errorMessageTextColor: { ...errorMessage$1, property: 'color' },
       hostWidth: { ...host$3, property: 'width' },
       hostMinWidth: { ...host$3, property: 'min-width' },
+      hostDirection: [
+        { ...host$3, property: 'direction' },
+        { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
+      ],
       inputsRequiredIndicator: { ...host$3, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
     },
@@ -7112,6 +7212,9 @@ const NewPasswordClass = compose(
 			max-width: 100%;
 			box-sizing: border-box;
 		}
+    :host ::part(error-message) {
+      direction: ltr;
+    }
 		${useHostExternalPadding(PasswordClass.cssVarList)}
 		vaadin-text-field {
 			padding: 0;
@@ -7147,7 +7250,7 @@ const NewPasswordClass = compose(
 		}
 		descope-new-password-internal vaadin-password-field::before {
 			height: initial;
-		},
+		}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$9,
@@ -7159,6 +7262,7 @@ const vars$7 = NewPasswordClass.cssVarList;
 const newPassword = {
   [vars$7.hostWidth]: refs.width,
   [vars$7.hostMinWidth]: refs.minWidth,
+  [vars$7.hostDirection]: refs.direction,
   [vars$7.fontSize]: refs.fontSize,
   [vars$7.fontFamily]: refs.fontFamily,
   [vars$7.spaceBetweenInputs]: '1em',
@@ -7376,6 +7480,7 @@ class RawUploadFile extends BaseInputClass {
   }
 }
 
+const buttonVars = ButtonClass.cssVarList;
 const { host: host$2, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
@@ -7398,6 +7503,10 @@ const UploadFileClass = compose(
       hostHeight: { ...host$2, property: 'height' },
       hostWidth: { ...host$2, property: 'width' },
       hostPadding: { property: 'padding' },
+      hostDirection: [
+        { ...host$2, property: 'direction' },
+        { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
+      ],
       gap: { ...wrapper },
       lineHeight: { ...wrapper, property: 'line-height' },
       titleFontSize: { ...title, property: 'font-size' },
@@ -7418,6 +7527,7 @@ const UploadFileClass = compose(
 const vars$6 = UploadFileClass.cssVarList;
 
 const uploadFile = {
+  [vars$6.hostDirection]: refs.direction,
   [vars$6.labelTextColor]: refs.labelTextColor,
   [vars$6.fontFamily]: refs.fontFamily,
 
@@ -7552,6 +7662,10 @@ class RawSelectItem extends createBaseClass({
 const ButtonSelectionGroupItemClass = compose(
   createStyleMixin({
     mappings: {
+      hostDirection: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.hostDirection,
+      },
       backgroundColor: {
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.backgroundColor,
@@ -7583,6 +7697,7 @@ const globalRefs$3 = getThemeRefs(globals);
 const vars$5 = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
+  [vars$5.hostDirection]: 'inherit',
   [vars$5.backgroundColor]: globalRefs$3.colors.surface.light,
   [vars$5.labelTextColor]: globalRefs$3.colors.surface.contrast,
   [vars$5.borderColor]: globalRefs$3.colors.surface.main,
@@ -7863,6 +7978,7 @@ const ButtonSelectionGroupClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$1, property: 'width' },
+      hostDirection: { ...host$1, property: 'direction' },
       fontFamily: host$1,
       labelTextColor: [
         { ...label, property: 'color' },
@@ -7932,6 +8048,7 @@ const ButtonSelectionGroupClass = compose(
 				box-shadow: none;
 			}
 
+      ${resetInputLabelPosition('vaadin-text-field')}
 			${resetInputCursor('vaadin-text-field')}
     `,
     excludeAttrsSync: ['tabindex'],
@@ -7943,6 +8060,7 @@ const globalRefs$2 = getThemeRefs(globals);
 const vars$4 = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
+  [vars$4.hostDirection]: refs.direction,
   [vars$4.fontFamily]: refs.fontFamily,
   [vars$4.labelTextColor]: refs.labelTextColor,
   [vars$4.labelRequiredIndicator]: refs.requiredIndicator,