From b7897ad26720f33d2beebb3ac6abcd97b176694a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 23 Oct 2026 15:29:47 +0100
Subject: [PATCH] Optically centre chip text

- Combobox, validation rule and dictionary chips trim to x-height and nudge the text halfway to cap height, so lowercase and Capitalised labels both look centred
- Combobox chips drop their own padding and use the badge's minimum height
- Replaces the st-text-trim-ex-alphabetic utility with st-text-trim-optical
---
 resources/css/core/utilities.css                       | 10 +++++++---
 resources/js/components/field-validation/Builder.vue   |  4 ++--
 .../js/components/fieldtypes/DictionaryFieldtype.vue   |  2 +-
 resources/js/components/ui/Combobox/Combobox.vue       |  9 +--------
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 7f7ceec9d78..94ed25d01ac 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -96,11 +96,15 @@
     /* =Jay. Sometimes this is handy e.g. the text inside the command palette searchbox */
     text-box: cap alphabetic;
 }
-@utility st-text-trim-ex-alphabetic {
-    text-box: ex alphabetic;
+@utility st-text-trim-optical {
+    /* =Jay. Trim to x-height, then nudge the text down so it's centred halfway between x-height and cap height. Lowercase and Capitalised labels both look centred */
+    @supports (text-box: ex alphabetic) {
+        text-box: ex alphabetic;
+        padding-top: calc((1cap - 1ex) / 2);
+    }
 }
 @utility st-text-trim-optical-cap {
-    /* =Jay. Trim to x-height, then nudge the text down so it sits between x-height and cap height, a touch nearer cap height. Lowercase and Capitalised labels both look centred in small, tight boxes like badges */
+    /* =Jay. Like st-text-trim-optical, but a touch nearer cap height, which suits smaller, tighter boxes like badges */
     @supports (text-box: ex alphabetic) {
         text-box: ex alphabetic;
         padding-top: calc((1cap - 1ex) * 3 / 4);
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index faa5472b0b8..1e0584229bb 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -74,8 +74,8 @@
                         :key="rule"
                         class="sortable-item"
                     >
-                        <Badge pill size="lg">
-                            {{ rule }}
+                        <Badge pill size="lg" class="*:st-text-trim-optical">
+                            <span>{{ rule }}</span>
 
                             <button
                                 type="button"
diff --git a/resources/js/components/fieldtypes/DictionaryFieldtype.vue b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
index 12042303aa7..a090128ba21 100644
--- a/resources/js/components/fieldtypes/DictionaryFieldtype.vue
+++ b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
@@ -35,7 +35,7 @@
                         :key="getOptionValue(option)"
                         class="sortable-item cursor-grab active:cursor-grabbing"
                     >
-                        <Badge size="lg" color="white">
+                        <Badge size="lg" color="white" class="[&>*:not(svg)]:st-text-trim-optical">
                             <Icon v-if="option.icon" :name="option.icon" />
                             <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
                             <div v-else>{{ __(getOptionLabel(option)) }}</div>
diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 5f030d19379..4bfde9abfad 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -614,7 +614,7 @@ defineExpose({
                         :key="getOptionValue(option)"
                         class="sortable-item cursor-grab active:cursor-grabbing"
                     >
-                        <Badge pill size="lg" class="[&>*]:st-text-trim-ex-alphabetic">
+                        <Badge pill size="lg" class="[&>*:not(svg)]:st-text-trim-optical">
                             <Icon v-if="option.icon" :name="option.icon" />
                             <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
                             <div v-else>{{ __(getOptionLabel(option)) }}</div>
@@ -639,10 +639,3 @@ defineExpose({
     </div>
 </template>
 
-<style scoped>
-    @supports(text-box: ex alphabetic) {
-        [data-ui-badge] {
-            padding-block: 0.65rem;
-        }
-    }
-</style>