[6.x] Bard fields use language for fields, browser direction for labels/instructions

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"
@@ -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,

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
@@ -117,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,

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,6 +121,8 @@ function destroy() {
     emit('removed');
 }
 
+const { uiDirection } = useUiDirection();
+
 const rootEl = ref();
 reveal.use(rootEl, () => emit('expanded'));
 </script>
@@ -141,6 +144,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

resources/js/components/ui/Field.vue

@@ -6,11 +6,14 @@ 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 } = useUiDirection();
+
 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 +85,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

resources/js/composables/ui-direction.js

@@ -0,0 +1,7 @@
+import { computed } from 'vue';
+
+export function useUiDirection() {
+    return {
+        uiDirection: computed(() => document.documentElement.dir || 'ltr'),
+    };
+}