fix

apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx

@@ -610,7 +610,7 @@ function DropdownMenuWithAvatar() {
             render={
               <Button
                 variant="outline"
-                className="h-12 justify-start px-2 md:max-w-[200px]"
+                className="h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case"
               />
             }
           >

apps/v4/registry/bases/base/examples/field-example.tsx

@@ -438,7 +438,7 @@ function CheckboxFields() {
       <FieldGroup>
         <Field orientation="horizontal">
           <Checkbox id="checkbox-basic" defaultChecked />
-          <FieldLabel htmlFor="checkbox-basic" className="font-normal">
+          <FieldLabel htmlFor="checkbox-basic">
             I agree to the terms and conditions
           </FieldLabel>
         </Field>
@@ -478,19 +478,15 @@ function CheckboxFields() {
           <FieldGroup className="gap-3">
             <Field orientation="horizontal">
               <Checkbox id="pref-dark" />
-              <FieldLabel htmlFor="pref-dark" className="font-normal">
-                Dark mode
-              </FieldLabel>
+              <FieldLabel htmlFor="pref-dark">Dark mode</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <Checkbox id="pref-compact" />
-              <FieldLabel htmlFor="pref-compact" className="font-normal">
-                Compact view
-              </FieldLabel>
+              <FieldLabel htmlFor="pref-compact">Compact view</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <Checkbox id="pref-notifications" />
-              <FieldLabel htmlFor="pref-notifications" className="font-normal">
+              <FieldLabel htmlFor="pref-notifications">
                 Enable notifications
               </FieldLabel>
             </Field>
@@ -498,13 +494,11 @@ function CheckboxFields() {
         </FieldSet>
         <Field data-invalid orientation="horizontal">
           <Checkbox id="checkbox-invalid" aria-invalid />
-          <FieldLabel htmlFor="checkbox-invalid" className="font-normal">
-            Invalid checkbox
-          </FieldLabel>
+          <FieldLabel htmlFor="checkbox-invalid">Invalid checkbox</FieldLabel>
         </Field>
         <Field data-disabled orientation="horizontal">
           <Checkbox id="checkbox-disabled-field" disabled />
-          <FieldLabel htmlFor="checkbox-disabled-field" className="font-normal">
+          <FieldLabel htmlFor="checkbox-disabled-field">
             Disabled checkbox
           </FieldLabel>
         </Field>
@@ -522,21 +516,15 @@ function RadioFields() {
           <RadioGroup defaultValue="free">
             <Field orientation="horizontal">
               <RadioGroupItem value="free" id="radio-free" />
-              <FieldLabel htmlFor="radio-free" className="font-normal">
-                Free Plan
-              </FieldLabel>
+              <FieldLabel htmlFor="radio-free">Free Plan</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <RadioGroupItem value="pro" id="radio-pro" />
-              <FieldLabel htmlFor="radio-pro" className="font-normal">
-                Pro Plan
-              </FieldLabel>
+              <FieldLabel htmlFor="radio-pro">Pro Plan</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <RadioGroupItem value="enterprise" id="radio-enterprise" />
-              <FieldLabel htmlFor="radio-enterprise" className="font-normal">
-                Enterprise
-              </FieldLabel>
+              <FieldLabel htmlFor="radio-enterprise">Enterprise</FieldLabel>
             </Field>
           </RadioGroup>
         </FieldSet>
@@ -570,18 +558,6 @@ function RadioFields() {
               </FieldDescription>
             </FieldContent>
           </Field>
-          <Field orientation="horizontal">
-            <RadioGroupItem value="option2" id="radio-content-2" />
-            <FieldContent>
-              <FieldLabel htmlFor="radio-content-2">
-                Enable Touch ID and Face ID to make it even faster to unlock
-                your device. This is a long label to test the layout.
-              </FieldLabel>
-              <FieldDescription>
-                Enable Touch ID to quickly unlock your device.
-              </FieldDescription>
-            </FieldContent>
-          </Field>
         </RadioGroup>
         <RadioGroup className="gap-3">
           <FieldLabel htmlFor="radio-title-1">
@@ -595,20 +571,6 @@ function RadioFields() {
               </FieldContent>
             </Field>
           </FieldLabel>
-          <FieldLabel htmlFor="radio-title-2">
-            <Field orientation="horizontal">
-              <RadioGroupItem value="title2" id="radio-title-2" />
-              <FieldContent>
-                <FieldTitle>
-                  Enable Touch ID and Face ID to make it even faster to unlock
-                  your device. This is a long label to test the layout.
-                </FieldTitle>
-                <FieldDescription>
-                  Enable Touch ID to quickly unlock your device.
-                </FieldDescription>
-              </FieldContent>
-            </Field>
-          </FieldLabel>
         </RadioGroup>
         <FieldSet>
           <FieldLegend variant="label">Invalid Radio Group</FieldLegend>
@@ -696,19 +658,15 @@ function SwitchFields() {
           <FieldDescription>Manage your privacy preferences.</FieldDescription>
           <Field orientation="horizontal">
             <Switch id="switch-profile" defaultChecked />
-            <FieldContent>
-              <FieldLabel htmlFor="switch-profile" className="font-normal">
-                Make profile visible to others
-              </FieldLabel>
-            </FieldContent>
+            <FieldLabel htmlFor="switch-profile">
+              Make profile visible to others
+            </FieldLabel>
           </Field>
           <Field orientation="horizontal">
             <Switch id="switch-email" />
-            <FieldContent>
-              <FieldLabel htmlFor="switch-email" className="font-normal">
-                Show email on profile
-              </FieldLabel>
-            </FieldContent>
+            <FieldLabel htmlFor="switch-email">
+              Show email on profile
+            </FieldLabel>
           </Field>
         </Field>
         <Field data-invalid orientation="horizontal">

apps/v4/registry/bases/base/examples/select-example.tsx

@@ -630,9 +630,9 @@ function SelectPlan() {
 function SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {
   return (
     <Item size="xs" className="w-full p-0">
-      <ItemContent className="gap-0">
-        <ItemTitle>{plan.name}</ItemTitle>
-        <ItemDescription className="text-xs">
+      <ItemContent className="gap-0 normal-case">
+        <ItemTitle className="font-sans">{plan.name}</ItemTitle>
+        <ItemDescription className="text-xs font-normal tracking-normal">
           {plan.description}
         </ItemDescription>
       </ItemContent>

apps/v4/registry/bases/base/examples/switch-example.tsx

@@ -17,6 +17,7 @@ export default function SwitchExample() {
     <ExampleWrapper>
       <SwitchBasic />
       <SwitchWithDescription />
+      <SwitchWithLabel />
       <SwitchDisabled />
       <SwitchSizes />
     </ExampleWrapper>