diff --git a/.storybook/theme.css b/.storybook/theme.css
index 36e4eb449ea..6695be3418c 100644
--- a/.storybook/theme.css
+++ b/.storybook/theme.css
@@ -31,6 +31,18 @@ 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);
+    --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;
@@ -45,6 +57,18 @@ 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.511 0.262 276.966);
+        --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.141 0.005 285.823);
+        --theme-color-chart-1-label-bg: oklch(0.457 0.24 277.023);
+        --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.37 0.013 285.805);
+        --theme-color-chart-1-legend: oklch(0.511 0.262 276.966);
+        --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.141 0.005 285.823);
     }
 }
 
diff --git a/resources/css/components/forms/charts.css b/resources/css/components/forms/charts.css
new file mode 100644
index 00000000000..3577635f611
--- /dev/null
+++ b/resources/css/components/forms/charts.css
@@ -0,0 +1,343 @@
+/* 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.25 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%;
+
+    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-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)
+    );
+}
+
+.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-semibold tabular-nums text-white pointer-events-none;
+}
+
+.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-chart-4-label-bg); --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-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 / 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 {
+    --label-radius: 30%;
+
+    position: relative;
+    width: 9rem;
+    aspect-ratio: 1 / 1;
+
+    /* Midpoint angle for each slice (100% = 360deg). */
+    --angle1: calc(var(--1) * 3.6deg / 2);
+    --angle2: calc((var(--1) + var(--2) / 2) * 3.6deg);
+
+    &:hover {
+        .image-pie-chart__label {
+            opacity: unset;
+        }
+    }
+}
+
+.image-pie-chart__disc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    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 {
+    --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: hsl(0 0% 0% / 0.55); }
+.image-pie-chart__label--2 { --angle: var(--angle2); background-color: hsl(0 0% 0% / 0.55); }
+
+
+
+/* GROUP CHARTS / VERTICAL BAR CHART
+=================================================== */
+.vertical-bar-chart-figure {
+    display: grid;
+    height: 100%;
+    @apply py-3 px-3;
+}
+
+.vertical-bar-chart {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 0.1rem;
+    height: 100%;
+    list-style: none;
+    padding: 0;
+}
+
+.vertical-bar-chart__bar {
+    display: grid;
+    flex: 1;
+    grid-template-rows: 1fr auto;
+    align-items: end;
+    justify-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    height: 100%;
+}
+
+.vertical-bar-chart__plot {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+
+.vertical-bar-chart__value {
+    @apply mb-1.5 text-[0.785rem] font-medium 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: 2rem;
+    border-radius: 0.25rem 0.25rem 0 0;
+    background-color: var(--color-chart-1);
+}
+
+.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-300;
+}
+
+
+
+/* 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 {
+    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) {
+    /* 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 bar-chart-reveal {
+        from { transform: scaleX(0); }
+        to { transform: scaleX(1); }
+    }
+
+    .content-card:has([data-submission-summary]) {
+        [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/css/cp.css b/resources/css/cp.css
index cb32123428f..91dd3b5d8da 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/css/ui.css b/resources/css/ui.css
index 16816ecbe18..3594899c94b 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -30,6 +30,18 @@
     --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);
+    --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/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index db3004806d5..109643d533a 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/themes/index.ts b/resources/js/components/themes/index.ts
index 8659dcafa9f..69230413174 100644
--- a/resources/js/components/themes/index.ts
+++ b/resources/js/components/themes/index.ts
@@ -244,6 +244,18 @@ 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: '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 7899532a99b..193bf730885 100644
--- a/resources/js/components/themes/types.ts
+++ b/resources/js/components/themes/types.ts
@@ -16,6 +16,18 @@ 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'
+    | 'chart-1-legend'
+    | 'chart-2-legend'
+    | 'chart-3-legend'
+    | 'chart-4-legend'
     | 'gray-50'
     | 'gray-100'
     | 'gray-150'
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 65e17d859b6..104f2b6e118 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>
diff --git a/resources/js/components/ui/Listing/CustomizeColumns.vue b/resources/js/components/ui/Listing/CustomizeColumns.vue
index 74a17db774f..0137b2ceb5e 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/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 5b6a15edc2a..d80404a125b 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -131,18 +131,24 @@ 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 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 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="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
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 0110f982577..4fbe49b642c 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,
@@ -718,32 +723,37 @@ 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" 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 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" />
                 </div>
-                <CustomizeColumns v-if="allowCustomizingColumns" />
+                <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>
             </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/components/ui/Toggle/Group.vue b/resources/js/components/ui/Toggle/Group.vue
index 2e217ced7e3..7eb62813b56 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-ui-toggle-group-interacted="hasInteracted ? '' : null"
         :model-value="toggleState"
+        @pointerdown="markUserInteraction"
+        @keydown="markUserInteraction"
         @update:model-value="updateModelValue"
     >
         <slot />
diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index f4c9e791ed3..dcaff76f707 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -6,6 +6,8 @@ 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!' },
+    titleTag: { type: String, default: 'span' },
     href: { type: String },
 });
 
@@ -19,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="hidden! size-5 text-gray-500 @xs/widget:block!" />
-                    <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 text-[0.97rem]" 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/composables/use-summary-chart-metric.js b/resources/js/composables/use-summary-chart-metric.js
new file mode 100644
index 00000000000..97038685589
--- /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/composables/use-summary-chart-type.js b/resources/js/composables/use-summary-chart-type.js
new file mode 100644
index 00000000000..84494e99247
--- /dev/null
+++ b/resources/js/composables/use-summary-chart-type.js
@@ -0,0 +1,32 @@
+import { ref, watch } from 'vue';
+
+export function summaryChartTypesPreferencesKey(formHandle) {
+    return `forms.${formHandle}.submissions.summary.chart-types`;
+}
+
+/** 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);
+
+    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;
+    }
+
+    return { chartType, setChartType, types };
+}
diff --git a/resources/js/pages/forms/Submissions.vue b/resources/js/pages/forms/Submissions.vue
index 48c5bde501c..2e703cffa28 100644
--- a/resources/js/pages/forms/Submissions.vue
+++ b/resources/js/pages/forms/Submissions.vue
@@ -1,13 +1,16 @@
 <script setup>
-import { ref, computed } 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 } 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';
 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] });
 
@@ -21,6 +24,14 @@ const props = defineProps([
     'redirectUrl',
 ]);
 
+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);
@@ -29,6 +40,74 @@ const exportModalOpen = ref(false);
 const exportFormat = ref(null);
 const exportScope = ref('all');
 const listingParameters = ref({});
+const pieChart1LegendId = useId();
+const pieChart2LegendId = useId();
+const pieChart2LegendPage2Id = useId();
+const lollipopChart1CaptionId = useId();
+const horizontalBarChart1CaptionId = useId();
+const verticalBarChart1CaptionId = useId();
+const imageChoiceBarChart1CaptionId = useId();
+const imageChoicePieChart1LegendId = useId();
+const checkboxesBarChart1CaptionId = useId();
+const yesNoBarChart1CaptionId = useId();
+const yesNoPieChart1LegendId = useId();
+const dictionaryChart1CaptionId = useId();
+const dictionaryChart1Page2CaptionId = useId();
+const numberBarChart1CaptionId = useId();
+const starRatingChart1CaptionId = useId();
+const starRatingChart2CaptionId = useId();
+const toggleBarChart1CaptionId = useId();
+
+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,
+    };
+});
+
+// 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,
+    };
+});
+
+function selectNextChartPage() {
+    if (wakeMeUpChartPage.value < wakeMeUpChartMeta.value.last_page) {
+        wakeMeUpChartPage.value++;
+    }
+}
+
+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) {
@@ -114,6 +193,18 @@ function exportSubmissions() {
     window.open(url, '_blank');
     exportModalOpen.value = false;
 }
+
+const {
+    chartType: yesNoChart1Type,
+    setChartType: setYesNoChart1Type,
+} = useSummaryChartType(props.form.handle, 'yes-no-1');
+
+const {
+    chartType: imageChoiceChart1Type,
+    setChartType: setImageChoiceChart1Type,
+} = useSummaryChartType(props.form.handle, 'image-choice-1');
+
+const { metric: summaryChartMetric } = useSummaryChartMetric(props.form.handle);
 </script>
 
 <template>
@@ -222,25 +313,976 @@ 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">
+                    <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>
+                <!-- 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-3 pb-8">
+                    <div class="flex w-full items-center gap-2 mb-3">
+                        <FieldNumberingToggle />
+                        <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="ms-1 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 min-[1100px]:w-1/2 px-3">
+                        <Widget
+                            :title="__('Wake me up')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-radio"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <figure class="pie-chart-figure">
+                                <div
+                                    class="pie-chart"
+                                    style="--1: 45; --2: 30; --3: 15; --4: 10;"
+                                    role="img"
+                                    :aria-labelledby="pieChart1LegendId"
+                                >
+                                    <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>
+                                </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>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
+                                            <span>Never</span>
+                                        </li>
+                                    </ol>
+                                </figcaption>
+                            </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.
+
+                    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 min-[1100px]:w-1/2 px-3">
+                        <Widget
+                            :title="__('Pie chart pagination demo')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-radio"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <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>
+                            <p class="sr-only" aria-live="polite">{{ pieChart2AccessibleLabel }}</p>
+                            <figure v-if="wakeMeUpChartPage === 1" class="pie-chart-figure">
+                                <div
+                                    class="pie-chart"
+                                    style="--1: 68; --2: 18; --3: 9; --4: 5;"
+                                    role="img"
+                                    :aria-labelledby="pieChart2LegendId"
+                                >
+                                    <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>
+                                </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>
+                                            <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>
+                                            <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>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--3" />
+                                            <span>Woken by someone else</span>
+                                        </li>
+                                        <li class="pie-chart-legend__item">
+                                            <button
+                                                type="button"
+                                                class="pie-chart-legend__link"
+                                                @click="selectNextChartPage"
+                                            >
+                                                <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>
+                                        </li>
+                                    </ul>
+                                </figcaption>
+                            </figure>
+                            <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;"
+                                    role="img"
+                                    :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>
+                                </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>
+                                            <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>
+                                            <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>
+                                            <div class="pie-chart-legend__swatch pie-chart-legend__swatch--4" />
+                                            <span>Wonderwall</span>
+                                        </li>
+                                    </ul>
+                                </figcaption>
+                            </figure>
+                        </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 min-[1100px]:w-1/2 px-3">
+                        <Widget
+                            :title="__('Rank your favourite seasons')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="rank"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <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-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-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-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-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-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-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-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-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-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-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-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-50" data-percent="10%" data-count="25"></span>
+                                        </div>
+                                    </li>
+                                </ol>
+                                <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). 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 min-[1100px]:w-1/2 px-3">
+                        <Widget
+                            :title="__('Have you seen us live before?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-select"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <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="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="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="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" />
+                                    </li>
+                                </ol>
+                                <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). 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 min-[1100px]:w-1/2 px-3">
+                        <Widget
+                            :title="__('How likely are you to recommend us?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="scale-up"
+                            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 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-300">Average</span>
+                                    </div>
+                                </div>
+                                <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>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <div class="vertical-bar-chart__fill" />
+                                        </div>
+                                        <span class="vertical-bar-chart__scale-label">10</span>
+                                    </li>
+                                </ol>
+                                <figcaption :id="verticalBarChart1CaptionId" class="sr-only">
+                                    {{ __('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>
+                    </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 min-[1100px]:w-1/2 px-3">
+                        <Widget
+                            :title="__('What is your spirit animal?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="image-select"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <template #actions>
+                                <ToggleGroup :model-value="imageChoiceChart1Type" @update:model-value="setImageChoiceChart1Type" 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="grid p-6"
+                                :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 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>
+                                        <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>
+                                        <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>
+                                        <div class="summary-bar-chart__fill h-2.5 w-[45%] rounded-full bg-chart-2" />
+                                    </li>
+                                </ol>
+                                <figcaption :id="imageChoiceBarChart1CaptionId" class="sr-only">
+                                    {{ __('What is your spirit animal?: Actually 55%, Nope 45%') }}
+                                </figcaption>
+                            </figure>
+                            <figure v-else class="image-pie-chart-figure">
+                                <div
+                                    class="image-pie-chart"
+                                    style="--1: 55; --2: 45;"
+                                    role="img"
+                                    :aria-labelledby="imageChoicePieChart1LegendId"
+                                >
+                                    <div class="image-pie-chart__disc" aria-hidden="true">
+                                        <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 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>
+                                        <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>
+                                        <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>
+                                    </ol>
+                                </figcaption>
+                            </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="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"
+                            class="h-full"
+                            icon="fieldtype-checkboxes"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <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="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="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="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="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="box-content h-2.5 w-[5%] rounded-full bg-chart-4-legend" />
+                                    </li>
+                                </ol>
+                                <figcaption :id="checkboxesBarChart1CaptionId" class="sr-only">
+                                    {{ __('Who have you seen live?: Radiohead 55%, Death Cab for Cutie 35%, Olivia Rodrigo 5%, The Cure 5%') }}
+                                </figcaption>
+                            </figure>
+                        </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 min-[1100px]:w-1/2 px-3">
+                        <Widget
+                            :title="__('Do you fancy a pint?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="checkmark-circle"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <template #actions>
+                                <ToggleGroup :model-value="yesNoChart1Type" @update:model-value="setYesNoChart1Type" 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="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.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="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="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>
+                                </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>
+                            <figure v-else class="pie-chart-figure">
+                                <div
+                                    class="pie-chart"
+                                    style="--1: 55; --2: 45; --3: 0; --4: 0;"
+                                    role="img"
+                                    :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>
+                                </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="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="summary-bar-chart__icon-stroke summary-bar-chart__icon-stroke--2 size-3.5 shrink-0" />
+                                            <span>Coffee might be better</span>
+                                        </li>
+                                    </ul>
+                                </figcaption>
+                            </figure>
+                        </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 min-[1100px]:w-1/2 px-3">
+                        <Widget
+                            :title="__('What’s your favourite country?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="fieldtype-dictionary"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <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 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 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-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-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-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-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-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-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-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-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-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-50" data-percent="3%" data-count="7"></span>
+                                        </div>
+                                    </li>
+                                </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="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 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-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-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-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-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-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-50" data-percent="1%" data-count="2"></span>
+                                        </div>
+                                    </li>
+                                </ol>
+                                <figcaption :id="dictionaryChart1Page2CaptionId" class="sr-only">
+                                    {{ __('What’s your favourite country?: Germany 2%, Spain 1%, Portugal 1%') }}
+                                </figcaption>
+                            </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="starting-style-transition w-full min-h-61 min-[1100px]:w-1/2 px-3">
+                        <Widget
+                            :title="__('How old are you?')"
+                            title-tag="h2"
+                            class="h-full"
+                            icon="number"
+                            icon-class="hidden @xs/widget:block size-4 text-gray-500"
+                        >
+                            <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-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-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">
+                                    <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>
+                                    </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>
+                                    </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>
+                                    </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>
+                                    </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>
+                                    </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>
+                    <!-- 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 min-[1100px]:w-1/2 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-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 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>
+                                <!--
+                                    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">
+                                        <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>
+                                    </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>
+                                    </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>
+                                    </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>
+                                    </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>
+                                    </li>
+                                </ol>
+                                <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>
+                    </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 min-[1100px]:w-1/2 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"
+                        >
+                            <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" />
+                                        <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>
+                                <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="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="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="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="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>
+                                    <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="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="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="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="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="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>
+                    </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 min-[1100px]:w-1/2 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-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>
+                                    </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">
+                                    <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)]">
+                                            <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>
+                                    </li>
+                                </ol>
+                                <figcaption :id="toggleBarChart1CaptionId" class="sr-only">
+                                    {{ __('Sign up to our newsletter: 20% of users checked the toggle.') }}
+                                </figcaption>
+                            </figure>
+                        </Widget>
+                    </div>
+                    </div>
+                </div>
+            </template>
+        </FormSubmissionListing>
 
         <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" />
diff --git a/resources/svg/icons/chart-increase.svg b/resources/svg/icons/chart-increase.svg
new file mode 100644
index 00000000000..670276fdd78
--- /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
diff --git a/resources/svg/icons/charts-bar-horizontal.svg b/resources/svg/icons/charts-bar-horizontal.svg
new file mode 100644
index 00000000000..0e65b31c38e
--- /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
diff --git a/resources/svg/icons/checkbox-filled.svg b/resources/svg/icons/checkbox-filled.svg
new file mode 100644
index 00000000000..041e6573a49
--- /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>
diff --git a/resources/svg/icons/star-filled.svg b/resources/svg/icons/star-filled.svg
new file mode 100644
index 00000000000..d30668937bd
--- /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>
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 1fa4fbaa1d1..1939632ab8a 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -420,6 +420,136 @@ 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],
+            '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::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::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::Orange[600],
+            '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-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],
+
+            // 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();