From 2e2acca8b41de7103684f7dfe477a35b8b8589ce Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 3 Sep 2026 14:43:43 +0100
Subject: [PATCH 01/15] wip

---
 lang/en/messages.php                                   |  4 ++--
 .../js/components/forms/connections/ConnectionRow.vue  |  4 ++--
 .../js/components/forms/connections/ConnectionRows.vue | 10 ++++++++--
 .../components/forms/connections/EmailConnection.vue   | 10 +++++++++-
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/lang/en/messages.php b/lang/en/messages.php
index f4609a3aaf8..0f8fe56ad41 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -85,7 +85,7 @@
     'elevated_session_verification_code_sent' => 'Verification code has been sent to your email.',
     'email_connection_delete_confirmation' => 'Are you sure you want to delete this email?',
     'email_connection_description' => 'Send email notifications.',
-    'email_connection_empty_description' => 'Notify your team, or send a confirmation to the person who submitted.',
+    'email_connection_empty_description' => 'Set up emails to be sent automatically when this form is submitted. Use them to notify users or team members.',
     'email_utility_configuration_description' => 'Mail settings are configured in <code>:path</code>',
     'email_utility_description' => 'Check email configuration settings and send test emails.',
     'entry_count' => ':count entry|:count entries',
@@ -329,7 +329,7 @@
     'user_wizard_super_admin_instructions' => 'Super admins have complete control and access to everything in the control panel. Grant this role wisely.',
     'webhook_connection_delete_confirmation' => 'Are you sure you want to delete this webhook?',
     'webhook_connection_description' => 'Send submissions to an external URL.',
-    'webhook_connection_empty_description' => 'Notify other services whenever this form receives a submission.',
+    'webhook_connection_empty_description' => 'Each webhook is sent when this form is submitted. Notify other services or trigger automations with the submission data.',
     'webhook_connection_payload_instructions' => 'Each submission is sent to the webhook URL as a JSON POST request.',
     'webhook_connection_verify_ssl_instructions' => 'Only disable this if the receiving server uses a self-signed certificate.',
     'width_x_height' => ':width × :height',
diff --git a/resources/js/components/forms/connections/ConnectionRow.vue b/resources/js/components/forms/connections/ConnectionRow.vue
index 14d51866351..944eaaf476a 100644
--- a/resources/js/components/forms/connections/ConnectionRow.vue
+++ b/resources/js/components/forms/connections/ConnectionRow.vue
@@ -21,10 +21,10 @@ function toggleCollapsedState() {
         :class="{ 'border-red-500': hasError }"
     >
         <header
-            class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 dark:bg-gray-925 border-gray-300 dark:shadow-md"
+            class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 border-gray-300 dark:shadow-md"
             :class="{
                 'bg-white dark:bg-gray-900': collapsed,
-                'bg-gray-200/50 dark:bg-gray-950/35 rounded-b-none': !collapsed,
+                'bg-gray-100 dark:bg-gray-925 rounded-b-none': !collapsed,
             }"
         >
             <DragHandle :class="handleClass" class="ms-1 cursor-grab [&_svg]:opacity-75 dark:[&_svg]:opacity-50" />
diff --git a/resources/js/components/forms/connections/ConnectionRows.vue b/resources/js/components/forms/connections/ConnectionRows.vue
index 5120c9781fd..2b9bb275fe1 100644
--- a/resources/js/components/forms/connections/ConnectionRows.vue
+++ b/resources/js/components/forms/connections/ConnectionRows.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { nanoid as uniqid } from 'nanoid';
-import { Button, ConfirmationModal } from '@ui';
+import { Button, ConfirmationModal, Description } from '@ui';
 import { SortableList } from '@/components/sortable/Sortable.js';
 import { deepClone } from '@/util/clone.js';
 import LogicEmptyState from '@/components/forms/logic/LogicEmptyState.vue';
@@ -127,11 +127,17 @@ watch(
 </script>
 
 <template>
-    <LogicEmptyState v-if="modelValue.length === 0" :heading="emptyHeading" :description="emptyDescription">
+    <LogicEmptyState
+        v-if="modelValue.length === 0"
+        :heading="emptyHeading"
+        :description="emptyDescription"
+    >
         <Button size="sm" :text="addLabel" icon="plus" @click="add" />
     </LogicEmptyState>
 
     <template v-else>
+        <Description v-if="emptyDescription" :text="emptyDescription" class="mb-4" />
+
         <SortableList
             vertical
             constrain-dimensions
diff --git a/resources/js/components/forms/connections/EmailConnection.vue b/resources/js/components/forms/connections/EmailConnection.vue
index 9fe2a0118f4..38f03079e2c 100644
--- a/resources/js/components/forms/connections/EmailConnection.vue
+++ b/resources/js/components/forms/connections/EmailConnection.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
-import { Badge, Icon, PublishContainer, PublishFields, PublishFieldsProvider, Subheading } from '@ui';
+import { Badge, Icon, Label, PublishContainer, PublishFields, PublishFieldsProvider, Subheading } from '@ui';
 import ConnectionRows from './ConnectionRows.vue';
 import ConnectionRules, { conditionsSummary } from './ConnectionRules.vue';
+import { __n } from '@/bootstrap/globals';
 
 defineEmits(['update:modelValue']);
 
@@ -29,6 +30,13 @@ const recipients = (to: string[] | string): string =>
 </script>
 
 <template>
+    <Label v-if="modelValue.length">
+        <span class="inline-flex items-center gap-2">
+            <Badge size="lg" pill color="white">{{ modelValue.length }}</Badge>
+            <span>{{ __n(':count Email Configured|:count Emails Configured', modelValue.length) }}</span>
+        </span>
+    </Label>
+
     <ConnectionRows
         :model-value="modelValue"
         :errors

From 39851837198cdd9bd0b1f81224f26a8ed4c8905d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 3 Sep 2026 15:38:27 +0100
Subject: [PATCH 02/15] Update gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 4026fb22467..b26b4b107b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .idea
 .vscode
+*.code-workspace
 /vendor
 node_modules
 .DS_Store

From 7abb269586d3a09b57a93b9eb0f08eb2c71d3ce4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 3 Sep 2026 16:05:50 +0100
Subject: [PATCH 03/15] Mess around with heading and badges

---
 .../components/forms/connections/ConnectionRows.vue   | 11 ++++-------
 .../components/forms/connections/EmailConnection.vue  |  8 +-------
 resources/js/pages/forms/connect/Edit.vue             |  7 +++++--
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/resources/js/components/forms/connections/ConnectionRows.vue b/resources/js/components/forms/connections/ConnectionRows.vue
index 2b9bb275fe1..94f593f9086 100644
--- a/resources/js/components/forms/connections/ConnectionRows.vue
+++ b/resources/js/components/forms/connections/ConnectionRows.vue
@@ -127,16 +127,13 @@ watch(
 </script>
 
 <template>
-    <LogicEmptyState
-        v-if="modelValue.length === 0"
-        :heading="emptyHeading"
-        :description="emptyDescription"
-    >
+    <Description v-if="emptyDescription" :text="emptyDescription" class="mb-4" />
+
+    <div v-if="modelValue.length === 0">
         <Button size="sm" :text="addLabel" icon="plus" @click="add" />
-    </LogicEmptyState>
+    </div>
 
     <template v-else>
-        <Description v-if="emptyDescription" :text="emptyDescription" class="mb-4" />
 
         <SortableList
             vertical
diff --git a/resources/js/components/forms/connections/EmailConnection.vue b/resources/js/components/forms/connections/EmailConnection.vue
index 38f03079e2c..1c3dd4a867d 100644
--- a/resources/js/components/forms/connections/EmailConnection.vue
+++ b/resources/js/components/forms/connections/EmailConnection.vue
@@ -3,7 +3,6 @@ import { usePage } from '@inertiajs/vue3';
 import { Badge, Icon, Label, PublishContainer, PublishFields, PublishFieldsProvider, Subheading } from '@ui';
 import ConnectionRows from './ConnectionRows.vue';
 import ConnectionRules, { conditionsSummary } from './ConnectionRules.vue';
-import { __n } from '@/bootstrap/globals';
 
 defineEmits(['update:modelValue']);
 
@@ -30,12 +29,7 @@ const recipients = (to: string[] | string): string =>
 </script>
 
 <template>
-    <Label v-if="modelValue.length">
-        <span class="inline-flex items-center gap-2">
-            <Badge size="lg" pill color="white">{{ modelValue.length }}</Badge>
-            <span>{{ __n(':count Email Configured|:count Emails Configured', modelValue.length) }}</span>
-        </span>
-    </Label>
+    <Label :text="__('Emails')" class="mb-2" />
 
     <ConnectionRows
         :model-value="modelValue"
diff --git a/resources/js/pages/forms/connect/Edit.vue b/resources/js/pages/forms/connect/Edit.vue
index 1ff015b97a4..7ede3937070 100644
--- a/resources/js/pages/forms/connect/Edit.vue
+++ b/resources/js/pages/forms/connect/Edit.vue
@@ -6,7 +6,7 @@ import Layout from '@/pages/layout/Layout.vue';
 import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from '../Layout.vue';
 import Head from '@/pages/layout/Head.vue';
-import { Button, Card, Header, Heading, Icon, Panel, PanelHeader } from '@ui';
+import { Badge, Button, Card, Header, Heading, Icon, Panel, PanelHeader } from '@ui';
 import FormStatusIndicator from '@/components/forms/FormStatusIndicator.vue';
 import { Link } from '@inertiajs/vue3';
 
@@ -95,7 +95,7 @@ onUnmounted(() => {
                         {{ __('Connect') }}
                     </Link>
                     <Icon name="chevron-right" class="size-3.5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
-                    <span class="inline-flex items-center gap-1.5">
+                    <span class="relative inline-flex items-center gap-1.5">
                         <span
                             v-if="connection.icon"
                             class="size-4 text-gray-700 dark:text-gray-300 [&_svg]:size-4"
@@ -103,6 +103,9 @@ onUnmounted(() => {
                             v-html="connection.icon"
                         />
                         <span>{{ __(connection.title) }}</span>
+                        <Badge v-if="Array.isArray(value)" pill class="absolute start-full top-1/2 ms-1.5 size-6 -translate-y-1/2">
+                            {{ value.length }}
+                        </Badge>
                     </span>
                 </Heading>
             </PanelHeader>

From 605e5b36c1288d0e840b1f8f151a4719ce142058 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 3 Sep 2026 16:09:22 +0100
Subject: [PATCH 04/15] Move example payload to the bottom

---
 .../forms/connections/WebhookConnection.vue   | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/resources/js/components/forms/connections/WebhookConnection.vue b/resources/js/components/forms/connections/WebhookConnection.vue
index 899f53a29f0..987f2a340e5 100644
--- a/resources/js/components/forms/connections/WebhookConnection.vue
+++ b/resources/js/components/forms/connections/WebhookConnection.vue
@@ -20,25 +20,6 @@ const showExamplePayload = ref<boolean>(props.modelValue.length === 0);
 </script>
 
 <template>
-    <Field
-        class="mb-8"
-        :label="__('Example Payload')"
-        :instructions="__('statamic::messages.webhook_connection_payload_instructions')"
-    >
-        <template #actions>
-            <Button
-                variant="subtle"
-                size="xs"
-                :icon-append="showExamplePayload ? 'chevron-up' : 'chevron-down'"
-                :text="showExamplePayload ? __('Hide') : __('Show')"
-                :aria-expanded="showExamplePayload"
-                @click="showExamplePayload = !showExamplePayload"
-            />
-        </template>
-
-        <pre v-show="showExamplePayload" class="overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 p-4 text-xs text-gray-800 dark:border-white/10 dark:bg-gray-950/40 dark:text-gray-300"><code>{{ examplePayload }}</code></pre>
-    </Field>
-
     <Label v-if="modelValue.length" :text="__('Webhooks')" />
 
     <ConnectionRows
@@ -87,4 +68,23 @@ const showExamplePayload = ref<boolean>(props.modelValue.length === 0);
             </ConnectionRules>
         </template>
     </ConnectionRows>
+
+    <Field
+        class="mt-8"
+        :label="__('Example Payload')"
+        :instructions="__('statamic::messages.webhook_connection_payload_instructions')"
+    >
+        <template #actions>
+            <Button
+                variant="subtle"
+                size="xs"
+                :icon-append="showExamplePayload ? 'chevron-up' : 'chevron-down'"
+                :text="showExamplePayload ? __('Hide') : __('Show')"
+                :aria-expanded="showExamplePayload"
+                @click="showExamplePayload = !showExamplePayload"
+            />
+        </template>
+
+        <pre v-show="showExamplePayload" class="overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 p-4 text-xs text-gray-800 dark:border-white/10 dark:bg-gray-950/40 dark:text-gray-300"><code>{{ examplePayload }}</code></pre>
+    </Field>
 </template>

From 708b5b636b779199cd5bd559e67ea722c8319cd4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 3 Sep 2026 16:24:41 +0100
Subject: [PATCH 05/15] Connect > Webhook - fix icons

---
 resources/js/components/forms/connections/WebhookConnection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/forms/connections/WebhookConnection.vue b/resources/js/components/forms/connections/WebhookConnection.vue
index 987f2a340e5..cf52167b39d 100644
--- a/resources/js/components/forms/connections/WebhookConnection.vue
+++ b/resources/js/components/forms/connections/WebhookConnection.vue
@@ -35,7 +35,7 @@ const showExamplePayload = ref<boolean>(props.modelValue.length === 0);
     >
         <template #header="{ item: webhook, collapsed }">
             <Badge size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
-                <Icon name="globe-arrow" class="size-3.5 me-1 opacity-100! text-teal-600 dark:text-teal-400" aria-hidden="true" />
+                <Icon name="globe-setting" class="size-3.5 me-1 opacity-100! text-purple-600 dark:text-purple-400" aria-hidden="true" />
                 {{ webhook.url || __('New Webhook') }}
             </Badge>
             <Subheading v-show="collapsed" class="overflow-hidden text-ellipsis whitespace-nowrap gap-1.5!">

From 36274ef06faf0ab48718d73c10df0a61d3179fd9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 3 Sep 2026 16:36:58 +0100
Subject: [PATCH 06/15] Fix icon colors being hardcoded and dark mode

---
 resources/js/pages/forms/connect/Edit.vue                | 2 +-
 resources/svg/forms/connect/email-notifications-flat.svg | 2 +-
 resources/svg/forms/connect/webhook-flat.svg             | 2 +-
 resources/svg/icons/globe-setting.svg                    | 2 +-
 src/Forms/Connections/Connection.php                     | 5 +++++
 src/Forms/Connections/Email.php                          | 5 +++++
 src/Forms/Connections/Webhook.php                        | 5 +++++
 src/Http/Controllers/CP/Forms/FormConnectController.php  | 1 +
 8 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/resources/js/pages/forms/connect/Edit.vue b/resources/js/pages/forms/connect/Edit.vue
index 7ede3937070..7648d62040f 100644
--- a/resources/js/pages/forms/connect/Edit.vue
+++ b/resources/js/pages/forms/connect/Edit.vue
@@ -98,7 +98,7 @@ onUnmounted(() => {
                     <span class="relative inline-flex items-center gap-1.5">
                         <span
                             v-if="connection.icon"
-                            class="size-4 text-gray-700 dark:text-gray-300 [&_svg]:size-4"
+                            :class="[connection.iconColor || 'text-gray-700 dark:text-gray-300', 'size-4 [&_svg]:size-4']"
                             aria-hidden="true"
                             v-html="connection.icon"
                         />
diff --git a/resources/svg/forms/connect/email-notifications-flat.svg b/resources/svg/forms/connect/email-notifications-flat.svg
index 84861177f02..4e1a3a3772c 100644
--- a/resources/svg/forms/connect/email-notifications-flat.svg
+++ b/resources/svg/forms/connect/email-notifications-flat.svg
@@ -1 +1 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m1.207 2.823c-.002.017-.005.034-.007.051-.108.811-.2 1.643-.2 2.492 0 .85.092 1.682.2 2.493.058.429.293.826.654 1.131.387.327.894.529 1.436.581.822.075 1.663.14 2.518.157.276.006.495.234.49.51-.006.276-.235.496-.511.49-.879-.018-1.744-.084-2.589-.161h-.002c-.752-.072-1.451-.36-1.987-.812-.56-.474-.909-1.096-1-1.762v-.002c-.114-.853-.209-1.73-.209-2.625 0-.894.095-1.77.209-2.625v-.002c.091-.665.44-1.288 1-1.761.536-.452 1.235-.74 1.987-.812h.002c.993-.091 2.012-.166 3.052-.166s2.06.075 3.052.166h.002c.752.072 1.451.36 1.987.812.56.473.909 1.096 1 1.761v.002c.114.854.209 1.731.209 2.625 0 .193-.004.385-.013.577-.011.275-.245.49-.52.478-.276-.012-.49-.245-.479-.521.008-.177.012-.355.012-.534 0-.849-.092-1.681-.2-2.492-.002-.017-.005-.034-.007-.051-1.066.994-2.176 1.919-3.38 2.748-1.003.692-2.323.692-3.327 0-1.203-.829-2.314-1.754-3.379-2.748zm9.607-.922c-.052-.055-.109-.108-.168-.159-.387-.326-.894-.529-1.436-.581-.962-.087-1.951-.161-2.96-.161s-1.997.074-2.96.161c-.542.052-1.049.255-1.436.581-.059.051-.116.104-.168.159 1.091 1.033 2.228 1.992 3.468 2.847.661.456 1.531.456 2.192 0 1.24-.855 2.377-1.814 3.468-2.847z" fill="#0074ff"/><g fill="none" stroke="#0080ff"><path d="m10.75 13.5c1.76 0 2.75-.99 2.75-2.75s-.99-2.75-2.75-2.75-2.75.99-2.75 2.75.99 2.75 2.75 2.75z"/><path d="m10.774 10.726.694-.694"/></g></svg>
\ No newline at end of file
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m1.207 2.823c-.002.017-.005.034-.007.051-.108.811-.2 1.643-.2 2.492 0 .85.092 1.682.2 2.493.058.429.293.826.654 1.131.387.327.894.529 1.436.581.822.075 1.663.14 2.518.157.276.006.495.234.49.51-.006.276-.235.496-.511.49-.879-.018-1.744-.084-2.589-.161h-.002c-.752-.072-1.451-.36-1.987-.812-.56-.474-.909-1.096-1-1.762v-.002c-.114-.853-.209-1.73-.209-2.625 0-.894.095-1.77.209-2.625v-.002c.091-.665.44-1.288 1-1.761.536-.452 1.235-.74 1.987-.812h.002c.993-.091 2.012-.166 3.052-.166s2.06.075 3.052.166h.002c.752.072 1.451.36 1.987.812.56.473.909 1.096 1 1.761v.002c.114.854.209 1.731.209 2.625 0 .193-.004.385-.013.577-.011.275-.245.49-.52.478-.276-.012-.49-.245-.479-.521.008-.177.012-.355.012-.534 0-.849-.092-1.681-.2-2.492-.002-.017-.005-.034-.007-.051-1.066.994-2.176 1.919-3.38 2.748-1.003.692-2.323.692-3.327 0-1.203-.829-2.314-1.754-3.379-2.748zm9.607-.922c-.052-.055-.109-.108-.168-.159-.387-.326-.894-.529-1.436-.581-.962-.087-1.951-.161-2.96-.161s-1.997.074-2.96.161c-.542.052-1.049.255-1.436.581-.059.051-.116.104-.168.159 1.091 1.033 2.228 1.992 3.468 2.847.661.456 1.531.456 2.192 0 1.24-.855 2.377-1.814 3.468-2.847z" fill="currentColor"/><g fill="none" stroke="currentColor"><path d="m10.75 13.5c1.76 0 2.75-.99 2.75-2.75s-.99-2.75-2.75-2.75-2.75.99-2.75 2.75.99 2.75 2.75 2.75z"/><path d="m10.774 10.726.694-.694"/></g></svg>
\ No newline at end of file
diff --git a/resources/svg/forms/connect/webhook-flat.svg b/resources/svg/forms/connect/webhook-flat.svg
index 74acb8fed30..eddb5b5eacf 100644
--- a/resources/svg/forms/connect/webhook-flat.svg
+++ b/resources/svg/forms/connect/webhook-flat.svg
@@ -1 +1 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m-0 5.75c0-1.836.536-3.263 1.511-4.239.976-.975 2.403-1.511 4.239-1.511 1.774 0 3.167.501 4.138 1.414.976.917 1.54 2.26 1.606 3.99.004.114.006.229.006.346 0 .276-.224.5-.5.5s-.5-.224-.5-.5c0-.104-.002-.207-.006-.308-.054-1.425-.487-2.544-1.291-3.299-.577-.543-1.338-.893-2.264-1.049.714 1.054 1.14 2.468 1.231 4.02.379.011.759.025 1.139.042.276.012.489.246.477.522s-.246.489-.521.477c-.361-.016-.722-.029-1.082-.04-.007.21-.02.418-.039.623-.025.275-.269.478-.544.453-.274-.026-.477-.269-.452-.544.017-.183.029-.369.035-.557-.956-.017-1.91-.017-2.866 0 .06 1.818.603 3.454 1.621 4.408.028-.001.055-.002.083-.002.276-.009.507.207.516.483s-.207.507-.483.516c-.1.003-.201.005-.304.005-1.836 0-3.263-.536-4.239-1.511-.975-.976-1.511-2.403-1.511-4.239zm4.561-4.656c-.968.163-1.757.539-2.342 1.125-.713.712-1.115 1.726-1.201 2.998.771-.046 1.542-.08 2.312-.103.091-1.552.517-2.966 1.231-4.02zm2.606 3.996c-.102-1.575-.577-2.987-1.417-3.899-.84.912-1.315 2.324-1.417 3.899.945-.017 1.889-.017 2.834 0zm-2.606 5.316c-.756-1.115-1.188-2.633-1.243-4.291-.768.023-1.535.058-2.305.104.077 1.302.481 2.338 1.206 3.062.585.586 1.374.962 2.342 1.125z" fill="#871fff"/><g fill="none"><path d="m8.465 10.863c0 .024-.008.047-.023.066l-.319.401c-.057.072-.092.16-.099.252s.014.184.06.264l.187.323c.046.08.115.145.198.185.084.04.177.054.268.04l.507-.077c.024-.003.049.001.07.013l.601.347c.021.012.037.031.046.054l.187.477c.034.086.092.16.169.212.076.052.166.08.258.08h.373c.092 0 .182-.028.258-.08s.135-.126.169-.212l.187-.477c.009-.023.025-.042.046-.054l.601-.347c.021-.012.045-.017.069-.013l.508.077c.091.014.184 0 .267-.04.084-.04.153-.105.199-.185l.187-.323c.046-.08.067-.172.06-.264s-.042-.18-.099-.252l-.32-.401c-.015-.019-.024-.042-.024-.066v-.695c0-.024.009-.047.024-.066l.32-.401c.057-.072.092-.16.099-.252s-.014-.184-.06-.264l-.187-.323c-.046-.08-.115-.144-.199-.185-.083-.04-.176-.054-.267-.04l-.506.077c-.024.004-.049-.001-.07-.013l-.602-.349c-.021-.012-.037-.031-.046-.053l-.188-.476c-.034-.086-.092-.16-.168-.212-.077-.052-.167-.08-.259-.08h-.374c-.092 0-.182.028-.258.08s-.135.126-.168.212l-.188.476c-.008.023-.024.042-.046.055l-.601.347c-.021.012-.045.017-.069.013l-.508-.077c-.091-.014-.184 0-.267.04-.083.041-.153.105-.199.185l-.186.323c-.047.08-.068.172-.061.264s.042.18.099.252l.321.401c.015.019.023.042.023.066z" stroke="#871fff"/><g stroke="#70f" transform="matrix(.847204 0 0 .847204 1.643735 1.606789)"><path d="m10.763 11.015c.32 0 .5-.18.5-.5s-.18-.5-.5-.5"/><path d="m10.759 11.015c-.32 0-.5-.18-.5-.5s.18-.5.5-.5"/></g></g></svg>
\ No newline at end of file
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m-0 5.75c0-1.836.536-3.263 1.511-4.239.976-.975 2.403-1.511 4.239-1.511 1.774 0 3.167.501 4.138 1.414.976.917 1.54 2.26 1.606 3.99.004.114.006.229.006.346 0 .276-.224.5-.5.5s-.5-.224-.5-.5c0-.104-.002-.207-.006-.308-.054-1.425-.487-2.544-1.291-3.299-.577-.543-1.338-.893-2.264-1.049.714 1.054 1.14 2.468 1.231 4.02.379.011.759.025 1.139.042.276.012.489.246.477.522s-.246.489-.521.477c-.361-.016-.722-.029-1.082-.04-.007.21-.02.418-.039.623-.025.275-.269.478-.544.453-.274-.026-.477-.269-.452-.544.017-.183.029-.369.035-.557-.956-.017-1.91-.017-2.866 0 .06 1.818.603 3.454 1.621 4.408.028-.001.055-.002.083-.002.276-.009.507.207.516.483s-.207.507-.483.516c-.1.003-.201.005-.304.005-1.836 0-3.263-.536-4.239-1.511-.975-.976-1.511-2.403-1.511-4.239zm4.561-4.656c-.968.163-1.757.539-2.342 1.125-.713.712-1.115 1.726-1.201 2.998.771-.046 1.542-.08 2.312-.103.091-1.552.517-2.966 1.231-4.02zm2.606 3.996c-.102-1.575-.577-2.987-1.417-3.899-.84.912-1.315 2.324-1.417 3.899.945-.017 1.889-.017 2.834 0zm-2.606 5.316c-.756-1.115-1.188-2.633-1.243-4.291-.768.023-1.535.058-2.305.104.077 1.302.481 2.338 1.206 3.062.585.586 1.374.962 2.342 1.125z" fill="currentColor"/><g fill="none"><path d="m8.465 10.863c0 .024-.008.047-.023.066l-.319.401c-.057.072-.092.16-.099.252s.014.184.06.264l.187.323c.046.08.115.145.198.185.084.04.177.054.268.04l.507-.077c.024-.003.049.001.07.013l.601.347c.021.012.037.031.046.054l.187.477c.034.086.092.16.169.212.076.052.166.08.258.08h.373c.092 0 .182-.028.258-.08s.135-.126.169-.212l.187-.477c.009-.023.025-.042.046-.054l.601-.347c.021-.012.045-.017.069-.013l.508.077c.091.014.184 0 .267-.04.084-.04.153-.105.199-.185l.187-.323c.046-.08.067-.172.06-.264s-.042-.18-.099-.252l-.32-.401c-.015-.019-.024-.042-.024-.066v-.695c0-.024.009-.047.024-.066l.32-.401c.057-.072.092-.16.099-.252s-.014-.184-.06-.264l-.187-.323c-.046-.08-.115-.144-.199-.185-.083-.04-.176-.054-.267-.04l-.506.077c-.024.004-.049-.001-.07-.013l-.602-.349c-.021-.012-.037-.031-.046-.053l-.188-.476c-.034-.086-.092-.16-.168-.212-.077-.052-.167-.08-.259-.08h-.374c-.092 0-.182.028-.258.08s-.135.126-.168.212l-.188.476c-.008.023-.024.042-.046.055l-.601.347c-.021.012-.045.017-.069.013l-.508-.077c-.091-.014-.184 0-.267.04-.083.041-.153.105-.199.185l-.186.323c-.047.08-.068.172-.061.264s.042.18.099.252l.321.401c.015.019.023.042.023.066z" stroke="currentColor"/><g stroke="currentColor" transform="matrix(.847204 0 0 .847204 1.643735 1.606789)"><path d="m10.763 11.015c.32 0 .5-.18.5-.5s-.18-.5-.5-.5"/><path d="m10.759 11.015c-.32 0-.5-.18-.5-.5s.18-.5.5-.5"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/svg/icons/globe-setting.svg b/resources/svg/icons/globe-setting.svg
index 3ef3edfdddf..2b69fb2a7df 100644
--- a/resources/svg/icons/globe-setting.svg
+++ b/resources/svg/icons/globe-setting.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" style="background-color: #ffffff">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
   <g id="globe-website-setting-1--globe-website-setting-gear-browser-internet-vpn-network">
     <path id="Vector" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11 5.75c0 -0.11045 -0.002 -0.21931 -0.0061 -0.32657C10.8742 2.26779 8.99955 0.5 5.75 0.5 2.39 0.5 0.5 2.39 0.5 5.75S2.39 11 5.75 11c0.09703 0 0.19283 -0.0016 0.28739 -0.0047" stroke-width="1"></path>
     <path id="Vector_2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.75002 11c-1.26515 -1.06798 -1.9385 -3.05306 -1.9385 -5.25S4.48487 1.56798 5.75002 0.5c1.26516 1.06798 1.93851 3.05306 1.93851 5.25 0 0.31943 -0.01424 0.63438 -0.04246 0.94269" stroke-width="1"></path>
diff --git a/src/Forms/Connections/Connection.php b/src/Forms/Connections/Connection.php
index 5921f60abd9..7b2501d4068 100644
--- a/src/Forms/Connections/Connection.php
+++ b/src/Forms/Connections/Connection.php
@@ -59,6 +59,11 @@ public function breadcrumbIcon(): ?string
         return $this->icon();
     }
 
+    public function breadcrumbIconColor(): ?string
+    {
+        return null;
+    }
+
     public function developer(): ?string
     {
         return $this->developer;
diff --git a/src/Forms/Connections/Email.php b/src/Forms/Connections/Email.php
index d57a36c56de..88db6bb7ab8 100644
--- a/src/Forms/Connections/Email.php
+++ b/src/Forms/Connections/Email.php
@@ -33,6 +33,11 @@ public function breadcrumbIcon(): ?string
         return Statamic::svg('forms/connect/email-notifications-flat');
     }
 
+    public function breadcrumbIconColor(): ?string
+    {
+        return 'text-blue-600 dark:text-blue-400';
+    }
+
     public function count(Form $form): ?int
     {
         return count($form->connections()->get('email', []));
diff --git a/src/Forms/Connections/Webhook.php b/src/Forms/Connections/Webhook.php
index 7943a345ca0..a791932fe88 100644
--- a/src/Forms/Connections/Webhook.php
+++ b/src/Forms/Connections/Webhook.php
@@ -34,6 +34,11 @@ public function breadcrumbIcon(): ?string
         return Statamic::svg('forms/connect/webhook-flat');
     }
 
+    public function breadcrumbIconColor(): ?string
+    {
+        return 'text-purple-600 dark:text-purple-400';
+    }
+
     public function count(Form $form): ?int
     {
         return count($form->connections()->get('webhook', []));
diff --git a/src/Http/Controllers/CP/Forms/FormConnectController.php b/src/Http/Controllers/CP/Forms/FormConnectController.php
index 61ae7937f44..aa5578eaadd 100644
--- a/src/Http/Controllers/CP/Forms/FormConnectController.php
+++ b/src/Http/Controllers/CP/Forms/FormConnectController.php
@@ -50,6 +50,7 @@ public function edit($form, string $connection)
                 'title' => $connection->title(),
                 'description' => $connection->description(),
                 'icon' => $connection->breadcrumbIcon(),
+                'iconColor' => $connection->breadcrumbIconColor(),
             ],
             'component' => $connection->render($form),
             'value' => $connection->preProcess($form->connections()->get($connection->handle(), []), $form),

From cf4d95a4c960a7030670a40c3044089f45defa32 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 3 Sep 2026 16:42:42 +0100
Subject: [PATCH 07/15] Dark icons for Kit, Mailchimp, and Mailcoach

---
 resources/js/pages/forms/connect/Index.vue              | 9 +++++++--
 src/Forms/Connections/Connection.php                    | 5 +++++
 src/Http/Controllers/CP/Forms/FormConnectController.php | 1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/forms/connect/Index.vue b/resources/js/pages/forms/connect/Index.vue
index 404b76a482a..d2af535f374 100644
--- a/resources/js/pages/forms/connect/Index.vue
+++ b/resources/js/pages/forms/connect/Index.vue
@@ -36,6 +36,7 @@ type Connection = {
     title: string;
     description: string;
     icon: string;
+    darkIcon: string;
     developer: string;
     count: number | null;
     url: string;
@@ -100,7 +101,9 @@ watch(view, (view: View) => preferences.set('forms.connect.view', view));
                             :aria-label="__(connection.title)"
                             class="relative flex mb-2 aspect-square items-center justify-center rounded-lg border border-gray-300 bg-gray-50/30 p-8 text-gray-700 hover:bg-gray-100/50 dark:border-gray-700 dark:bg-gray-950/40 dark:text-gray-300 dark:hover:bg-gray-900"
                         >
-                            <span class="[&_svg]:size-12" aria-hidden="true" v-html="connection.icon" />
+                            <span v-if="!connection.darkIcon" class="[&_svg]:size-12" aria-hidden="true" v-html="connection.icon" />
+                            <span v-if="connection.darkIcon" class="[&_svg]:size-12 dark:hidden" aria-hidden="true" v-html="connection.icon" />
+                            <span v-if="connection.darkIcon" class="[&_svg]:size-12 hidden dark:block" aria-hidden="true" v-html="connection.darkIcon" />
                         </Link>
                         <div class="flex items-center justify-center gap-1.5 text-gray-800 dark:text-gray-200">
                             <Badge v-if="connection.count" size="sm" color="white" pill>
@@ -126,7 +129,9 @@ watch(view, (view: View) => preferences.set('forms.connect.view', view));
                         <ListingTable>
                             <template #cell-title="{ row: connection }">
                                 <Link :href="connection.url" class="flex min-w-0 items-center gap-2">
-                                    <span class="size-7 flex items-center justify-center text-gray-700 dark:text-gray-300 [&_svg]:size-5" aria-hidden="true" v-html="connection.icon" />
+                                    <span v-if="!connection.darkIcon" class="size-7 flex items-center justify-center text-gray-700 dark:text-gray-300 [&_svg]:size-5" aria-hidden="true" v-html="connection.icon" />
+                                    <span v-if="connection.darkIcon" class="size-7 flex items-center justify-center text-gray-700 dark:text-gray-300 [&_svg]:size-5 dark:hidden" aria-hidden="true" v-html="connection.icon" />
+                                    <span v-if="connection.darkIcon" class="size-7 flex items-center justify-center text-gray-700 dark:text-gray-300 [&_svg]:size-5 hidden dark:flex" aria-hidden="true" v-html="connection.darkIcon" />
                                     <Badge v-if="connection.count" size="sm" color="white" pill>
                                         {{ connection.count }}
                                     </Badge>
diff --git a/src/Forms/Connections/Connection.php b/src/Forms/Connections/Connection.php
index 7b2501d4068..7e308a42bdc 100644
--- a/src/Forms/Connections/Connection.php
+++ b/src/Forms/Connections/Connection.php
@@ -54,6 +54,11 @@ public function icon(): ?string
         return Str::startsWith($this->icon, '<svg') ? $this->icon : Statamic::svg('icons/'.$this->icon);
     }
 
+    public function darkIcon(): ?string
+    {
+        return null;
+    }
+
     public function breadcrumbIcon(): ?string
     {
         return $this->icon();
diff --git a/src/Http/Controllers/CP/Forms/FormConnectController.php b/src/Http/Controllers/CP/Forms/FormConnectController.php
index aa5578eaadd..65d43878897 100644
--- a/src/Http/Controllers/CP/Forms/FormConnectController.php
+++ b/src/Http/Controllers/CP/Forms/FormConnectController.php
@@ -29,6 +29,7 @@ public function index($form)
                 'title' => $connection->title(),
                 'description' => $connection->description(),
                 'icon' => $connection->icon(),
+                'darkIcon' => $connection->darkIcon(),
                 'developer' => $connection->developer(),
                 'count' => $connection->count($form),
                 'url' => cp_route('forms.connect.edit', [$form->handle(), $connection->handle()]),

From c035d47afc6d8e6365d2c9a976f83130a31e9afc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 3 Sep 2026 16:52:33 +0100
Subject: [PATCH 08/15] Add expand / collapse control

---
 .../forms/connections/ConnectionRows.vue        | 17 ++++++++++++++++-
 resources/js/pages/forms/connect/Edit.vue       | 16 +++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/forms/connections/ConnectionRows.vue b/resources/js/components/forms/connections/ConnectionRows.vue
index 94f593f9086..2710a06aea9 100644
--- a/resources/js/components/forms/connections/ConnectionRows.vue
+++ b/resources/js/components/forms/connections/ConnectionRows.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import { nanoid as uniqid } from 'nanoid';
 import { Button, ConfirmationModal, Description } from '@ui';
 import { SortableList } from '@/components/sortable/Sortable.js';
@@ -99,6 +99,21 @@ const collapse = (id: string): void => {
 
 const expand = (id: string): void => (collapsed.value = collapsed.value.filter((rowId) => rowId !== id));
 
+const expandAll = (): void => { collapsed.value = []; };
+const collapseAll = (): void => { collapsed.value = props.modelValue.map((row) => row.id); };
+const allCollapsed = computed(() => props.modelValue.length > 0 && collapsed.value.length === props.modelValue.length);
+
+const connectionRowsApi = inject('connectionRowsApi', null);
+
+watch([allCollapsed, () => props.modelValue.length], ([collapsed, count]) => {
+    if (connectionRowsApi) {
+        connectionRowsApi.expandAll = expandAll;
+        connectionRowsApi.collapseAll = collapseAll;
+        connectionRowsApi.allCollapsed = collapsed;
+        connectionRowsApi.count = count;
+    }
+}, { immediate: true });
+
 const errorIndex = (row: Row): number => errorRowIds.value.indexOf(row.id);
 
 const hasError = (row: Row): boolean => {
diff --git a/resources/js/pages/forms/connect/Edit.vue b/resources/js/pages/forms/connect/Edit.vue
index 7648d62040f..0151ee08732 100644
--- a/resources/js/pages/forms/connect/Edit.vue
+++ b/resources/js/pages/forms/connect/Edit.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, provide, reactive, ref, watch } from 'vue';
 import axios from 'axios';
 import { keys } from '@api';
 import Layout from '@/pages/layout/Layout.vue';
@@ -22,6 +22,9 @@ const props = defineProps({
     suggestableFields: Array,
 });
 
+const connectionRowsApi = reactive({ expandAll: null, collapseAll: null, allCollapsed: false, count: 0 });
+provide('connectionRowsApi', connectionRowsApi);
+
 const errors = ref({});
 const saving = ref(false);
 const saveBinding = ref(null);
@@ -86,6 +89,7 @@ onUnmounted(() => {
 
         <Panel>
             <PanelHeader>
+                <div class="flex items-center justify-between gap-3">
                 <Heading>
                     <Link
                         :href="cp_url(`forms/${form.handle}/connect`)"
@@ -108,6 +112,16 @@ onUnmounted(() => {
                         </Badge>
                     </span>
                 </Heading>
+                <div v-if="connectionRowsApi.count > 1" class="flex items-center gap-2">
+                    <Button
+                        size="xs"
+                        variant="ghost"
+                        :icon="connectionRowsApi.allCollapsed ? 'expand' : 'collapse'"
+                        :aria-label="connectionRowsApi.allCollapsed ? __('Expand all') : __('Collapse all')"
+                        @click="connectionRowsApi.allCollapsed ? connectionRowsApi.expandAll() : connectionRowsApi.collapseAll()"
+                    />
+                </div>
+                </div>
             </PanelHeader>
             <Card>
                 <component

From 574b3ba78900a4230be3495a863c3b5e31dbd611 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 3 Sep 2026 16:59:22 +0100
Subject: [PATCH 09/15] Collapse connection rows by default with persistent
 preference

Rows start collapsed on page load. Expand/collapse all button in the
panel header persists the choice via user preferences. New rows respect
the current preference.
---
 .../forms/connections/ConnectionRows.vue      | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/forms/connections/ConnectionRows.vue b/resources/js/components/forms/connections/ConnectionRows.vue
index 2710a06aea9..aa209db2c39 100644
--- a/resources/js/components/forms/connections/ConnectionRows.vue
+++ b/resources/js/components/forms/connections/ConnectionRows.vue
@@ -4,6 +4,7 @@ import { nanoid as uniqid } from 'nanoid';
 import { Button, ConfirmationModal, Description } from '@ui';
 import { SortableList } from '@/components/sortable/Sortable.js';
 import { deepClone } from '@/util/clone.js';
+import { preferences } from '@api';
 import LogicEmptyState from '@/components/forms/logic/LogicEmptyState.vue';
 import ConnectionRow from './ConnectionRow.vue';
 import { __ } from '@/bootstrap/globals';
@@ -44,7 +45,8 @@ const props = withDefaults(defineProps<{
 const sortableItemClass = 'connection-row';
 const sortableHandleClass = 'connection-row-handle';
 
-const collapsed = ref<string[]>([]);
+const userPreference = ref<'collapsed' | 'expanded'>(preferences.get('forms.connect.rows_view', 'collapsed'));
+const collapsed = ref<string[]>(userPreference.value === 'collapsed' ? props.modelValue.map((row) => row.id) : []);
 const confirmingRemoval = ref<string | null>(null);
 const errorRowIds = ref<string[]>([]);
 
@@ -99,8 +101,8 @@ const collapse = (id: string): void => {
 
 const expand = (id: string): void => (collapsed.value = collapsed.value.filter((rowId) => rowId !== id));
 
-const expandAll = (): void => { collapsed.value = []; };
-const collapseAll = (): void => { collapsed.value = props.modelValue.map((row) => row.id); };
+const expandAll = (): void => { collapsed.value = []; userPreference.value = 'expanded'; preferences.set('forms.connect.rows_view', 'expanded'); };
+const collapseAll = (): void => { collapsed.value = props.modelValue.map((row) => row.id); userPreference.value = 'collapsed'; preferences.set('forms.connect.rows_view', 'collapsed'); };
 const allCollapsed = computed(() => props.modelValue.length > 0 && collapsed.value.length === props.modelValue.length);
 
 const connectionRowsApi = inject('connectionRowsApi', null);
@@ -134,6 +136,17 @@ const rowErrors = (row: Row) => {
         }, {});
 };
 
+watch(
+    () => props.modelValue.map((row) => row.id),
+    (newIds, oldIds) => {
+        const added = newIds.filter((id) => !oldIds?.includes(id));
+
+        if (userPreference.value !== 'expanded' && added.length) {
+            collapsed.value = [...collapsed.value, ...added];
+        }
+    },
+);
+
 watch(
     () => props.errors,
     () => (errorRowIds.value = props.modelValue.map((row) => row.id)),

From 5c2e0e7b4767226d2c28ded8118ec67a9f95f4a3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 4 Sep 2026 10:13:31 +0100
Subject: [PATCH 10/15] Add inline variation for prepend

---
 resources/js/components/ui/Input/Input.vue | 24 ++++++++++++++++------
 resources/js/stories/Input.stories.ts      | 24 ++++++++++++++++++++++
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/ui/Input/Input.vue b/resources/js/components/ui/Input/Input.vue
index 19c2a3e60bd..d79c7a7cc03 100644
--- a/resources/js/components/ui/Input/Input.vue
+++ b/resources/js/components/ui/Input/Input.vue
@@ -40,6 +40,8 @@ const props = defineProps({
     placeholder: { type: String, default: null },
     /** Prepended text */
     prepend: { type: String, default: null },
+    /** Controls how prepended text is displayed. Options: `default` (input group addon), `inline` (inside the field) */
+    prependVariant: { type: String, default: 'default' },
     required: { type: Boolean, default: false },
     /** Controls the size of the input. Options: `xs`, `sm`, `base`, `lg` */
     size: { type: String, default: 'base' },
@@ -92,7 +94,8 @@ const inputAttrs = computed(() => {
     return { ...result, ...normalizedInputAttrs.value };
 });
 
-const hasPrependedIcon = computed(() => !!props.iconPrepend || !!props.icon || !!slots.prepend);
+const hasInlinePrepend = computed(() => !!props.prepend && props.prependVariant === 'inline');
+const hasPrependedIcon = computed(() => !!props.iconPrepend || !!props.icon || !!slots.prepend || hasInlinePrepend.value);
 const hasAppendedIcon = computed(() => !!props.iconAppend || !!slots.append || clearable.value || props.viewable || canCopy.value || props.loading);
 const wrapperClasses = computed(() => ([
     'group/input relative block w-full',
@@ -123,9 +126,12 @@ const inputClasses = computed(() => {
             },
         },
         compoundVariants: [
-            { hasPrependedIcon: true, size: 'base', class: 'ps-9' },
-            { hasPrependedIcon: true, size: 'sm', class: 'ps-8' },
-            { hasPrependedIcon: true, size: 'xs', class: 'ps-6' },
+            { hasPrependedIcon: true, hasInlinePrepend: false, size: 'base', class: 'ps-9' },
+            { hasPrependedIcon: true, hasInlinePrepend: false, size: 'sm', class: 'ps-8' },
+            { hasPrependedIcon: true, hasInlinePrepend: false, size: 'xs', class: 'ps-6' },
+            { hasInlinePrepend: true, size: 'base', class: 'ps-7' },
+            { hasInlinePrepend: true, size: 'sm', class: 'ps-6' },
+            { hasInlinePrepend: true, size: 'xs', class: 'ps-5' },
             { hasAppendedIcon: true, size: 'base', class: 'pe-10' },
             { hasAppendedIcon: true, size: 'sm', class: 'pe-8' },
             { hasAppendedIcon: true, size: 'xs', class: 'pe-6' },
@@ -133,6 +139,7 @@ const inputClasses = computed(() => {
     })({
         ...props,
         hasPrependedIcon: hasPrependedIcon.value,
+        hasInlinePrepend: hasInlinePrepend.value,
         hasAppendedIcon: hasAppendedIcon.value,
         hasLimit: !!props.limit,
     });
@@ -215,10 +222,15 @@ defineExpose({ focus, select });
 
 <template>
     <ui-input-group v-bind="outerAttrs">
-        <ui-input-group-prepend v-if="prepend" v-text="prepend" />
+        <ui-input-group-prepend v-if="prepend && prependVariant === 'default'" v-text="prepend" />
         <div :class="wrapperClasses" data-ui-input>
             <div v-if="hasPrependedIcon" :class="prependedIconClasses">
-                <slot name="prepend">
+                <span
+                    v-if="hasInlinePrepend"
+                    class="select-none font-mono text-gray-400 dark:text-gray-500"
+                    aria-hidden="true"
+                >{{ prepend }}</span>
+                <slot v-else name="prepend">
                     <Icon :name="iconPrepend || icon" />
                 </slot>
             </div>
diff --git a/resources/js/stories/Input.stories.ts b/resources/js/stories/Input.stories.ts
index 4d96527a97f..d6f30d4c765 100644
--- a/resources/js/stories/Input.stories.ts
+++ b/resources/js/stories/Input.stories.ts
@@ -229,6 +229,30 @@ export const _TextPrependAppend: Story = {
     }),
 };
 
+const inlinePrependCode = `
+<Input
+    prepend="$"
+    prepend-variant="inline"
+    read-only
+    copyable
+    model-value="base64 -i service-account.json"
+    class="font-mono text-xs"
+/>
+`;
+
+export const _InlinePrepend: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: inlinePrependCode }
+        }
+    },
+    render: () => ({
+        components: { Input },
+        template: inlinePrependCode,
+    }),
+};
+
 const characterLimitCode = `
 <Input
     name="toot"

From 4353bdc4b8ecac19ca145045ff805bb29d5badbe Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 4 Sep 2026 10:33:56 +0100
Subject: [PATCH 11/15] Make a subtle variation

---
 .../js/components/ui/Input/GroupPrepend.vue   |  2 +-
 resources/js/components/ui/Input/Input.vue    | 24 +++++++++----------
 resources/js/stories/Input.stories.ts         | 10 ++++----
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/ui/Input/GroupPrepend.vue b/resources/js/components/ui/Input/GroupPrepend.vue
index 5967bae7c5d..dfbbd2de8f6 100644
--- a/resources/js/components/ui/Input/GroupPrepend.vue
+++ b/resources/js/components/ui/Input/GroupPrepend.vue
@@ -15,7 +15,7 @@ const props = defineProps({
         ]"
         data-ui-input-group-prepend
     >
-        <span v-if="text" class="text-gray-500 dark:text-gray-400">{{ text }}</span>
+        <span v-if="text" class="text-gray-600 dark:text-gray-300">{{ text }}</span>
         <slot v-else />
     </div>
 </template>
diff --git a/resources/js/components/ui/Input/Input.vue b/resources/js/components/ui/Input/Input.vue
index d79c7a7cc03..0f66aa4a91b 100644
--- a/resources/js/components/ui/Input/Input.vue
+++ b/resources/js/components/ui/Input/Input.vue
@@ -40,7 +40,7 @@ const props = defineProps({
     placeholder: { type: String, default: null },
     /** Prepended text */
     prepend: { type: String, default: null },
-    /** Controls how prepended text is displayed. Options: `default` (input group addon), `inline` (inside the field) */
+    /** Controls how prepended text is displayed. Options: `default` (input group addon), `inline-subtle` (muted text inside the field) */
     prependVariant: { type: String, default: 'default' },
     required: { type: Boolean, default: false },
     /** Controls the size of the input. Options: `xs`, `sm`, `base`, `lg` */
@@ -94,8 +94,8 @@ const inputAttrs = computed(() => {
     return { ...result, ...normalizedInputAttrs.value };
 });
 
-const hasInlinePrepend = computed(() => !!props.prepend && props.prependVariant === 'inline');
-const hasPrependedIcon = computed(() => !!props.iconPrepend || !!props.icon || !!slots.prepend || hasInlinePrepend.value);
+const hasInlineSubtlePrepend = computed(() => !!props.prepend && props.prependVariant === 'inline-subtle');
+const hasPrependedIcon = computed(() => !!props.iconPrepend || !!props.icon || !!slots.prepend || hasInlineSubtlePrepend.value);
 const hasAppendedIcon = computed(() => !!props.iconAppend || !!slots.append || clearable.value || props.viewable || canCopy.value || props.loading);
 const wrapperClasses = computed(() => ([
     'group/input relative block w-full',
@@ -126,12 +126,12 @@ const inputClasses = computed(() => {
             },
         },
         compoundVariants: [
-            { hasPrependedIcon: true, hasInlinePrepend: false, size: 'base', class: 'ps-9' },
-            { hasPrependedIcon: true, hasInlinePrepend: false, size: 'sm', class: 'ps-8' },
-            { hasPrependedIcon: true, hasInlinePrepend: false, size: 'xs', class: 'ps-6' },
-            { hasInlinePrepend: true, size: 'base', class: 'ps-7' },
-            { hasInlinePrepend: true, size: 'sm', class: 'ps-6' },
-            { hasInlinePrepend: true, size: 'xs', class: 'ps-5' },
+            { hasPrependedIcon: true, hasInlineSubtlePrepend: false, size: 'base', class: 'ps-9' },
+            { hasPrependedIcon: true, hasInlineSubtlePrepend: false, size: 'sm', class: 'ps-8' },
+            { hasPrependedIcon: true, hasInlineSubtlePrepend: false, size: 'xs', class: 'ps-6' },
+            { hasInlineSubtlePrepend: true, size: 'base', class: 'ps-7' },
+            { hasInlineSubtlePrepend: true, size: 'sm', class: 'ps-6' },
+            { hasInlineSubtlePrepend: true, size: 'xs', class: 'ps-5' },
             { hasAppendedIcon: true, size: 'base', class: 'pe-10' },
             { hasAppendedIcon: true, size: 'sm', class: 'pe-8' },
             { hasAppendedIcon: true, size: 'xs', class: 'pe-6' },
@@ -139,7 +139,7 @@ const inputClasses = computed(() => {
     })({
         ...props,
         hasPrependedIcon: hasPrependedIcon.value,
-        hasInlinePrepend: hasInlinePrepend.value,
+        hasInlineSubtlePrepend: hasInlineSubtlePrepend.value,
         hasAppendedIcon: hasAppendedIcon.value,
         hasLimit: !!props.limit,
     });
@@ -226,8 +226,8 @@ defineExpose({ focus, select });
         <div :class="wrapperClasses" data-ui-input>
             <div v-if="hasPrependedIcon" :class="prependedIconClasses">
                 <span
-                    v-if="hasInlinePrepend"
-                    class="select-none font-mono text-gray-400 dark:text-gray-500"
+                    v-if="hasInlineSubtlePrepend"
+                    class="font-mono text-sm text-gray-400 select-none dark:text-gray-500"
                     aria-hidden="true"
                 >{{ prepend }}</span>
                 <slot v-else name="prepend">
diff --git a/resources/js/stories/Input.stories.ts b/resources/js/stories/Input.stories.ts
index d6f30d4c765..8cc80c39a55 100644
--- a/resources/js/stories/Input.stories.ts
+++ b/resources/js/stories/Input.stories.ts
@@ -229,10 +229,10 @@ export const _TextPrependAppend: Story = {
     }),
 };
 
-const inlinePrependCode = `
+const inlineSubtlePrependCode = `
 <Input
     prepend="$"
-    prepend-variant="inline"
+    prepend-variant="inline-subtle"
     read-only
     copyable
     model-value="base64 -i service-account.json"
@@ -240,16 +240,16 @@ const inlinePrependCode = `
 />
 `;
 
-export const _InlinePrepend: Story = {
+export const _InlineSubtlePrepend: Story = {
     tags: ['!dev'],
     parameters: {
         docs: {
-            source: { code: inlinePrependCode }
+            source: { code: inlineSubtlePrependCode }
         }
     },
     render: () => ({
         components: { Input },
-        template: inlinePrependCode,
+        template: inlineSubtlePrependCode,
     }),
 };
 

From 2aadd69cea566eba912a84daacfe7ee36d8fa2f8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 4 Sep 2026 11:29:26 +0100
Subject: [PATCH 12/15] Fix gradient path

---
 resources/svg/forms/connect/webhook.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/svg/forms/connect/webhook.svg b/resources/svg/forms/connect/webhook.svg
index e82c49c0fd1..b1d0b354170 100644
--- a/resources/svg/forms/connect/webhook.svg
+++ b/resources/svg/forms/connect/webhook.svg
@@ -1 +1 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(11.500008 0 0 11.499958 -.000008 5.749979)" gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#ad66ff"/><stop offset="1" stop-color="#7500fb"/></linearGradient><path d="m-0 5.75c0-1.836.536-3.263 1.511-4.239.976-.975 2.403-1.511 4.239-1.511 1.774 0 3.167.501 4.138 1.414.976.917 1.54 2.26 1.606 3.99.004.114.006.229.006.346 0 .276-.224.5-.5.5s-.5-.224-.5-.5c0-.104-.002-.207-.006-.308-.054-1.425-.487-2.544-1.291-3.299-.577-.543-1.338-.893-2.264-1.049.714 1.054 1.14 2.468 1.231 4.02.379.011.759.025 1.139.042.276.012.489.246.477.522s-.246.489-.521.477c-.361-.016-.722-.029-1.082-.04-.007.21-.02.418-.039.623-.025.275-.269.478-.544.453-.274-.026-.477-.269-.452-.544.017-.183.029-.369.035-.557-.956-.017-1.91-.017-2.866 0 .06 1.818.603 3.454 1.621 4.408.028-.001.055-.002.083-.002.276-.009.507.207.516.483s-.207.507-.483.516c-.1.003-.201.005-.304.005-1.836 0-3.263-.536-4.239-1.511-.975-.976-1.511-2.403-1.511-4.239zm4.561-4.656c-.968.163-1.757.539-2.342 1.125-.713.712-1.115 1.726-1.201 2.998.771-.046 1.542-.08 2.312-.103.091-1.552.517-2.966 1.231-4.02zm2.606 3.996c-.102-1.575-.577-2.987-1.417-3.899-.84.912-1.315 2.324-1.417 3.899.945-.017 1.889-.017 2.834 0zm-2.606 5.316c-.756-1.115-1.188-2.633-1.243-4.291-.768.023-1.535.058-2.305.104.077 1.302.481 2.338 1.206 3.062.585.586 1.374.962 2.342 1.125z" fill="url(#a)"/><g fill="none"><path d="m8.465 10.863c0 .024-.008.047-.023.066l-.319.401c-.057.072-.092.16-.099.252s.014.184.06.264l.187.323c.046.08.115.145.198.185.084.04.177.054.268.04l.507-.077c.024-.003.049.001.07.013l.601.347c.021.012.037.031.046.054l.187.477c.034.086.092.16.169.212.076.052.166.08.258.08h.373c.092 0 .182-.028.258-.08s.135-.126.169-.212l.187-.477c.009-.023.025-.042.046-.054l.601-.347c.021-.012.045-.017.069-.013l.508.077c.091.014.184 0 .267-.04.084-.04.153-.105.199-.185l.187-.323c.046-.08.067-.172.06-.264s-.042-.18-.099-.252l-.32-.401c-.015-.019-.024-.042-.024-.066v-.695c0-.024.009-.047.024-.066l.32-.401c.057-.072.092-.16.099-.252s-.014-.184-.06-.264l-.187-.323c-.046-.08-.115-.144-.199-.185-.083-.04-.176-.054-.267-.04l-.506.077c-.024.004-.049-.001-.07-.013l-.602-.349c-.021-.012-.037-.031-.046-.053l-.188-.476c-.034-.086-.092-.16-.168-.212-.077-.052-.167-.08-.259-.08h-.374c-.092 0-.182.028-.258.08s-.135.126-.168.212l-.188.476c-.008.023-.024.042-.046.055l-.601.347c-.021.012-.045.017-.069.013l-.508-.077c-.091-.014-.184 0-.267.04-.083.041-.153.105-.199.185l-.186.323c-.047.08-.068.172-.061.264s.042.18.099.252l.321.401c.015.019.023.042.023.066z" stroke="#871fff"/><g stroke="#70f" transform="matrix(.847204 0 0 .847204 1.643735 1.606789)"><path d="m10.763 11.015c.32 0 .5-.18.5-.5s-.18-.5-.5-.5"/><path d="m10.759 11.015c-.32 0-.5-.18-.5-.5s.18-.5.5-.5"/></g></g></svg>
\ No newline at end of file
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="webhook-gradient" gradientTransform="matrix(11.500008 0 0 11.499958 -.000008 5.749979)" gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#ad66ff"/><stop offset="1" stop-color="#7500fb"/></linearGradient><path d="m-0 5.75c0-1.836.536-3.263 1.511-4.239.976-.975 2.403-1.511 4.239-1.511 1.774 0 3.167.501 4.138 1.414.976.917 1.54 2.26 1.606 3.99.004.114.006.229.006.346 0 .276-.224.5-.5.5s-.5-.224-.5-.5c0-.104-.002-.207-.006-.308-.054-1.425-.487-2.544-1.291-3.299-.577-.543-1.338-.893-2.264-1.049.714 1.054 1.14 2.468 1.231 4.02.379.011.759.025 1.139.042.276.012.489.246.477.522s-.246.489-.521.477c-.361-.016-.722-.029-1.082-.04-.007.21-.02.418-.039.623-.025.275-.269.478-.544.453-.274-.026-.477-.269-.452-.544.017-.183.029-.369.035-.557-.956-.017-1.91-.017-2.866 0 .06 1.818.603 3.454 1.621 4.408.028-.001.055-.002.083-.002.276-.009.507.207.516.483s-.207.507-.483.516c-.1.003-.201.005-.304.005-1.836 0-3.263-.536-4.239-1.511-.975-.976-1.511-2.403-1.511-4.239zm4.561-4.656c-.968.163-1.757.539-2.342 1.125-.713.712-1.115 1.726-1.201 2.998.771-.046 1.542-.08 2.312-.103.091-1.552.517-2.966 1.231-4.02zm2.606 3.996c-.102-1.575-.577-2.987-1.417-3.899-.84.912-1.315 2.324-1.417 3.899.945-.017 1.889-.017 2.834 0zm-2.606 5.316c-.756-1.115-1.188-2.633-1.243-4.291-.768.023-1.535.058-2.305.104.077 1.302.481 2.338 1.206 3.062.585.586 1.374.962 2.342 1.125z" fill="url(#webhook-gradient)"/><g fill="none"><path d="m8.465 10.863c0 .024-.008.047-.023.066l-.319.401c-.057.072-.092.16-.099.252s.014.184.06.264l.187.323c.046.08.115.145.198.185.084.04.177.054.268.04l.507-.077c.024-.003.049.001.07.013l.601.347c.021.012.037.031.046.054l.187.477c.034.086.092.16.169.212.076.052.166.08.258.08h.373c.092 0 .182-.028.258-.08s.135-.126.169-.212l.187-.477c.009-.023.025-.042.046-.054l.601-.347c.021-.012.045-.017.069-.013l.508.077c.091.014.184 0 .267-.04.084-.04.153-.105.199-.185l.187-.323c.046-.08.067-.172.06-.264s-.042-.18-.099-.252l-.32-.401c-.015-.019-.024-.042-.024-.066v-.695c0-.024.009-.047.024-.066l.32-.401c.057-.072.092-.16.099-.252s-.014-.184-.06-.264l-.187-.323c-.046-.08-.115-.144-.199-.185-.083-.04-.176-.054-.267-.04l-.506.077c-.024.004-.049-.001-.07-.013l-.602-.349c-.021-.012-.037-.031-.046-.053l-.188-.476c-.034-.086-.092-.16-.168-.212-.077-.052-.167-.08-.259-.08h-.374c-.092 0-.182.028-.258.08s-.135.126-.168.212l-.188.476c-.008.023-.024.042-.046.055l-.601.347c-.021.012-.045.017-.069.013l-.508-.077c-.091-.014-.184 0-.267.04-.083.041-.153.105-.199.185l-.186.323c-.047.08-.068.172-.061.264s.042.18.099.252l.321.401c.015.019.023.042.023.066z" stroke="#871fff"/><g stroke="#70f" transform="matrix(.847204 0 0 .847204 1.643735 1.606789)"><path d="m10.763 11.015c.32 0 .5-.18.5-.5s-.18-.5-.5-.5"/><path d="m10.759 11.015c-.32 0-.5-.18-.5-.5s.18-.5.5-.5"/></g></g></svg>
\ No newline at end of file

From 639e418d4246783e6341f5dd2c9c5fb2087782eb Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 4 Sep 2026 11:53:38 +0100
Subject: [PATCH 13/15] Add the same decoration for collapsed logic summaries
 as the Logic tab

---
 packages/cms/src/index.js                     |   1 +
 resources/js/bootstrap/cms/core.js            |   1 +
 .../ConditionsCollapsedSummary.vue            | 135 ++++++++++++++++++
 .../forms/connections/EmailConnection.vue     |  13 +-
 .../forms/connections/WebhookConnection.vue   |  12 +-
 resources/js/tests/Package.test.js            |   1 +
 6 files changed, 153 insertions(+), 10 deletions(-)
 create mode 100644 resources/js/components/forms/connections/ConditionsCollapsedSummary.vue

diff --git a/packages/cms/src/index.js b/packages/cms/src/index.js
index ec6357d4ac5..1f503006a74 100644
--- a/packages/cms/src/index.js
+++ b/packages/cms/src/index.js
@@ -18,6 +18,7 @@ export const {
     SortableList,
     ConnectionRows,
     ConnectionRules,
+    ConditionsCollapsedSummary,
     conditionsSummary,
     requireElevatedSession,
     requireElevatedSessionIf,
diff --git a/resources/js/bootstrap/cms/core.js b/resources/js/bootstrap/cms/core.js
index fa838f33f0a..494ba737225 100644
--- a/resources/js/bootstrap/cms/core.js
+++ b/resources/js/bootstrap/cms/core.js
@@ -21,3 +21,4 @@ export { default as clone, deepClone } from '../../util/clone.js';
 export { default as debounce } from '../../util/debounce.js';
 export { default as ConnectionRows } from '../../components/forms/connections/ConnectionRows.vue';
 export { default as ConnectionRules, conditionsSummary } from '../../components/forms/connections/ConnectionRules.vue';
+export { default as ConditionsCollapsedSummary } from '../../components/forms/connections/ConditionsCollapsedSummary.vue';
diff --git a/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue b/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue
new file mode 100644
index 00000000000..d811631d1ec
--- /dev/null
+++ b/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue
@@ -0,0 +1,135 @@
+<script setup>
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import { Badge, Icon, Subheading } from '@ui';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
+import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
+
+const props = defineProps({
+    conditions: { type: Array, default: () => [] },
+    fallback: { type: String, default: null },
+});
+
+const suggestableFields = usePage().props.suggestableFields ?? [];
+
+const operatorLabels = {
+    '': __('equals'),
+    equals: __('equals'),
+    not: __('does not equal'),
+    contains: __('contains'),
+    contains_any: __('contains any of'),
+    '==': __('equals'),
+    '!=': __('does not equal'),
+    '>': __('is greater than'),
+    '<': __('is less than'),
+    '>=': __('is at least'),
+    '<=': __('is at most'),
+};
+
+const getOperatorLabel = (operator) => operatorLabels[operator] || operator || __('equals');
+const getFieldConfig = (handle) => suggestableFields.find((field) => field.handle === handle);
+const getFieldDisplay = (handle) => __(getFieldConfig(handle)?.config?.display) || handle;
+const getIconClass = (category) => {
+    const color = categories[category]?.color || 'gray';
+    return categoryColorClasses[color]?.icon || 'text-gray-600 dark:text-gray-400';
+};
+
+const filteredConditions = computed(() => (props.conditions ?? []).filter((condition) => condition.field));
+
+const firstFieldConfig = computed(() => {
+    const firstCondition = filteredConditions.value[0];
+    if (!firstCondition?.field) return null;
+
+    const field = getFieldConfig(firstCondition.field);
+
+    return {
+        handle: firstCondition.field,
+        display: __(field?.config?.display) || firstCondition.field,
+        icon: field?.icon || 'generic-field',
+        iconClass: getIconClass(field?.category),
+    };
+});
+
+const previewParts = computed(() => {
+    if (filteredConditions.value.length === 0) return null;
+
+    const parts = [];
+
+    filteredConditions.value.forEach((condition, index) => {
+        if (index === 0) {
+            parts.push({ type: 'operator', text: getOperatorLabel(condition.operator) });
+
+            if (condition.value !== null && condition.value !== undefined && condition.value !== '') {
+                const displayValue = Array.isArray(condition.value)
+                    ? condition.value.join(', ')
+                    : String(condition.value);
+                parts.push({ type: 'value', text: displayValue });
+            }
+
+            return;
+        }
+
+        parts.push({ type: 'join', text: condition.join === 'or' ? __('or') : __('and') });
+        parts.push({ type: 'field-plain', text: getFieldDisplay(condition.field) });
+        parts.push({ type: 'operator', text: getOperatorLabel(condition.operator) });
+
+        if (condition.value !== null && condition.value !== undefined && condition.value !== '') {
+            const displayValue = Array.isArray(condition.value)
+                ? condition.value.join(', ')
+                : String(condition.value);
+            parts.push({ type: 'value', text: displayValue });
+        }
+    });
+
+    return parts.length ? parts : null;
+});
+
+const collapsedSummary = computed(() => {
+    if (filteredConditions.value.length === 0) {
+        return props.fallback || __('Always');
+    }
+
+    if (!previewParts.value) return __('Configure conditions');
+
+    return null;
+});
+</script>
+
+<template>
+    <Badge v-if="filteredConditions.length" pill size="sm" color="white" class="ms-1 font-medium text-gray-800 dark:text-gray-200">
+        {{ __('If') }}
+    </Badge>
+    <Badge v-if="firstFieldConfig" size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
+        <FieldNumber :field-key="firstFieldConfig.handle" class="me-0.5" />
+        <Icon
+            :name="firstFieldConfig.icon"
+            class="size-3.5 me-1 rounded-sm opacity-100!"
+            :class="firstFieldConfig.iconClass"
+            aria-hidden="true"
+        />
+        {{ firstFieldConfig.display }}
+    </Badge>
+    <Subheading class="overflow-hidden text-ellipsis whitespace-nowrap text-xs flex items-center gap-1">
+        <template v-if="collapsedSummary">
+            <span class="lowercase">{{ collapsedSummary }}</span>
+        </template>
+        <template v-else-if="previewParts">
+            <template v-for="(part, index) in previewParts" :key="index">
+                <Badge
+                    v-if="part.type === 'operator'"
+                    class="inline-block px-1 py-1.5 font-medium st-text-trim-ex-alphabetic lowercase bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
+                >
+                    {{ part.text }}
+                </Badge>
+                <span v-else-if="part.type === 'value'" class="font-mono text-gray-900 dark:text-gray-100">{{ part.text }}</span>
+                <Badge
+                    v-else-if="part.type === 'join'"
+                    class="inline-block px-1 py-1.5 font-medium st-text-trim-ex-alphabetic lowercase bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
+                >
+                    {{ part.text }}
+                </Badge>
+                <span v-else-if="part.type === 'field-plain'" class="text-gray-700 dark:text-gray-300">{{ part.text }}</span>
+            </template>
+        </template>
+    </Subheading>
+</template>
diff --git a/resources/js/components/forms/connections/EmailConnection.vue b/resources/js/components/forms/connections/EmailConnection.vue
index 1c3dd4a867d..d13e616e5b1 100644
--- a/resources/js/components/forms/connections/EmailConnection.vue
+++ b/resources/js/components/forms/connections/EmailConnection.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
-import { Badge, Icon, Label, PublishContainer, PublishFields, PublishFieldsProvider, Subheading } from '@ui';
+import { Badge, Icon, Label, PublishContainer, PublishFields, PublishFieldsProvider } from '@ui';
 import ConnectionRows from './ConnectionRows.vue';
-import ConnectionRules, { conditionsSummary } from './ConnectionRules.vue';
+import ConnectionRules from './ConnectionRules.vue';
+import ConditionsCollapsedSummary from './ConditionsCollapsedSummary.vue';
 
 defineEmits(['update:modelValue']);
 
@@ -47,9 +48,11 @@ const recipients = (to: string[] | string): string =>
                 <Icon name="mail-sign-at" class="size-3.5 me-1 opacity-100! text-blue-600 dark:text-blue-400" aria-hidden="true" />
                 {{ email.to?.length ? __('Message sent to :email', { email: recipients(email.to) }) : __('New Email') }}
             </Badge>
-            <Subheading v-show="collapsed" class="overflow-hidden text-ellipsis whitespace-nowrap gap-1.5!">
-                <span class="truncate">{{ conditionsSummary(email.conditions) ?? email.subject }}</span>
-            </Subheading>
+            <ConditionsCollapsedSummary
+                v-show="collapsed"
+                :conditions="email.conditions"
+                :fallback="email.subject"
+            />
         </template>
 
         <template #default="{ item: email, errors }">
diff --git a/resources/js/components/forms/connections/WebhookConnection.vue b/resources/js/components/forms/connections/WebhookConnection.vue
index cf52167b39d..86c14c8ec85 100644
--- a/resources/js/components/forms/connections/WebhookConnection.vue
+++ b/resources/js/components/forms/connections/WebhookConnection.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Badge, Button, Field, Icon, Label, PublishContainer, PublishFields, PublishFieldsProvider, Subheading } from '@ui';
+import { Badge, Button, Field, Icon, Label, PublishContainer, PublishFields, PublishFieldsProvider } from '@ui';
 import ConnectionRows from './ConnectionRows.vue';
-import ConnectionRules, { conditionsSummary } from './ConnectionRules.vue';
+import ConnectionRules from './ConnectionRules.vue';
+import ConditionsCollapsedSummary from './ConditionsCollapsedSummary.vue';
 
 defineEmits(['update:modelValue']);
 
@@ -38,9 +39,10 @@ const showExamplePayload = ref<boolean>(props.modelValue.length === 0);
                 <Icon name="globe-setting" class="size-3.5 me-1 opacity-100! text-purple-600 dark:text-purple-400" aria-hidden="true" />
                 {{ webhook.url || __('New Webhook') }}
             </Badge>
-            <Subheading v-show="collapsed" class="overflow-hidden text-ellipsis whitespace-nowrap gap-1.5!">
-                <span class="truncate">{{ conditionsSummary(webhook.conditions) }}</span>
-            </Subheading>
+            <ConditionsCollapsedSummary
+                v-show="collapsed"
+                :conditions="webhook.conditions"
+            />
         </template>
 
         <template #default="{ item: webhook, errors }">
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index 8424de06fd3..3cc7f5ee12b 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -19,6 +19,7 @@ it('exports core', async () => {
     const expected = [
         'ConnectionRows',
         'ConnectionRules',
+        'ConditionsCollapsedSummary',
         'DateFormatter',
         'Fieldtype',
         'FieldtypeMixin',

From 37be9ec91b4f5f9c1045127a411e472201da2865 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 4 Sep 2026 12:01:59 +0100
Subject: [PATCH 14/15] Connect - Trim field badge for collapsed logic

---
 .../forms/connections/ConditionsCollapsedSummary.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue b/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue
index d811631d1ec..d11f4263915 100644
--- a/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue
+++ b/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue
@@ -99,7 +99,7 @@ const collapsedSummary = computed(() => {
     <Badge v-if="filteredConditions.length" pill size="sm" color="white" class="ms-1 font-medium text-gray-800 dark:text-gray-200">
         {{ __('If') }}
     </Badge>
-    <Badge v-if="firstFieldConfig" size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
+    <Badge v-if="firstFieldConfig" pill color="white" class="ps-1.5 py-1 text-gray-950 gap-1">
         <FieldNumber :field-key="firstFieldConfig.handle" class="me-0.5" />
         <Icon
             :name="firstFieldConfig.icon"
@@ -107,7 +107,7 @@ const collapsedSummary = computed(() => {
             :class="firstFieldConfig.iconClass"
             aria-hidden="true"
         />
-        {{ firstFieldConfig.display }}
+        <span class="st-text-trim-cap">{{ firstFieldConfig.display }}</span>
     </Badge>
     <Subheading class="overflow-hidden text-ellipsis whitespace-nowrap text-xs flex items-center gap-1">
         <template v-if="collapsedSummary">

From 4e5bab6818586ca664780ca09d314b615c43e8e4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 4 Sep 2026 12:02:34 +0100
Subject: [PATCH 15/15] Revert ms-1

---
 .../components/forms/connections/ConditionsCollapsedSummary.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue b/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue
index d11f4263915..3dcdde55267 100644
--- a/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue
+++ b/resources/js/components/forms/connections/ConditionsCollapsedSummary.vue
@@ -96,7 +96,7 @@ const collapsedSummary = computed(() => {
 </script>
 
 <template>
-    <Badge v-if="filteredConditions.length" pill size="sm" color="white" class="ms-1 font-medium text-gray-800 dark:text-gray-200">
+    <Badge v-if="filteredConditions.length" pill size="sm" color="white" class="font-medium text-gray-800 dark:text-gray-200">
         {{ __('If') }}
     </Badge>
     <Badge v-if="firstFieldConfig" pill color="white" class="ps-1.5 py-1 text-gray-950 gap-1">