From 1413c8a08cd357fb95701a215f760d9f854da96a Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 10 Mar 2026 10:54:03 +0000
Subject: [PATCH 01/15] Only remove Bard set when backspace key is hit

---
 .../js/components/fieldtypes/bard/Set.js      | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/bard/Set.js b/resources/js/components/fieldtypes/bard/Set.js
index bd5225b064d..9b9b988aa96 100644
--- a/resources/js/components/fieldtypes/bard/Set.js
+++ b/resources/js/components/fieldtypes/bard/Set.js
@@ -1,5 +1,5 @@
 import { Node } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Plugin, PluginKey, NodeSelection } from '@tiptap/pm/state';
 import { Slice, Fragment } from '@tiptap/pm/model';
 import { Decoration, DecorationSet } from '@tiptap/pm/view';
 import { VueNodeViewRenderer } from '@tiptap/vue-3';
@@ -75,6 +75,35 @@ export const Set = Node.create({
         };
     },
 
+    addKeyboardShortcuts() {
+        const shortcuts = {};
+        const type = this.type;
+
+        const isSetSelected = (state) => {
+            const { selection } = state;
+            return selection instanceof NodeSelection && selection.node.type === type;
+        };
+
+        const blockCharacterKey = () => isSetSelected(this.editor.state);
+
+        // Letters a-z
+        for (let i = 97; i <= 122; i++) {
+            shortcuts[String.fromCharCode(i)] = blockCharacterKey;
+        }
+
+        // Numbers 0-9
+        for (let i = 0; i <= 9; i++) {
+            shortcuts[String(i)] = blockCharacterKey;
+        }
+
+        // Common punctuation/symbols
+        [' ', '-', '=', '[', ']', '\\', ';', "'", ',', '.', '/', '`'].forEach(
+            (key) => (shortcuts[key] = blockCharacterKey),
+        );
+
+        return shortcuts;
+    },
+
     addProseMirrorPlugins() {
         const bard = this.options.bard;
         const type = this.type;

From fc5d0c897a0e7e008acded6eb55384c1f84fa3d3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 10 Mar 2026 12:42:49 +0000
Subject: [PATCH 02/15] Selection state - Simplify CSS by converting some long
 Tailwind classes

---
 resources/css/components/fieldtypes/bard.css   | 18 ++++++++++++++++++
 resources/css/elements/base.css                |  2 +-
 .../js/components/fieldtypes/bard/Set.vue      |  5 +----
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 89cdf7e52f5..9b767f50f28 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -38,6 +38,24 @@
         }
     }
 }
+/* BARD / SELECTION STATE
+=================================================== */
+@layer ui {
+    /* 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). */
+    /* This prevents the outer selection outline from showing while the user is actively working inside the Set. */
+    .st-set-is-selected:not(:has(:focus-within)) {
+        @apply border-blue-400! dark:border-blue-400!;
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: -1px;
+            pointer-events: none;
+            @apply border-2 border-blue-400 dark:border-blue-400 rounded-lg;
+        }
+    }
+}
 /* BARD / FOOTER TOOLBAR
 =================================================== */
 @layer ui {
diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 465bf07665f..b6d33381399 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -92,7 +92,7 @@
             </button>
         </div>
 
-    s*/
+    */
     .show-focus-within:has(.show-focus-within_target:focus-visible) {
         /* Stop the transition ruining the focus outline quickly appearing. */
         transition: none;
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 848ce6923e4..6a1d9fd34f6 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -4,10 +4,7 @@
             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"
             :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).
-                // This prevents the outer selection outline from showing while the user is actively working inside the Set.
-                'st-set-is-selected [&:not(:has(:focus-within))]:border-blue-400! [&:not(:has(:focus-within))]:dark:border-blue-400! [&:not(:has(:focus-within))]:before:content-[\'\'] [&:not(:has(:focus-within))]:before:absolute [&:not(:has(:focus-within))]:before:inset-[-1px] [&:not(:has(:focus-within))]:before:pointer-events-none [&:not(:has(:focus-within))]:before:border-2 [&:not(:has(:focus-within))]:before:border-blue-400 [&:not(:has(:focus-within))]:dark:before:border-blue-400 [&:not(:has(:focus-within))]:before:rounded-lg': showSelectionHighlight,
+                'st-set-is-selected': showSelectionHighlight,
                 'border-red-500': hasError,
             }"
             :data-type="config.handle"

From 08a5245be8b0045f9d819b271e002aac74107c4e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 10 Mar 2026 12:45:35 +0000
Subject: [PATCH 03/15] Selection state - Remove extra border not needed
 because it's already handled with the pseudo content

---
 resources/css/components/fieldtypes/bard.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 9b767f50f28..5161b189e55 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -45,8 +45,6 @@
     /* 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). */
     /* This prevents the outer selection outline from showing while the user is actively working inside the Set. */
     .st-set-is-selected:not(:has(:focus-within)) {
-        @apply border-blue-400! dark:border-blue-400!;
-
         &::before {
             content: '';
             position: absolute;

From 59aeb643bc1ee39d8157564058b3f8c98676c3fb Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 10 Mar 2026 13:55:18 +0000
Subject: [PATCH 04/15] Selection state - Handle the selection state better
 when the dropdown is open

---
 resources/css/components/fieldtypes/bard.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 5161b189e55..47aca86da21 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -42,9 +42,13 @@
 =================================================== */
 @layer ui {
     /* 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). */
-    /* This prevents the outer selection outline from showing while the user is actively working inside the Set. */
-    .st-set-is-selected:not(:has(:focus-within)) {
+    .st-set-is-selected:not(:has(
+        /* Turn the outline off if any element inside the Set has focus (e.g. when editing inside a Bard field). This prevents the outer selection outline from showing while the user is actively working inside the Set. */
+        :focus-within,
+        /* When the dropdown is open e.g. with options to collapse the set, the outer selection outline should be hidden. Instead we'll show a focus outline for the replicator set that's selected. */
+        [data-ui-dropdown-trigger][data-state="open"]
+    )),
+    [data-replicator-set]:has([data-ui-dropdown-trigger][data-state="open"]) {
         &::before {
             content: '';
             position: absolute;

From 5af85a08b0f630349a0e3baab055d39f2d548fa5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 10 Mar 2026 14:37:00 +0000
Subject: [PATCH 05/15] =?UTF-8?q?When=20the=20dropdown=20has=20just=20clos?=
 =?UTF-8?q?ed=20(open=E2=86=92closed),=20keep=20the=20outline=20hidden=20b?=
 =?UTF-8?q?riefly=20so=20it=20doesn't=20flicker=20back=20to=20the=20parent?=
 =?UTF-8?q?=20while=20focus=20settles.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/css/components/fieldtypes/bard.css   |  4 +++-
 .../js/components/fieldtypes/bard/Set.vue      | 18 +++++++++++++++++-
 .../components/fieldtypes/replicator/Set.vue   | 17 +++++++++++++++--
 .../js/components/ui/Dropdown/Dropdown.vue     | 10 +++++++++-
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 47aca86da21..11f4fc9e08e 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -46,7 +46,9 @@
         /* Turn the outline off if any element inside the Set has focus (e.g. when editing inside a Bard field). This prevents the outer selection outline from showing while the user is actively working inside the Set. */
         :focus-within,
         /* When the dropdown is open e.g. with options to collapse the set, the outer selection outline should be hidden. Instead we'll show a focus outline for the replicator set that's selected. */
-        [data-ui-dropdown-trigger][data-state="open"]
+        [data-ui-dropdown-trigger][data-state="open"],
+        /* When the dropdown has just closed (open→closed), keep the outline hidden briefly so it doesn't flicker back to the parent while focus settles. */
+        .st-dropdown-just-closed
     )),
     [data-replicator-set]:has([data-ui-dropdown-trigger][data-state="open"]) {
         &::before {
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 6a1d9fd34f6..ef48f2c517e 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -6,6 +6,7 @@
             :class="{
                 'st-set-is-selected': showSelectionHighlight,
                 'border-red-500': hasError,
+                'st-dropdown-just-closed': dropdownJustClosed,
             }"
             :data-type="config.handle"
             contenteditable="false"
@@ -44,7 +45,7 @@
                 <div class="flex items-center gap-2" v-if="!isReadOnly">
                     <Switch size="xs" v-model="enabled" v-tooltip="enabled ? __('Included in output') : __('Hidden from output')" />
 
-                    <Dropdown>
+                    <Dropdown @closed="onSetDropdownClosed">
                         <template #trigger>
                             <Button icon="dots" variant="ghost" size="xs" :aria-label="__('Open dropdown menu')" />
                         </template>
@@ -127,6 +128,12 @@ export default {
 
     mixins: [ManagesPreviewText, HasFieldActions],
 
+    data() {
+        return {
+            dropdownJustClosed: false,
+        };
+    },
+
     inject: {
         bard: {},
         bardSets: {},
@@ -313,6 +320,15 @@ export default {
                 this.getPos,
             );
         },
+
+        onSetDropdownClosed() {
+            this.dropdownJustClosed = true;
+            if (this._dropdownJustClosedTimeout) clearTimeout(this._dropdownJustClosedTimeout);
+            this._dropdownJustClosedTimeout = setTimeout(() => {
+                this.dropdownJustClosed = false;
+                this._dropdownJustClosedTimeout = null;
+            }, 100);
+        },
     },
 
     mounted() {
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index bace108bb31..bf6d0a4a8aa 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -121,6 +121,18 @@ function destroy() {
 
 const rootEl = ref();
 reveal.use(rootEl, () => emit('expanded'));
+
+const dropdownJustClosed = ref(false);
+let dropdownJustClosedTimeout = null;
+
+function onSetDropdownClosed() {
+    dropdownJustClosed.value = true;
+    if (dropdownJustClosedTimeout) clearTimeout(dropdownJustClosedTimeout);
+    dropdownJustClosedTimeout = setTimeout(() => {
+        dropdownJustClosed.value = false;
+        dropdownJustClosedTimeout = null;
+    }, 150);
+}
 </script>
 
 <template>
@@ -131,7 +143,8 @@ reveal.use(rootEl, () => emit('expanded'));
             data-replicator-set
             class="relative w-full rounded-lg border border-gray-300 text-base dark:border-white/10 bg-white dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black shadow-ui-sm dark:[&_[data-ui-switch]]:border-gray-600 dark:[&_[data-ui-switch]]:border-1"
             :class="{
-                'border-red-500': hasError
+                'border-red-500': hasError,
+                'st-dropdown-just-closed': dropdownJustClosed
             }"
             :data-collapsed="collapsed ?? undefined"
             :data-error="hasError ?? undefined"
@@ -173,7 +186,7 @@ reveal.use(rootEl, () => emit('expanded'));
                 </button>
                 <div class="flex items-center gap-2" v-if="!readOnly">
                     <Switch size="xs" :model-value="enabled" @update:model-value="toggleEnabledState" v-tooltip="enabled ? __('Included in output') : __('Hidden from output')" />
-                    <Dropdown>
+                    <Dropdown @closed="onSetDropdownClosed">
                         <template #trigger>
                             <Button icon="dots" variant="ghost" size="xs" :aria-label="__('Open dropdown menu')" />
                         </template>
diff --git a/resources/js/components/ui/Dropdown/Dropdown.vue b/resources/js/components/ui/Dropdown/Dropdown.vue
index 3c9f038239e..c78110f9d17 100644
--- a/resources/js/components/ui/Dropdown/Dropdown.vue
+++ b/resources/js/components/ui/Dropdown/Dropdown.vue
@@ -10,6 +10,8 @@ defineOptions({
 
 const attrs = useAttrs();
 
+const emit = defineEmits(['closed']);
+
 const props = defineProps({
     /** The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end` */
     align: { type: String, default: 'start' },
@@ -19,6 +21,12 @@ const props = defineProps({
     side: { type: String, default: 'bottom' },
 });
 
+function onOpenChange(open) {
+    if (open === false) {
+        emit('closed');
+    }
+}
+
 const dropdownContentClasses = cva({
     base: [
         'rounded-xl min-w-64 bg-gray-50 dark:bg-gray-800 outline-hidden overflow-hidden group z-50',
@@ -28,7 +36,7 @@ const dropdownContentClasses = cva({
 </script>
 
 <template>
-    <DropdownMenuRoot>
+    <DropdownMenuRoot @update:open="onOpenChange">
         <DropdownMenuTrigger as-child data-ui-dropdown-trigger>
             <slot name="trigger">
                 <Button icon="dots" variant="ghost" size="sm" v-bind="attrs" :aria-label="__('Open dropdown menu')" />

From d62835bc44d877271cf44336c15a2ae2575e6b5f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 11:18:44 +0000
Subject: [PATCH 06/15] Selection state - Fix button focus states. Re-focus
 [data-ui-button-group] to prevent focus drifting back to container

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

diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 6594a89e16d..cf44ada7b81 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -46,6 +46,29 @@ const tag = computed(() => {
 });
 const iconOnly = computed(() => (props.icon && !hasDefaultSlot && !props.text) || props.iconOnly);
 
+function focusButtonOnPointerDown(event) {
+    if (props.disabled || props.loading) return;
+
+    const target = event.currentTarget;
+    if (!(target instanceof HTMLButtonElement)) return;
+
+    // Safari may not focus buttons on click, which breaks :focus-within-dependent UI states.
+    target.focus({ preventScroll: true });
+}
+
+function keepGroupButtonFocused(event) {
+    if (props.disabled || props.loading) return;
+
+    const target = event.currentTarget;
+    if (!(target instanceof HTMLButtonElement)) return;
+
+    if (!target.closest('[data-ui-button-group]')) return;
+
+    // Some component stacks re-focus a wrapper on mouseup/click. Re-assert the button focus.
+    requestAnimationFrame(() => target.focus({ preventScroll: true }));
+    setTimeout(() => target.focus({ preventScroll: true }), 0);
+}
+
 const buttonClasses = computed(() => {
     const classes = cva({
         base: 'relative inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-gray-400 dark:disabled:text-gray-600 disabled:[&_svg]:opacity-30 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white',
@@ -122,6 +145,8 @@ const buttonClasses = computed(() => {
         :href
         :target
         :type="props.href ? null : type"
+        @pointerdown="focusButtonOnPointerDown"
+        @click="keepGroupButtonFocused"
     >
         <Icon v-if="icon" :name="icon" />
         <Icon v-if="loading" name="loading" :size />

From 45f0d121380a706b5bf8f0a4fba405691cb01284 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 12:00:16 +0000
Subject: [PATCH 07/15] Selection state - Fix button focus states. Re-focus
 quick actions to prevent focus drifting back to container

---
 .../components/field-actions/FieldActions.vue | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/field-actions/FieldActions.vue b/resources/js/components/field-actions/FieldActions.vue
index 53d7bb35085..d70afa01b1a 100644
--- a/resources/js/components/field-actions/FieldActions.vue
+++ b/resources/js/components/field-actions/FieldActions.vue
@@ -16,17 +16,19 @@
             </DropdownMenu>
         </Dropdown>
         <ButtonGroup class="mr-0.75 -mt-0.5">
+            <!-- Keep quick actions focusable for :focus-within styles, even when disabled. -->
             <Button
                 v-for="(action, index) in actions.filter((a) => a.quick)"
                 :key="index"
-                @click="action.run()"
+                @click="runQuickAction(action, $event)"
                 v-tooltip="action.title"
                 size="2xs"
-                :disabled="action.disabled"
+                :aria-disabled="action.disabled ? 'true' : null"
+                :class="{ '!cursor-not-allowed': action.disabled }"
                 :icon-only="true"
                 :aria-label="action.title"
             >
-                <ui-icon :name="action.icon" class="size-3.5" />
+                <ui-icon :name="action.icon" class="size-3.5" :class="{ '!opacity-30': action.disabled }" />
             </Button>
         </ButtonGroup>
     </div>
@@ -59,5 +61,21 @@ export default {
             return this.actions.filter((a) => !a.quick).length > 0;
         },
     },
+
+    methods: {
+        runQuickAction(action, event) {
+            const target = event?.currentTarget;
+
+            if (action.disabled) {
+                if (target instanceof HTMLButtonElement) {
+                    // Re-focus after click so selection/focus styling doesn't jump to parent containers.
+                    requestAnimationFrame(() => target.focus({ preventScroll: true }));
+                }
+                return;
+            }
+
+            action.run();
+        },
+    },
 };
 </script>

From bb46eaf1908b9c952180a67aad612f744d210cf0 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 12:23:14 +0000
Subject: [PATCH 08/15] Revert conflict

---
 resources/js/components/fieldtypes/bard/Set.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 50c14230375..60415e2a14d 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -4,11 +4,9 @@
             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"
             :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).
-                // This prevents the outer selection outline from showing while the user is actively working inside the Set.
-                'st-set-is-selected [&:not(:has(:focus-within))]:border-blue-400! [&:not(:has(:focus-within))]:dark:border-blue-400! [&:not(:has(:focus-within))]:before:content-[\'\'] [&:not(:has(:focus-within))]:before:absolute [&:not(:has(:focus-within))]:before:inset-[-1px] [&:not(:has(:focus-within))]:before:pointer-events-none [&:not(:has(:focus-within))]:before:border-2 [&:not(:has(:focus-within))]:before:border-blue-400 [&:not(:has(:focus-within))]:dark:before:border-blue-400 [&:not(:has(:focus-within))]:before:rounded-lg': showSelectionHighlight,
+                'st-set-is-selected': showSelectionHighlight,
                 'border-red-500': hasError,
+                'st-dropdown-just-closed': dropdownJustClosed,
             }"
             :data-type="config.handle"
             contenteditable="false"

From 4855c4ff39c1f18f590d2e79aa8756ec8a1e210b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 12:32:11 +0000
Subject: [PATCH 09/15] =?UTF-8?q?Restore=20"When=20the=20dropdown=20has=20?=
 =?UTF-8?q?just=20closed=20(open=E2=86=92closed),=20keep=20the=20outline?=
 =?UTF-8?q?=20hidden=20briefly=20so=20it=20doesn't=20flicker=20back=20to?=
 =?UTF-8?q?=20the=20parent=20while=20focus=20settles."=20broken=20by=20the?=
 =?UTF-8?q?=20merge=20conflict?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/components/fieldtypes/bard/Set.vue      | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 60415e2a14d..5afce6aefac 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -47,7 +47,7 @@
                 <div class="flex items-center gap-2" v-if="!isReadOnly">
                     <Switch size="xs" v-model="enabled" v-tooltip="enabled ? __('Included in output') : __('Hidden from output')" />
 
-                    <Dropdown>
+                    <Dropdown @closed="onSetDropdownClosed">
                         <template #trigger>
                             <Button icon="dots" variant="ghost" size="xs" :aria-label="__('Open dropdown menu')" />
                         </template>
@@ -118,6 +118,12 @@ import { reveal } from '@api';
 export default {
     props: nodeViewProps,
 
+    data() {
+        return {
+            dropdownJustClosed: false,
+        };
+    },
+
     components: {
         Button,
         Dropdown,
@@ -340,6 +346,15 @@ export default {
             this.$el.setAttribute('draggable', false);
             this._draggableObserver?.observe(this.$el, { attributes: true, attributeFilter: ['draggable'] });
         },
+
+        onSetDropdownClosed() {
+            this.dropdownJustClosed = true;
+            if (this._dropdownJustClosedTimeout) clearTimeout(this._dropdownJustClosedTimeout);
+            this._dropdownJustClosedTimeout = setTimeout(() => {
+                this.dropdownJustClosed = false;
+                this._dropdownJustClosedTimeout = null;
+            }, 150);
+        },
     },
 
     mounted() {
@@ -372,6 +387,7 @@ export default {
     },
 
     beforeUnmount() {
+        if (this._dropdownJustClosedTimeout) clearTimeout(this._dropdownJustClosedTimeout);
         this._draggableObserver?.disconnect();
     },
 };

From 5c24fb571caab0c2508b2ff59117171c6ef65a7d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 14:25:47 +0000
Subject: [PATCH 10/15] Selection state - Further adjustments

---
 resources/css/components/fieldtypes/bard.css | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 11f4fc9e08e..ccb424e9aea 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -41,22 +41,30 @@
 /* BARD / SELECTION STATE
 =================================================== */
 @layer ui {
-    /* We’re styling a Set so that it shows a “selection outline” when selected with the mouse or keyboard. */
+    /* 
+      Here we're carefully controlling the “selection outline” when a set is selected with the mouse or keyboard.
+      Style the selection outline...
+    */
     .st-set-is-selected:not(:has(
-        /* Turn the outline off if any element inside the Set has focus (e.g. when editing inside a Bard field). This prevents the outer selection outline from showing while the user is actively working inside the Set. */
+        /* Except if... */
+        /* Any element inside the Set has focus (e.g. when editing inside a Bard field). This prevents the outer selection outline from showing while the user is actively working inside the Set. */
         :focus-within,
-        /* When the dropdown is open e.g. with options to collapse the set, the outer selection outline should be hidden. Instead we'll show a focus outline for the replicator set that's selected. */
+        /* When the options dropdown is open on an _inner_ set, the outer selection outline should be hidden. Instead we'll show a focus outline just for the replicator set that's selected. */
         [data-ui-dropdown-trigger][data-state="open"],
-        /* When the dropdown has just closed (open→closed), keep the outline hidden briefly so it doesn't flicker back to the parent while focus settles. */
+        /* When the dropdown has just closed (open → closed), keep the outline hidden briefly so it doesn't flicker back to the parent while focus settles. */
         .st-dropdown-just-closed
     )),
-    [data-replicator-set]:has([data-ui-dropdown-trigger][data-state="open"]) {
+    /* Show a focus outline _just_ on the outer set, when we have the dropdown open on the outer set */
+    .st-set-is-selected:has(> header [data-ui-dropdown-trigger][data-state="open"]),
+    /* Show a focus outline just for the replicator set that's selected. We're using a direct descendant selector here in case there are further nested replicator sets. */
+    [data-replicator-set]:has(> header [data-ui-dropdown-trigger][data-state="open"]) {
         &::before {
             content: '';
             position: absolute;
             inset: -1px;
             pointer-events: none;
             @apply border-2 border-blue-400 dark:border-blue-400 rounded-lg;
+            /* border: 3px solid blue!important; */
         }
     }
 }

From 280691da154a2a7023f29f5a5b70dc341a627e1f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 14:32:19 +0000
Subject: [PATCH 11/15] Hide the selection outline when we have a modal open,
 since the focus outline will no longer be correct

---
 resources/css/components/fieldtypes/bard.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index ccb424e9aea..487b4abe7d4 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -41,6 +41,8 @@
 /* BARD / SELECTION STATE
 =================================================== */
 @layer ui {
+    /* Hide the selection outline when we have a modal open, since the focus outline will no longer be correct. */
+    body:not(:has([data-ui-modal-content])) {
     /* 
       Here we're carefully controlling the “selection outline” when a set is selected with the mouse or keyboard.
       Style the selection outline...
@@ -67,6 +69,7 @@
             /* border: 3px solid blue!important; */
         }
     }
+    }
 }
 /* BARD / FOOTER TOOLBAR
 =================================================== */

From e52a6dd5466a6a48ca65e2df5ac9ea5080fea6e2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 14:32:35 +0000
Subject: [PATCH 12/15] Reindent

---
 resources/css/components/fieldtypes/bard.css | 49 ++++++++++----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 487b4abe7d4..48de104a5b3 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -43,33 +43,32 @@
 @layer ui {
     /* Hide the selection outline when we have a modal open, since the focus outline will no longer be correct. */
     body:not(:has([data-ui-modal-content])) {
-    /* 
-      Here we're carefully controlling the “selection outline” when a set is selected with the mouse or keyboard.
-      Style the selection outline...
-    */
-    .st-set-is-selected:not(:has(
-        /* Except if... */
-        /* Any element inside the Set has focus (e.g. when editing inside a Bard field). This prevents the outer selection outline from showing while the user is actively working inside the Set. */
-        :focus-within,
-        /* When the options dropdown is open on an _inner_ set, the outer selection outline should be hidden. Instead we'll show a focus outline just for the replicator set that's selected. */
-        [data-ui-dropdown-trigger][data-state="open"],
-        /* When the dropdown has just closed (open → closed), keep the outline hidden briefly so it doesn't flicker back to the parent while focus settles. */
-        .st-dropdown-just-closed
-    )),
-    /* Show a focus outline _just_ on the outer set, when we have the dropdown open on the outer set */
-    .st-set-is-selected:has(> header [data-ui-dropdown-trigger][data-state="open"]),
-    /* Show a focus outline just for the replicator set that's selected. We're using a direct descendant selector here in case there are further nested replicator sets. */
-    [data-replicator-set]:has(> header [data-ui-dropdown-trigger][data-state="open"]) {
-        &::before {
-            content: '';
-            position: absolute;
-            inset: -1px;
-            pointer-events: none;
-            @apply border-2 border-blue-400 dark:border-blue-400 rounded-lg;
-            /* border: 3px solid blue!important; */
+        /* 
+        Here we're carefully controlling the “selection outline” when a set is selected with the mouse or keyboard.
+        Style the selection outline...
+        */
+        .st-set-is-selected:not(:has(
+            /* Except if... */
+            /* Any element inside the Set has focus (e.g. when editing inside a Bard field). This prevents the outer selection outline from showing while the user is actively working inside the Set. */
+            :focus-within,
+            /* When the options dropdown is open on an _inner_ set, the outer selection outline should be hidden. Instead we'll show a focus outline just for the replicator set that's selected. */
+            [data-ui-dropdown-trigger][data-state="open"],
+            /* When the dropdown has just closed (open → closed), keep the outline hidden briefly so it doesn't flicker back to the parent while focus settles. */
+            .st-dropdown-just-closed
+        )),
+        /* Show a focus outline _just_ on the outer set, when we have the dropdown open on the outer set */
+        .st-set-is-selected:has(> header [data-ui-dropdown-trigger][data-state="open"]),
+        /* Show a focus outline just for the replicator set that's selected. We're using a direct descendant selector here in case there are further nested replicator sets. */
+        [data-replicator-set]:has(> header [data-ui-dropdown-trigger][data-state="open"]) {
+            &::before {
+                content: '';
+                position: absolute;
+                inset: -1px;
+                pointer-events: none;
+                @apply border-2 border-blue-400 dark:border-blue-400 rounded-lg;
+            }
         }
     }
-    }
 }
 /* BARD / FOOTER TOOLBAR
 =================================================== */

From 9740b06ebc597aae668bf1a5da55192369fdaf94 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 15:13:26 +0000
Subject: [PATCH 13/15] Hide the selection outline when we have a popper open,
 since the focus outline will no longer be correct

---
 resources/css/components/fieldtypes/bard.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 48de104a5b3..4e9c335bc01 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -41,8 +41,8 @@
 /* BARD / SELECTION STATE
 =================================================== */
 @layer ui {
-    /* Hide the selection outline when we have a modal open, since the focus outline will no longer be correct. */
-    body:not(:has([data-ui-modal-content])) {
+    /* Hide the selection outline when we have a modal or popper open, since the focus outline will no longer be correct. */
+    body:not(:has([data-ui-modal-content], [data-reka-popper-content-wrapper])) {
         /* 
         Here we're carefully controlling the “selection outline” when a set is selected with the mouse or keyboard.
         Style the selection outline...

From b5118637b79666d6724ae650811d6f41e56cb7e6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 15:39:10 +0000
Subject: [PATCH 14/15] Correct selector

---
 resources/css/components/fieldtypes/bard.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 4e9c335bc01..bf8d95463f6 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -41,8 +41,8 @@
 /* BARD / SELECTION STATE
 =================================================== */
 @layer ui {
-    /* Hide the selection outline when we have a modal or popper open, since the focus outline will no longer be correct. */
-    body:not(:has([data-ui-modal-content], [data-reka-popper-content-wrapper])) {
+    /* Hide the selection outline when we have a modal or combobox open, since the focus outline will no longer be correct. */
+    body:not(:has([data-ui-modal-content], [data-ui-combobox-content])) {
         /* 
         Here we're carefully controlling the “selection outline” when a set is selected with the mouse or keyboard.
         Style the selection outline...

From f1dcc5e93b6ff80a1cd3dbfa07f54fd9ddeb86da Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 16:58:31 +0000
Subject: [PATCH 15/15] Copy set.js from v6

---
 .../js/components/fieldtypes/bard/Set.js      | 29 -------------------
 1 file changed, 29 deletions(-)

diff --git a/resources/js/components/fieldtypes/bard/Set.js b/resources/js/components/fieldtypes/bard/Set.js
index 431389b585e..907d5e58cd9 100644
--- a/resources/js/components/fieldtypes/bard/Set.js
+++ b/resources/js/components/fieldtypes/bard/Set.js
@@ -75,35 +75,6 @@ export const Set = Node.create({
         };
     },
 
-    addKeyboardShortcuts() {
-        const shortcuts = {};
-        const type = this.type;
-
-        const isSetSelected = (state) => {
-            const { selection } = state;
-            return selection instanceof NodeSelection && selection.node.type === type;
-        };
-
-        const blockCharacterKey = () => isSetSelected(this.editor.state);
-
-        // Letters a-z
-        for (let i = 97; i <= 122; i++) {
-            shortcuts[String.fromCharCode(i)] = blockCharacterKey;
-        }
-
-        // Numbers 0-9
-        for (let i = 0; i <= 9; i++) {
-            shortcuts[String(i)] = blockCharacterKey;
-        }
-
-        // Common punctuation/symbols
-        [' ', '-', '=', '[', ']', '\\', ';', "'", ',', '.', '/', '`'].forEach(
-            (key) => (shortcuts[key] = blockCharacterKey),
-        );
-
-        return shortcuts;
-    },
-
     addProseMirrorPlugins() {
         const bard = this.options.bard;
         const type = this.type;