@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/primitives/select/overlay.ts

@@ -3,6 +3,7 @@ import type { ListboxPlacement, OverlayPosition } from './types';
 
 const LISTBOX_MAX_HEIGHT = 240;
 const LISTBOX_OPTION_HEIGHT = 28;
+const LISTBOX_PADDING = 0;
 const VIEWPORT_PADDING = 8;
 
 export function isTriggerVisible(trigger: HTMLElement) {
@@ -25,14 +26,22 @@ export function measureOverlayPosition(
   const rect = trigger.getBoundingClientRect();
   if (rect.width <= 0 || rect.height <= 0) return null;
 
-  const idealHeight = Math.min(LISTBOX_MAX_HEIGHT, optionCount * LISTBOX_OPTION_HEIGHT + 8);
+  const idealHeight = Math.min(
+    LISTBOX_MAX_HEIGHT,
+    optionCount * LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING,
+  );
   const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - VIEWPORT_PADDING);
   const spaceAbove = Math.max(0, rect.top - VIEWPORT_PADDING);
   const placement: ListboxPlacement =
-    spaceBelow >= idealHeight || spaceBelow >= spaceAbove ? 'bottom' : 'top';
+    spaceBelow >= idealHeight
+      ? 'bottom'
+      : spaceAbove >= idealHeight
+        ? 'top'
+        : spaceBelow >= spaceAbove
+          ? 'bottom'
+          : 'top';
   const available = placement === 'bottom' ? spaceBelow : spaceAbove;
-  const minHeight = LISTBOX_OPTION_HEIGHT + 8;
-  const maxHeight = Math.min(LISTBOX_MAX_HEIGHT, idealHeight, Math.max(minHeight, available));
+  const maxHeight = resolveListboxMaxHeight(idealHeight, available);
 
   return {
     placement,
@@ -44,11 +53,21 @@ export function measureOverlayPosition(
   };
 }
 
+function resolveListboxMaxHeight(idealHeight: number, available: number): number {
+  if (idealHeight < LISTBOX_MAX_HEIGHT) {
+    return idealHeight;
+  }
+
+  const minHeight = LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING;
+  return Math.min(LISTBOX_MAX_HEIGHT, Math.max(minHeight, available));
+}
+
 export function overlayListboxStyle(position: OverlayPosition): CSSProperties {
   const base: CSSProperties = {
     left: position.left,
     width: position.width,
     maxHeight: position.maxHeight,
+    overflowY: 'auto',
   };
 
   if (position.placement === 'bottom') {

package/src/primitives/select/select.app.css

@@ -4,6 +4,9 @@
   --ui-select-trigger-height: 28px;
   --ui-select-trigger-radius: var(--radius-sm);
   --ui-select-option-height: 28px;
-  --ui-select-option-padding: 5px 10px;
-  --ui-select-option-radius: calc(var(--radius-sm) - 2px);
+  --ui-select-option-line-height: 20px;
+  --ui-select-option-padding: 4px 8px;
+  --ui-select-option-gap: 6px;
+  --ui-select-option-check-size: 16px;
+  --ui-select-option-radius: 0;
 }

package/src/primitives/select/select.css

@@ -27,9 +27,9 @@
   height: var(--ui-select-trigger-height, 26px);
   min-width: 0;
   padding: 0 28px 0 8px;
-  color: var(--vscode-input-foreground, var(--color-text));
-  background: var(--vscode-input-background, var(--color-surface));
-  border: 1px solid var(--vscode-input-border, var(--color-border));
+  color: var(--color-input-text, var(--vscode-input-foreground, var(--color-text)));
+  background: var(--color-input-bg, var(--vscode-input-background, var(--color-surface-elevated)));
+  border: 1px solid var(--color-input-border, var(--vscode-input-border, var(--color-border)));
   border-radius: var(--ui-select-trigger-radius, 0);
   outline: none;
   font: inherit;
@@ -72,25 +72,58 @@
   z-index: 10000;
   box-sizing: border-box;
   margin: 0;
-  padding: 4px;
+  padding: 0;
   list-style: none;
-  color: var(--vscode-menu-foreground, var(--color-text));
-  background: var(--vscode-menu-background, var(--color-surface));
-  border: 1px solid var(--vscode-menu-border, var(--color-border));
+  /* Opt in when portaled into a pointer-events:none host. */
+  pointer-events: auto;
+  /* Explicit fallbacks: listbox is often portaled outside [data-theme]. */
+  color: var(--vscode-menu-foreground, var(--color-text-primary, var(--color-text, #cccccc)));
+  background: var(
+    --vscode-menu-background,
+    var(--color-surface-elevated, var(--color-surface, #2d2d2d))
+  );
+  border: 1px solid
+    var(--vscode-menu-border, var(--color-border-subtle, var(--color-border, #454545)));
   border-radius: var(--radius-sm, 0);
   max-height: 240px;
   overflow-y: auto;
 }
 
 .ui-select__option {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-select-option-gap, 6px);
   min-height: var(--ui-select-option-height, 26px);
-  padding: var(--ui-select-option-padding, 4px 10px);
+  padding: var(--ui-select-option-padding, 4px 8px);
   border-radius: var(--ui-select-option-radius, 0);
   font-size: var(--font-size-sm);
-  line-height: 1.4;
   cursor: pointer;
 }
 
+.ui-select__option-check {
+  flex: 0 0 var(--ui-select-option-check-size, 16px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-select-option-check-size, 16px);
+  color: var(--vscode-menu-foreground, var(--color-text-muted));
+  font-size: 14px;
+}
+
+.ui-select__option--selected .ui-select__option-check {
+  color: var(--vscode-menu-selectionForeground, var(--color-text));
+}
+
+.ui-select__option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: var(--ui-select-option-line-height, 20px);
+}
+
 .ui-select__option[aria-disabled='true'] {
   color: var(--color-text-subtle);
   cursor: default;
@@ -103,9 +136,13 @@
 }
 
 .ui-select__option--selected {
-  color: var(--vscode-list-activeSelectionForeground, var(--color-text));
-  background: var(--vscode-list-activeSelectionBackground, var(--color-surface-hover));
-  font-weight: 600;
+  color: var(--vscode-menu-foreground, var(--color-text));
+  background: transparent;
+}
+
+.ui-select__option--selected.ui-select__option--highlighted {
+  color: var(--vscode-menu-selectionForeground, var(--color-text));
+  background: var(--vscode-menu-selectionBackground, var(--color-surface-hover));
 }
 
 .ui-select__native {