From 3fd41fb565be6737d2f4f164d020d8e369272a7f Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 3 Apr 2026 15:08:36 +0700
Subject: [PATCH] fix(catalog): render parameter toggles as labeled pills

---
 .../catalog/CatalogConfigurator.vue           | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/components/catalog/CatalogConfigurator.vue b/app/components/catalog/CatalogConfigurator.vue
index f4126bf..30cb359 100644
--- a/app/components/catalog/CatalogConfigurator.vue
+++ b/app/components/catalog/CatalogConfigurator.vue
@@ -454,17 +454,29 @@ function decrementSelected(group: ProductGroup) {
                 </div>
 
                 <div class="mt-3 flex flex-wrap gap-2">
-                  <input
+                  <label
                     v-for="option in getAllFieldOptions(group, field.key)"
                     :key="`${group.key}-${field.key}-${option}`"
-                    class="btn btn-sm rounded-full border-base-300 bg-base-100 text-sm normal-case checked:btn-neutral"
-                    type="radio"
-                    :name="`${group.key}-${field.key}`"
-                    :aria-label="formatOptionLabel(field.key, option)"
-                    :checked="getGroupState(group)[field.key] === option"
-                    :disabled="!isOptionAvailable(group, field.key, option)"
-                    @change="updateField(group, field.key, option)"
+                    class="btn btn-sm rounded-full border text-sm normal-case shadow-none transition"
+                    :class="[
+                      getGroupState(group)[field.key] === option
+                        ? 'border-neutral bg-neutral text-neutral-content'
+                        : 'border-base-300 bg-base-100 text-base-content hover:border-neutral/30 hover:bg-base-200',
+                      !isOptionAvailable(group, field.key, option)
+                        ? 'pointer-events-none opacity-35'
+                        : 'cursor-pointer',
+                    ]"
                   >
+                    <input
+                      type="radio"
+                      class="sr-only"
+                      :name="`${group.key}-${field.key}`"
+                      :checked="getGroupState(group)[field.key] === option"
+                      :disabled="!isOptionAvailable(group, field.key, option)"
+                      @change="updateField(group, field.key, option)"
+                    >
+                    <span>{{ formatOptionLabel(field.key, option) }}</span>
+                  </label>
                 </div>
               </fieldset>
             </div>