@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.131

package/src/components/Field/field-wrapper.tsx

@@ -1,19 +1,24 @@
+// @internal — DS-internal 單元(Field 家族 chrome 基底,consumer 用 Field/Input 等 wrapper 不直用);不隨 index.ts re-export 進 npm public surface。
 // @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.
 import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
 
 // ── Field Wrapper Styles ────────────────────────────────────────────────────
 // 所有 Field 元件共用的 input wrapper 樣式。
 //
-// 4 種模式(2026-05-05 expand):
+// 4 種模式(2026-05-05 expand;2026-07-16 round16 `display`→`view` 更名 + Model A):
 //   edit     — bg-surface, border, hover/focus 回饋(可編輯 input)
-//   display  — 純展示(無 input chrome、無 affordance);語意「read-only 內容,展示給人看」。
-//              對齊 Carbon read-only / PatternFly inline-edit hidden-input。
-//   readonly — bg-disabled(neutral-2), 無邊框, 文字正常色(input chrome 但鎖定)
+//   view     — 純展示值(非表單);**Model A = edit 幾何減 chrome**(透明 bg/border,**保留 px 內距 + 高度**),
+//              故 read↔edit 零跳。對齊 Atlassian inline-edit(read=edit 幾何)+ Bootstrap plaintext(留 padding)。
+//   readonly — bg-readonly(neutral-2), 無邊框, 文字正常色(input chrome 但鎖定;token 獨立於 disabled)
 //   disabled — bg-disabled(neutral-2), 無邊框, 文字灰化
 //
-// 2 種視覺外殼(variant):
-//   default — 完整 chrome(form input 場景)
-//   bare    — 透明 chrome(cell-as-input substrate / Toolbar inline editing)
+// 2 種視覺外殼(variant;2026-07-09 `bare` 退役後):
+//   default — 完整 chrome(form input 場景);view×default = edit 幾何減 chrome(留 px/py)
+//   naked   — cell-as-input substrate(DataTable);**edit×naked 自畫 border-based state machine**
+//              (border-border → hover:border-border-hover → focus-within:border-primary → error 紅框);
+//              view×naked = bare(host TD 給 padding)。**view×default ≠ view×naked**(不 collapse)。
+//              (2026-07-16 cell disabled 態廢除 → readonly×naked/disabled×naked 死格已移除)
 //
 // 高度:固定 h = field-height token(rem),與 Button 共用同一組 token。
 
@@ -32,7 +37,9 @@ export const fieldWrapperStyles = cva(
     // 修一處全 Field family 跟動(Input/Select/Combobox/DatePicker/TimePicker/LinkInput/
     // Textarea/NumberInput/PeoplePicker)— 對齊 M17/M19/M23 一處 SSOT + data-table.spec.md:233
     // 「禁硬裁無 ellipsis」DS canonical + MUI X DataGrid / Ant Table column.ellipsis 共識。
-    'inline-flex items-center w-full min-w-0 rounded-md',
+    // 2026-07-08 width 軸:`w-full` 從 base 移入 `width` variant(fill = 原行為 default,
+    // 零回歸;hug = w-fit 依內容收縮)。詳 field-controls.spec.md「寬度軸(width: fill / hug)」。
+    'inline-flex items-center min-w-0 rounded-md',
     'text-foreground font-normal',
     'transition-colors duration-150',
   ],
@@ -40,26 +47,49 @@ export const fieldWrapperStyles = cva(
     variants: {
       mode: {
         edit: '',
-        display: '',
+        view: '',
         readonly: '',
         disabled: '',
       },
       variant: {
         // default — 完整 Field wrapper chrome(bg-surface、明顯 border、hover/focus 回饋)
         default: '',
-        // bare — 透明 variant,hover / focus 才出現 border。適用 Toolbar inline editing
-        // (FileViewer zoom input / chart config / rich text toolbar number input 等)。
-        // 世界級對照:VS Code settings / Figma toolbar number / Notion prop input。
-        bare: '',
-        // naked — 完全無 variant,hover/focus 也不出 border。適用 cell-as-input
-        // (host cell 自管 border + focus visual,內部 input 純文字承載)。
+        // naked — cell-as-input(Notion / Airtable / Excel canonical)。**edit×naked 自畫** border +
+        // hover:border-border-hover + focus-within:border-primary + error 紅框(v14 border-based state
+        // machine,見下方 compoundVariants L182-196);view×naked 用 transparent
+        // border 由 host cell 提供視覺邊框,內部 input 純文字承載。
         // 世界級對照:Airtable / Notion / Excel / Google Sheets cell editing。
+        // (2026-07-09 `bare` variant 已退役 — 見 field-types.ts FieldVariant 註解;
+        //  被 import 的 `bareInputStyles` 常數是內層 input 重置樣式、與此不同物、保留。)
         naked: '',
       },
       size: {
-        sm: 'text-body h-field-sm px-3 gap-2',
-        md: 'text-body h-field-md px-3 gap-2',
-        lg: 'text-body-lg h-field-lg px-3 gap-2',
+        sm: 'text-body h-field-sm px-[var(--field-px)] gap-2',
+        md: 'text-body h-field-md px-[var(--field-px)] gap-2',
+        lg: 'text-body-lg h-field-lg px-[var(--field-px)] gap-2',
+      },
+      // width(2026-07-08 user 拍板,正交軸):寬度軸 — 只改寬度,chrome / hover / focus /
+      // error / mode compoundVariants 全部不動(user verbatim「框線和互動和樣式都不變,
+      // 只有寬度有變而已 … 把 field 和 value 的寬度都改成 hug」)。
+      //   fill(default)— `w-full` 填滿容器 = 與移軸前 base 完全等價(零回歸不變量)
+      //   hug — `w-fit` 依內容收縮:value 寬 + 各 slot 元素寬 + gap + field 內 padding;
+      //         `max-w-full` 保證窄容器不溢出(min-w-0 保留,仍可 truncate)
+      // Benchmark(M22):shadcn v4 SelectTrigger 預設 `w-fit`
+      //   https://raw.githubusercontent.com/shadcn-ui/ui/main/apps/v4/registry/new-york-v4/ui/select.tsx
+      //   Radix Select Trigger intrinsic sizing https://www.radix-ui.com/primitives/docs/components/select
+      width: {
+        fill: 'w-full',
+        hug: 'w-fit max-w-full',
+      },
+      // error(2026-07-04 Q1 拍板,SSOT 集中):原散在各控件的 error border classes 因
+      // focus-within:!border-primary(!important)被蓋 = dead code(聚焦永遠藍)。
+      // Benchmark 實查證偽舊宣稱:MUI(紅框加粗)/ Ant(紅框紅 glow)/ Polaris(紅 border
+      // + 獨立藍 focus ring)聚焦時 error 紅皆保留;唯一切藍的 Carbon 靠 in-field 紅 icon 補償。
+      // DS 邊框是唯一 error 載體 → error 勝 focus 的「顏色」通道。錯誤清除(edit-clears-error,
+      // useFormValidation)後自然回 focus 藍。
+      error: {
+        true: '',
+        false: '',
       },
     },
     // mode x variant 交叉:visual chrome 由 compoundVariants 決定
@@ -90,23 +120,42 @@ export const fieldWrapperStyles = cva(
           // 副作用 — Ant 風「選後藍 / 取消灰」自動達成:
           //   - 選 option close popover → Radix focus return to trigger → focus-within fires → 藍
           //   - 點外取消 close popover → focus 移外 → focus-within 不 fire → 灰
-          'focus-within:!border-primary focus-within:hover:!border-primary',
+          //
+          // 2026-07-04 Q1 拍板修訂:「focus dominates everything」對 error 讓位(見 error variant
+          // 註解)— focus 藍只在 error:false compound(下方),error:true 走 error compound 紅。
           'data-[state=open]:border-border-hover',
         ],
       },
+      { mode: 'edit', variant: 'default', error: false, className: 'focus-within:!border-primary focus-within:hover:!border-primary' },
       {
-        mode: 'display',
+        // 2026-07-16 round16 Model A(user GO,推翻 2026-05-13 Path Ⅰ 的 `!px-0 !py-0`):
+        // view×default = **edit 幾何減 chrome** — 保留 size 軸的 `px-[var(--field-px)]` + `h-field-*`,
+        // 只拔 border/bg(透明)。理由 = view 用在 cell/inline-edit/詳情,要對齊的是「edit 的值位置」
+        // (非 label 左緣),故水平垂直都留 → view 與 edit 同一顆控件、只差 chrome → read↔edit 零跳。
+        // 世界級對照:Atlassian inline-edit(read=edit 幾何,靠容器負邊距對齊)+ Bootstrap
+        // `.form-control-plaintext`(`padding: $input-padding-y 0` 留 padding);我們比 Bootstrap 更徹底
+        // (連水平 px 也留),因用例是 align-to-edit 非 align-to-label。詳 field-controls.spec.md「軸一 view mode」
+        // + planning/2026-07-15-inline-edit-field-mode-remediation.md round16。
+        // ⚠️ view×default ≠ view×naked:naked = bare(cell substrate,host TD 給 padding);default = 留幾何。
+        mode: 'view',
         variant: 'default',
-        // 2026-05-13 Q3 Path Ⅰ(user 拍板 Path Ⅰ 全 zero chrome + codex V2 verdict + field-controls.spec.md (d)):
-        // default display = zero chrome — !px-0 !py-0 override size token 的 px-3,跟 Select / Combobox
-        // / DatePicker / TimePicker / LinkInput non-D-path bare-span idiom 一致(Carbon read-only / Stripe
-        // display / Notion property / Polaris readonly TextField 全 zero chrome)。
-        className: 'bg-transparent border border-transparent !px-0 !py-0',
+        className: 'bg-transparent border border-transparent',
       },
       {
         mode: 'readonly',
         variant: 'default',
-        className: 'bg-disabled border border-transparent',
+        // 2026-07-09 A11y fix(WCAG 2.4.7 Focus Visible):readonly **有值** 渲染 native `<input readOnly>`
+        // = 可 Tab 聚焦、可選取/複製,但原 compound 無任何 focus 指示 → 鍵盤使用者聚焦不可見 = 違反。
+        // 補 focus ring 採 **ring idiom**(`ring-2 ring-ring ring-offset-1`,與 Button/Checkbox/Tabs/
+        // Switch 同一套 focus-visible canonical;`--ring == --primary` semantic.css:334)而非 edit mode
+        // 的 `border-primary` idiom —— readonly 邊框 transparent 無可染;且 ring 語義 = 「可聚焦但非文字
+        // 輸入」(對齊 button/tab/checkbox 這類 focusable-非-text-entry 控件的視覺語言)。
+        // `:has(:focus-visible)`:readonly 渲 native `<input readOnly>`。⚠️ 瀏覽器對 text-entry 控件的
+        // :focus-visible 啟發式在滑鼠點擊時**亦 match**(text input 恆視為 focus-visible,對齊
+        // field-controls.spec.md「Focus 行為」段『文字輸入永遠 focus-visible、CSS 無法區分點擊與 Tab』),
+        // 故點擊 readonly input 也會顯 ring,勿宣稱僅鍵盤觸發(button 的 focus-visible 才滑鼠不觸發,
+        // input 不同;真要滑鼠抑制需 JS 追蹤 input modality,屬 API 擴充)。
+        className: 'bg-readonly border border-transparent [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-ring [&:has(:focus-visible)]:ring-offset-1',
       },
       {
         // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):
@@ -117,35 +166,14 @@ export const fieldWrapperStyles = cva(
         variant: 'default',
         className: 'bg-disabled border border-transparent cursor-not-allowed',
       },
-      // bare variant chrome by mode
+      // (2026-07-09 `bare` variant 退役:原 edit×bare / edit×bare×error compounds 已移除。)
+      // error chrome(mode=edit 限定,variant 不分 — naked cell 內 error 同樣紅框,保留既有控件層行為):
       {
         mode: 'edit',
-        variant: 'bare',
-        className: [
-          'bg-transparent border border-transparent',
-          'hover:border-border',
-          // 同 default chrome v13.3 SSOT:focus-within !important 強制勝過 data-state
-          'focus-within:!border-primary focus-within:hover:!border-primary',
-          'data-[state=open]:border-border',
-        ],
-      },
-      {
-        mode: 'display',
-        variant: 'bare',
-        // bare + display:cell-as-input default state(無 variant,完全融入 cell;hover/focus 才有 affordance 等 user 點下去切 edit mode)
-        className: 'bg-transparent border border-transparent',
-      },
-      {
-        mode: 'readonly',
-        variant: 'bare',
-        className: 'bg-transparent border border-transparent',
-      },
-      {
-        // 2026-05-13 R3.5:移除 `opacity-disabled` blanket(per Avatar self-dim canonical)
-        mode: 'disabled',
-        variant: 'bare',
-        className: 'bg-transparent border border-transparent cursor-not-allowed',
+        error: true,
+        className: 'border-error hover:border-error-hover focus-within:!border-error focus-within:hover:!border-error',
       },
+      // (2026-07-09 `bare` variant 退役:原 display×bare / readonly×bare / disabled×bare compounds 已移除。)
       // naked variant — cell-as-input substrate(Notion / Airtable / Excel canonical)
       //
       // ── 2026-05-06 v14:revert v12 → v9 baseline + keep v13.3 ──
@@ -173,15 +201,16 @@ export const fieldWrapperStyles = cva(
           '!px-[var(--table-cell-px)] !py-[var(--table-cell-py)]',
           'border border-border',
           'hover:border-border-hover',
-          // v13.3 SSOT canonical:focus-within !important(同 default + bare)
-          'focus-within:!border-primary focus-within:hover:!border-primary',
+          // v13.3 SSOT canonical:focus-within !important(同 default + bare;
+          // 2026-07-04 Q1:focus 藍移到 error:false compound,error:true 走共用 error compound)
           'data-[state=open]:border-border-hover',
           'group-data-[row-mode=auto]/cell:!items-start',
         ],
       },
+      { mode: 'edit', variant: 'naked', error: false, className: 'focus-within:!border-primary focus-within:hover:!border-primary' },
       {
         // 2026-05-12 fix v2(M32 root invariant audit):
-        //   Q1 root invariant?:cell-as-input display 視覺位置 = `cell.items-{X}` × `Field.height`
+        //   Q1 root invariant?:cell-as-input view 視覺位置 = `cell.items-{X}` × `Field.height`
         //                       兩變數函數;canonical = autoRow → Field intrinsic + cell.items-start
         //                       (text 在 cell top + cellPadding-y),fixed → Field h-field-md +
         //                       cell.items-center(text 在 cell vertical center)。
@@ -195,40 +224,25 @@ export const fieldWrapperStyles = cva(
         //                  override h-field-md → Field intrinsic line-height → cell items-start
         //                  真實 anchor text at cell.top + padding。
         // Edit mode 不動(`!h-full` 保留 — border 必滿格對齊 cell border)。
-        mode: 'display',
-        variant: 'naked',
-        className: [
-          'bg-transparent !rounded-none !px-0 !py-0 !h-auto',
-          'border border-transparent',
-        ],
-      },
-      {
-        mode: 'readonly',
+        // 2026-07-16 round16:view×naked 保持 bare(cell substrate,host TD 給 padding)— 與 view×default
+        // (edit 幾何減 chrome、留 px/py)本質不同用途,**不 collapse**(round14 合併是錯的)。
+        mode: 'view',
         variant: 'naked',
         className: [
           'bg-transparent !rounded-none !px-0 !py-0 !h-auto',
           'border border-transparent',
         ],
       },
-      {
-        // 2026-05-13 Q3 fix(per codex Q3 verdict + color.spec.md:729 逃生艙 rule):
-        // 移除 `opacity-disabled` blanket — naked wrapper 只負責 substrate(透明 border + 抑制 cursor),
-        // 內部 content(text / icon / avatar)各自 disabled context 處理(text-fg-disabled / Avatar opacity 等具體 token)。
-        // 對齊 DataTable cell-disabled TD 加 `bg-disabled` 表達 cell-level disabled state 的 SSOT 分權。
-        // **default/bare disabled variant(line 107, 135)deferred R3.5** — 仍依賴 wrapper opacity-disabled
-        // for Avatar dim(Avatar 尚未 fieldCtx-aware self-dim);Avatar self-dim 實作後再連帶移除。
-        mode: 'disabled',
-        variant: 'naked',
-        className: [
-          'bg-transparent !rounded-none cursor-not-allowed !px-0 !py-0 !h-auto',
-          'border border-transparent',
-        ],
-      },
+      // 2026-07-16 round16:`readonly×naked` / `disabled×naked` 死格移除 —— DataTable cell 廢除
+      //   disabled 態(view 一律 mode="view";displayOrDisabled helper 已刪)+ readonly 從不入 naked
+      //   路徑(全庫 0 消費)。軸對稱靠 cva 省略即天然覆蓋(base+size+透明),不需 dead compound 佔位。
     ],
     defaultVariants: {
       mode: 'edit',
       variant: 'default',
       size: 'md',
+      width: 'fill',
+      error: false,
     },
   }
 )
@@ -242,7 +256,7 @@ export const bareInputStyles = [
   // bareInputStyles 套上,placeholder 無 ellipsis → narrow cell(<160px)硬裁無 `...`(user round 3
   // 圖一證據)。加 truncate 後 `<input>` `text-overflow: ellipsis` 啟動,符合 user 「placeholder 直接被截掉沒有變...」
   // 該顯 ellipsis 的 SSOT。對齊 data-table.spec.md:233「禁硬裁無 ellipsis」+ field-controls.spec.md:286
-  // 共享 contract(a)「display/readonly/disabled/edit 4 mode 共享同一 renderer」semantic 對齊。
+  // 共享 contract(a)「view/readonly/disabled/edit 4 mode 共享同一 renderer」semantic 對齊。
   'flex-1 min-w-0 truncate bg-transparent',
   'outline-none border-none p-0',
   'text-[inherit] font-[inherit] leading-[inherit]',
@@ -274,17 +288,17 @@ export const bareInputStyles = [
 //   - Material X-Grid `gridClasses.cell` wrapper 不允許 cell content override alignment
 //   - Notion / Airtable cell content 從 host 繼承,不 hardcode self alignment
 //
-// Hook:`check_naked_row_mode_propagation.sh`(write-time BLOCKER)
-// Audit:design-system-audit Group N M27(periodic batch verify)
+// Hook:`check_field_family_invariants.sh` A.1(原 check_naked_row_mode_propagation.sh 已 folded,write-time BLOCKER)
+// Audit:design-system-audit Group N(periodic batch verify)
 export const nakedCellRowModeAlign = 'group-data-[row-mode=auto]/cell:items-start'
 
-// ── Cell-as-input Display Hover Ring(2026-05-05 v9 — sole remaining ring const)─
-// editable cell **display mode hover 提示**(「這 cell 可編,點 → 進 edit」affordance 信號)。
+// ── Cell-as-input View Hover Ring(2026-05-05 v9 — sole remaining ring const)─
+// editable cell **view mode hover 提示**(「這 cell 可編,點 → 進 edit」affordance 信號)。
 // 對齊 Notion / Airtable hover-cell-shows-border canonical。
 //
 // **為何只剩這一個**:Field naked **edit/focus/open state ring 已下沉到 Field default state
 // machine**(border-based,2026-05-05 v9 architectural rewrite),不需 outline 平行系統;
-// 但 display mode 沒 Field state(display = 純展示無互動),hover 提示需 cell wrapper 自加。
+// 但 view mode 沒 Field state(view = 純展示無互動),hover 提示需 cell wrapper 自加。
 //
 // **2026-05-09 v15.17 revert v15.16(user 未同意 ship)— 維持 v15.13 outline+offset:-1**
 //
@@ -331,18 +345,54 @@ export const nakedCellEditableDisplayHover = 'hover:outline hover:outline-1 hove
 //   - 多行 wrapper items-start  → slot 1lh 鎖頂 = 第一行中線
 //   不需 conditional `group-data-[row-mode=auto]/cell:` — 我前 v4 自加的 conditional 是過度設計。
 //
-// State ring 3 const 仍留(下方)— 是 Field naked 專屬,MenuItem / TreeView 用 bg hover 不用 outline。
+// State ring 唯一 const `nakedCellEditableDisplayHover` 仍留(下方 L332,見其自述「sole remaining ring const」)— 是 Field naked 專屬,MenuItem / TreeView 用 bg hover 不用 outline。
 // `nakedCellRowModeAlign`(wrapper 級)仍留 — 是 cell-context row-mode → wrapper alignment 適配,正交 slot 級。
 
 // ── Empty Value Display ─────────────────────────────────────────────────────
 
-export const EMPTY_DISPLAY = '—'
+// 2026-07-08 user 拍板(verbatim「我從頭到尾哪裡有說要用全形的」):空值符號 = **半形 hyphen
+// `-`(U+002D)**，非全形 em dash `—`(U+2014)。不可編輯(readonly / standalone view /
+// table 不可編輯 cell)空值一律此符號 + `text-fg-muted`。分流邏輯 SSOT = field-context.ts
+// `useFieldEmptyDisplay()`(table-cell 可編輯 → 空白；其餘 → 本常數)。
+// 世界級對照:Ant ProTable `columnEmptyText` 預設 `'-'`(U+002D 半形)
+//   https://github.com/ant-design/pro-components/blob/master/src/table/Table.tsx
+export const EMPTY_DISPLAY = '-'
 
 /**
- * 2026-05-14 I2 fix(per field-controls.spec.md contract (e) display typography canonical):
- * Field family display path bare-span helper — `sm/md → text-body` / `lg → text-body-lg`,
- * 跨 9 元件 display 視覺尺寸統一(user 抓 LinkInput 字體跟其他 Field 不一致 = SSOT 違反)。
+ * 2026-05-14 I2 fix(per field-controls.spec.md contract (e) view typography canonical):
+ * Field family view path bare-span helper — `sm/md → text-body` / `lg → text-body-lg`,
+ * 跨 9 元件 view 視覺尺寸統一(user 抓 LinkInput 字體跟其他 Field 不一致 = SSOT 違反)。
  * Consumer:LinkInput / Select / Combobox / DatePicker / TimePicker non-D-path bare-span 套此 class。
  */
 export const fieldDisplayTextClass = (size: 'sm' | 'md' | 'lg'): string =>
   size === 'lg' ? 'text-body-lg' : 'text-body'
+
+/**
+ * 2026-07-16 round16 Model A(user GO):Field view mode 幾何 SSOT(= view×default compound 的
+ * 幾何部分,抽成 class helper 供 **InlineEdit 純值/標題路徑** 消費,避免 InlineEdit 自帶重複的
+ * geometry cva〔M17 消重〕)。
+ *
+ * 回傳「edit 幾何減 chrome」的排版盒:
+ *   - 水平:`px-[var(--field-px)]`(= edit 內距,靠 InlineEdit `-mx` 拉回欄左緣後,值落 edit 值位置)
+ *   - 單行:`min-h-[var(--field-height-N)]` N∈{sm,md,lg} + `items-center`(垂直置中於 field 高度,= edit 單行)
+ *   - 多行:`items-start` + `py-2`(頂對齊 + 上下內距,**= Textarea edit `py-2`**,textarea.tsx base;
+ *     read↔edit 零跳)。⚠️ py-2 與 Textarea 同值 = SSOT 契約,`scripts/inline-edit-view-geometry-invariant.mjs`
+ *     機械鎖(Textarea py 一改即紅)。
+ *
+ * 值-格式化路徑(Select→Tag / Date / avatar)**不用**此 helper —— 直接委派 `<Control mode="view">`,
+ * 幾何 + 內部間距皆由控件 view×default 提供(read=edit 同一顆 → 天生一致)。
+ */
+export const fieldViewGeometry = (size: 'sm' | 'md' | 'lg', multiline?: boolean): string =>
+  cn(
+    'flex w-full min-w-0 px-[var(--field-px)]',
+    size === 'sm' && 'min-h-[var(--field-height-sm)]',
+    size === 'md' && 'min-h-[var(--field-height-md)]',
+    size === 'lg' && 'min-h-[var(--field-height-lg)]',
+    // 多行 view py 必等於 Textarea edit py(同一 --field-control-py-* token),否則
+    // InlineEdit 多行 read↔edit 垂直跳位;scripts/inline-edit-view-geometry-invariant.mjs 機械鎖。
+    multiline && 'items-start',
+    multiline && size === 'sm' && 'py-[var(--field-control-py-sm)]',
+    multiline && size === 'md' && 'py-[var(--field-control-py-md)]',
+    multiline && size === 'lg' && 'py-[var(--field-control-py-lg)]',
+    !multiline && 'items-center',
+  )