fix(ui): improve ReactSelect clear indicator positioning and sizing (#16440)

## Summary

Refines ReactSelect clear indicator positioning and sizing to align with
the design system. Uses token-based spacing and adds dynamic padding via
`:has()` when clear indicator is present.

Adds Select field test variants (disabled, read-only, hasMany) for
visual testing.

Author: JarrodMFlesch

packages/ui/src/elements/ReactSelect/ClearIndicator/index.css

@@ -18,7 +18,7 @@
   }
 
   .clear-indicator__icon {
-    width: 1rem;
-    height: 1rem;
+    width: var(--spacer-3);
+    height: var(--spacer-3);
   }
 }

packages/ui/src/elements/ReactSelect/index.css

@@ -28,6 +28,10 @@
       flex-wrap: wrap;
       gap: var(--spacer-1);
 
+      &:has(.clear-indicator) {
+        padding-inline-end: calc(var(--spacer-4) * 2);
+      }
+
       &:hover:not(:focus-within) {
         border-color: var(--border-default);
       }
@@ -59,11 +63,11 @@
 
     .rs__indicators {
       position: absolute;
-      right: 0;
-      top: calc((var(--spacer-5) - 1rem - 2px) / 2);
+      right: var(--spacer-1);
+      top: 0;
+      height: 100%;
       display: flex;
       align-items: center;
-      padding-right: var(--spacer-2);
     }
 
     .rs__input-container {

test/v4/collections/Select/index.ts

@@ -32,6 +32,104 @@ const SelectFields: CollectionConfig = {
         { label: 'Archived', value: 'archived' },
       ],
     },
+    {
+      name: 'statusDisabled',
+      type: 'select',
+      label: 'Status (Disabled)',
+      defaultValue: 'draft',
+      admin: {
+        disabled: true,
+        description: 'This field is disabled',
+      },
+      options: [
+        { label: 'Draft', value: 'draft' },
+        { label: 'Published', value: 'published' },
+        { label: 'Archived', value: 'archived' },
+      ],
+    },
+    {
+      name: 'statusReadOnly',
+      type: 'select',
+      label: 'Status (Read Only)',
+      defaultValue: 'published',
+      admin: {
+        readOnly: true,
+        description: 'This field is read-only',
+      },
+      options: [
+        { label: 'Draft', value: 'draft' },
+        { label: 'Published', value: 'published' },
+        { label: 'Archived', value: 'archived' },
+      ],
+    },
+    {
+      name: 'tags',
+      type: 'select',
+      label: 'Tags',
+      hasMany: true,
+      admin: {
+        description: 'Select multiple tags',
+      },
+      options: [
+        { label: 'Technology', value: 'technology' },
+        { label: 'Design', value: 'design' },
+        { label: 'Marketing', value: 'marketing' },
+        { label: 'Engineering', value: 'engineering' },
+        { label: 'Product', value: 'product' },
+      ],
+    },
+    {
+      name: 'tagsRequired',
+      type: 'select',
+      label: 'Tags (Required)',
+      hasMany: true,
+      required: true,
+      admin: {
+        description: 'At least one tag is required',
+      },
+      options: [
+        { label: 'Technology', value: 'technology' },
+        { label: 'Design', value: 'design' },
+        { label: 'Marketing', value: 'marketing' },
+        { label: 'Engineering', value: 'engineering' },
+        { label: 'Product', value: 'product' },
+      ],
+    },
+    {
+      name: 'tagsReadOnly',
+      type: 'select',
+      label: 'Tags (Read Only)',
+      hasMany: true,
+      defaultValue: ['technology', 'design'],
+      admin: {
+        readOnly: true,
+        description: 'These tags cannot be changed',
+      },
+      options: [
+        { label: 'Technology', value: 'technology' },
+        { label: 'Design', value: 'design' },
+        { label: 'Marketing', value: 'marketing' },
+        { label: 'Engineering', value: 'engineering' },
+        { label: 'Product', value: 'product' },
+      ],
+    },
+    {
+      name: 'tagsWithManyValues',
+      type: 'select',
+      label: 'Tags (Many Values)',
+      hasMany: true,
+      defaultValue: ['technology', 'design', 'marketing', 'engineering', 'product'],
+      admin: {
+        description: 'Has many values to test wrapping',
+      },
+      options: [
+        { label: 'Technology', value: 'technology' },
+        { label: 'Design', value: 'design' },
+        { label: 'Marketing', value: 'marketing' },
+        { label: 'Engineering', value: 'engineering' },
+        { label: 'Product', value: 'product' },
+      ],
+    },
   ],
 }