wip: desktop work

packages/ui/src/components/collapsible.css

@@ -57,6 +57,27 @@
     /*   animation: slideDown 250ms ease-out; */
     /* } */
   }
+
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    border: none;
+
+    > [data-slot="collapsible-trigger"] {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+
+      /* &:hover { */
+      /*   color: var(--text-strong); */
+      /* } */
+      &:focus-visible {
+        outline: none;
+      }
+      &[data-disabled] {
+        cursor: not-allowed;
+      }
+    }
+  }
 }
 
 @keyframes slideDown {

packages/ui/src/components/collapsible.tsx

@@ -5,13 +5,15 @@ import { Icon } from "./icon"
 export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
   class?: string
   classList?: ComponentProps<"div">["classList"]
+  variant?: "normal" | "ghost"
 }
 
 function CollapsibleRoot(props: CollapsibleProps) {
-  const [local, others] = splitProps(props, ["class", "classList"])
+  const [local, others] = splitProps(props, ["class", "classList", "variant"])
   return (
     <Kobalte
       data-component="collapsible"
+      data-variant={local.variant || "normal"}
       classList={{
         ...(local.classList ?? {}),
         [local.class ?? ""]: !!local.class,