@descope/web-components-ui 1.0.232 → 1.0.234

package/dist/index.esm.js

@@ -8,7 +8,7 @@ import '@vaadin/password-field';
 import '@vaadin/text-area';
 import '@vaadin/combo-box';
 import '@vaadin/grid';
-import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
+import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
 import merge from 'lodash.merge';
 import set from 'lodash.set';
@@ -1287,8 +1287,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: {},
 
@@ -1327,6 +1328,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}));
 			}
@@ -1591,6 +1595,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;
+    }
+`;
+
 var commonStyles = `
 :host {
 	display: inline-flex;
@@ -1633,7 +1665,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;
@@ -1667,12 +1699,13 @@ const CheckboxClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$f, property: 'width' },
+      hostDirection: { ...host$f, property: 'direction' },
 
       fontSize: [host$f, checkboxElement, checkboxLabel$1],
       fontFamily: [checkboxLabel$1, helperText$8, errorMessage$a],
 
       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$a, property: 'content' },
@@ -1712,12 +1745,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%;
       }
@@ -1776,12 +1813,13 @@ const SwitchToggleClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$e, property: 'width' },
+      hostDirection: { ...host$e, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
       fontFamily: [checkboxLabel, helperText$7, errorMessage$9],
 
       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$9, property: 'content' },
@@ -1833,6 +1871,10 @@ const SwitchToggleClass = compose(
 				max-width: 100%;
       }
 
+      :host ::part(error-message) {
+        direction: ltr;
+      }
+
       vaadin-text-field {
         width: 100%;
       }
@@ -2000,7 +2042,7 @@ customElements.define(componentName$x, LoaderRadialClass);
 
 const componentName$w = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$w, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -2054,8 +2096,72 @@ const ContainerClass = compose(
 
 customElements.define(componentName$w, ContainerClass);
 
-const componentName$v = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
+// eslint-disable-next-line max-classes-per-file
+
+const componentName$v = getComponentName('text');
+
+class RawText extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > slot' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host {
+				display: inline-block;
+			}
+			:host > slot {
+				width: 100%;
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+		`;
+  }
+}
+
+const customTextMixin = (superclass) =>
+  class CustomTextMixin extends superclass {
+    get hideWhenEmpty() {
+      return this.getAttribute('hide-when-empty') === 'true';
+    }
+
+    init() {
+      super.init();
+
+      observeChildren(this, () => {
+        const hasChildren = !!this.childNodes.length;
+        this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
+      });
+    }
+  };
+
+const TextClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textLetterSpacing: { property: 'letter-spacing' },
+      textShadow: {},
+      textAlign: {},
+      textTransform: {},
+      fontFamily: {},
+      fontStyle: {},
+      fontWeight: {},
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customTextMixin
+)(RawText);
+
+const componentName$u = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -2100,6 +2206,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$v, baseS
   }
 }
 
+const textVars$3 = TextClass.cssVarList;
 const { host: host$c, before, after, text: text$3 } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
@@ -2112,11 +2219,13 @@ const DividerClass = compose(
     mappings: {
       hostWidth: { ...host$c, property: 'width' },
       hostPadding: { ...host$c, property: 'padding' },
+      hostDirection: { ...text$3, property: 'direction' },
 
       minHeight: {},
       alignItems: {},
       alignSelf: {},
       flexDirection: {},
+      textAlign: { ...text$3, property: textVars$3.textAlign },
 
       labelTextWidth: { ...text$3, property: 'width' },
       labelTextMaxWidth: { ...text$3, property: 'max-width' },
@@ -2151,72 +2260,9 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-// eslint-disable-next-line max-classes-per-file
+customElements.define(componentName$v, TextClass);
 
-const componentName$u = getComponentName('text');
-
-class RawText extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > slot' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host {
-				display: inline-block;
-			}
-			:host > slot {
-				width: 100%;
-				display: inline-block;
-			}
-		</style>
-		<slot></slot>
-		`;
-  }
-}
-
-const customTextMixin = (superclass) =>
-  class CustomTextMixin extends superclass {
-    get hideWhenEmpty() {
-      return this.getAttribute('hide-when-empty') === 'true';
-    }
-
-    init() {
-      super.init();
-
-      observeChildren(this, () => {
-        const hasChildren = !!this.childNodes.length;
-        this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
-      });
-    }
-  };
-
-const TextClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: { selector: () => ':host', property: 'width' },
-      fontSize: {},
-      textColor: { property: 'color' },
-      textLineHeight: { property: 'line-height' },
-      textLetterSpacing: { property: 'letter-spacing' },
-      textShadow: {},
-      textAlign: {},
-      textTransform: {},
-      fontFamily: {},
-      fontStyle: {},
-      fontWeight: {},
-      borderWidth: {},
-      borderStyle: {},
-      borderColor: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-  customTextMixin
-)(RawText);
-
-customElements.define(componentName$u, TextClass);
-
-customElements.define(componentName$v, DividerClass);
+customElements.define(componentName$u, DividerClass);
 
 const { host: host$b, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$8, inputField: inputField$5, input, helperText: helperText$6, errorMessage: errorMessage$8 } =
   {
@@ -2237,6 +2283,7 @@ var textFieldMappings = {
 
   hostWidth: { ...host$b, property: 'width' },
   hostMinWidth: { ...host$b, property: 'min-width' },
+  hostDirection: { ...host$b, property: 'direction' },
 
   inputBackgroundColor: { ...inputField$5, property: 'background-color' },
 
@@ -2300,8 +2347,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)}
 		`,
@@ -2366,6 +2414,7 @@ const LinkClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$a, property: 'width' },
+      hostDirection: { ...text$2, property: 'direction' },
       textAlign: wrapper$1,
       textColor: [
         { ...anchor, property: 'color' },
@@ -2471,6 +2520,7 @@ const NumberFieldClass = compose(
           NumberFieldClass.cssVarList.inputOutlineOffset
         }));
 			}
+      ${resetInputLabelPosition('vaadin-number-field')}
 			${useHostExternalPadding(NumberFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
@@ -2520,7 +2570,12 @@ class PasscodeInternal extends BaseInputClass$4 {
 				display: flex;
 				width: 100%;
 				justify-content: space-between;
+        direction: ltr;
 			}
+
+      descope-text-field {
+        direction: ltr;
+      }
 		</style>
 		`;
 
@@ -2743,8 +2798,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)}
 		`,
@@ -2821,6 +2877,7 @@ const PasscodeClass = compose(
     mappings: {
       fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$9],
       hostWidth: { property: 'width' },
+      hostDirection: { ...host$9, property: 'direction' },
       fontFamily: [host$9, { ...label$7 }],
       labelTextColor: [
         { ...label$7, property: 'color' },
@@ -2917,6 +2974,7 @@ const PasscodeClass = compose(
 				box-shadow: none;
 			}
 
+      ${resetInputLabelPosition('vaadin-text-field')}
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
@@ -2995,6 +3053,7 @@ const PasswordClass = compose(
     mappings: {
       hostWidth: { ...host$8, property: 'width' },
       hostMinWidth: { ...host$8, property: 'min-width' },
+      hostDirection: { ...host$8, property: 'direction' },
       fontSize: [{}, host$8],
       fontFamily: [label$6, inputField$4, errorMessage$6, helperText$5],
       inputHeight: { ...inputField$4, property: 'height' },
@@ -3047,10 +3106,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%;
@@ -3126,6 +3186,7 @@ const TextAreaClass = compose(
     mappings: {
       hostWidth: { ...host$7, property: 'width' },
       hostMinWidth: { ...host$7, property: 'min-width' },
+      hostDirection: { ...host$7, property: 'direction' },
       fontSize: [host$7, textArea$2],
       fontFamily: [label$5, inputField$3, helperText$4, errorMessage$5],
       labelTextColor: [
@@ -3160,11 +3221,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')}
@@ -3471,6 +3533,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],
@@ -3514,6 +3577,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,
@@ -3528,6 +3597,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,
@@ -3569,6 +3643,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,
@@ -5101,6 +5176,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' },
@@ -5184,16 +5260,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%;
@@ -5224,6 +5299,7 @@ const PhoneFieldClass = compose(
 			vaadin-text-field::part(input-field)::after {
 				border: none;
 			}
+      ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$g,
@@ -5456,6 +5532,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' },
@@ -5511,7 +5588,6 @@ const PhoneFieldInputBoxClass = compose(
     }
     vaadin-text-field::part(input-field) {
       padding: 0;
-      min-height: 0;
       background: transparent;
       overflow: hidden;
       -webkit-mask-image: none;
@@ -5519,7 +5595,6 @@ const PhoneFieldInputBoxClass = compose(
     descope-phone-field-internal-input-box {
       -webkit-mask-image: none;
       padding: 0;
-      min-height: 0;
       width: 100%;
       height: 100%;
     }
@@ -5538,6 +5613,7 @@ const PhoneFieldInputBoxClass = compose(
       ${textVars.inputOutlineOffset}: 0;
       ${textVars.inputBorderWidth}: 0;
       ${textVars.inputBorderRadius}: 0;
+      direction: ltr;
     }
     vaadin-text-field[readonly] > input:placeholder-shown {
       opacity: 1;
@@ -5545,6 +5621,7 @@ const PhoneFieldInputBoxClass = compose(
     vaadin-text-field::part(input-field)::after {
       border: none;
     }
+    ${resetInputLabelPosition('vaadin-text-field')}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$e,
@@ -5595,12 +5672,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(
@@ -5618,6 +5696,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' },
     },
@@ -5635,6 +5717,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;
@@ -5670,7 +5755,7 @@ const NewPasswordClass = compose(
 		}
 		descope-new-password-internal vaadin-password-field::before {
 			height: initial;
-		},
+		}
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$c,
@@ -5787,9 +5872,14 @@ class NewPasswordInternal extends BaseInputClass$1 {
     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);
     });
@@ -6219,6 +6309,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' },
@@ -6241,6 +6332,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' },
@@ -6517,6 +6612,7 @@ const ButtonSelectionGroupClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host$1, property: 'width' },
+      hostDirection: { ...host$1, property: 'direction' },
       fontFamily: host$1,
       labelTextColor: [
         { ...label, property: 'color' },
@@ -6586,6 +6682,7 @@ const ButtonSelectionGroupClass = compose(
 				box-shadow: none;
 			}
 
+      ${resetInputLabelPosition('vaadin-text-field')}
 			${resetInputCursor('vaadin-text-field')}
     `,
     excludeAttrsSync: ['tabindex'],
@@ -6668,6 +6765,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,
@@ -6698,14 +6799,14 @@ customElements.define(componentName$7, ButtonSelectionGroupItemClass);
 
 const componentName$6 = getComponentName('grid-text-column');
 
-class GridTextColumnClass extends GridColumn {}
+class GridTextColumnClass extends GridSortColumn {}
 
 customElements.define(componentName$6, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
 const componentName$5 = getComponentName('grid-status-column');
-class GridStatusColumnClass extends GridColumn {
+class GridStatusColumnClass extends GridSortColumn {
   _defaultRenderer(cell, _col, model) {
     const contentAttr = this.getAttribute('status');
     if (!contentAttr) {
@@ -6803,6 +6904,9 @@ const GridMixin = (superclass) =>
       super.init?.();
       this.handleColumns();
       this.forwardSelectedItemsChange();
+
+      // disable the grid sort
+      this.baseElement._mapSorters = () => {};
     }
 
     forwardSelectedItemsChange() {
@@ -7201,6 +7305,8 @@ const genColors = (colors) => {
   }, {});
 };
 
+const direction = 'ltr';
+
 const colors = genColors({
   surface: {
     main: 'lightgray',
@@ -7346,6 +7452,7 @@ const globals = {
   radius,
   shadow,
   fonts,
+  direction,
 };
 const vars$u = getThemeVars(globals);
 
@@ -7370,6 +7477,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,
@@ -7498,6 +7606,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' },
@@ -7548,6 +7658,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,
@@ -7580,6 +7691,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,
@@ -7613,6 +7725,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,
@@ -7644,6 +7757,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,
@@ -7676,6 +7790,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,
@@ -7715,6 +7830,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,
@@ -7757,6 +7873,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,
 
@@ -7964,6 +8081,7 @@ const globalRefs$9 = getThemeRefs(globals);
 const vars$h = TextClass.cssVarList;
 
 const text = {
+  [vars$h.hostDirection]: globalRefs$9.direction,
   [vars$h.textLineHeight]: '1.35em',
   [vars$h.textAlign]: 'left',
   [vars$h.textColor]: globalRefs$9.colors.surface.dark,
@@ -8053,6 +8171,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,
@@ -8097,12 +8216,13 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$v
+  componentName$u
 );
 
 const divider = {
   ...helperTheme$1,
 
+  [compVars$2.hostDirection]: globalRefs$7.direction,
   [compVars$2.alignItems]: 'center',
   [compVars$2.flexDirection]: 'row',
   [compVars$2.alignSelf]: 'stretch',
@@ -8113,6 +8233,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',
@@ -8140,6 +8261,7 @@ var divider$1 = /*#__PURE__*/Object.freeze({
 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,
@@ -8271,6 +8393,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,
@@ -8293,6 +8416,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',
@@ -8330,6 +8455,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,
@@ -8365,6 +8491,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,
@@ -8396,6 +8523,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',
@@ -8418,6 +8546,7 @@ var newPassword$1 = /*#__PURE__*/Object.freeze({
 const vars$6 = UploadFileClass.cssVarList;
 
 const uploadFile = {
+  [vars$6.hostDirection]: refs.direction,
   [vars$6.labelTextColor]: refs.labelTextColor,
   [vars$6.fontFamily]: refs.fontFamily,
 
@@ -8486,6 +8615,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,
@@ -8513,6 +8643,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,