fix(title): large title scale animation is now correct in rtl mode (#23372)

resolves #23371

.github/COMPONENT-GUIDE.md

@@ -16,6 +16,7 @@
   * [Example Components](#example-components-1)
   * [Component Structure](#component-structure-1)
 - [Converting Scoped to Shadow](#converting-scoped-to-shadow)
+- [RTL](#rtl)
 
 ## Button States
 
@@ -703,3 +704,39 @@ There will be some CSS issues when converting to shadow. Below are some of the d
 /* IN SHADOW*/
 :host-context(ion-toolbar:not(.ion-color)):host(:not(.ion-color)) ::slotted(ion-segment-button) {
 ```
+
+## RTL
+
+When you need to support both LTR and RTL modes, try to avoid using values such as `left` and `right`. For certain CSS properties, you can use the appropriate mixin to have this handled for you automatically.
+
+For example, if you wanted `transform-origin` to be RTL-aware, you would use the `transform-origin` mixin:
+
+```css
+@include transform-origin(start, center);
+```
+
+This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode. 
+
+These mixins depend on the `:host-context` pseudo-class when used inside of shadow components, which is not supported in WebKit. As a result, these mixins will not work in Safari for macOS and iOS when applied to shadow components.
+
+To work around this, you should set an RTL class on the host of your component and set your RTL styles by targeting that class:
+
+```tsx
+<Host
+class={{
+  'my-cmp-rtl': document.dir === 'rtl'
+})
+>
+ ...
+</Host>
+```
+
+```css
+:host {
+  transform-origin: left center;
+}
+
+:host(.my-cmp-rtl) {
+  transform-origin: right center;
+}
+```

core/src/components/title/title.ios.scss

@@ -41,7 +41,7 @@
 
 :host(.title-large) {
   @include padding(0, 16px);
-  @include transform-origin(start, center);
+  @include transform-origin(left, center);
 
   bottom: 0;
 
@@ -57,6 +57,10 @@
   text-align: start;
 }
 
+:host(.title-large.title-rtl) {
+  @include transform-origin(right, center);
+}
+
 :host(.title-large.ion-cloned-element) {
   --color: #{$text-color};
 }

core/src/components/title/title.tsx

@@ -64,6 +64,7 @@ export class ToolbarTitle implements ComponentInterface {
         class={createColorClasses(this.color, {
           [mode]: true,
           [`title-${size}`]: true,
+          'title-rtl': document.dir === 'rtl'
         })}
       >
         <div class="toolbar-title">