fix(dify-ui): make text and checked control focus indicators distinguishable (#43747)

packages/dify-ui/docs/styling.md

@@ -65,9 +65,16 @@ opens a surface (Popover, DropdownMenu, Collapsible, Combobox, Dialog, AlertDial
 share one ring. Rows inside a composite defer to its highlight. Parts that only attach behavior
 (Tooltip, PreviewCard, and ContextMenu triggers, and Close parts) add no styles.
 
-Attach focus-visible styling to the element that visually represents focus. If a visible wrapper
-contains the native focus target, select that descendant state from the wrapper; for example,
-`SliderThumb` uses `has-[:focus-visible]` because its internal range input receives focus.
+Text controls (Input, Textarea, InputGroup, NumberField, and the Combobox and Autocomplete input
+groups) draw that ring on the visible field. It replaces the hover border, and an invalid field
+keeps its border and fill inside it. Switch, Checkbox, and Radio leave a gap between the control and
+the indicator, because their checked fill is the indicator color.
+
+Attach the indicator to the element that visually represents focus. If a visible wrapper contains
+the native focus target, select that descendant state from the wrapper; for example, `SliderThumb`
+uses `has-[:focus-visible]` because its internal range input receives focus. Select
+`:focus-visible`, except on a text control, which selects `:focus` because it shows focus however
+it was reached.
 
 [Tailwind CSS functions and directives]: https://tailwindcss.com/docs/functions-and-directives
 [Tailwind CSS v4 upgrade guide]: https://tailwindcss.com/docs/upgrade-guide

packages/dify-ui/src/autocomplete/index.tsx

@@ -6,7 +6,7 @@ import type { Placement } from '../placement'
 import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'
 import { cva } from 'class-variance-authority'
 import { cn } from '../cn'
-import { textControlCompoundInputFocusClassName } from '../form-control-shared'
+import { textControlGroupClassName } from '../form-control-shared'
 import { resolveClassName } from '../internals/resolve-class-name'
 import {
   floatingGroupLabelClassName,
@@ -84,16 +84,7 @@ const autocompleteItemClassName = [
 ]
 
 const autocompleteInputGroupVariants = cva(
-  [
-    'group/autocomplete flex w-full min-w-0 items-center border border-transparent bg-components-input-bg-normal text-components-input-text-filled shadow-none outline-hidden transition-[background-color,border-color]',
-    'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
-    textControlCompoundInputFocusClassName,
-    'data-focused:border-components-input-border-active data-focused:bg-components-input-bg-active data-focused:shadow-xs',
-    'data-disabled:cursor-not-allowed data-disabled:border-transparent data-disabled:bg-components-input-bg-disabled data-disabled:text-components-input-text-filled-disabled',
-    'data-disabled:hover:border-transparent data-disabled:hover:bg-components-input-bg-disabled',
-    'data-readonly:shadow-none data-readonly:hover:border-transparent data-readonly:hover:bg-components-input-bg-normal',
-    'motion-reduce:transition-none',
-  ],
+  [textControlGroupClassName, 'group/autocomplete items-center'],
   {
     variants: {
       size: {

packages/dify-ui/src/checkbox/index.tsx

@@ -4,13 +4,14 @@ import type { Checkbox as BaseCheckboxNS } from '@base-ui/react/checkbox'
 import type * as React from 'react'
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox'
 import { cn } from '../cn'
+import { checkedControlFocusClassName } from '../form-control-shared'
 import { resolveClassName } from '../internals/resolve-class-name'
 
 const checkboxRootClassName = cn(
   'inline-flex size-4 shrink-0 touch-manipulation items-center justify-center rounded-sm shadow-xs shadow-shadow-shadow-3 transition-colors motion-reduce:transition-none',
   'border border-components-checkbox-border bg-components-checkbox-bg-unchecked text-components-checkbox-icon',
   'hover:border-components-checkbox-border-hover hover:bg-components-checkbox-bg-unchecked-hover',
-  'focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-offset-0 focus-visible:outline-hidden',
+  checkedControlFocusClassName,
   'data-checked:border-transparent data-checked:bg-components-checkbox-bg data-checked:hover:bg-components-checkbox-bg-hover',
   'data-indeterminate:border-transparent data-indeterminate:bg-components-checkbox-bg data-indeterminate:hover:bg-components-checkbox-bg-hover',
   'data-disabled:cursor-not-allowed data-disabled:border-components-checkbox-border-disabled data-disabled:bg-components-checkbox-bg-disabled',

packages/dify-ui/src/combobox/index.tsx

@@ -6,7 +6,7 @@ import type { Placement } from '../placement'
 import { Combobox as BaseCombobox } from '@base-ui/react/combobox'
 import { cva } from 'class-variance-authority'
 import { cn } from '../cn'
-import { formLabelClassName, textControlCompoundInputFocusClassName } from '../form-control-shared'
+import { formLabelClassName, textControlGroupClassName } from '../form-control-shared'
 import { resolveClassName } from '../internals/resolve-class-name'
 import {
   floatingGroupLabelClassName,
@@ -107,31 +107,18 @@ function ComboboxTrigger({ className, type = 'button', ...props }: ComboboxTrigg
   )
 }
 
-const comboboxInputGroupVariants = cva(
-  [
-    'group/combobox flex w-full min-w-0 items-center border border-transparent bg-components-input-bg-normal text-components-input-text-filled shadow-none outline-hidden transition-[background-color,border-color]',
-    'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
-    textControlCompoundInputFocusClassName,
-    'data-focused:border-components-input-border-active data-focused:bg-components-input-bg-active data-focused:shadow-xs',
-    'data-popup-open:border-components-input-border-active data-popup-open:bg-components-input-bg-active',
-    'data-disabled:cursor-not-allowed data-disabled:border-transparent data-disabled:bg-components-input-bg-disabled data-disabled:text-components-input-text-filled-disabled',
-    'data-disabled:hover:border-transparent data-disabled:hover:bg-components-input-bg-disabled',
-    'data-readonly:shadow-none data-readonly:hover:border-transparent data-readonly:hover:bg-components-input-bg-normal',
-    'motion-reduce:transition-none',
-  ],
-  {
-    variants: {
-      size: {
-        small: 'min-h-6 rounded-md',
-        medium: 'min-h-8 rounded-lg',
-        large: 'min-h-9 rounded-[10px]',
-      },
-    },
-    defaultVariants: {
-      size: 'medium',
+const comboboxInputGroupVariants = cva([textControlGroupClassName, 'group/combobox items-center'], {
+  variants: {
+    size: {
+      small: 'min-h-6 rounded-md',
+      medium: 'min-h-8 rounded-lg',
+      large: 'min-h-9 rounded-[10px]',
     },
   },
-)
+  defaultVariants: {
+    size: 'medium',
+  },
+})
 
 type ComboboxInputGroupProps = BaseCombobox.InputGroup.Props &
   VariantProps<typeof comboboxInputGroupVariants>

packages/dify-ui/src/form-control-shared.ts

@@ -1,8 +1,39 @@
 export const formLabelClassName =
   'w-fit cursor-default py-1 text-text-secondary system-sm-medium data-disabled:cursor-not-allowed'
 
-export const textControlFocusClassName =
-  'focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
+// The focus indicator of a control whose checked fill is the indicator color (Switch, Checkbox, Radio).
+// The gap keeps it distinct from that fill. The color is set at rest so it does not animate in.
+export const checkedControlFocusClassName =
+  'outline-state-accent-solid focus-visible:outline-2 focus-visible:outline-offset-2'
 
-export const textControlCompoundInputFocusClassName =
-  'has-[input:focus]:border-components-input-border-active has-[input:focus]:bg-components-input-bg-active has-[input:focus]:shadow-xs has-[textarea:focus]:border-components-input-border-active has-[textarea:focus]:bg-components-input-bg-active has-[textarea:focus]:shadow-xs'
+// The field surface when the native control is the visible field (Input, Textarea).
+// Focus selects `:focus`, not `data-focused`: a text control shows focus however it was reached, and
+// Base UI sets `data-focused` only inside a Field. It exposes no read-only attribute on a plain control
+// either, so that state uses the pseudo-class, limited to enabled controls because `:read-only` also
+// matches a disabled one.
+export const textControlClassName = [
+  'w-full appearance-none border border-transparent bg-components-input-bg-normal text-components-input-text-filled caret-primary-600 outline-hidden transition-[background-color,border-color]',
+  'placeholder:text-components-input-text-placeholder',
+  'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
+  'focus:border-transparent focus:bg-components-input-bg-active focus:ring-2 focus:ring-state-accent-solid focus:transition-none',
+  'data-invalid:border-components-input-border-destructive data-invalid:bg-components-input-bg-destructive',
+  'read-only:cursor-default enabled:read-only:not-data-invalid:hover:border-transparent enabled:read-only:not-data-invalid:hover:bg-components-input-bg-normal enabled:read-only:not-data-invalid:focus:bg-components-input-bg-normal',
+  'disabled:cursor-not-allowed disabled:bg-components-input-bg-disabled disabled:text-components-input-text-filled-disabled',
+  'disabled:hover:border-transparent disabled:hover:bg-components-input-bg-disabled',
+  'motion-reduce:transition-none',
+]
+
+// The same surface on a Base UI group part that wraps the control (NumberField, Combobox, Autocomplete).
+// The group reads focus from its input, so buttons inside it keep their own indicator.
+export const textControlGroupClassName = [
+  'flex w-full min-w-0 border border-transparent bg-components-input-bg-normal text-components-input-text-filled transition-[background-color,border-color]',
+  'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
+  'has-[input:focus]:border-transparent has-[input:focus]:bg-components-input-bg-active has-[input:focus]:ring-2 has-[input:focus]:ring-state-accent-solid has-[input:focus]:transition-none',
+  'data-invalid:border-components-input-border-destructive data-invalid:bg-components-input-bg-destructive',
+  // The focus rule outranks a single data attribute, so an invalid group restates its colors while focused.
+  'data-invalid:has-[input:focus]:border-components-input-border-destructive data-invalid:has-[input:focus]:bg-components-input-bg-destructive',
+  'data-readonly:not-data-disabled:not-data-invalid:hover:border-transparent data-readonly:not-data-disabled:not-data-invalid:hover:bg-components-input-bg-normal data-readonly:not-data-invalid:has-[input:focus]:bg-components-input-bg-normal',
+  'data-disabled:cursor-not-allowed data-disabled:bg-components-input-bg-disabled data-disabled:text-components-input-text-filled-disabled',
+  'data-disabled:hover:border-transparent data-disabled:hover:bg-components-input-bg-disabled',
+  'motion-reduce:transition-none',
+]

packages/dify-ui/src/input-group/index.tsx

@@ -21,13 +21,12 @@ function InputGroup({ className, onMouseDown, ...props }: InputGroupProps) {
       className={cn(
         [
           'flex min-h-8 w-full min-w-0 items-center rounded-lg border border-transparent bg-components-input-bg-normal transition-[background-color,border-color]',
-          'has-[>input:enabled]:not-has-[>input:is([readonly],[data-invalid])]:hover:border-components-input-border-hover has-[>input:enabled]:not-has-[>input:is([readonly],[data-invalid])]:hover:bg-components-input-bg-hover',
-          'has-[>input:focus]:not-has-[>input:is([readonly],[data-invalid])]:border-components-input-border-active has-[>input:focus]:not-has-[>input:is([readonly],[data-invalid])]:bg-components-input-bg-active has-[>input:focus]:not-has-[>input[readonly]]:shadow-xs',
+          'has-[>input:enabled:not(:focus)]:not-has-[>input:is([readonly],[data-invalid])]:hover:border-components-input-border-hover has-[>input:enabled:not(:focus)]:not-has-[>input:is([readonly],[data-invalid])]:hover:bg-components-input-bg-hover',
+          'has-[>input:focus]:ring-2 has-[>input:focus]:ring-state-accent-solid has-[>input:focus]:transition-none has-[>input:focus]:not-has-[>input:is([readonly],[data-invalid])]:bg-components-input-bg-active',
           'has-[>input[data-invalid]]:border-components-input-border-destructive has-[>input[data-invalid]]:bg-components-input-bg-destructive',
           'has-[>input[data-disabled]]:cursor-not-allowed has-[>input[data-disabled]]:border-transparent has-[>input[data-disabled]]:bg-components-input-bg-disabled has-[>input[data-disabled]]:text-components-input-text-filled-disabled',
           'has-[>input[data-disabled]]:*:data-align:cursor-not-allowed has-[>input[data-disabled]]:*:data-align:text-components-input-text-filled-disabled',
           'has-[>input[readonly]]:cursor-default has-[>input[readonly]]:*:data-align:cursor-default',
-          'has-[>input[readonly]:focus-visible]:ring-2 has-[>input[readonly]:focus-visible]:ring-state-accent-solid',
           'has-[>[data-align=inline-start]]:[&>input]:ps-0',
           'has-[>[data-align=inline-end]]:[&>input]:pe-0',
           'motion-reduce:transition-none',

packages/dify-ui/src/input/index.tsx

@@ -3,7 +3,7 @@
 import type { Input as BaseInputNS } from '@base-ui/react/input'
 import { Input as BaseInput } from '@base-ui/react/input'
 import { cn } from '../cn'
-import { textControlFocusClassName } from '../form-control-shared'
+import { textControlClassName } from '../form-control-shared'
 import { resolveClassName } from '../internals/resolve-class-name'
 
 type InputProps = Omit<BaseInputNS.Props, 'size'>
@@ -13,17 +13,8 @@ function Input({ className, ...props }: InputProps) {
     <BaseInput
       className={(state) =>
         cn(
-          [
-            'w-full appearance-none rounded-lg border border-transparent bg-components-input-bg-normal px-3 py-1.75 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden transition-[background-color,border-color]',
-            'placeholder:text-components-input-text-placeholder',
-            'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
-            textControlFocusClassName,
-            'data-invalid:border-components-input-border-destructive data-invalid:bg-components-input-bg-destructive',
-            'read-only:cursor-default read-only:shadow-none read-only:hover:border-transparent read-only:hover:bg-components-input-bg-normal read-only:focus:border-transparent read-only:focus:bg-components-input-bg-normal read-only:focus:shadow-none read-only:focus-visible:ring-2 read-only:focus-visible:ring-state-accent-solid',
-            'disabled:cursor-not-allowed disabled:border-transparent disabled:bg-components-input-bg-disabled disabled:text-components-input-text-filled-disabled',
-            'disabled:hover:border-transparent disabled:hover:bg-components-input-bg-disabled',
-            'motion-reduce:transition-none',
-          ],
+          textControlClassName,
+          'rounded-lg px-3 py-1.75 system-sm-regular',
           resolveClassName(className, state),
         )
       }

packages/dify-ui/src/number-field/index.tsx

@@ -5,24 +5,14 @@ import type * as React from 'react'
 import { NumberField as BaseNumberField } from '@base-ui/react/number-field'
 import { cva } from 'class-variance-authority'
 import { cn } from '../cn'
-import { textControlCompoundInputFocusClassName } from '../form-control-shared'
+import { textControlGroupClassName } from '../form-control-shared'
 import { resolveClassName } from '../internals/resolve-class-name'
 
 const NumberField = BaseNumberField.Root
 type NumberFieldProps = BaseNumberField.Root.Props
 
 const numberFieldGroupVariants = cva(
-  [
-    'group/number-field flex w-full min-w-0 items-stretch overflow-hidden border border-transparent bg-components-input-bg-normal text-components-input-text-filled shadow-none outline-hidden transition-[background-color,border-color]',
-    'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
-    textControlCompoundInputFocusClassName,
-    'data-focused:border-components-input-border-active data-focused:bg-components-input-bg-active data-focused:shadow-xs',
-    'data-invalid:border-components-input-border-destructive data-invalid:bg-components-input-bg-destructive',
-    'data-invalid:has-[input:focus]:border-components-input-border-destructive data-invalid:has-[input:focus]:bg-components-input-bg-destructive',
-    'data-disabled:cursor-not-allowed data-disabled:border-transparent data-disabled:bg-components-input-bg-disabled data-disabled:text-components-input-text-filled-disabled',
-    'data-disabled:hover:border-transparent data-disabled:hover:bg-components-input-bg-disabled',
-    'data-readonly:shadow-none data-readonly:hover:border-transparent data-readonly:hover:bg-components-input-bg-normal motion-reduce:transition-none',
-  ],
+  [textControlGroupClassName, 'group/number-field items-stretch overflow-hidden'],
   {
     variants: {
       size: {

packages/dify-ui/src/radio-group/index.tsx

@@ -6,6 +6,7 @@ import type * as React from 'react'
 import { Radio as BaseRadio } from '@base-ui/react/radio'
 import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group'
 import { cn } from '../cn'
+import { checkedControlFocusClassName } from '../form-control-shared'
 import { resolveClassName } from '../internals/resolve-class-name'
 
 type RadioGroupProps<Value = string> = BaseRadioGroupNS.Props<Value>
@@ -37,7 +38,6 @@ function RadioControl({ className, ...props }: RadioControlProps) {
           'inline-flex size-4 shrink-0 touch-manipulation items-center justify-center rounded-full p-0 transition-colors motion-reduce:transition-none',
           'border border-components-radio-border bg-components-radio-bg shadow-xs shadow-shadow-shadow-3',
           'hover:border-components-radio-border-hover hover:bg-components-radio-bg-hover',
-          'focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-offset-0 focus-visible:outline-hidden',
           'data-checked:border-[5px] data-checked:border-components-radio-border-checked data-checked:hover:border-components-radio-border-checked-hover',
           'data-disabled:cursor-not-allowed data-disabled:border-components-radio-border-disabled data-disabled:bg-components-radio-bg-disabled',
           'data-disabled:hover:border-components-radio-border-disabled data-disabled:hover:bg-components-radio-bg-disabled',
@@ -60,7 +60,7 @@ function Radio<Value = string>({ className, ...props }: RadioProps<Value>) {
           'inline-flex size-4 shrink-0 touch-manipulation items-center justify-center rounded-full p-0 transition-colors motion-reduce:transition-none',
           'border border-components-radio-border bg-components-radio-bg shadow-xs shadow-shadow-shadow-3',
           'hover:border-components-radio-border-hover hover:bg-components-radio-bg-hover',
-          'focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-offset-0 focus-visible:outline-hidden',
+          checkedControlFocusClassName,
           'data-checked:border-[5px] data-checked:border-components-radio-border-checked data-checked:hover:border-components-radio-border-checked-hover',
           'data-disabled:cursor-not-allowed data-disabled:border-components-radio-border-disabled data-disabled:bg-components-radio-bg-disabled',
           'data-disabled:hover:border-components-radio-border-disabled data-disabled:hover:bg-components-radio-bg-disabled',

packages/dify-ui/src/switch/index.tsx

@@ -6,13 +6,16 @@ import type * as React from 'react'
 import { Switch as BaseSwitch } from '@base-ui/react/switch'
 import { cva } from 'class-variance-authority'
 import { cn } from '../cn'
+import { checkedControlFocusClassName } from '../form-control-shared'
 import { resolveClassName } from '../internals/resolve-class-name'
 
-const switchRootStateClassName =
-  'bg-components-toggle-bg-unchecked hover:bg-components-toggle-bg-unchecked-hover data-checked:bg-components-toggle-bg data-checked:hover:bg-components-toggle-bg-hover data-disabled:cursor-not-allowed data-disabled:bg-components-toggle-bg-unchecked-disabled data-disabled:hover:bg-components-toggle-bg-unchecked-disabled data-disabled:data-checked:bg-components-toggle-bg-disabled data-disabled:data-checked:hover:bg-components-toggle-bg-disabled'
-
 const switchRootVariants = cva(
-  `group relative inline-flex shrink-0 cursor-pointer touch-manipulation items-center outline-hidden transition-colors duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-state-accent-solid motion-reduce:transition-none ${switchRootStateClassName}`,
+  [
+    'group relative inline-flex shrink-0 cursor-pointer touch-manipulation items-center transition-colors duration-200 ease-in-out motion-reduce:transition-none',
+    checkedControlFocusClassName,
+    'bg-components-toggle-bg-unchecked hover:bg-components-toggle-bg-unchecked-hover data-checked:bg-components-toggle-bg data-checked:hover:bg-components-toggle-bg-hover',
+    'data-disabled:cursor-not-allowed data-disabled:bg-components-toggle-bg-unchecked-disabled data-disabled:hover:bg-components-toggle-bg-unchecked-disabled data-disabled:data-checked:bg-components-toggle-bg-disabled data-disabled:data-checked:hover:bg-components-toggle-bg-disabled',
+  ],
   {
     variants: {
       size: {

packages/dify-ui/src/textarea/index.tsx

@@ -6,34 +6,21 @@ import type * as React from 'react'
 import { Field as BaseField } from '@base-ui/react/field'
 import { cva } from 'class-variance-authority'
 import { cn } from '../cn'
-import { textControlFocusClassName } from '../form-control-shared'
+import { textControlClassName } from '../form-control-shared'
 import { resolveClassName } from '../internals/resolve-class-name'
 
-const textareaVariants = cva(
-  [
-    'min-h-20 w-full appearance-none overflow-auto border border-transparent bg-components-input-bg-normal text-components-input-text-filled caret-primary-600 outline-hidden transition-[background-color,border-color]',
-    'placeholder:text-components-input-text-placeholder',
-    'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
-    textControlFocusClassName,
-    'data-invalid:border-components-input-border-destructive data-invalid:bg-components-input-bg-destructive',
-    'read-only:cursor-default read-only:shadow-none read-only:hover:border-transparent read-only:hover:bg-components-input-bg-normal read-only:focus:border-transparent read-only:focus:bg-components-input-bg-normal read-only:focus:shadow-none read-only:focus-visible:ring-2 read-only:focus-visible:ring-state-accent-solid',
-    'disabled:cursor-not-allowed disabled:border-transparent disabled:bg-components-input-bg-disabled disabled:text-components-input-text-filled-disabled',
-    'disabled:hover:border-transparent disabled:hover:bg-components-input-bg-disabled',
-    'motion-reduce:transition-none',
-  ],
-  {
-    variants: {
-      size: {
-        small: 'rounded-md px-2 py-1 system-xs-regular',
-        medium: 'rounded-lg px-3 py-2 system-sm-regular',
-        large: 'rounded-[10px] px-4 py-2 system-md-regular',
-      },
-    },
-    defaultVariants: {
-      size: 'medium',
+const textareaVariants = cva([textControlClassName, 'min-h-20 overflow-auto'], {
+  variants: {
+    size: {
+      small: 'rounded-md px-2 py-1 system-xs-regular',
+      medium: 'rounded-lg px-3 py-2 system-sm-regular',
+      large: 'rounded-[10px] px-4 py-2 system-md-regular',
     },
   },
-)
+  defaultVariants: {
+    size: 'medium',
+  },
+})
 
 type TextareaValue = string | number
 type TextareaChangeEventDetails = BaseFieldNS.Control.ChangeEventDetails

web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx

@@ -119,13 +119,13 @@ const PrePopulate: FC<Props> = ({
     <div
       className={cn(
         'relative min-h-20 rounded-lg border border-transparent bg-components-input-bg-normal pb-1',
-        isFocus && 'border-components-input-border-active bg-components-input-bg-active shadow-xs',
+        isFocus && 'bg-components-input-bg-active ring-2 ring-state-accent-solid',
       )}
     >
       <Textarea
         aria-label={t(($) => $[`${i18nPrefix}.staticContent`], { ns: 'workflowHumanInput' })}
         value={value || ''}
-        className="h-10.75 min-h-10.75 rounded-none border-none bg-transparent px-3 hover:bg-transparent focus:bg-transparent focus:shadow-none"
+        className="h-10.75 min-h-10.75 rounded-none border-none bg-transparent px-3 hover:bg-transparent focus:bg-transparent focus:ring-0"
         onValueChange={(value) => onValueChange?.(value)}
         onFocus={() => {
           setOnPlaceholderClicked(true)

web/app/components/goto-anything/index.tsx

@@ -469,7 +469,7 @@ export function GotoAnything() {
             >
               <AutocompleteInputGroup
                 size="medium"
-                className="h-auto shrink-0 gap-3 rounded-none border-0 border-b border-divider-subtle bg-components-panel-bg-blur px-4 py-3 shadow-none focus-within:border-state-accent-solid data-focused:border-state-accent-solid"
+                className="h-auto shrink-0 gap-3 rounded-none border-0 bg-components-panel-bg-blur px-4 py-3 has-[input:focus]:ring-0"
               >
                 <span aria-hidden className="i-ri-search-line size-4 text-text-quaternary" />
                 <div className="flex min-w-0 flex-1 items-center gap-2">
@@ -494,7 +494,7 @@ export function GotoAnything() {
 
               <AutocompleteStatus className="sr-only">{autocompleteStatus}</AutocompleteStatus>
 
-              <ScrollArea className="h-120 min-h-0 shrink overflow-hidden">
+              <ScrollArea className="h-120 min-h-0 shrink overflow-hidden border-t border-divider-subtle">
                 <ScrollAreaViewport
                   tabIndex={-1}
                   aria-busy={isLoading || undefined}

web/app/components/header/account-setting/members-page/invite-modal/email-recipients-field.tsx

@@ -175,7 +175,7 @@ export function EmailRecipientsField({
         className={cn(
           'flex max-h-24 min-h-10 flex-wrap content-start items-center gap-1 overflow-y-auto rounded-lg border border-transparent bg-components-input-bg-normal px-2 py-1.5 transition-[background-color,border-color,box-shadow]',
           'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
-          'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
+          'focus-within:bg-components-input-bg-active has-[input:focus]:border-transparent has-[input:focus]:ring-2 has-[input:focus]:ring-state-accent-solid',
           'group-data-invalid/field:border-components-input-border-destructive group-data-invalid/field:bg-components-input-bg-destructive',
           disabled &&
             'cursor-not-allowed bg-components-input-bg-disabled hover:border-transparent hover:bg-components-input-bg-disabled',
@@ -261,7 +261,7 @@ export function EmailRecipientsField({
           }
           value={draft}
           className={cn(
-            'h-6 w-0 flex-1 rounded-none border-0 bg-transparent p-0 shadow-none hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent focus:shadow-none disabled:bg-transparent disabled:hover:bg-transparent data-invalid:border-transparent data-invalid:bg-transparent',
+            'h-6 w-0 flex-1 rounded-none border-0 bg-transparent p-0 shadow-none hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent focus:ring-0 disabled:bg-transparent disabled:hover:bg-transparent data-invalid:border-transparent data-invalid:bg-transparent',
             recipients.length > 0 ? 'min-w-12' : 'min-w-40',
           )}
           onChange={(event) => {

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx

@@ -71,7 +71,6 @@ const ConditionNumber = ({
         >
           <NumberFieldGroup className="border-0 bg-transparent hover:bg-transparent">
             <NumberFieldInput
-              className="rounded-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-inset"
               inputMode="decimal"
               aria-label={t(($) => $['nodes.knowledgeRetrieval.metadata.panel.placeholder'], {
                 ns: 'workflowModels',

web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx

@@ -127,7 +127,7 @@ const renderInputCell = (
       disabled={readonly}
       className={cn(
         'h-6 min-w-0 rounded-none border-0 bg-transparent p-0 shadow-none',
-        'hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent',
+        'hover:border-transparent hover:bg-transparent focus:border-transparent focus:bg-transparent focus:ring-0',
         'system-sm-regular text-text-secondary placeholder:text-text-quaternary',
       )}
     />
@@ -317,7 +317,7 @@ const GenericTable: FC<GenericTableProps> = ({
                   <div
                     key={column.key}
                     className={cn(
-                      'shrink-0 pl-3',
+                      'shrink-0 pl-3 has-[input:focus]:ring-2 has-[input:focus]:ring-state-accent-solid has-[input:focus]:ring-inset',
                       column.width,
                       // Add right border except for last column
                       columnIndex < columns.length - 1 && 'border-r border-divider-regular',

web/app/components/workflow/variable-inspect/display-content.tsx

@@ -69,8 +69,7 @@ export function DisplayContent(props: DisplayContentProps) {
     <div
       className={cn(
         'flex h-full flex-col rounded-[10px] bg-components-input-bg-normal',
-        isFocused &&
-          'bg-components-input-bg-active outline-1 outline-components-input-border-active outline-solid',
+        isFocused && 'bg-components-input-bg-active ring-2 ring-state-accent-solid ring-inset',
         className,
       )}
     >
@@ -113,7 +112,7 @@ export function DisplayContent(props: DisplayContentProps) {
               })}
               readOnly={readonly}
               disabled={readonly}
-              className="h-full border-none bg-transparent p-0 text-text-secondary hover:bg-transparent focus:bg-transparent focus:shadow-none"
+              className="h-full border-none bg-transparent p-0 text-text-secondary hover:bg-transparent focus:bg-transparent focus:ring-0"
               value={mdString}
               onValueChange={(value) => handleTextChange?.(value)}
               onFocus={() => setIsFocused(true)}

web/features/agent-v2/agent-detail/configure/components/orchestrate/advanced/env.tsx

@@ -172,7 +172,7 @@ function EnvEditorInput({
     <Input
       ref={inputRef}
       aria-label={ariaLabel}
-      className="h-full rounded-none bg-transparent px-3 py-0 system-xs-regular text-text-secondary shadow-none hover:bg-state-base-hover focus-visible:bg-state-base-hover"
+      className="h-full rounded-none bg-transparent px-3 py-0 system-xs-regular text-text-secondary shadow-none ring-inset hover:bg-state-base-hover focus-visible:bg-state-base-hover"
       placeholder={placeholder}
       value={value}
       onValueChange={onValueChange}

web/features/agent-v2/roster/components/roster-toolbar.tsx

@@ -78,7 +78,7 @@ function RosterSearchFilter() {
   return (
     <SearchInput
       aria-label={t(($) => $['roster.searchLabel'], { ns: 'agentRoster' })}
-      className="h-8 w-full min-w-0 sm:w-50 [&_button]:text-text-secondary [&_input::placeholder]:text-text-secondary"
+      className="h-8 w-full min-w-0 sm:w-50"
       placeholder={t(($) => $['roster.searchPlaceholder'], { ns: 'agentRoster' })}
       value={keyword}
       onValueChange={(value) => {