From defd33e237ce6f9aad50a61785480bfdd3b2245e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 25 Jun 2026 17:17:18 +0100
Subject: [PATCH 001/110] Add a toggle to between Entries and Summary

---
 .../js/components/forms/SubmissionListing.vue | 13 +++++++++
 .../js/components/ui/Listing/Listing.vue      | 18 +++++++++---
 resources/js/pages/forms/Submissions.vue      | 29 +++++++++++++++++--
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index db3004806d..109643d533 100644
--- a/resources/js/components/forms/SubmissionListing.vue
+++ b/resources/js/components/forms/SubmissionListing.vue
@@ -9,8 +9,17 @@
         :sort-direction="sortDirection"
         :preferences-prefix="preferencesPrefix"
         :filters="filters"
+        :show-results="view === 'entries'"
         push-query
     >
+        <template #toolbar-actions>
+            <slot name="toolbar-actions" />
+        </template>
+
+        <template #results>
+            <slot name="results" />
+        </template>
+
         <template #cell-datestamp="{ row: submission, value, isColumnVisible }">
             <Link class="title-index-field" :href="submission.url" @click.stop>
                 <SubmissionStatusIndicator v-if="!isColumnVisible('status')" :status="submission.status" />
@@ -41,6 +50,10 @@ export default {
         sortDirection: String,
         columns: Array,
         filters: Array,
+        view: {
+            type: String,
+            default: 'entries',
+        },
     },
 
     data() {
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 446212cc55..668f11cf77 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -101,6 +101,11 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    /** When `false`, the results table is hidden so an alternate view can be shown. */
+    showResults: {
+        type: Boolean,
+        default: true,
+    },
     /** Array of checked item IDs. */
     selections: {
         type: Array,
@@ -729,21 +734,26 @@ autoApplyState();
         </slot>
         <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
             <Presets v-if="showPresets" />
-            <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
+            <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
                 <div class="flex flex-1 items-center gap-2 sm:gap-3 w-full">
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />
                 </div>
-                <CustomizeColumns v-if="allowCustomizingColumns" />
+                <div v-if="$slots['toolbar-actions'] || allowCustomizingColumns" class="flex items-center gap-2 sm:gap-3">
+                    <slot name="toolbar-actions" />
+                    <CustomizeColumns v-if="allowCustomizingColumns" />
+                </div>
             </div>
 
+            <slot v-if="!showResults" name="results" />
+
             <div
-                v-if="!items.length"
+                v-else-if="!items.length"
                 class="rounded-lg border border-dashed border-gray-300 dark:border-gray-700 p-6 text-center text-gray-500"
                 v-text="__('No results')"
             />
 
-            <Panel v-else class="relative overflow-x-auto" style="container-type: scroll-state;">
+            <Panel v-else-if="showResults" class="relative overflow-x-auto" style="container-type: scroll-state;">
                 <Table>
                     <template v-for="(slot, slotName) in forwardedTableCellSlots" :key="slotName" #[slotName]="slotProps">
                         <component :is="slot" v-bind="slotProps" />
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 48c5bde501..587ceab726 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
-import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem } from '@ui';
+import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem } from '@ui';
 import ResourceDeleter from '@/components/ResourceDeleter.vue';
 import FormSubmissionListing from '@/components/forms/SubmissionListing.vue';
 import Layout from '@/pages/layout/Layout.vue';
@@ -21,6 +21,7 @@ const props = defineProps([
     'redirectUrl',
 ]);
 
+const view = ref('entries');
 const deleter = ref(null);
 const generatingFakeSubmission = ref(false);
 const deletingFakeSubmissions = ref(false);
@@ -222,13 +223,37 @@ function exportSubmissions() {
 
         <FormSubmissionListing
             ref="submissionListing"
+            :view="view"
             :form="form.handle"
             :action-url="actionUrl"
             sort-column="datestamp"
             sort-direction="desc"
             :columns="columns"
             :filters="filters"
-        />
+        >
+            <template #toolbar-actions>
+                <ToggleGroup v-model="view" size="sm">
+                    <ToggleItem
+                        value="entries"
+                        icon="layout-list"
+                        :aria-label="__('Entries')"
+                        v-tooltip="__('Entries')"
+                    />
+                    <ToggleItem
+                        value="summary"
+                        icon="scale-up"
+                        :aria-label="__('Summary')"
+                        v-tooltip="__('Summary')"
+                    />
+                </ToggleGroup>
+            </template>
+
+            <template #results>
+                <p class="rounded-lg border border-dashed border-gray-300 dark:border-gray-700 p-6 text-center text-gray-500">
+                    {{ __('Summary') }}
+                </p>
+            </template>
+        </FormSubmissionListing>
 
         <Modal :open="exportModalOpen" @update:open="exportModalOpen = $event" :title="__('Export Submissions')">
             <div class="space-y-4">

From 0ca55d4942c2bf1e18b3ad8bcbed2db13a378f2c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 25 Jun 2026 17:24:19 +0100
Subject: [PATCH 002/110] Prevent "Customizing Columns" overlapping the
 Entries/Summry view option

---
 resources/js/components/forms/SubmissionListing.vue     | 1 +
 resources/js/components/ui/Listing/CustomizeColumns.vue | 2 +-
 resources/js/components/ui/Listing/Listing.vue          | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index 109643d533..106fa4f2ba 100644
--- a/resources/js/components/forms/SubmissionListing.vue
+++ b/resources/js/components/forms/SubmissionListing.vue
@@ -9,6 +9,7 @@
         :sort-direction="sortDirection"
         :preferences-prefix="preferencesPrefix"
         :filters="filters"
+        :allow-customizing-columns="view === 'entries'"
         :show-results="view === 'entries'"
         push-query
     >
diff --git a/resources/js/components/ui/Listing/CustomizeColumns.vue b/resources/js/components/ui/Listing/CustomizeColumns.vue
index 02cc0d5398..74a17db774 100644
--- a/resources/js/components/ui/Listing/CustomizeColumns.vue
+++ b/resources/js/components/ui/Listing/CustomizeColumns.vue
@@ -69,7 +69,7 @@ function reset() {
 </script>
 
 <template>
-    <div data-ui-column-customizer class="absolute right-0 mask-bg mask-bg--left">
+    <div data-ui-column-customizer>
         <Button icon="sliders-vertical" :disabled="reorderable" @click="open = true" :aria-label="__('Customize Columns')" v-tooltip="__('Customize Columns')" />
         <Modal :title="__('Customize Columns')" v-model:open="open">
             <div class="border rounded-lg dark:border-gray-700">
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 668f11cf77..c02e2334f3 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -739,7 +739,7 @@ autoApplyState();
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />
                 </div>
-                <div v-if="$slots['toolbar-actions'] || allowCustomizingColumns" class="flex items-center gap-2 sm:gap-3">
+                <div v-if="$slots['toolbar-actions'] || allowCustomizingColumns" class="absolute right-0 flex items-center gap-2 sm:gap-3 mask-bg mask-bg--left">
                     <slot name="toolbar-actions" />
                     <CustomizeColumns v-if="allowCustomizingColumns" />
                 </div>

From 22ae7322374baa699b7ca429e3d2253987b0ea95 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 25 Jun 2026 17:32:10 +0100
Subject: [PATCH 003/110] Move the view to the end

---
 resources/js/components/ui/Listing/Listing.vue | 2 +-
 resources/js/pages/forms/Submissions.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index c02e2334f3..7801078d36 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -740,8 +740,8 @@ autoApplyState();
                     <Filters v-if="hasFilters" />
                 </div>
                 <div v-if="$slots['toolbar-actions'] || allowCustomizingColumns" class="absolute right-0 flex items-center gap-2 sm:gap-3 mask-bg mask-bg--left">
-                    <slot name="toolbar-actions" />
                     <CustomizeColumns v-if="allowCustomizingColumns" />
+                    <slot name="toolbar-actions" />
                 </div>
             </div>
 
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 587ceab726..5bd30a981c 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -232,7 +232,7 @@ function exportSubmissions() {
             :filters="filters"
         >
             <template #toolbar-actions>
-                <ToggleGroup v-model="view" size="sm">
+                <ToggleGroup v-model="view">
                     <ToggleItem
                         value="entries"
                         icon="layout-list"

From 12610e0bb183d61c300beeab805ec9a3d73e7ea8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 25 Jun 2026 20:33:34 +0100
Subject: [PATCH 004/110] Move the toggle to a different position because it's
 a bit awkward clashing with the filters now

---
 .../js/components/forms/SubmissionListing.vue |  4 ---
 .../ui/Listing/CustomizeColumns.vue           |  2 +-
 .../js/components/ui/Listing/Listing.vue      |  7 ++--
 resources/js/pages/forms/Submissions.vue      | 32 +++++++++----------
 4 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index 106fa4f2ba..e6efd82140 100644
--- a/resources/js/components/forms/SubmissionListing.vue
+++ b/resources/js/components/forms/SubmissionListing.vue
@@ -13,10 +13,6 @@
         :show-results="view === 'entries'"
         push-query
     >
-        <template #toolbar-actions>
-            <slot name="toolbar-actions" />
-        </template>
-
         <template #results>
             <slot name="results" />
         </template>
diff --git a/resources/js/components/ui/Listing/CustomizeColumns.vue b/resources/js/components/ui/Listing/CustomizeColumns.vue
index 74a17db774..02cc0d5398 100644
--- a/resources/js/components/ui/Listing/CustomizeColumns.vue
+++ b/resources/js/components/ui/Listing/CustomizeColumns.vue
@@ -69,7 +69,7 @@ function reset() {
 </script>
 
 <template>
-    <div data-ui-column-customizer>
+    <div data-ui-column-customizer class="absolute right-0 mask-bg mask-bg--left">
         <Button icon="sliders-vertical" :disabled="reorderable" @click="open = true" :aria-label="__('Customize Columns')" v-tooltip="__('Customize Columns')" />
         <Modal :title="__('Customize Columns')" v-model:open="open">
             <div class="border rounded-lg dark:border-gray-700">
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 7801078d36..108c859ca8 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -734,15 +734,12 @@ autoApplyState();
         </slot>
         <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
             <Presets v-if="showPresets" />
-            <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
+            <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
                 <div class="flex flex-1 items-center gap-2 sm:gap-3 w-full">
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />
                 </div>
-                <div v-if="$slots['toolbar-actions'] || allowCustomizingColumns" class="absolute right-0 flex items-center gap-2 sm:gap-3 mask-bg mask-bg--left">
-                    <CustomizeColumns v-if="allowCustomizingColumns" />
-                    <slot name="toolbar-actions" />
-                </div>
+                <CustomizeColumns v-if="allowCustomizingColumns" />
             </div>
 
             <slot v-if="!showResults" name="results" />
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 5bd30a981c..fa0e23d70f 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -187,6 +187,21 @@ function exportSubmissions() {
                 </DropdownMenu>
             </Dropdown>
 
+            <ToggleGroup v-model="view">
+                <ToggleItem
+                    value="entries"
+                    icon="layout-list"
+                    :aria-label="__('Entries')"
+                    v-tooltip="__('Entries')"
+                />
+                <ToggleItem
+                    value="summary"
+                    icon="scale-up"
+                    :aria-label="__('Summary')"
+                    v-tooltip="__('Summary')"
+                />
+            </ToggleGroup>
+
             <CommandPaletteItem
                 v-if="form.canGenerateFakeSubmissions"
                 category="Actions"
@@ -231,23 +246,6 @@ function exportSubmissions() {
             :columns="columns"
             :filters="filters"
         >
-            <template #toolbar-actions>
-                <ToggleGroup v-model="view">
-                    <ToggleItem
-                        value="entries"
-                        icon="layout-list"
-                        :aria-label="__('Entries')"
-                        v-tooltip="__('Entries')"
-                    />
-                    <ToggleItem
-                        value="summary"
-                        icon="scale-up"
-                        :aria-label="__('Summary')"
-                        v-tooltip="__('Summary')"
-                    />
-                </ToggleGroup>
-            </template>
-
             <template #results>
                 <p class="rounded-lg border border-dashed border-gray-300 dark:border-gray-700 p-6 text-center text-gray-500">
                     {{ __('Summary') }}

From 1b952b2b2207b0de8c6c113f419efedd2de7f187 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 25 Jun 2026 20:44:04 +0100
Subject: [PATCH 005/110] Add data visualisation icon

---
 resources/js/pages/forms/Submissions.vue | 2 +-
 resources/svg/icons/chart-increase.svg   | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 resources/svg/icons/chart-increase.svg

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index fa0e23d70f..75e0b6b808 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -196,7 +196,7 @@ function exportSubmissions() {
                 />
                 <ToggleItem
                     value="summary"
-                    icon="scale-up"
+                    icon="chart-increase"
                     :aria-label="__('Summary')"
                     v-tooltip="__('Summary')"
                 />
diff --git a/resources/svg/icons/chart-increase.svg b/resources/svg/icons/chart-increase.svg
new file mode 100644
index 0000000000..670276fdd7
--- /dev/null
+++ b/resources/svg/icons/chart-increase.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+  <g>
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.7313 1.55729c-0.0441 0.06759 -4.59157 6.66316 -5.37571 7.21502 -1.02787 0.7234 -1.50644 -2.20844 -2.70205 -2.11494C3.1652 6.77377 0.530522 12.4525 0.5 12.501" stroke-width="1"></path>
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.84814 2.29236c1.09785 -0.62946 2.65556 -0.92473 3.89426 -0.7382 0.6009 1.15021 0.8827 2.78223 0.7047 4.08006" stroke-width="1"></path>
+  </g>
+</svg>
\ No newline at end of file

From 01896ad7117a91561819fd2af25854725e525cf3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 10:58:48 +0100
Subject: [PATCH 006/110] Hmm move it back. Let's try something else

---
 .../js/components/forms/SubmissionListing.vue |  4 +++
 .../ui/Listing/CustomizeColumns.vue           |  2 +-
 .../js/components/ui/Listing/Listing.vue      |  7 ++--
 resources/js/pages/forms/Submissions.vue      | 32 ++++++++++---------
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index e6efd82140..106fa4f2ba 100644
--- a/resources/js/components/forms/SubmissionListing.vue
+++ b/resources/js/components/forms/SubmissionListing.vue
@@ -13,6 +13,10 @@
         :show-results="view === 'entries'"
         push-query
     >
+        <template #toolbar-actions>
+            <slot name="toolbar-actions" />
+        </template>
+
         <template #results>
             <slot name="results" />
         </template>
diff --git a/resources/js/components/ui/Listing/CustomizeColumns.vue b/resources/js/components/ui/Listing/CustomizeColumns.vue
index 02cc0d5398..74a17db774 100644
--- a/resources/js/components/ui/Listing/CustomizeColumns.vue
+++ b/resources/js/components/ui/Listing/CustomizeColumns.vue
@@ -69,7 +69,7 @@ function reset() {
 </script>
 
 <template>
-    <div data-ui-column-customizer class="absolute right-0 mask-bg mask-bg--left">
+    <div data-ui-column-customizer>
         <Button icon="sliders-vertical" :disabled="reorderable" @click="open = true" :aria-label="__('Customize Columns')" v-tooltip="__('Customize Columns')" />
         <Modal :title="__('Customize Columns')" v-model:open="open">
             <div class="border rounded-lg dark:border-gray-700">
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 108c859ca8..c02e2334f3 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -734,12 +734,15 @@ autoApplyState();
         </slot>
         <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
             <Presets v-if="showPresets" />
-            <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
+            <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
                 <div class="flex flex-1 items-center gap-2 sm:gap-3 w-full">
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />
                 </div>
-                <CustomizeColumns v-if="allowCustomizingColumns" />
+                <div v-if="$slots['toolbar-actions'] || allowCustomizingColumns" class="absolute right-0 flex items-center gap-2 sm:gap-3 mask-bg mask-bg--left">
+                    <slot name="toolbar-actions" />
+                    <CustomizeColumns v-if="allowCustomizingColumns" />
+                </div>
             </div>
 
             <slot v-if="!showResults" name="results" />
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 75e0b6b808..b1463f3595 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -187,21 +187,6 @@ function exportSubmissions() {
                 </DropdownMenu>
             </Dropdown>
 
-            <ToggleGroup v-model="view">
-                <ToggleItem
-                    value="entries"
-                    icon="layout-list"
-                    :aria-label="__('Entries')"
-                    v-tooltip="__('Entries')"
-                />
-                <ToggleItem
-                    value="summary"
-                    icon="chart-increase"
-                    :aria-label="__('Summary')"
-                    v-tooltip="__('Summary')"
-                />
-            </ToggleGroup>
-
             <CommandPaletteItem
                 v-if="form.canGenerateFakeSubmissions"
                 category="Actions"
@@ -246,6 +231,23 @@ function exportSubmissions() {
             :columns="columns"
             :filters="filters"
         >
+            <template #toolbar-actions>
+                <ToggleGroup v-model="view">
+                    <ToggleItem
+                        value="entries"
+                        icon="layout-list"
+                        :aria-label="__('Entries')"
+                        v-tooltip="__('Entries')"
+                    />
+                    <ToggleItem
+                        value="summary"
+                        icon="chart-increase"
+                        :aria-label="__('Summary')"
+                        v-tooltip="__('Summary')"
+                    />
+                </ToggleGroup>
+            </template>
+
             <template #results>
                 <p class="rounded-lg border border-dashed border-gray-300 dark:border-gray-700 p-6 text-center text-gray-500">
                     {{ __('Summary') }}

From 0a9518d5a482453a54eea5f99163b8b3350801b6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 13:16:11 +0100
Subject: [PATCH 007/110] Undo some previous layout changes, ready to accept a
 v6 merge

---
 resources/js/components/ui/Listing/CustomizeColumns.vue | 2 +-
 resources/js/components/ui/Listing/Listing.vue          | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/ui/Listing/CustomizeColumns.vue b/resources/js/components/ui/Listing/CustomizeColumns.vue
index 74a17db774..02cc0d5398 100644
--- a/resources/js/components/ui/Listing/CustomizeColumns.vue
+++ b/resources/js/components/ui/Listing/CustomizeColumns.vue
@@ -69,7 +69,7 @@ function reset() {
 </script>
 
 <template>
-    <div data-ui-column-customizer>
+    <div data-ui-column-customizer class="absolute right-0 mask-bg mask-bg--left">
         <Button icon="sliders-vertical" :disabled="reorderable" @click="open = true" :aria-label="__('Customize Columns')" v-tooltip="__('Customize Columns')" />
         <Modal :title="__('Customize Columns')" v-model:open="open">
             <div class="border rounded-lg dark:border-gray-700">
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index c02e2334f3..1d8defb602 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -734,15 +734,12 @@ autoApplyState();
         </slot>
         <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
             <Presets v-if="showPresets" />
-            <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
+            <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
                 <div class="flex flex-1 items-center gap-2 sm:gap-3 w-full">
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />
                 </div>
-                <div v-if="$slots['toolbar-actions'] || allowCustomizingColumns" class="absolute right-0 flex items-center gap-2 sm:gap-3 mask-bg mask-bg--left">
-                    <slot name="toolbar-actions" />
-                    <CustomizeColumns v-if="allowCustomizingColumns" />
-                </div>
+                <CustomizeColumns v-if="allowCustomizingColumns" />
             </div>
 
             <slot v-if="!showResults" name="results" />
@@ -768,5 +765,6 @@ autoApplyState();
             </Panel>
         </slot>
         <BulkActions v-if="showBulkActions" />
+        <slot name="toolbar-actions" />
     </div>
 </template>

From 0062135cffa104737b23e4ea98016e82014c8b87 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 13:46:34 +0100
Subject: [PATCH 008/110] Move entries/summary view back into its position

---
 resources/js/components/forms/SubmissionListing.vue  |  1 -
 .../js/components/ui/Listing/CustomizeColumns.vue    |  6 ++----
 resources/js/components/ui/Listing/Listing.vue       | 12 +++++++++---
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index 106fa4f2ba..109643d533 100644
--- a/resources/js/components/forms/SubmissionListing.vue
+++ b/resources/js/components/forms/SubmissionListing.vue
@@ -9,7 +9,6 @@
         :sort-direction="sortDirection"
         :preferences-prefix="preferencesPrefix"
         :filters="filters"
-        :allow-customizing-columns="view === 'entries'"
         :show-results="view === 'entries'"
         push-query
     >
diff --git a/resources/js/components/ui/Listing/CustomizeColumns.vue b/resources/js/components/ui/Listing/CustomizeColumns.vue
index 74a17db774..0137b2ceb5 100644
--- a/resources/js/components/ui/Listing/CustomizeColumns.vue
+++ b/resources/js/components/ui/Listing/CustomizeColumns.vue
@@ -69,9 +69,8 @@ function reset() {
 </script>
 
 <template>
-    <div data-ui-column-customizer>
-        <Button icon="sliders-vertical" :disabled="reorderable" @click="open = true" :aria-label="__('Customize Columns')" v-tooltip="__('Customize Columns')" />
-        <Modal :title="__('Customize Columns')" v-model:open="open">
+    <Button icon="sliders-vertical" :disabled="reorderable" @click="open = true" :aria-label="__('Customize Columns')" v-tooltip="__('Customize Columns')" />
+    <Modal :title="__('Customize Columns')" v-model:open="open">
             <div class="border rounded-lg dark:border-gray-700">
                 <div class="flex">
                     <!-- Available Columns -->
@@ -132,5 +131,4 @@ function reset() {
                 </div>
             </template>
         </Modal>
-    </div>
 </template>
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index dbb669fa11..0a6ab1c474 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -734,12 +734,19 @@ autoApplyState();
         </slot>
         <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
             <Presets v-if="showPresets" />
-            <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
+            <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
                 <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto">
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />
                 </div>
-                <CustomizeColumns v-if="allowCustomizingColumns" />
+                <div
+                    v-if="$slots['toolbar-actions'] || allowCustomizingColumns"
+                    data-ui-column-customizer
+                    class="absolute right-0 flex items-center gap-2 sm:gap-3 mask-bg mask-bg--left"
+                >
+                    <slot name="toolbar-actions" />
+                    <CustomizeColumns v-if="allowCustomizingColumns" />
+                </div>
             </div>
 
             <slot v-if="!showResults" name="results" />
@@ -765,6 +772,5 @@ autoApplyState();
             </Panel>
         </slot>
         <BulkActions v-if="showBulkActions" />
-        <slot name="toolbar-actions" />
     </div>
 </template>

From b0cf292b39adab7ef201f8e548e1739157a7652c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 13:51:54 +0100
Subject: [PATCH 009/110] Match the new layout of Listing.vue in collections

---
 resources/js/components/ui/Listing/Listing.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 0a6ab1c474..517f36fcac 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -723,27 +723,23 @@ autoApplyState();
         <slot name="initializing" v-if="shouldShowSkeleton">
             <div class="flex flex-col gap-4 justify-between mt-3 starting-style-transition starting-style-transition--delay">
                 <ui-skeleton v-if="showPresets" class="h-5 w-48" />
-                <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="flex gap-2 sm:gap-3">
+                <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="flex gap-2 sm:gap-3">
                     <ui-skeleton v-if="allowSearch" class="h-9 w-96" />
                     <ui-skeleton v-if="hasFilters" class="h-9 w-24" />
                     <div class="flex-1" />
-                    <ui-skeleton v-if="allowCustomizingColumns" class="size-10" />
+                    <ui-skeleton v-if="allowCustomizingColumns || $slots['toolbar-actions']" class="size-10" />
                 </div>
                 <ui-skeleton class="h-48 w-full" />
             </div>
         </slot>
         <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
             <Presets v-if="showPresets" />
-            <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
-                <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto">
+            <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition">
+                <div class="flex flex-1 items-center gap-2 sm:gap-3 min-w-0 overflow-x-auto">
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />
                 </div>
-                <div
-                    v-if="$slots['toolbar-actions'] || allowCustomizingColumns"
-                    data-ui-column-customizer
-                    class="absolute right-0 flex items-center gap-2 sm:gap-3 mask-bg mask-bg--left"
-                >
+                <div v-if="$slots['toolbar-actions'] || allowCustomizingColumns" class="flex shrink-0 items-center gap-2 sm:gap-3">
                     <slot name="toolbar-actions" />
                     <CustomizeColumns v-if="allowCustomizingColumns" />
                 </div>

From 763f84c38f554d657632270a03dc3c68716bffa4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 14:43:18 +0100
Subject: [PATCH 010/110] Filters - small improvement to overflow clipping so
 keyboard focus rings aren't cut off

---
 resources/js/components/ui/Listing/Filters.vue | 2 +-
 resources/js/components/ui/Listing/Listing.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 5b6a15edc2..366e1b3188 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -131,7 +131,7 @@ function handleStackClosed() {
 </script>
 
 <template>
-    <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto py-3 st-mask-horizontal-overflow">
+    <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto ps-[1px] -ms-[1px] py-3 st-mask-horizontal-overflow">
         <div ref="filtersButtonWrapperRef" class="sticky left-0 rounded-r-lg mask-bg mask-bg--left mask-bg--left-small">
             <Button icon="sliders-horizontal" class="[&_svg]:size-3.5" :disabled="reorderable" @click="open = true">
                 {{ __('Filters') }}
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 517f36fcac..9767942f87 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -735,7 +735,7 @@ autoApplyState();
         <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
             <Presets v-if="showPresets" />
             <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition">
-                <div class="flex flex-1 items-center gap-2 sm:gap-3 min-w-0 overflow-x-auto">
+                <div class="flex flex-1 items-center gap-2 sm:gap-3 min-w-0">
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />
                 </div>

From 8d6632be2494a80e364e51f0970bd53f996c8f47 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 14:45:18 +0100
Subject: [PATCH 011/110] Remember view preference for entries/summary toggle

---
 resources/js/pages/forms/Submissions.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index b1463f3595..9529917679 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
 import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem } from '@ui';
@@ -21,7 +21,14 @@ const props = defineProps([
     'redirectUrl',
 ]);
 
-const view = ref('entries');
+const preferencesKey = `forms.${props.form.handle}.submissions.view`;
+const savedView = Statamic.$preferences.get(preferencesKey, 'entries');
+const view = ref(['entries', 'summary'].includes(savedView) ? savedView : 'entries');
+
+watch(view, (newView) => {
+    Statamic.$preferences.set(preferencesKey, newView);
+});
+
 const deleter = ref(null);
 const generatingFakeSubmission = ref(false);
 const deletingFakeSubmissions = ref(false);
@@ -249,9 +256,7 @@ function exportSubmissions() {
             </template>
 
             <template #results>
-                <p class="rounded-lg border border-dashed border-gray-300 dark:border-gray-700 p-6 text-center text-gray-500">
-                    {{ __('Summary') }}
-                </p>
+                <div class="pie"></div>
             </template>
         </FormSubmissionListing>
 

From 8509c490367c7e19a147c909c04571e13910330c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 16:26:19 +0100
Subject: [PATCH 012/110] wip - pie chart demo

---
 resources/css/components/forms/charts.css |  5 +++
 resources/css/cp.css                      |  1 +
 resources/js/pages/forms/Submissions.vue  | 54 ++++++++++++++++++++++-
 3 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 resources/css/components/forms/charts.css

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
new file mode 100644
index 0000000000..4fafe372f9
--- /dev/null
+++ b/resources/css/components/forms/charts.css
@@ -0,0 +1,5 @@
+.pie-chart {
+    width: 9rem;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+}
\ No newline at end of file
diff --git a/resources/css/cp.css b/resources/css/cp.css
index cb32123428..91dd3b5d8d 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -18,6 +18,7 @@
 @import './components/notifications.css';
 @import './components/page-tree.css';
 @import './components/forms.css';
+@import './components/forms/charts.css';
 @import './components/pagination.css';
 @import './components/popover.css';
 @import './components/preview.css';
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 9529917679..3252d63a2a 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, useId } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
 import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem } from '@ui';
@@ -37,6 +37,7 @@ const exportModalOpen = ref(false);
 const exportFormat = ref(null);
 const exportScope = ref('all');
 const listingParameters = ref({});
+const legendId = useId();
 
 async function generateFakeSubmission(mode) {
     if (generatingFakeSubmission.value) {
@@ -256,7 +257,56 @@ function exportSubmissions() {
             </template>
 
             <template #results>
-                <div class="pie"></div>
+                <figure class="grid gap-4 grid-cols-[200px_1fr]">
+                    <div
+                        class="pie-chart"
+                        style="
+                            /* These slices would be dynamic based on the data */
+                            --1: 45%;
+                            --2: 30%;
+                            --3: 15%;
+                            --4: 10%;
+
+                            --end1: var(--1);
+                            --end2: calc(var(--1) + var(--2));
+                            --end3: calc(var(--1) + var(--2) + var(--3));
+                            --end4: 100%;
+
+                            background-image: conic-gradient(
+                                var(--color-indigo-500) 0% var(--end1),
+                                var(--color-gray-800) var(--end1) var(--end2),
+                                var(--color-lime-500) var(--end2) var(--end3),
+                                var(--color-indigo-200) var(--end3) var(--end4)
+                            );
+                        "
+                        role="img"
+                        :aria-labelledby="legendId"
+                    />
+                    <figcaption :id="legendId">
+                        <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2">
+                            <li class="flex items-center gap-2">
+                                <span class="font-medium">45%</span>
+                                <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" aria-hidden="true" />
+                                <span>Before you Go Go</span>
+                            </li>
+                            <li class="flex items-center gap-2">
+                                <span class="font-medium">30%</span>
+                                <div class="size-2.5 shrink-0 rounded-full bg-gray-800" aria-hidden="true" />
+                                <span>Bring me Back to Life</span>
+                            </li>
+                            <li class="flex items-center gap-2">
+                                <span class="font-medium">15%</span>
+                                <div class="size-2.5 shrink-0 rounded-full bg-lime-500" aria-hidden="true" />
+                                <span>When September Ends</span>
+                            </li>
+                            <li class="flex items-center gap-2">
+                                <span class="font-medium">10%</span>
+                                <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" aria-hidden="true" />
+                                <span>Never</span>
+                            </li>
+                        </ul>
+                    </figcaption>
+                </figure>
             </template>
         </FormSubmissionListing>
 

From 17b935f838f126f25b10aa60dc07255ad56cfa0e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 17:35:39 +0100
Subject: [PATCH 013/110] wip - pie chart demo

---
 resources/js/components/ui/Widget.vue    |   3 +-
 resources/js/pages/forms/Submissions.vue | 112 ++++++++++++-----------
 2 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index f4c9e791ed..895a014434 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -6,6 +6,7 @@ import { useSlots, computed } from 'vue';
 const props = defineProps({
     title: {type: String },
     icon: { type: String },
+    iconClass: { type: String, default: 'hidden! size-5 text-gray-500 @xs/widget:block!' },
     href: { type: String },
 });
 
@@ -19,7 +20,7 @@ const hasHeader = computed(() => Boolean(props.title || props.icon || slots.acti
         <div class="flex h-full min-h-54 flex-col">
             <header v-if="hasHeader" class="flex items-center min-h-[49px] justify-between border-b border-gray-200 px-4.5 py-2 dark:border-gray-700">
                 <component :is="href ? Link : 'div'" class="flex items-center gap-2 sm:gap-3" :href>
-                    <Icon v-if="icon" :name="icon" class="hidden! size-5 text-gray-500 @xs/widget:block!" />
+                    <Icon v-if="icon" :name="icon" :class="iconClass" />
                     <span v-if="title" v-text="title" />
                 </component>
                 <div class="flex items-center gap-4 -mr-2.5 starting-style-transition">
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 3252d63a2a..775258e384 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -2,7 +2,7 @@
 import { ref, computed, watch, useId } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
-import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem } from '@ui';
+import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem, Widget } from '@ui';
 import ResourceDeleter from '@/components/ResourceDeleter.vue';
 import FormSubmissionListing from '@/components/forms/SubmissionListing.vue';
 import Layout from '@/pages/layout/Layout.vue';
@@ -257,56 +257,66 @@ function exportSubmissions() {
             </template>
 
             <template #results>
-                <figure class="grid gap-4 grid-cols-[200px_1fr]">
-                    <div
-                        class="pie-chart"
-                        style="
-                            /* These slices would be dynamic based on the data */
-                            --1: 45%;
-                            --2: 30%;
-                            --3: 15%;
-                            --4: 10%;
-
-                            --end1: var(--1);
-                            --end2: calc(var(--1) + var(--2));
-                            --end3: calc(var(--1) + var(--2) + var(--3));
-                            --end4: 100%;
-
-                            background-image: conic-gradient(
-                                var(--color-indigo-500) 0% var(--end1),
-                                var(--color-gray-800) var(--end1) var(--end2),
-                                var(--color-lime-500) var(--end2) var(--end3),
-                                var(--color-indigo-200) var(--end3) var(--end4)
-                            );
-                        "
-                        role="img"
-                        :aria-labelledby="legendId"
-                    />
-                    <figcaption :id="legendId">
-                        <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2">
-                            <li class="flex items-center gap-2">
-                                <span class="font-medium">45%</span>
-                                <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" aria-hidden="true" />
-                                <span>Before you Go Go</span>
-                            </li>
-                            <li class="flex items-center gap-2">
-                                <span class="font-medium">30%</span>
-                                <div class="size-2.5 shrink-0 rounded-full bg-gray-800" aria-hidden="true" />
-                                <span>Bring me Back to Life</span>
-                            </li>
-                            <li class="flex items-center gap-2">
-                                <span class="font-medium">15%</span>
-                                <div class="size-2.5 shrink-0 rounded-full bg-lime-500" aria-hidden="true" />
-                                <span>When September Ends</span>
-                            </li>
-                            <li class="flex items-center gap-2">
-                                <span class="font-medium">10%</span>
-                                <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" aria-hidden="true" />
-                                <span>Never</span>
-                            </li>
-                        </ul>
-                    </figcaption>
-                </figure>
+                <div class="mt-6 widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
+                    <div class="px-3 starting-style-transition w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('Wake me up')"
+                            icon="fieldtype-radio"
+                            icon-class="size-4.5 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <figure class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
+                                <div
+                                    class="pie-chart"
+                                    style="
+                                        /* These slices would be dynamic based on the data */
+                                        --1: 45%;
+                                        --2: 30%;
+                                        --3: 15%;
+                                        --4: 10%;
+
+                                        --end1: var(--1);
+                                        --end2: calc(var(--1) + var(--2));
+                                        --end3: calc(var(--1) + var(--2) + var(--3));
+                                        --end4: 100%;
+
+                                        background-image: conic-gradient(
+                                            var(--color-indigo-500) 0% var(--end1),
+                                            var(--color-gray-800) var(--end1) var(--end2),
+                                            var(--color-lime-500) var(--end2) var(--end3),
+                                            var(--color-indigo-200) var(--end3) var(--end4)
+                                        );
+                                    "
+                                    role="img"
+                                    :aria-labelledby="legendId"
+                                />
+                                <figcaption :id="legendId" class="pt-4">
+                                    <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
+                                        <li class="flex items-center gap-2">
+                                            <span class="font-medium">45%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" aria-hidden="true" />
+                                            <span>Before you Go Go</span>
+                                        </li>
+                                        <li class="flex items-center gap-2">
+                                            <span class="font-medium">30%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-gray-800" aria-hidden="true" />
+                                            <span>Bring me Back to Life</span>
+                                        </li>
+                                        <li class="flex items-center gap-2">
+                                            <span class="font-medium">15%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-lime-500" aria-hidden="true" />
+                                            <span>When September Ends</span>
+                                        </li>
+                                        <li class="flex items-center gap-2">
+                                            <span class="font-medium">10%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" aria-hidden="true" />
+                                            <span>Never</span>
+                                        </li>
+                                    </ul>
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
+                </div>
             </template>
         </FormSubmissionListing>
 

From 1e67e7bb0d1c4aab3cdebb193508b52902802396 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 26 Jun 2026 17:40:36 +0100
Subject: [PATCH 014/110] wip - pie chart demo / some accessibility
 considerations

---
 resources/js/components/ui/Widget.vue    | 5 +++--
 resources/js/pages/forms/Submissions.vue | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index 895a014434..49a410a67f 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -7,6 +7,7 @@ const props = defineProps({
     title: {type: String },
     icon: { type: String },
     iconClass: { type: String, default: 'hidden! size-5 text-gray-500 @xs/widget:block!' },
+    titleTag: { type: String, default: 'span' },
     href: { type: String },
 });
 
@@ -20,8 +21,8 @@ const hasHeader = computed(() => Boolean(props.title || props.icon || slots.acti
         <div class="flex h-full min-h-54 flex-col">
             <header v-if="hasHeader" class="flex items-center min-h-[49px] justify-between border-b border-gray-200 px-4.5 py-2 dark:border-gray-700">
                 <component :is="href ? Link : 'div'" class="flex items-center gap-2 sm:gap-3" :href>
-                    <Icon v-if="icon" :name="icon" :class="iconClass" />
-                    <span v-if="title" v-text="title" />
+                    <Icon v-if="icon" :name="icon" :class="iconClass" :aria-hidden="title ? true : undefined" />
+                    <component :is="titleTag" v-if="title" class="m-0 font-[inherit] text-inherit" v-text="title" />
                 </component>
                 <div class="flex items-center gap-4 -mr-2.5 starting-style-transition">
                     <slot name="actions" />
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 775258e384..a3f77e46fc 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -261,6 +261,7 @@ function exportSubmissions() {
                     <div class="px-3 starting-style-transition w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Wake me up')"
+                            title-tag="h2"
                             icon="fieldtype-radio"
                             icon-class="size-4.5 text-gray-500 hidden @xs/widget:block"
                         >

From d31ac5b9478a5189f64df538042905b71a99e2b0 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 10:02:54 +0100
Subject: [PATCH 015/110] Make widget heading text a tiny bit less dominant

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

diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index 49a410a67f..dcaff76f70 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -22,7 +22,7 @@ const hasHeader = computed(() => Boolean(props.title || props.icon || slots.acti
             <header v-if="hasHeader" class="flex items-center min-h-[49px] justify-between border-b border-gray-200 px-4.5 py-2 dark:border-gray-700">
                 <component :is="href ? Link : 'div'" class="flex items-center gap-2 sm:gap-3" :href>
                     <Icon v-if="icon" :name="icon" :class="iconClass" :aria-hidden="title ? true : undefined" />
-                    <component :is="titleTag" v-if="title" class="m-0 font-[inherit] text-inherit" v-text="title" />
+                    <component :is="titleTag" v-if="title" class="m-0 font-[inherit] text-inherit text-[0.97rem]" v-text="title" />
                 </component>
                 <div class="flex items-center gap-4 -mr-2.5 starting-style-transition">
                     <slot name="actions" />

From e1b841a3bd75e1336149ab607dcba631ed95670e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 10:29:51 +0100
Subject: [PATCH 016/110] Option for displaying pie chart labels

---
 resources/css/components/forms/charts.css | 45 ++++++++++++++++++++++-
 resources/js/pages/forms/Submissions.vue  | 35 ++++++------------
 2 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 4fafe372f9..e0c9f94d38 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -1,5 +1,48 @@
 .pie-chart {
+    --label-radius: 32%;
+
+    position: relative;
     width: 9rem;
     aspect-ratio: 1 / 1;
+
+    /* Slice sizes as unitless numbers (percent of circle). */
+    --end1: calc(var(--1) * 1%);
+    --end2: calc((var(--1) + var(--2)) * 1%);
+    --end3: calc((var(--1) + var(--2) + var(--3)) * 1%);
+    --end4: 100%;
+
+    /* Midpoint angle for each slice (100% = 360deg). */
+    --angle1: calc(var(--1) * 3.6deg / 2);
+    --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
+    --angle3: calc((var(--1) + var(--2) + var(--3) / 2) * 3.6deg);
+    --angle4: calc((var(--1) + var(--2) + var(--3) + var(--4) / 2) * 3.6deg);
+}
+
+.pie-chart__disc {
+    width: 100%;
+    height: 100%;
     border-radius: 50%;
-}
\ No newline at end of file
+    background-image: conic-gradient(
+        var(--color-indigo-500) 0% var(--end1),
+        var(--color-gray-800) var(--end1) var(--end2),
+        var(--color-lime-500) var(--end2) var(--end3),
+        var(--color-indigo-200) var(--end3) var(--end4)
+    );
+}
+
+.pie-chart__label {
+    --angle: 0deg;
+
+    position: absolute;
+    left: calc(50% + var(--label-radius) * sin(var(--angle)));
+    top: calc(50% - var(--label-radius) * cos(var(--angle)));
+    transform: translate(-50%, -50%);
+
+    @apply text-xs font-medium tabular-nums text-white pointer-events-none;
+    text-shadow: 0 1px 5px rgb(0 0 0 / 0.2);
+}
+
+.pie-chart__label--1 { --angle: var(--angle1); }
+.pie-chart__label--2 { --angle: var(--angle2); }
+.pie-chart__label--3 { --angle: var(--angle3); }
+.pie-chart__label--4 { --angle: var(--angle4); }
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index a3f77e46fc..12be5d2c14 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -268,37 +268,26 @@ function exportSubmissions() {
                             <figure class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
                                 <div
                                     class="pie-chart"
-                                    style="
-                                        /* These slices would be dynamic based on the data */
-                                        --1: 45%;
-                                        --2: 30%;
-                                        --3: 15%;
-                                        --4: 10%;
-
-                                        --end1: var(--1);
-                                        --end2: calc(var(--1) + var(--2));
-                                        --end3: calc(var(--1) + var(--2) + var(--3));
-                                        --end4: 100%;
-
-                                        background-image: conic-gradient(
-                                            var(--color-indigo-500) 0% var(--end1),
-                                            var(--color-gray-800) var(--end1) var(--end2),
-                                            var(--color-lime-500) var(--end2) var(--end3),
-                                            var(--color-indigo-200) var(--end3) var(--end4)
-                                        );
-                                    "
+                                    style="--1: 55; --2: 25; --3: 15; --4: 5;"
                                     role="img"
                                     :aria-labelledby="legendId"
-                                />
+                                >
+                                    <div class="pie-chart__disc" aria-hidden="true" />
+                                    <!-- aria-hidden because the labels are already in the figure caption -->
+                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">55%</span>
+                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">25%</span>
+                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">15%</span>
+                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
+                                </div>
                                 <figcaption :id="legendId" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2">
-                                            <span class="font-medium">45%</span>
+                                            <span class="font-medium">55%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" aria-hidden="true" />
                                             <span>Before you Go Go</span>
                                         </li>
                                         <li class="flex items-center gap-2">
-                                            <span class="font-medium">30%</span>
+                                            <span class="font-medium">25%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-gray-800" aria-hidden="true" />
                                             <span>Bring me Back to Life</span>
                                         </li>
@@ -308,7 +297,7 @@ function exportSubmissions() {
                                             <span>When September Ends</span>
                                         </li>
                                         <li class="flex items-center gap-2">
-                                            <span class="font-medium">10%</span>
+                                            <span class="font-medium">5%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" aria-hidden="true" />
                                             <span>Never</span>
                                         </li>

From 088ef846bb8b5b854ce83e062ce8510e7624032b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 10:30:24 +0100
Subject: [PATCH 017/110] Revert "Option for displaying pie chart labels" - I
 don't think this adds value

This reverts commit e1b841a3bd75e1336149ab607dcba631ed95670e.
---
 resources/css/components/forms/charts.css | 45 +----------------------
 resources/js/pages/forms/Submissions.vue  | 35 ++++++++++++------
 2 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index e0c9f94d38..4fafe372f9 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -1,48 +1,5 @@
 .pie-chart {
-    --label-radius: 32%;
-
-    position: relative;
     width: 9rem;
     aspect-ratio: 1 / 1;
-
-    /* Slice sizes as unitless numbers (percent of circle). */
-    --end1: calc(var(--1) * 1%);
-    --end2: calc((var(--1) + var(--2)) * 1%);
-    --end3: calc((var(--1) + var(--2) + var(--3)) * 1%);
-    --end4: 100%;
-
-    /* Midpoint angle for each slice (100% = 360deg). */
-    --angle1: calc(var(--1) * 3.6deg / 2);
-    --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
-    --angle3: calc((var(--1) + var(--2) + var(--3) / 2) * 3.6deg);
-    --angle4: calc((var(--1) + var(--2) + var(--3) + var(--4) / 2) * 3.6deg);
-}
-
-.pie-chart__disc {
-    width: 100%;
-    height: 100%;
     border-radius: 50%;
-    background-image: conic-gradient(
-        var(--color-indigo-500) 0% var(--end1),
-        var(--color-gray-800) var(--end1) var(--end2),
-        var(--color-lime-500) var(--end2) var(--end3),
-        var(--color-indigo-200) var(--end3) var(--end4)
-    );
-}
-
-.pie-chart__label {
-    --angle: 0deg;
-
-    position: absolute;
-    left: calc(50% + var(--label-radius) * sin(var(--angle)));
-    top: calc(50% - var(--label-radius) * cos(var(--angle)));
-    transform: translate(-50%, -50%);
-
-    @apply text-xs font-medium tabular-nums text-white pointer-events-none;
-    text-shadow: 0 1px 5px rgb(0 0 0 / 0.2);
-}
-
-.pie-chart__label--1 { --angle: var(--angle1); }
-.pie-chart__label--2 { --angle: var(--angle2); }
-.pie-chart__label--3 { --angle: var(--angle3); }
-.pie-chart__label--4 { --angle: var(--angle4); }
+}
\ No newline at end of file
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 12be5d2c14..a3f77e46fc 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -268,26 +268,37 @@ function exportSubmissions() {
                             <figure class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
                                 <div
                                     class="pie-chart"
-                                    style="--1: 55; --2: 25; --3: 15; --4: 5;"
+                                    style="
+                                        /* These slices would be dynamic based on the data */
+                                        --1: 45%;
+                                        --2: 30%;
+                                        --3: 15%;
+                                        --4: 10%;
+
+                                        --end1: var(--1);
+                                        --end2: calc(var(--1) + var(--2));
+                                        --end3: calc(var(--1) + var(--2) + var(--3));
+                                        --end4: 100%;
+
+                                        background-image: conic-gradient(
+                                            var(--color-indigo-500) 0% var(--end1),
+                                            var(--color-gray-800) var(--end1) var(--end2),
+                                            var(--color-lime-500) var(--end2) var(--end3),
+                                            var(--color-indigo-200) var(--end3) var(--end4)
+                                        );
+                                    "
                                     role="img"
                                     :aria-labelledby="legendId"
-                                >
-                                    <div class="pie-chart__disc" aria-hidden="true" />
-                                    <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">55%</span>
-                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">25%</span>
-                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">15%</span>
-                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
-                                </div>
+                                />
                                 <figcaption :id="legendId" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2">
-                                            <span class="font-medium">55%</span>
+                                            <span class="font-medium">45%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" aria-hidden="true" />
                                             <span>Before you Go Go</span>
                                         </li>
                                         <li class="flex items-center gap-2">
-                                            <span class="font-medium">25%</span>
+                                            <span class="font-medium">30%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-gray-800" aria-hidden="true" />
                                             <span>Bring me Back to Life</span>
                                         </li>
@@ -297,7 +308,7 @@ function exportSubmissions() {
                                             <span>When September Ends</span>
                                         </li>
                                         <li class="flex items-center gap-2">
-                                            <span class="font-medium">5%</span>
+                                            <span class="font-medium">10%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" aria-hidden="true" />
                                             <span>Never</span>
                                         </li>

From ed4ba703a6eaffd47efc3e48e6e1e8256cacbc90 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 10:35:52 +0100
Subject: [PATCH 018/110] This can just be Tailwind for now

---
 resources/css/components/forms/charts.css | 5 -----
 resources/css/cp.css                      | 1 -
 resources/js/pages/forms/Submissions.vue  | 3 ++-
 3 files changed, 2 insertions(+), 7 deletions(-)
 delete mode 100644 resources/css/components/forms/charts.css

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
deleted file mode 100644
index 4fafe372f9..0000000000
--- a/resources/css/components/forms/charts.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.pie-chart {
-    width: 9rem;
-    aspect-ratio: 1 / 1;
-    border-radius: 50%;
-}
\ No newline at end of file
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 91dd3b5d8d..cb32123428 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -18,7 +18,6 @@
 @import './components/notifications.css';
 @import './components/page-tree.css';
 @import './components/forms.css';
-@import './components/forms/charts.css';
 @import './components/pagination.css';
 @import './components/popover.css';
 @import './components/preview.css';
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index a3f77e46fc..a187820929 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -267,7 +267,8 @@ function exportSubmissions() {
                         >
                             <figure class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
                                 <div
-                                    class="pie-chart"
+                                    data-pie-chart
+                                    class="w-36 aspect-square rounded-full"
                                     style="
                                         /* These slices would be dynamic based on the data */
                                         --1: 45%;

From 53a03512718105313aea4f722c4403c9ea19af46 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 11:16:08 +0100
Subject: [PATCH 019/110] Lollipop graph draft

---
 resources/js/pages/forms/Submissions.vue | 73 +++++++++++++++++++++---
 1 file changed, 65 insertions(+), 8 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index a187820929..761a240374 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -37,7 +37,8 @@ const exportModalOpen = ref(false);
 const exportFormat = ref(null);
 const exportScope = ref('all');
 const listingParameters = ref({});
-const legendId = useId();
+const pieLegendId = useId();
+const rankingChartCaptionId = useId();
 
 async function generateFakeSubmission(mode) {
     if (generatingFakeSubmission.value) {
@@ -263,7 +264,7 @@ function exportSubmissions() {
                             :title="__('Wake me up')"
                             title-tag="h2"
                             icon="fieldtype-radio"
-                            icon-class="size-4.5 text-gray-500 hidden @xs/widget:block"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
                                 <div
@@ -289,28 +290,28 @@ function exportSubmissions() {
                                         );
                                     "
                                     role="img"
-                                    :aria-labelledby="legendId"
+                                    :aria-labelledby="pieLegendId"
                                 />
-                                <figcaption :id="legendId" class="pt-4">
+                                <figcaption :id="pieLegendId" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2">
                                             <span class="font-medium">45%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" aria-hidden="true" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" />
                                             <span>Before you Go Go</span>
                                         </li>
                                         <li class="flex items-center gap-2">
                                             <span class="font-medium">30%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-gray-800" aria-hidden="true" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-gray-800" />
                                             <span>Bring me Back to Life</span>
                                         </li>
                                         <li class="flex items-center gap-2">
                                             <span class="font-medium">15%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-lime-500" aria-hidden="true" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-lime-500" />
                                             <span>When September Ends</span>
                                         </li>
                                         <li class="flex items-center gap-2">
                                             <span class="font-medium">10%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" aria-hidden="true" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
                                             <span>Never</span>
                                         </li>
                                     </ul>
@@ -318,6 +319,62 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <div class="px-3 starting-style-transition w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('Rank your favourite seasons')"
+                            title-tag="h2"
+                            icon="rank"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <figure class="p-6" :aria-labelledby="rankingChartCaptionId">
+                                <ol class="m-0 flex list-none flex-col gap-5 p-0">
+                                    <li class="grid grid-cols-[1.25rem_1rem_minmax(3.5rem,auto)_1fr_auto] items-center gap-x-3 gap-y-2">
+                                        <span class="text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400" aria-hidden="true">1</span>
+                                        <span class="size-3.5 shrink-0 rounded-md bg-indigo-500" />
+                                        <span class="text-sm text-gray-900 dark:text-gray-100">Summer</span>
+                                        <div class="relative flex min-h-3 min-w-0 items-center">
+                                            <div class="h-px w-[45%] bg-gray-300 dark:bg-gray-600" />
+                                            <div class="size-3 -ms-1.5 shrink-0 rounded-full bg-indigo-500" />
+                                        </div>
+                                        <span class="min-w-9 text-end text-sm font-medium tabular-nums text-indigo-500">45%</span>
+                                    </li>
+                                    <li class="grid grid-cols-[1.25rem_1rem_minmax(3.5rem,auto)_1fr_auto] items-center gap-x-3 gap-y-2">
+                                        <span class="text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400" aria-hidden="true">2</span>
+                                        <span class="size-3.5 shrink-0 rounded-md bg-gray-800" />
+                                        <span class="text-sm text-gray-900 dark:text-gray-100">Autumn</span>
+                                        <div class="relative flex min-h-3 min-w-0 items-center">
+                                            <div class="h-px w-[35%] bg-gray-300 dark:bg-gray-600" />
+                                            <div class="size-3 -ms-1.5 shrink-0 rounded-full bg-gray-800" />
+                                        </div>
+                                        <span class="min-w-9 text-end text-sm font-medium tabular-nums text-gray-800">35%</span>
+                                    </li>
+                                    <li class="grid grid-cols-[1.25rem_1rem_minmax(3.5rem,auto)_1fr_auto] items-center gap-x-3 gap-y-2">
+                                        <span class="text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400" aria-hidden="true">3</span>
+                                        <span class="size-3.5 shrink-0 rounded-md bg-lime-500" />
+                                        <span class="text-sm text-gray-900 dark:text-gray-100">Spring</span>
+                                        <div class="relative flex min-h-3 min-w-0 items-center">
+                                            <div class="h-px w-[15%] bg-gray-300 dark:bg-gray-600" />
+                                            <div class="size-3 -ms-1.5 shrink-0 rounded-full bg-lime-500" />
+                                        </div>
+                                        <span class="min-w-9 text-end text-sm font-medium tabular-nums text-lime-500">15%</span>
+                                    </li>
+                                    <li class="grid grid-cols-[1.25rem_1rem_minmax(3.5rem,auto)_1fr_auto] items-center gap-x-3 gap-y-2">
+                                        <span class="text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400" aria-hidden="true">4</span>
+                                        <span class="size-3.5 shrink-0 rounded-md bg-indigo-400" />
+                                        <span class="text-sm text-gray-900 dark:text-gray-100">Winter</span>
+                                        <div class="relative flex min-h-3 min-w-0 items-center">
+                                            <div class="h-px w-[10%] bg-gray-300 dark:bg-gray-600" />
+                                            <div class="size-3 -ms-1.5 shrink-0 rounded-full bg-indigo-400" />
+                                        </div>
+                                        <span class="min-w-9 text-end text-sm font-medium tabular-nums text-indigo-400">10%</span>
+                                    </li>
+                                </ol>
+                                <figcaption :id="rankingChartCaptionId" class="sr-only">
+                                    {{ __('Ranked favourite seasons: Summer 45%, Autumn 35%, Spring 15%, Winter 10%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From 03eb5f7f6c7951c7088ea7f2a84847277eb204cd Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 12:21:38 +0100
Subject: [PATCH 020/110] Lollipop graph - tidy

---
 resources/js/pages/forms/Submissions.vue | 86 ++++++++++++------------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 761a240374..ea50c17cf4 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -263,6 +263,7 @@ function exportSubmissions() {
                         <Widget
                             :title="__('Wake me up')"
                             title-tag="h2"
+                            class="h-full"
                             icon="fieldtype-radio"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
@@ -294,23 +295,23 @@ function exportSubmissions() {
                                 />
                                 <figcaption :id="pieLegendId" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
-                                        <li class="flex items-center gap-2">
-                                            <span class="font-medium">45%</span>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">45%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" />
                                             <span>Before you Go Go</span>
                                         </li>
-                                        <li class="flex items-center gap-2">
-                                            <span class="font-medium">30%</span>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">30%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-gray-800" />
                                             <span>Bring me Back to Life</span>
                                         </li>
-                                        <li class="flex items-center gap-2">
-                                            <span class="font-medium">15%</span>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">15%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-lime-500" />
                                             <span>When September Ends</span>
                                         </li>
-                                        <li class="flex items-center gap-2">
-                                            <span class="font-medium">10%</span>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">10%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
                                             <span>Never</span>
                                         </li>
@@ -323,50 +324,51 @@ function exportSubmissions() {
                         <Widget
                             :title="__('Rank your favourite seasons')"
                             title-tag="h2"
+                            class="h-full"
                             icon="rank"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="p-6" :aria-labelledby="rankingChartCaptionId">
-                                <ol class="m-0 flex list-none flex-col gap-5 p-0">
-                                    <li class="grid grid-cols-[1.25rem_1rem_minmax(3.5rem,auto)_1fr_auto] items-center gap-x-3 gap-y-2">
-                                        <span class="text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400" aria-hidden="true">1</span>
-                                        <span class="size-3.5 shrink-0 rounded-md bg-indigo-500" />
-                                        <span class="text-sm text-gray-900 dark:text-gray-100">Summer</span>
-                                        <div class="relative flex min-h-3 min-w-0 items-center">
-                                            <div class="h-px w-[45%] bg-gray-300 dark:bg-gray-600" />
-                                            <div class="size-3 -ms-1.5 shrink-0 rounded-full bg-indigo-500" />
+                            <figure class="p-6 grid" :aria-labelledby="rankingChartCaptionId">
+                                <ol class="m-0 list-none grid gap-2.5 p-0 pt-4">
+                                    <li class="flex items-center gap-2.25">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-indigo-500" />
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Summer</span>
+                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                            <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="size-2 rounded-full bg-indigo-500" />
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         </div>
-                                        <span class="min-w-9 text-end text-sm font-medium tabular-nums text-indigo-500">45%</span>
                                     </li>
-                                    <li class="grid grid-cols-[1.25rem_1rem_minmax(3.5rem,auto)_1fr_auto] items-center gap-x-3 gap-y-2">
-                                        <span class="text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400" aria-hidden="true">2</span>
-                                        <span class="size-3.5 shrink-0 rounded-md bg-gray-800" />
-                                        <span class="text-sm text-gray-900 dark:text-gray-100">Autumn</span>
-                                        <div class="relative flex min-h-3 min-w-0 items-center">
-                                            <div class="h-px w-[35%] bg-gray-300 dark:bg-gray-600" />
-                                            <div class="size-3 -ms-1.5 shrink-0 rounded-full bg-gray-800" />
+                                    <li class="flex items-center gap-2.25">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">2</span>
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-gray-800" />
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
+                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                            <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="size-2 rounded-full bg-gray-800" />
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
                                         </div>
-                                        <span class="min-w-9 text-end text-sm font-medium tabular-nums text-gray-800">35%</span>
                                     </li>
-                                    <li class="grid grid-cols-[1.25rem_1rem_minmax(3.5rem,auto)_1fr_auto] items-center gap-x-3 gap-y-2">
-                                        <span class="text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400" aria-hidden="true">3</span>
-                                        <span class="size-3.5 shrink-0 rounded-md bg-lime-500" />
-                                        <span class="text-sm text-gray-900 dark:text-gray-100">Spring</span>
-                                        <div class="relative flex min-h-3 min-w-0 items-center">
-                                            <div class="h-px w-[15%] bg-gray-300 dark:bg-gray-600" />
-                                            <div class="size-3 -ms-1.5 shrink-0 rounded-full bg-lime-500" />
+                                    <li class="flex items-center gap-2.25">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">3</span>
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-lime-500" />
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Spring</span>
+                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                            <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="size-2 rounded-full bg-lime-500" />
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
                                         </div>
-                                        <span class="min-w-9 text-end text-sm font-medium tabular-nums text-lime-500">15%</span>
                                     </li>
-                                    <li class="grid grid-cols-[1.25rem_1rem_minmax(3.5rem,auto)_1fr_auto] items-center gap-x-3 gap-y-2">
-                                        <span class="text-sm font-medium tabular-nums text-gray-500 dark:text-gray-400" aria-hidden="true">4</span>
-                                        <span class="size-3.5 shrink-0 rounded-md bg-indigo-400" />
-                                        <span class="text-sm text-gray-900 dark:text-gray-100">Winter</span>
-                                        <div class="relative flex min-h-3 min-w-0 items-center">
-                                            <div class="h-px w-[10%] bg-gray-300 dark:bg-gray-600" />
-                                            <div class="size-3 -ms-1.5 shrink-0 rounded-full bg-indigo-400" />
+                                    <li class="flex items-center gap-2.25">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">4</span>
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-indigo-300" />
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Winter</span>
+                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                            <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="size-2 rounded-full bg-indigo-300" />
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
                                         </div>
-                                        <span class="min-w-9 text-end text-sm font-medium tabular-nums text-indigo-400">10%</span>
                                     </li>
                                 </ol>
                                 <figcaption :id="rankingChartCaptionId" class="sr-only">

From 20d99f0c5d077d80861f19bf0228ff8917373d9b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 14:39:48 +0100
Subject: [PATCH 021/110] Pie chart - add hover labels

---
 resources/css/components/forms/charts.css | 61 +++++++++++++++++++++++
 resources/css/cp.css                      |  1 +
 resources/js/pages/forms/Submissions.vue  | 32 ++++--------
 3 files changed, 72 insertions(+), 22 deletions(-)
 create mode 100644 resources/css/components/forms/charts.css

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
new file mode 100644
index 0000000000..c566e9e7a6
--- /dev/null
+++ b/resources/css/components/forms/charts.css
@@ -0,0 +1,61 @@
+/* GROUP CHARTS / PIE CHART
+=================================================== */
+.pie-chart {
+    --label-radius: 30%;
+
+    position: relative;
+    width: 9rem;
+    aspect-ratio: 1 / 1;
+
+    /* Slice sizes as unitless numbers (percent of circle). */
+    --end1: calc(var(--1) * 1%);
+    --end2: calc((var(--1) + var(--2)) * 1%);
+    --end3: calc((var(--1) + var(--2) + var(--3)) * 1%);
+    --end4: 100%;
+
+    /* Midpoint angle for each slice (100% = 360deg). */
+    --angle1: calc(var(--1) * 3.6deg / 2);
+    --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
+    --angle3: calc((var(--1) + var(--2) + var(--3) / 2) * 3.6deg);
+    --angle4: calc((var(--1) + var(--2) + var(--3) + var(--4) / 2) * 3.6deg);
+
+    &:hover {
+        .pie-chart__label {
+            opacity: unset;
+        }
+    }
+}
+
+.pie-chart__disc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-image: conic-gradient(
+        var(--color-indigo-500) 0% var(--end1),
+        var(--color-gray-800) var(--end1) var(--end2),
+        var(--color-lime-500) var(--end2) var(--end3),
+        var(--color-indigo-200) var(--end3) var(--end4)
+    );
+}
+
+.pie-chart__label {
+    --angle: 0deg;
+    opacity: 0;
+    transition: opacity 0.2s ease-in 0s;
+
+    padding: 0.075rem 0.15rem;
+    border-radius: 0.25rem;
+
+    position: absolute;
+    left: calc(50% + var(--label-radius) * sin(var(--angle)));
+    top: calc(50% - var(--label-radius) * cos(var(--angle)));
+    transform: translate(-50%, -50%);
+
+    @apply text-xs font-medium tabular-nums text-white pointer-events-none;
+}
+
+.pie-chart__label--1 { --angle: var(--angle1); background-color: var(--color-indigo-600); }
+.pie-chart__label--2 { --angle: var(--angle2); }
+.pie-chart__label--3 { --angle: var(--angle3); background-color: var(--color-lime-600); }
+.pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-indigo-400); }
diff --git a/resources/css/cp.css b/resources/css/cp.css
index cb32123428..91dd3b5d8d 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -18,6 +18,7 @@
 @import './components/notifications.css';
 @import './components/page-tree.css';
 @import './components/forms.css';
+@import './components/forms/charts.css';
 @import './components/pagination.css';
 @import './components/popover.css';
 @import './components/preview.css';
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index ea50c17cf4..714e87c1a3 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -269,30 +269,18 @@ function exportSubmissions() {
                         >
                             <figure class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
                                 <div
-                                    data-pie-chart
-                                    class="w-36 aspect-square rounded-full"
-                                    style="
-                                        /* These slices would be dynamic based on the data */
-                                        --1: 45%;
-                                        --2: 30%;
-                                        --3: 15%;
-                                        --4: 10%;
-
-                                        --end1: var(--1);
-                                        --end2: calc(var(--1) + var(--2));
-                                        --end3: calc(var(--1) + var(--2) + var(--3));
-                                        --end4: 100%;
-
-                                        background-image: conic-gradient(
-                                            var(--color-indigo-500) 0% var(--end1),
-                                            var(--color-gray-800) var(--end1) var(--end2),
-                                            var(--color-lime-500) var(--end2) var(--end3),
-                                            var(--color-indigo-200) var(--end3) var(--end4)
-                                        );
-                                    "
+                                    class="pie-chart"
+                                    style="--1: 45; --2: 30; --3: 15; --4: 10;"
                                     role="img"
                                     :aria-labelledby="pieLegendId"
-                                />
+                                >
+                                    <div class="pie-chart__disc" aria-hidden="true" />
+                                    <!-- aria-hidden because the labels are already in the figure caption -->
+                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">45%</span>
+                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">30%</span>
+                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">15%</span>
+                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">10%</span>
+                                </div>
                                 <figcaption :id="pieLegendId" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">

From f74d496029823fa3888d0518e48d05a327dd901e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 15:19:27 +0100
Subject: [PATCH 022/110] Pie chart - start building pagination demo

---
 resources/css/components/forms/charts.css |   3 +-
 resources/js/pages/forms/Submissions.vue  | 119 +++++++++++++++++++++-
 2 files changed, 120 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index c566e9e7a6..7e035c8456 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -58,4 +58,5 @@
 .pie-chart__label--1 { --angle: var(--angle1); background-color: var(--color-indigo-600); }
 .pie-chart__label--2 { --angle: var(--angle2); }
 .pie-chart__label--3 { --angle: var(--angle3); background-color: var(--color-lime-600); }
-.pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-indigo-400); }
+/* Kick the radius out a bit because the label segment is smaller, and it might overlap with the preceding segment. */
+.pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-indigo-400); --label-radius: 39%; }
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 714e87c1a3..79b72dc560 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -2,7 +2,7 @@
 import { ref, computed, watch, useId } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
-import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem, Widget } from '@ui';
+import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem, Widget, Pagination } from '@ui';
 import ResourceDeleter from '@/components/ResourceDeleter.vue';
 import FormSubmissionListing from '@/components/forms/SubmissionListing.vue';
 import Layout from '@/pages/layout/Layout.vue';
@@ -38,8 +38,28 @@ const exportFormat = ref(null);
 const exportScope = ref('all');
 const listingParameters = ref({});
 const pieLegendId = useId();
+const pieLegendPage2Id = useId();
 const rankingChartCaptionId = useId();
 
+// Mock in-widget pagination for fields with more than four response options.
+const wakeMeUpChartPage = ref(1);
+const wakeMeUpChartPerPage = 4;
+const wakeMeUpChartTotal = 8;
+
+const wakeMeUpChartMeta = computed(() => {
+    const from = (wakeMeUpChartPage.value - 1) * wakeMeUpChartPerPage + 1;
+    const to = Math.min(wakeMeUpChartPage.value * wakeMeUpChartPerPage, wakeMeUpChartTotal);
+
+    return {
+        current_page: wakeMeUpChartPage.value,
+        last_page: Math.ceil(wakeMeUpChartTotal / wakeMeUpChartPerPage),
+        per_page: wakeMeUpChartPerPage,
+        total: wakeMeUpChartTotal,
+        from,
+        to,
+    };
+});
+
 async function generateFakeSubmission(mode) {
     if (generatingFakeSubmission.value) {
         return;
@@ -308,6 +328,103 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <div class="px-3 starting-style-transition w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('I love to wake up...')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-radio"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <template #actions>
+                                <Pagination
+                                    :resource-meta="wakeMeUpChartMeta"
+                                    :show-totals="false"
+                                    :show-page-links="false"
+                                    :show-per-page-selector="false"
+                                    :scroll-to-top="false"
+                                    @page-selected="wakeMeUpChartPage = $event"
+                                />
+                            </template>
+                            <figure v-if="wakeMeUpChartPage === 1" class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
+                                <div
+                                    class="pie-chart"
+                                    style="--1: 68; --2: 18; --3: 9; --4: 5;"
+                                    role="img"
+                                    :aria-labelledby="pieLegendId"
+                                >
+                                    <div class="pie-chart__disc" aria-hidden="true" />
+                                    <!-- aria-hidden because the labels are already in the figure caption -->
+                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">68%</span>
+                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">18%</span>
+                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">9%</span>
+                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
+                                </div>
+                                <figcaption :id="pieLegendId" class="pt-4">
+                                    <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">68%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" />
+                                            <span>Alarm, no mercy</span>
+                                        </li>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">18%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-gray-800" />
+                                            <span>Hit snooze</span>
+                                        </li>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">9%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-lime-500" />
+                                            <span>Woken by someone else</span>
+                                        </li>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">5%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
+                                            <span>I wake up naturally</span>
+                                        </li>
+                                    </ul>
+                                </figcaption>
+                            </figure>
+                            <figure v-else-if="wakeMeUpChartPage === 2" class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
+                                <div
+                                    class="pie-chart"
+                                    style="--1: 68; --2: 18; --3: 9; --4: 5;"
+                                    role="img"
+                                    :aria-labelledby="pieLegendPage2Id"
+                                >
+                                    <div class="pie-chart__disc" aria-hidden="true" />
+                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">68%</span>
+                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">18%</span>
+                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">9%</span>
+                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
+                                </div>
+                                <figcaption :id="pieLegendPage2Id" class="pt-4">
+                                    <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">45%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" />
+                                            <span>Bohemian Rhapsody</span>
+                                        </li>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">30%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-gray-800" />
+                                            <span>Stairway to Heaven</span>
+                                        </li>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">15%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-lime-500" />
+                                            <span>Hey Jude</span>
+                                        </li>
+                                        <li class="flex items-center gap-2.25">
+                                            <span class="font-medium text-[0.785rem]">10%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
+                                            <span>Wonderwall</span>
+                                        </li>
+                                    </ul>
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                     <div class="px-3 starting-style-transition w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Rank your favourite seasons')"

From 0b380b6c520298b0693198ba3b618784ce0b12cd Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 15:45:36 +0100
Subject: [PATCH 023/110] Pie chart - finish pagination demo

---
 resources/css/components/forms/charts.css | 27 +++++++++++++++++++++++
 resources/js/pages/forms/Submissions.vue  | 19 ++++++----------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 7e035c8456..f8c732cd30 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -60,3 +60,30 @@
 .pie-chart__label--3 { --angle: var(--angle3); background-color: var(--color-lime-600); }
 /* Kick the radius out a bit because the label segment is smaller, and it might overlap with the preceding segment. */
 .pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-indigo-400); --label-radius: 39%; }
+
+
+
+
+/* GROUP CHARTS / PIE CHART / MODIFIERS
+=================================================== */
+.pie-chart--other-segment {
+    .pie-chart__label,
+    &.pie-chart:hover .pie-chart__label {
+        opacity: 0;
+    }
+
+    .pie-chart__label--4,
+    &.pie-chart:hover .pie-chart__label--4 {
+        opacity: 1;
+        border: 2px solid black;
+    }
+
+    .pie-chart__disc {
+        background-image: conic-gradient(
+            hsl(from var(--color-indigo-500) h s l / 0.1) 0% var(--end1),
+            hsl(from var(--color-gray-800) h s l / 0.1) var(--end1) var(--end2),
+            hsl(from var(--color-lime-500) h s l / 0.1) var(--end2) var(--end3),
+            var(--color-indigo-200) var(--end3) var(--end4)
+        );
+    }
+}
\ No newline at end of file
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 79b72dc560..70a1b85289 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -380,14 +380,14 @@ function exportSubmissions() {
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">5%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
-                                            <span>I wake up naturally</span>
+                                            <span>Other</span>
                                         </li>
                                     </ul>
                                 </figcaption>
                             </figure>
                             <figure v-else-if="wakeMeUpChartPage === 2" class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
                                 <div
-                                    class="pie-chart"
+                                    class="pie-chart pie-chart--other-segment"
                                     style="--1: 68; --2: 18; --3: 9; --4: 5;"
                                     role="img"
                                     :aria-labelledby="pieLegendPage2Id"
@@ -401,22 +401,17 @@ function exportSubmissions() {
                                 <figcaption :id="pieLegendPage2Id" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">45%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" />
+                                            <span class="font-medium text-[0.785rem]">3%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
                                             <span>Bohemian Rhapsody</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">30%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-gray-800" />
+                                            <span class="font-medium text-[0.785rem]">1%</span>
+                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
                                             <span>Stairway to Heaven</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">15%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-lime-500" />
-                                            <span>Hey Jude</span>
-                                        </li>
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">10%</span>
+                                            <span class="font-medium text-[0.785rem]">1%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
                                             <span>Wonderwall</span>
                                         </li>

From 3e3b94ab4cd1cec58041483a300a69d2b3995bec Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 15:56:03 +0100
Subject: [PATCH 024/110] Make charts themeable

---
 .storybook/theme.css                      | 16 ++++++++++
 resources/css/components/forms/charts.css | 24 +++++++-------
 resources/css/ui.css                      |  8 +++++
 resources/js/components/themes/index.ts   |  8 +++++
 resources/js/components/themes/types.ts   |  8 +++++
 resources/js/pages/forms/Submissions.vue  | 38 +++++++++++------------
 src/CP/Color.php                          | 16 ++++++++++
 7 files changed, 87 insertions(+), 31 deletions(-)

diff --git a/.storybook/theme.css b/.storybook/theme.css
index 36e4eb449e..8239cde84b 100644
--- a/.storybook/theme.css
+++ b/.storybook/theme.css
@@ -31,6 +31,14 @@ manually copy them here.
     --theme-color-ui-accent-bg: oklch(0.457 0.24 277.023);
     --theme-color-ui-accent-text: var(--theme-color-ui-accent-bg);
     --theme-color-switch-bg: var(--theme-color-ui-accent-bg);
+    --theme-color-chart-1: oklch(0.585 0.233 277.117);
+    --theme-color-chart-2: oklch(0.274 0.006 286.033);
+    --theme-color-chart-3: oklch(0.768 0.233 130.85);
+    --theme-color-chart-4: oklch(0.87 0.065 274.039);
+    --theme-color-chart-1-label-bg: oklch(0.511 0.262 276.966);
+    --theme-color-chart-2-label-bg: transparent;
+    --theme-color-chart-3-label-bg: oklch(0.648 0.2 131.684);
+    --theme-color-chart-4-label-bg: oklch(0.673 0.182 276.935);
 
     --z-index-below: -1;
     --z-index-above: 1;
@@ -45,6 +53,14 @@ manually copy them here.
         --theme-color-content-bg: oklch(0.21 0.006 285.885);
         --theme-color-content-border: oklch(0.141 0.005 285.823);
         --theme-color-ui-accent-text: oklch(0.673 0.182 276.935);
+        --theme-color-chart-1: oklch(0.673 0.182 276.935);
+        --theme-color-chart-2: oklch(0.552 0.016 285.938);
+        --theme-color-chart-3: oklch(0.841 0.238 128.85);
+        --theme-color-chart-4: oklch(0.785 0.115 274.713);
+        --theme-color-chart-1-label-bg: oklch(0.585 0.233 277.117);
+        --theme-color-chart-2-label-bg: transparent;
+        --theme-color-chart-3-label-bg: oklch(0.768 0.233 130.85);
+        --theme-color-chart-4-label-bg: oklch(0.673 0.182 276.935);
     }
 }
 
diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index f8c732cd30..520bb7e51d 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -32,10 +32,10 @@
     height: 100%;
     border-radius: 50%;
     background-image: conic-gradient(
-        var(--color-indigo-500) 0% var(--end1),
-        var(--color-gray-800) var(--end1) var(--end2),
-        var(--color-lime-500) var(--end2) var(--end3),
-        var(--color-indigo-200) var(--end3) var(--end4)
+        var(--color-chart-1) 0% var(--end1),
+        var(--color-chart-2) var(--end1) var(--end2),
+        var(--color-chart-3) var(--end2) var(--end3),
+        var(--color-chart-4) var(--end3) var(--end4)
     );
 }
 
@@ -55,11 +55,11 @@
     @apply text-xs font-medium tabular-nums text-white pointer-events-none;
 }
 
-.pie-chart__label--1 { --angle: var(--angle1); background-color: var(--color-indigo-600); }
-.pie-chart__label--2 { --angle: var(--angle2); }
-.pie-chart__label--3 { --angle: var(--angle3); background-color: var(--color-lime-600); }
+.pie-chart__label--1 { --angle: var(--angle1); background-color: var(--color-chart-1-label-bg); }
+.pie-chart__label--2 { --angle: var(--angle2); background-color: var(--color-chart-2-label-bg); }
+.pie-chart__label--3 { --angle: var(--angle3); background-color: var(--color-chart-3-label-bg); }
 /* Kick the radius out a bit because the label segment is smaller, and it might overlap with the preceding segment. */
-.pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-indigo-400); --label-radius: 39%; }
+.pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-chart-4-label-bg); --label-radius: 39%; }
 
 
 
@@ -80,10 +80,10 @@
 
     .pie-chart__disc {
         background-image: conic-gradient(
-            hsl(from var(--color-indigo-500) h s l / 0.1) 0% var(--end1),
-            hsl(from var(--color-gray-800) h s l / 0.1) var(--end1) var(--end2),
-            hsl(from var(--color-lime-500) h s l / 0.1) var(--end2) var(--end3),
-            var(--color-indigo-200) var(--end3) var(--end4)
+            hsl(from var(--color-chart-1) h s l / 0.1) 0% var(--end1),
+            hsl(from var(--color-chart-2) h s l / 0.1) var(--end1) var(--end2),
+            hsl(from var(--color-chart-3) h s l / 0.1) var(--end2) var(--end3),
+            var(--color-chart-4) var(--end3) var(--end4)
         );
     }
 }
\ No newline at end of file
diff --git a/resources/css/ui.css b/resources/css/ui.css
index 16816ecbe1..a658905174 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -30,6 +30,14 @@
     --color-ui-accent-bg: var(--theme-color-ui-accent-bg);
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
+    --color-chart-1: var(--theme-color-chart-1);
+    --color-chart-2: var(--theme-color-chart-2);
+    --color-chart-3: var(--theme-color-chart-3);
+    --color-chart-4: var(--theme-color-chart-4);
+    --color-chart-1-label-bg: var(--theme-color-chart-1-label-bg);
+    --color-chart-2-label-bg: var(--theme-color-chart-2-label-bg);
+    --color-chart-3-label-bg: var(--theme-color-chart-3-label-bg);
+    --color-chart-4-label-bg: var(--theme-color-chart-4-label-bg);
 
     /* Custom color shades for all Tailwind color families */
     --color-slate-150: oklch(0.9485 0.01 251.702);
diff --git a/resources/js/components/themes/index.ts b/resources/js/components/themes/index.ts
index 8659dcafa9..3bcc23b673 100644
--- a/resources/js/components/themes/index.ts
+++ b/resources/js/components/themes/index.ts
@@ -244,6 +244,14 @@ export const colors = [
     { name: 'switch-bg', label: 'Switch Background', },
     { name: 'success', label: 'Success', },
     { name: 'danger', label: 'Danger', },
+    { name: 'chart-1', label: 'Chart 1', },
+    { name: 'chart-2', label: 'Chart 2', },
+    { name: 'chart-3', label: 'Chart 3', },
+    { name: 'chart-4', label: 'Chart 4', },
+    { name: 'chart-1-label-bg', label: 'Chart 1 Label', },
+    { name: 'chart-2-label-bg', label: 'Chart 2 Label', },
+    { name: 'chart-3-label-bg', label: 'Chart 3 Label', },
+    { name: 'chart-4-label-bg', label: 'Chart 4 Label', },
     { name: 'gray-50', label: 'Gray 50', },
     { name: 'gray-100', label: 'Gray 100', },
     { name: 'gray-150', label: 'Gray 150', },
diff --git a/resources/js/components/themes/types.ts b/resources/js/components/themes/types.ts
index 7899532a99..e66a638aa3 100644
--- a/resources/js/components/themes/types.ts
+++ b/resources/js/components/themes/types.ts
@@ -16,6 +16,14 @@ export type ColorVariableName =
     | 'ui-accent-bg'
     | 'ui-accent-text'
     | 'switch-bg'
+    | 'chart-1'
+    | 'chart-2'
+    | 'chart-3'
+    | 'chart-4'
+    | 'chart-1-label-bg'
+    | 'chart-2-label-bg'
+    | 'chart-3-label-bg'
+    | 'chart-4-label-bg'
     | 'gray-50'
     | 'gray-100'
     | 'gray-150'
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 70a1b85289..d3cd1c6ef9 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -305,22 +305,22 @@ function exportSubmissions() {
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">45%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-1" />
                                             <span>Before you Go Go</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">30%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-gray-800" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-2" />
                                             <span>Bring me Back to Life</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">15%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-lime-500" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-3" />
                                             <span>When September Ends</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">10%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Never</span>
                                         </li>
                                     </ul>
@@ -364,22 +364,22 @@ function exportSubmissions() {
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">68%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-500" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-1" />
                                             <span>Alarm, no mercy</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">18%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-gray-800" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-2" />
                                             <span>Hit snooze</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">9%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-lime-500" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-3" />
                                             <span>Woken by someone else</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">5%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Other</span>
                                         </li>
                                     </ul>
@@ -402,17 +402,17 @@ function exportSubmissions() {
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">3%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Bohemian Rhapsody</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">1%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Stairway to Heaven</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem]">1%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-indigo-300" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Wonderwall</span>
                                         </li>
                                     </ul>
@@ -432,41 +432,41 @@ function exportSubmissions() {
                                 <ol class="m-0 list-none grid gap-2.5 p-0 pt-4">
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-indigo-500" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-1" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Summer</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-indigo-500" />
+                                            <div class="size-2 rounded-full bg-chart-1" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">2</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-gray-800" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-2" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-gray-800" />
+                                            <div class="size-2 rounded-full bg-chart-2" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">3</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-lime-500" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-3" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Spring</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-lime-500" />
+                                            <div class="size-2 rounded-full bg-chart-3" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">4</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-indigo-300" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-4" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Winter</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-indigo-300" />
+                                            <div class="size-2 rounded-full bg-chart-4" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
                                         </div>
                                     </li>
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 1fa4fbaa1d..723af570aa 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -420,6 +420,22 @@ 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)',
+            'chart-1' => self::Indigo[500],
+            'chart-2' => self::Zinc[800],
+            'chart-3' => self::Lime[500],
+            'chart-4' => self::Indigo[200],
+            'chart-1-label-bg' => self::Indigo[600],
+            'chart-2-label-bg' => self::Transparent,
+            'chart-3-label-bg' => self::Lime[600],
+            'chart-4-label-bg' => self::Indigo[400],
+            'dark-chart-1' => self::Indigo[400],
+            'dark-chart-2' => self::Zinc[500],
+            'dark-chart-3' => self::Lime[400],
+            'dark-chart-4' => self::Indigo[300],
+            'dark-chart-1-label-bg' => self::Indigo[500],
+            'dark-chart-2-label-bg' => self::Transparent,
+            'dark-chart-3-label-bg' => self::Lime[500],
+            'dark-chart-4-label-bg' => self::Indigo[400],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From 4419e24e23aff0070f2b0a5c18909d419db86623 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 16:03:35 +0100
Subject: [PATCH 025/110] Pie chart - improve single digit alignment

---
 resources/js/pages/forms/Submissions.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index d3cd1c6ef9..e4e68bead4 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -304,22 +304,22 @@ function exportSubmissions() {
                                 <figcaption :id="pieLegendId" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">45%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">45%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-1" />
                                             <span>Before you Go Go</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">30%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">30%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-2" />
                                             <span>Bring me Back to Life</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">15%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">15%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-3" />
                                             <span>When September Ends</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">10%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">10%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Never</span>
                                         </li>
@@ -330,7 +330,7 @@ function exportSubmissions() {
                     </div>
                     <div class="px-3 starting-style-transition w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
-                            :title="__('I love to wake up...')"
+                            :title="__('Pie chart pagination demo')"
                             title-tag="h2"
                             class="h-full"
                             icon="fieldtype-radio"
@@ -363,22 +363,22 @@ function exportSubmissions() {
                                 <figcaption :id="pieLegendId" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">68%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">68%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-1" />
                                             <span>Alarm, no mercy</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">18%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">18%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-2" />
                                             <span>Hit snooze</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">9%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">9%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-3" />
                                             <span>Woken by someone else</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">5%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">5%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Other</span>
                                         </li>
@@ -401,17 +401,17 @@ function exportSubmissions() {
                                 <figcaption :id="pieLegendPage2Id" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">3%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">3%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Bohemian Rhapsody</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">1%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">1%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Stairway to Heaven</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem]">1%</span>
+                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">1%</span>
                                             <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
                                             <span>Wonderwall</span>
                                         </li>

From 30acfd9d9000ccd572c97022328e9ff273c5b85f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 16:16:08 +0100
Subject: [PATCH 026/110] Charts - improve dark mode

---
 .storybook/theme.css | 12 ++++++------
 src/CP/Color.php     | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/.storybook/theme.css b/.storybook/theme.css
index 8239cde84b..b9b68ca1c7 100644
--- a/.storybook/theme.css
+++ b/.storybook/theme.css
@@ -53,13 +53,13 @@ manually copy them here.
         --theme-color-content-bg: oklch(0.21 0.006 285.885);
         --theme-color-content-border: oklch(0.141 0.005 285.823);
         --theme-color-ui-accent-text: oklch(0.673 0.182 276.935);
-        --theme-color-chart-1: oklch(0.673 0.182 276.935);
-        --theme-color-chart-2: oklch(0.552 0.016 285.938);
-        --theme-color-chart-3: oklch(0.841 0.238 128.85);
-        --theme-color-chart-4: oklch(0.785 0.115 274.713);
-        --theme-color-chart-1-label-bg: oklch(0.585 0.233 277.117);
+        --theme-color-chart-1: oklch(0.511 0.262 276.966);
+        --theme-color-chart-2: oklch(0.141 0.005 285.823);
+        --theme-color-chart-3: oklch(0.768 0.233 130.85);
+        --theme-color-chart-4: oklch(0.87 0.065 274.039);
+        --theme-color-chart-1-label-bg: oklch(0.457 0.24 277.023);
         --theme-color-chart-2-label-bg: transparent;
-        --theme-color-chart-3-label-bg: oklch(0.768 0.233 130.85);
+        --theme-color-chart-3-label-bg: oklch(0.648 0.2 131.684);
         --theme-color-chart-4-label-bg: oklch(0.673 0.182 276.935);
     }
 }
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 723af570aa..328f5dd984 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -428,13 +428,13 @@ public static function defaults(bool $dark = false): array
             'chart-2-label-bg' => self::Transparent,
             'chart-3-label-bg' => self::Lime[600],
             'chart-4-label-bg' => self::Indigo[400],
-            'dark-chart-1' => self::Indigo[400],
-            'dark-chart-2' => self::Zinc[500],
-            'dark-chart-3' => self::Lime[400],
-            'dark-chart-4' => self::Indigo[300],
-            'dark-chart-1-label-bg' => self::Indigo[500],
+            'dark-chart-1' => self::Indigo[600],
+            'dark-chart-2' => self::Zinc[950],
+            'dark-chart-3' => self::Lime[500],
+            'dark-chart-4' => self::Indigo[200],
+            'dark-chart-1-label-bg' => self::Indigo[700],
             'dark-chart-2-label-bg' => self::Transparent,
-            'dark-chart-3-label-bg' => self::Lime[500],
+            'dark-chart-3-label-bg' => self::Lime[600],
             'dark-chart-4-label-bg' => self::Indigo[400],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)

From b9241a1132b70950a16a6eb16ed16464a0d80b65 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 16:32:02 +0100
Subject: [PATCH 027/110] Charts - improve chart legend

---
 .storybook/theme.css                     |  8 +++++
 resources/css/ui.css                     |  4 +++
 resources/js/components/themes/index.ts  |  4 +++
 resources/js/components/themes/types.ts  |  4 +++
 resources/js/pages/forms/Submissions.vue | 38 ++++++++++++------------
 src/CP/Color.php                         |  8 +++++
 6 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/.storybook/theme.css b/.storybook/theme.css
index b9b68ca1c7..cbc9cecda8 100644
--- a/.storybook/theme.css
+++ b/.storybook/theme.css
@@ -39,6 +39,10 @@ manually copy them here.
     --theme-color-chart-2-label-bg: transparent;
     --theme-color-chart-3-label-bg: oklch(0.648 0.2 131.684);
     --theme-color-chart-4-label-bg: oklch(0.673 0.182 276.935);
+    --theme-color-chart-1-legend: oklch(0.585 0.233 277.117);
+    --theme-color-chart-2-legend: oklch(0.274 0.006 286.033);
+    --theme-color-chart-3-legend: oklch(0.768 0.233 130.85);
+    --theme-color-chart-4-legend: oklch(0.785 0.115 274.713);
 
     --z-index-below: -1;
     --z-index-above: 1;
@@ -61,6 +65,10 @@ manually copy them here.
         --theme-color-chart-2-label-bg: transparent;
         --theme-color-chart-3-label-bg: oklch(0.648 0.2 131.684);
         --theme-color-chart-4-label-bg: oklch(0.673 0.182 276.935);
+        --theme-color-chart-1-legend: oklch(0.511 0.262 276.966);
+        --theme-color-chart-2-legend: oklch(0.141 0.005 285.823);
+        --theme-color-chart-3-legend: oklch(0.768 0.233 130.85);
+        --theme-color-chart-4-legend: oklch(0.785 0.115 274.713);
     }
 }
 
diff --git a/resources/css/ui.css b/resources/css/ui.css
index a658905174..3594899c94 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -38,6 +38,10 @@
     --color-chart-2-label-bg: var(--theme-color-chart-2-label-bg);
     --color-chart-3-label-bg: var(--theme-color-chart-3-label-bg);
     --color-chart-4-label-bg: var(--theme-color-chart-4-label-bg);
+    --color-chart-1-legend: var(--theme-color-chart-1-legend);
+    --color-chart-2-legend: var(--theme-color-chart-2-legend);
+    --color-chart-3-legend: var(--theme-color-chart-3-legend);
+    --color-chart-4-legend: var(--theme-color-chart-4-legend);
 
     /* Custom color shades for all Tailwind color families */
     --color-slate-150: oklch(0.9485 0.01 251.702);
diff --git a/resources/js/components/themes/index.ts b/resources/js/components/themes/index.ts
index 3bcc23b673..6923041317 100644
--- a/resources/js/components/themes/index.ts
+++ b/resources/js/components/themes/index.ts
@@ -252,6 +252,10 @@ export const colors = [
     { name: 'chart-2-label-bg', label: 'Chart 2 Label', },
     { name: 'chart-3-label-bg', label: 'Chart 3 Label', },
     { name: 'chart-4-label-bg', label: 'Chart 4 Label', },
+    { name: 'chart-1-legend', label: 'Chart 1 Legend', },
+    { name: 'chart-2-legend', label: 'Chart 2 Legend', },
+    { name: 'chart-3-legend', label: 'Chart 3 Legend', },
+    { name: 'chart-4-legend', label: 'Chart 4 Legend', },
     { name: 'gray-50', label: 'Gray 50', },
     { name: 'gray-100', label: 'Gray 100', },
     { name: 'gray-150', label: 'Gray 150', },
diff --git a/resources/js/components/themes/types.ts b/resources/js/components/themes/types.ts
index e66a638aa3..193bf73088 100644
--- a/resources/js/components/themes/types.ts
+++ b/resources/js/components/themes/types.ts
@@ -24,6 +24,10 @@ export type ColorVariableName =
     | 'chart-2-label-bg'
     | 'chart-3-label-bg'
     | 'chart-4-label-bg'
+    | 'chart-1-legend'
+    | 'chart-2-legend'
+    | 'chart-3-legend'
+    | 'chart-4-legend'
     | 'gray-50'
     | 'gray-100'
     | 'gray-150'
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index e4e68bead4..645fa41a0d 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -305,22 +305,22 @@ function exportSubmissions() {
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">45%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-1" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-1-legend" />
                                             <span>Before you Go Go</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">30%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-2" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-2-legend" />
                                             <span>Bring me Back to Life</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">15%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-3" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-3-legend" />
                                             <span>When September Ends</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">10%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
                                             <span>Never</span>
                                         </li>
                                     </ul>
@@ -364,22 +364,22 @@ function exportSubmissions() {
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">68%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-1" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-1-legend" />
                                             <span>Alarm, no mercy</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">18%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-2" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-2-legend" />
                                             <span>Hit snooze</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">9%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-3" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-3-legend" />
                                             <span>Woken by someone else</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">5%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
                                             <span>Other</span>
                                         </li>
                                     </ul>
@@ -402,17 +402,17 @@ function exportSubmissions() {
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">3%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
                                             <span>Bohemian Rhapsody</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">1%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
                                             <span>Stairway to Heaven</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">1%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4" />
+                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
                                             <span>Wonderwall</span>
                                         </li>
                                     </ul>
@@ -432,41 +432,41 @@ function exportSubmissions() {
                                 <ol class="m-0 list-none grid gap-2.5 p-0 pt-4">
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-1" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-1-legend" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Summer</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-1" />
+                                            <div class="size-2 rounded-full bg-chart-1-legend" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">2</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-2" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-2-legend" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-2" />
+                                            <div class="size-2 rounded-full bg-chart-2-legend" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">3</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-3" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-3-legend" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Spring</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-3" />
+                                            <div class="size-2 rounded-full bg-chart-3-legend" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">4</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-4" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-4-legend" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Winter</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-4" />
+                                            <div class="size-2 rounded-full bg-chart-4-legend" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
                                         </div>
                                     </li>
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 328f5dd984..b2de753883 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -428,6 +428,10 @@ public static function defaults(bool $dark = false): array
             'chart-2-label-bg' => self::Transparent,
             'chart-3-label-bg' => self::Lime[600],
             'chart-4-label-bg' => self::Indigo[400],
+            'chart-1-legend' => self::Indigo[500],
+            'chart-2-legend' => self::Zinc[800],
+            'chart-3-legend' => self::Lime[500],
+            'chart-4-legend' => self::Indigo[300],
             'dark-chart-1' => self::Indigo[600],
             'dark-chart-2' => self::Zinc[950],
             'dark-chart-3' => self::Lime[500],
@@ -436,6 +440,10 @@ public static function defaults(bool $dark = false): array
             'dark-chart-2-label-bg' => self::Transparent,
             'dark-chart-3-label-bg' => self::Lime[600],
             'dark-chart-4-label-bg' => self::Indigo[400],
+            'dark-chart-1-legend' => self::Indigo[600],
+            'dark-chart-2-legend' => self::Zinc[950],
+            'dark-chart-3-legend' => self::Lime[500],
+            'dark-chart-4-legend' => self::Indigo[300],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From 2be69cdd944fd492d9851ebc30e8af6128e315c5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 17:15:27 +0100
Subject: [PATCH 028/110] Charts - improve theming

---
 .storybook/theme.css                      | 12 ++++++------
 resources/css/components/forms/charts.css |  1 +
 resources/js/pages/forms/Submissions.vue  | 12 ++++++------
 src/CP/Color.php                          | 20 ++++++++++----------
 4 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/.storybook/theme.css b/.storybook/theme.css
index cbc9cecda8..6695be3418 100644
--- a/.storybook/theme.css
+++ b/.storybook/theme.css
@@ -58,17 +58,17 @@ manually copy them here.
         --theme-color-content-border: oklch(0.141 0.005 285.823);
         --theme-color-ui-accent-text: oklch(0.673 0.182 276.935);
         --theme-color-chart-1: oklch(0.511 0.262 276.966);
-        --theme-color-chart-2: oklch(0.141 0.005 285.823);
+        --theme-color-chart-2: oklch(0.87 0.065 274.039);
         --theme-color-chart-3: oklch(0.768 0.233 130.85);
-        --theme-color-chart-4: oklch(0.87 0.065 274.039);
+        --theme-color-chart-4: oklch(0.141 0.005 285.823);
         --theme-color-chart-1-label-bg: oklch(0.457 0.24 277.023);
-        --theme-color-chart-2-label-bg: transparent;
+        --theme-color-chart-2-label-bg: oklch(0.673 0.182 276.935);
         --theme-color-chart-3-label-bg: oklch(0.648 0.2 131.684);
-        --theme-color-chart-4-label-bg: oklch(0.673 0.182 276.935);
+        --theme-color-chart-4-label-bg: oklch(0.37 0.013 285.805);
         --theme-color-chart-1-legend: oklch(0.511 0.262 276.966);
-        --theme-color-chart-2-legend: oklch(0.141 0.005 285.823);
+        --theme-color-chart-2-legend: oklch(0.87 0.065 274.039);
         --theme-color-chart-3-legend: oklch(0.768 0.233 130.85);
-        --theme-color-chart-4-legend: oklch(0.785 0.115 274.713);
+        --theme-color-chart-4-legend: oklch(0.141 0.005 285.823);
     }
 }
 
diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 520bb7e51d..78284da53f 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -46,6 +46,7 @@
 
     padding: 0.075rem 0.15rem;
     border-radius: 0.25rem;
+    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
 
     position: absolute;
     left: calc(50% + var(--label-radius) * sin(var(--angle)));
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 645fa41a0d..c9d627801c 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -432,31 +432,31 @@ function exportSubmissions() {
                                 <ol class="m-0 list-none grid gap-2.5 p-0 pt-4">
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-1-legend" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-1" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Summer</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-1-legend" />
+                                            <div class="size-2 rounded-full bg-chart-1" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">2</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-2-legend" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-2" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-2-legend" />
+                                            <div class="size-2 rounded-full bg-chart-2" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">3</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-3-legend" />
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-3" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Spring</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-3-legend" />
+                                            <div class="size-2 rounded-full bg-chart-3" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
                                         </div>
                                     </li>
diff --git a/src/CP/Color.php b/src/CP/Color.php
index b2de753883..ebd144101d 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -424,26 +424,26 @@ public static function defaults(bool $dark = false): array
             'chart-2' => self::Zinc[800],
             'chart-3' => self::Lime[500],
             'chart-4' => self::Indigo[200],
+            'dark-chart-1' => self::Indigo[600],
+            'dark-chart-2' => self::Indigo[200],
+            'dark-chart-3' => self::Lime[500],
+            'dark-chart-4' => self::Zinc[950],
             'chart-1-label-bg' => self::Indigo[600],
             'chart-2-label-bg' => self::Transparent,
             'chart-3-label-bg' => self::Lime[600],
             'chart-4-label-bg' => self::Indigo[400],
+            'dark-chart-1-label-bg' => self::Indigo[700],
+            'dark-chart-2-label-bg' => self::Indigo[400],
+            'dark-chart-3-label-bg' => self::Lime[600],
+            'dark-chart-4-label-bg' => self::Zinc[700],
             'chart-1-legend' => self::Indigo[500],
             'chart-2-legend' => self::Zinc[800],
             'chart-3-legend' => self::Lime[500],
             'chart-4-legend' => self::Indigo[300],
-            'dark-chart-1' => self::Indigo[600],
-            'dark-chart-2' => self::Zinc[950],
-            'dark-chart-3' => self::Lime[500],
-            'dark-chart-4' => self::Indigo[200],
-            'dark-chart-1-label-bg' => self::Indigo[700],
-            'dark-chart-2-label-bg' => self::Transparent,
-            'dark-chart-3-label-bg' => self::Lime[600],
-            'dark-chart-4-label-bg' => self::Indigo[400],
             'dark-chart-1-legend' => self::Indigo[600],
-            'dark-chart-2-legend' => self::Zinc[950],
+            'dark-chart-2-legend' => self::Indigo[200],
             'dark-chart-3-legend' => self::Lime[500],
-            'dark-chart-4-legend' => self::Indigo[300],
+            'dark-chart-4-legend' => self::Zinc[950],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From 7047d1b412051eeabfe2e6956e8a3c574e447243 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 17:23:23 +0100
Subject: [PATCH 029/110] Charts - add min height

---
 resources/css/components/forms/charts.css | 1 -
 resources/js/pages/forms/Submissions.vue  | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 78284da53f..520bb7e51d 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -46,7 +46,6 @@
 
     padding: 0.075rem 0.15rem;
     border-radius: 0.25rem;
-    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
 
     position: absolute;
     left: calc(50% + var(--label-radius) * sin(var(--angle)));
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index c9d627801c..643e23d10e 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -279,7 +279,7 @@ function exportSubmissions() {
 
             <template #results>
                 <div class="mt-6 widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
-                    <div class="px-3 starting-style-transition w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Wake me up')"
                             title-tag="h2"
@@ -328,7 +328,7 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
-                    <div class="px-3 starting-style-transition w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Pie chart pagination demo')"
                             title-tag="h2"
@@ -420,7 +420,7 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
-                    <div class="px-3 starting-style-transition w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Rank your favourite seasons')"
                             title-tag="h2"

From 46e0ab97ab78d6a0952394bf391c73639e79582c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 17:42:59 +0100
Subject: [PATCH 030/110] Charts - wip

---
 resources/js/pages/forms/Submissions.vue | 56 ++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 643e23d10e..f1a0d648ee 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -476,6 +476,62 @@ function exportSubmissions() {
                                 </figcaption>
                             </figure>
                         </Widget>
+                    </div><div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('Have you seen us live before?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-select"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <figure class="p-6 grid" :aria-labelledby="rankingChartCaptionId">
+                                <ol class="m-0 list-none grid gap-2.5 p-0 pt-4">
+                                    <li class="flex items-center gap-2.25">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-1" />
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Summer</span>
+                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                            <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="size-2 rounded-full bg-chart-1" />
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        </div>
+                                    </li>
+                                    <li class="flex items-center gap-2.25">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">2</span>
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-2" />
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
+                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                            <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="size-2 rounded-full bg-chart-2" />
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
+                                        </div>
+                                    </li>
+                                    <li class="flex items-center gap-2.25">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">3</span>
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-3" />
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Spring</span>
+                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                            <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="size-2 rounded-full bg-chart-3" />
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
+                                        </div>
+                                    </li>
+                                    <li class="flex items-center gap-2.25">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">4</span>
+                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-4-legend" />
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Winter</span>
+                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                            <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="size-2 rounded-full bg-chart-4-legend" />
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        </div>
+                                    </li>
+                                </ol>
+                                <figcaption :id="rankingChartCaptionId" class="sr-only">
+                                    {{ __('Ranked favourite seasons: Summer 45%, Autumn 35%, Spring 15%, Winter 10%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
                     </div>
                 </div>
             </template>

From 69e79954b04e113dbcf83b7b582c15f149f30e70 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 29 Jun 2026 17:49:19 +0100
Subject: [PATCH 031/110] Add link from "other" to next page

---
 resources/js/pages/forms/Submissions.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index f1a0d648ee..48cf11b916 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -60,6 +60,12 @@ const wakeMeUpChartMeta = computed(() => {
     };
 });
 
+function selectNextChartPage() {
+    if (wakeMeUpChartPage.value < wakeMeUpChartMeta.value.last_page) {
+        wakeMeUpChartPage.value++;
+    }
+}
+
 async function generateFakeSubmission(mode) {
     if (generatingFakeSubmission.value) {
         return;
@@ -378,9 +384,15 @@ function exportSubmissions() {
                                             <span>Woken by someone else</span>
                                         </li>
                                         <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">5%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
-                                            <span>Other</span>
+                                            <button
+                                                type="button"
+                                                class="contents cursor-pointer text-inherit"
+                                                @click="selectNextChartPage"
+                                            >
+                                                <span class="font-medium text-[0.785rem] min-w-7 text-end">5%</span>
+                                                <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
+                                                <span>Other</span>
+                                            </button>
                                         </li>
                                     </ul>
                                 </figcaption>

From 0dc49bcd5b60f26e7752d7298c38b7918f652e4c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 09:38:58 +0100
Subject: [PATCH 032/110] Dropdown field type - draft

---
 resources/js/pages/forms/Submissions.vue | 35 ++++++++++--------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 48cf11b916..cfad6a10bf 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -284,6 +284,7 @@ function exportSubmissions() {
             </template>
 
             <template #results>
+                <!-- Example of a Multiple Choice field type (Pie Chart) -->
                 <div class="mt-6 widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
@@ -334,6 +335,7 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of a Multiple Choice field type (Pie Chart) with Pagination. The idea here is when there are _more_ than four response options, we can paginate the chart. In such a case, the fourth option shows as "Other", and the second widget shows the "other" segment broken down into the remaining response options. -->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Pie chart pagination demo')"
@@ -432,6 +434,7 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of a Ranking field type (Horizontal Lollipop Chart) -->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Rank your favourite seasons')"
@@ -488,7 +491,9 @@ function exportSubmissions() {
                                 </figcaption>
                             </figure>
                         </Widget>
-                    </div><div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    </div>
+                    <!-- Example of a Dropdown field type (Horizontal Bar Chart Widget) -->
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Have you seen us live before?')"
                             title-tag="h2"
@@ -499,9 +504,9 @@ function exportSubmissions() {
                             <figure class="p-6 grid" :aria-labelledby="rankingChartCaptionId">
                                 <ol class="m-0 list-none grid gap-2.5 p-0 pt-4">
                                     <li class="flex items-center gap-2.25">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
                                         <span class="size-2.5 shrink-0 rounded-xs bg-chart-1" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Summer</span>
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Yep</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-1" />
@@ -509,9 +514,9 @@ function exportSubmissions() {
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">2</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
                                         <span class="size-2.5 shrink-0 rounded-xs bg-chart-2" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-2" />
@@ -519,23 +524,13 @@ function exportSubmissions() {
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">3</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">10%</span>
                                         <span class="size-2.5 shrink-0 rounded-xs bg-chart-3" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Spring</span>
-                                        <div class="relative flex flex-grow-1 items-center gap-1">
-                                            <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-3" />
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
-                                        </div>
-                                    </li>
-                                    <li class="flex items-center gap-2.25">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">4</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-4-legend" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Winter</span>
+                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
-                                            <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-4-legend" />
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                            <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="size-2 rounded-full bg-chart-2" />
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
                                         </div>
                                     </li>
                                 </ol>

From 96a812d4c5b34e5b4ed7bedf1c95c071bba3ce51 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 09:43:20 +0100
Subject: [PATCH 033/110] Dropdown field type - finish

---
 resources/js/pages/forms/Submissions.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index cfad6a10bf..1b309d5e0d 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -508,9 +508,7 @@ function exportSubmissions() {
                                         <span class="size-2.5 shrink-0 rounded-xs bg-chart-1" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Yep</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
-                                            <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-1" />
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                            <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
@@ -518,9 +516,7 @@ function exportSubmissions() {
                                         <span class="size-2.5 shrink-0 rounded-xs bg-chart-2" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
-                                            <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-2" />
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
+                                            <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
                                         </div>
                                     </li>
                                     <li class="flex items-center gap-2.25">
@@ -528,9 +524,7 @@ function exportSubmissions() {
                                         <span class="size-2.5 shrink-0 rounded-xs bg-chart-3" />
                                         <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
                                         <div class="relative flex flex-grow-1 items-center gap-1">
-                                            <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="size-2 rounded-full bg-chart-2" />
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
+                                            <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
                                         </div>
                                     </li>
                                 </ol>

From 151a7f4c245d5a2cc3cbc323a4ce729b1ff59151 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 09:53:53 +0100
Subject: [PATCH 034/110] Change the way we handle layout for the text in bar
 charts, so that we expand to fit the longest option, with a maximum width

---
 resources/js/pages/forms/Submissions.vue | 32 ++++++++++--------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 1b309d5e0d..de2ab27397 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -502,30 +502,24 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="rankingChartCaptionId">
-                                <ol class="m-0 list-none grid gap-2.5 p-0 pt-4">
-                                    <li class="flex items-center gap-2.25">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4">
+                                    <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-1" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Yep</span>
-                                        <div class="relative flex flex-grow-1 items-center gap-1">
-                                            <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
-                                        </div>
+                                        <span class="size-2.5 rounded-xs bg-chart-1" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
+                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
                                     </li>
-                                    <li class="flex items-center gap-2.25">
+                                    <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-2" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Nope</span>
-                                        <div class="relative flex flex-grow-1 items-center gap-1">
-                                            <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
-                                        </div>
+                                        <span class="size-2.5 rounded-xs bg-chart-2" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
                                     </li>
-                                    <li class="flex items-center gap-2.25">
+                                    <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">10%</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-3" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
-                                        <div class="relative flex flex-grow-1 items-center gap-1">
-                                            <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
-                                        </div>
+                                        <span class="size-2.5 rounded-xs bg-chart-3" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
+                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
                                     </li>
                                 </ol>
                                 <figcaption :id="rankingChartCaptionId" class="sr-only">

From a815c7de9e731a446e90e89adc2f5caaa7192aa6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 10:05:00 +0100
Subject: [PATCH 035/110] Change the way we handle layout for the text in
 lollipop charts, so that we expand to fit the longest option, with a maximum
 width

---
 resources/js/pages/forms/Submissions.vue | 34 ++++++++++++------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index de2ab27397..118a637d7d 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -444,42 +444,42 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="rankingChartCaptionId">
-                                <ol class="m-0 list-none grid gap-2.5 p-0 pt-4">
-                                    <li class="flex items-center gap-2.25">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4">
+                                    <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-1" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Summer</span>
-                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                        <span class="size-2.5 rounded-xs bg-chart-1" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Summer</span>
+                                        <div class="flex items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-1" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         </div>
                                     </li>
-                                    <li class="flex items-center gap-2.25">
+                                    <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">2</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-2" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
-                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                        <span class="size-2.5 rounded-xs bg-chart-2" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
+                                        <div class="flex items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-2" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
                                         </div>
                                     </li>
-                                    <li class="flex items-center gap-2.25">
+                                    <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">3</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-3" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Spring</span>
-                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                        <span class="size-2.5 rounded-xs bg-chart-3" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Spring</span>
+                                        <div class="flex items-center gap-1">
                                             <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-3" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
                                         </div>
                                     </li>
-                                    <li class="flex items-center gap-2.25">
+                                    <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">4</span>
-                                        <span class="size-2.5 shrink-0 rounded-xs bg-chart-4-legend" />
-                                        <span class="w-20 text-xs text-gray-900 dark:text-gray-100">Winter</span>
-                                        <div class="relative flex flex-grow-1 items-center gap-1">
+                                        <span class="size-2.5 rounded-xs bg-chart-4-legend" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Winter</span>
+                                        <div class="flex items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-4-legend" />
                                             <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>

From 6700a464b40ba889f61b23a6c6313bdac1188f4e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 10:15:37 +0100
Subject: [PATCH 036/110] Opinion field type - start

---
 resources/js/pages/forms/Submissions.vue | 36 ++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 118a637d7d..dfd57f0e4c 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -528,6 +528,42 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of an Opinion Scale field type (Vertical Bar Chart Widget) -->
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('How likely are you to recommend us?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="scale-up"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <figure class="p-6 grid" :aria-labelledby="rankingChartCaptionId">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4">
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
+                                        <span class="size-2.5 rounded-xs bg-chart-1" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
+                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
+                                        <span class="size-2.5 rounded-xs bg-chart-2" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">10%</span>
+                                        <span class="size-2.5 rounded-xs bg-chart-3" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
+                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
+                                    </li>
+                                </ol>
+                                <figcaption :id="rankingChartCaptionId" class="sr-only">
+                                    {{ __('Ranked favourite seasons: Summer 45%, Autumn 35%, Spring 15%, Winter 10%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From 2b03af0be5dbec79663cc07a50a25e346161643c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 10:26:53 +0100
Subject: [PATCH 037/110] Tidy accessibility

---
 resources/js/pages/forms/Submissions.vue | 52 +++++++++++++-----------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index dfd57f0e4c..9e181460fe 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -37,9 +37,12 @@ const exportModalOpen = ref(false);
 const exportFormat = ref(null);
 const exportScope = ref('all');
 const listingParameters = ref({});
-const pieLegendId = useId();
-const pieLegendPage2Id = useId();
-const rankingChartCaptionId = useId();
+const pieChart1LegendId = useId();
+const pieChart2LegendId = useId();
+const pieChart2LegendPage2Id = useId();
+const lollipopChart1CaptionId = useId();
+const horizontalBarChart1CaptionId = useId();
+const opinionScaleChart1CaptionId = useId();
 
 // Mock in-widget pagination for fields with more than four response options.
 const wakeMeUpChartPage = ref(1);
@@ -284,7 +287,7 @@ function exportSubmissions() {
             </template>
 
             <template #results>
-                <!-- Example of a Multiple Choice field type (Pie Chart) -->
+                <!-- Example of a Multiple Choice field type (Pie Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
                 <div class="mt-6 widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
@@ -299,7 +302,7 @@ function exportSubmissions() {
                                     class="pie-chart"
                                     style="--1: 45; --2: 30; --3: 15; --4: 10;"
                                     role="img"
-                                    :aria-labelledby="pieLegendId"
+                                    :aria-labelledby="pieChart1LegendId"
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
                                     <!-- aria-hidden because the labels are already in the figure caption -->
@@ -308,7 +311,8 @@ function exportSubmissions() {
                                     <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">15%</span>
                                     <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">10%</span>
                                 </div>
-                                <figcaption :id="pieLegendId" class="pt-4">
+                                <!-- Pie Chart 1 Legend -->
+                                <figcaption :id="pieChart1LegendId" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">45%</span>
@@ -335,7 +339,9 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
-                    <!-- Example of a Multiple Choice field type (Pie Chart) with Pagination. The idea here is when there are _more_ than four response options, we can paginate the chart. In such a case, the fourth option shows as "Other", and the second widget shows the "other" segment broken down into the remaining response options. -->
+                    <!-- Example of a Multiple Choice field type (Pie Chart) with Pagination. The idea here is when there are _more_ than four response options, we can paginate the chart. In such a case, the fourth option shows as "Other", and the second widget shows the "other" segment broken down into the remaining response options.
+
+                    We should dynamically generate the ids to be unique here, so that everything remains accessible.-->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Pie chart pagination demo')"
@@ -359,7 +365,7 @@ function exportSubmissions() {
                                     class="pie-chart"
                                     style="--1: 68; --2: 18; --3: 9; --4: 5;"
                                     role="img"
-                                    :aria-labelledby="pieLegendId"
+                                    :aria-labelledby="pieChart2LegendId"
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
                                     <!-- aria-hidden because the labels are already in the figure caption -->
@@ -368,7 +374,7 @@ function exportSubmissions() {
                                     <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">9%</span>
                                     <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
                                 </div>
-                                <figcaption :id="pieLegendId" class="pt-4">
+                                <figcaption :id="pieChart2LegendId" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">68%</span>
@@ -404,7 +410,7 @@ function exportSubmissions() {
                                     class="pie-chart pie-chart--other-segment"
                                     style="--1: 68; --2: 18; --3: 9; --4: 5;"
                                     role="img"
-                                    :aria-labelledby="pieLegendPage2Id"
+                                    :aria-labelledby="pieChart2LegendPage2Id"
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
                                     <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">68%</span>
@@ -412,7 +418,7 @@ function exportSubmissions() {
                                     <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">9%</span>
                                     <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
                                 </div>
-                                <figcaption :id="pieLegendPage2Id" class="pt-4">
+                                <figcaption :id="pieChart2LegendPage2Id" class="pt-4">
                                     <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
                                         <li class="flex items-center gap-2.25">
                                             <span class="font-medium text-[0.785rem] min-w-7 text-end">3%</span>
@@ -434,7 +440,7 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
-                    <!-- Example of a Ranking field type (Horizontal Lollipop Chart) -->
+                    <!-- Example of a Ranking field type (Horizontal Lollipop Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Rank your favourite seasons')"
@@ -443,7 +449,7 @@ function exportSubmissions() {
                             icon="rank"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="rankingChartCaptionId">
+                            <figure class="p-6 grid" :aria-labelledby="lollipopChart1CaptionId">
                                 <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
@@ -486,13 +492,13 @@ function exportSubmissions() {
                                         </div>
                                     </li>
                                 </ol>
-                                <figcaption :id="rankingChartCaptionId" class="sr-only">
-                                    {{ __('Ranked favourite seasons: Summer 45%, Autumn 35%, Spring 15%, Winter 10%') }}
+                                <figcaption :id="lollipopChart1CaptionId" class="sr-only">
+                                    {{ __('Ranked favourite seasons: Summer 55%, Autumn 25%, Spring 15%, Winter 10%') }}
                                 </figcaption>
                             </figure>
                         </Widget>
                     </div>
-                    <!-- Example of a Dropdown field type (Horizontal Bar Chart Widget) -->
+                    <!-- Example of a Dropdown field type (Horizontal Bar Chart Widget). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Have you seen us live before?')"
@@ -501,7 +507,7 @@ function exportSubmissions() {
                             icon="fieldtype-select"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="rankingChartCaptionId">
+                            <figure class="p-6 grid" :aria-labelledby="horizontalBarChart1CaptionId">
                                 <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
@@ -522,13 +528,13 @@ function exportSubmissions() {
                                         <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
                                     </li>
                                 </ol>
-                                <figcaption :id="rankingChartCaptionId" class="sr-only">
-                                    {{ __('Ranked favourite seasons: Summer 45%, Autumn 35%, Spring 15%, Winter 10%') }}
+                                <figcaption :id="horizontalBarChart1CaptionId" class="sr-only">
+                                    {{ __('Have you seen us live before?: Yep 55%, Nope 35%, Maybe 10%') }}
                                 </figcaption>
                             </figure>
                         </Widget>
                     </div>
-                    <!-- Example of an Opinion Scale field type (Vertical Bar Chart Widget) -->
+                    <!-- Example of an Opinion Scale field type (Vertical Bar Chart Widget). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('How likely are you to recommend us?')"
@@ -537,7 +543,7 @@ function exportSubmissions() {
                             icon="scale-up"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="rankingChartCaptionId">
+                            <figure class="p-6 grid" :aria-labelledby="opinionScaleChart1CaptionId">
                                 <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
@@ -558,8 +564,8 @@ function exportSubmissions() {
                                         <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
                                     </li>
                                 </ol>
-                                <figcaption :id="rankingChartCaptionId" class="sr-only">
-                                    {{ __('Ranked favourite seasons: Summer 45%, Autumn 35%, Spring 15%, Winter 10%') }}
+                                <figcaption :id="opinionScaleChart1CaptionId" class="sr-only">
+                                    {{ __('How likely are you to recommend us?: Yep 55%, Nope 35%, Maybe 10%') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From 9e39f0d89e44a1a8c95303164d26c5b62b567872 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 10:32:54 +0100
Subject: [PATCH 038/110] Opinion field type - draft

---
 resources/css/components/forms/charts.css | 44 +++++++++++++++++
 resources/js/pages/forms/Submissions.vue  | 57 ++++++++++++++---------
 2 files changed, 79 insertions(+), 22 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 520bb7e51d..606bce1169 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -86,4 +86,48 @@
             var(--color-chart-4) var(--end3) var(--end4)
         );
     }
+}
+
+/* GROUP CHARTS / VERTICAL BAR CHART
+=================================================== */
+.vertical-bar-chart {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 0.25rem;
+    height: 10rem;
+}
+
+.vertical-bar-chart__bar {
+    display: grid;
+    flex: 1;
+    grid-template-rows: auto 1fr auto;
+    align-items: end;
+    justify-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    height: 100%;
+}
+
+.vertical-bar-chart__value {
+    @apply text-xs font-bold tabular-nums text-gray-800 dark:text-gray-100;
+}
+
+.vertical-bar-chart__column {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    max-width: 2.5rem;
+    height: 100%;
+}
+
+.vertical-bar-chart__fill {
+    width: 100%;
+    height: calc(var(--value) / var(--max-value) * 100%);
+    border-radius: 0.25rem 0.25rem 0 0;
+    background-color: var(--color-chart-1);
+}
+
+.vertical-bar-chart__scale-label {
+    @apply min-w-6 rounded-md border border-gray-200 px-1.5 py-0.5 text-center text-xs font-medium tabular-nums text-gray-700 dark:border-gray-700 dark:text-gray-400;
 }
\ No newline at end of file
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 9e181460fe..d08d4b504e 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -42,7 +42,23 @@ const pieChart2LegendId = useId();
 const pieChart2LegendPage2Id = useId();
 const lollipopChart1CaptionId = useId();
 const horizontalBarChart1CaptionId = useId();
-const opinionScaleChart1CaptionId = useId();
+const verticalBarChart1CaptionId = useId();
+
+const verticalBarChart1Data = [
+    { label: '0', percent: 2 },
+    { label: '1', percent: 1 },
+    { label: '2', percent: 3 },
+    { label: '3', percent: 4 },
+    { label: '4', percent: 6 },
+    { label: '5', percent: 8 },
+    { label: '6', percent: 12 },
+    { label: '7', percent: 20 },
+    { label: '8', percent: 35 },
+    { label: '9', percent: 48 },
+    { label: '10', percent: 61 },
+];
+
+const verticalBarChart1MaxValue = computed(() => Math.max(...verticalBarChart1Data.map((bar) => bar.percent), 1));
 
 // Mock in-widget pagination for fields with more than four response options.
 const wakeMeUpChartPage = ref(1);
@@ -543,29 +559,26 @@ function exportSubmissions() {
                             icon="scale-up"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="opinionScaleChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4">
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
-                                        <span class="size-2.5 rounded-xs bg-chart-1" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
-                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
-                                    </li>
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
-                                        <span class="size-2.5 rounded-xs bg-chart-2" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
-                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
-                                    </li>
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">10%</span>
-                                        <span class="size-2.5 rounded-xs bg-chart-3" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
-                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
+                            <figure class="p-6" :aria-labelledby="verticalBarChart1CaptionId">
+                                <ol
+                                    class="vertical-bar-chart m-0 list-none p-0"
+                                    :style="{ '--max-value': verticalBarChart1MaxValue }"
+                                >
+                                    <li
+                                        v-for="bar in verticalBarChart1Data"
+                                        :key="bar.label"
+                                        class="vertical-bar-chart__bar"
+                                        :style="{ '--value': bar.percent }"
+                                    >
+                                        <span class="vertical-bar-chart__value" aria-hidden="true">{{ bar.percent }}%</span>
+                                        <div class="vertical-bar-chart__column" aria-hidden="true">
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label" aria-hidden="true">{{ bar.label }}</span>
                                     </li>
                                 </ol>
-                                <figcaption :id="opinionScaleChart1CaptionId" class="sr-only">
-                                    {{ __('How likely are you to recommend us?: Yep 55%, Nope 35%, Maybe 10%') }}
+                                <figcaption :id="verticalBarChart1CaptionId" class="sr-only">
+                                    {{ __('Recommendation score distribution: 0: 2%, 1: 1%, 2: 3%, 3: 4%, 4: 6%, 5: 8%, 6: 12%, 7: 20%, 8: 35%, 9: 48%, 10: 61%') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From b54877b29ff40ff0944d7a023e1e96ae77accc1b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 10:36:24 +0100
Subject: [PATCH 039/110] Opinion field type - move the numbers down to the bar

---
 resources/css/components/forms/charts.css | 21 ++++++++++++---------
 resources/js/pages/forms/Submissions.vue  |  4 ++--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 606bce1169..da48ba2863 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -101,7 +101,7 @@
 .vertical-bar-chart__bar {
     display: grid;
     flex: 1;
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: 1fr auto;
     align-items: end;
     justify-items: center;
     gap: 0.5rem;
@@ -109,21 +109,24 @@
     height: 100%;
 }
 
-.vertical-bar-chart__value {
-    @apply text-xs font-bold tabular-nums text-gray-800 dark:text-gray-100;
-}
-
-.vertical-bar-chart__column {
+.vertical-bar-chart__plot {
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
     width: 100%;
-    max-width: 2.5rem;
     height: 100%;
+    min-height: 0;
+}
+
+.vertical-bar-chart__value {
+    @apply mb-1 text-xs font-bold tabular-nums text-gray-800 dark:text-gray-100;
 }
 
 .vertical-bar-chart__fill {
+    flex: 0 0 calc(var(--value) / var(--max-value) * 100%);
     width: 100%;
-    height: calc(var(--value) / var(--max-value) * 100%);
+    max-width: 2.5rem;
     border-radius: 0.25rem 0.25rem 0 0;
     background-color: var(--color-chart-1);
 }
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index d08d4b504e..b74e98e285 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -570,8 +570,8 @@ function exportSubmissions() {
                                         class="vertical-bar-chart__bar"
                                         :style="{ '--value': bar.percent }"
                                     >
-                                        <span class="vertical-bar-chart__value" aria-hidden="true">{{ bar.percent }}%</span>
-                                        <div class="vertical-bar-chart__column" aria-hidden="true">
+                                        <div class="vertical-bar-chart__plot" aria-hidden="true">
+                                            <span class="vertical-bar-chart__value">{{ bar.percent }}%</span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label" aria-hidden="true">{{ bar.label }}</span>

From bd6ae7302e65d4879a4808106f9e5d57118fe5c4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 10:49:41 +0100
Subject: [PATCH 040/110] Opinion field type - wip

---
 resources/css/components/forms/charts.css | 2 +-
 resources/js/pages/forms/Submissions.vue  | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index da48ba2863..026b23c5fe 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -95,7 +95,7 @@
     align-items: flex-end;
     justify-content: space-between;
     gap: 0.25rem;
-    height: 10rem;
+    height: 7rem;
 }
 
 .vertical-bar-chart__bar {
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index b74e98e285..a5180c1841 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -304,7 +304,7 @@ function exportSubmissions() {
 
             <template #results>
                 <!-- Example of a Multiple Choice field type (Pie Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                <div class="mt-6 widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
+                <div class="mt-6 pb-6 widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Wake me up')"
@@ -559,7 +559,12 @@ function exportSubmissions() {
                             icon="scale-up"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="p-6" :aria-labelledby="verticalBarChart1CaptionId">
+                            <div class="mt-4 ms-3.5">
+                                <div class="inline-flex items-center gap-2 py-1.25 px-2 border border-gray-200 dark:border-gray-700 rounded-md">
+                                    <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-xs text-gray-500 dark:text-gray-400">Average</span>
+                                </div>
+                            </div>
+                            <figure class="p-6 pb-3" :aria-labelledby="verticalBarChart1CaptionId">
                                 <ol
                                     class="vertical-bar-chart m-0 list-none p-0"
                                     :style="{ '--max-value': verticalBarChart1MaxValue }"

From a9a08f92b5d074bac599384e1845235fadc0bf39 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 10:57:29 +0100
Subject: [PATCH 041/110] Opinion field type - tidy

---
 resources/css/components/forms/charts.css | 8 ++++----
 resources/js/pages/forms/Submissions.vue  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 026b23c5fe..6afdf2d602 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -94,7 +94,7 @@
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
-    gap: 0.25rem;
+    gap: 0.5rem;
     height: 7rem;
 }
 
@@ -120,17 +120,17 @@
 }
 
 .vertical-bar-chart__value {
-    @apply mb-1 text-xs font-bold tabular-nums text-gray-800 dark:text-gray-100;
+    @apply mb-1 text-[0.785rem] font-bold tabular-nums text-gray-800 dark:text-gray-100;
 }
 
 .vertical-bar-chart__fill {
     flex: 0 0 calc(var(--value) / var(--max-value) * 100%);
     width: 100%;
-    max-width: 2.5rem;
+    max-width: 2rem;
     border-radius: 0.25rem 0.25rem 0 0;
     background-color: var(--color-chart-1);
 }
 
 .vertical-bar-chart__scale-label {
-    @apply min-w-6 rounded-md border border-gray-200 px-1.5 py-0.5 text-center text-xs font-medium tabular-nums text-gray-700 dark:border-gray-700 dark:text-gray-400;
+    @apply min-w-8 rounded-md border border-gray-200 shadow-ui-xs px-1.5 py-0.5 text-center text-[0.785rem] font-medium tabular-nums text-gray-700 dark:border-gray-700 dark:text-gray-400;
 }
\ No newline at end of file
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index a5180c1841..61db5511bf 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -564,7 +564,7 @@ function exportSubmissions() {
                                     <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-xs text-gray-500 dark:text-gray-400">Average</span>
                                 </div>
                             </div>
-                            <figure class="p-6 pb-3" :aria-labelledby="verticalBarChart1CaptionId">
+                            <figure class="p-6 px-4 pb-3" :aria-labelledby="verticalBarChart1CaptionId">
                                 <ol
                                     class="vertical-bar-chart m-0 list-none p-0"
                                     :style="{ '--max-value': verticalBarChart1MaxValue }"

From 280ea54a72d4654555766a92ab5c9795598f08c8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 10:59:27 +0100
Subject: [PATCH 042/110] Opinion field type - tidy

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

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 6afdf2d602..a047082479 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -120,7 +120,7 @@
 }
 
 .vertical-bar-chart__value {
-    @apply mb-1 text-[0.785rem] font-bold tabular-nums text-gray-800 dark:text-gray-100;
+    @apply mb-1.5 text-[0.785rem] font-medium tabular-nums text-gray-800 dark:text-gray-100;
 }
 
 .vertical-bar-chart__fill {

From d9e483688fb453569b2d2fb2cbaca8a44857f99b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 11:04:19 +0100
Subject: [PATCH 043/110] Vertical Bar Chart - Cleaner separation between
 native CSS / TW

---
 resources/css/components/forms/charts.css | 11 +++++++++--
 resources/js/pages/forms/Submissions.vue  |  4 ++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index a047082479..6dd74115b4 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -62,8 +62,6 @@
 .pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-chart-4-label-bg); --label-radius: 39%; }
 
 
-
-
 /* GROUP CHARTS / PIE CHART / MODIFIERS
 =================================================== */
 .pie-chart--other-segment {
@@ -88,9 +86,18 @@
     }
 }
 
+
+
+
 /* GROUP CHARTS / VERTICAL BAR CHART
 =================================================== */
+.vertical-bar-chart-figure {
+    @apply p-6 px-4 pb-3;
+}
+
 .vertical-bar-chart {
+    @apply m-0 list-none p-0;
+
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 61db5511bf..0e8151a1c7 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -564,9 +564,9 @@ function exportSubmissions() {
                                     <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-xs text-gray-500 dark:text-gray-400">Average</span>
                                 </div>
                             </div>
-                            <figure class="p-6 px-4 pb-3" :aria-labelledby="verticalBarChart1CaptionId">
+                            <figure class="vertical-bar-chart-figure" :aria-labelledby="verticalBarChart1CaptionId">
                                 <ol
-                                    class="vertical-bar-chart m-0 list-none p-0"
+                                    class="vertical-bar-chart"
                                     :style="{ '--max-value': verticalBarChart1MaxValue }"
                                 >
                                     <li

From 6d569983cfdad993cdeb3dfa1e6b2621d6f7e4c3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 11:09:01 +0100
Subject: [PATCH 044/110] Pie Chart - Cleaner separation between native CSS /
 TW

---
 resources/css/components/forms/charts.css | 35 +++++++++
 resources/js/pages/forms/Submissions.vue  | 86 +++++++++++------------
 2 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 6dd74115b4..d899ce3492 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -1,5 +1,40 @@
 /* GROUP CHARTS / PIE CHART
 =================================================== */
+.pie-chart-figure {
+    display: grid;
+    grid-template-columns: 0.6fr 1fr;
+    @apply gap-4 p-6;
+}
+
+.pie-chart-legend {
+    @apply pt-4;
+}
+
+.pie-chart-legend__list {
+    @apply grid gap-2.5 text-xs text-gray-700 dark:text-gray-50;
+}
+
+.pie-chart-legend__item {
+    @apply flex items-center gap-2.25;
+}
+
+.pie-chart-legend__value {
+    @apply min-w-7 text-end text-[0.785rem] font-medium;
+}
+
+.pie-chart-legend__swatch {
+    @apply size-2.5 shrink-0 rounded-full;
+}
+
+.pie-chart-legend__swatch--1 { @apply bg-chart-1-legend; }
+.pie-chart-legend__swatch--2 { @apply bg-chart-2-legend; }
+.pie-chart-legend__swatch--3 { @apply bg-chart-3-legend; }
+.pie-chart-legend__swatch--4 { @apply bg-chart-4-legend; }
+
+.pie-chart-legend__link {
+    @apply contents cursor-pointer text-inherit;
+}
+
 .pie-chart {
     --label-radius: 30%;
 
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 0e8151a1c7..d7d0296f5c 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -313,7 +313,7 @@ function exportSubmissions() {
                             icon="fieldtype-radio"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
+                            <figure class="pie-chart-figure">
                                 <div
                                     class="pie-chart"
                                     style="--1: 45; --2: 30; --3: 15; --4: 10;"
@@ -328,26 +328,26 @@ function exportSubmissions() {
                                     <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">10%</span>
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
-                                <figcaption :id="pieChart1LegendId" class="pt-4">
-                                    <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">45%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-1-legend" />
+                                <figcaption :id="pieChart1LegendId" class="pie-chart-legend">
+                                    <ul class="pie-chart-legend__list">
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">45%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--1" />
                                             <span>Before you Go Go</span>
                                         </li>
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">30%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-2-legend" />
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">30%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--2" />
                                             <span>Bring me Back to Life</span>
                                         </li>
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">15%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-3-legend" />
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">15%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--3" />
                                             <span>When September Ends</span>
                                         </li>
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">10%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">10%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Never</span>
                                         </li>
                                     </ul>
@@ -376,7 +376,7 @@ function exportSubmissions() {
                                     @page-selected="wakeMeUpChartPage = $event"
                                 />
                             </template>
-                            <figure v-if="wakeMeUpChartPage === 1" class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
+                            <figure v-if="wakeMeUpChartPage === 1" class="pie-chart-figure">
                                 <div
                                     class="pie-chart"
                                     style="--1: 68; --2: 18; --3: 9; --4: 5;"
@@ -390,38 +390,38 @@ function exportSubmissions() {
                                     <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">9%</span>
                                     <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
                                 </div>
-                                <figcaption :id="pieChart2LegendId" class="pt-4">
-                                    <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">68%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-1-legend" />
+                                <figcaption :id="pieChart2LegendId" class="pie-chart-legend">
+                                    <ul class="pie-chart-legend__list">
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">68%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--1" />
                                             <span>Alarm, no mercy</span>
                                         </li>
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">18%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-2-legend" />
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">18%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--2" />
                                             <span>Hit snooze</span>
                                         </li>
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">9%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-3-legend" />
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">9%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--3" />
                                             <span>Woken by someone else</span>
                                         </li>
-                                        <li class="flex items-center gap-2.25">
+                                        <li class="pie-chart-legend__item">
                                             <button
                                                 type="button"
-                                                class="contents cursor-pointer text-inherit"
+                                                class="pie-chart-legend__link"
                                                 @click="selectNextChartPage"
                                             >
-                                                <span class="font-medium text-[0.785rem] min-w-7 text-end">5%</span>
-                                                <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
+                                                <span class="pie-chart-legend__value">5%</span>
+                                                <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                                 <span>Other</span>
                                             </button>
                                         </li>
                                     </ul>
                                 </figcaption>
                             </figure>
-                            <figure v-else-if="wakeMeUpChartPage === 2" class="grid gap-4 grid-cols-[0.6fr_1fr] p-6">
+                            <figure v-else-if="wakeMeUpChartPage === 2" class="pie-chart-figure">
                                 <div
                                     class="pie-chart pie-chart--other-segment"
                                     style="--1: 68; --2: 18; --3: 9; --4: 5;"
@@ -434,21 +434,21 @@ function exportSubmissions() {
                                     <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">9%</span>
                                     <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
                                 </div>
-                                <figcaption :id="pieChart2LegendPage2Id" class="pt-4">
-                                    <ul class="text-xs text-gray-700 dark:text-gray-50 grid gap-2.5">
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">3%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
+                                <figcaption :id="pieChart2LegendPage2Id" class="pie-chart-legend">
+                                    <ul class="pie-chart-legend__list">
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">3%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Bohemian Rhapsody</span>
                                         </li>
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">1%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">1%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Stairway to Heaven</span>
                                         </li>
-                                        <li class="flex items-center gap-2.25">
-                                            <span class="font-medium text-[0.785rem] min-w-7 text-end">1%</span>
-                                            <div class="size-2.5 shrink-0 rounded-full bg-chart-4-legend" />
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">1%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Wonderwall</span>
                                         </li>
                                     </ul>

From 51cd3e5ce115cb2b4267065184a69ed499af68f9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 11:11:13 +0100
Subject: [PATCH 045/110] Charts - tighten up spacing a touch

---
 resources/css/components/forms/charts.css | 2 +-
 resources/js/pages/forms/Submissions.vue  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index d899ce3492..f22c3aba65 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -11,7 +11,7 @@
 }
 
 .pie-chart-legend__list {
-    @apply grid gap-2.5 text-xs text-gray-700 dark:text-gray-50;
+    @apply grid gap-2.25 text-xs text-gray-700 dark:text-gray-50;
 }
 
 .pie-chart-legend__item {
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index d7d0296f5c..8170977809 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -466,7 +466,7 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="lollipopChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
@@ -524,7 +524,7 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="horizontalBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />

From beef49bf3c48efe2f2b12298c5dc66741655d56b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 11:14:00 +0100
Subject: [PATCH 046/110] Image Choice Field Type - start

---
 resources/js/pages/forms/Submissions.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 8170977809..c334734ffa 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -588,6 +588,18 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of an Image Choice field type (Image Choice Bar Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('What is your spirit animal?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="image-select"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From e67245b1a09fdc3833f7e1dc04f074f03fa45f27 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 14:22:29 +0100
Subject: [PATCH 047/110] Image Choice Field Type - start

---
 resources/js/pages/forms/Submissions.vue | 26 +++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index c334734ffa..c8af02801f 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -597,7 +597,31 @@ function exportSubmissions() {
                             icon="image-select"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            
+                            <figure class="p-6 grid" :aria-labelledby="imageChoiceBarChart1CaptionId">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4">
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
+                                        <span class="size-2.5 rounded-xs bg-chart-1" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
+                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
+                                        <span class="size-2.5 rounded-xs bg-chart-2" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">10%</span>
+                                        <span class="size-2.5 rounded-xs bg-chart-3" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
+                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
+                                    </li>
+                                </ol>
+                                <figcaption :id="imageChoiceBarChart1CaptionId" class="sr-only">
+                                    {{ __('Have you seen us live before?: Yep 55%, Nope 35%, Maybe 10%') }}
+                                </figcaption>
+                            </figure>
                         </Widget>
                     </div>
                 </div>

From 2f6a785c635bbc5f56b2494c7df8223272db44b3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 14:30:31 +0100
Subject: [PATCH 048/110] Image Choice Field Type - finish

---
 resources/js/pages/forms/Submissions.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index c8af02801f..7dc3866f1a 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -598,25 +598,21 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="imageChoiceBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4">
+                                <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
-                                        <span class="size-2.5 rounded-xs bg-chart-1" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
+                                        <img class="rounded-full" src="https://picsum.photos/80/80?random=1" alt="" aria-hidden="true" />
+                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
                                         <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
-                                        <span class="size-2.5 rounded-xs bg-chart-2" />
+                                        <img class="rounded-full" src="https://picsum.photos/80/80?random=2" alt="" aria-hidden="true" />
+                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">10%</span>
-                                        <span class="size-2.5 rounded-xs bg-chart-3" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
-                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
-                                    </li>
                                 </ol>
                                 <figcaption :id="imageChoiceBarChart1CaptionId" class="sr-only">
                                     {{ __('Have you seen us live before?: Yep 55%, Nope 35%, Maybe 10%') }}

From 728a79e9cb4d84ec194f66470cc02e403b25c161 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 14:33:26 +0100
Subject: [PATCH 049/110] Image Choice Field Type / Pie Chart - start

---
 resources/js/pages/forms/Submissions.vue | 51 ++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 7dc3866f1a..6833e9d4ce 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -620,6 +620,57 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of an Image Choice field type (Image Choice Pie Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('What is your spirit animal?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-radio"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <figure class="pie-chart-figure">
+                                <div
+                                    class="pie-chart"
+                                    style="--1: 45; --2: 30; --3: 15; --4: 10;"
+                                    role="img"
+                                    :aria-labelledby="ImageChoicePieChart1LegendId"
+                                >
+                                    <div class="pie-chart__disc" aria-hidden="true" />
+                                    <!-- aria-hidden because the labels are already in the figure caption -->
+                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">45%</span>
+                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">30%</span>
+                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">15%</span>
+                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">10%</span>
+                                </div>
+                                <!-- Pie Chart 1 Legend -->
+                                <figcaption :id="ImageChoicePieChart1LegendId" class="pie-chart-legend">
+                                    <ul class="pie-chart-legend__list">
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">45%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--1" />
+                                            <span>Before you Go Go</span>
+                                        </li>
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">30%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--2" />
+                                            <span>Bring me Back to Life</span>
+                                        </li>
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">15%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--3" />
+                                            <span>When September Ends</span>
+                                        </li>
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">10%</span>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
+                                            <span>Never</span>
+                                        </li>
+                                    </ul>
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From 4af81d7bef9aebb8ed675d86b5fa8d33adb1e689 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 14:40:14 +0100
Subject: [PATCH 050/110] Image Choice Field Type / Pie Chart - wip

---
 resources/css/components/forms/charts.css | 126 ++++++++++++++++++++++
 resources/js/pages/forms/Submissions.vue  |  50 ++++-----
 2 files changed, 147 insertions(+), 29 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index f22c3aba65..f9fb878298 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -124,6 +124,132 @@
 
 
 
+/* GROUP CHARTS / IMAGE PIE CHART
+=================================================== */
+.image-pie-chart-figure {
+    display: grid;
+    grid-template-columns: 0.6fr 1fr;
+    @apply gap-4 p-6;
+}
+
+.image-pie-chart-legend {
+    @apply pt-4;
+}
+
+.image-pie-chart-legend__list {
+    @apply grid gap-2.25 text-xs text-gray-700 dark:text-gray-50;
+}
+
+.image-pie-chart-legend__item {
+    @apply flex items-center gap-2.25;
+}
+
+.image-pie-chart-legend__value {
+    @apply min-w-7 text-end text-[0.785rem] font-medium;
+}
+
+.image-pie-chart-legend__swatch {
+    @apply size-2.5 shrink-0 rounded-full;
+}
+
+.image-pie-chart-legend__swatch--1 { @apply bg-chart-1-legend; }
+.image-pie-chart-legend__swatch--2 { @apply bg-chart-2-legend; }
+.image-pie-chart-legend__swatch--3 { @apply bg-chart-3-legend; }
+.image-pie-chart-legend__swatch--4 { @apply bg-chart-4-legend; }
+
+.image-pie-chart-legend__link {
+    @apply contents cursor-pointer text-inherit;
+}
+
+.image-pie-chart {
+    --label-radius: 30%;
+
+    position: relative;
+    width: 9rem;
+    aspect-ratio: 1 / 1;
+
+    /* Slice sizes as unitless numbers (percent of circle). */
+    --end1: calc(var(--1) * 1%);
+    --end2: calc((var(--1) + var(--2)) * 1%);
+    --end3: calc((var(--1) + var(--2) + var(--3)) * 1%);
+    --end4: 100%;
+
+    /* Midpoint angle for each slice (100% = 360deg). */
+    --angle1: calc(var(--1) * 3.6deg / 2);
+    --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
+    --angle3: calc((var(--1) + var(--2) + var(--3) / 2) * 3.6deg);
+    --angle4: calc((var(--1) + var(--2) + var(--3) + var(--4) / 2) * 3.6deg);
+
+    &:hover {
+        .image-pie-chart__label {
+            opacity: unset;
+        }
+    }
+}
+
+.image-pie-chart__disc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-image: conic-gradient(
+        var(--color-chart-1) 0% var(--end1),
+        var(--color-chart-2) var(--end1) var(--end2),
+        var(--color-chart-3) var(--end2) var(--end3),
+        var(--color-chart-4) var(--end3) var(--end4)
+    );
+}
+
+.image-pie-chart__label {
+    --angle: 0deg;
+    opacity: 0;
+    transition: opacity 0.2s ease-in 0s;
+
+    padding: 0.075rem 0.15rem;
+    border-radius: 0.25rem;
+
+    position: absolute;
+    left: calc(50% + var(--label-radius) * sin(var(--angle)));
+    top: calc(50% - var(--label-radius) * cos(var(--angle)));
+    transform: translate(-50%, -50%);
+
+    @apply text-xs font-medium tabular-nums text-white pointer-events-none;
+}
+
+.image-pie-chart__label--1 { --angle: var(--angle1); background-color: var(--color-chart-1-label-bg); }
+.image-pie-chart__label--2 { --angle: var(--angle2); background-color: var(--color-chart-2-label-bg); }
+.image-pie-chart__label--3 { --angle: var(--angle3); background-color: var(--color-chart-3-label-bg); }
+/* Kick the radius out a bit because the label segment is smaller, and it might overlap with the preceding segment. */
+.image-pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-chart-4-label-bg); --label-radius: 39%; }
+
+
+/* GROUP CHARTS / PIE CHART / MODIFIERS
+=================================================== */
+.image-pie-chart--other-segment {
+    .image-pie-chart__label,
+    &.image-pie-chart:hover .image-pie-chart__label {
+        opacity: 0;
+    }
+
+    .image-pie-chart__label--4,
+    &.image-pie-chart:hover .image-pie-chart__label--4 {
+        opacity: 1;
+        border: 2px solid black;
+    }
+
+    .image-pie-chart__disc {
+        background-image: conic-gradient(
+            hsl(from var(--color-chart-1) h s l / 0.1) 0% var(--end1),
+            hsl(from var(--color-chart-2) h s l / 0.1) var(--end1) var(--end2),
+            hsl(from var(--color-chart-3) h s l / 0.1) var(--end2) var(--end3),
+            var(--color-chart-4) var(--end3) var(--end4)
+        );
+    }
+}
+
+
+
+
 /* GROUP CHARTS / VERTICAL BAR CHART
 =================================================== */
 .vertical-bar-chart-figure {
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 6833e9d4ce..2557c1f7e1 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -626,47 +626,39 @@ function exportSubmissions() {
                             :title="__('What is your spirit animal?')"
                             title-tag="h2"
                             class="h-full"
-                            icon="fieldtype-radio"
+                            icon="image-select"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="pie-chart-figure">
+                            <figure class="image-pie-chart-figure">
                                 <div
-                                    class="pie-chart"
+                                    class="image-pie-chart"
                                     style="--1: 45; --2: 30; --3: 15; --4: 10;"
                                     role="img"
                                     :aria-labelledby="ImageChoicePieChart1LegendId"
                                 >
-                                    <div class="pie-chart__disc" aria-hidden="true" />
+                                    <div class="image-pie-chart__disc" aria-hidden="true" />
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">45%</span>
-                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">30%</span>
-                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">15%</span>
-                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">10%</span>
+                                    <span class="image-pie-chart__label | image-pie-chart__label--1" aria-hidden="true">45%</span>
+                                    <span class="image-pie-chart__label | image-pie-chart__label--2" aria-hidden="true">30%</span>
+                                    <span class="image-pie-chart__label | image-pie-chart__label--3" aria-hidden="true">15%</span>
+                                    <span class="image-pie-chart__label | image-pie-chart__label--4" aria-hidden="true">10%</span>
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
-                                <figcaption :id="ImageChoicePieChart1LegendId" class="pie-chart-legend">
-                                    <ul class="pie-chart-legend__list">
-                                        <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">45%</span>
-                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--1" />
-                                            <span>Before you Go Go</span>
+                                <figcaption :id="ImageChoicePieChart1LegendId" class="image-pie-chart-legend">
+                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_max-content] items-center gap-2.25 p-0 pt-4">
+                                        <li class="contents">
+                                            <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
+                                            <img class="rounded-full" src="https://picsum.photos/80/80?random=1" alt="" aria-hidden="true" />
+                                            <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
+                                            <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
                                         </li>
-                                        <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">30%</span>
-                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--2" />
-                                            <span>Bring me Back to Life</span>
-                                        </li>
-                                        <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">15%</span>
-                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--3" />
-                                            <span>When September Ends</span>
+                                        <li class="contents">
+                                            <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
+                                            <img class="rounded-full" src="https://picsum.photos/80/80?random=2" alt="" aria-hidden="true" />
+                                            <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
+                                            <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         </li>
-                                        <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">10%</span>
-                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
-                                            <span>Never</span>
-                                        </li>
-                                    </ul>
+                                    </ol>
                                 </figcaption>
                             </figure>
                         </Widget>

From e43cc67cd8e2a8f4f8f9c4c06a6b2502b18dbd6e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 14:42:57 +0100
Subject: [PATCH 051/110] Image Choice Field Type / Pie Chart - wip

---
 resources/js/pages/forms/Submissions.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 2557c1f7e1..7925cb330a 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -645,16 +645,16 @@ function exportSubmissions() {
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
                                 <figcaption :id="ImageChoicePieChart1LegendId" class="image-pie-chart-legend">
-                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_max-content] items-center gap-2.25 p-0 pt-4">
+                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-2.25 p-0 pt-4">
                                         <li class="contents">
                                             <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
-                                            <img class="rounded-full" src="https://picsum.photos/80/80?random=1" alt="" aria-hidden="true" />
+                                            <img class="size-10 shrink-0 rounded-full object-cover" src="https://picsum.photos/80/80?random=1" alt="" aria-hidden="true" />
                                             <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
                                             <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
                                         </li>
                                         <li class="contents">
                                             <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
-                                            <img class="rounded-full" src="https://picsum.photos/80/80?random=2" alt="" aria-hidden="true" />
+                                            <img class="size-10 shrink-0 rounded-full object-cover" src="https://picsum.photos/80/80?random=2" alt="" aria-hidden="true" />
                                             <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
                                             <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         </li>

From 0ac7e1782c6d0330d782f58748225e994255a158 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 14:45:50 +0100
Subject: [PATCH 052/110] Image Choice Field Type / Pie Chart - wip

---
 resources/css/components/forms/charts.css | 19 +++++++++++++++++++
 resources/js/pages/forms/Submissions.vue  | 12 +++++-------
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index f9fb878298..d024f4399f 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -223,6 +223,25 @@
 .image-pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-chart-4-label-bg); --label-radius: 39%; }
 
 
+/* GROUP CHARTS / IMAGE PIE CHART / MODIFIERS
+=================================================== */
+.image-pie-chart--2 {
+    --end1: calc(var(--1) * 1%);
+    --end2: calc((var(--1) + var(--2)) * 1%);
+    --angle1: calc(var(--1) * 3.6deg / 2);
+    --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
+
+    .image-pie-chart__disc {
+        @apply bg-gray-200 dark:bg-gray-700;
+
+        background-image: conic-gradient(
+            var(--color-chart-1) 0% var(--end1),
+            var(--color-chart-2) var(--end1) var(--end2)
+        );
+    }
+}
+
+
 /* GROUP CHARTS / PIE CHART / MODIFIERS
 =================================================== */
 .image-pie-chart--other-segment {
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 7925cb330a..383f054b84 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -631,21 +631,19 @@ function exportSubmissions() {
                         >
                             <figure class="image-pie-chart-figure">
                                 <div
-                                    class="image-pie-chart"
-                                    style="--1: 45; --2: 30; --3: 15; --4: 10;"
+                                    class="image-pie-chart image-pie-chart--2"
+                                    style="--1: 55; --2: 35;"
                                     role="img"
                                     :aria-labelledby="ImageChoicePieChart1LegendId"
                                 >
                                     <div class="image-pie-chart__disc" aria-hidden="true" />
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="image-pie-chart__label | image-pie-chart__label--1" aria-hidden="true">45%</span>
-                                    <span class="image-pie-chart__label | image-pie-chart__label--2" aria-hidden="true">30%</span>
-                                    <span class="image-pie-chart__label | image-pie-chart__label--3" aria-hidden="true">15%</span>
-                                    <span class="image-pie-chart__label | image-pie-chart__label--4" aria-hidden="true">10%</span>
+                                    <span class="image-pie-chart__label | image-pie-chart__label--1" aria-hidden="true">55%</span>
+                                    <span class="image-pie-chart__label | image-pie-chart__label--2" aria-hidden="true">35%</span>
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
                                 <figcaption :id="ImageChoicePieChart1LegendId" class="image-pie-chart-legend">
-                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-2.25 p-0 pt-4">
+                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-2.25 p-0 pt-3">
                                         <li class="contents">
                                             <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
                                             <img class="size-10 shrink-0 rounded-full object-cover" src="https://picsum.photos/80/80?random=1" alt="" aria-hidden="true" />

From 2a4f79bbc731778490b18b26300fc0b3baf82530 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 14:48:12 +0100
Subject: [PATCH 053/110] Image Choice Field Type / Pie Chart - wip

---
 resources/css/components/forms/charts.css | 52 +++++++++++++---------
 resources/js/pages/forms/Submissions.vue  | 53 +++++++++++++++--------
 2 files changed, 66 insertions(+), 39 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index d024f4399f..29d3568cde 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -192,12 +192,33 @@
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    background-image: conic-gradient(
-        var(--color-chart-1) 0% var(--end1),
-        var(--color-chart-2) var(--end1) var(--end2),
-        var(--color-chart-3) var(--end2) var(--end3),
-        var(--color-chart-4) var(--end3) var(--end4)
-    );
+    overflow: hidden;
+
+    @apply bg-gray-200 dark:bg-gray-700;
+}
+
+.image-pie-chart__slice {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background-image: var(--image);
+    background-size: cover;
+    background-position: center;
+}
+
+.image-pie-chart__slice--1 {
+    --slice-size: calc(var(--1) * 3.6deg);
+
+    -webkit-mask-image: conic-gradient(from 0deg, #000 0deg var(--slice-size), transparent var(--slice-size));
+    mask-image: conic-gradient(from 0deg, #000 0deg var(--slice-size), transparent var(--slice-size));
+}
+
+.image-pie-chart__slice--2 {
+    --slice-start: calc(var(--1) * 3.6deg);
+    --slice-size: calc(var(--2) * 3.6deg);
+
+    -webkit-mask-image: conic-gradient(from var(--slice-start), #000 0deg var(--slice-size), transparent var(--slice-size));
+    mask-image: conic-gradient(from var(--slice-start), #000 0deg var(--slice-size), transparent var(--slice-size));
 }
 
 .image-pie-chart__label {
@@ -216,29 +237,18 @@
     @apply text-xs font-medium tabular-nums text-white pointer-events-none;
 }
 
-.image-pie-chart__label--1 { --angle: var(--angle1); background-color: var(--color-chart-1-label-bg); }
-.image-pie-chart__label--2 { --angle: var(--angle2); background-color: var(--color-chart-2-label-bg); }
-.image-pie-chart__label--3 { --angle: var(--angle3); background-color: var(--color-chart-3-label-bg); }
+.image-pie-chart__label--1 { --angle: var(--angle1); background-color: hsl(0 0% 0% / 0.55); }
+.image-pie-chart__label--2 { --angle: var(--angle2); background-color: hsl(0 0% 0% / 0.55); }
+.image-pie-chart__label--3 { --angle: var(--angle3); background-color: hsl(0 0% 0% / 0.55); }
 /* Kick the radius out a bit because the label segment is smaller, and it might overlap with the preceding segment. */
-.image-pie-chart__label--4 { --angle: var(--angle4); background-color: var(--color-chart-4-label-bg); --label-radius: 39%; }
+.image-pie-chart__label--4 { --angle: var(--angle4); background-color: hsl(0 0% 0% / 0.55); --label-radius: 39%; }
 
 
 /* GROUP CHARTS / IMAGE PIE CHART / MODIFIERS
 =================================================== */
 .image-pie-chart--2 {
-    --end1: calc(var(--1) * 1%);
-    --end2: calc((var(--1) + var(--2)) * 1%);
     --angle1: calc(var(--1) * 3.6deg / 2);
     --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
-
-    .image-pie-chart__disc {
-        @apply bg-gray-200 dark:bg-gray-700;
-
-        background-image: conic-gradient(
-            var(--color-chart-1) 0% var(--end1),
-            var(--color-chart-2) var(--end1) var(--end2)
-        );
-    }
 }
 
 
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 383f054b84..fcae8c1d53 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -43,6 +43,13 @@ const pieChart2LegendPage2Id = useId();
 const lollipopChart1CaptionId = useId();
 const horizontalBarChart1CaptionId = useId();
 const verticalBarChart1CaptionId = useId();
+const imageChoiceBarChart1CaptionId = useId();
+const imageChoicePieChart1LegendId = useId();
+
+const imageChoicePieChart1Data = [
+    { percent: 55, badge: 'A', label: 'Actually', image: 'https://picsum.photos/seed/spirit-animal-a/320/320' },
+    { percent: 35, badge: 'B', label: 'Nope', image: 'https://picsum.photos/seed/spirit-animal-b/320/320' },
+];
 
 const verticalBarChart1Data = [
     { label: '0', percent: 2 },
@@ -632,30 +639,40 @@ function exportSubmissions() {
                             <figure class="image-pie-chart-figure">
                                 <div
                                     class="image-pie-chart image-pie-chart--2"
-                                    style="--1: 55; --2: 35;"
+                                    :style="{
+                                        '--1': imageChoicePieChart1Data[0].percent,
+                                        '--2': imageChoicePieChart1Data[1].percent,
+                                    }"
                                     role="img"
-                                    :aria-labelledby="ImageChoicePieChart1LegendId"
+                                    :aria-labelledby="imageChoicePieChart1LegendId"
                                 >
-                                    <div class="image-pie-chart__disc" aria-hidden="true" />
+                                    <div class="image-pie-chart__disc" aria-hidden="true">
+                                        <div
+                                            v-for="(option, index) in imageChoicePieChart1Data"
+                                            :key="option.badge"
+                                            class="image-pie-chart__slice"
+                                            :class="`image-pie-chart__slice--${index + 1}`"
+                                            :style="{ '--image': `url('${option.image}')` }"
+                                        />
+                                    </div>
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="image-pie-chart__label | image-pie-chart__label--1" aria-hidden="true">55%</span>
-                                    <span class="image-pie-chart__label | image-pie-chart__label--2" aria-hidden="true">35%</span>
+                                    <span
+                                        v-for="(option, index) in imageChoicePieChart1Data"
+                                        :key="`label-${option.badge}`"
+                                        class="image-pie-chart__label"
+                                        :class="`image-pie-chart__label--${index + 1}`"
+                                        aria-hidden="true"
+                                    >{{ option.percent }}%</span>
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
-                                <figcaption :id="ImageChoicePieChart1LegendId" class="image-pie-chart-legend">
+                                <figcaption :id="imageChoicePieChart1LegendId" class="image-pie-chart-legend">
                                     <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-2.25 p-0 pt-3">
-                                        <li class="contents">
-                                            <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
-                                            <img class="size-10 shrink-0 rounded-full object-cover" src="https://picsum.photos/80/80?random=1" alt="" aria-hidden="true" />
-                                            <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
-                                            <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
-                                        </li>
-                                        <li class="contents">
-                                            <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
-                                            <img class="size-10 shrink-0 rounded-full object-cover" src="https://picsum.photos/80/80?random=2" alt="" aria-hidden="true" />
-                                            <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
-                                            <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
-                                        </li>
+                                        <template v-for="option in imageChoicePieChart1Data" :key="option.badge">
+                                            <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">{{ option.percent }}%</span>
+                                            <img class="size-10 shrink-0 rounded-full object-cover" :src="option.image" alt="" aria-hidden="true" />
+                                            <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200" aria-hidden="true">{{ option.badge }}</span>
+                                            <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100" aria-hidden="true">{{ option.label }}</span>
+                                        </template>
                                     </ol>
                                 </figcaption>
                             </figure>

From c3ffe132c111cf17924568b3a46888f472bf90d2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 14:55:33 +0100
Subject: [PATCH 054/110] Image Choice Field Type / Pie Chart - wip

---
 resources/css/components/forms/charts.css | 4 ++++
 resources/js/pages/forms/Submissions.vue  | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 29d3568cde..2cc7d04e6d 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -217,6 +217,10 @@
     --slice-start: calc(var(--1) * 3.6deg);
     --slice-size: calc(var(--2) * 3.6deg);
 
+    background-image:
+        linear-gradient(hsl(from var(--color-chart-3) h s l / 0.4), hsl(from var(--color-chart-3) h s l / 0.4)),
+        var(--image);
+
     -webkit-mask-image: conic-gradient(from var(--slice-start), #000 0deg var(--slice-size), transparent var(--slice-size));
     mask-image: conic-gradient(from var(--slice-start), #000 0deg var(--slice-size), transparent var(--slice-size));
 }
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index fcae8c1d53..d4ad6b1f3f 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -48,7 +48,7 @@ const imageChoicePieChart1LegendId = useId();
 
 const imageChoicePieChart1Data = [
     { percent: 55, badge: 'A', label: 'Actually', image: 'https://picsum.photos/seed/spirit-animal-a/320/320' },
-    { percent: 35, badge: 'B', label: 'Nope', image: 'https://picsum.photos/seed/spirit-animal-b/320/320' },
+    { percent: 45, badge: 'B', label: 'Nope', image: 'https://picsum.photos/seed/spirit-animal-b/320/320' },
 ];
 
 const verticalBarChart1Data = [
@@ -614,15 +614,15 @@ function exportSubmissions() {
                                         <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">45%</span>
                                         <img class="rounded-full" src="https://picsum.photos/80/80?random=2" alt="" aria-hidden="true" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
-                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                        <div class="h-2.5 rounded-full w-[45%] bg-chart-2" />
                                     </li>
                                 </ol>
                                 <figcaption :id="imageChoiceBarChart1CaptionId" class="sr-only">
-                                    {{ __('Have you seen us live before?: Yep 55%, Nope 35%, Maybe 10%') }}
+                                    {{ __('What is your spirit animal?: Actually 55%, Nope 45%') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From 8993a5809d1c40cc02a50dd9b5a6ea67394613d5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 15:00:59 +0100
Subject: [PATCH 055/110] Image Choice Field Type / Pie Chart - tidy

---
 resources/css/components/forms/charts.css | 71 +----------------------
 resources/js/pages/forms/Submissions.vue  |  2 +-
 2 files changed, 2 insertions(+), 71 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 2cc7d04e6d..4c034a4129 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -136,31 +136,6 @@
     @apply pt-4;
 }
 
-.image-pie-chart-legend__list {
-    @apply grid gap-2.25 text-xs text-gray-700 dark:text-gray-50;
-}
-
-.image-pie-chart-legend__item {
-    @apply flex items-center gap-2.25;
-}
-
-.image-pie-chart-legend__value {
-    @apply min-w-7 text-end text-[0.785rem] font-medium;
-}
-
-.image-pie-chart-legend__swatch {
-    @apply size-2.5 shrink-0 rounded-full;
-}
-
-.image-pie-chart-legend__swatch--1 { @apply bg-chart-1-legend; }
-.image-pie-chart-legend__swatch--2 { @apply bg-chart-2-legend; }
-.image-pie-chart-legend__swatch--3 { @apply bg-chart-3-legend; }
-.image-pie-chart-legend__swatch--4 { @apply bg-chart-4-legend; }
-
-.image-pie-chart-legend__link {
-    @apply contents cursor-pointer text-inherit;
-}
-
 .image-pie-chart {
     --label-radius: 30%;
 
@@ -168,17 +143,9 @@
     width: 9rem;
     aspect-ratio: 1 / 1;
 
-    /* Slice sizes as unitless numbers (percent of circle). */
-    --end1: calc(var(--1) * 1%);
-    --end2: calc((var(--1) + var(--2)) * 1%);
-    --end3: calc((var(--1) + var(--2) + var(--3)) * 1%);
-    --end4: 100%;
-
     /* Midpoint angle for each slice (100% = 360deg). */
     --angle1: calc(var(--1) * 3.6deg / 2);
     --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
-    --angle3: calc((var(--1) + var(--2) + var(--3) / 2) * 3.6deg);
-    --angle4: calc((var(--1) + var(--2) + var(--3) + var(--4) / 2) * 3.6deg);
 
     &:hover {
         .image-pie-chart__label {
@@ -218,7 +185,7 @@
     --slice-size: calc(var(--2) * 3.6deg);
 
     background-image:
-        linear-gradient(hsl(from var(--color-chart-3) h s l / 0.4), hsl(from var(--color-chart-3) h s l / 0.4)),
+        linear-gradient(hsl(from var(--color-chart-3) h s l / 0.3), hsl(from var(--color-chart-3) h s l / 0.3)),
         var(--image);
 
     -webkit-mask-image: conic-gradient(from var(--slice-start), #000 0deg var(--slice-size), transparent var(--slice-size));
@@ -243,42 +210,6 @@
 
 .image-pie-chart__label--1 { --angle: var(--angle1); background-color: hsl(0 0% 0% / 0.55); }
 .image-pie-chart__label--2 { --angle: var(--angle2); background-color: hsl(0 0% 0% / 0.55); }
-.image-pie-chart__label--3 { --angle: var(--angle3); background-color: hsl(0 0% 0% / 0.55); }
-/* Kick the radius out a bit because the label segment is smaller, and it might overlap with the preceding segment. */
-.image-pie-chart__label--4 { --angle: var(--angle4); background-color: hsl(0 0% 0% / 0.55); --label-radius: 39%; }
-
-
-/* GROUP CHARTS / IMAGE PIE CHART / MODIFIERS
-=================================================== */
-.image-pie-chart--2 {
-    --angle1: calc(var(--1) * 3.6deg / 2);
-    --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
-}
-
-
-/* GROUP CHARTS / PIE CHART / MODIFIERS
-=================================================== */
-.image-pie-chart--other-segment {
-    .image-pie-chart__label,
-    &.image-pie-chart:hover .image-pie-chart__label {
-        opacity: 0;
-    }
-
-    .image-pie-chart__label--4,
-    &.image-pie-chart:hover .image-pie-chart__label--4 {
-        opacity: 1;
-        border: 2px solid black;
-    }
-
-    .image-pie-chart__disc {
-        background-image: conic-gradient(
-            hsl(from var(--color-chart-1) h s l / 0.1) 0% var(--end1),
-            hsl(from var(--color-chart-2) h s l / 0.1) var(--end1) var(--end2),
-            hsl(from var(--color-chart-3) h s l / 0.1) var(--end2) var(--end3),
-            var(--color-chart-4) var(--end3) var(--end4)
-        );
-    }
-}
 
 
 
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index d4ad6b1f3f..1ea01f209b 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -638,7 +638,7 @@ function exportSubmissions() {
                         >
                             <figure class="image-pie-chart-figure">
                                 <div
-                                    class="image-pie-chart image-pie-chart--2"
+                                    class="image-pie-chart"
                                     :style="{
                                         '--1': imageChoicePieChart1Data[0].percent,
                                         '--2': imageChoicePieChart1Data[1].percent,

From 9d34007e7cac3b17fbf3889687ddb27e5370adab Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 15:03:58 +0100
Subject: [PATCH 056/110] Image Choice Field Type / Pie Chart - fix
 accessibility

---
 resources/js/pages/forms/Submissions.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 1ea01f209b..3bcce38d30 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -51,6 +51,12 @@ const imageChoicePieChart1Data = [
     { percent: 45, badge: 'B', label: 'Nope', image: 'https://picsum.photos/seed/spirit-animal-b/320/320' },
 ];
 
+const imageChoicePieChart1AccessibleLabel = computed(() =>
+    imageChoicePieChart1Data
+        .map((option) => `${option.label} (${option.badge}) ${option.percent}%`)
+        .join(', '),
+);
+
 const verticalBarChart1Data = [
     { label: '0', percent: 2 },
     { label: '1', percent: 1 },
@@ -666,12 +672,13 @@ function exportSubmissions() {
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
                                 <figcaption :id="imageChoicePieChart1LegendId" class="image-pie-chart-legend">
-                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-2.25 p-0 pt-3">
+                                    <p class="sr-only">{{ imageChoicePieChart1AccessibleLabel }}</p>
+                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-2.25 p-0 pt-3" aria-hidden="true">
                                         <template v-for="option in imageChoicePieChart1Data" :key="option.badge">
-                                            <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">{{ option.percent }}%</span>
-                                            <img class="size-10 shrink-0 rounded-full object-cover" :src="option.image" alt="" aria-hidden="true" />
-                                            <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200" aria-hidden="true">{{ option.badge }}</span>
-                                            <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100" aria-hidden="true">{{ option.label }}</span>
+                                            <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
+                                            <img class="size-10 shrink-0 rounded-full object-cover" :src="option.image" alt="" />
+                                            <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ option.badge }}</span>
+                                            <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
                                         </template>
                                     </ol>
                                 </figcaption>

From ae34f826816aa480a4bc6f72fecd6e3a94ef675e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 15:17:02 +0100
Subject: [PATCH 057/110] Image Choice Field Type / Pie Chart - accessibility
 improvements

---
 resources/css/components/forms/charts.css | 10 +++--
 resources/js/pages/forms/Submissions.vue  | 54 ++++++++++++++---------
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 4c034a4129..98a7555f70 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -217,17 +217,19 @@
 /* GROUP CHARTS / VERTICAL BAR CHART
 =================================================== */
 .vertical-bar-chart-figure {
-    @apply p-6 px-4 pb-3;
+    display: grid;
+    height: 100%;
+    @apply py-3 px-3;
 }
 
 .vertical-bar-chart {
-    @apply m-0 list-none p-0;
-
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 0.5rem;
-    height: 7rem;
+    height: 100%;
+    list-style: none;
+    padding: 0;
 }
 
 .vertical-bar-chart__bar {
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 3bcce38d30..fe8f8e3c10 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -98,6 +98,14 @@ function selectNextChartPage() {
     }
 }
 
+const pieChart2AccessibleLabel = computed(() => {
+    if (wakeMeUpChartPage.value === 1) {
+        return __('Alarm, no mercy 68%, Hit snooze 18%, Woken by someone else 9%, Other 5%');
+    }
+
+    return __('Other breakdown: Bohemian Rhapsody 3%, Stairway to Heaven 1%, Wonderwall 1%');
+});
+
 async function generateFakeSubmission(mode) {
     if (generatingFakeSubmission.value) {
         return;
@@ -389,6 +397,7 @@ function exportSubmissions() {
                                     @page-selected="wakeMeUpChartPage = $event"
                                 />
                             </template>
+                            <p class="sr-only" aria-live="polite">{{ pieChart2AccessibleLabel }}</p>
                             <figure v-if="wakeMeUpChartPage === 1" class="pie-chart-figure">
                                 <div
                                     class="pie-chart"
@@ -479,9 +488,9 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="lollipopChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">1</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Summer</span>
                                         <div class="flex items-center gap-1">
@@ -491,7 +500,7 @@ function exportSubmissions() {
                                         </div>
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">2</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">2</span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
                                         <div class="flex items-center gap-1">
@@ -501,7 +510,7 @@ function exportSubmissions() {
                                         </div>
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">3</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">3</span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Spring</span>
                                         <div class="flex items-center gap-1">
@@ -511,7 +520,7 @@ function exportSubmissions() {
                                         </div>
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">4</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4</span>
                                         <span class="size-2.5 rounded-xs bg-chart-4-legend" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Winter</span>
                                         <div class="flex items-center gap-1">
@@ -537,21 +546,21 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="horizontalBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
                                         <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">35%</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">10%</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
                                         <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
@@ -572,15 +581,16 @@ function exportSubmissions() {
                             icon="scale-up"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <div class="mt-4 ms-3.5">
-                                <div class="inline-flex items-center gap-2 py-1.25 px-2 border border-gray-200 dark:border-gray-700 rounded-md">
-                                    <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-xs text-gray-500 dark:text-gray-400">Average</span>
-                                </div>
-                            </div>
                             <figure class="vertical-bar-chart-figure" :aria-labelledby="verticalBarChart1CaptionId">
+                                <div aria-hidden="true">
+                                    <div class="inline-flex items-center gap-2 py-1.25 px-2 border border-gray-200 dark:border-gray-700 rounded-md">
+                                        <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-xs text-gray-500 dark:text-gray-400">Average</span>
+                                    </div>
+                                </div>
                                 <ol
                                     class="vertical-bar-chart"
                                     :style="{ '--max-value': verticalBarChart1MaxValue }"
+                                    aria-hidden="true"
                                 >
                                     <li
                                         v-for="bar in verticalBarChart1Data"
@@ -588,15 +598,15 @@ function exportSubmissions() {
                                         class="vertical-bar-chart__bar"
                                         :style="{ '--value': bar.percent }"
                                     >
-                                        <div class="vertical-bar-chart__plot" aria-hidden="true">
+                                        <div class="vertical-bar-chart__plot">
                                             <span class="vertical-bar-chart__value">{{ bar.percent }}%</span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
-                                        <span class="vertical-bar-chart__scale-label" aria-hidden="true">{{ bar.label }}</span>
+                                        <span class="vertical-bar-chart__scale-label">{{ bar.label }}</span>
                                     </li>
                                 </ol>
                                 <figcaption :id="verticalBarChart1CaptionId" class="sr-only">
-                                    {{ __('Recommendation score distribution: 0: 2%, 1: 1%, 2: 3%, 3: 4%, 4: 6%, 5: 8%, 6: 12%, 7: 20%, 8: 35%, 9: 48%, 10: 61%') }}
+                                    {{ __('Average 8.1. Recommendation score distribution: 0: 2%, 1: 1%, 2: 3%, 3: 4%, 4: 6%, 5: 8%, 6: 12%, 7: 20%, 8: 35%, 9: 48%, 10: 61%') }}
                                 </figcaption>
                             </figure>
                         </Widget>
@@ -611,17 +621,17 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="imageChoiceBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4">
+                                <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">55%</span>
-                                        <img class="rounded-full" src="https://picsum.photos/80/80?random=1" alt="" aria-hidden="true" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <img class="rounded-full" src="https://picsum.photos/80/80?random=1" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
                                         <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" aria-hidden="true">45%</span>
-                                        <img class="rounded-full" src="https://picsum.photos/80/80?random=2" alt="" aria-hidden="true" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
+                                        <img class="rounded-full" src="https://picsum.photos/80/80?random=2" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         <div class="h-2.5 rounded-full w-[45%] bg-chart-2" />

From 16edfc6e3a24b6116dd6512fab3a229b9e36ece0 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 16:15:59 +0100
Subject: [PATCH 058/110] Image Choice Field Type / Pie Chart - remove color
 overlay

---
 resources/css/components/forms/charts.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 98a7555f70..bffd79ad64 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -184,10 +184,6 @@
     --slice-start: calc(var(--1) * 3.6deg);
     --slice-size: calc(var(--2) * 3.6deg);
 
-    background-image:
-        linear-gradient(hsl(from var(--color-chart-3) h s l / 0.3), hsl(from var(--color-chart-3) h s l / 0.3)),
-        var(--image);
-
     -webkit-mask-image: conic-gradient(from var(--slice-start), #000 0deg var(--slice-size), transparent var(--slice-size));
     mask-image: conic-gradient(from var(--slice-start), #000 0deg var(--slice-size), transparent var(--slice-size));
 }

From ccc3721513524ea97e7b98589bc00165845acb0f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 16:34:40 +0100
Subject: [PATCH 059/110] Image Choice Field Type / Pie Chart - add chart
 toggle

---
 resources/js/pages/forms/Submissions.vue      | 67 +++++++++++--------
 resources/svg/icons/charts-bar-horizontal.svg |  1 +
 2 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 resources/svg/icons/charts-bar-horizontal.svg

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index fe8f8e3c10..1a309f73ad 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -57,6 +57,8 @@ const imageChoicePieChart1AccessibleLabel = computed(() =>
         .join(', '),
 );
 
+const imageChoiceChart1Type = ref('bar');
+
 const verticalBarChart1Data = [
     { label: '0', percent: 2 },
     { label: '1', percent: 1 },
@@ -611,7 +613,7 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
-                    <!-- Example of an Image Choice field type (Image Choice Bar Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <!-- Example of an Image Choice field type with a chart type chooser. We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('What is your spirit animal?')"
@@ -620,39 +622,49 @@ function exportSubmissions() {
                             icon="image-select"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="imageChoiceBarChart1CaptionId">
+                            <template #actions>
+                                <ToggleGroup v-model="imageChoiceChart1Type" size="sm">
+                                    <ToggleItem
+                                        value="bar"
+                                        icon="charts-bar-horizontal"
+                                        :aria-label="__('Bar chart')"
+                                        v-tooltip="__('Bar chart')"
+                                    />
+                                    <ToggleItem
+                                        value="pie"
+                                        icon="money-graph-pie-chart"
+                                        :aria-label="__('Pie chart')"
+                                        v-tooltip="__('Pie chart')"
+                                    />
+                                </ToggleGroup>
+                            </template>
+                            <figure
+                                v-if="imageChoiceChart1Type === 'bar'"
+                                class="p-6 grid"
+                                :aria-labelledby="imageChoiceBarChart1CaptionId"
+                            >
                                 <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
-                                        <img class="rounded-full" src="https://picsum.photos/80/80?random=1" alt="" />
-                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
-                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
-                                    </li>
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
-                                        <img class="rounded-full" src="https://picsum.photos/80/80?random=2" alt="" />
-                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
-                                        <div class="h-2.5 rounded-full w-[45%] bg-chart-2" />
+                                    <li
+                                        v-for="(option, index) in imageChoicePieChart1Data"
+                                        :key="option.badge"
+                                        class="contents"
+                                    >
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
+                                        <img class="size-10 shrink-0 rounded-full object-cover" :src="option.image" alt="" />
+                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ option.badge }}</span>
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
+                                        <div
+                                            class="h-2.5 rounded-full"
+                                            :class="index === 1 ? 'bg-chart-2' : 'bg-chart-1'"
+                                            :style="{ width: `${option.percent}%` }"
+                                        />
                                     </li>
                                 </ol>
                                 <figcaption :id="imageChoiceBarChart1CaptionId" class="sr-only">
                                     {{ __('What is your spirit animal?: Actually 55%, Nope 45%') }}
                                 </figcaption>
                             </figure>
-                        </Widget>
-                    </div>
-                    <!-- Example of an Image Choice field type (Image Choice Pie Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
-                        <Widget
-                            :title="__('What is your spirit animal?')"
-                            title-tag="h2"
-                            class="h-full"
-                            icon="image-select"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
-                        >
-                            <figure class="image-pie-chart-figure">
+                            <figure v-else class="image-pie-chart-figure">
                                 <div
                                     class="image-pie-chart"
                                     :style="{
@@ -680,7 +692,6 @@ function exportSubmissions() {
                                         aria-hidden="true"
                                     >{{ option.percent }}%</span>
                                 </div>
-                                <!-- Pie Chart 1 Legend -->
                                 <figcaption :id="imageChoicePieChart1LegendId" class="image-pie-chart-legend">
                                     <p class="sr-only">{{ imageChoicePieChart1AccessibleLabel }}</p>
                                     <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-2.25 p-0 pt-3" aria-hidden="true">
diff --git a/resources/svg/icons/charts-bar-horizontal.svg b/resources/svg/icons/charts-bar-horizontal.svg
new file mode 100644
index 0000000000..0e65b31c38
--- /dev/null
+++ b/resources/svg/icons/charts-bar-horizontal.svg
@@ -0,0 +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"><g fill="none" stroke="currentColor" transform="matrix(0 -1 -1 0 13.99987 13.99987)"><path d="m4.842 13.25h-3.067c-.526 0-.963-.407-.987-.932-.052-1.179-.051-2.345.005-3.525.023-.48.394-.872.872-.91.818-.066 1.535-.066 2.353 0 .479.038.849.43.872.91.071 1.49.055 2.957-.048 4.457z"/><path d="m9.025 13.25h-4c-.111-2.663-.121-5.262-.03-7.914.016-.461.349-.856.807-.918.853-.117 1.593-.117 2.446 0 .458.062.791.457.807.918.091 2.652.081 5.251-.03 7.914z"/><path d="m12.199 13.25h-3.041c-.112-2.687-.121-8.325-.027-11.495.013-.462.346-.854.804-.917.853-.117 1.593-.117 2.446 0 .458.063.791.455.805.916.083 2.831.085 7.63.005 10.538-.015.536-.456.958-.992.958z"/></g></svg>
\ No newline at end of file

From 8e46997994281bf0459fcd45d6c80d8b7a4a1a63 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 16:42:40 +0100
Subject: [PATCH 060/110] Checkboxes Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 39 +++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 1a309f73ad..ab913a65b9 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -2,7 +2,7 @@
 import { ref, computed, watch, useId } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
-import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem, Widget, Pagination } from '@ui';
+import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem, Widget, Pagination, Icon } from '@ui';
 import ResourceDeleter from '@/components/ResourceDeleter.vue';
 import FormSubmissionListing from '@/components/forms/SubmissionListing.vue';
 import Layout from '@/pages/layout/Layout.vue';
@@ -45,6 +45,7 @@ const horizontalBarChart1CaptionId = useId();
 const verticalBarChart1CaptionId = useId();
 const imageChoiceBarChart1CaptionId = useId();
 const imageChoicePieChart1LegendId = useId();
+const checkboxesBarChart1CaptionId = useId();
 
 const imageChoicePieChart1Data = [
     { percent: 55, badge: 'A', label: 'Actually', image: 'https://picsum.photos/seed/spirit-animal-a/320/320' },
@@ -706,6 +707,42 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of a Checkboxes field type (Horizontal Bar Chart with checkbox icons). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('Have you seen us live before?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-checkboxes"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <figure class="p-6 grid" :aria-labelledby="checkboxesBarChart1CaptionId">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <Icon name="checkbox" class="size-3.5 shrink-0 text-chart-1" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
+                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
+                                        <Icon name="checkbox" class="size-3.5 shrink-0 text-chart-2" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        <Icon name="checkbox" class="size-3.5 shrink-0 text-chart-3" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
+                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
+                                    </li>
+                                </ol>
+                                <figcaption :id="checkboxesBarChart1CaptionId" class="sr-only">
+                                    {{ __('Have you seen us live before?: Yep 55%, Nope 35%, Maybe 10%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From 249f76654f5c898379964ee40b121fe8aa486641 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 16:48:28 +0100
Subject: [PATCH 061/110] Checkboxes Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 6 +++---
 resources/svg/icons/checkbox-filled.svg  | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 resources/svg/icons/checkbox-filled.svg

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index ab913a65b9..e4c4191d85 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -720,19 +720,19 @@ function exportSubmissions() {
                                 <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
-                                        <Icon name="checkbox" class="size-3.5 shrink-0 text-chart-1" />
+                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
                                         <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
-                                        <Icon name="checkbox" class="size-3.5 shrink-0 text-chart-2" />
+                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-2" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
-                                        <Icon name="checkbox" class="size-3.5 shrink-0 text-chart-3" />
+                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-3" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
                                         <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
                                     </li>
diff --git a/resources/svg/icons/checkbox-filled.svg b/resources/svg/icons/checkbox-filled.svg
new file mode 100644
index 0000000000..041e6573a4
--- /dev/null
+++ b/resources/svg/icons/checkbox-filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M0.959867 10.2685C1.114 11.7092 2.2727 12.8679 3.71266 13.0284 4.78221 13.1476 5.88037 13.25 7 13.25s2.21779 -0.1024 3.2873 -0.2216c1.44 -0.1605 2.5987 -1.3192 2.7528 -2.7599 0.1138 -1.06348 0.2099 -2.15535 0.2099 -3.2685 0 -1.11316 -0.0961 -2.20502 -0.2099 -3.26853 -0.1541 -1.44065 -1.3128 -2.59936 -2.7528 -2.759861C9.21779 0.852392 8.11963 0.75 7 0.75S4.78221 0.852392 3.71266 0.971609C2.2727 1.13211 1.114 2.29082 0.959867 3.73147 0.846083 4.79498 0.75 5.88684 0.75 7c0 1.11315 0.096084 2.20502 0.209867 3.2685Z"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.5 7.625 6.31818 9.5c0.85557 -2.45768 1.5681 -3.53614 3.18182 -5"/></svg>

From f14d7fa9c9444b58f64440c7c5ac3b3161f08aff Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 16:58:40 +0100
Subject: [PATCH 062/110] Checkboxes Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index e4c4191d85..2a5884a33f 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -720,25 +720,31 @@ function exportSubmissions() {
                                 <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
-                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
+                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Radiohead</span>
                                         <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
-                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-2" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Death Cab for Cutie</span>
                                         <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
-                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-3" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
+                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-3-legend" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Olivia Rodrigo</span>
+                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-4-legend" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">The Cure</span>
                                         <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
                                     </li>
                                 </ol>
                                 <figcaption :id="checkboxesBarChart1CaptionId" class="sr-only">
-                                    {{ __('Have you seen us live before?: Yep 55%, Nope 35%, Maybe 10%') }}
+                                    {{ __('Have you seen us live before?: Radiohead 55%, Death Cab for Cutie 35%, Olivia Rodrigo 10%, The Cure 10%') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From 949b5dffeb55f080d93c315596cacf6454be7289 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 17:07:31 +0100
Subject: [PATCH 063/110] Checkboxes Field Type - finish

---
 resources/js/pages/forms/Submissions.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 2a5884a33f..05e11499f1 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -731,20 +731,20 @@ function exportSubmissions() {
                                         <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-3-legend" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Olivia Rodrigo</span>
-                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
+                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-3" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-4-legend" />
                                         <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">The Cure</span>
-                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
+                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-4-legend" />
                                     </li>
                                 </ol>
                                 <figcaption :id="checkboxesBarChart1CaptionId" class="sr-only">
-                                    {{ __('Have you seen us live before?: Radiohead 55%, Death Cab for Cutie 35%, Olivia Rodrigo 10%, The Cure 10%') }}
+                                    {{ __('Have you seen us live before?: Radiohead 55%, Death Cab for Cutie 35%, Olivia Rodrigo 5%, The Cure 5%') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From 49e4376e7a45a44ed87321c0a6c30ef2ceb906bb Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 17:15:08 +0100
Subject: [PATCH 064/110] Yes / No Field Type - start

---
 resources/js/pages/forms/Submissions.vue | 30 ++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 05e11499f1..8998c985bc 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -749,6 +749,36 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of a yes/no field type (Horizontal Bar Chart with yes/no icons). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('Do you fancy a pint?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="checkmark-circle"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <figure class="p-6 grid" :aria-labelledby="yesNoBarChart1CaptionId">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <Icon name="checkmark-circle-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">I'll get my coat</span>
+                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
+                                        <Icon name="delete-circle-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Coffee might be better</span>
+                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                    </li>
+                                </ol>
+                                <figcaption :id="yesNoBarChart1CaptionId" class="sr-only">
+                                    {{ __('Do you fancy a pint?: I\'ll get my coat 55%, Coffee might be better 45%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From 854f0d88e5651cd61ea0ed8a6d10f30d34d08e4a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 17:15:16 +0100
Subject: [PATCH 065/110] Adjust spacing slightly

---
 resources/js/pages/forms/Submissions.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 8998c985bc..8c26a796b9 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -491,7 +491,7 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="lollipopChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
@@ -549,7 +549,7 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="horizontalBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
@@ -644,7 +644,7 @@ function exportSubmissions() {
                                 class="p-6 grid"
                                 :aria-labelledby="imageChoiceBarChart1CaptionId"
                             >
-                                <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
+                                <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
                                     <li
                                         v-for="(option, index) in imageChoicePieChart1Data"
                                         :key="option.badge"
@@ -695,7 +695,7 @@ function exportSubmissions() {
                                 </div>
                                 <figcaption :id="imageChoicePieChart1LegendId" class="image-pie-chart-legend">
                                     <p class="sr-only">{{ imageChoicePieChart1AccessibleLabel }}</p>
-                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-2.25 p-0 pt-3" aria-hidden="true">
+                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-x-2.25 gap-y-2.5 p-0 pt-3" aria-hidden="true">
                                         <template v-for="option in imageChoicePieChart1Data" :key="option.badge">
                                             <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
                                             <img class="size-10 shrink-0 rounded-full object-cover" :src="option.image" alt="" />
@@ -717,7 +717,7 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="checkboxesBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-2.25 p-0 pt-4" aria-hidden="true">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1-legend" />

From da180661b34495f456117b2b918f71f33eb6844a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 17:17:26 +0100
Subject: [PATCH 066/110] Yes / No Field Type - add pie chart option

---
 resources/js/pages/forms/Submissions.vue | 104 ++++++++++++++++++++---
 1 file changed, 90 insertions(+), 14 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 8c26a796b9..b5125e7051 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -46,6 +46,21 @@ const verticalBarChart1CaptionId = useId();
 const imageChoiceBarChart1CaptionId = useId();
 const imageChoicePieChart1LegendId = useId();
 const checkboxesBarChart1CaptionId = useId();
+const yesNoBarChart1CaptionId = useId();
+const yesNoPieChart1LegendId = useId();
+
+const yesNoChart1Data = [
+    { percent: 55, label: 'I\'ll get my coat', icon: 'checkmark-circle-filled', chartColor: 1 },
+    { percent: 45, label: 'Coffee might be better', icon: 'delete-circle-filled', chartColor: 2 },
+];
+
+const yesNoChart1AccessibleLabel = computed(() =>
+    yesNoChart1Data
+        .map((option) => `${option.label} ${option.percent}%`)
+        .join(', '),
+);
+
+const yesNoChart1Type = ref('bar');
 
 const imageChoicePieChart1Data = [
     { percent: 55, badge: 'A', label: 'Actually', image: 'https://picsum.photos/seed/spirit-animal-a/320/320' },
@@ -749,7 +764,7 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
-                    <!-- Example of a yes/no field type (Horizontal Bar Chart with yes/no icons). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <!-- Example of a yes/no field type with a chart type chooser. We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('Do you fancy a pint?')"
@@ -758,23 +773,84 @@ function exportSubmissions() {
                             icon="checkmark-circle"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="yesNoBarChart1CaptionId">
+                            <template #actions>
+                                <ToggleGroup v-model="yesNoChart1Type" size="sm">
+                                    <ToggleItem
+                                        value="bar"
+                                        icon="charts-bar-horizontal"
+                                        :aria-label="__('Bar chart')"
+                                        v-tooltip="__('Bar chart')"
+                                    />
+                                    <ToggleItem
+                                        value="pie"
+                                        icon="money-graph-pie-chart"
+                                        :aria-label="__('Pie chart')"
+                                        v-tooltip="__('Pie chart')"
+                                    />
+                                </ToggleGroup>
+                            </template>
+                            <figure
+                                v-if="yesNoChart1Type === 'bar'"
+                                class="p-6 grid"
+                                :aria-labelledby="yesNoBarChart1CaptionId"
+                            >
                                 <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
-                                        <Icon name="checkmark-circle-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">I'll get my coat</span>
-                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
-                                    </li>
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
-                                        <Icon name="delete-circle-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Coffee might be better</span>
-                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                    <li
+                                        v-for="option in yesNoChart1Data"
+                                        :key="option.label"
+                                        class="contents"
+                                    >
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
+                                        <Icon
+                                            :name="option.icon"
+                                            class="size-3.5 shrink-0"
+                                            :class="option.chartColor === 2 ? 'text-chart-2-legend' : 'text-chart-1-legend'"
+                                        />
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
+                                        <div
+                                            class="h-2.5 rounded-full"
+                                            :class="option.chartColor === 2 ? 'bg-chart-2' : 'bg-chart-1'"
+                                            :style="{ width: `${option.percent}%` }"
+                                        />
                                     </li>
                                 </ol>
                                 <figcaption :id="yesNoBarChart1CaptionId" class="sr-only">
-                                    {{ __('Do you fancy a pint?: I\'ll get my coat 55%, Coffee might be better 45%') }}
+                                    {{ __('Do you fancy a pint?: :summary', { summary: yesNoChart1AccessibleLabel }) }}
+                                </figcaption>
+                            </figure>
+                            <figure v-else class="pie-chart-figure">
+                                <div
+                                    class="pie-chart"
+                                    :style="{
+                                        '--1': yesNoChart1Data[0].percent,
+                                        '--2': yesNoChart1Data[1].percent,
+                                        '--3': 0,
+                                        '--4': 0,
+                                    }"
+                                    role="img"
+                                    :aria-labelledby="yesNoPieChart1LegendId"
+                                >
+                                    <div class="pie-chart__disc" aria-hidden="true" />
+                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">{{ yesNoChart1Data[0].percent }}%</span>
+                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">{{ yesNoChart1Data[1].percent }}%</span>
+                                </div>
+                                <figcaption :id="yesNoPieChart1LegendId" class="pie-chart-legend">
+                                    <p class="sr-only">{{ __('Do you fancy a pint?: :summary', { summary: yesNoChart1AccessibleLabel }) }}</p>
+                                    <ul class="pie-chart-legend__list" aria-hidden="true">
+                                        <li
+                                            v-for="option in yesNoChart1Data"
+                                            :key="option.label"
+                                            class="pie-chart-legend__item"
+                                        >
+                                            <span class="pie-chart-legend__value">{{ option.percent }}%</span>
+                                            <Icon
+                                                :name="option.icon"
+                                                class="size-3.5 shrink-0"
+                                                :class="option.chartColor === 2 ? 'text-chart-2-legend' : 'text-chart-1-legend'"
+                                            />
+                                            <span>{{ option.label }}</span>
+                                        </li>
+                                    </ul>
                                 </figcaption>
                             </figure>
                         </Widget>

From 3a918bfb4a8554243b5b7841ca27e691c787ebf3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 17:29:31 +0100
Subject: [PATCH 067/110] Dictionary Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 64 ++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index b5125e7051..2c41b21f6d 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -855,6 +855,70 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of a Dictionary field type (Horizontal Lollipop Chart with icons). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('What’s your favourite country?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-dictionary"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <figure class="p-6 grid" :aria-labelledby="dictionaryChart1CaptionId">
+                                <!-- If there are more than 4 items, then align-center. If there are less than 4 items, then p-4 -->
+                                <ol class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] items-center gap-x-2.25 p-0" aria-hidden="true">
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Japan</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[40%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇯🇵</div>
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">40%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">2</span>
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Italy</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[35%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇮🇹</div>
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">3</span>
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">USA</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇺🇸</div>
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4</span>
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">UK</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[8%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇬🇧</div>
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">8%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5</span>
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">France</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[3%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇫🇷</div>
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">3%</span>
+                                        </div>
+                                    </li>
+                                </ol>
+                                <figcaption :id="dictionaryChart1CaptionId" class="sr-only">
+                                    {{ __('Ranked favourite seasons: Summer 55%, Autumn 25%, Spring 15%, Winter 10%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From 52a3ebbd942606c96845778c6a89cb05d9f517f0 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 17:38:42 +0100
Subject: [PATCH 068/110] Dictionary Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 138 +++++++++++++++--------
 1 file changed, 94 insertions(+), 44 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 2c41b21f6d..5790c6d053 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -48,6 +48,48 @@ const imageChoicePieChart1LegendId = useId();
 const checkboxesBarChart1CaptionId = useId();
 const yesNoBarChart1CaptionId = useId();
 const yesNoPieChart1LegendId = useId();
+const dictionaryChart1CaptionId = useId();
+const dictionaryChart1Page2CaptionId = useId();
+
+const dictionaryChart1Page1Data = [
+    { rank: 1, label: 'Japan', flag: '🇯🇵', percent: 40 },
+    { rank: 2, label: 'Italy', flag: '🇮🇹', percent: 35 },
+    { rank: 3, label: 'USA', flag: '🇺🇸', percent: 10 },
+    { rank: 4, label: 'UK', flag: '🇬🇧', percent: 8 },
+    { rank: 5, label: 'France', flag: '🇫🇷', percent: 3 },
+];
+
+const dictionaryChart1Page2Data = [
+    { rank: 6, label: 'Germany', flag: '🇩🇪', percent: 2 },
+    { rank: 7, label: 'Spain', flag: '🇪🇸', percent: 1 },
+    { rank: 8, label: 'Portugal', flag: '🇵🇹', percent: 1 },
+];
+
+const dictionaryChartPage = ref(1);
+const dictionaryChartPerPage = 5;
+const dictionaryChartTotal = 8;
+
+const dictionaryChartMeta = computed(() => {
+    const from = (dictionaryChartPage.value - 1) * dictionaryChartPerPage + 1;
+    const to = Math.min(dictionaryChartPage.value * dictionaryChartPerPage, dictionaryChartTotal);
+
+    return {
+        current_page: dictionaryChartPage.value,
+        last_page: Math.ceil(dictionaryChartTotal / dictionaryChartPerPage),
+        per_page: dictionaryChartPerPage,
+        total: dictionaryChartTotal,
+        from,
+        to,
+    };
+});
+
+const dictionaryChartAccessibleLabel = computed(() => {
+    if (dictionaryChartPage.value === 1) {
+        return __('Japan 40%, Italy 35%, USA 10%, UK 8%, France 3%');
+    }
+
+    return __('Germany 2%, Spain 1%, Portugal 1%');
+});
 
 const yesNoChart1Data = [
     { percent: 55, label: 'I\'ll get my coat', icon: 'checkmark-circle-filled', chartColor: 1 },
@@ -855,7 +897,7 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
-                    <!-- Example of a Dictionary field type (Horizontal Lollipop Chart with icons). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <!-- Example of a Dictionary field type (Horizontal Lollipop Chart with icons) with Pagination. We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
                             :title="__('What’s your favourite country?')"
@@ -864,57 +906,65 @@ function exportSubmissions() {
                             icon="fieldtype-dictionary"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="dictionaryChart1CaptionId">
+                            <template #actions>
+                                <Pagination
+                                    :resource-meta="dictionaryChartMeta"
+                                    :show-totals="false"
+                                    :show-page-links="false"
+                                    :show-per-page-selector="false"
+                                    :scroll-to-top="false"
+                                    @page-selected="dictionaryChartPage = $event"
+                                />
+                            </template>
+                            <p class="sr-only" aria-live="polite">{{ dictionaryChartAccessibleLabel }}</p>
+                            <figure v-if="dictionaryChartPage === 1" class="p-6 grid" :aria-labelledby="dictionaryChart1CaptionId">
                                 <!-- If there are more than 4 items, then align-center. If there are less than 4 items, then p-4 -->
-                                <ol class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] items-center gap-x-2.25 p-0" aria-hidden="true">
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Japan</span>
-                                        <div class="flex items-center gap-1">
-                                            <div class="h-px w-[40%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="text-lg">🇯🇵</div>
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">40%</span>
-                                        </div>
-                                    </li>
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">2</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Italy</span>
-                                        <div class="flex items-center gap-1">
-                                            <div class="h-px w-[35%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="text-lg">🇮🇹</div>
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
-                                        </div>
-                                    </li>
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">3</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">USA</span>
-                                        <div class="flex items-center gap-1">
-                                            <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="text-lg">🇺🇸</div>
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
-                                        </div>
-                                    </li>
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">UK</span>
+                                <ol
+                                    class="m-0 list-none grid grid-cols-[auto_max-content_1fr] gap-x-2.25"
+                                    :class="dictionaryChart1Page1Data.length > 4 ? 'items-center p-0' : 'p-4'"
+                                    aria-hidden="true"
+                                >
+                                    <li
+                                        v-for="item in dictionaryChart1Page1Data"
+                                        :key="item.label"
+                                        class="contents"
+                                    >
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.rank }}</span>
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ item.label }}</span>
                                         <div class="flex items-center gap-1">
-                                            <div class="h-px w-[8%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="text-lg">🇬🇧</div>
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">8%</span>
+                                            <div class="h-px bg-gray-200 dark:bg-gray-600" :style="{ width: `${item.percent}%` }" />
+                                            <div class="text-lg">{{ item.flag }}</div>
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.percent }}%</span>
                                         </div>
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">France</span>
+                                </ol>
+                                <figcaption :id="dictionaryChart1CaptionId" class="sr-only">
+                                    {{ __('What’s your favourite country?: Japan 40%, Italy 35%, USA 10%, UK 8%, France 3%') }}
+                                </figcaption>
+                            </figure>
+                            <figure v-else-if="dictionaryChartPage === 2" class="p-6 grid" :aria-labelledby="dictionaryChart1Page2CaptionId">
+                                <!-- If there are more than 4 items, then align-center. If there are less than 4 items, then p-4 -->
+                                <ol
+                                    class="m-0 list-none grid grid-cols-[auto_max-content_1fr] gap-x-2.25"
+                                    :class="dictionaryChart1Page2Data.length > 4 ? 'items-center pt-0' : 'pt-4'"
+                                    aria-hidden="true"
+                                >
+                                    <li
+                                        v-for="item in dictionaryChart1Page2Data"
+                                        :key="item.label"
+                                        class="contents"
+                                    >
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.rank }}</span>
+                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ item.label }}</span>
                                         <div class="flex items-center gap-1">
-                                            <div class="h-px w-[3%] bg-gray-200 dark:bg-gray-600" />
-                                            <div class="text-lg">🇫🇷</div>
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">3%</span>
+                                            <div class="h-px bg-gray-200 dark:bg-gray-600" :style="{ width: `${item.percent}%` }" />
+                                            <div class="text-lg">{{ item.flag }}</div>
+                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.percent }}%</span>
                                         </div>
                                     </li>
                                 </ol>
-                                <figcaption :id="dictionaryChart1CaptionId" class="sr-only">
-                                    {{ __('Ranked favourite seasons: Summer 55%, Autumn 25%, Spring 15%, Winter 10%') }}
+                                <figcaption :id="dictionaryChart1Page2CaptionId" class="sr-only">
+                                    {{ __('What’s your favourite country?: Germany 2%, Spain 1%, Portugal 1%') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From a97fee9727ccc6a826469e801431f379de97d05b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 18:18:48 +0100
Subject: [PATCH 069/110] Dictionary Field Type - fix alignment

---
 resources/js/pages/forms/Submissions.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 5790c6d053..4962466064 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -920,8 +920,7 @@ function exportSubmissions() {
                             <figure v-if="dictionaryChartPage === 1" class="p-6 grid" :aria-labelledby="dictionaryChart1CaptionId">
                                 <!-- If there are more than 4 items, then align-center. If there are less than 4 items, then p-4 -->
                                 <ol
-                                    class="m-0 list-none grid grid-cols-[auto_max-content_1fr] gap-x-2.25"
-                                    :class="dictionaryChart1Page1Data.length > 4 ? 'items-center p-0' : 'p-4'"
+                                    class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] grid-rows-5 gap-x-2.25"
                                     aria-hidden="true"
                                 >
                                     <li
@@ -945,8 +944,7 @@ function exportSubmissions() {
                             <figure v-else-if="dictionaryChartPage === 2" class="p-6 grid" :aria-labelledby="dictionaryChart1Page2CaptionId">
                                 <!-- If there are more than 4 items, then align-center. If there are less than 4 items, then p-4 -->
                                 <ol
-                                    class="m-0 list-none grid grid-cols-[auto_max-content_1fr] gap-x-2.25"
-                                    :class="dictionaryChart1Page2Data.length > 4 ? 'items-center pt-0' : 'pt-4'"
+                                    class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] grid-rows-5 gap-x-2.25"
                                     aria-hidden="true"
                                 >
                                     <li

From fd6f4f246f60c2d93baecfb1a9dd17dc92f7908d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 30 Jun 2026 18:21:19 +0100
Subject: [PATCH 070/110] Dictionary Field Type - tidy

---
 resources/js/pages/forms/Submissions.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 4962466064..6b7dfc4098 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -918,7 +918,6 @@ function exportSubmissions() {
                             </template>
                             <p class="sr-only" aria-live="polite">{{ dictionaryChartAccessibleLabel }}</p>
                             <figure v-if="dictionaryChartPage === 1" class="p-6 grid" :aria-labelledby="dictionaryChart1CaptionId">
-                                <!-- If there are more than 4 items, then align-center. If there are less than 4 items, then p-4 -->
                                 <ol
                                     class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] grid-rows-5 gap-x-2.25"
                                     aria-hidden="true"
@@ -942,7 +941,6 @@ function exportSubmissions() {
                                 </figcaption>
                             </figure>
                             <figure v-else-if="dictionaryChartPage === 2" class="p-6 grid" :aria-labelledby="dictionaryChart1Page2CaptionId">
-                                <!-- If there are more than 4 items, then align-center. If there are less than 4 items, then p-4 -->
                                 <ol
                                     class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] grid-rows-5 gap-x-2.25"
                                     aria-hidden="true"

From 7c4d0deaaaeeaaa4e238bbe8b9c59c5af9e2aa44 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 09:44:59 +0100
Subject: [PATCH 071/110] Number Field Type - start

---
 resources/js/pages/forms/Submissions.vue | 47 +++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 6b7dfc4098..fcba84ac16 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -105,8 +105,8 @@ const yesNoChart1AccessibleLabel = computed(() =>
 const yesNoChart1Type = ref('bar');
 
 const imageChoicePieChart1Data = [
-    { percent: 55, badge: 'A', label: 'Actually', image: 'https://picsum.photos/seed/spirit-animal-a/320/320' },
-    { percent: 45, badge: 'B', label: 'Nope', image: 'https://picsum.photos/seed/spirit-animal-b/320/320' },
+    { percent: 55, badge: 'A', label: 'Actually', image: 'https://picsum.photos/id/159/320/320' },
+    { percent: 45, badge: 'B', label: 'Nope', image: 'https://picsum.photos/id/485/320/320' },
 ];
 
 const imageChoicePieChart1AccessibleLabel = computed(() =>
@@ -965,6 +965,49 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of a Number field type (Horizontal Bar Chart with info). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                        <Widget
+                            :title="__('How old are you?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="number"
+                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                        >
+                            <figure class="p-6 grid" :aria-labelledby="numberBarChart1CaptionId">
+                                <ol class="m-0 list-none grid grid-cols-[auto_1fr_max-content] items-center gap-x-2.25 gap-y-2.5 p-0" aria-hidden="true">
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">0–9</span>
+                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10–19</span>
+                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">20–29</span>
+                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-3" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">30–39</span>
+                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-4-legend" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">40–49</span>
+                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-4-legend" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                    </li>
+                                </ol>
+                                <figcaption :id="checkboxesBarChart1CaptionId" class="sr-only">
+                                    {{ __('Have you seen us live before?: Radiohead 55%, Death Cab for Cutie 35%, Olivia Rodrigo 5%, The Cure 5%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From 3e55aa319e4bcf04301e1a28fe51dd5a99785c9a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 10:25:01 +0100
Subject: [PATCH 072/110] Charts - consistent optical alignment

---
 resources/js/pages/forms/Submissions.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index fcba84ac16..586db4ef55 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -548,7 +548,7 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="lollipopChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
@@ -606,7 +606,7 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="horizontalBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
@@ -767,14 +767,14 @@ function exportSubmissions() {
                     <!-- Example of a Checkboxes field type (Horizontal Bar Chart with checkbox icons). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
                     <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
                         <Widget
-                            :title="__('Have you seen us live before?')"
+                            :title="__('Who have you seen live?')"
                             title-tag="h2"
                             class="h-full"
                             icon="fieldtype-checkboxes"
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="checkboxesBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
+                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
@@ -801,7 +801,7 @@ function exportSubmissions() {
                                     </li>
                                 </ol>
                                 <figcaption :id="checkboxesBarChart1CaptionId" class="sr-only">
-                                    {{ __('Have you seen us live before?: Radiohead 55%, Death Cab for Cutie 35%, Olivia Rodrigo 5%, The Cure 5%') }}
+                                    {{ __('Who have you seen live?: Radiohead 55%, Death Cab for Cutie 35%, Olivia Rodrigo 5%, The Cure 5%') }}
                                 </figcaption>
                             </figure>
                         </Widget>
@@ -919,7 +919,7 @@ function exportSubmissions() {
                             <p class="sr-only" aria-live="polite">{{ dictionaryChartAccessibleLabel }}</p>
                             <figure v-if="dictionaryChartPage === 1" class="p-6 grid" :aria-labelledby="dictionaryChart1CaptionId">
                                 <ol
-                                    class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] grid-rows-5 gap-x-2.25"
+                                    class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3"
                                     aria-hidden="true"
                                 >
                                     <li
@@ -942,7 +942,7 @@ function exportSubmissions() {
                             </figure>
                             <figure v-else-if="dictionaryChartPage === 2" class="p-6 grid" :aria-labelledby="dictionaryChart1Page2CaptionId">
                                 <ol
-                                    class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] grid-rows-5 gap-x-2.25"
+                                    class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3"
                                     aria-hidden="true"
                                 >
                                     <li
@@ -975,7 +975,7 @@ function exportSubmissions() {
                             icon-class="size-4 text-gray-500 hidden @xs/widget:block"
                         >
                             <figure class="p-6 grid" :aria-labelledby="numberBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_1fr_max-content] items-center gap-x-2.25 gap-y-2.5 p-0" aria-hidden="true">
+                                <ol class="m-0 list-none grid grid-cols-[auto_1fr_max-content] items-center gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">0–9</span>
                                         <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />

From 3f0a0c07b40eb04c62e36f3fffc2684a3d27751e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 10:35:24 +0100
Subject: [PATCH 073/110] Consistent class order

---
 resources/js/pages/forms/Submissions.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 586db4ef55..da64feacc5 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -918,10 +918,7 @@ function exportSubmissions() {
                             </template>
                             <p class="sr-only" aria-live="polite">{{ dictionaryChartAccessibleLabel }}</p>
                             <figure v-if="dictionaryChartPage === 1" class="p-6 grid" :aria-labelledby="dictionaryChart1CaptionId">
-                                <ol
-                                    class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3"
-                                    aria-hidden="true"
-                                >
+                                <ol class="m-0 list-none grid grid-cols-[auto_max-content_1fr] items-center gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
                                     <li
                                         v-for="item in dictionaryChart1Page1Data"
                                         :key="item.label"
@@ -941,10 +938,7 @@ function exportSubmissions() {
                                 </figcaption>
                             </figure>
                             <figure v-else-if="dictionaryChartPage === 2" class="p-6 grid" :aria-labelledby="dictionaryChart1Page2CaptionId">
-                                <ol
-                                    class="m-0 list-none grid items-center grid-cols-[auto_max-content_1fr] gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3"
-                                    aria-hidden="true"
-                                >
+                                <ol class="m-0 list-none grid grid-cols-[auto_max-content_1fr] items-center gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
                                     <li
                                         v-for="item in dictionaryChart1Page2Data"
                                         :key="item.label"

From 00e73745df0654c7219a3217396dad0eadaa3c30 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 10:40:34 +0100
Subject: [PATCH 074/110] Organise classes by layout > spacing > decoration

---
 resources/js/pages/forms/Submissions.vue | 142 +++++++++++------------
 1 file changed, 71 insertions(+), 71 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index da64feacc5..d9029cfe3f 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -385,14 +385,14 @@ function exportSubmissions() {
 
             <template #results>
                 <!-- Example of a Multiple Choice field type (Pie Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                <div class="mt-6 pb-6 widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                <div class="@container/widgets widgets flex flex-wrap mt-6 pb-6 gap-y-6 -mx-2 sm:-mx-3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('Wake me up')"
                             title-tag="h2"
                             class="h-full"
                             icon="fieldtype-radio"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
                             <figure class="pie-chart-figure">
                                 <div
@@ -439,13 +439,13 @@ function exportSubmissions() {
                     <!-- Example of a Multiple Choice field type (Pie Chart) with Pagination. The idea here is when there are _more_ than four response options, we can paginate the chart. In such a case, the fourth option shows as "Other", and the second widget shows the "other" segment broken down into the remaining response options.
 
                     We should dynamically generate the ids to be unique here, so that everything remains accessible.-->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('Pie chart pagination demo')"
                             title-tag="h2"
                             class="h-full"
                             icon="fieldtype-radio"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
                             <template #actions>
                                 <Pagination
@@ -539,20 +539,20 @@ function exportSubmissions() {
                         </Widget>
                     </div>
                     <!-- Example of a Ranking field type (Horizontal Lollipop Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('Rank your favourite seasons')"
                             title-tag="h2"
                             class="h-full"
                             icon="rank"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="lollipopChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                            <figure class="grid p-6" :aria-labelledby="lollipopChart1CaptionId">
+                                <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Summer</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Summer</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-1" />
@@ -562,7 +562,7 @@ function exportSubmissions() {
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">2</span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-2" />
@@ -572,7 +572,7 @@ function exportSubmissions() {
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">3</span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Spring</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Spring</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-3" />
@@ -582,7 +582,7 @@ function exportSubmissions() {
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4</span>
                                         <span class="size-2.5 rounded-xs bg-chart-4-legend" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Winter</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Winter</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-4-legend" />
@@ -597,33 +597,33 @@ function exportSubmissions() {
                         </Widget>
                     </div>
                     <!-- Example of a Dropdown field type (Horizontal Bar Chart Widget). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('Have you seen us live before?')"
                             title-tag="h2"
                             class="h-full"
                             icon="fieldtype-select"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="horizontalBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                            <figure class="grid p-6" :aria-labelledby="horizontalBarChart1CaptionId">
+                                <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
-                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
+                                        <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
-                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
-                                        <div class="h-2.5 rounded-full w-[10%] bg-chart-3" />
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
+                                        <div class="h-2.5 w-[10%] rounded-full bg-chart-3" />
                                     </li>
                                 </ol>
                                 <figcaption :id="horizontalBarChart1CaptionId" class="sr-only">
@@ -633,17 +633,17 @@ function exportSubmissions() {
                         </Widget>
                     </div>
                     <!-- Example of an Opinion Scale field type (Vertical Bar Chart Widget). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('How likely are you to recommend us?')"
                             title-tag="h2"
                             class="h-full"
                             icon="scale-up"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
                             <figure class="vertical-bar-chart-figure" :aria-labelledby="verticalBarChart1CaptionId">
                                 <div aria-hidden="true">
-                                    <div class="inline-flex items-center gap-2 py-1.25 px-2 border border-gray-200 dark:border-gray-700 rounded-md">
+                                    <div class="inline-flex items-center gap-2 px-2 py-1.25 rounded-md border border-gray-200 dark:border-gray-700">
                                         <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-xs text-gray-500 dark:text-gray-400">Average</span>
                                     </div>
                                 </div>
@@ -672,13 +672,13 @@ function exportSubmissions() {
                         </Widget>
                     </div>
                     <!-- Example of an Image Choice field type with a chart type chooser. We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('What is your spirit animal?')"
                             title-tag="h2"
                             class="h-full"
                             icon="image-select"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
                             <template #actions>
                                 <ToggleGroup v-model="imageChoiceChart1Type" size="sm">
@@ -698,19 +698,19 @@ function exportSubmissions() {
                             </template>
                             <figure
                                 v-if="imageChoiceChart1Type === 'bar'"
-                                class="p-6 grid"
+                                class="grid p-6"
                                 :aria-labelledby="imageChoiceBarChart1CaptionId"
                             >
-                                <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
                                     <li
                                         v-for="(option, index) in imageChoicePieChart1Data"
                                         :key="option.badge"
                                         class="contents"
                                     >
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
-                                        <img class="size-10 shrink-0 rounded-full object-cover" :src="option.image" alt="" />
+                                        <img class="size-10 shrink-0 object-cover rounded-full" :src="option.image" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ option.badge }}</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
                                         <div
                                             class="h-2.5 rounded-full"
                                             :class="index === 1 ? 'bg-chart-2' : 'bg-chart-1'"
@@ -752,12 +752,12 @@ function exportSubmissions() {
                                 </div>
                                 <figcaption :id="imageChoicePieChart1LegendId" class="image-pie-chart-legend">
                                     <p class="sr-only">{{ imageChoicePieChart1AccessibleLabel }}</p>
-                                    <ol class="m-0 list-none grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start gap-x-2.25 gap-y-2.5 p-0 pt-3" aria-hidden="true">
+                                    <ol class="grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-3" aria-hidden="true">
                                         <template v-for="option in imageChoicePieChart1Data" :key="option.badge">
                                             <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
-                                            <img class="size-10 shrink-0 rounded-full object-cover" :src="option.image" alt="" />
+                                            <img class="size-10 shrink-0 object-cover rounded-full" :src="option.image" alt="" />
                                             <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ option.badge }}</span>
-                                            <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
+                                            <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
                                         </template>
                                     </ol>
                                 </figcaption>
@@ -765,39 +765,39 @@ function exportSubmissions() {
                         </Widget>
                     </div>
                     <!-- Example of a Checkboxes field type (Horizontal Bar Chart with checkbox icons). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('Who have you seen live?')"
                             title-tag="h2"
                             class="h-full"
                             icon="fieldtype-checkboxes"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="checkboxesBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                            <figure class="grid p-6" :aria-labelledby="checkboxesBarChart1CaptionId">
+                                <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Radiohead</span>
-                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Radiohead</span>
+                                        <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Death Cab for Cutie</span>
-                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Death Cab for Cutie</span>
+                                        <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-3-legend" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">Olivia Rodrigo</span>
-                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-3" />
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Olivia Rodrigo</span>
+                                        <div class="h-2.5 w-[5%] rounded-full bg-chart-3" />
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-4-legend" />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">The Cure</span>
-                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-4-legend" />
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">The Cure</span>
+                                        <div class="h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
                                     </li>
                                 </ol>
                                 <figcaption :id="checkboxesBarChart1CaptionId" class="sr-only">
@@ -807,13 +807,13 @@ function exportSubmissions() {
                         </Widget>
                     </div>
                     <!-- Example of a yes/no field type with a chart type chooser. We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('Do you fancy a pint?')"
                             title-tag="h2"
                             class="h-full"
                             icon="checkmark-circle"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
                             <template #actions>
                                 <ToggleGroup v-model="yesNoChart1Type" size="sm">
@@ -833,10 +833,10 @@ function exportSubmissions() {
                             </template>
                             <figure
                                 v-if="yesNoChart1Type === 'bar'"
-                                class="p-6 grid"
+                                class="grid p-6"
                                 :aria-labelledby="yesNoBarChart1CaptionId"
                             >
-                                <ol class="m-0 list-none grid grid-cols-[auto_auto_max-content_1fr] items-center gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
                                     <li
                                         v-for="option in yesNoChart1Data"
                                         :key="option.label"
@@ -848,7 +848,7 @@ function exportSubmissions() {
                                             class="size-3.5 shrink-0"
                                             :class="option.chartColor === 2 ? 'text-chart-2-legend' : 'text-chart-1-legend'"
                                         />
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
                                         <div
                                             class="h-2.5 rounded-full"
                                             :class="option.chartColor === 2 ? 'bg-chart-2' : 'bg-chart-1'"
@@ -898,13 +898,13 @@ function exportSubmissions() {
                         </Widget>
                     </div>
                     <!-- Example of a Dictionary field type (Horizontal Lollipop Chart with icons) with Pagination. We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('What’s your favourite country?')"
                             title-tag="h2"
                             class="h-full"
                             icon="fieldtype-dictionary"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
                             <template #actions>
                                 <Pagination
@@ -917,15 +917,15 @@ function exportSubmissions() {
                                 />
                             </template>
                             <p class="sr-only" aria-live="polite">{{ dictionaryChartAccessibleLabel }}</p>
-                            <figure v-if="dictionaryChartPage === 1" class="p-6 grid" :aria-labelledby="dictionaryChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_max-content_1fr] items-center gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
+                            <figure v-if="dictionaryChartPage === 1" class="grid p-6" :aria-labelledby="dictionaryChart1CaptionId">
+                                <ol class="grid grid-cols-[auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
                                     <li
                                         v-for="item in dictionaryChart1Page1Data"
                                         :key="item.label"
                                         class="contents"
                                     >
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.rank }}</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ item.label }}</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ item.label }}</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px bg-gray-200 dark:bg-gray-600" :style="{ width: `${item.percent}%` }" />
                                             <div class="text-lg">{{ item.flag }}</div>
@@ -937,15 +937,15 @@ function exportSubmissions() {
                                     {{ __('What’s your favourite country?: Japan 40%, Italy 35%, USA 10%, UK 8%, France 3%') }}
                                 </figcaption>
                             </figure>
-                            <figure v-else-if="dictionaryChartPage === 2" class="p-6 grid" :aria-labelledby="dictionaryChart1Page2CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_max-content_1fr] items-center gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
+                            <figure v-else-if="dictionaryChartPage === 2" class="grid p-6" :aria-labelledby="dictionaryChart1Page2CaptionId">
+                                <ol class="grid grid-cols-[auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
                                     <li
                                         v-for="item in dictionaryChart1Page2Data"
                                         :key="item.label"
                                         class="contents"
                                     >
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.rank }}</span>
-                                        <span class="truncate max-w-25 me-2 text-xs text-gray-900 dark:text-gray-100">{{ item.label }}</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ item.label }}</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px bg-gray-200 dark:bg-gray-600" :style="{ width: `${item.percent}%` }" />
                                             <div class="text-lg">{{ item.flag }}</div>
@@ -960,39 +960,39 @@ function exportSubmissions() {
                         </Widget>
                     </div>
                     <!-- Example of a Number field type (Horizontal Bar Chart with info). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="px-3 starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3">
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('How old are you?')"
                             title-tag="h2"
                             class="h-full"
                             icon="number"
-                            icon-class="size-4 text-gray-500 hidden @xs/widget:block"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="p-6 grid" :aria-labelledby="numberBarChart1CaptionId">
-                                <ol class="m-0 list-none grid grid-cols-[auto_1fr_max-content] items-center gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                            <figure class="grid p-6" :aria-labelledby="numberBarChart1CaptionId">
+                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">0–9</span>
-                                        <div class="h-2.5 rounded-full w-[55%] bg-chart-1" />
+                                        <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10–19</span>
-                                        <div class="h-2.5 rounded-full w-[35%] bg-chart-2" />
+                                        <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">20–29</span>
-                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-3" />
+                                        <div class="h-2.5 w-[5%] rounded-full bg-chart-3" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">30–39</span>
-                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-4-legend" />
+                                        <div class="h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">40–49</span>
-                                        <div class="h-2.5 rounded-full w-[5%] bg-chart-4-legend" />
+                                        <div class="h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                 </ol>
@@ -1009,14 +1009,14 @@ function exportSubmissions() {
         <Modal :open="exportModalOpen" @update:open="exportModalOpen = $event" :title="__('Export Submissions')">
             <div class="space-y-4">
                 <div>
-                    <label class="text-sm font-medium mb-1.5 block">{{ __('Format') }}</label>
+                    <label class="block mb-1.5 text-sm font-medium">{{ __('Format') }}</label>
                     <RadioGroup v-model="exportFormat" inline>
                         <Radio v-for="format in exporters" :key="format.handle" :value="format.handle" :label="format.title" />
                     </RadioGroup>
                 </div>
 
                 <div>
-                    <label class="text-sm font-medium mb-1.5 block">{{ __('Submissions') }}</label>
+                    <label class="block mb-1.5 text-sm font-medium">{{ __('Submissions') }}</label>
                     <RadioGroup v-model="exportScope">
                         <Radio value="all" :label="__('All Submissions')" />
                         <Radio value="filtered" :label="__('Filtered Submissions')" :description="__('statamic::messages.form_export_filtered_description')" :disabled="!hasFilteredScope" />

From 5a32e3a6adddf85b2af8dc6fed579b22597b7432 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 10:44:42 +0100
Subject: [PATCH 075/110] Number Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index d9029cfe3f..1ba2601de0 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -969,30 +969,30 @@ function exportSubmissions() {
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
                             <figure class="grid p-6" :aria-labelledby="numberBarChart1CaptionId">
-                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-2.25 gap-y-1.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">0–9</span>
-                                        <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
+                                        <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10–19</span>
-                                        <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                        <div class="h-2.5 w-[15%] rounded-full bg-chart-1" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">20–29</span>
-                                        <div class="h-2.5 w-[5%] rounded-full bg-chart-3" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                        <div class="h-2.5 w-[30%] rounded-full bg-chart-1" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">30%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">30–39</span>
-                                        <div class="h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
+                                        <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">40–49</span>
-                                        <div class="h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
+                                        <div class="h-2.5 w-[10%] rounded-full bg-chart-1" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                 </ol>

From 928de27b559d51ab50ba939d86f6bad51bfc8cd0 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 11:20:07 +0100
Subject: [PATCH 076/110] Number Field Type - finish

---
 resources/js/pages/forms/Submissions.vue | 33 ++++++++++++++++--------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 1ba2601de0..fab51cfb60 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -50,6 +50,7 @@ const yesNoBarChart1CaptionId = useId();
 const yesNoPieChart1LegendId = useId();
 const dictionaryChart1CaptionId = useId();
 const dictionaryChart1Page2CaptionId = useId();
+const numberBarChart1CaptionId = useId();
 
 const dictionaryChart1Page1Data = [
     { rank: 1, label: 'Japan', flag: '🇯🇵', percent: 40 },
@@ -556,7 +557,7 @@ function exportSubmissions() {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-1" />
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -566,7 +567,7 @@ function exportSubmissions() {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-2" />
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -576,7 +577,7 @@ function exportSubmissions() {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-3" />
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -586,7 +587,7 @@ function exportSubmissions() {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-4-legend" />
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
                                         </div>
                                     </li>
                                 </ol>
@@ -644,7 +645,7 @@ function exportSubmissions() {
                             <figure class="vertical-bar-chart-figure" :aria-labelledby="verticalBarChart1CaptionId">
                                 <div aria-hidden="true">
                                     <div class="inline-flex items-center gap-2 px-2 py-1.25 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-xs text-gray-500 dark:text-gray-400">Average</span>
+                                        <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">Average</span>
                                     </div>
                                 </div>
                                 <ol
@@ -929,7 +930,7 @@ function exportSubmissions() {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px bg-gray-200 dark:bg-gray-600" :style="{ width: `${item.percent}%` }" />
                                             <div class="text-lg">{{ item.flag }}</div>
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.percent }}%</span>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.percent }}%</span>
                                         </div>
                                     </li>
                                 </ol>
@@ -949,7 +950,7 @@ function exportSubmissions() {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px bg-gray-200 dark:bg-gray-600" :style="{ width: `${item.percent}%` }" />
                                             <div class="text-lg">{{ item.flag }}</div>
-                                            <span class="min-w-8.5 text-end text-[0.785rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.percent }}%</span>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.percent }}%</span>
                                         </div>
                                     </li>
                                 </ol>
@@ -968,8 +969,18 @@ function exportSubmissions() {
                             icon="number"
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="grid p-6" :aria-labelledby="numberBarChart1CaptionId">
-                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-2.25 gap-y-1.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="numberBarChart1CaptionId">
+                                <div aria-hidden="true" class="flex gap-2.5 pb-5">
+                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+                                        <span class="text-xs font-semibold st-text-trim-cap tabular-nums">4–44</span>
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('Min–Max') }}</span>
+                                    </div>
+                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+                                        <span class="text-xs font-semibold st-text-trim-cap tabular-nums">26.2</span>
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('Average') }}</span>
+                                    </div>
+                                </div>
+                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">0–9</span>
                                         <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
@@ -996,8 +1007,8 @@ function exportSubmissions() {
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                 </ol>
-                                <figcaption :id="checkboxesBarChart1CaptionId" class="sr-only">
-                                    {{ __('Have you seen us live before?: Radiohead 55%, Death Cab for Cutie 35%, Olivia Rodrigo 5%, The Cure 5%') }}
+                                <figcaption :id="numberBarChart1CaptionId" class="sr-only">
+                                    {{ __('How old are you?: Min–Max 4–44, Average 26.2. Age distribution: 0–9: 20%, 10–19: 15%, 20–29: 30%, 30–39: 20%, 40–49: 20%') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From 667f867871564ba58479ac175cbb5c7ec78db615 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 11:29:18 +0100
Subject: [PATCH 077/110] Star Rating Field Type - start

---
 resources/js/pages/forms/Submissions.vue | 53 +++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index fab51cfb60..7113e8e53a 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -386,7 +386,7 @@ function exportSubmissions() {
 
             <template #results>
                 <!-- Example of a Multiple Choice field type (Pie Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                <div class="@container/widgets widgets flex flex-wrap mt-6 pb-6 gap-y-6 -mx-2 sm:-mx-3">
+                <div class="@container/widgets widgets flex flex-wrap mt-6 pb-8 gap-y-6 -mx-2 sm:-mx-3">
                     <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('Wake me up')"
@@ -837,7 +837,7 @@ function exportSubmissions() {
                                 class="grid p-6"
                                 :aria-labelledby="yesNoBarChart1CaptionId"
                             >
-                                <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.75 p-0 pt-4" aria-hidden="true">
                                     <li
                                         v-for="option in yesNoChart1Data"
                                         :key="option.label"
@@ -1013,6 +1013,55 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of a Star Rating field type (Horizontal Star Rating Bar Chart with info). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                        <Widget
+                            :title="__('How would you rate the hotel?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="star"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="numberBarChart1CaptionId">
+                                <div aria-hidden="true" class="pb-5">
+                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+                                        <span class="text-xs font-semibold st-text-trim-cap tabular-nums">4–44</span>
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">3/5 Average</span>
+                                    </div>
+                                </div>
+                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
+                                        <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
+                                        <div class="h-2.5 w-[15%] rounded-full bg-chart-1" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
+                                        <div class="h-2.5 w-[30%] rounded-full bg-chart-1" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">30%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
+                                        <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
+                                        <div class="h-2.5 w-[10%] rounded-full bg-chart-1" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                    </li>
+                                </ol>
+                                <figcaption :id="numberBarChart1CaptionId" class="sr-only">
+                                    {{ __('How old are you?: Min–Max 4–44, Average 26.2. Age distribution: 0–9: 20%, 10–19: 15%, 20–29: 30%, 30–39: 20%, 40–49: 20%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From df1167652bc7a0fe75031b8ab381b4d1f3372fc8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 11:57:51 +0100
Subject: [PATCH 078/110] Star Rating Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 17 +++++++++++------
 resources/svg/icons/star-filled.svg      |  1 +
 2 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 resources/svg/icons/star-filled.svg

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 7113e8e53a..3cfef67438 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -1029,30 +1029,35 @@ function exportSubmissions() {
                                         <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">3/5 Average</span>
                                     </div>
                                 </div>
-                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
-                                        <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
+                                        <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
-                                        <div class="h-2.5 w-[15%] rounded-full bg-chart-1" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
+                                        <div class="h-2.5 w-[15%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
-                                        <div class="h-2.5 w-[30%] rounded-full bg-chart-1" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                        <div class="h-2.5 w-[30%] rounded-full bg-chart-1-legend" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">30%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
-                                        <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
+                                        <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
-                                        <div class="h-2.5 w-[10%] rounded-full bg-chart-1" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
+                                        <div class="h-2.5 w-[10%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                 </ol>
diff --git a/resources/svg/icons/star-filled.svg b/resources/svg/icons/star-filled.svg
new file mode 100644
index 0000000000..d30668937b
--- /dev/null
+++ b/resources/svg/icons/star-filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" d="M9.263 4.348c-.314-1.325-.81-2.45-1.562-3.483a.852.852 0 0 0-1.399 0c-.753 1.032-1.251 2.158-1.565 3.483-1.278-.047-2.454.105-3.62.499-.567.19-.797.884-.46 1.397.7 1.063 1.563 1.899 2.68 2.603a11.3 11.3 0 0 0-.652 3.705c-.006.638.57 1.094 1.153.905 1.162-.378 2.183-.966 3.16-1.83.979.864 2.001 1.452 3.164 1.83.584.189 1.16-.267 1.153-.905a11.3 11.3 0 0 0-.652-3.705c1.117-.704 1.98-1.54 2.68-2.603.337-.513.107-1.206-.46-1.398-1.166-.393-2.343-.545-3.62-.498Z"/></svg>

From 4e93254cd4dc5886aef5d83caa8c5e392bb5fb02 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 12:06:23 +0100
Subject: [PATCH 079/110] Star Rating Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 3cfef67438..2bc0ba1da8 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -1025,10 +1025,19 @@ function exportSubmissions() {
                             <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="numberBarChart1CaptionId">
                                 <div aria-hidden="true" class="pb-5">
                                     <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <span class="text-xs font-semibold st-text-trim-cap tabular-nums">4–44</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
                                         <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">3/5 Average</span>
                                     </div>
                                 </div>
+                                <!-- 
+                                    Midpoint (e.g. 3 star) should be --color-chart-1-legend
+                                    Higher (e.g. 4 star) should be lightness of 1 minus 0.1 increments, e.g. --color-chart-1-legend_calc(l*0.9)_c_h, then --color-chart-1-legend_calc(l*0.8)_c_h
+                                    Lower (e.g. 2 star) should be lightness of 1 plus 0.2 increments, e.g. --color-chart-1-legend_calc(l*1.2)_c_h, then --color-chart-1-legend_calc(l*1.4)_c_h
+                                 -->
                                 <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>

From f4203be1d02cfb2151648dbdf2052ef6289fca55 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 12:08:27 +0100
Subject: [PATCH 080/110] Star Rating Field Type - finish

---
 resources/js/pages/forms/Submissions.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 2bc0ba1da8..a798ce5ef5 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -51,6 +51,7 @@ const yesNoPieChart1LegendId = useId();
 const dictionaryChart1CaptionId = useId();
 const dictionaryChart1Page2CaptionId = useId();
 const numberBarChart1CaptionId = useId();
+const starRatingChart1CaptionId = useId();
 
 const dictionaryChart1Page1Data = [
     { rank: 1, label: 'Japan', flag: '🇯🇵', percent: 40 },
@@ -1022,7 +1023,7 @@ function exportSubmissions() {
                             icon="star"
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="numberBarChart1CaptionId">
+                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="starRatingChart1CaptionId">
                                 <div aria-hidden="true" class="pb-5">
                                     <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
@@ -1033,7 +1034,7 @@ function exportSubmissions() {
                                         <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">3/5 Average</span>
                                     </div>
                                 </div>
-                                <!-- 
+                                <!--
                                     Midpoint (e.g. 3 star) should be --color-chart-1-legend
                                     Higher (e.g. 4 star) should be lightness of 1 minus 0.1 increments, e.g. --color-chart-1-legend_calc(l*0.9)_c_h, then --color-chart-1-legend_calc(l*0.8)_c_h
                                     Lower (e.g. 2 star) should be lightness of 1 plus 0.2 increments, e.g. --color-chart-1-legend_calc(l*1.2)_c_h, then --color-chart-1-legend_calc(l*1.4)_c_h
@@ -1070,8 +1071,8 @@ function exportSubmissions() {
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                 </ol>
-                                <figcaption :id="numberBarChart1CaptionId" class="sr-only">
-                                    {{ __('How old are you?: Min–Max 4–44, Average 26.2. Age distribution: 0–9: 20%, 10–19: 15%, 20–29: 30%, 30–39: 20%, 40–49: 20%') }}
+                                <figcaption :id="starRatingChart1CaptionId" class="sr-only">
+                                    {{ __('How would you rate the hotel?: 3/5 average. Rating distribution: 5 stars 20%, 4 stars 15%, 3 stars 30%, 2 stars 20%, 1 star 20%') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From 4d251de4035686b5c0e9b3c7f45f7c529ca065ab Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 12:18:29 +0100
Subject: [PATCH 081/110] Star Rating Field Type - add paginated demo

---
 resources/js/pages/forms/Submissions.vue | 167 ++++++++++++++++++++++-
 1 file changed, 164 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index a798ce5ef5..228d4a1c9c 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -52,6 +52,34 @@ const dictionaryChart1CaptionId = useId();
 const dictionaryChart1Page2CaptionId = useId();
 const numberBarChart1CaptionId = useId();
 const starRatingChart1CaptionId = useId();
+const starRatingChart2CaptionId = useId();
+const starRatingChart2Page2CaptionId = useId();
+
+const starRatingChart2Page = ref(1);
+const starRatingChart2PerPage = 5;
+const starRatingChart2Total = 10;
+
+const starRatingChart2Meta = computed(() => {
+    const from = (starRatingChart2Page.value - 1) * starRatingChart2PerPage + 1;
+    const to = Math.min(starRatingChart2Page.value * starRatingChart2PerPage, starRatingChart2Total);
+
+    return {
+        current_page: starRatingChart2Page.value,
+        last_page: Math.ceil(starRatingChart2Total / starRatingChart2PerPage),
+        per_page: starRatingChart2PerPage,
+        total: starRatingChart2Total,
+        from,
+        to,
+    };
+});
+
+const starRatingChart2AccessibleLabel = computed(() => {
+    if (starRatingChart2Page.value === 1) {
+        return __('10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%');
+    }
+
+    return __('5 stars 8%, 4 stars 7%, 3 stars 6%, 2 stars 5%, 1 star 4%');
+});
 
 const dictionaryChart1Page1Data = [
     { rank: 1, label: 'Japan', flag: '🇯🇵', percent: 40 },
@@ -1035,9 +1063,10 @@ function exportSubmissions() {
                                     </div>
                                 </div>
                                 <!--
-                                    Midpoint (e.g. 3 star) should be --color-chart-1-legend
-                                    Higher (e.g. 4 star) should be lightness of 1 minus 0.1 increments, e.g. --color-chart-1-legend_calc(l*0.9)_c_h, then --color-chart-1-legend_calc(l*0.8)_c_h
-                                    Lower (e.g. 2 star) should be lightness of 1 plus 0.2 increments, e.g. --color-chart-1-legend_calc(l*1.2)_c_h, then --color-chart-1-legend_calc(l*1.4)_c_h
+                                    Star row colors use oklch relative lightness from --color-chart-1-legend:
+                                    - Midpoint star uses chart-1-legend (3/5 in the hotel demo; 4/10 in the restaurant demo).
+                                    - 5 stars or fewer: darker stars use l*0.9, l*0.8 (−0.1 per step); lighter stars use l*1.2, l*1.4 (+0.2 per step).
+                                    - 6 stars or more: darker stars use −0.05 per step (e.g. l*0.9, l*0.85, l*0.8, l*0.75, l*0.7); lighter stars use l*1.1, l*1.2, l*1.4 (+0.1, then +0.2).
                                  -->
                                 <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
@@ -1077,6 +1106,138 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of a Star Rating field type with pagination (Horizontal Star Rating Bar Chart with info). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                        <Widget
+                            :title="__('How would you rate the restaurant?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="star"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <template #actions>
+                                <Pagination
+                                    :resource-meta="starRatingChart2Meta"
+                                    :show-totals="false"
+                                    :show-page-links="false"
+                                    :show-per-page-selector="false"
+                                    :scroll-to-top="false"
+                                    @page-selected="starRatingChart2Page = $event"
+                                />
+                            </template>
+                            <p class="sr-only" aria-live="polite">{{ starRatingChart2AccessibleLabel }}</p>
+                            <figure v-if="starRatingChart2Page === 1" class="grid p-6 pt-3 ps-3" :aria-labelledby="starRatingChart2CaptionId">
+                                <div aria-hidden="true" class="pb-5">
+                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">7/10 Average</span>
+                                    </div>
+                                </div>
+                                <!--
+                                    Star row colors use oklch relative lightness from --color-chart-1-legend:
+                                    - Midpoint star uses chart-1-legend (3/5 in the hotel demo; 4/10 in the restaurant demo).
+                                    - 5 stars or fewer: darker stars use l*0.9, l*0.8 (−0.1 per step); lighter stars use l*1.2, l*1.4 (+0.2 per step).
+                                    - 6 stars or more: darker stars use −0.05 per step (e.g. l*0.9, l*0.85, l*0.8, l*0.75, l*0.7); lighter stars use l*1.1, l*1.2, l*1.4 (+0.1, then +0.2).
+                                 -->
+                                <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0" aria-hidden="true">
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
+                                        <div class="h-2.5 w-[18%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">18%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">9</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
+                                        <div class="h-2.5 w-[16%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">16%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">8</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
+                                        <div class="h-2.5 w-[14%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">14%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">7</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
+                                        <div class="h-2.5 w-[12%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">12%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">6</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
+                                        <div class="h-2.5 w-[10%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                    </li>
+                                </ol>
+                                <figcaption :id="starRatingChart2CaptionId" class="sr-only">
+                                    {{ __('How would you rate the restaurant?: 7/10 average. Rating distribution: 10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%') }}
+                                </figcaption>
+                            </figure>
+                            <figure v-else-if="starRatingChart2Page === 2" class="grid p-6 pt-3 ps-3" :aria-labelledby="starRatingChart2Page2CaptionId">
+                                <div aria-hidden="true" class="pb-5">
+                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">7/10 Average</span>
+                                    </div>
+                                </div>
+                                <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0" aria-hidden="true">
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
+                                        <div class="h-2.5 w-[8%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">8%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                        <div class="h-2.5 w-[7%] rounded-full bg-chart-1-legend" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">7%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
+                                        <div class="h-2.5 w-[6%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">6%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
+                                        <div class="h-2.5 w-[5%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
+                                        <div class="h-2.5 w-[4%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4%</span>
+                                    </li>
+                                </ol>
+                                <figcaption :id="starRatingChart2Page2CaptionId" class="sr-only">
+                                    {{ __('How would you rate the restaurant?: 7/10 average. Rating distribution: 5 stars 8%, 4 stars 7%, 3 stars 6%, 2 stars 5%, 1 star 4%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From e0950295bbfa46c8d852509a0c3abb71f4e141ab Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 12:22:31 +0100
Subject: [PATCH 082/110] Small fixes

---
 resources/js/pages/forms/Submissions.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 228d4a1c9c..f00b7d73b4 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -54,6 +54,7 @@ const numberBarChart1CaptionId = useId();
 const starRatingChart1CaptionId = useId();
 const starRatingChart2CaptionId = useId();
 const starRatingChart2Page2CaptionId = useId();
+const starRatingChart3CaptionId = useId();
 
 const starRatingChart2Page = ref(1);
 const starRatingChart2PerPage = 5;
@@ -75,10 +76,10 @@ const starRatingChart2Meta = computed(() => {
 
 const starRatingChart2AccessibleLabel = computed(() => {
     if (starRatingChart2Page.value === 1) {
-        return __('10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%');
+        return __('How would you rate the restaurant?: 7/10 average. Rating distribution: 10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%');
     }
 
-    return __('5 stars 8%, 4 stars 7%, 3 stars 6%, 2 stars 5%, 1 star 4%');
+    return __('How would you rate the restaurant?: 7/10 average. Rating distribution: 5 stars 8%, 4 stars 7%, 3 stars 6%, 2 stars 5%, 1 star 4%');
 });
 
 const dictionaryChart1Page1Data = [

From 4577d7e4588954a91a7a95e807875785b7d74fac Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 13:39:18 +0100
Subject: [PATCH 083/110] Toggle Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 41 +++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index f00b7d73b4..1bdb2efefa 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -2,7 +2,7 @@
 import { ref, computed, watch, useId } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
-import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem, Widget, Pagination, Icon } from '@ui';
+import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem, Widget, Pagination, Icon, Switch } from '@ui';
 import ResourceDeleter from '@/components/ResourceDeleter.vue';
 import FormSubmissionListing from '@/components/forms/SubmissionListing.vue';
 import Layout from '@/pages/layout/Layout.vue';
@@ -1239,6 +1239,45 @@ function exportSubmissions() {
                             </figure>
                         </Widget>
                     </div>
+                    <!-- Example of a Toggle field type (Single fillable bar chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                        <Widget
+                            :title="__('Sign up to our newsletter')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-toggle"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="starRatingChart3CaptionId">
+                                <div aria-hidden="true" class="pb-5">
+                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">3/5 Average</span>
+                                    </div>
+                                </div>
+                                <!--
+                                    Star row colors use oklch relative lightness from --color-chart-1-legend:
+                                    - Midpoint star uses chart-1-legend (3/5 in the hotel demo; 4/10 in the restaurant demo).
+                                    - 5 stars or fewer: darker stars use l*0.9, l*0.8 (−0.1 per step); lighter stars use l*1.2, l*1.4 (+0.2 per step).
+                                    - 6 stars or more: darker stars use −0.05 per step (e.g. l*0.9, l*0.85, l*0.8, l*0.75, l*0.7); lighter stars use l*1.1, l*1.2, l*1.4 (+0.1, then +0.2).
+                                 -->
+                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                                    <li class="contents">
+                                        <Switch :model-value="true" tabindex="-1" class="pointer-events-none data-[state=checked]:!border-gray-950 data-[state=checked]:!bg-gray-950" />
+                                        <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                    </li>
+                                </ol>
+                                <figcaption :id="starRatingChart3CaptionId" class="sr-only">
+                                    {{ __('How would you rate the hotel?: 3/5 average. Rating distribution: 5 stars 20%, 4 stars 15%, 3 stars 30%, 2 stars 20%, 1 star 20%') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From f27177f4de636d34b2cb343519e2eff252fcd5e3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 13:47:30 +0100
Subject: [PATCH 084/110] Fix alignment bits

---
 resources/js/pages/forms/Submissions.vue | 38 ++++++++++++------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 1bdb2efefa..54f5c2dcd6 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -441,7 +441,7 @@ function exportSubmissions() {
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
                                 <figcaption :id="pieChart1LegendId" class="pie-chart-legend">
-                                    <ul class="pie-chart-legend__list">
+                                    <ol class="pie-chart-legend__list">
                                         <li class="pie-chart-legend__item">
                                             <span class="pie-chart-legend__value">45%</span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--1" />
@@ -462,7 +462,7 @@ function exportSubmissions() {
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Never</span>
                                         </li>
-                                    </ul>
+                                    </ol>
                                 </figcaption>
                             </figure>
                         </Widget>
@@ -581,7 +581,7 @@ function exportSubmissions() {
                             <figure class="grid p-6" :aria-labelledby="lollipopChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Summer</span>
                                         <div class="flex items-center gap-1">
@@ -591,7 +591,7 @@ function exportSubmissions() {
                                         </div>
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">2</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">2</span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
                                         <div class="flex items-center gap-1">
@@ -601,7 +601,7 @@ function exportSubmissions() {
                                         </div>
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">3</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">3</span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Spring</span>
                                         <div class="flex items-center gap-1">
@@ -611,7 +611,7 @@ function exportSubmissions() {
                                         </div>
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">4</span>
                                         <span class="size-2.5 rounded-xs bg-chart-4-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Winter</span>
                                         <div class="flex items-center gap-1">
@@ -639,19 +639,19 @@ function exportSubmissions() {
                             <figure class="grid p-6" :aria-labelledby="horizontalBarChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
                                         <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
                                         <div class="h-2.5 w-[10%] rounded-full bg-chart-3" />
@@ -738,7 +738,7 @@ function exportSubmissions() {
                                         :key="option.badge"
                                         class="contents"
                                     >
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" :src="option.image" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ option.badge }}</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
@@ -785,7 +785,7 @@ function exportSubmissions() {
                                     <p class="sr-only">{{ imageChoicePieChart1AccessibleLabel }}</p>
                                     <ol class="grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-3" aria-hidden="true">
                                         <template v-for="option in imageChoicePieChart1Data" :key="option.badge">
-                                            <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
+                                            <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
                                             <img class="size-10 shrink-0 object-cover rounded-full" :src="option.image" alt="" />
                                             <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ option.badge }}</span>
                                             <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
@@ -807,25 +807,25 @@ function exportSubmissions() {
                             <figure class="grid p-6" :aria-labelledby="checkboxesBarChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Radiohead</span>
                                         <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Death Cab for Cutie</span>
                                         <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-3-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Olivia Rodrigo</span>
                                         <div class="h-2.5 w-[5%] rounded-full bg-chart-3" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-4-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">The Cure</span>
                                         <div class="h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
@@ -873,7 +873,7 @@ function exportSubmissions() {
                                         :key="option.label"
                                         class="contents"
                                     >
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
                                         <Icon
                                             :name="option.icon"
                                             class="size-3.5 shrink-0"
@@ -1010,7 +1010,7 @@ function exportSubmissions() {
                                         <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('Average') }}</span>
                                     </div>
                                 </div>
-                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4 text-end" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">0–9</span>
                                         <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
@@ -1149,7 +1149,7 @@ function exportSubmissions() {
                                     - 5 stars or fewer: darker stars use l*0.9, l*0.8 (−0.1 per step); lighter stars use l*1.2, l*1.4 (+0.2 per step).
                                     - 6 stars or more: darker stars use −0.05 per step (e.g. l*0.9, l*0.85, l*0.8, l*0.75, l*0.7); lighter stars use l*1.1, l*1.2, l*1.4 (+0.1, then +0.2).
                                  -->
-                                <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 text-end" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
@@ -1201,7 +1201,7 @@ function exportSubmissions() {
                                         <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">7/10 Average</span>
                                     </div>
                                 </div>
-                                <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 text-end" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />

From 2ada3b1048d387a7707c3ca730df26582e868573 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 14:03:52 +0100
Subject: [PATCH 085/110] Toggle Field Type - wip

---
 resources/js/pages/forms/Submissions.vue | 23 ++++++-----------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 54f5c2dcd6..020d3c59c9 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -54,7 +54,7 @@ const numberBarChart1CaptionId = useId();
 const starRatingChart1CaptionId = useId();
 const starRatingChart2CaptionId = useId();
 const starRatingChart2Page2CaptionId = useId();
-const starRatingChart3CaptionId = useId();
+const toggleBarChart1CaptionId = useId();
 
 const starRatingChart2Page = ref(1);
 const starRatingChart2PerPage = 5;
@@ -1248,23 +1248,12 @@ function exportSubmissions() {
                             icon="fieldtype-toggle"
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="starRatingChart3CaptionId">
+                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="toggleBarChart1CaptionId">
                                 <div aria-hidden="true" class="pb-5">
-                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">3/5 Average</span>
+                                    <div class="inline-flex items-center gap-2 px-2 py-1.25 rounded-md border border-gray-200 dark:border-gray-700">
+                                        <span class="text-md font-semibold st-text-trim-cap tabular-nums text-gray-950 dark:text-gray-100">20%</span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('of users checked the toggle') }}</span>
                                     </div>
                                 </div>
-                                <!--
-                                    Star row colors use oklch relative lightness from --color-chart-1-legend:
-                                    - Midpoint star uses chart-1-legend (3/5 in the hotel demo; 4/10 in the restaurant demo).
-                                    - 5 stars or fewer: darker stars use l*0.9, l*0.8 (−0.1 per step); lighter stars use l*1.2, l*1.4 (+0.2 per step).
-                                    - 6 stars or more: darker stars use −0.05 per step (e.g. l*0.9, l*0.85, l*0.8, l*0.75, l*0.7); lighter stars use l*1.1, l*1.2, l*1.4 (+0.1, then +0.2).
-                                 -->
                                 <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <Switch :model-value="true" tabindex="-1" class="pointer-events-none data-[state=checked]:!border-gray-950 data-[state=checked]:!bg-gray-950" />
@@ -1272,8 +1261,8 @@ function exportSubmissions() {
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                 </ol>
-                                <figcaption :id="starRatingChart3CaptionId" class="sr-only">
-                                    {{ __('How would you rate the hotel?: 3/5 average. Rating distribution: 5 stars 20%, 4 stars 15%, 3 stars 30%, 2 stars 20%, 1 star 20%') }}
+                                <figcaption :id="toggleBarChart1CaptionId" class="sr-only">
+                                    {{ __('Sign up to our newsletter: 20% of users checked the toggle.') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From df5bed319c5110c69c9477492dd3cfb337a486fa Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 14:14:44 +0100
Subject: [PATCH 086/110] Toggle Field Type - finish

---
 resources/js/pages/forms/Submissions.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 020d3c59c9..e7fe873d0d 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -1254,10 +1254,12 @@ function exportSubmissions() {
                                         <span class="text-md font-semibold st-text-trim-cap tabular-nums text-gray-950 dark:text-gray-100">20%</span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('of users checked the toggle') }}</span>
                                     </div>
                                 </div>
-                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 pt-3" aria-hidden="true">
                                     <li class="contents">
-                                        <Switch :model-value="true" tabindex="-1" class="pointer-events-none data-[state=checked]:!border-gray-950 data-[state=checked]:!bg-gray-950" />
-                                        <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
+                                        <Switch :model-value="true" tabindex="-1" class="pointer-events-none data-[state=checked]:border-gray-950! data-[state=checked]:bg-gray-950!" />
+                                        <div class="flex h-2.5 w-full overflow-hidden rounded-full bg-[hsl(from_var(--color-chart-1-legend)_h_s_l/0.15)]">
+                                            <div class="h-full w-[20%] shrink-0 rounded-full bg-chart-1-legend" />
+                                        </div>
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                 </ol>

From 762d74577074ccf858b8356bdb8898a53e1a5c4f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 14:46:55 +0100
Subject: [PATCH 087/110] Tweak alignment for bar charts

---
 resources/js/pages/forms/Submissions.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index e7fe873d0d..7c2ec18c29 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -999,8 +999,8 @@ function exportSubmissions() {
                             icon="number"
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="numberBarChart1CaptionId">
-                                <div aria-hidden="true" class="flex gap-2.5 pb-5">
+                            <figure class="grid p-6 pt-3 ps-4" :aria-labelledby="numberBarChart1CaptionId">
+                                <div aria-hidden="true" class="flex gap-2.5 pb-5 -ms-1">
                                     <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
                                         <span class="text-xs font-semibold st-text-trim-cap tabular-nums">4–44</span>
                                         <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('Min–Max') }}</span>
@@ -1052,9 +1052,9 @@ function exportSubmissions() {
                             icon="star"
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="starRatingChart1CaptionId">
+                            <figure class="grid p-6 pt-3 ps-4" :aria-labelledby="starRatingChart1CaptionId">
                                 <div aria-hidden="true" class="pb-5">
-                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+                                    <div class="inline-flex items-center gap-2 px-2 py-1 -ms-1 rounded-md border border-gray-200 dark:border-gray-700">
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
@@ -1127,9 +1127,9 @@ function exportSubmissions() {
                                 />
                             </template>
                             <p class="sr-only" aria-live="polite">{{ starRatingChart2AccessibleLabel }}</p>
-                            <figure v-if="starRatingChart2Page === 1" class="grid p-6 pt-3 ps-3" :aria-labelledby="starRatingChart2CaptionId">
+                            <figure v-if="starRatingChart2Page === 1" class="grid p-6 pt-3 ps-4" :aria-labelledby="starRatingChart2CaptionId">
                                 <div aria-hidden="true" class="pb-5">
-                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+                                    <div class="inline-flex items-center gap-2 px-2 py-1 -ms-1 rounded-md border border-gray-200 dark:border-gray-700">
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
@@ -1248,13 +1248,13 @@ function exportSubmissions() {
                             icon="fieldtype-toggle"
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <figure class="grid p-6 pt-3 ps-3" :aria-labelledby="toggleBarChart1CaptionId">
+                            <figure class="grid p-6 pt-3 ps-4" :aria-labelledby="toggleBarChart1CaptionId">
                                 <div aria-hidden="true" class="pb-5">
-                                    <div class="inline-flex items-center gap-2 px-2 py-1.25 rounded-md border border-gray-200 dark:border-gray-700">
+                                    <div class="inline-flex items-center gap-2 px-2 -ms-1 py-1.25 rounded-md border border-gray-200 dark:border-gray-700">
                                         <span class="text-md font-semibold st-text-trim-cap tabular-nums text-gray-950 dark:text-gray-100">20%</span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('of users checked the toggle') }}</span>
                                     </div>
                                 </div>
-                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 pt-3" aria-hidden="true">
+                                <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 pt-2" aria-hidden="true">
                                     <li class="contents">
                                         <Switch :model-value="true" tabindex="-1" class="pointer-events-none data-[state=checked]:border-gray-950! data-[state=checked]:bg-gray-950!" />
                                         <div class="flex h-2.5 w-full overflow-hidden rounded-full bg-[hsl(from_var(--color-chart-1-legend)_h_s_l/0.15)]">

From 4b4a87f1fb4247fbf021c75ad5bff429c262054a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 15:04:56 +0100
Subject: [PATCH 088/110] Tweak alignment for bar charts

---
 resources/js/pages/forms/Submissions.vue | 36 ++++++++++++------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 7c2ec18c29..f7f0330b7c 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -440,7 +440,7 @@ function exportSubmissions() {
                                     <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">10%</span>
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
-                                <figcaption :id="pieChart1LegendId" class="pie-chart-legend">
+                                <figcaption :id="pieChart1LegendId" class="pie-chart-legend starting-style-transition-children">
                                     <ol class="pie-chart-legend__list">
                                         <li class="pie-chart-legend__item">
                                             <span class="pie-chart-legend__value">45%</span>
@@ -1072,31 +1072,31 @@ function exportSubmissions() {
                                 <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
                                         <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <div class="h-2.5 w-[15%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-chart-1-legend" />
                                         <div class="h-2.5 w-[30%] rounded-full bg-chart-1-legend" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">30%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
                                         <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
                                         <div class="h-2.5 w-[10%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
                                     </li>
@@ -1152,31 +1152,31 @@ function exportSubmissions() {
                                 <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 text-end" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
                                         <div class="h-2.5 w-[18%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">18%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">9</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
                                         <div class="h-2.5 w-[16%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">16%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">8</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
                                         <div class="h-2.5 w-[14%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">14%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">7</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
                                         <div class="h-2.5 w-[12%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">12%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">6</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <div class="h-2.5 w-[10%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
                                     </li>
@@ -1185,9 +1185,9 @@ function exportSubmissions() {
                                     {{ __('How would you rate the restaurant?: 7/10 average. Rating distribution: 10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%') }}
                                 </figcaption>
                             </figure>
-                            <figure v-else-if="starRatingChart2Page === 2" class="grid p-6 pt-3 ps-3" :aria-labelledby="starRatingChart2Page2CaptionId">
+                            <figure v-else-if="starRatingChart2Page === 2" class="grid p-6 pt-3 ps-4" :aria-labelledby="starRatingChart2Page2CaptionId">
                                 <div aria-hidden="true" class="pb-5">
-                                    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
+                                    <div class="inline-flex items-center gap-2 px-2 py-1 -ms-1 rounded-md border border-gray-200 dark:border-gray-700">
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
@@ -1204,31 +1204,31 @@ function exportSubmissions() {
                                 <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 text-end" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <div class="h-2.5 w-[8%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">8%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-chart-1-legend" />
                                         <div class="h-2.5 w-[7%] rounded-full bg-chart-1-legend" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">7%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
                                         <div class="h-2.5 w-[6%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">6%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
                                         <div class="h-2.5 w-[5%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
                                         <div class="h-2.5 w-[4%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4%</span>
                                     </li>

From d8e97d959c8349152b4822af1a0777a8a62f36d6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 16:27:29 +0100
Subject: [PATCH 089/110] Charts / add animation for switching chart types -
 pie chart

---
 resources/css/components/forms/charts.css | 41 +++++++++++++++++-
 resources/js/pages/forms/Submissions.vue  | 53 ++++++++++++++++++++---
 2 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index bffd79ad64..b210708e59 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -123,7 +123,6 @@
 
 
 
-
 /* GROUP CHARTS / IMAGE PIE CHART
 =================================================== */
 .image-pie-chart-figure {
@@ -209,7 +208,6 @@
 
 
 
-
 /* GROUP CHARTS / VERTICAL BAR CHART
 =================================================== */
 .vertical-bar-chart-figure {
@@ -263,4 +261,43 @@
 
 .vertical-bar-chart__scale-label {
     @apply min-w-8 rounded-md border border-gray-200 shadow-ui-xs px-1.5 py-0.5 text-center text-[0.785rem] font-medium tabular-nums text-gray-700 dark:border-gray-700 dark:text-gray-400;
+}
+
+
+
+/* GROUP CHARTS / ANIMATIONS / PIE CHART
+=================================================== */
+/* These animations are triggered when switching chart types */
+@property --pie-reveal {
+    syntax: '<angle>';
+    inherits: false;
+    initial-value: 0deg;
+}
+
+@keyframes pie-chart-reveal {
+    from { --pie-reveal: 0deg; }
+    to { --pie-reveal: 360deg; }
+}
+
+.pie-chart__disc,
+.image-pie-chart__disc {
+    -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+    mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+    --pie-reveal: 360deg;
+}
+
+.content-card:has([data-submission-summary]) {
+    @media (prefers-reduced-motion: no-preference) {
+        .chart-reveal .pie-chart__disc,
+        .chart-reveal .image-pie-chart__disc {
+            animation: pie-chart-reveal 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .chart-reveal .pie-chart__disc,
+        .chart-reveal .image-pie-chart__disc {
+            --pie-reveal: 360deg;
+        }
+    }
 }
\ No newline at end of file
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index f7f0330b7c..1b903f1501 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, useId } from 'vue';
+import { ref, computed, watch, useId, nextTick } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
 import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem, Widget, Pagination, Icon, Switch } from '@ui';
@@ -281,6 +281,49 @@ function exportSubmissions() {
     window.open(url, '_blank');
     exportModalOpen.value = false;
 }
+
+/*
+ * Pie chart reveal animation (see charts.css: pie-chart-reveal).
+ *
+ * Toggles the chart-reveal class briefly so the sweep animation can replay.
+ * Used when a widget’s chart type switches to pie — not on summary view enter
+ * or pagination.
+ */
+ const PIE_CHART_REVEAL_MS = 1100;
+
+function createChartReveal() {
+    const isRevealing = ref(false);
+    let timeoutId;
+
+    function trigger() {
+        clearTimeout(timeoutId);
+        isRevealing.value = false;
+
+        nextTick(() => {
+            isRevealing.value = true;
+            timeoutId = setTimeout(() => {
+                isRevealing.value = false;
+            }, PIE_CHART_REVEAL_MS);
+        });
+    }
+
+    return { isRevealing, trigger };
+}
+
+const yesNoChartReveal = createChartReveal();
+const imageChoiceChartReveal = createChartReveal();
+
+watch(yesNoChart1Type, (type, previousType) => {
+    if (type === 'pie' && previousType !== undefined) {
+        yesNoChartReveal.trigger();
+    }
+});
+
+watch(imageChoiceChart1Type, (type, previousType) => {
+    if (type === 'pie' && previousType !== undefined) {
+        imageChoiceChartReveal.trigger();
+    }
+});
 </script>
 
 <template>
@@ -416,7 +459,7 @@ function exportSubmissions() {
 
             <template #results>
                 <!-- Example of a Multiple Choice field type (Pie Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                <div class="@container/widgets widgets flex flex-wrap mt-6 pb-8 gap-y-6 -mx-2 sm:-mx-3">
+                <div data-submission-summary class="@container/widgets widgets flex flex-wrap mt-6 pb-8 gap-y-6 -mx-2 sm:-mx-3">
                     <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('Wake me up')"
@@ -440,7 +483,7 @@ function exportSubmissions() {
                                     <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">10%</span>
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
-                                <figcaption :id="pieChart1LegendId" class="pie-chart-legend starting-style-transition-children">
+                                <figcaption :id="pieChart1LegendId" class="pie-chart-legend">
                                     <ol class="pie-chart-legend__list">
                                         <li class="pie-chart-legend__item">
                                             <span class="pie-chart-legend__value">45%</span>
@@ -753,7 +796,7 @@ function exportSubmissions() {
                                     {{ __('What is your spirit animal?: Actually 55%, Nope 45%') }}
                                 </figcaption>
                             </figure>
-                            <figure v-else class="image-pie-chart-figure">
+                            <figure v-else class="image-pie-chart-figure" :class="{ 'chart-reveal': imageChoiceChartReveal.isRevealing }">
                                 <div
                                     class="image-pie-chart"
                                     :style="{
@@ -891,7 +934,7 @@ function exportSubmissions() {
                                     {{ __('Do you fancy a pint?: :summary', { summary: yesNoChart1AccessibleLabel }) }}
                                 </figcaption>
                             </figure>
-                            <figure v-else class="pie-chart-figure">
+                            <figure v-else class="pie-chart-figure" :class="{ 'chart-reveal': yesNoChartReveal.isRevealing }">
                                 <div
                                     class="pie-chart"
                                     :style="{

From 67d2d9ae490ee08949db36be8acb94dc81e9d9bf Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 16:46:10 +0100
Subject: [PATCH 090/110] Charts / add animation for switching chart types -
 bar chart

---
 resources/css/components/forms/charts.css | 67 +++++++++++++++--------
 resources/js/pages/forms/Submissions.vue  | 20 ++++---
 2 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index b210708e59..b51b2ac83b 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -267,37 +267,60 @@
 
 /* GROUP CHARTS / ANIMATIONS / PIE CHART
 =================================================== */
-/* These animations are triggered when switching chart types */
-@property --pie-reveal {
-    syntax: '<angle>';
-    inherits: false;
-    initial-value: 0deg;
-}
+@media (prefers-reduced-motion: no-preference) {
+    /* These animations are triggered when switching chart types */
+    @property --pie-reveal {
+        syntax: '<angle>';
+        inherits: false;
+        initial-value: 0deg;
+    }
 
-@keyframes pie-chart-reveal {
-    from { --pie-reveal: 0deg; }
-    to { --pie-reveal: 360deg; }
-}
+    @keyframes pie-chart-reveal {
+        from { --pie-reveal: 0deg; }
+        to { --pie-reveal: 360deg; }
+    }
 
-.pie-chart__disc,
-.image-pie-chart__disc {
-    -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
-    mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
-    --pie-reveal: 360deg;
-}
+    @keyframes bar-chart-reveal {
+        from { transform: scaleX(0); }
+        to { transform: scaleX(1); }
+    }
 
-.content-card:has([data-submission-summary]) {
-    @media (prefers-reduced-motion: no-preference) {
+    .summary-bar-chart__fill {
+        transform-origin: left center;
+    }
+
+    .pie-chart__disc,
+    .image-pie-chart__disc {
+        -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+        mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+        --pie-reveal: 360deg;
+    }
+
+    .content-card:has([data-submission-summary]) {
         .chart-reveal .pie-chart__disc,
         .chart-reveal .image-pie-chart__disc {
             animation: pie-chart-reveal 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
         }
+
+        .chart-reveal .summary-bar-chart__fill {
+            animation: bar-chart-reveal 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+        }
     }
 
-    @media (prefers-reduced-motion: reduce) {
-        .chart-reveal .pie-chart__disc,
-        .chart-reveal .image-pie-chart__disc {
-            --pie-reveal: 360deg;
+    /* GROUP CHARTS / ANIMATIONS / BAR CHART
+    =================================================== */
+    @keyframes bar-chart-reveal {
+        from { transform: scaleX(0); }
+        to { transform: scaleX(1); }
+    }
+
+    .content-card:has([data-submission-summary]) {
+        .summary-bar-chart__fill {
+            transform-origin: left center;
+        }
+
+        .chart-reveal .summary-bar-chart__fill {
+            animation: bar-chart-reveal 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
         }
     }
 }
\ No newline at end of file
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 1b903f1501..4292451fc0 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -283,13 +283,13 @@ function exportSubmissions() {
 }
 
 /*
- * Pie chart reveal animation (see charts.css: pie-chart-reveal).
+ * Chart reveal animations (see charts.css: pie-chart-reveal, bar-chart-reveal).
  *
- * Toggles the chart-reveal class briefly so the sweep animation can replay.
- * Used when a widget’s chart type switches to pie — not on summary view enter
+ * Toggles the chart-reveal class briefly so the animation can replay when a
+ * widget’s chart type changes — pie sweep or bar grow — not on summary enter
  * or pagination.
  */
- const PIE_CHART_REVEAL_MS = 1100;
+const CHART_REVEAL_MS = 1100;
 
 function createChartReveal() {
     const isRevealing = ref(false);
@@ -303,7 +303,7 @@ function createChartReveal() {
             isRevealing.value = true;
             timeoutId = setTimeout(() => {
                 isRevealing.value = false;
-            }, PIE_CHART_REVEAL_MS);
+            }, CHART_REVEAL_MS);
         });
     }
 
@@ -314,13 +314,13 @@ const yesNoChartReveal = createChartReveal();
 const imageChoiceChartReveal = createChartReveal();
 
 watch(yesNoChart1Type, (type, previousType) => {
-    if (type === 'pie' && previousType !== undefined) {
+    if (previousType !== undefined) {
         yesNoChartReveal.trigger();
     }
 });
 
 watch(imageChoiceChart1Type, (type, previousType) => {
-    if (type === 'pie' && previousType !== undefined) {
+    if (previousType !== undefined) {
         imageChoiceChartReveal.trigger();
     }
 });
@@ -773,6 +773,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                             <figure
                                 v-if="imageChoiceChart1Type === 'bar'"
                                 class="grid p-6"
+                                :class="{ 'chart-reveal': imageChoiceChartReveal.isRevealing }"
                                 :aria-labelledby="imageChoiceBarChart1CaptionId"
                             >
                                 <ol class="grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
@@ -786,7 +787,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ option.badge }}</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
                                         <div
-                                            class="h-2.5 rounded-full"
+                                            class="summary-bar-chart__fill h-2.5 rounded-full"
                                             :class="index === 1 ? 'bg-chart-2' : 'bg-chart-1'"
                                             :style="{ width: `${option.percent}%` }"
                                         />
@@ -908,6 +909,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                             <figure
                                 v-if="yesNoChart1Type === 'bar'"
                                 class="grid p-6"
+                                :class="{ 'chart-reveal': yesNoChartReveal.isRevealing }"
                                 :aria-labelledby="yesNoBarChart1CaptionId"
                             >
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.75 p-0 pt-4" aria-hidden="true">
@@ -924,7 +926,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                                         />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
                                         <div
-                                            class="h-2.5 rounded-full"
+                                            class="summary-bar-chart__fill h-2.5 rounded-full"
                                             :class="option.chartColor === 2 ? 'bg-chart-2' : 'bg-chart-1'"
                                             :style="{ width: `${option.percent}%` }"
                                         />

From 6cc212e1e2c61569823851f02ac35b1a6c933ba8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 16:51:16 +0100
Subject: [PATCH 091/110] Charts / add animation for switching chart types -
 make more repeatable

---
 resources/css/components/forms/charts.css     | 27 +------
 .../js/composables/use-summary-chart-type.js  | 58 +++++++++++++++
 resources/js/pages/forms/Submissions.vue      | 72 +++++--------------
 3 files changed, 80 insertions(+), 77 deletions(-)
 create mode 100644 resources/js/composables/use-summary-chart-type.js

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index b51b2ac83b..8af23f8d86 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -285,36 +285,15 @@
         to { transform: scaleX(1); }
     }
 
-    .summary-bar-chart__fill {
-        transform-origin: left center;
-    }
-
-    .pie-chart__disc,
-    .image-pie-chart__disc {
-        -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
-        mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
-        --pie-reveal: 360deg;
-    }
-
     .content-card:has([data-submission-summary]) {
         .chart-reveal .pie-chart__disc,
         .chart-reveal .image-pie-chart__disc {
+            -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+            mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+            --pie-reveal: 0deg;
             animation: pie-chart-reveal 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
         }
 
-        .chart-reveal .summary-bar-chart__fill {
-            animation: bar-chart-reveal 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
-        }
-    }
-
-    /* GROUP CHARTS / ANIMATIONS / BAR CHART
-    =================================================== */
-    @keyframes bar-chart-reveal {
-        from { transform: scaleX(0); }
-        to { transform: scaleX(1); }
-    }
-
-    .content-card:has([data-submission-summary]) {
         .summary-bar-chart__fill {
             transform-origin: left center;
         }
diff --git a/resources/js/composables/use-summary-chart-type.js b/resources/js/composables/use-summary-chart-type.js
new file mode 100644
index 0000000000..6e070a96ed
--- /dev/null
+++ b/resources/js/composables/use-summary-chart-type.js
@@ -0,0 +1,58 @@
+import { ref, watch, nextTick } from 'vue';
+
+const CHART_REVEAL_MS = 1100;
+
+function createChartReveal() {
+    const isRevealing = ref(false);
+    let timeoutId;
+
+    function trigger() {
+        clearTimeout(timeoutId);
+        isRevealing.value = false;
+
+        nextTick(() => {
+            isRevealing.value = true;
+            timeoutId = setTimeout(() => {
+                isRevealing.value = false;
+            }, CHART_REVEAL_MS);
+        });
+    }
+
+    return { isRevealing, trigger };
+}
+
+export function summaryChartTypesPreferencesKey(formHandle) {
+    return `forms.${formHandle}.submissions.summary.chart-types`;
+}
+
+/**
+ * Persisted chart type + reveal animation for a summary widget.
+ * Destructure the returned refs in setup so Vue unwraps them in the template.
+ */
+export default function useSummaryChartType(formHandle, widgetKey, { types = ['bar', 'pie'], default: defaultType = 'bar' } = {}) {
+    const preferencesKey = summaryChartTypesPreferencesKey(formHandle);
+    const savedTypes = Statamic.$preferences.get(preferencesKey, {});
+    const saved = savedTypes[widgetKey];
+    const chartType = ref(types.includes(saved) ? saved : defaultType);
+    const { isRevealing, trigger } = createChartReveal();
+
+    watch(chartType, (type) => {
+        const current = Statamic.$preferences.get(preferencesKey, {});
+
+        Statamic.$preferences.set(preferencesKey, {
+            ...current,
+            [widgetKey]: type,
+        });
+    });
+
+    function setChartType(type) {
+        if (! types.includes(type) || type === chartType.value) {
+            return;
+        }
+
+        chartType.value = type;
+        trigger();
+    }
+
+    return { chartType, isRevealing, setChartType, types };
+}
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 4292451fc0..a4fa7085f1 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, useId, nextTick } from 'vue';
+import { ref, computed, watch, useId } from 'vue';
 import axios from 'axios';
 import Head from '@/pages/layout/Head.vue';
 import { Header, Dropdown, DropdownMenu, DropdownItem, Button, Modal, RadioGroup, Radio, CommandPaletteItem, ToggleGroup, ToggleItem, Widget, Pagination, Icon, Switch } from '@ui';
@@ -8,6 +8,7 @@ import FormSubmissionListing from '@/components/forms/SubmissionListing.vue';
 import Layout from '@/pages/layout/Layout.vue';
 import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from './Layout.vue';
+import useSummaryChartType from '@/composables/use-summary-chart-type.js';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
 
@@ -133,8 +134,6 @@ const yesNoChart1AccessibleLabel = computed(() =>
         .join(', '),
 );
 
-const yesNoChart1Type = ref('bar');
-
 const imageChoicePieChart1Data = [
     { percent: 55, badge: 'A', label: 'Actually', image: 'https://picsum.photos/id/159/320/320' },
     { percent: 45, badge: 'B', label: 'Nope', image: 'https://picsum.photos/id/485/320/320' },
@@ -146,8 +145,6 @@ const imageChoicePieChart1AccessibleLabel = computed(() =>
         .join(', '),
 );
 
-const imageChoiceChart1Type = ref('bar');
-
 const verticalBarChart1Data = [
     { label: '0', percent: 2 },
     { label: '1', percent: 1 },
@@ -282,48 +279,17 @@ function exportSubmissions() {
     exportModalOpen.value = false;
 }
 
-/*
- * Chart reveal animations (see charts.css: pie-chart-reveal, bar-chart-reveal).
- *
- * Toggles the chart-reveal class briefly so the animation can replay when a
- * widget’s chart type changes — pie sweep or bar grow — not on summary enter
- * or pagination.
- */
-const CHART_REVEAL_MS = 1100;
-
-function createChartReveal() {
-    const isRevealing = ref(false);
-    let timeoutId;
-
-    function trigger() {
-        clearTimeout(timeoutId);
-        isRevealing.value = false;
-
-        nextTick(() => {
-            isRevealing.value = true;
-            timeoutId = setTimeout(() => {
-                isRevealing.value = false;
-            }, CHART_REVEAL_MS);
-        });
-    }
-
-    return { isRevealing, trigger };
-}
-
-const yesNoChartReveal = createChartReveal();
-const imageChoiceChartReveal = createChartReveal();
-
-watch(yesNoChart1Type, (type, previousType) => {
-    if (previousType !== undefined) {
-        yesNoChartReveal.trigger();
-    }
-});
-
-watch(imageChoiceChart1Type, (type, previousType) => {
-    if (previousType !== undefined) {
-        imageChoiceChartReveal.trigger();
-    }
-});
+const {
+    chartType: yesNoChart1Type,
+    isRevealing: yesNoChartIsRevealing,
+    setChartType: setYesNoChart1Type,
+} = useSummaryChartType(props.form.handle, 'yes-no-1');
+
+const {
+    chartType: imageChoiceChart1Type,
+    isRevealing: imageChoiceChartIsRevealing,
+    setChartType: setImageChoiceChart1Type,
+} = useSummaryChartType(props.form.handle, 'image-choice-1');
 </script>
 
 <template>
@@ -755,7 +721,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
                             <template #actions>
-                                <ToggleGroup v-model="imageChoiceChart1Type" size="sm">
+                                <ToggleGroup :model-value="imageChoiceChart1Type" @update:model-value="setImageChoiceChart1Type" size="sm">
                                     <ToggleItem
                                         value="bar"
                                         icon="charts-bar-horizontal"
@@ -773,7 +739,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                             <figure
                                 v-if="imageChoiceChart1Type === 'bar'"
                                 class="grid p-6"
-                                :class="{ 'chart-reveal': imageChoiceChartReveal.isRevealing }"
+                                :class="{ 'chart-reveal': imageChoiceChartIsRevealing }"
                                 :aria-labelledby="imageChoiceBarChart1CaptionId"
                             >
                                 <ol class="grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
@@ -797,7 +763,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                                     {{ __('What is your spirit animal?: Actually 55%, Nope 45%') }}
                                 </figcaption>
                             </figure>
-                            <figure v-else class="image-pie-chart-figure" :class="{ 'chart-reveal': imageChoiceChartReveal.isRevealing }">
+                            <figure v-else class="image-pie-chart-figure" :class="{ 'chart-reveal': imageChoiceChartIsRevealing }">
                                 <div
                                     class="image-pie-chart"
                                     :style="{
@@ -891,7 +857,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
                             <template #actions>
-                                <ToggleGroup v-model="yesNoChart1Type" size="sm">
+                                <ToggleGroup :model-value="yesNoChart1Type" @update:model-value="setYesNoChart1Type" size="sm">
                                     <ToggleItem
                                         value="bar"
                                         icon="charts-bar-horizontal"
@@ -909,7 +875,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                             <figure
                                 v-if="yesNoChart1Type === 'bar'"
                                 class="grid p-6"
-                                :class="{ 'chart-reveal': yesNoChartReveal.isRevealing }"
+                                :class="{ 'chart-reveal': yesNoChartIsRevealing }"
                                 :aria-labelledby="yesNoBarChart1CaptionId"
                             >
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.75 p-0 pt-4" aria-hidden="true">
@@ -936,7 +902,7 @@ watch(imageChoiceChart1Type, (type, previousType) => {
                                     {{ __('Do you fancy a pint?: :summary', { summary: yesNoChart1AccessibleLabel }) }}
                                 </figcaption>
                             </figure>
-                            <figure v-else class="pie-chart-figure" :class="{ 'chart-reveal': yesNoChartReveal.isRevealing }">
+                            <figure v-else class="pie-chart-figure" :class="{ 'chart-reveal': yesNoChartIsRevealing }">
                                 <div
                                     class="pie-chart"
                                     :style="{

From 208e04f8da64dbd03835fb91903b11aeb8f7a052 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 16:52:25 +0100
Subject: [PATCH 092/110] Charts / add animation for switching chart types -
 speed up bar animation a touch

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

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 8af23f8d86..cc252948de 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -299,7 +299,7 @@
         }
 
         .chart-reveal .summary-bar-chart__fill {
-            animation: bar-chart-reveal 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+            animation: bar-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
         }
     }
 }
\ No newline at end of file

From 6c7d8cd00ea7feb050233569c96f82e14eb99453 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 1 Jul 2026 19:35:35 +0100
Subject: [PATCH 093/110] Charts / add animation for switching chart types -
 speed up pie chart a touch

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

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index cc252948de..e7f5e10da9 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -291,7 +291,7 @@
             -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
             mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
             --pie-reveal: 0deg;
-            animation: pie-chart-reveal 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+            animation: pie-chart-reveal 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
         }
 
         .summary-bar-chart__fill {

From b28e5fba123aea84d52d2b403feccc38ead4f3b5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 08:19:22 +0100
Subject: [PATCH 094/110] Charts / add animation for switching chart types -
 nah actually

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

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index e7f5e10da9..b97d56c01e 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -291,7 +291,7 @@
             -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
             mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
             --pie-reveal: 0deg;
-            animation: pie-chart-reveal 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+            animation: pie-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
         }
 
         .summary-bar-chart__fill {

From 7d9424da737d264e68be3173b4e798598266e686 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 09:17:19 +0100
Subject: [PATCH 095/110] Add a small helper attribute for the toggle group to
 show it has been interacted with

---
 resources/js/components/ui/Toggle/Group.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/resources/js/components/ui/Toggle/Group.vue b/resources/js/components/ui/Toggle/Group.vue
index 2e217ced7e..a72f8ca1cb 100644
--- a/resources/js/components/ui/Toggle/Group.vue
+++ b/resources/js/components/ui/Toggle/Group.vue
@@ -18,6 +18,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue']);
 
 const toggleState = ref(props.modelValue ?? (props.multiple ? [] : null));
+const hasInteracted = ref(false);
 
 watch(
     () => props.modelValue,
@@ -58,6 +59,14 @@ function updateModelValue(value) {
         emit('update:modelValue', value);
     }
 }
+
+function markUserInteraction(event) {
+    if (event.type === 'keydown' && ! ['Enter', ' ', 'Spacebar'].includes(event.key)) {
+        return;
+    }
+
+    hasInteracted.value = true;
+}
 </script>
 
 <template>
@@ -65,7 +74,10 @@ function updateModelValue(value) {
         :type="multiple ? 'multiple' : 'single'"
         :class="groupClasses"
         data-ui-toggle-group
+        :data-toggle-group-interacted="hasInteracted ? '' : null"
         :model-value="toggleState"
+        @pointerdown="markUserInteraction"
+        @keydown="markUserInteraction"
         @update:model-value="updateModelValue"
     >
         <slot />

From e9fad365d791a2aac7e7ba6d9534db28b329683a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 09:18:06 +0100
Subject: [PATCH 096/110] Greatly simplify chart animation by using has and
 querying whether the toggle group has been interacted with

---
 resources/css/components/forms/charts.css     | 30 +++++++++--------
 resources/js/components/ui/Toggle/Group.vue   |  2 +-
 .../js/composables/use-summary-chart-type.js  | 32 ++-----------------
 resources/js/pages/forms/Submissions.vue      |  8 ++---
 4 files changed, 22 insertions(+), 50 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index b97d56c01e..2ba5d2fc2a 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -286,20 +286,22 @@
     }
 
     .content-card:has([data-submission-summary]) {
-        .chart-reveal .pie-chart__disc,
-        .chart-reveal .image-pie-chart__disc {
-            -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
-            mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
-            --pie-reveal: 0deg;
-            animation: pie-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
-        }
-
-        .summary-bar-chart__fill {
-            transform-origin: left center;
-        }
-
-        .chart-reveal .summary-bar-chart__fill {
-            animation: bar-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+        [data-ui-card]:has([data-ui-toggle-group-interacted]) {
+            .pie-chart__disc,
+            .image-pie-chart__disc {
+                -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+                mask-image: conic-gradient(from 0deg, #000 0deg, #000 var(--pie-reveal), transparent var(--pie-reveal));
+                --pie-reveal: 0deg;
+                animation: pie-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+            }
+        
+            .summary-bar-chart__fill {
+                transform-origin: left center;
+            }
+        
+            .summary-bar-chart__fill {
+                animation: bar-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/resources/js/components/ui/Toggle/Group.vue b/resources/js/components/ui/Toggle/Group.vue
index a72f8ca1cb..7eb62813b5 100644
--- a/resources/js/components/ui/Toggle/Group.vue
+++ b/resources/js/components/ui/Toggle/Group.vue
@@ -74,7 +74,7 @@ function markUserInteraction(event) {
         :type="multiple ? 'multiple' : 'single'"
         :class="groupClasses"
         data-ui-toggle-group
-        :data-toggle-group-interacted="hasInteracted ? '' : null"
+        :data-ui-toggle-group-interacted="hasInteracted ? '' : null"
         :model-value="toggleState"
         @pointerdown="markUserInteraction"
         @keydown="markUserInteraction"
diff --git a/resources/js/composables/use-summary-chart-type.js b/resources/js/composables/use-summary-chart-type.js
index 6e070a96ed..84494e9924 100644
--- a/resources/js/composables/use-summary-chart-type.js
+++ b/resources/js/composables/use-summary-chart-type.js
@@ -1,40 +1,15 @@
-import { ref, watch, nextTick } from 'vue';
-
-const CHART_REVEAL_MS = 1100;
-
-function createChartReveal() {
-    const isRevealing = ref(false);
-    let timeoutId;
-
-    function trigger() {
-        clearTimeout(timeoutId);
-        isRevealing.value = false;
-
-        nextTick(() => {
-            isRevealing.value = true;
-            timeoutId = setTimeout(() => {
-                isRevealing.value = false;
-            }, CHART_REVEAL_MS);
-        });
-    }
-
-    return { isRevealing, trigger };
-}
+import { ref, watch } from 'vue';
 
 export function summaryChartTypesPreferencesKey(formHandle) {
     return `forms.${formHandle}.submissions.summary.chart-types`;
 }
 
-/**
- * Persisted chart type + reveal animation for a summary widget.
- * Destructure the returned refs in setup so Vue unwraps them in the template.
- */
+/** Persisted chart type for a summary widget. */
 export default function useSummaryChartType(formHandle, widgetKey, { types = ['bar', 'pie'], default: defaultType = 'bar' } = {}) {
     const preferencesKey = summaryChartTypesPreferencesKey(formHandle);
     const savedTypes = Statamic.$preferences.get(preferencesKey, {});
     const saved = savedTypes[widgetKey];
     const chartType = ref(types.includes(saved) ? saved : defaultType);
-    const { isRevealing, trigger } = createChartReveal();
 
     watch(chartType, (type) => {
         const current = Statamic.$preferences.get(preferencesKey, {});
@@ -51,8 +26,7 @@ export default function useSummaryChartType(formHandle, widgetKey, { types = ['b
         }
 
         chartType.value = type;
-        trigger();
     }
 
-    return { chartType, isRevealing, setChartType, types };
+    return { chartType, setChartType, types };
 }
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index a4fa7085f1..9f02cc722a 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -281,13 +281,11 @@ function exportSubmissions() {
 
 const {
     chartType: yesNoChart1Type,
-    isRevealing: yesNoChartIsRevealing,
     setChartType: setYesNoChart1Type,
 } = useSummaryChartType(props.form.handle, 'yes-no-1');
 
 const {
     chartType: imageChoiceChart1Type,
-    isRevealing: imageChoiceChartIsRevealing,
     setChartType: setImageChoiceChart1Type,
 } = useSummaryChartType(props.form.handle, 'image-choice-1');
 </script>
@@ -739,7 +737,6 @@ const {
                             <figure
                                 v-if="imageChoiceChart1Type === 'bar'"
                                 class="grid p-6"
-                                :class="{ 'chart-reveal': imageChoiceChartIsRevealing }"
                                 :aria-labelledby="imageChoiceBarChart1CaptionId"
                             >
                                 <ol class="grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
@@ -763,7 +760,7 @@ const {
                                     {{ __('What is your spirit animal?: Actually 55%, Nope 45%') }}
                                 </figcaption>
                             </figure>
-                            <figure v-else class="image-pie-chart-figure" :class="{ 'chart-reveal': imageChoiceChartIsRevealing }">
+                            <figure v-else class="image-pie-chart-figure">
                                 <div
                                     class="image-pie-chart"
                                     :style="{
@@ -875,7 +872,6 @@ const {
                             <figure
                                 v-if="yesNoChart1Type === 'bar'"
                                 class="grid p-6"
-                                :class="{ 'chart-reveal': yesNoChartIsRevealing }"
                                 :aria-labelledby="yesNoBarChart1CaptionId"
                             >
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.75 p-0 pt-4" aria-hidden="true">
@@ -902,7 +898,7 @@ const {
                                     {{ __('Do you fancy a pint?: :summary', { summary: yesNoChart1AccessibleLabel }) }}
                                 </figcaption>
                             </figure>
-                            <figure v-else class="pie-chart-figure" :class="{ 'chart-reveal': yesNoChartIsRevealing }">
+                            <figure v-else class="pie-chart-figure">
                                 <div
                                     class="pie-chart"
                                     :style="{

From ea6ea60b9643e2e7df2cd4ddae89f70577a9e263 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 09:23:10 +0100
Subject: [PATCH 097/110] Remove a load of JS data arrays so it's a nice flat
 comp for Dunc to rebuild

---
 resources/js/pages/forms/Submissions.vue | 377 ++++++++++++-----------
 1 file changed, 196 insertions(+), 181 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 9f02cc722a..4925a7e1b3 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -75,28 +75,6 @@ const starRatingChart2Meta = computed(() => {
     };
 });
 
-const starRatingChart2AccessibleLabel = computed(() => {
-    if (starRatingChart2Page.value === 1) {
-        return __('How would you rate the restaurant?: 7/10 average. Rating distribution: 10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%');
-    }
-
-    return __('How would you rate the restaurant?: 7/10 average. Rating distribution: 5 stars 8%, 4 stars 7%, 3 stars 6%, 2 stars 5%, 1 star 4%');
-});
-
-const dictionaryChart1Page1Data = [
-    { rank: 1, label: 'Japan', flag: '🇯🇵', percent: 40 },
-    { rank: 2, label: 'Italy', flag: '🇮🇹', percent: 35 },
-    { rank: 3, label: 'USA', flag: '🇺🇸', percent: 10 },
-    { rank: 4, label: 'UK', flag: '🇬🇧', percent: 8 },
-    { rank: 5, label: 'France', flag: '🇫🇷', percent: 3 },
-];
-
-const dictionaryChart1Page2Data = [
-    { rank: 6, label: 'Germany', flag: '🇩🇪', percent: 2 },
-    { rank: 7, label: 'Spain', flag: '🇪🇸', percent: 1 },
-    { rank: 8, label: 'Portugal', flag: '🇵🇹', percent: 1 },
-];
-
 const dictionaryChartPage = ref(1);
 const dictionaryChartPerPage = 5;
 const dictionaryChartTotal = 8;
@@ -115,52 +93,6 @@ const dictionaryChartMeta = computed(() => {
     };
 });
 
-const dictionaryChartAccessibleLabel = computed(() => {
-    if (dictionaryChartPage.value === 1) {
-        return __('Japan 40%, Italy 35%, USA 10%, UK 8%, France 3%');
-    }
-
-    return __('Germany 2%, Spain 1%, Portugal 1%');
-});
-
-const yesNoChart1Data = [
-    { percent: 55, label: 'I\'ll get my coat', icon: 'checkmark-circle-filled', chartColor: 1 },
-    { percent: 45, label: 'Coffee might be better', icon: 'delete-circle-filled', chartColor: 2 },
-];
-
-const yesNoChart1AccessibleLabel = computed(() =>
-    yesNoChart1Data
-        .map((option) => `${option.label} ${option.percent}%`)
-        .join(', '),
-);
-
-const imageChoicePieChart1Data = [
-    { percent: 55, badge: 'A', label: 'Actually', image: 'https://picsum.photos/id/159/320/320' },
-    { percent: 45, badge: 'B', label: 'Nope', image: 'https://picsum.photos/id/485/320/320' },
-];
-
-const imageChoicePieChart1AccessibleLabel = computed(() =>
-    imageChoicePieChart1Data
-        .map((option) => `${option.label} (${option.badge}) ${option.percent}%`)
-        .join(', '),
-);
-
-const verticalBarChart1Data = [
-    { label: '0', percent: 2 },
-    { label: '1', percent: 1 },
-    { label: '2', percent: 3 },
-    { label: '3', percent: 4 },
-    { label: '4', percent: 6 },
-    { label: '5', percent: 8 },
-    { label: '6', percent: 12 },
-    { label: '7', percent: 20 },
-    { label: '8', percent: 35 },
-    { label: '9', percent: 48 },
-    { label: '10', percent: 61 },
-];
-
-const verticalBarChart1MaxValue = computed(() => Math.max(...verticalBarChart1Data.map((bar) => bar.percent), 1));
-
 // Mock in-widget pagination for fields with more than four response options.
 const wakeMeUpChartPage = ref(1);
 const wakeMeUpChartPerPage = 4;
@@ -685,22 +617,83 @@ const {
                                         <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">Average</span>
                                     </div>
                                 </div>
-                                <ol
-                                    class="vertical-bar-chart"
-                                    :style="{ '--max-value': verticalBarChart1MaxValue }"
-                                    aria-hidden="true"
-                                >
-                                    <li
-                                        v-for="bar in verticalBarChart1Data"
-                                        :key="bar.label"
-                                        class="vertical-bar-chart__bar"
-                                        :style="{ '--value': bar.percent }"
-                                    >
+                                <ol class="vertical-bar-chart" style="--max-value: 61;" aria-hidden="true">
+                                    <li class="vertical-bar-chart__bar" style="--value: 2;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">2%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">0</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 1;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">1%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">1</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 3;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">3%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">2</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 4;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">4%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">3</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 6;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">6%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">4</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 8;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">8%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">5</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 12;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">12%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">6</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 20;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">20%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">7</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 35;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">35%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">8</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 48;">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="vertical-bar-chart__value">48%</span>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">9</span>
+                                    </li>
+                                    <li class="vertical-bar-chart__bar" style="--value: 61;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">{{ bar.percent }}%</span>
+                                            <span class="vertical-bar-chart__value">61%</span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
-                                        <span class="vertical-bar-chart__scale-label">{{ bar.label }}</span>
+                                        <span class="vertical-bar-chart__scale-label">10</span>
                                     </li>
                                 </ol>
                                 <figcaption :id="verticalBarChart1CaptionId" class="sr-only">
@@ -740,20 +733,19 @@ const {
                                 :aria-labelledby="imageChoiceBarChart1CaptionId"
                             >
                                 <ol class="grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
-                                    <li
-                                        v-for="(option, index) in imageChoicePieChart1Data"
-                                        :key="option.badge"
-                                        class="contents"
-                                    >
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
-                                        <img class="size-10 shrink-0 object-cover rounded-full" :src="option.image" alt="" />
-                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ option.badge }}</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
-                                        <div
-                                            class="summary-bar-chart__fill h-2.5 rounded-full"
-                                            :class="index === 1 ? 'bg-chart-2' : 'bg-chart-1'"
-                                            :style="{ width: `${option.percent}%` }"
-                                        />
+                                    <li class="contents">
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/159/320/320" alt="" />
+                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
+                                        <div class="summary-bar-chart__fill h-2.5 w-[55%] rounded-full bg-chart-1" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
+                                        <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/485/320/320" alt="" />
+                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <div class="summary-bar-chart__fill h-2.5 w-[45%] rounded-full bg-chart-2" />
                                     </li>
                                 </ol>
                                 <figcaption :id="imageChoiceBarChart1CaptionId" class="sr-only">
@@ -763,40 +755,29 @@ const {
                             <figure v-else class="image-pie-chart-figure">
                                 <div
                                     class="image-pie-chart"
-                                    :style="{
-                                        '--1': imageChoicePieChart1Data[0].percent,
-                                        '--2': imageChoicePieChart1Data[1].percent,
-                                    }"
+                                    style="--1: 55; --2: 45;"
                                     role="img"
                                     :aria-labelledby="imageChoicePieChart1LegendId"
                                 >
                                     <div class="image-pie-chart__disc" aria-hidden="true">
-                                        <div
-                                            v-for="(option, index) in imageChoicePieChart1Data"
-                                            :key="option.badge"
-                                            class="image-pie-chart__slice"
-                                            :class="`image-pie-chart__slice--${index + 1}`"
-                                            :style="{ '--image': `url('${option.image}')` }"
-                                        />
+                                        <div class="image-pie-chart__slice image-pie-chart__slice--1" style="--image: url('https://picsum.photos/id/159/320/320')" />
+                                        <div class="image-pie-chart__slice image-pie-chart__slice--2" style="--image: url('https://picsum.photos/id/485/320/320')" />
                                     </div>
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span
-                                        v-for="(option, index) in imageChoicePieChart1Data"
-                                        :key="`label-${option.badge}`"
-                                        class="image-pie-chart__label"
-                                        :class="`image-pie-chart__label--${index + 1}`"
-                                        aria-hidden="true"
-                                    >{{ option.percent }}%</span>
+                                    <span class="image-pie-chart__label image-pie-chart__label--1" aria-hidden="true">55%</span>
+                                    <span class="image-pie-chart__label image-pie-chart__label--2" aria-hidden="true">45%</span>
                                 </div>
                                 <figcaption :id="imageChoicePieChart1LegendId" class="image-pie-chart-legend">
-                                    <p class="sr-only">{{ imageChoicePieChart1AccessibleLabel }}</p>
+                                    <p class="sr-only">Actually (A) 55%, Nope (B) 45%</p>
                                     <ol class="grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-3" aria-hidden="true">
-                                        <template v-for="option in imageChoicePieChart1Data" :key="option.badge">
-                                            <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
-                                            <img class="size-10 shrink-0 object-cover rounded-full" :src="option.image" alt="" />
-                                            <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">{{ option.badge }}</span>
-                                            <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
-                                        </template>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/159/320/320" alt="" />
+                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
+                                        <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/485/320/320" alt="" />
+                                        <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                     </ol>
                                 </figcaption>
                             </figure>
@@ -875,60 +856,46 @@ const {
                                 :aria-labelledby="yesNoBarChart1CaptionId"
                             >
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.75 p-0 pt-4" aria-hidden="true">
-                                    <li
-                                        v-for="option in yesNoChart1Data"
-                                        :key="option.label"
-                                        class="contents"
-                                    >
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ option.percent }}%</span>
-                                        <Icon
-                                            :name="option.icon"
-                                            class="size-3.5 shrink-0"
-                                            :class="option.chartColor === 2 ? 'text-chart-2-legend' : 'text-chart-1-legend'"
-                                        />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ option.label }}</span>
-                                        <div
-                                            class="summary-bar-chart__fill h-2.5 rounded-full"
-                                            :class="option.chartColor === 2 ? 'bg-chart-2' : 'bg-chart-1'"
-                                            :style="{ width: `${option.percent}%` }"
-                                        />
+                                    <li class="contents">
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <Icon name="checkmark-circle-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">I’ll get my coat</span>
+                                        <div class="summary-bar-chart__fill h-2.5 w-[55%] rounded-full bg-chart-1" />
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
+                                        <Icon name="delete-circle-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Coffee might be better</span>
+                                        <div class="summary-bar-chart__fill h-2.5 w-[45%] rounded-full bg-chart-2" />
                                     </li>
                                 </ol>
                                 <figcaption :id="yesNoBarChart1CaptionId" class="sr-only">
-                                    {{ __('Do you fancy a pint?: :summary', { summary: yesNoChart1AccessibleLabel }) }}
+                                    {{ __('Do you fancy a pint?: I’ll get my coat 55%, Coffee might be better 45%') }}
                                 </figcaption>
                             </figure>
                             <figure v-else class="pie-chart-figure">
                                 <div
                                     class="pie-chart"
-                                    :style="{
-                                        '--1': yesNoChart1Data[0].percent,
-                                        '--2': yesNoChart1Data[1].percent,
-                                        '--3': 0,
-                                        '--4': 0,
-                                    }"
+                                    style="--1: 55; --2: 45; --3: 0; --4: 0;"
                                     role="img"
                                     :aria-labelledby="yesNoPieChart1LegendId"
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
-                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">{{ yesNoChart1Data[0].percent }}%</span>
-                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">{{ yesNoChart1Data[1].percent }}%</span>
+                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">55%</span>
+                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">45%</span>
                                 </div>
                                 <figcaption :id="yesNoPieChart1LegendId" class="pie-chart-legend">
-                                    <p class="sr-only">{{ __('Do you fancy a pint?: :summary', { summary: yesNoChart1AccessibleLabel }) }}</p>
+                                    <p class="sr-only">{{ __('Do you fancy a pint?: I’ll get my coat 55%, Coffee might be better 45%') }}</p>
                                     <ul class="pie-chart-legend__list" aria-hidden="true">
-                                        <li
-                                            v-for="option in yesNoChart1Data"
-                                            :key="option.label"
-                                            class="pie-chart-legend__item"
-                                        >
-                                            <span class="pie-chart-legend__value">{{ option.percent }}%</span>
-                                            <Icon
-                                                :name="option.icon"
-                                                class="size-3.5 shrink-0"
-                                                :class="option.chartColor === 2 ? 'text-chart-2-legend' : 'text-chart-1-legend'"
-                                            />
-                                            <span>{{ option.label }}</span>
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">55%</span>
+                                            <Icon name="checkmark-circle-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                            <span>I’ll get my coat</span>
+                                        </li>
+                                        <li class="pie-chart-legend__item">
+                                            <span class="pie-chart-legend__value">45%</span>
+                                            <Icon name="delete-circle-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
+                                            <span>Coffee might be better</span>
                                         </li>
                                     </ul>
                                 </figcaption>
@@ -954,20 +921,53 @@ const {
                                     @page-selected="dictionaryChartPage = $event"
                                 />
                             </template>
-                            <p class="sr-only" aria-live="polite">{{ dictionaryChartAccessibleLabel }}</p>
+                            <p v-if="dictionaryChartPage === 1" class="sr-only" aria-live="polite">Japan 40%, Italy 35%, USA 10%, UK 8%, France 3%</p>
+                            <p v-else class="sr-only" aria-live="polite">Germany 2%, Spain 1%, Portugal 1%</p>
                             <figure v-if="dictionaryChartPage === 1" class="grid p-6" :aria-labelledby="dictionaryChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
-                                    <li
-                                        v-for="item in dictionaryChart1Page1Data"
-                                        :key="item.label"
-                                        class="contents"
-                                    >
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.rank }}</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ item.label }}</span>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Japan</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[40%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇯🇵</div>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">40%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">2</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Italy</span>
                                         <div class="flex items-center gap-1">
-                                            <div class="h-px bg-gray-200 dark:bg-gray-600" :style="{ width: `${item.percent}%` }" />
-                                            <div class="text-lg">{{ item.flag }}</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.percent }}%</span>
+                                            <div class="h-px w-[35%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇮🇹</div>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">3</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">USA</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇺🇸</div>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">UK</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[8%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇬🇧</div>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">8%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">France</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[3%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇫🇷</div>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">3%</span>
                                         </div>
                                     </li>
                                 </ol>
@@ -977,17 +977,31 @@ const {
                             </figure>
                             <figure v-else-if="dictionaryChartPage === 2" class="grid p-6" :aria-labelledby="dictionaryChart1Page2CaptionId">
                                 <ol class="grid grid-cols-[auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
-                                    <li
-                                        v-for="item in dictionaryChart1Page2Data"
-                                        :key="item.label"
-                                        class="contents"
-                                    >
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.rank }}</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">{{ item.label }}</span>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">6</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Germany</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[2%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇩🇪</div>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">2%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">7</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Spain</span>
+                                        <div class="flex items-center gap-1">
+                                            <div class="h-px w-[1%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇪🇸</div>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">1%</span>
+                                        </div>
+                                    </li>
+                                    <li class="contents">
+                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">8</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Portugal</span>
                                         <div class="flex items-center gap-1">
-                                            <div class="h-px bg-gray-200 dark:bg-gray-600" :style="{ width: `${item.percent}%` }" />
-                                            <div class="text-lg">{{ item.flag }}</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">{{ item.percent }}%</span>
+                                            <div class="h-px w-[1%] bg-gray-200 dark:bg-gray-600" />
+                                            <div class="text-lg">🇵🇹</div>
+                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">1%</span>
                                         </div>
                                     </li>
                                 </ol>
@@ -1133,7 +1147,8 @@ const {
                                     @page-selected="starRatingChart2Page = $event"
                                 />
                             </template>
-                            <p class="sr-only" aria-live="polite">{{ starRatingChart2AccessibleLabel }}</p>
+                            <p v-if="starRatingChart2Page === 1" class="sr-only" aria-live="polite">How would you rate the restaurant?: 7/10 average. Rating distribution: 10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%</p>
+                            <p v-else class="sr-only" aria-live="polite">How would you rate the restaurant?: 7/10 average. Rating distribution: 5 stars 8%, 4 stars 7%, 3 stars 6%, 2 stars 5%, 1 star 4%</p>
                             <figure v-if="starRatingChart2Page === 1" class="grid p-6 pt-3 ps-4" :aria-labelledby="starRatingChart2CaptionId">
                                 <div aria-hidden="true" class="pb-5">
                                     <div class="inline-flex items-center gap-2 px-2 py-1 -ms-1 rounded-md border border-gray-200 dark:border-gray-700">

From aba2e87b9a512cb907975a41998808dd6a946014 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 14:23:17 +0100
Subject: [PATCH 098/110] Add a display mode for responses

---
 resources/css/components/forms/charts.css     |  14 +-
 .../composables/use-summary-chart-metric.js   |  18 ++
 resources/js/pages/forms/Submissions.vue      | 200 ++++++++++--------
 3 files changed, 142 insertions(+), 90 deletions(-)
 create mode 100644 resources/js/composables/use-summary-chart-metric.js

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 2ba5d2fc2a..306a01f485 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -265,6 +265,16 @@
 
 
 
+/* GROUP CHARTS / DISPLAY MODE (% or count)
+=================================================== */
+.chart-metric::before {
+    content: attr(data-percent);
+}
+
+[data-submission-summary][data-chart-metric="count"] .chart-metric::before {
+    content: attr(data-count);
+}
+
 /* GROUP CHARTS / ANIMATIONS / PIE CHART
 =================================================== */
 @media (prefers-reduced-motion: no-preference) {
@@ -294,11 +304,11 @@
                 --pie-reveal: 0deg;
                 animation: pie-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
             }
-        
+
             .summary-bar-chart__fill {
                 transform-origin: left center;
             }
-        
+
             .summary-bar-chart__fill {
                 animation: bar-chart-reveal 0.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
             }
diff --git a/resources/js/composables/use-summary-chart-metric.js b/resources/js/composables/use-summary-chart-metric.js
new file mode 100644
index 0000000000..9703868558
--- /dev/null
+++ b/resources/js/composables/use-summary-chart-metric.js
@@ -0,0 +1,18 @@
+import { ref, watch } from 'vue';
+
+export function summaryChartMetricPreferencesKey(formHandle) {
+    return `forms.${formHandle}.submissions.summary.chart-metric`;
+}
+
+/** Persisted percent/count display mode for summary charts. */
+export default function useSummaryChartMetric(formHandle, { default: defaultMetric = 'percent' } = {}) {
+    const preferencesKey = summaryChartMetricPreferencesKey(formHandle);
+    const saved = Statamic.$preferences.get(preferencesKey, defaultMetric);
+    const metric = ref(['percent', 'count'].includes(saved) ? saved : defaultMetric);
+
+    watch(metric, (value) => {
+        Statamic.$preferences.set(preferencesKey, value);
+    });
+
+    return { metric };
+}
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 4925a7e1b3..dc996317b0 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -9,6 +9,7 @@ import Layout from '@/pages/layout/Layout.vue';
 import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from './Layout.vue';
 import useSummaryChartType from '@/composables/use-summary-chart-type.js';
+import useSummaryChartMetric from '@/composables/use-summary-chart-metric.js';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
 
@@ -220,6 +221,8 @@ const {
     chartType: imageChoiceChart1Type,
     setChartType: setImageChoiceChart1Type,
 } = useSummaryChartType(props.form.handle, 'image-choice-1');
+
+const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
 </script>
 
 <template>
@@ -355,7 +358,27 @@ const {
 
             <template #results>
                 <!-- Example of a Multiple Choice field type (Pie Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                <div data-submission-summary class="@container/widgets widgets flex flex-wrap mt-6 pb-8 gap-y-6 -mx-2 sm:-mx-3">
+                <div data-submission-summary :data-chart-metric="summaryChartMetric" class="mt-2 pb-8">
+                    <div class="flex w-full items-center gap-3 mb-4">
+                        <ToggleGroup v-model="summaryChartMetric" size="xs">
+                            <ToggleItem
+                                value="percent"
+                                label="%"
+                                :aria-label="__('Percentage')"
+                                v-tooltip="__('Percentage')"
+                            />
+                            <ToggleItem
+                                value="count"
+                                icon="layout-list-small"
+                                :aria-label="__('Response count')"
+                                v-tooltip="__('Response count')"
+                            />
+                        </ToggleGroup>
+                        <p class="text-sm text-gray-500 dark:text-gray-500">
+                            {{ __(':count responses', { count: $number.format(248) }) }}
+                        </p>
+                    </div>
+                    <div class="@container/widgets widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
                     <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('Wake me up')"
@@ -373,31 +396,31 @@ const {
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">45%</span>
-                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">30%</span>
-                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">15%</span>
-                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">10%</span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="45%" data-count="112"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="30%" data-count="74"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--3" aria-hidden="true" data-percent="15%" data-count="37"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--4" aria-hidden="true" data-percent="10%" data-count="25"></span>
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
                                 <figcaption :id="pieChart1LegendId" class="pie-chart-legend">
                                     <ol class="pie-chart-legend__list">
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">45%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="45%" data-count="112"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--1" />
                                             <span>Before you Go Go</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">30%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="30%" data-count="74"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--2" />
                                             <span>Bring me Back to Life</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">15%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="15%" data-count="37"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--3" />
                                             <span>When September Ends</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">10%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="10%" data-count="25"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Never</span>
                                         </li>
@@ -437,25 +460,25 @@ const {
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">68%</span>
-                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">18%</span>
-                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">9%</span>
-                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="68%" data-count="169"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="18%" data-count="45"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--3" aria-hidden="true" data-percent="9%" data-count="22"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--4" aria-hidden="true" data-percent="5%" data-count="12"></span>
                                 </div>
                                 <figcaption :id="pieChart2LegendId" class="pie-chart-legend">
                                     <ul class="pie-chart-legend__list">
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">68%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="68%" data-count="169"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--1" />
                                             <span>Alarm, no mercy</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">18%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="18%" data-count="45"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--2" />
                                             <span>Hit snooze</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">9%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="9%" data-count="22"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--3" />
                                             <span>Woken by someone else</span>
                                         </li>
@@ -465,7 +488,7 @@ const {
                                                 class="pie-chart-legend__link"
                                                 @click="selectNextChartPage"
                                             >
-                                                <span class="pie-chart-legend__value">5%</span>
+                                                <span class="chart-metric pie-chart-legend__value" data-percent="5%" data-count="12"></span>
                                                 <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                                 <span>Other</span>
                                             </button>
@@ -481,25 +504,25 @@ const {
                                     :aria-labelledby="pieChart2LegendPage2Id"
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
-                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">68%</span>
-                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">18%</span>
-                                    <span class="pie-chart__label | pie-chart__label--3" aria-hidden="true">9%</span>
-                                    <span class="pie-chart__label | pie-chart__label--4" aria-hidden="true">5%</span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="68%" data-count="169"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="18%" data-count="45"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--3" aria-hidden="true" data-percent="9%" data-count="22"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--4" aria-hidden="true" data-percent="5%" data-count="12"></span>
                                 </div>
                                 <figcaption :id="pieChart2LegendPage2Id" class="pie-chart-legend">
                                     <ul class="pie-chart-legend__list">
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">3%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="3%" data-count="7"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Bohemian Rhapsody</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">1%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="1%" data-count="2"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Stairway to Heaven</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">1%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="1%" data-count="2"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Wonderwall</span>
                                         </li>
@@ -526,7 +549,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-1" />
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -536,7 +559,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-2" />
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">25%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="25%" data-count="62"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -546,7 +569,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-3" />
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="15%" data-count="37"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -556,7 +579,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-4-legend" />
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
                                         </div>
                                     </li>
                                 </ol>
@@ -578,19 +601,19 @@ const {
                             <figure class="grid p-6" :aria-labelledby="horizontalBarChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
                                         <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="35%" data-count="87"></span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
                                         <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
                                         <div class="h-2.5 w-[10%] rounded-full bg-chart-3" />
@@ -620,77 +643,77 @@ const {
                                 <ol class="vertical-bar-chart" style="--max-value: 61;" aria-hidden="true">
                                     <li class="vertical-bar-chart__bar" style="--value: 2;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">2%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="2%" data-count="5"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">0</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 1;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">1%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="1%" data-count="2"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">1</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 3;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">3%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="3%" data-count="7"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">2</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 4;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">4%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="4%" data-count="10"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">3</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 6;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">6%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="6%" data-count="15"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">4</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 8;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">8%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="8%" data-count="20"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">5</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 12;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">12%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="12%" data-count="30"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">6</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 20;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">20%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="20%" data-count="50"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">7</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 35;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">35%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="35%" data-count="87"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">8</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 48;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">48%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="48%" data-count="119"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">9</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 61;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="vertical-bar-chart__value">61%</span>
+                                            <span class="chart-metric vertical-bar-chart__value" data-percent="61%" data-count="151"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">10</span>
@@ -734,14 +757,14 @@ const {
                             >
                                 <ol class="grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/159/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="45%" data-count="112"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/485/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
@@ -764,17 +787,17 @@ const {
                                         <div class="image-pie-chart__slice image-pie-chart__slice--2" style="--image: url('https://picsum.photos/id/485/320/320')" />
                                     </div>
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="image-pie-chart__label image-pie-chart__label--1" aria-hidden="true">55%</span>
-                                    <span class="image-pie-chart__label image-pie-chart__label--2" aria-hidden="true">45%</span>
+                                    <span class="chart-metric image-pie-chart__label image-pie-chart__label--1" aria-hidden="true" data-percent="55%" data-count="136"></span>
+                                    <span class="chart-metric image-pie-chart__label image-pie-chart__label--2" aria-hidden="true" data-percent="45%" data-count="112"></span>
                                 </div>
                                 <figcaption :id="imageChoicePieChart1LegendId" class="image-pie-chart-legend">
                                     <p class="sr-only">Actually (A) 55%, Nope (B) 45%</p>
                                     <ol class="grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-3" aria-hidden="true">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/159/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="45%" data-count="112"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/485/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
@@ -795,25 +818,25 @@ const {
                             <figure class="grid p-6" :aria-labelledby="checkboxesBarChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Radiohead</span>
                                         <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="35%" data-count="87"></span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Death Cab for Cutie</span>
                                         <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="5%" data-count="12"></span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-3-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Olivia Rodrigo</span>
                                         <div class="h-2.5 w-[5%] rounded-full bg-chart-3" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="5%" data-count="12"></span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-4-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">The Cure</span>
                                         <div class="h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
@@ -857,13 +880,13 @@ const {
                             >
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.75 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">55%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
                                         <Icon name="checkmark-circle-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">I’ll get my coat</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">45%</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="45%" data-count="112"></span>
                                         <Icon name="delete-circle-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Coffee might be better</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[45%] rounded-full bg-chart-2" />
@@ -881,19 +904,19 @@ const {
                                     :aria-labelledby="yesNoPieChart1LegendId"
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
-                                    <span class="pie-chart__label | pie-chart__label--1" aria-hidden="true">55%</span>
-                                    <span class="pie-chart__label | pie-chart__label--2" aria-hidden="true">45%</span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="55%" data-count="136"></span>
+                                    <span class="chart-metric pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="45%" data-count="112"></span>
                                 </div>
                                 <figcaption :id="yesNoPieChart1LegendId" class="pie-chart-legend">
                                     <p class="sr-only">{{ __('Do you fancy a pint?: I’ll get my coat 55%, Coffee might be better 45%') }}</p>
                                     <ul class="pie-chart-legend__list" aria-hidden="true">
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">55%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="55%" data-count="136"></span>
                                             <Icon name="checkmark-circle-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
                                             <span>I’ll get my coat</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="pie-chart-legend__value">45%</span>
+                                            <span class="chart-metric pie-chart-legend__value" data-percent="45%" data-count="112"></span>
                                             <Icon name="delete-circle-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
                                             <span>Coffee might be better</span>
                                         </li>
@@ -931,7 +954,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[40%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇯🇵</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">40%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="40%" data-count="99"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -940,7 +963,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[35%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇮🇹</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">35%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="35%" data-count="87"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -949,7 +972,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇺🇸</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -958,7 +981,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[8%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇬🇧</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">8%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="8%" data-count="20"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -967,7 +990,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[3%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇫🇷</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">3%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="3%" data-count="7"></span>
                                         </div>
                                     </li>
                                 </ol>
@@ -983,7 +1006,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[2%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇩🇪</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">2%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="2%" data-count="5"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -992,7 +1015,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[1%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇪🇸</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">1%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="1%" data-count="2"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -1001,7 +1024,7 @@ const {
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[1%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇵🇹</div>
-                                            <span class="min-w-8.5 text-end text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400">1%</span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="1%" data-count="2"></span>
                                         </div>
                                     </li>
                                 </ol>
@@ -1035,27 +1058,27 @@ const {
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">0–9</span>
                                         <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10–19</span>
                                         <div class="h-2.5 w-[15%] rounded-full bg-chart-1" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="15%" data-count="37"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">20–29</span>
                                         <div class="h-2.5 w-[30%] rounded-full bg-chart-1" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">30%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="30%" data-count="74"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">30–39</span>
                                         <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">40–49</span>
                                         <div class="h-2.5 w-[10%] rounded-full bg-chart-1" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="numberBarChart1CaptionId" class="sr-only">
@@ -1095,31 +1118,31 @@ const {
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
                                         <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <div class="h-2.5 w-[15%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">15%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="15%" data-count="37"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-chart-1-legend" />
                                         <div class="h-2.5 w-[30%] rounded-full bg-chart-1-legend" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">30%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="30%" data-count="74"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
                                         <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
                                         <div class="h-2.5 w-[10%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="starRatingChart1CaptionId" class="sr-only">
@@ -1176,31 +1199,31 @@ const {
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
                                         <div class="h-2.5 w-[18%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">18%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="18%" data-count="45"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">9</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
                                         <div class="h-2.5 w-[16%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">16%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="16%" data-count="40"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">8</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
                                         <div class="h-2.5 w-[14%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">14%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="14%" data-count="35"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">7</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
                                         <div class="h-2.5 w-[12%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">12%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="12%" data-count="30"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">6</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <div class="h-2.5 w-[10%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">10%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="starRatingChart2CaptionId" class="sr-only">
@@ -1228,31 +1251,31 @@ const {
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <div class="h-2.5 w-[8%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">8%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="8%" data-count="20"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-chart-1-legend" />
                                         <div class="h-2.5 w-[7%] rounded-full bg-chart-1-legend" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">7%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="7%" data-count="17"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
                                         <div class="h-2.5 w-[6%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">6%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="6%" data-count="15"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
                                         <div class="h-2.5 w-[5%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="5%" data-count="12"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
                                         <div class="h-2.5 w-[4%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="4%" data-count="10"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="starRatingChart2Page2CaptionId" class="sr-only">
@@ -1273,7 +1296,7 @@ const {
                             <figure class="grid p-6 pt-3 ps-4" :aria-labelledby="toggleBarChart1CaptionId">
                                 <div aria-hidden="true" class="pb-5">
                                     <div class="inline-flex items-center gap-2 px-2 -ms-1 py-1.25 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <span class="text-md font-semibold st-text-trim-cap tabular-nums text-gray-950 dark:text-gray-100">20%</span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('of users checked the toggle') }}</span>
+                                        <span class="chart-metric text-md font-semibold st-text-trim-cap tabular-nums text-gray-950 dark:text-gray-100" data-percent="20%" data-count="50"></span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('of users checked the toggle') }}</span>
                                     </div>
                                 </div>
                                 <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 pt-2" aria-hidden="true">
@@ -1282,7 +1305,7 @@ const {
                                         <div class="flex h-2.5 w-full overflow-hidden rounded-full bg-[hsl(from_var(--color-chart-1-legend)_h_s_l/0.15)]">
                                             <div class="h-full w-[20%] shrink-0 rounded-full bg-chart-1-legend" />
                                         </div>
-                                        <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">20%</span>
+                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="toggleBarChart1CaptionId" class="sr-only">
@@ -1291,6 +1314,7 @@ const {
                             </figure>
                         </Widget>
                     </div>
+                    </div>
                 </div>
             </template>
         </FormSubmissionListing>

From 85492a8daf70352d96d58a36c3b5afb12a7819c1 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 14:42:55 +0100
Subject: [PATCH 099/110] Dark pass

---
 resources/css/components/forms/charts.css |   2 +-
 resources/js/pages/forms/Submissions.vue  | 122 +++++++++++-----------
 2 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 306a01f485..29de761341 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -260,7 +260,7 @@
 }
 
 .vertical-bar-chart__scale-label {
-    @apply min-w-8 rounded-md border border-gray-200 shadow-ui-xs px-1.5 py-0.5 text-center text-[0.785rem] font-medium tabular-nums text-gray-700 dark:border-gray-700 dark:text-gray-400;
+    @apply min-w-8 rounded-md border border-gray-200 shadow-ui-xs px-1.5 py-0.5 text-center text-[0.785rem] font-medium tabular-nums text-gray-700 dark:border-gray-700 dark:text-gray-300;
 }
 
 
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index dc996317b0..b7ffd83c6b 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -543,43 +543,43 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure class="grid p-6" :aria-labelledby="lollipopChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50">1</span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Summer</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Summer</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-1" />
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">2</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50">2</span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Autumn</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Autumn</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-2" />
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="25%" data-count="62"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="25%" data-count="62"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">3</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50">3</span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Spring</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Spring</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-3" />
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="15%" data-count="37"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="15%" data-count="37"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
-                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400">4</span>
+                                        <span class="text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50">4</span>
                                         <span class="size-2.5 rounded-xs bg-chart-4-legend" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Winter</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Winter</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-4-legend" />
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="10%" data-count="25"></span>
                                         </div>
                                     </li>
                                 </ol>
@@ -601,21 +601,21 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure class="grid p-6" :aria-labelledby="horizontalBarChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Yep</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Yep</span>
                                         <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="35%" data-count="87"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="35%" data-count="87"></span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Nope</span>
                                         <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="10%" data-count="25"></span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Maybe</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Maybe</span>
                                         <div class="h-2.5 w-[10%] rounded-full bg-chart-3" />
                                     </li>
                                 </ol>
@@ -637,7 +637,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure class="vertical-bar-chart-figure" :aria-labelledby="verticalBarChart1CaptionId">
                                 <div aria-hidden="true">
                                     <div class="inline-flex items-center gap-2 px-2 py-1.25 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">Average</span>
+                                        <span class="text-md font-semibold st-text-trim-cap tabular-nums text-green-600 dark:text-green-400">8.1</span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">Average</span>
                                     </div>
                                 </div>
                                 <ol class="vertical-bar-chart" style="--max-value: 61;" aria-hidden="true">
@@ -757,17 +757,17 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             >
                                 <ol class="grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/159/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Actually</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="45%" data-count="112"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="45%" data-count="112"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/485/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Nope</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[45%] rounded-full bg-chart-2" />
                                     </li>
                                 </ol>
@@ -793,14 +793,14 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                 <figcaption :id="imageChoicePieChart1LegendId" class="image-pie-chart-legend">
                                     <p class="sr-only">Actually (A) 55%, Nope (B) 45%</p>
                                     <ol class="grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-3" aria-hidden="true">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/159/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Actually</span>
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="45%" data-count="112"></span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Actually</span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="45%" data-count="112"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/485/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Nope</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Nope</span>
                                     </ol>
                                 </figcaption>
                             </figure>
@@ -818,27 +818,27 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure class="grid p-6" :aria-labelledby="checkboxesBarChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Radiohead</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Radiohead</span>
                                         <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="35%" data-count="87"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="35%" data-count="87"></span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Death Cab for Cutie</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Death Cab for Cutie</span>
                                         <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="5%" data-count="12"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="5%" data-count="12"></span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-3-legend" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Olivia Rodrigo</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Olivia Rodrigo</span>
                                         <div class="h-2.5 w-[5%] rounded-full bg-chart-3" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="5%" data-count="12"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="5%" data-count="12"></span>
                                         <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-4-legend" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">The Cure</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">The Cure</span>
                                         <div class="h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
                                     </li>
                                 </ol>
@@ -880,15 +880,15 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             >
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.75 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="55%" data-count="136"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         <Icon name="checkmark-circle-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">I’ll get my coat</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">I’ll get my coat</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="45%" data-count="112"></span>
+                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="45%" data-count="112"></span>
                                         <Icon name="delete-circle-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Coffee might be better</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Coffee might be better</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[45%] rounded-full bg-chart-2" />
                                     </li>
                                 </ol>
@@ -950,47 +950,47 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                 <ol class="grid grid-cols-[auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">1</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Japan</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Japan</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[40%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇯🇵</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="40%" data-count="99"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="40%" data-count="99"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">2</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Italy</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Italy</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[35%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇮🇹</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="35%" data-count="87"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="35%" data-count="87"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">3</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">USA</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">USA</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇺🇸</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="10%" data-count="25"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">4</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">UK</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">UK</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[8%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇬🇧</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="8%" data-count="20"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="8%" data-count="20"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">5</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">France</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">France</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[3%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇫🇷</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="3%" data-count="7"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="3%" data-count="7"></span>
                                         </div>
                                     </li>
                                 </ol>
@@ -1002,29 +1002,29 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                 <ol class="grid grid-cols-[auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 [&:not(:has(>_:nth-child(5)))]:pt-3" aria-hidden="true">
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">6</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Germany</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Germany</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[2%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇩🇪</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="2%" data-count="5"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="2%" data-count="5"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">7</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Spain</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Spain</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[1%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇪🇸</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="1%" data-count="2"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="1%" data-count="2"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400">8</span>
-                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-100">Portugal</span>
+                                        <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Portugal</span>
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[1%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇵🇹</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="1%" data-count="2"></span>
+                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="1%" data-count="2"></span>
                                         </div>
                                     </li>
                                 </ol>
@@ -1047,11 +1047,11 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                 <div aria-hidden="true" class="flex gap-2.5 pb-5 -ms-1">
                                     <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
                                         <span class="text-xs font-semibold st-text-trim-cap tabular-nums">4–44</span>
-                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('Min–Max') }}</span>
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">{{ __('Min–Max') }}</span>
                                     </div>
                                     <div class="inline-flex items-center gap-2 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700">
                                         <span class="text-xs font-semibold st-text-trim-cap tabular-nums">26.2</span>
-                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('Average') }}</span>
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">{{ __('Average') }}</span>
                                     </div>
                                 </div>
                                 <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4 text-end" aria-hidden="true">
@@ -1104,7 +1104,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">3/5 Average</span>
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">3/5 Average</span>
                                     </div>
                                 </div>
                                 <!--
@@ -1185,7 +1185,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">7/10 Average</span>
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">7/10 Average</span>
                                     </div>
                                 </div>
                                 <!--
@@ -1243,7 +1243,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
                                         <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">7/10 Average</span>
+                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">7/10 Average</span>
                                     </div>
                                 </div>
                                 <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 text-end" aria-hidden="true">
@@ -1296,7 +1296,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure class="grid p-6 pt-3 ps-4" :aria-labelledby="toggleBarChart1CaptionId">
                                 <div aria-hidden="true" class="pb-5">
                                     <div class="inline-flex items-center gap-2 px-2 -ms-1 py-1.25 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <span class="chart-metric text-md font-semibold st-text-trim-cap tabular-nums text-gray-950 dark:text-gray-100" data-percent="20%" data-count="50"></span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-400">{{ __('of users checked the toggle') }}</span>
+                                        <span class="chart-metric text-md font-semibold st-text-trim-cap tabular-nums text-gray-950 dark:text-gray-50" data-percent="20%" data-count="50"></span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">{{ __('of users checked the toggle') }}</span>
                                     </div>
                                 </div>
                                 <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 pt-2" aria-hidden="true">

From a8986550c21b59d30c5b56418e25fc492afdf042 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 14:46:57 +0100
Subject: [PATCH 100/110] Dark pass

---
 resources/js/pages/forms/Submissions.vue | 30 ++++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index b7ffd83c6b..05e8a37e59 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -1099,11 +1099,11 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure class="grid p-6 pt-3 ps-4" :aria-labelledby="starRatingChart1CaptionId">
                                 <div aria-hidden="true" class="pb-5">
                                     <div class="inline-flex items-center gap-2 px-2 py-1 -ms-1 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
                                         <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">3/5 Average</span>
                                     </div>
                                 </div>
@@ -1175,16 +1175,16 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure v-if="starRatingChart2Page === 1" class="grid p-6 pt-3 ps-4" :aria-labelledby="starRatingChart2CaptionId">
                                 <div aria-hidden="true" class="pb-5">
                                     <div class="inline-flex items-center gap-2 px-2 py-1 -ms-1 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
+                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
                                         <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">7/10 Average</span>
                                     </div>
                                 </div>

From 3c94813311df81b7228893a8e13298bafde1fe75 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 15:33:47 +0100
Subject: [PATCH 101/110] Dark pass

---
 resources/css/components/forms/charts.css |  24 +++
 resources/js/pages/forms/Submissions.vue  | 192 +++++++++++-----------
 src/CP/Color.php                          |   2 +-
 3 files changed, 121 insertions(+), 97 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 29de761341..b8f63c4cde 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -265,6 +265,30 @@
 
 
 
+/* GROUP CHARTS / SUMMARY BAR CHART / ICON STROKES
+=================================================== */
+/* Note: This is used to style the checkbox icons in the summary bar chart depending on the background contrast. */
+.summary-bar-chart__icon-stroke {
+    color: var(--chart-tick-color);
+}
+
+.summary-bar-chart__icon-stroke path:not(:first-child) {
+    stroke: white;
+}
+
+@supports (color: contrast-color(red)) {
+    .dark .summary-bar-chart__icon-stroke path:not(:first-child) {
+        stroke: contrast-color(var(--chart-tick-color));
+    }
+}
+
+.summary-bar-chart__icon-stroke--1 { --chart-tick-color: var(--color-chart-1-legend); }
+.summary-bar-chart__icon-stroke--2 { --chart-tick-color: var(--color-chart-2-legend); }
+.summary-bar-chart__icon-stroke--3 { --chart-tick-color: var(--color-chart-3-legend); }
+.summary-bar-chart__icon-stroke--4 { --chart-tick-color: var(--color-chart-4-legend); }
+
+
+
 /* GROUP CHARTS / DISPLAY MODE (% or count)
 =================================================== */
 .chart-metric::before {
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 05e8a37e59..c3cf6e9672 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -396,31 +396,31 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="45%" data-count="112"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="30%" data-count="74"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--3" aria-hidden="true" data-percent="15%" data-count="37"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--4" aria-hidden="true" data-percent="10%" data-count="25"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="45%" data-count="112"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="30%" data-count="74"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--3" aria-hidden="true" data-percent="15%" data-count="37"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--4" aria-hidden="true" data-percent="10%" data-count="25"></span>
                                 </div>
                                 <!-- Pie Chart 1 Legend -->
                                 <figcaption :id="pieChart1LegendId" class="pie-chart-legend">
                                     <ol class="pie-chart-legend__list">
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="45%" data-count="112"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="45%" data-count="112"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--1" />
                                             <span>Before you Go Go</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="30%" data-count="74"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="30%" data-count="74"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--2" />
                                             <span>Bring me Back to Life</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="15%" data-count="37"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="15%" data-count="37"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--3" />
                                             <span>When September Ends</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="10%" data-count="25"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="10%" data-count="25"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Never</span>
                                         </li>
@@ -460,25 +460,25 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="68%" data-count="169"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="18%" data-count="45"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--3" aria-hidden="true" data-percent="9%" data-count="22"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--4" aria-hidden="true" data-percent="5%" data-count="12"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="68%" data-count="169"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="18%" data-count="45"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--3" aria-hidden="true" data-percent="9%" data-count="22"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--4" aria-hidden="true" data-percent="5%" data-count="12"></span>
                                 </div>
                                 <figcaption :id="pieChart2LegendId" class="pie-chart-legend">
                                     <ul class="pie-chart-legend__list">
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="68%" data-count="169"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="68%" data-count="169"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--1" />
                                             <span>Alarm, no mercy</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="18%" data-count="45"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="18%" data-count="45"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--2" />
                                             <span>Hit snooze</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="9%" data-count="22"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="9%" data-count="22"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--3" />
                                             <span>Woken by someone else</span>
                                         </li>
@@ -488,7 +488,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                                 class="pie-chart-legend__link"
                                                 @click="selectNextChartPage"
                                             >
-                                                <span class="chart-metric pie-chart-legend__value" data-percent="5%" data-count="12"></span>
+                                                <span class="chart-metric | pie-chart-legend__value" data-percent="5%" data-count="12"></span>
                                                 <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                                 <span>Other</span>
                                             </button>
@@ -504,25 +504,25 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                     :aria-labelledby="pieChart2LegendPage2Id"
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="68%" data-count="169"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="18%" data-count="45"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--3" aria-hidden="true" data-percent="9%" data-count="22"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--4" aria-hidden="true" data-percent="5%" data-count="12"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="68%" data-count="169"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="18%" data-count="45"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--3" aria-hidden="true" data-percent="9%" data-count="22"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--4" aria-hidden="true" data-percent="5%" data-count="12"></span>
                                 </div>
                                 <figcaption :id="pieChart2LegendPage2Id" class="pie-chart-legend">
                                     <ul class="pie-chart-legend__list">
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="3%" data-count="7"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="3%" data-count="7"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Bohemian Rhapsody</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="1%" data-count="2"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="1%" data-count="2"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Stairway to Heaven</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="1%" data-count="2"></span>
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="1%" data-count="2"></span>
                                             <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
                                             <span>Wonderwall</span>
                                         </li>
@@ -549,7 +549,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[55%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-1" />
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -559,7 +559,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[25%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-2" />
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="25%" data-count="62"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="25%" data-count="62"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -569,7 +569,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[15%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-3" />
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="15%" data-count="37"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="15%" data-count="37"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -579,7 +579,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="size-2 rounded-full bg-chart-4-legend" />
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="10%" data-count="25"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="10%" data-count="25"></span>
                                         </div>
                                     </li>
                                 </ol>
@@ -601,19 +601,19 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure class="grid p-6" :aria-labelledby="horizontalBarChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         <span class="size-2.5 rounded-xs bg-chart-1" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Yep</span>
                                         <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="35%" data-count="87"></span>
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="35%" data-count="87"></span>
                                         <span class="size-2.5 rounded-xs bg-chart-2" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Nope</span>
                                         <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="10%" data-count="25"></span>
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="10%" data-count="25"></span>
                                         <span class="size-2.5 rounded-xs bg-chart-3" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Maybe</span>
                                         <div class="h-2.5 w-[10%] rounded-full bg-chart-3" />
@@ -643,77 +643,77 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                 <ol class="vertical-bar-chart" style="--max-value: 61;" aria-hidden="true">
                                     <li class="vertical-bar-chart__bar" style="--value: 2;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="2%" data-count="5"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="2%" data-count="5"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">0</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 1;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="1%" data-count="2"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="1%" data-count="2"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">1</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 3;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="3%" data-count="7"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="3%" data-count="7"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">2</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 4;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="4%" data-count="10"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="4%" data-count="10"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">3</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 6;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="6%" data-count="15"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="6%" data-count="15"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">4</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 8;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="8%" data-count="20"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="8%" data-count="20"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">5</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 12;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="12%" data-count="30"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="12%" data-count="30"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">6</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 20;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="20%" data-count="50"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="20%" data-count="50"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">7</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 35;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="35%" data-count="87"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="35%" data-count="87"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">8</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 48;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="48%" data-count="119"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="48%" data-count="119"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">9</span>
                                     </li>
                                     <li class="vertical-bar-chart__bar" style="--value: 61;">
                                         <div class="vertical-bar-chart__plot">
-                                            <span class="chart-metric vertical-bar-chart__value" data-percent="61%" data-count="151"></span>
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="61%" data-count="151"></span>
                                             <div class="vertical-bar-chart__fill" />
                                         </div>
                                         <span class="vertical-bar-chart__scale-label">10</span>
@@ -757,14 +757,14 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             >
                                 <ol class="grid grid-cols-[auto_2.5rem_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/159/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Actually</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="45%" data-count="112"></span>
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="45%" data-count="112"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/485/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Nope</span>
@@ -787,17 +787,17 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="image-pie-chart__slice image-pie-chart__slice--2" style="--image: url('https://picsum.photos/id/485/320/320')" />
                                     </div>
                                     <!-- aria-hidden because the labels are already in the figure caption -->
-                                    <span class="chart-metric image-pie-chart__label image-pie-chart__label--1" aria-hidden="true" data-percent="55%" data-count="136"></span>
-                                    <span class="chart-metric image-pie-chart__label image-pie-chart__label--2" aria-hidden="true" data-percent="45%" data-count="112"></span>
+                                    <span class="chart-metric | image-pie-chart__label image-pie-chart__label--1" aria-hidden="true" data-percent="55%" data-count="136"></span>
+                                    <span class="chart-metric | image-pie-chart__label image-pie-chart__label--2" aria-hidden="true" data-percent="45%" data-count="112"></span>
                                 </div>
                                 <figcaption :id="imageChoicePieChart1LegendId" class="image-pie-chart-legend">
                                     <p class="sr-only">Actually (A) 55%, Nope (B) 45%</p>
                                     <ol class="grid grid-cols-[auto_2.5rem_auto_1fr] items-center justify-items-start list-none m-0 gap-x-2.25 gap-y-2.5 p-0 pt-3" aria-hidden="true">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/159/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">A</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Actually</span>
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="45%" data-count="112"></span>
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="45%" data-count="112"></span>
                                         <img class="size-10 shrink-0 object-cover rounded-full" src="https://picsum.photos/id/485/320/320" alt="" />
                                         <span class="flex size-6 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white text-xs font-bold text-gray-800 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200">B</span>
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Nope</span>
@@ -818,28 +818,28 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure class="grid p-6" :aria-labelledby="checkboxesBarChart1CaptionId">
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.5 p-0 [&:not(:has(>_:nth-child(5)))]:pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
-                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
+                                        <Icon name="checkbox-filled" class="summary-bar-chart__icon-stroke summary-bar-chart__icon-stroke--1 size-3.5 shrink-0" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Radiohead</span>
                                         <div class="h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="35%" data-count="87"></span>
-                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="35%" data-count="87"></span>
+                                        <Icon name="checkbox-filled" class="summary-bar-chart__icon-stroke summary-bar-chart__icon-stroke--2 size-3.5 shrink-0" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Death Cab for Cutie</span>
                                         <div class="h-2.5 w-[35%] rounded-full bg-chart-2" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="5%" data-count="12"></span>
-                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-3-legend" />
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="5%" data-count="12"></span>
+                                        <Icon name="checkbox-filled" class="summary-bar-chart__icon-stroke summary-bar-chart__icon-stroke--3 size-3.5 shrink-0" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Olivia Rodrigo</span>
                                         <div class="h-2.5 w-[5%] rounded-full bg-chart-3" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="5%" data-count="12"></span>
-                                        <Icon name="checkbox-filled" class="size-3.5 shrink-0 text-chart-4-legend" />
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="5%" data-count="12"></span>
+                                        <Icon name="checkbox-filled" class="summary-bar-chart__icon-stroke summary-bar-chart__icon-stroke--4 size-3.5 shrink-0" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">The Cure</span>
-                                        <div class="h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
+                                        <div class="box-content h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
                                     </li>
                                 </ol>
                                 <figcaption :id="checkboxesBarChart1CaptionId" class="sr-only">
@@ -880,14 +880,14 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             >
                                 <ol class="grid grid-cols-[auto_auto_max-content_1fr] items-center list-none m-0 gap-x-2.25 gap-y-2.75 p-0 pt-4" aria-hidden="true">
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
-                                        <Icon name="checkmark-circle-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="55%" data-count="136"></span>
+                                        <Icon name="checkmark-circle-filled" class="summary-bar-chart__icon-stroke summary-bar-chart__icon-stroke--1 size-3.5 shrink-0" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">I’ll get my coat</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[55%] rounded-full bg-chart-1" />
                                     </li>
                                     <li class="contents">
-                                        <span class="chart-metric text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="45%" data-count="112"></span>
-                                        <Icon name="delete-circle-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
+                                        <span class="chart-metric | text-xs text-end font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="45%" data-count="112"></span>
+                                        <Icon name="delete-circle-filled" class="summary-bar-chart__icon-stroke summary-bar-chart__icon-stroke--2 size-3.5 shrink-0" />
                                         <span class="max-w-25 truncate me-2 text-xs text-gray-900 dark:text-gray-50">Coffee might be better</span>
                                         <div class="summary-bar-chart__fill h-2.5 w-[45%] rounded-full bg-chart-2" />
                                     </li>
@@ -904,20 +904,20 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                     :aria-labelledby="yesNoPieChart1LegendId"
                                 >
                                     <div class="pie-chart__disc" aria-hidden="true" />
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="55%" data-count="136"></span>
-                                    <span class="chart-metric pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="45%" data-count="112"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--1" aria-hidden="true" data-percent="55%" data-count="136"></span>
+                                    <span class="chart-metric | pie-chart__label | pie-chart__label--2" aria-hidden="true" data-percent="45%" data-count="112"></span>
                                 </div>
                                 <figcaption :id="yesNoPieChart1LegendId" class="pie-chart-legend">
                                     <p class="sr-only">{{ __('Do you fancy a pint?: I’ll get my coat 55%, Coffee might be better 45%') }}</p>
                                     <ul class="pie-chart-legend__list" aria-hidden="true">
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="55%" data-count="136"></span>
-                                            <Icon name="checkmark-circle-filled" class="size-3.5 shrink-0 text-chart-1-legend" />
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="55%" data-count="136"></span>
+                                            <Icon name="checkmark-circle-filled" class="summary-bar-chart__icon-stroke summary-bar-chart__icon-stroke--1 size-3.5 shrink-0" />
                                             <span>I’ll get my coat</span>
                                         </li>
                                         <li class="pie-chart-legend__item">
-                                            <span class="chart-metric pie-chart-legend__value" data-percent="45%" data-count="112"></span>
-                                            <Icon name="delete-circle-filled" class="size-3.5 shrink-0 text-chart-2-legend" />
+                                            <span class="chart-metric | pie-chart-legend__value" data-percent="45%" data-count="112"></span>
+                                            <Icon name="delete-circle-filled" class="summary-bar-chart__icon-stroke summary-bar-chart__icon-stroke--2 size-3.5 shrink-0" />
                                             <span>Coffee might be better</span>
                                         </li>
                                     </ul>
@@ -954,7 +954,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[40%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇯🇵</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="40%" data-count="99"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="40%" data-count="99"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -963,7 +963,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[35%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇮🇹</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="35%" data-count="87"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="35%" data-count="87"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -972,7 +972,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[10%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇺🇸</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="10%" data-count="25"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="10%" data-count="25"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -981,7 +981,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[8%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇬🇧</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="8%" data-count="20"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="8%" data-count="20"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -990,7 +990,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[3%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇫🇷</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="3%" data-count="7"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="3%" data-count="7"></span>
                                         </div>
                                     </li>
                                 </ol>
@@ -1006,7 +1006,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[2%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇩🇪</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="2%" data-count="5"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="2%" data-count="5"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -1015,7 +1015,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[1%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇪🇸</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="1%" data-count="2"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="1%" data-count="2"></span>
                                         </div>
                                     </li>
                                     <li class="contents">
@@ -1024,7 +1024,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex items-center gap-1">
                                             <div class="h-px w-[1%] bg-gray-200 dark:bg-gray-600" />
                                             <div class="text-lg">🇵🇹</div>
-                                            <span class="chart-metric min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="1%" data-count="2"></span>
+                                            <span class="chart-metric | min-w-8.5 ms-1 text-[0.75rem] font-medium tabular-nums text-gray-700 dark:text-gray-50" data-percent="1%" data-count="2"></span>
                                         </div>
                                     </li>
                                 </ol>
@@ -1058,27 +1058,27 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">0–9</span>
                                         <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10–19</span>
                                         <div class="h-2.5 w-[15%] rounded-full bg-chart-1" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="15%" data-count="37"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="15%" data-count="37"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">20–29</span>
                                         <div class="h-2.5 w-[30%] rounded-full bg-chart-1" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="30%" data-count="74"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="30%" data-count="74"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">30–39</span>
                                         <div class="h-2.5 w-[20%] rounded-full bg-chart-1" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">40–49</span>
                                         <div class="h-2.5 w-[10%] rounded-full bg-chart-1" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="numberBarChart1CaptionId" class="sr-only">
@@ -1118,31 +1118,31 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
                                         <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <div class="h-2.5 w-[15%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="15%" data-count="37"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="15%" data-count="37"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-chart-1-legend" />
                                         <div class="h-2.5 w-[30%] rounded-full bg-chart-1-legend" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="30%" data-count="74"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="30%" data-count="74"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
                                         <div class="h-2.5 w-[20%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
                                         <div class="h-2.5 w-[10%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="starRatingChart1CaptionId" class="sr-only">
@@ -1199,31 +1199,31 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
                                         <div class="h-2.5 w-[18%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="18%" data-count="45"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="18%" data-count="45"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">9</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
                                         <div class="h-2.5 w-[16%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="16%" data-count="40"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="16%" data-count="40"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">8</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
                                         <div class="h-2.5 w-[14%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="14%" data-count="35"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="14%" data-count="35"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">7</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
                                         <div class="h-2.5 w-[12%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="12%" data-count="30"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="12%" data-count="30"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">6</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <div class="h-2.5 w-[10%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="starRatingChart2CaptionId" class="sr-only">
@@ -1251,31 +1251,31 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
                                         <div class="h-2.5 w-[8%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="8%" data-count="20"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="8%" data-count="20"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-chart-1-legend" />
                                         <div class="h-2.5 w-[7%] rounded-full bg-chart-1-legend" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="7%" data-count="17"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="7%" data-count="17"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
                                         <div class="h-2.5 w-[6%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="6%" data-count="15"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="6%" data-count="15"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
                                         <div class="h-2.5 w-[5%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="5%" data-count="12"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="5%" data-count="12"></span>
                                     </li>
                                     <li class="contents">
                                         <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
                                         <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
                                         <div class="h-2.5 w-[4%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="4%" data-count="10"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="4%" data-count="10"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="starRatingChart2Page2CaptionId" class="sr-only">
@@ -1296,7 +1296,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             <figure class="grid p-6 pt-3 ps-4" :aria-labelledby="toggleBarChart1CaptionId">
                                 <div aria-hidden="true" class="pb-5">
                                     <div class="inline-flex items-center gap-2 px-2 -ms-1 py-1.25 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <span class="chart-metric text-md font-semibold st-text-trim-cap tabular-nums text-gray-950 dark:text-gray-50" data-percent="20%" data-count="50"></span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">{{ __('of users checked the toggle') }}</span>
+                                        <span class="chart-metric | text-md font-semibold st-text-trim-cap tabular-nums text-gray-950 dark:text-gray-50" data-percent="20%" data-count="50"></span> <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">{{ __('of users checked the toggle') }}</span>
                                     </div>
                                 </div>
                                 <ol class="grid grid-cols-[auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 pt-2" aria-hidden="true">
@@ -1305,7 +1305,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <div class="flex h-2.5 w-full overflow-hidden rounded-full bg-[hsl(from_var(--color-chart-1-legend)_h_s_l/0.15)]">
                                             <div class="h-full w-[20%] shrink-0 rounded-full bg-chart-1-legend" />
                                         </div>
-                                        <span class="chart-metric text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
+                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="20%" data-count="50"></span>
                                     </li>
                                 </ol>
                                 <figcaption :id="toggleBarChart1CaptionId" class="sr-only">
diff --git a/src/CP/Color.php b/src/CP/Color.php
index ebd144101d..7894c01fc2 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -441,7 +441,7 @@ public static function defaults(bool $dark = false): array
             'chart-3-legend' => self::Lime[500],
             'chart-4-legend' => self::Indigo[300],
             'dark-chart-1-legend' => self::Indigo[600],
-            'dark-chart-2-legend' => self::Indigo[200],
+            'dark-chart-2-legend' => self::Indigo[300],
             'dark-chart-3-legend' => self::Lime[500],
             'dark-chart-4-legend' => self::Zinc[950],
         ])

From 7b8fa1e8ec284171e3d99978090131f27851eb6d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 15:37:08 +0100
Subject: [PATCH 102/110] Dark pass

---
 src/CP/Color.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/CP/Color.php b/src/CP/Color.php
index 7894c01fc2..20dd7ccec2 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -427,7 +427,7 @@ public static function defaults(bool $dark = false): array
             'dark-chart-1' => self::Indigo[600],
             'dark-chart-2' => self::Indigo[200],
             'dark-chart-3' => self::Lime[500],
-            'dark-chart-4' => self::Zinc[950],
+            'dark-chart-4' => self::Orange[500],
             'chart-1-label-bg' => self::Indigo[600],
             'chart-2-label-bg' => self::Transparent,
             'chart-3-label-bg' => self::Lime[600],
@@ -435,7 +435,7 @@ public static function defaults(bool $dark = false): array
             'dark-chart-1-label-bg' => self::Indigo[700],
             'dark-chart-2-label-bg' => self::Indigo[400],
             'dark-chart-3-label-bg' => self::Lime[600],
-            'dark-chart-4-label-bg' => self::Zinc[700],
+            'dark-chart-4-label-bg' => self::Orange[500],
             'chart-1-legend' => self::Indigo[500],
             'chart-2-legend' => self::Zinc[800],
             'chart-3-legend' => self::Lime[500],
@@ -443,7 +443,7 @@ public static function defaults(bool $dark = false): array
             'dark-chart-1-legend' => self::Indigo[600],
             'dark-chart-2-legend' => self::Indigo[300],
             'dark-chart-3-legend' => self::Lime[500],
-            'dark-chart-4-legend' => self::Zinc[950],
+            'dark-chart-4-legend' => self::Orange[500],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From 794715f92a2fa04ca8de06debaecd65beb3e4bb8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 17:13:05 +0100
Subject: [PATCH 103/110] Chart themes

---
 resources/css/components/forms/charts.css |   2 +-
 src/CP/Color.php                          | 108 +++++++++++++++++++++-
 2 files changed, 108 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index b8f63c4cde..692aa76e17 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -87,7 +87,7 @@
     top: calc(50% - var(--label-radius) * cos(var(--angle)));
     transform: translate(-50%, -50%);
 
-    @apply text-xs font-medium tabular-nums text-white pointer-events-none;
+    @apply text-xs font-semibold tabular-nums text-white pointer-events-none;
 }
 
 .pie-chart__label--1 { --angle: var(--angle1); background-color: var(--color-chart-1-label-bg); }
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 20dd7ccec2..1939632ab8 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -420,6 +420,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)',
+
+            // Twilight Meadow chart theme
             'chart-1' => self::Indigo[500],
             'chart-2' => self::Zinc[800],
             'chart-3' => self::Lime[500],
@@ -435,7 +437,7 @@ public static function defaults(bool $dark = false): array
             'dark-chart-1-label-bg' => self::Indigo[700],
             'dark-chart-2-label-bg' => self::Indigo[400],
             'dark-chart-3-label-bg' => self::Lime[600],
-            'dark-chart-4-label-bg' => self::Orange[500],
+            'dark-chart-4-label-bg' => self::Orange[600],
             'chart-1-legend' => self::Indigo[500],
             'chart-2-legend' => self::Zinc[800],
             'chart-3-legend' => self::Lime[500],
@@ -444,6 +446,110 @@ public static function defaults(bool $dark = false): array
             'dark-chart-2-legend' => self::Indigo[300],
             'dark-chart-3-legend' => self::Lime[500],
             'dark-chart-4-legend' => self::Orange[500],
+
+            // Dusk Meadow chart theme
+            // 'chart-1' => self::Indigo[500],
+            // 'chart-2' => self::Zinc[800],
+            // 'chart-3' => self::Lime[500],
+            // 'chart-4' => self::Orange[400],
+            // 'dark-chart-1' => self::Indigo[600],
+            // 'dark-chart-2' => self::Indigo[200],
+            // 'dark-chart-3' => self::Lime[500],
+            // 'dark-chart-4' => self::Orange[500],
+            // 'chart-1-label-bg' => self::Indigo[600],
+            // 'chart-2-label-bg' => self::Transparent,
+            // 'chart-3-label-bg' => self::Lime[600],
+            // 'chart-4-label-bg' => self::Orange[500],
+            // 'dark-chart-1-label-bg' => self::Indigo[700],
+            // 'dark-chart-2-label-bg' => self::Indigo[400],
+            // 'dark-chart-3-label-bg' => self::Lime[600],
+            // 'dark-chart-4-label-bg' => self::Orange[600],
+            // 'chart-1-legend' => self::Indigo[500],
+            // 'chart-2-legend' => self::Zinc[800],
+            // 'chart-3-legend' => self::Lime[500],
+            // 'chart-4-legend' => self::Orange[500],
+            // 'dark-chart-1-legend' => self::Indigo[600],
+            // 'dark-chart-2-legend' => self::Indigo[300],
+            // 'dark-chart-3-legend' => self::Lime[500],
+            // 'dark-chart-4-legend' => self::Orange[500],
+
+            // Kelp Forest chart theme
+            // 'chart-1' => self::Blue[500],
+            // 'chart-2' => self::Zinc[800],
+            // 'chart-3' => self::Lime[500],
+            // 'chart-4' => self::Indigo[200],
+            // 'dark-chart-1' => self::Blue[500],
+            // 'dark-chart-2' => self::Blue[50],
+            // 'dark-chart-3' => self::Lime[500],
+            // 'dark-chart-4' => self::Blue[800],
+            // 'chart-1-label-bg' => self::Blue[600],
+            // 'chart-2-label-bg' => self::Transparent,
+            // 'chart-3-label-bg' => self::Lime[600],
+            // 'chart-4-label-bg' => self::Indigo[400],
+            // 'dark-chart-1-label-bg' => self::Blue[600],
+            // 'dark-chart-2-label-bg' => self::Blue[400],
+            // 'dark-chart-3-label-bg' => self::Lime[600],
+            // 'dark-chart-4-label-bg' => self::Blue[800],
+            // 'chart-1-legend' => self::Blue[500],
+            // 'chart-2-legend' => self::Zinc[800],
+            // 'chart-3-legend' => self::Lime[500],
+            // 'chart-4-legend' => self::Indigo[300],
+            // 'dark-chart-1-legend' => self::Blue[500],
+            // 'dark-chart-2-legend' => self::Blue[50],
+            // 'dark-chart-3-legend' => self::Lime[500],
+            // 'dark-chart-4-legend' => self::Blue[800],
+
+            // Ocean Ridge chart theme
+            // 'chart-1' => self::Blue[500],
+            // 'chart-2' => self::Zinc[800],
+            // 'chart-3' => self::Yellow[500],
+            // 'chart-4' => self::Blue[200],
+            // 'dark-chart-1' => self::Blue[600],
+            // 'dark-chart-2' => self::Blue[100],
+            // 'dark-chart-3' => self::Yellow[500],
+            // 'dark-chart-4' => self::Blue[400],
+            // 'chart-1-label-bg' => self::Blue[600],
+            // 'chart-2-label-bg' => self::Transparent,
+            // 'chart-3-label-bg' => self::Yellow[600],
+            // 'chart-4-label-bg' => self::Blue[400],
+            // 'dark-chart-1-label-bg' => self::Blue[700],
+            // 'dark-chart-2-label-bg' => self::Blue[400],
+            // 'dark-chart-3-label-bg' => self::Yellow[600],
+            // 'dark-chart-4-label-bg' => self::Blue[600],
+            // 'chart-1-legend' => self::Blue[500],
+            // 'chart-2-legend' => self::Zinc[800],
+            // 'chart-3-legend' => self::Yellow[500],
+            // 'chart-4-legend' => self::Blue[300],
+            // 'dark-chart-1-legend' => self::Blue[600],
+            // 'dark-chart-2-legend' => self::Blue[100],
+            // 'dark-chart-3-legend' => self::Yellow[500],
+            // 'dark-chart-4-legend' => self::Blue[400],
+
+            // Volcano chart theme
+            // 'chart-1' => self::Indigo[500],
+            // 'chart-2' => self::Zinc[800],
+            // 'chart-3' => self::Orange[500],
+            // 'chart-4' => self::Indigo[200],
+            // 'dark-chart-1' => self::Indigo[600],
+            // 'dark-chart-2' => self::Zinc[50],
+            // 'dark-chart-3' => self::Orange[500],
+            // 'dark-chart-4' => self::Indigo[300],
+            // 'chart-1-label-bg' => self::Indigo[600],
+            // 'chart-2-label-bg' => self::Transparent,
+            // 'chart-3-label-bg' => self::Orange[600],
+            // 'chart-4-label-bg' => self::Indigo[400],
+            // 'dark-chart-1-label-bg' => self::Indigo[700],
+            // 'dark-chart-2-label-bg' => self::Zinc[700],
+            // 'dark-chart-3-label-bg' => self::Orange[600],
+            // 'dark-chart-4-label-bg' => self::Indigo[500],
+            // 'chart-1-legend' => self::Indigo[500],
+            // 'chart-2-legend' => self::Zinc[800],
+            // 'chart-3-legend' => self::Orange[500],
+            // 'chart-4-legend' => self::Indigo[300],
+            // 'dark-chart-1-legend' => self::Indigo[600],
+            // 'dark-chart-2-legend' => self::Zinc[50],
+            // 'dark-chart-3-legend' => self::Orange[500],
+            // 'dark-chart-4-legend' => self::Indigo[300],
         ])
             ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
             ->all();

From 68587f6db0196866c53e18b77ec4bd2e8b09f76f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 2 Jul 2026 17:22:15 +0100
Subject: [PATCH 104/110] Bring over field numbers control (not working because
 of static mockup)

---
 resources/js/pages/forms/Submissions.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index c3cf6e9672..c1ecac73d4 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -10,6 +10,7 @@ import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from './Layout.vue';
 import useSummaryChartType from '@/composables/use-summary-chart-type.js';
 import useSummaryChartMetric from '@/composables/use-summary-chart-metric.js';
+import FieldNumberingToggle from '@/components/forms/FieldNumberingToggle.vue';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
 
@@ -358,8 +359,9 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
 
             <template #results>
                 <!-- Example of a Multiple Choice field type (Pie Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                <div data-submission-summary :data-chart-metric="summaryChartMetric" class="mt-2 pb-8">
-                    <div class="flex w-full items-center gap-3 mb-4">
+                <div data-submission-summary :data-chart-metric="summaryChartMetric" class="mt-3 pb-8">
+                    <div class="flex w-full items-center gap-2 mb-3">
+                        <FieldNumberingToggle />
                         <ToggleGroup v-model="summaryChartMetric" size="xs">
                             <ToggleItem
                                 value="percent"
@@ -374,7 +376,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                 v-tooltip="__('Response count')"
                             />
                         </ToggleGroup>
-                        <p class="text-sm text-gray-500 dark:text-gray-500">
+                        <p class="ms-1 text-sm text-gray-500 dark:text-gray-500">
                             {{ __(':count responses', { count: $number.format(248) }) }}
                         </p>
                     </div>

From 3b960c790ac02b8f69f62c89a4271b505c38be19 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 3 Jul 2026 09:29:53 +0100
Subject: [PATCH 105/110] Switch to a vertical bar chart for stars when greater
 than 5 star rating

---
 resources/js/pages/forms/Submissions.vue | 179 ++++++++---------------
 1 file changed, 65 insertions(+), 114 deletions(-)

diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index c1ecac73d4..a52d3476b5 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -56,27 +56,8 @@ const dictionaryChart1Page2CaptionId = useId();
 const numberBarChart1CaptionId = useId();
 const starRatingChart1CaptionId = useId();
 const starRatingChart2CaptionId = useId();
-const starRatingChart2Page2CaptionId = useId();
 const toggleBarChart1CaptionId = useId();
 
-const starRatingChart2Page = ref(1);
-const starRatingChart2PerPage = 5;
-const starRatingChart2Total = 10;
-
-const starRatingChart2Meta = computed(() => {
-    const from = (starRatingChart2Page.value - 1) * starRatingChart2PerPage + 1;
-    const to = Math.min(starRatingChart2Page.value * starRatingChart2PerPage, starRatingChart2Total);
-
-    return {
-        current_page: starRatingChart2Page.value,
-        last_page: Math.ceil(starRatingChart2Total / starRatingChart2PerPage),
-        per_page: starRatingChart2PerPage,
-        total: starRatingChart2Total,
-        from,
-        to,
-    };
-});
-
 const dictionaryChartPage = ref(1);
 const dictionaryChartPerPage = 5;
 const dictionaryChartTotal = 8;
@@ -1153,7 +1134,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             </figure>
                         </Widget>
                     </div>
-                    <!-- Example of a Star Rating field type with pagination (Horizontal Star Rating Bar Chart with info). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
+                    <!-- Example of a Star Rating field type greater than 5 stars. It should switch to a vertical bar chart when it's greater than 5 stars). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
                     <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
                         <Widget
                             :title="__('How would you rate the restaurant?')"
@@ -1162,19 +1143,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                             icon="star"
                             icon-class="hidden @xs/widget:block size-4 text-gray-500"
                         >
-                            <template #actions>
-                                <Pagination
-                                    :resource-meta="starRatingChart2Meta"
-                                    :show-totals="false"
-                                    :show-page-links="false"
-                                    :show-per-page-selector="false"
-                                    :scroll-to-top="false"
-                                    @page-selected="starRatingChart2Page = $event"
-                                />
-                            </template>
-                            <p v-if="starRatingChart2Page === 1" class="sr-only" aria-live="polite">How would you rate the restaurant?: 7/10 average. Rating distribution: 10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%</p>
-                            <p v-else class="sr-only" aria-live="polite">How would you rate the restaurant?: 7/10 average. Rating distribution: 5 stars 8%, 4 stars 7%, 3 stars 6%, 2 stars 5%, 1 star 4%</p>
-                            <figure v-if="starRatingChart2Page === 1" class="grid p-6 pt-3 ps-4" :aria-labelledby="starRatingChart2CaptionId">
+                            <figure class="vertical-bar-chart-figure" :aria-labelledby="starRatingChart2CaptionId">
                                 <div aria-hidden="true" class="pb-5">
                                     <div class="inline-flex items-center gap-2 px-2 py-1 -ms-1 rounded-md border border-gray-200 dark:border-gray-700">
                                         <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950 dark:text-gray-300" />
@@ -1190,98 +1159,80 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                                         <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">7/10 Average</span>
                                     </div>
                                 </div>
-                                <!--
-                                    Star row colors use oklch relative lightness from --color-chart-1-legend:
-                                    - Midpoint star uses chart-1-legend (3/5 in the hotel demo; 4/10 in the restaurant demo).
-                                    - 5 stars or fewer: darker stars use l*0.9, l*0.8 (−0.1 per step); lighter stars use l*1.2, l*1.4 (+0.2 per step).
-                                    - 6 stars or more: darker stars use −0.05 per step (e.g. l*0.9, l*0.85, l*0.8, l*0.75, l*0.7); lighter stars use l*1.1, l*1.2, l*1.4 (+0.1, then +0.2).
-                                 -->
-                                <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 text-end" aria-hidden="true">
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">10</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
-                                        <div class="h-2.5 w-[18%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.7)_c_h)]" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="18%" data-count="45"></span>
+                                <ol class="vertical-bar-chart" aria-hidden="true">
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="4%" data-count="10"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 22%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">1</span>
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">9</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
-                                        <div class="h-2.5 w-[16%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.75)_c_h)]" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="16%" data-count="40"></span>
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="5%" data-count="12"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 27%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">2</span>
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">8</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
-                                        <div class="h-2.5 w-[14%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.8)_c_h)]" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="14%" data-count="35"></span>
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="6%" data-count="15"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 33%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">3</span>
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">7</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
-                                        <div class="h-2.5 w-[12%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.85)_c_h)]" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="12%" data-count="30"></span>
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="7%" data-count="17"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 38%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">4</span>
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">6</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <div class="h-2.5 w-[10%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="10%" data-count="25"></span>
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="8%" data-count="20"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 44%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">5</span>
                                     </li>
-                                </ol>
-                                <figcaption :id="starRatingChart2CaptionId" class="sr-only">
-                                    {{ __('How would you rate the restaurant?: 7/10 average. Rating distribution: 10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%') }}
-                                </figcaption>
-                            </figure>
-                            <figure v-else-if="starRatingChart2Page === 2" class="grid p-6 pt-3 ps-4" :aria-labelledby="starRatingChart2Page2CaptionId">
-                                <div aria-hidden="true" class="pb-5">
-                                    <div class="inline-flex items-center gap-2 px-2 py-1 -ms-1 rounded-md border border-gray-200 dark:border-gray-700">
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <Icon name="star" class="size-3.5 shrink-0 text-gray-950" />
-                                        <span class="text-[0.75rem] text-gray-500 dark:text-gray-300">7/10 Average</span>
-                                    </div>
-                                </div>
-                                <ol class="grid grid-cols-[auto_auto_1fr_max-content] items-center list-none m-0 gap-x-3 gap-y-1 p-0 text-end" aria-hidden="true">
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">5</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <div class="h-2.5 w-[8%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*0.9)_c_h)]" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="8%" data-count="20"></span>
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="10%" data-count="25"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 56%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">6</span>
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">4</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-chart-1-legend" />
-                                        <div class="h-2.5 w-[7%] rounded-full bg-chart-1-legend" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="7%" data-count="17"></span>
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="12%" data-count="30"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 67%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">7</span>
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">3</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
-                                        <div class="h-2.5 w-[6%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.1)_c_h)]" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="6%" data-count="15"></span>
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="14%" data-count="35"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 78%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">8</span>
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">2</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
-                                        <div class="h-2.5 w-[5%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.2)_c_h)]" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="5%" data-count="12"></span>
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="16%" data-count="40"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 89%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">9</span>
                                     </li>
-                                    <li class="contents">
-                                        <span class="text-xs tabular-nums text-gray-700 dark:text-gray-400">1</span>
-                                        <Icon name="star-filled" class="size-3.5 shrink-0 -ms-0.75 text-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
-                                        <div class="h-2.5 w-[4%] rounded-full bg-[oklch(from_var(--color-chart-1-legend)_calc(l*1.4)_c_h)]" />
-                                        <span class="chart-metric | text-xs font-medium tabular-nums text-gray-700 dark:text-gray-400" data-percent="4%" data-count="10"></span>
+                                    <li class="vertical-bar-chart__bar">
+                                        <div class="vertical-bar-chart__plot">
+                                            <span class="chart-metric | vertical-bar-chart__value" data-percent="18%" data-count="45"></span>
+                                            <div class="vertical-bar-chart__fill" style="flex: 0 0 100%;" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">10</span>
                                     </li>
                                 </ol>
-                                <figcaption :id="starRatingChart2Page2CaptionId" class="sr-only">
-                                    {{ __('How would you rate the restaurant?: 7/10 average. Rating distribution: 5 stars 8%, 4 stars 7%, 3 stars 6%, 2 stars 5%, 1 star 4%') }}
+                                <figcaption :id="starRatingChart2CaptionId" class="sr-only">
+                                    {{ __('How would you rate the restaurant?: 7/10 average. Rating distribution: 10 stars 18%, 9 stars 16%, 8 stars 14%, 7 stars 12%, 6 stars 10%, 5 stars 8%, 4 stars 7%, 3 stars 6%, 2 stars 5%, 1 star 4%') }}
                                 </figcaption>
                             </figure>
                         </Widget>

From f5b7f123a5a1e2c4e04829ad22e9b655b46c2b23 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 3 Jul 2026 09:42:34 +0100
Subject: [PATCH 106/110] Responsive tweaks

---
 resources/css/components/forms/charts.css |  2 +-
 resources/js/pages/forms/Submissions.vue  | 26 +++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index 692aa76e17..c82fd9708f 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -220,7 +220,7 @@
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
-    gap: 0.5rem;
+    gap: 0.1rem;
     height: 100%;
     list-style: none;
     padding: 0;
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index a52d3476b5..2e703cffa2 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -362,7 +362,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </p>
                     </div>
                     <div class="@container/widgets widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('Wake me up')"
                             title-tag="h2"
@@ -415,7 +415,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                     <!-- Example of a Multiple Choice field type (Pie Chart) with Pagination. The idea here is when there are _more_ than four response options, we can paginate the chart. In such a case, the fourth option shows as "Other", and the second widget shows the "other" segment broken down into the remaining response options.
 
                     We should dynamically generate the ids to be unique here, so that everything remains accessible.-->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('Pie chart pagination demo')"
                             title-tag="h2"
@@ -515,7 +515,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of a Ranking field type (Horizontal Lollipop Chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('Rank your favourite seasons')"
                             title-tag="h2"
@@ -573,7 +573,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of a Dropdown field type (Horizontal Bar Chart Widget). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('Have you seen us live before?')"
                             title-tag="h2"
@@ -609,7 +609,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of an Opinion Scale field type (Vertical Bar Chart Widget). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('How likely are you to recommend us?')"
                             title-tag="h2"
@@ -709,7 +709,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of an Image Choice field type with a chart type chooser. We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('What is your spirit animal?')"
                             title-tag="h2"
@@ -790,7 +790,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of a Checkboxes field type (Horizontal Bar Chart with checkbox icons). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('Who have you seen live?')"
                             title-tag="h2"
@@ -832,7 +832,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of a yes/no field type with a chart type chooser. We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('Do you fancy a pint?')"
                             title-tag="h2"
@@ -909,7 +909,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of a Dictionary field type (Horizontal Lollipop Chart with icons) with Pagination. We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('What’s your favourite country?')"
                             title-tag="h2"
@@ -1018,7 +1018,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of a Number field type (Horizontal Bar Chart with info). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('How old are you?')"
                             title-tag="h2"
@@ -1071,7 +1071,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of a Star Rating field type (Horizontal Star Rating Bar Chart with info). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('How would you rate the hotel?')"
                             title-tag="h2"
@@ -1135,7 +1135,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of a Star Rating field type greater than 5 stars. It should switch to a vertical bar chart when it's greater than 5 stars). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('How would you rate the restaurant?')"
                             title-tag="h2"
@@ -1238,7 +1238,7 @@ const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
                         </Widget>
                     </div>
                     <!-- Example of a Toggle field type (Single fillable bar chart). We should dynamically generate the ids to be unique here, so that everything remains accessible. -->
-                    <div class="starting-style-transition w-full min-h-61 @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3 px-3">
+                    <div class="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
                         <Widget
                             :title="__('Sign up to our newsletter')"
                             title-tag="h2"

From a1e58dbcf32a5f4e347ae07b795f515d7e19f219 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 3 Jul 2026 09:55:50 +0100
Subject: [PATCH 107/110] Create a hook for classes inside a button

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

diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 65e17d859b..104f2b6e11 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -35,6 +35,8 @@ const props = defineProps({
     type: { type: String, default: 'button' },
     /** Controls the appearance of the button. Options: `default`, `primary`, `danger`, `filled`, `ghost`, `ghost-pressed`, `subtle`, `pressed` */
     variant: { type: String, default: 'default' },
+    /** Additional classes for the inner content wrapper around the default slot or text */
+    contentClass: { type: String, default: null },
 });
 
 const attrs = useAttrs();
@@ -115,6 +117,12 @@ const buttonClasses = computed(() => {
     return twMerge(classes, attrs.class);
 });
 
+const contentClasses = computed(() => twMerge(
+    'flex content-center items-center',
+    props.size !== 'xs' && props.size !== 'sm' ? 'st-text-trim-start' : null,
+    props.contentClass,
+));
+
 const restAttrs = computed(() => {
     const { class: _, ...rest } = attrs;
     return rest;
@@ -135,7 +143,7 @@ const restAttrs = computed(() => {
         <Icon v-if="icon" :name="icon" />
         <Icon v-if="loading" name="loading" :size />
 
-        <div :class="{ 'st-text-trim-start': size !== 'xs' && size !== 'sm' }" class="flex content-center items-center">
+        <div :class="contentClasses">
             <slot v-if="hasDefaultSlot" />
             <template v-else>{{ text }}</template>
         </div>

From 84672b1d2585ee7c6dd926e3f962112158098281 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 3 Jul 2026 09:56:06 +0100
Subject: [PATCH 108/110] Hide the filter text with an sr class for mobile

---
 .../js/components/ui/Listing/Filters.vue      | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 366e1b3188..d80404a125 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -132,17 +132,23 @@ function handleStackClosed() {
 
 <template>
     <div class="flex flex-1 items-center gap-2 sm:gap-3 overflow-x-auto ps-[1px] -ms-[1px] py-3 st-mask-horizontal-overflow">
-        <div ref="filtersButtonWrapperRef" class="sticky left-0 rounded-r-lg mask-bg mask-bg--left mask-bg--left-small">
-            <Button icon="sliders-horizontal" class="[&_svg]:size-3.5" :disabled="reorderable" @click="open = true">
+        <div ref="filtersButtonWrapperRef" class="relative sticky left-0 rounded-r-lg mask-bg mask-bg--left mask-bg--left-small">
+            <Button
+                icon="sliders-horizontal"
+                class="[&_svg]:size-3.5"
+                content-class="max-[650px]:sr-only"
+                :disabled="reorderable"
+                @click="open = true"
+            >
                 {{ __('Filters') }}
-                <Badge
-                    v-if="activeFilterBadgeCount"
-                    :text="activeFilterBadgeCount"
-                    size="sm"
-                    pill
-                    class="absolute -top-1.25 -right-2.75"
-                />
             </Button>
+            <Badge
+                v-if="activeFilterBadgeCount"
+                :text="activeFilterBadgeCount"
+                size="sm"
+                pill
+                class="absolute -top-1.25 -right-2.75"
+            />
         </div>
 
         <Stack

From b204ef8c511dda09cb027bceab4516633d3a481d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 3 Jul 2026 10:00:21 +0100
Subject: [PATCH 109/110] Add flex-wrap to filter layout so that it doesn't
 cause overflow on mobile

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

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 9767942f87..4fbe49b642 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -734,7 +734,7 @@ autoApplyState();
         </slot>
         <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
             <Presets v-if="showPresets" />
-            <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition">
+            <div v-if="allowSearch || hasFilters || allowCustomizingColumns || $slots['toolbar-actions']" class="flex flex-wrap items-center gap-2 sm:gap-3 min-h-16 starting-style-transition">
                 <div class="flex flex-1 items-center gap-2 sm:gap-3 min-w-0">
                     <Search v-if="allowSearch" />
                     <Filters v-if="hasFilters" />

From 23424fa06da93ba035c6f40f7fadeaa4b9d4a195 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 3 Jul 2026 10:03:07 +0100
Subject: [PATCH 110/110] Consistent spacing

---
 resources/css/components/forms/charts.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
index c82fd9708f..3577635f61 100644
--- a/resources/css/components/forms/charts.css
+++ b/resources/css/components/forms/charts.css
@@ -299,6 +299,8 @@
     content: attr(data-count);
 }
 
+
+
 /* GROUP CHARTS / ANIMATIONS / PIE CHART
 =================================================== */
 @media (prefers-reduced-motion: no-preference) {