@opencode-ai/ui 0.0.0-dev-202608201855 → 0.0.0-dev-17751

package/src/{v2/components/loader-v2.tsx → feedback/loader/loader.tsx}

@@ -1,7 +1,7 @@
 import { splitProps, type ComponentProps } from "solid-js"
-import "./loader-v2.css"
+import "./loader.css"
 
-export function LoaderV2(props: ComponentProps<"svg">) {
+export function Loader(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
   return (
     <svg

package/src/feedback/progress-circle/progress-circle.css

@@ -0,0 +1,28 @@
+[data-component="progress-circle"] {
+  display: block;
+  transform: rotate(-90deg);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-background"] {
+  stroke: var(--v2-background-bg-layer-04);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-progress"] {
+  stroke: var(--v2-icon-icon-base);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background"] {
+  stroke: var(--progress-circle-background, var(--border-weak-base));
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background-overlay"] {
+  stroke: var(--progress-circle-background-overlay, transparent);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-progress"] {
+  stroke: var(--progress-circle-progress, var(--border-active));
+}
+
+[data-component="progress-circle"] [data-slot="progress-circle-progress"] {
+  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
+}

package/src/feedback/progress-circle/progress-circle.tsx

@@ -0,0 +1,64 @@
+import { type ComponentProps, createMemo, Show, splitProps } from "solid-js"
+import "./progress-circle.css"
+
+export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
+  percentage: number
+  appearance?: "compact" | "indicator"
+  size?: number
+  strokeWidth?: number
+}
+
+export function ProgressCircle(props: ProgressCircleProps) {
+  const [local, rest] = splitProps(props, ["percentage", "appearance", "size", "strokeWidth", "class", "classList"])
+
+  const appearance = () => local.appearance ?? "compact"
+  const viewBoxSize = () => (appearance() === "indicator" ? 16 : 14)
+  const size = () => local.size ?? viewBoxSize()
+  const strokeWidth = () => local.strokeWidth ?? (appearance() === "indicator" ? 3 : 1.5)
+  const center = () => viewBoxSize() / 2
+  const radius = () => center() - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+  const offset = createMemo(() => circumference() * (1 - Math.max(0, Math.min(100, local.percentage || 0)) / 100))
+
+  return (
+    <svg
+      {...rest}
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize()} ${viewBoxSize()}`}
+      fill="none"
+      data-component="progress-circle"
+      data-appearance={appearance()}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-background"
+        stroke-width={strokeWidth()}
+      />
+      <Show when={appearance() === "indicator"}>
+        <circle
+          cx={center()}
+          cy={center()}
+          r={radius()}
+          data-slot="progress-circle-background-overlay"
+          stroke-width={strokeWidth()}
+        />
+      </Show>
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+      />
+    </svg>
+  )
+}

package/src/{v2/components/toast-v2.tsx → feedback/toast/toast.tsx}

@@ -4,12 +4,12 @@ import type { ComponentProps, JSX } from "solid-js"
 import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
 import { Portal } from "solid-js/web"
 import { useI18n } from "../../context/i18n"
-import "./button-v2.css"
-import "./toast-v2.css"
+import "../../actions/button/button.css"
+import "./toast.css"
 
-export interface ToastV2RegionProps extends ToasterProps {}
+export interface ToastRegionProps extends ToasterProps {}
 
-function ToastV2Region(props: ToastV2RegionProps) {
+function ToastRegion(props: ToastRegionProps) {
   const i18n = useI18n()
   const [local, rest] = splitProps(props, ["class", "className", "style", "toastOptions", "swipeDirections"])
   onMount(() => {
@@ -67,40 +67,40 @@ function ToastV2Region(props: ToastV2RegionProps) {
   )
 }
 
-const ToastV2Context = createContext<number>()
+const ToastContext = createContext<number>()
 
-export interface ToastV2RootComponentProps {
+export interface ToastRootComponentProps {
   toastId: number
   children?: JSX.Element
 }
 
-function ToastV2Root(props: ToastV2RootComponentProps) {
-  return <ToastV2Context.Provider value={props.toastId}>{props.children}</ToastV2Context.Provider>
+function ToastRoot(props: ToastRootComponentProps) {
+  return <ToastContext.Provider value={props.toastId}>{props.children}</ToastContext.Provider>
 }
 
-function ToastV2Icon(props: ComponentProps<"div">) {
+function ToastIcon(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-icon" {...props} />
 }
 
-function ToastV2Content(props: ComponentProps<"div">) {
+function ToastContent(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-content" {...props} />
 }
 
-function ToastV2Title(props: ComponentProps<"div">) {
+function ToastTitle(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-title" {...props} />
 }
 
-function ToastV2Description(props: ComponentProps<"div">) {
+function ToastDescription(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-description" {...props} />
 }
 
-function ToastV2Actions(props: ComponentProps<"div">) {
+function ToastActions(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-actions" {...props} />
 }
 
-function ToastV2CloseButton(props: ComponentProps<"button">) {
+function ToastCloseButton(props: ComponentProps<"button">) {
   const i18n = useI18n()
-  const toastId = useContext(ToastV2Context)
+  const toastId = useContext(ToastContext)
   const [local, rest] = splitProps(props, ["children", "onClick"])
   return (
     <button
@@ -110,7 +110,7 @@ function ToastV2CloseButton(props: ComponentProps<"button">) {
       {...rest}
       onClick={(event) => {
         if (typeof local.onClick === "function") local.onClick(event)
-        if (!event.defaultPrevented && toastId !== undefined) toasterV2.dismiss(toastId)
+        if (!event.defaultPrevented && toastId !== undefined) toaster.dismiss(toastId)
       }}
     >
       {local.children ?? <CloseIcon />}
@@ -127,19 +127,19 @@ function CloseIcon() {
   )
 }
 
-export const ToastV2 = Object.assign(ToastV2Root, {
-  Region: ToastV2Region,
-  Icon: ToastV2Icon,
-  Content: ToastV2Content,
-  Title: ToastV2Title,
-  Description: ToastV2Description,
-  Actions: ToastV2Actions,
-  CloseButton: ToastV2CloseButton,
+export const Toast = Object.assign(ToastRoot, {
+  Region: ToastRegion,
+  Icon: ToastIcon,
+  Content: ToastContent,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  CloseButton: ToastCloseButton,
 })
 
 let toastV2Id = 0
 
-export const toasterV2 = {
+export const toaster = {
   show(render: (props: { toastId: number }) => JSX.Element, options?: { duration?: number; persistent?: boolean }) {
     const toastId = --toastV2Id
     toast.custom((id) => render({ toastId: Number(id) }), {
@@ -152,43 +152,43 @@ export const toasterV2 = {
   },
   dismiss(toastId?: number) {
     if (toastId === undefined) {
-      activeToastV2ByKey.clear()
-      activeToastV2ById.clear()
+      activeToastByKey.clear()
+      activeToastById.clear()
     } else {
-      releaseToastV2(activeToastV2ById.get(toastId))
+      releaseToast(activeToastById.get(toastId))
     }
     return toast.dismiss(toastId)
   },
 }
 
-export interface ToastV2Action {
+export interface ToastAction {
   label: string
   variant?: "primary" | "secondary"
   onClick: "dismiss" | (() => void)
 }
 
-export interface ToastV2Options {
+export interface ToastOptions {
   title?: string
   description?: string
   icon?: JSX.Element
   variant?: "default" | "success" | "error" | "loading"
   duration?: number
   persistent?: boolean
-  actions?: ToastV2Action[]
+  actions?: ToastAction[]
 }
 
-interface ActiveToastV2 {
+interface ActiveToast {
   id: number
   key: string
-  options: ToastV2Options
+  options: ToastOptions
   actions?: JSX.Element
 }
 
-const activeToastV2ByKey = new Map<string, ActiveToastV2>()
-const activeToastV2ById = new Map<number, ActiveToastV2>()
+const activeToastByKey = new Map<string, ActiveToast>()
+const activeToastById = new Map<number, ActiveToast>()
 
-export function showToastV2(options: ToastV2Options | string) {
-  const opts: ToastV2Options = typeof options === "string" ? { description: options } : options
+export function showToast(options: ToastOptions | string) {
+  const opts: ToastOptions = typeof options === "string" ? { description: options } : options
   const key = JSON.stringify({
     title: opts.title,
     description: opts.description,
@@ -197,29 +197,29 @@ export function showToastV2(options: ToastV2Options | string) {
     persistent: opts.persistent,
     actions: opts.actions?.map((action) => [action.label, action.variant]),
   })
-  const active = activeToastV2ByKey.get(key)
+  const active = activeToastByKey.get(key)
   const toasts = toast.getToasts()
 
   if (active && toasts.at(-1)?.id === active.id) {
     active.options = opts
-    publishToastV2(active)
-    pulseToastV2(active.id)
+    publishToast(active)
+    pulseToast(active.id)
     return active.id
   }
 
-  if (active && toasts.some((item) => item.id === active.id)) toasterV2.dismiss(active.id)
-  releaseToastV2(active)
+  if (active && toasts.some((item) => item.id === active.id)) toaster.dismiss(active.id)
+  releaseToast(active)
 
-  const entry: ActiveToastV2 = { id: --toastV2Id, key, options: opts }
-  entry.actions = createToastV2Actions(entry)
-  activeToastV2ByKey.set(key, entry)
-  activeToastV2ById.set(entry.id, entry)
-  publishToastV2(entry)
+  const entry: ActiveToast = { id: --toastV2Id, key, options: opts }
+  entry.actions = createToastActions(entry)
+  activeToastByKey.set(key, entry)
+  activeToastById.set(entry.id, entry)
+  publishToast(entry)
   return entry.id
 }
 
-function publishToastV2(entry: ActiveToastV2) {
-  const release = () => releaseToastV2(entry)
+function publishToast(entry: ActiveToast) {
+  const release = () => releaseToast(entry)
   toast(entry.options.title ?? "", {
     id: entry.id,
     description: entry.options.description,
@@ -235,10 +235,12 @@ function publishToastV2(entry: ActiveToastV2) {
   })
 }
 
-function createToastV2Actions(entry: ActiveToastV2) {
+function createToastActions(entry: ActiveToast) {
   if (!entry.options.actions?.length) return undefined
   return (
-    <ToastV2.Actions>
+    <Toast.Actions>
+      {/* Static map, not <For>: this JSX is created imperatively outside any Solid
+          root, where a <For> computation would never be disposed. */}
       {entry.options.actions.map((action, index) => (
         <button
           type="button"
@@ -249,17 +251,17 @@ function createToastV2Actions(entry: ActiveToastV2) {
           onClick={() => {
             const onClick = entry.options.actions?.[index]?.onClick
             if (typeof onClick === "function") onClick()
-            toasterV2.dismiss(entry.id)
+            toaster.dismiss(entry.id)
           }}
         >
           {action.label}
         </button>
       ))}
-    </ToastV2.Actions>
+    </Toast.Actions>
   )
 }
 
-function pulseToastV2(toastId: number) {
+function pulseToast(toastId: number) {
   if (typeof document === "undefined" || typeof requestAnimationFrame === "undefined") return
   requestAnimationFrame(() => {
     const element = document.querySelector<HTMLElement>(`[data-testid="toast-v2-${toastId}"]`)
@@ -268,13 +270,13 @@ function pulseToastV2(toastId: number) {
   })
 }
 
-function releaseToastV2(entry: ActiveToastV2 | undefined) {
+function releaseToast(entry: ActiveToast | undefined) {
   if (!entry) return
-  if (activeToastV2ByKey.get(entry.key) === entry) activeToastV2ByKey.delete(entry.key)
-  if (activeToastV2ById.get(entry.id) === entry) activeToastV2ById.delete(entry.id)
+  if (activeToastByKey.get(entry.key) === entry) activeToastByKey.delete(entry.key)
+  if (activeToastById.get(entry.id) === entry) activeToastById.delete(entry.id)
 }
 
-export interface ToastV2PromiseOptions<T, U = unknown> {
+export interface ToastPromiseOptions<T, U = unknown> {
   loading?: JSX.Element
   success?: (data: T) => JSX.Element
   error?: (error: U) => JSX.Element

package/src/{components → forms/checkbox}/checkbox.css

@@ -32,7 +32,6 @@
       border-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
       background-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
       box-shadow 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
-    /* background-color: var(--surface-weak); */
   }
 
   [data-slot="checkbox-checkbox-indicator"] {
@@ -49,19 +48,14 @@
       transform 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
   }
 
-  /* [data-slot="checkbox-checkbox-content"] { */
-  /* } */
-
   [data-slot="checkbox-checkbox-label"] {
     user-select: none;
     color: var(--text-base);
-
-    /* text-12-regular */
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
     font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large); /* 166.667% */
+    line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
   }
 

package/src/{components → forms/checkbox}/checkbox.tsx

@@ -1,8 +1,8 @@
-import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
+import { Control, Description, ErrorMessage, Indicator, Input, Label, Root } from "@kobalte/core/checkbox"
 import { Show, splitProps } from "solid-js"
 import type { ComponentProps, JSX, ParentProps } from "solid-js"
 
-export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+export interface CheckboxProps extends ParentProps<ComponentProps<typeof Root>> {
   hideLabel?: boolean
   description?: string
   icon?: JSX.Element
@@ -11,10 +11,10 @@ export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte
 export function Checkbox(props: CheckboxProps) {
   const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
   return (
-    <Kobalte {...others} data-component="checkbox">
-      <Kobalte.Input data-slot="checkbox-checkbox-input" />
-      <Kobalte.Control data-slot="checkbox-checkbox-control">
-        <Kobalte.Indicator data-slot="checkbox-checkbox-indicator">
+    <Root {...others} data-component="checkbox">
+      <Input data-slot="checkbox-checkbox-input" />
+      <Control data-slot="checkbox-checkbox-control">
+        <Indicator data-slot="checkbox-checkbox-indicator">
           {local.icon || (
             <svg viewBox="0 0 12 12" fill="none" width="10" height="10" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -25,19 +25,19 @@ export function Checkbox(props: CheckboxProps) {
               />
             </svg>
           )}
-        </Kobalte.Indicator>
-      </Kobalte.Control>
+        </Indicator>
+      </Control>
       <div data-slot="checkbox-checkbox-content">
         <Show when={props.children}>
-          <Kobalte.Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
+          <Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
             {props.children}
-          </Kobalte.Label>
+          </Label>
         </Show>
         <Show when={local.description}>
-          <Kobalte.Description data-slot="checkbox-checkbox-description">{local.description}</Kobalte.Description>
+          <Description data-slot="checkbox-checkbox-description">{local.description}</Description>
         </Show>
-        <Kobalte.ErrorMessage data-slot="checkbox-checkbox-error" />
+        <ErrorMessage data-slot="checkbox-checkbox-error" />
       </div>
-    </Kobalte>
+    </Root>
   )
 }

package/src/{v2/components/field-v2.tsx → forms/field/field.tsx}

@@ -11,8 +11,8 @@ import {
   type ComponentProps,
   type ParentProps,
 } from "solid-js"
-import { TooltipV2 } from "./tooltip-v2"
-import "./field-v2.css"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import "./field.css"
 
 type FieldContextValue = {
   controlId: string
@@ -40,14 +40,14 @@ function useField() {
 const CONTROL_SELECTOR = [
   "[data-slot='text-input-v2-input']",
   "[data-slot='textarea-v2-textarea']",
-  "[data-slot='inline-input-v2-input']",
+  "[data-component='inline-input']",
 ].join(", ")
 
-export interface FieldV2Props extends ComponentProps<"div"> {
+export interface FieldProps extends ComponentProps<"div"> {
   invalid?: boolean
 }
 
-function FieldV2Root(props: ParentProps<FieldV2Props>) {
+function FieldRoot(props: ParentProps<FieldProps>) {
   const [local, rest] = splitProps(props, ["invalid", "class", "classList", "children"])
 
   const controlId = `field-control-${createUniqueId()}`
@@ -86,7 +86,7 @@ function FieldV2Root(props: ParentProps<FieldV2Props>) {
     if (!control) return
 
     const shell = control.closest(
-      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input-v2']",
+      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input']",
     ) as HTMLElement | null
 
     control.id = controlId
@@ -173,7 +173,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
       <span data-slot="field-v2-label-text">{local.children}</span>
       <Show when={local.tooltip}>
         {(tooltip) => (
-          <TooltipV2 value={tooltip()}>
+          <Tooltip value={tooltip()}>
             <button
               type="button"
               data-slot="field-v2-label-info"
@@ -182,7 +182,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
             >
               <FieldLabelInfoIcon />
             </button>
-          </TooltipV2>
+          </Tooltip>
         )}
       </Show>
     </label>
@@ -255,11 +255,9 @@ function FieldControl(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export const FieldV2 = Object.assign(FieldV2Root, {
+export const Field = Object.assign(FieldRoot, {
   Label: FieldLabel,
   Prefix: FieldPrefix,
   Suffix: FieldSuffix,
   Control: FieldControl,
 })
-
-export const Field = FieldV2

package/src/{v2/components/radio-v2.tsx → forms/radio/radio.tsx}

@@ -1,18 +1,28 @@
-import { RadioGroup as Kobalte } from "@kobalte/core/radio-group"
+import {
+  Description,
+  ErrorMessage,
+  Item,
+  ItemControl,
+  ItemIndicator,
+  ItemInput,
+  ItemLabel,
+  Label,
+  Root,
+} from "@kobalte/core/radio-group"
 import { Show, splitProps, type JSX } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
-import "./radio-v2.css"
+import "./radio.css"
 
-export interface RadioGroupV2Props extends ParentProps<ComponentProps<typeof Kobalte>> {
+export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>> {
   label?: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioGroupV2(props: RadioGroupV2Props) {
+export function RadioGroup(props: RadioGroupProps) {
   const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
   return (
-    <Kobalte
+    <Root
       {...others}
       data-component="radio-v2"
       classList={{
@@ -22,30 +32,30 @@ export function RadioGroupV2(props: RadioGroupV2Props) {
     >
       <Show when={local.label}>
         {(label) => (
-          <Kobalte.Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
+          <Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
             {label()}
-          </Kobalte.Label>
+          </Label>
         )}
       </Show>
       <Show when={local.description}>
-        {(description) => <Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>}
+        {(description) => <Description data-slot="radio-v2-description">{description()}</Description>}
       </Show>
       <div data-slot="radio-v2-items">{local.children}</div>
-      <Kobalte.ErrorMessage data-slot="radio-v2-error" />
-    </Kobalte>
+      <ErrorMessage data-slot="radio-v2-error" />
+    </Root>
   )
 }
 
-export interface RadioItemV2Props extends ComponentProps<typeof Kobalte.Item> {
+export interface RadioItemProps extends ComponentProps<typeof Item> {
   label: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioItemV2(props: RadioItemV2Props) {
+export function RadioItem(props: RadioItemProps) {
   const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
   return (
-    <Kobalte.Item
+    <Item
       {...others}
       data-slot="radio-v2-item"
       classList={{
@@ -53,20 +63,20 @@ export function RadioItemV2(props: RadioItemV2Props) {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <Kobalte.ItemInput data-slot="radio-v2-item-input" />
+      <ItemInput data-slot="radio-v2-item-input" />
       <div data-slot="radio-v2-item-control-stack">
-        <Kobalte.ItemControl data-slot="radio-v2-item-control">
-          <Kobalte.ItemIndicator data-slot="radio-v2-item-indicator" />
-        </Kobalte.ItemControl>
+        <ItemControl data-slot="radio-v2-item-control">
+          <ItemIndicator data-slot="radio-v2-item-indicator" />
+        </ItemControl>
       </div>
-      <Kobalte.ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
+      <ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
         <div data-slot="radio-v2-item-text">
           <span data-slot="radio-v2-item-label-text">{local.label}</span>
           <Show when={local.description}>
             {(description) => <span data-slot="radio-v2-item-description">{description()}</span>}
           </Show>
         </div>
-      </Kobalte.ItemLabel>
-    </Kobalte.Item>
+      </ItemLabel>
+    </Item>
   )
 }

package/src/{v2/components/select-v2.css → forms/select/select.css}

@@ -1,4 +1,4 @@
-@import "./menu-v2.css";
+@import "../../navigation/menu/menu.css";
 
 /* Above modal dialogs (z-index 50); matches legacy select-content. */
 [data-popper-positioner]:has([data-slot="select-v2-content"]) {
@@ -46,7 +46,7 @@
   }
 }
 
-/* Trigger shell — aligned with text-input-v2 */
+/* Shared trigger structure for the inline control. */
 [data-component="select-v2"] {
   box-sizing: border-box;
   display: flex;
@@ -73,12 +73,6 @@
     box-shadow 85ms ease-out;
 }
 
-[data-component="select-v2"][data-appearance="large"] {
-  height: 32px;
-  padding-block: 0;
-  padding-inline: 0 8px;
-}
-
 [data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
     [data-expanded]
   ) {