From f6cd998287bc8139e452f5b3ae26fc283754bad6 Mon Sep 17 00:00:00 2001
From: Jeton Korenica <jetonkorenica@gmail.com>
Date: Mon, 13 Jul 2026 17:59:25 +0200
Subject: [PATCH] style: align demo radius/opacity with COSS design system

Sweep the demo components (not the ui/ primitives) to match COSS tokens:
- disabled:opacity-50 / data-disabled:opacity-50 -> opacity-64
- select menu-item rounded-md -> rounded-sm

82 opacity + 17 radius occurrences across 49 demo files.
---
 src/components/checkboxes/Checkbox18.vue |  2 +-
 src/components/dialogs/Dialog09.vue      |  2 +-
 src/components/dialogs/Dialog11.vue      |  2 +-
 src/components/dialogs/Dialog16.vue      |  2 +-
 src/components/dialogs/Dialog17.vue      |  2 +-
 src/components/dialogs/Dialog19.vue      |  2 +-
 src/components/inputs/Input09.vue        |  2 +-
 src/components/inputs/Input10.vue        |  2 +-
 src/components/inputs/Input11.vue        |  2 +-
 src/components/inputs/Input12.vue        |  2 +-
 src/components/inputs/Input13.vue        |  4 ++--
 src/components/inputs/Input17.vue        |  4 ++--
 src/components/inputs/Input18.vue        |  4 ++--
 src/components/inputs/Input19.vue        |  2 +-
 src/components/inputs/Input20.vue        |  2 +-
 src/components/inputs/Input21.vue        |  2 +-
 src/components/inputs/Input22.vue        |  2 +-
 src/components/inputs/Input23.vue        |  2 +-
 src/components/inputs/Input24.vue        |  2 +-
 src/components/inputs/Input26.vue        |  4 ++--
 src/components/inputs/Input27.vue        |  4 ++--
 src/components/inputs/Input28.vue        |  4 ++--
 src/components/inputs/Input29.vue        |  4 ++--
 src/components/inputs/Input31.vue        |  2 +-
 src/components/inputs/Input33.vue        |  2 +-
 src/components/inputs/Input34.vue        |  2 +-
 src/components/inputs/Input36.vue        |  4 ++--
 src/components/inputs/Input40.vue        |  4 ++--
 src/components/inputs/Input41.vue        |  4 ++--
 src/components/inputs/Input42.vue        |  6 +++---
 src/components/inputs/Input45.vue        |  2 +-
 src/components/inputs/Input46.vue        |  4 ++--
 src/components/inputs/Input47.vue        |  2 +-
 src/components/inputs/Input50.vue        |  2 +-
 src/components/inputs/Input51.vue        |  2 +-
 src/components/inputs/Input56.vue        |  6 +++---
 src/components/inputs/Input57.vue        |  8 ++++----
 src/components/radios/Radio13.vue        |  2 +-
 src/components/radios/Radio16.vue        |  2 +-
 src/components/radios/Radio17.vue        |  2 +-
 src/components/radios/Radio18.vue        |  2 +-
 src/components/selects/Select28.vue      |  2 +-
 src/components/selects/Select29.vue      |  2 +-
 src/components/selects/Select49.vue      |  8 ++++----
 src/components/selects/Select50.vue      |  8 ++++----
 src/components/selects/Select51.vue      | 18 +++++++++---------
 src/components/sliders/Slider26.vue      |  4 ++--
 src/components/textareas/Textarea13.vue  |  2 +-
 src/components/textareas/Textarea15.vue  |  2 +-
 49 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/src/components/checkboxes/Checkbox18.vue b/src/components/checkboxes/Checkbox18.vue
index 0e51ea4..0e0b9ba 100644
--- a/src/components/checkboxes/Checkbox18.vue
+++ b/src/components/checkboxes/Checkbox18.vue
@@ -20,7 +20,7 @@ const items = ref([
       <label
         v-for="item in items"
         :key="item.id"
-        class="relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border border-input text-center shadow-xs shadow-black/[.04] ring-offset-background transition-colors has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground has-data-disabled:opacity-50 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
+        class="relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border border-input text-center shadow-xs shadow-black/[.04] ring-offset-background transition-colors has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground has-data-disabled:opacity-64 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
       >
         <Checkbox
           :id="item.id"
diff --git a/src/components/dialogs/Dialog09.vue b/src/components/dialogs/Dialog09.vue
index ea03900..efa87b7 100644
--- a/src/components/dialogs/Dialog09.vue
+++ b/src/components/dialogs/Dialog09.vue
@@ -48,7 +48,7 @@ import { Mail } from 'lucide-vue-next'
           <div class="relative">
             <Input id="dialog-09" class="peer ps-9" placeholder="hi@yourcompany.com" type="email" />
             <div
-              class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"
+              class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-64"
             >
               <Mail :size="16" :stroke-width="2" aria-hidden="true" />
             </div>
diff --git a/src/components/dialogs/Dialog11.vue b/src/components/dialogs/Dialog11.vue
index 77bad20..36e6eed 100644
--- a/src/components/dialogs/Dialog11.vue
+++ b/src/components/dialogs/Dialog11.vue
@@ -41,7 +41,7 @@ const selectedRating = ref<string>('')
                 >
                   <template v-for="number in ratings" :key="number">
                     <label
-                      class="relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm outline-offset-2 transition-colors first:rounded-s-lg last:rounded-e-lg has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-50 has-focus-visible:outline-2 has-focus-visible:outline-ring/70"
+                      class="relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm outline-offset-2 transition-colors first:rounded-s-lg last:rounded-e-lg has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-64 has-focus-visible:outline-2 has-focus-visible:outline-ring/70"
                     >
                       <RadioGroupItem
                         :id="`radio-17-r${number}`"
diff --git a/src/components/dialogs/Dialog16.vue b/src/components/dialogs/Dialog16.vue
index cdbc0e5..940a275 100644
--- a/src/components/dialogs/Dialog16.vue
+++ b/src/components/dialogs/Dialog16.vue
@@ -63,7 +63,7 @@ const isPrimaryCard = ref(false)
                 v-mask="cardNumberMask"
               />
               <div
-                class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50"
+                class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-64"
               >
                 <CreditCard :size="16" stroke-width="2" aria-hidden="true" />
               </div>
diff --git a/src/components/dialogs/Dialog17.vue b/src/components/dialogs/Dialog17.vue
index ed1aebd..b014a0e 100644
--- a/src/components/dialogs/Dialog17.vue
+++ b/src/components/dialogs/Dialog17.vue
@@ -104,7 +104,7 @@ const couponCode = ref('')
                   v-mask="cardNumberMask"
                 />
                 <div
-                  class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50"
+                  class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-64"
                 >
                   <CreditCard :size="16" stroke-width="2" aria-hidden="true" />
                 </div>
diff --git a/src/components/dialogs/Dialog19.vue b/src/components/dialogs/Dialog19.vue
index 8ace289..72f6676 100644
--- a/src/components/dialogs/Dialog19.vue
+++ b/src/components/dialogs/Dialog19.vue
@@ -164,7 +164,7 @@ function handleAvatarChange(event: Event) {
                   required
                 />
                 <div
-                  class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50"
+                  class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-64"
                 >
                   <Check :size="16" stroke-width="2" class="text-emerald-500" aria-hidden="true" />
                 </div>
diff --git a/src/components/inputs/Input09.vue b/src/components/inputs/Input09.vue
index d6953dd..c12d62d 100644
--- a/src/components/inputs/Input09.vue
+++ b/src/components/inputs/Input09.vue
@@ -10,7 +10,7 @@ import Label from '@/components/ui/Label.vue'
     <div class="relative">
       <Input id="input-09" class="peer ps-9" placeholder="Email" type="email" />
       <div
-        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-64"
       >
         <AtSign :size="16" :stroke-width="2" aria-hidden="true" />
       </div>
diff --git a/src/components/inputs/Input10.vue b/src/components/inputs/Input10.vue
index 5fb9c0b..7623893 100644
--- a/src/components/inputs/Input10.vue
+++ b/src/components/inputs/Input10.vue
@@ -10,7 +10,7 @@ import Label from '@/components/ui/Label.vue'
     <div class="relative">
       <Input id="input-10" class="peer pe-9" placeholder="Email" type="email" />
       <div
-        class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-64"
       >
         <Mail :size="16" :stroke-width="2" aria-hidden="true" />
       </div>
diff --git a/src/components/inputs/Input11.vue b/src/components/inputs/Input11.vue
index 2c5183c..5fd5524 100644
--- a/src/components/inputs/Input11.vue
+++ b/src/components/inputs/Input11.vue
@@ -9,7 +9,7 @@ import Label from '@/components/ui/Label.vue'
     <div class="relative">
       <Input id="input-11" class="peer ps-16" placeholder="google.com" type="text" />
       <span
-        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-64"
       >
         https://
       </span>
diff --git a/src/components/inputs/Input12.vue b/src/components/inputs/Input12.vue
index f5e0109..570a6e6 100644
--- a/src/components/inputs/Input12.vue
+++ b/src/components/inputs/Input12.vue
@@ -9,7 +9,7 @@ import Label from '@/components/ui/Label.vue'
     <div class="relative">
       <Input id="input-12" class="peer pe-12" placeholder="google" type="text" />
       <span
-        class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-64"
       >
         .com
       </span>
diff --git a/src/components/inputs/Input13.vue b/src/components/inputs/Input13.vue
index 2e20b23..ca68ae7 100644
--- a/src/components/inputs/Input13.vue
+++ b/src/components/inputs/Input13.vue
@@ -9,12 +9,12 @@ import Label from '@/components/ui/Label.vue'
     <div class="relative">
       <Input id="input-13" class="peer pe-12 ps-6" placeholder="0.00" type="text" />
       <span
-        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-64"
       >
         €
       </span>
       <span
-        class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-64"
       >
         EUR
       </span>
diff --git a/src/components/inputs/Input17.vue b/src/components/inputs/Input17.vue
index 2f7ed0a..cc5c7e6 100644
--- a/src/components/inputs/Input17.vue
+++ b/src/components/inputs/Input17.vue
@@ -10,7 +10,7 @@ import Input from '@/components/ui/Input.vue'
     <div class="flex rounded-lg shadow-xs shadow-black/[.04]">
       <div class="relative">
         <select
-          class="peer inline-flex h-full appearance-none items-center rounded-s-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          class="peer inline-flex h-full appearance-none items-center rounded-s-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
           aria-label="Protocol"
         >
           <option value="https://">https://</option>
@@ -21,7 +21,7 @@ import Input from '@/components/ui/Input.vue'
           <option value="wss://">wss://</option>
         </select>
         <span
-          class="pointer-events-none absolute inset-y-0 end-px z-10 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50"
+          class="pointer-events-none absolute inset-y-0 end-px z-10 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-64"
         >
           <ChevronDown :size="16" :stroke-width="2" aria-hidden="true" />
         </span>
diff --git a/src/components/inputs/Input18.vue b/src/components/inputs/Input18.vue
index 371c55f..4291233 100644
--- a/src/components/inputs/Input18.vue
+++ b/src/components/inputs/Input18.vue
@@ -16,7 +16,7 @@ import Label from '@/components/ui/Label.vue'
       />
       <div class="relative inline-flex">
         <select
-          class="peer inline-flex h-full appearance-none items-center rounded-e-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          class="peer inline-flex h-full appearance-none items-center rounded-e-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
           aria-label="Domain suffix"
         >
           <option>.com</option>
@@ -24,7 +24,7 @@ import Label from '@/components/ui/Label.vue'
           <option>.net</option>
         </select>
         <span
-          class="pointer-events-none absolute inset-y-0 end-px z-10 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50"
+          class="pointer-events-none absolute inset-y-0 end-px z-10 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-64"
         >
           <ChevronDown :size="16" :stroke-width="2" aria-hidden="true" />
         </span>
diff --git a/src/components/inputs/Input19.vue b/src/components/inputs/Input19.vue
index bfea28d..158d966 100644
--- a/src/components/inputs/Input19.vue
+++ b/src/components/inputs/Input19.vue
@@ -10,7 +10,7 @@ import Label from '@/components/ui/Label.vue'
     <div class="relative">
       <Input id="input-19" class="pe-9" placeholder="Email" type="email" />
       <button
-        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
         aria-label="Subscribe"
       >
         <Send :size="16" :stroke-width="2" aria-hidden="true" />
diff --git a/src/components/inputs/Input20.vue b/src/components/inputs/Input20.vue
index fd13d1c..6384363 100644
--- a/src/components/inputs/Input20.vue
+++ b/src/components/inputs/Input20.vue
@@ -15,7 +15,7 @@ import Label from '@/components/ui/Label.vue'
         type="email"
       />
       <button
-        class="inline-flex w-9 items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        class="inline-flex w-9 items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
         aria-label="Subscribe"
       >
         <Download :size="16" :stroke-width="2" aria-hidden="true" />
diff --git a/src/components/inputs/Input21.vue b/src/components/inputs/Input21.vue
index fdcdab0..7afdd5d 100644
--- a/src/components/inputs/Input21.vue
+++ b/src/components/inputs/Input21.vue
@@ -14,7 +14,7 @@ import Label from '@/components/ui/Label.vue'
         type="email"
       />
       <button
-        class="inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        class="inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
       >
         Send
       </button>
diff --git a/src/components/inputs/Input22.vue b/src/components/inputs/Input22.vue
index 4c3326e..f248cea 100644
--- a/src/components/inputs/Input22.vue
+++ b/src/components/inputs/Input22.vue
@@ -9,7 +9,7 @@ import Label from '@/components/ui/Label.vue'
     <div class="flex gap-2">
       <Input id="input-22" class="flex-1" placeholder="Email" type="email" />
       <button
-        class="inline-flex items-center rounded-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        class="inline-flex items-center rounded-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
       >
         Send
       </button>
diff --git a/src/components/inputs/Input23.vue b/src/components/inputs/Input23.vue
index 53782f5..621902c 100644
--- a/src/components/inputs/Input23.vue
+++ b/src/components/inputs/Input23.vue
@@ -24,7 +24,7 @@ const toggleVisibility = () => {
         :type="isVisible ? 'text' : 'password'"
       />
       <button
-        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
         type="button"
         @click="toggleVisibility"
         :aria-label="isVisible ? 'Hide password' : 'Show password'"
diff --git a/src/components/inputs/Input24.vue b/src/components/inputs/Input24.vue
index e3479f1..40f4ce1 100644
--- a/src/components/inputs/Input24.vue
+++ b/src/components/inputs/Input24.vue
@@ -28,7 +28,7 @@ function handleClearInput() {
       />
       <button
         v-if="inputValue"
-        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow animate-in fade-in zoom-in-75 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow animate-in fade-in zoom-in-75 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
         aria-label="Clear input"
         @click="handleClearInput"
       >
diff --git a/src/components/inputs/Input26.vue b/src/components/inputs/Input26.vue
index e46a3c8..92de0f5 100644
--- a/src/components/inputs/Input26.vue
+++ b/src/components/inputs/Input26.vue
@@ -10,12 +10,12 @@ import Label from '@/components/ui/Label.vue'
     <div class="relative">
       <Input id="input-26" class="peer pe-9 ps-9" placeholder="Search..." type="search" />
       <div
-        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-64"
       >
         <Search :size="16" :stroke-width="2" />
       </div>
       <button
-        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
         aria-label="Submit search"
         type="submit"
       >
diff --git a/src/components/inputs/Input27.vue b/src/components/inputs/Input27.vue
index 0a7ee3a..d438a4c 100644
--- a/src/components/inputs/Input27.vue
+++ b/src/components/inputs/Input27.vue
@@ -10,7 +10,7 @@
         v-model="inputValue"
       />
       <div
-        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-64"
       >
         <LoaderCircle
           v-if="isLoading"
@@ -23,7 +23,7 @@
         <Search v-else :size="16" :stroke-width="2" aria-hidden="true" />
       </div>
       <button
-        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
         aria-label="Press to speak"
         type="submit"
       >
diff --git a/src/components/inputs/Input28.vue b/src/components/inputs/Input28.vue
index 0c9840b..124c962 100644
--- a/src/components/inputs/Input28.vue
+++ b/src/components/inputs/Input28.vue
@@ -23,7 +23,7 @@ const minValue = 0
         class="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2"
       >
         <NumberFieldDecrement
-          class="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          class="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
         >
           <Minus :size="16" stroke-width="2" aria-hidden="true" />
         </NumberFieldDecrement>
@@ -31,7 +31,7 @@ const minValue = 0
           class="w-full grow bg-background px-3 py-2 text-center tabular-nums text-foreground focus:outline-hidden"
         />
         <NumberFieldIncrement
-          class="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          class="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
         >
           <Plus :size="16" stroke-width="2" aria-hidden="true" />
         </NumberFieldIncrement>
diff --git a/src/components/inputs/Input29.vue b/src/components/inputs/Input29.vue
index cc14a67..3e4d759 100644
--- a/src/components/inputs/Input29.vue
+++ b/src/components/inputs/Input29.vue
@@ -34,12 +34,12 @@ const inputValue = ref(99)
         />
         <div class="flex h-[calc(100%+2px)] flex-col">
           <NumberFieldIncrement
-            class="-me-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+            class="-me-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
           >
             <ChevronUp :size="12" stroke-width="2" aria-hidden="true" />
           </NumberFieldIncrement>
           <NumberFieldDecrement
-            class="-me-px -mt-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+            class="-me-px -mt-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
           >
             <ChevronDown :size="12" stroke-width="2" aria-hidden="true" />
           </NumberFieldDecrement>
diff --git a/src/components/inputs/Input31.vue b/src/components/inputs/Input31.vue
index 730f2c0..50c3bb5 100644
--- a/src/components/inputs/Input31.vue
+++ b/src/components/inputs/Input31.vue
@@ -6,7 +6,7 @@ import Input from '@/components/ui/Input.vue'
   <div class="group relative">
     <label
       for="input-31"
-      class="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-disabled:opacity-50"
+      class="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-disabled:opacity-64"
     >
       Input with overlapping label
     </label>
diff --git a/src/components/inputs/Input33.vue b/src/components/inputs/Input33.vue
index 87e7797..0241afa 100644
--- a/src/components/inputs/Input33.vue
+++ b/src/components/inputs/Input33.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative rounded-lg border border-input bg-background shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 has-disabled:cursor-not-allowed has-disabled:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none"
+    class="relative rounded-lg border border-input bg-background shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 has-disabled:cursor-not-allowed has-disabled:opacity-64 [&:has(input:is(:disabled))_*]:pointer-events-none"
   >
     <label for="input-33" class="block px-3 pt-2 text-xs font-medium text-foreground">
       Input with inset label
diff --git a/src/components/inputs/Input34.vue b/src/components/inputs/Input34.vue
index 62a2ca7..4c35aed 100644
--- a/src/components/inputs/Input34.vue
+++ b/src/components/inputs/Input34.vue
@@ -27,7 +27,7 @@ const {
       />
       <div
         id="character-count"
-        class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-64"
         aria-live="polite"
         role="status"
       >
diff --git a/src/components/inputs/Input36.vue b/src/components/inputs/Input36.vue
index 0cb03ba..077ebc0 100644
--- a/src/components/inputs/Input36.vue
+++ b/src/components/inputs/Input36.vue
@@ -9,12 +9,12 @@ import Label from '@/components/ui/Label.vue'
     <DateFieldRoot
       id="date-field"
       v-slot="{ segments }"
-      class="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 data-disabled:opacity-50"
+      class="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 data-disabled:opacity-64"
     >
       <template v-for="item in segments" :key="item.part">
         <DateFieldInput
           :part="item.part"
-          class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-50 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
+          class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-64 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
         >
           {{ item.value }}
         </DateFieldInput>
diff --git a/src/components/inputs/Input40.vue b/src/components/inputs/Input40.vue
index 22b2976..1d6afac 100644
--- a/src/components/inputs/Input40.vue
+++ b/src/components/inputs/Input40.vue
@@ -13,12 +13,12 @@ import Label from '@/components/ui/Label.vue'
       v-slot="{ segments }"
       granularity="minute"
       :hour-cycle="24"
-      class="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 data-disabled:opacity-50"
+      class="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 data-disabled:opacity-64"
     >
       <template v-for="item in segments" :key="item.part">
         <DateFieldInput
           :part="item.part"
-          class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-50 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
+          class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-64 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
         >
           {{ item.value }}
         </DateFieldInput>
diff --git a/src/components/inputs/Input41.vue b/src/components/inputs/Input41.vue
index 7e465bc..862f5bf 100644
--- a/src/components/inputs/Input41.vue
+++ b/src/components/inputs/Input41.vue
@@ -33,12 +33,12 @@ const now = today(getLocalTimeZone())
       <div class="flex">
         <DatePickerField
           v-slot="{ segments }"
-          class="inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 pe-9 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring data-disabled:opacity-50 focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2"
+          class="inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 pe-9 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring data-disabled:opacity-64 focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2"
         >
           <template v-for="item in segments" :key="item.part">
             <DatePickerInput
               :part="item.part"
-              class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-50 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
+              class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-64 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
             >
               {{ item.value }}
             </DatePickerInput>
diff --git a/src/components/inputs/Input42.vue b/src/components/inputs/Input42.vue
index 014dd13..526e6fd 100644
--- a/src/components/inputs/Input42.vue
+++ b/src/components/inputs/Input42.vue
@@ -33,12 +33,12 @@ const now = today(getLocalTimeZone())
       <div class="flex">
         <DateRangePickerField
           v-slot="{ segments }"
-          class="inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 pe-9 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring data-disabled:opacity-50 focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2"
+          class="inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 pe-9 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring data-disabled:opacity-64 focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2"
         >
           <template v-for="item in segments.start" :key="item.part">
             <DateRangePickerInput
               :part="item.part"
-              class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-50 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
+              class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-64 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
               type="start"
             >
               {{ item.value }}
@@ -48,7 +48,7 @@ const now = today(getLocalTimeZone())
           <template v-for="item in segments.end" :key="item.part">
             <DateRangePickerInput
               :part="item.part"
-              class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-50 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
+              class="inline rounded p-0.5 text-foreground caret-transparent outline outline-0 focus:bg-accent focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground/70 focus:aria-[valuetext=Empty]:text-foreground data-disabled:cursor-not-allowed data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-invalid:text-destructive data-[segment=literal]:text-muted-foreground/70 data-disabled:opacity-64 data-invalid:focus:data-placeholder:text-destructive-foreground data-invalid:focus:text-destructive-foreground data-invalid:aria-[valuetext=Empty]:text-destructive"
               type="end"
             >
               {{ item.value }}
diff --git a/src/components/inputs/Input45.vue b/src/components/inputs/Input45.vue
index 040e3ca..1629db1 100644
--- a/src/components/inputs/Input45.vue
+++ b/src/components/inputs/Input45.vue
@@ -23,7 +23,7 @@ const slotClass = (slot: SlotProps) => {
       v-slot="{ slots }"
       v-model="input"
       :maxlength="6"
-      container-class="flex items-center gap-3 has-disabled:opacity-50"
+      container-class="flex items-center gap-3 has-disabled:opacity-64"
     >
       <div class="flex">
         <div v-for="(slot, idx) in slots.slice(0, 3)" :key="idx" :class="slotClass(slot)">
diff --git a/src/components/inputs/Input46.vue b/src/components/inputs/Input46.vue
index 9f7e778..c6f2698 100644
--- a/src/components/inputs/Input46.vue
+++ b/src/components/inputs/Input46.vue
@@ -10,7 +10,7 @@
     <div class="flex rounded-lg shadow-xs shadow-black/[.04]">
       <!-- Country Select -->
       <div
-        class="relative inline-flex items-center self-stretch rounded-l-lg border border-input bg-background py-2 pe-2 ps-3 text-muted-foreground ring-offset-background transition-shadow focus-within:z-10 focus-within:border-ring focus-within:text-foreground focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 hover:bg-accent hover:text-foreground has-disabled:pointer-events-none has-disabled:opacity-50"
+        class="relative inline-flex items-center self-stretch rounded-l-lg border border-input bg-background py-2 pe-2 ps-3 text-muted-foreground ring-offset-background transition-shadow focus-within:z-10 focus-within:border-ring focus-within:text-foreground focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 hover:bg-accent hover:text-foreground has-disabled:pointer-events-none has-disabled:opacity-64"
       >
         <div class="inline-flex items-center gap-1" aria-hidden="true">
           <span class="flex h-[16px] w-5 items-center overflow-hidden rounded-sm">
@@ -43,7 +43,7 @@
         type="tel"
         required
         placeholder="Enter phone number"
-        class="-ml-px flex h-9 w-full rounded-lg rounded-l-none border border-input bg-background px-3 py-2 text-sm text-foreground shadow-none shadow-black/[.04] ring-offset-background transition-shadow placeholder:text-muted-foreground/70 focus-visible:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        class="-ml-px flex h-9 w-full rounded-lg rounded-l-none border border-input bg-background px-3 py-2 text-sm text-foreground shadow-none shadow-black/[.04] ring-offset-background transition-shadow placeholder:text-muted-foreground/70 focus-visible:z-10 focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-64"
         :data-invalid-number="phoneNumber && !isValid"
       />
     </div>
diff --git a/src/components/inputs/Input47.vue b/src/components/inputs/Input47.vue
index 42acc06..35f7f41 100644
--- a/src/components/inputs/Input47.vue
+++ b/src/components/inputs/Input47.vue
@@ -17,7 +17,7 @@ const cardNumber = '#### #### #### ####'
         v-mask="cardNumber"
       />
       <div
-        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"
+        class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-64"
       >
         <CreditCard :size="16" :stroke-width="2" aria-hidden="true" />
       </div>
diff --git a/src/components/inputs/Input50.vue b/src/components/inputs/Input50.vue
index b1770fa..e4b1c0f 100644
--- a/src/components/inputs/Input50.vue
+++ b/src/components/inputs/Input50.vue
@@ -20,7 +20,7 @@ const cvc = '####'
           v-mask="cardNumber"
         />
         <div
-          class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50"
+          class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-64"
         >
           <CreditCard :size="16" :stroke-width="2" aria-hidden="true" />
         </div>
diff --git a/src/components/inputs/Input51.vue b/src/components/inputs/Input51.vue
index 0978f54..e172b65 100644
--- a/src/components/inputs/Input51.vue
+++ b/src/components/inputs/Input51.vue
@@ -60,7 +60,7 @@ const getStrengthText = (score: number) => {
           aria-describedby="password-strength"
         />
         <button
-          class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          class="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64"
           type="button"
           @click="toggleVisibility"
           :aria-label="isVisible ? 'Hide password' : 'Show password'"
diff --git a/src/components/inputs/Input56.vue b/src/components/inputs/Input56.vue
index 16ff6f2..4f6d372 100644
--- a/src/components/inputs/Input56.vue
+++ b/src/components/inputs/Input56.vue
@@ -21,16 +21,16 @@ const modelValue = ref(['Sport', 'Coding', 'Travel'])
       <TagsInputInput
         id="input-56"
         placeholder="Add a tag"
-        class="inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 pe-9 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring data-disabled:opacity-50 focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2"
+        class="inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 pe-9 text-sm shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring data-disabled:opacity-64 focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2"
       />
       <div class="rounded-md w-full flex flex-wrap gap-1">
         <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
           <div
-            class="transition-all border inline-flex items-center pl-2 text-secondary-foreground disabled:cursor-not-allowed disabled:opacity-50 border-solid cursor-default animate-fadeIn relative h-7 bg-background hover:bg-background rounded-md font-medium text-xs ps-2"
+            class="transition-all border inline-flex items-center pl-2 text-secondary-foreground disabled:cursor-not-allowed disabled:opacity-64 border-solid cursor-default animate-fadeIn relative h-7 bg-background hover:bg-background rounded-md font-medium text-xs ps-2"
           >
             <TagsInputItemText class="text-xs" />
             <TagsInputItemDelete
-              class="items-center justify-center whitespace-nowrap rounded-md text-xs font-medium disabled:pointer-events-none disabled:opacity-50 hover:bg-transparent p-0 rounded-e-lg flex size-7 border border-transparent ring-offset-background transition-colors focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 text-muted-foreground/80 hover:text-foreground"
+              class="items-center justify-center whitespace-nowrap rounded-md text-xs font-medium disabled:pointer-events-none disabled:opacity-64 hover:bg-transparent p-0 rounded-e-lg flex size-7 border border-transparent ring-offset-background transition-colors focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 text-muted-foreground/80 hover:text-foreground"
             >
               <X :size="16" :stroke-width="2" aria-hidden="true" />
             </TagsInputItemDelete>
diff --git a/src/components/inputs/Input57.vue b/src/components/inputs/Input57.vue
index ac15d00..d2e3e0d 100644
--- a/src/components/inputs/Input57.vue
+++ b/src/components/inputs/Input57.vue
@@ -19,17 +19,17 @@ const modelValue = ref(['Sport', 'Coding', 'Travel'])
 
     <TagsInputRoot
       v-model="modelValue"
-      class="flex flex-row flex-wrap items-center w-full border text-xs file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-input rounded-lg bg-background shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 p-1 gap-1"
+      class="flex flex-row flex-wrap items-center w-full border text-xs file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-64 border-input rounded-lg bg-background shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 p-1 gap-1"
     >
       <TagsInputItem
         v-for="item in modelValue"
         :key="item"
         :value="item"
-        class="transition-all border inline-flex items-center pl-2 text-secondary-foreground disabled:cursor-not-allowed disabled:opacity-50 border-solid cursor-default animate-fadeIn relative h-7 bg-background hover:bg-background rounded-md font-medium text-xs ps-2"
+        class="transition-all border inline-flex items-center pl-2 text-secondary-foreground disabled:cursor-not-allowed disabled:opacity-64 border-solid cursor-default animate-fadeIn relative h-7 bg-background hover:bg-background rounded-md font-medium text-xs ps-2"
       >
         <TagsInputItemText class="text-xs" />
         <TagsInputItemDelete
-          class="items-center justify-center whitespace-nowrap rounded-md text-xs font-medium disabled:pointer-events-none disabled:opacity-50 hover:bg-transparent p-0 rounded-e-lg flex size-7 border border-transparent ring-offset-background transition-colors focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 text-muted-foreground/80 hover:text-foreground"
+          class="items-center justify-center whitespace-nowrap rounded-md text-xs font-medium disabled:pointer-events-none disabled:opacity-64 hover:bg-transparent p-0 rounded-e-lg flex size-7 border border-transparent ring-offset-background transition-colors focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 text-muted-foreground/80 hover:text-foreground"
         >
           <X :size="16" :stroke-width="2" aria-hidden="true" />
         </TagsInputItemDelete>
@@ -37,7 +37,7 @@ const modelValue = ref(['Sport', 'Coding', 'Travel'])
       <TagsInputInput
         id="input-57"
         placeholder="Add a tag"
-        class="flex rounded-md border-input py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-full min-w-[80px] focus-visible:outline-hidden shadow-none px-2 h-7"
+        class="flex rounded-md border-input py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-64 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-full min-w-[80px] focus-visible:outline-hidden shadow-none px-2 h-7"
       />
     </TagsInputRoot>
 
diff --git a/src/components/radios/Radio13.vue b/src/components/radios/Radio13.vue
index 454a9fc..3d06402 100644
--- a/src/components/radios/Radio13.vue
+++ b/src/components/radios/Radio13.vue
@@ -20,7 +20,7 @@ const items = [
       <label
         v-for="item in items"
         :key="item.id"
-        class="relative flex cursor-pointer flex-col items-center gap-3 rounded-lg border border-input px-2 py-3 text-center shadow-xs shadow-black/[.04] ring-offset-background transition-colors has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-50 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
+        class="relative flex cursor-pointer flex-col items-center gap-3 rounded-lg border border-input px-2 py-3 text-center shadow-xs shadow-black/[.04] ring-offset-background transition-colors has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-64 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
       >
         <RadioGroupItem
           :id="item.id"
diff --git a/src/components/radios/Radio16.vue b/src/components/radios/Radio16.vue
index 462afc4..0e7838b 100644
--- a/src/components/radios/Radio16.vue
+++ b/src/components/radios/Radio16.vue
@@ -20,7 +20,7 @@ const selectedValue = ref('r3')
       <label
         v-for="item in items"
         :key="item.id"
-        class="relative flex size-9 cursor-pointer flex-col items-center justify-center rounded-full border border-input text-center text-xl shadow-xs shadow-black/[.04] ring-offset-background transition-colors has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-50 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
+        class="relative flex size-9 cursor-pointer flex-col items-center justify-center rounded-full border border-input text-center text-xl shadow-xs shadow-black/[.04] ring-offset-background transition-colors has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-64 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
       >
         <RadioGroupItem
           :id="item.id"
diff --git a/src/components/radios/Radio17.vue b/src/components/radios/Radio17.vue
index 41c0c96..d192b18 100644
--- a/src/components/radios/Radio17.vue
+++ b/src/components/radios/Radio17.vue
@@ -17,7 +17,7 @@ const selectedValue = ref('')
       <label
         v-for="number in [0, 1, 2, 3, 4, 5]"
         :key="number"
-        class="relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm font-medium ring-offset-background transition-colors first:rounded-s-lg last:rounded-e-lg has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-50 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
+        class="relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm font-medium ring-offset-background transition-colors first:rounded-s-lg last:rounded-e-lg has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-data-disabled:opacity-64 has-focus-visible:ring-2 has-focus-visible:ring-ring/70 has-focus-visible:ring-offset-2"
       >
         <RadioGroupItem
           :id="`radio-17-r${number}`"
diff --git a/src/components/radios/Radio18.vue b/src/components/radios/Radio18.vue
index a75dd6c..a8be13a 100644
--- a/src/components/radios/Radio18.vue
+++ b/src/components/radios/Radio18.vue
@@ -28,7 +28,7 @@ const items = [
         <img
           :src="item.image"
           :alt="item.label"
-          class="relative h-[70px] w-[88px] cursor-pointer overflow-hidden rounded-lg border border-input shadow-xs shadow-black/[.04] ring-offset-background transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring/70 peer-focus-visible:ring-offset-2 peer-data-disabled:cursor-not-allowed peer-data-[state=checked]:border-ring peer-data-[state=checked]:bg-accent peer-data-disabled:opacity-50"
+          class="relative h-[70px] w-[88px] cursor-pointer overflow-hidden rounded-lg border border-input shadow-xs shadow-black/[.04] ring-offset-background transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring/70 peer-focus-visible:ring-offset-2 peer-data-disabled:cursor-not-allowed peer-data-[state=checked]:border-ring peer-data-[state=checked]:bg-accent peer-data-disabled:opacity-64"
         />
         <span
           class="group mt-2 flex items-center gap-1 peer-data-[state=unchecked]:text-muted-foreground/70"
diff --git a/src/components/selects/Select28.vue b/src/components/selects/Select28.vue
index 4231f62..2e45052 100644
--- a/src/components/selects/Select28.vue
+++ b/src/components/selects/Select28.vue
@@ -6,7 +6,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
   <div class="group relative">
     <label
       for="select-28"
-      class="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-disabled:opacity-50"
+      class="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-disabled:opacity-64"
     >
       Select with overlapping label
     </label>
diff --git a/src/components/selects/Select29.vue b/src/components/selects/Select29.vue
index f287850..a93f3fb 100644
--- a/src/components/selects/Select29.vue
+++ b/src/components/selects/Select29.vue
@@ -4,7 +4,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 
 <template>
   <div
-    class="relative rounded-lg border border-input bg-background shadow-xs shadow-black/5 ring-offset-background transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 has-disabled:cursor-not-allowed has-disabled:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none"
+    class="relative rounded-lg border border-input bg-background shadow-xs shadow-black/5 ring-offset-background transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 has-disabled:cursor-not-allowed has-disabled:opacity-64 [&:has(input:is(:disabled))_*]:pointer-events-none"
   >
     <label for="select-29" class="block px-3 pt-2 text-xs font-medium text-foreground">
       Select with inset label
diff --git a/src/components/selects/Select49.vue b/src/components/selects/Select49.vue
index 1340571..3355ba1 100644
--- a/src/components/selects/Select49.vue
+++ b/src/components/selects/Select49.vue
@@ -17,26 +17,26 @@ const selected = ref('svelte')
       >
         <ListboxItem
           value="react"
-          class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+          class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
         >
           React
         </ListboxItem>
         <ListboxItem
           value="vue"
-          class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+          class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
         >
           Vue
         </ListboxItem>
         <ListboxItem
           value="angular"
-          class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+          class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           disabled
         >
           Angular
         </ListboxItem>
         <ListboxItem
           value="svelte"
-          class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+          class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
         >
           Svelte
         </ListboxItem>
diff --git a/src/components/selects/Select50.vue b/src/components/selects/Select50.vue
index e4cfc30..b5b237f 100644
--- a/src/components/selects/Select50.vue
+++ b/src/components/selects/Select50.vue
@@ -18,25 +18,25 @@ const selected = ref(['react', 'vue'])
       >
         <ListboxItem
           value="react"
-          class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+          class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
         >
           React
         </ListboxItem>
         <ListboxItem
           value="vue"
-          class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+          class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
         >
           Vue
         </ListboxItem>
         <ListboxItem
           value="angular"
-          class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+          class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
         >
           Angular
         </ListboxItem>
         <ListboxItem
           value="svelte"
-          class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+          class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
         >
           Svelte
         </ListboxItem>
diff --git a/src/components/selects/Select51.vue b/src/components/selects/Select51.vue
index ff055af..2145478 100644
--- a/src/components/selects/Select51.vue
+++ b/src/components/selects/Select51.vue
@@ -20,19 +20,19 @@ const selected = ref(['lettuce', 'tuna'])
           <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">Veggies</div>
           <ListboxItem
             value="lettuce"
-            class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+            class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           >
             Lettuce
           </ListboxItem>
           <ListboxItem
             value="tomato"
-            class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+            class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           >
             Tomato
           </ListboxItem>
           <ListboxItem
             value="onion"
-            class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+            class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           >
             Onion
           </ListboxItem>
@@ -42,19 +42,19 @@ const selected = ref(['lettuce', 'tuna'])
           <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">Protein</div>
           <ListboxItem
             value="ham"
-            class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+            class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           >
             Ham
           </ListboxItem>
           <ListboxItem
             value="tuna"
-            class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+            class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           >
             Tuna
           </ListboxItem>
           <ListboxItem
             value="tofu"
-            class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+            class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           >
             Tofu
           </ListboxItem>
@@ -64,19 +64,19 @@ const selected = ref(['lettuce', 'tuna'])
           <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">Condiments</div>
           <ListboxItem
             value="mayo"
-            class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+            class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           >
             Mayonaise
           </ListboxItem>
           <ListboxItem
             value="mustard"
-            class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+            class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           >
             Mustard
           </ListboxItem>
           <ListboxItem
             value="ranch"
-            class="relative rounded-md px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+            class="relative rounded-sm px-2 py-1.5 data-disabled:cursor-not-allowed data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground data-disabled:opacity-64 data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
           >
             Ranch
           </ListboxItem>
diff --git a/src/components/sliders/Slider26.vue b/src/components/sliders/Slider26.vue
index 1ea19de..4e69577 100644
--- a/src/components/sliders/Slider26.vue
+++ b/src/components/sliders/Slider26.vue
@@ -224,7 +224,7 @@ const isBarInSelectedRange = (index: number) => {
             aria-label="Enter minimum price"
           />
           <span
-            class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50"
+            class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-64"
           >
             $
           </span>
@@ -251,7 +251,7 @@ const isBarInSelectedRange = (index: number) => {
             aria-label="Enter maximum price"
           />
           <span
-            class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50"
+            class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-64"
           >
             $
           </span>
diff --git a/src/components/textareas/Textarea13.vue b/src/components/textareas/Textarea13.vue
index f23a6f4..b0537e9 100644
--- a/src/components/textareas/Textarea13.vue
+++ b/src/components/textareas/Textarea13.vue
@@ -7,7 +7,7 @@ import Textarea from '@/components/ui/Textarea.vue'
   <div class="group relative">
     <Label
       for="textarea-13"
-      class="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-disabled:opacity-50"
+      class="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-disabled:opacity-64"
     >
       Textarea with overlapping label
     </Label>
diff --git a/src/components/textareas/Textarea15.vue b/src/components/textareas/Textarea15.vue
index 42bb86f..2287a31 100644
--- a/src/components/textareas/Textarea15.vue
+++ b/src/components/textareas/Textarea15.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative rounded-lg border border-input bg-background shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 has-disabled:cursor-not-allowed has-disabled:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none"
+    class="relative rounded-lg border border-input bg-background shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 has-disabled:cursor-not-allowed has-disabled:opacity-64 [&:has(input:is(:disabled))_*]:pointer-events-none"
   >
     <label for="textarea-15" class="block px-3 pt-2 text-xs font-medium text-foreground">
       Textarea with inset label