From 2e68be9bfddd874c0e8609ff5c3aef1cb6f78aaf Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Sat, 27 Jun 2026 12:20:06 -0700
Subject: [PATCH 1/4] use browser direction or `ltr`

---
 resources/js/components/ui/Field.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/js/components/ui/Field.vue b/resources/js/components/ui/Field.vue
index f255d6be44..cf6f2e9c81 100644
--- a/resources/js/components/ui/Field.vue
+++ b/resources/js/components/ui/Field.vue
@@ -11,6 +11,8 @@ defineOptions({
     inheritAttrs: false,
 });
 
+const uiDirection = computed(() => document.documentElement.dir || 'ltr');
+
 const props = defineProps({
     /** When `true`, the field is styled as a configuration field with a two-column grid layout. */
     inline: { type: Boolean, default: false },
@@ -82,6 +84,7 @@ const hasErrors = computed(() => {
 <template>
     <div :class="[rootClasses, $attrs.class]" data-ui-input-group :data-ui-field-has-errors="hasErrors ? '' : null">
         <div
+            :dir="uiDirection"
             v-if="label || $slots.label || $slots.actions || (instructions && !instructionsBelow)"
             class="flex flex-col gap-1.5"
             data-ui-field-header

From 5e5845597718222d45f3d5d2f1e5d205fc466be3 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Sun, 28 Jun 2026 16:37:00 -0700
Subject: [PATCH 2/4] wip

---
 resources/js/components/fieldtypes/bard/Set.vue       | 5 +++++
 resources/js/components/fieldtypes/replicator/Set.vue | 3 +++
 2 files changed, 8 insertions(+)

diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index be01a6a5c1..0714d4b38d 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -18,6 +18,7 @@
         >
             <div ref="content" hidden />
             <header
+                :dir="uiDirection"
                 class="group/header animate-border-color show-focus-within flex items-center rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 hover:bg-gray-100 dark:hover:bg-gray-950/45 border-gray-300 dark:shadow-md"
                 :class="{
                     'bg-gray-200/50 dark:bg-gray-950/35 rounded-b-none': !collapsed && hasFields
@@ -145,6 +146,10 @@ export default {
     },
 
     computed: {
+        uiDirection() {
+            return document.documentElement.dir || 'ltr';
+        },
+
         fields() {
             return this.config.fields;
         },
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 3b7ef4c3a7..8f9f81366d 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -120,6 +120,8 @@ function destroy() {
     emit('removed');
 }
 
+const uiDirection = computed(() => document.documentElement.dir || 'ltr');
+
 const rootEl = ref();
 reveal.use(rootEl, () => emit('expanded'));
 </script>
@@ -141,6 +143,7 @@ reveal.use(rootEl, () => emit('expanded'));
             :data-type="config.handle"
         >
             <header
+                :dir="uiDirection"
                 class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 hover:bg-gray-100 dark:hover:bg-gray-950/45 border-gray-300 dark:shadow-md"
                 :class="{
                     'bg-gray-200/50 dark:bg-gray-950/35 rounded-b-none': !collapsed && hasFields

From fd2dabc2e82c13878650573c805d418f1f06c64b Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Sun, 28 Jun 2026 16:43:17 -0700
Subject: [PATCH 3/4] another spot

---
 resources/js/components/fieldtypes/bard/BardFieldtype.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index d2933bfe17..0a2ec5cbe2 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -98,7 +98,7 @@
                                 @added="addSet"
                             >
                                 <template #trigger>
-                                    <div class="absolute flex items-center gap-2 top-[-6px] z-1 -start-7 @lg/bard:-start-4.5 group" :style="{ transform: `translateY(${y}px)` }">
+                                    <div :dir="uiDirection" class="absolute flex items-center gap-2 top-[-6px] z-1 -start-7 @lg/bard:-start-4.5 group" :style="{ transform: `translateY(${y}px)` }">
                                         <ui-button
                                             icon="plus"
                                             size="sm"
@@ -227,6 +227,10 @@ export default {
     },
 
     computed: {
+        uiDirection() {
+            return document.documentElement.dir || 'ltr';
+        },
+
         setFieldPathPrefix() {
             return this.fieldPathPrefix ? `${this.fieldPathPrefix}.${this.handle}` : this.handle;
         },

From 440fd007d478448bf4e4d07e4769b89bf5090519 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Sun, 28 Jun 2026 16:52:09 -0700
Subject: [PATCH 4/4] refactor

---
 .../js/components/fieldtypes/bard/BardFieldtype.vue      | 9 +++++----
 resources/js/components/fieldtypes/bard/Set.vue          | 9 +++++----
 resources/js/components/fieldtypes/replicator/Set.vue    | 3 ++-
 resources/js/components/ui/Field.vue                     | 3 ++-
 resources/js/composables/ui-direction.js                 | 7 +++++++
 5 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 resources/js/composables/ui-direction.js

diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 0a2ec5cbe2..5cc211fcf1 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -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 { useUiDirection } from '@/composables/ui-direction.js';
 
 const lowlight = createLowlight(common);
 let tiptap = null;
@@ -185,6 +186,10 @@ let commandPaletteCallbackRegistered = false;
 export default {
     mixins: [Fieldtype, ManagesSetMeta],
 
+    setup() {
+        return useUiDirection();
+    },
+
     components: {
         BubbleMenu,
         BardToolbarButton,
@@ -227,10 +232,6 @@ export default {
     },
 
     computed: {
-        uiDirection() {
-            return document.documentElement.dir || 'ltr';
-        },
-
         setFieldPathPrefix() {
             return this.fieldPathPrefix ? `${this.fieldPathPrefix}.${this.handle}` : this.handle;
         },
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 0714d4b38d..fa84896200 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -118,10 +118,15 @@ import {
 import { containerContextKey } from '@/components/ui/Publish/Container.vue';
 import { watch } from 'vue';
 import { reveal } from '@api';
+import { useUiDirection } from '@/composables/ui-direction.js';
 
 export default {
     props: nodeViewProps,
 
+    setup() {
+        return useUiDirection();
+    },
+
     components: {
         Button,
         Dropdown,
@@ -146,10 +151,6 @@ export default {
     },
 
     computed: {
-        uiDirection() {
-            return document.documentElement.dir || 'ltr';
-        },
-
         fields() {
             return this.config.fields;
         },
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 8f9f81366d..32759cc66f 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, inject, ref } from 'vue';
+import { useUiDirection } from '@/composables/ui-direction.js';
 import {
     Icon,
     Switch,
@@ -120,7 +121,7 @@ function destroy() {
     emit('removed');
 }
 
-const uiDirection = computed(() => document.documentElement.dir || 'ltr');
+const { uiDirection } = useUiDirection();
 
 const rootEl = ref();
 reveal.use(rootEl, () => emit('expanded'));
diff --git a/resources/js/components/ui/Field.vue b/resources/js/components/ui/Field.vue
index cf6f2e9c81..c17deac80e 100644
--- a/resources/js/components/ui/Field.vue
+++ b/resources/js/components/ui/Field.vue
@@ -6,12 +6,13 @@ import Label from './Label.vue';
 import ErrorMessage from './ErrorMessage.vue';
 import markdown from '@/util/markdown.js';
 import { twMerge } from 'tailwind-merge';
+import { useUiDirection } from '@/composables/ui-direction.js';
 
 defineOptions({
     inheritAttrs: false,
 });
 
-const uiDirection = computed(() => document.documentElement.dir || 'ltr');
+const { uiDirection } = useUiDirection();
 
 const props = defineProps({
     /** When `true`, the field is styled as a configuration field with a two-column grid layout. */
diff --git a/resources/js/composables/ui-direction.js b/resources/js/composables/ui-direction.js
new file mode 100644
index 0000000000..dcee2988b9
--- /dev/null
+++ b/resources/js/composables/ui-direction.js
@@ -0,0 +1,7 @@
+import { computed } from 'vue';
+
+export function useUiDirection() {
+    return {
+        uiDirection: computed(() => document.documentElement.dir || 'ltr'),
+    };
+}