@dsh-workbench/shared 0.2.12 → 0.2.13

package/src/components/ChoiceGroup.test.tsx

@@ -195,6 +195,94 @@ describe('ChoiceGroup：单选照旧，多选是新加的那条路', () => {
     expect(inputs.every((one) => one.props['disabled'] === true)).toBe(true);
   });
 
+  it('★ loading：不画选项，画一行 Spinner + loadingText', () => {
+    const element = ChoiceGroup({
+      label: '环境',
+      name: 'env',
+      value: '',
+      options: OPTIONS,
+      loading: true,
+      loadingText: '正在读环境…',
+      onChange: () => {},
+    });
+    const tree = treeOf(element);
+    const loading = tree.find((one) => one.props['className'] === 'wb-choiceLoading');
+
+    expect(inputsOf(element)).toHaveLength(0);
+    expect(tree.some((one) => one.props['className'] === 'wb-choiceOption')).toBe(false);
+    expect(
+      treeOf(loading?.props['children']).some(
+        (one) => one.props['className'] === 'wb-spinner',
+      ),
+    ).toBe(true);
+    expect(
+      treeOf(loading?.props['children']).some(
+        (one) => one.props['children'] === '正在读环境…',
+      ),
+    ).toBe(true);
+  });
+
+  it('★ 没得选且不 loading：画 emptyText 那句，不画选项', () => {
+    const element = ChoiceGroup({
+      label: '环境',
+      name: 'env',
+      value: '',
+      options: [],
+      emptyText: '这个工作区还没绑定环境',
+      onChange: () => {},
+    });
+
+    expect(inputsOf(element)).toHaveLength(0);
+    expect(
+      treeOf(element).find((one) => one.props['className'] === 'wb-choiceEmpty')
+        ?.props['children'],
+    ).toBe('这个工作区还没绑定环境');
+  });
+
+  it('★ variant 落在菜单上：ghost 写 data-variant=ghost，默认是 boxed', () => {
+    const menuOf = (variant?: 'boxed' | 'ghost') =>
+      treeOf(
+        ChoiceGroup({
+          label: '环境',
+          name: 'env',
+          value: 'tencent-test',
+          options: OPTIONS,
+          ...(variant === undefined ? {} : { variant }),
+          onChange: () => {},
+        }),
+      ).find((one) => one.props['className'] === 'wb-choiceMenu');
+
+    expect(menuOf('ghost')?.props['data-variant']).toBe('ghost');
+    expect(menuOf(undefined)?.props['data-variant']).toBe('boxed');
+  });
+
+  it('★ description 画在 label 下面第二行', () => {
+    const element = ChoiceGroup({
+      label: '环境',
+      name: 'env',
+      value: 'tencent-test',
+      options: [
+        { value: 'tencent-test', label: '腾讯云 · 测试', description: '走的是测试账号' },
+        { value: 'tencent-prod', label: '腾讯云 · 生产' },
+      ],
+      onChange: () => {},
+    });
+    const labels = treeOf(element).filter(
+      (one) => one.props['className'] === 'wb-choiceLabel',
+    );
+    const descriptions = treeOf(element).filter(
+      (one) => one.props['className'] === 'wb-choiceDescription',
+    );
+
+    expect(descriptions).toHaveLength(1);
+    expect(descriptions[0]?.props['children']).toBe('走的是测试账号');
+    expect(
+      treeOf(labels[0]?.props['children']).some(
+        (one) => one.props['className'] === 'wb-choiceDescription',
+      ),
+    ).toBe(true);
+  });
+
   it('Fragment 还是 React 自己的（别把 key 语义换掉）', () => {
     expect(Fragment).toBeDefined();
   });

package/src/components/ChoiceGroup.tsx

@@ -1,11 +1,13 @@
 import type { ReactNode } from '../lib/react.js';
 import { Fragment, h } from '../lib/react.js';
 import { IconCheckOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Spinner } from './Spinner.js';
 import './ChoiceGroup.css';
 
 export interface ChoiceGroupOption {
   readonly value: string;
   readonly label: ReactNode;
+  readonly description?: ReactNode | undefined;
 }
 
 interface ChoiceGroupCommon {
@@ -13,6 +15,10 @@ interface ChoiceGroupCommon {
   readonly name: string;
   readonly options: readonly ChoiceGroupOption[];
   readonly disabled?: boolean | undefined;
+  readonly variant?: 'boxed' | 'ghost' | undefined;
+  readonly loading?: boolean | undefined;
+  readonly loadingText?: ReactNode | undefined;
+  readonly emptyText?: ReactNode | undefined;
 }
 
 export interface ChoiceGroupSingleProps extends ChoiceGroupCommon {
@@ -40,42 +46,66 @@ function ChoiceMenu(input: {
   readonly options: readonly ChoiceGroupOption[];
   readonly disabled: boolean;
   readonly multi: boolean;
+  readonly variant: 'boxed' | 'ghost';
+  readonly loading: boolean;
+  readonly loadingText: ReactNode | undefined;
+  readonly emptyText: ReactNode | undefined;
   readonly rowOf: (value: string) => ChoiceRowState;
 }) {
+  const body = input.loading ? (
+    <span className="wb-choiceLoading" role="status">
+      <Spinner size={14} />
+      <span className="wb-choiceLoadingText">{input.loadingText ?? '…'}</span>
+    </span>
+  ) : input.options.length === 0 ? (
+    input.emptyText === undefined ? null : (
+      <span className="wb-choiceEmpty">{input.emptyText}</span>
+    )
+  ) : (
+    input.options.map((option) => {
+      const row = input.rowOf(option.value);
+      return (
+        <Fragment key={option.value}>
+          <label
+            className={`wb-choiceOption${row.checked ? ' wb-choiceOptionOn' : ''}`}
+          >
+            <input
+              className={input.multi ? 'wb-checkbox' : 'wb-radio'}
+              type={input.multi ? 'checkbox' : 'radio'}
+              name={input.name}
+              checked={row.checked}
+              disabled={input.disabled}
+              onChange={row.onSelect}
+            />
+            {input.multi ? (
+              <span
+                className="wb-checkboxBox"
+                aria-hidden="true"
+              >
+                {row.checked ? <IconCheckOutlineRegular size={12} /> : null}
+              </span>
+            ) : null}
+            <span className="wb-choiceLabel">
+              <span className="wb-choiceLabelText">{option.label}</span>
+              {option.description === undefined ? null : (
+                <span className="wb-choiceDescription">{option.description}</span>
+              )}
+            </span>
+          </label>
+        </Fragment>
+      );
+    })
+  );
+
   return (
     <div
       className="wb-choiceMenu"
+      data-variant={input.variant}
       role={input.multi ? 'group' : 'radiogroup'}
       aria-label={input.label}
+      aria-busy={input.loading ? true : undefined}
     >
-      {input.options.map((option) => {
-        const row = input.rowOf(option.value);
-        return (
-          <Fragment key={option.value}>
-            <label
-              className={`wb-choiceOption${row.checked ? ' wb-choiceOptionOn' : ''}`}
-            >
-              <input
-                className={input.multi ? 'wb-checkbox' : 'wb-radio'}
-                type={input.multi ? 'checkbox' : 'radio'}
-                name={input.name}
-                checked={row.checked}
-                disabled={input.disabled}
-                onChange={row.onSelect}
-              />
-              {input.multi ? (
-                <span
-                  className="wb-checkboxBox"
-                  aria-hidden="true"
-                >
-                  {row.checked ? <IconCheckOutlineRegular size={12} /> : null}
-                </span>
-              ) : null}
-              <span className="wb-choiceLabel">{option.label}</span>
-            </label>
-          </Fragment>
-        );
-      })}
+      {body}
     </div>
   );
 }
@@ -86,6 +116,10 @@ export function ChoiceGroup(props: ChoiceGroupProps) {
     name: props.name,
     options: props.options,
     disabled: props.disabled === true,
+    variant: props.variant ?? 'boxed',
+    loading: props.loading === true,
+    loadingText: props.loadingText,
+    emptyText: props.emptyText,
   };
 
   if (props.multi === true) {
@@ -98,6 +132,10 @@ export function ChoiceGroup(props: ChoiceGroupProps) {
         options={common.options}
         disabled={common.disabled}
         multi={true}
+        variant={common.variant}
+        loading={common.loading}
+        loadingText={common.loadingText}
+        emptyText={common.emptyText}
         rowOf={(value) => ({
           checked: values.includes(value),
           onSelect: () => {
@@ -121,6 +159,10 @@ export function ChoiceGroup(props: ChoiceGroupProps) {
       options={common.options}
       disabled={common.disabled}
       multi={false}
+      variant={common.variant}
+      loading={common.loading}
+      loadingText={common.loadingText}
+      emptyText={common.emptyText}
       rowOf={(option) => ({
         checked: option === value,
         onSelect: () => {

package/src/components/FormRows.css

@@ -0,0 +1,53 @@
+.wb-formRows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-12);
+}
+
+.wb-formRow {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  align-items: center;
+  gap: var(--wb-len-8);
+}
+
+.wb-formRow[data-layout='stacked'] {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  gap: var(--wb-len-6);
+}
+
+.wb-formLabel {
+  min-width: 0;
+  font-size: var(--dsw-font-xs-13-font-size);
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+}
+
+.wb-formControl {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.wb-formHint {
+  grid-column: 2;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-formProblem {
+  grid-column: 2;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-formRow:has(.wb-formProblem) .wb-formLabel {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-formRow:has(:disabled) .wb-formLabel {
+  opacity: 0.4;
+}

package/src/components/FormRows.test.tsx

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { FormRow, FormRows } from './FormRows.js';
+
+function texts(node: unknown): string[] {
+  if (node === null || node === undefined || typeof node === 'boolean') return [];
+  if (typeof node === 'string') return [node];
+  if (typeof node === 'number') return [String(node)];
+  if (Array.isArray(node)) return node.flatMap((one) => texts(one));
+  const element = node as { props?: { children?: unknown } };
+  return texts(element.props?.children);
+}
+
+function childrenOf(node: unknown): unknown[] {
+  return (node as { props: { children: unknown } }).props.children as unknown[];
+}
+
+function noteNodeOf(node: unknown, className: string): unknown {
+  return childrenOf(node).find(
+    (one) => (one as { props?: Record<string, unknown> } | null)?.props?.['className'] === className,
+  );
+}
+
+describe('FormRow', () => {
+  it('标签、控件、提示按顺序出现（提示排在控件下面那一格）', () => {
+    expect(texts(FormRow({ label: '项目', hint: '选错了也能改', children: '下拉' }))).toEqual([
+      '项目',
+      '下拉',
+      '选错了也能改',
+    ]);
+  });
+
+  it('默认是「标签在左」的两列；stacked 才是上下堆叠', () => {
+    const inline = FormRow({ label: '项目', children: '下拉' }) as unknown as { props: Record<string, unknown> };
+    const stacked = FormRow({ label: '项目', layout: 'stacked', children: '下拉' }) as unknown as {
+      props: Record<string, unknown>;
+    };
+
+    expect(inline.props['data-layout']).toBe('inline');
+    expect(stacked.props['data-layout']).toBe('stacked');
+    expect(inline.props['className']).toBe('wb-formRow');
+  });
+
+  it('没给提示就不多一个空节点（否则每行都空一截）', () => {
+    const node = FormRow({ label: '项目', children: '下拉' });
+
+    expect(texts(node)).toEqual(['项目', '下拉']);
+    expect(childrenOf(node).filter((one) => one !== null)).toHaveLength(2);
+  });
+
+  it('有 problem 就顶掉 hint（同一格，二选一），错误行挂 data-wb-problem 给聚焦那件找', () => {
+    const node = FormRow({
+      label: '项目',
+      hint: '只列非生产',
+      problem: '这个项目不存在',
+      children: '下拉',
+    }) as unknown as { props: Record<string, unknown> };
+
+    expect(texts(node)).toEqual(['项目', '下拉', '这个项目不存在']);
+    expect((noteNodeOf(node, 'wb-formProblem') as { props: Record<string, unknown> }).props['className']).toBe(
+      'wb-formProblem',
+    );
+    expect(node.props['data-wb-problem']).toBe('');
+  });
+
+  it('没有 problem 就不多挂标记，hint 照常', () => {
+    const node = FormRow({ label: '项目', hint: '只列非生产', children: '下拉' }) as unknown as {
+      props: Record<string, unknown>;
+    };
+
+    expect(node.props['data-wb-problem']).toBeUndefined();
+    expect(noteNodeOf(node, 'wb-formHint')).toBeDefined();
+    expect(noteNodeOf(node, 'wb-formProblem')).toBeUndefined();
+    expect(texts(node)).toEqual(['项目', '下拉', '只列非生产']);
+  });
+
+  it('FormRows 只是一列容器，不替调用点决定格子', () => {
+    const node = FormRows({ children: '两行' }) as unknown as { props: Record<string, unknown> };
+
+    expect(node.props['className']).toBe('wb-formRows');
+    expect(texts(node)).toEqual(['两行']);
+  });
+});

package/src/components/FormRows.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import './FormRows.css';
+
+export interface FormRowsProps {
+  readonly children?: ReactNode | undefined;
+}
+
+export function FormRows({ children }: FormRowsProps) {
+  return <div className="wb-formRows">{children}</div>;
+}
+
+export interface FormRowProps {
+  readonly label: ReactNode;
+  readonly hint?: ReactNode | undefined;
+  readonly problem?: ReactNode | undefined;
+  readonly layout?: 'inline' | 'stacked' | undefined;
+  readonly children?: ReactNode | undefined;
+}
+
+export function FormRow({ label, hint, problem, layout = 'inline', children }: FormRowProps) {
+  return (
+    <label
+      className="wb-formRow"
+      data-layout={layout}
+      data-wb-problem={problem === undefined ? undefined : ''}
+    >
+      <span className="wb-formLabel">{label}</span>
+      <span className="wb-formControl">{children}</span>
+      {problem === undefined ? (
+        hint === undefined ? null : (
+          <span className="wb-formHint">{hint}</span>
+        )
+      ) : (
+        <span className="wb-formProblem">{problem}</span>
+      )}
+    </label>
+  );
+}

package/src/components/SelectField.css

@@ -4,8 +4,8 @@
   align-items: center;
   gap: var(--wb-len-8);
   width: 100%;
-  min-height: var(--wb-len-32);
-  padding: var(--wb-len-6) var(--wb-len-12);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-10);
   border: 0.5px solid var(--dsw-alias-border-l4);
   border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-bg-layer-3);
@@ -21,6 +21,14 @@
   box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
 }
 
+.wb-selectTrigger[aria-invalid='true'] {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-selectTrigger[aria-invalid='true']:focus-visible {
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-error-primary);
+}
+
 .wb-selectTrigger:disabled {
   cursor: not-allowed;
   opacity: 0.4;
@@ -100,8 +108,8 @@
   align-items: center;
   gap: var(--wb-len-8);
   width: 100%;
-  min-height: var(--wb-len-32);
-  padding: var(--wb-len-6) var(--wb-len-12);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-10);
   border: 0.5px solid var(--dsw-alias-border-l4);
   border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-bg-layer-3);

package/src/components/SelectField.test.tsx

@@ -11,7 +11,8 @@ vi.mock('../lib/react.js', () => ({
 
 vi.mock('./SelectField.css', () => ({ default: {} }));
 
-import { Menu, StateDot, TextShimmer } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Menu, TextShimmer } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Spinner } from './Spinner.js';
 import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives';
 import { h } from '../lib/react.js';
 import { Field } from './Field.js';
@@ -169,7 +170,7 @@ describe('SelectField：工作区那套下拉的公共形状', () => {
     expect(busy?.props['aria-busy']).toBe('true');
     expect(busy?.props['disabled']).toBe(true);
     expect(elementsOf(busy?.children).some((one) => one.type === TextShimmer)).toBe(true);
-    expect(elementsOf(busy?.children).some((one) => one.type === StateDot)).toBe(true);
+    expect(elementsOf(busy?.children).some((one) => one.type === Spinner)).toBe(true);
 
     const fallback = render({
       options: [],
@@ -178,6 +179,23 @@ describe('SelectField：工作区那套下拉的公共形状', () => {
     expect(inputOf(fallback)?.props['value']).toBe('手填的');
   });
 
+  it('invalid：触发钮与退化成手填那格都挂 aria-invalid，没给就不挂', () => {
+    const trigger = elementsOf(menuOf(render({ invalid: true })).props['anchor']).find(
+      (one) => one.type === 'button',
+    );
+    expect(trigger?.props['aria-invalid']).toBe(true);
+
+    const ok = elementsOf(menuOf(render({})).props['anchor']).find((one) => one.type === 'button');
+    expect(ok?.props['aria-invalid']).toBeUndefined();
+
+    const fallback = render({
+      options: [],
+      invalid: true,
+      fallback: { value: '手填的', onChange: () => {} },
+    });
+    expect(inputOf(fallback)?.props['invalid']).toBe(true);
+  });
+
   it('label / hint 走 Field，footer 那条动作独立成一行', () => {
     const root = render({ label: '工作区', hint: '三选一' });
     expect(elementsOf(root).some((one) => one.type === Field)).toBe(true);

package/src/components/SelectField.tsx

@@ -5,11 +5,11 @@ import {
   IconChevronDownOutlineRegular,
   IconSearchOutlineRegular,
   Menu,
-  StateDot,
   TextShimmer,
 } from '@deepseek-ai/dsh-client-ui-primitives';
 import { Field } from './Field.js';
 import { TextField } from './TextField.js';
+import { Spinner } from './Spinner.js';
 import './SelectField.css';
 
 export interface SelectFieldOption {
@@ -48,6 +48,7 @@ export interface SelectFieldProps {
   readonly open?: boolean | undefined;
   readonly onOpenChange?: ((open: boolean) => void) | undefined;
   readonly disabled?: boolean | undefined;
+  readonly invalid?: boolean | undefined;
   readonly loading?: boolean | undefined;
   readonly loadingText?: string | undefined;
   readonly fallback?: SelectFieldFallback | undefined;
@@ -83,6 +84,7 @@ function triggerNode(args: {
   readonly id: string | undefined;
   readonly className: string;
   readonly disabled: boolean;
+  readonly invalid: boolean;
   readonly open: boolean;
   readonly ariaLabel: string | undefined;
   readonly title: string | undefined;
@@ -98,6 +100,7 @@ function triggerNode(args: {
       disabled={args.disabled}
       aria-haspopup="listbox"
       aria-expanded={args.open}
+      aria-invalid={args.invalid || undefined}
       aria-label={args.ariaLabel}
       title={args.title}
       onClick={args.onOpen}
@@ -114,6 +117,7 @@ function triggerNode(args: {
 function loadingNode(args: {
   readonly id: string | undefined;
   readonly className: string;
+  readonly invalid: boolean;
   readonly ariaLabel: string | undefined;
   readonly loadingText: string | undefined;
 }): ReactNode {
@@ -124,6 +128,7 @@ function loadingNode(args: {
       className={`${args.className} wb-selectLoading`}
       disabled
       aria-busy="true"
+      aria-invalid={args.invalid || undefined}
       aria-label={args.ariaLabel}
       title={args.loadingText}
     >
@@ -131,7 +136,7 @@ function loadingNode(args: {
         <TextShimmer active>{args.loadingText ?? '…'}</TextShimmer>
       </span>
       <span className="wb-selectChevron">
-        <StateDot state="ongoing" size={14} />
+        <Spinner size={14} />
       </span>
     </button>
   );
@@ -357,6 +362,7 @@ export function SelectField(props: SelectFieldProps) {
     footer,
     onFooter,
     disabled = false,
+    invalid = false,
     loading = false,
     loadingText,
     fallback,
@@ -379,7 +385,7 @@ export function SelectField(props: SelectFieldProps) {
       label,
       hint,
       className,
-      loadingNode({ id, className: triggerClass, ariaLabel, loadingText }),
+      loadingNode({ id, className: triggerClass, invalid, ariaLabel, loadingText }),
     );
   }
 
@@ -392,6 +398,7 @@ export function SelectField(props: SelectFieldProps) {
         id={id}
         name={name}
         className="wb-selectFallback"
+        invalid={invalid}
         aria-label={ariaLabel}
         value={fallback.value}
         onChange={(event) => fallback.onChange(event.currentTarget.value)}
@@ -403,6 +410,7 @@ export function SelectField(props: SelectFieldProps) {
     id,
     className: triggerClass,
     disabled,
+    invalid,
     open: state.open,
     ariaLabel,
     title,

package/src/components/Spinner.css

@@ -0,0 +1,6 @@
+
+.wb-spinner {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}

package/src/components/Spinner.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('../lib/react.js', async () => {
+  const actual = await vi.importActual<typeof import('../lib/react.js')>('../lib/react.js');
+  return { ...actual, h: (type: unknown, props?: unknown, ...children: unknown[]) => ({ type, props: props ?? {}, children }) };
+});
+vi.mock('./Spinner.css', () => ({ default: {} }));
+
+import { StateDot } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Spinner } from './Spinner.js';
+
+describe('Spinner（loading 那颗）', () => {
+  it('画的是 dsh 的 ongoing 状态点（视觉只有这一处实现）', () => {
+    const node = Spinner({ size: 12 }) as unknown as { children: readonly { type: unknown; props: Record<string, unknown> }[] };
+
+    expect(node.children[0]?.type).toBe(StateDot);
+    expect(node.children[0]?.props['state']).toBe('ongoing');
+    expect(node.children[0]?.props['size']).toBe(12);
+  });
+
+  it('没给 label 时对读屏隐藏（它是装饰，话由旁边的文案说）', () => {
+    const node = Spinner({}) as unknown as { props: Record<string, unknown> };
+
+    expect(node.props['aria-hidden']).toBe(true);
+    expect(node.props['role']).toBeUndefined();
+  });
+
+  it('给了 label 就是一条状态播报', () => {
+    const node = Spinner({ label: '正在读环境' }) as unknown as { props: Record<string, unknown> };
+
+    expect(node.props['role']).toBe('status');
+    expect(node.props['aria-label']).toBe('正在读环境');
+    expect(node.props['aria-hidden']).toBeUndefined();
+  });
+});

package/src/components/Spinner.tsx

@@ -0,0 +1,19 @@
+import { StateDot } from '@deepseek-ai/dsh-client-ui-primitives';
+import { h } from '../lib/react.js';
+import './Spinner.css';
+
+export interface SpinnerProps {
+  readonly size?: number;
+  readonly label?: string | undefined;
+}
+
+export function Spinner({ size = 14, label }: SpinnerProps) {
+  return (
+    <span
+      className="wb-spinner"
+      {...(label === undefined ? { 'aria-hidden': true } : { role: 'status', 'aria-label': label })}
+    >
+      <StateDot state="ongoing" size={size} />
+    </span>
+  );
+}

package/src/components/TextField.css

@@ -27,6 +27,6 @@
 }
 
 :where(.wb-textField) {
-  min-height: var(--wb-len-32);
-  padding: var(--wb-len-6) var(--wb-len-12);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-10);
 }