wip: desktop work

3 files changed, 53 insertions, 1 deletions

diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 34699fc20..3d8c8ebea 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/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 {
diff --git a/packages/ui/src/components/collapsible.tsx b/packages/ui/src/components/collapsible.tsx
index d2e4a139b..17fad0b9e 100644
--- a/packages/ui/src/components/collapsible.tsx
+++ b/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,
diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css
index 99b7760a0..85b901566 100644
--- a/packages/ui/src/styles/utilities.css
+++ b/packages/ui/src/styles/utilities.css
@@ -48,6 +48,35 @@
   border-width: 0;
 }
 
+.scroller {
+  --fade-height: 1.5rem;
+
+  --mask-top: linear-gradient(to bottom, transparent, black var(--fade-height));
+  --mask-bottom: linear-gradient(to top, transparent, black var(--fade-height));
+
+  mask-image: var(--mask-top), var(--mask-bottom);
+  mask-repeat: no-repeat;
+
+  mask-size: 100% var(--fade-height);
+
+  animation: adjust-masks linear;
+  animation-timeline: scroll(self);
+}
+
+@keyframes adjust-masks {
+  from {
+    mask-position:
+      0 calc(0% - var(--fade-height)),
+      0 100%;
+  }
+
+  to {
+    mask-position:
+      0 0,
+      0 calc(100% + var(--fade-height));
+  }
+}
+
 .truncate-start {
   text-overflow: ellipsis;
   overflow: hidden;