From 13a2a477a86e9abfe67f50e15e3fa6be1e50de7c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Jul 2026 17:29:06 -0400
Subject: [PATCH 01/20] Add useUiDirection composable

---
 resources/js/composables/ui-direction.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 resources/js/composables/ui-direction.js

diff --git a/resources/js/composables/ui-direction.js b/resources/js/composables/ui-direction.js
new file mode 100644
index 00000000000..2d24f855e98
--- /dev/null
+++ b/resources/js/composables/ui-direction.js
@@ -0,0 +1,15 @@
+import { computed, ref } from 'vue';
+
+const dir = ref(typeof document !== 'undefined' ? document.documentElement.dir || 'ltr' : 'ltr');
+
+if (typeof document !== 'undefined') {
+    new MutationObserver(() => {
+        dir.value = document.documentElement.dir || 'ltr';
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+}
+
+export function useUiDirection() {
+    return {
+        direction: computed(() => dir.value),
+    };
+}

From 5240d81533120d091c44b5b0452fb864c5a71249 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Jul 2026 17:32:39 -0400
Subject: [PATCH 02/20] Add useContentDirection composable and ContentDirection
 component

---
 resources/js/components/ui/ContentDirection.vue | 11 +++++++++++
 resources/js/composables/content-direction.js   | 12 ++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 resources/js/components/ui/ContentDirection.vue
 create mode 100644 resources/js/composables/content-direction.js

diff --git a/resources/js/components/ui/ContentDirection.vue b/resources/js/components/ui/ContentDirection.vue
new file mode 100644
index 00000000000..a4ffd5b5804
--- /dev/null
+++ b/resources/js/components/ui/ContentDirection.vue
@@ -0,0 +1,11 @@
+<script setup>
+import { useContentDirection } from '@/composables/content-direction';
+
+const { direction } = useContentDirection();
+</script>
+
+<template>
+    <div :dir="direction">
+        <slot />
+    </div>
+</template>
diff --git a/resources/js/composables/content-direction.js b/resources/js/composables/content-direction.js
new file mode 100644
index 00000000000..56c78545d1d
--- /dev/null
+++ b/resources/js/composables/content-direction.js
@@ -0,0 +1,12 @@
+import { computed, unref } from 'vue';
+import { injectContainerContext } from '@/components/ui/Publish/Container.vue';
+import { useUiDirection } from './ui-direction';
+
+export function useContentDirection() {
+    const container = injectContainerContext();
+    const { direction: uiDirection } = useUiDirection();
+
+    return {
+        direction: computed(() => (container ? unref(container.direction) : uiDirection.value)),
+    };
+}

From e1fd7d76f17704b66fd06deaf023da9744171226 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Jul 2026 17:36:10 -0400
Subject: [PATCH 03/20] Use UI direction for fieldtype chrome wrapper in
 Field.vue

---
 resources/js/components/ui/Publish/Field.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 0f428d496d8..22cec1a99b3 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -2,6 +2,7 @@
 import { computed, useTemplateRef, watch, ref, inject } from 'vue';
 import { injectContainerContext } from './Container.vue';
 import { injectFieldsContext } from './FieldsProvider.vue';
+import { useUiDirection } from '@/composables/ui-direction';
 import {
     Avatar,
     Field,
@@ -46,7 +47,7 @@ const {
     focusField,
     blurField,
     container,
-    direction,
+    direction: contentDirection,
 } = injectContainerContext();
 const {
     fieldPathPrefix: injectedFieldPathPrefix,
@@ -55,6 +56,8 @@ const {
     asConfig: fieldsAsConfig,
 } = injectFieldsContext();
 
+const { direction } = useUiDirection();
+
 const asConfig = computed(() => fieldsAsConfig.value ?? containerAsConfig.value ?? false);
 const fieldPathPrefix = computed(() => props.fieldPathPrefix || injectedFieldPathPrefix.value);
 const metaPathPrefix = computed(() => props.metaPathPrefix || injectedMetaPathPrefix.value);

From 30d7d0257a6f8dc10fa6b52c1157a71039f17ed1 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Jul 2026 19:32:41 -0400
Subject: [PATCH 04/20] Opt leaf value fieldtypes into content direction

---
 resources/js/components/fieldtypes/ArrayFieldtype.vue | 11 +++++++++++
 resources/js/components/fieldtypes/ListFieldtype.vue  |  8 ++++++++
 resources/js/components/fieldtypes/SlugFieldtype.vue  |  8 ++++++++
 resources/js/components/fieldtypes/TableFieldtype.vue |  8 ++++++++
 resources/js/components/fieldtypes/TextFieldtype.vue  |  4 ++++
 .../js/components/fieldtypes/TextareaFieldtype.vue    |  8 ++++++++
 .../js/components/fieldtypes/bard/BardFieldtype.vue   |  9 ++++++++-
 .../fieldtypes/markdown/MarkdownFieldtype.vue         | 10 +++++++++-
 8 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 17cf585429a..5c4184576d1 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -24,6 +24,7 @@
                     :key="element._id"
                     :id="fieldId + '__' + element.key"
                     :readonly="isReadOnly"
+                    :input-attrs="{ dir: contentDirection }"
                 />
             </template>
         </ui-input-group>
@@ -41,6 +42,7 @@
                             :id="fieldId + '__' + element.key"
                             v-model="data[index].value"
                             :readonly="isReadOnly"
+                            :dir="contentDirection"
                         />
                     </td>
                 </tr>
@@ -71,12 +73,14 @@
                             <ui-input
                                 v-model="element.key"
                                 :readonly="isReadOnly"
+                                :input-attrs="{ dir: contentDirection }"
                             />
                         </td>
                         <td>
                             <ui-input
                                 v-model="element.value"
                                 :readonly="isReadOnly"
+                                :input-attrs="{ dir: contentDirection }"
                             />
                         </td>
                         <td class="row-controls" v-if="!isReadOnly">
@@ -107,6 +111,7 @@
 import Fieldtype from './Fieldtype.vue';
 import { SortableList, SortableHelpers } from '../sortable/Sortable';
 import { Button } from '@/components/ui';
+import { useContentDirection } from '@/composables/content-direction';
 
 export default {
     mixins: [Fieldtype, SortableHelpers],
@@ -116,6 +121,12 @@ export default {
         Button,
     },
 
+    setup() {
+        const { direction: contentDirection } = useContentDirection();
+
+        return { contentDirection };
+    },
+
     data() {
         const keys = Object.keys(this.value || {});
         const selectedKey = keys.length > 0 ? keys[0] : null;
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index 03be98e115a..56c250e9f6c 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -23,6 +23,7 @@
                                 class="!inset-shadow-none focus:!inset-shadow-none"
                                 v-model="element.value"
                                 :readonly="isReadOnly"
+                                :input-attrs="{ dir: contentDirection }"
                                 @blur="focused = false"
                                 @focus="editItemWithoutFocusing(index)"
                                 @keydown.enter.prevent="nextItem"
@@ -58,6 +59,7 @@
 import Fieldtype from './Fieldtype.vue';
 import { SortableList, SortableHelpers } from '../sortable/Sortable';
 import { Button } from '@/components/ui';
+import { useContentDirection } from '@/composables/content-direction';
 
 export default {
     mixins: [Fieldtype, SortableHelpers],
@@ -67,6 +69,12 @@ export default {
         Button,
     },
 
+    setup() {
+        const { direction: contentDirection } = useContentDirection();
+
+        return { contentDirection };
+    },
+
     data() {
         return {
             data: [],
diff --git a/resources/js/components/fieldtypes/SlugFieldtype.vue b/resources/js/components/fieldtypes/SlugFieldtype.vue
index 01f73e15e96..d9dda4158e7 100644
--- a/resources/js/components/fieldtypes/SlugFieldtype.vue
+++ b/resources/js/components/fieldtypes/SlugFieldtype.vue
@@ -19,6 +19,7 @@
             :read-only="isReadOnly"
             :name="slug"
             :disabled="config.disabled"
+            :input-attrs="{ dir: contentDirection }"
             @focus="$emit('focus')"
             @blur="$emit('blur')"
         >
@@ -40,6 +41,7 @@
 import { data_get } from '../../bootstrap/globals';
 import Fieldtype from './Fieldtype.vue';
 import { Input, Button, Icon } from '@/components/ui';
+import { useContentDirection } from '@/composables/content-direction';
 
 export default {
     mixins: [Fieldtype],
@@ -50,6 +52,12 @@ export default {
         Icon,
     },
 
+    setup() {
+        const { direction: contentDirection } = useContentDirection();
+
+        return { contentDirection };
+    },
+
     data() {
         return {
             slug: this.value,
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 088a14631a2..beec9ba869d 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -43,6 +43,7 @@
                                     <ui-input
                                         v-model="row.value.cells[cellIndex]"
                                         :readonly="isReadOnly"
+                                        :input-attrs="{ dir: contentDirection }"
                                     />
                                 </td>
                                 <td class="row-controls" v-if="canDeleteRows">
@@ -88,6 +89,7 @@
 <script>
 import Fieldtype from './Fieldtype.vue';
 import { SortableList, SortableHelpers } from '../sortable/Sortable';
+import { useContentDirection } from '@/composables/content-direction';
 
 export default {
     mixins: [Fieldtype, SortableHelpers],
@@ -96,6 +98,12 @@ export default {
         SortableList,
     },
 
+    setup() {
+        const { direction: contentDirection } = useContentDirection();
+
+        return { contentDirection };
+    },
+
     data: function () {
         return {
             data: this.arrayToSortable(this.value || []),
diff --git a/resources/js/components/fieldtypes/TextFieldtype.vue b/resources/js/components/fieldtypes/TextFieldtype.vue
index 83121ccb8cc..335c1e67cf8 100644
--- a/resources/js/components/fieldtypes/TextFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextFieldtype.vue
@@ -15,6 +15,7 @@
         :name="name"
         :id="id"
         :direction="config.direction"
+        :input-attrs="{ dir: contentDirection }"
         @update:model-value="inputUpdated"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
@@ -25,6 +26,7 @@
 import Fieldtype from '@/components/fieldtypes/fieldtype.js';
 import { Input } from '@/components/ui';
 import { computed } from 'vue';
+import { useContentDirection } from '@/composables/content-direction';
 
 const emit = defineEmits(Fieldtype.emits);
 const props = defineProps(Fieldtype.props);
@@ -36,6 +38,8 @@ const {
     expose
 } = Fieldtype.use(emit, props);
 
+const { direction: contentDirection } = useContentDirection();
+
 const shouldFocus = computed(() => {
     if (props.config.focus === false || props.config.focus === true) {
         return props.config.focus;
diff --git a/resources/js/components/fieldtypes/TextareaFieldtype.vue b/resources/js/components/fieldtypes/TextareaFieldtype.vue
index 91442bfbff9..f3b28678e83 100644
--- a/resources/js/components/fieldtypes/TextareaFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextareaFieldtype.vue
@@ -7,6 +7,7 @@
         :limit="config.character_limit || null"
         :placeholder="__(config.placeholder)"
         :model-value="value"
+        :dir="contentDirection"
         @blur="$emit('blur')"
         @focus="$emit('focus')"
         @update:model-value="updateDebounced"
@@ -16,9 +17,16 @@
 <script>
 import Fieldtype from './Fieldtype.vue';
 import { Textarea } from '@/components/ui';
+import { useContentDirection } from '@/composables/content-direction';
 
 export default {
     mixins: [Fieldtype],
     components: { Textarea },
+
+    setup() {
+        const { direction: contentDirection } = useContentDirection();
+
+        return { contentDirection };
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index c3f97383447..e682303b6f1 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -116,7 +116,7 @@
                         </floating-menu>
 
                         <div class="bard-error" v-if="initError" v-text="initError"></div>
-                        <editor-content :editor="editor" :id="fieldId" />
+                        <editor-content :editor="editor" :id="fieldId" :dir="contentDirection" />
                     </div>
                     <div
                         class="bard-footer-toolbar"
@@ -177,6 +177,7 @@ import 'highlight.js/styles/github.css';
 import importTiptap from '@/util/tiptap.js';
 import { computed } from 'vue';
 import { data_get } from "@/bootstrap/globals.js";
+import { useContentDirection } from '@/composables/content-direction';
 
 const lowlight = createLowlight(common);
 let tiptap = null;
@@ -198,6 +199,12 @@ export default {
         isInBardField: true,
     },
 
+    setup() {
+        const { direction: contentDirection } = useContentDirection();
+
+        return { contentDirection };
+    },
+
     data() {
         return {
             events: new Emitter(),
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index c17ccc908cc..ed4a8811f34 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -127,6 +127,7 @@
                                 v-show="mode == 'preview'"
                                 v-html="markdownPreviewText"
                                 class="markdown-preview p-3 prose prose-sm @md/markdown:prose-base"
+                                :dir="contentDirection"
                             ></div>
                         </div>
                     </div>
@@ -184,6 +185,7 @@ import AssetSelector from '../../assets/Selector.vue';
 import Uploader from '../../assets/Uploader.vue';
 import Uploads from '../../assets/Uploads.vue';
 import MarkdownToolbar from './MarkdownToolbar.vue';
+import { useContentDirection } from '@/composables/content-direction';
 // Keymaps
 import 'codemirror/keymap/sublime';
 
@@ -240,6 +242,12 @@ export default {
 	    Stack,
     },
 
+    setup() {
+        const { direction: contentDirection } = useContentDirection();
+
+        return { contentDirection };
+    },
+
     data() {
         return {
             data: this.value || '',
@@ -654,7 +662,7 @@ export default {
                     mode: 'gfm',
                     dragDrop: false,
                     keyMap: 'sublime',
-                    direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
+                    direction: self.contentDirection,
                     lineWrapping: true,
                     viewportMargin: Infinity,
                     tabindex: 0,

From c3a13bc489db98d6f05048b9e8e6776be5aa2c7b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Jul 2026 19:38:14 -0400
Subject: [PATCH 05/20] Export useUiDirection, useContentDirection, and
 ContentDirection via @statamic/cms

---
 packages/cms/src/index.js           | 2 ++
 packages/cms/src/ui.js              | 1 +
 resources/js/bootstrap/cms/core.js  | 2 ++
 resources/js/bootstrap/cms/ui.js    | 1 +
 resources/js/components/ui/index.js | 1 +
 resources/js/tests/Package.test.js  | 3 +++
 6 files changed, 10 insertions(+)

diff --git a/packages/cms/src/index.js b/packages/cms/src/index.js
index 8b30e9f288b..7abf50cd41d 100644
--- a/packages/cms/src/index.js
+++ b/packages/cms/src/index.js
@@ -22,4 +22,6 @@ export const {
     debounce,
     deepClone,
     resetValuesFromResponse,
+    useContentDirection,
+    useUiDirection,
 } = __STATAMIC__.core;
diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index a84b8d0e411..3cdba1e5f5c 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -17,6 +17,7 @@ export const {
     Combobox,
     CommandPaletteItem,
     ConfirmationModal,
+    ContentDirection,
     Context,
     ContextFooter,
     ContextHeader,
diff --git a/resources/js/bootstrap/cms/core.js b/resources/js/bootstrap/cms/core.js
index 05070c7d6c8..0b65ad644eb 100644
--- a/resources/js/bootstrap/cms/core.js
+++ b/resources/js/bootstrap/cms/core.js
@@ -19,3 +19,5 @@ export { default as resetValuesFromResponse } from '../../util/resetValuesFromRe
 export { requireElevatedSession, requireElevatedSessionIf } from '../../components/elevated-sessions';
 export { default as clone, deepClone } from '../../util/clone.js';
 export { default as debounce } from '../../util/debounce.js';
+export { useContentDirection } from '../../composables/content-direction.js';
+export { useUiDirection } from '../../composables/ui-direction.js';
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index 2b8a3e7cd1e..82f78014ee6 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -17,6 +17,7 @@ export {
     Combobox,
     CommandPaletteItem,
     ConfirmationModal,
+    ContentDirection,
     Context,
     ContextFooter,
     ContextHeader,
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index d19fd06b96a..13243450db3 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -108,6 +108,7 @@ export { default as PublishLocalizations } from "./Publish/Localizations.vue";
 export { default as PublishSections } from "./Publish/Sections.vue";
 export { default as PublishTabs } from "./Publish/Tabs.vue";
 export { default as TabProvider } from "./Publish/TabProvider.vue";
+export { default as ContentDirection } from './ContentDirection.vue';
 export { default as StatusIndicator } from "./StatusIndicator.vue";
 export { default as Widget } from "./Widget.vue";
 export { default as Listing } from "./Listing/Listing.vue";
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index 4aa0bbc5e71..b862d4128c3 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -40,6 +40,8 @@ it('exports core', async () => {
         'requireElevatedSession',
         'requireElevatedSessionIf',
         'resetValuesFromResponse',
+        'useContentDirection',
+        'useUiDirection',
     ];
 
     expect(Object.keys(modules.core).toSorted()).toEqual(expected)
@@ -138,6 +140,7 @@ it('exports ui', async () => {
         'CodeEditor',
         'Combobox',
         'ConfirmationModal',
+        'ContentDirection',
         'Context',
         'ContextFooter',
         'ContextHeader',

From 0fbfa9eaea32b15fb74dd25189b2278805b6c57a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Jul 2026 19:42:51 -0400
Subject: [PATCH 06/20] Add Vitest coverage for UI/content direction

---
 .../fieldtypes/TableFieldtype.test.js         | 37 +++++++++++++++++++
 resources/js/tests/ui-direction.test.js       | 24 ++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 resources/js/tests/components/fieldtypes/TableFieldtype.test.js
 create mode 100644 resources/js/tests/ui-direction.test.js

diff --git a/resources/js/tests/components/fieldtypes/TableFieldtype.test.js b/resources/js/tests/components/fieldtypes/TableFieldtype.test.js
new file mode 100644
index 00000000000..db85e9d2a9a
--- /dev/null
+++ b/resources/js/tests/components/fieldtypes/TableFieldtype.test.js
@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { computed } from 'vue';
+import * as Globals from '@/bootstrap/globals';
+import TableFieldtype from '@/components/fieldtypes/TableFieldtype.vue';
+import { containerContextKey } from '@/components/ui/Publish/Container.vue';
+import { Input, Button } from '@/components/ui';
+
+Object.keys(Globals).forEach((fn) => (window[fn] = Globals[fn]));
+
+test('value cells get content direction while chrome does not', () => {
+    document.documentElement.setAttribute('dir', 'ltr');
+
+    const wrapper = mount(TableFieldtype, {
+        props: {
+            value: [{ cells: ['hello', 'world'] }],
+            handle: 'table',
+        },
+        components: {
+            'ui-input': Input,
+            'ui-button': Button,
+        },
+        global: {
+            provide: {
+                [containerContextKey]: {
+                    direction: computed(() => 'rtl'),
+                },
+            },
+        },
+    });
+
+    const input = wrapper.find('input');
+    expect(input.attributes('dir')).toBe('rtl');
+
+    const deleteColumnButton = wrapper.find('[aria-label="Delete Column"]');
+    expect(deleteColumnButton.attributes('dir')).toBeUndefined();
+});
diff --git a/resources/js/tests/ui-direction.test.js b/resources/js/tests/ui-direction.test.js
new file mode 100644
index 00000000000..20da618acb5
--- /dev/null
+++ b/resources/js/tests/ui-direction.test.js
@@ -0,0 +1,24 @@
+import { test, expect, beforeEach, vi } from 'vitest';
+
+let useUiDirection;
+
+beforeEach(async () => {
+    vi.resetModules();
+    document.documentElement.removeAttribute('dir');
+    useUiDirection = (await import('../composables/ui-direction.js')).useUiDirection;
+});
+
+test('defaults to ltr when html dir is missing', () => {
+    const { direction } = useUiDirection();
+
+    expect(direction.value).toBe('ltr');
+});
+
+test('updates reactively when the html dir attribute changes', async () => {
+    const { direction } = useUiDirection();
+    expect(direction.value).toBe('ltr');
+
+    document.documentElement.setAttribute('dir', 'rtl');
+
+    await vi.waitFor(() => expect(direction.value).toBe('rtl'));
+});

From 6a2a69bcf734a50dca9972eeedc03f6af83839ae Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Jul 2026 11:35:06 -0400
Subject: [PATCH 07/20] Make Tabs primitive follow UI direction by default

reka-ui's TabsRoot defaults to dir="ltr", forcing the tab-panel
subtree LTR even when the CP is RTL. Default the dir prop to
useUiDirection()'s direction while keeping it overridable.
---
 resources/js/components/ui/Tabs/Tabs.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Tabs/Tabs.vue b/resources/js/components/ui/Tabs/Tabs.vue
index 447ba1998cd..91d947726a7 100644
--- a/resources/js/components/ui/Tabs/Tabs.vue
+++ b/resources/js/components/ui/Tabs/Tabs.vue
@@ -1,18 +1,26 @@
 <script setup>
+import { computed } from 'vue';
 import { TabsRoot } from 'reka-ui';
+import { useUiDirection } from '@/composables/ui-direction';
 
 const emit = defineEmits(['update:modelValue']);
 
-defineProps({
+const props = defineProps({
     /** The controlled value of the tabs */
     modelValue: { type: String, default: null },
     /** When `true`, the element will be unmounted on closed state */
     unmountOnHide: { type: Boolean, default: true },
+    /** The reading direction of the tabs */
+    dir: { type: String, default: null },
 });
+
+const { direction } = useUiDirection();
+
+const dir = computed(() => props.dir ?? direction.value);
 </script>
 
 <template>
-    <TabsRoot :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" :unmount-on-hide>
+    <TabsRoot :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" :unmount-on-hide :dir>
         <slot />
     </TabsRoot>
 </template>

From 2e51342ea52d43b97fff12f2f5ce739aa37e6a3e Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Jul 2026 11:37:57 -0400
Subject: [PATCH 08/20] Fix field label/instructions inheriting content
 direction inside sets

The UI-direction reset only wrapped the fieldtype component, not the
field's label/instructions/errors. Nested fields (e.g. inside a Bard
set) inherited the ambient content direction for their chrome instead
of the UI direction. Move the dir reset onto the Field component
itself so it covers the whole field, while leaf fieldtypes still opt
back into content direction on their own value inputs.
---
 resources/js/components/ui/Field.vue         |  4 +++-
 resources/js/components/ui/Publish/Field.vue |  3 ++-
 resources/js/tests/components/Field.test.js  | 24 ++++++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/tests/components/Field.test.js

diff --git a/resources/js/components/ui/Field.vue b/resources/js/components/ui/Field.vue
index f255d6be449..0b4b9b4db5c 100644
--- a/resources/js/components/ui/Field.vue
+++ b/resources/js/components/ui/Field.vue
@@ -16,6 +16,8 @@ const props = defineProps({
     inline: { type: Boolean, default: false },
     /** Badge text to display next to the label. */
     badge: { type: String, default: '' },
+    /** The reading direction of the field's label, instructions, and errors. */
+    dir: { type: String, default: null },
     disabled: { type: Boolean, default: false },
     /** Error message to display below the field. */
     error: { type: String },
@@ -80,7 +82,7 @@ const hasErrors = computed(() => {
 </script>
 
 <template>
-    <div :class="[rootClasses, $attrs.class]" data-ui-input-group :data-ui-field-has-errors="hasErrors ? '' : null">
+    <div :class="[rootClasses, $attrs.class]" :dir="dir" data-ui-input-group :data-ui-field-has-errors="hasErrors ? '' : null">
         <div
             v-if="label || $slots.label || $slots.actions || (instructions && !instructionsBelow)"
             class="flex flex-col gap-1.5"
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 22cec1a99b3..7e46c3a8657 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -241,6 +241,7 @@ const fieldtypeComponentEvents = computed(() => ({
             v-show="shouldShowField"
             :class="`${config.type}-fieldtype`"
             :id="fieldId"
+            :dir="direction"
             :instructions="config.instructions"
             :instructions-below="config.instructions_position === 'below'"
             :required="isRequired"
@@ -280,7 +281,7 @@ const fieldtypeComponentEvents = computed(() => ({
             <div class="text-xs text-red-600" v-if="!fieldtypeComponentExists && fieldtypeComponent !== 'spacer-fieldtype'">
                 Component <code v-text="fieldtypeComponent"></code> does not exist.
             </div>
-            <div :dir="direction" v-if="fieldtypeComponentExists" @focusin="focused" @focusout="blurred" :class="{ 'pointer-events-none select-none': isLocked }">
+            <div v-if="fieldtypeComponentExists" @focusin="focused" @focusout="blurred" :class="{ 'pointer-events-none select-none': isLocked }">
                 <Component
                     ref="fieldtype"
                     :is="fieldtypeComponent"
diff --git a/resources/js/tests/components/Field.test.js b/resources/js/tests/components/Field.test.js
new file mode 100644
index 00000000000..d7fd49d0e85
--- /dev/null
+++ b/resources/js/tests/components/Field.test.js
@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import Field from '@/components/ui/Field.vue';
+
+test('it does not set a dir attribute by default', () => {
+    const wrapper = mount(Field, {
+        props: {
+            label: 'Title',
+        },
+    });
+
+    expect(wrapper.attributes('dir')).toBeUndefined();
+});
+
+test('it sets the dir attribute on the root element when provided', () => {
+    const wrapper = mount(Field, {
+        props: {
+            label: 'Title',
+            dir: 'rtl',
+        },
+    });
+
+    expect(wrapper.attributes('dir')).toBe('rtl');
+});

From be188b00bbf230d485083c038a3186c280b1f57a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Jul 2026 11:46:13 -0400
Subject: [PATCH 09/20] Fix Bard set header chrome inheriting content direction

The Set node view renders inside the Bard editor's content-direction
subtree, so its header chrome (drag handle, title, instructions icon,
switch, options dropdown) inherited content direction instead of UI
direction. Bind the set container's dir to useUiDirection() so the
chrome follows UI direction while nested field values still opt into
content direction on their own inputs.
---
 resources/js/components/fieldtypes/bard/Set.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index be01a6a5c1f..b582c4eefca 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -3,6 +3,7 @@
         <div
             ref="container"
             class="shadow-ui-sm relative w-full rounded-lg border border-gray-300 bg-white text-base dark:border-white/10 dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black"
+            :dir="uiDirection"
             :class="{
                 // We’re styling a Set so that it shows a “selection outline” when selected with the mouse or keyboard.
                 // The extra `&:not(:has(:focus-within))` rule turns that outline off if any element inside the Set has focus (e.g. when editing inside a Bard field).
@@ -117,10 +118,17 @@ import {
 import { containerContextKey } from '@/components/ui/Publish/Container.vue';
 import { watch } from 'vue';
 import { reveal } from '@api';
+import { useUiDirection } from '@/composables/ui-direction';
 
 export default {
     props: nodeViewProps,
 
+    setup() {
+        return {
+            uiDirection: useUiDirection().direction,
+        };
+    },
+
     components: {
         Button,
         Dropdown,

From 928891e2487970e754131bb225a4c398d8fcdd55 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Jul 2026 12:13:09 -0400
Subject: [PATCH 10/20] Fix Markdown fieldtype write-mode editor not using
 content direction

CodeMirror's 'direction' option only sets an internal CSS class for
per-line text bidi and never puts a dir attribute on its own wrapping
element, so the write-mode editor surface relied on ambient
inheritance for everything else (cursor rendering, layout). Bind
:dir="contentDirection" directly on the CodeMirror mount element,
matching what the preview pane already does.
---
 .../fieldtypes/markdown/MarkdownFieldtype.vue |  2 +-
 .../fieldtypes/MarkdownFieldtype.test.js      | 44 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index ed4a8811f34..ea897255990 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -73,7 +73,7 @@
                                 @drop="draggingFile = false"
                                 @keydown="shortcut"
                             >
-                                <div class="editor relative top-[0.5px] z-(--z-index-above) st-text-legibility" ref="codemirror" :class="{ 'focus-within:focus-outline': !fullScreenMode }">
+                                <div class="editor relative top-[0.5px] z-(--z-index-above) st-text-legibility" ref="codemirror" :dir="contentDirection" :class="{ 'focus-within:focus-outline': !fullScreenMode }">
                                     <div
                                         v-if="showFloatingToolbar && toolbarIsFloating && !isReadOnly"
                                         class="markdown-floating-toolbar absolute z-50 flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-2 py-1 shadow-lg dark:border-white/10 dark:bg-gray-900"
diff --git a/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js b/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
new file mode 100644
index 00000000000..4d861b32983
--- /dev/null
+++ b/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { computed } from 'vue';
+import * as Globals from '@/bootstrap/globals';
+import MarkdownFieldtype from '@/components/fieldtypes/markdown/MarkdownFieldtype.vue';
+import { containerContextKey } from '@/components/ui/Publish/Container.vue';
+
+Object.keys(Globals).forEach((fn) => (window[fn] = Globals[fn]));
+window.cp_url = (url) => url;
+window.__ = (key) => key;
+
+test('the editable surface gets content direction while chrome does not', async () => {
+    document.documentElement.setAttribute('dir', 'ltr');
+
+    const wrapper = mount(MarkdownFieldtype, {
+        props: {
+            value: 'hello world',
+            handle: 'markdown',
+            config: { buttons: [] },
+        },
+        global: {
+            stubs: {
+                'publish-field-fullscreen-header': true,
+                'ui-icon': true,
+            },
+            mocks: {
+                $events: { $on: () => {}, $off: () => {} },
+            },
+            provide: {
+                [containerContextKey]: {
+                    direction: computed(() => 'rtl'),
+                },
+            },
+        },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const editor = wrapper.find('.editor');
+    expect(editor.attributes('dir')).toBe('rtl');
+
+    const cheatsheetButton = wrapper.find('[aria-label="Show Markdown Cheatsheet"]');
+    expect(cheatsheetButton.attributes('dir')).toBeUndefined();
+});

From 1b544a742f3e5539e02d39ac1956338919625a45 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Jul 2026 12:39:03 -0400
Subject: [PATCH 11/20] Make Markdown fieldtype's CodeMirror direction reactive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CodeMirror 5 doesn't inherit an ancestor's dir attribute — it only
honors its own 'direction' option, applied via setOption. The prior
fix bound :dir on the mount wrapper, which is inert for CodeMirror's
own rendering and incorrectly applied content direction to the
floating toolbar chrome that lives in the same wrapper. Replace it
with a watcher that calls codemirror.setOption('direction', ...)
whenever contentDirection resolves or changes.
---
 .../fieldtypes/markdown/MarkdownFieldtype.vue |  7 +++-
 .../fieldtypes/MarkdownFieldtype.test.js      | 40 ++++++++++++++-----
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index ea897255990..97071650313 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -73,7 +73,7 @@
                                 @drop="draggingFile = false"
                                 @keydown="shortcut"
                             >
-                                <div class="editor relative top-[0.5px] z-(--z-index-above) st-text-legibility" ref="codemirror" :dir="contentDirection" :class="{ 'focus-within:focus-outline': !fullScreenMode }">
+                                <div class="editor relative top-[0.5px] z-(--z-index-above) st-text-legibility" ref="codemirror" :class="{ 'focus-within:focus-outline': !fullScreenMode }">
                                     <div
                                         v-if="showFloatingToolbar && toolbarIsFloating && !isReadOnly"
                                         class="markdown-floating-toolbar absolute z-50 flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-2 py-1 shadow-lg dark:border-white/10 dark:bg-gray-900"
@@ -291,6 +291,11 @@ export default {
                 this.codemirror.setOption('readOnly', readOnly ? 'nocursor' : false);
             },
         },
+        contentDirection: {
+            handler(direction) {
+                this.codemirror?.setOption('direction', direction);
+            },
+        },
     },
 
     mounted() {
diff --git a/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js b/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
index 4d861b32983..8692dbef893 100644
--- a/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
+++ b/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { expect, test } from 'vitest';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import * as Globals from '@/bootstrap/globals';
 import MarkdownFieldtype from '@/components/fieldtypes/markdown/MarkdownFieldtype.vue';
 import { containerContextKey } from '@/components/ui/Publish/Container.vue';
@@ -9,10 +9,8 @@ Object.keys(Globals).forEach((fn) => (window[fn] = Globals[fn]));
 window.cp_url = (url) => url;
 window.__ = (key) => key;
 
-test('the editable surface gets content direction while chrome does not', async () => {
-    document.documentElement.setAttribute('dir', 'ltr');
-
-    const wrapper = mount(MarkdownFieldtype, {
+function mountField(direction) {
+    return mount(MarkdownFieldtype, {
         props: {
             value: 'hello world',
             handle: 'markdown',
@@ -27,18 +25,38 @@ test('the editable surface gets content direction while chrome does not', async
                 $events: { $on: () => {}, $off: () => {} },
             },
             provide: {
-                [containerContextKey]: {
-                    direction: computed(() => 'rtl'),
-                },
+                [containerContextKey]: { direction },
             },
         },
     });
+}
 
-    await wrapper.vm.$nextTick();
+test('chrome does not get an explicit content direction', async () => {
+    document.documentElement.setAttribute('dir', 'ltr');
 
-    const editor = wrapper.find('.editor');
-    expect(editor.attributes('dir')).toBe('rtl');
+    const wrapper = mountField(computed(() => 'rtl'));
+    await wrapper.vm.$nextTick();
 
     const cheatsheetButton = wrapper.find('[aria-label="Show Markdown Cheatsheet"]');
     expect(cheatsheetButton.attributes('dir')).toBeUndefined();
 });
+
+test('the CodeMirror instance is initialized with the content direction', async () => {
+    const wrapper = mountField(ref('rtl'));
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.codemirror.getOption('direction')).toBe('rtl');
+});
+
+test('the CodeMirror instance reacts to content direction changes', async () => {
+    const direction = ref('ltr');
+    const wrapper = mountField(direction);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.codemirror.getOption('direction')).toBe('ltr');
+
+    direction.value = 'rtl';
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.codemirror.getOption('direction')).toBe('rtl');
+});

From 92c07935bb15742b38824877024da3daba8ae5c8 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Jul 2026 13:14:43 -0400
Subject: [PATCH 12/20] Fix Markdown editor lines rendering LTR when direction
 is rtl

The vendored resources/css/vendors/codemirror.css sets
'.CodeMirror-rtl pre { direction: ltr; }', which deviates from
upstream CodeMirror 5 (direction: rtl) and forces every line back to
LTR even when the .CodeMirror-rtl class is present. Add a
higher-specificity override scoped to .markdown-fieldtype rather
than hand-editing the vendored file.
---
 resources/css/components/fieldtypes/markdown.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index 4ce20efc524..9dae3712d0a 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -46,6 +46,10 @@
     @apply bg-transparent;
 }
 
+.markdown-fieldtype .CodeMirror-rtl pre {
+    direction: rtl;
+}
+
 
 /* Sticky Toolbar
 ========================================================================== */

From 19dc2b2566a96689b07298533e03b23e7253d67e Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Jul 2026 13:29:07 -0400
Subject: [PATCH 13/20] Decouple content direction from CP direction in publish
 containers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Container.vue's direction computed fell back to document.documentElement.dir
(the CP/UI direction) whenever the resolved site had no direction, coupling
content direction to the CP. This made field values render RTL whenever
EITHER the CP or the content was RTL, instead of following the site alone.
Site::direction() always resolves for a matched site, so the only case this
fallback affected was an unresolved site handle — default that to 'ltr'
instead of the CP direction.
---
 .../js/components/ui/Publish/Container.vue    |  2 +-
 .../js/tests/components/Container.test.js     | 59 +++++++++++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/tests/components/Container.test.js

diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index 98698554cf6..ef4a308e217 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -104,7 +104,7 @@ const meta = ref(props.meta);
 const previews = ref({});
 const localizedFields = ref(props.modifiedFields || []);
 const components = ref([]);
-const direction = computed(() => Statamic.$config.get('sites').find(s => s.handle === props.site)?.direction ?? document.documentElement.dir ?? 'ltr');
+const direction = computed(() => Statamic.$config.get('sites').find(s => s.handle === props.site)?.direction ?? 'ltr');
 
 const visibleValues = computed(() => {
     const omittable = Object.keys(hiddenFields.value).filter(
diff --git a/resources/js/tests/components/Container.test.js b/resources/js/tests/components/Container.test.js
new file mode 100644
index 00000000000..646aaff0e82
--- /dev/null
+++ b/resources/js/tests/components/Container.test.js
@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { defineComponent, h } from 'vue';
+import * as Globals from '@/bootstrap/globals';
+import Container from '@/components/ui/Publish/Container.vue';
+import { useContentDirection } from '@/composables/content-direction';
+
+Object.keys(Globals).forEach((fn) => (window[fn] = Globals[fn]));
+window.__ = (key) => key;
+
+window.Statamic = {
+    $config: {
+        get: (key) => (key === 'sites' ? [{ handle: 'default', direction: 'ltr' }] : undefined),
+    },
+    $dirty: { has: () => false, add: () => {}, remove: () => {} },
+    $events: { $emit: () => {} },
+};
+
+const Probe = defineComponent({
+    setup() {
+        const { direction } = useContentDirection();
+        return { direction };
+    },
+    render() {
+        return h('div', { 'data-direction': this.direction });
+    },
+});
+
+test('content direction is unaffected by the CP/document direction when the site has an explicit direction', () => {
+    document.documentElement.setAttribute('dir', 'rtl');
+
+    const wrapper = mount(Container, {
+        props: {
+            blueprint: { tabs: [] },
+            site: 'default',
+        },
+        slots: {
+            default: () => h(Probe),
+        },
+    });
+
+    expect(wrapper.find('[data-direction]').attributes('data-direction')).toBe('ltr');
+});
+
+test('content direction defaults to ltr (not the CP/document direction) when the site cannot be resolved', () => {
+    document.documentElement.setAttribute('dir', 'rtl');
+
+    const wrapper = mount(Container, {
+        props: {
+            blueprint: { tabs: [] },
+            site: 'unknown-site',
+        },
+        slots: {
+            default: () => h(Probe),
+        },
+    });
+
+    expect(wrapper.find('[data-direction]').attributes('data-direction')).toBe('ltr');
+});

From ce174a259a3a0ec8e6d54afc03765ea28821353b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Jul 2026 13:36:28 -0400
Subject: [PATCH 14/20] Set an explicit dir on the CodeMirror wrapper for LTR
 content too

CodeMirror only marks rtl lines explicitly (.CodeMirror-rtl, todo 65's
CSS); its ltr lines have no explicit direction and just inherit from
the nearest ancestor with a dir attribute. Since the <Field> wrapper
carries the CP/UI direction (todo 61), an ltr markdown value nested in
an rtl CP inherited the CP's rtl instead of staying ltr. Set dir
directly on CodeMirror's own wrapper element for both directions, at
init and in the existing contentDirection watcher, so the editor is
never at the mercy of ambient inheritance.
---
 .../fieldtypes/markdown/MarkdownFieldtype.vue |  3 ++
 .../fieldtypes/MarkdownFieldtype.test.js      | 30 +++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 97071650313..9358f99f9ab 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -294,6 +294,7 @@ export default {
         contentDirection: {
             handler(direction) {
                 this.codemirror?.setOption('direction', direction);
+                this.codemirror?.getWrapperElement().setAttribute('dir', direction);
             },
         },
     },
@@ -682,6 +683,8 @@ export default {
                 }),
             );
 
+            self.codemirror.getWrapperElement().setAttribute('dir', self.contentDirection);
+
                         // Set up floating toolbar event listeners if in floating mode
             if (this.toolbarIsFloating) {
                 self.codemirror.on('cursorActivity', this.handleCursorActivity);
diff --git a/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js b/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
index 8692dbef893..b48de1c7f16 100644
--- a/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
+++ b/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
@@ -60,3 +60,33 @@ test('the CodeMirror instance reacts to content direction changes', async () =>
 
     expect(wrapper.vm.codemirror.getOption('direction')).toBe('rtl');
 });
+
+test('the CodeMirror wrapper gets an explicit dir attribute matching an rtl content direction', async () => {
+    const wrapper = mountField(ref('rtl'));
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.codemirror.getWrapperElement().getAttribute('dir')).toBe('rtl');
+});
+
+// Regression test: CodeMirror doesn't set an explicit direction on its line
+// elements when ltr, so without an explicit dir on its own wrapper it would
+// inherit an ancestor's dir (e.g. an rtl CP) instead of the content direction.
+test('the CodeMirror wrapper gets an explicit dir attribute matching an ltr content direction', async () => {
+    const wrapper = mountField(ref('ltr'));
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.codemirror.getWrapperElement().getAttribute('dir')).toBe('ltr');
+});
+
+test('the CodeMirror wrapper dir attribute reacts to content direction changes', async () => {
+    const direction = ref('ltr');
+    const wrapper = mountField(direction);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.codemirror.getWrapperElement().getAttribute('dir')).toBe('ltr');
+
+    direction.value = 'rtl';
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.codemirror.getWrapperElement().getAttribute('dir')).toBe('rtl');
+});

From 43c845c46b63e3b048516106b02eba1f2bac2af5 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Jul 2026 16:38:18 -0400
Subject: [PATCH 15/20] Keep markdown editor LTR; make only the preview
 direction-aware

Per PR #10931 and its revert #10992, the markdown editor is treated as
source/code-adjacent and is intentionally always ltr, regardless of
content direction. Revert the editor-direction machinery added by the
recent RTL work (CodeMirror 'direction' init option, the
contentDirection watcher, the explicit wrapper dir, and the
.CodeMirror-rtl override), and restore the upstream base .CodeMirror
rule's 'direction: ltr' that the vendored copy had dropped, so the
editor reliably stays ltr instead of inheriting the CP direction from
the <Field> wrapper. Only the rendered .markdown-preview pane
continues to follow content direction; its code blocks stay ltr via
the existing .markdown-preview pre rule.
---
 .../css/components/fieldtypes/markdown.css    |  4 --
 resources/css/vendors/codemirror.css          |  1 +
 .../fieldtypes/markdown/MarkdownFieldtype.vue |  9 ----
 .../fieldtypes/MarkdownFieldtype.test.js      | 47 ++++---------------
 4 files changed, 9 insertions(+), 52 deletions(-)

diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index 9dae3712d0a..4ce20efc524 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -46,10 +46,6 @@
     @apply bg-transparent;
 }
 
-.markdown-fieldtype .CodeMirror-rtl pre {
-    direction: rtl;
-}
-
 
 /* Sticky Toolbar
 ========================================================================== */
diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css
index 3f742a9fbcd..7c1d0799aec 100644
--- a/resources/css/vendors/codemirror.css
+++ b/resources/css/vendors/codemirror.css
@@ -3,6 +3,7 @@
 .CodeMirror {
     /* Set height, width, borders, and global font properties here */
     @apply text-gray-900 dark:text-gray-300 leading-normal min-h-20;
+    direction: ltr;
 }
 
 /* CODEMIRROR / PADDING
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 9358f99f9ab..e2b6adb043c 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -291,12 +291,6 @@ export default {
                 this.codemirror.setOption('readOnly', readOnly ? 'nocursor' : false);
             },
         },
-        contentDirection: {
-            handler(direction) {
-                this.codemirror?.setOption('direction', direction);
-                this.codemirror?.getWrapperElement().setAttribute('dir', direction);
-            },
-        },
     },
 
     mounted() {
@@ -668,7 +662,6 @@ export default {
                     mode: 'gfm',
                     dragDrop: false,
                     keyMap: 'sublime',
-                    direction: self.contentDirection,
                     lineWrapping: true,
                     viewportMargin: Infinity,
                     tabindex: 0,
@@ -683,8 +676,6 @@ export default {
                 }),
             );
 
-            self.codemirror.getWrapperElement().setAttribute('dir', self.contentDirection);
-
                         // Set up floating toolbar event listeners if in floating mode
             if (this.toolbarIsFloating) {
                 self.codemirror.on('cursorActivity', this.handleCursorActivity);
diff --git a/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js b/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
index b48de1c7f16..ffb0f6a3d2b 100644
--- a/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
+++ b/resources/js/tests/components/fieldtypes/MarkdownFieldtype.test.js
@@ -41,52 +41,21 @@ test('chrome does not get an explicit content direction', async () => {
     expect(cheatsheetButton.attributes('dir')).toBeUndefined();
 });
 
-test('the CodeMirror instance is initialized with the content direction', async () => {
+// The editor is source/code-adjacent and is intentionally always ltr,
+// regardless of content direction (see PR #10931 and its revert #10992).
+test('the CodeMirror editor stays ltr regardless of content direction', async () => {
     const wrapper = mountField(ref('rtl'));
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.vm.codemirror.getOption('direction')).toBe('rtl');
-});
-
-test('the CodeMirror instance reacts to content direction changes', async () => {
-    const direction = ref('ltr');
-    const wrapper = mountField(direction);
-    await wrapper.vm.$nextTick();
-
     expect(wrapper.vm.codemirror.getOption('direction')).toBe('ltr');
-
-    direction.value = 'rtl';
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.codemirror.getOption('direction')).toBe('rtl');
+    expect(wrapper.vm.codemirror.getWrapperElement().getAttribute('dir')).toBeNull();
 });
 
-test('the CodeMirror wrapper gets an explicit dir attribute matching an rtl content direction', async () => {
+test('the preview pane gets the content direction', async () => {
     const wrapper = mountField(ref('rtl'));
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.vm.codemirror.getWrapperElement().getAttribute('dir')).toBe('rtl');
-});
-
-// Regression test: CodeMirror doesn't set an explicit direction on its line
-// elements when ltr, so without an explicit dir on its own wrapper it would
-// inherit an ancestor's dir (e.g. an rtl CP) instead of the content direction.
-test('the CodeMirror wrapper gets an explicit dir attribute matching an ltr content direction', async () => {
-    const wrapper = mountField(ref('ltr'));
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.codemirror.getWrapperElement().getAttribute('dir')).toBe('ltr');
-});
-
-test('the CodeMirror wrapper dir attribute reacts to content direction changes', async () => {
-    const direction = ref('ltr');
-    const wrapper = mountField(direction);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.codemirror.getWrapperElement().getAttribute('dir')).toBe('ltr');
-
-    direction.value = 'rtl';
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.codemirror.getWrapperElement().getAttribute('dir')).toBe('rtl');
+    // The preview pane is always in the DOM (toggled via v-show), so its
+    // dir attribute can be asserted without switching into preview mode.
+    expect(wrapper.find('.markdown-preview').attributes('dir')).toBe('rtl');
 });

From 3603c09cd031d732c4290500e0550a5de40f6a6d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 17 Jul 2026 09:58:31 -0400
Subject: [PATCH 16/20] Address text direction review feedback

- Container.vue: fall back to the UI direction (not a literal 'ltr')
  when the site can't be resolved, so site-less publish containers
  (user profile forms, wizards, config forms) don't force LTR inputs
  in an RTL CP.
- ContentDirection.vue: rewrite on reka-ui's Primitive so addons can
  pass as-child/as instead of always getting an unconditional wrapper
  div, which was breaking grid/flex/table-cell layouts.
- TextFieldtype.vue: remove the dead :direction="config.direction"
  binding (no such config option, and Input.vue doesn't consume a
  direction prop); the real handling is the adjacent input-attrs dir
  binding.
---
 .../components/fieldtypes/TextFieldtype.vue   |  1 -
 .../js/components/ui/ContentDirection.vue     | 12 +++++-
 .../js/components/ui/Publish/Container.vue    |  4 +-
 .../js/tests/components/Container.test.js     |  6 ++-
 .../tests/components/ContentDirection.test.js | 41 +++++++++++++++++++
 5 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/tests/components/ContentDirection.test.js

diff --git a/resources/js/components/fieldtypes/TextFieldtype.vue b/resources/js/components/fieldtypes/TextFieldtype.vue
index 335c1e67cf8..8b7664eb2f1 100644
--- a/resources/js/components/fieldtypes/TextFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextFieldtype.vue
@@ -14,7 +14,6 @@
         :placeholder="__(config.placeholder)"
         :name="name"
         :id="id"
-        :direction="config.direction"
         :input-attrs="{ dir: contentDirection }"
         @update:model-value="inputUpdated"
         @focus="$emit('focus')"
diff --git a/resources/js/components/ui/ContentDirection.vue b/resources/js/components/ui/ContentDirection.vue
index a4ffd5b5804..86125fc6083 100644
--- a/resources/js/components/ui/ContentDirection.vue
+++ b/resources/js/components/ui/ContentDirection.vue
@@ -1,11 +1,19 @@
 <script setup>
+import { Primitive } from 'reka-ui';
 import { useContentDirection } from '@/composables/content-direction';
 
+defineProps({
+    /** The element or component to render as */
+    as: { type: [String, Object], default: 'div' },
+    /** When `true`, merges props onto the immediate child instead of rendering a wrapper element */
+    asChild: { type: Boolean, default: false },
+});
+
 const { direction } = useContentDirection();
 </script>
 
 <template>
-    <div :dir="direction">
+    <Primitive :as="as" :as-child="asChild" :dir="direction">
         <slot />
-    </div>
+    </Primitive>
 </template>
diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index ef4a308e217..4eef9fbf1cf 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -11,6 +11,7 @@ import Component from '@/components/Component.js';
 import Tabs from './Tabs.vue';
 import Values from '@/components/publish/Values.js';
 import { data_get } from '@/bootstrap/globals.js';
+import { useUiDirection } from '@/composables/ui-direction';
 
 const emit = defineEmits(['update:modelValue', 'update:visibleValues', 'update:modifiedFields', 'update:meta']);
 
@@ -104,7 +105,8 @@ const meta = ref(props.meta);
 const previews = ref({});
 const localizedFields = ref(props.modifiedFields || []);
 const components = ref([]);
-const direction = computed(() => Statamic.$config.get('sites').find(s => s.handle === props.site)?.direction ?? 'ltr');
+const { direction: uiDirection } = useUiDirection();
+const direction = computed(() => Statamic.$config.get('sites').find(s => s.handle === props.site)?.direction ?? uiDirection.value);
 
 const visibleValues = computed(() => {
     const omittable = Object.keys(hiddenFields.value).filter(
diff --git a/resources/js/tests/components/Container.test.js b/resources/js/tests/components/Container.test.js
index 646aaff0e82..fc61efe9558 100644
--- a/resources/js/tests/components/Container.test.js
+++ b/resources/js/tests/components/Container.test.js
@@ -42,8 +42,10 @@ test('content direction is unaffected by the CP/document direction when the site
     expect(wrapper.find('[data-direction]').attributes('data-direction')).toBe('ltr');
 });
 
-test('content direction defaults to ltr (not the CP/document direction) when the site cannot be resolved', () => {
+test('content direction falls back to the UI direction when the site cannot be resolved', async () => {
     document.documentElement.setAttribute('dir', 'rtl');
+    // Let the ui-direction composable's MutationObserver pick up the attribute change.
+    await new Promise((resolve) => queueMicrotask(resolve));
 
     const wrapper = mount(Container, {
         props: {
@@ -55,5 +57,5 @@ test('content direction defaults to ltr (not the CP/document direction) when the
         },
     });
 
-    expect(wrapper.find('[data-direction]').attributes('data-direction')).toBe('ltr');
+    expect(wrapper.find('[data-direction]').attributes('data-direction')).toBe('rtl');
 });
diff --git a/resources/js/tests/components/ContentDirection.test.js b/resources/js/tests/components/ContentDirection.test.js
new file mode 100644
index 00000000000..347065f2f9b
--- /dev/null
+++ b/resources/js/tests/components/ContentDirection.test.js
@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import ContentDirection from '@/components/ui/ContentDirection.vue';
+
+test('it renders a div with the content direction by default', async () => {
+    document.documentElement.setAttribute('dir', 'rtl');
+    // Let the ui-direction composable's MutationObserver pick up the attribute change.
+    await new Promise((resolve) => queueMicrotask(resolve));
+
+    const wrapper = mount(ContentDirection, {
+        slots: { default: 'hello' },
+    });
+
+    expect(wrapper.element.tagName).toBe('DIV');
+    expect(wrapper.attributes('dir')).toBe('rtl');
+});
+
+test('it renders the given "as" element', () => {
+    document.documentElement.setAttribute('dir', 'rtl');
+
+    const wrapper = mount(ContentDirection, {
+        props: { as: 'span' },
+        slots: { default: 'hello' },
+    });
+
+    expect(wrapper.element.tagName).toBe('SPAN');
+    expect(wrapper.attributes('dir')).toBe('rtl');
+});
+
+test('asChild merges the dir attribute onto the slot child instead of wrapping it', () => {
+    document.documentElement.setAttribute('dir', 'rtl');
+
+    const wrapper = mount(ContentDirection, {
+        props: { asChild: true },
+        slots: { default: '<span class="child">hello</span>' },
+    });
+
+    expect(wrapper.element.tagName).toBe('SPAN');
+    expect(wrapper.classes()).toContain('child');
+    expect(wrapper.attributes('dir')).toBe('rtl');
+});

From 344c281000678802b53f7dccecfc855049254727 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 17 Jul 2026 10:14:19 -0400
Subject: [PATCH 17/20] Make direction tests order-independent

useUiDirection's module-level dir ref is initialized at import time
and only updates via an awaited MutationObserver microtask, so tests
that set document.documentElement.dir without flushing it relied on
an earlier test in the same file having already done so. Move the
attribute set + microtask flush into a shared beforeEach (with an
afterEach reset) in ContentDirection.test.js and Container.test.js so
every test is self-contained and passes with test.only.

ui-direction.test.js already resets modules and re-imports the
composable fresh per test, so it was already order-independent;
verified via test.only, no changes needed there.
---
 .../js/tests/components/Container.test.js      | 18 +++++++++++-------
 .../tests/components/ContentDirection.test.js  | 14 ++++++++------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/resources/js/tests/components/Container.test.js b/resources/js/tests/components/Container.test.js
index fc61efe9558..97902d64bbe 100644
--- a/resources/js/tests/components/Container.test.js
+++ b/resources/js/tests/components/Container.test.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { expect, test } from 'vitest';
+import { afterEach, beforeEach, expect, test } from 'vitest';
 import { defineComponent, h } from 'vue';
 import * as Globals from '@/bootstrap/globals';
 import Container from '@/components/ui/Publish/Container.vue';
@@ -26,9 +26,17 @@ const Probe = defineComponent({
     },
 });
 
-test('content direction is unaffected by the CP/document direction when the site has an explicit direction', () => {
+beforeEach(async () => {
     document.documentElement.setAttribute('dir', 'rtl');
+    // Let the ui-direction composable's MutationObserver pick up the attribute change.
+    await new Promise((resolve) => queueMicrotask(resolve));
+});
+
+afterEach(() => {
+    document.documentElement.removeAttribute('dir');
+});
 
+test('content direction is unaffected by the CP/document direction when the site has an explicit direction', () => {
     const wrapper = mount(Container, {
         props: {
             blueprint: { tabs: [] },
@@ -42,11 +50,7 @@ test('content direction is unaffected by the CP/document direction when the site
     expect(wrapper.find('[data-direction]').attributes('data-direction')).toBe('ltr');
 });
 
-test('content direction falls back to the UI direction when the site cannot be resolved', async () => {
-    document.documentElement.setAttribute('dir', 'rtl');
-    // Let the ui-direction composable's MutationObserver pick up the attribute change.
-    await new Promise((resolve) => queueMicrotask(resolve));
-
+test('content direction falls back to the UI direction when the site cannot be resolved', () => {
     const wrapper = mount(Container, {
         props: {
             blueprint: { tabs: [] },
diff --git a/resources/js/tests/components/ContentDirection.test.js b/resources/js/tests/components/ContentDirection.test.js
index 347065f2f9b..3a45b175cec 100644
--- a/resources/js/tests/components/ContentDirection.test.js
+++ b/resources/js/tests/components/ContentDirection.test.js
@@ -1,12 +1,18 @@
 import { mount } from '@vue/test-utils';
-import { expect, test } from 'vitest';
+import { afterEach, beforeEach, expect, test } from 'vitest';
 import ContentDirection from '@/components/ui/ContentDirection.vue';
 
-test('it renders a div with the content direction by default', async () => {
+beforeEach(async () => {
     document.documentElement.setAttribute('dir', 'rtl');
     // Let the ui-direction composable's MutationObserver pick up the attribute change.
     await new Promise((resolve) => queueMicrotask(resolve));
+});
+
+afterEach(() => {
+    document.documentElement.removeAttribute('dir');
+});
 
+test('it renders a div with the content direction by default', () => {
     const wrapper = mount(ContentDirection, {
         slots: { default: 'hello' },
     });
@@ -16,8 +22,6 @@ test('it renders a div with the content direction by default', async () => {
 });
 
 test('it renders the given "as" element', () => {
-    document.documentElement.setAttribute('dir', 'rtl');
-
     const wrapper = mount(ContentDirection, {
         props: { as: 'span' },
         slots: { default: 'hello' },
@@ -28,8 +32,6 @@ test('it renders the given "as" element', () => {
 });
 
 test('asChild merges the dir attribute onto the slot child instead of wrapping it', () => {
-    document.documentElement.setAttribute('dir', 'rtl');
-
     const wrapper = mount(ContentDirection, {
         props: { asChild: true },
         slots: { default: '<span class="child">hello</span>' },

From 61d4230e531225403c423954751d21720fdfea35 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 17 Jul 2026 10:42:10 -0400
Subject: [PATCH 18/20] Explain intentional ContentDirection export placement

---
 resources/js/components/ui/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 13243450db3..9f17305c138 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -108,6 +108,8 @@ export { default as PublishLocalizations } from "./Publish/Localizations.vue";
 export { default as PublishSections } from "./Publish/Sections.vue";
 export { default as PublishTabs } from "./Publish/Tabs.vue";
 export { default as TabProvider } from "./Publish/TabProvider.vue";
+// Intentionally placed after the Publish/* exports, not alphabetically: ContentDirection.vue
+// pulls in Publish/Container.vue, and moving it earlier reintroduces a circular-import crash.
 export { default as ContentDirection } from './ContentDirection.vue';
 export { default as StatusIndicator } from "./StatusIndicator.vue";
 export { default as Widget } from "./Widget.vue";

From bc3ec9a26c874204ff6911e2b590b689939ca01b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 17 Jul 2026 10:55:05 -0400
Subject: [PATCH 19/20] Extract publish container context; move
 ContentDirection into Publish

The ui/index.js export-ordering hack existed because content-direction.js
imported injectContainerContext from the heavy Publish/Container.vue,
so evaluating the ContentDirection export early in the barrel dragged
Container.vue's whole component graph in mid-evaluation and crashed on
a circular-import TDZ (Cannot access 'Dropdown' before initialization).

- Extract the context tuple into Publish/context.js; Container.vue now
  imports and re-exports it for the existing direct importers.
- content-direction.js imports injectContainerContext from the new
  light context.js module instead of Container.vue.
- Move ContentDirection.vue into Publish/, since it's conceptually
  part of the publish container's public surface.
- ui/index.js no longer needs the ordering workaround; ContentDirection
  is now exported from its normal alphabetical position.
---
 resources/js/components/ui/Publish/Container.vue              | 4 ++--
 resources/js/components/ui/{ => Publish}/ContentDirection.vue | 0
 resources/js/components/ui/Publish/context.js                 | 3 +++
 resources/js/components/ui/index.js                           | 4 +---
 resources/js/composables/content-direction.js                 | 2 +-
 resources/js/tests/components/ContentDirection.test.js        | 2 +-
 6 files changed, 8 insertions(+), 7 deletions(-)
 rename resources/js/components/ui/{ => Publish}/ContentDirection.vue (100%)
 create mode 100644 resources/js/components/ui/Publish/context.js

diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index 4eef9fbf1cf..af45fb84b70 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -1,7 +1,7 @@
 <script>
-import createContext from '@/util/createContext.js';
+import { injectContainerContext, provideContainerContext, containerContextKey } from './context.js';
 
-export const [injectContainerContext, provideContainerContext, containerContextKey] = createContext('PublishContainer');
+export { injectContainerContext, provideContainerContext, containerContextKey };
 </script>
 
 <script setup>
diff --git a/resources/js/components/ui/ContentDirection.vue b/resources/js/components/ui/Publish/ContentDirection.vue
similarity index 100%
rename from resources/js/components/ui/ContentDirection.vue
rename to resources/js/components/ui/Publish/ContentDirection.vue
diff --git a/resources/js/components/ui/Publish/context.js b/resources/js/components/ui/Publish/context.js
new file mode 100644
index 00000000000..8142228e29c
--- /dev/null
+++ b/resources/js/components/ui/Publish/context.js
@@ -0,0 +1,3 @@
+import createContext from '@/util/createContext.js';
+
+export const [injectContainerContext, provideContainerContext, containerContextKey] = createContext('PublishContainer');
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 9f17305c138..e71473db4ed 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -14,6 +14,7 @@ export { default as CheckboxGroup } from './Checkbox/Group.vue';
 export { default as CodeEditor } from './CodeEditor.vue';
 export { default as Combobox } from './Combobox/Combobox.vue';
 export { default as ConfirmationModal } from './Modal/ConfirmationModal.vue';
+export { default as ContentDirection } from './Publish/ContentDirection.vue';
 export { default as Context } from './Context/Context.vue';
 export { default as ContextFooter } from './Context/Footer.vue';
 export { default as ContextHeader } from './Context/Header.vue';
@@ -108,9 +109,6 @@ export { default as PublishLocalizations } from "./Publish/Localizations.vue";
 export { default as PublishSections } from "./Publish/Sections.vue";
 export { default as PublishTabs } from "./Publish/Tabs.vue";
 export { default as TabProvider } from "./Publish/TabProvider.vue";
-// Intentionally placed after the Publish/* exports, not alphabetically: ContentDirection.vue
-// pulls in Publish/Container.vue, and moving it earlier reintroduces a circular-import crash.
-export { default as ContentDirection } from './ContentDirection.vue';
 export { default as StatusIndicator } from "./StatusIndicator.vue";
 export { default as Widget } from "./Widget.vue";
 export { default as Listing } from "./Listing/Listing.vue";
diff --git a/resources/js/composables/content-direction.js b/resources/js/composables/content-direction.js
index 56c78545d1d..e031030c842 100644
--- a/resources/js/composables/content-direction.js
+++ b/resources/js/composables/content-direction.js
@@ -1,5 +1,5 @@
 import { computed, unref } from 'vue';
-import { injectContainerContext } from '@/components/ui/Publish/Container.vue';
+import { injectContainerContext } from '@/components/ui/Publish/context.js';
 import { useUiDirection } from './ui-direction';
 
 export function useContentDirection() {
diff --git a/resources/js/tests/components/ContentDirection.test.js b/resources/js/tests/components/ContentDirection.test.js
index 3a45b175cec..b6149dba3ce 100644
--- a/resources/js/tests/components/ContentDirection.test.js
+++ b/resources/js/tests/components/ContentDirection.test.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { afterEach, beforeEach, expect, test } from 'vitest';
-import ContentDirection from '@/components/ui/ContentDirection.vue';
+import ContentDirection from '@/components/ui/Publish/ContentDirection.vue';
 
 beforeEach(async () => {
     document.documentElement.setAttribute('dir', 'rtl');

From 968c3d84998e4131587ed355514ddd96c3f63b77 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 17 Jul 2026 11:08:53 -0400
Subject: [PATCH 20/20] Export direction composables via @statamic/cms/ui

Move useUiDirection and useContentDirection from the core package
entry to the ui subpath, alongside ContentDirection, so the whole
direction toolkit is cohesive on @statamic/cms/ui instead of split
across core and ui.

To keep components/ui/index.js, bootstrap/cms/ui.js, and
packages/cms/src/ui.js in sync (Package.test.js asserts all three
expose the same export set), the composables are re-exported from the
components/ui barrel itself, following the existing registerIconSet
precedent for non-component utility exports living there. This is
safe now that content-direction.js depends on the light
Publish/context.js rather than the heavy Container.vue.
---
 packages/cms/src/index.js           | 2 --
 packages/cms/src/ui.js              | 2 ++
 resources/js/bootstrap/cms/core.js  | 2 --
 resources/js/bootstrap/cms/ui.js    | 2 ++
 resources/js/components/ui/index.js | 2 ++
 resources/js/tests/Package.test.js  | 4 ++--
 6 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/cms/src/index.js b/packages/cms/src/index.js
index 7abf50cd41d..8b30e9f288b 100644
--- a/packages/cms/src/index.js
+++ b/packages/cms/src/index.js
@@ -22,6 +22,4 @@ export const {
     debounce,
     deepClone,
     resetValuesFromResponse,
-    useContentDirection,
-    useUiDirection,
 } = __STATAMIC__.core;
diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 3cdba1e5f5c..3f5150061c9 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -18,6 +18,8 @@ export const {
     CommandPaletteItem,
     ConfirmationModal,
     ContentDirection,
+    useContentDirection,
+    useUiDirection,
     Context,
     ContextFooter,
     ContextHeader,
diff --git a/resources/js/bootstrap/cms/core.js b/resources/js/bootstrap/cms/core.js
index 0b65ad644eb..05070c7d6c8 100644
--- a/resources/js/bootstrap/cms/core.js
+++ b/resources/js/bootstrap/cms/core.js
@@ -19,5 +19,3 @@ export { default as resetValuesFromResponse } from '../../util/resetValuesFromRe
 export { requireElevatedSession, requireElevatedSessionIf } from '../../components/elevated-sessions';
 export { default as clone, deepClone } from '../../util/clone.js';
 export { default as debounce } from '../../util/debounce.js';
-export { useContentDirection } from '../../composables/content-direction.js';
-export { useUiDirection } from '../../composables/ui-direction.js';
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index 82f78014ee6..68653dd3746 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -125,4 +125,6 @@ export {
     Widget,
     registerIconSet,
     registerIconSetFromStrings,
+    useContentDirection,
+    useUiDirection,
 } from '../../components/ui/index';
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index e71473db4ed..9527d5461c8 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -15,6 +15,8 @@ export { default as CodeEditor } from './CodeEditor.vue';
 export { default as Combobox } from './Combobox/Combobox.vue';
 export { default as ConfirmationModal } from './Modal/ConfirmationModal.vue';
 export { default as ContentDirection } from './Publish/ContentDirection.vue';
+export { useContentDirection } from '../../composables/content-direction.js';
+export { useUiDirection } from '../../composables/ui-direction.js';
 export { default as Context } from './Context/Context.vue';
 export { default as ContextFooter } from './Context/Footer.vue';
 export { default as ContextHeader } from './Context/Header.vue';
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index b862d4128c3..4da3ead2380 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -40,8 +40,6 @@ it('exports core', async () => {
         'requireElevatedSession',
         'requireElevatedSessionIf',
         'resetValuesFromResponse',
-        'useContentDirection',
-        'useUiDirection',
     ];
 
     expect(Object.keys(modules.core).toSorted()).toEqual(expected)
@@ -141,6 +139,8 @@ it('exports ui', async () => {
         'Combobox',
         'ConfirmationModal',
         'ContentDirection',
+        'useContentDirection',
+        'useUiDirection',
         'Context',
         'ContextFooter',
         'ContextHeader',