tweak(ui): rotate collapsible chevron icon

packages/ui/src/components/collapsible.css

@@ -29,11 +29,10 @@
     }
 
     [data-slot="collapsible-arrow-icon"] {
-      display: none;
-    }
-
-    [data-slot="collapsible-arrow-icon"][data-direction="right"] {
       display: inline-flex;
+      color: var(--icon-weaker);
+      transform: rotate(-90deg);
+      transition: transform 0.15s ease;
     }
 
     &:hover [data-slot="collapsible-arrow"] {
@@ -74,12 +73,8 @@
       opacity: 1;
     }
 
-    [data-slot="collapsible-arrow-icon"][data-direction="right"] {
-      display: none;
-    }
-
-    [data-slot="collapsible-arrow-icon"][data-direction="down"] {
-      display: inline-flex;
+    [data-slot="collapsible-arrow-icon"] {
+      transform: rotate(0deg);
     }
   }
 

packages/ui/src/components/collapsible.tsx

@@ -34,10 +34,7 @@ function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
 function CollapsibleArrow(props?: ComponentProps<"div">) {
   return (
     <div data-slot="collapsible-arrow" {...(props || {})}>
-      <span data-slot="collapsible-arrow-icon" data-direction="right">
-        <Icon name="chevron-right" size="small" />
-      </span>
-      <span data-slot="collapsible-arrow-icon" data-direction="down">
+      <span data-slot="collapsible-arrow-icon">
         <Icon name="chevron-down" size="small" />
       </span>
     </div>