(inputs): make suffixes and affixes in consistency

src/frontend/src/components/ui/input/text-input-variant.ts

@@ -14,7 +14,7 @@ export const affixEmbeddedButtonClasses =
 export const affixIconOnlyCellPaddingClasses =
   "has-[button.size-7]:px-1.5 has-[button.size-9]:px-2";
 
-/** Affix cells: muted box by default; ghost uses transparent chrome with tight padding toward the input. */
+/** Affix cells: transparent by default; ghost uses tighter padding toward the input. */
 export function textInputAffixCellClasses(
   side: "prefix" | "suffix",
   ghostWithAffixes: boolean,
@@ -27,7 +27,7 @@ export function textInputAffixCellClasses(
         ? "shrink-0 bg-transparent pl-0 pr-1.5"
         : "shrink-0 bg-transparent pl-2 pr-0.5"
       : cn(
-          "px-3 bg-muted",
+          "px-3 bg-transparent",
           affixIconOnlyCellPaddingClasses,
           side === "prefix"
             ? "rounded-tl-fields rounded-bl-fields"

src/frontend/src/widgets/inputs/BoolInputWidget.tsx

@@ -17,6 +17,7 @@ import {
   boolInputRowMinHeightVariant,
 } from "@/components/ui/input/bool-input-variant";
 import { EMPTY_ARRAY } from "@/lib/constants";
+import { textInputAffixCellClasses } from "@/components/ui/input/text-input-variant";
 
 type VariantType = "Checkbox" | "Switch" | "Toggle";
 
@@ -361,15 +362,11 @@ export const BoolInputWidget: React.FC<BoolInputWidgetProps> = ({
           )}
         >
           {hasPrefix && (
-            <div className="flex items-center px-3 bg-muted text-muted-foreground border-r border-input rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]">
-              {prefixContent}
-            </div>
+            <div className={textInputAffixCellClasses("prefix", false)}>{prefixContent}</div>
           )}
           <div className="flex-1 px-3 py-2">{variantContent}</div>
           {hasSuffix && (
-            <div className="flex items-center px-3 bg-muted text-muted-foreground border-l border-input rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]">
-              {suffixContent}
-            </div>
+            <div className={textInputAffixCellClasses("suffix", false)}>{suffixContent}</div>
           )}
         </div>
       ) : (

src/frontend/src/widgets/inputs/ColorInputWidget.tsx

@@ -18,7 +18,7 @@ import {
   colorInputPickerVariant,
 } from "@/components/ui/input/color-input-variant";
 import { Densities } from "@/types/density";
-import { xIconVariant } from "@/components/ui/input/text-input-variant";
+import { textInputAffixCellClasses, xIconVariant } from "@/components/ui/input/text-input-variant";
 import { EMPTY_ARRAY } from "@/lib/constants";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
@@ -374,13 +374,13 @@ export const ColorInputWidget: React.FC<ColorInputWidgetProps> = ({
             )}
           >
             {hasPrefix && (
-              <div className="flex items-center px-3 bg-muted text-muted-foreground border-r border-input rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]">
+              <div className={textInputAffixCellClasses("prefix", Boolean(ghost))}>
                 {prefixContent}
               </div>
             )}
             {textContent}
             {hasSuffix && (
-              <div className="flex items-center px-3 bg-muted text-muted-foreground border-l border-input rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]">
+              <div className={textInputAffixCellClasses("suffix", Boolean(ghost))}>
                 {suffixContent}
               </div>
             )}
@@ -563,13 +563,13 @@ export const ColorInputWidget: React.FC<ColorInputWidgetProps> = ({
           )}
         >
           {hasPrefix && (
-            <div className="flex items-center px-3 bg-muted text-muted-foreground border-r border-input rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]">
+            <div className={textInputAffixCellClasses("prefix", Boolean(ghost))}>
               {prefixContent}
             </div>
           )}
           <div className="flex flex-1 items-center">{defaultContent}</div>
           {hasSuffix && (
-            <div className="flex items-center px-3 bg-muted text-muted-foreground border-l border-input rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]">
+            <div className={textInputAffixCellClasses("suffix", Boolean(ghost))}>
               {suffixContent}
             </div>
           )}

src/frontend/src/widgets/inputs/DateRangeInputWidget.tsx

@@ -23,10 +23,7 @@ import {
   dateRangeInputIconVariant,
   dateRangeInputTextVariant,
 } from "@/components/ui/input/date-range-input-variant";
-import {
-  affixEmbeddedButtonClasses,
-  affixIconOnlyCellPaddingClasses,
-} from "@/components/ui/input/text-input-variant";
+import { textInputAffixCellClasses } from "@/components/ui/input/text-input-variant";
 import { EMPTY_ARRAY } from "@/lib/constants";
 import { DateRangePresets } from "./DateRangePresets";
 
@@ -330,29 +327,11 @@ export const DateRangeInputWidget: React.FC<DateRangeInputWidgetProps> = ({
           )}
         >
           {hasPrefix && (
-            <div
-              className={cn(
-                "flex items-center px-3 bg-muted text-muted-foreground rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]",
-                affixEmbeddedButtonClasses,
-                affixIconOnlyCellPaddingClasses,
-                !isOpen && "border-r border-input",
-              )}
-            >
-              {prefixContent}
-            </div>
+            <div className={textInputAffixCellClasses("prefix", false)}>{prefixContent}</div>
           )}
           <div className="flex-1 relative w-full">{triggerContent}</div>
           {hasSuffix && (
-            <div
-              className={cn(
-                "flex items-center px-3 bg-muted text-muted-foreground rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]",
-                affixEmbeddedButtonClasses,
-                affixIconOnlyCellPaddingClasses,
-                !isOpen && "border-l border-input",
-              )}
-            >
-              {suffixContent}
-            </div>
+            <div className={textInputAffixCellClasses("suffix", false)}>{suffixContent}</div>
           )}
         </div>
       ) : (

src/frontend/src/widgets/inputs/DateTimeInputWidget/DateTimeInputWidget.tsx

@@ -19,10 +19,7 @@ import { WeekVariant } from "./WeekVariant";
 import { YearVariant } from "./YearVariant";
 import { EMPTY_ARRAY } from "@/lib/constants";
 import { cn } from "@/lib/utils";
-import {
-  affixEmbeddedButtonClasses,
-  affixIconOnlyCellPaddingClasses,
-} from "@/components/ui/input/text-input-variant";
+import { textInputAffixCellClasses } from "@/components/ui/input/text-input-variant";
 
 const VariantComponents: Record<
   VariantType,
@@ -173,15 +170,7 @@ export const DateTimeInputWidget: React.FC<DateTimeInputWidgetProps> = ({
       )}
     >
       {hasPrefix && (
-        <div
-          className={cn(
-            "flex items-center px-3 bg-muted text-muted-foreground border-r border-input rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]",
-            affixEmbeddedButtonClasses,
-            affixIconOnlyCellPaddingClasses,
-          )}
-        >
-          {prefixContent}
-        </div>
+        <div className={textInputAffixCellClasses("prefix", false)}>{prefixContent}</div>
       )}
       <div
         className={cn(
@@ -193,15 +182,7 @@ export const DateTimeInputWidget: React.FC<DateTimeInputWidgetProps> = ({
         {variantElement}
       </div>
       {hasSuffix && (
-        <div
-          className={cn(
-            "flex items-center px-3 bg-muted text-muted-foreground border-l border-input rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]",
-            affixEmbeddedButtonClasses,
-            affixIconOnlyCellPaddingClasses,
-          )}
-        >
-          {suffixContent}
-        </div>
+        <div className={textInputAffixCellClasses("suffix", false)}>{suffixContent}</div>
       )}
     </div>
   );

src/frontend/src/widgets/inputs/FeedbackInputWidget.tsx

@@ -8,6 +8,7 @@ import { cn } from "@/lib/utils";
 import { useOptimisticValue } from "./shared/useOptimisticValue";
 import { Densities } from "@/types/density";
 import { EMPTY_ARRAY } from "@/lib/constants";
+import { textInputAffixCellClasses } from "@/components/ui/input/text-input-variant";
 
 interface FeedbackInputWidgetProps {
   id: string;
@@ -214,15 +215,11 @@ export const FeedbackInputWidget: React.FC<FeedbackInputWidgetProps> = ({
       )}
     >
       {hasPrefix && (
-        <div className="flex items-center px-3 bg-muted text-muted-foreground border-r border-input rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]">
-          {prefixContent}
-        </div>
+        <div className={textInputAffixCellClasses("prefix", false)}>{prefixContent}</div>
       )}
       <div className="flex-1 px-3 py-2">{feedbackContent}</div>
       {hasSuffix && (
-        <div className="flex items-center px-3 bg-muted text-muted-foreground border-l border-input rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]">
-          {suffixContent}
-        </div>
+        <div className={textInputAffixCellClasses("suffix", false)}>{suffixContent}</div>
       )}
     </div>
   );

src/frontend/src/widgets/inputs/IconInputWidget.tsx

@@ -12,7 +12,7 @@ import { icons } from "lucide-react";
 import { X, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Densities } from "@/types/density";
-import { xIconVariant } from "@/components/ui/input/text-input-variant";
+import { textInputAffixCellClasses, xIconVariant } from "@/components/ui/input/text-input-variant";
 import {
   iconInputTriggerVariant,
   iconInputIconVariant,
@@ -321,15 +321,11 @@ export const IconInputWidget: React.FC<IconInputWidgetProps> = ({
       )}
     >
       {hasPrefix && (
-        <div className="flex items-center px-3 bg-muted text-muted-foreground border-r border-input rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]">
-          {prefixContent}
-        </div>
+        <div className={textInputAffixCellClasses("prefix", false)}>{prefixContent}</div>
       )}
       <div className="flex-1 px-3 py-2">{iconContent}</div>
       {hasSuffix && (
-        <div className="flex items-center px-3 bg-muted text-muted-foreground border-l border-input rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]">
-          {suffixContent}
-        </div>
+        <div className={textInputAffixCellClasses("suffix", false)}>{suffixContent}</div>
       )}
     </div>
   );

src/frontend/src/widgets/inputs/NumberInputWidget.tsx

@@ -8,7 +8,7 @@ import { inputStyles, getWidth } from "@/lib/styles";
 import { InvalidIcon } from "@/components/InvalidIcon";
 import { X } from "lucide-react";
 import { Densities } from "@/types/density";
-import { xIconVariant } from "@/components/ui/input/text-input-variant";
+import { textInputAffixCellClasses, xIconVariant } from "@/components/ui/input/text-input-variant";
 import { formatBytes } from "@/lib/formatters";
 import { EMPTY_ARRAY } from "@/lib/constants";
 
@@ -220,15 +220,11 @@ const SliderVariant = memo(
         )}
       >
         {hasPrefix && (
-          <div className="flex items-center px-3 bg-muted text-muted-foreground border-r border-input rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]">
-            {prefixContent}
-          </div>
+          <div className={textInputAffixCellClasses("prefix", false)}>{prefixContent}</div>
         )}
         <div className="flex-1 px-3">{sliderContent}</div>
         {hasSuffix && (
-          <div className="flex items-center px-3 bg-muted text-muted-foreground border-l border-input rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]">
-            {suffixContent}
-          </div>
+          <div className={textInputAffixCellClasses("suffix", false)}>{suffixContent}</div>
         )}
       </div>
     );
@@ -340,14 +336,7 @@ const NumberVariant = memo(
       >
         {/* Prefix with background and separator */}
         {hasPrefix && (
-          <div
-            className={cn(
-              "flex items-center px-3 bg-muted text-muted-foreground rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]",
-              !isFocused && "border-r border-input",
-            )}
-          >
-            {prefixContent}
-          </div>
+          <div className={textInputAffixCellClasses("prefix", false)}>{prefixContent}</div>
         )}
 
         <div className="relative flex-1">
@@ -398,14 +387,7 @@ const NumberVariant = memo(
 
         {/* Suffix with background and separator */}
         {hasSuffix && (
-          <div
-            className={cn(
-              "flex items-center px-3 bg-muted text-muted-foreground rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]",
-              !isFocused && "border-l border-input",
-            )}
-          >
-            {suffixContent}
-          </div>
+          <div className={textInputAffixCellClasses("suffix", false)}>{suffixContent}</div>
         )}
       </div>
     );

src/frontend/src/widgets/inputs/SelectMultiVariant.tsx

@@ -4,7 +4,7 @@ import { MultipleSelector, Option as MultiSelectOption } from "@/components/ui/m
 import { Loader2, X } from "lucide-react";
 import { InvalidIcon } from "@/components/InvalidIcon";
 import { logger } from "@/lib/logger";
-import { xIconVariant } from "@/components/ui/input/text-input-variant";
+import { textInputAffixCellClasses, xIconVariant } from "@/components/ui/input/text-input-variant";
 import { SelectInputWidgetProps, Option } from "./select-types";
 import { convertValuesToOriginalType } from "./select-utils";
 import { getWidth } from "@/lib/styles";
@@ -226,13 +226,13 @@ export const SelectMultiVariant: React.FC<SelectInputWidgetProps> = ({
           )}
         >
           {hasPrefix && (
-            <div className="flex items-center px-3 bg-muted text-muted-foreground border-r border-input rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]">
+            <div className={textInputAffixCellClasses("prefix", Boolean(ghost))}>
               {prefixContent}
             </div>
           )}
           <div className="flex-1 relative w-full">{multiSelectorContent}</div>
           {hasSuffix && (
-            <div className="flex items-center px-3 bg-muted text-muted-foreground border-l border-input rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]">
+            <div className={textInputAffixCellClasses("suffix", Boolean(ghost))}>
               {suffixContent}
             </div>
           )}

src/frontend/src/widgets/inputs/SelectSingleVariant.tsx

@@ -15,7 +15,7 @@ import { Input } from "@/components/ui/input";
 import { Search, Loader2, X } from "lucide-react";
 import Icon from "@/components/Icon";
 import { InvalidIcon } from "@/components/InvalidIcon";
-import { xIconVariant } from "@/components/ui/input/text-input-variant";
+import { textInputAffixCellClasses, xIconVariant } from "@/components/ui/input/text-input-variant";
 import { getWidth, inputStyles } from "@/lib/styles";
 import { SelectInputWidgetProps } from "./select-types";
 import { useSelectValueHandler } from "./select-utils";
@@ -400,23 +400,13 @@ export const SelectSingleVariant: React.FC<SelectInputWidgetProps> = ({
           )}
         >
           {hasPrefix && (
-            <div
-              className={cn(
-                "flex items-center px-3 bg-muted text-muted-foreground rounded-tl-[var(--radius-fields)] rounded-bl-[var(--radius-fields)]",
-                !isOpen && "border-r border-input",
-              )}
-            >
+            <div className={textInputAffixCellClasses("prefix", Boolean(ghost))}>
               {prefixContent}
             </div>
           )}
           <div className="flex-1 relative w-full">{selectContent}</div>
           {hasSuffix && (
-            <div
-              className={cn(
-                "flex items-center px-3 bg-muted text-muted-foreground rounded-tr-[var(--radius-fields)] rounded-br-[var(--radius-fields)]",
-                !isOpen && "border-l border-input",
-              )}
-            >
+            <div className={textInputAffixCellClasses("suffix", Boolean(ghost))}>
               {suffixContent}
             </div>
           )}

src/frontend/src/widgets/inputs/TextInputWidget/__tests__/TextInputWidget.test.ts

@@ -36,9 +36,15 @@ vi.mock("@/components/ui/input", () => {
   };
 });
 
+const { mockTextInputAffixCellClasses } = vi.hoisted(() => ({
+  mockTextInputAffixCellClasses: vi.fn<
+    (side: "prefix" | "suffix", ghostWithAffixes: boolean) => string
+  >(() => ""),
+}));
+
 vi.mock("@/components/ui/input/text-input-variant", () => ({
   textInputSizeVariant: () => "",
-  textInputAffixCellClasses: () => "",
+  textInputAffixCellClasses: mockTextInputAffixCellClasses,
   searchIconVariant: () => "",
   xIconVariant: () => "",
 }));
@@ -542,4 +548,17 @@ describe("SearchVariant disabled/invalid container styles", () => {
     expect(borderedContainer.className).not.toContain("opacity-50");
     expect(borderedContainer.className).not.toContain("border-destructive");
   });
+
+  it("uses transparent affix chrome for prefix and suffix slots", () => {
+    mockTextInputAffixCellClasses.mockClear();
+    renderSearchVariant({
+      slots: {
+        Prefix: [React.createElement("span", { key: "prefix" }, "in:")],
+        Suffix: [React.createElement("span", { key: "suffix" }, "v")],
+      },
+    });
+
+    expect(mockTextInputAffixCellClasses).toHaveBeenCalledWith("prefix", true);
+    expect(mockTextInputAffixCellClasses).toHaveBeenCalledWith("suffix", true);
+  });
 });