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, 156 insertions, 193 deletions

diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css
index 25dd2eb40..aafe421aa 100644
--- a/packages/ui/src/components/select.css
+++ b/packages/ui/src/components/select.css
@@ -1,202 +1,165 @@
 [data-component="select"] {
-  [data-slot="select-select-trigger"] {
-    padding: 0 4px 0 8px;
-    box-shadow: none;
-
-    [data-slot="select-select-trigger-value"] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    [data-slot="select-select-trigger-icon"] {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      color: var(--text-weak);
-      transition: transform 0.1s ease-in-out;
-    }
-
-    &[data-expanded] {
-      &[data-variant="secondary"] {
-        background-color: var(--button-secondary-hover);
-      }
-      &[data-variant="ghost"] {
-        background-color: var(--surface-raised-base-active);
-      }
-      &[data-variant="primary"] {
-        background-color: var(--icon-strong-active);
-      }
-    }
-
-    &:not([data-expanded]):focus-visible {
-      &[data-variant="secondary"] {
-        background-color: var(--button-secondary-base);
-      }
-      &[data-variant="ghost"] {
-        background-color: var(--surface-raised-base-hover);
-      }
-      &[data-variant="primary"] {
-        background-color: var(--icon-strong-base);
-      }
-    }
-  }
-
-  &[data-trigger-style="settings"] {
-    [data-slot="select-select-trigger"] {
-      padding: 6px 6px 6px 12px;
-      box-shadow: none;
-      border-radius: 6px;
-      min-width: 160px;
-      height: 32px;
-      justify-content: flex-end;
-      gap: 12px;
-      background-color: transparent;
-
-      [data-slot="select-select-trigger-value"] {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: var(--font-size-base);
-        font-weight: var(--font-weight-regular);
-      }
-      [data-slot="select-select-trigger-icon"] {
-        width: 16px;
-        height: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        color: var(--text-weak);
-        background-color: var(--surface-raised-base);
-        border-radius: 4px;
-        transition: transform 0.1s ease-in-out;
-      }
-
-      &[data-slot="select-select-trigger"]:hover:not(:disabled),
-      &[data-slot="select-select-trigger"][data-expanded],
-      &[data-slot="select-select-trigger"][data-expanded]:hover:not(:disabled) {
-        background-color: var(--input-base);
-        box-shadow: var(--shadow-xs-border-base);
-      }
-
-      &:not([data-expanded]):focus {
-        background-color: transparent;
-        box-shadow: none;
-      }
-    }
-  }
+	[data-slot="select-select-trigger"] {
+		display: flex;
+		padding: 4px 8px !important;
+		align-items: center;
+		justify-content: space-between;
+		box-shadow: none;
+		transition-property: background-color;
+		transition-duration: var(--transition-duration);
+		transition-timing-function: var(--transition-easing);
+
+		[data-slot="select-select-trigger-value"] {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		[data-slot="select-select-trigger-icon"] {
+			width: 16px;
+			height: 16px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+			color: var(--icon-base);
+		}
+
+		&:hover,
+		&[data-expanded] {
+			&[data-variant="secondary"] {
+				background-color: var(--button-secondary-hover);
+			}
+			&[data-variant="ghost"] {
+				background-color: var(--surface-raised-base-active);
+			}
+			&[data-variant="primary"] {
+				background-color: var(--icon-strong-active);
+			}
+		}
+		&:not([data-expanded]):focus,
+		&:not([data-expanded]):focus-visible {
+			&[data-variant="secondary"] {
+				background-color: var(--button-secondary-base);
+			}
+			&[data-variant="ghost"] {
+				background-color: transparent;
+			}
+			&[data-variant="primary"] {
+				background-color: var(--icon-strong-base);
+			}
+		}
+	}
 }
 
 [data-component="select-content"] {
-  min-width: 104px;
-  max-width: 23rem;
-  overflow: hidden;
-  border-radius: var(--radius-md);
-  background-color: var(--surface-raised-stronger-non-alpha);
-  padding: 4px;
-  box-shadow: var(--shadow-xs-border);
-  z-index: 60;
-
-  &[data-expanded] {
-    animation: select-open 0.15s ease-out;
-  }
-
-  [data-slot="select-select-content-list"] {
-    overflow-y: auto;
-    max-height: 12rem;
-    white-space: nowrap;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-
-    &:focus {
-      outline: none;
-    }
-
-    > *:not([role="presentation"]) + *:not([role="presentation"]) {
-      margin-top: 2px;
-    }
-  }
-
-  [data-slot="select-select-item"] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 2px 8px;
-    gap: 12px;
-    border-radius: 4px;
-    cursor: default;
-
-    /* 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);
-
-    color: var(--text-strong);
-
-    transition:
-      background-color 0.2s ease-in-out,
-      color 0.2s ease-in-out;
-    outline: none;
-    user-select: none;
-
-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
-    }
-    &[data-disabled] {
-      background-color: var(--surface-raised-base);
-      pointer-events: none;
-    }
-    [data-slot="select-select-item-indicator"] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-left: auto;
-      width: 16px;
-      height: 16px;
-    }
-    &:focus {
-      outline: none;
-    }
-    &:hover {
-      background: var(--surface-raised-base-hover);
-    }
-  }
+	min-width: 8rem;
+	max-width: 23rem;
+	overflow: hidden;
+	border-radius: var(--radius-md);
+	background-color: var(--surface-raised-stronger-non-alpha);
+	padding: 4px;
+	box-shadow: var(--shadow-xs-border);
+	z-index: 50;
+	transform-origin: var(--kb-popper-content-transform-origin);
+	pointer-events: none;
+
+	animation: selectContentHide var(--transition-duration)
+		var(--transition-easing) forwards;
+
+	@starting-style {
+		animation: none;
+	}
+
+	&[data-expanded] {
+		pointer-events: auto;
+		animation: selectContentShow var(--transition-duration)
+			var(--transition-easing) forwards;
+	}
+
+	[data-slot="select-select-content-list"] {
+		overflow-y: auto;
+		max-height: 12rem;
+		white-space: nowrap;
+		overflow-x: hidden;
+		display: flex;
+		flex-direction: column;
+		&:focus {
+			outline: none;
+		}
+		> *:not([role="presentation"]) + *:not([role="presentation"]) {
+			margin-top: 2px;
+		}
+	}
+	[data-slot="select-select-item"] {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding: 4px 8px;
+		gap: 12px;
+		border-radius: var(--radius-sm);
+
+		/* text-12-medium */
+		font-family: var(--font-family-sans);
+		font-size: var(--font-size-base);
+		font-style: normal;
+		font-weight: var(--font-weight-medium);
+		line-height: var(--line-height-large); /* 166.667% */
+		letter-spacing: var(--letter-spacing-normal);
+		color: var(--text-strong);
+
+		transition-property: background-color, color;
+		transition-duration: var(--transition-duration);
+		transition-timing-function: var(--transition-easing);
+		outline: none;
+		user-select: none;
+
+		&:hover {
+			background-color: var(--surface-raised-base-hover);
+		}
+		&[data-disabled] {
+			background-color: var(--surface-raised-base);
+			pointer-events: none;
+		}
+		[data-slot="select-select-item-indicator"] {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-left: auto;
+			width: 16px;
+			height: 16px;
+			color: var(--icon-strong-base);
+
+			svg {
+				color: var(--icon-strong-base);
+			}
+		}
+		&:focus {
+			outline: none;
+		}
+		&:hover {
+			background: var(--surface-raised-base-hover);
+		}
+	}
 }
 
-[data-component="select-content"][data-trigger-style="settings"] {
-  min-width: 160px;
-  border-radius: 8px;
-  padding: 0;
-
-  [data-slot="select-select-content-list"] {
-    padding: 4px;
-  }
-
-  [data-slot="select-select-item"] {
-    /* text-14-regular */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-  }
+@keyframes selectContentShow {
+	from {
+		opacity: 0;
+		transform: scaleY(0.95);
+	}
+	to {
+		opacity: 1;
+		transform: scaleY(1);
+	}
 }
 
-@keyframes select-open {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+@keyframes selectContentHide {
+	from {
+		opacity: 1;
+		transform: scaleY(1);
+	}
+	to {
+		opacity: 0;
+		transform: scaleY(0.95);
+	}
 }