feat: Transitions, spacing, scroll fade, prompt area update (#11168)

Co-authored-by: Github Action <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: aaroniker <[email protected]>

1 files changed, 85 insertions, 89 deletions

diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 1f20cf85d..312eec84a 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -1,103 +1,99 @@
 [data-component="collapsible"] {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--surface-inset-base);
-  border: 1px solid var(--border-weaker-base);
-  transition: background-color 0.15s ease;
-  border-radius: var(--radius-md);
-  overflow: clip;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: var(--surface-inset-base);
+	border: 1px solid var(--border-weaker-base);
+	transition-property: background-color, border-color;
+	transition-duration: var(--transition-duration);
+	transition-timing-function: var(--transition-easing);
+	border-radius: var(--radius-md);
+	overflow: clip;
 
-  [data-slot="collapsible-trigger"] {
-    width: 100%;
-    display: flex;
-    height: 32px;
-    padding: 6px 8px 6px 12px;
-    align-items: center;
-    align-self: stretch;
-    cursor: default;
-    user-select: none;
-    color: var(--text-base);
+	[data-slot="collapsible-trigger"] {
+		width: 100%;
+		display: flex;
+		height: 32px;
+		padding: 6px 8px 6px 12px;
+		align-items: center;
+		align-self: stretch;
+		cursor: default;
+		user-select: none;
+		color: var(--text-base);
 
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
+		/* text-12-medium */
+		font-family: var(--font-family-sans);
+		font-size: var(--font-size-small);
+		font-style: normal;
+		font-weight: var(--font-weight-medium);
+		line-height: var(--line-height-large); /* 166.667% */
+		letter-spacing: var(--letter-spacing-normal);
 
-    /* &:hover { */
-    /*   background-color: var(--surface-base); */
-    /* } */
-    &:focus-visible {
-      outline: none;
-    }
-    &[data-disabled] {
-      cursor: not-allowed;
-    }
+		/* &:hover { */
+		/*   background-color: var(--surface-base); */
+		/* } */
+		&:focus-visible {
+			outline: none;
+		}
+		&[data-disabled] {
+			cursor: not-allowed;
+		}
 
-    [data-slot="collapsible-arrow"] {
-      flex-shrink: 0;
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
+		[data-slot="collapsible-arrow"] {
+			flex-shrink: 0;
+			width: 24px;
+			height: 24px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: var(--text-weak);
+		}
+	}
 
-  [data-slot="collapsible-content"] {
-    overflow: hidden;
-    /* animation: slideUp 250ms ease-out; */
+	[data-slot="collapsible-content"] {
+		display: grid;
+		grid-template-rows: 0fr;
+		transition-property: grid-template-rows, opacity;
+		transition-duration: var(--transition-duration);
+		transition-timing-function: var(--transition-easing);
 
-    /* &[data-expanded] { */
-    /*   animation: slideDown 250ms ease-out; */
-    /* } */
-  }
+		> * {
+			overflow: hidden;
+		}
 
-  &[data-variant="ghost"] {
-    background-color: transparent;
-    border: none;
+		&[data-expanded] {
+			grid-template-rows: 1fr;
+		}
 
-    > [data-slot="collapsible-trigger"] {
-      background-color: transparent;
-      border: none;
-      padding: 0;
+		&[data-closed] {
+			grid-template-rows: 0fr;
+		}
+	}
 
-      /* &:hover { */
-      /*   color: var(--text-strong); */
-      /* } */
-      &:focus-visible {
-        outline: none;
-      }
-      &[data-disabled] {
-        cursor: not-allowed;
-      }
-    }
-  }
+	&[data-variant="ghost"] {
+		background-color: transparent;
+		border: none;
 
-  &[data-variant="ghost"][data-scope="filetree"] {
-    > [data-slot="collapsible-trigger"] {
-      height: 24px;
-    }
-  }
-}
+		> [data-slot="collapsible-trigger"] {
+			background-color: transparent;
+			border: none;
+			padding: 0;
 
-@keyframes slideDown {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--kb-collapsible-content-height);
-  }
-}
+			/* &:hover { */
+			/*   color: var(--text-strong); */
+			/* } */
+			&:focus-visible {
+				outline: none;
+			}
+			&[data-disabled] {
+				cursor: not-allowed;
+			}
+		}
+	}
 
-@keyframes slideUp {
-  from {
-    height: var(--kb-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
+	&[data-variant="ghost"][data-scope="filetree"] {
+		> [data-slot="collapsible-trigger"] {
+			height: 24px;
+		}
+	}
 }