DIRECTIONALITY

const subComponentDirection = elementProps?.subComponent?.direction;

/* ❌ Don't use CSS variables for direction */
.component { direction: var(--component-direction, ltr); }

/* ❌ Don't use conditional logic for fallback class */
className={classNames({
  [styles.fallbackDirection]: !direction
})}

<div
  id={id}
  dir={direction}
  className={classNames(
    'profile-card',
    styles.root,
    className,
    styles.fallbackDirection,
  )}
>

/* Root is the component's own semantic element — same attribute, same classes */
<button
  type="button"
  id={id}
  dir={direction}
  className={classNames(
    'like-button',
    styles.root,
    className,
    styles.fallbackDirection,
  )}
>

.fallbackDirection:not([dir]) {
  direction: var(--wix-opt-in-direction);
}

import type { Direction } from '@wix/editor-react-types';

const labelDirection = elementProps?.label?.direction;

<span
  dir={labelDirection}
>

import { useService } from '@wix/services-manager-react';
import { EnvironmentDefinition } from '@wix/environment-service/definition';

const environmentService = useService(EnvironmentDefinition);
const siteDirection = environmentService.getLanguageDirection();
const isRTL = siteDirection === 'rtl';

const isRTL = (direction || parentDirection || siteDirection) === 'rtl';

.scrollButton {
  scale: var(--wix-opt-in-direction-multiplier, 1) 1;
}

.element {
  inset-inline-start: 0; // Instead of left
  inset-inline-end: 0; // Instead of right
  padding-inline-start: 8px; // Instead of padding-left
  margin-inline-end: 4px; // Instead of margin-right
}

.element {
  padding-left: 8px;
  [dir='rtl'] & {
    padding-right: 8px; // Manual RTL - avoid
  }
}

.element {
  padding-left: 8px;
  [dir='rtl'] & {
    padding-right: 8px; // Manual overrides
  }
}

.element {
  padding-inline-start: 8px; // Auto RTL/LTR
}

<Accordion.Content dir="ltr">
  {item.content} {/* React.ReactNode */}
</Accordion.Content>