From 7cc0091d3c8422a13786f5cb650d9938a7a507dd Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 24 Nov 2025 16:21:01 +0000
Subject: [PATCH 01/54] bump up "subtle" button opacity slightly based the "x"
 controls on tables feeling a bit too faint

---
 resources/js/components/ui/Button/Button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 88403daf04..27998a7d96 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -48,7 +48,7 @@ const buttonClasses = computed(() => {
                 filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
-                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200 [&_svg]:opacity-35',
+                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200 [&_svg]:opacity-45',
                 pressed: [
                     'bg-linear-to-b from-gray-200 to-gray-150 text-gray-900 border border-gray-300 inset-shadow-sm/10',
                     'dark:from-black dark:to-black dark:text-white dark:border-gray-700/80',

From 5049d986f16f566181f63012b1dd889e8bb26a8a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 24 Nov 2025 16:22:19 +0000
Subject: [PATCH 02/54] Start adding red delete controls

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

diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index dfd6ea3be7..7ba47d0ad8 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -134,6 +134,23 @@ Table Fieldtype
                 @apply outline-hidden ring-0;
             }
         }
+        /* Red delete controls */
+        &:has([aria-label*="Delete"]) {
+            &:focus-within {
+                @apply bg-red-500/5;
+                svg {
+                    @apply text-red-500 opacity-100;
+                }
+            }
+            &:hover {
+                button {
+                    @apply bg-red-500/5;
+                }
+                svg {
+                    @apply text-red-500 opacity-100;
+                }
+            }
+        }
     }
 }
 

From 020e5ae79bd36cdd47976101278a4c06ba568d65 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 24 Nov 2025 17:33:30 +0000
Subject: [PATCH 03/54] Add some default "red button states" for subtle buttons
 that have a delete control

---
 resources/js/components/ui/Button/Button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 27998a7d96..a13748f594 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -48,7 +48,7 @@ const buttonClasses = computed(() => {
                 filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
-                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200 [&_svg]:opacity-45',
+                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-red-500/5 [&[aria-label*="Delete"]]:hover:[&_svg]:text-red-500 [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 pressed: [
                     'bg-linear-to-b from-gray-200 to-gray-150 text-gray-900 border border-gray-300 inset-shadow-sm/10',
                     'dark:from-black dark:to-black dark:text-white dark:border-gray-700/80',

From c6ba989aaf5eff19d79980b4947f12425312f86b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 24 Nov 2025 17:33:52 +0000
Subject: [PATCH 04/54] Adding red delete controls for the table fieldtype

---
 resources/css/components/fieldtypes/table.css | 31 +++++++------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 7ba47d0ad8..50405383a0 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -1,7 +1,5 @@
-/* ==========================================================================
-Table Fieldtype
-========================================================================== */
-
+/* TABLE FIELDTYPE
+=================================================== */
 .table-contained {
     @apply relative mb-4 w-full rounded-lg border text-gray shadow-ui-sm outline-hidden dark:border-gray-700 dark:text-dark-150 text-start;
     border-collapse: separate;
@@ -134,21 +132,16 @@ Table Fieldtype
                 @apply outline-hidden ring-0;
             }
         }
-        /* Red delete controls */
-        &:has([aria-label*="Delete"]) {
-            &:focus-within {
-                @apply bg-red-500/5;
-                svg {
-                    @apply text-red-500 opacity-100;
-                }
-            }
-            &:hover {
-                button {
-                    @apply bg-red-500/5;
-                }
-                svg {
-                    @apply text-red-500 opacity-100;
-                }
+    }
+
+    /* TABLE FIELDTYPE / RED DELETE CONTROLS (RED)
+    =================================================== */
+    th,
+    .row-controls {
+        &:has([aria-label*="Delete"]):focus-within {
+            @apply bg-red-500/5;
+            svg {
+                @apply text-red-500 opacity-100;
             }
         }
     }

From 991726281459966eaba68bb219f2c1b4d3c4470d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 10:35:05 +0000
Subject: [PATCH 05/54] Finish adding red delete controls for the table
 fieldtype

---
 resources/css/components/fieldtypes/table.css | 5 +++--
 resources/js/components/ui/Button/Button.vue  | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 50405383a0..02adbee773 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -129,7 +129,7 @@
         &:focus-within {
             @apply bg-gray-100 dark:bg-gray-700;
             button {
-                @apply outline-hidden ring-0;
+                @apply ring-0;
             }
         }
     }
@@ -139,7 +139,8 @@
     th,
     .row-controls {
         &:has([aria-label*="Delete"]):focus-within {
-            @apply bg-red-500/5;
+            --focus-outline-color: var(--color-red-500);
+            @apply bg-red-500/6;
             svg {
                 @apply text-red-500 opacity-100;
             }
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index a13748f594..8b90e836a9 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -48,7 +48,7 @@ const buttonClasses = computed(() => {
                 filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
-                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-red-500/5 [&[aria-label*="Delete"]]:hover:[&_svg]:text-red-500 [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
+                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-red-500/6 [&[aria-label*="Delete"]]:hover:[&_svg]:text-red-500 [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 pressed: [
                     'bg-linear-to-b from-gray-200 to-gray-150 text-gray-900 border border-gray-300 inset-shadow-sm/10',
                     'dark:from-black dark:to-black dark:text-white dark:border-gray-700/80',

From 401283b6a378162522264c9473d1ed86532a10d4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 10:35:29 +0000
Subject: [PATCH 06/54] Add red delete controls for combobox tags fieldtype

---
 resources/css/elements/base.css         | 7 +++++++
 resources/js/components/ui/Combobox.vue | 7 ++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 2a0f54caf9..d11d962179 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -61,6 +61,13 @@
         /* To effectively hide border radius clash with focus state */
         --focus-outline-offset: -1.85px;
     }
+
+    /* Delete buttons */
+    /* e.g. Tags fieldtype, deleting tags */
+    button[aria-label*="Deselect"]:focus {
+        --focus-outline-color: var(--color-red-500);
+        --focus-outline-offset: 5px;
+    }
 }
 
 /* Use a utility layer only when we need higher specificity */
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 59c10218f7..4fb740a70c 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -486,7 +486,12 @@ defineExpose({
                             <button
                                 v-if="!disabled && !readOnly"
                                 type="button"
-                                class="opacity-75 hover:opacity-100 cursor-pointer"
+                                class="
+                                    cursor-pointer relative opacity-75 size-2
+                                    before:absolute before:content-[''] befor-e:-inset-2.25 before:rounded-full 
+                                    hover:opacity-100 hover:text-red-500 hover:before:bg-red-500/6
+                                    focus:opacity-100 focus:text-red-500 focus:before:bg-red-500/6 focus:before:-inset-1.5
+                                "
                                 :aria-label="__('Deselect option')"
                                 @click="deselect(option.value)"
                             >

From 81991084c1d18c2fd6fa7f2540fefe8fc4d824b8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 10:40:39 +0000
Subject: [PATCH 07/54] Typo

---
 resources/js/components/ui/Combobox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 4fb740a70c..403eebed53 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -488,7 +488,7 @@ defineExpose({
                                 type="button"
                                 class="
                                     cursor-pointer relative opacity-75 size-2
-                                    before:absolute before:content-[''] befor-e:-inset-2.25 before:rounded-full 
+                                    before:absolute before:content-[''] before:-inset-2.25 before:rounded-full 
                                     hover:opacity-100 hover:text-red-500 hover:before:bg-red-500/6
                                     focus:opacity-100 focus:text-red-500 focus:before:bg-red-500/6 focus:before:-inset-1.5
                                 "

From 86c8a35912b5be5f4a840255059c09c0654edf6c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 11:20:23 +0000
Subject: [PATCH 08/54] Replace deletes reds with a variable to tidy things

---
 resources/css/components/fieldtypes/table.css | 5 +++--
 resources/css/elements/base.css               | 3 +++
 resources/js/components/ui/Button/Button.vue  | 2 +-
 resources/js/components/ui/Combobox.vue       | 4 ++--
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 02adbee773..1f666cd56e 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -140,9 +140,10 @@
     .row-controls {
         &:has([aria-label*="Delete"]):focus-within {
             --focus-outline-color: var(--color-red-500);
-            @apply bg-red-500/6;
+            background-color: var(--color-delete-bg);
             svg {
-                @apply text-red-500 opacity-100;
+                color: var(--color-delete);
+                opacity: 1;
             }
         }
     }
diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index d11d962179..e405be4650 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -11,6 +11,9 @@
     --focus-outline-color: var(--theme-color-focus-outline, var(--color-blue-400));
     --focus-outline-style: solid;
 
+    --color-delete-bg: oklch(from var(--color-red-500) l c h / 6%);
+    --color-delete: var(--color-red-500);
+
     /* The outline-offset value used for buttons */
     --outline-offset-button: 6px;
 
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 8b90e836a9..2c9c66addf 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -48,7 +48,7 @@ const buttonClasses = computed(() => {
                 filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
-                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-red-500/6 [&[aria-label*="Delete"]]:hover:[&_svg]:text-red-500 [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
+                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-[var(--color-delete-bg)] [&[aria-label*="Delete"]]:hover:[&_svg]:text-[var(--color-delete)] [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 pressed: [
                     'bg-linear-to-b from-gray-200 to-gray-150 text-gray-900 border border-gray-300 inset-shadow-sm/10',
                     'dark:from-black dark:to-black dark:text-white dark:border-gray-700/80',
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 403eebed53..dee581e420 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -489,8 +489,8 @@ defineExpose({
                                 class="
                                     cursor-pointer relative opacity-75 size-2
                                     before:absolute before:content-[''] before:-inset-2.25 before:rounded-full 
-                                    hover:opacity-100 hover:text-red-500 hover:before:bg-red-500/6
-                                    focus:opacity-100 focus:text-red-500 focus:before:bg-red-500/6 focus:before:-inset-1.5
+                                    hover:opacity-100 hover:text-[var(--color-delete)] hover:before:bg-[var(--color-delete-bg)]
+                                    focus:opacity-100 focus:text-[var(--color-delete)] focus:before:bg-[var(--color-delete-bg)] focus:before:-inset-1.5
                                 "
                                 :aria-label="__('Deselect option')"
                                 @click="deselect(option.value)"

From 3f9e38babf5f4a657c1c9d864bb4c008a57719e6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 11:30:30 +0000
Subject: [PATCH 09/54] Dark mode adjustments

---
 resources/css/components/fieldtypes/table.css | 2 +-
 resources/css/elements/base.css               | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 1f666cd56e..01f8255336 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -139,7 +139,7 @@
     th,
     .row-controls {
         &:has([aria-label*="Delete"]):focus-within {
-            --focus-outline-color: var(--color-red-500);
+            --focus-outline-color: var(--color-delete);
             background-color: var(--color-delete-bg);
             svg {
                 color: var(--color-delete);
diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index e405be4650..706ef71447 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -13,6 +13,9 @@
 
     --color-delete-bg: oklch(from var(--color-red-500) l c h / 6%);
     --color-delete: var(--color-red-500);
+    :where(.dark, .dark *) {
+        --color-delete: var(--color-red-600);
+    }
 
     /* The outline-offset value used for buttons */
     --outline-offset-button: 6px;

From 9e3b5bcd5d6dccccd51df554adf85c0da7264640 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 12:12:51 +0000
Subject: [PATCH 10/54] Use Tailwind good and proper

---
 resources/css/components/fieldtypes/table.css | 6 +++---
 resources/css/elements/base.css               | 6 ------
 resources/css/ui.css                          | 5 +++++
 resources/js/components/ui/Button/Button.vue  | 6 +++---
 resources/js/components/ui/Combobox.vue       | 8 ++++----
 resources/js/components/ui/Dropdown/Item.vue  | 2 +-
 6 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 01f8255336..3aabefcebf 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -139,10 +139,10 @@
     th,
     .row-controls {
         &:has([aria-label*="Delete"]):focus-within {
-            --focus-outline-color: var(--color-delete);
-            background-color: var(--color-delete-bg);
+            --focus-outline-color: var(--color-warning);
+            background-color: var(--color-warning-bg);
             svg {
-                color: var(--color-delete);
+                color: var(--color-warning);
                 opacity: 1;
             }
         }
diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 706ef71447..d11d962179 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -11,12 +11,6 @@
     --focus-outline-color: var(--theme-color-focus-outline, var(--color-blue-400));
     --focus-outline-style: solid;
 
-    --color-delete-bg: oklch(from var(--color-red-500) l c h / 6%);
-    --color-delete: var(--color-red-500);
-    :where(.dark, .dark *) {
-        --color-delete: var(--color-red-600);
-    }
-
     /* The outline-offset value used for buttons */
     --outline-offset-button: 6px;
 
diff --git a/resources/css/ui.css b/resources/css/ui.css
index 643e671487..282ff08918 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -30,6 +30,11 @@
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
 
+    --color-warning-bg: oklch(from var(--color-red-500) l c h / 6%);
+    --color-warning: var(--color-red-600);
+    --color-success-bg: oklch(from var(--color-green-500) l c h / 6%);
+    --color-success: var(--color-green-600);
+
     /* Temp */
     --color-dark-100: #dfe1e5;
     --color-dark-150: #bbbdc0;
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 2c9c66addf..fc9e1bf7f5 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -48,7 +48,7 @@ const buttonClasses = computed(() => {
                 filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
-                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-[var(--color-delete-bg)] [&[aria-label*="Delete"]]:hover:[&_svg]:text-[var(--color-delete)] [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
+                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-[var(--color-warning-bg)] [&[aria-label*="Delete"]]:hover:[&_svg]:text-warning [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 pressed: [
                     'bg-linear-to-b from-gray-200 to-gray-150 text-gray-900 border border-gray-300 inset-shadow-sm/10',
                     'dark:from-black dark:to-black dark:text-white dark:border-gray-700/80',
@@ -62,8 +62,8 @@ const buttonClasses = computed(() => {
             },
             groupBorder: {
                 danger: [
-                    'in-data-ui-button-group:text-red-500 in-data-ui-button-group:bg-linear-to-b in-data-ui-button-group:from-white in-data-ui-button-group:to-red-50 in-data-ui-button-group:hover:to-gray-100 in-data-ui-button-group:hover:bg-gray-50 in-data-ui-button-group:border in-data-ui-button-group:border-gray-300 in-data-ui-button-group:shadow-ui-sm in-data-ui-button-group:inset-shadow-none',
-                    'dark:in-data-ui-button-group:text-red-500 dark:in-data-ui-button-group:from-gray-850 dark:in-data-ui-button-group:to-red-900/10 dark:in-data-ui-button-group:hover:to-gray-850 dark:in-data-ui-button-group:hover:bg-gray-900 dark:in-data-ui-button-group:border-gray-700/80 dark:in-data-ui-button-group:shadow-ui-md',
+                    'in-data-ui-button-group:text-warning in-data-ui-button-group:bg-linear-to-b in-data-ui-button-group:from-white in-data-ui-button-group:to-red-50 in-data-ui-button-group:hover:to-gray-100 in-data-ui-button-group:hover:bg-gray-50 in-data-ui-button-group:border in-data-ui-button-group:border-gray-300 in-data-ui-button-group:shadow-ui-sm in-data-ui-button-group:inset-shadow-none',
+                    'dark:in-data-ui-button-group:text-warning dark:in-data-ui-button-group:from-gray-850 dark:in-data-ui-button-group:to-red-900/10 dark:in-data-ui-button-group:hover:to-gray-850 dark:in-data-ui-button-group:hover:bg-gray-900 dark:in-data-ui-button-group:border-gray-700/80 dark:in-data-ui-button-group:shadow-ui-md',
                 ],
                 ghost: '',
                 pressed: 'in-data-ui-button-group:border-s-0 [:is([data-ui-button-group]>&:first-child,_[data-ui-button-group]_:first-child>&)]:border-s-[1px]',
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index dee581e420..7c38b73a9e 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -156,9 +156,9 @@ const limitExceeded = computed(() => {
 
 const limitIndicatorColor = computed(() => {
     if (limitExceeded.value) {
-        return 'text-red-600';
+        return 'text-warning';
     } else if (limitReached.value) {
-        return 'text-green-600';
+        return 'text-success';
     }
 
     return 'text-gray';
@@ -489,8 +489,8 @@ defineExpose({
                                 class="
                                     cursor-pointer relative opacity-75 size-2
                                     before:absolute before:content-[''] before:-inset-2.25 before:rounded-full 
-                                    hover:opacity-100 hover:text-[var(--color-delete)] hover:before:bg-[var(--color-delete-bg)]
-                                    focus:opacity-100 focus:text-[var(--color-delete)] focus:before:bg-[var(--color-delete-bg)] focus:before:-inset-1.5
+                                    hover:opacity-100 hover:text-warning hover:before:bg-warning-bg
+                                    focus:opacity-100 focus:text-warning focus:before:bg-warning-bg focus:before:-inset-1.5
                                 "
                                 :aria-label="__('Deselect option')"
                                 @click="deselect(option.value)"
diff --git a/resources/js/components/ui/Dropdown/Item.vue b/resources/js/components/ui/Dropdown/Item.vue
index 9d561dfb4d..a9565450ca 100644
--- a/resources/js/components/ui/Dropdown/Item.vue
+++ b/resources/js/components/ui/Dropdown/Item.vue
@@ -27,7 +27,7 @@ const classes = cva({
     variants: {
         variant: {
             default: 'text-gray-700 dark:text-gray-300',
-            destructive: 'text-red-600 dark:text-red-500',
+            destructive: 'text-warning',
         },
     },
 })({ variant: props.variant });

From 95cb02c850609aea5cd891afb39a40c2e48968fb Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 14:44:58 +0000
Subject: [PATCH 11/54] Delete buttons - Switch from transparent background
 values because sometimes the backgrounds stack up and you get undesirable
 darker colors, and fix .dark overrides for @theme inline vars, based on using
 a dark mode background for delete buttons

---
 resources/css/ui.css | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index 282ff08918..e231575273 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -30,9 +30,9 @@
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
 
-    --color-warning-bg: oklch(from var(--color-red-500) l c h / 6%);
+    --color-warning-bg: var(--color-red-50);
     --color-warning: var(--color-red-600);
-    --color-success-bg: oklch(from var(--color-green-500) l c h / 6%);
+    --color-success-bg: var(--color-green-50);
     --color-success: var(--color-green-600);
 
     /* Temp */
@@ -88,14 +88,6 @@
     --color-dark-gray: #404040;
 }
 
-.dark {
-    @theme inline {
-        --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
-        --color-success: var(--color-green-500);
-        --color-gray-950: hsl(240deg 7% 8%);
-    }
-}
-
 @theme {
     --text-4xs: 0.4rem;
     --text-3xs: 0.5rem;
@@ -135,6 +127,11 @@
 }
 
 .dark {
+    --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
+    --color-gray-950: hsl(240deg 7% 8%);
+    --color-warning-bg: oklch(from var(--color-red-500) 20% 8% h);
+    --color-success-bg: oklch(from var(--color-green-500) 20% 8% h);
+    --color-success: var(--color-green-500);
     --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
 }
 

From db81c05d913fb5439ad20306335e3f856e8dae7e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 14:50:15 +0000
Subject: [PATCH 12/54] Shift delete states to the utility layer so they
 override tailwind utility classes, which we want

---
 resources/css/elements/base.css | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index d11d962179..e4ed5e8562 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -61,13 +61,6 @@
         /* To effectively hide border radius clash with focus state */
         --focus-outline-offset: -1.85px;
     }
-
-    /* Delete buttons */
-    /* e.g. Tags fieldtype, deleting tags */
-    button[aria-label*="Deselect"]:focus {
-        --focus-outline-color: var(--color-red-500);
-        --focus-outline-offset: 5px;
-    }
 }
 
 /* Use a utility layer only when we need higher specificity */
@@ -107,6 +100,31 @@
     }
 }
 
+/* DELETE STATES
+=================================================== */
+@layer utilities {
+    /* Delete buttons */
+    /* e.g. Tags fieldtype, deleting tags */
+    button[aria-label*="Deselect"],
+    button[aria-label*="Delete"],
+    button[aria-label*="Clear"] {
+        &:hover,
+        &:focus {
+            --focus-outline-color: var(--color-warning);
+            background: var(--color-warning-bg);
+            border-radius: 100%;
+            svg {
+                color: var(--color-warning);
+                opacity: 1;
+            }
+        }
+    }
+    /* e.g. Tags fieldtype, deleting tags */
+    button[aria-label*="Deselect"]:focus {
+        --focus-outline-offset: 7px;
+    }
+}
+
 /* Prevent tailwind typography from adding backticks around code elements */
 @utility prose {
     code {

From 0660c6511c96b5287d23ab3dfb173b4a2d64cf6a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 14:50:37 +0000
Subject: [PATCH 13/54] Delete buttons - date pickers and comboboxes

---
 resources/js/components/ui/Button/Button.vue         |  2 +-
 resources/js/components/ui/Combobox.vue              |  2 +-
 resources/js/components/ui/DatePicker/DatePicker.vue |  1 +
 .../ui/DateRangePicker/DateRangePicker.vue           | 12 +++++++++++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index fc9e1bf7f5..37b6520770 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -74,7 +74,7 @@ const buttonClasses = computed(() => {
         compoundVariants: [
             { iconOnly: true, size: 'lg', class: 'w-12 [&_svg]:size-5' },
             { iconOnly: true, size: 'base', class: 'w-10 [&_svg]:size-4.5' },
-            { iconOnly: true, size: 'sm', class: 'w-8 [&_svg]:size-3.5' },
+            { iconOnly: true, size: 'sm', class: 'w-8 [&_svg]:size-3.5 [--focus-outline-offset:-3px]' },
             { iconOnly: true, size: 'xs', class: 'w-6.5 h-6.5 [&_svg]:size-3' },
             { iconOnly: true, variant: 'pressed', class: '[&_svg]:!opacity-70 dark:[&_svg]:!opacity-100' },
             { iconOnly: false, iconAppend: true, class: '[&_svg]:-me-1' },
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 7c38b73a9e..3ee4684e65 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -495,7 +495,7 @@ defineExpose({
                                 :aria-label="__('Deselect option')"
                                 @click="deselect(option.value)"
                             >
-                                &times;
+                                <span class="relative">&times;</span>
                             </button>
                             <button v-else type="button" class="opacity-75">
                                 &times;
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index ba7833ec7b..cae7cf04af 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -172,6 +172,7 @@ const getInputLabel = (part) => {
                             icon="x"
                             class="-my-1.25 -me-2"
                             :disabled="disabled"
+                            :aria-label="__('Clear date')"
                             v-tooltip="__('Clear date')"
                         />
                     </div>
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index fd22b8a47b..fb5ce7b94c 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -148,7 +148,17 @@ const calendarEvents = computed(() => ({
                         </DateRangePickerInput>
                     </template>
                     <div class="flex-1" />
-                    <Button v-if="!readOnly" @click="emit('update:modelValue', null)" variant="subtle" size="sm" icon="x" class="-me-2" :disabled="disabled" />
+                    <Button 
+                        v-if="!readOnly" 
+                        @click="emit('update:modelValue', null)" 
+                        variant="subtle" 
+                        size="sm" 
+                        icon="x" 
+                        class="-me-2" 
+                        :disabled="disabled" 
+                        :aria-label="__('Clear date range')"
+                        v-tooltip="__('Clear date range')"
+                    />
                 </div>
             </DateRangePickerField>
 

From 2445dfddb9782a377e87b2c9d180904fcd00202a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 15:26:39 +0000
Subject: [PATCH 14/54] Delete buttons - add switches as an exception

---
 resources/css/elements/base.css | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index e4ed5e8562..d278a990ff 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -108,14 +108,17 @@
     button[aria-label*="Deselect"],
     button[aria-label*="Delete"],
     button[aria-label*="Clear"] {
-        &:hover,
-        &:focus {
-            --focus-outline-color: var(--color-warning);
-            background: var(--color-warning-bg);
-            border-radius: 100%;
-            svg {
-                color: var(--color-warning);
-                opacity: 1;
+        /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. */
+        &:not([role="switch"]) {
+            &:hover,
+            &:focus {
+                --focus-outline-color: var(--color-warning);
+                background: var(--color-warning-bg);
+                border-radius: 100%;
+                svg {
+                    color: var(--color-warning);
+                    opacity: 1;
+                }
             }
         }
     }

From f78e734d00cf80d6c7a1eab2b13ac5afd89cb4cf Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 15:26:59 +0000
Subject: [PATCH 15/54] Delete buttons - add background to dropdown

---
 resources/js/components/ui/Dropdown/Item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Dropdown/Item.vue b/resources/js/components/ui/Dropdown/Item.vue
index a9565450ca..bc0499d902 100644
--- a/resources/js/components/ui/Dropdown/Item.vue
+++ b/resources/js/components/ui/Dropdown/Item.vue
@@ -27,7 +27,7 @@ const classes = cva({
     variants: {
         variant: {
             default: 'text-gray-700 dark:text-gray-300',
-            destructive: 'text-warning',
+            destructive: 'text-warning hover:not-data-disabled:bg-warning-bg',
         },
     },
 })({ variant: props.variant });

From 3557881c70ec35f52e127f2557baeea78c7240bd Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 25 Nov 2025 15:35:11 +0000
Subject: [PATCH 16/54] Delete buttons - clearable

---
 resources/js/components/ui/Combobox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 3ee4684e65..d62409183b 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -388,8 +388,8 @@ defineExpose({
                         </div>
 
                         <div v-if="(clearable && modelValue) || (options.length || ignoreFilter)" class="flex gap-1.5 items-center ms-1.5 -me-2">
-                            <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" data-ui-combobox-clear-button />
-                            <Icon v-if="options.length || ignoreFilter" name="chevron-down" class="text-gray-400 dark:text-white/40 size-4" data-ui-combobox-chevron />
+                            <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" :aria-label="__('Clear selection')" v-tooltip="__('Clear selection')" data-ui-combobox-clear-button />
+                            <Icon v-if="options.length || ignoreFilter" name="chevron-down" class="text-gray-400 dark:text-white/40 size-4" aria-hidden="true" data-ui-combobox-chevron />
                         </div>
                     </ComboboxTrigger>
                 </ComboboxAnchor>

From 2a31ac8d77f45873efc411229f3cdffd79da57b8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 10:50:11 +0000
Subject: [PATCH 17/54] Delete states - use outline state instead so we don't
 have to worry about overriding borders, or adding borders to pseudo elements

---
 resources/css/elements/base.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index d278a990ff..617a441a1a 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -110,16 +110,22 @@
     button[aria-label*="Clear"] {
         /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. */
         &:not([role="switch"]) {
+            --focus-outline-color: var(--color-warning);
+            --focus-outline-width: 1px;
             &:hover,
+            &:hover::before,
             &:focus {
-                --focus-outline-color: var(--color-warning);
+                outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
+                outline-offset: var(--focus-outline-offset);
                 background: var(--color-warning-bg);
-                border-radius: 100%;
                 svg {
                     color: var(--color-warning);
                     opacity: 1;
                 }
             }
+            &.bg-transparent {
+                border-radius: 100%;
+            }
         }
     }
     /* e.g. Tags fieldtype, deleting tags */

From 417d5a6c0bccf4c4c8e8117f3b664742d5e437dc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 10:50:35 +0000
Subject: [PATCH 18/54] Delete states - time picker

---
 resources/css/elements/base.css                      | 1 +
 resources/js/components/ui/TimePicker/TimePicker.vue | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 617a441a1a..f899286364 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -115,6 +115,7 @@
             &:hover,
             &:hover::before,
             &:focus {
+                /* Delete states - use outline state instead so we don't have to worry about overriding borders, or adding borders to pseudo elements */
                 outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
                 outline-offset: var(--focus-outline-offset);
                 background: var(--color-warning-bg);
diff --git a/resources/js/components/ui/TimePicker/TimePicker.vue b/resources/js/components/ui/TimePicker/TimePicker.vue
index ad773cab7b..7bc2db1e9c 100644
--- a/resources/js/components/ui/TimePicker/TimePicker.vue
+++ b/resources/js/components/ui/TimePicker/TimePicker.vue
@@ -51,8 +51,8 @@ const setToNow = () => {
             </template>
         </div>
         <div class="flex items-center gap-1">
-            <Button v-if="clearable" @click="setToNow" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" size="xs" v-tooltip="__('Set to now')" icon="time-now" />
-            <Button v-if="clearable" @click="emit('update:modelValue', null)" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" v-tooltip="__('Clear')" icon="x" size="xs" />
+            <Button v-if="clearable" @click="setToNow" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" size="xs" v-tooltip="__('Set to now')" :aria-label="__('Set to now')" icon="time-now" />
+            <Button v-if="clearable" @click="emit('update:modelValue', null)" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" v-tooltip="__('Clear')" :aria-label="__('Clear')" icon="x" size="xs" />
         </div>
     </TimeFieldRoot>
 

From 08d9eb204099a932a9aea83965f35cc8713a7be5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 11:34:49 +0000
Subject: [PATCH 19/54] Delete states - change the way we handle badges to make
 this clearer

---
 resources/css/elements/base.css         | 16 +++++++++++-----
 resources/js/components/ui/Combobox.vue |  3 ---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index f899286364..bf7088de7b 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -108,8 +108,8 @@
     button[aria-label*="Deselect"],
     button[aria-label*="Delete"],
     button[aria-label*="Clear"] {
-        /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. */
-        &:not([role="switch"]) {
+        /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. For badges we'll do something different */
+        &:not([role="switch"], [data-ui-badge] &) {
             --focus-outline-color: var(--color-warning);
             --focus-outline-width: 1px;
             &:hover,
@@ -129,9 +129,15 @@
             }
         }
     }
-    /* e.g. Tags fieldtype, deleting tags */
-    button[aria-label*="Deselect"]:focus {
-        --focus-outline-offset: 7px;
+    /* DELETE STATES / BADGES
+    =================================================== */
+    /* When a badge "x" is hovered, the whole badge lights up red. */
+    [data-ui-badge]:has(button[aria-label*="Deselect"]:hover) {
+        --focus-outline-color: var(--color-warning);
+        --focus-outline-width: 1px;
+        background: var(--color-warning-bg);
+        outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
+        color: var(--color-warning);
     }
 }
 
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index d62409183b..45f2c90855 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -488,9 +488,6 @@ defineExpose({
                                 type="button"
                                 class="
                                     cursor-pointer relative opacity-75 size-2
-                                    before:absolute before:content-[''] before:-inset-2.25 before:rounded-full 
-                                    hover:opacity-100 hover:text-warning hover:before:bg-warning-bg
-                                    focus:opacity-100 focus:text-warning focus:before:bg-warning-bg focus:before:-inset-1.5
                                 "
                                 :aria-label="__('Deselect option')"
                                 @click="deselect(option.value)"

From ec9440588d63693b7013c00783cb532dc6b6955e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 11:50:04 +0000
Subject: [PATCH 20/54] Delete states - change the way we handle badges to make
 this clearer

---
 resources/css/elements/base.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index bf7088de7b..4ff11e17fc 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -137,6 +137,7 @@
         --focus-outline-width: 1px;
         background: var(--color-warning-bg);
         outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
+        outline-offset: var(--focus-outline-offset);
         color: var(--color-warning);
     }
 }

From 96f64ebc186fb12835426ef4221f6451b0322558 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 11:58:31 +0000
Subject: [PATCH 21/54] Delete states - dim warning color for accessibility
 contrast

---
 resources/css/ui.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index e231575273..1c527cdfc2 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -31,7 +31,7 @@
     --color-switch-bg: var(--theme-color-switch-bg);
 
     --color-warning-bg: var(--color-red-50);
-    --color-warning: var(--color-red-600);
+    --color-warning: var(--color-red-700);
     --color-success-bg: var(--color-green-50);
     --color-success: var(--color-green-600);
 

From b695d70dd52be97f7b91c927e9b0aca78584240f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 12:00:49 +0000
Subject: [PATCH 22/54] Rename color-warning to color-danger I think the
 convention is warning = yellow, red = danger

---
 resources/css/components/fieldtypes/table.css |  6 +++---
 resources/css/elements/base.css               | 12 ++++++------
 resources/css/ui.css                          |  6 +++---
 resources/js/components/ui/Button/Button.vue  |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 3aabefcebf..1c24c3f5e1 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -139,10 +139,10 @@
     th,
     .row-controls {
         &:has([aria-label*="Delete"]):focus-within {
-            --focus-outline-color: var(--color-warning);
-            background-color: var(--color-warning-bg);
+            --focus-outline-color: var(--color-danger);
+            background-color: var(--color-danger-bg);
             svg {
-                color: var(--color-warning);
+                color: var(--color-danger);
                 opacity: 1;
             }
         }
diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 4ff11e17fc..45d226b854 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -110,7 +110,7 @@
     button[aria-label*="Clear"] {
         /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. For badges we'll do something different */
         &:not([role="switch"], [data-ui-badge] &) {
-            --focus-outline-color: var(--color-warning);
+            --focus-outline-color: var(--color-danger);
             --focus-outline-width: 1px;
             &:hover,
             &:hover::before,
@@ -118,9 +118,9 @@
                 /* Delete states - use outline state instead so we don't have to worry about overriding borders, or adding borders to pseudo elements */
                 outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
                 outline-offset: var(--focus-outline-offset);
-                background: var(--color-warning-bg);
+                background: var(--color-danger-bg);
                 svg {
-                    color: var(--color-warning);
+                    color: var(--color-danger);
                     opacity: 1;
                 }
             }
@@ -133,12 +133,12 @@
     =================================================== */
     /* When a badge "x" is hovered, the whole badge lights up red. */
     [data-ui-badge]:has(button[aria-label*="Deselect"]:hover) {
-        --focus-outline-color: var(--color-warning);
+        --focus-outline-color: var(--color-danger);
         --focus-outline-width: 1px;
-        background: var(--color-warning-bg);
+        background: var(--color-danger-bg);
         outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
         outline-offset: var(--focus-outline-offset);
-        color: var(--color-warning);
+        color: var(--color-danger);
     }
 }
 
diff --git a/resources/css/ui.css b/resources/css/ui.css
index 1c527cdfc2..eac5abca84 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -30,8 +30,8 @@
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
 
-    --color-warning-bg: var(--color-red-50);
-    --color-warning: var(--color-red-700);
+    --color-danger-bg: var(--color-red-50);
+    --color-danger: var(--color-red-700);
     --color-success-bg: var(--color-green-50);
     --color-success: var(--color-green-600);
 
@@ -129,7 +129,7 @@
 .dark {
     --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
     --color-gray-950: hsl(240deg 7% 8%);
-    --color-warning-bg: oklch(from var(--color-red-500) 20% 8% h);
+    --color-danger-bg: oklch(from var(--color-red-500) 20% 8% h);
     --color-success-bg: oklch(from var(--color-green-500) 20% 8% h);
     --color-success: var(--color-green-500);
     --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 37b6520770..8c5c79582b 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -48,7 +48,7 @@ const buttonClasses = computed(() => {
                 filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
-                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-[var(--color-warning-bg)] [&[aria-label*="Delete"]]:hover:[&_svg]:text-warning [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
+                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-[var(--color-danger-bg)] [&[aria-label*="Delete"]]:hover:[&_svg]:text-warning [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 pressed: [
                     'bg-linear-to-b from-gray-200 to-gray-150 text-gray-900 border border-gray-300 inset-shadow-sm/10',
                     'dark:from-black dark:to-black dark:text-white dark:border-gray-700/80',

From b182e9080ce36e5130edf7938ce5735c17ba7b1a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 12:20:59 +0000
Subject: [PATCH 23/54] Rename color-warning to color-danger

---
 resources/js/components/ui/Button/Button.vue | 6 +++---
 resources/js/components/ui/Combobox.vue      | 2 +-
 resources/js/components/ui/Dropdown/Item.vue | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 8c5c79582b..38e47f6628 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -48,7 +48,7 @@ const buttonClasses = computed(() => {
                 filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
-                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-[var(--color-danger-bg)] [&[aria-label*="Delete"]]:hover:[&_svg]:text-warning [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
+                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-[var(--color-danger-bg)] [&[aria-label*="Delete"]]:hover:[&_svg]:text-danger [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 pressed: [
                     'bg-linear-to-b from-gray-200 to-gray-150 text-gray-900 border border-gray-300 inset-shadow-sm/10',
                     'dark:from-black dark:to-black dark:text-white dark:border-gray-700/80',
@@ -62,8 +62,8 @@ const buttonClasses = computed(() => {
             },
             groupBorder: {
                 danger: [
-                    'in-data-ui-button-group:text-warning in-data-ui-button-group:bg-linear-to-b in-data-ui-button-group:from-white in-data-ui-button-group:to-red-50 in-data-ui-button-group:hover:to-gray-100 in-data-ui-button-group:hover:bg-gray-50 in-data-ui-button-group:border in-data-ui-button-group:border-gray-300 in-data-ui-button-group:shadow-ui-sm in-data-ui-button-group:inset-shadow-none',
-                    'dark:in-data-ui-button-group:text-warning dark:in-data-ui-button-group:from-gray-850 dark:in-data-ui-button-group:to-red-900/10 dark:in-data-ui-button-group:hover:to-gray-850 dark:in-data-ui-button-group:hover:bg-gray-900 dark:in-data-ui-button-group:border-gray-700/80 dark:in-data-ui-button-group:shadow-ui-md',
+                    'in-data-ui-button-group:text-danger in-data-ui-button-group:bg-linear-to-b in-data-ui-button-group:from-white in-data-ui-button-group:to-red-50 in-data-ui-button-group:hover:to-gray-100 in-data-ui-button-group:hover:bg-gray-50 in-data-ui-button-group:border in-data-ui-button-group:border-gray-300 in-data-ui-button-group:shadow-ui-sm in-data-ui-button-group:inset-shadow-none',
+                    'dark:in-data-ui-button-group:text-danger dark:in-data-ui-button-group:from-gray-850 dark:in-data-ui-button-group:to-red-900/10 dark:in-data-ui-button-group:hover:to-gray-850 dark:in-data-ui-button-group:hover:bg-gray-900 dark:in-data-ui-button-group:border-gray-700/80 dark:in-data-ui-button-group:shadow-ui-md',
                 ],
                 ghost: '',
                 pressed: 'in-data-ui-button-group:border-s-0 [:is([data-ui-button-group]>&:first-child,_[data-ui-button-group]_:first-child>&)]:border-s-[1px]',
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 45f2c90855..7852bdd3ac 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -156,7 +156,7 @@ const limitExceeded = computed(() => {
 
 const limitIndicatorColor = computed(() => {
     if (limitExceeded.value) {
-        return 'text-warning';
+        return 'text-danger';
     } else if (limitReached.value) {
         return 'text-success';
     }
diff --git a/resources/js/components/ui/Dropdown/Item.vue b/resources/js/components/ui/Dropdown/Item.vue
index bc0499d902..1593d7790e 100644
--- a/resources/js/components/ui/Dropdown/Item.vue
+++ b/resources/js/components/ui/Dropdown/Item.vue
@@ -27,7 +27,7 @@ const classes = cva({
     variants: {
         variant: {
             default: 'text-gray-700 dark:text-gray-300',
-            destructive: 'text-warning hover:not-data-disabled:bg-warning-bg',
+            destructive: 'text-danger hover:not-data-disabled:bg-danger-bg',
         },
     },
 })({ variant: props.variant });

From 4c8d5cbfd381b13410f04fbe21878cbac013bf75 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 12:43:18 +0000
Subject: [PATCH 24/54] Delete states - Fix dropdown since I've changed this
 from "warning" to "danger" My suspicion is that we now need !important
 because TW compiles classes alphabetically and "danger" will come earlier in
 the cascade vs "warning"

---
 resources/js/components/ui/Dropdown/Item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Dropdown/Item.vue b/resources/js/components/ui/Dropdown/Item.vue
index 1593d7790e..1f91c108dd 100644
--- a/resources/js/components/ui/Dropdown/Item.vue
+++ b/resources/js/components/ui/Dropdown/Item.vue
@@ -27,7 +27,7 @@ const classes = cva({
     variants: {
         variant: {
             default: 'text-gray-700 dark:text-gray-300',
-            destructive: 'text-danger hover:not-data-disabled:bg-danger-bg',
+            destructive: 'text-danger! hover:not-data-disabled:bg-danger-bg!',
         },
     },
 })({ variant: props.variant });

From 2ce41f7091377f5ab1b5b5f71c51f8816632199f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 14:48:44 +0000
Subject: [PATCH 25/54] Delete states - take danger and success from the theme
 variables instead

---
 config/cp.php                        |  5 +++--
 resources/css/ui.css                 | 27 ++++++++++++++++-----------
 resources/js/components/ui/Label.vue |  2 +-
 src/CP/Color.php                     |  4 ++--
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/config/cp.php b/config/cp.php
index b00d125cd6..2cb3436dd6 100644
--- a/config/cp.php
+++ b/config/cp.php
@@ -109,8 +109,6 @@
         // 'grays' => Color::Zinc,
 
         // 'primary' => Color::Zinc[800],
-        // 'success' => Color::Green[400],
-        // 'danger' => Color::Red[600],
 
         // 'ui-accent-bg' => Color::Zinc[800],
         // 'ui-accent-text' => Color::Zinc[800],
@@ -134,6 +132,9 @@
 
         // 'switch-bg' => Color::Green[500],
         // 'dark-switch-bg' => Color::Green[600],
+
+        // 'success' => Color::Green[700],
+        // 'danger' => Color::Red[700],
     ],
 
     /*
diff --git a/resources/css/ui.css b/resources/css/ui.css
index eac5abca84..52565cbbc1 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -3,7 +3,7 @@
     --color-primary-border: color-mix(in oklch, var(--color-primary) 100%, black 20%);
     --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, black 30%);
     --color-primary-gap: color-mix(in oklch, var(--color-primary) 100%, black 50%);
-    --color-success: var(--theme-color-success);
+
     --color-gray-50: var(--theme-color-gray-50);
     --color-gray-100: var(--theme-color-gray-100);
     --color-gray-150: var(--theme-color-gray-150);
@@ -30,10 +30,10 @@
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
 
-    --color-danger-bg: var(--color-red-50);
-    --color-danger: var(--color-red-700);
-    --color-success-bg: var(--color-green-50);
-    --color-success: var(--color-green-600);
+    --color-danger-bg: oklch(from var(--theme-color-danger) 99% 11% h);
+    --color-danger: var(--theme-color-danger);
+    --color-success-bg: oklch(from var(--theme-color-success) 99% 11% h);
+    --color-success: var(--theme-color-success);
 
     /* Temp */
     --color-dark-100: #dfe1e5;
@@ -127,12 +127,17 @@
 }
 
 .dark {
-    --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
-    --color-gray-950: hsl(240deg 7% 8%);
-    --color-danger-bg: oklch(from var(--color-red-500) 20% 8% h);
-    --color-success-bg: oklch(from var(--color-green-500) 20% 8% h);
-    --color-success: var(--color-green-500);
-    --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+    @theme inline {
+        --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
+        --color-gray-950: hsl(240deg 7% 8%);
+
+        --color-danger-bg: oklch(from var(--theme-color-danger) 20% 0% h);
+        --color-danger: oklch(from var(--theme-color-danger) 70% 50% h);
+        --color-success-bg: oklch(from var(--theme-color-success) 20% 0% h);
+        --color-success: oklch(from var(--theme-color-success) 70% 50% h);
+
+        --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+    }
 }
 
 @custom-variant with-contrast (&:where([data-contrast="increased"] *));
diff --git a/resources/js/components/ui/Label.vue b/resources/js/components/ui/Label.vue
index 597a6356fd..d1a25c6c84 100644
--- a/resources/js/components/ui/Label.vue
+++ b/resources/js/components/ui/Label.vue
@@ -22,7 +22,7 @@ const props = defineProps({
         <div>
             <slot v-if="hasDefaultSlot" />
             <template v-else>{{ text }}</template>
-            <span v-if="required" class="relative -top-px ms-0.5 text-red-600">*</span>
+            <span v-if="required" class="relative -top-px ms-0.5 text-danger">*</span>
         </div>
         <Badge v-if="badge" :text="badge" />
     </label>
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 4758d73624..c5760a1640 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -401,8 +401,6 @@ public static function defaults(bool $dark = false): array
             'gray-900' => self::Zinc[900],
             'gray-925' => self::Zinc[925],
             'gray-950' => self::Zinc[950],
-            'success' => self::Green[400],
-            'danger' => self::Red[600],
             'body-bg' => self::Zinc[100],
             'body-border' => self::Transparent,
             'dark-body-bg' => self::Zinc[900],
@@ -418,6 +416,8 @@ public static function defaults(bool $dark = false): array
             'ui-accent-text' => 'var(--theme-color-ui-accent-bg)',
             'dark-ui-accent-text' => self::Indigo[400],
             'switch-bg' => 'var(--theme-color-ui-accent-bg)',
+            'success' => self::Green[700],
+            'danger' => self::Red[700],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From b3dc36198b2acc38d7b5b0c60802f4c2e288b214 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 14:57:44 +0000
Subject: [PATCH 26/54] Delete states - fix ui badge focus states

---
 resources/css/elements/base.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 45d226b854..af02f6e5a2 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -121,7 +121,8 @@
                 background: var(--color-danger-bg);
                 svg {
                     color: var(--color-danger);
-                    opacity: 1;
+                    /* Need !important to override dark mode */
+                    opacity: 1!important;
                 }
             }
             &.bg-transparent {
@@ -132,13 +133,17 @@
     /* DELETE STATES / BADGES
     =================================================== */
     /* When a badge "x" is hovered, the whole badge lights up red. */
-    [data-ui-badge]:has(button[aria-label*="Deselect"]:hover) {
+    [data-ui-badge]:has(button[aria-label*="Deselect"]:is(:hover, :focus)) {
         --focus-outline-color: var(--color-danger);
         --focus-outline-width: 1px;
         background: var(--color-danger-bg);
         outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
         outline-offset: var(--focus-outline-offset);
         color: var(--color-danger);
+        /* Cancel the outline on the actual button since we're highlighting the entire badge */
+        button {
+            outline: none;
+        }
     }
 }
 

From 082f033aeaaef8c085499a7aebaccd7680fb4e09 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 15:37:41 +0000
Subject: [PATCH 27/54] Delete states - add condition for color fieldtype

---
 resources/css/elements/base.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index af02f6e5a2..cab5a74900 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -107,7 +107,8 @@
     /* e.g. Tags fieldtype, deleting tags */
     button[aria-label*="Deselect"],
     button[aria-label*="Delete"],
-    button[aria-label*="Clear"] {
+    button[aria-label*="Clear"],
+    button[aria-label*="Reset"] {
         /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. For badges we'll do something different */
         &:not([role="switch"], [data-ui-badge] &) {
             --focus-outline-color: var(--color-danger);

From db3c8299f2776a68c26c09761021c5f1bb54ffe3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 15:38:23 +0000
Subject: [PATCH 28/54] Fix the @theme inline color system

---
 resources/css/ui.css | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index 52565cbbc1..22367b4a89 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -127,16 +127,17 @@
 }
 
 .dark {
+    /* This is for automatic switching, without needing the dark: prefix */
+    --color-danger-bg: oklch(from var(--theme-color-danger) 20% 0% h);
+    --color-danger: oklch(from var(--theme-color-danger) 70% 50% h);
+    --color-success-bg: oklch(from var(--theme-color-success) 20% 0% h);
+    --color-success: oklch(from var(--theme-color-success) 70% 50% h);
+
+    --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+    /* This is for when you use the syntax dark:bg-gray-950 */
     @theme inline {
         --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
         --color-gray-950: hsl(240deg 7% 8%);
-
-        --color-danger-bg: oklch(from var(--theme-color-danger) 20% 0% h);
-        --color-danger: oklch(from var(--theme-color-danger) 70% 50% h);
-        --color-success-bg: oklch(from var(--theme-color-success) 20% 0% h);
-        --color-success: oklch(from var(--theme-color-success) 70% 50% h);
-
-        --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
     }
 }
 

From cdaa3882bf5490886cb7bc55117ebe8fed2e1b3d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 15:40:02 +0000
Subject: [PATCH 29/54] Delete states - Reorganise a little

---
 resources/css/ui.css | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index 22367b4a89..716b308b89 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -1,3 +1,10 @@
+:root {
+    --animation-timing-function-fast-out-slow-in: cubic-bezier(.4,0,.2,1);
+
+    /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
+    --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
+}
+
 @theme inline {
     --color-primary: var(--theme-color-primary);
     --color-primary-border: color-mix(in oklch, var(--color-primary) 100%, black 20%);
@@ -88,6 +95,21 @@
     --color-dark-gray: #404040;
 }
 
+.dark {
+    /* This is for automatic switching, without needing the dark: prefix */
+    --color-danger-bg: oklch(from var(--theme-color-danger) 20% 0% h);
+    --color-danger: oklch(from var(--theme-color-danger) 70% 50% h);
+    --color-success-bg: oklch(from var(--theme-color-success) 20% 0% h);
+    --color-success: oklch(from var(--theme-color-success) 70% 50% h);
+
+    --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+    /* This is for when you use the syntax dark:bg-gray-950 */
+    @theme inline {
+        --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
+        --color-gray-950: hsl(240deg 7% 8%);
+    }
+}
+
 @theme {
     --text-4xs: 0.4rem;
     --text-3xs: 0.5rem;
@@ -119,27 +141,5 @@
     }
 }
 
-:root {
-    --animation-timing-function-fast-out-slow-in: cubic-bezier(.4,0,.2,1);
-
-    /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
-    --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
-}
-
-.dark {
-    /* This is for automatic switching, without needing the dark: prefix */
-    --color-danger-bg: oklch(from var(--theme-color-danger) 20% 0% h);
-    --color-danger: oklch(from var(--theme-color-danger) 70% 50% h);
-    --color-success-bg: oklch(from var(--theme-color-success) 20% 0% h);
-    --color-success: oklch(from var(--theme-color-success) 70% 50% h);
-
-    --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
-    /* This is for when you use the syntax dark:bg-gray-950 */
-    @theme inline {
-        --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
-        --color-gray-950: hsl(240deg 7% 8%);
-    }
-}
-
 @custom-variant with-contrast (&:where([data-contrast="increased"] *));
 

From 263f2caebc69d6afbb9b2f90a57e06a22268c362 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 26 Nov 2025 16:39:17 +0000
Subject: [PATCH 30/54] Delete states - Tweak some values and add more

---
 resources/css/elements/base.css                      | 12 +++++++-----
 resources/css/ui.css                                 |  6 +++---
 .../js/components/ui/Listing/FieldFilterRow.vue      |  2 +-
 resources/js/components/ui/Listing/Filters.vue       |  3 ++-
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index cab5a74900..be34eaab8b 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -104,11 +104,13 @@
 =================================================== */
 @layer utilities {
     /* Delete buttons */
-    /* e.g. Tags fieldtype, deleting tags */
-    button[aria-label*="Deselect"],
-    button[aria-label*="Delete"],
-    button[aria-label*="Clear"],
-    button[aria-label*="Reset"] {
+    button:is(
+        [aria-label*="Deselect"],
+        [aria-label*="Delete"],
+        [aria-label*="Clear"],
+        [aria-label*="Remove"],
+        [aria-label*="Reset"]
+    ) {
         /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. For badges we'll do something different */
         &:not([role="switch"], [data-ui-badge] &) {
             --focus-outline-color: var(--color-danger);
diff --git a/resources/css/ui.css b/resources/css/ui.css
index 716b308b89..fa0455cd38 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -37,9 +37,9 @@
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
 
-    --color-danger-bg: oklch(from var(--theme-color-danger) 99% 11% h);
+    --color-danger-bg: oklch(from var(--theme-color-danger) 99% 5% h);
     --color-danger: var(--theme-color-danger);
-    --color-success-bg: oklch(from var(--theme-color-success) 99% 11% h);
+    --color-success-bg: oklch(from var(--theme-color-success) 99% 5% h);
     --color-success: var(--theme-color-success);
 
     /* Temp */
@@ -97,7 +97,7 @@
 
 .dark {
     /* This is for automatic switching, without needing the dark: prefix */
-    --color-danger-bg: oklch(from var(--theme-color-danger) 20% 0% h);
+    --color-danger-bg: oklch(from var(--theme-color-danger) 20% 2% h);
     --color-danger: oklch(from var(--theme-color-danger) 70% 50% h);
     --color-success-bg: oklch(from var(--theme-color-success) 20% 0% h);
     --color-success: oklch(from var(--theme-color-success) 70% 50% h);
diff --git a/resources/js/components/ui/Listing/FieldFilterRow.vue b/resources/js/components/ui/Listing/FieldFilterRow.vue
index 354dbdca3b..c25c689b17 100644
--- a/resources/js/components/ui/Listing/FieldFilterRow.vue
+++ b/resources/js/components/ui/Listing/FieldFilterRow.vue
@@ -69,7 +69,7 @@ defineExpose({
                             />
                         </PublishField>
                     </div>
-                    <Button @click="$emit('removed')" icon="x" size="sm" variant="ghost" inset />
+                    <Button @click="$emit('removed')" icon="x" size="sm" variant="ghost" inset aria-label="Remove filter" />
                 </div>
             </PublishFieldsProvider>
         </PublishContainer>
diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index ec80bcde5e..565b9c633e 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -121,6 +121,7 @@ function handleStackClosed() {
                     size="sm"
                     class="absolute! top-1.75 right-3 z-(--z-index-above) [&_svg]:size-4"
                     @click="handleStackClosed"
+                    aria-label="Close filters"
                 />
                 <Heading size="lg" :text="__('Filters')" class="mb-4 px-1.5 pr-12 [&_svg]:size-4" icon="sliders-horizontal" />
                 <div class="space-y-4">
@@ -166,7 +167,7 @@ function handleStackClosed() {
             :icon-append="reorderable ? null : 'x'"
             :text="badge"
             :disabled="reorderable"
-            class="last:me-12"
+            class="last:me-12 hover:bg-danger-bg! hover:text-danger! hover:[&_svg]:text-danger hover:outline hover:outline-danger hover:-outline-offset-1"
             @click="removeFieldFilter(handle)"
         />
         <Button

From b0477d774d69d17e523f376fa4498ab5faba307b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 10:46:34 +0000
Subject: [PATCH 31/54] Correct gray-950 value

---
 resources/css/ui.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index fa0455cd38..9c6e2e012b 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -24,7 +24,7 @@
     --color-gray-850: var(--theme-color-gray-850);
     --color-gray-900: var(--theme-color-gray-900);
     --color-gray-925: var(--theme-color-gray-925);
-    --color-gray-950: var(--theme-color-zinc-950);
+    --color-gray-950: var(--theme-color-gray-950);
     --color-volt: oklch(93.86% 0.2018 122.24);
 
     --color-body-bg: var(--theme-color-body-bg);

From a324576155b6e2e952c075b7fb50c3130317cd9d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 10:46:54 +0000
Subject: [PATCH 32/54] Delete states - get dark mode working

---
 resources/css/ui.css | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index 9c6e2e012b..a84f4febb2 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -3,6 +3,15 @@
 
     /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
     --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
+
+    &.dark {
+        --color-danger-bg: oklch(from var(--theme-color-danger) 20% 2% h);
+        --color-danger: oklch(from var(--theme-color-danger) 70% 50% h);
+        --color-success-bg: oklch(from var(--theme-color-success) 20% 0% h);
+        --color-success: oklch(from var(--theme-color-success) 70% 50% h);
+
+        --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+    }
 }
 
 @theme inline {
@@ -96,14 +105,6 @@
 }
 
 .dark {
-    /* This is for automatic switching, without needing the dark: prefix */
-    --color-danger-bg: oklch(from var(--theme-color-danger) 20% 2% h);
-    --color-danger: oklch(from var(--theme-color-danger) 70% 50% h);
-    --color-success-bg: oklch(from var(--theme-color-success) 20% 0% h);
-    --color-success: oklch(from var(--theme-color-success) 70% 50% h);
-
-    --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
-    /* This is for when you use the syntax dark:bg-gray-950 */
     @theme inline {
         --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
         --color-gray-950: hsl(240deg 7% 8%);

From c4c05f476182e649f243551b2244b600d149dfd2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 13:11:09 +0000
Subject: [PATCH 33/54] Delete states - simplify configuration

---
 resources/css/ui.css | 10 +---------
 src/CP/Color.php     |  8 +++++++-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index a84f4febb2..8fab5f6671 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -5,11 +5,6 @@
     --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
 
     &.dark {
-        --color-danger-bg: oklch(from var(--theme-color-danger) 20% 2% h);
-        --color-danger: oklch(from var(--theme-color-danger) 70% 50% h);
-        --color-success-bg: oklch(from var(--theme-color-success) 20% 0% h);
-        --color-success: oklch(from var(--theme-color-success) 70% 50% h);
-
         --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
     }
 }
@@ -46,9 +41,7 @@
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
 
-    --color-danger-bg: oklch(from var(--theme-color-danger) 99% 5% h);
     --color-danger: var(--theme-color-danger);
-    --color-success-bg: oklch(from var(--theme-color-success) 99% 5% h);
     --color-success: var(--theme-color-success);
 
     /* Temp */
@@ -104,10 +97,9 @@
     --color-dark-gray: #404040;
 }
 
-.dark {
+&:where(.dark, .dark *) {
     @theme inline {
         --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
-        --color-gray-950: hsl(240deg 7% 8%);
     }
 }
 
diff --git a/src/CP/Color.php b/src/CP/Color.php
index c5760a1640..99e5e2c64b 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -401,6 +401,7 @@ public static function defaults(bool $dark = false): array
             'gray-900' => self::Zinc[900],
             'gray-925' => self::Zinc[925],
             'gray-950' => self::Zinc[950],
+            'dark-gray-950' => 'hsl(240deg 7% 8%)',
             'body-bg' => self::Zinc[100],
             'body-border' => self::Transparent,
             'dark-body-bg' => self::Zinc[900],
@@ -416,8 +417,13 @@ public static function defaults(bool $dark = false): array
             'ui-accent-text' => 'var(--theme-color-ui-accent-bg)',
             'dark-ui-accent-text' => self::Indigo[400],
             'switch-bg' => 'var(--theme-color-ui-accent-bg)',
-            'success' => self::Green[700],
             'danger' => self::Red[700],
+            'danger-bg' => self::Red[50],
+            'success-bg' => self::Green[50],
+            'dark-danger-bg' => self::Red[950],
+            'dark-success-bg' => self::Green[950],
+            'dark-danger' => self::Red[400],
+            'dark-success' => self::Green[400],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From bf403f15bd41a088019f97094bd80a4fae1b685c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 13:32:55 +0000
Subject: [PATCH 34/54] Delete states - fix missing colors

---
 resources/css/ui.css | 2 ++
 src/CP/Color.php     | 7 ++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index 8fab5f6671..d9cb565048 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -42,7 +42,9 @@
     --color-switch-bg: var(--theme-color-switch-bg);
 
     --color-danger: var(--theme-color-danger);
+    --color-danger-bg: var(--theme-color-danger-bg);
     --color-success: var(--theme-color-success);
+    --color-success-bg: var(--theme-color-success-bg);
 
     /* Temp */
     --color-dark-100: #dfe1e5;
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 99e5e2c64b..fbf61b9856 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -419,11 +419,12 @@ public static function defaults(bool $dark = false): array
             'switch-bg' => 'var(--theme-color-ui-accent-bg)',
             'danger' => self::Red[700],
             'danger-bg' => self::Red[50],
-            'success-bg' => self::Green[50],
-            'dark-danger-bg' => self::Red[950],
-            'dark-success-bg' => self::Green[950],
             'dark-danger' => self::Red[400],
+            'dark-danger-bg' => self::Red[950],
+            'success' => self::Green[700],
+            'success-bg' => self::Green[50],
             'dark-success' => self::Green[400],
+            'dark-success-bg' => self::Green[950],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From c1ba9f0809838d1161828a99b5cf1aa5c1717bcf Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 13:38:52 +0000
Subject: [PATCH 35/54] Delete states - fix offset

---
 resources/js/components/ui/Button/Button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 38e47f6628..d741fde922 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -74,7 +74,7 @@ const buttonClasses = computed(() => {
         compoundVariants: [
             { iconOnly: true, size: 'lg', class: 'w-12 [&_svg]:size-5' },
             { iconOnly: true, size: 'base', class: 'w-10 [&_svg]:size-4.5' },
-            { iconOnly: true, size: 'sm', class: 'w-8 [&_svg]:size-3.5 [--focus-outline-offset:-3px]' },
+            { iconOnly: true, size: 'sm', class: 'w-8 [&_svg]:size-3.5 [--focus-outline-offset:-4px]' },
             { iconOnly: true, size: 'xs', class: 'w-6.5 h-6.5 [&_svg]:size-3' },
             { iconOnly: true, variant: 'pressed', class: '[&_svg]:!opacity-70 dark:[&_svg]:!opacity-100' },
             { iconOnly: false, iconAppend: true, class: '[&_svg]:-me-1' },

From a05eb7911fde2aa8d3f96243452cbeb9ab4a17c5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 13:44:53 +0000
Subject: [PATCH 36/54] Delete states - Remove @theme inline rule that won't
 work

---
 resources/css/ui.css | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index d9cb565048..d0a41a26c1 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -99,12 +99,6 @@
     --color-dark-gray: #404040;
 }
 
-&:where(.dark, .dark *) {
-    @theme inline {
-        --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
-    }
-}
-
 @theme {
     --text-4xs: 0.4rem;
     --text-3xs: 0.5rem;

From 6f37d2d0cf686595483c321452de397e55624855 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 15:38:52 +0000
Subject: [PATCH 37/54] Delete states - Remove some unnecessary tw classes

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

diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index d741fde922..44e1baebdc 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -48,7 +48,7 @@ const buttonClasses = computed(() => {
                 filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
-                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 [&[aria-label*="Delete"]]:hover:bg-[var(--color-danger-bg)] [&[aria-label*="Delete"]]:hover:[&_svg]:text-danger [&[aria-label*="Delete"]]:hover:[&_svg]:opacity-100 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
+                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 pressed: [
                     'bg-linear-to-b from-gray-200 to-gray-150 text-gray-900 border border-gray-300 inset-shadow-sm/10',
                     'dark:from-black dark:to-black dark:text-white dark:border-gray-700/80',
@@ -74,7 +74,7 @@ const buttonClasses = computed(() => {
         compoundVariants: [
             { iconOnly: true, size: 'lg', class: 'w-12 [&_svg]:size-5' },
             { iconOnly: true, size: 'base', class: 'w-10 [&_svg]:size-4.5' },
-            { iconOnly: true, size: 'sm', class: 'w-8 [&_svg]:size-3.5 [--focus-outline-offset:-4px]' },
+            { iconOnly: true, size: 'sm', class: 'w-8 [&_svg]:size-3.5' },
             { iconOnly: true, size: 'xs', class: 'w-6.5 h-6.5 [&_svg]:size-3' },
             { iconOnly: true, variant: 'pressed', class: '[&_svg]:!opacity-70 dark:[&_svg]:!opacity-100' },
             { iconOnly: false, iconAppend: true, class: '[&_svg]:-me-1' },

From de428d3ac71e26e04e2fb1f95cd28e0e5203d568 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 15:39:13 +0000
Subject: [PATCH 38/54] Delete states - make subtler

---
 resources/css/elements/base.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index be34eaab8b..1a9855def4 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -105,7 +105,8 @@
 @layer utilities {
     /* Delete buttons */
     button:is(
-        [aria-label*="Deselect"],
+        /* Not Deselect because it's used for bulk actions e.g. selecting/deselecting entries */
+        /* [aria-label*="Deselect"], */
         [aria-label*="Delete"],
         [aria-label*="Clear"],
         [aria-label*="Remove"],
@@ -113,7 +114,7 @@
     ) {
         /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. For badges we'll do something different */
         &:not([role="switch"], [data-ui-badge] &) {
-            --focus-outline-color: var(--color-danger);
+            --focus-outline-color: oklch(from var(--color-danger) l c h / 0.5);
             --focus-outline-width: 1px;
             &:hover,
             &:hover::before,
@@ -137,7 +138,7 @@
     =================================================== */
     /* When a badge "x" is hovered, the whole badge lights up red. */
     [data-ui-badge]:has(button[aria-label*="Deselect"]:is(:hover, :focus)) {
-        --focus-outline-color: var(--color-danger);
+        --focus-outline-color: oklch(from var(--color-danger) l c h / 0.5);
         --focus-outline-width: 1px;
         background: var(--color-danger-bg);
         outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);

From abbccb930c426236a177113be28bfb7e2b8d377c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 16:13:03 +0000
Subject: [PATCH 39/54] Delete states - more work including dark mode

---
 resources/css/elements/base.css                | 5 +++--
 resources/css/ui.css                           | 4 +++-
 resources/js/components/ui/Context/Item.vue    | 4 ++--
 resources/js/components/ui/Dropdown/Item.vue   | 2 +-
 resources/js/components/ui/Listing/Filters.vue | 2 +-
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 1a9855def4..df1081596f 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -10,6 +10,7 @@
     --focus-within-outline-offset: 0px;
     --focus-outline-color: var(--theme-color-focus-outline, var(--color-blue-400));
     --focus-outline-style: solid;
+    --danger-outline-color: oklch(from var(--color-danger) l c h / 0.5);
 
     /* The outline-offset value used for buttons */
     --outline-offset-button: 6px;
@@ -114,7 +115,7 @@
     ) {
         /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. For badges we'll do something different */
         &:not([role="switch"], [data-ui-badge] &) {
-            --focus-outline-color: oklch(from var(--color-danger) l c h / 0.5);
+            --focus-outline-color: var(--danger-outline-color);
             --focus-outline-width: 1px;
             &:hover,
             &:hover::before,
@@ -138,7 +139,7 @@
     =================================================== */
     /* When a badge "x" is hovered, the whole badge lights up red. */
     [data-ui-badge]:has(button[aria-label*="Deselect"]:is(:hover, :focus)) {
-        --focus-outline-color: oklch(from var(--color-danger) l c h / 0.5);
+        --focus-outline-color: var(--danger-outline-color);
         --focus-outline-width: 1px;
         background: var(--color-danger-bg);
         outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
diff --git a/resources/css/ui.css b/resources/css/ui.css
index d0a41a26c1..424a7c76c0 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -6,6 +6,8 @@
 
     &.dark {
         --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+        /* Make the danger background slightly darker/more subtle in dark mode */
+        --color-danger-bg-opacity: 0.2;
     }
 }
 
@@ -42,7 +44,7 @@
     --color-switch-bg: var(--theme-color-switch-bg);
 
     --color-danger: var(--theme-color-danger);
-    --color-danger-bg: var(--theme-color-danger-bg);
+    --color-danger-bg: oklch(from var(--theme-color-danger-bg) l c h / var(--color-danger-bg-opacity, 1));
     --color-success: var(--theme-color-success);
     --color-success-bg: var(--theme-color-success-bg);
 
diff --git a/resources/js/components/ui/Context/Item.vue b/resources/js/components/ui/Context/Item.vue
index 66ba698e92..90a167e9e4 100644
--- a/resources/js/components/ui/Context/Item.vue
+++ b/resources/js/components/ui/Context/Item.vue
@@ -26,7 +26,7 @@ const classes = cva({
     variants: {
         variant: {
             default: 'text-gray-700 dark:text-gray-300',
-            destructive: 'text-red-600',
+            destructive: 'text-danger! hover:not-data-disabled:bg-danger-bg!',
         },
     },
 })({ variant: props.variant });
@@ -36,7 +36,7 @@ const iconClasses = cva({
         base: 'size-3.5!',
         variant: {
             default: 'text-gray-500',
-            destructive: 'text-red-500!',
+            destructive: 'text-danger!',
         },
     },
 })({ variant: props.variant });
diff --git a/resources/js/components/ui/Dropdown/Item.vue b/resources/js/components/ui/Dropdown/Item.vue
index 1f91c108dd..78c7b5e474 100644
--- a/resources/js/components/ui/Dropdown/Item.vue
+++ b/resources/js/components/ui/Dropdown/Item.vue
@@ -37,7 +37,7 @@ const iconClasses = cva({
         base: 'size-3.5!',
         variant: {
             default: 'text-gray-500',
-            destructive: 'text-red-500!',
+            destructive: 'text-danger!',
         },
     },
 })({ variant: props.variant });
diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 565b9c633e..1ace3227fe 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -167,7 +167,7 @@ function handleStackClosed() {
             :icon-append="reorderable ? null : 'x'"
             :text="badge"
             :disabled="reorderable"
-            class="last:me-12 hover:bg-danger-bg! hover:text-danger! hover:[&_svg]:text-danger hover:outline hover:outline-danger hover:-outline-offset-1"
+            class="last:me-12 hover:bg-danger-bg! hover:text-danger! hover:[&_svg]:text-danger hover:outline hover:outline-(--danger-outline-color)! hover:-outline-offset-1"
             @click="removeFieldFilter(handle)"
         />
         <Button

From a0ca3188c88adc04adb8806a0184d8406bdf3b68 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 18:45:41 +0000
Subject: [PATCH 40/54] Delete states - add a load of aria labels that will
 trigger the delete state

---
 resources/js/components/assets/Editor/Editor.vue   | 14 +++++++-------
 resources/js/components/blueprints/ImportField.vue |  2 +-
 .../js/components/blueprints/RegularField.vue      |  2 +-
 resources/js/components/blueprints/Section.vue     |  4 ++--
 .../js/components/field-conditions/Condition.vue   |  2 +-
 .../js/components/field-validation/Builder.vue     |  2 +-
 .../js/components/fieldtypes/ListFieldtype.vue     |  1 +
 resources/js/components/fieldtypes/bard/Image.vue  |  2 +-
 .../js/components/fieldtypes/bard/LinkToolbar.vue  |  3 +++
 .../js/components/fieldtypes/grid/StackedRow.vue   |  2 ++
 .../inputs/relationship/InlinePublishForm.vue      |  3 ++-
 .../js/components/inputs/relationship/Item.vue     |  2 ++
 resources/js/components/ui/Listing/Presets.vue     |  1 +
 13 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 6a3c2ea24f..340dcb4f65 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -38,13 +38,13 @@
                                 @completed="actionCompleted"
                                 v-slot="{ actions }"
                             >
-                                <ui-button inset size="sm" v-if="isImage && isFocalPointEditorEnabled" @click.prevent="openFocalPointEditor" icon="focus" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Focal Point')" />
-                                <ui-button inset size="sm" v-if="canRunAction('rename_asset')" @click.prevent="runAction(actions, 'rename_asset')" icon="rename" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Rename')" />
-                                <ui-button inset size="sm" v-if="canRunAction('move_asset')" @click.prevent="runAction(actions, 'move_asset')" icon="move-folder" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Move to Folder')" />
-                                <ui-button inset size="sm" v-if="canRunAction('replace_asset')" @click.prevent="runAction(actions, 'replace_asset')" icon="replace" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Replace')" />
-                                <ui-button inset size="sm" v-if="canRunAction('reupload_asset')" @click.prevent="runAction(actions, 'reupload_asset')" icon="upload-cloud" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Reupload')" />
-                                <ui-button inset size="sm" @click="download" icon="download" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Download')" />
-                                <ui-button inset size="sm" v-if="allowDeleting && canRunAction('delete')" @click="runAction(actions, 'delete')" icon="trash" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Delete')" />
+                                <ui-button inset size="sm" v-if="isImage && isFocalPointEditorEnabled" @click.prevent="openFocalPointEditor" icon="focus" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Focal Point')" :aria-label="__('Focal Point')" />
+                                <ui-button inset size="sm" v-if="canRunAction('rename_asset')" @click.prevent="runAction(actions, 'rename_asset')" icon="rename" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Rename')" :aria-label="__('Rename')" />
+                                <ui-button inset size="sm" v-if="canRunAction('move_asset')" @click.prevent="runAction(actions, 'move_asset')" icon="move-folder" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Move to Folder')" :aria-label="__('Move to Folder')" />
+                                <ui-button inset size="sm" v-if="canRunAction('replace_asset')" @click.prevent="runAction(actions, 'replace_asset')" icon="replace" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Replace')" :aria-label="__('Replace')" />
+                                <ui-button inset size="sm" v-if="canRunAction('reupload_asset')" @click.prevent="runAction(actions, 'reupload_asset')" icon="upload-cloud" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Reupload')" :aria-label="__('Reupload')" />
+                                <ui-button inset size="sm" @click="download" icon="download" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Download')" :aria-label="__('Download')" />
+                                <ui-button inset size="sm" v-if="allowDeleting && canRunAction('delete')" @click="runAction(actions, 'delete')" icon="trash" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Delete')" :aria-label="__('Delete')" />
 
                                 <Dropdown class="me-4">
                                     <DropdownMenu>
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 1ee2a305b0..2bf78d26b6 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -15,7 +15,7 @@
                             </div>
                         </div>
                         <div class="flex items-center gap-2">
-                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
+                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
                             <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
                                 <field-settings
                                     ref="settings"
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index 1197d825a6..92afb371e8 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -28,7 +28,7 @@
                     <div class="flex items-center">
                         <ui-button v-if="canDefineLocalizable" inset size="sm" icon="earth" :variant="localizable ? 'ghost-pressed' : 'subtle'" v-tooltip="__('Localizable')" @click="localizable = !localizable" />
                         <ui-button inset size="sm" icon="duplicate" variant="subtle" @click.prevent="$emit('duplicate')" v-tooltip="__('Duplicate')" />
-                        <ui-button inset size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
+                        <ui-button inset size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
                     </div>
 
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 983e254c7d..e84c08a8bb 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -7,8 +7,8 @@
                     <ui-icon :name="section.icon" :set="iconSet" v-if="section.icon" />
                     <ui-heading v-text="__(section.display ?? 'Section')" />
                 </div>
-                <ui-button icon="pencil-line" size="sm" variant="ghost" @click="edit" />
-                <ui-button icon="trash" size="sm" variant="ghost" @click.prevent="$emit('deleted')" />
+                <ui-button icon="pencil-line" size="sm" variant="ghost" @click="edit" :aria-label="__('Edit Section')" v-tooltip="__('Edit Section')" />
+                <ui-button icon="trash" size="sm" variant="ghost" @click.prevent="$emit('deleted')" :aria-label="__('Delete Section')" v-tooltip="__('Delete Section')" />
             </ui-panel-header>
 
             <Fields
diff --git a/resources/js/components/field-conditions/Condition.vue b/resources/js/components/field-conditions/Condition.vue
index 28c654f51e..3a88e567fc 100644
--- a/resources/js/components/field-conditions/Condition.vue
+++ b/resources/js/components/field-conditions/Condition.vue
@@ -65,7 +65,7 @@
             @update:model-value="valueUpdated"
         />
 
-        <Button variant="ghost" size="sm" icon="trash" @click="remove" />
+        <Button variant="ghost" size="sm" icon="trash" :aria-label="__('Remove Condition')" @click="remove" />
     </div>
 </template>
 
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index 2d87c45418..5252e6c55c 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -76,7 +76,7 @@
                             <button
                                 type="button"
                                 class="opacity-75 hover:opacity-100 cursor-pointer"
-                                :aria-label="__('Deselect option')"
+                                :aria-label="__('Remove Validation Rule')"
                                 @click="remove(rule)"
                             >
                                 &times;
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index e63e4e3e05..bc1fb9ca3d 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -35,6 +35,7 @@
                             <button
                                 @click="deleteValue(index)"
                                 class="inline text-lg antialiased opacity-25 hover:opacity-75 cursor-pointer"
+                                :aria-label="__('Delete Value')"
                             >
                                 &times;
                             </button>
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index 05c7c26825..cc7bc583f2 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -19,7 +19,7 @@
                 <Button v-if="src" size="sm" icon="edit" :text="__('Edit Image')" @click="edit" />
                 <Button v-if="src" size="sm" icon="rename" :text="__('Override Alt')" :class="{ active: showingAltEdit }" @click="toggleAltEditor" />
                 <Button v-if="src" size="sm" icon="replace" :text="__('Replace')" @click="openSelector" />
-                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" @click="deleteNode" />
+                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" :aria-label="__('Remove')" v-tooltip="__('Remove')" @click="deleteNode" />
             </div>
 
             <div
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 8432d06ca4..6ed46f04bb 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -109,18 +109,21 @@
                 <ui-button
                     @click="$emit('canceled')"
                     :text="__('Cancel')"
+                    :aria-label="__('Cancel')"
                     size="sm"
                     inset
                     variant="ghost"
                 />
                 <ui-button
                     :text="__('Remove Link')"
+                    :aria-label="__('Remove Link')"
                     @click="remove"
                     size="sm"
                     inset
                 />
                 <ui-button
                     :text="__('Apply Link')"
+                    :aria-label="__('Apply Link')"
                     :disabled="!canCommit"
                     @click="commit"
                     size="sm"
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
index b891a37726..cbbe9de0b0 100644
--- a/resources/js/components/fieldtypes/grid/StackedRow.vue
+++ b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -10,6 +10,7 @@
                 <ui-button
                     v-if="canAddRows"
                     @click="$emit('duplicate', index)"
+                    :aria-label="__('Duplicate Row')"
                     v-tooltip="__('Duplicate Row')"
                     icon="duplicate"
                     variant="ghost"
@@ -19,6 +20,7 @@
                 <ui-button
                     v-if="canDelete"
                     @click="$emit('removed', index)"
+                    :aria-label="__('Delete Row')"
                     v-tooltip="__('Delete Row')"
                     icon="trash"
                     variant="ghost"
diff --git a/resources/js/components/inputs/relationship/InlinePublishForm.vue b/resources/js/components/inputs/relationship/InlinePublishForm.vue
index 1fa8c34d5b..659f44c105 100644
--- a/resources/js/components/inputs/relationship/InlinePublishForm.vue
+++ b/resources/js/components/inputs/relationship/InlinePublishForm.vue
@@ -26,7 +26,7 @@
                 >
                     <template #action-buttons-right>
                         <slot name="action-buttons-right" />
-                        <Button icon="x" size="sm" variant="ghost" class="-me-2" @click="close" />
+                        <Button icon="x" size="sm" variant="ghost" class="-me-2" :aria-label="__('Close')" @click="close" />
                     </template>
                 </component>
             </div>
@@ -38,6 +38,7 @@
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Discard Changes')"
             :danger="true"
+            :aria-label="__('Discard Changes')"
             @confirm="confirmCloseWithChanges"
             @cancel="closingWithChanges = false"
         />
diff --git a/resources/js/components/inputs/relationship/Item.vue b/resources/js/components/inputs/relationship/Item.vue
index ee3fa386f1..9d29c4d217 100644
--- a/resources/js/components/inputs/relationship/Item.vue
+++ b/resources/js/components/inputs/relationship/Item.vue
@@ -52,11 +52,13 @@
                                 v-if="editable"
                                 :text="__('Edit')"
                                 @click="edit"
+                                :aria-label="__('Edit')"
                             />
                             <DropdownItem
                                 :text="__('Unlink')"
                                 variant="destructive"
                                 @click="$emit('removed')"
+                                :aria-label="__('Unlink')"
                             />
                         </DropdownMenu>
                     </Dropdown>
diff --git a/resources/js/components/ui/Listing/Presets.vue b/resources/js/components/ui/Listing/Presets.vue
index b373a6d1a6..0d4b304e85 100644
--- a/resources/js/components/ui/Listing/Presets.vue
+++ b/resources/js/components/ui/Listing/Presets.vue
@@ -189,6 +189,7 @@ function deletePreset() {
                             :text="__('Delete')"
                             icon="delete"
                             variant="warning"
+                            :aria-label="__('Delete Preset')"
                             @click="isConfirmingDeletion = true"
                         />
                     </DropdownMenu>

From d2af2bad80b9304d9c465944528af6ae0c74231c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 19:59:33 +0000
Subject: [PATCH 41/54] Delete states - remove dark variants since we generate
 them automatically

---
 config/cp.php        | 2 ++
 resources/css/ui.css | 3 ++-
 src/CP/Color.php     | 4 ----
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/config/cp.php b/config/cp.php
index 2cb3436dd6..35e3ce4719 100644
--- a/config/cp.php
+++ b/config/cp.php
@@ -134,7 +134,9 @@
         // 'dark-switch-bg' => Color::Green[600],
 
         // 'success' => Color::Green[700],
+        // 'success-bg' => Color::Green[50],
         // 'danger' => Color::Red[700],
+        // 'danger-bg' => Color::Red[50],
     ],
 
     /*
diff --git a/resources/css/ui.css b/resources/css/ui.css
index 424a7c76c0..55fbe39c35 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -8,6 +8,7 @@
         --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
         /* Make the danger background slightly darker/more subtle in dark mode */
         --color-danger-bg-opacity: 0.2;
+        --color-success-bg-opacity: 0.2;
     }
 }
 
@@ -46,7 +47,7 @@
     --color-danger: var(--theme-color-danger);
     --color-danger-bg: oklch(from var(--theme-color-danger-bg) l c h / var(--color-danger-bg-opacity, 1));
     --color-success: var(--theme-color-success);
-    --color-success-bg: var(--theme-color-success-bg);
+    --color-success-bg: oklch(from var(--theme-color-success-bg) l c h / var(--color-success-bg-opacity, 1));
 
     /* Temp */
     --color-dark-100: #dfe1e5;
diff --git a/src/CP/Color.php b/src/CP/Color.php
index fbf61b9856..17ab21f16c 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -419,12 +419,8 @@ public static function defaults(bool $dark = false): array
             'switch-bg' => 'var(--theme-color-ui-accent-bg)',
             'danger' => self::Red[700],
             'danger-bg' => self::Red[50],
-            'dark-danger' => self::Red[400],
-            'dark-danger-bg' => self::Red[950],
             'success' => self::Green[700],
             'success-bg' => self::Green[50],
-            'dark-success' => self::Green[400],
-            'dark-success-bg' => self::Green[950],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From 9b9c368751c3bc361b940993a5cec2ab45f3b29b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 20:03:19 +0000
Subject: [PATCH 42/54] Reorganise file slightly

---
 resources/css/ui.css | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index 55fbe39c35..c704a84999 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -1,17 +1,3 @@
-:root {
-    --animation-timing-function-fast-out-slow-in: cubic-bezier(.4,0,.2,1);
-
-    /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
-    --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
-
-    &.dark {
-        --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
-        /* Make the danger background slightly darker/more subtle in dark mode */
-        --color-danger-bg-opacity: 0.2;
-        --color-success-bg-opacity: 0.2;
-    }
-}
-
 @theme inline {
     --color-primary: var(--theme-color-primary);
     --color-primary-border: color-mix(in oklch, var(--color-primary) 100%, black 20%);
@@ -102,6 +88,20 @@
     --color-dark-gray: #404040;
 }
 
+:root {
+    --animation-timing-function-fast-out-slow-in: cubic-bezier(.4,0,.2,1);
+
+    /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
+    --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
+
+    &.dark {
+        --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+        /* Make the danger background slightly darker/more subtle in dark mode */
+        --color-danger-bg-opacity: 0.2;
+        --color-success-bg-opacity: 0.2;
+    }
+}
+
 @theme {
     --text-4xs: 0.4rem;
     --text-3xs: 0.5rem;

From f2ed41263592c13f443ecc22d1936ab1ca6af4a5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 20:10:42 +0000
Subject: [PATCH 43/54] Whoops, we actually need the dark variants

---
 config/cp.php    | 4 ++++
 src/CP/Color.php | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/config/cp.php b/config/cp.php
index 35e3ce4719..c18aec77aa 100644
--- a/config/cp.php
+++ b/config/cp.php
@@ -135,8 +135,12 @@
 
         // 'success' => Color::Green[700],
         // 'success-bg' => Color::Green[50],
+        // 'dark-success' => Color::Green[400],
+        // 'dark-success-bg' => Color::Green[950],
         // 'danger' => Color::Red[700],
         // 'danger-bg' => Color::Red[50],
+        // 'dark-danger' => Color::Red[400],
+        // 'dark-danger-bg' => Color::Red[950],
     ],
 
     /*
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 17ab21f16c..fbf61b9856 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -419,8 +419,12 @@ public static function defaults(bool $dark = false): array
             'switch-bg' => 'var(--theme-color-ui-accent-bg)',
             'danger' => self::Red[700],
             'danger-bg' => self::Red[50],
+            'dark-danger' => self::Red[400],
+            'dark-danger-bg' => self::Red[950],
             'success' => self::Green[700],
             'success-bg' => self::Green[50],
+            'dark-success' => self::Green[400],
+            'dark-success-bg' => self::Green[950],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From 228ccb2a8894cf54a4dff1aa4caa3fd22c883b71 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Nov 2025 20:42:11 +0000
Subject: [PATCH 44/54] Unify table delete states so both hover and focus are
 the same. I can't see a reason to split them

---
 resources/css/components/fieldtypes/table.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 1c24c3f5e1..036bd6a8d9 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -138,7 +138,7 @@
     =================================================== */
     th,
     .row-controls {
-        &:has([aria-label*="Delete"]):focus-within {
+        &:has([aria-label*="Delete"]:is(:hover, :focus)) {
             --focus-outline-color: var(--color-danger);
             background-color: var(--color-danger-bg);
             svg {

From 12a88b2b228fe8533e2a73b54ccea5c01875e1ce Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Dec 2025 11:06:16 +0000
Subject: [PATCH 45/54] Progress making delete states explicit rathen than
 relying on aria labels

---
 resources/css/elements/base.css               | 44 +++++++------------
 .../components/fieldtypes/TableFieldtype.vue  |  4 +-
 .../components/fieldtypes/grid/StackedRow.vue |  1 +
 resources/js/components/ui/Button/Button.vue  |  2 +
 4 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index df1081596f..009de83040 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -105,35 +105,25 @@
 =================================================== */
 @layer utilities {
     /* Delete buttons */
-    button:is(
-        /* Not Deselect because it's used for bulk actions e.g. selecting/deselecting entries */
-        /* [aria-label*="Deselect"], */
-        [aria-label*="Delete"],
-        [aria-label*="Clear"],
-        [aria-label*="Remove"],
-        [aria-label*="Reset"]
-    ) {
-        /* For example, we don't want switches such as Select fieldtype > Clearable to get caught by this. For badges we'll do something different */
-        &:not([role="switch"], [data-ui-badge] &) {
-            --focus-outline-color: var(--danger-outline-color);
-            --focus-outline-width: 1px;
-            &:hover,
-            &:hover::before,
-            &:focus {
-                /* Delete states - use outline state instead so we don't have to worry about overriding borders, or adding borders to pseudo elements */
-                outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
-                outline-offset: var(--focus-outline-offset);
-                background: var(--color-danger-bg);
-                svg {
-                    color: var(--color-danger);
-                    /* Need !important to override dark mode */
-                    opacity: 1!important;
-                }
-            }
-            &.bg-transparent {
-                border-radius: 100%;
+    [data-delete-action] {
+        --focus-outline-color: var(--danger-outline-color);
+        --focus-outline-width: 1px;
+        &:hover,
+        &:hover::before,
+        &:focus {
+            /* Delete states - use outline state instead so we don't have to worry about overriding borders, or adding borders to pseudo elements */
+            outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
+            outline-offset: var(--focus-outline-offset);
+            background: var(--color-danger-bg);
+            svg {
+                color: var(--color-danger);
+                /* Need !important to override dark mode */
+                opacity: 1!important;
             }
         }
+        &.bg-transparent {
+            /* border-radius: 100%; */
+        }
     }
     /* DELETE STATES / BADGES
     =================================================== */
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 7a39b21d7e..03a338f525 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -20,7 +20,7 @@
                             <th v-for="(column, index) in columnCount" :key="index">
                                 <div class="flex h-6 items-center justify-between">
                                     <span class="column-count">{{ index + 1 }}</span>
-                                    <ui-button icon="x" variant="subtle" size="xs" round @click="confirmDeleteColumn(index)" :aria-label="__('Delete Column')" v-tooltip="__('Delete Column')" class="-me-1" />
+                                    <ui-button icon="x" variant="subtle" size="xs" delete-action round @click="confirmDeleteColumn(index)" :aria-label="__('Delete Column')" v-tooltip="__('Delete Column')" class="-me-1" />
                                 </div>
                             </th>
                             <th class="row-controls"></th>
@@ -50,7 +50,7 @@
                                     />
                                 </td>
                                 <td class="row-controls" v-if="canDeleteRows">
-                                    <ui-button icon="x" variant="subtle" size="xs" round @click="confirmDeleteRow(rowIndex)" :aria-label="__('Delete Row')" v-tooltip="__('Delete Row')" />
+                                    <ui-button icon="x" variant="subtle" delete-action size="xs" round @click="confirmDeleteRow(rowIndex)" :aria-label="__('Delete Row')" v-tooltip="__('Delete Row')" />
                                 </td>
                             </tr>
                         </tbody>
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
index cbbe9de0b0..dafa14da15 100644
--- a/resources/js/components/fieldtypes/grid/StackedRow.vue
+++ b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -21,6 +21,7 @@
                     v-if="canDelete"
                     @click="$emit('removed', index)"
                     :aria-label="__('Delete Row')"
+                    delete-action
                     v-tooltip="__('Delete Row')"
                     icon="trash"
                     variant="ghost"
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 44e1baebdc..157c470c57 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -19,6 +19,7 @@ const props = defineProps({
     text: { type: [String, Number, Boolean, null], default: null },
     type: { type: String, default: 'button' },
     variant: { type: String, default: 'default' },
+    deleteAction: { type: Boolean, default: false },
 });
 
 const slots = useSlots();
@@ -102,6 +103,7 @@ const buttonClasses = computed(() => {
         :class="buttonClasses"
         :disabled="loading"
         :data-ui-group-target="['subtle', 'ghost'].includes(props.variant) ? null : true"
+        :data-delete-action="deleteAction || undefined"
         :href
         :target
         :type="props.href ? null : type"

From 78d5314e22a685f27cc772689e9e58cfc3bc4460 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Dec 2025 13:30:22 +0000
Subject: [PATCH 46/54] Try switching from @theme-inline to native CSS vars to
 get dark variants working when not descended from dark mode (the root) For
 example, I was having trouble switching `/cp/assets > edit > delete button`
 to switch to the dark variant

---
 resources/css/elements/base.css | 12 +++++++++++-
 resources/css/ui.css            | 12 ------------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 009de83040..24d6a6d08b 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -10,7 +10,7 @@
     --focus-within-outline-offset: 0px;
     --focus-outline-color: var(--theme-color-focus-outline, var(--color-blue-400));
     --focus-outline-style: solid;
-    --danger-outline-color: oklch(from var(--color-danger) l c h / 0.5);
+    --danger-outline-color: oklch(from var(--theme-color-danger) l c h / 0.5);
 
     /* The outline-offset value used for buttons */
     --outline-offset-button: 6px;
@@ -26,6 +26,16 @@
     /* Used for entry animations */
     --starting-style-transition-duration: 0.125s;
     --starting-style-sibling-delay: 0.01s;
+
+    --color-danger-bg: var(--theme-color-danger-bg);
+    --color-success-bg: var(--theme-color-success-bg);
+}
+
+:root.dark, .dark * {
+    --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+    --color-danger: var(--theme-color-danger);
+    /* Make the danger background slightly darker/more subtle in dark mode */
+    --color-danger-bg: oklch(from var(--theme-color-danger-bg) l c h / 0.2);
 }
 
 /* FOCUS STATES
diff --git a/resources/css/ui.css b/resources/css/ui.css
index c704a84999..e7adea5a9b 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -30,11 +30,6 @@
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
 
-    --color-danger: var(--theme-color-danger);
-    --color-danger-bg: oklch(from var(--theme-color-danger-bg) l c h / var(--color-danger-bg-opacity, 1));
-    --color-success: var(--theme-color-success);
-    --color-success-bg: oklch(from var(--theme-color-success-bg) l c h / var(--color-success-bg-opacity, 1));
-
     /* Temp */
     --color-dark-100: #dfe1e5;
     --color-dark-150: #bbbdc0;
@@ -93,13 +88,6 @@
 
     /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
     --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
-
-    &.dark {
-        --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
-        /* Make the danger background slightly darker/more subtle in dark mode */
-        --color-danger-bg-opacity: 0.2;
-        --color-success-bg-opacity: 0.2;
-    }
 }
 
 @theme {

From a61fb0fd56eda8b7176b69252e60472b69360dcd Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Dec 2025 13:39:11 +0000
Subject: [PATCH 47/54] Add additional dark selector to the theme variables.
 This is needed when targeting things descended from .dark panels, for example
 `/cp/assets > edit > delete button` , which should be a dark variant

---
 resources/css/elements/base.css         | 10 ----------
 resources/css/ui.css                    | 12 ++++++++++++
 resources/views/partials/head.blade.php |  2 +-
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 24d6a6d08b..66b879bac7 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -26,16 +26,6 @@
     /* Used for entry animations */
     --starting-style-transition-duration: 0.125s;
     --starting-style-sibling-delay: 0.01s;
-
-    --color-danger-bg: var(--theme-color-danger-bg);
-    --color-success-bg: var(--theme-color-success-bg);
-}
-
-:root.dark, .dark * {
-    --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
-    --color-danger: var(--theme-color-danger);
-    /* Make the danger background slightly darker/more subtle in dark mode */
-    --color-danger-bg: oklch(from var(--theme-color-danger-bg) l c h / 0.2);
 }
 
 /* FOCUS STATES
diff --git a/resources/css/ui.css b/resources/css/ui.css
index e7adea5a9b..7f98349348 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -30,6 +30,11 @@
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
 
+    --color-danger-bg: var(--theme-color-danger-bg);
+    --color-success-bg: var(--theme-color-success-bg);
+    --color-success: var(--theme-color-success);
+    --color-success-bg: oklch(from var(--theme-color-success-bg) l c h / var(--color-success-bg-opacity, 1));
+
     /* Temp */
     --color-dark-100: #dfe1e5;
     --color-dark-150: #bbbdc0;
@@ -88,6 +93,13 @@
 
     /* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
     --color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
+
+    &.dark, .dark * {
+        --color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
+        --color-danger: var(--theme-color-danger);
+        /* Make the danger background slightly darker/more subtle in dark mode */
+        --color-danger-bg: oklch(from var(--theme-color-danger-bg) l c h / 0.2);
+    }
 }
 
 @theme {
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
index a4a43141da..a97a6de1bb 100644
--- a/resources/views/partials/head.blade.php
+++ b/resources/views/partials/head.blade.php
@@ -50,7 +50,7 @@
     :root {
         {{ \Statamic\CP\Color::cssVariables() }}
 
-        &.dark {
+        &.dark, .dark {
             {{ \Statamic\CP\Color::cssVariables(dark: true) }}
         }
     }

From 0043cf149d8def119dc97e3fd91d2b44507547d3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Dec 2025 14:06:35 +0000
Subject: [PATCH 48/54] Fix danger vars

---
 resources/css/ui.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index 7f98349348..c97482c5e4 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -33,7 +33,7 @@
     --color-danger-bg: var(--theme-color-danger-bg);
     --color-success-bg: var(--theme-color-success-bg);
     --color-success: var(--theme-color-success);
-    --color-success-bg: oklch(from var(--theme-color-success-bg) l c h / var(--color-success-bg-opacity, 1));
+    --color-danger: var(--theme-color-danger);
 
     /* Temp */
     --color-dark-100: #dfe1e5;

From 7cc022b353f79623a628a40d59f6a065659af910 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Dec 2025 14:07:37 +0000
Subject: [PATCH 49/54] Add explicit delete-action to other buttons

---
 resources/js/components/assets/Editor/Editor.vue               | 2 +-
 resources/js/components/blueprints/ImportField.vue             | 2 +-
 resources/js/components/blueprints/RegularField.vue            | 2 +-
 resources/js/components/blueprints/Section.vue                 | 2 +-
 resources/js/components/field-conditions/Condition.vue         | 2 +-
 resources/js/components/field-validation/Builder.vue           | 1 +
 resources/js/components/fieldtypes/ColorFieldtype.vue          | 2 +-
 resources/js/components/fieldtypes/FilesFieldtype.vue          | 1 +
 resources/js/components/fieldtypes/ListFieldtype.vue           | 1 +
 resources/js/components/fieldtypes/assets/AssetRow.vue         | 1 +
 resources/js/components/fieldtypes/assets/AssetTile.vue        | 2 +-
 resources/js/components/fieldtypes/bard/Image.vue              | 2 +-
 resources/js/components/fieldtypes/bard/LinkToolbar.vue        | 1 +
 resources/js/components/ui/Combobox.vue                        | 2 +-
 resources/js/components/ui/DatePicker/DatePicker.vue           | 1 +
 resources/js/components/ui/DateRangePicker/DateRangePicker.vue | 1 +
 resources/js/components/ui/Listing/FieldFilterRow.vue          | 2 +-
 resources/js/components/ui/Listing/Presets.vue                 | 1 +
 resources/js/components/ui/TimePicker/TimePicker.vue           | 2 +-
 19 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 340dcb4f65..2104f5b96f 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -44,7 +44,7 @@
                                 <ui-button inset size="sm" v-if="canRunAction('replace_asset')" @click.prevent="runAction(actions, 'replace_asset')" icon="replace" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Replace')" :aria-label="__('Replace')" />
                                 <ui-button inset size="sm" v-if="canRunAction('reupload_asset')" @click.prevent="runAction(actions, 'reupload_asset')" icon="upload-cloud" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Reupload')" :aria-label="__('Reupload')" />
                                 <ui-button inset size="sm" @click="download" icon="download" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Download')" :aria-label="__('Download')" />
-                                <ui-button inset size="sm" v-if="allowDeleting && canRunAction('delete')" @click="runAction(actions, 'delete')" icon="trash" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Delete')" :aria-label="__('Delete')" />
+                                <ui-button inset size="sm" v-if="allowDeleting && canRunAction('delete')" @click="runAction(actions, 'delete')" icon="trash" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Delete')" :aria-label="__('Delete')" delete-action />
 
                                 <Dropdown class="me-4">
                                     <DropdownMenu>
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 2bf78d26b6..471c9009e6 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -15,7 +15,7 @@
                             </div>
                         </div>
                         <div class="flex items-center gap-2">
-                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
+                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" delete-action />
                             <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
                                 <field-settings
                                     ref="settings"
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index 92afb371e8..7407ed7913 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -28,7 +28,7 @@
                     <div class="flex items-center">
                         <ui-button v-if="canDefineLocalizable" inset size="sm" icon="earth" :variant="localizable ? 'ghost-pressed' : 'subtle'" v-tooltip="__('Localizable')" @click="localizable = !localizable" />
                         <ui-button inset size="sm" icon="duplicate" variant="subtle" @click.prevent="$emit('duplicate')" v-tooltip="__('Duplicate')" />
-                        <ui-button inset size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
+                        <ui-button inset size="sm" icon="trash" delete-action variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
                     </div>
 
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index e84c08a8bb..6dc54380bf 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -8,7 +8,7 @@
                     <ui-heading v-text="__(section.display ?? 'Section')" />
                 </div>
                 <ui-button icon="pencil-line" size="sm" variant="ghost" @click="edit" :aria-label="__('Edit Section')" v-tooltip="__('Edit Section')" />
-                <ui-button icon="trash" size="sm" variant="ghost" @click.prevent="$emit('deleted')" :aria-label="__('Delete Section')" v-tooltip="__('Delete Section')" />
+                <ui-button icon="trash" size="sm" variant="ghost" delete-action @click.prevent="$emit('deleted')" :aria-label="__('Delete Section')" v-tooltip="__('Delete Section')" />
             </ui-panel-header>
 
             <Fields
diff --git a/resources/js/components/field-conditions/Condition.vue b/resources/js/components/field-conditions/Condition.vue
index 3a88e567fc..fd9f792c5b 100644
--- a/resources/js/components/field-conditions/Condition.vue
+++ b/resources/js/components/field-conditions/Condition.vue
@@ -65,7 +65,7 @@
             @update:model-value="valueUpdated"
         />
 
-        <Button variant="ghost" size="sm" icon="trash" :aria-label="__('Remove Condition')" @click="remove" />
+        <Button variant="ghost" size="sm" icon="trash" :aria-label="__('Remove Condition')" @click="remove" delete-action />
     </div>
 </template>
 
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index 5252e6c55c..bf21ea3e83 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -78,6 +78,7 @@
                                 class="opacity-75 hover:opacity-100 cursor-pointer"
                                 :aria-label="__('Remove Validation Rule')"
                                 @click="remove(rule)"
+                                data-delete-action
                             >
                                 &times;
                             </button>
diff --git a/resources/js/components/fieldtypes/ColorFieldtype.vue b/resources/js/components/fieldtypes/ColorFieldtype.vue
index c6555e04c2..3fc59c2bd3 100644
--- a/resources/js/components/fieldtypes/ColorFieldtype.vue
+++ b/resources/js/components/fieldtypes/ColorFieldtype.vue
@@ -69,7 +69,7 @@
             />
         </div>
 
-        <ui-button v-if="value" icon="x" :aria-label="__('Reset')" @click="resetColor" round inset size="sm" variant="ghost" class="ms-1" />
+        <ui-button v-if="value" icon="x" :aria-label="__('Reset')" @click="resetColor" round inset size="sm" variant="ghost" class="ms-1" delete-action />
     </div>
 </template>
 
diff --git a/resources/js/components/fieldtypes/FilesFieldtype.vue b/resources/js/components/fieldtypes/FilesFieldtype.vue
index b8b0c17e33..62c5d46a92 100644
--- a/resources/js/components/fieldtypes/FilesFieldtype.vue
+++ b/resources/js/components/fieldtypes/FilesFieldtype.vue
@@ -62,6 +62,7 @@
                                         variant="ghost"
                                         :aria-label="__('Remove Asset')"
                                         :title="__('Remove')"
+                                        delete-action
                                     />
                                 </td>
                             </tr>
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index bc1fb9ca3d..399fc48ebb 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -36,6 +36,7 @@
                                 @click="deleteValue(index)"
                                 class="inline text-lg antialiased opacity-25 hover:opacity-75 cursor-pointer"
                                 :aria-label="__('Delete Value')"
+                                data-delete-action
                             >
                                 &times;
                             </button>
diff --git a/resources/js/components/fieldtypes/assets/AssetRow.vue b/resources/js/components/fieldtypes/assets/AssetRow.vue
index 301fbc0416..306fc10344 100644
--- a/resources/js/components/fieldtypes/assets/AssetRow.vue
+++ b/resources/js/components/fieldtypes/assets/AssetRow.vue
@@ -49,6 +49,7 @@
                     variant="ghost"
                     :aria-label="__('Remove Asset')"
                     :title="__('Remove')"
+                    delete-action
                 />
 
                 <asset-editor
diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index ab4bac1aa4..e38d1bfdb6 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -38,7 +38,7 @@
                 <div class="flex items-center justify-center gap-2">
                     <template v-if="!readOnly">
                         <ui-button size="sm" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
-                        <ui-button size="sm" @click="remove" icon="x" aria-label="__('Remove')" />
+                        <ui-button size="sm" @click="remove" icon="x" aria-label="__('Remove')" delete-action />
                     </template>
 
                     <template v-else>
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index cc7bc583f2..b023c8e7ba 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -19,7 +19,7 @@
                 <Button v-if="src" size="sm" icon="edit" :text="__('Edit Image')" @click="edit" />
                 <Button v-if="src" size="sm" icon="rename" :text="__('Override Alt')" :class="{ active: showingAltEdit }" @click="toggleAltEditor" />
                 <Button v-if="src" size="sm" icon="replace" :text="__('Replace')" @click="openSelector" />
-                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" :aria-label="__('Remove')" v-tooltip="__('Remove')" @click="deleteNode" />
+                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" :aria-label="__('Remove')" v-tooltip="__('Remove')" @click="deleteNode" delete-action />
             </div>
 
             <div
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 6ed46f04bb..2da75b648d 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -119,6 +119,7 @@
                     :aria-label="__('Remove Link')"
                     @click="remove"
                     size="sm"
+                    delete-action
                     inset
                 />
                 <ui-button
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 7852bdd3ac..8cc74915d0 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -388,7 +388,7 @@ defineExpose({
                         </div>
 
                         <div v-if="(clearable && modelValue) || (options.length || ignoreFilter)" class="flex gap-1.5 items-center ms-1.5 -me-2">
-                            <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" :aria-label="__('Clear selection')" v-tooltip="__('Clear selection')" data-ui-combobox-clear-button />
+                            <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" :aria-label="__('Clear selection')" v-tooltip="__('Clear selection')" data-ui-combobox-clear-button delete-action />
                             <Icon v-if="options.length || ignoreFilter" name="chevron-down" class="text-gray-400 dark:text-white/40 size-4" aria-hidden="true" data-ui-combobox-chevron />
                         </div>
                     </ComboboxTrigger>
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index cae7cf04af..695d09ec5c 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -174,6 +174,7 @@ const getInputLabel = (part) => {
                             :disabled="disabled"
                             :aria-label="__('Clear date')"
                             v-tooltip="__('Clear date')"
+                            delete-action
                         />
                     </div>
                 </DatePickerAnchor>
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index fb5ce7b94c..82cb0e2fbf 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -158,6 +158,7 @@ const calendarEvents = computed(() => ({
                         :disabled="disabled" 
                         :aria-label="__('Clear date range')"
                         v-tooltip="__('Clear date range')"
+                        delete-action
                     />
                 </div>
             </DateRangePickerField>
diff --git a/resources/js/components/ui/Listing/FieldFilterRow.vue b/resources/js/components/ui/Listing/FieldFilterRow.vue
index c25c689b17..02dd2c83f4 100644
--- a/resources/js/components/ui/Listing/FieldFilterRow.vue
+++ b/resources/js/components/ui/Listing/FieldFilterRow.vue
@@ -69,7 +69,7 @@ defineExpose({
                             />
                         </PublishField>
                     </div>
-                    <Button @click="$emit('removed')" icon="x" size="sm" variant="ghost" inset aria-label="Remove filter" />
+                    <Button @click="$emit('removed')" icon="x" size="sm" variant="ghost" inset aria-label="Remove filter" delete-action />
                 </div>
             </PublishFieldsProvider>
         </PublishContainer>
diff --git a/resources/js/components/ui/Listing/Presets.vue b/resources/js/components/ui/Listing/Presets.vue
index 0d4b304e85..7a76221c94 100644
--- a/resources/js/components/ui/Listing/Presets.vue
+++ b/resources/js/components/ui/Listing/Presets.vue
@@ -191,6 +191,7 @@ function deletePreset() {
                             variant="warning"
                             :aria-label="__('Delete Preset')"
                             @click="isConfirmingDeletion = true"
+                            data-delete-action
                         />
                     </DropdownMenu>
                 </Dropdown>
diff --git a/resources/js/components/ui/TimePicker/TimePicker.vue b/resources/js/components/ui/TimePicker/TimePicker.vue
index 7bc2db1e9c..6921b55e2b 100644
--- a/resources/js/components/ui/TimePicker/TimePicker.vue
+++ b/resources/js/components/ui/TimePicker/TimePicker.vue
@@ -52,7 +52,7 @@ const setToNow = () => {
         </div>
         <div class="flex items-center gap-1">
             <Button v-if="clearable" @click="setToNow" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" size="xs" v-tooltip="__('Set to now')" :aria-label="__('Set to now')" icon="time-now" />
-            <Button v-if="clearable" @click="emit('update:modelValue', null)" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" v-tooltip="__('Clear')" :aria-label="__('Clear')" icon="x" size="xs" />
+            <Button v-if="clearable" @click="emit('update:modelValue', null)" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" v-tooltip="__('Clear')" :aria-label="__('Clear')" icon="x" size="xs" delete-action />
         </div>
     </TimeFieldRoot>
 

From d6071fe8f1565139bca105ae8b02ce539979e872 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Dec 2025 14:23:02 +0000
Subject: [PATCH 50/54] Remove border-radius override, decided against it

---
 resources/css/elements/base.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 66b879bac7..1ad49902c9 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -121,9 +121,6 @@
                 opacity: 1!important;
             }
         }
-        &.bg-transparent {
-            /* border-radius: 100%; */
-        }
     }
     /* DELETE STATES / BADGES
     =================================================== */

From 4d4071886a68c355127f56dec0a98e2ccc859ee9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Dec 2025 15:21:40 +0000
Subject: [PATCH 51/54] Fix badges

---
 resources/css/elements/base.css         | 8 +++++---
 resources/js/components/ui/Combobox.vue | 1 +
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 1ad49902c9..91bc8790a0 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -105,7 +105,7 @@
 =================================================== */
 @layer utilities {
     /* Delete buttons */
-    [data-delete-action] {
+    [data-delete-action]:not([data-ui-badge] *) {
         --focus-outline-color: var(--danger-outline-color);
         --focus-outline-width: 1px;
         &:hover,
@@ -125,13 +125,15 @@
     /* DELETE STATES / BADGES
     =================================================== */
     /* When a badge "x" is hovered, the whole badge lights up red. */
-    [data-ui-badge]:has(button[aria-label*="Deselect"]:is(:hover, :focus)) {
+    [data-ui-badge]:has([data-delete-action]:is(:hover, :focus)) {
         --focus-outline-color: var(--danger-outline-color);
         --focus-outline-width: 1px;
         background: var(--color-danger-bg);
         outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
         outline-offset: var(--focus-outline-offset);
-        color: var(--color-danger);
+        &, button {
+            color: var(--color-danger);
+        }
         /* Cancel the outline on the actual button since we're highlighting the entire badge */
         button {
             outline: none;
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 8cc74915d0..9d5d4dc21a 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -490,6 +490,7 @@ defineExpose({
                                     cursor-pointer relative opacity-75 size-2
                                 "
                                 :aria-label="__('Deselect option')"
+                                data-delete-action
                                 @click="deselect(option.value)"
                             >
                                 <span class="relative">&times;</span>

From f6ee58332a291f1055ece353df7527841e6c24bc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Dec 2025 15:21:51 +0000
Subject: [PATCH 52/54] Add dictionary fieldtype

---
 resources/js/components/fieldtypes/DictionaryFieldtype.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/fieldtypes/DictionaryFieldtype.vue b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
index b6dba0dfc7..0920a3efd2 100644
--- a/resources/js/components/fieldtypes/DictionaryFieldtype.vue
+++ b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
@@ -43,6 +43,7 @@
                                 type="button"
                                 class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700"
                                 :aria-label="__('Deselect option')"
+                                data-delete-action
                                 @click="deselect(option.value)"
                             >
                                 <span>&times;</span>

From 4e9773b5b5be5aa164c86226bf5a65244d523874 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Dec 2025 15:27:20 +0000
Subject: [PATCH 53/54] Rename delete-action to destructive

---
 resources/css/elements/base.css                        | 10 +++++-----
 resources/js/components/assets/Editor/Editor.vue       |  2 +-
 resources/js/components/blueprints/ImportField.vue     |  2 +-
 resources/js/components/blueprints/RegularField.vue    |  2 +-
 resources/js/components/blueprints/Section.vue         |  2 +-
 resources/js/components/field-conditions/Condition.vue |  2 +-
 resources/js/components/field-validation/Builder.vue   |  2 +-
 resources/js/components/fieldtypes/ColorFieldtype.vue  |  2 +-
 .../js/components/fieldtypes/DictionaryFieldtype.vue   |  2 +-
 resources/js/components/fieldtypes/FilesFieldtype.vue  |  2 +-
 resources/js/components/fieldtypes/ListFieldtype.vue   |  2 +-
 resources/js/components/fieldtypes/TableFieldtype.vue  |  4 ++--
 resources/js/components/fieldtypes/assets/AssetRow.vue |  2 +-
 .../js/components/fieldtypes/assets/AssetTile.vue      |  2 +-
 resources/js/components/fieldtypes/bard/Image.vue      |  2 +-
 .../js/components/fieldtypes/bard/LinkToolbar.vue      |  2 +-
 resources/js/components/fieldtypes/grid/StackedRow.vue |  2 +-
 resources/js/components/ui/Button/Button.vue           |  4 ++--
 resources/js/components/ui/Combobox.vue                |  4 ++--
 resources/js/components/ui/DatePicker/DatePicker.vue   |  2 +-
 .../components/ui/DateRangePicker/DateRangePicker.vue  |  2 +-
 resources/js/components/ui/Listing/FieldFilterRow.vue  |  2 +-
 resources/js/components/ui/Listing/Presets.vue         |  2 +-
 resources/js/components/ui/TimePicker/TimePicker.vue   |  2 +-
 24 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 91bc8790a0..2e321bdf63 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -101,11 +101,11 @@
     }
 }
 
-/* DELETE STATES
+/* DESTRUCTIVE STATES
 =================================================== */
 @layer utilities {
-    /* Delete buttons */
-    [data-delete-action]:not([data-ui-badge] *) {
+    /* Destructive buttons */
+    [data-destructive]:not([data-ui-badge] *) {
         --focus-outline-color: var(--danger-outline-color);
         --focus-outline-width: 1px;
         &:hover,
@@ -122,10 +122,10 @@
             }
         }
     }
-    /* DELETE STATES / BADGES
+    /* DESTRUCTIVE STATES / BADGES
     =================================================== */
     /* When a badge "x" is hovered, the whole badge lights up red. */
-    [data-ui-badge]:has([data-delete-action]:is(:hover, :focus)) {
+    [data-ui-badge]:has([data-destructive]:is(:hover, :focus)) {
         --focus-outline-color: var(--danger-outline-color);
         --focus-outline-width: 1px;
         background: var(--color-danger-bg);
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 2104f5b96f..6785b7b04f 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -44,7 +44,7 @@
                                 <ui-button inset size="sm" v-if="canRunAction('replace_asset')" @click.prevent="runAction(actions, 'replace_asset')" icon="replace" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Replace')" :aria-label="__('Replace')" />
                                 <ui-button inset size="sm" v-if="canRunAction('reupload_asset')" @click.prevent="runAction(actions, 'reupload_asset')" icon="upload-cloud" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Reupload')" :aria-label="__('Reupload')" />
                                 <ui-button inset size="sm" @click="download" icon="download" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Download')" :aria-label="__('Download')" />
-                                <ui-button inset size="sm" v-if="allowDeleting && canRunAction('delete')" @click="runAction(actions, 'delete')" icon="trash" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Delete')" :aria-label="__('Delete')" delete-action />
+                                <ui-button inset size="sm" v-if="allowDeleting && canRunAction('delete')" @click="runAction(actions, 'delete')" icon="trash" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Delete')" :aria-label="__('Delete')" destructive />
 
                                 <Dropdown class="me-4">
                                     <DropdownMenu>
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 471c9009e6..fbcb4d1fa4 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -15,7 +15,7 @@
                             </div>
                         </div>
                         <div class="flex items-center gap-2">
-                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" delete-action />
+                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" destructive />
                             <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
                                 <field-settings
                                     ref="settings"
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index 7407ed7913..35fea4ba99 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -28,7 +28,7 @@
                     <div class="flex items-center">
                         <ui-button v-if="canDefineLocalizable" inset size="sm" icon="earth" :variant="localizable ? 'ghost-pressed' : 'subtle'" v-tooltip="__('Localizable')" @click="localizable = !localizable" />
                         <ui-button inset size="sm" icon="duplicate" variant="subtle" @click.prevent="$emit('duplicate')" v-tooltip="__('Duplicate')" />
-                        <ui-button inset size="sm" icon="trash" delete-action variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
+                        <ui-button inset size="sm" icon="trash" destructive variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" />
                     </div>
 
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 6dc54380bf..c74719f869 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -8,7 +8,7 @@
                     <ui-heading v-text="__(section.display ?? 'Section')" />
                 </div>
                 <ui-button icon="pencil-line" size="sm" variant="ghost" @click="edit" :aria-label="__('Edit Section')" v-tooltip="__('Edit Section')" />
-                <ui-button icon="trash" size="sm" variant="ghost" delete-action @click.prevent="$emit('deleted')" :aria-label="__('Delete Section')" v-tooltip="__('Delete Section')" />
+                <ui-button icon="trash" size="sm" variant="ghost" destructive @click.prevent="$emit('deleted')" :aria-label="__('Delete Section')" v-tooltip="__('Delete Section')" />
             </ui-panel-header>
 
             <Fields
diff --git a/resources/js/components/field-conditions/Condition.vue b/resources/js/components/field-conditions/Condition.vue
index fd9f792c5b..e76f2901c5 100644
--- a/resources/js/components/field-conditions/Condition.vue
+++ b/resources/js/components/field-conditions/Condition.vue
@@ -65,7 +65,7 @@
             @update:model-value="valueUpdated"
         />
 
-        <Button variant="ghost" size="sm" icon="trash" :aria-label="__('Remove Condition')" @click="remove" delete-action />
+        <Button variant="ghost" size="sm" icon="trash" :aria-label="__('Remove Condition')" @click="remove" destructive />
     </div>
 </template>
 
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index bf21ea3e83..a197e9e4cf 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -78,7 +78,7 @@
                                 class="opacity-75 hover:opacity-100 cursor-pointer"
                                 :aria-label="__('Remove Validation Rule')"
                                 @click="remove(rule)"
-                                data-delete-action
+                                data-destructive
                             >
                                 &times;
                             </button>
diff --git a/resources/js/components/fieldtypes/ColorFieldtype.vue b/resources/js/components/fieldtypes/ColorFieldtype.vue
index 3fc59c2bd3..4be5901a13 100644
--- a/resources/js/components/fieldtypes/ColorFieldtype.vue
+++ b/resources/js/components/fieldtypes/ColorFieldtype.vue
@@ -69,7 +69,7 @@
             />
         </div>
 
-        <ui-button v-if="value" icon="x" :aria-label="__('Reset')" @click="resetColor" round inset size="sm" variant="ghost" class="ms-1" delete-action />
+        <ui-button v-if="value" icon="x" :aria-label="__('Reset')" @click="resetColor" round inset size="sm" variant="ghost" class="ms-1" destructive />
     </div>
 </template>
 
diff --git a/resources/js/components/fieldtypes/DictionaryFieldtype.vue b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
index 0920a3efd2..589556e88c 100644
--- a/resources/js/components/fieldtypes/DictionaryFieldtype.vue
+++ b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
@@ -43,7 +43,7 @@
                                 type="button"
                                 class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700"
                                 :aria-label="__('Deselect option')"
-                                data-delete-action
+                                data-destructive
                                 @click="deselect(option.value)"
                             >
                                 <span>&times;</span>
diff --git a/resources/js/components/fieldtypes/FilesFieldtype.vue b/resources/js/components/fieldtypes/FilesFieldtype.vue
index 62c5d46a92..0645b5da6e 100644
--- a/resources/js/components/fieldtypes/FilesFieldtype.vue
+++ b/resources/js/components/fieldtypes/FilesFieldtype.vue
@@ -62,7 +62,7 @@
                                         variant="ghost"
                                         :aria-label="__('Remove Asset')"
                                         :title="__('Remove')"
-                                        delete-action
+                                        destructive
                                     />
                                 </td>
                             </tr>
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index 399fc48ebb..9eeacd1725 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -36,7 +36,7 @@
                                 @click="deleteValue(index)"
                                 class="inline text-lg antialiased opacity-25 hover:opacity-75 cursor-pointer"
                                 :aria-label="__('Delete Value')"
-                                data-delete-action
+                                data-destructive
                             >
                                 &times;
                             </button>
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 03a338f525..99bf6afd41 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -20,7 +20,7 @@
                             <th v-for="(column, index) in columnCount" :key="index">
                                 <div class="flex h-6 items-center justify-between">
                                     <span class="column-count">{{ index + 1 }}</span>
-                                    <ui-button icon="x" variant="subtle" size="xs" delete-action round @click="confirmDeleteColumn(index)" :aria-label="__('Delete Column')" v-tooltip="__('Delete Column')" class="-me-1" />
+                                    <ui-button icon="x" variant="subtle" size="xs" destructive round @click="confirmDeleteColumn(index)" :aria-label="__('Delete Column')" v-tooltip="__('Delete Column')" class="-me-1" />
                                 </div>
                             </th>
                             <th class="row-controls"></th>
@@ -50,7 +50,7 @@
                                     />
                                 </td>
                                 <td class="row-controls" v-if="canDeleteRows">
-                                    <ui-button icon="x" variant="subtle" delete-action size="xs" round @click="confirmDeleteRow(rowIndex)" :aria-label="__('Delete Row')" v-tooltip="__('Delete Row')" />
+                                    <ui-button icon="x" variant="subtle" destructive size="xs" round @click="confirmDeleteRow(rowIndex)" :aria-label="__('Delete Row')" v-tooltip="__('Delete Row')" />
                                 </td>
                             </tr>
                         </tbody>
diff --git a/resources/js/components/fieldtypes/assets/AssetRow.vue b/resources/js/components/fieldtypes/assets/AssetRow.vue
index 306fc10344..2152d12925 100644
--- a/resources/js/components/fieldtypes/assets/AssetRow.vue
+++ b/resources/js/components/fieldtypes/assets/AssetRow.vue
@@ -49,7 +49,7 @@
                     variant="ghost"
                     :aria-label="__('Remove Asset')"
                     :title="__('Remove')"
-                    delete-action
+                    destructive
                 />
 
                 <asset-editor
diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index e38d1bfdb6..7e8f08c071 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -38,7 +38,7 @@
                 <div class="flex items-center justify-center gap-2">
                     <template v-if="!readOnly">
                         <ui-button size="sm" @click="editOrOpen" :icon="asset.isEditable ? 'pencil' : 'eye'" aria-label="__('Edit')" v-if="asset.isViewable" />
-                        <ui-button size="sm" @click="remove" icon="x" aria-label="__('Remove')" delete-action />
+                        <ui-button size="sm" @click="remove" icon="x" aria-label="__('Remove')" destructive />
                     </template>
 
                     <template v-else>
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index b023c8e7ba..bc5709ec54 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -19,7 +19,7 @@
                 <Button v-if="src" size="sm" icon="edit" :text="__('Edit Image')" @click="edit" />
                 <Button v-if="src" size="sm" icon="rename" :text="__('Override Alt')" :class="{ active: showingAltEdit }" @click="toggleAltEditor" />
                 <Button v-if="src" size="sm" icon="replace" :text="__('Replace')" @click="openSelector" />
-                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" :aria-label="__('Remove')" v-tooltip="__('Remove')" @click="deleteNode" delete-action />
+                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" :aria-label="__('Remove')" v-tooltip="__('Remove')" @click="deleteNode" destructive />
             </div>
 
             <div
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 2da75b648d..b7be7a68a2 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -119,7 +119,7 @@
                     :aria-label="__('Remove Link')"
                     @click="remove"
                     size="sm"
-                    delete-action
+                    destructive
                     inset
                 />
                 <ui-button
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
index dafa14da15..5a92128f96 100644
--- a/resources/js/components/fieldtypes/grid/StackedRow.vue
+++ b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -21,7 +21,7 @@
                     v-if="canDelete"
                     @click="$emit('removed', index)"
                     :aria-label="__('Delete Row')"
-                    delete-action
+                    destructive
                     v-tooltip="__('Delete Row')"
                     icon="trash"
                     variant="ghost"
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 157c470c57..66acec29f2 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -19,7 +19,7 @@ const props = defineProps({
     text: { type: [String, Number, Boolean, null], default: null },
     type: { type: String, default: 'button' },
     variant: { type: String, default: 'default' },
-    deleteAction: { type: Boolean, default: false },
+    destructive: { type: Boolean, default: false },
 });
 
 const slots = useSlots();
@@ -103,7 +103,7 @@ const buttonClasses = computed(() => {
         :class="buttonClasses"
         :disabled="loading"
         :data-ui-group-target="['subtle', 'ghost'].includes(props.variant) ? null : true"
-        :data-delete-action="deleteAction || undefined"
+        :data-destructive="destructive || undefined"
         :href
         :target
         :type="props.href ? null : type"
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 9d5d4dc21a..cd15c67172 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -388,7 +388,7 @@ defineExpose({
                         </div>
 
                         <div v-if="(clearable && modelValue) || (options.length || ignoreFilter)" class="flex gap-1.5 items-center ms-1.5 -me-2">
-                            <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" :aria-label="__('Clear selection')" v-tooltip="__('Clear selection')" data-ui-combobox-clear-button delete-action />
+                            <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" :aria-label="__('Clear selection')" v-tooltip="__('Clear selection')" data-ui-combobox-clear-button destructive />
                             <Icon v-if="options.length || ignoreFilter" name="chevron-down" class="text-gray-400 dark:text-white/40 size-4" aria-hidden="true" data-ui-combobox-chevron />
                         </div>
                     </ComboboxTrigger>
@@ -490,7 +490,7 @@ defineExpose({
                                     cursor-pointer relative opacity-75 size-2
                                 "
                                 :aria-label="__('Deselect option')"
-                                data-delete-action
+                                data-destructive
                                 @click="deselect(option.value)"
                             >
                                 <span class="relative">&times;</span>
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 695d09ec5c..adf3879131 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -174,7 +174,7 @@ const getInputLabel = (part) => {
                             :disabled="disabled"
                             :aria-label="__('Clear date')"
                             v-tooltip="__('Clear date')"
-                            delete-action
+                            destructive
                         />
                     </div>
                 </DatePickerAnchor>
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 82cb0e2fbf..3c6e90b167 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -158,7 +158,7 @@ const calendarEvents = computed(() => ({
                         :disabled="disabled" 
                         :aria-label="__('Clear date range')"
                         v-tooltip="__('Clear date range')"
-                        delete-action
+                        destructive
                     />
                 </div>
             </DateRangePickerField>
diff --git a/resources/js/components/ui/Listing/FieldFilterRow.vue b/resources/js/components/ui/Listing/FieldFilterRow.vue
index 02dd2c83f4..c485fb63d5 100644
--- a/resources/js/components/ui/Listing/FieldFilterRow.vue
+++ b/resources/js/components/ui/Listing/FieldFilterRow.vue
@@ -69,7 +69,7 @@ defineExpose({
                             />
                         </PublishField>
                     </div>
-                    <Button @click="$emit('removed')" icon="x" size="sm" variant="ghost" inset aria-label="Remove filter" delete-action />
+                    <Button @click="$emit('removed')" icon="x" size="sm" variant="ghost" inset aria-label="Remove filter" destructive />
                 </div>
             </PublishFieldsProvider>
         </PublishContainer>
diff --git a/resources/js/components/ui/Listing/Presets.vue b/resources/js/components/ui/Listing/Presets.vue
index 7a76221c94..cc7e2f0a06 100644
--- a/resources/js/components/ui/Listing/Presets.vue
+++ b/resources/js/components/ui/Listing/Presets.vue
@@ -191,7 +191,7 @@ function deletePreset() {
                             variant="warning"
                             :aria-label="__('Delete Preset')"
                             @click="isConfirmingDeletion = true"
-                            data-delete-action
+                            data-destructive
                         />
                     </DropdownMenu>
                 </Dropdown>
diff --git a/resources/js/components/ui/TimePicker/TimePicker.vue b/resources/js/components/ui/TimePicker/TimePicker.vue
index 6921b55e2b..5dd2412eaf 100644
--- a/resources/js/components/ui/TimePicker/TimePicker.vue
+++ b/resources/js/components/ui/TimePicker/TimePicker.vue
@@ -52,7 +52,7 @@ const setToNow = () => {
         </div>
         <div class="flex items-center gap-1">
             <Button v-if="clearable" @click="setToNow" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" size="xs" v-tooltip="__('Set to now')" :aria-label="__('Set to now')" icon="time-now" />
-            <Button v-if="clearable" @click="emit('update:modelValue', null)" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" v-tooltip="__('Clear')" :aria-label="__('Clear')" icon="x" size="xs" delete-action />
+            <Button v-if="clearable" @click="emit('update:modelValue', null)" type="button" class="[&_svg]:opacity-80! dark:[&_svg]:opacity-70! hover:[&_svg]:opacity-100!" v-tooltip="__('Clear')" :aria-label="__('Clear')" icon="x" size="xs" destructive />
         </div>
     </TimeFieldRoot>
 

From 74a0443a5bdb33353b4fc155181264bd11046f7d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Dec 2025 10:21:38 +0000
Subject: [PATCH 54/54] Fix previous conflicts

---
 resources/js/components/blueprints/ImportField.vue   | 2 +-
 resources/js/components/fieldtypes/ListFieldtype.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 3fa62520e5..f8cee0ec93 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -15,7 +15,7 @@
                             </div>
                         </div>
                         <div class="flex items-center gap-2">
-                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
+                            <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" :aria-label="__('Remove')" v-tooltip="__('Remove')" destructive />
                             <ui-stack name="field-settings" v-if="isEditing" @closed="editorClosed">
                                 <field-settings
                                     ref="settings"
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index e93fedcdd8..2a6d753d6c 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -37,7 +37,7 @@
                                 variant="subtle"
                                 size="xs"
                                 round
-                                delete-action
+                                destructive
                                 @click="deleteValue(index)"
                                 :aria-label="__('Delete Item')"
                                 v-tooltip="__('Delete Item')"