From 2de65aaab21d7e539c2d03e6245248ed6eadc57b Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Tue, 13 Oct 2026 04:30:56 +0800
Subject: [PATCH 01/13] fix(tabs): match selected text to the primary indicator

---
 packages/react/src/tabs/tabs.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/tabs/tabs.scss b/packages/react/src/tabs/tabs.scss
index 15e90f2..0657515 100644
--- a/packages/react/src/tabs/tabs.scss
+++ b/packages/react/src/tabs/tabs.scss
@@ -70,10 +70,10 @@
       color var(--leaf-motion-fast) var(--leaf-motion-easing),
       transform var(--leaf-motion-fast) var(--leaf-motion-easing);
     &[aria-selected='true'] {
-      color: var(--leaf-color-text);
+      color: var(--leaf-color-primary);
       font-weight: var(--leaf-font-weight);
     }
-    &:hover:not(:disabled) {
+    &:hover:not(:disabled):not([aria-selected='true']) {
       color: var(--leaf-color-text);
     }
     &:active:not(:disabled) {
@@ -286,4 +286,7 @@
   .leaf-tabs--card .leaf-tabs__tab[aria-selected='true'] {
     color: HighlightText;
   }
+  .leaf-tabs--line .leaf-tabs__tab[aria-selected='true'] {
+    color: Highlight;
+  }
 }

From 0ce7817ca6c8b43200c595635590bbc59273fdc4 Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Tue, 13 Oct 2026 04:50:27 +0800
Subject: [PATCH 02/13] fix(form): preserve the first input after validation

---
 packages/react/src/form/form.test.tsx | 77 ++++++++++++++++++++++++++-
 packages/react/src/form/form.tsx      |  5 +-
 2 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/form/form.test.tsx b/packages/react/src/form/form.test.tsx
index ef4a285..96dc153 100644
--- a/packages/react/src/form/form.test.tsx
+++ b/packages/react/src/form/form.test.tsx
@@ -1,7 +1,9 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { type ChangeEvent, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { Button, ConfigProvider, Input, RadioGroup, Select } from '../index';
+import { Button, ConfigProvider, Input, RadioGroup, Select, Textarea } from '../index';
 import { Form, FormField } from './form';
 
 afterEach(() => vi.restoreAllMocks());
@@ -24,8 +26,81 @@ describe('Form', () => {
     expect(screen.getByRole('alert')).toHaveTextContent('Please fill out this field');
     expect(input).toHaveAttribute('aria-invalid', 'true');
     await userEvent.type(input, 'hello@example.com');
+    expect(input).toHaveValue('hello@example.com');
     expect(screen.queryByRole('alert')).toBeNull();
   });
+  it.each([
+    { control: 'Input', controlled: false, formatError: false },
+    { control: 'Input', controlled: true, formatError: false },
+    { control: 'Textarea', controlled: false, formatError: false },
+    { control: 'Textarea', controlled: true, formatError: false },
+    { control: 'Input', controlled: false, formatError: true },
+    { control: 'Input', controlled: true, formatError: true },
+  ])(
+    'preserves the first edit after validation in $control (controlled=$controlled, formatError=$formatError)',
+    async ({ control, controlled, formatError }) => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      const onInputCapture = vi.fn();
+      const onInput = vi.fn();
+      const initialValue = formatError ? 'a' : '';
+      let submitted: FormDataEntryValue | null | undefined;
+      function Example() {
+        const [value, setValue] = useState(initialValue);
+        const controlProps = {
+          name: 'value',
+          value: controlled ? value : undefined,
+          defaultValue: controlled ? undefined : initialValue,
+          // Browsers can flush capture updates before bubbling; user-event batches both in act.
+          onInputCapture: () => flushSync(() => {}),
+          onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+            onChange(event.currentTarget.value);
+            setValue(event.currentTarget.value);
+          },
+        };
+        return (
+          <ConfigProvider locale="en-US">
+            <Form
+              onSubmit={(event) => {
+                event.preventDefault();
+                submitted = new FormData(event.currentTarget).get('value');
+              }}
+            >
+              <FormField label="Value" required onInputCapture={onInputCapture} onInput={onInput}>
+                {control === 'Textarea' ? (
+                  <Textarea {...controlProps} />
+                ) : (
+                  <Input {...controlProps} type={formatError ? 'email' : 'text'} />
+                )}
+              </FormField>
+              <Button type="submit">Save</Button>
+            </Form>
+          </ConfigProvider>
+        );
+      }
+      render(<Example />);
+      const input = screen.getByRole('textbox', { name: 'Value' });
+      await user.click(screen.getByRole('button', { name: 'Save' }));
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+      await waitFor(() => expect(input).toHaveFocus());
+
+      await user.keyboard(formatError ? '{End}@' : 'a');
+      const firstValue = formatError ? 'a@' : 'a';
+      expect(input).toHaveValue(firstValue);
+      expect(input).toHaveFocus();
+      expect(screen.getByRole('textbox', { name: 'Value' })).toBe(input);
+      expect(screen.queryByRole('alert')).toBeNull();
+      expect(input).not.toHaveAttribute('aria-invalid', 'true');
+      expect(onChange).toHaveBeenCalledExactlyOnceWith(firstValue);
+      expect(onInputCapture).toHaveBeenCalledOnce();
+      expect(onInput).toHaveBeenCalledOnce();
+
+      await user.keyboard(formatError ? 'example.com' : 'lice');
+      await user.click(screen.getByRole('button', { name: 'Save' }));
+      expect(submitted).toBe(formatError ? 'a@example.com' : 'alice');
+    },
+  );
   it('submits native FormData and resets custom fields and errors', async () => {
     let submitted: FormData | undefined;
     const { container } = render(
diff --git a/packages/react/src/form/form.tsx b/packages/react/src/form/form.tsx
index 4449455..6e750a6 100644
--- a/packages/react/src/form/form.tsx
+++ b/packages/react/src/form/form.tsx
@@ -220,8 +220,9 @@ export function FormField({
           setValidationError(target.validity?.valueMissing ? messages.required : messages.invalid);
           document.getElementById(inputId)?.focus();
         }}
-        onInputCapture={(event) => {
-          props.onInputCapture?.(event);
+        onInput={(event) => {
+          props.onInput?.(event);
+          // Capture-phase updates can restore a controlled input before its onChange runs.
           setValidationError(undefined);
         }}
       >

From 2f25712a809c29448bde76df93d5bee7f58c15e1 Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 05:26:56 +0800
Subject: [PATCH 03/13] feat(react): add scoped defaults, JSON translations and
 component refinements

---
 packages/react/THIRD_PARTY.md                 |    5 +-
 packages/react/package.json                   |   91 +-
 .../react/scripts/build-browser-entries.mjs   |   24 +-
 .../react/scripts/build-component-styles.mjs  |    2 +-
 packages/react/scripts/build-locales.mjs      |   30 +
 packages/react/scripts/build-tailwind.mjs     |   36 +
 packages/react/scripts/check-translations.mjs |   84 ++
 .../react/scripts/export-design-resources.mjs |   17 +-
 packages/react/scripts/generate-locale.mjs    |  125 +-
 packages/react/scripts/measure-bundle.mjs     |   16 +-
 .../react/scripts/verify-browser-styles.mjs   |   44 +-
 .../react/scripts/verify-design-resources.mjs |    6 +-
 packages/react/scripts/verify-package.mjs     |  251 +++-
 packages/react/src/alert/alert.tsx            |   26 +-
 packages/react/src/anchor/anchor.tsx          |   43 +-
 packages/react/src/anchor/index.ts            |    3 +-
 packages/react/src/appbar/appbar.tsx          |   34 +-
 packages/react/src/appbar/index.ts            |    8 +-
 .../react/src/autocomplete/autocomplete.scss  |   27 +-
 .../src/autocomplete/autocomplete.test.tsx    |   16 +
 .../react/src/autocomplete/autocomplete.tsx   |   52 +-
 packages/react/src/autocomplete/index.ts      |    7 +-
 packages/react/src/avatar/avatar.tsx          |   12 +-
 packages/react/src/avatar/group.tsx           |   30 +-
 packages/react/src/backtop/backtop.tsx        |   28 +-
 packages/react/src/badge/badge.tsx            |   28 +-
 packages/react/src/breadcrumb/breadcrumb.tsx  |   39 +-
 packages/react/src/button/button.scss         |   61 +
 packages/react/src/button/button.tsx          |   21 +-
 packages/react/src/button/group.tsx           |   42 +-
 packages/react/src/calendar/calendar.tsx      |   40 +-
 packages/react/src/card/card.scss             |  115 +-
 packages/react/src/card/card.test.tsx         |   87 ++
 packages/react/src/card/card.tsx              |   90 +-
 packages/react/src/card/index.ts              |    2 +-
 packages/react/src/carousel/carousel.tsx      |   24 +-
 packages/react/src/carousel/index.ts          |    3 +-
 packages/react/src/cascader/cascader.scss     |   21 +-
 packages/react/src/cascader/cascader.tsx      |  106 +-
 packages/react/src/cascader/index.ts          |    3 +-
 packages/react/src/checkbox/checkbox.tsx      |   14 +-
 packages/react/src/checkbox/group.tsx         |   40 +-
 packages/react/src/checkbox/index.ts          |    3 +-
 packages/react/src/collapse/collapse.tsx      |   30 +-
 packages/react/src/color-recipes.ts           |    1 +
 .../react/src/colorpicker/colorpicker.scss    |   12 +-
 .../src/colorpicker/colorpicker.test.tsx      |   74 +
 .../react/src/colorpicker/colorpicker.tsx     |   43 +-
 packages/react/src/colorpicker/gradient.tsx   |   54 +-
 .../src/commandpalette/commandpalette.scss    |    9 +-
 .../src/commandpalette/commandpalette.tsx     |   56 +-
 packages/react/src/commandpalette/index.ts    |    3 +-
 .../component-defaults-all.test.tsx           |  352 +++++
 .../component-defaults.test.tsx               |  710 ++++++++++
 .../src/config-provider/component-defaults.ts |  500 +++++++
 .../src/config-provider/config-context.ts     |    5 +
 .../config-provider/config-provider.test.tsx  |  136 +-
 .../src/config-provider/config-provider.tsx   |   93 +-
 packages/react/src/config-provider/context.ts |  203 +--
 packages/react/src/config-provider/index.ts   |    6 +-
 .../src/config-provider/translations.test.tsx |  346 +++++
 packages/react/src/confirm/confirm.tsx        |   24 +-
 packages/react/src/confirm/provider.tsx       |   58 +-
 packages/react/src/confirm/store.ts           |   28 +-
 packages/react/src/datepicker/datepicker.tsx  |   33 +-
 packages/react/src/datepicker/index.ts        |    3 +-
 .../src/daterangepicker/daterangepicker.tsx   |   56 +-
 .../src/datetimepicker/datetimepicker.tsx     |   50 +-
 packages/react/src/density.ts                 |   19 +-
 .../react/src/descriptions/descriptions.tsx   |   26 +-
 packages/react/src/divider/divider.tsx        |   18 +-
 packages/react/src/drawer/drawer.tsx          |   10 +-
 packages/react/src/dropdown/dropdown.scss     |   18 +-
 packages/react/src/dropdown/dropdown.tsx      |   16 +-
 packages/react/src/empty/empty.tsx            |    9 +-
 .../react/src/errorboundary/errorboundary.tsx |   41 +-
 packages/react/src/filelist/filelist.scss     |  322 +++--
 packages/react/src/filelist/filelist.test.tsx |  135 ++
 packages/react/src/filelist/filelist.tsx      |  425 +++---
 packages/react/src/flex/flex.scss             |    3 +
 packages/react/src/flex/flex.test.tsx         |   47 +
 packages/react/src/flex/flex.tsx              |   47 +
 packages/react/src/flex/index.ts              |    1 +
 .../react/src/floatbutton/floatbutton.scss    |   10 +-
 .../react/src/floatbutton/floatbutton.tsx     |   50 +-
 packages/react/src/floatbutton/index.ts       |    3 +-
 packages/react/src/form/form.scss             |    1 +
 packages/react/src/form/form.tsx              |   70 +-
 packages/react/src/form/index.ts              |    3 +-
 packages/react/src/form/list.tsx              |   25 +-
 packages/react/src/grid/grid.tsx              |   36 +-
 packages/react/src/image/image.tsx            |   54 +-
 packages/react/src/image/viewer.tsx           |   60 +-
 packages/react/src/imagecropper/crop.ts       |   59 -
 .../react/src/imagecropper/editor.test.tsx    |   46 -
 packages/react/src/imagecropper/editor.tsx    |  212 ---
 .../react/src/imagecropper/imagecropper.scss  |  158 ---
 .../react/src/imagecropper/imagecropper.tsx   |   84 --
 packages/react/src/imagecropper/index.ts      |    7 -
 packages/react/src/index.ts                   |   24 +-
 .../src/infinitescroll/infinitescroll.tsx     |   48 +-
 packages/react/src/input/group.tsx            |  127 +-
 packages/react/src/input/index.ts             |    3 +-
 packages/react/src/input/input.tsx            |   14 +-
 packages/react/src/inputmask/inputmask.tsx    |   14 +-
 .../react/src/inputnumber/inputnumber.tsx     |   22 +-
 packages/react/src/inputnumber/string.tsx     |   12 +-
 packages/react/src/inputotp/inputotp.scss     |    1 +
 packages/react/src/inputotp/inputotp.tsx      |   12 +-
 packages/react/src/layout/layout.tsx          |   36 +-
 packages/react/src/loading/loading.tsx        |   10 +-
 packages/react/src/loadingbar/loadingbar.tsx  |   67 +-
 packages/react/src/locales/en-US.json         |  335 +++++
 packages/react/src/locales/ja-JP.json         |  335 +++++
 packages/react/src/locales/ko-KR.json         |  335 +++++
 packages/react/src/locales/messages.ts        |  336 +++++
 packages/react/src/locales/resolve.ts         |   97 ++
 packages/react/src/locales/resources.test.ts  |   72 +
 packages/react/src/locales/schema.json        | 1250 +++++++++++++++++
 packages/react/src/locales/types.ts           |   23 +
 packages/react/src/locales/zh-CN.json         |  335 +++++
 packages/react/src/locales/zh-TW.json         |  335 +++++
 packages/react/src/locales/zh-tw.ts           |  254 ----
 packages/react/src/masonry/masonry.tsx        |   11 +-
 packages/react/src/mentions/index.ts          |    3 +-
 packages/react/src/mentions/mentions.scss     |    6 +-
 packages/react/src/mentions/mentions.tsx      |   20 +-
 packages/react/src/menu/menu.scss             |   15 +-
 packages/react/src/menu/menu.tsx              |   39 +-
 packages/react/src/message/item.tsx           |    2 +-
 packages/react/src/message/message.tsx        |   21 +-
 packages/react/src/message/provider.tsx       |   14 +-
 packages/react/src/message/store.ts           |   43 +-
 packages/react/src/modal/modal.scss           |    7 -
 packages/react/src/modal/modal.tsx            |   34 +-
 .../react/src/notification/notification.tsx   |   67 +-
 packages/react/src/pagination/pagination.scss |   54 +-
 .../react/src/pagination/pagination.test.tsx  |  166 +++
 packages/react/src/pagination/pagination.tsx  |  114 +-
 packages/react/src/popconfirm/popconfirm.tsx  |   63 +-
 packages/react/src/popover/popover.tsx        |    8 +-
 packages/react/src/progress/progress.tsx      |   48 +-
 packages/react/src/qrcode/qrcode.tsx          |   50 +-
 packages/react/src/radio/index.ts             |    3 +-
 packages/react/src/radio/radio.tsx            |   29 +-
 packages/react/src/rate/rate.tsx              |   46 +-
 packages/react/src/result/result.tsx          |   20 +-
 packages/react/src/scrollarea/scrollarea.tsx  |   11 +-
 packages/react/src/scrollbar/scrollbar.tsx    |  550 ++++----
 packages/react/src/segmented/segmented.scss   |    2 +-
 packages/react/src/segmented/segmented.tsx    |   10 +-
 packages/react/src/select/index.ts            |    4 +-
 packages/react/src/select/select.scss         |   57 +-
 packages/react/src/select/select.test.tsx     |   87 +-
 packages/react/src/select/select.tsx          | 1226 ++++++++--------
 packages/react/src/shared/_floating.scss      |   98 +-
 packages/react/src/shared/_selection.scss     |  115 ++
 packages/react/src/shared/calendar.tsx        |   21 +-
 packages/react/src/shared/date-input.tsx      |   12 +-
 .../react/src/shared/floating-feedback.tsx    |   24 +
 packages/react/src/shared/floating.tsx        |    1 +
 packages/react/src/shared/motion.ts           |   15 +-
 packages/react/src/shared/parse-date.ts       |    8 +-
 packages/react/src/shared/scoped-portal.tsx   |    2 +
 .../react/src/shared/selection-content.tsx    |  207 +++
 packages/react/src/shared/time.ts             |   27 +-
 packages/react/src/shared/types.ts            |    2 +-
 .../src/shared/use-drag-announcements.ts      |   22 +
 .../react/src/shared/use-formatted-text.ts    |   80 ++
 packages/react/src/shared/use-text.ts         |   11 +-
 packages/react/src/signaturepad/index.ts      |    7 -
 .../react/src/signaturepad/signaturepad.scss  |   65 -
 .../react/src/signaturepad/signaturepad.tsx   |  297 ----
 packages/react/src/skeleton/skeleton.tsx      |   10 +-
 packages/react/src/slider/slider.tsx          |  529 +++----
 packages/react/src/space/space.tsx            |   10 +-
 packages/react/src/splitter/index.ts          |    3 +-
 packages/react/src/splitter/splitter.tsx      |   30 +-
 packages/react/src/statistic/index.ts         |    3 +-
 packages/react/src/statistic/statistic.tsx    |   29 +-
 packages/react/src/steps/steps.tsx            |   28 +-
 .../react/src/styles/_dialog-sections.scss    |    6 +-
 packages/react/src/styles/_mixins.scss        |   12 +-
 packages/react/src/styles/_palette.scss       |    2 +
 packages/react/src/styles/index.scss          |    3 +-
 packages/react/src/styles/tokens.scss         |   16 +-
 packages/react/src/switch/index.ts            |    3 +-
 packages/react/src/switch/switch.tsx          |   10 +-
 packages/react/src/table/table.tsx            |  237 +++-
 packages/react/src/tabletanstack/defaults.ts  |   62 +
 packages/react/src/tabletanstack/index.ts     |    1 +
 .../react/src/tabletanstack/reordering.tsx    |   20 +-
 .../src/tabletanstack/tabletanstack.test.tsx  |    6 +-
 .../react/src/tabletanstack/tabletanstack.tsx |  222 ++-
 .../react/src/tabs/navigation-motion.test.tsx |   88 +-
 packages/react/src/tabs/tabs.scss             |   90 +-
 packages/react/src/tabs/tabs.test.tsx         |   39 +
 packages/react/src/tabs/tabs.tsx              |  309 ++--
 packages/react/src/tag/group.tsx              |   49 +-
 packages/react/src/tag/tag.scss               |   32 +-
 packages/react/src/tag/tag.tsx                |   32 +-
 packages/react/src/tailwind-tokens.ts         |   86 ++
 packages/react/src/tailwind.ts                |   23 +
 packages/react/src/textarea/index.ts          |    4 +-
 packages/react/src/textarea/textarea.tsx      |  249 ++--
 packages/react/src/timeline/timeline.tsx      |   18 +-
 packages/react/src/timepicker/index.ts        |    3 +-
 packages/react/src/timepicker/time-panel.tsx  |   10 +-
 packages/react/src/timepicker/timepicker.scss |    3 +-
 packages/react/src/timepicker/timepicker.tsx  |   36 +-
 .../src/timerangepicker/timerangepicker.tsx   |   38 +-
 packages/react/src/tooltip/tooltip.tsx        |    8 +-
 packages/react/src/tour/index.ts              |    3 +-
 packages/react/src/tour/tour.tsx              |   46 +-
 packages/react/src/transfer/transfer.tsx      |   84 +-
 packages/react/src/tree/drag.tsx              |   27 +-
 packages/react/src/tree/tree.scss             |    8 +-
 packages/react/src/tree/tree.tsx              |   41 +-
 packages/react/src/treeselect/treeselect.scss |   60 +-
 .../react/src/treeselect/treeselect.test.tsx  |  105 +-
 packages/react/src/treeselect/treeselect.tsx  |  184 ++-
 packages/react/src/typography/index.ts        |    9 +-
 packages/react/src/typography/typography.tsx  |   49 +-
 packages/react/src/upload/upload.tsx          |   59 +-
 .../react/src/virtuallist/virtuallist.tsx     |   27 +-
 .../tests/browser/access-scope-fixture.tsx    |  146 ++
 .../tests/browser/accessibility-workbench.tsx |  172 +++
 packages/react/tests/browser/card-fixture.tsx |  104 ++
 packages/react/tests/browser/card.spec.ts     |  248 ++++
 .../browser/component-defaults-fixture.tsx    |  310 ++++
 .../tests/browser/component-defaults.spec.ts  |  265 ++++
 .../tests/browser/control-height-fixture.tsx  |  115 ++
 .../tests/browser/control-height.spec.ts      |   69 +
 .../react/tests/browser/file-list-fixture.tsx |  124 ++
 .../react/tests/browser/file-list.spec.ts     |  152 ++
 packages/react/tests/browser/fixture.scss     |   27 +-
 packages/react/tests/browser/fixture.tsx      |   39 +-
 packages/react/tests/browser/flex-fixture.tsx |   36 +
 packages/react/tests/browser/flex.spec.ts     |   68 +
 packages/react/tests/browser/form-fixture.tsx |   82 ++
 packages/react/tests/browser/form.spec.ts     |   98 ++
 packages/react/tests/browser/motion.spec.ts   |   31 +-
 .../tests/browser/multi-select-fixture.tsx    |  121 ++
 .../react/tests/browser/multi-select.spec.ts  |  177 +++
 .../tests/browser/pagination-fixture.tsx      |   62 +
 .../react/tests/browser/pagination.spec.ts    |  185 +++
 packages/react/tests/browser/quality.spec.ts  |    6 +-
 packages/react/tests/browser/radius.spec.ts   |   35 +-
 .../react/tests/browser/refinements.spec.ts   |   43 +-
 .../tests/browser/search-select-fixture.tsx   |   36 +
 .../react/tests/browser/search-select.spec.ts |  157 +++
 .../react/tests/browser/selection-fixture.tsx |   12 +
 .../react/tests/browser/selection.spec.ts     |  145 ++
 .../react/tests/browser/surface-fixture.tsx   |    6 +-
 packages/react/tests/browser/surfaces.spec.ts |    2 +-
 packages/react/tests/browser/tabs-fixture.tsx |   56 +
 .../react/tests/browser/tabs-geometry.spec.ts |   83 ++
 packages/react/tests/browser/tabs.spec.ts     |  243 ++++
 .../tests/browser/translations-fixture.tsx    |   82 ++
 .../react/tests/browser/translations.spec.ts  |   66 +
 packages/react/tests/browser/visual.spec.ts   |   10 +-
 .../react/tests/browser/warning-fixture.tsx   |    3 -
 packages/react/tests/browser/warning.spec.ts  |    7 +-
 .../react/tests/component-defaults.types.tsx  |  212 +++
 pnpm-lock.yaml                                |  895 +++++++++++-
 265 files changed, 17167 insertions(+), 5221 deletions(-)
 create mode 100644 packages/react/scripts/build-locales.mjs
 create mode 100644 packages/react/scripts/build-tailwind.mjs
 create mode 100644 packages/react/scripts/check-translations.mjs
 create mode 100644 packages/react/src/card/card.test.tsx
 create mode 100644 packages/react/src/config-provider/component-defaults-all.test.tsx
 create mode 100644 packages/react/src/config-provider/component-defaults.test.tsx
 create mode 100644 packages/react/src/config-provider/component-defaults.ts
 create mode 100644 packages/react/src/config-provider/config-context.ts
 create mode 100644 packages/react/src/config-provider/translations.test.tsx
 create mode 100644 packages/react/src/filelist/filelist.test.tsx
 create mode 100644 packages/react/src/flex/flex.scss
 create mode 100644 packages/react/src/flex/flex.test.tsx
 create mode 100644 packages/react/src/flex/flex.tsx
 create mode 100644 packages/react/src/flex/index.ts
 delete mode 100644 packages/react/src/imagecropper/crop.ts
 delete mode 100644 packages/react/src/imagecropper/editor.test.tsx
 delete mode 100644 packages/react/src/imagecropper/editor.tsx
 delete mode 100644 packages/react/src/imagecropper/imagecropper.scss
 delete mode 100644 packages/react/src/imagecropper/imagecropper.tsx
 delete mode 100644 packages/react/src/imagecropper/index.ts
 create mode 100644 packages/react/src/locales/en-US.json
 create mode 100644 packages/react/src/locales/ja-JP.json
 create mode 100644 packages/react/src/locales/ko-KR.json
 create mode 100644 packages/react/src/locales/messages.ts
 create mode 100644 packages/react/src/locales/resolve.ts
 create mode 100644 packages/react/src/locales/resources.test.ts
 create mode 100644 packages/react/src/locales/schema.json
 create mode 100644 packages/react/src/locales/types.ts
 create mode 100644 packages/react/src/locales/zh-CN.json
 create mode 100644 packages/react/src/locales/zh-TW.json
 delete mode 100644 packages/react/src/locales/zh-tw.ts
 create mode 100644 packages/react/src/shared/_selection.scss
 create mode 100644 packages/react/src/shared/floating-feedback.tsx
 create mode 100644 packages/react/src/shared/selection-content.tsx
 create mode 100644 packages/react/src/shared/use-drag-announcements.ts
 create mode 100644 packages/react/src/shared/use-formatted-text.ts
 delete mode 100644 packages/react/src/signaturepad/index.ts
 delete mode 100644 packages/react/src/signaturepad/signaturepad.scss
 delete mode 100644 packages/react/src/signaturepad/signaturepad.tsx
 create mode 100644 packages/react/src/tabletanstack/defaults.ts
 create mode 100644 packages/react/src/tailwind-tokens.ts
 create mode 100644 packages/react/src/tailwind.ts
 create mode 100644 packages/react/tests/browser/access-scope-fixture.tsx
 create mode 100644 packages/react/tests/browser/accessibility-workbench.tsx
 create mode 100644 packages/react/tests/browser/card-fixture.tsx
 create mode 100644 packages/react/tests/browser/card.spec.ts
 create mode 100644 packages/react/tests/browser/component-defaults-fixture.tsx
 create mode 100644 packages/react/tests/browser/component-defaults.spec.ts
 create mode 100644 packages/react/tests/browser/control-height-fixture.tsx
 create mode 100644 packages/react/tests/browser/control-height.spec.ts
 create mode 100644 packages/react/tests/browser/file-list-fixture.tsx
 create mode 100644 packages/react/tests/browser/file-list.spec.ts
 create mode 100644 packages/react/tests/browser/flex-fixture.tsx
 create mode 100644 packages/react/tests/browser/flex.spec.ts
 create mode 100644 packages/react/tests/browser/form-fixture.tsx
 create mode 100644 packages/react/tests/browser/form.spec.ts
 create mode 100644 packages/react/tests/browser/multi-select-fixture.tsx
 create mode 100644 packages/react/tests/browser/multi-select.spec.ts
 create mode 100644 packages/react/tests/browser/pagination-fixture.tsx
 create mode 100644 packages/react/tests/browser/pagination.spec.ts
 create mode 100644 packages/react/tests/browser/search-select-fixture.tsx
 create mode 100644 packages/react/tests/browser/search-select.spec.ts
 create mode 100644 packages/react/tests/browser/tabs-fixture.tsx
 create mode 100644 packages/react/tests/browser/tabs-geometry.spec.ts
 create mode 100644 packages/react/tests/browser/tabs.spec.ts
 create mode 100644 packages/react/tests/browser/translations-fixture.tsx
 create mode 100644 packages/react/tests/browser/translations.spec.ts
 create mode 100644 packages/react/tests/component-defaults.types.tsx

diff --git a/packages/react/THIRD_PARTY.md b/packages/react/THIRD_PARTY.md
index d397977..3b945f3 100644
--- a/packages/react/THIRD_PARTY.md
+++ b/packages/react/THIRD_PARTY.md
@@ -1,17 +1,16 @@
 # 第三方实现与许可证
 
-Leaf UI 的样式、组件接口、主题和语言集成为项目源码。以下复杂交互使用已发布的开源依赖。依赖按模块导入，图片灯箱、图片裁剪和签名引擎按需加载。
+Leaf UI 的样式、组件接口、主题和语言集成为项目源码。以下复杂交互使用已发布的开源依赖。依赖按模块导入，图片灯箱按需加载。
 
 | 能力 | 项目 | 许可证 |
 | --- | --- | --- |
 | 浮层定位 | [Floating UI](https://github.com/floating-ui/floating-ui) | MIT |
 | 图片预览、触摸切换、缩放、全屏和缩略图 | [Yet Another React Lightbox](https://github.com/igordanchenko/yet-another-react-lightbox) | MIT |
-| 图片裁剪、触摸与键盘调整 | [react-image-crop](https://github.com/dominictobias/react-image-crop) | MIT |
 | 指针、触摸和键盘拖拽排序 | [dnd-kit](https://github.com/clauderic/dnd-kit) | MIT |
 | 虚拟列表与动态行高 | [TanStack Virtual](https://github.com/TanStack/virtual) | MIT |
 | 格式输入 | [IMask](https://github.com/uNmAnNeR/imaskjs) | MIT |
-| 签名笔迹 | [signature_pad](https://github.com/szimek/signature_pad) | MIT |
 | 二维码 | [qrcode.react](https://github.com/zpao/qrcode.react) | ISC |
+| ICU 翻译模板与复数 | [FormatJS intl-messageformat](https://github.com/formatjs/formatjs) | BSD-3-Clause |
 
 各外部依赖的完整许可证随其 npm 包分发。
 
diff --git a/packages/react/package.json b/packages/react/package.json
index 4becf4e..f2637b8 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -736,27 +736,6 @@
         "default": "./dist/cjs/image/index.cjs"
       }
     },
-    "./image-cropper": {
-      "browser": {
-        "import": {
-          "types": "./dist/esm/imagecropper/index.d.ts",
-          "default": "./dist/esm/browser/imagecropper.js"
-        },
-        "require": {
-          "types": "./dist/cjs/imagecropper/index.d.cts",
-          "default": "./dist/cjs/browser/imagecropper.cjs"
-        }
-      },
-      "import": {
-        "types": "./dist/esm/imagecropper/index.d.ts",
-        "default": "./dist/esm/imagecropper/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/imagecropper/index.d.cts",
-        "default": "./dist/cjs/imagecropper/index.cjs"
-      }
-    },
-    "./image-cropper/style.css": "./dist/esm/styles/imagecropper.css",
     "./image/style.css": "./dist/esm/styles/image.css",
     "./infinite-scroll": {
       "browser": {
@@ -1305,27 +1284,6 @@
       }
     },
     "./select/style.css": "./dist/esm/styles/select.css",
-    "./signature-pad": {
-      "browser": {
-        "import": {
-          "types": "./dist/esm/signaturepad/index.d.ts",
-          "default": "./dist/esm/browser/signaturepad.js"
-        },
-        "require": {
-          "types": "./dist/cjs/signaturepad/index.d.cts",
-          "default": "./dist/cjs/browser/signaturepad.cjs"
-        }
-      },
-      "import": {
-        "types": "./dist/esm/signaturepad/index.d.ts",
-        "default": "./dist/esm/signaturepad/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/signaturepad/index.d.cts",
-        "default": "./dist/cjs/signaturepad/index.cjs"
-      }
-    },
-    "./signature-pad/style.css": "./dist/esm/styles/signaturepad.css",
     "./skeleton": {
       "browser": {
         "import": {
@@ -1810,7 +1768,48 @@
       }
     },
     "./virtual-list/style.css": "./dist/esm/styles/virtuallist.css",
-    "./styles/all.css": "./dist/esm/styles/index.css"
+    "./styles/all.css": "./dist/esm/styles/index.css",
+    "./tailwind": {
+      "import": {
+        "types": "./dist/esm/tailwind.d.ts",
+        "default": "./dist/esm/tailwind.js"
+      },
+      "require": {
+        "types": "./dist/cjs/tailwind.d.cts",
+        "default": "./dist/cjs/tailwind.cjs"
+      }
+    },
+    "./tailwind.css": "./dist/tailwind.css",
+    "./flex": {
+      "browser": {
+        "import": {
+          "types": "./dist/esm/flex/index.d.ts",
+          "default": "./dist/esm/browser/flex.js"
+        },
+        "require": {
+          "types": "./dist/cjs/flex/index.d.cts",
+          "default": "./dist/cjs/browser/flex.cjs"
+        }
+      },
+      "import": {
+        "types": "./dist/esm/flex/index.d.ts",
+        "default": "./dist/esm/flex/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/flex/index.d.cts",
+        "default": "./dist/cjs/flex/index.cjs"
+      }
+    },
+    "./flex/style.css": "./dist/esm/styles/flex.css",
+    "./locales/en-US.json": "./dist/locales/en-US.json",
+    "./locales/zh-CN.json": "./dist/locales/zh-CN.json",
+    "./locales/zh-TW.json": "./dist/locales/zh-TW.json",
+    "./locales/ja-JP.json": "./dist/locales/ja-JP.json",
+    "./locales/ko-KR.json": "./dist/locales/ko-KR.json",
+    "./locales/schema.json": "./dist/locales/schema.json"
+  },
+  "bin": {
+    "leaf-ui-check-translations": "./dist/locales/check-translations.mjs"
   },
   "files": [
     "dist",
@@ -1821,7 +1820,8 @@
     "**/*.css"
   ],
   "scripts": {
-    "build": "node scripts/generate-palette.mjs --check && rslib build && node scripts/build-component-styles.mjs && node scripts/build-browser-entries.mjs",
+    "build": "node scripts/generate-palette.mjs --check && node scripts/generate-locale.mjs --check && rslib build && node scripts/build-tailwind.mjs && node scripts/build-locales.mjs && node scripts/build-component-styles.mjs && node scripts/build-browser-entries.mjs",
+    "generate:locale": "node scripts/generate-locale.mjs",
     "generate:palette": "node scripts/generate-palette.mjs",
     "dev": "rslib build --watch",
     "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.test.json",
@@ -1875,11 +1875,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react-dom": "^2.1.9",
     "@tanstack/react-virtual": "^3.14.13",
+    "intl-messageformat": "^12.1.3",
     "lucide-react": "^1.50.0",
     "qrcode.react": "^4.2.0",
-    "react-image-crop": "^11.1.2",
     "react-imask": "^7.6.1",
-    "signature_pad": "^5.1.4",
     "tabbable": "^6.5.0",
     "yet-another-react-lightbox": "^3.32.2"
   }
diff --git a/packages/react/scripts/build-browser-entries.mjs b/packages/react/scripts/build-browser-entries.mjs
index 5c95a3e..5855101 100644
--- a/packages/react/scripts/build-browser-entries.mjs
+++ b/packages/react/scripts/build-browser-entries.mjs
@@ -95,9 +95,10 @@ for (const format of ['esm', 'cjs']) {
   await mkdir(modules, { recursive: true });
   await mkdir(styles, { recursive: true });
   for (const [name, css] of componentCss) await writeFile(path.join(styles, `${name}.css`), css);
+  await writeFile(path.join(output, 'styles/foundation.css'), base.css);
   await writeFile(
     path.join(output, 'styles/base.css'),
-    `${serviceStyles.map((name) => `@import './components/${name}.css';`).join('\n')}\n${base.css}`,
+    `@import './foundation.css';\n${serviceStyles.map((name) => `@import './components/${name}.css';`).join('\n')}\n`,
   );
   // CSS belongs to the implementation, not a re-export wrapper. Bundlers may
   // bypass side-effect-free barrels, but keep a used component's own module.
@@ -121,11 +122,16 @@ for (const format of ['esm', 'cjs']) {
       /^(?:(?:"use (?:client|strict)"|'use (?:client|strict)');\s*)*/,
     )[0];
     const css = owner
-      ? path
-          .relative(path.dirname(destination), path.join(styles, `${owner}.css`))
-          .replaceAll(path.sep, '/')
-      : null;
-    const added = css ? (format === 'esm' ? `import '${css}';\n` : `require('${css}');\n`) : '';
+      ? [path.join(output, 'styles/foundation.css'), path.join(styles, `${owner}.css`)]
+      : [];
+    const added = css
+      .map((file) => {
+        const relativeCss = path
+          .relative(path.dirname(destination), file)
+          .replaceAll(path.sep, '/');
+        return format === 'esm' ? `import '${relativeCss}';\n` : `require('${relativeCss}');\n`;
+      })
+      .join('');
     await mkdir(path.dirname(destination), { recursive: true });
     await writeFile(destination, prefix + added + original.slice(prefix.length));
     try {
@@ -139,7 +145,11 @@ for (const format of ['esm', 'cjs']) {
       );
       if (added) {
         const lines = map.mappings.split(';');
-        lines.splice(prefix.split('\n').length - 1, 0, '');
+        lines.splice(
+          prefix.split('\n').length - 1,
+          0,
+          ...Array(added.split('\n').length - 1).fill(''),
+        );
         map.mappings = lines.join(';');
       }
       await writeFile(`${destination}.map`, JSON.stringify(map));
diff --git a/packages/react/scripts/build-component-styles.mjs b/packages/react/scripts/build-component-styles.mjs
index d008207..c10217d 100644
--- a/packages/react/scripts/build-component-styles.mjs
+++ b/packages/react/scripts/build-component-styles.mjs
@@ -29,7 +29,6 @@ const dependencies = {
   notification: ['alert'],
   filelist: ['image', 'modal'],
   upload: ['filelist'],
-  imagecropper: ['input', 'image'],
   transfer: ['checkbox', 'input', 'pagination'],
   pagination: ['select', 'inputnumber'],
   table: ['button', 'loading', 'scrollbar'],
@@ -52,6 +51,7 @@ const dependencies = {
   popover: [],
   popconfirm: ['popover', 'alert'],
   tabs: ['dropdown'],
+  card: ['skeleton', 'tabs'],
 };
 const resolveStyles = (name, visited = new Set()) => {
   if (visited.has(name)) return visited;
diff --git a/packages/react/scripts/build-locales.mjs b/packages/react/scripts/build-locales.mjs
new file mode 100644
index 0000000..19f9c27
--- /dev/null
+++ b/packages/react/scripts/build-locales.mjs
@@ -0,0 +1,30 @@
+import { copyFile, mkdir, readFile, writeFile } from 'node:fs/promises';
+
+const output = new URL('../dist/locales/', import.meta.url);
+await mkdir(output, { recursive: true });
+for (const name of [
+  'en-US.json',
+  'zh-CN.json',
+  'zh-TW.json',
+  'ja-JP.json',
+  'ko-KR.json',
+  'schema.json',
+])
+  await copyFile(new URL(`../src/locales/${name}`, import.meta.url), new URL(name, output));
+// Rslib rewrites unbundled JSON imports to JS. Emit explicit data modules so CJS
+// default interop is correct and neither module graph requires JSON import attributes.
+for (const tag of ['en-US', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR']) {
+  const data = JSON.stringify(JSON.parse(await readFile(new URL(`${tag}.json`, output), 'utf8')));
+  for (const [format, extension, statement] of [
+    ['esm', 'js', `export default ${data};\n`],
+    ['cjs', 'cjs', `module.exports = ${data};\n`],
+  ]) {
+    const directory = new URL(`../dist/${format}/locales/`, import.meta.url);
+    await mkdir(directory, { recursive: true });
+    await writeFile(new URL(`${tag}.${extension}`, directory), statement);
+  }
+}
+await copyFile(
+  new URL('./check-translations.mjs', import.meta.url),
+  new URL('check-translations.mjs', output),
+);
diff --git a/packages/react/scripts/build-tailwind.mjs b/packages/react/scripts/build-tailwind.mjs
new file mode 100644
index 0000000..04c7f00
--- /dev/null
+++ b/packages/react/scripts/build-tailwind.mjs
@@ -0,0 +1,36 @@
+import { writeFile } from 'node:fs/promises';
+import { pathToFileURL } from 'node:url';
+
+const namespaces = {
+  colors: 'color',
+  borderRadius: 'radius',
+  spacing: 'spacing',
+  fontFamily: 'font',
+  fontSize: 'text',
+  lineHeight: 'leading',
+  fontWeight: 'font-weight',
+  boxShadow: 'shadow',
+  transitionDuration: 'transition-duration',
+  transitionTimingFunction: 'ease',
+  zIndex: 'z-index',
+};
+
+export function renderTailwindTheme(tokens) {
+  const declarations = Object.entries(namespaces).flatMap(([group, namespace]) =>
+    Object.entries(tokens[group]).flatMap(([name, value]) => [
+      `  --${namespace}-${name}: ${value};`,
+      ...(group === 'fontSize'
+        ? [`  --text-${name}--line-height: ${tokens.lineHeight.leaf};`]
+        : []),
+    ]),
+  );
+  return `/* Generated from Leaf UI's shared Tailwind token map. Tailwind CSS 4 only. */\n@theme inline {\n${declarations.join('\n')}\n}\n`;
+}
+
+if (process.argv[1] && pathToFileURL(process.argv[1]).href === import.meta.url) {
+  const { leafTailwindTokens } = await import('../dist/esm/tailwind-tokens.js');
+  await writeFile(
+    new URL('../dist/tailwind.css', import.meta.url),
+    renderTailwindTheme(leafTailwindTokens),
+  );
+}
diff --git a/packages/react/scripts/check-translations.mjs b/packages/react/scripts/check-translations.mjs
new file mode 100644
index 0000000..ed2a550
--- /dev/null
+++ b/packages/react/scripts/check-translations.mjs
@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { IntlMessageFormat } from 'intl-messageformat';
+
+const [file] = process.argv.slice(2).filter((arg) => !arg.startsWith('--'));
+if (!file) {
+  console.error('Usage: leaf-ui-check-translations <locale.json> [--allow-partial]');
+  process.exitCode = 1;
+} else {
+  try {
+    // This script runs in source during tests and next to the JSON files after packaging.
+    let template;
+    try {
+      template = await readFile(new URL('./en-US.json', import.meta.url), 'utf8');
+    } catch (error) {
+      if (error.code !== 'ENOENT') throw error;
+      template = await readFile(new URL('../src/locales/en-US.json', import.meta.url), 'utf8');
+    }
+    const english = JSON.parse(template);
+    const translation = JSON.parse(await readFile(resolve(file), 'utf8'));
+    const errors = [];
+    const missing = [];
+    if (translation?.$schema !== undefined && typeof translation.$schema !== 'string')
+      errors.push('$schema: expected a string');
+    function argumentsOf(template) {
+      const result = new Set();
+      function visit(nodes) {
+        for (const node of nodes) {
+          if (node.type >= 1 && node.type <= 6) result.add(node.value);
+          if (node.options) for (const option of Object.values(node.options)) visit(option.value);
+        }
+      }
+      visit(new IntlMessageFormat(template, 'en-US', undefined, { ignoreTag: true }).getAst());
+      return [...result].sort().join(',');
+    }
+    function check(reference, actual, key = '') {
+      if (actual === undefined) {
+        missing.push(key);
+        return;
+      }
+      if (typeof reference === 'string') {
+        if (typeof actual !== 'string') {
+          errors.push(`${key}: expected a string`);
+          return;
+        }
+        try {
+          if (actual !== '' && argumentsOf(reference) !== argumentsOf(actual))
+            errors.push(`${key}: template arguments differ from English`);
+        } catch (error) {
+          errors.push(`${key}: ${error.message}`);
+        }
+      } else if (Array.isArray(reference)) {
+        if (
+          !Array.isArray(actual) ||
+          actual.length !== reference.length ||
+          actual.some((item) => typeof item !== 'string')
+        )
+          errors.push(`${key}: expected ${reference.length} strings`);
+      } else {
+        if (!actual || typeof actual !== 'object' || Array.isArray(actual)) {
+          errors.push(`${key || 'root'}: expected an object`);
+          return;
+        }
+        for (const name of Object.keys(actual))
+          if (!Object.hasOwn(reference, name) && (key !== '' || name !== '$schema'))
+            errors.push(`${key ? `${key}.` : ''}${name}: unknown key`);
+        for (const [name, value] of Object.entries(reference))
+          check(value, actual[name], key ? `${key}.${name}` : name);
+      }
+    }
+    check(english, translation);
+    for (const error of errors) console.error(error);
+    if (missing.length)
+      console.log(`Missing translations (${missing.length}): ${missing.join(', ')}`);
+    if (errors.length || (missing.length && !process.argv.includes('--allow-partial')))
+      process.exitCode = 1;
+    else
+      console.log(`Translation valid${missing.length ? ' (partial; fallback will be used)' : ''}.`);
+  } catch (error) {
+    console.error(error.message);
+    process.exitCode = 1;
+  }
+}
diff --git a/packages/react/scripts/export-design-resources.mjs b/packages/react/scripts/export-design-resources.mjs
index 526973d..a8d83ff 100644
--- a/packages/react/scripts/export-design-resources.mjs
+++ b/packages/react/scripts/export-design-resources.mjs
@@ -104,6 +104,7 @@ const text = (x, y, value, size = 14, color = 'text', weight = 400) =>
   `<text x="${x}" y="${y}" fill="${escapeXml(color)}" font-size="${size}" font-weight="${weight}">${escapeXml(value)}</text>`;
 const rect = (x, y, w, h, fill, radius = 10, stroke = 'none') =>
   `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${radius}" fill="${escapeXml(fill)}" stroke="${escapeXml(stroke)}"/>`;
+const controlHeight = densityTokens.comfortable['control-height'];
 for (const [mode, p] of Object.entries(palettes)) {
   let foundation = text(32, 50, `Leaf UI / ${mode} foundations`, 28, p.text, 600);
   const colors = Object.entries(defaultColors[mode]);
@@ -116,8 +117,14 @@ for (const [mode, p] of Object.entries(palettes)) {
     text(32, 542, 'Typography · Inter / system sans-serif', 20, p.text, 600) +
     text(32, 580, 'Heading 24 / 600', 24, p.text, 600) +
     text(32, 614, 'Body 14 / 1.6 · Semantic colors and stable geometry', 14, p.text) +
-    text(32, 650, 'Comfortable: 40px controls / 8px spacing', 14, p['text-muted']) +
-    text(32, 680, 'Compact: 34px controls / 6px spacing', 14, p['text-muted']);
+    text(32, 650, `Comfortable: ${controlHeight}px controls / 8px spacing`, 14, p['text-muted']) +
+    text(
+      32,
+      680,
+      `Compact: ${densityTokens.compact['control-height']}px controls / 6px spacing`,
+      14,
+      p['text-muted'],
+    );
   let components = text(32, 50, `Leaf UI / ${mode} component states`, 28, p.text, 600);
   const states = ['Default', 'Hover', 'Pressed', 'Disabled'];
   for (const [row, variant] of ['solid', 'outline', 'ghost'].entries()) {
@@ -139,17 +146,17 @@ for (const [mode, p] of Object.entries(palettes)) {
               : state === 'Pressed'
                 ? p.border
                 : 'none';
-      components += `<g id="button-${variant}-${state.toLowerCase()}" opacity="${state === 'Disabled' ? 0.45 : 1}">${rect(x, y, 136, 40, bg, 10, variant === 'outline' ? p.border : undefined)}${text(x + 24, y + 25, state, 14, variant === 'solid' ? p['on-primary'] : p.text, 500)}</g>`;
+      components += `<g id="button-${variant}-${state.toLowerCase()}" opacity="${state === 'Disabled' ? 0.45 : 1}">${rect(x, y, 136, controlHeight, bg, 10, variant === 'outline' ? p.border : undefined)}${text(x + 24, y + controlHeight / 2 + 5, state, 14, variant === 'solid' ? p['on-primary'] : p.text, 500)}</g>`;
     }
   }
   components += text(32, 450, 'Fields / default · focus · error', 20, p.text, 600);
   for (const [index, state] of ['Default', 'Focus', 'Error'].entries()) {
     const x = 32 + index * 264;
-    components += `<g id="input-${state.toLowerCase()}">${state === 'Focus' ? rect(x - 3, 484, 246, 46, 'none', 12, p['primary-alpha-42']) : ''}${rect(x, 487, 240, 40, p.surface, 10, state === 'Error' ? p.danger : state === 'Focus' ? p.primary : p.border)}${text(x + 10, 512, state, 14, p.text)}</g>`;
+    components += `<g id="input-${state.toLowerCase()}">${state === 'Focus' ? rect(x - 3, 484, 246, controlHeight + 6, 'none', 12, p['primary-alpha-42']) : ''}${rect(x, 487, 240, controlHeight, p.surface, 10, state === 'Error' ? p.danger : state === 'Focus' ? p.primary : p.border)}${text(x + 10, 487 + controlHeight / 2 + 5, state, 14, p.text)}</g>`;
   }
   components += `<g id="alert-info">${rect(32, 557, 784, 72, p['surface-muted'], 16, p['border-surface-70'])}${text(59, 596, 'i', 18, p.info, 600)}${text(90, 584, 'Keep the team informed', 14, p.text, 500)}${text(90, 608, 'Readable spacing and a semantic status icon.', 14, p['text-muted'])}</g>`;
   components += `<g id="result-success">${rect(32, 657, 784, 188, p.surface, 16, p.border)}${rect(392, 681, 64, 64, p['surface-muted'], 32)}<path d="M410 713 L420 723 L439 702" fill="none" stroke="${p.success}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>${text(332, 778, 'Project saved', 24, p.text, 600)}${text(278, 812, 'Your changes are ready for the team.', 14, p['text-muted'])}</g>`;
-  components += `<g id="dialog-anatomy">${rect(32, 877, 784, 170, p.surface, 16, p.border)}${rect(33, 985, 782, 61, p['surface-muted'], 15)}${rect(33, 985, 782, 30, p['surface-muted'], 0)}<path d="M33 929 H815 M33 985 H815" stroke="${p['border-surface-70']}"/>${text(56, 910, 'Dialog heading', 17, p.text, 600)}${rect(56, 940, 736, 40, p.surface, 10, p.border)}${text(66, 965, 'Form and footer share an inline edge', 14, p['text-muted'])}${rect(680, 997, 112, 40, p.primary, 10)}${text(710, 1022, 'Save', 14, p['on-primary'], 500)}</g>`;
+  components += `<g id="dialog-anatomy">${rect(32, 877, 784, 170, p.surface, 16, p.border)}${rect(33, 985, 782, 61, p['surface-muted'], 15)}${rect(33, 985, 782, 30, p['surface-muted'], 0)}<path d="M33 929 H815 M33 985 H815" stroke="${p['border-surface-70']}"/>${text(56, 910, 'Dialog heading', 17, p.text, 600)}${rect(56, 940, 736, controlHeight, p.surface, 10, p.border)}${text(66, 940 + controlHeight / 2 + 5, 'Form and footer share an inline edge', 14, p['text-muted'])}${rect(680, 997, 112, controlHeight, p.primary, 10)}${text(710, 997 + controlHeight / 2 + 5, 'Save', 14, p['on-primary'], 500)}</g>`;
   const svg = (height, content) =>
     `<svg xmlns="http://www.w3.org/2000/svg" width="848" height="${height}" viewBox="0 0 848 ${height}" font-family="Inter, Arial, sans-serif"><title>Leaf UI ${mode} design resources</title>${rect(0, 0, 848, height, p.surface, 0)}${content}</svg>\n`;
   await fs.writeFile(path.join(publicPath, `leaf-${mode}-foundations.svg`), svg(724, foundation));
diff --git a/packages/react/scripts/generate-locale.mjs b/packages/react/scripts/generate-locale.mjs
index 5128a42..e0adf60 100644
--- a/packages/react/scripts/generate-locale.mjs
+++ b/packages/react/scripts/generate-locale.mjs
@@ -1,55 +1,80 @@
-import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+import { readFile, writeFile } from 'node:fs/promises';
 import { resolve } from 'node:path';
-import { parse } from '@babel/parser';
 import * as OpenCC from 'opencc-js';
 
-// Build-time conversion keeps the locale small and avoids a runtime dictionary dependency.
-const root = resolve(import.meta.dirname, '../src');
+// Conversion is build-time only. The published resources remain plain JSON.
+const root = resolve(import.meta.dirname, '../src/locales');
 const convert = OpenCC.Converter({ from: 'cn', to: 'twp' });
-const source = await readFile(resolve(root, 'config-provider/context.ts'), 'utf8');
-const literal = source.match(/const zh = (\{[\s\S]*?\n\});/u)?.[1];
-if (!literal) throw new Error('Chinese message source not found');
-const messages = Function(`return (${literal})`)();
-const traditional = Object.fromEntries(
-  Object.entries(messages).map(([key, value]) => [
-    key,
-    Array.isArray(value) ? value.map(convert) : convert(value),
-  ]),
-);
-const texts = {};
-async function walk(directory) {
-  for (const file of await readdir(directory, { withFileTypes: true })) {
-    const path = resolve(directory, file.name);
-    if (file.isDirectory() && file.name !== 'locales') await walk(path);
-    else if (/\.tsx?$/u.test(file.name) && !file.name.includes('.test.')) {
-      const tree = parse(await readFile(path, 'utf8'), {
-        sourceType: 'module',
-        plugins: ['typescript', 'jsx'],
-      });
-      const visit = (node) => {
-        if (!node || typeof node !== 'object') return;
-        if (
-          node.type === 'CallExpression' &&
-          node.callee?.name === 't' &&
-          node.arguments.length === 2 &&
-          node.arguments.every((item) => item.type === 'StringLiteral')
-        ) {
-          texts[node.arguments[1].value] = convert(node.arguments[0].value);
-        }
-        for (const value of Object.values(node))
-          if (Array.isArray(value)) value.forEach(visit);
-          else if (value && typeof value === 'object') visit(value);
-      };
-      visit(tree);
-    }
-  }
+const english = JSON.parse(await readFile(resolve(root, 'en-US.json'), 'utf8'));
+const chinese = JSON.parse(await readFile(resolve(root, 'zh-CN.json'), 'utf8'));
+function convertTree(value) {
+  if (typeof value === 'string') return convert(value);
+  if (Array.isArray(value)) return value.map(convertTree);
+  return Object.fromEntries(Object.entries(value).map(([key, child]) => [key, convertTree(child)]));
 }
-await walk(root);
-await mkdir(resolve(root, 'locales'), { recursive: true });
-await writeFile(
-  resolve(root, 'locales/zh-tw.ts'),
-  `// Generated by scripts/generate-locale.mjs using OpenCC (MIT).\nexport const traditionalMessages = ${JSON.stringify(traditional, null, 2)};\nexport const traditionalTextMessages: Record<string, string> = ${JSON.stringify(Object.fromEntries(Object.entries(texts).sort(([a], [b]) => a.localeCompare(b))), null, 2)};\n`,
-);
-console.log(
-  `Generated zh-TW: ${Object.keys(traditional).length} messages, ${Object.keys(texts).length} component labels.`,
-);
+function schema(value) {
+  if (typeof value === 'string') return { type: 'string', description: `English: ${value}` };
+  if (Array.isArray(value))
+    return {
+      type: 'array',
+      items: { type: 'string' },
+      minItems: value.length,
+      maxItems: value.length,
+    };
+  return {
+    type: 'object',
+    additionalProperties: false,
+    properties: Object.fromEntries(
+      Object.entries(value).map(([key, child]) => [key, schema(child)]),
+    ),
+  };
+}
+function paths(value, prefix = '') {
+  return Object.entries(value).flatMap(([key, child]) => {
+    const name = prefix ? `${prefix}.${key}` : key;
+    return typeof child === 'object' && !Array.isArray(child) ? paths(child, name) : [name];
+  });
+}
+if (JSON.stringify(paths(english).sort()) !== JSON.stringify(paths(chinese).sort()))
+  throw new Error('en-US and zh-CN must contain exactly the same translation keys.');
+const outputs = {
+  'zh-TW.json': convertTree(chinese),
+  'schema.json': {
+    $schema: 'https://json-schema.org/draft/2020-12/schema',
+    title: 'Leaf UI translation resources',
+    description: 'Partial resources are supported. Missing entries follow ConfigProvider.locale.',
+    ...schema(english),
+    properties: { $schema: { type: 'string' }, ...schema(english).properties },
+  },
+};
+for (const [file, value] of Object.entries(outputs)) {
+  const content = `${JSON.stringify(value, null, 2)}\n`;
+  if (process.argv.includes('--check')) {
+    if (
+      JSON.stringify(JSON.parse(await readFile(resolve(root, file), 'utf8'))) !==
+      JSON.stringify(value)
+    )
+      throw new Error(`${file} is stale; run pnpm --filter @ifhover/leaf-ui generate:locale.`);
+  } else await writeFile(resolve(root, file), content);
+}
+console.log(`Verified ${paths(english).length} translation entries in three JSON languages.`);
+const declaration = `// Generated by scripts/generate-locale.mjs from en-US.json.\nexport interface LocaleMessages {\n${Object.entries(
+  english,
+)
+  .map(
+    ([group, entries]) =>
+      `  readonly ${group}: {\n${Object.entries(entries)
+        .map(
+          ([key, value]) =>
+            `    readonly ${key}: ${Array.isArray(value) ? 'readonly string[]' : 'string'};`,
+        )
+        .join('\n')}\n  };`,
+  )
+  .join('\n')}\n}\n`;
+if (process.argv.includes('--check')) {
+  // Ignore line endings while retaining the generated type contract.
+  if (
+    (await readFile(resolve(root, 'messages.ts'), 'utf8')).replaceAll('\r\n', '\n') !== declaration
+  )
+    throw new Error('LocaleMessages is stale; run generate:locale.');
+} else await writeFile(resolve(root, 'messages.ts'), declaration);
diff --git a/packages/react/scripts/measure-bundle.mjs b/packages/react/scripts/measure-bundle.mjs
index a527ba0..78764e6 100644
--- a/packages/react/scripts/measure-bundle.mjs
+++ b/packages/react/scripts/measure-bundle.mjs
@@ -12,14 +12,17 @@ const cases = {
   button: `import { Button } from '@ifhover/leaf-ui/button'; export { Button };`,
   table: `export { Table } from '@ifhover/leaf-ui/table';`,
   tableAdapter: `export { DataTable } from '@ifhover/leaf-ui/table/tanstack';`,
-  form: `export { ConfigProvider } from '@ifhover/leaf-ui/config-provider'; export { Form, FormField } from '@ifhover/leaf-ui/form'; export { Input } from '@ifhover/leaf-ui/input'; export { InputNumber } from '@ifhover/leaf-ui/input-number'; export { Select } from '@ifhover/leaf-ui/select'; export { DatePicker } from '@ifhover/leaf-ui/date-picker'; export { CheckboxGroup } from '@ifhover/leaf-ui/checkbox'; export { Button } from '@ifhover/leaf-ui/button'; import '@ifhover/leaf-ui/styles.css';`,
-  all: `export * from '@ifhover/leaf-ui'; import '@ifhover/leaf-ui/styles.css';`,
+  form: `export { ConfigProvider } from '@ifhover/leaf-ui/config-provider'; export { Form, FormField } from '@ifhover/leaf-ui/form'; export { Input } from '@ifhover/leaf-ui/input'; export { InputNumber } from '@ifhover/leaf-ui/input-number'; export { Select } from '@ifhover/leaf-ui/select'; export { DatePicker } from '@ifhover/leaf-ui/date-picker'; export { CheckboxGroup } from '@ifhover/leaf-ui/checkbox'; export { Button } from '@ifhover/leaf-ui/button';`,
+  all: `export * from '@ifhover/leaf-ui';`,
 };
 const report = {
   node: process.version,
   includes: 'Leaf UI and transitive runtime dependencies; React/ReactDOM external',
   cases: {},
 };
+const foundationGzip = gzipSync(await readFile(path.join(root, 'dist/esm/styles/foundation.css')), {
+  level: 9,
+}).length;
 for (const [name, code] of Object.entries(cases)) {
   const result = await build({
     stdin: { contents: code, resolveDir: root, sourcefile: `${name}.tsx` },
@@ -68,14 +71,15 @@ for (const [name, code] of Object.entries(cases)) {
     // Guard against accidentally pulling in unrelated, expensive component families.
     assert.ok(
       !Object.keys(result.metafile.inputs).some((file) =>
-        /signature_pad|react-image-crop|qrcode\.react|yet-another-react-lightbox/u.test(file),
+        /qrcode\.react|yet-another-react-lightbox/u.test(file),
       ),
     );
     assert.ok(report.cases[name].js.gzip < 5 * 1024, 'Button-only JS regression: over 5 KiB gzip');
-    // Readable danger ink adds ~0.05 KiB; the standalone entry still excludes rich choice styles.
+    // The fixture now includes the automatically loaded shared foundation.
+    // Keep the existing component budget, accounting for that shared CSS separately.
     assert.ok(
-      report.cases[name].css.gzip < 4.25 * 1024,
-      'Button CSS regression: over 4.25 KiB gzip',
+      report.cases[name].css.gzip < foundationGzip + 4.25 * 1024,
+      'Button CSS regression: foundation plus over 4.25 KiB gzip',
     );
   }
 }
diff --git a/packages/react/scripts/verify-browser-styles.mjs b/packages/react/scripts/verify-browser-styles.mjs
index 8cd0014..aaeddef 100644
--- a/packages/react/scripts/verify-browser-styles.mjs
+++ b/packages/react/scripts/verify-browser-styles.mjs
@@ -25,17 +25,34 @@ const cases = {
   table: {
     names: ['Table'],
     include: ['table', 'scrollbar', 'loading'],
-    exclude: ['image-cropper', 'date-picker'],
+    exclude: ['color-picker', 'date-picker'],
   },
   date: {
     names: ['DatePicker'],
     include: ['date-picker', 'calendar', 'time-picker'],
-    exclude: ['table', 'image-cropper'],
+    exclude: ['table', 'color-picker'],
+  },
+  card: {
+    names: ['Card'],
+    include: ['card', 'skeleton', 'tabs'],
+    exclude: ['table', 'input', 'color-picker'],
+  },
+  cardSubpath: {
+    names: ['Card'],
+    subpath: '/card',
+    include: ['card', 'skeleton', 'tabs'],
+    exclude: ['table', 'input', 'color-picker'],
   },
   config: {
     names: ['ConfigProvider'],
     include: ['message', 'confirm', 'notification', 'loading-bar'],
-    exclude: ['table', 'image-cropper'],
+    exclude: ['table', 'color-picker'],
+  },
+  message: {
+    names: ['MessageProvider', 'useMessage'],
+    subpath: '/message',
+    include: ['message', 'alert'],
+    exclude: ['table', 'modal', 'notification', 'loading-bar'],
   },
   helper: { names: ['colorContrast'], include: [], exclude: ['button', 'input', 'modal', 'table'] },
   unused: {
@@ -60,7 +77,7 @@ const cases = {
     names: ['Button'],
     base: true,
     include: ['button', 'message', 'confirm', 'notification', 'loading-bar'],
-    exclude: ['table', 'image-cropper'],
+    exclude: ['table', 'color-picker'],
   },
 };
 
@@ -135,6 +152,20 @@ for (const engine of ['rspack', 'vite']) {
       });
     }
     const css = await readOutputs(destination);
+    if (fixture.include.length) {
+      assert.match(
+        css,
+        /--leaf-control-height:\s*36px/,
+        `${engine} ${name} includes theme defaults`,
+      );
+      assert.ok(css.includes('.leaf-floating'), `${engine} ${name} includes shared popup styles`);
+    } else {
+      assert.doesNotMatch(
+        css,
+        /--leaf-control-height/,
+        `${engine} ${name} has no unused theme CSS`,
+      );
+    }
     for (const selector of fixture.include)
       assert.ok(css.includes(`.leaf-${selector}`), `${engine} ${name} includes ${selector}`);
     for (const selector of fixture.exclude)
@@ -150,6 +181,11 @@ for (const engine of ['rspack', 'vite']) {
     styles.get('subpath').trim(),
     `${engine}: root and subpath Button CSS must match`,
   );
+  assert.equal(
+    styles.get('base').match(/--leaf-control-height:/g)?.length,
+    styles.get('button').match(/--leaf-control-height:/g)?.length,
+    `${engine}: an explicit legacy stylesheet must not duplicate the shared foundation`,
+  );
 }
 await writeFile(path.join(output, 'report.json'), `${JSON.stringify(report, null, 2)}\n`);
 console.table(report);
diff --git a/packages/react/scripts/verify-design-resources.mjs b/packages/react/scripts/verify-design-resources.mjs
index 430767f..16054a3 100644
--- a/packages/react/scripts/verify-design-resources.mjs
+++ b/packages/react/scripts/verify-design-resources.mjs
@@ -8,8 +8,10 @@ const root = path.resolve(import.meta.dirname, '../../..'),
 const tokens = JSON.parse(await readFile(path.join(assets, 'leaf.tokens.json'), 'utf8'));
 assert.equal(tokens.light.color.primary.$value.hex, '#20834a');
 assert.equal(tokens.dark.color.primary.$value.hex, '#83cf9e');
-assert.equal(tokens.comfortable.dimension['control-height'].$value.value, 40);
-assert.equal(tokens.compact.dimension['control-height'].$value.value, 34);
+assert.equal(tokens.comfortable.dimension['control-height'].$value.value, 36);
+assert.equal(tokens.compact.dimension['control-height'].$value.value, 30);
+assert.equal(tokens.comfortable.dimension['density-option-height'].$value.value, 32);
+assert.equal(tokens.compact.dimension['density-option-height'].$value.value, 26);
 for (const mode of ['light', 'dark']) {
   for (const value of Object.values(tokens[mode].color)) {
     assert.equal(value.$type, 'color');
diff --git a/packages/react/scripts/verify-package.mjs b/packages/react/scripts/verify-package.mjs
index bfb3cc7..2786900 100644
--- a/packages/react/scripts/verify-package.mjs
+++ b/packages/react/scripts/verify-package.mjs
@@ -1,24 +1,47 @@
 import assert from 'node:assert/strict';
-import { readdir, readFile, stat } from 'node:fs/promises';
+import { execFileSync } from 'node:child_process';
+import {
+  mkdir,
+  mkdtemp,
+  readdir,
+  readFile,
+  rmdir,
+  stat,
+  unlink,
+  writeFile,
+} from 'node:fs/promises';
 import { createRequire } from 'node:module';
+import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { build } from 'esbuild';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
+import { renderTailwindTheme } from './build-tailwind.mjs';
 
 const require = createRequire(import.meta.url);
 const packageRoot = new URL('../', import.meta.url);
 const manifest = JSON.parse(await readFile(new URL('package.json', packageRoot), 'utf8'));
 const entry = manifest.exports['.'];
+function assertPublicExports(api, label) {
+  for (const name of Object.keys(api))
+    assert.ok(!/Control$|^ModalBase$/u.test(name), `${label}: ${name} must remain internal`);
+}
 let subpathCount = 0;
 for (const [subpath, targets] of Object.entries(manifest.exports)) {
   if (subpath === '.' || subpath === './package.json') continue;
   if (typeof targets === 'string') {
     const file = new URL(targets, packageRoot);
     assert.ok((await stat(file)).isFile(), `${subpath} target exists`);
-    if (subpath.endsWith('.css')) {
+    if (subpath === './tailwind.css') {
+      const { leafTailwindTokens } = await import('../dist/esm/tailwind-tokens.js');
+      assert.equal(await readFile(file, 'utf8'), renderTailwindTheme(leafTailwindTokens));
+    } else if (subpath.endsWith('.css')) {
       const styles = await readFile(file, 'utf8');
-      assert.ok(styles.includes('--leaf-control-height'), `${subpath} includes shared tokens`);
+      const shared =
+        subpath === './styles.css'
+          ? await readFile(new URL('dist/esm/styles/foundation.css', packageRoot), 'utf8')
+          : styles;
+      assert.ok(shared.includes('--leaf-control-height'), `${subpath} includes shared tokens`);
       assert.ok(!styles.includes('@use'), `${subpath} is compiled CSS`);
     }
     continue;
@@ -30,6 +53,8 @@ for (const [subpath, targets] of Object.entries(manifest.exports)) {
   const specifier = `@ifhover/leaf-ui${subpath.slice(1)}`;
   const imports = await import(specifier),
     requires = require(specifier);
+  assertPublicExports(imports, `${subpath} ESM`);
+  assertPublicExports(requires, `${subpath} CommonJS`);
   assert.deepEqual(
     Object.keys(imports).sort(),
     Object.keys(requires)
@@ -54,6 +79,49 @@ for (const relativePath of [
 }
 const esm = await import('@ifhover/leaf-ui');
 const cjs = require('@ifhover/leaf-ui');
+const tailwindPreset = (await import('@ifhover/leaf-ui/tailwind')).default;
+assert.equal(tailwindPreset.theme.extend.spacing['leaf-control'], 'var(--leaf-control-height)');
+assert.equal(
+  tailwindPreset.theme.extend.colors['leaf-primary'],
+  require('@ifhover/leaf-ui/tailwind').default.theme.extend.colors['leaf-primary'],
+  'Tailwind preset agrees in ESM and CommonJS',
+);
+for (const tag of ['en-US', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR']) {
+  const resource = require(`@ifhover/leaf-ui/locales/${tag}.json`);
+  const source = JSON.parse(
+    await readFile(new URL(`src/locales/${tag}.json`, packageRoot), 'utf8'),
+  );
+  assert.deepEqual(resource, source, `${tag}: published JSON matches runtime source`);
+}
+for (const [format, api] of [
+  ['ESM', esm],
+  ['CommonJS', cjs],
+]) {
+  for (const [locale, placeholder, total] of [
+    ['ja-JP', '日付を選択', '全 24 件'],
+    ['ko-KR', '날짜 선택', '총 24개'],
+  ]) {
+    const html = renderToStaticMarkup(
+      createElement(api.ConfigProvider, { locale }, [
+        createElement(api.DatePicker, { key: 'date' }),
+        createElement(api.Pagination, { key: 'pages', total: 24, showTotal: true }),
+      ]),
+    );
+    assert.ok(html.includes(placeholder), `${format}: ${locale} built-in date text`);
+    assert.ok(html.includes(total), `${format}: ${locale} formatted total`);
+  }
+}
+const localeCheck = execFileSync(
+  process.execPath,
+  [
+    fileURLToPath(new URL(manifest.bin['leaf-ui-check-translations'], packageRoot)),
+    fileURLToPath(new URL(manifest.exports['./locales/en-US.json'], packageRoot)),
+  ],
+  { encoding: 'utf8' },
+);
+assert.match(localeCheck, /Translation valid/);
+assertPublicExports(esm, 'Root ESM');
+assertPublicExports(cjs, 'Root CommonJS');
 const components = [
   [
     'Table',
@@ -85,7 +153,7 @@ const components = [
     null,
     /role="separator"/,
   ],
-  ['Carousel', {}, ['A', 'B'], /aria-roledescription="carousel"/],
+  ['Carousel', {}, ['A', 'B'], /aria-roledescription="轮播"/],
   ['FloatButton', { label: 'Help' }, null, /<button/],
   ['FloatButtonGroup', {}, 'Actions', /<fieldset/],
   ['Mentions', { options: [{ value: 'alice' }] }, null, /<textarea/],
@@ -94,6 +162,15 @@ const components = [
   ['BottomNavigation', { items: [{ key: 'home', label: 'Home' }] }, null, /<nav/],
   ['Avatar', { alt: 'Leaf' }, 'LF', /leaf-avatar/],
   ['Card', { title: 'Project' }, 'Details', /leaf-card/],
+  [
+    'Card',
+    {
+      title: 'Project',
+      tabs: { items: [{ key: 'overview', label: 'Overview', children: 'Summary' }] },
+    },
+    null,
+    /role="tabpanel"/,
+  ],
   [
     'Collapse',
     { items: [{ key: 'first', label: 'First', children: 'Content' }] },
@@ -188,6 +265,7 @@ const components = [
   ['Row', {}, 'Row content', /leaf-row/],
   ['Col', { md: 12 }, 'Column', /leaf-col/],
   ['Space', {}, 'Actions', /leaf-space/],
+  ['Flex', { gap: 'sm', wrap: true }, 'Actions', /leaf-flex/],
   ['ScrollArea', { height: 100 }, 'Content', /leaf-scroll-area/],
   ['Scrollbar', { height: 100 }, 'Content', /leaf-scrollbar/],
   ['Masonry', {}, 'Cards', /leaf-masonry/],
@@ -236,8 +314,6 @@ const components = [
   ],
   ['FileList', { items: [{ url: '/report.pdf' }] }, null, /leaf-file-list/],
   ['Upload', {}, null, /leaf-upload/],
-  ['ImageCropper', { src: '/image.png' }, null, /leaf-image-cropper/],
-  ['SignaturePad', {}, null, /<canvas/],
   ['ButtonGroup', {}, createElement('button', { type: 'button' }, 'Save'), /<fieldset/],
   ['SplitButton', { items: [{ key: 'copy', label: 'Copy' }] }, 'Save', /leaf-button-group/],
   ['CheckboxGroup', { options: ['A', 'B'] }, null, /leaf-checkbox-group/],
@@ -345,19 +421,138 @@ for (const [format, api] of [
   assert.match(themed, /--leaf-radius:8px/);
   assert.match(themed, /--leaf-control-height:38px/);
   assert.match(themed, /--leaf-control-height-lg:48px/);
+  const buttonEntry =
+    format === 'ESM' ? await import('@ifhover/leaf-ui/button') : require('@ifhover/leaf-ui/button');
+  const defaults = renderToStaticMarkup(
+    createElement(
+      api.ConfigProvider,
+      {
+        components: {
+          Button: { size: 'lg', variant: 'outline' },
+          Input: { size: 'sm', defaultValue: 'Leaf defaults' },
+        },
+      },
+      createElement(buttonEntry.Button, null, 'Subpath defaults'),
+      createElement(api.InputSearch, { 'aria-label': 'Search defaults', enterButton: 'Find' }),
+    ),
+  );
+  assert.match(defaults, /leaf-button--outline leaf-button--lg/);
+  assert.match(defaults, /leaf-button--solid leaf-button--sm/);
+  assert.match(defaults, /value="Leaf defaults"/);
+  const resetDefaults = renderToStaticMarkup(
+    createElement(
+      api.ConfigProvider,
+      { components: { Button: { variant: 'outline', disabled: true } } },
+      createElement(
+        api.ConfigProvider,
+        { components: { Button: null } },
+        createElement(buttonEntry.Button, null, 'Reset defaults'),
+      ),
+    ),
+  );
+  assert.match(resetDefaults, /leaf-button--solid leaf-button--md/);
+  assert.doesNotMatch(resetDefaults, /disabled=""/);
+  for (const name of ['ButtonControl', 'InputControl', 'SelectControl', 'ModalBase'])
+    assert.ok(!(name in api), `${name} must remain internal`);
+  const inputEntry =
+    format === 'ESM' ? await import('@ifhover/leaf-ui/input') : require('@ifhover/leaf-ui/input');
+  const selectEntry =
+    format === 'ESM' ? await import('@ifhover/leaf-ui/select') : require('@ifhover/leaf-ui/select');
+  assert.ok(
+    !('ButtonControl' in buttonEntry),
+    'Button subpath must not expose its internal control',
+  );
+  assert.ok(!('InputControl' in inputEntry), 'Input subpath must not expose its internal control');
+  assert.ok(
+    !('SelectControl' in selectEntry),
+    'Select subpath must not expose its internal control',
+  );
 }
+const defaultPropsModule = await readFile(
+  new URL('dist/esm/config-provider/component-defaults.js', packageRoot),
+  'utf8',
+);
+assert.ok(
+  !/from\s+["'][.]/u.test(defaultPropsModule),
+  'Default props types must not load component implementations at runtime',
+);
 const esmTypes = await readFile(new URL(entry.import.types, packageRoot), 'utf8');
 assert.ok(
   !esmTypes.includes('.css') && !esmTypes.includes('.scss'),
   'Declarations must not reference extracted styles',
 );
+// Ordinary consumers must not need the optional table engine just to configure UI defaults.
+const qualityDirectory = fileURLToPath(new URL('.quality/', packageRoot));
+await mkdir(qualityDirectory, { recursive: true });
+const consumerDirectory = await mkdtemp(path.join(qualityDirectory, 'defaults-consumer-'));
+const consumerPath = path.join(consumerDirectory, 'consumer.tsx');
+const consumerConfigPath = path.join(consumerDirectory, 'tsconfig.json');
+const consumerSource = `
+import { Button, ConfigProvider, type LeafComponentDefaults, type DataTablePresentationProps, type LeafTranslation, type LeafTranslations } from '@ifhover/leaf-ui';
+import leafPreset from '@ifhover/leaf-ui/tailwind';
+const spacing: string = leafPreset.theme.extend.spacing.leaf;
+const pack: LeafTranslation = { select: { placeholder: 'Choose' } };
+const translations: LeafTranslations = { 'ja-JP': pack };
+const languages = ['ja-JP', 'en-US'] as const;
+const presentation: DataTablePresentationProps = { size: 'sm', selection: 'multiple' };
+const components: LeafComponentDefaults = {
+  Button: { variant: 'outline' }, DataTable: presentation,
+  DataTablePagination: { showSizeChanger: true }, VirtualList: { estimateSize: 36 },
+};
+export const example = <ConfigProvider components={components} locale={languages} translations={translations}><Button>Leaf</Button></ConfigProvider>;
+`;
+try {
+  await writeFile(consumerPath, consumerSource);
+  await writeFile(
+    consumerConfigPath,
+    JSON.stringify({
+      compilerOptions: {
+        target: 'ES2022',
+        module: 'ESNext',
+        moduleResolution: 'Bundler',
+        jsx: 'react-jsx',
+        strict: true,
+        skipLibCheck: false,
+        noEmit: true,
+        resolveJsonModule: false,
+        types: ['react', 'react-dom'],
+        traceResolution: true,
+        paths: {
+          '@tanstack/react-table': ['./missing-table-peer.d.ts'],
+          '@tanstack/table-core': ['./missing-table-peer.d.ts'],
+        },
+      },
+      files: ['./consumer.tsx'],
+    }),
+  );
+  const compiler = path.join(path.dirname(require.resolve('typescript/package.json')), 'bin/tsc');
+  const resolution = execFileSync(process.execPath, [compiler, '--project', consumerConfigPath], {
+    cwd: fileURLToPath(packageRoot),
+    encoding: 'utf8',
+    maxBuffer: 20 * 1024 * 1024,
+  });
+  assert.doesNotMatch(
+    resolution,
+    /Resolving module ['"]@tanstack\/(?:react-table|table-core)/u,
+    'Root declarations must not load the optional table peer',
+  );
+} finally {
+  await unlink(consumerPath).catch(() => {});
+  await unlink(consumerConfigPath).catch(() => {});
+  await rmdir(consumerDirectory);
+}
 const baseCss = await readFile(new URL(manifest.exports['./styles.css'], packageRoot), 'utf8');
-assert.match(baseCss, /--leaf-control-height:\s*40px/);
+const foundationCss = await readFile(
+  new URL('dist/esm/styles/foundation.css', packageRoot),
+  'utf8',
+);
+assert.match(foundationCss, /--leaf-control-height:\s*36px/);
+assert.match(baseCss, /@import ['"]\.\/foundation\.css['"]/);
 assert.match(baseCss, /components\/message\.css/);
 assert.match(baseCss, /components\/modal\.css/);
 assert.ok(!baseCss.includes('.leaf-table'), 'Base styles do not include ordinary component styles');
 const css = await readFile(new URL(manifest.exports['./styles/all.css'], packageRoot), 'utf8');
-assert.match(css, /--leaf-control-height:\s*40px/);
+assert.match(css, /--leaf-control-height:\s*36px/);
 assert.match(css, /--leaf-color-danger/);
 assert.doesNotMatch(css, /\.leaf-org-chart|\.leaf-list[\s.{:_-]/);
 for (const name of ['List', 'ListItem', 'OrgChart'])
@@ -409,6 +604,7 @@ for (const name of [
   'layout',
   'grid',
   'space',
+  'flex',
   'scroll-area',
   'scrollbar',
   'masonry',
@@ -430,8 +626,6 @@ for (const name of [
   'infinite-scroll',
   'file-list',
   'upload',
-  'image-cropper',
-  'signature-pad',
 ]) {
   assert.ok(css.includes(`.leaf-${name}`), `Styles must include ${name}`);
 }
@@ -495,15 +689,34 @@ const adapterCss = await readFile(
 );
 for (const name of ['table', 'checkbox', 'radio', 'input', 'pagination', 'popover'])
   assert.ok(adapterCss.includes(`.leaf-${name}`), `Adapter CSS includes ${name}`);
-assert.ok(!adapterCss.includes('.leaf-image-cropper'), 'Adapter styles must remain scoped');
+assert.ok(!adapterCss.includes('.leaf-color-picker'), 'Adapter styles must remain scoped');
 console.log('Package root:', fileURLToPath(packageRoot));
 console.log(`Verified ${subpathCount} public JS subpaths and every CSS export.`);
 
+for (const [format, extension] of [
+  ['esm', 'js'],
+  ['cjs', 'cjs'],
+]) {
+  const implementation = `dist/${format}/button/button.${extension}`;
+  const browserImplementation = `dist/${format}/browser/modules/button/button.${extension}`;
+  const originalMap = JSON.parse(
+    await readFile(new URL(`${implementation}.map`, packageRoot), 'utf8'),
+  );
+  const browserMap = JSON.parse(
+    await readFile(new URL(`${browserImplementation}.map`, packageRoot), 'utf8'),
+  );
+  assert.equal(
+    browserMap.mappings.split(';').length,
+    originalMap.mappings.split(';').length + 2,
+    `${format}: source maps account for both automatic CSS imports`,
+  );
+}
+
 for (const [specifier, expected, excluded] of [
   ['button', ['button', 'dropdown'], ['table', 'modal', 'input']],
-  ['table', ['table', 'scrollbar', 'loading'], ['image-cropper']],
-  ['table/tanstack', ['table', 'checkbox', 'pagination'], ['image-cropper']],
-  ['date-picker', ['date-picker', 'calendar', 'time-picker'], ['image-cropper']],
+  ['table', ['table', 'scrollbar', 'loading'], ['color-picker']],
+  ['table/tanstack', ['table', 'checkbox', 'pagination'], ['color-picker']],
+  ['date-picker', ['date-picker', 'calendar', 'time-picker'], ['color-picker']],
   ['config-provider', ['message', 'confirm', 'notification', 'loading-bar'], ['table']],
 ]) {
   const result = await build({
@@ -519,6 +732,11 @@ for (const [specifier, expected, excluded] of [
     external: ['react', 'react-dom', 'react/*', 'react-dom/*'],
   });
   const styles = result.outputFiles.find((file) => file.path.endsWith('.css'))?.text ?? '';
+  assert.match(
+    styles,
+    /--leaf-control-height:\s*36px/,
+    `${specifier} automatically loads theme defaults`,
+  );
   for (const name of expected)
     assert.ok(styles.includes(`.leaf-${name}`), `${specifier} automatically loads ${name}`);
   for (const name of excluded)
@@ -538,7 +756,10 @@ const commonJsBrowser = await build({
 });
 assert.ok(
   commonJsBrowser.outputFiles.some(
-    (file) => file.path.endsWith('.css') && file.text.includes('.leaf-button'),
+    (file) =>
+      file.path.endsWith('.css') &&
+      file.text.includes('.leaf-button') &&
+      /--leaf-control-height:\s*36px/.test(file.text),
   ),
 );
 console.log(
diff --git a/packages/react/src/alert/alert.tsx b/packages/react/src/alert/alert.tsx
index 898248d..a042167 100644
--- a/packages/react/src/alert/alert.tsx
+++ b/packages/react/src/alert/alert.tsx
@@ -1,5 +1,6 @@
 import { CheckCircle2, CircleX, Info, LoaderCircle, TriangleAlert, X } from 'lucide-react';
 import { type HTMLAttributes, type ReactNode, useRef, useState } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { inertProps } from '../shared/inert';
@@ -30,17 +31,18 @@ export function FeedbackIcon({ type }: { type: FeedbackType | 'loading' }) {
     />
   );
 }
-export function Alert({
-  title,
-  description,
-  type = 'info',
-  icon,
-  showIcon = true,
-  closable,
-  onClose,
-  className,
-  ...props
-}: AlertProps) {
+export function Alert(rawProps: AlertProps) {
+  const {
+    title,
+    description,
+    type = 'info',
+    icon,
+    showIcon = true,
+    closable,
+    onClose,
+    className,
+    ...props
+  } = useComponentProps('Alert', rawProps);
   const { messages } = useLeafConfig();
   const [closed, setClosed] = useState(false);
   const root = useRef<HTMLDivElement>(null);
@@ -72,7 +74,7 @@ export function Alert({
         <button
           type="button"
           className="leaf-alert__close"
-          aria-label={messages.close}
+          aria-label={messages.common.close}
           onClick={() => {
             const node = root.current;
             if (node) {
diff --git a/packages/react/src/anchor/anchor.tsx b/packages/react/src/anchor/anchor.tsx
index 8a817e7..1aef322 100644
--- a/packages/react/src/anchor/anchor.tsx
+++ b/packages/react/src/anchor/anchor.tsx
@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactNode, useEffect, useRef, useState } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useMotionEnabled } from '../shared/motion';
 import { useControllable } from '../shared/use-controllable';
@@ -17,16 +18,17 @@ export interface AnchorProps extends HTMLAttributes<HTMLElement> {
   onActiveChange?: (key: string) => void;
   smooth?: boolean;
 }
-export function Anchor({
-  items,
-  container,
-  offset = 12,
-  activeKey,
-  onActiveChange,
-  smooth = true,
-  className,
-  ...props
-}: AnchorProps) {
+export function Anchor(rawProps: AnchorProps) {
+  const {
+    items,
+    container,
+    offset = 12,
+    activeKey,
+    onActiveChange,
+    smooth = true,
+    className,
+    ...props
+  } = useComponentProps('Anchor', rawProps);
   const [active, setActive] = useControllable(activeKey, '', onActiveChange);
   const root = useRef<HTMLElement>(null);
   const indicator = useRef<HTMLSpanElement>(null);
@@ -109,16 +111,17 @@ export interface AffixProps extends HTMLAttributes<HTMLDivElement> {
   container?: () => HTMLElement | Window;
   onAffixChange?: (affixed: boolean) => void;
 }
-export function Affix({
-  offsetTop = 0,
-  offsetBottom,
-  container,
-  onAffixChange,
-  className,
-  style,
-  children,
-  ...props
-}: AffixProps) {
+export function Affix(rawProps: AffixProps) {
+  const {
+    offsetTop = 0,
+    offsetBottom,
+    container,
+    onAffixChange,
+    className,
+    style,
+    children,
+    ...props
+  } = useComponentProps('Affix', rawProps);
   const placeholder = useRef<HTMLDivElement>(null),
     content = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState<React.CSSProperties>();
diff --git a/packages/react/src/anchor/index.ts b/packages/react/src/anchor/index.ts
index 9f469dd..d4615b0 100644
--- a/packages/react/src/anchor/index.ts
+++ b/packages/react/src/anchor/index.ts
@@ -1 +1,2 @@
-export * from './anchor';
+export type { AffixProps, AnchorItem, AnchorProps } from './anchor';
+export { Affix, Anchor } from './anchor';
diff --git a/packages/react/src/appbar/appbar.tsx b/packages/react/src/appbar/appbar.tsx
index 69ec450..728d868 100644
--- a/packages/react/src/appbar/appbar.tsx
+++ b/packages/react/src/appbar/appbar.tsx
@@ -7,6 +7,7 @@ import {
   type ReactNode,
   useRef,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { useMergedRef } from '../shared/field';
@@ -17,9 +18,16 @@ export interface AppBarProps extends HTMLAttributes<HTMLElement> {
   elevation?: boolean;
 }
 export const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar(
-  { position = 'static', elevation, className, style, ...props },
+  rawProps: AppBarProps,
   ref,
 ) {
+  const {
+    position = 'static',
+    elevation,
+    className,
+    style,
+    ...props
+  } = useComponentProps('AppBar', rawProps);
   return (
     <header
       {...props}
@@ -33,9 +41,10 @@ export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
   dense?: boolean;
 }
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(
-  { dense, className, onKeyDown, ...props },
+  rawProps: ToolbarProps,
   ref,
 ) {
+  const { dense, className, onKeyDown, ...props } = useComponentProps('Toolbar', rawProps);
   const root = useRef<HTMLDivElement>(null);
   const merged = useMergedRef(root, ref);
   const { direction } = useLeafConfig();
@@ -93,16 +102,17 @@ export interface BottomNavigationProps extends Omit<HTMLAttributes<HTMLElement>,
     props: AnchorHTMLAttributes<HTMLAnchorElement>,
   ) => ReactNode;
 }
-export function BottomNavigation({
-  items,
-  value,
-  defaultValue = '',
-  onChange,
-  showLabels = true,
-  linkRender,
-  className,
-  ...props
-}: BottomNavigationProps) {
+export function BottomNavigation(rawProps: BottomNavigationProps) {
+  const {
+    items,
+    value,
+    defaultValue = '',
+    onChange,
+    showLabels = true,
+    linkRender,
+    className,
+    ...props
+  } = useComponentProps('BottomNavigation', rawProps);
   const { direction } = useLeafConfig(),
     root = useRef<HTMLElement>(null);
   const [current, setCurrent] = useControllable(
diff --git a/packages/react/src/appbar/index.ts b/packages/react/src/appbar/index.ts
index a645378..d4bcffc 100644
--- a/packages/react/src/appbar/index.ts
+++ b/packages/react/src/appbar/index.ts
@@ -1 +1,7 @@
-export * from './appbar';
+export type {
+  AppBarProps,
+  BottomNavigationItem,
+  BottomNavigationProps,
+  ToolbarProps,
+} from './appbar';
+export { AppBar, BottomNavigation, Toolbar } from './appbar';
diff --git a/packages/react/src/autocomplete/autocomplete.scss b/packages/react/src/autocomplete/autocomplete.scss
index f987042..e159f8c 100644
--- a/packages/react/src/autocomplete/autocomplete.scss
+++ b/packages/react/src/autocomplete/autocomplete.scss
@@ -33,29 +33,10 @@
   }
 }
 .leaf-autocomplete__panel .leaf-floating__option {
-  position: relative;
-  padding-inline-start: 14px;
-  &::before {
-    content: '';
-    position: absolute;
-    inset-inline-start: 5px;
-    inset-block: 8px;
-    width: 2px;
-    border-radius: 2px;
-    background: var(--leaf-color-primary);
-    opacity: 0;
-    transform: scaleY(0.4);
-    transition:
-      opacity var(--leaf-motion-fast) var(--leaf-motion-easing),
-      transform var(--leaf-motion-duration) var(--leaf-motion-spring);
-  }
-  &[aria-selected='true']::before {
-    opacity: 1;
-    transform: scaleY(1);
-  }
+  justify-content: space-between;
 }
-@media (prefers-reduced-motion: reduce) {
-  .leaf-autocomplete__panel .leaf-floating__option::before {
-    transition: none;
+.leaf-autocomplete__panel[data-hover-motion] {
+  .leaf-floating__highlight {
+    border-color: transparent;
   }
 }
diff --git a/packages/react/src/autocomplete/autocomplete.test.tsx b/packages/react/src/autocomplete/autocomplete.test.tsx
index 70f588c..969e4f4 100644
--- a/packages/react/src/autocomplete/autocomplete.test.tsx
+++ b/packages/react/src/autocomplete/autocomplete.test.tsx
@@ -9,6 +9,22 @@ const options = [
   { value: 'Pine Forest' },
 ];
 describe('AutoComplete', () => {
+  it('shows decorative icons above loading and custom empty content', async () => {
+    const { rerender } = render(<AutoComplete aria-label="项目" options={[]} loading />);
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByRole('listbox')).toHaveAttribute('aria-busy', 'true');
+    expect(screen.getByText('处理中').parentElement?.querySelector('svg')).toHaveClass(
+      'leaf-floating__loading-icon',
+    );
+    rerender(<AutoComplete aria-label="项目" options={[]} notFoundContent="没有项目" />);
+    expect(screen.getByText('没有项目').parentElement?.querySelector('svg')).toHaveAttribute(
+      'aria-hidden',
+      'true',
+    );
+    expect(screen.getByText('没有项目').parentElement?.querySelector('svg')).not.toHaveClass(
+      'leaf-floating__loading-icon',
+    );
+  });
   it('filters suggestions, supports free text and selects with arrows and Enter', async () => {
     const onSelect = vi.fn();
     render(<AutoComplete aria-label="项目" options={options} onSelect={onSelect} />);
diff --git a/packages/react/src/autocomplete/autocomplete.tsx b/packages/react/src/autocomplete/autocomplete.tsx
index a95749b..6c217cb 100644
--- a/packages/react/src/autocomplete/autocomplete.tsx
+++ b/packages/react/src/autocomplete/autocomplete.tsx
@@ -8,7 +8,9 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
+import { estimateControlHeight } from '../density';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { ClearButton } from '../shared/clear-button';
@@ -20,8 +22,10 @@ import {
   useFloatingDismiss,
   usePopupState,
 } from '../shared/floating';
+import { FloatingFeedback } from '../shared/floating-feedback';
 import { FloatingHighlight, useFloatingHighlight } from '../shared/floating-highlight';
 import type { ControlSize, ControlStatus } from '../shared/types';
+import { useFormattedText } from '../shared/use-formatted-text';
 
 export interface AutoCompleteOption {
   value: string;
@@ -67,7 +71,10 @@ export interface AutoCompleteProps
 }
 
 export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(function AutoComplete(
-  {
+  rawProps: AutoCompleteProps,
+  forwardedRef,
+) {
+  const {
     options: entries,
     value,
     defaultValue = '',
@@ -92,7 +99,7 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(func
     allowClear,
     virtual: virtualProp,
     listHeight = 248,
-    optionHeight = 36,
+    optionHeight: optionHeightProp,
     popupPlacement,
     popupClassName,
     popupStyle,
@@ -104,13 +111,13 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(func
     'aria-label': ariaLabel,
     'aria-invalid': ariaInvalid,
     ...props
-  },
-  forwardedRef,
-) {
+  } = useComponentProps('AutoComplete', rawProps);
   const field = useFormField();
   const disabled = disabledProp || field?.disabled;
   const status = statusProp ?? (field?.error ? 'error' : undefined);
-  const { locale, messages } = useLeafConfig();
+  const { messages, theme, density } = useLeafConfig();
+  const format = useFormattedText();
+  const optionHeight = optionHeightProp ?? Math.max(24, estimateControlHeight(theme, density) - 4);
   const inputRef = useRef<HTMLInputElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
   const ref = useMergedRef(inputRef, forwardedRef);
@@ -149,6 +156,15 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(func
     if (open && virtual && active >= 0) virtualizer.scrollToIndex(active, { align: 'auto' });
   }, [open, virtual, active, virtualizer]);
   const expanded = open && !disabled && !readOnly;
+  const hasSuggestions = visibleOptions.length > 0 && !errorContent;
+  const listboxProps = {
+    id: listId,
+    role: 'listbox' as const,
+    'aria-busy': loading || undefined,
+    'aria-label': ariaLabel
+      ? format('autoComplete.suggestions', { label: ariaLabel })
+      : messages.autoComplete.empty,
+  };
   useFloatingDismiss(expanded, () => setOpen(false), inputRef, panelRef);
   useActiveOption(expanded, visibleOptions[active] ? `${listId}-${active}` : undefined, panelRef);
   const highlight = useFloatingHighlight(
@@ -245,7 +261,7 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(func
       />
       {allowClear && text && !disabled && !readOnly && (
         <ClearButton
-          label={messages.clearInput}
+          label={messages.input.clear}
           onClear={() => {
             setText('');
             onChange?.('');
@@ -259,30 +275,26 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(func
         triggerRef={inputRef}
         panelRef={panelRef}
         matchWidth
-        id={listId}
+        {...(hasSuggestions ? listboxProps : {})}
         className={classes('leaf-floating', 'leaf-autocomplete__panel', popupClassName)}
         data-hover-motion=""
+        data-selection="candidate"
         placement={popupPlacement}
         style={{ maxHeight: listHeight, ...popupStyle }}
         container={getPopupContainer}
         render={popupRender}
-        role="listbox"
-        aria-busy={loading || undefined}
-        aria-label={
-          ariaLabel
-            ? `${ariaLabel} ${locale === 'en-US' ? 'suggestions' : '建议'}`
-            : messages.noMatches
-        }
       >
-        <FloatingHighlight style={highlight} selected />
+        {!hasSuggestions && <div {...listboxProps} />}
+        <FloatingHighlight style={highlight} />
         {loading && !visibleOptions.length ? (
-          <div className="leaf-floating__empty">{messages.loading}</div>
+          <FloatingFeedback loading>{messages.common.loading}</FloatingFeedback>
         ) : errorContent ? (
           <div className="leaf-floating__empty" role="alert">
             {errorContent}
           </div>
         ) : visibleOptions.length ? (
           <div
+            className={virtual ? undefined : 'leaf-floating__options'}
             style={
               virtual ? { height: virtualizer.getTotalSize(), position: 'relative' } : undefined
             }
@@ -333,14 +345,16 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(func
                       onMouseEnter={() => !option.disabled && setActive(index)}
                       onClick={() => select(option)}
                     >
-                      {optionRender?.(option) ?? option.label ?? option.value}
+                      <span className="leaf-floating__option-label">
+                        {optionRender?.(option) ?? option.label ?? option.value}
+                      </span>
                     </button>
                   </div>
                 ),
             )}
           </div>
         ) : (
-          <div className="leaf-floating__empty">{notFoundContent ?? messages.noMatches}</div>
+          <FloatingFeedback>{notFoundContent ?? messages.autoComplete.empty}</FloatingFeedback>
         )}
       </FloatingPanel>
     </div>
diff --git a/packages/react/src/autocomplete/index.ts b/packages/react/src/autocomplete/index.ts
index 08a0104..a0c5420 100644
--- a/packages/react/src/autocomplete/index.ts
+++ b/packages/react/src/autocomplete/index.ts
@@ -1 +1,6 @@
-export * from './autocomplete';
+export type {
+  AutoCompleteOption,
+  AutoCompleteOptionGroup,
+  AutoCompleteProps,
+} from './autocomplete';
+export { AutoComplete } from './autocomplete';
diff --git a/packages/react/src/avatar/avatar.tsx b/packages/react/src/avatar/avatar.tsx
index e21d9cd..4eddd5e 100644
--- a/packages/react/src/avatar/avatar.tsx
+++ b/packages/react/src/avatar/avatar.tsx
@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import type { ControlSize } from '../shared/types';
@@ -21,7 +22,7 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
   icon?: ReactNode;
   onError?: () => void;
 }
-export function Avatar({
+export function AvatarControl({
   src,
   srcSet,
   imageProps,
@@ -50,7 +51,9 @@ export function Avatar({
       {...props}
       role="img"
       aria-label={
-        alt ?? props['aria-label'] ?? (typeof children === 'string' ? children : messages.avatar)
+        alt ??
+        props['aria-label'] ??
+        (typeof children === 'string' ? children : messages.avatar.label)
       }
       className={classes(
         'leaf-avatar',
@@ -93,3 +96,8 @@ export function Avatar({
     </span>
   );
 }
+
+export function Avatar(rawProps: AvatarProps) {
+  const props = useComponentProps('Avatar', rawProps);
+  return <AvatarControl {...props} />;
+}
diff --git a/packages/react/src/avatar/group.tsx b/packages/react/src/avatar/group.tsx
index cfbe67c..1c407ae 100644
--- a/packages/react/src/avatar/group.tsx
+++ b/packages/react/src/avatar/group.tsx
@@ -6,27 +6,31 @@ import {
   type ReactNode,
   useRef,
 } from 'react';
-import { Popover } from '../popover';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { PopoverControl as Popover } from '../popover/popover';
 import { classes } from '../shared/classes';
 import { useListMotion } from '../shared/motion';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
-import { Avatar, type AvatarProps } from './avatar';
+import { AvatarControl as Avatar, type AvatarProps } from './avatar';
 export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
   maxCount?: number;
   size?: AvatarProps['size'];
   shape?: AvatarProps['shape'];
   maxContent?: (hiddenCount: number) => ReactNode;
 }
-export function AvatarGroup({
-  maxCount = Infinity,
-  size,
-  shape,
-  maxContent,
-  className,
-  children,
-  ...props
-}: AvatarGroupProps) {
+export function AvatarGroup(rawProps: AvatarGroupProps) {
+  const {
+    maxCount = Infinity,
+    size,
+    shape,
+    maxContent,
+    className,
+    children,
+    ...props
+  } = useComponentProps('AvatarGroup', rawProps);
   const t = useText();
+  const format = useFormattedText();
   const root = useRef<HTMLDivElement>(null);
   const items = Children.toArray(children).map((child) =>
     isValidElement<AvatarProps>(child)
@@ -51,9 +55,9 @@ export function AvatarGroup({
           <button
             type="button"
             className="leaf-avatar-group__more"
-            aria-label={t(`查看其余 ${hidden.length} 位成员`, `Show ${hidden.length} more members`)}
+            aria-label={format('avatar.showMore', { count: hidden.length })}
           >
-            <Avatar size={size} shape={shape} alt={t('更多成员', 'More members')}>
+            <Avatar size={size} shape={shape} alt={t('avatar.moreMembers')}>
               {maxContent?.(hidden.length) ?? `+${hidden.length}`}
             </Avatar>
           </button>
diff --git a/packages/react/src/backtop/backtop.tsx b/packages/react/src/backtop/backtop.tsx
index d576885..923ae5b 100644
--- a/packages/react/src/backtop/backtop.tsx
+++ b/packages/react/src/backtop/backtop.tsx
@@ -1,6 +1,7 @@
 import { ArrowUp } from 'lucide-react';
 import { type ButtonHTMLAttributes, useEffect, useState } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useMotionEnabled } from '../shared/motion';
 import { useText } from '../shared/use-text';
@@ -9,15 +10,16 @@ export interface BackTopProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   visibilityHeight?: number;
   behavior?: ScrollBehavior;
 }
-export function BackTop({
-  target,
-  visibilityHeight = 400,
-  behavior = 'smooth',
-  className,
-  children,
-  onClick,
-  ...props
-}: BackTopProps) {
+export function BackTop(rawProps: BackTopProps) {
+  const {
+    target,
+    visibilityHeight = 400,
+    behavior = 'smooth',
+    className,
+    children,
+    onClick,
+    ...props
+  } = useComponentProps('BackTop', rawProps);
   const t = useText();
   const motion = useMotionEnabled();
   const [visible, setVisible] = useState(false);
@@ -32,10 +34,10 @@ export function BackTop({
     return () => element.removeEventListener('scroll', update);
   }, [target, visibilityHeight]);
   return (
-    <Button
+    <ButtonControl
       {...props}
       className={classes('leaf-back-top', className)}
-      aria-label={props['aria-label'] ?? t('回到顶部', 'Back to top')}
+      aria-label={props['aria-label'] ?? t('backTop.backToTop')}
       data-visible={visible || undefined}
       tabIndex={visible ? props.tabIndex : -1}
       aria-hidden={!visible}
@@ -47,6 +49,6 @@ export function BackTop({
       }}
     >
       {children}
-    </Button>
+    </ButtonControl>
   );
 }
diff --git a/packages/react/src/badge/badge.tsx b/packages/react/src/badge/badge.tsx
index 59d974b..075dba2 100644
--- a/packages/react/src/badge/badge.tsx
+++ b/packages/react/src/badge/badge.tsx
@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactNode, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useContentTransition } from '../shared/presence';
 
@@ -11,19 +12,20 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   text?: ReactNode;
   color?: string;
 }
-export function Badge({
-  count,
-  max = 99,
-  showZero = false,
-  dot = false,
-  status,
-  text,
-  color,
-  children,
-  className,
-  style,
-  ...props
-}: BadgeProps) {
+export function Badge(rawProps: BadgeProps) {
+  const {
+    count,
+    max = 99,
+    showZero = false,
+    dot = false,
+    status,
+    text,
+    color,
+    children,
+    className,
+    style,
+    ...props
+  } = useComponentProps('Badge', rawProps);
   const number = useRef<HTMLSpanElement>(null);
   const hasCount = count !== undefined && count !== '' && (count !== 0 || showZero);
   const visible = dot || status || hasCount;
diff --git a/packages/react/src/breadcrumb/breadcrumb.tsx b/packages/react/src/breadcrumb/breadcrumb.tsx
index ab89e1a..9277f3d 100644
--- a/packages/react/src/breadcrumb/breadcrumb.tsx
+++ b/packages/react/src/breadcrumb/breadcrumb.tsx
@@ -1,8 +1,10 @@
 import { ChevronRight, Ellipsis } from 'lucide-react';
 import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
-import { Dropdown, type DropdownItem } from '../dropdown';
+import type { DropdownItem } from '../dropdown';
+import { DropdownControl as Dropdown } from '../dropdown/dropdown';
 import { classes } from '../shared/classes';
 
 export interface BreadcrumbItem
@@ -20,17 +22,18 @@ export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
   itemsAfterCollapse?: number;
   itemRender?: (item: BreadcrumbItem, index: number) => ReactNode;
 }
-export function Breadcrumb({
-  items,
-  separator = <ChevronRight size={13} />,
-  maxItems = Infinity,
-  itemsBeforeCollapse = 1,
-  itemsAfterCollapse = 1,
-  itemRender,
-  className,
-  'aria-label': label,
-  ...props
-}: BreadcrumbProps) {
+export function Breadcrumb(rawProps: BreadcrumbProps) {
+  const {
+    items,
+    separator = <ChevronRight size={13} />,
+    maxItems = Infinity,
+    itemsBeforeCollapse = 1,
+    itemsAfterCollapse = 1,
+    itemRender,
+    className,
+    'aria-label': label,
+    ...props
+  } = useComponentProps('Breadcrumb', rawProps);
   const { messages } = useLeafConfig();
   const before = Math.max(1, itemsBeforeCollapse),
     after = Math.max(1, itemsAfterCollapse);
@@ -53,10 +56,10 @@ export function Breadcrumb({
                   : undefined,
               }))}
             >
-              <Button
+              <ButtonControl
                 variant="ghost"
                 size="sm"
-                aria-label={messages.expand}
+                aria-label={messages.tree.expand}
                 startIcon={<Ellipsis size={16} />}
               />
             </Dropdown>
@@ -70,7 +73,7 @@ export function Breadcrumb({
     <nav
       {...props}
       className={classes('leaf-breadcrumb', className)}
-      aria-label={label ?? messages.breadcrumb}
+      aria-label={label ?? messages.breadcrumb.label}
     >
       <ol>
         {visible.map(({ key, title, icon, menu, ...item }, index) => (
@@ -87,9 +90,9 @@ export function Breadcrumb({
               )
             ) : menu ? (
               <Dropdown items={menu}>
-                <Button variant="ghost" size="sm">
+                <ButtonControl variant="ghost" size="sm">
                   {title}
-                </Button>
+                </ButtonControl>
               </Dropdown>
             ) : item.href ? (
               <a {...item} aria-current={index === visible.length - 1 ? 'page' : undefined}>
diff --git a/packages/react/src/button/button.scss b/packages/react/src/button/button.scss
index e3cd4f8..6288500 100644
--- a/packages/react/src/button/button.scss
+++ b/packages/react/src/button/button.scss
@@ -286,6 +286,67 @@
   min-width: 0;
 }
 
+.leaf-split-button {
+  isolation: isolate;
+  &.leaf-button-group--attached > .leaf-button {
+    z-index: 1;
+  }
+}
+
+.leaf-split-button > .leaf-button--outline {
+  --leaf-split-button-divider-color: var(
+    --leaf-component-button-border-color,
+    var(--leaf-color-border)
+  );
+  &.leaf-button--danger {
+    --leaf-split-button-divider-color: var(
+      --leaf-component-button-border-color,
+      var(--leaf-button-border)
+    );
+  }
+  // The shared edge stays neutral while the outer border responds to each action.
+  &:first-child {
+    border-inline-end-color: var(--leaf-split-button-divider-color);
+  }
+  &:not(:first-child) {
+    border-inline-start-color: var(--leaf-split-button-divider-color);
+  }
+}
+
+.leaf-split-button > .leaf-button + .leaf-button {
+  &:not(.leaf-button--outline) {
+    margin-inline-start: 0;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    inset-block: 22%;
+    inset-inline-start: 0;
+    width: 1px;
+    background: var(--leaf-component-button-border-color, var(--leaf-color-border));
+    pointer-events: none;
+  }
+  &.leaf-button--solid::before {
+    background: color-mix(in srgb, var(--leaf-button-on-color) 32%, transparent);
+  }
+  &.leaf-button--outline::before {
+    display: none;
+  }
+  &.leaf-button--link {
+    margin-inline-start: 8px;
+    &::before {
+      inset-inline-start: -4px;
+    }
+  }
+  @media (forced-colors: active) {
+    &::before,
+    &.leaf-button--solid::before {
+      background: ButtonText;
+    }
+  }
+}
+
 .leaf-button {
   --leaf-current-control-height: var(--leaf-component-button-height, var(--leaf-control-height));
   --leaf-current-font-size: var(--leaf-component-button-font-size, var(--leaf-font-size));
diff --git a/packages/react/src/button/button.tsx b/packages/react/src/button/button.tsx
index d7264d9..cb82b7c 100644
--- a/packages/react/src/button/button.tsx
+++ b/packages/react/src/button/button.tsx
@@ -1,5 +1,6 @@
 import { LoaderCircle } from 'lucide-react';
 import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import type { ControlSize } from '../shared/types';
 import { useButtonWave } from './wave';
@@ -10,7 +11,7 @@ export type ButtonSize = ControlSize;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Visual style. @default 'solid' */
   variant?: ButtonVariant;
-  /** Shared control size. @default 'md' (40px) */
+  /** Shared control size. @default 'md' (36px) */
   size?: ButtonSize;
   /** Uses the semantic danger color in every variant. */
   danger?: boolean;
@@ -24,8 +25,12 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   endIcon?: ReactNode;
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  {
+/** Internal rendering primitive; its owner resolves defaults and interaction constraints. */
+export const ButtonControl = forwardRef<HTMLButtonElement, ButtonProps>(function ButtonControl(
+  rawProps: ButtonProps,
+  ref,
+) {
+  const {
     variant = 'solid',
     size = 'md',
     danger = false,
@@ -40,9 +45,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     onClick,
     'aria-busy': ariaBusy,
     ...props
-  },
-  ref,
-) {
+  } = rawProps;
   const hasLabel =
     children !== undefined && children !== null && children !== false && children !== '';
   const iconOnly = !hasLabel && Boolean(startIcon || endIcon || loading);
@@ -91,4 +94,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     </button>
   );
 });
+ButtonControl.displayName = 'ButtonControl';
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(rawProps, ref) {
+  const props = useComponentProps('Button', rawProps);
+  return <ButtonControl {...props} ref={ref} />;
+});
 Button.displayName = 'Button';
diff --git a/packages/react/src/button/group.tsx b/packages/react/src/button/group.tsx
index 9ed9123..6db9397 100644
--- a/packages/react/src/button/group.tsx
+++ b/packages/react/src/button/group.tsx
@@ -6,17 +6,19 @@ import {
   isValidElement,
   type ReactElement,
 } from 'react';
-import { Dropdown, type DropdownItem, type DropdownProps } from '../dropdown';
+import { useComponentProps } from '../config-provider/component-defaults';
+import type { DropdownItem, DropdownProps } from '../dropdown';
+import { DropdownControl as Dropdown } from '../dropdown/dropdown';
 import { classes } from '../shared/classes';
 import type { ControlSize } from '../shared/types';
 import { useText } from '../shared/use-text';
-import { Button, type ButtonProps } from './button';
+import { ButtonControl, type ButtonProps } from './button';
 export interface ButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
   size?: ControlSize;
   disabled?: boolean;
   attached?: boolean;
 }
-export function ButtonGroup({
+export function ButtonGroupControl({
   size,
   disabled,
   attached = true,
@@ -46,27 +48,33 @@ export interface SplitButtonProps extends ButtonProps {
   menuLabel?: string;
   dropdownProps?: Omit<DropdownProps, 'items' | 'children' | 'disabled'>;
 }
-export function SplitButton({
-  items,
-  menuLabel,
-  dropdownProps,
-  children,
-  className,
-  ...props
-}: SplitButtonProps): ReactElement {
+export function SplitButton(incomingProps: SplitButtonProps): ReactElement {
+  const { items, menuLabel, dropdownProps, ...rawProps } = useComponentProps(
+    'SplitButton',
+    incomingProps,
+  );
+  const { children, className, ...props } = useComponentProps('Button', rawProps);
+  const inactive = Boolean(props.disabled || props.loading);
   const t = useText();
   return (
-    <ButtonGroup className={className}>
-      <Button {...props}>{children}</Button>
-      <Dropdown {...dropdownProps} items={items} disabled={props.disabled || props.loading}>
-        <Button
+    <ButtonGroupControl className={classes('leaf-split-button', className)}>
+      <ButtonControl {...props}>{children}</ButtonControl>
+      <Dropdown {...dropdownProps} items={items} disabled={inactive}>
+        <ButtonControl
+          type="button"
+          disabled={inactive}
           variant={props.variant}
           size={props.size}
           danger={props.danger}
           startIcon={<ChevronDown size={16} />}
-          aria-label={menuLabel ?? t('更多操作', 'More actions')}
+          aria-label={menuLabel ?? t('button.moreActions')}
         />
       </Dropdown>
-    </ButtonGroup>
+    </ButtonGroupControl>
   );
 }
+
+export function ButtonGroup(rawProps: ButtonGroupProps) {
+  const props = useComponentProps('ButtonGroup', rawProps);
+  return <ButtonGroupControl {...props} />;
+}
diff --git a/packages/react/src/calendar/calendar.tsx b/packages/react/src/calendar/calendar.tsx
index e864b9e..94dbf15 100644
--- a/packages/react/src/calendar/calendar.tsx
+++ b/packages/react/src/calendar/calendar.tsx
@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactNode, useEffect, useState } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { CalendarPanel } from '../shared/calendar';
 import { classes } from '../shared/classes';
@@ -19,24 +20,25 @@ export interface CalendarProps
   headerExtra?: ReactNode;
   showToday?: boolean;
 }
-export function Calendar({
-  value,
-  defaultValue,
-  onChange,
-  visibleDate,
-  onVisibleChange,
-  mode = 'date',
-  fullscreen = true,
-  minDate,
-  maxDate,
-  disabledDate,
-  cellRender,
-  headerExtra,
-  showToday = true,
-  className,
-  'aria-label': label,
-  ...props
-}: CalendarProps) {
+export function Calendar(rawProps: CalendarProps) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    visibleDate,
+    onVisibleChange,
+    mode = 'date',
+    fullscreen = true,
+    minDate,
+    maxDate,
+    disabledDate,
+    cellRender,
+    headerExtra,
+    showToday = true,
+    className,
+    'aria-label': label,
+    ...props
+  } = useComponentProps('Calendar', rawProps);
   const { messages } = useLeafConfig();
   const [internal, setInternal] = useState(defaultValue);
   const selected = value ?? internal;
@@ -54,7 +56,7 @@ export function Calendar({
   return (
     <section
       {...props}
-      aria-label={label ?? messages.calendar}
+      aria-label={label ?? messages.calendar.label}
       className={classes('leaf-calendar-view', fullscreen && 'leaf-calendar-view--full', className)}
     >
       <CalendarPanel
diff --git a/packages/react/src/card/card.scss b/packages/react/src/card/card.scss
index 044234f..8af54be 100644
--- a/packages/react/src/card/card.scss
+++ b/packages/react/src/card/card.scss
@@ -1,6 +1,9 @@
+@use '../styles/mixins';
+
 .leaf-card {
   --leaf-card-padding: var(--leaf-component-card-padding, calc(var(--leaf-spacing) * 2.5));
-  --leaf-card-heading-gap: var(--leaf-component-card-gap, calc(var(--leaf-spacing) * 1.5));
+  --leaf-card-heading-gap: var(--leaf-component-card-gap, calc(var(--leaf-spacing) * 2));
+  --leaf-card-title-font-size: calc(var(--leaf-font-size) + 1px);
   box-sizing: border-box;
   min-width: 0;
   border: 1px solid transparent;
@@ -10,31 +13,28 @@
   font: var(--leaf-component-card-font-size, var(--leaf-font-size))/1.6 var(--leaf-font-family);
   transition:
     border-color var(--leaf-motion-duration) var(--leaf-motion-easing),
-    box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing),
-    transform var(--leaf-motion-slow) var(--leaf-motion-spring);
+    box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
   &--bordered {
     border-color: var(--leaf-component-card-border-color, var(--leaf-color-divider));
     box-shadow: var(--leaf-component-card-shadow, none);
   }
-  &--hoverable:hover,
-  &--hoverable:focus-within {
-    border-color: var(--leaf-color-border-hover);
-    box-shadow: var(--leaf-shadow-md);
-    transform: translateY(-2px);
-  }
   &--sm {
     --leaf-card-padding: var(--leaf-component-card-padding, calc(var(--leaf-spacing) * 2));
-    --leaf-card-heading-gap: var(--leaf-component-card-gap, var(--leaf-spacing));
+    --leaf-card-heading-gap: var(--leaf-component-card-gap, calc(var(--leaf-spacing) * 1.5));
+    --leaf-card-title-font-size: var(--leaf-font-size);
   }
-  &--sm &__title {
-    font-size: var(--leaf-font-size);
+  &--lg {
+    --leaf-card-padding: var(--leaf-component-card-padding, calc(var(--leaf-spacing) * 3));
+    --leaf-card-heading-gap: var(--leaf-component-card-gap, calc(var(--leaf-spacing) * 2.5));
+    --leaf-card-title-font-size: calc(var(--leaf-font-size) + 2px);
   }
   &__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    padding: var(--leaf-card-padding) var(--leaf-card-padding) 0;
+    padding: var(--leaf-card-padding);
+    padding-block: var(--leaf-card-heading-gap);
     background: var(--leaf-component-card-header-background, transparent);
     border-start-start-radius: inherit;
     border-start-end-radius: inherit;
@@ -51,7 +51,8 @@
   &__title {
     min-width: 0;
     margin: 0;
-    font: var(--leaf-font-weight) calc(var(--leaf-font-size) + 1px) / 1.5 var(--leaf-font-family);
+    font: var(--leaf-font-weight, 500) var(--leaf-card-title-font-size) / 1.5
+      var(--leaf-font-family);
     overflow-wrap: anywhere;
   }
   &__extra {
@@ -71,10 +72,11 @@
     }
   }
   &__header + &__body {
-    padding-block-start: var(--leaf-card-heading-gap);
+    padding-block-start: 0;
   }
   &__footer {
-    padding: 0 var(--leaf-card-padding) var(--leaf-card-padding);
+    padding: var(--leaf-card-padding);
+    padding-block-start: 0;
     border-end-start-radius: inherit;
     border-end-end-radius: inherit;
     background: var(--leaf-component-card-footer-background, transparent);
@@ -86,15 +88,13 @@
     }
   }
   &--divided > &__header {
-    padding-block-end: var(--leaf-card-padding);
     border-block-end: 1px solid var(--leaf-component-card-border-color, var(--leaf-color-divider));
   }
   &--divided > &__header + &__body {
     padding-block-start: var(--leaf-card-padding);
   }
   &--divided > &__footer {
-    padding-block-start: calc(var(--leaf-card-padding) * 0.75);
-    padding-block-end: calc(var(--leaf-card-padding) * 0.75);
+    @include mixins.action-footer-padding(card);
     border-block-start: 1px solid var(--leaf-component-card-border-color, var(--leaf-color-divider));
     background: var(--leaf-component-card-footer-background, var(--leaf-color-surface-muted));
   }
@@ -108,6 +108,83 @@
       object-fit: cover;
     }
   }
+  &--tabbed > &__header {
+    padding-block-end: calc(var(--leaf-card-heading-gap) / 2);
+    border-block-end: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  &__tabs {
+    // The navigation belongs to the heading; panes use the card's content insets.
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+    > .leaf-tabs__header {
+      padding: var(--leaf-card-padding);
+      padding-block: 0;
+      border-block-end: 1px solid var(--leaf-component-card-border-color, var(--leaf-color-divider));
+      background: var(--leaf-component-card-header-background, transparent);
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+      > .leaf-tabs__list {
+        box-shadow: none;
+        > .leaf-tabs__track {
+          gap: var(--leaf-spacing-md);
+        }
+      }
+      .leaf-tabs__tab {
+        padding-inline: 0;
+      }
+    }
+    > .leaf-tabs__panels > .leaf-tabs__panel {
+      padding: var(--leaf-card-padding);
+      > :first-child {
+        margin-block-start: 0;
+      }
+      > :last-child {
+        margin-block-end: 0;
+      }
+    }
+  }
+  & > &__tabs:first-child > .leaf-tabs__header,
+  & > &__cover + &__tabs > .leaf-tabs__header {
+    // A replacement heading fills the whole row; the underline stays on its bottom edge.
+    --leaf-card-tab-heading-height: max(
+      var(--leaf-current-control-height),
+      calc(var(--leaf-card-title-font-size) * 1.5 + var(--leaf-card-heading-gap) * 2)
+    );
+    align-items: stretch;
+    > .leaf-tabs__list {
+      display: flex;
+      > .leaf-tabs__track {
+        flex-shrink: 0;
+        > .leaf-tabs__entry {
+          align-items: stretch;
+          > .leaf-tabs__tab {
+            min-height: var(--leaf-card-tab-heading-height);
+          }
+          > .leaf-tabs__close,
+          > .leaf-tabs__drag {
+            align-self: center;
+          }
+        }
+      }
+    }
+    > .leaf-tabs__extra {
+      align-self: center;
+    }
+  }
+  &__header + &__tabs > .leaf-tabs__header {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  &__tabs + &__body {
+    padding-block-start: 0;
+  }
+  &__tab-extra {
+    display: flex;
+    align-items: center;
+    gap: var(--leaf-spacing-sm);
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .leaf-card {
diff --git a/packages/react/src/card/card.test.tsx b/packages/react/src/card/card.test.tsx
new file mode 100644
index 0000000..90af49a
--- /dev/null
+++ b/packages/react/src/card/card.test.tsx
@@ -0,0 +1,87 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { Card } from './card';
+
+const items = [
+  { key: 'details', label: 'Details', children: <input aria-label="Project name" /> },
+  { key: 'billing', label: 'Billing', disabled: true, children: 'Billing content' },
+  { key: 'members', label: 'Members', children: 'Team members' },
+];
+
+describe('Card tabs', () => {
+  it('uses Tabs keyboard navigation and retains visited form state', async () => {
+    const change = vi.fn();
+    render(<Card title="Project" tabs={{ items, onChange: change }} footer="Actions" />);
+    expect(screen.getByRole('tablist')).toHaveAccessibleName('Project');
+    await userEvent.type(screen.getByRole('textbox', { name: 'Project name' }), 'Leaf');
+    screen.getByRole('tab', { name: 'Details' }).focus();
+    await userEvent.keyboard('{ArrowRight}');
+    expect(screen.getByRole('tab', { name: 'Members' })).toHaveFocus();
+    expect(screen.getByRole('tabpanel', { name: 'Members' })).toHaveTextContent('Team members');
+    expect(change).toHaveBeenCalledWith('members');
+    expect(screen.getByText('Actions')).toBeInTheDocument();
+    await userEvent.keyboard('{Home}');
+    expect(screen.getByRole('textbox', { name: 'Project name' })).toHaveValue('Leaf');
+  });
+
+  it('supports controlled manual activation and destroying inactive content', async () => {
+    const change = vi.fn();
+    const { rerender } = render(
+      <Card tabs={{ items, activeKey: 'details', activationMode: 'manual', onChange: change }} />,
+    );
+    screen.getByRole('tab', { name: 'Details' }).focus();
+    await userEvent.keyboard('{End}');
+    expect(change).not.toHaveBeenCalled();
+    expect(screen.getByRole('tab', { name: 'Details' })).toHaveAttribute('aria-selected', 'true');
+    await userEvent.keyboard('{Enter}');
+    expect(change).toHaveBeenCalledWith('members');
+    rerender(<Card tabs={{ items, activeKey: 'members', destroyInactive: true }} />);
+    expect(screen.getByRole('tabpanel', { name: 'Members' })).toHaveTextContent('Team members');
+    expect(screen.queryByRole('textbox', { hidden: true })).toBeNull();
+  });
+
+  it('keeps navigation and selection while loading then restores content', async () => {
+    const { rerender } = render(
+      <Card title="Project" loading tabs={{ items, defaultActiveKey: 'members' }} />,
+    );
+    expect(screen.getByRole('tab', { name: 'Members' })).toHaveAttribute('aria-selected', 'true');
+    expect(within(screen.getByRole('tabpanel')).getByRole('status')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('tab', { name: 'Details' }));
+    rerender(<Card title="Project" tabs={{ items }} />);
+    expect(screen.getByRole('tab', { name: 'Details' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('textbox', { name: 'Project name' })).toBeInTheDocument();
+    expect(screen.queryByRole('status')).toBeNull();
+  });
+
+  it('supports closing tabs, shared children and falling back when the list is empty', async () => {
+    function Example() {
+      const [tabs, setTabs] = useState([
+        { key: 'draft', label: 'Draft', children: 'Draft content', closable: true },
+      ]);
+      return (
+        <Card
+          title="Project"
+          extra={<button type="button">Card action</button>}
+          tabs={{
+            items: tabs,
+            extra: <button type="button">Tab action</button>,
+            onClose: (key) => setTabs((items) => items.filter((item) => item.key !== key)),
+          }}
+        >
+          Shared explanation
+        </Card>
+      );
+    }
+    render(<Example />);
+    expect(screen.getByText('Shared explanation')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Card action' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Tab action' })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: '关闭标签页 Draft' }));
+    expect(screen.queryByRole('tablist')).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Tab action' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Card action' })).toBeInTheDocument();
+    expect(screen.getByText('Shared explanation')).toBeInTheDocument();
+  });
+});
diff --git a/packages/react/src/card/card.tsx b/packages/react/src/card/card.tsx
index 1e71662..af06f81 100644
--- a/packages/react/src/card/card.tsx
+++ b/packages/react/src/card/card.tsx
@@ -1,38 +1,58 @@
 import { type HTMLAttributes, type ReactNode, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useContentTransition } from '../shared/presence';
-import { Skeleton } from '../skeleton';
+import { SkeletonControl as Skeleton } from '../skeleton/skeleton';
+import type { TabsProps } from '../tabs';
+import { TabsControl as Tabs } from '../tabs/tabs';
+
+/** Horizontal line tabs integrated with the card heading and content spacing. */
+export interface CardTabsProps extends Omit<TabsProps, 'type' | 'placement' | 'children'> {}
 
 export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   title?: ReactNode;
   description?: ReactNode;
   extra?: ReactNode;
+  /** Tabs replace the heading when no title is supplied, otherwise sit below it. */
+  tabs?: CardTabsProps;
   cover?: ReactNode;
   footer?: ReactNode;
   loading?: boolean;
   bordered?: boolean;
   /** Opt into section dividers and a muted footer surface. */
   divided?: boolean;
-  hoverable?: boolean;
-  size?: 'sm' | 'md';
+  /** Card spacing, heading typography and height, and the default size of embedded tabs. */
+  size?: 'sm' | 'md' | 'lg';
 }
-export function Card({
-  title,
-  description,
-  extra,
-  cover,
-  footer,
-  loading = false,
-  bordered = true,
-  divided = false,
-  hoverable = false,
-  size = 'md',
-  children,
-  className,
-  ...props
-}: CardProps) {
+export function Card(rawProps: CardProps) {
+  const {
+    title,
+    description,
+    extra,
+    tabs,
+    cover,
+    footer,
+    loading = false,
+    bordered = true,
+    divided = false,
+    size = 'md',
+    children,
+    className,
+    ...props
+  } = useComponentProps('Card', rawProps);
   const body = useRef<HTMLDivElement>(null);
   useContentTransition(body, loading ? 'loading' : 'content');
+  const hasTabs = Boolean(tabs?.items.length);
+  const hasHeading = title != null || description != null;
+  const tabExtra =
+    !hasHeading && extra != null ? (
+      <div className="leaf-card__tab-extra">
+        {tabs?.extra}
+        {extra}
+      </div>
+    ) : (
+      tabs?.extra
+    );
   return (
     <div
       {...props}
@@ -42,12 +62,12 @@ export function Card({
         `leaf-card--${size}`,
         bordered && 'leaf-card--bordered',
         divided && 'leaf-card--divided',
-        hoverable && 'leaf-card--hoverable',
+        hasTabs && 'leaf-card--tabbed',
         className,
       )}
     >
       {cover != null && <div className="leaf-card__cover">{cover}</div>}
-      {(title != null || description != null || extra != null) && (
+      {(hasHeading || (!hasTabs && extra != null)) && (
         <div className="leaf-card__header">
           {(title != null || description != null) && (
             <div className="leaf-card__heading">
@@ -58,9 +78,33 @@ export function Card({
           {extra != null && <div className="leaf-card__extra">{extra}</div>}
         </div>
       )}
-      <div className="leaf-card__body" ref={body}>
-        <Skeleton loading={loading}>{children}</Skeleton>
-      </div>
+      {hasTabs && tabs && (
+        <Tabs
+          {...tabs}
+          type="line"
+          placement="top"
+          size={tabs.size ?? size}
+          aria-label={tabs['aria-label'] ?? (typeof title === 'string' ? title : undefined)}
+          extra={tabExtra}
+          className={classes('leaf-card__tabs', tabs.className)}
+          items={tabs.items.map((item) => ({
+            ...item,
+            children: <Skeleton loading={loading}>{item.children}</Skeleton>,
+          }))}
+          onReorder={
+            tabs.onReorder &&
+            ((items) => {
+              const originals = new Map(tabs.items.map((item) => [item.key, item]));
+              tabs.onReorder?.(items.map((item) => originals.get(item.key) ?? item));
+            })
+          }
+        />
+      )}
+      {(!hasTabs || children != null) && (
+        <div className="leaf-card__body" ref={body}>
+          <Skeleton loading={loading}>{children}</Skeleton>
+        </div>
+      )}
       {footer != null && <div className="leaf-card__footer">{footer}</div>}
     </div>
   );
diff --git a/packages/react/src/card/index.ts b/packages/react/src/card/index.ts
index 8b7346b..b40c159 100644
--- a/packages/react/src/card/index.ts
+++ b/packages/react/src/card/index.ts
@@ -1,2 +1,2 @@
-export type { CardProps } from './card';
+export type { CardProps, CardTabsProps } from './card';
 export { Card } from './card';
diff --git a/packages/react/src/carousel/carousel.tsx b/packages/react/src/carousel/carousel.tsx
index 823a35b..0d7dcb5 100644
--- a/packages/react/src/carousel/carousel.tsx
+++ b/packages/react/src/carousel/carousel.tsx
@@ -12,11 +12,13 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { inertProps } from '../shared/inert';
 import { animateMotion, useMotionEnabled } from '../shared/motion';
 import { useControllable } from '../shared/use-controllable';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
 
 const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
@@ -36,7 +38,10 @@ export interface CarouselProps extends Omit<HTMLAttributes<HTMLElement>, 'onChan
   pauseOnHover?: boolean;
 }
 export const Carousel = forwardRef<CarouselHandle, CarouselProps>(function Carousel(
-  {
+  rawProps: CarouselProps,
+  ref,
+) {
+  const {
     activeIndex,
     defaultActiveIndex = 0,
     onChange,
@@ -49,9 +54,8 @@ export const Carousel = forwardRef<CarouselHandle, CarouselProps>(function Carou
     className,
     onKeyDown,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('Carousel', rawProps);
+  const format = useFormattedText();
   const t = useText(),
     config = useLeafConfig(),
     id = useId();
@@ -92,8 +96,8 @@ export const Carousel = forwardRef<CarouselHandle, CarouselProps>(function Carou
   return (
     <section
       {...props}
-      aria-roledescription="carousel"
-      aria-label={props['aria-label'] ?? t('轮播', 'Carousel')}
+      aria-roledescription={t('carousel.role')}
+      aria-label={props['aria-label'] ?? t('carousel.carousel')}
       className={classes('leaf-carousel', className)}
       onPointerEnter={() => {
         if (pauseOnHover) setPaused(true);
@@ -142,7 +146,7 @@ export const Carousel = forwardRef<CarouselHandle, CarouselProps>(function Carou
             <fieldset
               key={isValidElement(slide) ? slide.key : `slide-${position}`}
               id={`${id}-${position}`}
-              aria-roledescription="slide"
+              aria-roledescription={t('carousel.slide')}
               aria-label={`${position + 1} / ${count}`}
               aria-hidden={position !== index || undefined}
               {...inertProps(position !== index)}
@@ -166,9 +170,7 @@ export const Carousel = forwardRef<CarouselHandle, CarouselProps>(function Carou
               direction === -1 ? 'leaf-carousel__arrow--previous' : 'leaf-carousel__arrow--next',
             )}
             disabled={!infinite && (direction === -1 ? index === 0 : index === count - 1)}
-            aria-label={
-              direction === -1 ? t('上一张', 'Previous slide') : t('下一张', 'Next slide')
-            }
+            aria-label={direction === -1 ? t('carousel.previousSlide') : t('carousel.nextSlide')}
             onClick={() => go(index + direction)}
           >
             {direction === -1 ? <ChevronLeft size={20} /> : <ChevronRight size={20} />}
@@ -180,7 +182,7 @@ export const Carousel = forwardRef<CarouselHandle, CarouselProps>(function Carou
             <button
               key={isValidElement(slide) ? slide.key : String(slide)}
               type="button"
-              aria-label={`${t('转到', 'Go to')} ${position + 1}`}
+              aria-label={format('carousel.goTo', { index: position + 1 })}
               aria-current={position === index ? 'true' : undefined}
               aria-controls={`${id}-${position}`}
               onClick={() => go(position)}
diff --git a/packages/react/src/carousel/index.ts b/packages/react/src/carousel/index.ts
index 5f66438..461baf5 100644
--- a/packages/react/src/carousel/index.ts
+++ b/packages/react/src/carousel/index.ts
@@ -1 +1,2 @@
-export * from './carousel';
+export type { CarouselHandle, CarouselProps } from './carousel';
+export { Carousel } from './carousel';
diff --git a/packages/react/src/cascader/cascader.scss b/packages/react/src/cascader/cascader.scss
index f95a9fe..9251f53 100644
--- a/packages/react/src/cascader/cascader.scss
+++ b/packages/react/src/cascader/cascader.scss
@@ -1,16 +1,17 @@
 @use '../styles/mixins' as mixins;
 @use '../shared/picker';
 @use '../styles/geometry' as geometry;
+@use '../shared/selection';
 .leaf-cascader {
   @include mixins.field('cascader');
   display: inline-flex;
   position: relative;
-  height: var(--leaf-current-control-height);
+  min-height: var(--leaf-current-control-height);
   &__trigger {
     box-sizing: border-box;
     display: flex;
     width: 100%;
-    height: 100%;
+    min-height: calc(var(--leaf-current-control-height) - 2px);
     align-items: center;
     gap: 10px;
     justify-content: space-between;
@@ -21,7 +22,7 @@
     background: transparent;
     font: inherit;
     line-height: inherit;
-    text-align: left;
+    text-align: start;
     cursor: pointer;
     &:disabled {
       cursor: not-allowed;
@@ -36,6 +37,7 @@
     }
   }
   &__value {
+    flex: 1;
     min-width: 0;
     overflow: hidden;
     white-space: nowrap;
@@ -44,6 +46,19 @@
   &__placeholder {
     color: var(--leaf-color-text-muted);
   }
+  &--multiple &__trigger {
+    padding-block: 3px;
+  }
+  &--multiple &__value {
+    white-space: normal;
+    overflow: visible;
+    &[data-single-line] {
+      overflow: clip;
+    }
+  }
+  &__search {
+    margin: 0 var(--leaf-cascader-column-padding, 4px) 8px;
+  }
   &__panel {
     width: max-content;
     max-width: min(560px, calc(100vw - 24px));
diff --git a/packages/react/src/cascader/cascader.tsx b/packages/react/src/cascader/cascader.tsx
index aa28479..d22f954 100644
--- a/packages/react/src/cascader/cascader.tsx
+++ b/packages/react/src/cascader/cascader.tsx
@@ -9,10 +9,11 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { FieldScope, useFormField } from '../form/form';
-import { Input } from '../input';
-import { Scrollbar } from '../scrollbar';
+import { InputControl } from '../input/input';
+import { ScrollbarControl as Scrollbar } from '../scrollbar/scrollbar';
 import { classes } from '../shared/classes';
 import { ClearButton } from '../shared/clear-button';
 import { FormValue, useFieldValue, useMergedRef } from '../shared/field';
@@ -22,7 +23,9 @@ import {
   useFloatingDismiss,
   usePopupState,
 } from '../shared/floating';
+import { SelectionContent } from '../shared/selection-content';
 import type { ControlSize, ControlStatus } from '../shared/types';
+import { useFormattedText } from '../shared/use-formatted-text';
 
 export interface CascaderOption {
   value: string;
@@ -57,6 +60,8 @@ interface CascaderBaseProps
   loadData?: (option: CascaderOption, signal: AbortSignal) => Promise<readonly CascaderOption[]>;
   onLoadError?: (error: unknown, option: CascaderOption) => void;
   cacheKey?: string | number;
+  tagWrap?: boolean;
+  maxTagCount?: number | 'responsive';
 }
 export type CascaderProps = CascaderBaseProps &
   (
@@ -88,7 +93,10 @@ function resolvePath(options: readonly CascaderOption[], values: readonly string
 }
 
 export const Cascader = forwardRef<HTMLButtonElement, CascaderProps>(function Cascader(
-  {
+  rawProps: CascaderProps,
+  forwardedRef,
+) {
+  const {
     options: suppliedOptions,
     value,
     defaultValue = emptyPath,
@@ -115,6 +123,8 @@ export const Cascader = forwardRef<HTMLButtonElement, CascaderProps>(function Ca
     loadData,
     onLoadError,
     cacheKey,
+    tagWrap = true,
+    maxTagCount,
     popupPlacement,
     popupClassName,
     popupStyle,
@@ -127,10 +137,9 @@ export const Cascader = forwardRef<HTMLButtonElement, CascaderProps>(function Ca
     'aria-describedby': ariaDescribedByProp,
     'aria-invalid': ariaInvalid,
     ...props
-  },
-  forwardedRef,
-) {
-  const { locale, messages, direction } = useLeafConfig();
+  } = useComponentProps('Cascader', rawProps);
+  const { messages, direction } = useLeafConfig();
+  const format = useFormattedText();
   const [loaded, setLoaded] = useState(new Map<string, readonly CascaderOption[]>());
   const [loading, setLoading] = useState(new Set<string>());
   const requests = useRef(new Map<string, AbortController>());
@@ -306,7 +315,12 @@ export const Cascader = forwardRef<HTMLButtonElement, CascaderProps>(function Ca
 
   return (
     <div
-      className={classes('leaf-cascader', `leaf-cascader--${size}`, className)}
+      className={classes(
+        'leaf-cascader',
+        `leaf-cascader--${size}`,
+        multiple && 'leaf-cascader--multiple',
+        className,
+      )}
       style={style}
       data-status={status}
       data-disabled={disabled ? '' : undefined}
@@ -350,26 +364,46 @@ export const Cascader = forwardRef<HTMLButtonElement, CascaderProps>(function Ca
           }
         }}
       >
-        <span
-          className={classes(
-            'leaf-cascader__value',
-            !selectedPaths.length && 'leaf-cascader__placeholder',
-          )}
-        >
-          {selectedPaths.length
-            ? selectedPaths.map((path, index) => (
-                <span key={paths[index]?.join('/')}>
-                  {index > 0 ? '、' : ''}
-                  {caption(path)}
-                </span>
-              ))
-            : placeholder || messages.select}
-        </span>
+        {multiple && selectedPaths.length ? (
+          <SelectionContent
+            className="leaf-cascader__value"
+            tagClassName="leaf-cascader__tag"
+            tagWrap={tagWrap}
+            maxTagCount={maxTagCount}
+            items={selectedPaths.map((path, index) => ({
+              key: JSON.stringify(paths[index]),
+              label: caption(path),
+              text: path
+                .map(
+                  (option) =>
+                    option.searchLabel ??
+                    (typeof option.label === 'string' ? option.label : option.value),
+                )
+                .join(' / '),
+            }))}
+          />
+        ) : (
+          <span
+            className={classes(
+              'leaf-cascader__value',
+              !selectedPaths.length && 'leaf-cascader__placeholder',
+            )}
+          >
+            {selectedPaths.length
+              ? selectedPaths.map((path, index) => (
+                  <span key={paths[index]?.join('/')}>
+                    {index > 0 ? '、' : ''}
+                    {caption(path)}
+                  </span>
+                ))
+              : placeholder || messages.cascader.placeholder}
+          </span>
+        )}
         <ChevronDown size={16} aria-hidden="true" />
       </button>
       {allowClear && selectedValue.length > 0 && !disabled && !readOnly && (
         <ClearButton
-          label={messages.clearCascader}
+          label={messages.cascader.clear}
           beforeArrow
           onClear={() => {
             setSelectedValue([]);
@@ -399,22 +433,24 @@ export const Cascader = forwardRef<HTMLButtonElement, CascaderProps>(function Ca
         id={panelId}
         className={classes('leaf-floating leaf-cascader__panel', popupClassName)}
         role="dialog"
-        aria-label={ariaLabel || messages.select}
+        aria-label={ariaLabel || messages.cascader.placeholder}
       >
         {showSearch && (
           <FieldScope>
-            <Input
-              allowClear
-              aria-label={messages.search}
-              value={query}
-              onChange={(event) => setQuery(event.target.value)}
-            />
+            <div className="leaf-cascader__search">
+              <InputControl
+                allowClear
+                aria-label={messages.common.search}
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+              />
+            </div>
           </FieldScope>
         )}
         {query ? (
           <Scrollbar
             role="listbox"
-            aria-label={messages.search}
+            aria-label={messages.common.search}
             className="leaf-cascader__column"
             orientation="vertical"
             maxHeight={256}
@@ -437,7 +473,7 @@ export const Cascader = forwardRef<HTMLButtonElement, CascaderProps>(function Ca
                 </button>
               ))
             ) : (
-              <div className="leaf-floating__empty">{messages.empty}</div>
+              <div className="leaf-floating__empty">{messages.cascader.empty}</div>
             )}
           </Scrollbar>
         ) : (
@@ -450,7 +486,7 @@ export const Cascader = forwardRef<HTMLButtonElement, CascaderProps>(function Ca
                 maxHeight={256}
                 data-level={depth}
                 role="listbox"
-                aria-label={locale === 'en-US' ? `Level ${depth + 1}` : `第 ${depth + 1} 级`}
+                aria-label={format('cascader.level', { level: depth + 1 })}
               >
                 {level.length ? (
                   level.map((option) => (
@@ -524,7 +560,7 @@ export const Cascader = forwardRef<HTMLButtonElement, CascaderProps>(function Ca
                     </button>
                   ))
                 ) : (
-                  <div className="leaf-floating__empty">{messages.empty}</div>
+                  <div className="leaf-floating__empty">{messages.cascader.empty}</div>
                 )}
               </Scrollbar>
             ))}
diff --git a/packages/react/src/cascader/index.ts b/packages/react/src/cascader/index.ts
index 28b1852..404cf9a 100644
--- a/packages/react/src/cascader/index.ts
+++ b/packages/react/src/cascader/index.ts
@@ -1,3 +1,4 @@
-export * from './cascader';
+export type { CascaderOption, CascaderProps } from './cascader';
+export { Cascader } from './cascader';
 export type { CascaderFieldNames } from './mapping';
 export { mapCascaderOptions } from './mapping';
diff --git a/packages/react/src/checkbox/checkbox.tsx b/packages/react/src/checkbox/checkbox.tsx
index 981be5f..764d566 100644
--- a/packages/react/src/checkbox/checkbox.tsx
+++ b/packages/react/src/checkbox/checkbox.tsx
@@ -8,6 +8,7 @@ import {
   useImperativeHandle,
   useRef,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import type { ControlSize } from '../shared/types';
@@ -23,7 +24,7 @@ export interface CheckboxProps
   /** Displays mixed selection; it does not change the submitted value. */
   indeterminate?: boolean;
 }
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+export const CheckboxControl = forwardRef<HTMLInputElement, CheckboxProps>(function CheckboxControl(
   {
     size = 'md',
     variant = 'plain',
@@ -36,7 +37,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
     disabled: disabledProp,
     children,
     ...props
-  },
+  }: CheckboxProps,
   ref,
 ) {
   const field = useFormField();
@@ -114,4 +115,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
     </label>
   );
 });
+CheckboxControl.displayName = 'CheckboxControl';
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  rawProps: CheckboxProps,
+  ref,
+) {
+  const props = useComponentProps('Checkbox', rawProps);
+  return <CheckboxControl {...props} ref={ref} />;
+});
 Checkbox.displayName = 'Checkbox';
diff --git a/packages/react/src/checkbox/group.tsx b/packages/react/src/checkbox/group.tsx
index 8c64b14..6ea7ee8 100644
--- a/packages/react/src/checkbox/group.tsx
+++ b/packages/react/src/checkbox/group.tsx
@@ -1,9 +1,10 @@
 import { type FieldsetHTMLAttributes, type ReactNode, useId, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { FieldScope, useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { FormValue, useFieldValue } from '../shared/field';
 import type { ControlSize } from '../shared/types';
-import { Checkbox } from './checkbox';
+import { CheckboxControl as Checkbox } from './checkbox';
 export interface CheckboxOption {
   value: string;
   label: ReactNode;
@@ -26,24 +27,25 @@ export interface CheckboxGroupProps
   required?: boolean;
   direction?: 'horizontal' | 'vertical';
 }
-export function CheckboxGroup({
-  options,
-  value,
-  defaultValue = [],
-  onChange,
-  legend,
-  size,
-  variant = 'plain',
-  minCount = 0,
-  maxCount = Infinity,
-  direction = 'horizontal',
-  name,
-  form,
-  required,
-  disabled: disabledProp,
-  className,
-  ...props
-}: CheckboxGroupProps) {
+export function CheckboxGroup(rawProps: CheckboxGroupProps) {
+  const {
+    options,
+    value,
+    defaultValue = [],
+    onChange,
+    legend,
+    size,
+    variant = 'plain',
+    minCount = 0,
+    maxCount = Infinity,
+    direction = 'horizontal',
+    name,
+    form,
+    required,
+    disabled: disabledProp,
+    className,
+    ...props
+  } = useComponentProps('CheckboxGroup', rawProps);
   const field = useFormField();
   const id = useId();
   const disabled = disabledProp || field?.disabled;
diff --git a/packages/react/src/checkbox/index.ts b/packages/react/src/checkbox/index.ts
index 663a6d4..3071a99 100644
--- a/packages/react/src/checkbox/index.ts
+++ b/packages/react/src/checkbox/index.ts
@@ -1,3 +1,4 @@
-export * from './checkbox';
+export type { CheckboxProps } from './checkbox';
+export { Checkbox } from './checkbox';
 export type { CheckboxGroupProps, CheckboxOption } from './group';
 export { CheckboxGroup } from './group';
diff --git a/packages/react/src/collapse/collapse.tsx b/packages/react/src/collapse/collapse.tsx
index 798f4d7..282c0bc 100644
--- a/packages/react/src/collapse/collapse.tsx
+++ b/packages/react/src/collapse/collapse.tsx
@@ -1,5 +1,6 @@
 import { ChevronRight } from 'lucide-react';
 import { type HTMLAttributes, type ReactNode, useId, useRef, useState } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { inertProps } from '../shared/inert';
@@ -25,19 +26,20 @@ export interface CollapseProps
   destroyInactive?: boolean;
 }
 const keys = (value: string | readonly string[]) => (typeof value === 'string' ? [value] : value);
-export function Collapse({
-  items,
-  activeKey,
-  defaultActiveKey = [],
-  onChange,
-  accordion = false,
-  bordered = true,
-  size = 'md',
-  destroyInactive = false,
-  className,
-  'aria-label': label,
-  ...props
-}: CollapseProps) {
+export function Collapse(rawProps: CollapseProps) {
+  const {
+    items,
+    activeKey,
+    defaultActiveKey = [],
+    onChange,
+    accordion = false,
+    bordered = true,
+    size = 'md',
+    destroyInactive = false,
+    className,
+    'aria-label': label,
+    ...props
+  } = useComponentProps('Collapse', rawProps);
   const { messages } = useLeafConfig();
   const [internal, setInternal] = useState(() => keys(defaultActiveKey));
   const requested = keys(activeKey ?? internal);
@@ -61,7 +63,7 @@ export function Collapse({
     <section
       {...props}
       ref={root}
-      aria-label={label ?? messages.collapse}
+      aria-label={label ?? messages.collapse.label}
       className={classes(
         'leaf-collapse',
         `leaf-collapse--${size}`,
diff --git a/packages/react/src/color-recipes.ts b/packages/react/src/color-recipes.ts
index 36fa43a..8d25999 100644
--- a/packages/react/src/color-recipes.ts
+++ b/packages/react/src/color-recipes.ts
@@ -1,5 +1,6 @@
 // Semantic recipes shared by runtime themes and generated static palettes.
 export const colorRecipes: Record<string, readonly [string, string, number]> = {
+  '--leaf-color-option-hover': ['text', 'surface', 9],
   '--leaf-color-primary-text-80': ['primary', 'text', 80],
   '--leaf-color-success-text-80': ['success', 'text', 80],
   '--leaf-color-warning-text-80': ['warning', 'text', 80],
diff --git a/packages/react/src/colorpicker/colorpicker.scss b/packages/react/src/colorpicker/colorpicker.scss
index 983ab2a..038149a 100644
--- a/packages/react/src/colorpicker/colorpicker.scss
+++ b/packages/react/src/colorpicker/colorpicker.scss
@@ -6,25 +6,31 @@
   flex: none;
   align-items: center;
   width: auto;
+  height: var(--leaf-current-control-height);
   vertical-align: middle;
+  cursor: pointer;
+  &[data-readonly]:not([data-disabled]) {
+    cursor: default;
+  }
   &[data-open] {
     border-color: var(--leaf-field-color);
     box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
   }
   &__trigger {
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     min-width: calc(var(--leaf-current-control-height) - 2px);
-    min-height: calc(var(--leaf-current-control-height) - 2px);
-    padding: 5px;
+    height: calc(var(--leaf-current-control-height) - 2px);
+    padding: 0 5px;
     border: 0;
     border-radius: inherit;
     color: inherit;
     background: transparent;
     font: inherit;
-    cursor: pointer;
+    cursor: inherit;
     transition: background-color var(--leaf-motion-duration) var(--leaf-motion-easing);
     &:hover:not(:disabled) {
       background: var(--leaf-color-surface-muted);
diff --git a/packages/react/src/colorpicker/colorpicker.test.tsx b/packages/react/src/colorpicker/colorpicker.test.tsx
index 0b1bcef..d51ca06 100644
--- a/packages/react/src/colorpicker/colorpicker.test.tsx
+++ b/packages/react/src/colorpicker/colorpicker.test.tsx
@@ -4,6 +4,80 @@ import { describe, expect, it, vi } from 'vitest';
 import { ColorPicker, ConfigProvider } from '../index';
 
 describe('ColorPicker', () => {
+  it.each(['solid', 'gradient'] as const)(
+    'opens %s from the outer row and keeps native clicks and keyboard activation single',
+    async (mode) => {
+      const click = vi.fn();
+      const bubble = vi.fn();
+      const open = vi.fn();
+      const { container } = render(
+        <ConfigProvider locale="en-US">
+          {/* biome-ignore lint/a11y/noStaticElementInteractions: This test observes bubbled child clicks rather than providing an interactive control. */}
+          {/* biome-ignore lint/a11y/useKeyWithClickEvents: The ColorPicker button provides the keyboard interaction being tested. */}
+          <div onClick={bubble}>
+            <ColorPicker mode={mode} showText onClick={click} onOpenChange={open} />
+          </div>
+        </ConfigProvider>,
+      );
+      const row = container.querySelector('.leaf-color-picker') as HTMLElement;
+      const trigger = screen.getByRole('button', { name: 'Choose a color' });
+      await userEvent.click(row);
+      expect(trigger).toHaveFocus();
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+      expect(click).toHaveBeenCalledTimes(1);
+      expect(bubble).toHaveBeenCalledTimes(1);
+      expect(open).toHaveBeenLastCalledWith(true);
+
+      await userEvent.click(row.querySelector('.leaf-color-picker__text') as HTMLElement);
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+      expect(click).toHaveBeenCalledTimes(2);
+      expect(bubble).toHaveBeenCalledTimes(2);
+      expect(open).toHaveBeenCalledTimes(2);
+      expect(open).toHaveBeenLastCalledWith(false);
+
+      await userEvent.keyboard('{Enter}');
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+      await userEvent.keyboard('{Escape}');
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+      expect(trigger).toHaveFocus();
+      await userEvent.keyboard(' ');
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    },
+  );
+
+  it.each(['solid', 'gradient'] as const)(
+    'keeps %s clearing independent and honors cancellation, read-only and disabled rows',
+    async (mode) => {
+      const change = vi.fn();
+      const open = vi.fn();
+      const blocked = vi.fn((event: React.MouseEvent<HTMLButtonElement>) => event.preventDefault());
+      const { container, rerender } = render(
+        <ConfigProvider locale="en-US">
+          <ColorPicker mode={mode} allowClear onChange={change} onOpenChange={open} />
+        </ConfigProvider>,
+      );
+      await userEvent.click(screen.getByRole('button', { name: 'Clear color' }));
+      expect(change).toHaveBeenCalledExactlyOnceWith('');
+      expect(open).not.toHaveBeenCalled();
+      expect(screen.getByRole('button', { name: 'Choose a color' })).toHaveFocus();
+
+      rerender(<ColorPicker mode={mode} onClick={blocked} onOpenChange={open} />);
+      await userEvent.click(container.querySelector('.leaf-color-picker') as HTMLElement);
+      expect(blocked).toHaveBeenCalledTimes(1);
+      expect(open).not.toHaveBeenCalled();
+
+      for (const state of [{ readOnly: true }, { disabled: true }]) {
+        rerender(<ColorPicker mode={mode} {...state} onOpenChange={open} />);
+        await userEvent.click(container.querySelector('.leaf-color-picker') as HTMLElement);
+        expect(screen.getByRole('button', { name: '选择颜色' })).toHaveAttribute(
+          'aria-expanded',
+          'false',
+        );
+        expect(open).not.toHaveBeenCalled();
+      }
+    },
+  );
+
   it('accepts CSS colors with alpha, switches formats and rejects invalid text', async () => {
     const change = vi.fn();
     render(
diff --git a/packages/react/src/colorpicker/colorpicker.tsx b/packages/react/src/colorpicker/colorpicker.tsx
index 2d9eca0..a86a298 100644
--- a/packages/react/src/colorpicker/colorpicker.tsx
+++ b/packages/react/src/colorpicker/colorpicker.tsx
@@ -11,6 +11,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
@@ -195,13 +196,26 @@ export function SolidColorPicker({
   const clearable = allowClear && Boolean(current) && !disabled && !readOnly;
   return (
     <>
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: Pointer events on the outer row forward to the keyboard-accessible trigger button. */}
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: The enclosed native button owns keyboard interaction; this wrapper only extends its hit area. */}
       <span
         ref={root}
         className={classes('leaf-color-picker', `leaf-color-picker--${size}`, className)}
         style={style}
         data-status={status}
         data-disabled={disabled || undefined}
+        data-readonly={readOnly || undefined}
         data-open={open || undefined}
+        onMouseDown={(event) => {
+          if (!disabled && event.target === event.currentTarget) event.preventDefault();
+        }}
+        onClick={(event) => {
+          if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;
+          event.preventDefault();
+          event.stopPropagation();
+          trigger.current?.focus();
+          trigger.current?.click();
+        }}
       >
         <button
           {...props}
@@ -211,7 +225,7 @@ export function SolidColorPicker({
           id={props.id ?? field?.id}
           className="leaf-color-picker__trigger"
           disabled={disabled}
-          aria-label={label ?? (field?.labelId ? undefined : messages.color)}
+          aria-label={label ?? (field?.labelId ? undefined : messages.colorPicker.label)}
           aria-labelledby={props['aria-labelledby'] ?? field?.labelId}
           aria-describedby={
             [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined
@@ -230,7 +244,9 @@ export function SolidColorPicker({
           </span>
           {showText && (
             <span className="leaf-color-picker__text">
-              {typeof showText === 'function' ? showText(display) : display || messages.color}
+              {typeof showText === 'function'
+                ? showText(display)
+                : display || messages.colorPicker.label}
             </span>
           )}
         </button>
@@ -238,7 +254,7 @@ export function SolidColorPicker({
           <button
             type="button"
             className="leaf-color-picker__clear"
-            aria-label={messages.clearColor}
+            aria-label={messages.colorPicker.clear}
             onClick={() => {
               setCurrent('');
               onChange?.('');
@@ -265,7 +281,7 @@ export function SolidColorPicker({
         className={classes('leaf-floating', 'leaf-color-picker__panel', popupClassName)}
         id={id}
         role="dialog"
-        aria-label={messages.color}
+        aria-label={messages.colorPicker.label}
         width={popupWidth}
         style={popupStyle}
         render={popupRender}
@@ -275,11 +291,11 @@ export function SolidColorPicker({
         <div
           role="slider"
           tabIndex={0}
-          aria-label={`${messages.saturation} / ${messages.brightness}`}
+          aria-label={`${messages.colorPicker.saturation} / ${messages.colorPicker.brightness}`}
           aria-valuemin={0}
           aria-valuemax={100}
           aria-valuenow={Math.round(activeHsv.s * 100)}
-          aria-valuetext={`${messages.saturation} ${Math.round(activeHsv.s * 100)}%, ${messages.brightness} ${Math.round(activeHsv.v * 100)}%`}
+          aria-valuetext={`${messages.colorPicker.saturation} ${Math.round(activeHsv.s * 100)}%, ${messages.colorPicker.brightness} ${Math.round(activeHsv.v * 100)}%`}
           className="leaf-color-picker__area"
           style={{
             backgroundImage: gradient
@@ -328,7 +344,7 @@ export function SolidColorPicker({
               min={0}
               max={359}
               value={Math.round(activeHsv.h)}
-              aria-label={messages.hue}
+              aria-label={messages.colorPicker.hue}
               onChange={(event) => change({ ...activeHsv, h: Number(event.target.value) })}
               onPointerUp={() => onChangeComplete?.(latest.current)}
               onKeyUp={() => onChangeComplete?.(latest.current)}
@@ -340,7 +356,7 @@ export function SolidColorPicker({
                 min={0}
                 max={100}
                 value={Math.round(activeHsv.a * 100)}
-                aria-label={messages.alpha}
+                aria-label={messages.colorPicker.alpha}
                 style={{ '--leaf-alpha-color': opaqueColor } as CSSProperties}
                 onChange={(event) => change({ ...activeHsv, a: Number(event.target.value) / 100 })}
                 onPointerUp={() => onChangeComplete?.(latest.current)}
@@ -349,7 +365,7 @@ export function SolidColorPicker({
             )}
           </div>
         </div>
-        <fieldset className="leaf-color-picker__formats" aria-label={messages.colorValue}>
+        <fieldset className="leaf-color-picker__formats" aria-label={messages.colorPicker.value}>
           {(['hex', 'rgb', 'hsl'] as const).map((next) => (
             <button
               type="button"
@@ -366,7 +382,7 @@ export function SolidColorPicker({
         </fieldset>
         <input
           className="leaf-color-picker__input"
-          aria-label={messages.colorValue}
+          aria-label={messages.colorPicker.value}
           aria-invalid={invalid || undefined}
           aria-describedby={invalid ? `${id}-error` : undefined}
           value={input}
@@ -384,13 +400,13 @@ export function SolidColorPicker({
         />
         {invalid && (
           <span className="leaf-color-picker__error" id={`${id}-error`}>
-            {messages.invalidColor}
+            {messages.colorPicker.invalid}
           </span>
         )}
         {(
           presets ?? [
             {
-              label: messages.presets,
+              label: messages.colorPicker.presets,
               colors: [
                 '#20834a',
                 '#13a8a8',
@@ -437,7 +453,8 @@ export function SolidColorPicker({
   );
 }
 
-export function ColorPicker(props: ColorPickerProps) {
+export function ColorPicker(rawProps: ColorPickerProps) {
+  const props = useComponentProps('ColorPicker', rawProps);
   return props.mode === 'gradient' || props.gradient ? (
     <GradientColorPicker {...props} />
   ) : (
diff --git a/packages/react/src/colorpicker/gradient.tsx b/packages/react/src/colorpicker/gradient.tsx
index 7c42766..883a4d7 100644
--- a/packages/react/src/colorpicker/gradient.tsx
+++ b/packages/react/src/colorpicker/gradient.tsx
@@ -1,15 +1,16 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import { Plus, X } from 'lucide-react';
 import { useId, useRef, useState } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
 import { useLeafConfig } from '../config-provider/context';
 import { FieldScope, useFormField } from '../form/form';
-import { InputNumber } from '../inputnumber';
+import { InputNumberControl as InputNumber } from '../inputnumber/inputnumber';
 import { classes } from '../shared/classes';
 import { FormValue, useFieldValue } from '../shared/field';
 import { FloatingPanel, useFloatingDismiss, usePopupState } from '../shared/floating';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
-import { Slider } from '../slider';
+import { SliderControl as Slider } from '../slider/slider';
 import { type ColorPickerProps, SolidColorPicker } from './colorpicker';
 export interface ColorGradientStop {
   key?: string;
@@ -85,6 +86,7 @@ export function GradientColorPicker({
   const field = useFormField(),
     { messages } = useLeafConfig(),
     t = useText();
+  const formatText = useFormattedText();
   const disabled = disabledProp || field?.disabled;
   const status = statusProp ?? (field?.error ? 'error' : undefined);
   const trigger = useRef<HTMLButtonElement>(null),
@@ -136,12 +138,26 @@ export function GradientColorPicker({
   useFloatingDismiss(open, () => setOpen(false), trigger, panel, root);
   return (
     <>
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: Pointer events on the outer row forward to the keyboard-accessible trigger button. */}
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: The enclosed native button owns keyboard interaction; this wrapper only extends its hit area. */}
       <span
         ref={root}
         className={classes('leaf-color-picker', `leaf-color-picker--${size}`, className)}
         style={style}
         data-status={status}
         data-disabled={disabled || undefined}
+        data-readonly={readOnly || undefined}
+        data-open={open || undefined}
+        onMouseDown={(event) => {
+          if (!disabled && event.target === event.currentTarget) event.preventDefault();
+        }}
+        onClick={(event) => {
+          if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;
+          event.preventDefault();
+          event.stopPropagation();
+          trigger.current?.focus();
+          trigger.current?.click();
+        }}
       >
         <button
           {...props}
@@ -150,7 +166,9 @@ export function GradientColorPicker({
           form={form}
           id={id ?? field?.id}
           disabled={disabled}
-          aria-label={props['aria-label'] ?? (field?.labelId ? undefined : messages.color)}
+          aria-label={
+            props['aria-label'] ?? (field?.labelId ? undefined : messages.colorPicker.label)
+          }
           aria-labelledby={props['aria-labelledby'] ?? field?.labelId}
           aria-describedby={
             [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined
@@ -173,8 +191,8 @@ export function GradientColorPicker({
               {typeof showText === 'function'
                 ? showText(current)
                 : current
-                  ? t('渐变', 'Gradient')
-                  : messages.color}
+                  ? t('colorPicker.gradient')
+                  : messages.colorPicker.label}
             </span>
           )}
         </button>
@@ -182,7 +200,7 @@ export function GradientColorPicker({
           <button
             type="button"
             className="leaf-color-picker__clear"
-            aria-label={messages.clearColor}
+            aria-label={messages.colorPicker.clear}
             onClick={() => {
               setCurrent('');
               onChange?.('');
@@ -209,7 +227,7 @@ export function GradientColorPicker({
         width={popupWidth}
         id={panelId}
         role="dialog"
-        aria-label={messages.color}
+        aria-label={messages.colorPicker.label}
         className={['leaf-floating', 'leaf-color-picker__gradient', popupClassName]
           .filter(Boolean)
           .join(' ')}
@@ -225,16 +243,16 @@ export function GradientColorPicker({
               <button
                 key={stop.key}
                 type="button"
-                aria-label={`${t('色标', 'Color stop')} ${index + 1}`}
+                aria-label={formatText('colorPicker.colorStop', { index: index + 1 })}
                 aria-pressed={active === index}
                 style={{ background: stop.color }}
                 onClick={() => setActive(index)}
               />
             ))}
-            <Button
+            <ButtonControl
               size="sm"
               variant="ghost"
-              aria-label={t('增加色标', 'Add color stop')}
+              aria-label={t('colorPicker.addColorStop')}
               startIcon={<Plus size={14} />}
               disabled={model.stops.length >= 10}
               onClick={() => {
@@ -251,10 +269,10 @@ export function GradientColorPicker({
                 setActive(model.stops.length);
               }}
             />
-            <Button
+            <ButtonControl
               size="sm"
               variant="ghost"
-              aria-label={t('删除色标', 'Remove color stop')}
+              aria-label={t('colorPicker.removeColorStop')}
               startIcon={<X size={14} />}
               disabled={model.stops.length <= 2}
               onClick={() => {
@@ -267,7 +285,7 @@ export function GradientColorPicker({
             />
           </div>
           <div className="leaf-color-picker__gradient-field">
-            <span>{t('颜色', 'Color')}</span>
+            <span>{t('colorPicker.color')}</span>
             <SolidColorPicker
               value={selected.color}
               onChange={(color) => changeStop({ color })}
@@ -281,18 +299,18 @@ export function GradientColorPicker({
             />
           </div>
           <div className="leaf-color-picker__gradient-field">
-            <span>{t('位置', 'Position')}</span>
+            <span>{t('colorPicker.position')}</span>
             <Slider
-              aria-label={t('色标位置', 'Color stop position')}
+              aria-label={t('colorPicker.colorStopPosition')}
               value={selected.offset}
               onChange={(offset) => changeStop({ offset })}
               onChangeComplete={() => onChangeComplete?.(current)}
             />
           </div>
           <div className="leaf-color-picker__gradient-field">
-            <span>{t('角度', 'Angle')}</span>
+            <span>{t('colorPicker.angle')}</span>
             <InputNumber
-              aria-label={t('渐变角度', 'Gradient angle')}
+              aria-label={t('colorPicker.gradientAngle')}
               min={0}
               max={360}
               value={model.angle}
diff --git a/packages/react/src/commandpalette/commandpalette.scss b/packages/react/src/commandpalette/commandpalette.scss
index 6f5d965..b3f6b44 100644
--- a/packages/react/src/commandpalette/commandpalette.scss
+++ b/packages/react/src/commandpalette/commandpalette.scss
@@ -24,9 +24,10 @@
       position: relative;
       z-index: 1;
       gap: 10px;
-      min-height: 36px;
+      min-height: var(--leaf-density-option-height);
       &[aria-selected='true'],
-      &:hover:not(:disabled) {
+      &:hover:not(:disabled),
+      &:active:not(:disabled) {
         color: var(--leaf-color-text);
         background: transparent;
       }
@@ -53,11 +54,11 @@
     position: absolute;
     top: 0;
     inset-inline: 4px;
-    height: var(--leaf-command-selection-height, 36px);
+    height: var(--leaf-command-selection-height, var(--leaf-density-option-height));
     translate: 0 var(--leaf-command-selection-y, 0px);
     border: 1px solid var(--leaf-color-border-alpha-60);
     border-radius: var(--leaf-floating-option-radius, var(--leaf-radius-sm));
-    background: var(--leaf-color-surface-muted);
+    background: var(--leaf-color-option-hover);
     pointer-events: none;
     transition:
       translate var(--leaf-motion-duration) var(--leaf-motion-spring),
diff --git a/packages/react/src/commandpalette/commandpalette.tsx b/packages/react/src/commandpalette/commandpalette.tsx
index 72794e3..a2d183c 100644
--- a/packages/react/src/commandpalette/commandpalette.tsx
+++ b/packages/react/src/commandpalette/commandpalette.tsx
@@ -8,9 +8,10 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
-import { Input } from '../input';
-import { Modal } from '../modal';
+import { InputControl } from '../input/input';
+import { ModalBase } from '../modal/modal';
 import { useControllable } from '../shared/use-controllable';
 import { useText } from '../shared/use-text';
 export interface CommandItem {
@@ -37,19 +38,20 @@ export interface CommandPaletteProps {
   onError?: (error: unknown, item: CommandItem) => void;
 }
 const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
-export function CommandPalette({
-  items,
-  open: controlled,
-  defaultOpen = false,
-  onOpenChange,
-  onSelect,
-  shortcut = 'k',
-  placeholder,
-  loading,
-  emptyContent,
-  onSearch,
-  onError,
-}: CommandPaletteProps) {
+export function CommandPalette(rawProps: CommandPaletteProps) {
+  const {
+    items,
+    open: controlled,
+    defaultOpen = false,
+    onOpenChange,
+    onSelect,
+    shortcut = 'k',
+    placeholder,
+    loading,
+    emptyContent,
+    onSearch,
+    onError,
+  } = useComponentProps('CommandPalette', rawProps);
   const t = useText(),
     { messages } = useLeafConfig(),
     id = useId();
@@ -145,20 +147,20 @@ export function CommandPalette({
     }
   };
   return (
-    <Modal
+    <ModalBase
       open={open}
-      title={t('命令搜索', 'Command search')}
+      title={t('commandPalette.commandSearch')}
       footer={null}
       onClose={() => setOpen(false)}
       width={560}
       className="leaf-command-palette"
     >
-      <Input
+      <InputControl
         ref={input}
         prefix={<Search size={17} />}
         value={query}
-        placeholder={placeholder ?? t('搜索命令…', 'Search commands…')}
-        aria-label={t('搜索命令', 'Search commands')}
+        placeholder={placeholder ?? t('commandPalette.placeholder')}
+        aria-label={t('commandPalette.searchCommands')}
         role="combobox"
         aria-expanded={true}
         aria-controls={id}
@@ -195,7 +197,7 @@ export function CommandPalette({
         ref={listRef}
         id={id}
         role="listbox"
-        aria-label={t('命令', 'Commands')}
+        aria-label={t('commandPalette.commands')}
         aria-busy={loading || !!busy}
         className="leaf-command-palette__list"
       >
@@ -218,7 +220,7 @@ export function CommandPalette({
               disabled={item.disabled || !!busy}
               tabIndex={-1}
               className="leaf-floating__option"
-              onMouseEnter={() => setActive(index)}
+              onMouseEnter={() => !item.disabled && !busy && setActive(index)}
               onClick={() => void select(item)}
             >
               {item.icon}
@@ -229,22 +231,22 @@ export function CommandPalette({
         ))}
         {!list.length && (
           <div className="leaf-floating__empty">
-            {loading ? messages.loading : (emptyContent ?? messages.noData)}
+            {loading ? messages.common.loading : (emptyContent ?? messages.common.noData)}
           </div>
         )}
       </div>
       <div className="leaf-command-palette__hint" aria-hidden="true">
         <span>
           <kbd>↑</kbd>
-          <kbd>↓</kbd> {t('选择', 'Navigate')}
+          <kbd>↓</kbd> {t('commandPalette.navigate')}
         </span>
         <span>
-          <kbd>↵</kbd> {t('执行', 'Run')}
+          <kbd>↵</kbd> {t('commandPalette.run')}
         </span>
         <span>
-          <kbd>Esc</kbd> {messages.close}
+          <kbd>Esc</kbd> {messages.common.close}
         </span>
       </div>
-    </Modal>
+    </ModalBase>
   );
 }
diff --git a/packages/react/src/commandpalette/index.ts b/packages/react/src/commandpalette/index.ts
index f52c051..e7a838d 100644
--- a/packages/react/src/commandpalette/index.ts
+++ b/packages/react/src/commandpalette/index.ts
@@ -1 +1,2 @@
-export * from './commandpalette';
+export type { CommandItem, CommandPaletteProps } from './commandpalette';
+export { CommandPalette } from './commandpalette';
diff --git a/packages/react/src/config-provider/component-defaults-all.test.tsx b/packages/react/src/config-provider/component-defaults-all.test.tsx
new file mode 100644
index 0000000..0b7f353
--- /dev/null
+++ b/packages/react/src/config-provider/component-defaults-all.test.tsx
@@ -0,0 +1,352 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { createRef } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  Alert,
+  Badge,
+  Card,
+  Checkbox,
+  CheckboxGroup,
+  ConfigProvider,
+  ErrorBoundary,
+  Form,
+  Input,
+  InputNumber,
+  Pagination,
+  Progress,
+  RadioGroup,
+  Skeleton,
+  Switch,
+  Tabs,
+  Tag,
+  Transfer,
+  useConfirm,
+  useLoadingBar,
+  useMessage,
+  useNotification,
+  VirtualList,
+} from '../index';
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+function ServiceActions() {
+  const { message } = useMessage();
+  const notification = useNotification();
+  const confirm = useConfirm();
+  const loading = useLoadingBar();
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => message.open({ content: <Tag>Message content tag</Tag> })}
+      >
+        Message request
+      </button>
+      <button type="button" onClick={() => notification.open({ title: 'Scoped notification' })}>
+        Notification request
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          void confirm.confirm({
+            title: 'Scoped confirm',
+            children: <Input aria-label="Confirm user input" />,
+          });
+        }}
+      >
+        Confirm request
+      </button>
+      <button type="button" onClick={() => loading.start()}>
+        Start scoped bar
+      </button>
+      <button type="button" onClick={() => loading.reset()}>
+        Reset scoped bar
+      </button>
+    </>
+  );
+}
+
+describe('component defaults rollout', () => {
+  it('isolates Transfer virtual lists from standalone generic list defaults', () => {
+    const { container } = render(
+      <ConfigProvider
+        components={{ VirtualList: { horizontal: true, className: 'standalone-list' } }}
+      >
+        <VirtualList items={['Standalone row']} itemKey={(row) => row} renderItem={(row) => row} />
+        <Transfer virtual items={[{ key: 'a', label: 'Transfer row' }]} />
+      </ConfigProvider>,
+    );
+    expect(container.querySelectorAll('.standalone-list')).toHaveLength(1);
+    expect(container.querySelector('.leaf-transfer .leaf-virtual-list__canvas')).toHaveStyle({
+      width: '100%',
+    });
+  });
+  it('keeps embedded tabs and pagination controls isolated from standalone defaults', () => {
+    render(
+      <ConfigProvider
+        components={{
+          Tabs: { size: 'lg', type: 'card' },
+          Select: { disabled: true },
+          Pagination: { size: 'sm', variant: 'ghost', showSizeChanger: true },
+        }}
+      >
+        <Tabs items={[{ key: 'a', label: 'Standalone tab', children: 'Standalone panel' }]} />
+        <Card
+          title="Tabbed card"
+          size="sm"
+          tabs={{ items: [{ key: 'a', label: 'Embedded tab', children: 'Embedded panel' }] }}
+        />
+        <Pagination total={100} />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('tab', { name: 'Standalone tab' }).closest('.leaf-tabs')).toHaveClass(
+      'leaf-tabs--lg',
+      'leaf-tabs--card',
+    );
+    expect(screen.getByRole('tab', { name: 'Embedded tab' }).closest('.leaf-tabs')).toHaveClass(
+      'leaf-tabs--sm',
+      'leaf-tabs--line',
+    );
+    expect(screen.getByRole('combobox')).not.toBeDisabled();
+  });
+
+  it('preserves the native numeric input, focus and current value when defaults change or reset', () => {
+    const ref = createRef<HTMLInputElement>();
+    const view = (defaults: 'sm' | 'lg' | null) => (
+      <ConfigProvider components={{ InputNumber: defaults === null ? null : { size: defaults } }}>
+        <form aria-label="Number form">
+          <InputNumber ref={ref} name="amount" aria-label="Amount" defaultValue={4} />
+        </form>
+      </ConfigProvider>
+    );
+    const { rerender } = render(view('sm'));
+    const node = screen.getByRole('spinbutton');
+    fireEvent.focus(node);
+    fireEvent.change(node, { target: { value: '7' } });
+    rerender(view('lg'));
+    expect(ref.current).toBe(node);
+    expect(node).toHaveValue('7');
+    rerender(view(null));
+    expect(ref.current).toBe(node);
+    expect(node).toHaveValue('7');
+  });
+
+  it('freezes request options while forwarding the calling scope to service content', () => {
+    vi.useFakeTimers();
+    const view = (duration: number) => (
+      <ConfigProvider locale="en-US">
+        <ConfigProvider
+          components={{
+            Message: { duration, type: 'warning' },
+            Notification: { duration, placement: 'bottom-left' },
+            Confirm: { confirmText: 'Proceed', showCancel: false },
+            Tag: { variant: 'solid' },
+            Input: { size: 'sm' },
+            LoadingBar: { height: 5, position: 'bottom' },
+          }}
+        >
+          <ServiceActions />
+        </ConfigProvider>
+      </ConfigProvider>
+    );
+    const { rerender } = render(view(1));
+    fireEvent.click(screen.getByText('Message request'));
+    fireEvent.click(screen.getByText('Notification request'));
+    expect(screen.getByText('Message content tag').closest('.leaf-tag')).toHaveClass(
+      'leaf-tag--solid',
+    );
+    expect(document.querySelector('.leaf-notification-region--bottom-left')).toHaveTextContent(
+      'Scoped notification',
+    );
+    act(() => vi.advanceTimersByTime(500));
+    rerender(view(10));
+    act(() => vi.advanceTimersByTime(600));
+    expect(document.querySelector('.leaf-message-slot')).toHaveAttribute('data-state', 'closing');
+    expect(screen.queryByRole('status')).toBeNull();
+    act(() => vi.advanceTimersByTime(1000));
+    expect(screen.queryByText('Message content tag')).toBeNull();
+    expect(screen.queryByText('Scoped notification')).toBeNull();
+    fireEvent.click(screen.getByText('Confirm request'));
+    expect(screen.getByRole('button', { name: 'Proceed' })).toBeVisible();
+    expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
+    expect(
+      screen.getByRole('textbox', { name: 'Confirm user input' }).closest('.leaf-input'),
+    ).toHaveClass('leaf-input--sm');
+  });
+
+  it('keeps loading presentation stable until the task batch completes', () => {
+    const view = (height: number) => (
+      <ConfigProvider components={{ LoadingBar: { height, position: 'bottom' } }}>
+        <ServiceActions />
+      </ConfigProvider>
+    );
+    const { rerender } = render(view(5));
+    fireEvent.click(screen.getByText('Start scoped bar'));
+    expect(screen.getByRole('progressbar')).toHaveStyle({ height: '5px' });
+    rerender(view(9));
+    expect(screen.getByRole('progressbar')).toHaveStyle({ height: '5px' });
+    fireEvent.click(screen.getByText('Reset scoped bar'));
+    fireEvent.click(screen.getByText('Start scoped bar'));
+    expect(screen.getByRole('progressbar')).toHaveStyle({ height: '9px' });
+  });
+
+  it('retains the ErrorBoundary class ref and reacts to effective reset keys', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const ref = createRef<ErrorBoundary>();
+    const reset = vi.fn();
+    let broken = true;
+    function Content() {
+      if (broken) throw new Error('Test boundary');
+      return <span>Recovered</span>;
+    }
+    const view = (key: number) => (
+      <ConfigProvider
+        components={{
+          ErrorBoundary: { fallback: 'Configured fallback', resetKeys: [key], onReset: reset },
+        }}
+      >
+        <ErrorBoundary ref={ref}>
+          <Content />
+        </ErrorBoundary>
+      </ConfigProvider>
+    );
+    const { rerender } = render(view(1));
+    const instance = ref.current;
+    expect(screen.getByText('Configured fallback')).toBeVisible();
+    broken = false;
+    rerender(view(2));
+    expect(ref.current).toBe(instance);
+    expect(screen.getByText('Recovered')).toBeVisible();
+    expect(reset).toHaveBeenCalledOnce();
+  });
+  it('keeps group values and field identities independent from individual control defaults', () => {
+    const changed = vi.fn();
+    render(
+      <ConfigProvider
+        components={{
+          Checkbox: {
+            defaultChecked: true,
+            id: 'standalone-checkbox',
+            name: 'standalone',
+            onChange: changed,
+          },
+          Radio: { checked: true, name: 'standalone-radio' },
+          CheckboxGroup: { size: 'sm', defaultValue: ['a'] },
+          RadioGroup: { size: 'lg', defaultValue: 'a' },
+        }}
+      >
+        <Form aria-label="Choice form">
+          <Checkbox>Standalone choice</Checkbox>
+          <CheckboxGroup
+            name="checks"
+            options={[
+              { value: 'a', label: 'Check A' },
+              { value: 'b', label: 'Check B' },
+            ]}
+          />
+          <RadioGroup
+            name="radio"
+            options={[
+              { value: 'a', label: 'Radio A' },
+              { value: 'b', label: 'Radio B' },
+            ]}
+          />
+        </Form>
+      </ConfigProvider>,
+    );
+    const form = screen.getByRole('form') as HTMLFormElement;
+    expect(screen.getByLabelText('Standalone choice')).toBeChecked();
+    expect(screen.getByLabelText('Check B')).not.toBeChecked();
+    expect(screen.getByLabelText('Radio B')).not.toBeChecked();
+    fireEvent.click(screen.getByLabelText('Check B'));
+    expect(changed).not.toHaveBeenCalled();
+    expect(new FormData(form).getAll('checks')).toEqual(['a', 'b']);
+    expect(new FormData(form).get('radio')).toBe('a');
+    expect(form.querySelectorAll('#standalone-checkbox')).toHaveLength(1);
+  });
+
+  it('does not let explicit or configured enabled controls escape a disabled Form', () => {
+    render(
+      <ConfigProvider components={{ Checkbox: { disabled: false }, Switch: { disabled: false } }}>
+        <Form disabled>
+          <Checkbox disabled={false}>Locked choice</Checkbox>
+          <Switch disabled={false}>Locked switch</Switch>
+        </Form>
+      </ConfigProvider>,
+    );
+    expect(screen.getByLabelText('Locked choice')).toBeDisabled();
+    expect(screen.getByRole('switch')).toBeDisabled();
+  });
+  it('applies display defaults while preserving explicit false and local presentation', () => {
+    const { container } = render(
+      <ConfigProvider
+        components={{
+          Alert: { type: 'warning', showIcon: false },
+          Badge: { dot: true },
+          Card: { size: 'sm', divided: true },
+          Progress: { showInfo: false, active: false },
+          Tag: { variant: 'solid', closable: true },
+        }}
+      >
+        <Alert title="Scoped warning" />
+        <Badge count={2}>Badge target</Badge>
+        <Card title="Scoped card" divided={false}>
+          Card body
+        </Card>
+        <Progress percent={28} aria-label="Scoped progress" />
+        <Tag closable={false}>Scoped tag</Tag>
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('alert')).toHaveClass('leaf-alert--warning');
+    expect(container.querySelector('.leaf-alert__icon')).toBeNull();
+    expect(container.querySelector('.leaf-badge__indicator')).toHaveClass(
+      'leaf-badge__indicator--dot',
+    );
+    expect(container.querySelector('.leaf-card')).toHaveClass('leaf-card--sm');
+    expect(container.querySelector('.leaf-card')).not.toHaveClass('leaf-card--divided');
+    expect(screen.getByRole('progressbar')).not.toHaveAttribute('data-active');
+    expect(container.querySelector('.leaf-tag')).toHaveClass('leaf-tag--solid');
+    expect(container.querySelector('.leaf-tag__close')).toBeNull();
+  });
+
+  it('isolates implementation-owned loading placeholders from public Skeleton defaults', () => {
+    render(
+      <ConfigProvider components={{ Skeleton: { loading: true, rows: 8 } }}>
+        <Skeleton>
+          <span>Standalone loaded content</span>
+        </Skeleton>
+        <Card title="Ready card">
+          <span>Ready card content</span>
+        </Card>
+      </ConfigProvider>,
+    );
+    expect(screen.queryByText('Standalone loaded content')).toBeNull();
+    expect(screen.getByText('Ready card content')).toBeVisible();
+  });
+
+  it('uses inherited callbacks once and replaces them with an instance callback', () => {
+    const inherited = vi.fn();
+    const local = vi.fn();
+    render(
+      <ConfigProvider components={{ Alert: { closable: true, onClose: inherited } }}>
+        <Alert title="Inherited close" />
+        <Alert title="Local close" onClose={local} />
+      </ConfigProvider>,
+    );
+    fireEvent.click(
+      within(screen.getByText('Inherited close').closest('.leaf-alert') as HTMLElement).getByRole(
+        'button',
+      ),
+    );
+    fireEvent.click(
+      within(screen.getByText('Local close').closest('.leaf-alert') as HTMLElement).getByRole(
+        'button',
+      ),
+    );
+    expect(inherited).toHaveBeenCalledOnce();
+    expect(local).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/react/src/config-provider/component-defaults.test.tsx b/packages/react/src/config-provider/component-defaults.test.tsx
new file mode 100644
index 0000000..785f65d
--- /dev/null
+++ b/packages/react/src/config-provider/component-defaults.test.tsx
@@ -0,0 +1,710 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef, memo } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  Button,
+  CommandPalette,
+  Form,
+  FormField,
+  Input,
+  InputSearch,
+  Modal,
+  Pagination,
+  Select,
+  SplitButton,
+  Upload,
+  useConfirm,
+} from '../index';
+import {
+  type LeafComponentDefaults,
+  mergeComponentDefaults,
+  mergeComponentProps,
+  useComponentProps,
+} from './component-defaults';
+import { ConfigProvider, useLeafConfig } from './config-provider';
+
+describe('component defaults merging', () => {
+  it('only copies props when supplementing a defined default', () => {
+    const props = { size: 'lg', disabled: false, value: '', count: 0, footer: null };
+    expect(mergeComponentProps(undefined, props)).toBe(props);
+    expect(
+      mergeComponentProps({ size: 'sm', disabled: true, value: 'Leaf', count: 1 }, props),
+    ).toBe(props);
+    expect(mergeComponentProps({ size: undefined }, {})).toEqual({});
+    const missing: { size?: string; disabled?: boolean } = { size: undefined, disabled: false };
+    expect(mergeComponentProps({ size: 'sm', disabled: true }, missing)).toEqual({
+      size: 'sm',
+      disabled: false,
+    });
+    expect(missing).toEqual({ size: undefined, disabled: false });
+  });
+
+  it('keeps nested values and callback references and replaces them as a whole', () => {
+    const style = { color: 'red', padding: 10 };
+    const options = [{ value: 'leaf', label: 'Leaf' }];
+    const callback = vi.fn();
+    const defaults = { style, options, className: 'global', onClick: callback };
+    const props = mergeComponentProps(defaults, {} as Partial<typeof defaults>);
+    expect(props.style).toBe(style);
+    expect(props.options).toBe(options);
+    expect(props.onClick).toBe(callback);
+    const localStyle = { color: 'blue' };
+    const localCallback = vi.fn();
+    const resolved = mergeComponentProps(defaults, {
+      style: localStyle,
+      className: '',
+      onClick: localCallback,
+    } as Partial<typeof defaults>);
+    expect(resolved.style).toBe(localStyle);
+    expect(resolved.className).toBe('');
+    resolved.onClick?.();
+    expect(localCallback).toHaveBeenCalledOnce();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('merges nested scopes by prop without mutating or recopying unchanged entries', () => {
+    const style = { color: 'red', padding: 10 };
+    const input = { allowClear: true };
+    const parent: LeafComponentDefaults = {
+      Button: { variant: 'outline', size: 'sm', style, onClick: vi.fn() },
+      Input: input,
+    };
+    expect(mergeComponentDefaults(parent, undefined)).toBe(parent);
+    expect(mergeComponentDefaults(parent, { Button: {} })).toBe(parent);
+    expect(mergeComponentDefaults(parent, { Button: { size: undefined } })).toBe(parent);
+    expect(mergeComponentDefaults(parent, { Button: { size: 'sm', style } })).toBe(parent);
+    const innerStyle = { color: 'blue' };
+    const innerCallback = vi.fn();
+    const inner: LeafComponentDefaults = {
+      Button: { size: 'lg', style: innerStyle, onClick: innerCallback },
+      Modal: { footer: null },
+    };
+    const merged = mergeComponentDefaults(parent, inner);
+    expect(merged.Button).toEqual({
+      variant: 'outline',
+      size: 'lg',
+      style: innerStyle,
+      onClick: innerCallback,
+    });
+    expect(merged.Input).toBe(input);
+    expect(merged.Modal?.footer).toBeNull();
+    expect(parent.Button?.size).toBe('sm');
+    expect(inner.Button?.variant).toBeUndefined();
+  });
+
+  it('clears one inherited entry with null without mutating its parent or other defaults', () => {
+    const input = { allowClear: true };
+    const parent: LeafComponentDefaults = {
+      Button: { variant: 'outline', size: 'sm' },
+      Input: input,
+    };
+    const cleared = mergeComponentDefaults(parent, { Button: null });
+    expect(cleared.Button).toBeUndefined();
+    expect(cleared.Input).toBe(input);
+    expect(parent.Button).toEqual({ variant: 'outline', size: 'sm' });
+    expect(mergeComponentDefaults(cleared, { Button: null })).toBe(cleared);
+    expect(mergeComponentDefaults(cleared, { Button: undefined })).toBe(cleared);
+    expect(mergeComponentDefaults(cleared, { Button: { size: 'lg' } }).Button).toEqual({
+      size: 'lg',
+    });
+    expect(mergeComponentProps(null, input)).toBe(input);
+  });
+});
+
+describe('ConfigProvider component defaults', () => {
+  it('restores local uncontrolled inputs after clearing shared defaults and preserves them on updates', async () => {
+    const example = (value: string) => (
+      <ConfigProvider
+        components={{ Input: { value, readOnly: true }, Button: { variant: 'outline' } }}
+      >
+        <ConfigProvider components={{ Input: null, Button: null }}>
+          <form aria-label="Reset scope">
+            <Input aria-label="Local name" defaultValue="Local" />
+            <Button>Built in again</Button>
+            <ConfigProvider components={{ Input: { allowClear: true } }}>
+              <Input aria-label="New defaults" defaultValue="Nested" />
+            </ConfigProvider>
+          </form>
+        </ConfigProvider>
+        <Input aria-label="Shared name" />
+      </ConfigProvider>
+    );
+    const { rerender } = render(example('Shared'));
+    const input = screen.getByRole('textbox', { name: 'Local name' });
+    expect(input).not.toHaveAttribute('readonly');
+    expect(screen.getByRole('button', { name: 'Built in again' })).toHaveClass(
+      'leaf-button--solid',
+    );
+    await userEvent.type(input, ' edit');
+    rerender(example('Updated shared'));
+    expect(screen.getByRole('textbox', { name: 'Local name' })).toBe(input);
+    expect(input).toHaveValue('Local edit');
+    expect(screen.getByRole('textbox', { name: 'Shared name' })).toHaveValue('Updated shared');
+    expect(screen.getByRole('textbox', { name: 'New defaults' })).toHaveValue('Nested');
+    await userEvent.click(screen.getByRole('button', { name: '清除输入' }));
+    expect(screen.getByRole('textbox', { name: 'New defaults' })).toHaveValue('');
+    await act(async () =>
+      (screen.getByRole('form', { name: 'Reset scope' }) as HTMLFormElement).reset(),
+    );
+    expect(input).toHaveValue('Local');
+  });
+
+  it('resets InputSearch and its shared Input defaults independently', () => {
+    render(
+      <ConfigProvider
+        components={{ Input: { defaultValue: 'Shared' }, InputSearch: { defaultValue: 'Search' } }}
+      >
+        <ConfigProvider components={{ InputSearch: null }}>
+          <InputSearch aria-label="Shared fallback" />
+        </ConfigProvider>
+        <ConfigProvider components={{ Input: null, InputSearch: null }}>
+          <InputSearch aria-label="Built in search" />
+        </ConfigProvider>
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('textbox', { name: 'Shared fallback' })).toHaveValue('Shared');
+    expect(screen.getByRole('textbox', { name: 'Built in search' })).toHaveValue('');
+  });
+
+  it('resolves SplitButton defaults once and shares disabled and loading across both controls', async () => {
+    const select = vi.fn();
+    const click = vi.fn();
+    const submit = vi.fn((event) => event.preventDefault());
+    const example = (loading?: boolean, disabled?: boolean) => (
+      <ConfigProvider
+        components={{
+          Button: { loading: true, disabled: true, type: 'submit', size: 'sm', variant: 'outline' },
+        }}
+      >
+        <form onSubmit={submit}>
+          <SplitButton
+            items={[{ key: 'copy', label: 'Copy', onClick: select }]}
+            menuLabel="More"
+            loading={loading}
+            disabled={disabled}
+            onClick={click}
+          >
+            Save
+          </SplitButton>
+        </form>
+      </ConfigProvider>
+    );
+    const { rerender } = render(example());
+    const main = screen.getByRole('button', { name: 'Save' });
+    const more = screen.getByRole('button', { name: 'More' });
+    expect(main).toBeDisabled();
+    expect(more).toBeDisabled();
+    for (const button of [main, more])
+      expect(button).toHaveClass('leaf-button--sm', 'leaf-button--outline');
+    rerender(example(false, false));
+    expect(main).toBeEnabled();
+    expect(more).toBeEnabled();
+    expect(more).toHaveAttribute('type', 'button');
+    await userEvent.click(more);
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Copy' }));
+    expect(select).toHaveBeenCalledOnce();
+    expect(click).not.toHaveBeenCalled();
+    expect(submit).not.toHaveBeenCalled();
+    await userEvent.click(main);
+    expect(click).toHaveBeenCalledOnce();
+    expect(submit).toHaveBeenCalledOnce();
+    rerender(example(true, false));
+    expect(main).toBeDisabled();
+    expect(more).toBeDisabled();
+  });
+
+  it('keeps internal Upload and pagination controls independent of public control defaults', async () => {
+    const click = vi.fn();
+    const submit = vi.fn((event) => event.preventDefault());
+    const changePage = vi.fn();
+    const search = vi.fn();
+    render(
+      <ConfigProvider
+        locale="en-US"
+        components={{
+          Button: { type: 'submit', loading: true, disabled: true, onClick: click },
+          Select: { readOnly: true, showSearch: true, onSearch: search, loading: true },
+        }}
+      >
+        <form onSubmit={submit}>
+          <Upload>Choose a file</Upload>
+          <Pagination total={100} showSizeChanger onChange={changePage} />
+        </form>
+      </ConfigProvider>,
+    );
+    const trigger = screen.getByRole('button', { name: 'Choose a file' });
+    expect(trigger).toBeEnabled();
+    expect(trigger).toHaveAttribute('type', 'button');
+    await userEvent.click(trigger);
+    expect(submit).not.toHaveBeenCalled();
+    expect(click).not.toHaveBeenCalled();
+    const size = screen.getByRole('combobox');
+    expect(size).toBeEnabled();
+    await userEvent.click(size);
+    await userEvent.click(screen.getByRole('option', { name: '20 / page' }));
+    expect(changePage).toHaveBeenLastCalledWith(1, 20);
+    expect(search).not.toHaveBeenCalled();
+  });
+
+  it('keeps command search functional without leaking default type, readonly, IDs or events', async () => {
+    const change = vi.fn();
+    render(
+      <ConfigProvider
+        components={{
+          Input: {
+            type: 'password',
+            readOnly: true,
+            required: true,
+            id: 'shared-id',
+            onChange: change,
+          },
+        }}
+      >
+        <CommandPalette
+          open
+          shortcut={false}
+          items={[
+            { key: 'copy', label: 'Copy' },
+            { key: 'save', label: 'Save' },
+          ]}
+        />
+      </ConfigProvider>,
+    );
+    const search = screen.getByRole('combobox');
+    expect(search).toHaveAttribute('type', 'text');
+    expect(search).not.toHaveAttribute('readonly');
+    expect(search).not.toHaveAttribute('required');
+    expect(search.id).not.toBe('shared-id');
+    await userEvent.type(search, 'copy');
+    expect(search).toHaveValue('copy');
+    expect(screen.getByRole('option', { name: 'Copy' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Save' })).toBeNull();
+    expect(change).not.toHaveBeenCalled();
+  });
+  it('respects instance, inner, outer and builtin precedence including false and undefined', () => {
+    render(
+      <>
+        <Button>Built in</Button>
+        <ConfigProvider components={{ Button: { variant: 'outline', size: 'sm', danger: true } }}>
+          <Button>Outer</Button>
+          <ConfigProvider components={{ Button: { size: 'lg', danger: false } }}>
+            <Button size={undefined}>Inner</Button>
+            <Button size="md" variant="ghost">
+              Instance
+            </Button>
+          </ConfigProvider>
+          <ConfigProvider>
+            <Button>Inherited</Button>
+          </ConfigProvider>
+        </ConfigProvider>
+      </>,
+    );
+    expect(screen.getByRole('button', { name: 'Built in' })).toHaveClass(
+      'leaf-button--solid',
+      'leaf-button--md',
+    );
+    expect(screen.getByRole('button', { name: 'Outer' })).toHaveClass(
+      'leaf-button--outline',
+      'leaf-button--sm',
+      'leaf-button--danger',
+    );
+    expect(screen.getByRole('button', { name: 'Inner' })).toHaveClass(
+      'leaf-button--outline',
+      'leaf-button--lg',
+    );
+    expect(screen.getByRole('button', { name: 'Inner' })).not.toHaveClass('leaf-button--danger');
+    expect(screen.getByRole('button', { name: 'Instance' })).toHaveClass(
+      'leaf-button--ghost',
+      'leaf-button--md',
+    );
+    expect(screen.getByRole('button', { name: 'Inherited' })).toHaveClass('leaf-button--sm');
+  });
+
+  it('forwards refs and retains loading constraints and replacement event semantics', async () => {
+    const ref = createRef<HTMLButtonElement>();
+    const defaults = vi.fn();
+    const instance = vi.fn();
+    render(
+      <ConfigProvider
+        components={{ Button: { loading: true, disabled: false, onClick: defaults } }}
+      >
+        <Button ref={ref}>Busy</Button>
+        <Button loading={false}>Available</Button>
+        <Button loading={false} onClick={instance}>
+          Override
+        </Button>
+      </ConfigProvider>,
+    );
+    expect(ref.current).toBe(screen.getByRole('button', { name: 'Busy' }));
+    expect(ref.current).toBeDisabled();
+    await userEvent.click(screen.getByRole('button', { name: 'Busy' }));
+    expect(defaults).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByRole('button', { name: 'Available' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Override' }));
+    expect(defaults).toHaveBeenCalledOnce();
+    expect(instance).toHaveBeenCalledOnce();
+  });
+
+  it('updates defaults without replacing native refs or resetting edited input values', async () => {
+    const ref = createRef<HTMLInputElement>();
+    const example = (defaultValue: string, size: 'sm' | 'lg') => (
+      <ConfigProvider components={{ Input: { defaultValue, allowClear: true, size } }}>
+        <form aria-label="Settings">
+          <Input ref={ref} name="name" aria-label="Name" />
+        </form>
+      </ConfigProvider>
+    );
+    const { rerender } = render(example('Leaf', 'sm'));
+    const input = screen.getByRole('textbox', { name: 'Name' });
+    expect(input).toHaveValue('Leaf');
+    await userEvent.type(input, ' UI');
+    rerender(example('New default', 'lg'));
+    expect(ref.current).toBe(input);
+    expect(input).toHaveValue('Leaf UI');
+    expect(input.closest('.leaf-input')).toHaveClass('leaf-input--lg');
+    const form = screen.getByRole('form') as HTMLFormElement;
+    expect(new FormData(form).get('name')).toBe('Leaf UI');
+    await userEvent.click(screen.getByRole('button', { name: '清除输入' }));
+    expect(input).toHaveValue('');
+    await act(async () => form.reset());
+    expect(input).toHaveValue('New default');
+  });
+
+  it('keeps configured Input values controlled and lets instance value and callbacks replace them', () => {
+    const onChange = vi.fn();
+    const instance = vi.fn();
+    const example = (value: string) => (
+      <ConfigProvider components={{ Input: { value, onChange } }}>
+        <Input aria-label="Controlled" />
+        <Input aria-label="Empty override" value="" onChange={instance} />
+      </ConfigProvider>
+    );
+    const { rerender } = render(example('Leaf'));
+    fireEvent.change(screen.getByRole('textbox', { name: 'Controlled' }), {
+      target: { value: 'Edit' },
+    });
+    expect(onChange).toHaveBeenCalledOnce();
+    expect(screen.getByRole('textbox', { name: 'Controlled' })).toHaveValue('Leaf');
+    fireEvent.change(screen.getByRole('textbox', { name: 'Empty override' }), {
+      target: { value: 'Edit' },
+    });
+    expect(instance).toHaveBeenCalledOnce();
+    expect(onChange).toHaveBeenCalledOnce();
+    expect(screen.getByRole('textbox', { name: 'Empty override' })).toHaveValue('');
+    rerender(example('Updated'));
+    expect(screen.getByRole('textbox', { name: 'Controlled' })).toHaveValue('Updated');
+  });
+
+  it('cannot override Form disabled even in InputSearch or Select', () => {
+    render(
+      <ConfigProvider
+        components={{
+          Input: { disabled: false },
+          InputSearch: { disabled: false },
+          Select: { disabled: false },
+        }}
+      >
+        <Form disabled>
+          <FormField label="Name">
+            <Input disabled={false} />
+          </FormField>
+          <FormField label="Search">
+            <InputSearch disabled={false} enterButton="Search" />
+          </FormField>
+          <FormField label="Choice">
+            <Select disabled={false} options={[]} />
+          </FormField>
+        </Form>
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('textbox', { name: 'Name' })).toBeDisabled();
+    expect(screen.getByRole('textbox', { name: 'Search' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Search' })).toBeDisabled();
+    expect(screen.getByRole('combobox', { name: 'Choice' })).toBeDisabled();
+  });
+
+  it('keeps search state, Enter, clearing and form reset aligned with resolved Input defaults', async () => {
+    const onChange = vi.fn();
+    const onSearch = vi.fn();
+    const submit = vi.fn();
+    const ref = createRef<HTMLInputElement>();
+    const { rerender } = render(
+      <ConfigProvider
+        components={{
+          Input: { defaultValue: 'Leaf', allowClear: true, size: 'sm', onChange },
+          InputSearch: { enterButton: 'Find', onSearch },
+          Button: { size: 'lg', type: 'submit', disabled: true },
+        }}
+      >
+        <form
+          aria-label="Search form"
+          onSubmit={(event) => {
+            event.preventDefault();
+            submit();
+          }}
+        >
+          <InputSearch ref={ref} aria-label="Search" name="q" />
+        </form>
+      </ConfigProvider>,
+    );
+    const input = screen.getByRole('textbox', { name: 'Search' });
+    expect(ref.current).toBe(input);
+    expect(input).toHaveValue('Leaf');
+    expect(input.closest('.leaf-input')).toHaveClass('leaf-input--sm');
+    expect(screen.getByRole('button', { name: 'Find' })).toHaveClass('leaf-button--sm');
+    await userEvent.type(input, ' UI{Enter}');
+    expect(onSearch).toHaveBeenLastCalledWith('Leaf UI');
+    expect(new FormData(screen.getByRole('form') as HTMLFormElement).get('q')).toBe('Leaf UI');
+    await userEvent.click(screen.getByRole('button', { name: '清除输入' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Find' }));
+    expect(onSearch).toHaveBeenLastCalledWith('');
+    await act(async () => (screen.getByRole('form') as HTMLFormElement).reset());
+    expect(input).toHaveValue('Leaf');
+    expect(onChange).toHaveBeenCalledTimes(4);
+    expect(submit).not.toHaveBeenCalled();
+    rerender(
+      <ConfigProvider
+        components={{
+          Input: { value: 'Base', onChange },
+          InputSearch: { value: 'Search value', onSearch, enterButton: 'Find', size: 'lg' },
+        }}
+      >
+        <InputSearch aria-label="Search" />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('textbox', { name: 'Search' })).toHaveValue('Search value');
+    await userEvent.click(screen.getByRole('button', { name: 'Find' }));
+    expect(onSearch).toHaveBeenLastCalledWith('Search value');
+  });
+
+  it('applies Select defaults in portals while keeping multi-selection instance-owned', async () => {
+    const selected = vi.fn();
+    const options = [
+      { value: 'leaf', label: 'Leaf' },
+      { value: 'react', label: 'React' },
+    ];
+    const popupRender = vi.fn((content) => content);
+    render(
+      <ConfigProvider
+        components={{
+          Select: {
+            size: 'sm',
+            showSearch: true,
+            allowClear: true,
+            popupClassName: 'configured-popup',
+            popupRender,
+          },
+        }}
+      >
+        <Select
+          aria-label="Libraries"
+          multiple
+          defaultValue={['leaf']}
+          options={options}
+          onChange={selected}
+        />
+      </ConfigProvider>,
+    );
+    const input = screen.getByRole('combobox');
+    expect(input).not.toHaveAttribute('readonly');
+    expect(input.closest('.leaf-select')).toHaveClass('leaf-select--sm');
+    await userEvent.click(input);
+    expect(screen.getByRole('listbox')).toHaveClass('configured-popup');
+    expect(popupRender).toHaveBeenCalled();
+    await userEvent.click(screen.getByRole('option', { name: 'React' }));
+    expect(selected).toHaveBeenLastCalledWith(['leaf', 'react'], options);
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('replaces Select popup styles and reflects default updates on an open panel', async () => {
+    const options = [{ value: 'leaf', label: 'Leaf' }];
+    const example = (size: 'sm' | 'lg') => (
+      <ConfigProvider
+        components={{
+          Select: { size, showSearch: true, popupStyle: { color: 'red', background: 'pink' } },
+        }}
+      >
+        <Select aria-label="Library" options={options} popupStyle={{ color: 'blue' }} />
+      </ConfigProvider>
+    );
+    const { rerender } = render(example('sm'));
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByRole('listbox').style.color).toBe('blue');
+    expect(screen.getByRole('listbox').style.background).toBe('');
+    rerender(example('lg'));
+    expect(screen.getByRole('combobox').closest('.leaf-select')).toHaveClass('leaf-select--lg');
+    expect(screen.getByRole('option', { name: 'Leaf' })).toBeInTheDocument();
+  });
+
+  it('resolves Modal defaults before choosing its portal and preserves explicit null footer', async () => {
+    const container = document.createElement('div');
+    document.body.append(container);
+    const close = vi.fn();
+    try {
+      const { rerender } = render(
+        <ConfigProvider
+          components={{
+            Modal: { width: 560, title: 'Configured', container, onClose: close, footer: null },
+            Button: { variant: 'outline' },
+          }}
+        >
+          <Modal open>
+            <Button>Inside portal</Button>
+          </Modal>
+        </ConfigProvider>,
+      );
+      const dialog = within(container).getByRole('dialog', { name: 'Configured' });
+      expect(dialog).toHaveStyle({ width: '560px' });
+      expect(within(dialog).getByRole('button', { name: 'Inside portal' })).toHaveClass(
+        'leaf-button--outline',
+      );
+      expect(dialog.querySelector('.leaf-modal__footer')).toBeNull();
+      await userEvent.click(within(dialog).getByRole('button', { name: '关闭' }));
+      expect(close).toHaveBeenCalledOnce();
+      rerender(
+        <ConfigProvider components={{ Modal: { width: 560, footer: 'Default footer' } }}>
+          <Modal open title="Instance" width={420} footer={null} />
+        </ConfigProvider>,
+      );
+      expect(screen.getByRole('dialog', { name: 'Instance' })).toHaveStyle({ width: '420px' });
+      expect(screen.queryByText('Default footer')).toBeNull();
+    } finally {
+      container.remove();
+    }
+  });
+
+  it('does not leak Modal defaults into the confirmation service', async () => {
+    const modalConfirm = vi.fn();
+    function Request() {
+      const { confirm } = useConfirm();
+      return (
+        <Button
+          disabled={false}
+          loading={false}
+          onClick={() => void confirm({ title: 'Delete item', children: 'Cannot undo.' })}
+        >
+          Request
+        </Button>
+      );
+    }
+    render(
+      <ConfigProvider
+        components={{
+          Button: { disabled: true, loading: true },
+          Modal: {
+            description: 'Modal only',
+            onConfirm: modalConfirm,
+            confirmLoading: true,
+            width: 800,
+          },
+        }}
+      >
+        <Request />
+      </ConfigProvider>,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Request' }));
+    const dialog = screen.getByRole('alertdialog', { name: 'Delete item' });
+    expect(dialog).toHaveStyle({ width: '420px' });
+    expect(screen.queryByText('Modal only')).toBeNull();
+    expect(within(dialog).getByRole('button', { name: '确定' })).toBeEnabled();
+    await userEvent.click(within(dialog).getByRole('button', { name: '确定' }));
+    expect(modalConfirm).not.toHaveBeenCalled();
+  });
+
+  it('keeps dialog actions non-submitting unless action props explicitly request submit', async () => {
+    const close = vi.fn();
+    const defaults: LeafComponentDefaults = {
+      Button: { type: 'submit', disabled: true, loading: true },
+    };
+    const { rerender } = render(
+      <ConfigProvider locale="en-US" components={defaults}>
+        <Modal open title="Settings" onClose={close} />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('button', { name: 'Cancel' })).toHaveAttribute('type', 'button');
+    expect(screen.getByRole('button', { name: 'OK' })).toHaveAttribute('type', 'button');
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: 'OK' })).toBeEnabled();
+    await userEvent.click(screen.getByRole('button', { name: 'OK' }));
+    expect(close).toHaveBeenCalledOnce();
+    rerender(
+      <ConfigProvider locale="en-US" components={defaults}>
+        <Modal open title="Settings" onClose={close} confirmButtonProps={{ type: 'submit' }} />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('button', { name: 'OK' })).toHaveAttribute('type', 'submit');
+    await userEvent.click(screen.getByRole('button', { name: 'OK' }));
+    expect(close).toHaveBeenCalledOnce();
+  });
+
+  it('separates default-prop subscriptions from language/theme subscriptions', () => {
+    const defaultRender = vi.fn();
+    const configRender = vi.fn();
+    const DefaultsOnly = memo(function DefaultsOnly() {
+      defaultRender();
+      return <output>{useComponentProps('Button', {}).size}</output>;
+    });
+    const ConfigOnly = memo(function ConfigOnly() {
+      configRender();
+      return <output>{useLeafConfig().locale}</output>;
+    });
+    const defaults: LeafComponentDefaults = { Button: { size: 'sm' } };
+    const example = (locale: 'zh-CN' | 'en-US', components: LeafComponentDefaults) => (
+      <ConfigProvider locale={locale} components={components}>
+        <DefaultsOnly />
+        <ConfigOnly />
+      </ConfigProvider>
+    );
+    const { rerender } = render(example('zh-CN', defaults));
+    expect(defaultRender).toHaveBeenCalledOnce();
+    expect(configRender).toHaveBeenCalledOnce();
+    rerender(example('en-US', defaults));
+    expect(defaultRender).toHaveBeenCalledOnce();
+    expect(configRender).toHaveBeenCalledTimes(2);
+    rerender(example('en-US', { Button: { size: 'lg' } }));
+    expect(defaultRender).toHaveBeenCalledTimes(2);
+    expect(configRender).toHaveBeenCalledTimes(2);
+    expect(screen.getByText('lg')).toBeInTheDocument();
+  });
+
+  it('renders matching scoped defaults on the server and during hydration', async () => {
+    const content = (
+      <ConfigProvider
+        components={{
+          Button: { variant: 'outline', size: 'sm' },
+          Input: { defaultValue: 'Leaf' },
+          InputSearch: { enterButton: 'Find' },
+          Select: { showSearch: true },
+        }}
+      >
+        <Button>Hydrated</Button>
+        <Input aria-label="Name" />
+        <InputSearch aria-label="Search" />
+        <Select aria-label="Library" options={[]} />
+      </ConfigProvider>
+    );
+    const container = document.createElement('div');
+    container.innerHTML = renderToString(content);
+    document.body.append(container);
+    const errors = vi.fn();
+    let root: ReturnType<typeof hydrateRoot> | undefined;
+    try {
+      await act(async () => {
+        root = hydrateRoot(container, content, { onRecoverableError: errors });
+      });
+      expect(errors).not.toHaveBeenCalled();
+      expect(within(container).getByRole('button', { name: 'Hydrated' })).toHaveClass(
+        'leaf-button--outline',
+        'leaf-button--sm',
+      );
+      expect(within(container).getByRole('textbox', { name: 'Name' })).toHaveValue('Leaf');
+      expect(within(container).getByRole('textbox', { name: 'Search' })).toHaveValue('Leaf');
+    } finally {
+      await act(async () => root?.unmount());
+      container.remove();
+    }
+  });
+});
diff --git a/packages/react/src/config-provider/component-defaults.ts b/packages/react/src/config-provider/component-defaults.ts
new file mode 100644
index 0000000..debeffc
--- /dev/null
+++ b/packages/react/src/config-provider/component-defaults.ts
@@ -0,0 +1,500 @@
+import type { HTMLAttributes } from 'react';
+import { createContext, useContext } from 'react';
+import type { AlertProps } from '../alert/alert';
+import type { AffixProps, AnchorProps } from '../anchor/anchor';
+import type { AppBarProps, BottomNavigationProps, ToolbarProps } from '../appbar/appbar';
+import type { AutoCompleteProps } from '../autocomplete/autocomplete';
+import type { AvatarProps } from '../avatar/avatar';
+import type { AvatarGroupProps } from '../avatar/group';
+import type { BackTopProps } from '../backtop/backtop';
+import type { BadgeProps } from '../badge/badge';
+import type { BreadcrumbProps } from '../breadcrumb/breadcrumb';
+import type { ButtonProps } from '../button/button';
+import type { ButtonGroupProps, SplitButtonProps } from '../button/group';
+import type { CalendarProps } from '../calendar/calendar';
+import type { CardProps } from '../card/card';
+import type { CarouselProps } from '../carousel/carousel';
+import type { CascaderProps } from '../cascader/cascader';
+import type { CheckboxProps } from '../checkbox/checkbox';
+import type { CheckboxGroupProps } from '../checkbox/group';
+import type { CollapseProps } from '../collapse/collapse';
+import type { ColorPickerProps } from '../colorpicker/colorpicker';
+import type { CommandPaletteProps } from '../commandpalette/commandpalette';
+import type { ConfirmOptions } from '../confirm/confirm';
+import type { DatePickerProps } from '../datepicker/datepicker';
+import type { DateRangePickerProps } from '../daterangepicker/daterangepicker';
+import type { DateTimePickerProps } from '../datetimepicker/datetimepicker';
+import type { DescriptionsProps } from '../descriptions/descriptions';
+import type { DividerProps } from '../divider/divider';
+import type { DrawerProps } from '../drawer/drawer';
+import type { DropdownProps } from '../dropdown/dropdown';
+import type { EmptyProps } from '../empty/empty';
+import type { ErrorBoundaryProps } from '../errorboundary/errorboundary';
+import type { FileListProps } from '../filelist/filelist';
+import type { FlexProps } from '../flex/flex';
+import type { FloatButtonGroupProps, FloatButtonProps } from '../floatbutton/floatbutton';
+import type {
+  FormErrorSummaryProps,
+  FormFieldProps,
+  FormGroupProps,
+  FormProps,
+} from '../form/form';
+import type { FormListProps } from '../form/list';
+import type { ColProps, GridProps, RowProps } from '../grid/grid';
+import type { ImagePreviewGroupProps, ImagePreviewProps, ImageProps } from '../image/image';
+import type { InfiniteScrollProps } from '../infinitescroll/infinitescroll';
+import type { InputGroupProps, InputSearchProps } from '../input/group';
+import type { InputProps } from '../input/input';
+import type { InputMaskProps } from '../inputmask/inputmask';
+import type { InputNumberProps } from '../inputnumber/inputnumber';
+import type { InputOTPProps } from '../inputotp/inputotp';
+import type { LayoutProps, LayoutSiderProps } from '../layout/layout';
+import type { LoadingProps } from '../loading/loading';
+import type { LoadingBarProps } from '../loadingbar/loadingbar';
+import type { MasonryProps } from '../masonry/masonry';
+import type { MentionsProps } from '../mentions/mentions';
+import type { MenuProps } from '../menu/menu';
+import type { MessageOptions, MessageProps } from '../message/message';
+import type { ModalProps } from '../modal/modal';
+import type { NotificationOptions, NotificationProps } from '../notification/notification';
+import type { PaginationProps } from '../pagination/pagination';
+import type { PopconfirmProps } from '../popconfirm/popconfirm';
+import type { PopoverProps } from '../popover/popover';
+import type { ProgressProps } from '../progress/progress';
+import type { QRCodeProps } from '../qrcode/qrcode';
+import type { RadioGroupProps, RadioProps } from '../radio/radio';
+import type { RateProps } from '../rate/rate';
+import type { ResultProps } from '../result/result';
+import type { ScrollAreaProps } from '../scrollarea/scrollarea';
+import type { ScrollbarProps } from '../scrollbar/scrollbar';
+import type { SegmentedProps } from '../segmented/segmented';
+import type { SelectProps } from '../select/select';
+import type { SkeletonProps } from '../skeleton/skeleton';
+import type { SliderProps } from '../slider/slider';
+import type { SpaceProps } from '../space/space';
+import type { SplitterProps } from '../splitter/splitter';
+import type { CountdownProps, StatisticProps } from '../statistic/statistic';
+import type { StepsProps } from '../steps/steps';
+import type { SwitchProps } from '../switch/switch';
+import type {
+  TableCellProps,
+  TableColumnHeaderProps,
+  TableErrorProps,
+  TableProps,
+  TableRowProps,
+  TableStateProps,
+} from '../table/table';
+import type {
+  DataTableColumnVisibilityProps,
+  DataTableContentProps,
+  DataTablePaginationProps,
+  DataTablePresentationProps,
+  DataTableSearchProps,
+} from '../tabletanstack/defaults';
+import type { TabsProps } from '../tabs/tabs';
+import type { CheckableTagProps, TagGroupProps } from '../tag/group';
+import type { TagProps } from '../tag/tag';
+import type { TextareaProps } from '../textarea/textarea';
+import type { TimelineProps } from '../timeline/timeline';
+import type { TimePickerProps } from '../timepicker/timepicker';
+import type { TimeRangePickerProps } from '../timerangepicker/timerangepicker';
+import type { TooltipProps } from '../tooltip/tooltip';
+import type { TourProps } from '../tour/tour';
+import type { TransferProps } from '../transfer/transfer';
+import type { TreeProps } from '../tree/tree';
+import type { TreeSelectProps } from '../treeselect/treeselect';
+import type {
+  LinkProps,
+  ParagraphProps,
+  TextProps,
+  TitleProps,
+  TypographyProps,
+} from '../typography/typography';
+import type { UploadProps } from '../upload/upload';
+import type { VirtualListProps } from '../virtuallist/virtuallist';
+
+/** Only props independent of the caller's item type can cross a generic component boundary. */
+type GenericComponentName = 'FormList' | 'VirtualList' | 'DataTable';
+
+/** Full public props keep each hook key tied to its component, including Select's union. */
+interface ComponentPropsMap {
+  Affix: AffixProps;
+  Alert: AlertProps;
+  Anchor: AnchorProps;
+  AppBar: AppBarProps;
+  AutoComplete: AutoCompleteProps;
+  Avatar: AvatarProps;
+  AvatarGroup: AvatarGroupProps;
+  BackTop: BackTopProps;
+  Badge: BadgeProps;
+  BottomNavigation: BottomNavigationProps;
+  Breadcrumb: BreadcrumbProps;
+  Button: ButtonProps;
+  ButtonGroup: ButtonGroupProps;
+  Calendar: CalendarProps;
+  Card: CardProps;
+  Carousel: CarouselProps;
+  Cascader: CascaderProps;
+  CheckableTag: CheckableTagProps;
+  Checkbox: CheckboxProps;
+  CheckboxGroup: CheckboxGroupProps;
+  Col: ColProps;
+  Collapse: CollapseProps;
+  ColorPicker: ColorPickerProps;
+  CommandPalette: CommandPaletteProps;
+  Confirm: ConfirmOptions;
+  Countdown: CountdownProps;
+  DataTableColumnVisibility: DataTableColumnVisibilityProps;
+  DataTableContent: DataTableContentProps;
+  DataTableFooter: HTMLAttributes<HTMLDivElement>;
+  DataTablePagination: DataTablePaginationProps;
+  DataTableSearch: DataTableSearchProps;
+  DataTableToolbar: HTMLAttributes<HTMLDivElement>;
+  DatePicker: DatePickerProps;
+  DateRangePicker: DateRangePickerProps;
+  DateTimePicker: DateTimePickerProps;
+  Descriptions: DescriptionsProps;
+  Divider: DividerProps;
+  Drawer: DrawerProps;
+  Dropdown: DropdownProps;
+  Empty: EmptyProps;
+  ErrorBoundary: ErrorBoundaryProps;
+  FileList: FileListProps;
+  Flex: FlexProps;
+  FloatButton: FloatButtonProps;
+  FloatButtonGroup: FloatButtonGroupProps;
+  Form: FormProps;
+  FormErrorSummary: FormErrorSummaryProps;
+  FormField: FormFieldProps;
+  FormGroup: FormGroupProps;
+  Grid: GridProps;
+  Image: ImageProps;
+  ImagePreview: ImagePreviewProps;
+  ImagePreviewGroup: ImagePreviewGroupProps;
+  InfiniteScroll: InfiniteScrollProps;
+  Input: InputProps;
+  InputGroup: InputGroupProps;
+  InputMask: InputMaskProps;
+  InputNumber: InputNumberProps;
+  InputOTP: InputOTPProps;
+  InputSearch: InputSearchProps;
+  Layout: LayoutProps;
+  LayoutContent: HTMLAttributes<HTMLElement>;
+  LayoutFooter: HTMLAttributes<HTMLElement>;
+  LayoutHeader: HTMLAttributes<HTMLElement>;
+  LayoutSider: LayoutSiderProps;
+  Link: LinkProps;
+  Loading: LoadingProps;
+  LoadingBar: LoadingBarProps;
+  Masonry: MasonryProps;
+  Mentions: MentionsProps;
+  Menu: MenuProps;
+  Message: MessageProps;
+  Modal: ModalProps;
+  Notification: NotificationProps;
+  Pagination: PaginationProps;
+  Paragraph: ParagraphProps;
+  Popconfirm: PopconfirmProps;
+  Popover: PopoverProps;
+  Progress: ProgressProps;
+  QRCode: QRCodeProps;
+  Radio: RadioProps;
+  RadioGroup: RadioGroupProps;
+  Rate: RateProps;
+  Result: ResultProps;
+  Row: RowProps;
+  ScrollArea: ScrollAreaProps;
+  Scrollbar: ScrollbarProps;
+  Segmented: SegmentedProps;
+  Select: SelectProps;
+  Skeleton: SkeletonProps;
+  Slider: SliderProps;
+  Space: SpaceProps;
+  SplitButton: SplitButtonProps;
+  Splitter: SplitterProps;
+  Statistic: StatisticProps;
+  Steps: StepsProps;
+  Switch: SwitchProps;
+  Table: TableProps;
+  TableBody: HTMLAttributes<HTMLTableSectionElement>;
+  TableCaption: HTMLAttributes<HTMLTableCaptionElement>;
+  TableCell: TableCellProps;
+  TableColumnHeader: TableColumnHeaderProps;
+  TableEmpty: TableStateProps;
+  TableError: TableErrorProps;
+  TableFooter: HTMLAttributes<HTMLTableSectionElement>;
+  TableHeader: HTMLAttributes<HTMLTableSectionElement>;
+  TableLoading: TableStateProps;
+  TableRow: TableRowProps;
+  Tabs: TabsProps;
+  Tag: TagProps;
+  TagGroup: TagGroupProps;
+  Text: TextProps;
+  Textarea: TextareaProps;
+  Timeline: TimelineProps;
+  TimePicker: TimePickerProps;
+  TimeRangePicker: TimeRangePickerProps;
+  Title: TitleProps;
+  Toolbar: ToolbarProps;
+  Tooltip: TooltipProps;
+  Tour: TourProps;
+  Transfer: TransferProps;
+  Tree: TreeProps;
+  TreeSelect: TreeSelectProps;
+  Typography: TypographyProps;
+  Upload: UploadProps;
+}
+
+/** Default props for supported components; null clears that component's inherited defaults. */
+export interface LeafComponentDefaults {
+  Affix?: Partial<Omit<AffixProps, 'key' | 'ref'>> | null;
+  Alert?: Partial<Omit<AlertProps, 'key' | 'ref' | 'title'>> | null;
+  Anchor?: Partial<Omit<AnchorProps, 'key' | 'ref' | 'items'>> | null;
+  AppBar?: Partial<Omit<AppBarProps, 'key' | 'ref'>> | null;
+  AutoComplete?: Partial<Omit<AutoCompleteProps, 'key' | 'ref' | 'options'>> | null;
+  Avatar?: Partial<Omit<AvatarProps, 'key' | 'ref'>> | null;
+  AvatarGroup?: Partial<Omit<AvatarGroupProps, 'key' | 'ref'>> | null;
+  BackTop?: Partial<Omit<BackTopProps, 'key' | 'ref'>> | null;
+  Badge?: Partial<Omit<BadgeProps, 'key' | 'ref'>> | null;
+  BottomNavigation?: Partial<Omit<BottomNavigationProps, 'key' | 'ref' | 'items'>> | null;
+  Breadcrumb?: Partial<Omit<BreadcrumbProps, 'key' | 'ref' | 'items'>> | null;
+  Button?: Partial<Omit<ButtonProps, 'key' | 'ref'>> | null;
+  ButtonGroup?: Partial<Omit<ButtonGroupProps, 'key' | 'ref'>> | null;
+  Calendar?: Partial<Omit<CalendarProps, 'key' | 'ref'>> | null;
+  Card?: Partial<Omit<CardProps, 'key' | 'ref'>> | null;
+  Carousel?: Partial<Omit<CarouselProps, 'key' | 'ref'>> | null;
+  Cascader?: Partial<
+    Omit<
+      CascaderProps,
+      'key' | 'ref' | 'options' | 'multiple' | 'value' | 'defaultValue' | 'onChange'
+    >
+  > | null;
+  CheckableTag?: Partial<Omit<CheckableTagProps, 'key' | 'ref'>> | null;
+  Checkbox?: Partial<Omit<CheckboxProps, 'key' | 'ref'>> | null;
+  CheckboxGroup?: Partial<Omit<CheckboxGroupProps, 'key' | 'ref' | 'options'>> | null;
+  Col?: Partial<Omit<ColProps, 'key' | 'ref'>> | null;
+  Collapse?: Partial<Omit<CollapseProps, 'key' | 'ref' | 'items'>> | null;
+  ColorPicker?: Partial<Omit<ColorPickerProps, 'key' | 'ref'>> | null;
+  CommandPalette?: Partial<Omit<CommandPaletteProps, 'key' | 'ref' | 'items'>> | null;
+  Confirm?: Partial<Omit<ConfirmOptions, 'key' | 'ref'>> | null;
+  Countdown?: Partial<Omit<CountdownProps, 'key' | 'ref' | 'value'>> | null;
+  DataTable?: Partial<Omit<DataTablePresentationProps, 'tableRef'>> | null;
+  DataTableColumnVisibility?: Partial<Omit<DataTableColumnVisibilityProps, 'key' | 'ref'>> | null;
+  DataTableContent?: Partial<Omit<DataTableContentProps, 'key' | 'ref'>> | null;
+  DataTableFooter?: Partial<Omit<HTMLAttributes<HTMLDivElement>, 'key' | 'ref'>> | null;
+  DataTablePagination?: Partial<Omit<DataTablePaginationProps, 'key' | 'ref'>> | null;
+  DataTableSearch?: Partial<Omit<DataTableSearchProps, 'key' | 'ref'>> | null;
+  DataTableToolbar?: Partial<Omit<HTMLAttributes<HTMLDivElement>, 'key' | 'ref'>> | null;
+  DatePicker?: Partial<
+    Omit<DatePickerProps, 'key' | 'ref' | 'multiple' | 'value' | 'defaultValue' | 'onChange'>
+  > | null;
+  DateRangePicker?: Partial<Omit<DateRangePickerProps, 'key' | 'ref'>> | null;
+  DateTimePicker?: Partial<Omit<DateTimePickerProps, 'key' | 'ref'>> | null;
+  Descriptions?: Partial<Omit<DescriptionsProps, 'key' | 'ref' | 'items'>> | null;
+  Divider?: Partial<Omit<DividerProps, 'key' | 'ref'>> | null;
+  Drawer?: Partial<Omit<DrawerProps, 'key' | 'ref' | 'open'>> | null;
+  Dropdown?: Partial<Omit<DropdownProps, 'key' | 'ref' | 'items' | 'children'>> | null;
+  Empty?: Partial<Omit<EmptyProps, 'key' | 'ref'>> | null;
+  ErrorBoundary?: Partial<Omit<ErrorBoundaryProps, 'key' | 'ref'>> | null;
+  FileList?: Partial<Omit<FileListProps, 'key' | 'ref' | 'items'>> | null;
+  Flex?: Partial<Omit<FlexProps, 'key' | 'ref'>> | null;
+  FloatButton?: Partial<Omit<FloatButtonProps, 'key' | 'ref'>> | null;
+  FloatButtonGroup?: Partial<Omit<FloatButtonGroupProps, 'key' | 'ref' | 'actions'>> | null;
+  Form?: Partial<Omit<FormProps, 'key' | 'ref'>> | null;
+  FormErrorSummary?: Partial<Omit<FormErrorSummaryProps, 'key' | 'ref'>> | null;
+  FormField?: Partial<Omit<FormFieldProps, 'key' | 'ref'>> | null;
+  FormGroup?: Partial<Omit<FormGroupProps, 'key' | 'ref'>> | null;
+  FormList?: Partial<
+    Omit<
+      FormListProps<unknown>,
+      'name' | 'children' | 'value' | 'defaultValue' | 'onChange' | 'itemKey'
+    >
+  > | null;
+  Grid?: Partial<Omit<GridProps, 'key' | 'ref'>> | null;
+  Image?: Partial<Omit<ImageProps, 'key' | 'ref'>> | null;
+  ImagePreview?: Partial<
+    Omit<ImagePreviewProps, 'key' | 'ref' | 'items' | 'open' | 'onClose'>
+  > | null;
+  ImagePreviewGroup?: Partial<Omit<ImagePreviewGroupProps, 'key' | 'ref'>> | null;
+  InfiniteScroll?: Partial<
+    Omit<InfiniteScrollProps, 'key' | 'ref' | 'dataLength' | 'hasMore' | 'onLoadMore'>
+  > | null;
+  Input?: Partial<Omit<InputProps, 'key' | 'ref'>> | null;
+  InputGroup?: Partial<Omit<InputGroupProps, 'key' | 'ref'>> | null;
+  InputMask?: Partial<Omit<InputMaskProps, 'key' | 'ref' | 'mask'>> | null;
+  InputNumber?: Partial<
+    Omit<
+      InputNumberProps,
+      'key' | 'ref' | 'stringMode' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'
+    >
+  > | null;
+  InputOTP?: Partial<Omit<InputOTPProps, 'key' | 'ref'>> | null;
+  InputSearch?: Partial<Omit<InputSearchProps, 'key' | 'ref'>> | null;
+  Layout?: Partial<Omit<LayoutProps, 'key' | 'ref'>> | null;
+  LayoutContent?: Partial<Omit<HTMLAttributes<HTMLElement>, 'key' | 'ref'>> | null;
+  LayoutFooter?: Partial<Omit<HTMLAttributes<HTMLElement>, 'key' | 'ref'>> | null;
+  LayoutHeader?: Partial<Omit<HTMLAttributes<HTMLElement>, 'key' | 'ref'>> | null;
+  LayoutSider?: Partial<Omit<LayoutSiderProps, 'key' | 'ref'>> | null;
+  Link?: Partial<Omit<LinkProps, 'key' | 'ref'>> | null;
+  Loading?: Partial<Omit<LoadingProps, 'key' | 'ref'>> | null;
+  LoadingBar?: Partial<Omit<LoadingBarProps, 'key' | 'ref' | 'active' | 'progress'>> | null;
+  Masonry?: Partial<Omit<MasonryProps, 'key' | 'ref'>> | null;
+  Mentions?: Partial<Omit<MentionsProps, 'key' | 'ref' | 'options'>> | null;
+  Menu?: Partial<Omit<MenuProps, 'key' | 'ref' | 'items'>> | null;
+  Message?: Partial<Omit<MessageOptions, 'key' | 'content'>> | null;
+  Modal?: Partial<Omit<ModalProps, 'key' | 'ref' | 'open'>> | null;
+  Notification?: Partial<Omit<NotificationOptions, 'key' | 'title'>> | null;
+  Pagination?: Partial<Omit<PaginationProps, 'key' | 'ref' | 'total'>> | null;
+  Paragraph?: Partial<Omit<ParagraphProps, 'key' | 'ref'>> | null;
+  Popconfirm?: Partial<Omit<PopconfirmProps, 'key' | 'ref' | 'children' | 'title'>> | null;
+  Popover?: Partial<Omit<PopoverProps, 'key' | 'ref' | 'children' | 'content'>> | null;
+  Progress?: Partial<Omit<ProgressProps, 'key' | 'ref'>> | null;
+  QRCode?: Partial<Omit<QRCodeProps, 'key' | 'ref' | 'value'>> | null;
+  Radio?: Partial<Omit<RadioProps, 'key' | 'ref'>> | null;
+  RadioGroup?: Partial<Omit<RadioGroupProps, 'key' | 'ref' | 'options'>> | null;
+  Rate?: Partial<Omit<RateProps, 'key' | 'ref'>> | null;
+  Result?: Partial<Omit<ResultProps, 'key' | 'ref'>> | null;
+  Row?: Partial<Omit<RowProps, 'key' | 'ref'>> | null;
+  ScrollArea?: Partial<Omit<ScrollAreaProps, 'key' | 'ref'>> | null;
+  Scrollbar?: Partial<Omit<ScrollbarProps, 'key' | 'ref'>> | null;
+  Segmented?: Partial<Omit<SegmentedProps, 'key' | 'ref' | 'options'>> | null;
+  /** Required data, mode-dependent values and callbacks belong on each Select. */
+  Select?: Partial<
+    Omit<
+      SelectProps,
+      'key' | 'ref' | 'options' | 'multiple' | 'value' | 'defaultValue' | 'onChange'
+    >
+  > | null;
+  Skeleton?: Partial<Omit<SkeletonProps, 'key' | 'ref'>> | null;
+  Slider?: Partial<
+    Omit<SliderProps, 'key' | 'ref' | 'range' | 'value' | 'defaultValue' | 'onChange'>
+  > | null;
+  Space?: Partial<Omit<SpaceProps, 'key' | 'ref'>> | null;
+  SplitButton?: Partial<Omit<SplitButtonProps, 'key' | 'ref' | 'items'>> | null;
+  Splitter?: Partial<Omit<SplitterProps, 'key' | 'ref' | 'panels'>> | null;
+  Statistic?: Partial<Omit<StatisticProps, 'key' | 'ref' | 'value'>> | null;
+  Steps?: Partial<Omit<StepsProps, 'key' | 'ref' | 'items'>> | null;
+  Switch?: Partial<Omit<SwitchProps, 'key' | 'ref'>> | null;
+  Table?: Partial<Omit<TableProps, 'key' | 'ref' | 'scrollRef'>> | null;
+  TableBody?: Partial<Omit<HTMLAttributes<HTMLTableSectionElement>, 'key' | 'ref'>> | null;
+  TableCaption?: Partial<Omit<HTMLAttributes<HTMLTableCaptionElement>, 'key' | 'ref'>> | null;
+  TableCell?: Partial<Omit<TableCellProps, 'key' | 'ref'>> | null;
+  TableColumnHeader?: Partial<Omit<TableColumnHeaderProps, 'key' | 'ref'>> | null;
+  TableEmpty?: Partial<Omit<TableStateProps, 'key' | 'ref'>> | null;
+  TableError?: Partial<Omit<TableErrorProps, 'key' | 'ref'>> | null;
+  TableFooter?: Partial<Omit<HTMLAttributes<HTMLTableSectionElement>, 'key' | 'ref'>> | null;
+  TableHeader?: Partial<Omit<HTMLAttributes<HTMLTableSectionElement>, 'key' | 'ref'>> | null;
+  TableLoading?: Partial<Omit<TableStateProps, 'key' | 'ref'>> | null;
+  TableRow?: Partial<Omit<TableRowProps, 'key' | 'ref'>> | null;
+  Tabs?: Partial<Omit<TabsProps, 'key' | 'ref' | 'items'>> | null;
+  Tag?: Partial<Omit<TagProps, 'key' | 'ref'>> | null;
+  TagGroup?: Partial<Omit<TagGroupProps, 'key' | 'ref' | 'options'>> | null;
+  Text?: Partial<Omit<TextProps, 'key' | 'ref'>> | null;
+  Textarea?: Partial<Omit<TextareaProps, 'key' | 'ref'>> | null;
+  Timeline?: Partial<Omit<TimelineProps, 'key' | 'ref' | 'items'>> | null;
+  TimePicker?: Partial<Omit<TimePickerProps, 'key' | 'ref'>> | null;
+  TimeRangePicker?: Partial<Omit<TimeRangePickerProps, 'key' | 'ref'>> | null;
+  Title?: Partial<Omit<TitleProps, 'key' | 'ref'>> | null;
+  Toolbar?: Partial<Omit<ToolbarProps, 'key' | 'ref'>> | null;
+  Tooltip?: Partial<Omit<TooltipProps, 'key' | 'ref' | 'content' | 'children'>> | null;
+  Tour?: Partial<Omit<TourProps, 'key' | 'ref' | 'open' | 'steps'>> | null;
+  Transfer?: Partial<Omit<TransferProps, 'key' | 'ref' | 'items'>> | null;
+  Tree?: Partial<Omit<TreeProps, 'key' | 'ref' | 'data'>> | null;
+  TreeSelect?: Partial<
+    Omit<
+      TreeSelectProps,
+      | 'key'
+      | 'ref'
+      | 'options'
+      | 'multiple'
+      | 'treeCheckable'
+      | 'value'
+      | 'defaultValue'
+      | 'onChange'
+    >
+  > | null;
+  Typography?: Partial<Omit<TypographyProps, 'key' | 'ref'>> | null;
+  Upload?: Partial<Omit<UploadProps, 'key' | 'ref'>> | null;
+  VirtualList?:
+    | (Partial<
+        Omit<VirtualListProps<unknown>, 'items' | 'itemKey' | 'renderItem' | 'estimateSize'>
+      > & { estimateSize?: number })
+    | null;
+}
+
+export const ComponentDefaultsContext = createContext<LeafComponentDefaults>({});
+
+/** Supplement missing props without copying unless a defined default is used. */
+export function mergeComponentProps<Props extends object>(
+  defaults: Partial<Props> | null | undefined,
+  props: Props,
+): Props {
+  if (!defaults) return props;
+  let resolved = props;
+  for (const key of Object.keys(defaults) as (keyof Props)[]) {
+    const value = defaults[key];
+    if (value !== undefined && props[key] === undefined) {
+      if (resolved === props) resolved = { ...props };
+      resolved[key] = value as Props[typeof key];
+    }
+  }
+  return resolved;
+}
+
+/** Merge scopes by component and prop; nested prop values are replaced as a whole. */
+export function mergeComponentDefaults(
+  parent: LeafComponentDefaults,
+  overrides: LeafComponentDefaults | undefined,
+): LeafComponentDefaults {
+  if (!overrides) return parent;
+  let merged = parent;
+  for (const name of Object.keys(overrides) as (keyof LeafComponentDefaults)[]) {
+    const incoming = overrides[name];
+    if (incoming === undefined) continue;
+    const inherited = parent[name] ?? undefined;
+    if (incoming === null) {
+      if (inherited == null) continue;
+      if (merged === parent) merged = { ...parent };
+      delete merged[name];
+      continue;
+    }
+    let entry = inherited;
+    for (const key of Object.keys(incoming)) {
+      const value = (incoming as Record<string, unknown>)[key];
+      if (
+        value === undefined ||
+        value === (inherited as Record<string, unknown> | undefined)?.[key]
+      )
+        continue;
+      if (entry === inherited) entry = { ...inherited };
+      (entry as Record<string, unknown>)[key] = value;
+    }
+    if (entry !== inherited) {
+      if (merged === parent) merged = { ...parent };
+      // Each entry remains the same component's props; only the dynamic key loses that relation.
+      (merged as Record<string, object | undefined>)[name] = entry;
+    }
+  }
+  return merged;
+}
+
+export function useComponentProps<Name extends keyof ComponentPropsMap>(
+  name: Name,
+  props: ComponentPropsMap[Name],
+): ComponentPropsMap[Name] {
+  const defaults = useContext(ComponentDefaultsContext)[name];
+  return mergeComponentProps(
+    defaults as Partial<ComponentPropsMap[Name]> | null | undefined,
+    props,
+  );
+}
+
+/** Generic owners merge this type-independent projection into their own complete props. */
+export function useGenericComponentDefaults<Name extends GenericComponentName>(name: Name) {
+  return useContext(ComponentDefaultsContext)[name];
+}
+
+/** Read defaults for an API request without invoking hooks from the request callback. */
+export function useComponentDefaults<Name extends keyof LeafComponentDefaults>(name: Name) {
+  return useContext(ComponentDefaultsContext)[name];
+}
diff --git a/packages/react/src/config-provider/config-context.ts b/packages/react/src/config-provider/config-context.ts
new file mode 100644
index 0000000..b3b7387
--- /dev/null
+++ b/packages/react/src/config-provider/config-context.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import type { LeafConfig } from './context';
+
+/** Kept free of language data so motion-only controls do not load translation resources. */
+export const ConfigContext = createContext<LeafConfig | undefined>(undefined);
diff --git a/packages/react/src/config-provider/config-provider.test.tsx b/packages/react/src/config-provider/config-provider.test.tsx
index 87fa9dd..c83ffcd 100644
--- a/packages/react/src/config-provider/config-provider.test.tsx
+++ b/packages/react/src/config-provider/config-provider.test.tsx
@@ -2,11 +2,61 @@ import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { hydrateRoot } from 'react-dom/client';
 import { renderToString } from 'react-dom/server';
-import { describe, expect, it, vi } from 'vitest';
-import { Button, Drawer, Input, Modal, Select, TimePicker } from '../index';
-import { ConfigProvider, useLeafConfig } from './config-provider';
+import { describe, expect, expectTypeOf, it, vi } from 'vitest';
+import { Button, DatePicker, Drawer, Input, Modal, Pagination, Select, TimePicker } from '../index';
+import { useText } from '../shared/use-text';
+import { ConfigProvider, type ConfigProviderProps, useLeafConfig } from './config-provider';
 
 describe('ConfigProvider', () => {
+  it('exposes language selection and component defaults without dictionary override props', () => {
+    expectTypeOf<ConfigProviderProps>().not.toHaveProperty('messages');
+    expectTypeOf<ConfigProviderProps>().not.toHaveProperty('textMessages');
+  });
+  it.each([
+    ['zh-CN', '请选择日期', '预览'],
+    ['zh-TW', '請選擇日期', '預覽'],
+    ['en-US', 'Select a date', 'Preview'],
+    ['ja-JP', '日付を選択', 'プレビュー'],
+    ['ko-KR', '날짜 선택', '미리 보기'],
+    ['fr-FR', 'Select a date', 'Preview'],
+    ['zh-HK', 'Select a date', 'Preview'],
+  ])(
+    'inherits built-in and extended text for %s while isolating nested languages',
+    (locale, placeholder, preview) => {
+      function PreviewLabel() {
+        const text = useText();
+        return <output>{text('common.preview')}</output>;
+      }
+      render(
+        <ConfigProvider locale={locale}>
+          <ConfigProvider>
+            <DatePicker aria-label="Inherited date" />
+            <PreviewLabel />
+          </ConfigProvider>
+          <ConfigProvider
+            locale="en-US"
+            components={{ DatePicker: { placeholder: 'Project date' } }}
+          >
+            <DatePicker aria-label="Configured date" />
+            <DatePicker aria-label="Overridden date" placeholder="Instance date" />
+          </ConfigProvider>
+        </ConfigProvider>,
+      );
+      expect(screen.getByRole('combobox', { name: 'Inherited date' })).toHaveAttribute(
+        'placeholder',
+        placeholder,
+      );
+      expect(screen.getByRole('status')).toHaveTextContent(preview);
+      expect(screen.getByRole('combobox', { name: 'Configured date' })).toHaveAttribute(
+        'placeholder',
+        'Project date',
+      );
+      expect(screen.getByRole('combobox', { name: 'Overridden date' })).toHaveAttribute(
+        'placeholder',
+        'Instance date',
+      );
+    },
+  );
   it('inherits density, permits nested resets and keeps explicit theme sizes', () => {
     function Value() {
       return <output>{useLeafConfig().density}</output>;
@@ -20,6 +70,9 @@ describe('ConfigProvider', () => {
       </ConfigProvider>,
     );
     expect(screen.getByTestId('compact')).toHaveAttribute('data-leaf-density', 'compact');
+    expect(screen.getByTestId('compact').style.getPropertyValue('--leaf-control-height')).toBe(
+      '30px',
+    );
     expect(screen.getByTestId('compact').style.getPropertyValue('--leaf-density-form-gap')).toBe(
       '16px',
     );
@@ -35,7 +88,7 @@ describe('ConfigProvider', () => {
       </ConfigProvider>,
     );
     expect(screen.getByTestId('compact').style.getPropertyValue('--leaf-control-height')).toBe(
-      '40px',
+      '36px',
     );
     expect(screen.getByText('comfortable')).toBeInTheDocument();
   });
@@ -219,4 +272,79 @@ describe('ConfigProvider', () => {
     expect(screen.getByRole('combobox')).toHaveValue('');
     expect(screen.getByRole('combobox')).toHaveAttribute('placeholder', '请选择时间');
   });
+  it('switches built-in Japanese and Korean in open portals without resetting values', async () => {
+    function View({ locale }: { locale: string }) {
+      return (
+        <ConfigProvider locale={locale}>
+          <Select aria-label="Choice" options={[]} />
+          <DatePicker aria-label="Date" defaultValue={new Date(2026, 9, 16)} />
+          <TimePicker aria-label="Time" use12Hours defaultValue="14:30" />
+          <Pagination total={24} showTotal />
+        </ConfigProvider>
+      );
+    }
+    const { rerender } = render(<View locale="ja-JP" />);
+    const choice = screen.getByRole('combobox', { name: 'Choice' });
+    const date = screen.getByRole('combobox', { name: 'Date' });
+    const time = screen.getByRole('combobox', { name: 'Time' });
+    expect(time).toHaveValue('02:30 午後');
+    expect(screen.getByText('全 24 件')).toBeInTheDocument();
+    await userEvent.click(choice);
+    expect(screen.getByText('選択肢がありません').closest('[lang]')).toHaveAttribute(
+      'lang',
+      'ja-JP',
+    );
+
+    rerender(<View locale="ko-KR" />);
+    expect(screen.getByRole('combobox', { name: 'Choice' })).toBe(choice);
+    expect(choice).toHaveAttribute('placeholder', '선택해 주세요');
+    expect(screen.getByText('선택 항목 없음').closest('[lang]')).toHaveAttribute('lang', 'ko-KR');
+    expect(date).toHaveValue('2026-10-16');
+    expect(time).toHaveValue('02:30 오후');
+    expect(screen.getByText('총 24개')).toBeInTheDocument();
+    await userEvent.keyboard('{Escape}');
+    await userEvent.click(date);
+    expect(screen.getByRole('button', { name: '오늘' })).toBeInTheDocument();
+    await userEvent.keyboard('{Escape}');
+    await userEvent.clear(time);
+    await userEvent.type(time, '3:45 오후{Enter}');
+    expect(time).toHaveValue('03:45 오후');
+
+    rerender(<View locale="ja-JP" />);
+    expect(time).toHaveValue('03:45 午後');
+    await userEvent.clear(time);
+    await userEvent.type(time, '午前 9:15{Enter}');
+    expect(time).toHaveValue('09:15 午前');
+  });
+  it.each([
+    ['ja-JP', '日付を選択', '全 24 件'],
+    ['ko-KR', '날짜 선택', '총 24개'],
+  ])(
+    'renders and hydrates built-in %s without custom resources',
+    async (locale, placeholder, total) => {
+      const app = (
+        <ConfigProvider locale={locale}>
+          <DatePicker aria-label="Date" />
+          <Pagination total={24} showTotal />
+        </ConfigProvider>
+      );
+      const container = document.createElement('div');
+      container.innerHTML = renderToString(app);
+      document.body.append(container);
+      const serverInput = container.querySelector('input[role="combobox"]');
+      expect(serverInput).toHaveAttribute('placeholder', placeholder);
+      expect(container.textContent).toContain(total);
+      const onError = vi.fn();
+      const root = hydrateRoot(container, app, { onRecoverableError: onError });
+      try {
+        await act(async () => {});
+        expect(onError).not.toHaveBeenCalled();
+        expect(container.querySelector('input[role="combobox"]')).toBe(serverInput);
+        expect(container.firstElementChild).toHaveAttribute('lang', locale);
+      } finally {
+        await act(async () => root.unmount());
+        container.remove();
+      }
+    },
+  );
 });
diff --git a/packages/react/src/config-provider/config-provider.tsx b/packages/react/src/config-provider/config-provider.tsx
index b41fd36..d05b460 100644
--- a/packages/react/src/config-provider/config-provider.tsx
+++ b/packages/react/src/config-provider/config-provider.tsx
@@ -1,30 +1,33 @@
-import { type HTMLAttributes, useMemo, useRef } from 'react';
+import { type HTMLAttributes, useContext, useMemo, useRef } from 'react';
 import { ConfirmScope } from '../confirm/provider';
 import { type LeafDensity, leafDensityVariables } from '../density';
 import { LoadingBarScope } from '../loadingbar/loadingbar';
+import { localeChain, mergeTranslations, resolveTranslations } from '../locales/resolve';
+import type { LeafTranslations } from '../locales/types';
 import { MessageScope } from '../message/provider';
 import { NotificationScope } from '../notification/notification';
 import { type LeafTheme, leafThemeVariables, mergeLeafTheme } from '../theme';
 import {
-  ConfigContext,
-  type LeafDirection,
-  type LeafLocale,
-  type LeafMessages,
-  localeMessages,
-  useLeafConfig,
-} from './context';
+  ComponentDefaultsContext,
+  type LeafComponentDefaults,
+  mergeComponentDefaults,
+} from './component-defaults';
+import { ConfigContext, type LeafDirection, type LeafLocale, useLeafConfig } from './context';
 import { useColorVariables } from './use-color-variables';
 
 export type { LeafDensity } from '../density';
+export type { LeafTranslation, LeafTranslations } from '../locales/types';
 export type { LeafTheme, LeafThemeTokens } from '../theme';
-export type { LeafDirection, LeafLocale, LeafMessages } from './context';
+export type { LeafComponentDefaults } from './component-defaults';
+export type { LeafDirection, LeafLocale } from './context';
 export { useLeafConfig } from './context';
 
 export interface ConfigProviderProps extends HTMLAttributes<HTMLDivElement> {
-  locale?: LeafLocale;
+  /** Current language followed by per-entry fallbacks. The first tag controls Intl and lang. */
+  locale?: LeafLocale | readonly LeafLocale[];
+  /** JSON translation resources; inner providers merge languages and individual entries. */
+  translations?: LeafTranslations;
   theme?: LeafTheme;
-  messages?: Partial<LeafMessages>;
-  textMessages?: Record<string, string>;
   direction?: LeafDirection;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   getPopupContainer?: () => Element | DocumentFragment;
@@ -32,34 +35,60 @@ export interface ConfigProviderProps extends HTMLAttributes<HTMLDivElement> {
   maskBlur?: boolean;
   /** Inherited spacing preset; explicit theme and component sizes take precedence. */
   density?: LeafDensity;
+  /** Scoped defaults; instance props take precedence and null entries clear inherited defaults. */
+  components?: LeafComponentDefaults;
 }
 
 /** Nested scopes inherit unspecified theme and language settings. */
 export function ConfigProvider({
   locale,
+  translations,
   theme,
-  messages,
-  textMessages,
   direction,
   weekStartsOn,
   getPopupContainer,
   maskBlur,
   density,
+  components,
   style,
   children,
   ...props
 }: ConfigProviderProps) {
   const parent = useLeafConfig();
+  const parentComponents = useContext(ComponentDefaultsContext);
+  const mergedComponents = useMemo(
+    () => mergeComponentDefaults(parentComponents, components),
+    [parentComponents, components],
+  );
+  const languages = useMemo(
+    () => (locale === undefined ? parent.localeChain : localeChain(locale)),
+    [locale, parent.localeChain],
+  );
+  const resources = useMemo(
+    () => mergeTranslations(parent.translations, translations),
+    [parent.translations, translations],
+  );
+  const text = useMemo(
+    () =>
+      languages === parent.localeChain && resources === parent.translations
+        ? { messages: parent.messages, messageLocales: parent.messageLocales }
+        : resolveTranslations(languages, resources),
+    [
+      languages,
+      resources,
+      parent.localeChain,
+      parent.translations,
+      parent.messages,
+      parent.messageLocales,
+    ],
+  );
   const merged = useMemo(() => {
-    const language = locale ?? parent.locale;
     return {
-      locale: language,
+      locale: languages[0] as LeafLocale,
+      localeChain: languages,
+      translations: resources,
+      ...text,
       theme: mergeLeafTheme(parent.theme, theme),
-      messages: {
-        ...(locale ? (localeMessages[language] ?? localeMessages['en-US']) : parent.messages),
-        ...messages,
-      } as LeafMessages,
-      textMessages: { ...parent.textMessages, ...textMessages },
       direction: direction ?? parent.direction,
       weekStartsOn: weekStartsOn ?? parent.weekStartsOn,
       getPopupContainer: getPopupContainer ?? parent.getPopupContainer,
@@ -68,10 +97,10 @@ export function ConfigProvider({
     };
   }, [
     parent,
-    locale,
+    languages,
+    resources,
+    text,
     theme,
-    messages,
-    textMessages,
     direction,
     weekStartsOn,
     getPopupContainer,
@@ -96,13 +125,15 @@ export function ConfigProvider({
         data-leaf-theme={merged.theme.appearance}
         style={{ ...leafDensityVariables(merged.density), ...variables, ...resolved, ...style }}
       >
-        <MessageScope>
-          <ConfirmScope>
-            <NotificationScope>
-              <LoadingBarScope>{children}</LoadingBarScope>
-            </NotificationScope>
-          </ConfirmScope>
-        </MessageScope>
+        <ComponentDefaultsContext.Provider value={mergedComponents}>
+          <MessageScope>
+            <ConfirmScope>
+              <NotificationScope>
+                <LoadingBarScope>{children}</LoadingBarScope>
+              </NotificationScope>
+            </ConfirmScope>
+          </MessageScope>
+        </ComponentDefaultsContext.Provider>
       </div>
     </ConfigContext.Provider>
   );
diff --git a/packages/react/src/config-provider/context.ts b/packages/react/src/config-provider/context.ts
index 06a0b89..783792a 100644
--- a/packages/react/src/config-provider/context.ts
+++ b/packages/react/src/config-provider/context.ts
@@ -1,207 +1,30 @@
-import { createContext, useContext } from 'react';
+import { useContext } from 'react';
 import type { LeafDensity } from '../density';
-import { traditionalMessages } from '../locales/zh-tw';
+import type { LeafTranslations, LocaleMessages, TranslationKey } from '../locales/types';
+import zhCN from '../locales/zh-CN.json';
 import type { LeafTheme } from '../theme';
+import { ConfigContext } from './config-context';
 
-export type LeafLocale = 'zh-CN' | 'zh-TW' | 'en-US' | (string & {});
+export { ConfigContext } from './config-context';
+
+export type LeafLocale = 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | (string & {});
 export type LeafDirection = 'ltr' | 'rtl';
 
-const zh = {
-  select: '请选择',
-  empty: '暂无选项',
-  noMatches: '没有匹配建议，可继续输入',
-  clearSelection: '清除选择',
-  date: '请选择日期',
-  time: '请选择时间',
-  dateTime: '请选择日期和时间',
-  range: '请选择日期区间',
-  clearDate: '清除日期',
-  clearTime: '清除时间',
-  clearRange: '清除区间',
-  clearCascader: '清除级联选择',
-  chooseDate: '选择日期',
-  chooseTime: '选择时间',
-  previousMonth: '上个月',
-  nextMonth: '下个月',
-  previousYear: '上一年',
-  nextYear: '下一年',
-  previousYears: '上一组年份',
-  nextYears: '下一组年份',
-  hours: '小时',
-  minutes: '分钟',
-  seconds: '秒',
-  period: '时段',
-  am: '上午',
-  pm: '下午',
-  weekdays: ['一', '二', '三', '四', '五', '六', '日'],
-  confirm: '确定',
-  cancel: '取消',
-  close: '关闭',
-  start: '开始',
-  end: '结束',
-  required: '请填写此项',
-  invalid: '请检查此项内容',
-  useTime: '使用',
-  year: '年',
-  month: '月',
-  week: '周',
-  dateMode: '日期',
-  loading: '处理中',
-  today: '今天',
-  now: '当前时间',
-  selectTime: '选择时间',
-  selectDate: '选择日期',
-  remove: '移除',
-  search: '搜索选项',
-  breadcrumb: '面包屑',
-  pagination: '分页',
-  previousPage: '上一页',
-  nextPage: '下一页',
-  page: '页',
-  pageSize: '每页条数',
-  itemsPerPage: '条/页',
-  jumpTo: '跳至',
-  showPassword: '显示密码',
-  hidePassword: '隐藏密码',
-  increase: '增加数值',
-  decrease: '减少数值',
-  invalidNumber: '请输入范围内的有效数字',
-  progress: '进度',
-  calendar: '日历',
-  clearInput: '清除输入',
-  noData: '暂无数据',
-  avatar: '头像',
-  rating: '评分',
-  resultSuccess: '操作成功',
-  resultWarning: '请留意',
-  resultError: '操作失败',
-  resultInfo: '提示信息',
-  color: '选择颜色',
-  clearColor: '清除颜色',
-  saturation: '饱和度',
-  brightness: '亮度',
-  hue: '色相',
-  alpha: '透明度',
-  colorValue: '颜色值',
-  invalidColor: '请输入有效的颜色',
-  presets: '预设颜色',
-  tree: '树',
-  expand: '展开',
-  collapseNode: '收起',
-  collapse: '折叠面板',
-  slider: '滑动输入',
-  pageBack: '向前跳 5 页',
-  pageForward: '向后跳 5 页',
-  closeTab: '关闭标签页',
-};
-const en: typeof zh = {
-  select: 'Please select',
-  empty: 'No options',
-  noMatches: 'No suggestions',
-  clearSelection: 'Clear selection',
-  date: 'Select a date',
-  time: 'Select a time',
-  dateTime: 'Select date and time',
-  range: 'Select a date range',
-  clearDate: 'Clear date',
-  clearTime: 'Clear time',
-  clearRange: 'Clear range',
-  clearCascader: 'Clear selection',
-  chooseDate: 'Choose a date',
-  chooseTime: 'Choose a time',
-  previousMonth: 'Previous month',
-  nextMonth: 'Next month',
-  previousYear: 'Previous year',
-  nextYear: 'Next year',
-  previousYears: 'Previous years',
-  nextYears: 'Next years',
-  hours: 'Hours',
-  minutes: 'Minutes',
-  seconds: 'Seconds',
-  period: 'Period',
-  am: 'AM',
-  pm: 'PM',
-  weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-  confirm: 'OK',
-  cancel: 'Cancel',
-  close: 'Close',
-  start: 'Start',
-  end: 'End',
-  required: 'Please fill out this field',
-  invalid: 'Please check this field',
-  useTime: 'Use',
-  year: 'Year',
-  month: 'Month',
-  week: 'Week',
-  dateMode: 'Date',
-  loading: 'Loading',
-  today: 'Today',
-  now: 'Now',
-  selectTime: 'Choose time',
-  selectDate: 'Choose date',
-  remove: 'Remove',
-  search: 'Search options',
-  breadcrumb: 'Breadcrumb',
-  pagination: 'Pagination',
-  previousPage: 'Previous page',
-  nextPage: 'Next page',
-  page: 'Page',
-  pageSize: 'Page size',
-  itemsPerPage: '/ page',
-  jumpTo: 'Go to',
-  showPassword: 'Show password',
-  hidePassword: 'Hide password',
-  increase: 'Increase value',
-  decrease: 'Decrease value',
-  invalidNumber: 'Enter a valid number within the allowed range',
-  progress: 'Progress',
-  calendar: 'Calendar',
-  clearInput: 'Clear input',
-  noData: 'No data',
-  avatar: 'Avatar',
-  rating: 'Rating',
-  resultSuccess: 'Success',
-  resultWarning: 'Attention needed',
-  resultError: 'Something went wrong',
-  resultInfo: 'Information',
-  color: 'Choose a color',
-  clearColor: 'Clear color',
-  saturation: 'Saturation',
-  brightness: 'Brightness',
-  hue: 'Hue',
-  alpha: 'Opacity',
-  colorValue: 'Color value',
-  invalidColor: 'Enter a valid color',
-  presets: 'Preset colors',
-  tree: 'Tree',
-  expand: 'Expand',
-  collapseNode: 'Collapse',
-  collapse: 'Collapsible panels',
-  slider: 'Slider',
-  pageBack: 'Jump back 5 pages',
-  pageForward: 'Jump forward 5 pages',
-  closeTab: 'Close tab',
-};
-export type LeafMessages = typeof zh;
-const tw: LeafMessages = traditionalMessages;
-export const localeMessages: Record<string, LeafMessages> = {
-  'zh-CN': zh,
-  'zh-TW': tw,
-  'en-US': en,
-};
 const defaultConfig = {
   locale: 'zh-CN' as LeafLocale,
+  localeChain: ['zh-CN'] as readonly LeafLocale[],
+  translations: {} as LeafTranslations,
+  // The default language is complete; only ConfigProvider needs the fallback resolver and other packs.
+  messages: zhCN as LocaleMessages,
+  messageLocales: {} as Partial<Record<TranslationKey, string>>,
   theme: {} as LeafTheme,
-  messages: zh,
   direction: 'ltr' as LeafDirection,
   weekStartsOn: 1 as 0 | 1 | 2 | 3 | 4 | 5 | 6,
-  textMessages: {} as Record<string, string>,
   maskBlur: true,
   density: 'comfortable' as LeafDensity,
   getPopupContainer: undefined as undefined | (() => Element | DocumentFragment),
 };
 export type LeafConfig = typeof defaultConfig;
-export const ConfigContext = createContext(defaultConfig);
 export function useLeafConfig() {
-  return useContext(ConfigContext);
+  return useContext(ConfigContext) ?? defaultConfig;
 }
diff --git a/packages/react/src/config-provider/index.ts b/packages/react/src/config-provider/index.ts
index 4721a82..f466832 100644
--- a/packages/react/src/config-provider/index.ts
+++ b/packages/react/src/config-provider/index.ts
@@ -1,13 +1,15 @@
 export type { LeafComponentTokens, LeafThemeStyle } from '../theme';
 export type {
   ConfigProviderProps,
+  LeafComponentDefaults,
   LeafDensity,
   LeafDirection,
   LeafLocale,
-  LeafMessages,
   LeafTheme,
   LeafThemeTokens,
+  LeafTranslation,
+  LeafTranslations,
 } from './config-provider';
 export { ConfigProvider } from './config-provider';
 
-export * from './helpers';
+export { colorContrast, useBreakpoint, useSystemAppearance } from './helpers';
diff --git a/packages/react/src/config-provider/translations.test.tsx b/packages/react/src/config-provider/translations.test.tsx
new file mode 100644
index 0000000..8ea27e9
--- /dev/null
+++ b/packages/react/src/config-provider/translations.test.tsx
@@ -0,0 +1,346 @@
+import { act, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { hydrateRoot } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { describe, expect, expectTypeOf, it, vi } from 'vitest';
+import {
+  DatePicker,
+  Pagination,
+  Select,
+  Statistic,
+  useConfirm,
+  useMessage,
+  useNotification,
+} from '../index';
+import {
+  getMessage,
+  localeChain,
+  mergeTranslations,
+  resolveTranslations,
+} from '../locales/resolve';
+import type { LeafTranslation, LeafTranslations } from '../locales/types';
+import { useFormattedText } from '../shared/use-formatted-text';
+import { ConfigProvider, type ConfigProviderProps, useLeafConfig } from './config-provider';
+
+// Private tags keep fallback coverage independent of the built-in Japanese resource.
+const resources: LeafTranslations = {
+  'ja-JP-x-test': {
+    select: { placeholder: '選択してください' },
+    common: { confirm: '確認', cancel: 'キャンセル' },
+  },
+  'fr-FR': { select: { empty: 'Aucune option' }, datePicker: { placeholder: 'Choisir une date' } },
+};
+function Snapshot() {
+  const { locale, localeChain: chain, messages } = useLeafConfig();
+  return (
+    <output>
+      {JSON.stringify({
+        locale,
+        chain,
+        placeholder: messages.select.placeholder,
+        empty: messages.select.empty,
+        close: messages.common.close,
+      })}
+    </output>
+  );
+}
+function Sentence({ count = 1 }: { count?: number }) {
+  const format = useFormattedText();
+  return <output>{format('pagination.total', { total: count })}</output>;
+}
+
+describe('scoped JSON translations', () => {
+  it('accepts JSON-shaped partial resources and readonly language chains', () => {
+    expectTypeOf<ConfigProviderProps['translations']>().toEqualTypeOf<
+      LeafTranslations | undefined
+    >();
+    const language: ConfigProviderProps['locale'] = ['ja-JP-x-test', 'en-US'] as const;
+    const pack: LeafTranslation = { select: { placeholder: '' } };
+    expect(language[0]).toBe('ja-JP-x-test');
+    expect(pack.select?.placeholder).toBe('');
+  });
+  it('falls back per entry, keeps the first locale for Intl, lang and portalled panels', async () => {
+    render(
+      <ConfigProvider
+        locale={['ja-JP-x-test', 'fr-FR']}
+        translations={resources}
+        data-testid="scope"
+      >
+        <Select aria-label="Choice" options={[]} />
+        <DatePicker aria-label="Date" defaultValue={new Date(2026, 9, 16)} />
+        <Statistic title="Number" value={1234.5} precision={1} />
+      </ConfigProvider>,
+    );
+    expect(screen.getByTestId('scope')).toHaveAttribute('lang', 'ja-JP-x-test');
+    expect(screen.getByRole('combobox', { name: 'Choice' })).toHaveAttribute(
+      'placeholder',
+      '選択してください',
+    );
+    expect(screen.getByRole('combobox', { name: 'Date' })).toHaveValue('2026-10-16');
+    await userEvent.click(screen.getByRole('combobox', { name: 'Date' }));
+    expect(
+      screen.getByText(
+        new Intl.DateTimeFormat('ja-JP-x-test', { month: 'short' }).format(new Date(2026, 9, 16)),
+      ),
+    ).toBeInTheDocument();
+    await userEvent.keyboard('{Escape}');
+    expect(
+      screen.getByText(
+        new Intl.NumberFormat('ja-JP-x-test', {
+          minimumFractionDigits: 1,
+          maximumFractionDigits: 1,
+        }).format(1234.5),
+      ),
+    ).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('combobox', { name: 'Choice' }));
+    expect(screen.getByText('Aucune option')).toBeInTheDocument();
+    expect(screen.getByText('Aucune option').closest('[lang]')).toHaveAttribute(
+      'lang',
+      'ja-JP-x-test',
+    );
+  });
+  it('merges nested resources but replaces an explicit language chain', () => {
+    render(
+      <ConfigProvider locale={['ja-JP-x-test', 'fr-FR']} translations={resources}>
+        <ConfigProvider translations={{ 'ja-JP-x-test': { select: { empty: '候補なし' } } }}>
+          <Snapshot />
+        </ConfigProvider>
+        <ConfigProvider locale="ja-JP-x-test">
+          <Snapshot />
+        </ConfigProvider>
+        <ConfigProvider locale="fr-CA">
+          <Snapshot />
+        </ConfigProvider>
+      </ConfigProvider>,
+    );
+    const values = screen
+      .getAllByRole('status')
+      .map((node) => JSON.parse(node.textContent ?? '{}'));
+    expect(values[0]).toMatchObject({
+      locale: 'ja-JP-x-test',
+      chain: ['ja-JP-x-test', 'fr-FR'],
+      placeholder: '選択してください',
+      empty: '候補なし',
+      close: 'Close',
+    });
+    expect(values[1]).toMatchObject({ chain: ['ja-JP-x-test'], empty: 'No options' });
+    expect(values[2]).toMatchObject({
+      locale: 'fr-CA',
+      placeholder: 'Please select',
+      empty: 'No options',
+    });
+  });
+  it('overrides built-ins, preserves empty strings, and respects instance and component props', () => {
+    render(
+      <ConfigProvider
+        locale="en-US"
+        translations={{
+          'en-US': { datePicker: { placeholder: 'Project date' }, select: { placeholder: '' } },
+        }}
+        components={{ DatePicker: { placeholder: 'Configured date' } }}
+      >
+        <Select aria-label="Empty placeholder" options={[]} />
+        <DatePicker aria-label="Configured" />
+        <DatePicker aria-label="Explicit" placeholder="Instance date" />
+        <ConfigProvider components={{ DatePicker: null }}>
+          <DatePicker aria-label="Translated" />
+        </ConfigProvider>
+      </ConfigProvider>,
+    );
+    expect(screen.getByLabelText('Empty placeholder')).toHaveAttribute('placeholder', '');
+    expect(screen.getByLabelText('Configured')).toHaveAttribute('placeholder', 'Configured date');
+    expect(screen.getByLabelText('Explicit')).toHaveAttribute('placeholder', 'Instance date');
+    expect(screen.getByLabelText('Translated')).toHaveAttribute('placeholder', 'Project date');
+  });
+  it('updates inherited translations when resources or language change without leaking to siblings', () => {
+    const View = ({ text, locale }: { text: string; locale: string }) => (
+      <>
+        <ConfigProvider
+          locale={locale}
+          translations={{ 'ja-JP-x-test': { select: { placeholder: text } } }}
+        >
+          <ConfigProvider>
+            <Select aria-label="Changing" options={[]} />
+          </ConfigProvider>
+        </ConfigProvider>
+        <ConfigProvider locale="ja-JP-x-test">
+          <Select aria-label="Sibling" options={[]} />
+        </ConfigProvider>
+      </>
+    );
+    const { rerender } = render(<View text="最初" locale="ja-JP-x-test" />);
+    expect(screen.getByLabelText('Changing')).toHaveAttribute('placeholder', '最初');
+    rerender(<View text="更新" locale="ja-JP-x-test" />);
+    expect(screen.getByLabelText('Changing')).toHaveAttribute('placeholder', '更新');
+    expect(screen.getByLabelText('Sibling')).toHaveAttribute('placeholder', 'Please select');
+    rerender(<View text="更新" locale="en-US" />);
+    expect(screen.getByLabelText('Changing')).toHaveAttribute('placeholder', 'Please select');
+  });
+  it('formats ICU plurals in the language supplying the entry, with repeated arguments', () => {
+    const { rerender } = render(
+      <ConfigProvider
+        locale={['ja-JP-x-test', 'en-US']}
+        translations={{
+          'en-US': {
+            pagination: { total: '{total, plural, one {# item} other {# items}}; {total}' },
+          },
+        }}
+      >
+        <Sentence />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('status')).toHaveTextContent('1 item; 1');
+    rerender(
+      <ConfigProvider
+        locale={['ja-JP-x-test', 'en-US']}
+        translations={{
+          'en-US': {
+            pagination: { total: '{total, plural, one {# item} other {# items}}; {total}' },
+          },
+        }}
+      >
+        <Sentence count={3} />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('status')).toHaveTextContent('3 items; 3');
+  });
+  it('keeps malformed templates from breaking controls and reports the entry once', () => {
+    const warning = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <ConfigProvider
+        locale="ja-JP-x-test"
+        translations={{ 'ja-JP-x-test': { pagination: { total: '{invalid' } } }}
+      >
+        <Sentence count={8} />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('status')).toHaveTextContent('Total 8 items');
+    expect(warning).toHaveBeenCalledTimes(1);
+    expect(warning.mock.calls[0]?.[0]).toContain('pagination.total');
+    warning.mockRestore();
+  });
+  it('keeps active regional number and date formats when a sentence falls back', () => {
+    function DateSentence() {
+      const format = useFormattedText();
+      return <output>{format('pagination.total', { total: new Date(2026, 9, 16) })}</output>;
+    }
+    const { rerender } = render(
+      <ConfigProvider
+        locale={['de-DE', 'en-US']}
+        translations={{
+          'en-US': {
+            pagination: { total: '{total, plural, one {# item} other {# items}}; {total, number}' },
+          },
+        }}
+      >
+        <Sentence count={1234.5} />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('status')).toHaveTextContent('1.234,5 items; 1.234,5');
+    rerender(
+      <ConfigProvider
+        locale={['de-DE', 'en-US']}
+        translations={{ 'en-US': { pagination: { total: 'Date: {total, date, short}' } } }}
+      >
+        <DateSentence />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('status')).toHaveTextContent(
+      `Date: ${new Intl.DateTimeFormat('de-DE', {
+        month: 'numeric',
+        day: 'numeric',
+        year: '2-digit',
+      }).format(new Date(2026, 9, 16))}`,
+    );
+  });
+  it('inherits translated actions in Confirm, Message and Notification portals', async () => {
+    function Actions() {
+      const { confirm } = useConfirm();
+      const { message } = useMessage();
+      const notification = useNotification();
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => void confirm({ title: 'Decision', children: 'Proceed?' })}
+          >
+            Confirm
+          </button>
+          <button
+            type="button"
+            onClick={() => message.open({ content: 'Saved', duration: 0, closable: true })}
+          >
+            Message
+          </button>
+          <button type="button" onClick={() => notification.open({ title: 'Notice', duration: 0 })}>
+            Notification
+          </button>
+        </>
+      );
+    }
+    render(
+      <ConfigProvider
+        locale="ja-JP-x-test"
+        translations={{
+          'ja-JP-x-test': { common: { confirm: '確認', cancel: 'キャンセル', close: '閉じる' } },
+        }}
+      >
+        <Actions />
+      </ConfigProvider>,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+    const dialog = screen.getByRole('alertdialog', { name: 'Decision' });
+    expect(within(dialog).getByRole('button', { name: '確認' })).toBeInTheDocument();
+    await userEvent.click(within(dialog).getByRole('button', { name: 'キャンセル' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Message' }));
+    expect(screen.getByRole('button', { name: '閉じる' })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Notification' }));
+    expect(screen.getAllByRole('button', { name: '閉じる' })).toHaveLength(2);
+  });
+  it('renders and hydrates per-request resources without sharing mutations', async () => {
+    const element = (text: string) => (
+      <ConfigProvider
+        locale="ja-JP-x-test"
+        translations={{
+          'ja-JP-x-test': { pagination: { total: '全 {total} 件' }, select: { placeholder: text } },
+        }}
+      >
+        <Select options={[]} />
+        <Pagination total={12} showTotal />
+      </ConfigProvider>
+    );
+    const first = renderToString(element('一つ'));
+    const second = renderToString(element('二つ'));
+    expect(first).toContain('一つ');
+    expect(second).not.toContain('一つ');
+    const container = document.createElement('div');
+    container.innerHTML = first;
+    document.body.append(container);
+    const onError = vi.fn();
+    let root: ReturnType<typeof hydrateRoot>;
+    await act(() => {
+      root = hydrateRoot(container, element('一つ'), { onRecoverableError: onError });
+    });
+    expect(onError).not.toHaveBeenCalled();
+    expect(container.textContent).toContain('全 12 件');
+    await act(() => root.unmount());
+    container.remove();
+  });
+  it('validates explicit chains, canonicalizes tags and never mutates the supplied resources', () => {
+    expect(() => localeChain([])).toThrow(/at least one/);
+    expect(() => localeChain('bad_locale')).toThrow(RangeError);
+    expect(localeChain(['ja-jp', 'en-us', 'ja-JP'])).toEqual(['ja-JP', 'en-US']);
+    const own = Object.freeze({
+      'en-us': Object.freeze({ select: Object.freeze({ placeholder: 'Custom' }) }),
+    });
+    const merged = mergeTranslations({}, own);
+    expect(getMessage(resolveTranslations(['en-US'], merged).messages, 'select.placeholder')).toBe(
+      'Custom',
+    );
+    expect(own['en-us'].select.placeholder).toBe('Custom');
+    expect(mergeTranslations(merged, undefined)).toBe(merged);
+    expect(
+      resolveTranslations(['fr-CA'], { fr: { select: { empty: 'French' } } }).messages.select.empty,
+    ).toBe('No options');
+  });
+});
diff --git a/packages/react/src/confirm/confirm.tsx b/packages/react/src/confirm/confirm.tsx
index ef4b9db..06c7e13 100644
--- a/packages/react/src/confirm/confirm.tsx
+++ b/packages/react/src/confirm/confirm.tsx
@@ -1,9 +1,9 @@
 import { CircleAlert } from 'lucide-react';
 import { type CSSProperties, type ReactNode, useEffect, useId, useRef, useState } from 'react';
 import { FeedbackIcon } from '../alert/alert';
-import { Button, type ButtonProps } from '../button';
+import { ButtonControl, type ButtonProps } from '../button/button';
 import { useLeafConfig } from '../config-provider/context';
-import { Modal } from '../modal';
+import { ModalBase } from '../modal/modal';
 import type { DialogFocusOptions } from '../shared/dialog';
 
 export interface ConfirmOptions extends DialogFocusOptions {
@@ -106,7 +106,7 @@ export function ConfirmDialog({
       icon
     );
   return (
-    <Modal
+    <ModalBase
       {...props}
       open={open}
       title={title}
@@ -114,7 +114,7 @@ export function ConfirmDialog({
       divided={false}
       confirmLoading={pending || confirmLoading}
       role="alertdialog"
-      aria-label={title == null ? messages.confirm : undefined}
+      aria-label={title == null ? messages.common.confirm : undefined}
       aria-describedby={children != null ? contentId : undefined}
       className={[
         'leaf-confirm',
@@ -132,7 +132,8 @@ export function ConfirmDialog({
       footer={
         <>
           {(showCancel ?? type !== 'success') && (
-            <Button
+            <ButtonControl
+              type="button"
               variant="outline"
               {...cancelButtonProps}
               disabled={pending || confirmLoading || cancelButtonProps?.disabled}
@@ -141,10 +142,11 @@ export function ConfirmDialog({
                 if (!event.defaultPrevented) cancel();
               }}
             >
-              {cancelText ?? messages.cancel}
-            </Button>
+              {cancelText ?? messages.common.cancel}
+            </ButtonControl>
           )}
-          <Button
+          <ButtonControl
+            type="button"
             {...confirmButtonProps}
             danger={type === 'danger'}
             loading={pending || confirmLoading || confirmButtonProps?.loading}
@@ -153,8 +155,8 @@ export function ConfirmDialog({
               if (!event.defaultPrevented) void accept();
             }}
           >
-            {confirmText ?? messages.confirm}
-          </Button>
+            {confirmText ?? messages.common.confirm}
+          </ButtonControl>
         </>
       }
     >
@@ -179,6 +181,6 @@ export function ConfirmDialog({
           </div>
         </div>
       )}
-    </Modal>
+    </ModalBase>
   );
 }
diff --git a/packages/react/src/confirm/provider.tsx b/packages/react/src/confirm/provider.tsx
index dea577b..94b807a 100644
--- a/packages/react/src/confirm/provider.tsx
+++ b/packages/react/src/confirm/provider.tsx
@@ -8,8 +8,13 @@ import {
   useState,
   useSyncExternalStore,
 } from 'react';
+import {
+  ComponentDefaultsContext,
+  mergeComponentProps,
+} from '../config-provider/component-defaults';
 import { ConfigContext, useLeafConfig } from '../config-provider/context';
 import { leafThemeVariables } from '../theme';
+import type { ConfirmOptions } from './confirm';
 import { ConfirmDialog } from './confirm';
 import {
   type ConfirmApi,
@@ -44,35 +49,43 @@ function ConfirmHost({ store }: { store: ConfirmStore }) {
   if (!request) return null;
   return (
     <ConfigContext.Provider value={request.config}>
-      <div
-        className="leaf-confirm-scope"
-        lang={request.config.locale}
-        data-leaf-theme={request.config.theme.appearance}
-        style={leafThemeVariables(request.config.theme)}
-      >
-        <ConfirmDialog
-          key={request.id}
-          {...request.options}
-          open={request.open}
-          onConfirm={async () => {
-            await request.options.onConfirm?.();
-            store.close(request.id, true);
-          }}
-          onClose={() => store.close(request.id, false)}
-          afterClose={() => store.remove(request.id)}
-        />
-      </div>
+      <ComponentDefaultsContext.Provider value={request.components ?? {}}>
+        <div
+          className="leaf-confirm-scope"
+          lang={request.config.locale}
+          data-leaf-theme={request.config.theme.appearance}
+          style={leafThemeVariables(request.config.theme)}
+        >
+          <ConfirmDialog
+            key={request.id}
+            {...request.options}
+            open={request.open}
+            onConfirm={async () => {
+              await request.options.onConfirm?.();
+              store.close(request.id, true);
+            }}
+            onClose={() => store.close(request.id, false)}
+            afterClose={() => store.remove(request.id)}
+          />
+        </div>
+      </ComponentDefaultsContext.Provider>
     </ConfigContext.Provider>
   );
 }
 export function useConfirm(): ConfirmApi {
   const store = useContext(ConfirmContext);
   const config = useLeafConfig();
+  const components = useContext(ComponentDefaultsContext);
+  const currentComponents = useRef(components);
+  currentComponents.current = components;
   const currentConfig = useRef(config);
   currentConfig.current = config;
   const active = useRef(true);
   const scope = useId();
-  useEffect(() => store?.updateScope(scope, config), [store, scope, config]);
+  useEffect(
+    () => store?.updateScope(scope, config, components),
+    [store, scope, config, components],
+  );
   useEffect(() => {
     active.current = true;
     return () => {
@@ -86,7 +99,12 @@ export function useConfirm(): ConfirmApi {
         ? {
             confirm: (options) =>
               active.current
-                ? store.confirm(scope, currentConfig.current, options)
+                ? store.confirm(
+                    scope,
+                    currentConfig.current,
+                    mergeComponentProps<ConfirmOptions>(currentComponents.current.Confirm, options),
+                    currentComponents.current,
+                  )
                 : Promise.resolve(false),
           }
         : undefined,
diff --git a/packages/react/src/confirm/store.ts b/packages/react/src/confirm/store.ts
index c720cde..a0ce8b6 100644
--- a/packages/react/src/confirm/store.ts
+++ b/packages/react/src/confirm/store.ts
@@ -1,4 +1,5 @@
 import { createContext } from 'react';
+import type { LeafComponentDefaults } from '../config-provider/component-defaults';
 import type { LeafConfig } from '../config-provider/context';
 import type { ConfirmOptions } from './confirm';
 
@@ -10,6 +11,7 @@ interface ConfirmRequest {
   options: ConfirmOptions;
   scope: string;
   config: LeafConfig;
+  components?: LeafComponentDefaults;
   open: boolean;
   resolve: (result: boolean) => void;
 }
@@ -45,20 +47,36 @@ export function createConfirmStore() {
         }
       };
     },
-    confirm: (scope: string, config: LeafConfig, options: ConfirmOptions) => {
+    confirm: (
+      scope: string,
+      config: LeafConfig,
+      options: ConfirmOptions,
+      components?: LeafComponentDefaults,
+    ) => {
       if (!available) return Promise.resolve(false);
       return new Promise<boolean>((resolve) => {
-        publish([...requests, { id: ++sequence, options, scope, config, open: true, resolve }]);
+        publish([
+          ...requests,
+          { id: ++sequence, options, scope, config, components, open: true, resolve },
+        ]);
       });
     },
     close,
     remove: (id: number) => {
       if (requests[0]?.id === id && !requests[0].open) publish(requests.slice(1));
     },
-    updateScope: (scope: string, config: LeafConfig) => {
-      if (requests.some((request) => request.scope === scope && request.config !== config))
+    updateScope: (scope: string, config: LeafConfig, components?: LeafComponentDefaults) => {
+      if (
+        requests.some(
+          (request) =>
+            request.scope === scope &&
+            (request.config !== config || request.components !== components),
+        )
+      )
         publish(
-          requests.map((request) => (request.scope === scope ? { ...request, config } : request)),
+          requests.map((request) =>
+            request.scope === scope ? { ...request, config, components } : request,
+          ),
         );
     },
     cancelScope: (scope: string) => {
diff --git a/packages/react/src/datepicker/datepicker.tsx b/packages/react/src/datepicker/datepicker.tsx
index fc21689..2e3884f 100644
--- a/packages/react/src/datepicker/datepicker.tsx
+++ b/packages/react/src/datepicker/datepicker.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, type ReactNode, useRef } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { CalendarPanel, periodKey, startOfPeriod, withinPeriod } from '../shared/calendar';
@@ -132,7 +133,7 @@ const SingleDatePicker = forwardRef<HTMLInputElement, SingleDatePickerProps>(
             {presets?.length ? (
               <div className="leaf-picker-presets">
                 {presets.map((preset) => (
-                  <Button
+                  <ButtonControl
                     key={preset.key ?? String(preset.label)}
                     size="sm"
                     variant="ghost"
@@ -146,7 +147,7 @@ const SingleDatePicker = forwardRef<HTMLInputElement, SingleDatePickerProps>(
                     }}
                   >
                     {preset.label}
-                  </Button>
+                  </ButtonControl>
                 ))}
               </div>
             ) : null}
@@ -154,7 +155,7 @@ const SingleDatePicker = forwardRef<HTMLInputElement, SingleDatePickerProps>(
               <div className="leaf-picker-footer">
                 <div className="leaf-picker-footer__extra">
                   {showToday && (
-                    <Button
+                    <ButtonControl
                       variant="ghost"
                       size="sm"
                       disabled={
@@ -166,8 +167,8 @@ const SingleDatePicker = forwardRef<HTMLInputElement, SingleDatePickerProps>(
                         close();
                       }}
                     >
-                      {todayText ?? messages.today}
-                    </Button>
+                      {todayText ?? messages.calendar.today}
+                    </ButtonControl>
                   )}
                   {renderExtraFooter}
                 </div>
@@ -180,13 +181,15 @@ const SingleDatePicker = forwardRef<HTMLInputElement, SingleDatePickerProps>(
   },
 );
 export type DatePickerProps = SingleDatePickerProps | MultipleDatePickerProps;
-export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
-  function DatePicker(props, ref) {
-    return props.multiple ? (
-      <MultipleDatePicker {...props} ref={ref} />
-    ) : (
-      <SingleDatePicker {...props} ref={ref} />
-    );
-  },
-);
+export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(
+  rawProps: DatePickerProps,
+  ref,
+) {
+  const props = useComponentProps('DatePicker', rawProps);
+  return props.multiple ? (
+    <MultipleDatePicker {...props} ref={ref} />
+  ) : (
+    <SingleDatePicker {...props} ref={ref} />
+  );
+});
 DatePicker.displayName = 'DatePicker';
diff --git a/packages/react/src/datepicker/index.ts b/packages/react/src/datepicker/index.ts
index b177c66..ea48955 100644
--- a/packages/react/src/datepicker/index.ts
+++ b/packages/react/src/datepicker/index.ts
@@ -1,2 +1,3 @@
-export * from './datepicker';
+export type { DatePickerProps, SingleDatePickerProps } from './datepicker';
+export { DatePicker } from './datepicker';
 export type { MultipleDatePickerProps } from './multiple';
diff --git a/packages/react/src/daterangepicker/daterangepicker.tsx b/packages/react/src/daterangepicker/daterangepicker.tsx
index fe0e071..0e11ba2 100644
--- a/packages/react/src/daterangepicker/daterangepicker.tsx
+++ b/packages/react/src/daterangepicker/daterangepicker.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, type ReactNode, useRef, useState } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import {
@@ -67,8 +68,8 @@ const getTime = (date: Date): TimeParts => ({
   second: date.getSeconds(),
 });
 export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps>(
-  function DateRangePicker(
-    {
+  function DateRangePicker(rawProps: DateRangePickerProps, ref) {
+    const {
       value,
       defaultValue = null,
       picker = 'date',
@@ -93,9 +94,7 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
       onPanelChange,
       cellRender,
       ...props
-    },
-    ref,
-  ) {
+    } = useComponentProps('DateRangePicker', rawProps);
     const { messages } = useLeafConfig();
     const field = useFormField();
     const trigger = useRef<HTMLInputElement>(null);
@@ -137,12 +136,18 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
     const canonical = (date: Date) =>
       picker === 'datetime' ? dateTimeKey(date, showSeconds) : periodKey(date, picker);
     const timeLabel = (index: 0 | 1) =>
-      displayTime(times[index], showSeconds, use12Hours, [messages.am, messages.pm]);
+      displayTime(times[index], showSeconds, use12Hours, [
+        messages.timePicker.am,
+        messages.timePicker.pm,
+      ]);
     const defaultLabel = (date: Date) =>
       picker === 'datetime'
         ? periodKey(date, 'date') +
           ' ' +
-          displayTime(getTime(date), showSeconds, use12Hours, [messages.am, messages.pm])
+          displayTime(getTime(date), showSeconds, use12Hours, [
+            messages.timePicker.am,
+            messages.timePicker.pm,
+          ])
         : canonical(date);
     const label = (date: Date | null) => (date ? formatPickerDate(date, format, defaultLabel) : '');
     const inBounds = (date: Date, position: 0 | 1 = endpoint) =>
@@ -187,13 +192,13 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
       const first = parsePickerDate(
         pieces[0]?.trim() ?? '',
         format,
-        (text) => parseDateText(text, picker),
+        (text) => parseDateText(text, picker, [messages.timePicker.am, messages.timePicker.pm]),
         customParse,
       );
       const last = parsePickerDate(
         pieces[1]?.trim() ?? '',
         format,
-        (text) => parseDateText(text, picker),
+        (text) => parseDateText(text, picker, [messages.timePicker.am, messages.timePicker.pm]),
         customParse,
       );
       if (
@@ -253,8 +258,8 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
         {...props}
         ref={merged}
         className={['leaf-date-range-picker', props.className].filter(Boolean).join(' ')}
-        placeholder={props.placeholder ?? messages.range}
-        clearLabel={messages.clearRange}
+        placeholder={props.placeholder ?? messages.dateRangePicker.placeholder}
+        clearLabel={messages.dateRangePicker.clear}
         displayValue={selected ? `${label(selected[0])} ~ ${label(selected[1])}` : ''}
         formValue={
           selected
@@ -305,7 +310,7 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
         renderPanel={(close) => (
           <>
             <fieldset
-              aria-label={messages.range}
+              aria-label={messages.dateRangePicker.placeholder}
               className="leaf-range-panel__calendars"
               onMouseLeave={() => setHover(null)}
             >
@@ -324,13 +329,13 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
                           <button
                             type="button"
                             className="leaf-picker-time-toggle"
-                            aria-label={messages.selectDate}
+                            aria-label={messages.datePicker.selectDate}
                             onClick={() => {
                               setFocusCalendar(index);
                               setTimeView(null);
                             }}
                           >
-                            {messages.selectDate}
+                            {messages.datePicker.selectDate}
                           </button>
                           <span>{timeLabel(index)}</span>
                         </div>
@@ -350,13 +355,13 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
                           secondStep={secondStep}
                           onChange={(time) => updateTime(index, time)}
                         />
-                        <Button
+                        <ButtonControl
                           variant="ghost"
                           size="sm"
                           onClick={() => updateTime(index, getTime(new Date()))}
                         >
-                          {messages.now}
-                        </Button>
+                          {messages.timePicker.now}
+                        </ButtonControl>
                       </div>
                     ) : (
                       <CalendarPanel
@@ -388,9 +393,9 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
                               type="button"
                               className="leaf-picker-time-toggle"
                               aria-label={
-                                (index === 0 ? messages.start : messages.end) +
+                                (index === 0 ? messages.common.start : messages.common.end) +
                                 ' ' +
-                                messages.selectTime
+                                messages.timePicker.selectTime
                               }
                               onClick={() => {
                                 setFocusCalendar(null);
@@ -410,7 +415,7 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
             {(presets?.length || allowEmpty) && (
               <div className="leaf-picker-presets">
                 {presets?.map((preset, index) => (
-                  <Button
+                  <ButtonControl
                     // biome-ignore lint/suspicious/noArrayIndexKey: Presets retain their declared order and do not contain local state.
                     key={index}
                     variant="ghost"
@@ -428,12 +433,12 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
                     }}
                   >
                     {preset.label}
-                  </Button>
+                  </ButtonControl>
                 ))}
                 {([0, 1] as const).map(
                   (index) =>
                     emptyAllowed[index] && (
-                      <Button
+                      <ButtonControl
                         key={`empty-${index}`}
                         size="sm"
                         variant="ghost"
@@ -447,8 +452,9 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
                           close();
                         }}
                       >
-                        {messages.clearSelection} {index === 0 ? messages.start : messages.end}
-                      </Button>
+                        {messages.select.clear}{' '}
+                        {index === 0 ? messages.common.start : messages.common.end}
+                      </ButtonControl>
                     ),
                 )}
               </div>
diff --git a/packages/react/src/datetimepicker/datetimepicker.tsx b/packages/react/src/datetimepicker/datetimepicker.tsx
index 8ffeebb..381c932 100644
--- a/packages/react/src/datetimepicker/datetimepicker.tsx
+++ b/packages/react/src/datetimepicker/datetimepicker.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, type ReactNode, useRef, useState } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { CalendarPanel, dateTimeKey } from '../shared/calendar';
@@ -42,8 +43,8 @@ export interface DateTimePickerProps extends PickerFieldProps {
   cellRender?: (date: Date) => ReactNode;
 }
 export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
-  function DateTimePicker(
-    {
+  function DateTimePicker(rawProps: DateTimePickerProps, ref) {
+    const {
       value,
       defaultValue = null,
       minDate,
@@ -68,9 +69,7 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
       onPanelChange,
       cellRender,
       ...props
-    },
-    ref,
-  ) {
+    } = useComponentProps('DateTimePicker', rawProps);
     const { messages } = useLeafConfig();
     const field = useFormField();
     const trigger = useRef<HTMLInputElement>(null);
@@ -117,7 +116,10 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
       second: date.getSeconds(),
     });
     const timeLabel = (date: Date) =>
-      displayTime(parts(date), showSeconds, use12Hours, [messages.am, messages.pm]);
+      displayTime(parts(date), showSeconds, use12Hours, [
+        messages.timePicker.am,
+        messages.timePicker.pm,
+      ]);
     const label = (date: Date) =>
       formatPickerDate(date, format, (date) => `${dateKey(date)} ${timeLabel(date)}`);
     const today = new Date();
@@ -132,7 +134,7 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
       <DateInput
         {...props}
         ref={merged}
-        placeholder={props.placeholder ?? messages.dateTime}
+        placeholder={props.placeholder ?? messages.dateTimePicker.placeholder}
         commitOnBlur={false}
         displayValue={selected ? label(selected) : ''}
         formValue={selected ? dateTimeKey(selected, showSeconds) : ''}
@@ -152,7 +154,8 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
           const next = parsePickerDate(
             text.trim(),
             format,
-            (text) => parseDateText(text, 'datetime'),
+            (text) =>
+              parseDateText(text, 'datetime', [messages.timePicker.am, messages.timePicker.pm]),
             parse,
           );
           setValidText(Boolean(next && inBounds(normalize(next))));
@@ -166,7 +169,8 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
           const next = parsePickerDate(
             text,
             format,
-            (text) => parseDateText(text, 'datetime'),
+            (text) =>
+              parseDateText(text, 'datetime', [messages.timePicker.am, messages.timePicker.pm]),
             parse,
           );
           if (!next || !inBounds(normalize(next))) return false;
@@ -192,7 +196,7 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
                     <button
                       type="button"
                       className="leaf-picker-time-toggle"
-                      aria-label={messages.selectTime}
+                      aria-label={messages.timePicker.selectTime}
                       onClick={() => {
                         setFocusCalendar(false);
                         setView('time');
@@ -215,7 +219,7 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
                     <button
                       type="button"
                       className="leaf-picker-time-toggle"
-                      aria-label={messages.selectDate}
+                      aria-label={messages.datePicker.selectDate}
                       onClick={() => {
                         setFocusCalendar(true);
                         setView('date');
@@ -241,7 +245,7 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
             {presets?.length ? (
               <div className="leaf-picker-presets">
                 {presets.map((preset) => (
-                  <Button
+                  <ButtonControl
                     key={preset.key ?? String(preset.label)}
                     size="sm"
                     variant="ghost"
@@ -255,14 +259,14 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
                     }}
                   >
                     {preset.label}
-                  </Button>
+                  </ButtonControl>
                 ))}
               </div>
             ) : null}
             <div className="leaf-picker-footer">
               <div className="leaf-picker-footer__extra">
                 {showToday && (
-                  <Button
+                  <ButtonControl
                     variant="ghost"
                     size="sm"
                     disabled={!inBounds(today)}
@@ -272,11 +276,11 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
                       setView('date');
                     }}
                   >
-                    {todayText ?? messages.today}
-                  </Button>
+                    {todayText ?? messages.calendar.today}
+                  </ButtonControl>
                 )}
                 {view === 'time' && (
-                  <Button
+                  <ButtonControl
                     variant="ghost"
                     size="sm"
                     onClick={() => {
@@ -284,12 +288,12 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
                       setValidText(true);
                     }}
                   >
-                    {messages.now}
-                  </Button>
+                    {messages.timePicker.now}
+                  </ButtonControl>
                 )}
                 {renderExtraFooter}
               </div>
-              <Button
+              <ButtonControl
                 size="sm"
                 disabled={!validText || !inBounds(draft)}
                 onClick={() => {
@@ -297,8 +301,8 @@ export const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
                   close();
                 }}
               >
-                {messages.confirm}
-              </Button>
+                {messages.common.confirm}
+              </ButtonControl>
             </div>
           </>
         )}
diff --git a/packages/react/src/density.ts b/packages/react/src/density.ts
index f7a3963..4420f2c 100644
--- a/packages/react/src/density.ts
+++ b/packages/react/src/density.ts
@@ -1,16 +1,16 @@
-import type { LeafThemeStyle } from './theme';
+import type { LeafTheme, LeafThemeStyle } from './theme';
 
 export type LeafDensity = 'comfortable' | 'compact';
 
 /** Keep text readable; density reduces geometry and spacing, not font size. */
 export const densityTokens = {
   comfortable: {
-    'control-height': 40,
+    'control-height': 36,
     spacing: 8,
     'density-form-gap': 24,
     'density-label-gap': 6,
     'density-row-padding': 12,
-    'density-option-height': 36,
+    'density-option-height': 32,
     'density-option-padding': 6,
     'density-field-padding': 10,
     'density-dialog-block': 20,
@@ -18,12 +18,12 @@ export const densityTokens = {
     'density-dialog-gap': 16,
   },
   compact: {
-    'control-height': 34,
+    'control-height': 30,
     spacing: 6,
     'density-form-gap': 16,
     'density-label-gap': 4,
     'density-row-padding': 8,
-    'density-option-height': 30,
+    'density-option-height': 26,
     'density-option-padding': 4,
     'density-field-padding': 8,
     'density-dialog-block': 16,
@@ -32,6 +32,15 @@ export const densityTokens = {
   },
 };
 
+/** Seed virtual rows from the regional height; CSS lengths are measured after rendering. */
+export function estimateControlHeight(theme: LeafTheme, density: LeafDensity): number {
+  const height = theme.controlHeight;
+  if (typeof height === 'number' && Number.isFinite(height)) return height;
+  if (typeof height === 'string' && /^\d+(?:\.\d+)?(?:px)?$/.test(height.trim()))
+    return Number.parseFloat(height);
+  return densityTokens[density]['control-height'];
+}
+
 export function leafDensityVariables(density: LeafDensity): LeafThemeStyle {
   return Object.fromEntries(
     Object.entries(densityTokens[density]).map(([key, value]) => [
diff --git a/packages/react/src/descriptions/descriptions.tsx b/packages/react/src/descriptions/descriptions.tsx
index 1790e43..e0a93b0 100644
--- a/packages/react/src/descriptions/descriptions.tsx
+++ b/packages/react/src/descriptions/descriptions.tsx
@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import type { GridBreakpoint } from '../grid/grid';
 import { classes } from '../shared/classes';
 import type { LeafThemeStyle } from '../theme';
@@ -17,18 +18,19 @@ export interface DescriptionsProps extends Omit<HTMLAttributes<HTMLDivElement>,
   bordered?: boolean;
   size?: 'sm' | 'md' | 'lg';
 }
-export function Descriptions({
-  items,
-  title,
-  extra,
-  columns = { xs: 1, md: 2, lg: 3 },
-  layout = 'horizontal',
-  bordered = false,
-  size = 'md',
-  className,
-  style,
-  ...props
-}: DescriptionsProps) {
+export function Descriptions(rawProps: DescriptionsProps) {
+  const {
+    items,
+    title,
+    extra,
+    columns = { xs: 1, md: 2, lg: 3 },
+    layout = 'horizontal',
+    bordered = false,
+    size = 'md',
+    className,
+    style,
+    ...props
+  } = useComponentProps('Descriptions', rawProps);
   const variables: LeafThemeStyle = { ...style };
   if (typeof columns === 'number') variables['--leaf-descriptions-columns'] = Math.max(1, columns);
   else {
diff --git a/packages/react/src/divider/divider.tsx b/packages/react/src/divider/divider.tsx
index edaca4f..6299875 100644
--- a/packages/react/src/divider/divider.tsx
+++ b/packages/react/src/divider/divider.tsx
@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 
 export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
@@ -6,14 +7,15 @@ export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
   align?: 'start' | 'center' | 'end';
   dashed?: boolean;
 }
-export function Divider({
-  type = 'horizontal',
-  align = 'center',
-  dashed = false,
-  children,
-  className,
-  ...props
-}: DividerProps) {
+export function Divider(rawProps: DividerProps) {
+  const {
+    type = 'horizontal',
+    align = 'center',
+    dashed = false,
+    children,
+    className,
+    ...props
+  } = useComponentProps('Divider', rawProps);
   return (
     // biome-ignore lint/a11y/useSemanticElements: A labelled divider needs text children, which hr cannot contain.
     <div
diff --git a/packages/react/src/drawer/drawer.tsx b/packages/react/src/drawer/drawer.tsx
index 6d7107c..edee0da 100644
--- a/packages/react/src/drawer/drawer.tsx
+++ b/packages/react/src/drawer/drawer.tsx
@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { type DialogFocusOptions, useDialog } from '../shared/dialog';
@@ -134,7 +135,7 @@ function DrawerSurface({
         type="button"
         tabIndex={-1}
         className="leaf-drawer-backdrop"
-        aria-label={messages.close}
+        aria-label={messages.common.close}
         onClick={() => {
           if (maskClosable) onClose?.();
         }}
@@ -165,7 +166,7 @@ function DrawerSurface({
           <div
             role="separator"
             tabIndex={0}
-            aria-label={messages.expand}
+            aria-label={messages.tree.expand}
             aria-orientation={horizontal ? 'vertical' : 'horizontal'}
             aria-valuemin={minSize}
             aria-valuemax={maxSize}
@@ -258,7 +259,7 @@ function DrawerSurface({
                 <button
                   type="button"
                   className="leaf-modal__close"
-                  aria-label={messages.close}
+                  aria-label={messages.common.close}
                   onClick={onClose}
                 >
                   <X size={18} aria-hidden="true" />
@@ -277,7 +278,8 @@ function DrawerSurface({
     </div>
   );
 }
-export function Drawer(props: DrawerProps) {
+export function Drawer(rawProps: DrawerProps) {
+  const props = useComponentProps('Drawer', rawProps);
   return (
     <ScopedPortal container={props.container}>
       <DrawerSurface {...props} />
diff --git a/packages/react/src/dropdown/dropdown.scss b/packages/react/src/dropdown/dropdown.scss
index 9efe8ff..76354c0 100644
--- a/packages/react/src/dropdown/dropdown.scss
+++ b/packages/react/src/dropdown/dropdown.scss
@@ -36,8 +36,9 @@
     min-height: var(--leaf-density-option-height);
     font-size: var(--leaf-font-size);
     // Keep shared option fills from covering or doubling the moving highlight.
-    &:hover:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']),
-    &:active:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']) {
+    &:hover:not(:disabled):not([aria-disabled='true']):not([aria-checked='true']),
+    &:focus-visible:not(:disabled):not([aria-disabled='true']):not([aria-checked='true']),
+    &:active:not(:disabled):not([aria-disabled='true']):not([aria-checked='true']) {
       background: transparent;
     }
     &[aria-expanded='true'] {
@@ -45,6 +46,11 @@
     }
     &[aria-checked='true'] {
       color: var(--leaf-color-primary);
+      background: var(--leaf-color-primary-surface-9);
+      &.leaf-dropdown__danger {
+        color: var(--leaf-color-danger);
+        background: var(--leaf-color-danger-surface-8);
+      }
     }
   }
   &__highlight {
@@ -57,9 +63,13 @@
     translate: 0 var(--leaf-menu-highlight-y, 0px);
     border: 1px solid var(--leaf-color-border-alpha-55);
     border-radius: var(--leaf-floating-option-radius);
-    background: var(--leaf-color-text-alpha-9);
+    background: var(--leaf-color-option-hover);
+    &[data-selected] {
+      background: var(--leaf-color-primary-surface-9);
+      border-color: var(--leaf-color-primary-alpha-15);
+    }
     &[data-danger='true'] {
-      background: var(--leaf-color-danger-alpha-8);
+      background: var(--leaf-color-danger-surface-8);
       border-color: var(--leaf-color-danger-alpha-15);
     }
     pointer-events: none;
diff --git a/packages/react/src/dropdown/dropdown.tsx b/packages/react/src/dropdown/dropdown.tsx
index b83668f..d2da482 100644
--- a/packages/react/src/dropdown/dropdown.tsx
+++ b/packages/react/src/dropdown/dropdown.tsx
@@ -18,6 +18,7 @@ import {
   version,
 } from 'react';
 import { tabbable } from 'tabbable';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { useMergedRef } from '../shared/field';
@@ -64,7 +65,7 @@ const flatten = (items: readonly DropdownItem[]): DropdownItem[] =>
       : [item],
   );
 const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
-export function Dropdown({
+export function DropdownControl({
   items,
   children,
   disabled,
@@ -409,6 +410,7 @@ function MenuPanel({
     event.stopPropagation();
   };
   const child = rows.find((item) => item.key === submenu);
+  const activeItem = rows.find((item) => item.key === current);
   return (
     <>
       <FloatingPanel
@@ -434,7 +436,12 @@ function MenuPanel({
           className="leaf-dropdown__highlight"
           aria-hidden="true"
           data-ready={Boolean(highlight)}
-          data-danger={rows.find((item) => item.key === current)?.danger || undefined}
+          data-danger={activeItem?.danger || undefined}
+          data-selected={
+            ((activeItem?.type === 'checkbox' || activeItem?.type === 'radio') &&
+              (activeItem.checked ?? Boolean(checks[activeItem.key]))) ||
+            undefined
+          }
           style={highlight}
         />
         {rows.map((item) =>
@@ -565,3 +572,8 @@ function MenuAction({
     </button>
   );
 }
+
+export function Dropdown(rawProps: DropdownProps) {
+  const props = useComponentProps('Dropdown', rawProps);
+  return <DropdownControl {...props} />;
+}
diff --git a/packages/react/src/empty/empty.tsx b/packages/react/src/empty/empty.tsx
index 1c023c9..7adead2 100644
--- a/packages/react/src/empty/empty.tsx
+++ b/packages/react/src/empty/empty.tsx
@@ -1,5 +1,6 @@
 import type { HTMLAttributes, ReactNode } from 'react';
-import { Result } from '../result';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { ResultControl as Result } from '../result/result';
 
 /** @deprecated Use Result with status="empty" instead. */
 export interface EmptyProps extends HTMLAttributes<HTMLDivElement> {
@@ -8,7 +9,11 @@ export interface EmptyProps extends HTMLAttributes<HTMLDivElement> {
   size?: 'sm' | 'md';
 }
 /** @deprecated Use Result with status="empty" instead. */
-export function Empty({ image, description, children, className, ...props }: EmptyProps) {
+export function Empty(rawProps: EmptyProps) {
+  const { image, description, children, className, ...props } = useComponentProps(
+    'Empty',
+    rawProps,
+  );
   return (
     <Result
       {...props}
diff --git a/packages/react/src/errorboundary/errorboundary.tsx b/packages/react/src/errorboundary/errorboundary.tsx
index 3b9b719..8119701 100644
--- a/packages/react/src/errorboundary/errorboundary.tsx
+++ b/packages/react/src/errorboundary/errorboundary.tsx
@@ -1,6 +1,10 @@
-import { Component, type ErrorInfo, type ReactNode } from 'react';
-import { Button } from '../button';
-import { Result } from '../result';
+import { Component, type ContextType, type ErrorInfo, type ReactNode } from 'react';
+import { ButtonControl } from '../button/button';
+import {
+  ComponentDefaultsContext,
+  mergeComponentProps,
+} from '../config-provider/component-defaults';
+import { ResultControl as Result } from '../result/result';
 import { useText } from '../shared/use-text';
 export interface ErrorBoundaryFallbackProps {
   error: Error;
@@ -14,16 +18,26 @@ export interface ErrorBoundaryProps {
   onReset?: () => void;
 }
 export class ErrorBoundary extends Component<ErrorBoundaryProps, { error: Error | null }> {
+  static contextType = ComponentDefaultsContext;
+  declare context: ContextType<typeof ComponentDefaultsContext>;
+  private previousResetKeys: readonly unknown[] = [];
+  private get resolvedProps(): ErrorBoundaryProps {
+    return mergeComponentProps(this.context.ErrorBoundary, this.props);
+  }
   state: { error: Error | null } = { error: null };
   static getDerivedStateFromError(error: Error) {
     return { error };
   }
   componentDidCatch(error: Error, info: ErrorInfo) {
-    this.props.onError?.(error, info);
+    this.resolvedProps.onError?.(error, info);
+  }
+  componentDidMount() {
+    this.previousResetKeys = this.resolvedProps.resetKeys ?? [];
   }
-  componentDidUpdate(previous: ErrorBoundaryProps) {
-    const next = this.props.resetKeys ?? [];
-    const old = previous.resetKeys ?? [];
+  componentDidUpdate() {
+    const next = this.resolvedProps.resetKeys ?? [];
+    const old = this.previousResetKeys;
+    this.previousResetKeys = next;
     if (
       this.state.error &&
       (next.length !== old.length || next.some((item, index) => !Object.is(item, old[index])))
@@ -31,12 +45,13 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, { error: Error
       this.reset();
   }
   reset = () => {
-    this.props.onReset?.();
+    this.resolvedProps.onReset?.();
     this.setState({ error: null });
   };
   render() {
-    if (!this.state.error) return this.props.children;
-    const fallback = this.props.fallback;
+    const props = this.resolvedProps;
+    if (!this.state.error) return props.children;
+    const fallback = props.fallback;
     return typeof fallback === 'function'
       ? fallback({ error: this.state.error, reset: this.reset })
       : (fallback ?? <DefaultFallback reset={this.reset} />);
@@ -48,9 +63,9 @@ function DefaultFallback({ reset }: { reset: () => void }) {
     <Result
       className="leaf-error-boundary"
       status="error"
-      title={t('内容暂时无法显示', 'This content could not be displayed')}
-      description={t('请重试，或稍后返回。', 'Please retry or come back later.')}
-      extra={<Button onClick={reset}>{t('重试', 'Retry')}</Button>}
+      title={t('errorBoundary.title')}
+      description={t('errorBoundary.description')}
+      extra={<ButtonControl onClick={reset}>{t('common.retry')}</ButtonControl>}
     />
   );
 }
diff --git a/packages/react/src/filelist/filelist.scss b/packages/react/src/filelist/filelist.scss
index 349db55..8d2d86a 100644
--- a/packages/react/src/filelist/filelist.scss
+++ b/packages/react/src/filelist/filelist.scss
@@ -1,89 +1,97 @@
 @use '../styles/mixins' as mixins;
+
 .leaf-file-list {
+  --leaf-file-visual-size: 40px;
+  --leaf-file-action-size: var(--leaf-control-height-sm);
+  box-sizing: border-box;
   width: 100%;
   min-width: 0;
   color: var(--leaf-color-text);
-  font: var(--leaf-font-size)/1.5 var(--leaf-font-family);
+  font: var(--leaf-font-size)/var(--leaf-line-height) var(--leaf-font-family);
   &__items {
-    display: flex;
-    flex-direction: column;
     margin: 0;
-    padding: 4px;
+    padding: 0;
     list-style: none;
     border: 1px solid var(--leaf-color-border);
     border-radius: var(--leaf-radius-md);
     background: var(--leaf-color-surface);
   }
   &__item {
+    box-sizing: border-box;
     position: relative;
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--leaf-file-visual-size) minmax(0, 1fr) auto;
+    column-gap: 12px;
     align-items: center;
-    gap: 14px;
-    padding: 12px;
-    border-radius: max(0px, calc(var(--leaf-radius-md) - 5px));
     min-width: 0;
-    box-sizing: border-box;
-    transition:
-      background-color var(--leaf-motion-duration) var(--leaf-motion-easing),
-      opacity var(--leaf-motion-duration) var(--leaf-motion-easing);
-    & + &::before {
-      content: '';
-      position: absolute;
-      inset: 0 14px auto;
-      height: 1px;
-      background: var(--leaf-color-border);
-      pointer-events: none;
+    padding: var(--leaf-density-row-padding, 12px) 16px;
+    transition: background-color var(--leaf-motion-fast) var(--leaf-motion-easing);
+    &:first-child {
+      border-start-start-radius: max(0px, calc(var(--leaf-radius-md) - 1px));
+      border-start-end-radius: max(0px, calc(var(--leaf-radius-md) - 1px));
+    }
+    &:last-child {
+      border-end-start-radius: max(0px, calc(var(--leaf-radius-md) - 1px));
+      border-end-end-radius: max(0px, calc(var(--leaf-radius-md) - 1px));
+    }
+    & + & {
+      border-top: 1px solid var(--leaf-color-border);
     }
     &:hover,
     &:focus-within {
       background: var(--leaf-color-surface-muted);
     }
-    &[data-status='error'] {
-      background: var(--leaf-color-danger-surface-4);
-    }
-    &[data-status='cancelled'] {
-      opacity: 0.65;
+    &:not(:has(.leaf-file-list__actions:not(:empty))) {
+      grid-template-columns: var(--leaf-file-visual-size) minmax(0, 1fr);
     }
   }
   &__icon {
     --leaf-file-accent: var(--leaf-color-text-muted);
-    --leaf-file-accent-surface-9: var(--leaf-color-text-muted-surface-9);
+    --leaf-file-surface: var(--leaf-color-surface-muted);
+    position: relative;
+    grid-column: 1;
+    grid-row: 1;
     display: grid;
     place-items: center;
-    width: 42px;
-    height: 48px;
-    flex: none;
-    border-radius: var(--leaf-radius);
-    background: var(--leaf-file-accent-surface-9);
+    inline-size: var(--leaf-file-visual-size);
+    block-size: var(--leaf-file-visual-size);
+    box-sizing: border-box;
+    border: 1px solid var(--leaf-color-border);
+    border-radius: var(--leaf-radius-sm);
+    background: var(--leaf-file-surface);
     color: var(--leaf-file-accent);
+    overflow: hidden;
     &[data-kind='image'],
     &[data-kind='sheet'] {
       --leaf-file-accent: var(--leaf-color-primary);
-      --leaf-file-accent-surface-9: var(--leaf-color-primary-surface-9);
+      --leaf-file-surface: var(--leaf-color-primary-surface-5);
     }
     &[data-kind='document'],
     &[data-kind='video'] {
       --leaf-file-accent: var(--leaf-color-info);
-      --leaf-file-accent-surface-9: var(--leaf-color-info-surface-9);
+      --leaf-file-surface: var(--leaf-color-info-surface-5);
     }
     &[data-kind='audio'],
     &[data-kind='archive'] {
-      --leaf-file-accent: var(--leaf-color-warning);
-      --leaf-file-accent-surface-9: var(--leaf-color-warning-surface-9);
+      --leaf-file-accent: var(--leaf-color-warning-text-80);
+      --leaf-file-surface: var(--leaf-color-warning-surface-5);
     }
     &[data-extension='pdf'] {
       --leaf-file-accent: var(--leaf-color-danger);
-      --leaf-file-accent-surface-9: var(--leaf-color-danger-surface-9);
+      --leaf-file-surface: var(--leaf-color-danger-surface-4);
     }
     img {
+      position: absolute;
+      inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
   }
   &__details {
+    grid-column: 2;
+    grid-row: 1;
     min-width: 0;
-    flex: 1;
   }
   &__name {
     display: block;
@@ -95,57 +103,121 @@
   }
   &__meta {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    gap: 4px 10px;
-    margin-top: 4px;
+    flex-wrap: wrap;
+    column-gap: 8px;
+    margin-top: 2px;
     color: var(--leaf-color-text-muted);
     font-size: var(--leaf-font-size-sm);
+    line-height: 1.5;
     font-variant-numeric: tabular-nums;
+    > span {
+      display: inline-flex;
+      align-items: center;
+      white-space: nowrap;
+    }
+    > span + span::before {
+      content: '';
+      inline-size: 3px;
+      block-size: 3px;
+      margin-inline-end: 8px;
+      border-radius: 50%;
+      background: var(--leaf-color-text-muted);
+      opacity: 0.55;
+    }
   }
   &__type {
-    font-size: 11px;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.03em;
   }
   &__actions {
+    grid-column: 3;
+    grid-row: 1 / span 4;
     display: flex;
     align-items: center;
+    justify-content: flex-end;
     gap: 4px;
-    flex: none;
-  }
-  &__actions .leaf-button,
-  &__action {
-    color: var(--leaf-color-text-muted);
-    &:hover:not(:disabled):not([aria-disabled]) {
-      color: var(--leaf-color-primary);
-      background: var(--leaf-color-surface);
+    margin-inline-end: -4px;
+    &:empty {
+      display: none;
     }
   }
-  &__actions .leaf-file-list__remove:hover:not(:disabled) {
-    color: var(--leaf-color-danger);
-  }
-  &__action {
-    display: grid;
-    place-items: center;
-    width: var(--leaf-control-height-sm);
-    height: var(--leaf-control-height-sm);
+  &__action,
+  &__actions > .leaf-button--icon-only {
+    --leaf-button-height: var(--leaf-file-action-size);
+    --leaf-button-radius: var(--leaf-radius-sm);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: var(--leaf-file-action-size);
+    block-size: var(--leaf-file-action-size);
+    min-height: var(--leaf-file-action-size);
+    padding: 0;
+    border: 1px solid transparent;
     border-radius: var(--leaf-radius-sm);
+    background: transparent;
+    color: var(--leaf-color-text-muted);
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
     transition:
-      color var(--leaf-motion-duration),
-      background-color var(--leaf-motion-duration),
-      transform var(--leaf-motion-slow) var(--leaf-motion-easing);
+      color var(--leaf-motion-fast) var(--leaf-motion-easing),
+      background-color var(--leaf-motion-fast) var(--leaf-motion-easing),
+      border-color var(--leaf-motion-fast) var(--leaf-motion-easing);
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      color: var(--leaf-color-primary);
+      background: var(--leaf-color-primary-surface-9);
+    }
+    &:active:not(:disabled):not([aria-disabled='true']) {
+      color: var(--leaf-color-primary-active);
+      background: var(--leaf-color-primary-surface-14);
+    }
     &:focus-visible {
       @include mixins.focus-ring;
     }
-    &[aria-disabled] {
+    &[aria-disabled='true'] {
       opacity: 0.45;
+      cursor: not-allowed;
+    }
+    &[data-loading] {
+      cursor: default;
+    }
+  }
+  &__actions &__remove {
+    &:hover:not(:disabled),
+    &:active:not(:disabled) {
+      color: var(--leaf-color-danger);
+      background: var(--leaf-color-danger-surface-9);
     }
-    &:active:not([aria-disabled]) {
-      transform: scale(0.96);
+  }
+  &__status {
+    grid-column: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 4px;
+    min-width: 0;
+    color: var(--leaf-color-text-muted);
+    font-size: var(--leaf-font-size-sm);
+    line-height: 1.5;
+    font-variant-numeric: tabular-nums;
+    > svg {
+      flex: none;
+    }
+    &[data-status='done'] {
+      color: var(--leaf-color-success-text-80);
+    }
+    &[data-status='error'] {
+      color: var(--leaf-color-danger-text-80);
+    }
+    &[data-status='uploading'] {
+      color: var(--leaf-color-primary);
     }
   }
   &__progress {
-    margin-top: 9px;
+    grid-column: 2;
+    margin-top: 7px;
     height: 3px;
     border-radius: 3px;
     background: var(--leaf-color-border);
@@ -153,27 +225,30 @@
     > span {
       display: block;
       height: 100%;
+      border-radius: inherit;
       background: var(--leaf-color-primary);
-      transition: width var(--leaf-motion-slow) var(--leaf-motion-easing);
+      transition: width var(--leaf-motion-duration) var(--leaf-motion-easing);
     }
   }
   &__error {
-    color: var(--leaf-color-danger);
-  }
-  &__complete {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    color: var(--leaf-color-success);
-    animation: var(
-      --leaf-motion-animation,
-      leaf-file-complete var(--leaf-motion-duration) var(--leaf-motion-easing)
-    );
+    grid-column: 2;
+    min-width: 0;
+    margin: 4px 0 0;
+    font-size: var(--leaf-font-size-sm);
+    line-height: 1.5;
+    color: var(--leaf-color-danger-text-80);
+    overflow-wrap: anywhere;
   }
   &__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 10px;
     padding: 32px 16px;
-    border: 1px dashed var(--leaf-color-border);
+    border: 1px solid var(--leaf-color-border);
     border-radius: var(--leaf-radius-md);
+    background: var(--leaf-color-surface);
     text-align: center;
     color: var(--leaf-color-text-muted);
     font-size: var(--leaf-font-size-sm);
@@ -192,17 +267,14 @@
     }
   }
 }
-.leaf-file-list--picture .leaf-file-list__icon {
-  width: 56px;
-  height: 56px;
-  overflow: hidden;
+.leaf-file-list--picture {
+  --leaf-file-visual-size: 52px;
 }
 .leaf-file-list--picture-card {
   .leaf-file-list__items {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
     gap: 12px;
-    padding: 0;
     border: 0;
     background: transparent;
   }
@@ -210,64 +282,80 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: 12px;
-    padding: 10px;
+    padding: 0;
     border: 1px solid var(--leaf-color-border);
     border-radius: var(--leaf-radius-md);
     background: var(--leaf-color-surface);
-    &::before {
-      display: none;
-    }
   }
   .leaf-file-list__icon {
-    width: 100%;
-    height: 116px;
-    overflow: hidden;
+    inline-size: 100%;
+    block-size: auto;
+    aspect-ratio: 16 / 10;
+    border: 0;
+    border-bottom: 1px solid var(--leaf-color-border);
+    border-radius: max(0px, calc(var(--leaf-radius-md) - 1px))
+      max(0px, calc(var(--leaf-radius-md) - 1px)) 0 0;
+    background: var(--leaf-color-surface-muted);
+    > svg {
+      width: 32px;
+      height: 32px;
+    }
   }
-  .leaf-file-list__actions {
-    justify-content: flex-end;
+  .leaf-file-list__details {
+    padding: 12px 12px 0;
   }
-  .leaf-file-list__name {
-    font-size: var(--leaf-font-size-sm);
+  .leaf-file-list__status,
+  .leaf-file-list__progress,
+  .leaf-file-list__error {
+    margin-inline: 12px;
+  }
+  .leaf-file-list__actions {
+    align-self: stretch;
+    margin: auto 0 0;
+    padding: 8px;
   }
-  .leaf-file-list__meta {
-    font-size: 12px;
+  .leaf-file-list__item:not(:has(.leaf-file-list__actions:not(:empty))) {
+    padding-bottom: 12px;
   }
 }
 @media (max-width: 480px) {
-  .leaf-file-list__item {
-    gap: 10px;
-    padding: 12px 8px;
+  .leaf-file-list {
+    --leaf-file-visual-size: 36px;
+    --leaf-file-action-size: max(30px, var(--leaf-control-height-sm));
   }
-  .leaf-file-list__icon {
-    width: 34px;
-    height: 40px;
+  .leaf-file-list--picture {
+    --leaf-file-visual-size: 44px;
+  }
+  .leaf-file-list__item {
+    column-gap: 10px;
+    padding-inline: 12px;
   }
   .leaf-file-list__actions {
-    gap: 0;
+    flex-wrap: wrap;
+    max-width: calc(var(--leaf-file-action-size) * 2 + 4px);
   }
-  .leaf-file-list--picture-card .leaf-file-list__icon {
-    width: 100%;
-    height: 116px;
+  .leaf-file-list--picture-card .leaf-file-list__actions {
+    max-width: none;
   }
 }
 @media (prefers-reduced-motion: reduce) {
   .leaf-file-list__item,
   .leaf-file-list__action,
+  .leaf-file-list__actions > .leaf-button--icon-only,
   .leaf-file-list__progress > span {
     transition: none;
   }
-  .leaf-file-list__complete {
-    animation: none;
-  }
 }
-@keyframes leaf-file-complete {
-  from {
-    opacity: 0;
-    translate: 0 3px;
+@media (forced-colors: active) {
+  .leaf-file-list__icon,
+  .leaf-file-list__status,
+  .leaf-file-list__error {
+    color: CanvasText;
   }
-  to {
-    opacity: 1;
-    translate: 0 0;
+  .leaf-file-list__progress {
+    border: 1px solid CanvasText;
+    > span {
+      background: Highlight;
+    }
   }
 }
diff --git a/packages/react/src/filelist/filelist.test.tsx b/packages/react/src/filelist/filelist.test.tsx
new file mode 100644
index 0000000..fa0d56e
--- /dev/null
+++ b/packages/react/src/filelist/filelist.test.tsx
@@ -0,0 +1,135 @@
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { StrictMode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { ConfigProvider } from '../config-provider';
+import { type FileItem, FileList, type FileListProps } from './filelist';
+
+const view = (items: readonly FileItem[], props: Partial<FileListProps> = {}) => (
+  <StrictMode>
+    <ConfigProvider locale="en-US">
+      <FileList items={items} {...props} />
+    </ConfigProvider>
+  </StrictMode>
+);
+
+describe('FileList', () => {
+  it('falls back for failed thumbnails and retries when the same file gets a new URL', () => {
+    const file = { uid: 'photo', url: '/missing.png' };
+    const { container, rerender } = render(view([file], { listType: 'picture' }));
+    const thumbnail = container.querySelector('img');
+    expect(thumbnail).toHaveAttribute('src', '/missing.png');
+    fireEvent.error(thumbnail as HTMLImageElement);
+    expect(container.querySelector('img')).toBeNull();
+    expect(container.querySelector('.leaf-file-list__icon svg')).not.toBeNull();
+    rerender(view([{ ...file, url: '/available.png' }], { listType: 'picture' }));
+    expect(container.querySelector('img')).toHaveAttribute('src', '/available.png');
+    rerender(view([{ ...file, url: '/available.png' }]));
+    expect(container.querySelector('img')).toBeNull();
+  });
+
+  it('waits for removal, prevents duplicate requests, and lets the affected row retry after rejection', async () => {
+    let reject: (reason: Error) => void = () => {};
+    const onRemove = vi.fn(
+      () =>
+        new Promise<boolean>((_, fail) => {
+          reject = fail;
+        }),
+    );
+    const files = [
+      { uid: 'one', name: 'one.pdf' },
+      { uid: 'two', name: 'two.pdf' },
+    ];
+    render(view(files, { removable: true, onRemove }));
+    const remove = screen.getByRole('button', { name: 'Remove one.pdf' });
+    fireEvent.click(remove);
+    fireEvent.click(remove);
+    expect(onRemove).toHaveBeenCalledOnce();
+    expect(remove).toBeDisabled();
+    expect(remove.closest('li')).toHaveAttribute('aria-busy', 'true');
+    expect(screen.getByRole('button', { name: 'Remove two.pdf' })).toBeEnabled();
+    await act(async () => reject(new Error('Please try again.')));
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveTextContent('Please try again.');
+    expect(alert.closest('li')).toHaveTextContent('one.pdf');
+    expect(
+      within(screen.getAllByRole('listitem')[1] as HTMLElement).queryByRole('alert'),
+    ).toBeNull();
+    expect(remove).toBeEnabled();
+    onRemove.mockImplementationOnce(async () => false);
+    await userEvent.click(remove);
+    await waitFor(() => expect(remove).toBeEnabled());
+    expect(screen.queryByRole('alert')).toBeNull();
+    expect(screen.getByText('one.pdf')).toBeInTheDocument();
+  });
+
+  it('keeps a file row and its feedback when the preceding file is removed', async () => {
+    const files = [{ url: '/first.pdf' }, { url: '/second.pdf' }];
+    const props = {
+      removable: true,
+      onRemove: async () => {
+        throw new Error('Not removed.');
+      },
+    };
+    const { rerender } = render(view(files, props));
+    await userEvent.click(screen.getByRole('button', { name: 'Remove second.pdf' }));
+    expect(await screen.findByRole('alert')).toHaveTextContent('Not removed.');
+    const row = screen.getByText('second.pdf').closest('li');
+    rerender(view(files.slice(1), props));
+    expect(screen.getByText('second.pdf').closest('li')).toBe(row);
+    expect(screen.getByRole('alert')).toHaveTextContent('Not removed.');
+  });
+
+  it('disables built-in actions and honors custom action rendering and callbacks', async () => {
+    const files = [{ uid: 'photo', name: 'photo.png', url: '/photo.png' }];
+    const onPreview = vi.fn(),
+      onDownload = vi.fn(),
+      onRemove = vi.fn();
+    const { rerender } = render(
+      view(files, { disabled: true, removable: true, onPreview, onRemove }),
+    );
+    for (const button of screen.getAllByRole('button')) expect(button).toBeDisabled();
+    const download = screen.getByRole('link', { name: 'Download photo.png' });
+    expect(download).toHaveAttribute('aria-disabled', 'true');
+    expect(download).not.toHaveAttribute('href');
+    await userEvent.click(screen.getByRole('button', { name: 'Preview photo.png' }));
+    expect(onPreview).not.toHaveBeenCalled();
+    rerender(view(files, { onPreview, onDownload }));
+    await userEvent.click(screen.getByRole('button', { name: 'Preview photo.png' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Download photo.png' }));
+    expect(onPreview).toHaveBeenCalledWith(files[0]);
+    expect(onDownload).toHaveBeenCalledWith(files[0]);
+    expect(screen.queryByRole('dialog')).toBeNull();
+    rerender(view(files, { renderActions: () => null }));
+    expect(screen.queryByRole('button')).toBeNull();
+    expect(screen.queryByRole('link')).toBeNull();
+  });
+
+  it('exposes a bounded progress value and displays upload errors beside their file', () => {
+    const files = [
+      { uid: 'upload', name: 'video.mp4', status: 'uploading' as const, percent: -20 },
+      {
+        uid: 'error',
+        name: 'archive.zip',
+        status: 'error' as const,
+        error: 'Connection interrupted.',
+      },
+    ];
+    const { rerender } = render(view(files));
+    expect(screen.getByRole('progressbar', { name: 'Upload progress video.mp4' })).toHaveAttribute(
+      'aria-valuenow',
+      '0',
+    );
+    expect(screen.getByText('Connection interrupted.').closest('li')).toHaveTextContent(
+      'archive.zip',
+    );
+    for (const [percent, value] of [
+      [120, '100'],
+      [Number.NaN, '0'],
+      [42.4, '42'],
+    ] as const) {
+      rerender(view([{ ...files[0], percent }]));
+      expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', value);
+    }
+  });
+});
diff --git a/packages/react/src/filelist/filelist.tsx b/packages/react/src/filelist/filelist.tsx
index 8b11b16..350f190 100644
--- a/packages/react/src/filelist/filelist.tsx
+++ b/packages/react/src/filelist/filelist.tsx
@@ -1,5 +1,7 @@
 import {
   Check,
+  CircleAlert,
+  Clock3,
   Download,
   Eye,
   File,
@@ -10,14 +12,17 @@ import {
   FileSpreadsheet,
   FileText,
   FileVideo2,
+  Paperclip,
   Trash2,
 } from 'lucide-react';
-import { type HTMLAttributes, type ReactNode, useRef, useState } from 'react';
-import { Button } from '../button';
-import { ImagePreview } from '../image';
-import { Modal } from '../modal';
+import { type HTMLAttributes, type ReactNode, useEffect, useRef, useState } from 'react';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { ImagePreviewControl as ImagePreview } from '../image/image';
+import { ModalBase } from '../modal/modal';
 import { classes } from '../shared/classes';
 import { useListMotion } from '../shared/motion';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
 import { fileExtension, fileKind, fileName, formatFileSize, safeFileUrl } from './model';
 
@@ -55,9 +60,216 @@ const icons = {
   code: FileCode2,
   file: File,
 };
-const itemKey = (file: FileItem, index: number) =>
-  file.uid ?? `${file.url ?? fileName(file)}-${index}`;
-export function FileList({
+
+function FileVisual({ file, listType }: { file: FileItem; listType: FileListProps['listType'] }) {
+  const kind = fileKind(file);
+  const Icon = icons[kind];
+  const url = safeFileUrl(file.url);
+  const [failedUrl, setFailedUrl] = useState<string>();
+  const thumbnail = Boolean(listType !== 'text' && kind === 'image' && url && failedUrl !== url);
+  return (
+    <span
+      className="leaf-file-list__icon"
+      data-kind={kind}
+      data-extension={fileExtension(file)}
+      data-thumbnail={thumbnail || undefined}
+      aria-hidden="true"
+    >
+      <Icon size={22} />
+      {thumbnail && (
+        <img src={url} alt="" loading="lazy" decoding="async" onError={() => setFailedUrl(url)} />
+      )}
+    </span>
+  );
+}
+
+interface FileRowProps
+  extends Pick<
+    FileListProps,
+    'downloadable' | 'previewable' | 'removable' | 'onDownload' | 'onRemove' | 'renderActions'
+  > {
+  file: FileItem;
+  motionKey: string;
+  disabled: boolean;
+  listType: FileListProps['listType'];
+  onPreview: (file: FileItem) => void;
+}
+function FileRow({
+  file,
+  motionKey,
+  disabled,
+  listType,
+  downloadable,
+  previewable,
+  removable,
+  onDownload,
+  onRemove,
+  onPreview,
+  renderActions,
+}: FileRowProps) {
+  const t = useText();
+  const format = useFormattedText();
+  const [removing, setRemoving] = useState(false);
+  const [removeError, setRemoveError] = useState('');
+  const pending = useRef(false);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const name = fileName(file);
+  const kind = fileKind(file);
+  const url = safeFileUrl(file.url);
+  const extension = fileExtension(file).toUpperCase();
+  const size = file.size ?? file.originFile?.size;
+  const formattedSize = size === undefined ? '' : formatFileSize(size);
+  const percent = Number.isFinite(file.percent) ? Math.max(0, Math.min(100, file.percent ?? 0)) : 0;
+  const canPreview = previewable && url && ['image', 'video', 'audio'].includes(kind);
+  const status =
+    file.status === 'uploading' ? (
+      <>
+        {t('fileList.uploading')} <span>{Math.round(percent)}%</span>
+      </>
+    ) : file.status === 'done' ? (
+      <>
+        <Check size={13} aria-hidden="true" />
+        {t('fileList.uploadComplete')}
+      </>
+    ) : file.status === 'error' ? (
+      <>
+        <CircleAlert size={13} aria-hidden="true" />
+        {t('fileList.uploadFailed')}
+      </>
+    ) : file.status === 'cancelled' ? (
+      t('fileList.cancelled')
+    ) : file.status === 'ready' ? (
+      <>
+        <Clock3 size={13} aria-hidden="true" />
+        {t('fileList.ready')}
+      </>
+    ) : null;
+  const actions = (
+    <>
+      {canPreview && (
+        <ButtonControl
+          className="leaf-file-list__action"
+          variant="ghost"
+          size="sm"
+          disabled={disabled}
+          startIcon={<Eye size={16} />}
+          aria-label={format('fileList.preview', { name })}
+          title={t('common.preview')}
+          onClick={() => onPreview(file)}
+        />
+      )}
+      {downloadable &&
+        url &&
+        (onDownload ? (
+          <ButtonControl
+            className="leaf-file-list__action"
+            variant="ghost"
+            size="sm"
+            disabled={disabled}
+            startIcon={<Download size={16} />}
+            aria-label={format('fileList.download', { name })}
+            title={t('common.download')}
+            onClick={() => onDownload(file)}
+          />
+        ) : (
+          <a
+            className="leaf-file-list__action"
+            href={disabled ? undefined : url}
+            download={name}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={format('fileList.download', { name })}
+            title={t('common.download')}
+            aria-disabled={disabled || undefined}
+            role={disabled ? 'link' : undefined}
+            tabIndex={disabled ? -1 : undefined}
+          >
+            <Download size={16} aria-hidden="true" />
+          </a>
+        ))}
+      {removable && onRemove && (
+        <ButtonControl
+          className="leaf-file-list__action leaf-file-list__remove"
+          variant="ghost"
+          size="sm"
+          disabled={disabled}
+          loading={removing}
+          startIcon={<Trash2 size={16} />}
+          aria-label={format('fileList.remove', { name })}
+          title={t('common.remove')}
+          onClick={async () => {
+            if (pending.current) return;
+            pending.current = true;
+            setRemoving(true);
+            setRemoveError('');
+            try {
+              await onRemove(file);
+            } catch (reason) {
+              if (mounted.current)
+                setRemoveError(reason instanceof Error ? reason.message : String(reason));
+            } finally {
+              pending.current = false;
+              if (mounted.current) setRemoving(false);
+            }
+          }}
+        />
+      )}
+    </>
+  );
+  const renderedActions = renderActions ? renderActions(file, actions) : actions;
+  return (
+    <li
+      className="leaf-file-list__item"
+      data-status={file.status}
+      data-motion-key={motionKey}
+      aria-busy={file.status === 'uploading' || removing || undefined}
+    >
+      <FileVisual file={file} listType={listType} />
+      <div className="leaf-file-list__details">
+        <span className="leaf-file-list__name" title={name}>
+          {name}
+        </span>
+        <div className="leaf-file-list__meta">
+          <span className="leaf-file-list__type">{extension || t('fileList.fileType')}</span>
+          {formattedSize && <span className="leaf-file-list__size">{formattedSize}</span>}
+        </div>
+      </div>
+      {status && (
+        <span className="leaf-file-list__status" data-status={file.status}>
+          {status}
+        </span>
+      )}
+      {file.status === 'uploading' && (
+        <div
+          className="leaf-file-list__progress"
+          role="progressbar"
+          aria-label={format('fileList.uploadProgress', { name })}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(percent)}
+        >
+          <span style={{ width: `${percent}%` }} />
+        </div>
+      )}
+      {(removeError || (file.status === 'error' && file.error)) && (
+        <p className="leaf-file-list__error" role={removeError ? 'alert' : undefined}>
+          {removeError || file.error}
+        </p>
+      )}
+      {renderedActions !== null && renderedActions !== false && (
+        <div className="leaf-file-list__actions">{renderedActions}</div>
+      )}
+    </li>
+  );
+}
+
+export function FileListControl({
   items,
   downloadable = true,
   previewable = true,
@@ -74,11 +286,15 @@ export function FileList({
 }: FileListProps) {
   const t = useText();
   const root = useRef<HTMLDivElement>(null);
-  const keys = items.map(itemKey);
-  useListMotion(root, JSON.stringify(keys), '.leaf-file-list__item[data-motion-key]');
+  const occurrences = new Map<string, number>();
+  const keys = items.map((file) => {
+    const identity = file.uid ?? file.url ?? fileName(file);
+    const occurrence = occurrences.get(identity) ?? 0;
+    occurrences.set(identity, occurrence + 1);
+    return JSON.stringify([identity, occurrence]);
+  });
+  useListMotion(root, JSON.stringify(keys), '.leaf-file-list__item[data-motion-key]', listType);
   const [preview, setPreview] = useState<FileItem | null>(null);
-  const [pending, setPending] = useState<string[]>([]);
-  const [error, setError] = useState('');
   const selected = preview
     ? items.find((file) =>
         preview.uid
@@ -101,160 +317,36 @@ export function FileList({
     >
       {items.length ? (
         <ul className="leaf-file-list__items">
-          {items.map((file, index) => {
-            const key = itemKey(file, index);
-            const name = fileName(file);
-            const kind = fileKind(file);
-            const Icon = icons[kind];
-            const url = safeFileUrl(file.url);
-            const size = file.size ?? file.originFile?.size;
-            const isPending = pending.includes(key);
-            const canPreview = previewable && url && ['image', 'video', 'audio'].includes(kind);
-            const actions = (
-              <>
-                {canPreview && (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    disabled={disabled}
-                    startIcon={<Eye size={16} />}
-                    aria-label={`${t('预览', 'Preview')} ${name}`}
-                    title={t('预览', 'Preview')}
-                    onClick={() => (onPreview ? onPreview(file) : setPreview(file))}
-                  />
-                )}
-                {downloadable &&
-                  url &&
-                  (onDownload ? (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      disabled={disabled}
-                      startIcon={<Download size={16} />}
-                      aria-label={`${t('下载', 'Download')} ${name}`}
-                      title={t('下载', 'Download')}
-                      onClick={() => onDownload(file)}
-                    />
-                  ) : (
-                    <a
-                      className="leaf-file-list__action"
-                      href={disabled ? undefined : url}
-                      download={name}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label={`${t('下载', 'Download')} ${name}`}
-                      title={t('下载', 'Download')}
-                      aria-disabled={disabled || undefined}
-                      tabIndex={disabled ? -1 : undefined}
-                    >
-                      <Download size={16} aria-hidden="true" />
-                    </a>
-                  ))}
-                {removable && onRemove && (
-                  <Button
-                    className="leaf-file-list__remove"
-                    variant="ghost"
-                    size="sm"
-                    disabled={disabled || isPending}
-                    loading={isPending}
-                    startIcon={<Trash2 size={15} />}
-                    aria-label={`${t('移除', 'Remove')} ${name}`}
-                    title={t('移除', 'Remove')}
-                    onClick={async () => {
-                      if (isPending) return;
-                      setPending((previous) => [...previous, key]);
-                      setError('');
-                      try {
-                        await onRemove(file);
-                      } catch (reason) {
-                        setError(reason instanceof Error ? reason.message : String(reason));
-                      } finally {
-                        setPending((previous) => previous.filter((value) => value !== key));
-                      }
-                    }}
-                  />
-                )}
-              </>
-            );
-            const percent = Math.max(0, Math.min(100, file.percent ?? 0));
-            return (
-              <li
-                key={key}
-                className="leaf-file-list__item"
-                data-status={file.status}
-                data-motion-key={key}
-              >
-                <span
-                  className="leaf-file-list__icon"
-                  data-kind={kind}
-                  data-extension={fileExtension(file)}
-                >
-                  {listType !== 'text' && kind === 'image' && url ? (
-                    <img src={url} alt="" loading="lazy" />
-                  ) : (
-                    <Icon size={21} aria-hidden="true" />
-                  )}
-                </span>
-                <div className="leaf-file-list__details">
-                  <span className="leaf-file-list__name" title={name}>
-                    {name}
-                  </span>
-                  <span className="leaf-file-list__meta">
-                    <span className="leaf-file-list__type">
-                      {fileExtension(file).toUpperCase() || t('文件', 'FILE')}
-                    </span>
-                    {size !== undefined && formatFileSize(size) && (
-                      <span>{formatFileSize(size)}</span>
-                    )}
-                    {file.status === 'uploading' && (
-                      <span>
-                        {t('上传中', 'Uploading')} {Math.round(percent)}%
-                      </span>
-                    )}
-                    {file.status === 'error' && (
-                      <span className="leaf-file-list__error">
-                        {file.error ?? t('上传失败', 'Upload failed')}
-                      </span>
-                    )}
-                    {file.status === 'cancelled' && <span>{t('已取消', 'Cancelled')}</span>}
-                    {file.status === 'done' && (
-                      <span className="leaf-file-list__complete">
-                        <Check size={12} aria-hidden="true" /> {t('上传完成', 'Upload complete')}
-                      </span>
-                    )}
-                    {file.status === 'ready' && <span>{t('待上传', 'Ready')}</span>}
-                  </span>
-                  {file.status === 'uploading' && (
-                    <div
-                      className="leaf-file-list__progress"
-                      role="progressbar"
-                      aria-label={`${t('上传进度', 'Upload progress')} ${name}`}
-                      aria-valuemin={0}
-                      aria-valuemax={100}
-                      aria-valuenow={Math.round(percent)}
-                    >
-                      <span style={{ width: `${percent}%` }} />
-                    </div>
-                  )}
-                </div>
-                <div className="leaf-file-list__actions">
-                  {renderActions ? renderActions(file, actions) : actions}
-                </div>
-              </li>
-            );
-          })}
+          {items.map((file, position) => (
+            <FileRow
+              key={keys[position]}
+              motionKey={keys[position] ?? String(position)}
+              file={file}
+              listType={listType}
+              disabled={disabled}
+              downloadable={downloadable}
+              previewable={previewable}
+              removable={removable}
+              onDownload={onDownload}
+              onRemove={onRemove}
+              renderActions={renderActions}
+              onPreview={(file) => (onPreview ? onPreview(file) : setPreview(file))}
+            />
+          ))}
         </ul>
       ) : (
-        <div className="leaf-file-list__empty">{emptyContent ?? t('暂无文件', 'No files')}</div>
-      )}
-      {error && (
-        <p role="alert" className="leaf-file-list__error">
-          {error}
-        </p>
+        <div className="leaf-file-list__empty">
+          {emptyContent ?? (
+            <>
+              <Paperclip size={22} aria-hidden="true" />
+              <span>{t('fileList.noFiles')}</span>
+            </>
+          )}
+        </div>
       )}
       <ImagePreview
         items={images.map((file) => ({
-          src: file.url ?? '',
+          src: safeFileUrl(file.url) ?? '',
           alt: fileName(file),
           downloadName: fileName(file),
         }))}
@@ -262,13 +354,13 @@ export function FileList({
         index={Math.max(0, index)}
         onIndexChange={(next) => setPreview(images[next] ?? null)}
         onClose={() => setPreview(null)}
-        downloadable={downloadable}
+        downloadable={downloadable && !disabled}
       />
-      <Modal
+      <ModalBase
         open={Boolean(previewUrl && (kind === 'video' || kind === 'audio'))}
         title={selected ? fileName(selected) : ''}
         footer={null}
-        width={800}
+        width={kind === 'audio' ? 520 : 800}
         onClose={() => setPreview(null)}
         className="leaf-file-list__media-modal"
       >
@@ -294,7 +386,12 @@ export function FileList({
             <track kind="captions" />
           </audio>
         )}
-      </Modal>
+      </ModalBase>
     </div>
   );
 }
+
+export function FileList(rawProps: FileListProps) {
+  const props = useComponentProps('FileList', rawProps);
+  return <FileListControl {...props} />;
+}
diff --git a/packages/react/src/flex/flex.scss b/packages/react/src/flex/flex.scss
new file mode 100644
index 0000000..463d1da
--- /dev/null
+++ b/packages/react/src/flex/flex.scss
@@ -0,0 +1,3 @@
+.leaf-flex {
+  min-width: 0;
+}
diff --git a/packages/react/src/flex/flex.test.tsx b/packages/react/src/flex/flex.test.tsx
new file mode 100644
index 0000000..9dc38fc
--- /dev/null
+++ b/packages/react/src/flex/flex.test.tsx
@@ -0,0 +1,47 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { Flex } from './flex';
+
+describe('Flex', () => {
+  it('preserves direct children, native events, refs and form participation', () => {
+    const ref = createRef<HTMLDivElement>();
+    const click = vi.fn();
+    render(
+      <form aria-label="Settings">
+        <Flex ref={ref} onClick={click} aria-label="Actions" data-layout="actions">
+          <input name="title" defaultValue="Leaf" aria-label="Project" />
+          <button type="button">Save</button>
+        </Flex>
+      </form>,
+    );
+    const button = screen.getByRole('button', { name: 'Save' });
+    expect(button.parentElement).toBe(ref.current);
+    expect(ref.current?.children).toHaveLength(2);
+    expect(ref.current).toHaveAttribute('data-layout', 'actions');
+    fireEvent.click(button);
+    expect(click).toHaveBeenCalledOnce();
+    expect(new FormData(screen.getByRole('form') as HTMLFormElement).get('title')).toBe('Leaf');
+  });
+
+  it('keeps theme spacing as inherited variables and lets caller styles take precedence', () => {
+    const { rerender } = render(
+      <Flex aria-label="Layout" gap={['sm', 12]} direction="column" wrap />,
+    );
+    const layout = screen.getByLabelText('Layout');
+    expect(layout.style.gap).toBe('var(--leaf-spacing-sm, 8px) 12px');
+    rerender(
+      <Flex
+        aria-label="Layout"
+        inline
+        gap="lg"
+        direction="column"
+        style={{ flexDirection: 'row-reverse', gap: '2rem' }}
+      />,
+    );
+    expect(layout.style.display).toBe('inline-flex');
+    expect(layout.style.flexDirection).toBe('row-reverse');
+    expect(layout.style.gap).toBe('2rem');
+    expect(layout.children).toHaveLength(0);
+  });
+});
diff --git a/packages/react/src/flex/flex.tsx b/packages/react/src/flex/flex.tsx
new file mode 100644
index 0000000..c8c2cfc
--- /dev/null
+++ b/packages/react/src/flex/flex.tsx
@@ -0,0 +1,47 @@
+import { type CSSProperties, forwardRef, type HTMLAttributes } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { classes } from '../shared/classes';
+
+export type FlexGap = number | string;
+
+export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  gap?: FlexGap | readonly [FlexGap, FlexGap];
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+  wrap?: boolean | 'nowrap' | 'wrap' | 'wrap-reverse';
+  inline?: boolean;
+}
+
+function gapValue(value: FlexGap) {
+  if (typeof value === 'number') return `${value}px`;
+  const sizes = { sm: 8, md: 16, lg: 24 };
+  if (value === 'sm' || value === 'md' || value === 'lg')
+    return `var(--leaf-spacing-${value}, ${sizes[value]}px)`;
+  return value;
+}
+
+/** Lay out direct children without adding item wrappers. */
+export const Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(rawProps: FlexProps, ref) {
+  const {
+    direction = 'row',
+    gap = 0,
+    align = 'stretch',
+    justify = 'start',
+    wrap = false,
+    inline = false,
+    className,
+    style,
+    ...props
+  } = useComponentProps('Flex', rawProps);
+  const layout: CSSProperties = {
+    display: inline ? 'inline-flex' : 'flex',
+    flexDirection: direction,
+    gap: typeof gap === 'object' ? gap.map(gapValue).join(' ') : gapValue(gap),
+    alignItems: align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align,
+    justifyContent: justify === 'start' ? 'flex-start' : justify === 'end' ? 'flex-end' : justify,
+    flexWrap: typeof wrap === 'boolean' ? (wrap ? 'wrap' : 'nowrap') : wrap,
+    ...style,
+  };
+  return <div {...props} ref={ref} className={classes('leaf-flex', className)} style={layout} />;
+});
diff --git a/packages/react/src/flex/index.ts b/packages/react/src/flex/index.ts
new file mode 100644
index 0000000..8c44be8
--- /dev/null
+++ b/packages/react/src/flex/index.ts
@@ -0,0 +1 @@
+export { Flex, type FlexGap, type FlexProps } from './flex';
diff --git a/packages/react/src/floatbutton/floatbutton.scss b/packages/react/src/floatbutton/floatbutton.scss
index aec52c4..327f407 100644
--- a/packages/react/src/floatbutton/floatbutton.scss
+++ b/packages/react/src/floatbutton/floatbutton.scss
@@ -22,10 +22,6 @@
   }
 }
 .leaf-float-group {
-  position: fixed;
-  inset-inline-end: 24px;
-  bottom: 24px;
-  z-index: 50;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -33,6 +29,12 @@
   padding: 0;
   margin: 0;
   min-width: 0;
+  &--fixed {
+    position: fixed;
+    inset-inline-end: 24px;
+    bottom: 24px;
+    z-index: 50;
+  }
   &__actions {
     display: grid;
     grid-template-rows: 0fr;
diff --git a/packages/react/src/floatbutton/floatbutton.tsx b/packages/react/src/floatbutton/floatbutton.tsx
index f5873e6..3885b2d 100644
--- a/packages/react/src/floatbutton/floatbutton.tsx
+++ b/packages/react/src/floatbutton/floatbutton.tsx
@@ -1,17 +1,23 @@
 import { Plus } from 'lucide-react';
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { Button, type ButtonProps } from '../button';
+import { ButtonControl, type ButtonProps } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { inertProps } from '../shared/inert';
 import { useText } from '../shared/use-text';
-import { Tooltip } from '../tooltip';
+import { TooltipControl as Tooltip } from '../tooltip/tooltip';
 export interface FloatButtonProps extends ButtonProps {
   tooltip?: ReactNode;
   fixed?: boolean;
 }
-export function FloatButton({ tooltip, fixed = true, className, ...props }: FloatButtonProps) {
+export function FloatButtonControl({
+  tooltip,
+  fixed = true,
+  className,
+  ...props
+}: FloatButtonProps) {
   const button = (
-    <Button
+    <ButtonControl
       {...props}
       className={classes('leaf-float-button', fixed && 'leaf-float-button--fixed', className)}
     />
@@ -27,6 +33,7 @@ export interface FloatButtonAction {
 }
 export interface FloatButtonGroupProps {
   actions: readonly FloatButtonAction[];
+  fixed?: boolean;
   expandable?: boolean;
   icon?: ReactNode;
   open?: boolean;
@@ -34,15 +41,17 @@ export interface FloatButtonGroupProps {
   onOpenChange?: (open: boolean) => void;
   className?: string;
 }
-export function FloatButtonGroup({
-  actions,
-  expandable = true,
-  icon,
-  open: controlled,
-  defaultOpen = false,
-  onOpenChange,
-  className,
-}: FloatButtonGroupProps) {
+export function FloatButtonGroup(rawProps: FloatButtonGroupProps) {
+  const {
+    actions,
+    fixed = true,
+    expandable = true,
+    icon,
+    open: controlled,
+    defaultOpen = false,
+    onOpenChange,
+    className,
+  } = useComponentProps('FloatButtonGroup', rawProps);
   const t = useText();
   const [internal, setInternal] = useState(defaultOpen),
     open = controlled ?? internal;
@@ -68,8 +77,8 @@ export function FloatButtonGroup({
   return (
     <fieldset
       ref={root}
-      aria-label={t('快捷操作', 'Quick actions')}
-      className={classes('leaf-float-group', className)}
+      aria-label={t('floatButton.quickActions')}
+      className={classes('leaf-float-group', fixed && 'leaf-float-group--fixed', className)}
       onKeyDown={(event) => {
         if (event.key === 'Escape') {
           event.preventDefault();
@@ -95,7 +104,7 @@ export function FloatButtonGroup({
                     { '--leaf-float-order': actions.length - index - 1 } as React.CSSProperties
                   }
                 >
-                  <FloatButton
+                  <FloatButtonControl
                     fixed={false}
                     tooltip={action.label}
                     aria-label={typeof action.label === 'string' ? action.label : action.key}
@@ -113,9 +122,9 @@ export function FloatButtonGroup({
         </div>
       </div>
       {expandable && (
-        <FloatButton
+        <FloatButtonControl
           fixed={false}
-          aria-label={t('快捷操作', 'Quick actions')}
+          aria-label={t('floatButton.quickActions')}
           aria-expanded={open}
           startIcon={
             <span className="leaf-float-group__trigger-icon" data-open={open || undefined}>
@@ -129,3 +138,8 @@ export function FloatButtonGroup({
   );
 }
 export const FAB = FloatButton;
+
+export function FloatButton(rawProps: FloatButtonProps) {
+  const props = useComponentProps('FloatButton', rawProps);
+  return <FloatButtonControl {...props} />;
+}
diff --git a/packages/react/src/floatbutton/index.ts b/packages/react/src/floatbutton/index.ts
index db6d7a1..ba5b914 100644
--- a/packages/react/src/floatbutton/index.ts
+++ b/packages/react/src/floatbutton/index.ts
@@ -1 +1,2 @@
-export * from './floatbutton';
+export type { FloatButtonAction, FloatButtonGroupProps, FloatButtonProps } from './floatbutton';
+export { FAB, FloatButton, FloatButtonGroup } from './floatbutton';
diff --git a/packages/react/src/form/form.scss b/packages/react/src/form/form.scss
index 8e4b39a..9cb50d0 100644
--- a/packages/react/src/form/form.scss
+++ b/packages/react/src/form/form.scss
@@ -56,6 +56,7 @@
     color: var(--leaf-color-text-muted);
     font-size: var(--leaf-font-size-sm);
     line-height: 1.5;
+    overflow-wrap: anywhere;
   }
   &__error {
     color: var(--leaf-color-danger);
diff --git a/packages/react/src/form/form.tsx b/packages/react/src/form/form.tsx
index 6e750a6..e499df4 100644
--- a/packages/react/src/form/form.tsx
+++ b/packages/react/src/form/form.tsx
@@ -13,6 +13,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import type { LeafThemeStyle } from '../theme';
@@ -64,8 +65,8 @@ export function FieldScope({ children }: { children: ReactNode }) {
   return <FieldContext.Provider value={undefined}>{children}</FieldContext.Provider>;
 }
 
-export const Form = forwardRef<HTMLFormElement, FormProps>(function Form(
-  {
+export const Form = forwardRef<HTMLFormElement, FormProps>(function Form(rawProps: FormProps, ref) {
+  const {
     layout = 'horizontal',
     labelWidth = 'auto',
     labelAlign = 'right',
@@ -74,9 +75,7 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(function Form(
     style,
     children,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('Form', rawProps);
   const widths = useRef(new Map<string, number>());
   const invalidFocusTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   useEffect(() => () => clearTimeout(invalidFocusTimer.current), []);
@@ -135,18 +134,19 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(function Form(
 });
 Form.displayName = 'Form';
 
-export function FormField({
-  label,
-  htmlFor,
-  required,
-  help,
-  error,
-  labelWidth,
-  children,
-  className,
-  style,
-  ...props
-}: FormFieldProps) {
+export function FormField(rawProps: FormFieldProps) {
+  const {
+    label,
+    htmlFor,
+    required,
+    help,
+    error,
+    labelWidth,
+    children,
+    className,
+    style,
+    ...props
+  } = useComponentProps('FormField', rawProps);
   const form = useContext(FormContext);
   const { messages } = useLeafConfig();
   const generated = useId();
@@ -217,7 +217,9 @@ export function FormField({
           if (event.defaultPrevented) return;
           event.preventDefault();
           const target = event.target as HTMLInputElement;
-          setValidationError(target.validity?.valueMissing ? messages.required : messages.invalid);
+          setValidationError(
+            target.validity?.valueMissing ? messages.form.required : messages.form.invalid,
+          );
           document.getElementById(inputId)?.focus();
         }}
         onInput={(event) => {
@@ -262,14 +264,11 @@ export interface FormGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetEleme
   legend?: ReactNode;
   description?: ReactNode;
 }
-export function FormGroup({
-  legend,
-  description,
-  disabled,
-  children,
-  className,
-  ...props
-}: FormGroupProps) {
+export function FormGroup(rawProps: FormGroupProps) {
+  const { legend, description, disabled, children, className, ...props } = useComponentProps(
+    'FormGroup',
+    rawProps,
+  );
   const inherited = useContext(FormContext);
   const context = useMemo(
     () => ({ ...inherited, disabled: inherited.disabled || Boolean(disabled) }),
@@ -293,21 +292,20 @@ export interface FormErrorSummaryProps extends Omit<HTMLAttributes<HTMLDivElemen
   errors?: readonly FormError[];
   title?: ReactNode;
 }
-export function FormErrorSummary({
-  errors: suppliedErrors,
-  title,
-  className,
-  ...props
-}: FormErrorSummaryProps) {
+export function FormErrorSummary(rawProps: FormErrorSummaryProps) {
+  const {
+    errors: suppliedErrors,
+    title,
+    className,
+    ...props
+  } = useComponentProps('FormErrorSummary', rawProps);
   const context = useContext(FormContext);
-  const { locale } = useLeafConfig();
+  const { messages } = useLeafConfig();
   const errors = suppliedErrors ?? context.errors;
   if (!errors.length) return null;
   return (
     <div {...props} role="alert" className={classes('leaf-form-error-summary', className)}>
-      <strong>
-        {title ?? (locale === 'en-US' ? 'Please check the following fields' : '请检查以下字段')}
-      </strong>
+      <strong>{title ?? messages.form.errorSummary}</strong>
       <ul>
         {errors.map((error) => (
           <li key={error.fieldId}>
diff --git a/packages/react/src/form/index.ts b/packages/react/src/form/index.ts
index 9c0a55d..dd6f81d 100644
--- a/packages/react/src/form/index.ts
+++ b/packages/react/src/form/index.ts
@@ -9,4 +9,5 @@ export { Form, FormErrorSummary, FormField, FormGroup } from './form';
 export type { FormListField, FormListOperations, FormListProps } from './list';
 export { FormList } from './list';
 
-export * from './validation';
+export type { FormValidationApi, FormValidationOptions } from './validation';
+export { useFormValidation } from './validation';
diff --git a/packages/react/src/form/list.tsx b/packages/react/src/form/list.tsx
index 7458e12..8d8d92c 100644
--- a/packages/react/src/form/list.tsx
+++ b/packages/react/src/form/list.tsx
@@ -1,4 +1,8 @@
 import { type HTMLAttributes, type ReactNode, useEffect, useId, useRef, useState } from 'react';
+import {
+  mergeComponentProps,
+  useGenericComponentDefaults,
+} from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useListMotion } from '../shared/motion';
 export interface FormListField<T> {
@@ -22,16 +26,17 @@ export interface FormListProps<T>
   itemKey?: (value: T) => string;
   children: (fields: readonly FormListField<T>[], operations: FormListOperations<T>) => ReactNode;
 }
-export function FormList<T>({
-  name,
-  value,
-  defaultValue = [],
-  onChange,
-  itemKey,
-  children,
-  className,
-  ...props
-}: FormListProps<T>) {
+export function FormList<T>(rawProps: FormListProps<T>) {
+  const {
+    name,
+    value,
+    defaultValue = [],
+    onChange,
+    itemKey,
+    children,
+    className,
+    ...props
+  } = mergeComponentProps<FormListProps<T>>(useGenericComponentDefaults('FormList'), rawProps);
   const id = useId();
   const sequence = useRef(0);
   const [internal, setInternal] = useState<readonly T[]>(defaultValue);
diff --git a/packages/react/src/grid/grid.tsx b/packages/react/src/grid/grid.tsx
index 4e51528..2ed26bd 100644
--- a/packages/react/src/grid/grid.tsx
+++ b/packages/react/src/grid/grid.tsx
@@ -1,4 +1,5 @@
 import { forwardRef, type HTMLAttributes } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import type { LeafThemeStyle } from '../theme';
 
@@ -8,8 +9,8 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
   gap?: number | string | readonly [number | string, number | string];
   align?: 'start' | 'center' | 'end' | 'stretch';
 }
-export const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
-  { columns = 3, gap = 16, align = 'stretch', className, style, ...props },
+export const GridControl = forwardRef<HTMLDivElement, GridProps>(function GridControl(
+  { columns = 3, gap = 16, align = 'stretch', className, style, ...props }: GridProps,
   ref,
 ) {
   const variables: LeafThemeStyle = {
@@ -34,10 +35,8 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
 export interface RowProps extends Omit<GridProps, 'columns' | 'gap'> {
   gutter?: GridProps['gap'];
 }
-export const Row = forwardRef<HTMLDivElement, RowProps>(function Row(
-  { gutter = 16, className, style, ...props },
-  ref,
-) {
+export const Row = forwardRef<HTMLDivElement, RowProps>(function Row(rawProps: RowProps, ref) {
+  const { gutter = 16, className, style, ...props } = useComponentProps('Row', rawProps);
   const [vertical, horizontal] = typeof gutter === 'object' ? gutter : [gutter, gutter];
   const unit = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);
   const variables: LeafThemeStyle = {
@@ -47,7 +46,7 @@ export const Row = forwardRef<HTMLDivElement, RowProps>(function Row(
     ...style,
   };
   return (
-    <Grid
+    <GridControl
       {...props}
       ref={ref}
       columns={24}
@@ -66,10 +65,19 @@ export interface ColProps extends HTMLAttributes<HTMLDivElement> {
   lg?: number;
   xl?: number;
 }
-export const Col = forwardRef<HTMLDivElement, ColProps>(function Col(
-  { span = 24, offset = 0, xs, sm, md, lg, xl, className, style, ...props },
-  ref,
-) {
+export const Col = forwardRef<HTMLDivElement, ColProps>(function Col(rawProps: ColProps, ref) {
+  const {
+    span = 24,
+    offset = 0,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    className,
+    style,
+    ...props
+  } = useComponentProps('Col', rawProps);
   const variables: LeafThemeStyle = { ...style };
   let last = span;
   for (const [point, value] of Object.entries({ xs, sm, md, lg, xl })) {
@@ -94,3 +102,9 @@ export const Col = forwardRef<HTMLDivElement, ColProps>(function Col(
     </>
   );
 });
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(rawProps: GridProps, ref) {
+  const props = useComponentProps('Grid', rawProps);
+  return <GridControl {...props} ref={ref} />;
+});
+Grid.displayName = 'Grid';
diff --git a/packages/react/src/image/image.tsx b/packages/react/src/image/image.tsx
index 76009c8..1de2d31 100644
--- a/packages/react/src/image/image.tsx
+++ b/packages/react/src/image/image.tsx
@@ -13,11 +13,13 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Loading } from '../loading';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { LoadingControl as Loading } from '../loading/loading';
 import { classes } from '../shared/classes';
 import { useMergedRef } from '../shared/field';
 import { useClient } from '../shared/use-client';
 import { useControllable } from '../shared/use-controllable';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
 
 export interface ImagePreviewItem {
@@ -39,7 +41,7 @@ export interface ImagePreviewProps {
   downloadable?: boolean;
 }
 const Viewer = lazy(() => import('./viewer').then((module) => ({ default: module.ImageViewer })));
-export function ImagePreview(props: ImagePreviewProps) {
+export function ImagePreviewControl(props: ImagePreviewProps) {
   const client = useClient();
   const [visited, setVisited] = useState(props.open);
   useEffect(() => {
@@ -69,18 +71,19 @@ export interface ImagePreviewGroupProps {
   thumbnails?: boolean;
   downloadable?: boolean;
 }
-export function ImagePreviewGroup({
-  children,
-  items,
-  open: controlled,
-  defaultOpen = false,
-  onOpenChange,
-  index: controlledIndex,
-  defaultIndex = 0,
-  onIndexChange,
-  thumbnails = true,
-  downloadable = false,
-}: ImagePreviewGroupProps) {
+export function ImagePreviewGroup(rawProps: ImagePreviewGroupProps) {
+  const {
+    children,
+    items,
+    open: controlled,
+    defaultOpen = false,
+    onOpenChange,
+    index: controlledIndex,
+    defaultIndex = 0,
+    onIndexChange,
+    thumbnails = true,
+    downloadable = false,
+  } = useComponentProps('ImagePreviewGroup', rawProps);
   const [open, setOpen] = useControllable(controlled, defaultOpen, onOpenChange);
   const [index, setIndex] = useControllable(controlledIndex, defaultIndex, onIndexChange);
   const [registered, setRegistered] = useState<{ id: string; item: ImagePreviewItem }[]>([]);
@@ -111,7 +114,7 @@ export function ImagePreviewGroup({
   return (
     <GroupContext.Provider value={context}>
       {children}
-      <ImagePreview
+      <ImagePreviewControl
         items={items ?? registered.map((entry) => entry.item)}
         open={open}
         index={index}
@@ -130,7 +133,10 @@ export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 }
 export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
-  {
+  rawProps: ImageProps,
+  ref,
+) {
+  const {
     src,
     alt = '',
     preview = true,
@@ -144,10 +150,9 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
     onLoad,
     onError,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('Image', rawProps);
   const t = useText();
+  const format = useFormattedText();
   const group = useContext(GroupContext);
   const id = useId();
   const native = useRef<HTMLImageElement>(null);
@@ -194,7 +199,7 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
         <button
           type="button"
           className="leaf-image__trigger"
-          aria-label={`${t('预览图片', 'Preview image')}${alt ? `: ${alt}` : ''}`}
+          aria-label={format('image.previewImage', { alt: alt ? `: ${alt}` : '' })}
           onClick={(event) => {
             if (!event.defaultPrevented && state !== 'error') {
               if (group) group.show(id);
@@ -219,13 +224,13 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
         <span
           className="leaf-image__placeholder"
           role="img"
-          aria-label={alt || t('图片加载失败', 'Image unavailable')}
+          aria-label={alt || t('image.imageUnavailable')}
         >
           {fallback ?? <ImageOff size={24} aria-hidden="true" />}
         </span>
       )}
       {!group && (
-        <ImagePreview
+        <ImagePreviewControl
           items={src ? [{ src: previewSrc ?? src, alt }] : []}
           open={open}
           onClose={() => setOpen(false)}
@@ -234,3 +239,8 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
     </span>
   );
 });
+
+export function ImagePreview(rawProps: ImagePreviewProps) {
+  const props = useComponentProps('ImagePreview', rawProps);
+  return <ImagePreviewControl {...props} />;
+}
diff --git a/packages/react/src/image/viewer.tsx b/packages/react/src/image/viewer.tsx
index ba14dc4..414f8cf 100644
--- a/packages/react/src/image/viewer.tsx
+++ b/packages/react/src/image/viewer.tsx
@@ -21,9 +21,10 @@ import Lightbox, {
 } from 'yet-another-react-lightbox';
 import Fullscreen from 'yet-another-react-lightbox/plugins/fullscreen';
 import Zoom from 'yet-another-react-lightbox/plugins/zoom';
-import { Loading } from '../loading';
+import { LoadingControl as Loading } from '../loading/loading';
 import { motionDuration, useMotionEnabled } from '../shared/motion';
 import { ScopedPortal } from '../shared/scoped-portal';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
 import type { ImagePreviewItem, ImagePreviewProps } from './image';
 
@@ -77,6 +78,7 @@ function ViewerChrome({
   fullscreenControl: FullscreenRef | null;
 }) {
   const t = useText();
+  const format = useFormattedText();
   const motion = useMotionEnabled();
   const { currentIndex } = useLightboxState();
   const { prev, next, close } = useController();
@@ -134,7 +136,7 @@ function ViewerChrome({
     >
       <header className="leaf-image-viewer__header">
         <div className="leaf-image-viewer__title">
-          <span>{item?.alt || t('图片预览', 'Image preview')}</span>
+          <span>{item?.alt || t('image.imagePreview')}</span>
           <span className="leaf-image-viewer__count" aria-live="polite">
             {currentIndex + 1} / {items.length}
           </span>
@@ -142,7 +144,7 @@ function ViewerChrome({
         <div className="leaf-image-viewer__header-actions">
           {downloadable && item?.download !== false && (
             <Control
-              label={t('下载图片', 'Download image')}
+              label={t('image.downloadImage')}
               onClick={() => void download()}
               disabled={downloading}
             >
@@ -150,15 +152,13 @@ function ViewerChrome({
             </Control>
           )}
           <Control
-            label={
-              fullscreen ? t('退出全屏', 'Exit fullscreen') : t('进入全屏', 'Enter fullscreen')
-            }
+            label={fullscreen ? t('image.exitFullscreen') : t('image.enterFullscreen')}
             disabled={!fullscreenControl || fullscreenControl.disabled}
             onClick={() => (fullscreen ? fullscreenControl?.exit() : fullscreenControl?.enter())}
           >
             {fullscreen ? <Minimize2 size={19} /> : <Maximize2 size={19} />}
           </Control>
-          <Control label={t('关闭预览', 'Close preview')} onClick={close}>
+          <Control label={t('image.closePreview')} onClick={close}>
             <X size={22} />
           </Control>
         </div>
@@ -167,7 +167,7 @@ function ViewerChrome({
         <>
           <Control
             className="leaf-image-viewer__previous"
-            label={t('上一张', 'Previous image')}
+            label={t('image.previousImage')}
             disabled={prevDisabled}
             onClick={() => prev()}
           >
@@ -175,7 +175,7 @@ function ViewerChrome({
           </Control>
           <Control
             className="leaf-image-viewer__next"
-            label={t('下一张', 'Next image')}
+            label={t('image.nextImage')}
             disabled={nextDisabled}
             onClick={() => next()}
           >
@@ -186,18 +186,15 @@ function ViewerChrome({
       <footer className="leaf-image-viewer__footer">
         {failedDownload && (
           <p role="alert" className="leaf-image-viewer__error">
-            {t(
-              '下载失败，可在新窗口打开原图保存',
-              'Download failed. Open the original image to save it.',
-            )}{' '}
+            {t('image.downloadFailedOpenTheOriginalImageToSaveIt')}{' '}
             <a href={downloadUrl} target="_blank" rel="noopener noreferrer">
-              {t('打开原图', 'Open original')}
+              {t('image.openOriginal')}
             </a>
           </p>
         )}
         <div className="leaf-image-viewer__tools">
           <Control
-            label={t('缩小', 'Zoom out')}
+            label={t('image.zoomOut')}
             disabled={!zoomControl || zoomControl.disabled || zoom <= 1}
             onClick={() => zoomControl?.zoomOut()}
           >
@@ -207,19 +204,19 @@ function ViewerChrome({
             type="button"
             className="leaf-image-viewer__zoom-level"
             onClick={() => zoomControl?.changeZoom(1)}
-            title={t('重置缩放', 'Reset zoom')}
+            title={t('image.resetZoom')}
           >
             {Math.round(zoom * 100)}%
           </button>
           <Control
-            label={t('放大', 'Zoom in')}
+            label={t('image.zoomIn')}
             disabled={!zoomControl || zoomControl.disabled || zoom >= zoomControl.maxZoom}
             onClick={() => zoomControl?.zoomIn()}
           >
             <ZoomIn size={18} />
           </Control>
           <Control
-            label={t('重置缩放', 'Reset zoom')}
+            label={t('image.resetZoom')}
             disabled={zoom <= 1}
             onClick={() => zoomControl?.changeZoom(1)}
           >
@@ -229,7 +226,7 @@ function ViewerChrome({
             <>
               <span className="leaf-image-viewer__tool-separator" />
               <Control
-                label={t('显示缩略图', 'Show thumbnails')}
+                label={t('image.showThumbnails')}
                 active={showThumbs}
                 onClick={() => setShowThumbs((value) => !value)}
               >
@@ -241,7 +238,7 @@ function ViewerChrome({
         {hasThumbs && showThumbs && (
           <div className="leaf-image-viewer__gallery">
             <Control
-              label={t('向前滚动缩略图', 'Scroll thumbnails backward')}
+              label={t('image.scrollThumbnailsBackward')}
               onClick={() =>
                 strip.current?.scrollBy({
                   left: -(strip.current.clientWidth * 0.7),
@@ -254,7 +251,7 @@ function ViewerChrome({
             <fieldset
               className="leaf-image-viewer__thumbnails"
               ref={strip}
-              aria-label={t('图片列表', 'Image list')}
+              aria-label={t('image.imageList')}
             >
               {items.map((image, target) => (
                 <button
@@ -264,7 +261,10 @@ function ViewerChrome({
                   className="leaf-image-viewer__thumbnail"
                   data-index={target}
                   aria-current={currentIndex === target || undefined}
-                  aria-label={`${t('查看第', 'View image')} ${target + 1}${t('张图片', '')}${image.alt ? `: ${image.alt}` : ''}`}
+                  aria-label={format('image.viewImage', {
+                    index: target + 1,
+                    alt: image.alt ? `: ${image.alt}` : '',
+                  })}
                   title={image.alt || String(target + 1)}
                   tabIndex={currentIndex === target ? 0 : -1}
                   onClick={() => choose(target)}
@@ -301,7 +301,7 @@ function ViewerChrome({
               ))}
             </fieldset>
             <Control
-              label={t('向后滚动缩略图', 'Scroll thumbnails forward')}
+              label={t('image.scrollThumbnailsForward')}
               onClick={() =>
                 strip.current?.scrollBy({
                   left: strip.current.clientWidth * 0.7,
@@ -350,6 +350,7 @@ function Viewer({
     setSlides(items.map((item) => ({ ...item })));
   }
   const t = useText();
+  const format = useFormattedText();
   const motion = useMotionEnabled();
   const duration = root && motion ? motionDuration(root) : 0;
   return (
@@ -393,11 +394,14 @@ function Viewer({
             ),
           }}
           labels={{
-            Lightbox: t('图片预览', 'Image preview'),
-            'Photo gallery': t('图片列表', 'Image list'),
-            Slide: t('图片', 'Image'),
-            '{index} of {total}': t('第 {index} 张，共 {total} 张', '{index} of {total}'),
-            Close: t('关闭预览', 'Close preview'),
+            Lightbox: t('image.imagePreview'),
+            'Photo gallery': t('image.imageList'),
+            Slide: t('image.image'),
+            '{index} of {total}': format('image.position', {
+              index: index + 1,
+              total: items.length,
+            }),
+            Close: t('image.closePreview'),
           }}
           on={{
             view: ({ index: next }) => {
diff --git a/packages/react/src/imagecropper/crop.ts b/packages/react/src/imagecropper/crop.ts
deleted file mode 100644
index 924b935..0000000
--- a/packages/react/src/imagecropper/crop.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { CropArea, ImageCropResult } from './imagecropper';
-export async function cropImage(
-  src: string,
-  area: CropArea,
-  shape: 'rect' | 'round',
-  type: string,
-  quality: number,
-  crossOrigin?: 'anonymous' | 'use-credentials',
-): Promise<ImageCropResult> {
-  const image = await new Promise<HTMLImageElement>((resolve, reject) => {
-    const img = new window.Image();
-    if (crossOrigin) img.crossOrigin = crossOrigin;
-    img.onload = () => resolve(img);
-    img.onerror = () => reject(new Error('Unable to load image for export.'));
-    img.src = src;
-  });
-  const canvas = document.createElement('canvas');
-  canvas.width = Math.max(1, Math.round(area.width));
-  canvas.height = Math.max(1, Math.round(area.height));
-  const output = canvas.getContext('2d');
-  if (!output) throw new Error('Canvas is unavailable.');
-  if (type === 'image/jpeg') {
-    output.fillStyle = '#fff';
-    output.fillRect(0, 0, canvas.width, canvas.height);
-  }
-  if (shape === 'round') {
-    output.beginPath();
-    output.ellipse(
-      canvas.width / 2,
-      canvas.height / 2,
-      canvas.width / 2,
-      canvas.height / 2,
-      0,
-      0,
-      Math.PI * 2,
-    );
-    output.clip();
-  }
-  output.imageSmoothingQuality = 'high';
-  output.drawImage(
-    image,
-    area.x,
-    area.y,
-    area.width,
-    area.height,
-    0,
-    0,
-    canvas.width,
-    canvas.height,
-  );
-  const blob = await new Promise<Blob>((resolve, reject) => {
-    canvas.toBlob(
-      (value) => (value ? resolve(value) : reject(new Error('Image export failed.'))),
-      type,
-      Math.max(0, Math.min(1, quality)),
-    );
-  });
-  return { blob, width: canvas.width, height: canvas.height };
-}
diff --git a/packages/react/src/imagecropper/editor.test.tsx b/packages/react/src/imagecropper/editor.test.tsx
deleted file mode 100644
index 97ab481..0000000
--- a/packages/react/src/imagecropper/editor.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { ConfigProvider } from '../config-provider';
-import { cropImage } from './crop';
-import { CropEditor } from './editor';
-
-vi.mock('./crop', () => ({ cropImage: vi.fn() }));
-afterEach(() => vi.resetAllMocks());
-
-describe('ImageCropper export recovery', () => {
-  it('exports natural image coordinates and permits another export after a CORS failure', async () => {
-    const onExport = vi.fn();
-    const onError = vi.fn();
-    const result = { blob: new Blob(['image']), width: 768, height: 512 };
-    vi.mocked(cropImage)
-      .mockRejectedValueOnce(new Error('Tainted canvas'))
-      .mockResolvedValueOnce(result);
-    render(
-      <ConfigProvider locale="en-US">
-        <CropEditor src="/photo.png" onExport={onExport} onError={onError} />
-      </ConfigProvider>,
-    );
-    const image = screen.getByRole('img', { name: 'Image to crop' });
-    Object.defineProperties(image, {
-      naturalWidth: { value: 960 },
-      naturalHeight: { value: 640 },
-    });
-    fireEvent.load(image);
-    await userEvent.click(screen.getByRole('button', { name: 'Crop' }));
-    expect(await screen.findByRole('alert')).toHaveTextContent('Export failed');
-    expect(onError).toHaveBeenCalledOnce();
-    expect(screen.getByRole('button', { name: 'Crop' })).toBeEnabled();
-    await userEvent.click(screen.getByRole('button', { name: 'Crop' }));
-    await waitFor(() => expect(onExport).toHaveBeenCalledWith(result));
-    expect(cropImage).toHaveBeenLastCalledWith(
-      '/photo.png',
-      { x: 96, y: 64, width: 768, height: 512 },
-      'rect',
-      'image/png',
-      0.92,
-      'anonymous',
-    );
-    expect(screen.queryByRole('alert')).toBeNull();
-  });
-});
diff --git a/packages/react/src/imagecropper/editor.tsx b/packages/react/src/imagecropper/editor.tsx
deleted file mode 100644
index 167309b..0000000
--- a/packages/react/src/imagecropper/editor.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import { Crop, ImageOff, RotateCcw } from 'lucide-react';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import ReactCrop, { centerCrop, makeAspectCrop, type PercentCrop } from 'react-image-crop';
-import { Button } from '../button';
-import { Loading } from '../loading';
-import { useText } from '../shared/use-text';
-import { cropImage } from './crop';
-import type { CropArea, ImageCropperHandle, ImageCropperProps } from './imagecropper';
-
-export const CropEditor = forwardRef<ImageCropperHandle, ImageCropperProps>(function CropEditor(
-  {
-    src,
-    aspect,
-    shape = 'rect',
-    minWidth = 24,
-    minHeight = 24,
-    disabled = false,
-    showGrid = true,
-    showActions = true,
-    crossOrigin = 'anonymous',
-    type = 'image/png',
-    quality = 0.92,
-    onChange,
-    onExport,
-    onError,
-    extra,
-    className: _className,
-    style: _style,
-    ...props
-  },
-  ref,
-) {
-  const t = useText();
-  const image = useRef<HTMLImageElement>(null);
-  const area = useRef<CropArea | null>(null);
-  const [crop, setCrop] = useState<PercentCrop>();
-  const [ready, setReady] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState('');
-  const [exportError, setExportError] = useState('');
-  const [dimensions, setDimensions] = useState<CropArea | null>(null);
-  const mounted = useRef(true);
-  const ratio = shape === 'round' ? 1 : aspect;
-  const update = (next: PercentCrop) => {
-    const node = image.current;
-    if (!node?.naturalWidth) return;
-    setCrop(next);
-    const pixels = {
-      x: (node.naturalWidth * next.x) / 100,
-      y: (node.naturalHeight * next.y) / 100,
-      width: (node.naturalWidth * next.width) / 100,
-      height: (node.naturalHeight * next.height) / 100,
-    };
-    area.current = pixels;
-    setDimensions(pixels);
-    onChange?.(pixels);
-  };
-  const reset = () => {
-    const node = image.current;
-    if (!node?.naturalWidth) return;
-    setExportError('');
-    const next =
-      ratio && ratio > 0
-        ? centerCrop(
-            makeAspectCrop({ unit: '%', width: 80 }, ratio, node.naturalWidth, node.naturalHeight),
-            node.naturalWidth,
-            node.naturalHeight,
-          )
-        : { unit: '%' as const, x: 10, y: 10, width: 80, height: 80 };
-    update(next);
-  };
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Ratio changes reset the selection; ordinary dragging must not reset it.
-  useEffect(() => {
-    if (ready) reset();
-  }, [ratio]);
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-  const exportImage = async () => {
-    if (!ready || !area.current || error) throw new Error('Image is not ready.');
-    return cropImage(src, area.current, shape, type, quality, crossOrigin);
-  };
-  useImperativeHandle(ref, () => ({ export: exportImage, reset }));
-  return (
-    <div {...props}>
-      <div
-        className="leaf-image-cropper__stage"
-        data-disabled={disabled || undefined}
-        data-ready={ready || undefined}
-      >
-        <ReactCrop
-          crop={crop}
-          aspect={ratio && ratio > 0 ? ratio : undefined}
-          circularCrop={shape === 'round'}
-          disabled={disabled || !ready || Boolean(error)}
-          keepSelection
-          minWidth={minWidth}
-          minHeight={minHeight}
-          ruleOfThirds={showGrid}
-          onChange={(_pixels, percent) => update(percent)}
-          ariaLabels={{
-            cropArea: t(
-              '裁剪区域，方向键移动，拖动边缘调整大小',
-              'Crop selection. Arrow keys move; drag edges to resize',
-            ),
-            nwDragHandle: t('左上角', 'Top left'),
-            nDragHandle: t('上边缘', 'Top edge'),
-            neDragHandle: t('右上角', 'Top right'),
-            eDragHandle: t('右边缘', 'Right edge'),
-            seDragHandle: t('右下角', 'Bottom right'),
-            sDragHandle: t('下边缘', 'Bottom edge'),
-            swDragHandle: t('左下角', 'Bottom left'),
-            wDragHandle: t('左边缘', 'Left edge'),
-          }}
-        >
-          <img
-            ref={image}
-            src={src}
-            alt={t('待裁剪图片', 'Image to crop')}
-            crossOrigin={crossOrigin}
-            draggable={false}
-            onLoad={() => {
-              setReady(true);
-              setError('');
-              reset();
-            }}
-            onError={() => {
-              area.current = null;
-              setReady(false);
-              setError(t('图片加载失败', 'Image could not be loaded'));
-              onError?.(new Error('Unable to load image.'));
-            }}
-          />
-        </ReactCrop>
-        {!ready && !error && (
-          <div className="leaf-image-cropper__placeholder">
-            <Loading />
-          </div>
-        )}
-        {error && (
-          <div className="leaf-image-cropper__placeholder">
-            <ImageOff size={28} aria-hidden="true" />
-          </div>
-        )}
-        {ready && dimensions && (
-          <output
-            className="leaf-image-cropper__dimensions"
-            aria-label={t('裁剪尺寸', 'Crop dimensions')}
-          >
-            {Math.round(dimensions.width)} × {Math.round(dimensions.height)}
-          </output>
-        )}
-      </div>
-      {showActions && (
-        <div className="leaf-image-cropper__actions">
-          <span className="leaf-image-cropper__hint">
-            {t('拖动选框移动 · 拖动边缘调整', 'Move the selection · Drag its edges to resize')}
-          </span>
-          <Button
-            variant="ghost"
-            size="sm"
-            startIcon={<RotateCcw size={15} />}
-            onClick={reset}
-            disabled={!ready || disabled || busy}
-          >
-            {t('重置', 'Reset')}
-          </Button>
-          {onExport && (
-            <Button
-              size="sm"
-              startIcon={<Crop size={15} />}
-              disabled={!ready || disabled || Boolean(error)}
-              loading={busy}
-              onClick={async () => {
-                if (busy) return;
-                setBusy(true);
-                setExportError('');
-                try {
-                  const result = await exportImage();
-                  if (mounted.current) onExport(result);
-                } catch (reason) {
-                  if (mounted.current) {
-                    setExportError(
-                      t(
-                        '导出失败，请检查图片跨域权限',
-                        'Export failed. Check image CORS permissions.',
-                      ),
-                    );
-                    onError?.(reason instanceof Error ? reason : new Error(String(reason)));
-                  }
-                } finally {
-                  if (mounted.current) setBusy(false);
-                }
-              }}
-            >
-              {t('裁剪', 'Crop')}
-            </Button>
-          )}
-          {extra}
-        </div>
-      )}
-      {(error || exportError) && (
-        <p role="alert" className="leaf-image-cropper__error">
-          {error || exportError}
-        </p>
-      )}
-    </div>
-  );
-});
diff --git a/packages/react/src/imagecropper/imagecropper.scss b/packages/react/src/imagecropper/imagecropper.scss
deleted file mode 100644
index 133f638..0000000
--- a/packages/react/src/imagecropper/imagecropper.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-@use 'react-image-crop/dist/ReactCrop.css';
-.leaf-image-cropper {
-  width: 100%;
-  min-width: 0;
-  color: var(--leaf-color-text);
-  font: var(--leaf-font-size)/1.5 var(--leaf-font-family);
-  &__stage {
-    position: relative;
-    aspect-ratio: 1;
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    border-radius: var(--leaf-radius-md);
-    border: 1px solid var(--leaf-color-border);
-    background: repeating-conic-gradient(
-        var(--leaf-color-surface-muted) 0% 25%,
-        var(--leaf-color-border-surface-35) 0% 50%
-      )
-      50% / 16px 16px;
-    transition:
-      border-color var(--leaf-motion-duration) var(--leaf-motion-easing),
-      box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
-    &:focus-within {
-      border-color: var(--leaf-color-border-hover);
-      box-shadow: 0 0 0 3px var(--leaf-color-primary-alpha-12);
-    }
-    --rc-drag-handle-bg-colour: #fff;
-    --rc-drag-handle-border-colour: #0006;
-    --rc-focus-color: var(--leaf-color-primary);
-    container-type: inline-size;
-    .ReactCrop {
-      display: block;
-      max-height: 100%;
-      max-width: 100%;
-      line-height: 0;
-    }
-    .ReactCrop__child-wrapper {
-      max-height: 100%;
-    }
-    img {
-      display: block;
-      max-width: 100%;
-      max-height: calc(100cqw - 40px);
-      width: auto;
-      height: auto;
-      user-select: none;
-      opacity: 0;
-      transition: opacity var(--leaf-motion-duration) var(--leaf-motion-easing);
-    }
-    &[data-ready] img {
-      opacity: 1;
-    }
-    .ReactCrop .ReactCrop__crop-selection {
-      border: 1px solid #fff;
-      background-image: none;
-      animation: none;
-    }
-    .ReactCrop__drag-handle {
-      width: 10px;
-      height: 10px;
-      border-radius: 2px;
-      border: 1px solid #ffffff;
-      box-shadow: 0 0 0 1px #0004;
-      transition:
-        box-shadow var(--leaf-motion-fast) var(--leaf-motion-easing),
-        scale var(--leaf-motion-fast) var(--leaf-motion-spring);
-      &:hover {
-        scale: 1.2;
-        box-shadow: 0 0 0 2px var(--leaf-color-primary);
-      }
-    }
-    .ReactCrop__drag-handle.ord-n,
-    .ReactCrop__drag-handle.ord-s {
-      width: 20px;
-      height: 5px;
-    }
-    .ReactCrop__drag-handle.ord-w,
-    .ReactCrop__drag-handle.ord-e {
-      width: 5px;
-      height: 20px;
-    }
-    .ReactCrop__crop-selection:focus-visible {
-      outline: 2px solid var(--leaf-color-primary);
-      outline-offset: 3px;
-    }
-    &[data-disabled] {
-      opacity: 0.65;
-    }
-  }
-  &__placeholder {
-    position: absolute;
-    inset: 0;
-    display: grid;
-    place-items: center;
-    color: var(--leaf-color-text-subtle);
-    pointer-events: none;
-  }
-  &__dimensions {
-    position: absolute;
-    inset-block-end: 10px;
-    inset-inline-end: 12px;
-    padding: 3px 8px;
-    border-radius: 6px;
-    background: #0009;
-    border: 1px solid rgb(255 255 255 / 16%);
-    backdrop-filter: blur(8px);
-    box-shadow: var(--leaf-shadow-sm);
-    color: #fff;
-    font: 11px/1.6 var(--leaf-font-family);
-    pointer-events: none;
-    font-variant-numeric: tabular-nums;
-    animation: var(
-      --leaf-motion-animation,
-      leaf-crop-dimensions-enter var(--leaf-motion-duration) var(--leaf-motion-easing)
-    );
-  }
-  &__actions {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding-top: 10px;
-  }
-  &__hint {
-    flex: 1;
-    font-size: var(--leaf-font-size-sm);
-    color: var(--leaf-color-text-muted);
-    min-width: 160px;
-  }
-  &__error {
-    margin: 8px 0 0;
-    color: var(--leaf-color-danger);
-  }
-}
-@keyframes leaf-crop-dimensions-enter {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .leaf-image-cropper__stage,
-  .leaf-image-cropper__stage img,
-  .leaf-image-cropper__stage .ReactCrop__drag-handle {
-    transition: none;
-  }
-  .leaf-image-cropper__dimensions {
-    animation: none;
-  }
-}
diff --git a/packages/react/src/imagecropper/imagecropper.tsx b/packages/react/src/imagecropper/imagecropper.tsx
deleted file mode 100644
index ee25234..0000000
--- a/packages/react/src/imagecropper/imagecropper.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  forwardRef,
-  type HTMLAttributes,
-  lazy,
-  type ReactNode,
-  Suspense,
-  useImperativeHandle,
-  useRef,
-} from 'react';
-import { Loading } from '../loading';
-import { classes } from '../shared/classes';
-import { useClient } from '../shared/use-client';
-export interface CropArea {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-export interface ImageCropResult {
-  blob: Blob;
-  width: number;
-  height: number;
-}
-export interface ImageCropperHandle {
-  export: () => Promise<ImageCropResult>;
-  reset: () => void;
-}
-export interface ImageCropperProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onError'> {
-  src: string;
-  aspect?: number;
-  shape?: 'rect' | 'round';
-  minWidth?: number;
-  minHeight?: number;
-  disabled?: boolean;
-  showGrid?: boolean;
-  showActions?: boolean;
-  crossOrigin?: 'anonymous' | 'use-credentials';
-  type?: 'image/png' | 'image/jpeg' | 'image/webp';
-  quality?: number;
-  onChange?: (area: CropArea) => void;
-  onExport?: (result: ImageCropResult) => void;
-  onError?: (error: Error) => void;
-  extra?: ReactNode;
-}
-const Editor = lazy(() => import('./editor').then((module) => ({ default: module.CropEditor })));
-export const ImageCropper = forwardRef<ImageCropperHandle, ImageCropperProps>(
-  function ImageCropper(props, ref) {
-    const editor = useRef<ImageCropperHandle>(null);
-    const client = useClient();
-    useImperativeHandle(
-      ref,
-      () => ({
-        export: () =>
-          editor.current?.export() ?? Promise.reject(new Error('Image cropper is loading.')),
-        reset: () => editor.current?.reset(),
-      }),
-      [],
-    );
-    return (
-      <div className={classes('leaf-image-cropper', props.className)} style={props.style}>
-        {client ? (
-          <Suspense
-            fallback={
-              <div className="leaf-image-cropper__stage">
-                <Loading />
-              </div>
-            }
-          >
-            <Editor
-              key={`${props.src}-${props.crossOrigin ?? 'anonymous'}`}
-              {...props}
-              ref={editor}
-            />
-          </Suspense>
-        ) : (
-          <div className="leaf-image-cropper__stage">
-            <Loading />
-          </div>
-        )}
-      </div>
-    );
-  },
-);
diff --git a/packages/react/src/imagecropper/index.ts b/packages/react/src/imagecropper/index.ts
deleted file mode 100644
index d698391..0000000
--- a/packages/react/src/imagecropper/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type {
-  CropArea,
-  ImageCropperHandle,
-  ImageCropperProps,
-  ImageCropResult,
-} from './imagecropper';
-export { ImageCropper } from './imagecropper';
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 831c604..143d405 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -33,7 +33,7 @@ export type {
 export { Button, ButtonGroup, SplitButton } from './button';
 export type { CalendarProps } from './calendar';
 export { Calendar } from './calendar';
-export type { CardProps } from './card';
+export type { CardProps, CardTabsProps } from './card';
 export { Card } from './card';
 export type { CarouselHandle, CarouselProps } from './carousel';
 export { Carousel } from './carousel';
@@ -54,13 +54,16 @@ export type { CommandItem, CommandPaletteProps } from './commandpalette';
 export { CommandPalette } from './commandpalette';
 export type {
   ConfigProviderProps,
+  LeafComponentDefaults,
   LeafDensity,
   LeafLocale,
   LeafTheme,
   LeafThemeTokens,
+  LeafTranslation,
+  LeafTranslations,
 } from './config-provider';
 export { ConfigProvider } from './config-provider';
-export type { LeafDirection, LeafMessages } from './config-provider/context';
+export type { LeafDirection } from './config-provider/context';
 export { colorContrast, useBreakpoint, useSystemAppearance } from './config-provider/helpers';
 export type { ConfirmApi, ConfirmOptions, ConfirmProviderProps } from './confirm';
 export { ConfirmProvider, useConfirm } from './confirm';
@@ -85,6 +88,8 @@ export type { ErrorBoundaryFallbackProps, ErrorBoundaryProps } from './errorboun
 export { ErrorBoundary } from './errorboundary';
 export type { FileItem, FileListProps } from './filelist';
 export { FileList } from './filelist';
+export type { FlexGap, FlexProps } from './flex';
+export { Flex } from './flex';
 export type { FloatButtonAction, FloatButtonGroupProps, FloatButtonProps } from './floatbutton';
 export { FAB, FloatButton, FloatButtonGroup } from './floatbutton';
 export type {
@@ -109,13 +114,6 @@ export type {
   ImageProps,
 } from './image';
 export { Image, ImagePreview, ImagePreviewGroup } from './image';
-export type {
-  CropArea,
-  ImageCropperHandle,
-  ImageCropperProps,
-  ImageCropResult,
-} from './imagecropper';
-export { ImageCropper } from './imagecropper';
 export type { InfiniteScrollProps } from './infinitescroll';
 export { InfiniteScroll } from './infinitescroll';
 export type { InputGroupProps, InputProps, InputSearchProps } from './input';
@@ -182,13 +180,6 @@ export type { DialogFocusOptions, FocusTarget } from './shared/dialog';
 export type { PopupOptions } from './shared/floating';
 export type { TimeParts } from './shared/time';
 export type { ControlSize, ControlStatus } from './shared/types';
-export type {
-  SignaturePadHandle,
-  SignaturePadProps,
-  SignaturePoint,
-  SignatureStroke,
-} from './signaturepad';
-export { SignaturePad } from './signaturepad';
 export type { SkeletonProps } from './skeleton';
 export { Skeleton } from './skeleton';
 export type { SliderMark, SliderProps } from './slider';
@@ -224,6 +215,7 @@ export {
   TableLoading,
   TableRow,
 } from './table';
+export type { DataTablePresentationProps } from './tabletanstack/defaults';
 export type { TabItem, TabsProps } from './tabs';
 export { Tabs } from './tabs';
 export type { CheckableTagProps, TagGroupProps, TagOption, TagProps } from './tag';
diff --git a/packages/react/src/infinitescroll/infinitescroll.tsx b/packages/react/src/infinitescroll/infinitescroll.tsx
index 1d9b181..8401c62 100644
--- a/packages/react/src/infinitescroll/infinitescroll.tsx
+++ b/packages/react/src/infinitescroll/infinitescroll.tsx
@@ -1,6 +1,7 @@
 import { type HTMLAttributes, type ReactNode, useEffect, useRef, useState } from 'react';
-import { Button } from '../button';
-import { Loading } from '../loading';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { LoadingControl as Loading } from '../loading/loading';
 import { classes } from '../shared/classes';
 import { useText } from '../shared/use-text';
 export interface InfiniteScrollProps extends HTMLAttributes<HTMLDivElement> {
@@ -13,19 +14,20 @@ export interface InfiniteScrollProps extends HTMLAttributes<HTMLDivElement> {
   endMessage?: ReactNode;
   onError?: (error: unknown) => void;
 }
-export function InfiniteScroll({
-  dataLength,
-  hasMore,
-  onLoadMore,
-  target,
-  threshold = 200,
-  loader,
-  endMessage,
-  onError,
-  className,
-  children,
-  ...props
-}: InfiniteScrollProps) {
+export function InfiniteScroll(rawProps: InfiniteScrollProps) {
+  const {
+    dataLength,
+    hasMore,
+    onLoadMore,
+    target,
+    threshold = 200,
+    loader,
+    endMessage,
+    onError,
+    className,
+    children,
+    ...props
+  } = useComponentProps('InfiniteScroll', rawProps);
   const t = useText();
   const sentinel = useRef<HTMLDivElement>(null);
   const controller = useRef<AbortController | null>(null);
@@ -122,23 +124,23 @@ export function InfiniteScroll({
           className="leaf-infinite-scroll__feedback"
         >
           {error ? (
-            <Button
+            <ButtonControl
               variant="ghost"
               onClick={() => {
                 setError(false);
                 setRetry((value) => value + 1);
               }}
             >
-              {t('加载失败，重试', 'Loading failed. Retry')}
-            </Button>
+              {t('infiniteScroll.loadingFailedRetry')}
+            </ButtonControl>
           ) : loading ? (
-            (loader ?? <Loading size="sm" tip={t('加载中', 'Loading')} />)
+            (loader ?? <Loading size="sm" tip={t('common.loading')} />)
           ) : !hasMore ? (
-            (endMessage ?? t('已加载全部内容', 'All items loaded'))
+            (endMessage ?? t('infiniteScroll.allItemsLoaded'))
           ) : manual ? (
-            <Button variant="ghost" onClick={() => manualLoad.current()}>
-              {t('加载更多', 'Load more')}
-            </Button>
+            <ButtonControl variant="ghost" onClick={() => manualLoad.current()}>
+              {t('infiniteScroll.loadMore')}
+            </ButtonControl>
           ) : null}
         </span>
       </div>
diff --git a/packages/react/src/input/group.tsx b/packages/react/src/input/group.tsx
index 91ca4ff..19b10ab 100644
--- a/packages/react/src/input/group.tsx
+++ b/packages/react/src/input/group.tsx
@@ -1,74 +1,87 @@
 import { Search } from 'lucide-react';
 import { type FieldsetHTMLAttributes, forwardRef, type ReactNode, useRef } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { useFieldValue, useMergedRef } from '../shared/field';
 import { useText } from '../shared/use-text';
-import { Input, type InputProps } from './input';
+import { InputControl, type InputProps } from './input';
 export interface InputSearchProps extends InputProps {
   onSearch?: (value: string) => void;
   loading?: boolean;
   enterButton?: ReactNode;
 }
-export const InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(function InputSearch(
-  {
-    value,
-    defaultValue,
-    onChange,
-    onSearch,
-    onPressEnter,
-    loading = false,
-    enterButton,
-    className,
-    style,
-    ...props
+export const InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(
+  function InputSearch(rawProps, ref) {
+    const {
+      onSearch,
+      loading = false,
+      enterButton,
+      ...searchProps
+    } = useComponentProps('InputSearch', rawProps);
+    const {
+      value,
+      defaultValue,
+      onChange,
+      onPressEnter,
+      className,
+      style,
+      size = 'md',
+      disabled: disabledProp,
+      ...props
+    } = useComponentProps('Input', searchProps);
+    const field = useFormField();
+    const disabled = Boolean(disabledProp || field?.disabled);
+    const t = useText();
+    const input = useRef<HTMLInputElement>(null);
+    const merged = useMergedRef(input, ref);
+    const [current, setCurrent] = useFieldValue(
+      value === undefined ? undefined : String(value),
+      String(defaultValue ?? ''),
+      input,
+      props.form,
+    );
+    return (
+      <div className={classes('leaf-input-search', className)} style={style}>
+        <InputControl
+          {...props}
+          size={size}
+          disabled={disabled}
+          ref={merged}
+          value={current}
+          onChange={(event) => {
+            setCurrent(event.target.value);
+            onChange?.(event);
+          }}
+          onPressEnter={(event) => {
+            onPressEnter?.(event);
+            if (!event.defaultPrevented && !loading) {
+              event.preventDefault();
+              onSearch?.(current);
+            }
+          }}
+        />
+        <ButtonControl
+          type="button"
+          size={size}
+          loading={loading}
+          disabled={disabled}
+          startIcon={enterButton ? undefined : <Search size={16} />}
+          aria-label={enterButton ? undefined : t('common.searchAction')}
+          onClick={() => onSearch?.(current)}
+        >
+          {enterButton}
+        </ButtonControl>
+      </div>
+    );
   },
-  ref,
-) {
-  const t = useText();
-  const input = useRef<HTMLInputElement>(null);
-  const merged = useMergedRef(input, ref);
-  const [current, setCurrent] = useFieldValue(
-    value === undefined ? undefined : String(value),
-    String(defaultValue ?? ''),
-    input,
-    props.form,
-  );
-  return (
-    <div className={classes('leaf-input-search', className)} style={style}>
-      <Input
-        {...props}
-        ref={merged}
-        value={current}
-        onChange={(event) => {
-          setCurrent(event.target.value);
-          onChange?.(event);
-        }}
-        onPressEnter={(event) => {
-          onPressEnter?.(event);
-          if (!event.defaultPrevented && !loading) {
-            event.preventDefault();
-            onSearch?.(current);
-          }
-        }}
-      />
-      <Button
-        size={props.size}
-        loading={loading}
-        disabled={props.disabled}
-        startIcon={enterButton ? undefined : <Search size={16} />}
-        aria-label={enterButton ? undefined : t('搜索', 'Search')}
-        onClick={() => onSearch?.(current)}
-      >
-        {enterButton}
-      </Button>
-    </div>
-  );
-});
+);
 export interface InputGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
   compact?: boolean;
 }
-export function InputGroup({ compact = true, className, ...props }: InputGroupProps) {
+export function InputGroup(rawProps: InputGroupProps) {
+  const { compact = true, className, ...props } = useComponentProps('InputGroup', rawProps);
   return (
     <fieldset
       {...props}
diff --git a/packages/react/src/input/index.ts b/packages/react/src/input/index.ts
index 2073443..75838f8 100644
--- a/packages/react/src/input/index.ts
+++ b/packages/react/src/input/index.ts
@@ -1,4 +1,5 @@
 export type { InputGroupProps, InputSearchProps } from './group';
 
 export { InputGroup, InputSearch } from './group';
-export * from './input';
+export type { InputProps } from './input';
+export { Input } from './input';
diff --git a/packages/react/src/input/input.tsx b/packages/react/src/input/input.tsx
index 7c650c2..539831b 100644
--- a/packages/react/src/input/input.tsx
+++ b/packages/react/src/input/input.tsx
@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
@@ -31,7 +32,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
 }
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+// Composites resolve their defaults before owning value, reset and callbacks.
+export const InputControl = forwardRef<HTMLInputElement, InputProps>(function InputControl(
   {
     size = 'md',
     status: statusProp,
@@ -56,7 +58,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     onPressEnter,
     'aria-invalid': ariaInvalid,
     ...props
-  },
+  }: InputProps,
   ref,
 ) {
   const field = useFormField();
@@ -119,7 +121,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         <button
           type="button"
           className="leaf-input__clear"
-          aria-label={messages.clearInput}
+          aria-label={messages.input.clear}
           onMouseDown={(event) => event.preventDefault()}
           onClick={() => {
             const node = input.current;
@@ -153,7 +155,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           type="button"
           className="leaf-input__visibility"
           disabled={disabled}
-          aria-label={visible ? messages.hidePassword : messages.showPassword}
+          aria-label={visible ? messages.input.hidePassword : messages.input.showPassword}
           aria-pressed={visible}
           onMouseDown={(event) => event.preventDefault()}
           onClick={() => {
@@ -173,4 +175,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     </div>
   );
 });
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(rawProps, ref) {
+  const props = useComponentProps('Input', rawProps);
+  return <InputControl {...props} ref={ref} />;
+});
 Input.displayName = 'Input';
diff --git a/packages/react/src/inputmask/inputmask.tsx b/packages/react/src/inputmask/inputmask.tsx
index 464ea95..024aa97 100644
--- a/packages/react/src/inputmask/inputmask.tsx
+++ b/packages/react/src/inputmask/inputmask.tsx
@@ -1,6 +1,7 @@
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { useIMask } from 'react-imask';
-import { Input, type InputProps } from '../input';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { InputControl, type InputProps } from '../input/input';
 import { classes } from '../shared/classes';
 import { useFieldValue, useMergedRef } from '../shared/field';
 export interface InputMaskProps
@@ -26,7 +27,10 @@ export interface InputMaskProps
   onComplete?: (value: string) => void;
 }
 export const InputMask = forwardRef<HTMLInputElement, InputMaskProps>(function InputMask(
-  {
+  rawProps: InputMaskProps,
+  ref,
+) {
+  const {
     mask,
     definitions,
     lazy = true,
@@ -38,9 +42,7 @@ export const InputMask = forwardRef<HTMLInputElement, InputMaskProps>(function I
     onClear,
     className,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('InputMask', rawProps);
   const native = useRef<HTMLInputElement>(null);
   const merged = useMergedRef(native, ref);
   const [current, setCurrent] = useFieldValue(value, defaultValue, native, props.form);
@@ -77,7 +79,7 @@ export const InputMask = forwardRef<HTMLInputElement, InputMaskProps>(function I
     syncing.current = false;
   }, [current, formatted, unmask, maskRef, mask, definitions, lazy]);
   return (
-    <Input
+    <InputControl
       {...props}
       className={classes('leaf-input-mask', className)}
       ref={merged}
diff --git a/packages/react/src/inputnumber/inputnumber.tsx b/packages/react/src/inputnumber/inputnumber.tsx
index e8f0bde..81cae54 100644
--- a/packages/react/src/inputnumber/inputnumber.tsx
+++ b/packages/react/src/inputnumber/inputnumber.tsx
@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
@@ -158,10 +159,10 @@ const NumericInputNumber = forwardRef<HTMLInputElement, NumericInputNumberProps>
       const number = parseInput(draft);
       input.current?.setCustomValidity(
         draft.trim() && (number === null || number < min || number > max)
-          ? messages.invalidNumber
+          ? messages.inputNumber.invalid
           : '',
       );
-    }, [draft, min, max, messages.invalidNumber, parseInput]);
+    }, [draft, min, max, messages.inputNumber.invalid, parseInput]);
     const emit = (next: number | null) => {
       setCurrent(next);
       if (next !== current) onChange?.(next);
@@ -263,7 +264,7 @@ const NumericInputNumber = forwardRef<HTMLInputElement, NumericInputNumberProps>
             <button
               type="button"
               tabIndex={-1}
-              aria-label={messages.increase}
+              aria-label={messages.inputNumber.increase}
               disabled={disabled || readOnly || (number !== null && number >= max)}
               onMouseDown={(event) => event.preventDefault()}
               onClick={() => changeBy(1)}
@@ -273,7 +274,7 @@ const NumericInputNumber = forwardRef<HTMLInputElement, NumericInputNumberProps>
             <button
               type="button"
               tabIndex={-1}
-              aria-label={messages.decrease}
+              aria-label={messages.inputNumber.decrease}
               disabled={disabled || readOnly || (number !== null && number <= min)}
               onMouseDown={(event) => event.preventDefault()}
               onClick={() => changeBy(-1)}
@@ -287,8 +288,8 @@ const NumericInputNumber = forwardRef<HTMLInputElement, NumericInputNumberProps>
   },
 );
 export type InputNumberProps = NumericInputNumberProps | StringInputNumberProps;
-export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
-  function InputNumber(props, ref) {
+export const InputNumberControl = forwardRef<HTMLInputElement, InputNumberProps>(
+  function InputNumberControl(props: InputNumberProps, ref) {
     return props.stringMode ? (
       <ExactInputNumber {...props} ref={ref} />
     ) : (
@@ -296,3 +297,12 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
     );
   },
 );
+
+export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(function InputNumber(
+  rawProps: InputNumberProps,
+  ref,
+) {
+  const props = useComponentProps('InputNumber', rawProps);
+  return <InputNumberControl {...props} ref={ref} />;
+});
+InputNumber.displayName = 'InputNumber';
diff --git a/packages/react/src/inputnumber/string.tsx b/packages/react/src/inputnumber/string.tsx
index 5296722..50b71a4 100644
--- a/packages/react/src/inputnumber/string.tsx
+++ b/packages/react/src/inputnumber/string.tsx
@@ -109,9 +109,11 @@ export const ExactInputNumber = forwardRef<HTMLInputElement, StringInputNumberPr
     );
     useEffect(() => {
       input.current?.setCustomValidity(
-        draft.trim() && (parsed === null || !within(parsed)) ? config.messages.invalidNumber : '',
+        draft.trim() && (parsed === null || !within(parsed))
+          ? config.messages.inputNumber.invalid
+          : '',
       );
-    }, [draft, parsed, within, config.messages.invalidNumber]);
+    }, [draft, parsed, within, config.messages.inputNumber.invalid]);
     const emit = (next: string | null) => {
       if (disabled || readOnly) return;
       setCurrent(next);
@@ -201,7 +203,11 @@ export const ExactInputNumber = forwardRef<HTMLInputElement, StringInputNumberPr
                 key={direction}
                 type="button"
                 tabIndex={-1}
-                aria-label={direction === 1 ? config.messages.increase : config.messages.decrease}
+                aria-label={
+                  direction === 1
+                    ? config.messages.inputNumber.increase
+                    : config.messages.inputNumber.decrease
+                }
                 disabled={
                   disabled ||
                   readOnly ||
diff --git a/packages/react/src/inputotp/inputotp.scss b/packages/react/src/inputotp/inputotp.scss
index cf7dbdb..570a0db 100644
--- a/packages/react/src/inputotp/inputotp.scss
+++ b/packages/react/src/inputotp/inputotp.scss
@@ -41,6 +41,7 @@
   gap: 8px;
 }
 .leaf-input-otp__slot {
+  box-sizing: border-box;
   width: var(--leaf-otp-size);
   height: var(--leaf-otp-size);
   display: grid;
diff --git a/packages/react/src/inputotp/inputotp.tsx b/packages/react/src/inputotp/inputotp.tsx
index 3d55938..0ae36bb 100644
--- a/packages/react/src/inputotp/inputotp.tsx
+++ b/packages/react/src/inputotp/inputotp.tsx
@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { useFieldValue, useMergedRef } from '../shared/field';
@@ -28,7 +29,10 @@ export interface InputOTPProps
   status?: ControlStatus;
 }
 export const InputOTP = forwardRef<HTMLInputElement, InputOTPProps>(function InputOTP(
-  {
+  rawProps: InputOTPProps,
+  ref,
+) {
+  const {
     length = 6,
     value,
     defaultValue = '',
@@ -47,9 +51,7 @@ export const InputOTP = forwardRef<HTMLInputElement, InputOTPProps>(function Inp
     onBlur,
     onClick,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('InputOTP', rawProps);
   const t = useText();
   const field = useFormField();
   const input = useRef<HTMLInputElement>(null);
@@ -91,7 +93,7 @@ export const InputOTP = forwardRef<HTMLInputElement, InputOTPProps>(function Inp
         type="text"
         className="leaf-input-otp__input"
         id={props.id ?? field?.id}
-        aria-label={props['aria-label'] ?? t('验证码', 'Verification code')}
+        aria-label={props['aria-label'] ?? t('inputOTP.verificationCode')}
         aria-describedby={
           [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined
         }
diff --git a/packages/react/src/layout/layout.tsx b/packages/react/src/layout/layout.tsx
index 9ff7682..a72e96a 100644
--- a/packages/react/src/layout/layout.tsx
+++ b/packages/react/src/layout/layout.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, type HTMLAttributes, type ReactNode, useEffect, useState } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useControllable } from '../shared/use-controllable';
 import { useText } from '../shared/use-text';
@@ -7,10 +8,8 @@ import { useText } from '../shared/use-text';
 export interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
   direction?: 'horizontal' | 'vertical';
 }
-const LayoutRoot = forwardRef<HTMLDivElement, LayoutProps>(function Layout(
-  { direction = 'vertical', className, ...props },
-  ref,
-) {
+const LayoutRoot = forwardRef<HTMLDivElement, LayoutProps>(function Layout(rawProps, ref) {
+  const { direction = 'vertical', className, ...props } = useComponentProps('Layout', rawProps);
   return (
     <div
       {...props}
@@ -30,7 +29,10 @@ export interface LayoutSiderProps extends HTMLAttributes<HTMLElement> {
   trigger?: ReactNode;
 }
 export const LayoutSider = forwardRef<HTMLElement, LayoutSiderProps>(function LayoutSider(
-  {
+  rawProps: LayoutSiderProps,
+  ref,
+) {
+  const {
     width = 220,
     collapsedWidth = 64,
     collapsed,
@@ -43,9 +45,7 @@ export const LayoutSider = forwardRef<HTMLElement, LayoutSiderProps>(function La
     children,
     style,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('LayoutSider', rawProps);
   const t = useText();
   const [compact, setCompact] = useControllable(collapsed, defaultCollapsed, onCollapse);
   const [narrow, setNarrow] = useState(false);
@@ -68,32 +68,34 @@ export const LayoutSider = forwardRef<HTMLElement, LayoutSiderProps>(function La
     >
       <div className="leaf-layout__sider-content">{children}</div>
       {collapsible && !narrow && (
-        <Button
+        <ButtonControl
           variant="ghost"
           size="sm"
           onClick={() => setCompact(!compact)}
           aria-expanded={!folded}
-          aria-label={folded ? t('展开侧栏', 'Expand sidebar') : t('收起侧栏', 'Collapse sidebar')}
+          aria-label={folded ? t('layout.expandSidebar') : t('layout.collapseSidebar')}
         >
-          {trigger ??
-            (folded ? t('展开侧栏', 'Expand sidebar') : t('收起侧栏', 'Collapse sidebar'))}
-        </Button>
+          {trigger ?? (folded ? t('layout.expandSidebar') : t('layout.collapseSidebar'))}
+        </ButtonControl>
       )}
     </aside>
   );
 });
 export const LayoutHeader = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
-  function LayoutHeader({ className, ...props }, ref) {
+  function LayoutHeader(rawProps: HTMLAttributes<HTMLElement>, ref) {
+    const { className, ...props } = useComponentProps('LayoutHeader', rawProps);
     return <header {...props} ref={ref} className={classes('leaf-layout__header', className)} />;
   },
 );
 export const LayoutContent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
-  function LayoutContent({ className, ...props }, ref) {
+  function LayoutContent(rawProps: HTMLAttributes<HTMLElement>, ref) {
+    const { className, ...props } = useComponentProps('LayoutContent', rawProps);
     return <main {...props} ref={ref} className={classes('leaf-layout__content', className)} />;
   },
 );
 export const LayoutFooter = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
-  function LayoutFooter({ className, ...props }, ref) {
+  function LayoutFooter(rawProps: HTMLAttributes<HTMLElement>, ref) {
+    const { className, ...props } = useComponentProps('LayoutFooter', rawProps);
     return <footer {...props} ref={ref} className={classes('leaf-layout__footer', className)} />;
   },
 );
diff --git a/packages/react/src/loading/loading.tsx b/packages/react/src/loading/loading.tsx
index f3fac04..dd853b5 100644
--- a/packages/react/src/loading/loading.tsx
+++ b/packages/react/src/loading/loading.tsx
@@ -1,5 +1,6 @@
 import { LoaderCircle } from 'lucide-react';
 import { type HTMLAttributes, type ReactNode, useEffect, useRef, useState } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { inertProps } from '../shared/inert';
@@ -12,7 +13,7 @@ export interface LoadingProps extends HTMLAttributes<HTMLDivElement> {
   tip?: ReactNode;
   delay?: number;
 }
-export function Loading({
+export function LoadingControl({
   spinning = true,
   size = 'md',
   tip,
@@ -43,7 +44,7 @@ export function Loading({
     <div
       className="leaf-loading__indicator"
       role="status"
-      aria-label={typeof tip === 'string' ? tip : messages.loading}
+      aria-label={typeof tip === 'string' ? tip : messages.common.loading}
     >
       <LoaderCircle className="leaf-loading__spinner" aria-hidden="true" />
       {tip && <span>{tip}</span>}
@@ -93,3 +94,8 @@ export function Loading({
     </div>
   );
 }
+
+export function Loading(rawProps: LoadingProps) {
+  const props = useComponentProps('Loading', rawProps);
+  return <LoadingControl {...props} />;
+}
diff --git a/packages/react/src/loadingbar/loadingbar.tsx b/packages/react/src/loadingbar/loadingbar.tsx
index 76131e4..ebd5d85 100644
--- a/packages/react/src/loadingbar/loadingbar.tsx
+++ b/packages/react/src/loadingbar/loadingbar.tsx
@@ -8,10 +8,19 @@ import {
   useRef,
   useState,
 } from 'react';
+import {
+  ComponentDefaultsContext,
+  type LeafComponentDefaults,
+  mergeComponentProps,
+  useComponentProps,
+} from '../config-provider/component-defaults';
+import { ConfigContext, type LeafConfig, useLeafConfig } from '../config-provider/context';
+import { leafDensityVariables } from '../density';
 import { classes } from '../shared/classes';
 import { motionDuration, useMotionEnabled } from '../shared/motion';
 import { ScopedPortal } from '../shared/scoped-portal';
 import { useText } from '../shared/use-text';
+import { leafThemeVariables } from '../theme';
 export interface LoadingBarProps {
   active?: boolean;
   progress?: number;
@@ -21,7 +30,7 @@ export interface LoadingBarProps {
   className?: string;
   style?: CSSProperties;
 }
-export function LoadingBar({
+export function LoadingBarControl({
   active = false,
   progress,
   color,
@@ -73,7 +82,7 @@ export function LoadingBar({
         ref={bar}
         className={classes('leaf-loading-bar', `leaf-loading-bar--${position}`, className)}
         role="progressbar"
-        aria-label={t('页面加载进度', 'Page loading progress')}
+        aria-label={t('loadingBar.pageLoadingProgress')}
         aria-valuemin={0}
         aria-valuemax={100}
         aria-valuenow={progress === undefined && active ? undefined : amount}
@@ -91,22 +100,33 @@ export interface LoadingBarApi {
   set: (progress: number) => void;
   reset: () => void;
 }
-const Context = createContext<LoadingBarApi | null>(null);
+interface LoadingBarController extends Omit<LoadingBarApi, 'start'> {
+  start: (components?: LeafComponentDefaults, config?: LeafConfig) => () => void;
+}
+const Context = createContext<LoadingBarController | null>(null);
 export interface LoadingBarProviderProps extends Omit<LoadingBarProps, 'active' | 'progress'> {
   children?: ReactNode;
 }
 export function LoadingBarProvider({ children, ...props }: LoadingBarProviderProps) {
+  const inheritedConfig = useLeafConfig();
   const pending = useRef(new Set<symbol>());
   const [active, setActive] = useState(false);
   const [progress, setProgress] = useState<number | undefined>();
-  const api = useMemo<LoadingBarApi>(() => {
+  const [taskComponents, setTaskComponents] = useState<LeafComponentDefaults>();
+  const [taskConfig, setTaskConfig] = useState<LeafConfig>();
+  const api = useMemo<LoadingBarController>(() => {
     const finish = (key?: symbol) => {
       const first = key ?? pending.current.values().next().value;
       if (first) pending.current.delete(first);
       if (!pending.current.size) setActive(false);
     };
     return {
-      start: () => {
+      start: (components, config) => {
+        // The first active task owns the shared bar's presentation until the batch completes.
+        if (!pending.current.size) {
+          setTaskComponents(components);
+          setTaskConfig(config);
+        }
         const key = Symbol();
         pending.current.add(key);
         setProgress(undefined);
@@ -122,9 +142,25 @@ export function LoadingBarProvider({ children, ...props }: LoadingBarProviderPro
       },
     };
   }, []);
+  const config = taskConfig ?? inheritedConfig;
+  const presentation = mergeComponentProps<LoadingBarProviderProps>(
+    taskComponents?.LoadingBar,
+    props,
+  );
   return (
     <Context.Provider value={api}>
-      <LoadingBar {...props} active={active} progress={progress} />
+      <ConfigContext.Provider value={config}>
+        <div
+          style={{
+            display: 'contents',
+            ...leafDensityVariables(config.density),
+            ...leafThemeVariables(config.theme),
+          }}
+          dir={config.direction}
+        >
+          <LoadingBarControl {...presentation} active={active} progress={progress} />
+        </div>
+      </ConfigContext.Provider>
       {children}
     </Context.Provider>
   );
@@ -134,6 +170,21 @@ export function LoadingBarScope({ children }: { children?: ReactNode }) {
 }
 export function useLoadingBar() {
   const api = useContext(Context);
-  if (!api) throw new Error('useLoadingBar requires ConfigProvider or LoadingBarProvider.');
-  return api;
+  const components = useContext(ComponentDefaultsContext);
+  const config = useLeafConfig();
+  const latest = useRef(components);
+  latest.current = components;
+  const latestConfig = useRef(config);
+  latestConfig.current = config;
+  const result = useMemo<LoadingBarApi | null>(
+    () => (api ? { ...api, start: () => api.start(latest.current, latestConfig.current) } : null),
+    [api],
+  );
+  if (!result) throw new Error('useLoadingBar requires ConfigProvider or LoadingBarProvider.');
+  return result;
+}
+
+export function LoadingBar(rawProps: LoadingBarProps) {
+  const props = useComponentProps('LoadingBar', rawProps);
+  return <LoadingBarControl {...props} />;
 }
diff --git a/packages/react/src/locales/en-US.json b/packages/react/src/locales/en-US.json
new file mode 100644
index 0000000..75e54b8
--- /dev/null
+++ b/packages/react/src/locales/en-US.json
@@ -0,0 +1,335 @@
+{
+  "select": {
+    "placeholder": "Please select",
+    "empty": "No options",
+    "clear": "Clear selection",
+    "create": "Create “{label}”"
+  },
+  "autoComplete": {
+    "empty": "No suggestions",
+    "suggestions": "{label} suggestions"
+  },
+  "datePicker": {
+    "placeholder": "Select a date",
+    "clear": "Clear date",
+    "label": "Choose a date",
+    "selectDate": "Choose date"
+  },
+  "timePicker": {
+    "placeholder": "Select a time",
+    "clear": "Clear time",
+    "label": "Choose a time",
+    "hours": "Hours",
+    "minutes": "Minutes",
+    "seconds": "Seconds",
+    "period": "Period",
+    "am": "AM",
+    "pm": "PM",
+    "now": "Now",
+    "selectTime": "Choose time"
+  },
+  "dateTimePicker": {
+    "placeholder": "Select date and time"
+  },
+  "dateRangePicker": {
+    "placeholder": "Select a date range",
+    "clear": "Clear range"
+  },
+  "cascader": {
+    "clear": "Clear selection",
+    "level": "Level {level}",
+    "placeholder": "Please select",
+    "empty": "No options"
+  },
+  "calendar": {
+    "previousMonth": "Previous month",
+    "nextMonth": "Next month",
+    "previousYear": "Previous year",
+    "nextYear": "Next year",
+    "previousYears": "Previous years",
+    "nextYears": "Next years",
+    "weekdays": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    "year": "Year",
+    "month": "Month",
+    "week": "Week",
+    "today": "Today",
+    "label": "Calendar"
+  },
+  "common": {
+    "confirm": "OK",
+    "cancel": "Cancel",
+    "close": "Close",
+    "start": "Start",
+    "end": "End",
+    "remove": "Remove",
+    "search": "Search options",
+    "noData": "No data",
+    "retry": "Retry",
+    "preview": "Preview",
+    "download": "Download",
+    "loading": "Loading",
+    "searchAction": "Search"
+  },
+  "form": {
+    "required": "Please fill out this field",
+    "invalid": "Please check this field",
+    "errorSummary": "Please check the following fields"
+  },
+  "breadcrumb": {
+    "label": "Breadcrumb"
+  },
+  "pagination": {
+    "label": "Pagination",
+    "previousPage": "Previous page",
+    "nextPage": "Next page",
+    "page": "Page",
+    "pageSize": "Page size",
+    "jumpTo": "Go to",
+    "pageBack": "Jump back 5 pages",
+    "pageForward": "Jump forward 5 pages",
+    "pageLabel": "Page {page}",
+    "pageSizeOption": "{count} / page",
+    "total": "Total {total} items"
+  },
+  "input": {
+    "showPassword": "Show password",
+    "hidePassword": "Hide password",
+    "clear": "Clear input"
+  },
+  "inputNumber": {
+    "increase": "Increase value",
+    "decrease": "Decrease value",
+    "invalid": "Enter a valid number within the allowed range"
+  },
+  "progress": {
+    "label": "Progress"
+  },
+  "avatar": {
+    "label": "Avatar",
+    "moreMembers": "More members",
+    "showMore": "Show {count, plural, one {# more member} other {# more members}}"
+  },
+  "rate": {
+    "label": "Rating"
+  },
+  "result": {
+    "success": "Success",
+    "warning": "Attention needed",
+    "error": "Something went wrong",
+    "info": "Information"
+  },
+  "colorPicker": {
+    "label": "Choose a color",
+    "clear": "Clear color",
+    "saturation": "Saturation",
+    "brightness": "Brightness",
+    "hue": "Hue",
+    "alpha": "Opacity",
+    "value": "Color value",
+    "invalid": "Enter a valid color",
+    "presets": "Preset colors",
+    "gradient": "Gradient",
+    "colorStop": "Color stop {index}",
+    "addColorStop": "Add color stop",
+    "removeColorStop": "Remove color stop",
+    "color": "Color",
+    "position": "Position",
+    "colorStopPosition": "Color stop position",
+    "angle": "Angle",
+    "gradientAngle": "Gradient angle"
+  },
+  "tree": {
+    "label": "Tree",
+    "expand": "Expand",
+    "reorderInstructions": "Press Space to pick up, Up/Down to choose a target, Left/Right to place before/after it, Space to drop, and Escape to cancel.",
+    "moveNode": "Move node {label}",
+    "expandNode": "Expand {label}",
+    "collapseNode": "Collapse {label}"
+  },
+  "collapse": {
+    "label": "Collapsible panels"
+  },
+  "slider": {
+    "label": "Slider"
+  },
+  "tabs": {
+    "moreTabs": "More tabs",
+    "addTab": "Add tab",
+    "reorder": "Reorder tab {label}",
+    "closeLabel": "Close tab {label}"
+  },
+  "backTop": {
+    "backToTop": "Back to top"
+  },
+  "button": {
+    "moreActions": "More actions"
+  },
+  "carousel": {
+    "carousel": "Carousel",
+    "previousSlide": "Previous slide",
+    "nextSlide": "Next slide",
+    "goTo": "Go to {index}",
+    "slide": "slide",
+    "role": "carousel"
+  },
+  "commandPalette": {
+    "commandSearch": "Command search",
+    "placeholder": "Search commands…",
+    "searchCommands": "Search commands",
+    "commands": "Commands",
+    "navigate": "Navigate",
+    "run": "Run"
+  },
+  "errorBoundary": {
+    "title": "This content could not be displayed",
+    "description": "Please retry or come back later."
+  },
+  "fileList": {
+    "fileType": "FILE",
+    "uploading": "Uploading",
+    "uploadFailed": "Upload failed",
+    "cancelled": "Cancelled",
+    "uploadComplete": "Upload complete",
+    "ready": "Ready",
+    "uploadProgress": "Upload progress {name}",
+    "noFiles": "No files",
+    "preview": "Preview {name}",
+    "download": "Download {name}",
+    "remove": "Remove {name}"
+  },
+  "floatButton": {
+    "quickActions": "Quick actions"
+  },
+  "image": {
+    "previewImage": "Preview image{alt}",
+    "imageUnavailable": "Image unavailable",
+    "imagePreview": "Image preview",
+    "downloadImage": "Download image",
+    "exitFullscreen": "Exit fullscreen",
+    "enterFullscreen": "Enter fullscreen",
+    "closePreview": "Close preview",
+    "previousImage": "Previous image",
+    "nextImage": "Next image",
+    "downloadFailedOpenTheOriginalImageToSaveIt": "Download failed. Open the original image to save it.",
+    "openOriginal": "Open original",
+    "zoomOut": "Zoom out",
+    "resetZoom": "Reset zoom",
+    "zoomIn": "Zoom in",
+    "showThumbnails": "Show thumbnails",
+    "scrollThumbnailsBackward": "Scroll thumbnails backward",
+    "imageList": "Image list",
+    "scrollThumbnailsForward": "Scroll thumbnails forward",
+    "image": "Image",
+    "position": "{index} of {total}",
+    "viewImage": "View image {index}{alt}"
+  },
+  "infiniteScroll": {
+    "loadingFailedRetry": "Loading failed. Retry",
+    "allItemsLoaded": "All items loaded",
+    "loadMore": "Load more"
+  },
+  "inputOTP": {
+    "verificationCode": "Verification code"
+  },
+  "layout": {
+    "expandSidebar": "Expand sidebar",
+    "collapseSidebar": "Collapse sidebar"
+  },
+  "loadingBar": {
+    "pageLoadingProgress": "Page loading progress"
+  },
+  "menu": {
+    "navigationMenu": "Navigation menu"
+  },
+  "popconfirm": {
+    "actionFailedPleaseRetry": "Action failed. Please retry."
+  },
+  "qrCode": {
+    "qrCode": "QR code",
+    "refreshCode": "Refresh code"
+  },
+  "scrollbar": {
+    "verticalScrollbar": "Vertical scrollbar",
+    "horizontalScrollbar": "Horizontal scrollbar"
+  },
+  "splitter": {
+    "resizePanel": "Resize panel {index}",
+    "togglePanel": "Toggle panel"
+  },
+  "table": {
+    "table": "Table",
+    "scrollArea": "Scroll area",
+    "loadError": "Unable to load data. Please try again."
+  },
+  "dataTable": {
+    "searchTable": "Search table",
+    "columns": "Columns",
+    "resizeColumn": "Resize column: {label}",
+    "selectRows": "Select rows",
+    "selectAllRowsOnThisPage": "Select all rows on this page",
+    "selectAllRows": "Select all rows",
+    "reorderRow": "Reorder row: {label}",
+    "selectRow": "Select row: {label}",
+    "collapseRow": "Collapse row: {label}",
+    "expandRow": "Expand row: {label}",
+    "reorderRows": "Reorder rows",
+    "expandRows": "Expand rows",
+    "sortAscending": "Sort ascending",
+    "sortDescending": "Sort descending",
+    "clearSorting": "Clear sorting",
+    "reorderColumn": "Reorder column: {label}"
+  },
+  "timeRangePicker": {
+    "placeholder": "Start time ~ End time",
+    "label": "Choose time range",
+    "clear": "Clear time range"
+  },
+  "tour": {
+    "previous": "Previous",
+    "finish": "Finish",
+    "next": "Next"
+  },
+  "transfer": {
+    "selectAllVisibleItems": "Select all visible items",
+    "available": "Available",
+    "selected": "Selected",
+    "searchAvailableItems": "Search available items",
+    "searchSelectedItems": "Search selected items",
+    "noItems": "No items",
+    "moveToSelected": "Move to selected",
+    "moveToAvailable": "Move to available"
+  },
+  "typography": {
+    "editText": "Edit text",
+    "collapse": "Collapse",
+    "expand": "Expand",
+    "copyText": "Copy text"
+  },
+  "upload": {
+    "uploadUrlCannotBeEmpty": "Upload URL cannot be empty",
+    "uploadFailed": "Upload failed",
+    "chooseOneFileAtATime": "Choose one file at a time",
+    "fileTypeIsNotAccepted": "File type is not accepted",
+    "fileExceedsTheSizeLimit": "File exceeds the size limit",
+    "fileCountLimitReached": "File count limit reached",
+    "fileValidationFailed": "File validation failed",
+    "chooseFiles": "Choose files",
+    "dropHint": "Click or drop files here",
+    "dropDescription": "Choose files or drag them into this area",
+    "cancelUpload": "Cancel upload {name}",
+    "retryUpload": "Retry upload {name}"
+  },
+  "treeSelect": {
+    "placeholder": "Please select",
+    "clear": "Clear selection",
+    "empty": "No options"
+  },
+  "drag": {
+    "instructions": "Press Space to start, arrow keys to move, Space to drop, and Escape to cancel.",
+    "pickedUp": "Picked up {label}",
+    "moved": "Move to {label}",
+    "dropped": "Dropped {label}",
+    "cancelled": "Reordering cancelled",
+    "outside": "No drop target"
+  }
+}
diff --git a/packages/react/src/locales/ja-JP.json b/packages/react/src/locales/ja-JP.json
new file mode 100644
index 0000000..d4239d9
--- /dev/null
+++ b/packages/react/src/locales/ja-JP.json
@@ -0,0 +1,335 @@
+{
+  "select": {
+    "placeholder": "選択してください",
+    "empty": "選択肢がありません",
+    "clear": "選択をクリア",
+    "create": "「{label}」を作成"
+  },
+  "autoComplete": {
+    "empty": "候補がありません",
+    "suggestions": "{label}の候補"
+  },
+  "datePicker": {
+    "placeholder": "日付を選択",
+    "clear": "日付をクリア",
+    "label": "日付を選択",
+    "selectDate": "日付を選択"
+  },
+  "timePicker": {
+    "placeholder": "時刻を選択",
+    "clear": "時刻をクリア",
+    "label": "時刻を選択",
+    "hours": "時",
+    "minutes": "分",
+    "seconds": "秒",
+    "period": "午前・午後",
+    "am": "午前",
+    "pm": "午後",
+    "now": "現在時刻",
+    "selectTime": "時刻を選択"
+  },
+  "dateTimePicker": {
+    "placeholder": "日時を選択"
+  },
+  "dateRangePicker": {
+    "placeholder": "日付の範囲を選択",
+    "clear": "範囲をクリア"
+  },
+  "cascader": {
+    "clear": "選択をクリア",
+    "level": "階層 {level}",
+    "placeholder": "選択してください",
+    "empty": "選択肢がありません"
+  },
+  "calendar": {
+    "previousMonth": "前の月",
+    "nextMonth": "次の月",
+    "previousYear": "前の年",
+    "nextYear": "次の年",
+    "previousYears": "前の年の範囲",
+    "nextYears": "次の年の範囲",
+    "weekdays": ["月", "火", "水", "木", "金", "土", "日"],
+    "year": "年",
+    "month": "月",
+    "week": "週",
+    "today": "今日",
+    "label": "カレンダー"
+  },
+  "common": {
+    "confirm": "確認",
+    "cancel": "キャンセル",
+    "close": "閉じる",
+    "start": "開始",
+    "end": "終了",
+    "remove": "削除",
+    "search": "選択肢を検索",
+    "noData": "データがありません",
+    "retry": "再試行",
+    "preview": "プレビュー",
+    "download": "ダウンロード",
+    "loading": "読み込み中",
+    "searchAction": "検索"
+  },
+  "form": {
+    "required": "この項目を入力してください",
+    "invalid": "この項目を確認してください",
+    "errorSummary": "次の項目を確認してください"
+  },
+  "breadcrumb": {
+    "label": "パンくずリスト"
+  },
+  "pagination": {
+    "label": "ページ切り替え",
+    "previousPage": "前のページ",
+    "nextPage": "次のページ",
+    "page": "ページ",
+    "pageSize": "表示件数",
+    "jumpTo": "移動先",
+    "pageBack": "5ページ前に移動",
+    "pageForward": "5ページ先に移動",
+    "pageLabel": "ページ {page}",
+    "pageSizeOption": "{count}件 / ページ",
+    "total": "全 {total} 件"
+  },
+  "input": {
+    "showPassword": "パスワードを表示",
+    "hidePassword": "パスワードを隠す",
+    "clear": "入力をクリア"
+  },
+  "inputNumber": {
+    "increase": "値を増やす",
+    "decrease": "値を減らす",
+    "invalid": "指定された範囲内の数値を入力してください"
+  },
+  "progress": {
+    "label": "進行状況"
+  },
+  "avatar": {
+    "label": "アバター",
+    "moreMembers": "その他のメンバー",
+    "showMore": "他{count}人のメンバーを表示"
+  },
+  "rate": {
+    "label": "評価"
+  },
+  "result": {
+    "success": "成功",
+    "warning": "確認が必要です",
+    "error": "エラーが発生しました",
+    "info": "お知らせ"
+  },
+  "colorPicker": {
+    "label": "色を選択",
+    "clear": "色をクリア",
+    "saturation": "彩度",
+    "brightness": "明度",
+    "hue": "色相",
+    "alpha": "不透明度",
+    "value": "色の値",
+    "invalid": "有効な色を入力してください",
+    "presets": "プリセットカラー",
+    "gradient": "グラデーション",
+    "colorStop": "カラーストップ {index}",
+    "addColorStop": "カラーストップを追加",
+    "removeColorStop": "カラーストップを削除",
+    "color": "色",
+    "position": "位置",
+    "colorStopPosition": "カラーストップの位置",
+    "angle": "角度",
+    "gradientAngle": "グラデーションの角度"
+  },
+  "tree": {
+    "label": "ツリー",
+    "expand": "展開",
+    "reorderInstructions": "Space キーで項目を選び、上下キーで移動先を選択します。左右キーで前後を指定し、Space キーで移動、Escape キーでキャンセルします。",
+    "moveNode": "{label}を移動",
+    "expandNode": "{label}を展開",
+    "collapseNode": "{label}を折りたたむ"
+  },
+  "collapse": {
+    "label": "折りたたみパネル"
+  },
+  "slider": {
+    "label": "スライダー"
+  },
+  "tabs": {
+    "moreTabs": "その他のタブ",
+    "addTab": "タブを追加",
+    "reorder": "タブ「{label}」を並べ替え",
+    "closeLabel": "タブ「{label}」を閉じる"
+  },
+  "backTop": {
+    "backToTop": "ページの先頭へ"
+  },
+  "button": {
+    "moreActions": "その他の操作"
+  },
+  "carousel": {
+    "carousel": "カルーセル",
+    "previousSlide": "前のスライド",
+    "nextSlide": "次のスライド",
+    "goTo": "{index}枚目に移動",
+    "slide": "スライド",
+    "role": "カルーセル"
+  },
+  "commandPalette": {
+    "commandSearch": "コマンド検索",
+    "placeholder": "コマンドを検索…",
+    "searchCommands": "コマンドを検索",
+    "commands": "コマンド",
+    "navigate": "移動",
+    "run": "実行"
+  },
+  "errorBoundary": {
+    "title": "このコンテンツを表示できませんでした",
+    "description": "再試行するか、しばらくしてからもう一度お試しください。"
+  },
+  "fileList": {
+    "fileType": "ファイル",
+    "uploading": "アップロード中",
+    "uploadFailed": "アップロードに失敗しました",
+    "cancelled": "キャンセル済み",
+    "uploadComplete": "アップロード完了",
+    "ready": "準備完了",
+    "uploadProgress": "{name}のアップロード状況",
+    "noFiles": "ファイルがありません",
+    "preview": "{name}をプレビュー",
+    "download": "{name}をダウンロード",
+    "remove": "{name}を削除"
+  },
+  "floatButton": {
+    "quickActions": "クイック操作"
+  },
+  "image": {
+    "previewImage": "画像をプレビュー{alt}",
+    "imageUnavailable": "画像を表示できません",
+    "imagePreview": "画像プレビュー",
+    "downloadImage": "画像をダウンロード",
+    "exitFullscreen": "全画面表示を終了",
+    "enterFullscreen": "全画面表示",
+    "closePreview": "プレビューを閉じる",
+    "previousImage": "前の画像",
+    "nextImage": "次の画像",
+    "downloadFailedOpenTheOriginalImageToSaveIt": "ダウンロードに失敗しました。元の画像を開いて保存してください。",
+    "openOriginal": "元の画像を開く",
+    "zoomOut": "縮小",
+    "resetZoom": "拡大率をリセット",
+    "zoomIn": "拡大",
+    "showThumbnails": "サムネイルを表示",
+    "scrollThumbnailsBackward": "サムネイルを前へスクロール",
+    "imageList": "画像一覧",
+    "scrollThumbnailsForward": "サムネイルを次へスクロール",
+    "image": "画像",
+    "position": "{total}枚中{index}枚目",
+    "viewImage": "画像{index}を表示{alt}"
+  },
+  "infiniteScroll": {
+    "loadingFailedRetry": "読み込みに失敗しました。再試行",
+    "allItemsLoaded": "すべて読み込みました",
+    "loadMore": "さらに読み込む"
+  },
+  "inputOTP": {
+    "verificationCode": "認証コード"
+  },
+  "layout": {
+    "expandSidebar": "サイドバーを展開",
+    "collapseSidebar": "サイドバーを折りたたむ"
+  },
+  "loadingBar": {
+    "pageLoadingProgress": "ページの読み込み状況"
+  },
+  "menu": {
+    "navigationMenu": "ナビゲーションメニュー"
+  },
+  "popconfirm": {
+    "actionFailedPleaseRetry": "操作に失敗しました。もう一度お試しください。"
+  },
+  "qrCode": {
+    "qrCode": "QRコード",
+    "refreshCode": "コードを更新"
+  },
+  "scrollbar": {
+    "verticalScrollbar": "縦スクロールバー",
+    "horizontalScrollbar": "横スクロールバー"
+  },
+  "splitter": {
+    "resizePanel": "パネル{index}のサイズを変更",
+    "togglePanel": "パネルを開閉"
+  },
+  "table": {
+    "table": "表",
+    "scrollArea": "スクロール領域",
+    "loadError": "データを読み込めませんでした。もう一度お試しください。"
+  },
+  "dataTable": {
+    "searchTable": "表を検索",
+    "columns": "列",
+    "resizeColumn": "列「{label}」の幅を変更",
+    "selectRows": "行を選択",
+    "selectAllRowsOnThisPage": "このページのすべての行を選択",
+    "selectAllRows": "すべての行を選択",
+    "reorderRow": "行「{label}」を並べ替え",
+    "selectRow": "行「{label}」を選択",
+    "collapseRow": "行「{label}」を折りたたむ",
+    "expandRow": "行「{label}」を展開",
+    "reorderRows": "行を並べ替え",
+    "expandRows": "行を展開",
+    "sortAscending": "昇順に並べ替え",
+    "sortDescending": "降順に並べ替え",
+    "clearSorting": "並べ替えを解除",
+    "reorderColumn": "列「{label}」を並べ替え"
+  },
+  "timeRangePicker": {
+    "placeholder": "開始時刻 ～ 終了時刻",
+    "label": "時刻の範囲を選択",
+    "clear": "時刻の範囲をクリア"
+  },
+  "tour": {
+    "previous": "前へ",
+    "finish": "完了",
+    "next": "次へ"
+  },
+  "transfer": {
+    "selectAllVisibleItems": "表示中の項目をすべて選択",
+    "available": "選択可能",
+    "selected": "選択済み",
+    "searchAvailableItems": "選択可能な項目を検索",
+    "searchSelectedItems": "選択済みの項目を検索",
+    "noItems": "項目がありません",
+    "moveToSelected": "選択済みに移動",
+    "moveToAvailable": "選択可能に戻す"
+  },
+  "typography": {
+    "editText": "テキストを編集",
+    "collapse": "折りたたむ",
+    "expand": "展開",
+    "copyText": "テキストをコピー"
+  },
+  "upload": {
+    "uploadUrlCannotBeEmpty": "アップロード先のURLを指定してください",
+    "uploadFailed": "アップロードに失敗しました",
+    "chooseOneFileAtATime": "ファイルを1つずつ選択してください",
+    "fileTypeIsNotAccepted": "対応していないファイル形式です",
+    "fileExceedsTheSizeLimit": "ファイルサイズの上限を超えています",
+    "fileCountLimitReached": "ファイル数の上限に達しました",
+    "fileValidationFailed": "ファイルの検証に失敗しました",
+    "chooseFiles": "ファイルを選択",
+    "dropHint": "クリックするか、ここにファイルをドロップ",
+    "dropDescription": "ファイルを選択するか、この領域にドラッグしてください",
+    "cancelUpload": "{name}のアップロードをキャンセル",
+    "retryUpload": "{name}のアップロードを再試行"
+  },
+  "treeSelect": {
+    "placeholder": "選択してください",
+    "clear": "選択をクリア",
+    "empty": "選択肢がありません"
+  },
+  "drag": {
+    "instructions": "Space キーで開始し、矢印キーで移動します。Space キーで確定、Escape キーでキャンセルします。",
+    "pickedUp": "{label}を選びました",
+    "moved": "{label}に移動",
+    "dropped": "{label}を配置しました",
+    "cancelled": "並べ替えをキャンセルしました",
+    "outside": "移動先がありません"
+  }
+}
diff --git a/packages/react/src/locales/ko-KR.json b/packages/react/src/locales/ko-KR.json
new file mode 100644
index 0000000..951e954
--- /dev/null
+++ b/packages/react/src/locales/ko-KR.json
@@ -0,0 +1,335 @@
+{
+  "select": {
+    "placeholder": "선택해 주세요",
+    "empty": "선택 항목 없음",
+    "clear": "선택 지우기",
+    "create": "“{label}” 만들기"
+  },
+  "autoComplete": {
+    "empty": "추천 항목 없음",
+    "suggestions": "{label} 추천 항목"
+  },
+  "datePicker": {
+    "placeholder": "날짜 선택",
+    "clear": "날짜 지우기",
+    "label": "날짜 선택",
+    "selectDate": "날짜 선택"
+  },
+  "timePicker": {
+    "placeholder": "시간 선택",
+    "clear": "시간 지우기",
+    "label": "시간 선택",
+    "hours": "시",
+    "minutes": "분",
+    "seconds": "초",
+    "period": "오전/오후",
+    "am": "오전",
+    "pm": "오후",
+    "now": "현재 시간",
+    "selectTime": "시간 선택"
+  },
+  "dateTimePicker": {
+    "placeholder": "날짜 및 시간 선택"
+  },
+  "dateRangePicker": {
+    "placeholder": "날짜 범위 선택",
+    "clear": "범위 지우기"
+  },
+  "cascader": {
+    "clear": "선택 지우기",
+    "level": "{level}단계",
+    "placeholder": "선택해 주세요",
+    "empty": "선택 항목 없음"
+  },
+  "calendar": {
+    "previousMonth": "이전 달",
+    "nextMonth": "다음 달",
+    "previousYear": "이전 해",
+    "nextYear": "다음 해",
+    "previousYears": "이전 연도 범위",
+    "nextYears": "다음 연도 범위",
+    "weekdays": ["월", "화", "수", "목", "금", "토", "일"],
+    "year": "연도",
+    "month": "월",
+    "week": "주",
+    "today": "오늘",
+    "label": "달력"
+  },
+  "common": {
+    "confirm": "확인",
+    "cancel": "취소",
+    "close": "닫기",
+    "start": "시작",
+    "end": "종료",
+    "remove": "삭제",
+    "search": "선택 항목 검색",
+    "noData": "데이터 없음",
+    "retry": "다시 시도",
+    "preview": "미리 보기",
+    "download": "다운로드",
+    "loading": "불러오는 중",
+    "searchAction": "검색"
+  },
+  "form": {
+    "required": "이 항목을 입력해 주세요",
+    "invalid": "이 항목을 확인해 주세요",
+    "errorSummary": "다음 항목을 확인해 주세요"
+  },
+  "breadcrumb": {
+    "label": "이동 경로"
+  },
+  "pagination": {
+    "label": "페이지 탐색",
+    "previousPage": "이전 페이지",
+    "nextPage": "다음 페이지",
+    "page": "페이지",
+    "pageSize": "페이지당 항목 수",
+    "jumpTo": "이동할 페이지",
+    "pageBack": "5페이지 이전으로 이동",
+    "pageForward": "5페이지 다음으로 이동",
+    "pageLabel": "{page}페이지",
+    "pageSizeOption": "페이지당 {count}개",
+    "total": "총 {total}개"
+  },
+  "input": {
+    "showPassword": "비밀번호 표시",
+    "hidePassword": "비밀번호 숨기기",
+    "clear": "입력 지우기"
+  },
+  "inputNumber": {
+    "increase": "값 증가",
+    "decrease": "값 감소",
+    "invalid": "허용 범위 내의 유효한 숫자를 입력해 주세요"
+  },
+  "progress": {
+    "label": "진행 상태"
+  },
+  "avatar": {
+    "label": "아바타",
+    "moreMembers": "다른 멤버",
+    "showMore": "멤버 {count}명 더 보기"
+  },
+  "rate": {
+    "label": "평점"
+  },
+  "result": {
+    "success": "성공",
+    "warning": "확인이 필요합니다",
+    "error": "오류가 발생했습니다",
+    "info": "안내"
+  },
+  "colorPicker": {
+    "label": "색상 선택",
+    "clear": "색상 지우기",
+    "saturation": "채도",
+    "brightness": "명도",
+    "hue": "색조",
+    "alpha": "불투명도",
+    "value": "색상 값",
+    "invalid": "유효한 색상을 입력해 주세요",
+    "presets": "기본 색상",
+    "gradient": "그라데이션",
+    "colorStop": "색상 정지점 {index}",
+    "addColorStop": "색상 정지점 추가",
+    "removeColorStop": "색상 정지점 삭제",
+    "color": "색상",
+    "position": "위치",
+    "colorStopPosition": "색상 정지점 위치",
+    "angle": "각도",
+    "gradientAngle": "그라데이션 각도"
+  },
+  "tree": {
+    "label": "트리",
+    "expand": "펼치기",
+    "reorderInstructions": "스페이스 키로 항목을 선택하고 위아래 방향키로 이동할 대상을 고르세요. 좌우 방향키로 대상의 앞뒤를 지정하고 스페이스 키로 놓거나 Esc 키로 취소하세요.",
+    "moveNode": "{label} 노드 이동",
+    "expandNode": "{label} 펼치기",
+    "collapseNode": "{label} 접기"
+  },
+  "collapse": {
+    "label": "접이식 패널"
+  },
+  "slider": {
+    "label": "슬라이더"
+  },
+  "tabs": {
+    "moreTabs": "다른 탭",
+    "addTab": "탭 추가",
+    "reorder": "{label} 탭 순서 변경",
+    "closeLabel": "{label} 탭 닫기"
+  },
+  "backTop": {
+    "backToTop": "맨 위로"
+  },
+  "button": {
+    "moreActions": "추가 작업"
+  },
+  "carousel": {
+    "carousel": "캐러셀",
+    "previousSlide": "이전 슬라이드",
+    "nextSlide": "다음 슬라이드",
+    "goTo": "{index}번째 슬라이드로 이동",
+    "slide": "슬라이드",
+    "role": "캐러셀"
+  },
+  "commandPalette": {
+    "commandSearch": "명령 검색",
+    "placeholder": "명령 검색…",
+    "searchCommands": "명령 검색",
+    "commands": "명령",
+    "navigate": "이동",
+    "run": "실행"
+  },
+  "errorBoundary": {
+    "title": "이 콘텐츠를 표시할 수 없습니다",
+    "description": "다시 시도하거나 잠시 후에 다시 방문해 주세요."
+  },
+  "fileList": {
+    "fileType": "파일",
+    "uploading": "업로드 중",
+    "uploadFailed": "업로드 실패",
+    "cancelled": "취소됨",
+    "uploadComplete": "업로드 완료",
+    "ready": "준비됨",
+    "uploadProgress": "{name} 업로드 진행 상태",
+    "noFiles": "파일 없음",
+    "preview": "{name} 미리 보기",
+    "download": "{name} 다운로드",
+    "remove": "{name} 삭제"
+  },
+  "floatButton": {
+    "quickActions": "빠른 작업"
+  },
+  "image": {
+    "previewImage": "이미지 미리 보기{alt}",
+    "imageUnavailable": "이미지를 표시할 수 없습니다",
+    "imagePreview": "이미지 미리 보기",
+    "downloadImage": "이미지 다운로드",
+    "exitFullscreen": "전체 화면 종료",
+    "enterFullscreen": "전체 화면으로 보기",
+    "closePreview": "미리 보기 닫기",
+    "previousImage": "이전 이미지",
+    "nextImage": "다음 이미지",
+    "downloadFailedOpenTheOriginalImageToSaveIt": "다운로드에 실패했습니다. 원본 이미지를 열어 저장해 주세요.",
+    "openOriginal": "원본 열기",
+    "zoomOut": "축소",
+    "resetZoom": "확대/축소 초기화",
+    "zoomIn": "확대",
+    "showThumbnails": "썸네일 표시",
+    "scrollThumbnailsBackward": "이전 썸네일로 스크롤",
+    "imageList": "이미지 목록",
+    "scrollThumbnailsForward": "다음 썸네일로 스크롤",
+    "image": "이미지",
+    "position": "{total}개 중 {index}번째",
+    "viewImage": "{index}번째 이미지 보기{alt}"
+  },
+  "infiniteScroll": {
+    "loadingFailedRetry": "불러오기 실패. 다시 시도",
+    "allItemsLoaded": "모든 항목을 불러왔습니다",
+    "loadMore": "더 불러오기"
+  },
+  "inputOTP": {
+    "verificationCode": "인증 코드"
+  },
+  "layout": {
+    "expandSidebar": "사이드바 펼치기",
+    "collapseSidebar": "사이드바 접기"
+  },
+  "loadingBar": {
+    "pageLoadingProgress": "페이지 로딩 진행 상태"
+  },
+  "menu": {
+    "navigationMenu": "탐색 메뉴"
+  },
+  "popconfirm": {
+    "actionFailedPleaseRetry": "작업에 실패했습니다. 다시 시도해 주세요."
+  },
+  "qrCode": {
+    "qrCode": "QR 코드",
+    "refreshCode": "코드 새로 고침"
+  },
+  "scrollbar": {
+    "verticalScrollbar": "세로 스크롤바",
+    "horizontalScrollbar": "가로 스크롤바"
+  },
+  "splitter": {
+    "resizePanel": "{index}번 패널 크기 조절",
+    "togglePanel": "패널 열기/닫기"
+  },
+  "table": {
+    "table": "표",
+    "scrollArea": "스크롤 영역",
+    "loadError": "데이터를 불러올 수 없습니다. 다시 시도해 주세요."
+  },
+  "dataTable": {
+    "searchTable": "표 검색",
+    "columns": "열",
+    "resizeColumn": "{label} 열 너비 조절",
+    "selectRows": "행 선택",
+    "selectAllRowsOnThisPage": "이 페이지의 모든 행 선택",
+    "selectAllRows": "모든 행 선택",
+    "reorderRow": "{label} 행 순서 변경",
+    "selectRow": "{label} 행 선택",
+    "collapseRow": "{label} 행 접기",
+    "expandRow": "{label} 행 펼치기",
+    "reorderRows": "행 순서 변경",
+    "expandRows": "행 펼치기",
+    "sortAscending": "오름차순 정렬",
+    "sortDescending": "내림차순 정렬",
+    "clearSorting": "정렬 해제",
+    "reorderColumn": "{label} 열 순서 변경"
+  },
+  "timeRangePicker": {
+    "placeholder": "시작 시간 ~ 종료 시간",
+    "label": "시간 범위 선택",
+    "clear": "시간 범위 지우기"
+  },
+  "tour": {
+    "previous": "이전",
+    "finish": "완료",
+    "next": "다음"
+  },
+  "transfer": {
+    "selectAllVisibleItems": "표시된 항목 모두 선택",
+    "available": "선택 가능",
+    "selected": "선택됨",
+    "searchAvailableItems": "선택 가능한 항목 검색",
+    "searchSelectedItems": "선택된 항목 검색",
+    "noItems": "항목 없음",
+    "moveToSelected": "선택됨으로 이동",
+    "moveToAvailable": "선택 가능으로 이동"
+  },
+  "typography": {
+    "editText": "텍스트 편집",
+    "collapse": "접기",
+    "expand": "펼치기",
+    "copyText": "텍스트 복사"
+  },
+  "upload": {
+    "uploadUrlCannotBeEmpty": "업로드 URL을 입력해 주세요",
+    "uploadFailed": "업로드 실패",
+    "chooseOneFileAtATime": "파일을 한 번에 하나씩 선택해 주세요",
+    "fileTypeIsNotAccepted": "지원하지 않는 파일 형식입니다",
+    "fileExceedsTheSizeLimit": "파일 크기 제한을 초과했습니다",
+    "fileCountLimitReached": "파일 개수 제한에 도달했습니다",
+    "fileValidationFailed": "파일 유효성 검사 실패",
+    "chooseFiles": "파일 선택",
+    "dropHint": "클릭하거나 파일을 여기에 놓으세요",
+    "dropDescription": "파일을 선택하거나 이 영역으로 끌어오세요",
+    "cancelUpload": "{name} 업로드 취소",
+    "retryUpload": "{name} 업로드 다시 시도"
+  },
+  "treeSelect": {
+    "placeholder": "선택해 주세요",
+    "clear": "선택 지우기",
+    "empty": "선택 항목 없음"
+  },
+  "drag": {
+    "instructions": "스페이스 키로 시작하고 방향키로 이동하세요. 스페이스 키로 놓거나 Esc 키로 취소하세요.",
+    "pickedUp": "{label} 선택됨",
+    "moved": "{label}(으)로 이동",
+    "dropped": "{label} 놓음",
+    "cancelled": "순서 변경이 취소되었습니다",
+    "outside": "놓을 위치 없음"
+  }
+}
diff --git a/packages/react/src/locales/messages.ts b/packages/react/src/locales/messages.ts
new file mode 100644
index 0000000..6934bd8
--- /dev/null
+++ b/packages/react/src/locales/messages.ts
@@ -0,0 +1,336 @@
+// Generated by scripts/generate-locale.mjs from en-US.json.
+export interface LocaleMessages {
+  readonly select: {
+    readonly placeholder: string;
+    readonly empty: string;
+    readonly clear: string;
+    readonly create: string;
+  };
+  readonly autoComplete: {
+    readonly empty: string;
+    readonly suggestions: string;
+  };
+  readonly datePicker: {
+    readonly placeholder: string;
+    readonly clear: string;
+    readonly label: string;
+    readonly selectDate: string;
+  };
+  readonly timePicker: {
+    readonly placeholder: string;
+    readonly clear: string;
+    readonly label: string;
+    readonly hours: string;
+    readonly minutes: string;
+    readonly seconds: string;
+    readonly period: string;
+    readonly am: string;
+    readonly pm: string;
+    readonly now: string;
+    readonly selectTime: string;
+  };
+  readonly dateTimePicker: {
+    readonly placeholder: string;
+  };
+  readonly dateRangePicker: {
+    readonly placeholder: string;
+    readonly clear: string;
+  };
+  readonly cascader: {
+    readonly clear: string;
+    readonly level: string;
+    readonly placeholder: string;
+    readonly empty: string;
+  };
+  readonly calendar: {
+    readonly previousMonth: string;
+    readonly nextMonth: string;
+    readonly previousYear: string;
+    readonly nextYear: string;
+    readonly previousYears: string;
+    readonly nextYears: string;
+    readonly weekdays: readonly string[];
+    readonly year: string;
+    readonly month: string;
+    readonly week: string;
+    readonly today: string;
+    readonly label: string;
+  };
+  readonly common: {
+    readonly confirm: string;
+    readonly cancel: string;
+    readonly close: string;
+    readonly start: string;
+    readonly end: string;
+    readonly remove: string;
+    readonly search: string;
+    readonly noData: string;
+    readonly retry: string;
+    readonly preview: string;
+    readonly download: string;
+    readonly loading: string;
+    readonly searchAction: string;
+  };
+  readonly form: {
+    readonly required: string;
+    readonly invalid: string;
+    readonly errorSummary: string;
+  };
+  readonly breadcrumb: {
+    readonly label: string;
+  };
+  readonly pagination: {
+    readonly label: string;
+    readonly previousPage: string;
+    readonly nextPage: string;
+    readonly page: string;
+    readonly pageSize: string;
+    readonly jumpTo: string;
+    readonly pageBack: string;
+    readonly pageForward: string;
+    readonly pageLabel: string;
+    readonly pageSizeOption: string;
+    readonly total: string;
+  };
+  readonly input: {
+    readonly showPassword: string;
+    readonly hidePassword: string;
+    readonly clear: string;
+  };
+  readonly inputNumber: {
+    readonly increase: string;
+    readonly decrease: string;
+    readonly invalid: string;
+  };
+  readonly progress: {
+    readonly label: string;
+  };
+  readonly avatar: {
+    readonly label: string;
+    readonly moreMembers: string;
+    readonly showMore: string;
+  };
+  readonly rate: {
+    readonly label: string;
+  };
+  readonly result: {
+    readonly success: string;
+    readonly warning: string;
+    readonly error: string;
+    readonly info: string;
+  };
+  readonly colorPicker: {
+    readonly label: string;
+    readonly clear: string;
+    readonly saturation: string;
+    readonly brightness: string;
+    readonly hue: string;
+    readonly alpha: string;
+    readonly value: string;
+    readonly invalid: string;
+    readonly presets: string;
+    readonly gradient: string;
+    readonly colorStop: string;
+    readonly addColorStop: string;
+    readonly removeColorStop: string;
+    readonly color: string;
+    readonly position: string;
+    readonly colorStopPosition: string;
+    readonly angle: string;
+    readonly gradientAngle: string;
+  };
+  readonly tree: {
+    readonly label: string;
+    readonly expand: string;
+    readonly reorderInstructions: string;
+    readonly moveNode: string;
+    readonly expandNode: string;
+    readonly collapseNode: string;
+  };
+  readonly collapse: {
+    readonly label: string;
+  };
+  readonly slider: {
+    readonly label: string;
+  };
+  readonly tabs: {
+    readonly moreTabs: string;
+    readonly addTab: string;
+    readonly reorder: string;
+    readonly closeLabel: string;
+  };
+  readonly backTop: {
+    readonly backToTop: string;
+  };
+  readonly button: {
+    readonly moreActions: string;
+  };
+  readonly carousel: {
+    readonly carousel: string;
+    readonly previousSlide: string;
+    readonly nextSlide: string;
+    readonly goTo: string;
+    readonly slide: string;
+    readonly role: string;
+  };
+  readonly commandPalette: {
+    readonly commandSearch: string;
+    readonly placeholder: string;
+    readonly searchCommands: string;
+    readonly commands: string;
+    readonly navigate: string;
+    readonly run: string;
+  };
+  readonly errorBoundary: {
+    readonly title: string;
+    readonly description: string;
+  };
+  readonly fileList: {
+    readonly fileType: string;
+    readonly uploading: string;
+    readonly uploadFailed: string;
+    readonly cancelled: string;
+    readonly uploadComplete: string;
+    readonly ready: string;
+    readonly uploadProgress: string;
+    readonly noFiles: string;
+    readonly preview: string;
+    readonly download: string;
+    readonly remove: string;
+  };
+  readonly floatButton: {
+    readonly quickActions: string;
+  };
+  readonly image: {
+    readonly previewImage: string;
+    readonly imageUnavailable: string;
+    readonly imagePreview: string;
+    readonly downloadImage: string;
+    readonly exitFullscreen: string;
+    readonly enterFullscreen: string;
+    readonly closePreview: string;
+    readonly previousImage: string;
+    readonly nextImage: string;
+    readonly downloadFailedOpenTheOriginalImageToSaveIt: string;
+    readonly openOriginal: string;
+    readonly zoomOut: string;
+    readonly resetZoom: string;
+    readonly zoomIn: string;
+    readonly showThumbnails: string;
+    readonly scrollThumbnailsBackward: string;
+    readonly imageList: string;
+    readonly scrollThumbnailsForward: string;
+    readonly image: string;
+    readonly position: string;
+    readonly viewImage: string;
+  };
+  readonly infiniteScroll: {
+    readonly loadingFailedRetry: string;
+    readonly allItemsLoaded: string;
+    readonly loadMore: string;
+  };
+  readonly inputOTP: {
+    readonly verificationCode: string;
+  };
+  readonly layout: {
+    readonly expandSidebar: string;
+    readonly collapseSidebar: string;
+  };
+  readonly loadingBar: {
+    readonly pageLoadingProgress: string;
+  };
+  readonly menu: {
+    readonly navigationMenu: string;
+  };
+  readonly popconfirm: {
+    readonly actionFailedPleaseRetry: string;
+  };
+  readonly qrCode: {
+    readonly qrCode: string;
+    readonly refreshCode: string;
+  };
+  readonly scrollbar: {
+    readonly verticalScrollbar: string;
+    readonly horizontalScrollbar: string;
+  };
+  readonly splitter: {
+    readonly resizePanel: string;
+    readonly togglePanel: string;
+  };
+  readonly table: {
+    readonly table: string;
+    readonly scrollArea: string;
+    readonly loadError: string;
+  };
+  readonly dataTable: {
+    readonly searchTable: string;
+    readonly columns: string;
+    readonly resizeColumn: string;
+    readonly selectRows: string;
+    readonly selectAllRowsOnThisPage: string;
+    readonly selectAllRows: string;
+    readonly reorderRow: string;
+    readonly selectRow: string;
+    readonly collapseRow: string;
+    readonly expandRow: string;
+    readonly reorderRows: string;
+    readonly expandRows: string;
+    readonly sortAscending: string;
+    readonly sortDescending: string;
+    readonly clearSorting: string;
+    readonly reorderColumn: string;
+  };
+  readonly timeRangePicker: {
+    readonly placeholder: string;
+    readonly label: string;
+    readonly clear: string;
+  };
+  readonly tour: {
+    readonly previous: string;
+    readonly finish: string;
+    readonly next: string;
+  };
+  readonly transfer: {
+    readonly selectAllVisibleItems: string;
+    readonly available: string;
+    readonly selected: string;
+    readonly searchAvailableItems: string;
+    readonly searchSelectedItems: string;
+    readonly noItems: string;
+    readonly moveToSelected: string;
+    readonly moveToAvailable: string;
+  };
+  readonly typography: {
+    readonly editText: string;
+    readonly collapse: string;
+    readonly expand: string;
+    readonly copyText: string;
+  };
+  readonly upload: {
+    readonly uploadUrlCannotBeEmpty: string;
+    readonly uploadFailed: string;
+    readonly chooseOneFileAtATime: string;
+    readonly fileTypeIsNotAccepted: string;
+    readonly fileExceedsTheSizeLimit: string;
+    readonly fileCountLimitReached: string;
+    readonly fileValidationFailed: string;
+    readonly chooseFiles: string;
+    readonly dropHint: string;
+    readonly dropDescription: string;
+    readonly cancelUpload: string;
+    readonly retryUpload: string;
+  };
+  readonly treeSelect: {
+    readonly placeholder: string;
+    readonly clear: string;
+    readonly empty: string;
+  };
+  readonly drag: {
+    readonly instructions: string;
+    readonly pickedUp: string;
+    readonly moved: string;
+    readonly dropped: string;
+    readonly cancelled: string;
+    readonly outside: string;
+  };
+}
diff --git a/packages/react/src/locales/resolve.ts b/packages/react/src/locales/resolve.ts
new file mode 100644
index 0000000..edd0589
--- /dev/null
+++ b/packages/react/src/locales/resolve.ts
@@ -0,0 +1,97 @@
+import enUS from './en-US.json';
+import jaJP from './ja-JP.json';
+import koKR from './ko-KR.json';
+import type { LeafTranslations, LocaleMessages, TranslationKey } from './types';
+import zhCN from './zh-CN.json';
+import zhTW from './zh-TW.json';
+
+const builtins: Readonly<Record<string, LocaleMessages>> = {
+  'en-US': enUS,
+  'ja-JP': jaJP,
+  'ko-KR': koKR,
+  'zh-CN': zhCN,
+  'zh-TW': zhTW,
+};
+const emptyTranslations: LeafTranslations = {};
+type Group = keyof LocaleMessages;
+
+/** Only explicit tags participate; no implicit language or region matching. */
+export function localeChain(locale: string | readonly string[]): readonly string[] {
+  const values = typeof locale === 'string' ? [locale] : locale;
+  if (values.length === 0)
+    throw new RangeError('ConfigProvider locale must contain at least one language tag.');
+  return Intl.getCanonicalLocales([...values]);
+}
+
+/** Pure per-scope merge. Arrays are atomic and undefined never erases inherited entries. */
+export function mergeTranslations(
+  parent: LeafTranslations,
+  own: LeafTranslations | undefined,
+): LeafTranslations {
+  if (!own || Object.keys(own).length === 0) return parent;
+  const merged: Record<string, Record<string, unknown>> = { ...parent };
+  for (const [tag, resource] of Object.entries(own)) {
+    const language = localeChain(tag)[0] as string;
+    const previous = merged[language];
+    const groups: Record<string, unknown> = { ...previous };
+    // Ignore unknown keys at runtime. JSON Schema and the public type catch them in authoring.
+    for (const group of Object.keys(enUS) as Group[]) {
+      const content = resource?.[group];
+      if (!content || typeof content !== 'object' || Array.isArray(content)) continue;
+      const entries: Record<string, unknown> = { ...(groups[group] as object) };
+      for (const key of Object.keys(enUS[group])) {
+        const value = (content as Record<string, unknown>)[key];
+        const template = (enUS[group] as Record<string, unknown>)[key];
+        if (typeof template === 'string' && typeof value === 'string') entries[key] = value;
+        else if (
+          Array.isArray(template) &&
+          Array.isArray(value) &&
+          value.length === template.length &&
+          value.every((entry) => typeof entry === 'string')
+        )
+          entries[key] = value;
+      }
+      groups[group] = entries;
+    }
+    merged[language] = groups;
+  }
+  return merged as LeafTranslations;
+}
+
+/** Resolve each entry once per Provider update, preserving the source language for plurals. */
+export function resolveTranslations(
+  chain: readonly string[],
+  translations: LeafTranslations = emptyTranslations,
+) {
+  const result: Record<string, Record<string, unknown>> = {};
+  const messageLocales: Partial<Record<TranslationKey, string>> = {};
+  for (const group of Object.keys(enUS) as Group[]) {
+    const entries: Record<string, unknown> = {};
+    for (const key of Object.keys(enUS[group])) {
+      let value: unknown;
+      let source = 'en-US';
+      for (const language of chain) {
+        const custom = translations[language]?.[group] as Record<string, unknown> | undefined;
+        const builtin = builtins[language]?.[group] as Record<string, unknown> | undefined;
+        value = custom?.[key] ?? builtin?.[key];
+        if (value !== undefined) {
+          source = language;
+          break;
+        }
+      }
+      entries[key] = value ?? (enUS[group] as Record<string, unknown>)[key];
+      if (source !== chain[0]) messageLocales[`${group}.${key}` as TranslationKey] = source;
+    }
+    result[group] = entries;
+  }
+  // Every group and entry above comes from the complete English template.
+  return { messages: result as unknown as LocaleMessages, messageLocales };
+}
+
+export function getMessage(messages: LocaleMessages, key: TranslationKey): string {
+  const [group, name] = key.split('.') as [Group, string];
+  return (messages[group] as Record<string, string>)[name] as string;
+}
+export function getEnglishMessage(key: TranslationKey) {
+  return getMessage(enUS, key);
+}
diff --git a/packages/react/src/locales/resources.test.ts b/packages/react/src/locales/resources.test.ts
new file mode 100644
index 0000000..2f6deba
--- /dev/null
+++ b/packages/react/src/locales/resources.test.ts
@@ -0,0 +1,72 @@
+// @vitest-environment node
+import { spawnSync } from 'node:child_process';
+import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const checker = path.resolve('scripts/check-translations.mjs');
+function run(file: string, ...args: string[]) {
+  return spawnSync(process.execPath, [checker, file, ...args], { encoding: 'utf8' });
+}
+describe('published JSON resources and validation', () => {
+  it.each(['en-US', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR'])(
+    'validates the complete %s resource and all ICU arguments',
+    (locale) => {
+      const result = run(`src/locales/${locale}.json`);
+      expect(result.stdout + result.stderr).toContain('Translation valid.');
+      expect(result.status).toBe(0);
+    },
+  );
+  it('keeps the generated schema and traditional resource current', () => {
+    const result = spawnSync(process.execPath, ['scripts/generate-locale.mjs', '--check'], {
+      encoding: 'utf8',
+    });
+    expect(result.stderr).toBe('');
+    expect(result.status).toBe(0);
+  });
+  it('reports missing entries while supporting intentional partial files', async () => {
+    const directory = await mkdtemp(path.join(tmpdir(), 'leaf-translations-'));
+    try {
+      const file = path.join(directory, 'ja-JP.json');
+      await writeFile(
+        file,
+        JSON.stringify({ $schema: 'schema.json', select: { placeholder: '選択' } }),
+      );
+      expect(run(file).status).toBe(1);
+      const partial = run(file, '--allow-partial');
+      expect(partial.status).toBe(0);
+      expect(partial.stdout).toContain('Missing translations');
+      expect(partial.stdout).toContain('select.empty');
+      await writeFile(file, JSON.stringify({ pagination: { total: '' } }));
+      expect(run(file, '--allow-partial').status).toBe(0);
+    } finally {
+      await rm(directory, { recursive: true, force: true });
+    }
+  });
+  it('rejects unknown keys, invalid arrays, malformed ICU and renamed placeholders', async () => {
+    const directory = await mkdtemp(path.join(tmpdir(), 'leaf-translations-'));
+    try {
+      const file = path.join(directory, 'bad.json');
+      const cases = [
+        [{ select: { typo: 'Wrong' } }, 'select.typo: unknown key'],
+        [{ constructor: { typo: 'Wrong' } }, 'constructor: unknown key'],
+        [{ calendar: { weekdays: ['Monday'] } }, 'calendar.weekdays: expected 7 strings'],
+        [{ pagination: { total: '{count} items' } }, 'pagination.total: template arguments differ'],
+        [{ pagination: { total: '{total, plural, invalid' } }, 'pagination.total:'],
+        [{ select: { placeholder: 42 } }, 'select.placeholder: expected a string'],
+      ] as const;
+      for (const [data, message] of cases) {
+        await writeFile(file, JSON.stringify(data));
+        const result = run(file, '--allow-partial');
+        expect(result.status).toBe(1);
+        expect(result.stderr).toContain(message);
+      }
+      const schema = JSON.parse(await readFile('src/locales/schema.json', 'utf8'));
+      expect(schema.additionalProperties).toBe(false);
+      expect(schema.properties.select.properties.placeholder.type).toBe('string');
+    } finally {
+      await rm(directory, { recursive: true, force: true });
+    }
+  });
+});
diff --git a/packages/react/src/locales/schema.json b/packages/react/src/locales/schema.json
new file mode 100644
index 0000000..6f55637
--- /dev/null
+++ b/packages/react/src/locales/schema.json
@@ -0,0 +1,1250 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Leaf UI translation resources",
+  "description": "Partial resources are supported. Missing entries follow ConfigProvider.locale.",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "select": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "placeholder": {
+          "type": "string",
+          "description": "English: Please select"
+        },
+        "empty": {
+          "type": "string",
+          "description": "English: No options"
+        },
+        "clear": {
+          "type": "string",
+          "description": "English: Clear selection"
+        },
+        "create": {
+          "type": "string",
+          "description": "English: Create “{label}”"
+        }
+      }
+    },
+    "autoComplete": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "empty": {
+          "type": "string",
+          "description": "English: No suggestions"
+        },
+        "suggestions": {
+          "type": "string",
+          "description": "English: {label} suggestions"
+        }
+      }
+    },
+    "datePicker": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "placeholder": {
+          "type": "string",
+          "description": "English: Select a date"
+        },
+        "clear": {
+          "type": "string",
+          "description": "English: Clear date"
+        },
+        "label": {
+          "type": "string",
+          "description": "English: Choose a date"
+        },
+        "selectDate": {
+          "type": "string",
+          "description": "English: Choose date"
+        }
+      }
+    },
+    "timePicker": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "placeholder": {
+          "type": "string",
+          "description": "English: Select a time"
+        },
+        "clear": {
+          "type": "string",
+          "description": "English: Clear time"
+        },
+        "label": {
+          "type": "string",
+          "description": "English: Choose a time"
+        },
+        "hours": {
+          "type": "string",
+          "description": "English: Hours"
+        },
+        "minutes": {
+          "type": "string",
+          "description": "English: Minutes"
+        },
+        "seconds": {
+          "type": "string",
+          "description": "English: Seconds"
+        },
+        "period": {
+          "type": "string",
+          "description": "English: Period"
+        },
+        "am": {
+          "type": "string",
+          "description": "English: AM"
+        },
+        "pm": {
+          "type": "string",
+          "description": "English: PM"
+        },
+        "now": {
+          "type": "string",
+          "description": "English: Now"
+        },
+        "selectTime": {
+          "type": "string",
+          "description": "English: Choose time"
+        }
+      }
+    },
+    "dateTimePicker": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "placeholder": {
+          "type": "string",
+          "description": "English: Select date and time"
+        }
+      }
+    },
+    "dateRangePicker": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "placeholder": {
+          "type": "string",
+          "description": "English: Select a date range"
+        },
+        "clear": {
+          "type": "string",
+          "description": "English: Clear range"
+        }
+      }
+    },
+    "cascader": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "clear": {
+          "type": "string",
+          "description": "English: Clear selection"
+        },
+        "level": {
+          "type": "string",
+          "description": "English: Level {level}"
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "English: Please select"
+        },
+        "empty": {
+          "type": "string",
+          "description": "English: No options"
+        }
+      }
+    },
+    "calendar": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "previousMonth": {
+          "type": "string",
+          "description": "English: Previous month"
+        },
+        "nextMonth": {
+          "type": "string",
+          "description": "English: Next month"
+        },
+        "previousYear": {
+          "type": "string",
+          "description": "English: Previous year"
+        },
+        "nextYear": {
+          "type": "string",
+          "description": "English: Next year"
+        },
+        "previousYears": {
+          "type": "string",
+          "description": "English: Previous years"
+        },
+        "nextYears": {
+          "type": "string",
+          "description": "English: Next years"
+        },
+        "weekdays": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "minItems": 7,
+          "maxItems": 7
+        },
+        "year": {
+          "type": "string",
+          "description": "English: Year"
+        },
+        "month": {
+          "type": "string",
+          "description": "English: Month"
+        },
+        "week": {
+          "type": "string",
+          "description": "English: Week"
+        },
+        "today": {
+          "type": "string",
+          "description": "English: Today"
+        },
+        "label": {
+          "type": "string",
+          "description": "English: Calendar"
+        }
+      }
+    },
+    "common": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "confirm": {
+          "type": "string",
+          "description": "English: OK"
+        },
+        "cancel": {
+          "type": "string",
+          "description": "English: Cancel"
+        },
+        "close": {
+          "type": "string",
+          "description": "English: Close"
+        },
+        "start": {
+          "type": "string",
+          "description": "English: Start"
+        },
+        "end": {
+          "type": "string",
+          "description": "English: End"
+        },
+        "remove": {
+          "type": "string",
+          "description": "English: Remove"
+        },
+        "search": {
+          "type": "string",
+          "description": "English: Search options"
+        },
+        "noData": {
+          "type": "string",
+          "description": "English: No data"
+        },
+        "retry": {
+          "type": "string",
+          "description": "English: Retry"
+        },
+        "preview": {
+          "type": "string",
+          "description": "English: Preview"
+        },
+        "download": {
+          "type": "string",
+          "description": "English: Download"
+        },
+        "loading": {
+          "type": "string",
+          "description": "English: Loading"
+        },
+        "searchAction": {
+          "type": "string",
+          "description": "English: Search"
+        }
+      }
+    },
+    "form": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "required": {
+          "type": "string",
+          "description": "English: Please fill out this field"
+        },
+        "invalid": {
+          "type": "string",
+          "description": "English: Please check this field"
+        },
+        "errorSummary": {
+          "type": "string",
+          "description": "English: Please check the following fields"
+        }
+      }
+    },
+    "breadcrumb": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "English: Breadcrumb"
+        }
+      }
+    },
+    "pagination": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "English: Pagination"
+        },
+        "previousPage": {
+          "type": "string",
+          "description": "English: Previous page"
+        },
+        "nextPage": {
+          "type": "string",
+          "description": "English: Next page"
+        },
+        "page": {
+          "type": "string",
+          "description": "English: Page"
+        },
+        "pageSize": {
+          "type": "string",
+          "description": "English: Page size"
+        },
+        "jumpTo": {
+          "type": "string",
+          "description": "English: Go to"
+        },
+        "pageBack": {
+          "type": "string",
+          "description": "English: Jump back 5 pages"
+        },
+        "pageForward": {
+          "type": "string",
+          "description": "English: Jump forward 5 pages"
+        },
+        "pageLabel": {
+          "type": "string",
+          "description": "English: Page {page}"
+        },
+        "pageSizeOption": {
+          "type": "string",
+          "description": "English: {count} / page"
+        },
+        "total": {
+          "type": "string",
+          "description": "English: Total {total} items"
+        }
+      }
+    },
+    "input": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "showPassword": {
+          "type": "string",
+          "description": "English: Show password"
+        },
+        "hidePassword": {
+          "type": "string",
+          "description": "English: Hide password"
+        },
+        "clear": {
+          "type": "string",
+          "description": "English: Clear input"
+        }
+      }
+    },
+    "inputNumber": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "increase": {
+          "type": "string",
+          "description": "English: Increase value"
+        },
+        "decrease": {
+          "type": "string",
+          "description": "English: Decrease value"
+        },
+        "invalid": {
+          "type": "string",
+          "description": "English: Enter a valid number within the allowed range"
+        }
+      }
+    },
+    "progress": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "English: Progress"
+        }
+      }
+    },
+    "avatar": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "English: Avatar"
+        },
+        "moreMembers": {
+          "type": "string",
+          "description": "English: More members"
+        },
+        "showMore": {
+          "type": "string",
+          "description": "English: Show {count, plural, one {# more member} other {# more members}}"
+        }
+      }
+    },
+    "rate": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "English: Rating"
+        }
+      }
+    },
+    "result": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "success": {
+          "type": "string",
+          "description": "English: Success"
+        },
+        "warning": {
+          "type": "string",
+          "description": "English: Attention needed"
+        },
+        "error": {
+          "type": "string",
+          "description": "English: Something went wrong"
+        },
+        "info": {
+          "type": "string",
+          "description": "English: Information"
+        }
+      }
+    },
+    "colorPicker": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "English: Choose a color"
+        },
+        "clear": {
+          "type": "string",
+          "description": "English: Clear color"
+        },
+        "saturation": {
+          "type": "string",
+          "description": "English: Saturation"
+        },
+        "brightness": {
+          "type": "string",
+          "description": "English: Brightness"
+        },
+        "hue": {
+          "type": "string",
+          "description": "English: Hue"
+        },
+        "alpha": {
+          "type": "string",
+          "description": "English: Opacity"
+        },
+        "value": {
+          "type": "string",
+          "description": "English: Color value"
+        },
+        "invalid": {
+          "type": "string",
+          "description": "English: Enter a valid color"
+        },
+        "presets": {
+          "type": "string",
+          "description": "English: Preset colors"
+        },
+        "gradient": {
+          "type": "string",
+          "description": "English: Gradient"
+        },
+        "colorStop": {
+          "type": "string",
+          "description": "English: Color stop {index}"
+        },
+        "addColorStop": {
+          "type": "string",
+          "description": "English: Add color stop"
+        },
+        "removeColorStop": {
+          "type": "string",
+          "description": "English: Remove color stop"
+        },
+        "color": {
+          "type": "string",
+          "description": "English: Color"
+        },
+        "position": {
+          "type": "string",
+          "description": "English: Position"
+        },
+        "colorStopPosition": {
+          "type": "string",
+          "description": "English: Color stop position"
+        },
+        "angle": {
+          "type": "string",
+          "description": "English: Angle"
+        },
+        "gradientAngle": {
+          "type": "string",
+          "description": "English: Gradient angle"
+        }
+      }
+    },
+    "tree": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "English: Tree"
+        },
+        "expand": {
+          "type": "string",
+          "description": "English: Expand"
+        },
+        "reorderInstructions": {
+          "type": "string",
+          "description": "English: Press Space to pick up, Up/Down to choose a target, Left/Right to place before/after it, Space to drop, and Escape to cancel."
+        },
+        "moveNode": {
+          "type": "string",
+          "description": "English: Move node {label}"
+        },
+        "expandNode": {
+          "type": "string",
+          "description": "English: Expand {label}"
+        },
+        "collapseNode": {
+          "type": "string",
+          "description": "English: Collapse {label}"
+        }
+      }
+    },
+    "collapse": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "English: Collapsible panels"
+        }
+      }
+    },
+    "slider": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "English: Slider"
+        }
+      }
+    },
+    "tabs": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "moreTabs": {
+          "type": "string",
+          "description": "English: More tabs"
+        },
+        "addTab": {
+          "type": "string",
+          "description": "English: Add tab"
+        },
+        "reorder": {
+          "type": "string",
+          "description": "English: Reorder tab {label}"
+        },
+        "closeLabel": {
+          "type": "string",
+          "description": "English: Close tab {label}"
+        }
+      }
+    },
+    "backTop": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "backToTop": {
+          "type": "string",
+          "description": "English: Back to top"
+        }
+      }
+    },
+    "button": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "moreActions": {
+          "type": "string",
+          "description": "English: More actions"
+        }
+      }
+    },
+    "carousel": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "carousel": {
+          "type": "string",
+          "description": "English: Carousel"
+        },
+        "previousSlide": {
+          "type": "string",
+          "description": "English: Previous slide"
+        },
+        "nextSlide": {
+          "type": "string",
+          "description": "English: Next slide"
+        },
+        "goTo": {
+          "type": "string",
+          "description": "English: Go to {index}"
+        },
+        "slide": {
+          "type": "string",
+          "description": "English: slide"
+        },
+        "role": {
+          "type": "string",
+          "description": "English: carousel"
+        }
+      }
+    },
+    "commandPalette": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "commandSearch": {
+          "type": "string",
+          "description": "English: Command search"
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "English: Search commands…"
+        },
+        "searchCommands": {
+          "type": "string",
+          "description": "English: Search commands"
+        },
+        "commands": {
+          "type": "string",
+          "description": "English: Commands"
+        },
+        "navigate": {
+          "type": "string",
+          "description": "English: Navigate"
+        },
+        "run": {
+          "type": "string",
+          "description": "English: Run"
+        }
+      }
+    },
+    "errorBoundary": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "English: This content could not be displayed"
+        },
+        "description": {
+          "type": "string",
+          "description": "English: Please retry or come back later."
+        }
+      }
+    },
+    "fileList": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "fileType": {
+          "type": "string",
+          "description": "English: FILE"
+        },
+        "uploading": {
+          "type": "string",
+          "description": "English: Uploading"
+        },
+        "uploadFailed": {
+          "type": "string",
+          "description": "English: Upload failed"
+        },
+        "cancelled": {
+          "type": "string",
+          "description": "English: Cancelled"
+        },
+        "uploadComplete": {
+          "type": "string",
+          "description": "English: Upload complete"
+        },
+        "ready": {
+          "type": "string",
+          "description": "English: Ready"
+        },
+        "uploadProgress": {
+          "type": "string",
+          "description": "English: Upload progress {name}"
+        },
+        "noFiles": {
+          "type": "string",
+          "description": "English: No files"
+        },
+        "preview": {
+          "type": "string",
+          "description": "English: Preview {name}"
+        },
+        "download": {
+          "type": "string",
+          "description": "English: Download {name}"
+        },
+        "remove": {
+          "type": "string",
+          "description": "English: Remove {name}"
+        }
+      }
+    },
+    "floatButton": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "quickActions": {
+          "type": "string",
+          "description": "English: Quick actions"
+        }
+      }
+    },
+    "image": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "previewImage": {
+          "type": "string",
+          "description": "English: Preview image{alt}"
+        },
+        "imageUnavailable": {
+          "type": "string",
+          "description": "English: Image unavailable"
+        },
+        "imagePreview": {
+          "type": "string",
+          "description": "English: Image preview"
+        },
+        "downloadImage": {
+          "type": "string",
+          "description": "English: Download image"
+        },
+        "exitFullscreen": {
+          "type": "string",
+          "description": "English: Exit fullscreen"
+        },
+        "enterFullscreen": {
+          "type": "string",
+          "description": "English: Enter fullscreen"
+        },
+        "closePreview": {
+          "type": "string",
+          "description": "English: Close preview"
+        },
+        "previousImage": {
+          "type": "string",
+          "description": "English: Previous image"
+        },
+        "nextImage": {
+          "type": "string",
+          "description": "English: Next image"
+        },
+        "downloadFailedOpenTheOriginalImageToSaveIt": {
+          "type": "string",
+          "description": "English: Download failed. Open the original image to save it."
+        },
+        "openOriginal": {
+          "type": "string",
+          "description": "English: Open original"
+        },
+        "zoomOut": {
+          "type": "string",
+          "description": "English: Zoom out"
+        },
+        "resetZoom": {
+          "type": "string",
+          "description": "English: Reset zoom"
+        },
+        "zoomIn": {
+          "type": "string",
+          "description": "English: Zoom in"
+        },
+        "showThumbnails": {
+          "type": "string",
+          "description": "English: Show thumbnails"
+        },
+        "scrollThumbnailsBackward": {
+          "type": "string",
+          "description": "English: Scroll thumbnails backward"
+        },
+        "imageList": {
+          "type": "string",
+          "description": "English: Image list"
+        },
+        "scrollThumbnailsForward": {
+          "type": "string",
+          "description": "English: Scroll thumbnails forward"
+        },
+        "image": {
+          "type": "string",
+          "description": "English: Image"
+        },
+        "position": {
+          "type": "string",
+          "description": "English: {index} of {total}"
+        },
+        "viewImage": {
+          "type": "string",
+          "description": "English: View image {index}{alt}"
+        }
+      }
+    },
+    "infiniteScroll": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "loadingFailedRetry": {
+          "type": "string",
+          "description": "English: Loading failed. Retry"
+        },
+        "allItemsLoaded": {
+          "type": "string",
+          "description": "English: All items loaded"
+        },
+        "loadMore": {
+          "type": "string",
+          "description": "English: Load more"
+        }
+      }
+    },
+    "inputOTP": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "verificationCode": {
+          "type": "string",
+          "description": "English: Verification code"
+        }
+      }
+    },
+    "layout": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "expandSidebar": {
+          "type": "string",
+          "description": "English: Expand sidebar"
+        },
+        "collapseSidebar": {
+          "type": "string",
+          "description": "English: Collapse sidebar"
+        }
+      }
+    },
+    "loadingBar": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "pageLoadingProgress": {
+          "type": "string",
+          "description": "English: Page loading progress"
+        }
+      }
+    },
+    "menu": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "navigationMenu": {
+          "type": "string",
+          "description": "English: Navigation menu"
+        }
+      }
+    },
+    "popconfirm": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "actionFailedPleaseRetry": {
+          "type": "string",
+          "description": "English: Action failed. Please retry."
+        }
+      }
+    },
+    "qrCode": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "qrCode": {
+          "type": "string",
+          "description": "English: QR code"
+        },
+        "refreshCode": {
+          "type": "string",
+          "description": "English: Refresh code"
+        }
+      }
+    },
+    "scrollbar": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "verticalScrollbar": {
+          "type": "string",
+          "description": "English: Vertical scrollbar"
+        },
+        "horizontalScrollbar": {
+          "type": "string",
+          "description": "English: Horizontal scrollbar"
+        }
+      }
+    },
+    "splitter": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "resizePanel": {
+          "type": "string",
+          "description": "English: Resize panel {index}"
+        },
+        "togglePanel": {
+          "type": "string",
+          "description": "English: Toggle panel"
+        }
+      }
+    },
+    "table": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "table": {
+          "type": "string",
+          "description": "English: Table"
+        },
+        "scrollArea": {
+          "type": "string",
+          "description": "English: Scroll area"
+        },
+        "loadError": {
+          "type": "string",
+          "description": "English: Unable to load data. Please try again."
+        }
+      }
+    },
+    "dataTable": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "searchTable": {
+          "type": "string",
+          "description": "English: Search table"
+        },
+        "columns": {
+          "type": "string",
+          "description": "English: Columns"
+        },
+        "resizeColumn": {
+          "type": "string",
+          "description": "English: Resize column: {label}"
+        },
+        "selectRows": {
+          "type": "string",
+          "description": "English: Select rows"
+        },
+        "selectAllRowsOnThisPage": {
+          "type": "string",
+          "description": "English: Select all rows on this page"
+        },
+        "selectAllRows": {
+          "type": "string",
+          "description": "English: Select all rows"
+        },
+        "reorderRow": {
+          "type": "string",
+          "description": "English: Reorder row: {label}"
+        },
+        "selectRow": {
+          "type": "string",
+          "description": "English: Select row: {label}"
+        },
+        "collapseRow": {
+          "type": "string",
+          "description": "English: Collapse row: {label}"
+        },
+        "expandRow": {
+          "type": "string",
+          "description": "English: Expand row: {label}"
+        },
+        "reorderRows": {
+          "type": "string",
+          "description": "English: Reorder rows"
+        },
+        "expandRows": {
+          "type": "string",
+          "description": "English: Expand rows"
+        },
+        "sortAscending": {
+          "type": "string",
+          "description": "English: Sort ascending"
+        },
+        "sortDescending": {
+          "type": "string",
+          "description": "English: Sort descending"
+        },
+        "clearSorting": {
+          "type": "string",
+          "description": "English: Clear sorting"
+        },
+        "reorderColumn": {
+          "type": "string",
+          "description": "English: Reorder column: {label}"
+        }
+      }
+    },
+    "timeRangePicker": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "placeholder": {
+          "type": "string",
+          "description": "English: Start time ~ End time"
+        },
+        "label": {
+          "type": "string",
+          "description": "English: Choose time range"
+        },
+        "clear": {
+          "type": "string",
+          "description": "English: Clear time range"
+        }
+      }
+    },
+    "tour": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "previous": {
+          "type": "string",
+          "description": "English: Previous"
+        },
+        "finish": {
+          "type": "string",
+          "description": "English: Finish"
+        },
+        "next": {
+          "type": "string",
+          "description": "English: Next"
+        }
+      }
+    },
+    "transfer": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "selectAllVisibleItems": {
+          "type": "string",
+          "description": "English: Select all visible items"
+        },
+        "available": {
+          "type": "string",
+          "description": "English: Available"
+        },
+        "selected": {
+          "type": "string",
+          "description": "English: Selected"
+        },
+        "searchAvailableItems": {
+          "type": "string",
+          "description": "English: Search available items"
+        },
+        "searchSelectedItems": {
+          "type": "string",
+          "description": "English: Search selected items"
+        },
+        "noItems": {
+          "type": "string",
+          "description": "English: No items"
+        },
+        "moveToSelected": {
+          "type": "string",
+          "description": "English: Move to selected"
+        },
+        "moveToAvailable": {
+          "type": "string",
+          "description": "English: Move to available"
+        }
+      }
+    },
+    "typography": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "editText": {
+          "type": "string",
+          "description": "English: Edit text"
+        },
+        "collapse": {
+          "type": "string",
+          "description": "English: Collapse"
+        },
+        "expand": {
+          "type": "string",
+          "description": "English: Expand"
+        },
+        "copyText": {
+          "type": "string",
+          "description": "English: Copy text"
+        }
+      }
+    },
+    "upload": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "uploadUrlCannotBeEmpty": {
+          "type": "string",
+          "description": "English: Upload URL cannot be empty"
+        },
+        "uploadFailed": {
+          "type": "string",
+          "description": "English: Upload failed"
+        },
+        "chooseOneFileAtATime": {
+          "type": "string",
+          "description": "English: Choose one file at a time"
+        },
+        "fileTypeIsNotAccepted": {
+          "type": "string",
+          "description": "English: File type is not accepted"
+        },
+        "fileExceedsTheSizeLimit": {
+          "type": "string",
+          "description": "English: File exceeds the size limit"
+        },
+        "fileCountLimitReached": {
+          "type": "string",
+          "description": "English: File count limit reached"
+        },
+        "fileValidationFailed": {
+          "type": "string",
+          "description": "English: File validation failed"
+        },
+        "chooseFiles": {
+          "type": "string",
+          "description": "English: Choose files"
+        },
+        "dropHint": {
+          "type": "string",
+          "description": "English: Click or drop files here"
+        },
+        "dropDescription": {
+          "type": "string",
+          "description": "English: Choose files or drag them into this area"
+        },
+        "cancelUpload": {
+          "type": "string",
+          "description": "English: Cancel upload {name}"
+        },
+        "retryUpload": {
+          "type": "string",
+          "description": "English: Retry upload {name}"
+        }
+      }
+    },
+    "treeSelect": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "placeholder": {
+          "type": "string",
+          "description": "English: Please select"
+        },
+        "clear": {
+          "type": "string",
+          "description": "English: Clear selection"
+        },
+        "empty": {
+          "type": "string",
+          "description": "English: No options"
+        }
+      }
+    },
+    "drag": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "instructions": {
+          "type": "string",
+          "description": "English: Press Space to start, arrow keys to move, Space to drop, and Escape to cancel."
+        },
+        "pickedUp": {
+          "type": "string",
+          "description": "English: Picked up {label}"
+        },
+        "moved": {
+          "type": "string",
+          "description": "English: Move to {label}"
+        },
+        "dropped": {
+          "type": "string",
+          "description": "English: Dropped {label}"
+        },
+        "cancelled": {
+          "type": "string",
+          "description": "English: Reordering cancelled"
+        },
+        "outside": {
+          "type": "string",
+          "description": "English: No drop target"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/react/src/locales/types.ts b/packages/react/src/locales/types.ts
new file mode 100644
index 0000000..c9185e6
--- /dev/null
+++ b/packages/react/src/locales/types.ts
@@ -0,0 +1,23 @@
+import type { LocaleMessages } from './messages';
+
+export type { LocaleMessages } from './messages';
+
+type PartialMessages<T> = {
+  readonly [K in keyof T]?: T[K] extends string | readonly unknown[] ? T[K] : PartialMessages<T[K]>;
+};
+
+/** Partial, JSON-compatible translation content. Missing entries use the locale chain. */
+export type LeafTranslation = PartialMessages<LocaleMessages> & {
+  /** Optional editor schema reference; ignored at runtime. */
+  readonly $schema?: string;
+};
+/** Resources indexed by BCP 47 language tag. Nested providers merge individual entries. */
+export type LeafTranslations = Readonly<Record<string, LeafTranslation>>;
+
+export type TranslationKey = {
+  [Group in keyof LocaleMessages]: {
+    [Key in keyof LocaleMessages[Group]]: LocaleMessages[Group][Key] extends string
+      ? `${Group}.${Key & string}`
+      : never;
+  }[keyof LocaleMessages[Group]];
+}[keyof LocaleMessages];
diff --git a/packages/react/src/locales/zh-CN.json b/packages/react/src/locales/zh-CN.json
new file mode 100644
index 0000000..7732b1e
--- /dev/null
+++ b/packages/react/src/locales/zh-CN.json
@@ -0,0 +1,335 @@
+{
+  "select": {
+    "placeholder": "请选择",
+    "empty": "暂无选项",
+    "clear": "清除选择",
+    "create": "创建 “{label}”"
+  },
+  "autoComplete": {
+    "empty": "没有匹配建议，可继续输入",
+    "suggestions": "{label} 建议"
+  },
+  "datePicker": {
+    "placeholder": "请选择日期",
+    "clear": "清除日期",
+    "label": "选择日期",
+    "selectDate": "选择日期"
+  },
+  "timePicker": {
+    "placeholder": "请选择时间",
+    "clear": "清除时间",
+    "label": "选择时间",
+    "hours": "小时",
+    "minutes": "分钟",
+    "seconds": "秒",
+    "period": "时段",
+    "am": "上午",
+    "pm": "下午",
+    "now": "当前时间",
+    "selectTime": "选择时间"
+  },
+  "dateTimePicker": {
+    "placeholder": "请选择日期和时间"
+  },
+  "dateRangePicker": {
+    "placeholder": "请选择日期区间",
+    "clear": "清除区间"
+  },
+  "cascader": {
+    "clear": "清除级联选择",
+    "level": "第 {level} 级",
+    "placeholder": "请选择",
+    "empty": "暂无选项"
+  },
+  "calendar": {
+    "previousMonth": "上个月",
+    "nextMonth": "下个月",
+    "previousYear": "上一年",
+    "nextYear": "下一年",
+    "previousYears": "上一组年份",
+    "nextYears": "下一组年份",
+    "weekdays": ["一", "二", "三", "四", "五", "六", "日"],
+    "year": "年",
+    "month": "月",
+    "week": "周",
+    "today": "今天",
+    "label": "日历"
+  },
+  "common": {
+    "confirm": "确定",
+    "cancel": "取消",
+    "close": "关闭",
+    "start": "开始",
+    "end": "结束",
+    "remove": "移除",
+    "search": "搜索选项",
+    "noData": "暂无数据",
+    "retry": "重试",
+    "preview": "预览",
+    "download": "下载",
+    "loading": "处理中",
+    "searchAction": "搜索"
+  },
+  "form": {
+    "required": "请填写此项",
+    "invalid": "请检查此项内容",
+    "errorSummary": "请检查以下字段"
+  },
+  "breadcrumb": {
+    "label": "面包屑"
+  },
+  "pagination": {
+    "label": "分页",
+    "previousPage": "上一页",
+    "nextPage": "下一页",
+    "page": "页",
+    "pageSize": "每页条数",
+    "jumpTo": "跳至",
+    "pageBack": "向前跳 5 页",
+    "pageForward": "向后跳 5 页",
+    "pageLabel": "页 {page}",
+    "pageSizeOption": "{count} 条/页",
+    "total": "共 {total} 条"
+  },
+  "input": {
+    "showPassword": "显示密码",
+    "hidePassword": "隐藏密码",
+    "clear": "清除输入"
+  },
+  "inputNumber": {
+    "increase": "增加数值",
+    "decrease": "减少数值",
+    "invalid": "请输入范围内的有效数字"
+  },
+  "progress": {
+    "label": "进度"
+  },
+  "avatar": {
+    "label": "头像",
+    "moreMembers": "更多成员",
+    "showMore": "查看其余 {count} 位成员"
+  },
+  "rate": {
+    "label": "评分"
+  },
+  "result": {
+    "success": "操作成功",
+    "warning": "请留意",
+    "error": "操作失败",
+    "info": "提示信息"
+  },
+  "colorPicker": {
+    "label": "选择颜色",
+    "clear": "清除颜色",
+    "saturation": "饱和度",
+    "brightness": "亮度",
+    "hue": "色相",
+    "alpha": "透明度",
+    "value": "颜色值",
+    "invalid": "请输入有效的颜色",
+    "presets": "预设颜色",
+    "gradient": "渐变",
+    "colorStop": "色标 {index}",
+    "addColorStop": "增加色标",
+    "removeColorStop": "删除色标",
+    "color": "颜色",
+    "position": "位置",
+    "colorStopPosition": "色标位置",
+    "angle": "角度",
+    "gradientAngle": "渐变角度"
+  },
+  "tree": {
+    "label": "树",
+    "expand": "展开",
+    "reorderInstructions": "按空格开始拖动，上下选择目标，左放在目标前方，右放在目标后方，空格放置，Escape 取消。",
+    "moveNode": "移动节点 {label}",
+    "expandNode": "展开 {label}",
+    "collapseNode": "收起 {label}"
+  },
+  "collapse": {
+    "label": "折叠面板"
+  },
+  "slider": {
+    "label": "滑动输入"
+  },
+  "tabs": {
+    "moreTabs": "更多标签页",
+    "addTab": "添加标签页",
+    "reorder": "移动标签页 {label}",
+    "closeLabel": "关闭标签页 {label}"
+  },
+  "backTop": {
+    "backToTop": "回到顶部"
+  },
+  "button": {
+    "moreActions": "更多操作"
+  },
+  "carousel": {
+    "carousel": "轮播",
+    "previousSlide": "上一张",
+    "nextSlide": "下一张",
+    "goTo": "转到 {index}",
+    "slide": "幻灯片",
+    "role": "轮播"
+  },
+  "commandPalette": {
+    "commandSearch": "命令搜索",
+    "placeholder": "搜索命令…",
+    "searchCommands": "搜索命令",
+    "commands": "命令",
+    "navigate": "选择",
+    "run": "执行"
+  },
+  "errorBoundary": {
+    "title": "内容暂时无法显示",
+    "description": "请重试，或稍后返回。"
+  },
+  "fileList": {
+    "fileType": "文件",
+    "uploading": "上传中",
+    "uploadFailed": "上传失败",
+    "cancelled": "已取消",
+    "uploadComplete": "上传完成",
+    "ready": "待上传",
+    "uploadProgress": "上传进度 {name}",
+    "noFiles": "暂无文件",
+    "preview": "预览 {name}",
+    "download": "下载 {name}",
+    "remove": "移除 {name}"
+  },
+  "floatButton": {
+    "quickActions": "快捷操作"
+  },
+  "image": {
+    "previewImage": "预览图片{alt}",
+    "imageUnavailable": "图片加载失败",
+    "imagePreview": "图片预览",
+    "downloadImage": "下载图片",
+    "exitFullscreen": "退出全屏",
+    "enterFullscreen": "进入全屏",
+    "closePreview": "关闭预览",
+    "previousImage": "上一张",
+    "nextImage": "下一张",
+    "downloadFailedOpenTheOriginalImageToSaveIt": "下载失败，可在新窗口打开原图保存",
+    "openOriginal": "打开原图",
+    "zoomOut": "缩小",
+    "resetZoom": "重置缩放",
+    "zoomIn": "放大",
+    "showThumbnails": "显示缩略图",
+    "scrollThumbnailsBackward": "向前滚动缩略图",
+    "imageList": "图片列表",
+    "scrollThumbnailsForward": "向后滚动缩略图",
+    "image": "图片",
+    "position": "第 {index} 张，共 {total} 张",
+    "viewImage": "查看第 {index} 张图片{alt}"
+  },
+  "infiniteScroll": {
+    "loadingFailedRetry": "加载失败，重试",
+    "allItemsLoaded": "已加载全部内容",
+    "loadMore": "加载更多"
+  },
+  "inputOTP": {
+    "verificationCode": "验证码"
+  },
+  "layout": {
+    "expandSidebar": "展开侧栏",
+    "collapseSidebar": "收起侧栏"
+  },
+  "loadingBar": {
+    "pageLoadingProgress": "页面加载进度"
+  },
+  "menu": {
+    "navigationMenu": "导航菜单"
+  },
+  "popconfirm": {
+    "actionFailedPleaseRetry": "操作失败，请重试"
+  },
+  "qrCode": {
+    "qrCode": "二维码",
+    "refreshCode": "刷新二维码"
+  },
+  "scrollbar": {
+    "verticalScrollbar": "纵向滚动条",
+    "horizontalScrollbar": "横向滚动条"
+  },
+  "splitter": {
+    "resizePanel": "调整面板 {index}",
+    "togglePanel": "折叠或展开面板"
+  },
+  "table": {
+    "table": "表格",
+    "scrollArea": "滚动区域",
+    "loadError": "加载失败，请重试"
+  },
+  "dataTable": {
+    "searchTable": "搜索表格",
+    "columns": "显示列",
+    "resizeColumn": "调整列宽: {label}",
+    "selectRows": "选择行",
+    "selectAllRowsOnThisPage": "选择本页所有行",
+    "selectAllRows": "选择所有行",
+    "reorderRow": "移动行: {label}",
+    "selectRow": "选择行: {label}",
+    "collapseRow": "收起行: {label}",
+    "expandRow": "展开行: {label}",
+    "reorderRows": "移动行",
+    "expandRows": "展开行",
+    "sortAscending": "升序排序",
+    "sortDescending": "降序排序",
+    "clearSorting": "取消排序",
+    "reorderColumn": "移动列: {label}"
+  },
+  "timeRangePicker": {
+    "placeholder": "开始时间 ～ 结束时间",
+    "label": "选择时间范围",
+    "clear": "清除时间范围"
+  },
+  "tour": {
+    "previous": "上一步",
+    "finish": "完成",
+    "next": "下一步"
+  },
+  "transfer": {
+    "selectAllVisibleItems": "选择本页全部",
+    "available": "可选项目",
+    "selected": "已选项目",
+    "searchAvailableItems": "搜索可选项目",
+    "searchSelectedItems": "搜索已选项目",
+    "noItems": "暂无项目",
+    "moveToSelected": "移至已选",
+    "moveToAvailable": "移回可选"
+  },
+  "typography": {
+    "editText": "编辑文本",
+    "collapse": "收起",
+    "expand": "展开",
+    "copyText": "复制文本"
+  },
+  "upload": {
+    "uploadUrlCannotBeEmpty": "上传地址不能为空",
+    "uploadFailed": "上传失败",
+    "chooseOneFileAtATime": "每次只能选择一个文件",
+    "fileTypeIsNotAccepted": "文件格式不支持",
+    "fileExceedsTheSizeLimit": "文件超过大小限制",
+    "fileCountLimitReached": "文件数量达到上限",
+    "fileValidationFailed": "文件未通过校验",
+    "chooseFiles": "选择文件",
+    "dropHint": "点击或拖拽文件到这里",
+    "dropDescription": "支持选择和拖拽上传",
+    "cancelUpload": "取消上传 {name}",
+    "retryUpload": "重新上传 {name}"
+  },
+  "treeSelect": {
+    "placeholder": "请选择",
+    "clear": "清除选择",
+    "empty": "暂无选项"
+  },
+  "drag": {
+    "instructions": "按空格开始排序，方向键移动，再按空格确认，Escape 取消。",
+    "pickedUp": "开始移动 {label}",
+    "moved": "移至 {label}",
+    "dropped": "已放置 {label}",
+    "cancelled": "已取消排序",
+    "outside": "没有可放置的目标"
+  }
+}
diff --git a/packages/react/src/locales/zh-TW.json b/packages/react/src/locales/zh-TW.json
new file mode 100644
index 0000000..54639b6
--- /dev/null
+++ b/packages/react/src/locales/zh-TW.json
@@ -0,0 +1,335 @@
+{
+  "select": {
+    "placeholder": "請選擇",
+    "empty": "暫無選項",
+    "clear": "清除選擇",
+    "create": "建立 “{label}”"
+  },
+  "autoComplete": {
+    "empty": "沒有匹配建議，可繼續輸入",
+    "suggestions": "{label} 建議"
+  },
+  "datePicker": {
+    "placeholder": "請選擇日期",
+    "clear": "清除日期",
+    "label": "選擇日期",
+    "selectDate": "選擇日期"
+  },
+  "timePicker": {
+    "placeholder": "請選擇時間",
+    "clear": "清除時間",
+    "label": "選擇時間",
+    "hours": "小時",
+    "minutes": "分鐘",
+    "seconds": "秒",
+    "period": "時段",
+    "am": "上午",
+    "pm": "下午",
+    "now": "當前時間",
+    "selectTime": "選擇時間"
+  },
+  "dateTimePicker": {
+    "placeholder": "請選擇日期和時間"
+  },
+  "dateRangePicker": {
+    "placeholder": "請選擇日期區間",
+    "clear": "清除區間"
+  },
+  "cascader": {
+    "clear": "清除級聯選擇",
+    "level": "第 {level} 級",
+    "placeholder": "請選擇",
+    "empty": "暫無選項"
+  },
+  "calendar": {
+    "previousMonth": "上個月",
+    "nextMonth": "下個月",
+    "previousYear": "上一年",
+    "nextYear": "下一年",
+    "previousYears": "上一組年份",
+    "nextYears": "下一組年份",
+    "weekdays": ["一", "二", "三", "四", "五", "六", "日"],
+    "year": "年",
+    "month": "月",
+    "week": "周",
+    "today": "今天",
+    "label": "日曆"
+  },
+  "common": {
+    "confirm": "確定",
+    "cancel": "取消",
+    "close": "關閉",
+    "start": "開始",
+    "end": "結束",
+    "remove": "移除",
+    "search": "搜尋選項",
+    "noData": "暫無資料",
+    "retry": "重試",
+    "preview": "預覽",
+    "download": "下載",
+    "loading": "處理中",
+    "searchAction": "搜尋"
+  },
+  "form": {
+    "required": "請填寫此項",
+    "invalid": "請檢查此項內容",
+    "errorSummary": "請檢查以下欄位"
+  },
+  "breadcrumb": {
+    "label": "麵包屑"
+  },
+  "pagination": {
+    "label": "分頁",
+    "previousPage": "上一頁",
+    "nextPage": "下一頁",
+    "page": "頁",
+    "pageSize": "每頁條數",
+    "jumpTo": "跳至",
+    "pageBack": "向前跳 5 頁",
+    "pageForward": "向後跳 5 頁",
+    "pageLabel": "頁 {page}",
+    "pageSizeOption": "{count} 條/頁",
+    "total": "共 {total} 條"
+  },
+  "input": {
+    "showPassword": "顯示密碼",
+    "hidePassword": "隱藏密碼",
+    "clear": "清除輸入"
+  },
+  "inputNumber": {
+    "increase": "增加數值",
+    "decrease": "減少數值",
+    "invalid": "請輸入範圍內的有效數字"
+  },
+  "progress": {
+    "label": "進度"
+  },
+  "avatar": {
+    "label": "頭像",
+    "moreMembers": "更多成員",
+    "showMore": "檢視其餘 {count} 位成員"
+  },
+  "rate": {
+    "label": "評分"
+  },
+  "result": {
+    "success": "操作成功",
+    "warning": "請留意",
+    "error": "操作失敗",
+    "info": "提示資訊"
+  },
+  "colorPicker": {
+    "label": "選擇顏色",
+    "clear": "清除顏色",
+    "saturation": "飽和度",
+    "brightness": "亮度",
+    "hue": "色相",
+    "alpha": "透明度",
+    "value": "顏色值",
+    "invalid": "請輸入有效的顏色",
+    "presets": "預設顏色",
+    "gradient": "漸變",
+    "colorStop": "色標 {index}",
+    "addColorStop": "增加色標",
+    "removeColorStop": "刪除色標",
+    "color": "顏色",
+    "position": "位置",
+    "colorStopPosition": "色標位置",
+    "angle": "角度",
+    "gradientAngle": "漸變角度"
+  },
+  "tree": {
+    "label": "樹",
+    "expand": "展開",
+    "reorderInstructions": "按空格開始拖動，上下選擇目標，左放在目標前方，右放在目標後方，空格放置，Escape 取消。",
+    "moveNode": "移動節點 {label}",
+    "expandNode": "展開 {label}",
+    "collapseNode": "收起 {label}"
+  },
+  "collapse": {
+    "label": "摺疊面板"
+  },
+  "slider": {
+    "label": "滑動輸入"
+  },
+  "tabs": {
+    "moreTabs": "更多標籤頁",
+    "addTab": "新增標籤頁",
+    "reorder": "移動標籤頁 {label}",
+    "closeLabel": "關閉標籤頁 {label}"
+  },
+  "backTop": {
+    "backToTop": "回到頂部"
+  },
+  "button": {
+    "moreActions": "更多操作"
+  },
+  "carousel": {
+    "carousel": "輪播",
+    "previousSlide": "上一張",
+    "nextSlide": "下一張",
+    "goTo": "轉到 {index}",
+    "slide": "幻燈片",
+    "role": "輪播"
+  },
+  "commandPalette": {
+    "commandSearch": "命令搜尋",
+    "placeholder": "搜尋命令…",
+    "searchCommands": "搜尋命令",
+    "commands": "命令",
+    "navigate": "選擇",
+    "run": "執行"
+  },
+  "errorBoundary": {
+    "title": "內容暫時無法顯示",
+    "description": "請重試，或稍後返回。"
+  },
+  "fileList": {
+    "fileType": "檔案",
+    "uploading": "上傳中",
+    "uploadFailed": "上傳失敗",
+    "cancelled": "已取消",
+    "uploadComplete": "上傳完成",
+    "ready": "待上傳",
+    "uploadProgress": "上傳進度 {name}",
+    "noFiles": "暫無檔案",
+    "preview": "預覽 {name}",
+    "download": "下載 {name}",
+    "remove": "移除 {name}"
+  },
+  "floatButton": {
+    "quickActions": "快捷操作"
+  },
+  "image": {
+    "previewImage": "預覽圖片{alt}",
+    "imageUnavailable": "圖片載入失敗",
+    "imagePreview": "圖片預覽",
+    "downloadImage": "下載圖片",
+    "exitFullscreen": "退出全屏",
+    "enterFullscreen": "進入全屏",
+    "closePreview": "關閉預覽",
+    "previousImage": "上一張",
+    "nextImage": "下一張",
+    "downloadFailedOpenTheOriginalImageToSaveIt": "下載失敗，可在新視窗開啟原圖儲存",
+    "openOriginal": "開啟原圖",
+    "zoomOut": "縮小",
+    "resetZoom": "重置縮放",
+    "zoomIn": "放大",
+    "showThumbnails": "顯示縮圖",
+    "scrollThumbnailsBackward": "向前滾動縮圖",
+    "imageList": "圖片列表",
+    "scrollThumbnailsForward": "向後滾動縮圖",
+    "image": "圖片",
+    "position": "第 {index} 張，共 {total} 張",
+    "viewImage": "檢視第 {index} 張圖片{alt}"
+  },
+  "infiniteScroll": {
+    "loadingFailedRetry": "載入失敗，重試",
+    "allItemsLoaded": "已載入全部內容",
+    "loadMore": "載入更多"
+  },
+  "inputOTP": {
+    "verificationCode": "驗證碼"
+  },
+  "layout": {
+    "expandSidebar": "展開側欄",
+    "collapseSidebar": "收起側欄"
+  },
+  "loadingBar": {
+    "pageLoadingProgress": "頁面載入進度"
+  },
+  "menu": {
+    "navigationMenu": "導航選單"
+  },
+  "popconfirm": {
+    "actionFailedPleaseRetry": "操作失敗，請重試"
+  },
+  "qrCode": {
+    "qrCode": "二維碼",
+    "refreshCode": "重新整理二維碼"
+  },
+  "scrollbar": {
+    "verticalScrollbar": "縱向捲軸",
+    "horizontalScrollbar": "橫向捲軸"
+  },
+  "splitter": {
+    "resizePanel": "調整面板 {index}",
+    "togglePanel": "摺疊或展開面板"
+  },
+  "table": {
+    "table": "表格",
+    "scrollArea": "滾動區域",
+    "loadError": "載入失敗，請重試"
+  },
+  "dataTable": {
+    "searchTable": "搜尋表格",
+    "columns": "顯示列",
+    "resizeColumn": "調整列寬: {label}",
+    "selectRows": "選擇行",
+    "selectAllRowsOnThisPage": "選擇本頁所有行",
+    "selectAllRows": "選擇所有行",
+    "reorderRow": "移動行: {label}",
+    "selectRow": "選擇行: {label}",
+    "collapseRow": "收起行: {label}",
+    "expandRow": "展開行: {label}",
+    "reorderRows": "移動行",
+    "expandRows": "展開行",
+    "sortAscending": "升序排序",
+    "sortDescending": "降序排序",
+    "clearSorting": "取消排序",
+    "reorderColumn": "移動列: {label}"
+  },
+  "timeRangePicker": {
+    "placeholder": "開始時間 ～ 結束時間",
+    "label": "選擇時間範圍",
+    "clear": "清除時間範圍"
+  },
+  "tour": {
+    "previous": "上一步",
+    "finish": "完成",
+    "next": "下一步"
+  },
+  "transfer": {
+    "selectAllVisibleItems": "選擇本頁全部",
+    "available": "可選專案",
+    "selected": "已選專案",
+    "searchAvailableItems": "搜尋可選專案",
+    "searchSelectedItems": "搜尋已選專案",
+    "noItems": "暫無專案",
+    "moveToSelected": "移至已選",
+    "moveToAvailable": "移回可選"
+  },
+  "typography": {
+    "editText": "編輯文本",
+    "collapse": "收起",
+    "expand": "展開",
+    "copyText": "複製文本"
+  },
+  "upload": {
+    "uploadUrlCannotBeEmpty": "上傳地址不能為空",
+    "uploadFailed": "上傳失敗",
+    "chooseOneFileAtATime": "每次只能選擇一個檔案",
+    "fileTypeIsNotAccepted": "檔案格式不支援",
+    "fileExceedsTheSizeLimit": "檔案超過大小限制",
+    "fileCountLimitReached": "檔案數量達到上限",
+    "fileValidationFailed": "檔案未通過校驗",
+    "chooseFiles": "選擇檔案",
+    "dropHint": "點選或拖拽檔案到這裡",
+    "dropDescription": "支援選擇和拖拽上傳",
+    "cancelUpload": "取消上傳 {name}",
+    "retryUpload": "重新上傳 {name}"
+  },
+  "treeSelect": {
+    "placeholder": "請選擇",
+    "clear": "清除選擇",
+    "empty": "暫無選項"
+  },
+  "drag": {
+    "instructions": "按空格開始排序，方向鍵移動，再按空格確認，Escape 取消。",
+    "pickedUp": "開始移動 {label}",
+    "moved": "移至 {label}",
+    "dropped": "已放置 {label}",
+    "cancelled": "已取消排序",
+    "outside": "沒有可放置的目標"
+  }
+}
diff --git a/packages/react/src/locales/zh-tw.ts b/packages/react/src/locales/zh-tw.ts
deleted file mode 100644
index c9d9a55..0000000
--- a/packages/react/src/locales/zh-tw.ts
+++ /dev/null
@@ -1,254 +0,0 @@
-// Generated by scripts/generate-locale.mjs using OpenCC (MIT).
-export const traditionalMessages = {
-  select: '請選擇',
-  empty: '暫無選項',
-  noMatches: '沒有匹配建議，可繼續輸入',
-  clearSelection: '清除選擇',
-  date: '請選擇日期',
-  time: '請選擇時間',
-  dateTime: '請選擇日期和時間',
-  range: '請選擇日期區間',
-  clearDate: '清除日期',
-  clearTime: '清除時間',
-  clearRange: '清除區間',
-  clearCascader: '清除級聯選擇',
-  chooseDate: '選擇日期',
-  chooseTime: '選擇時間',
-  previousMonth: '上個月',
-  nextMonth: '下個月',
-  previousYear: '上一年',
-  nextYear: '下一年',
-  previousYears: '上一組年份',
-  nextYears: '下一組年份',
-  hours: '小時',
-  minutes: '分鐘',
-  seconds: '秒',
-  period: '時段',
-  am: '上午',
-  pm: '下午',
-  weekdays: ['一', '二', '三', '四', '五', '六', '日'],
-  confirm: '確定',
-  cancel: '取消',
-  close: '關閉',
-  start: '開始',
-  end: '結束',
-  required: '請填寫此項',
-  invalid: '請檢查此項內容',
-  useTime: '使用',
-  year: '年',
-  month: '月',
-  week: '周',
-  dateMode: '日期',
-  loading: '處理中',
-  today: '今天',
-  now: '當前時間',
-  selectTime: '選擇時間',
-  selectDate: '選擇日期',
-  remove: '移除',
-  search: '搜尋選項',
-  breadcrumb: '麵包屑',
-  pagination: '分頁',
-  previousPage: '上一頁',
-  nextPage: '下一頁',
-  page: '頁',
-  pageSize: '每頁條數',
-  itemsPerPage: '條/頁',
-  jumpTo: '跳至',
-  showPassword: '顯示密碼',
-  hidePassword: '隱藏密碼',
-  increase: '增加數值',
-  decrease: '減少數值',
-  invalidNumber: '請輸入範圍內的有效數字',
-  progress: '進度',
-  calendar: '日曆',
-  clearInput: '清除輸入',
-  noData: '暫無資料',
-  avatar: '頭像',
-  rating: '評分',
-  resultSuccess: '操作成功',
-  resultWarning: '請留意',
-  resultError: '操作失敗',
-  resultInfo: '提示資訊',
-  color: '選擇顏色',
-  clearColor: '清除顏色',
-  saturation: '飽和度',
-  brightness: '亮度',
-  hue: '色相',
-  alpha: '透明度',
-  colorValue: '顏色值',
-  invalidColor: '請輸入有效的顏色',
-  presets: '預設顏色',
-  tree: '樹',
-  expand: '展開',
-  collapseNode: '收起',
-  collapse: '摺疊面板',
-  slider: '滑動輸入',
-  pageBack: '向前跳 5 頁',
-  pageForward: '向後跳 5 頁',
-  closeTab: '關閉標籤頁',
-};
-export const traditionalTextMessages: Record<string, string> = {
-  '': '張圖片',
-  '{index} of {total}': '第 {index} 張，共 {total} 張',
-  'Action failed. Please retry.': '操作失敗，請重試',
-  'Add color stop': '增加色標',
-  'Add tab': '新增標籤頁',
-  'All items loaded': '已載入全部內容',
-  Angle: '角度',
-  Available: '可選專案',
-  'Back to top': '回到頂部',
-  'Bottom edge': '下邊緣',
-  'Bottom left': '左下角',
-  'Bottom right': '右下角',
-  'Cancel upload': '取消上傳',
-  Cancelled: '已取消',
-  Carousel: '輪播',
-  'Choose files': '選擇檔案',
-  'Choose files or drag them into this area': '支援選擇和拖拽上傳',
-  'Choose one file at a time': '每次只能選擇一個檔案',
-  'Choose time range': '選擇時間範圍',
-  Clear: '清空',
-  'Clear sorting': '取消排序',
-  'Clear time range': '清除時間範圍',
-  'Click or drop files here': '點選或拖拽檔案到這裡',
-  'Close preview': '關閉預覽',
-  Collapse: '收起',
-  'Collapse row': '收起行',
-  'Collapse sidebar': '收起側欄',
-  Color: '顏色',
-  'Color stop': '色標',
-  'Color stop position': '色標位置',
-  Columns: '顯示列',
-  'Command search': '命令搜尋',
-  Commands: '命令',
-  'Copy text': '複製文本',
-  Create: '建立',
-  Crop: '裁剪',
-  'Crop dimensions': '裁剪尺寸',
-  'Crop selection. Arrow keys move; drag edges to resize': '裁剪區域，方向鍵移動，拖動邊緣調整大小',
-  Download: '下載',
-  'Download failed. Open the original image to save it.': '下載失敗，可在新視窗開啟原圖儲存',
-  'Download image': '下載圖片',
-  'Drag to reorder': '拖動排序',
-  Dropped: '已放置',
-  'Edit text': '編輯文本',
-  'Enter fullscreen': '進入全屏',
-  'Exit fullscreen': '退出全屏',
-  Expand: '展開',
-  'Expand or collapse children': '展開或收起子節點',
-  'Expand row': '展開行',
-  'Expand rows': '展開行',
-  'Expand sidebar': '展開側欄',
-  'Export failed. Check image CORS permissions.': '匯出失敗，請檢查圖片跨域許可權',
-  FILE: '檔案',
-  'File count limit reached': '檔案數量達到上限',
-  'File exceeds the size limit': '檔案超過大小限制',
-  'File type is not accepted': '檔案格式不支援',
-  'File validation failed': '檔案未通過校驗',
-  Finish: '完成',
-  'Go to': '轉到',
-  Gradient: '漸變',
-  'Gradient angle': '漸變角度',
-  'Handwritten signature area': '手寫簽名區域',
-  'Horizontal scrollbar': '橫向捲軸',
-  Image: '圖片',
-  'Image could not be loaded': '圖片載入失敗',
-  'Image list': '圖片列表',
-  'Image preview': '圖片預覽',
-  'Image to crop': '待裁剪圖片',
-  'Image unavailable': '圖片載入失敗',
-  'Left edge': '左邊緣',
-  'Load more': '載入更多',
-  Loading: '載入中',
-  'Loading failed. Retry': '載入失敗，重試',
-  'More actions': '更多操作',
-  'More members': '更多成員',
-  'More tabs': '更多標籤頁',
-  'Move node': '移動節點',
-  'Move the selection · Drag its edges to resize': '拖動選框移動 · 拖動邊緣調整',
-  'Move to': '移至',
-  'Move to available': '移回可選',
-  'Move to selected': '移至已選',
-  Navigate: '選擇',
-  'Navigation menu': '導航選單',
-  Next: '下一步',
-  'Next image': '下一張',
-  'Next page': '下一頁',
-  'Next slide': '下一張',
-  'No data': '暫無資料',
-  'No files': '暫無檔案',
-  'No items': '暫無專案',
-  'Open original': '開啟原圖',
-  'Organization chart': '組織結構圖',
-  'Page loading progress': '頁面載入進度',
-  Pagination: '分頁',
-  'Picked up': '開始移動',
-  'Please retry or come back later.': '請重試，或稍後返回。',
-  Position: '位置',
-  'Press Space to pick up, Up/Down to choose a target, Left/Right to place before/after it, Space to drop, and Escape to cancel.':
-    '按空格開始拖動，上下選擇目標，左放在目標前方，右放在目標後方，空格放置，Escape 取消。',
-  'Press Space to start, arrow keys to move, Space to drop, and Escape to cancel.':
-    '按空格開始排序，方向鍵移動，再按空格確認，Escape 取消。',
-  Preview: '預覽',
-  'Preview image': '預覽圖片',
-  Previous: '上一步',
-  'Previous image': '上一張',
-  'Previous page': '上一頁',
-  'Previous slide': '上一張',
-  'QR code': '二維碼',
-  'Quick actions': '快捷操作',
-  Ready: '待上傳',
-  'Refresh code': '重新整理二維碼',
-  Remove: '移除',
-  'Remove color stop': '刪除色標',
-  'Reorder column': '移動列',
-  'Reorder row': '移動行',
-  'Reorder rows': '移動行',
-  'Reordering cancelled': '已取消排序',
-  Reset: '重置',
-  'Reset zoom': '重置縮放',
-  'Resize column': '調整列寬',
-  'Resize panel': '調整面板',
-  Retry: '重試',
-  'Retry upload': '重新上傳',
-  'Right edge': '右邊緣',
-  Run: '執行',
-  'Scroll area': '滾動區域',
-  'Scroll thumbnails backward': '向前滾動縮圖',
-  'Scroll thumbnails forward': '向後滾動縮圖',
-  Search: '搜尋',
-  'Search available items': '搜尋可選專案',
-  'Search commands': '搜尋命令',
-  'Search commands…': '搜尋命令…',
-  'Search selected items': '搜尋已選專案',
-  'Search table': '搜尋表格',
-  'Select all rows': '選擇所有行',
-  'Select all rows on this page': '選擇本頁所有行',
-  'Select all visible items': '選擇本頁全部',
-  'Select row': '選擇行',
-  'Select rows': '選擇行',
-  Selected: '已選專案',
-  'Show thumbnails': '顯示縮圖',
-  'Sign here': '在此簽名',
-  'Sort ascending': '升序排序',
-  'Sort descending': '降序排序',
-  'Start time ~ End time': '開始時間 ～ 結束時間',
-  Table: '表格',
-  'This content could not be displayed': '內容暫時無法顯示',
-  'Toggle panel': '摺疊或展開面板',
-  'Top edge': '上邊緣',
-  'Top left': '左上角',
-  'Top right': '右上角',
-  'Unable to load data. Please try again.': '載入失敗，請重試',
-  Undo: '撤銷',
-  'Upload complete': '上傳完成',
-  'Upload failed': '上傳失敗',
-  'Upload progress': '上傳進度',
-  'Upload URL cannot be empty': '上傳地址不能為空',
-  Uploading: '上傳中',
-  'Verification code': '驗證碼',
-  'Vertical scrollbar': '縱向捲軸',
-  'View image': '檢視第',
-  'Zoom in': '放大',
-  'Zoom out': '縮小',
-};
diff --git a/packages/react/src/masonry/masonry.tsx b/packages/react/src/masonry/masonry.tsx
index 956780c..de267dd 100644
--- a/packages/react/src/masonry/masonry.tsx
+++ b/packages/react/src/masonry/masonry.tsx
@@ -1,4 +1,5 @@
 import { Children, forwardRef, type HTMLAttributes } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import type { GridBreakpoint } from '../grid/grid';
 import { classes } from '../shared/classes';
 import type { LeafThemeStyle } from '../theme';
@@ -7,9 +8,17 @@ export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
   gap?: number | string;
 }
 export const Masonry = forwardRef<HTMLDivElement, MasonryProps>(function Masonry(
-  { columns = { xs: 1, sm: 2, lg: 3 }, gap = 16, className, children, style, ...props },
+  rawProps: MasonryProps,
   ref,
 ) {
+  const {
+    columns = { xs: 1, sm: 2, lg: 3 },
+    gap = 16,
+    className,
+    children,
+    style,
+    ...props
+  } = useComponentProps('Masonry', rawProps);
   const variables: LeafThemeStyle = {
     '--leaf-masonry-gap': typeof gap === 'number' ? `${gap}px` : gap,
     ...style,
diff --git a/packages/react/src/mentions/index.ts b/packages/react/src/mentions/index.ts
index bc77606..0d95159 100644
--- a/packages/react/src/mentions/index.ts
+++ b/packages/react/src/mentions/index.ts
@@ -1 +1,2 @@
-export * from './mentions';
+export type { MentionOption, MentionsProps } from './mentions';
+export { Mentions } from './mentions';
diff --git a/packages/react/src/mentions/mentions.scss b/packages/react/src/mentions/mentions.scss
index 22e5254..84e74f7 100644
--- a/packages/react/src/mentions/mentions.scss
+++ b/packages/react/src/mentions/mentions.scss
@@ -20,9 +20,9 @@
     transform var(--leaf-motion-duration) var(--leaf-motion-spring);
 }
 .leaf-mentions__panel [aria-selected='true'] .leaf-mentions__prefix {
-  background: var(--leaf-color-primary);
-  color: var(--leaf-color-on-primary);
-  border-color: var(--leaf-color-primary);
+  background: var(--leaf-color-surface);
+  color: var(--leaf-color-text);
+  border-color: var(--leaf-color-border-hover);
   transform: scale(1.06);
 }
 @media (prefers-reduced-motion: reduce) {
diff --git a/packages/react/src/mentions/mentions.tsx b/packages/react/src/mentions/mentions.tsx
index f2b79dc..0d27594 100644
--- a/packages/react/src/mentions/mentions.tsx
+++ b/packages/react/src/mentions/mentions.tsx
@@ -1,10 +1,12 @@
 import { forwardRef, type ReactNode, useId, useRef, useState } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { useFieldValue, useMergedRef } from '../shared/field';
 import { FloatingPanel, type PopupOptions, useFloatingDismiss } from '../shared/floating';
-import { Textarea, type TextareaProps } from '../textarea';
+import type { TextareaProps } from '../textarea';
+import { TextareaControl as Textarea } from '../textarea/textarea';
 export interface MentionOption {
   value: string;
   label?: ReactNode;
@@ -27,7 +29,10 @@ export interface MentionsProps
 }
 const defaultPrefixes = ['@'];
 export const Mentions = forwardRef<HTMLTextAreaElement, MentionsProps>(function Mentions(
-  {
+  rawProps: MentionsProps,
+  ref,
+) {
+  const {
     value,
     defaultValue = '',
     onChange,
@@ -44,9 +49,7 @@ export const Mentions = forwardRef<HTMLTextAreaElement, MentionsProps>(function
     popupRender,
     getPopupContainer,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('Mentions', rawProps);
   const input = useRef<HTMLTextAreaElement>(null),
     panel = useRef<HTMLDivElement>(null),
     merged = useMergedRef(input, ref),
@@ -162,9 +165,10 @@ export const Mentions = forwardRef<HTMLTextAreaElement, MentionsProps>(function
         render={popupRender}
         container={getPopupContainer}
         className={classes('leaf-floating', 'leaf-mentions__panel', popupClassName)}
+        data-selection="candidate"
         role="listbox"
         id={id}
-        aria-label={messages.search}
+        aria-label={messages.common.search}
       >
         {list.length ? (
           list.map((option, index) => (
@@ -178,7 +182,7 @@ export const Mentions = forwardRef<HTMLTextAreaElement, MentionsProps>(function
               tabIndex={-1}
               className="leaf-floating__option"
               onMouseDown={(event) => event.preventDefault()}
-              onMouseEnter={() => setActive(index)}
+              onMouseEnter={() => !option.disabled && setActive(index)}
               onClick={() => select(option)}
             >
               <span className="leaf-mentions__prefix" aria-hidden="true">
@@ -189,7 +193,7 @@ export const Mentions = forwardRef<HTMLTextAreaElement, MentionsProps>(function
           ))
         ) : (
           <div className="leaf-floating__empty">
-            {loading ? messages.loading : (notFoundContent ?? messages.empty)}
+            {loading ? messages.common.loading : (notFoundContent ?? messages.select.empty)}
           </div>
         )}
       </FloatingPanel>
diff --git a/packages/react/src/menu/menu.scss b/packages/react/src/menu/menu.scss
index 1f83538..970aa56 100644
--- a/packages/react/src/menu/menu.scss
+++ b/packages/react/src/menu/menu.scss
@@ -25,8 +25,8 @@
     width: var(--leaf-indicator-width, 0px);
     height: var(--leaf-indicator-height, 0px);
     transform: translate(var(--leaf-indicator-x, 0px), var(--leaf-indicator-y, 0px));
-    border-radius: var(--leaf-surface-inner-radius);
-    background: var(--leaf-color-primary-surface-8);
+    border-radius: var(--leaf-component-menu-radius, var(--leaf-radius));
+    background: var(--leaf-color-primary-surface-9);
     opacity: 0;
     &[data-visible='true'] {
       opacity: 1;
@@ -48,7 +48,7 @@
     padding: var(--leaf-density-option-padding) var(--leaf-spacing-sm)
       var(--leaf-density-option-padding) var(--leaf-spacing-md);
     border: 0;
-    border-radius: var(--leaf-surface-inner-radius);
+    border-radius: var(--leaf-component-menu-radius, var(--leaf-radius));
     background: transparent;
     color: inherit;
     text-decoration: none;
@@ -62,8 +62,11 @@
       transform var(--leaf-motion-fast) var(--leaf-motion-easing),
       gap var(--leaf-motion-duration) var(--leaf-motion-easing),
       padding-inline var(--leaf-motion-duration) var(--leaf-motion-easing);
-    &:hover:not(:disabled):not([aria-disabled]) {
-      background: var(--leaf-color-surface-muted);
+    &:is(:hover, :focus-visible):not(:disabled):not([aria-disabled]):not([data-selected]) {
+      background: var(--leaf-color-option-hover);
+      &[data-danger] {
+        background: var(--leaf-color-danger-surface-8);
+      }
     }
     &[data-active-parent] {
       color: var(--leaf-color-primary);
@@ -155,7 +158,7 @@
     min-width: 180px;
     padding: 6px;
     background: var(--leaf-color-surface);
-    border-radius: var(--leaf-radius);
+    border-radius: var(--leaf-component-menu-radius, var(--leaf-radius));
     box-shadow: 0 6px 24px #00000018;
   }
   &--collapsed &__label {
diff --git a/packages/react/src/menu/menu.tsx b/packages/react/src/menu/menu.tsx
index 2cc2972..6dff938 100644
--- a/packages/react/src/menu/menu.tsx
+++ b/packages/react/src/menu/menu.tsx
@@ -1,7 +1,9 @@
 import { ChevronDown } from 'lucide-react';
 import { type HTMLAttributes, type ReactNode, useId, useRef, useState } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
-import { Dropdown, type DropdownItem } from '../dropdown';
+import type { DropdownItem } from '../dropdown';
+import { DropdownControl as Dropdown } from '../dropdown/dropdown';
 import { classes } from '../shared/classes';
 import { inertProps } from '../shared/inert';
 import { useControllable } from '../shared/use-controllable';
@@ -60,22 +62,23 @@ function MenuSubmenu({
     </div>
   );
 }
-export function Menu({
-  items,
-  mode = 'vertical',
-  selectedKey,
-  defaultSelectedKey = '',
-  onSelect,
-  openKeys,
-  defaultOpenKeys = [],
-  onOpenChange,
-  collapsed = false,
-  itemRender,
-  linkRender,
-  itemClassName,
-  className,
-  ...props
-}: MenuProps) {
+export function Menu(rawProps: MenuProps) {
+  const {
+    items,
+    mode = 'vertical',
+    selectedKey,
+    defaultSelectedKey = '',
+    onSelect,
+    openKeys,
+    defaultOpenKeys = [],
+    onOpenChange,
+    collapsed = false,
+    itemRender,
+    linkRender,
+    itemClassName,
+    className,
+    ...props
+  } = useComponentProps('Menu', rawProps);
   const t = useText();
   const { direction } = useLeafConfig();
   const id = useId();
@@ -243,7 +246,7 @@ export function Menu({
         collapsed && 'leaf-menu--collapsed',
         className,
       )}
-      aria-label={props['aria-label'] ?? t('导航菜单', 'Navigation menu')}
+      aria-label={props['aria-label'] ?? t('menu.navigationMenu')}
     >
       <span ref={indicator} className="leaf-menu__indicator" aria-hidden="true" />
       {/* biome-ignore lint/a11y/noStaticElementInteractions: This container delegates arrow navigation for the menu or menubar role. */}
diff --git a/packages/react/src/message/item.tsx b/packages/react/src/message/item.tsx
index f695736..c35c341 100644
--- a/packages/react/src/message/item.tsx
+++ b/packages/react/src/message/item.tsx
@@ -85,7 +85,7 @@ export function MessageItem({
             </span>
             <span>{entry.content}</span>
             {entry.closable && (
-              <button type="button" aria-label={messages.close} onClick={close}>
+              <button type="button" aria-label={messages.common.close} onClick={close}>
                 <X size={15} aria-hidden="true" />
               </button>
             )}
diff --git a/packages/react/src/message/message.tsx b/packages/react/src/message/message.tsx
index f15bfc4..a6fe5d6 100644
--- a/packages/react/src/message/message.tsx
+++ b/packages/react/src/message/message.tsx
@@ -1,5 +1,6 @@
 import { type ReactNode, useContext, useEffect, useId, useMemo, useRef } from 'react';
 import type { FeedbackType } from '../alert/alert';
+import { ComponentDefaultsContext, useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { ScopedPortal } from '../shared/scoped-portal';
 import { MessageItem } from './item';
@@ -26,7 +27,8 @@ export interface MessageProps extends Omit<MessageOptions, 'key'> {
   open: boolean;
   afterClose?: () => void;
 }
-export function Message({ open, afterClose, onClose, ...options }: MessageProps) {
+export function Message(rawProps: MessageProps) {
+  const { open, afterClose, onClose, ...options } = useComponentProps('Message', rawProps);
   return (
     <ScopedPortal>
       <div className="leaf-message-region">
@@ -43,13 +45,24 @@ export function Message({ open, afterClose, onClose, ...options }: MessageProps)
 export function useMessage(): { message: MessageApi } {
   const store = useContext(MessageContext);
   const config = useLeafConfig();
+  const components = useContext(ComponentDefaultsContext);
+  const currentComponents = useRef(components);
+  currentComponents.current = components;
   const currentConfig = useRef(config);
   currentConfig.current = config;
   const scope = useId();
-  const message = useMemo(() => store?.api(scope, () => currentConfig.current), [store, scope]);
+  const message = useMemo(
+    () =>
+      store?.api(
+        scope,
+        () => currentConfig.current,
+        () => currentComponents.current,
+      ),
+    [store, scope],
+  );
   useEffect(() => {
-    store?.updateScope(scope, config);
-  }, [store, scope, config]);
+    store?.updateScope(scope, config, components);
+  }, [store, scope, config, components]);
   const result = useMemo(() => (message ? { message } : undefined), [message]);
   if (!result) throw new Error('useMessage requires ConfigProvider or MessageProvider.');
   return result;
diff --git a/packages/react/src/message/provider.tsx b/packages/react/src/message/provider.tsx
index 06709d5..76fd77d 100644
--- a/packages/react/src/message/provider.tsx
+++ b/packages/react/src/message/provider.tsx
@@ -1,4 +1,5 @@
 import { type ReactNode, useContext, useState, useSyncExternalStore } from 'react';
+import { ComponentDefaultsContext } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { ScopedPortal } from '../shared/scoped-portal';
 import { MessageItem } from './item';
@@ -39,12 +40,13 @@ export function MessageHost({ store }: { store: MessageStore }) {
     <ScopedPortal>
       <div className="leaf-message-region" style={{ zIndex }}>
         {entries.map((entry) => (
-          <MessageItem
-            key={entry.key}
-            entry={entry}
-            close={() => store.close(entry.key)}
-            remove={() => store.remove(entry.key)}
-          />
+          <ComponentDefaultsContext.Provider key={entry.key} value={entry.components ?? {}}>
+            <MessageItem
+              entry={entry}
+              close={() => store.close(entry.key)}
+              remove={() => store.remove(entry.key)}
+            />
+          </ComponentDefaultsContext.Provider>
         ))}
       </div>
     </ScopedPortal>
diff --git a/packages/react/src/message/store.ts b/packages/react/src/message/store.ts
index cd948fd..1984eaf 100644
--- a/packages/react/src/message/store.ts
+++ b/packages/react/src/message/store.ts
@@ -1,4 +1,8 @@
 import { createContext } from 'react';
+import {
+  type LeafComponentDefaults,
+  mergeComponentProps,
+} from '../config-provider/component-defaults';
 import type { LeafConfig } from '../config-provider/context';
 import type { MessageApi, MessageOptions } from './message';
 
@@ -8,6 +12,7 @@ export interface MessageEntry extends MessageOptions {
   revision: number;
   scope?: string;
   config?: LeafConfig;
+  components?: LeafComponentDefaults;
 }
 export const emptyMessages: readonly MessageEntry[] = [];
 
@@ -21,7 +26,12 @@ export function createMessageStore() {
     entries = next;
     for (const listener of listeners) listener();
   };
-  const open = (options: MessageOptions, scope?: string, config?: LeafConfig) => {
+  const open = (
+    options: MessageOptions,
+    scope?: string,
+    config?: LeafConfig,
+    components?: LeafComponentDefaults,
+  ) => {
     const key = options.key ?? `leaf-message-${++sequence}`;
     if (!available) return key;
     const existing = entries.find((entry) => entry.key === key);
@@ -30,6 +40,7 @@ export function createMessageStore() {
       key,
       scope,
       config,
+      components,
       open: true,
       revision: (existing?.revision ?? 0) + 1,
     };
@@ -63,12 +74,32 @@ export function createMessageStore() {
     remove: (key: string) => {
       publish(entries.filter((entry) => entry.key !== key || entry.open));
     },
-    updateScope: (scope: string, config: LeafConfig) => {
-      if (!entries.some((entry) => entry.scope === scope && entry.config !== config)) return;
-      publish(entries.map((entry) => (entry.scope === scope ? { ...entry, config } : entry)));
+    updateScope: (scope: string, config: LeafConfig, components?: LeafComponentDefaults) => {
+      if (
+        !entries.some(
+          (entry) =>
+            entry.scope === scope && (entry.config !== config || entry.components !== components),
+        )
+      )
+        return;
+      publish(
+        entries.map((entry) => (entry.scope === scope ? { ...entry, config, components } : entry)),
+      );
     },
-    api: (scope?: string, getConfig?: () => LeafConfig): MessageApi => {
-      const show = (options: MessageOptions) => open(options, scope, getConfig?.());
+    api: (
+      scope?: string,
+      getConfig?: () => LeafConfig,
+      getComponents?: () => LeafComponentDefaults,
+    ): MessageApi => {
+      const show = (options: MessageOptions) => {
+        const components = getComponents?.();
+        return open(
+          mergeComponentProps<MessageOptions>(components?.Message, options),
+          scope,
+          getConfig?.(),
+          components,
+        );
+      };
       return {
         open: show,
         close,
diff --git a/packages/react/src/modal/modal.scss b/packages/react/src/modal/modal.scss
index 9294e6a..bca546e 100644
--- a/packages/react/src/modal/modal.scss
+++ b/packages/react/src/modal/modal.scss
@@ -73,13 +73,6 @@
       var(--leaf-density-dialog-block) var(--leaf-density-dialog-inline)
     );
   }
-  &__footer {
-    --leaf-dialog-padding-block: var(
-      --leaf-component-modal-padding-top,
-      calc(var(--leaf-spacing) * 1.5)
-    );
-    padding-block-end: var(--leaf-dialog-padding-block);
-  }
   &__close {
     margin-inline-start: auto;
     display: inline-flex;
diff --git a/packages/react/src/modal/modal.tsx b/packages/react/src/modal/modal.tsx
index 7db68b7..1f01137 100644
--- a/packages/react/src/modal/modal.tsx
+++ b/packages/react/src/modal/modal.tsx
@@ -1,8 +1,9 @@
 import { X } from 'lucide-react';
 import { type HTMLAttributes, type ReactNode, useEffect, useId, useRef, useState } from 'react';
-import { Button, type ButtonProps } from '../button';
+import { ButtonControl, type ButtonProps } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
-import { Scrollbar } from '../scrollbar';
+import { ScrollbarControl as Scrollbar } from '../scrollbar/scrollbar';
 import { classes } from '../shared/classes';
 import { type DialogFocusOptions, useDialog } from '../shared/dialog';
 import { inertProps } from '../shared/inert';
@@ -122,7 +123,8 @@ function ModalSurface({
   };
   const actions: ModalFooterActions = {
     cancelButton: (
-      <Button
+      <ButtonControl
+        type="button"
         variant="outline"
         {...cancelButtonProps}
         disabled={busy || cancelButtonProps?.disabled}
@@ -131,11 +133,12 @@ function ModalSurface({
           if (!event.defaultPrevented) cancel();
         }}
       >
-        {cancelText ?? messages.cancel}
-      </Button>
+        {cancelText ?? messages.common.cancel}
+      </ButtonControl>
     ),
     confirmButton: (
-      <Button
+      <ButtonControl
+        type="button"
         {...confirmButtonProps}
         loading={busy || confirmButtonProps?.loading}
         onClick={(event) => {
@@ -143,8 +146,8 @@ function ModalSurface({
           if (!event.defaultPrevented) void accept();
         }}
       >
-        {confirmText ?? messages.confirm}
-      </Button>
+        {confirmText ?? messages.common.confirm}
+      </ButtonControl>
     ),
   };
   const renderedFooter =
@@ -196,7 +199,7 @@ function ModalSurface({
         type="button"
         className="leaf-modal-backdrop"
         tabIndex={-1}
-        aria-label={messages.close}
+        aria-label={messages.common.close}
         onClick={() => {
           if (maskClosable) close.current?.();
         }}
@@ -249,7 +252,7 @@ function ModalSurface({
                 <button
                   type="button"
                   className="leaf-modal__close"
-                  aria-label={messages.close}
+                  aria-label={messages.common.close}
                   onClick={() => close.current?.()}
                 >
                   <X size={18} aria-hidden="true" />
@@ -263,7 +266,9 @@ function ModalSurface({
               viewportClassName="leaf-modal__viewport"
               orientation="vertical"
               aria-labelledby={title != null ? titleId : undefined}
-              aria-label={title == null ? (props['aria-label'] ?? messages.confirm) : undefined}
+              aria-label={
+                title == null ? (props['aria-label'] ?? messages.common.confirm) : undefined
+              }
             >
               <div ref={content} className="leaf-modal__content">
                 {children}
@@ -281,10 +286,15 @@ function ModalSurface({
     </div>
   );
 }
-export function Modal(props: ModalProps) {
+// Other components reuse the dialog mechanics without inheriting public Modal defaults.
+export function ModalBase(props: ModalProps) {
   return (
     <ScopedPortal container={props.container}>
       <ModalSurface {...props} />
     </ScopedPortal>
   );
 }
+export function Modal(rawProps: ModalProps) {
+  const props = useComponentProps('Modal', rawProps);
+  return <ModalBase {...props} />;
+}
diff --git a/packages/react/src/notification/notification.tsx b/packages/react/src/notification/notification.tsx
index a293767..800a543 100644
--- a/packages/react/src/notification/notification.tsx
+++ b/packages/react/src/notification/notification.tsx
@@ -11,6 +11,12 @@ import {
   useSyncExternalStore,
 } from 'react';
 import { FeedbackIcon, type FeedbackType } from '../alert/alert';
+import {
+  ComponentDefaultsContext,
+  type LeafComponentDefaults,
+  mergeComponentProps,
+  useComponentProps,
+} from '../config-provider/component-defaults';
 import { ConfigContext, type LeafConfig, useLeafConfig } from '../config-provider/context';
 import { inertProps } from '../shared/inert';
 import { useContentTransition, usePresence } from '../shared/presence';
@@ -46,6 +52,7 @@ interface Entry extends NotificationOptions {
   revision: number;
   scope?: string;
   config?: LeafConfig;
+  components?: LeafComponentDefaults;
 }
 const empty: readonly Entry[] = [];
 function createStore(maxCount: number) {
@@ -73,12 +80,28 @@ function createStore(maxCount: number) {
     },
     close,
     remove: (key: string) => publish(entries.filter((item) => item.key !== key || item.open)),
-    update: (scope: string, config: LeafConfig) => {
-      if (entries.some((item) => item.scope === scope && item.config !== config))
-        publish(entries.map((item) => (item.scope === scope ? { ...item, config } : item)));
+    update: (scope: string, config: LeafConfig, components?: LeafComponentDefaults) => {
+      if (
+        entries.some(
+          (item) =>
+            item.scope === scope && (item.config !== config || item.components !== components),
+        )
+      )
+        publish(
+          entries.map((item) => (item.scope === scope ? { ...item, config, components } : item)),
+        );
     },
-    api: (scope: string, getConfig: () => LeafConfig): NotificationApi => {
-      const open = (options: NotificationOptions) => {
+    api: (
+      scope: string,
+      getConfig: () => LeafConfig,
+      getComponents: () => LeafComponentDefaults,
+    ): NotificationApi => {
+      const open = (rawOptions: NotificationOptions) => {
+        const components = getComponents();
+        const options = mergeComponentProps<NotificationOptions>(
+          components.Notification,
+          rawOptions,
+        );
         const key = options.key ?? `leaf-notification-${++sequence}`;
         const existing = entries.find((item) => item.key === key);
         const entry: Entry = {
@@ -86,6 +109,7 @@ function createStore(maxCount: number) {
           key,
           scope,
           config: getConfig(),
+          components,
           open: true,
           revision: (existing?.revision ?? 0) + 1,
         };
@@ -129,11 +153,22 @@ export function NotificationScope({ children }: { children?: ReactNode }) {
 export function useNotification(): NotificationApi {
   const store = useContext(Context);
   const config = useLeafConfig();
+  const components = useContext(ComponentDefaultsContext);
+  const latestComponents = useRef(components);
+  latestComponents.current = components;
   const latest = useRef(config);
   latest.current = config;
   const scope = useId();
-  useEffect(() => store?.update(scope, config), [store, scope, config]);
-  const api = useMemo(() => store?.api(scope, () => latest.current), [store, scope]);
+  useEffect(() => store?.update(scope, config, components), [store, scope, config, components]);
+  const api = useMemo(
+    () =>
+      store?.api(
+        scope,
+        () => latest.current,
+        () => latestComponents.current,
+      ),
+    [store, scope],
+  );
   if (!api) throw new Error('useNotification requires ConfigProvider or NotificationProvider.');
   return api;
 }
@@ -150,19 +185,21 @@ function NotificationHost({ store }: { store: ReturnType<typeof createStore> })
           {entries
             .filter((entry) => (entry.placement ?? 'top-right') === placement)
             .map((entry) => (
-              <NotificationItem
-                key={entry.key}
-                entry={entry}
-                close={() => store.close(entry.key)}
-                remove={() => store.remove(entry.key)}
-              />
+              <ComponentDefaultsContext.Provider key={entry.key} value={entry.components ?? {}}>
+                <NotificationItem
+                  entry={entry}
+                  close={() => store.close(entry.key)}
+                  remove={() => store.remove(entry.key)}
+                />
+              </ComponentDefaultsContext.Provider>
             ))}
         </div>
       ))}
     </ScopedPortal>
   );
 }
-export function Notification({ open, afterClose, onClose, ...options }: NotificationProps) {
+export function Notification(rawProps: NotificationProps) {
+  const { open, afterClose, onClose, ...options } = useComponentProps('Notification', rawProps);
   return (
     <ScopedPortal>
       <div
@@ -252,7 +289,7 @@ function NotificationItem({
                   <button
                     type="button"
                     className="leaf-notification__close"
-                    aria-label={config.messages.close}
+                    aria-label={config.messages.common.close}
                     onClick={close}
                   >
                     <X size={16} aria-hidden="true" />
diff --git a/packages/react/src/pagination/pagination.scss b/packages/react/src/pagination/pagination.scss
index a5bb820..691eae9 100644
--- a/packages/react/src/pagination/pagination.scss
+++ b/packages/react/src/pagination/pagination.scss
@@ -36,6 +36,7 @@
   }
   & > button,
   &__entry > button {
+    position: relative;
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
@@ -48,12 +49,13 @@
     color: inherit;
     background: transparent;
     font: inherit;
+    font-weight: var(--leaf-font-weight);
+    font-variant-numeric: tabular-nums;
     cursor: pointer;
     transition:
       background-color var(--leaf-motion-duration),
       border-color var(--leaf-motion-duration),
       color var(--leaf-motion-duration),
-      transform var(--leaf-motion-fast) var(--leaf-motion-easing),
       box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
     &:hover:not(:disabled):not([aria-current='page']) {
       color: var(--leaf-color-text);
@@ -66,7 +68,10 @@
       font-weight: var(--leaf-font-weight);
     }
     &:active:not(:disabled) {
-      transform: scale(0.94);
+      background: var(--leaf-color-border);
+    }
+    &[aria-current='page']:active:not(:disabled) {
+      background: transparent;
     }
     &:disabled {
       cursor: not-allowed;
@@ -76,10 +81,47 @@
       @include mixins.focus-ring;
     }
   }
+  &--outline {
+    > button,
+    .leaf-pagination__entry > button {
+      border-color: var(--leaf-color-border);
+      // Keep the opaque button surface below the moving selection, but above the page.
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: -2;
+        inset: -1px;
+        border-radius: inherit;
+        background: var(--leaf-color-surface);
+        pointer-events: none;
+      }
+      &:hover:not(:disabled):not([aria-current='page']) {
+        color: var(--leaf-color-primary-hover, var(--leaf-color-primary));
+        border-color: var(--leaf-color-primary-hover, var(--leaf-color-primary));
+        background: transparent;
+      }
+      &:active:not(:disabled):not([aria-current='page']) {
+        color: var(--leaf-color-primary-active, var(--leaf-color-primary));
+        border-color: var(--leaf-color-primary-active, var(--leaf-color-primary));
+      }
+      &[aria-current='page'] {
+        border-color: transparent;
+        &::before {
+          background: transparent;
+        }
+      }
+    }
+    .leaf-pagination__indicator {
+      border-color: var(--leaf-color-primary);
+    }
+  }
+  &[data-disabled] &__indicator[data-visible='true'] {
+    opacity: 0.45;
+  }
   &__entry {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: var(--leaf-component-pagination-gap, 6px);
   }
   &__ellipsis {
     min-width: var(--leaf-current-control-height);
@@ -102,6 +144,7 @@
   }
   &__size {
     width: 110px;
+    flex: 0 0 110px;
     margin-inline-start: 6px;
   }
   &__jumper {
@@ -119,6 +162,7 @@
   }
   &__simple {
     padding-inline: 8px;
+    font-variant-numeric: tabular-nums;
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -130,8 +174,8 @@
     transition: none;
   }
 }
-:dir(rtl) .leaf-pagination > button > svg,
-:dir(rtl) .leaf-pagination__jump > svg {
+.leaf-pagination[dir='rtl'] > button > svg,
+.leaf-pagination[dir='rtl'] .leaf-pagination__jump > svg {
   transform: rotate(180deg);
 }
 
diff --git a/packages/react/src/pagination/pagination.test.tsx b/packages/react/src/pagination/pagination.test.tsx
index a201243..f8b11c5 100644
--- a/packages/react/src/pagination/pagination.test.tsx
+++ b/packages/react/src/pagination/pagination.test.tsx
@@ -57,4 +57,170 @@ describe('Pagination', () => {
     expect(change).toHaveBeenLastCalledWith(6, 20);
     expect(jump).toHaveValue('6');
   });
+
+  it('keeps controlled values with the caller and only emits actual changes', async () => {
+    const change = vi.fn();
+    const { rerender } = render(
+      <ConfigProvider locale="en-US">
+        <Pagination total={120} current={3} pageSize={20} onChange={change} />
+      </ConfigProvider>,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Page 3' }));
+    expect(change).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByRole('button', { name: 'Next page' }));
+    expect(change).toHaveBeenCalledExactlyOnceWith(4, 20);
+    expect(screen.getByRole('button', { name: 'Page 3' })).toHaveAttribute('aria-current', 'page');
+    rerender(
+      <ConfigProvider locale="en-US">
+        <Pagination total={120} current={4} pageSize={20} onChange={change} />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('button', { name: 'Page 4' })).toHaveAttribute('aria-current', 'page');
+    expect(change).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([
+    ['zh-CN', '共 120 条'],
+    ['zh-TW', '共 120 條'],
+    ['en-US', 'Total 120 items'],
+  ])('localizes boolean totals for %s', (locale, text) => {
+    render(
+      <ConfigProvider locale={locale}>
+        <Pagination total={120} showTotal />
+      </ConfigProvider>,
+    );
+    expect(screen.getByText(text)).toBeInTheDocument();
+  });
+
+  it('preserves custom range rendering for partial and empty pages', () => {
+    const showTotal = vi.fn((total, [start, end]) => `${start}–${end} / ${total}`);
+    const { rerender } = render(<Pagination total={25} defaultCurrent={3} showTotal={showTotal} />);
+    expect(showTotal).toHaveBeenLastCalledWith(25, [21, 25]);
+    expect(screen.getByText('21–25 / 25')).toBeInTheDocument();
+    rerender(<Pagination total={0} showTotal={showTotal} />);
+    expect(showTotal).toHaveBeenLastCalledWith(0, [0, 0]);
+    expect(screen.getByText('0–0 / 0')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '上一页' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: '下一页' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: '页 1' })).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('commits jumps on leaving the region without duplicating an Enter commit', async () => {
+    const change = vi.fn();
+    render(
+      <ConfigProvider locale="en-US">
+        <Pagination total={120} current={1} showQuickJumper onChange={change} />
+        <button type="button">Outside</button>
+      </ConfigProvider>,
+    );
+    const user = userEvent.setup();
+    const jump = screen.getByRole('spinbutton', { name: 'Go to' });
+    await user.type(jump, '4');
+    expect(change).not.toHaveBeenCalled();
+    await user.keyboard('{Enter}');
+    await user.click(screen.getByRole('button', { name: 'Outside' }));
+    expect(change).toHaveBeenCalledExactlyOnceWith(4, 10);
+    await user.clear(jump);
+    await user.type(jump, '999');
+    await user.click(screen.getByRole('button', { name: 'Outside' }));
+    expect(change).toHaveBeenLastCalledWith(12, 10);
+    expect(change).toHaveBeenCalledTimes(2);
+    expect(jump).toHaveValue('12');
+  });
+
+  it('prioritizes clicked pagination actions over an uncommitted jump', async () => {
+    const change = vi.fn();
+    render(
+      <ConfigProvider locale="en-US">
+        <Pagination total={120} showQuickJumper onChange={change} />
+      </ConfigProvider>,
+    );
+    await userEvent.type(screen.getByRole('spinbutton', { name: 'Go to' }), '4');
+    await userEvent.click(screen.getByRole('button', { name: 'Page 3' }));
+    expect(change).toHaveBeenCalledExactlyOnceWith(3, 10);
+  });
+
+  it('prioritizes pointer actions when a browser does not focus the clicked button', () => {
+    const change = vi.fn();
+    const capture = vi.fn();
+    render(
+      <ConfigProvider locale="en-US">
+        <Pagination
+          total={120}
+          current={4}
+          showQuickJumper
+          onChange={change}
+          onPointerDownCapture={capture}
+        />
+      </ConfigProvider>,
+    );
+    const jump = screen.getByRole('spinbutton', { name: 'Go to' });
+    fireEvent.focus(jump);
+    fireEvent.change(jump, { target: { value: '5' } });
+    const page = screen.getByRole('button', { name: 'Page 3' });
+    fireEvent.pointerDown(page);
+    fireEvent.blur(jump, { relatedTarget: null });
+    fireEvent.click(page);
+    expect(change).toHaveBeenCalledExactlyOnceWith(3, 10);
+    expect(capture).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores blank, invalid and composing jump input', () => {
+    const change = vi.fn();
+    render(
+      <ConfigProvider locale="en-US">
+        <Pagination total={120} showQuickJumper onChange={change} />
+      </ConfigProvider>,
+    );
+    const jump = screen.getByRole('spinbutton', { name: 'Go to' });
+    fireEvent.keyDown(jump, { key: 'Enter' });
+    fireEvent.change(jump, { target: { value: 'invalid' } });
+    fireEvent.keyDown(jump, { key: 'Enter' });
+    fireEvent.blur(jump);
+    fireEvent.change(jump, { target: { value: '4' } });
+    fireEvent.keyDown(jump, { key: 'Enter', isComposing: true });
+    expect(change).not.toHaveBeenCalled();
+  });
+
+  it('normalizes page-size options and includes the current size', async () => {
+    render(
+      <ConfigProvider locale="en-US">
+        <Pagination
+          total={120}
+          pageSize={15}
+          pageSizeOptions={[20, 20, 10.8, 0, -5, NaN, Infinity]}
+          showSizeChanger
+        />
+      </ConfigProvider>,
+    );
+    await userEvent.click(screen.getByRole('combobox', { name: 'Page size' }));
+    expect(screen.getAllByRole('option').map((option) => option.textContent)).toEqual([
+      '10 / page',
+      '15 / page',
+      '20 / page',
+    ]);
+  });
+
+  it('disables every control and hides a single-page region when requested', async () => {
+    const change = vi.fn();
+    const { rerender } = render(
+      <ConfigProvider locale="en-US">
+        <Pagination
+          total={120}
+          defaultCurrent={3}
+          disabled
+          showSizeChanger
+          showQuickJumper
+          onChange={change}
+        />
+      </ConfigProvider>,
+    );
+    for (const button of screen.getAllByRole('button')) expect(button).toBeDisabled();
+    expect(screen.getByRole('combobox')).toBeDisabled();
+    expect(screen.getByRole('spinbutton')).toBeDisabled();
+    await userEvent.click(screen.getByRole('button', { name: 'Next page' }));
+    expect(change).not.toHaveBeenCalled();
+    rerender(<Pagination total={10} hideOnSinglePage />);
+    expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/pagination/pagination.tsx b/packages/react/src/pagination/pagination.tsx
index 6c12eab..83f73e8 100644
--- a/packages/react/src/pagination/pagination.tsx
+++ b/packages/react/src/pagination/pagination.tsx
@@ -1,10 +1,12 @@
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { type HTMLAttributes, type ReactNode, useId, useRef, useState } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
-import { InputNumber } from '../inputnumber';
-import { Select } from '../select';
+import { InputNumberControl as InputNumber } from '../inputnumber/inputnumber';
+import { SelectControl } from '../select/select';
 import { classes } from '../shared/classes';
 import type { ControlSize } from '../shared/types';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useMovingIndicator } from '../tabs/use-moving-indicator';
 
 export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
@@ -17,15 +19,16 @@ export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onCh
   showSizeChanger?: boolean;
   pageSizeOptions?: readonly number[];
   showQuickJumper?: boolean;
-  showTotal?: (total: number, range: readonly [number, number]) => ReactNode;
+  showTotal?: boolean | ((total: number, range: readonly [number, number]) => ReactNode);
   simple?: boolean;
   disabled?: boolean;
   hideOnSinglePage?: boolean;
   size?: ControlSize;
+  variant?: 'outline' | 'ghost';
 }
 const positiveInteger = (value: number) =>
   Number.isFinite(value) ? Math.max(1, Math.floor(value)) : 1;
-export function Pagination({
+export function PaginationControl({
   total,
   current,
   defaultCurrent = 1,
@@ -35,22 +38,27 @@ export function Pagination({
   showSizeChanger = false,
   pageSizeOptions = [10, 20, 50, 100],
   showQuickJumper = false,
-  showTotal,
+  showTotal = false,
   simple = false,
   disabled = false,
   hideOnSinglePage = false,
   size = 'md',
+  variant = 'outline',
   className,
+  dir,
   'aria-label': label,
   ...props
 }: PaginationProps) {
   const { messages, direction } = useLeafConfig();
+  const format = useFormattedText();
   const root = useRef<HTMLElement>(null);
   const indicator = useRef<HTMLSpanElement>(null);
   const jumpId = `${useId()}-jump`;
   const [internalPage, setPage] = useState(defaultCurrent);
   const [internalSize, setSize] = useState(defaultPageSize);
   const [jump, setJump] = useState<number | null>(null);
+  const committedJump = useRef<number | null>(null);
+  const pointerAction = useRef(false);
   const count = Math.max(0, Number.isFinite(total) ? Math.floor(total) : 0);
   const perPage = positiveInteger(pageSize ?? internalSize);
   const pages = Math.max(1, Math.ceil(count / perPage));
@@ -59,7 +67,7 @@ export function Pagination({
     root,
     indicator,
     '[aria-current="page"]',
-    `${page}-${pages}-${simple}-${direction}`,
+    `${page}-${pages}-${simple}-${variant}-${dir ?? direction}`,
     !hideOnSinglePage || pages !== 1,
   );
   const choose = (next: number, nextSize = perPage) => {
@@ -74,6 +82,14 @@ export function Pagination({
     if (normalizedPage !== page || normalizedSize !== perPage)
       onChange?.(normalizedPage, normalizedSize);
   };
+  const commitJump = (text: string) => {
+    if (disabled || !text.trim() || !Number.isFinite(Number(text))) return;
+    const next = Math.min(pages, positiveInteger(Number(text)));
+    if (committedJump.current === next) return;
+    committedJump.current = next;
+    choose(next);
+    setJump(next);
+  };
   const candidates =
     pages <= 7
       ? Array.from({ length: pages }, (_, i) => i + 1)
@@ -86,30 +102,49 @@ export function Pagination({
             ...(page >= pages - 2 ? [pages - 3, pages - 2, pages - 1] : []),
           ]),
         ].sort((a, b) => a - b);
-  const options = [...new Set([...pageSizeOptions.map(positiveInteger), perPage])].sort(
-    (a, b) => a - b,
-  );
+  const options = [
+    ...new Set([
+      ...pageSizeOptions.filter((value) => Number.isFinite(value) && value >= 1).map(Math.floor),
+      perPage,
+    ]),
+  ].sort((a, b) => a - b);
   if (hideOnSinglePage && pages === 1) return null;
   return (
     <nav
       {...props}
       ref={root}
-      aria-label={label ?? messages.pagination}
-      className={classes('leaf-pagination', `leaf-pagination--${size}`, className)}
+      dir={dir ?? direction}
+      aria-label={label ?? messages.pagination.label}
+      data-disabled={disabled ? '' : undefined}
+      className={classes(
+        'leaf-pagination',
+        `leaf-pagination--${size}`,
+        `leaf-pagination--${variant}`,
+        className,
+      )}
+      onPointerDownCapture={(event) => {
+        // Safari may blur an input without focusing the button clicked next.
+        pointerAction.current =
+          event.target instanceof Element &&
+          event.target.closest('button, [role="combobox"]') !== null;
+        props.onPointerDownCapture?.(event);
+      }}
     >
       <span ref={indicator} className="leaf-pagination__indicator" aria-hidden="true" />
       {showTotal && (
         <span className="leaf-pagination__total">
-          {showTotal(count, [
-            count === 0 ? 0 : (page - 1) * perPage + 1,
-            Math.min(count, page * perPage),
-          ])}
+          {typeof showTotal === 'function'
+            ? showTotal(count, [
+                count === 0 ? 0 : (page - 1) * perPage + 1,
+                Math.min(count, page * perPage),
+              ])
+            : format('pagination.total', { total: count })}
         </span>
       )}
       <button
         type="button"
         disabled={disabled || page === 1}
-        aria-label={messages.previousPage}
+        aria-label={messages.pagination.previousPage}
         onClick={() => choose(page - 1)}
       >
         <ChevronLeft size={16} aria-hidden="true" />
@@ -127,7 +162,7 @@ export function Pagination({
                 <button
                   type="button"
                   disabled={disabled}
-                  aria-label={`${messages.page} ${number - 1}`}
+                  aria-label={format('pagination.pageLabel', { page: number - 1 })}
                   onClick={() => choose(number - 1)}
                 >
                   {number - 1}
@@ -137,7 +172,9 @@ export function Pagination({
                   type="button"
                   className="leaf-pagination__jump"
                   disabled={disabled}
-                  aria-label={number > page ? messages.pageForward : messages.pageBack}
+                  aria-label={
+                    number > page ? messages.pagination.pageForward : messages.pagination.pageBack
+                  }
                   onClick={() => choose(page + (number > page ? 5 : -5))}
                 >
                   <span aria-hidden="true">…</span>
@@ -150,7 +187,7 @@ export function Pagination({
               ))}
             <button
               type="button"
-              aria-label={`${messages.page} ${number}`}
+              aria-label={format('pagination.pageLabel', { page: number })}
               aria-current={number === page ? 'page' : undefined}
               data-leaf-indicator-item=""
               disabled={disabled}
@@ -164,23 +201,23 @@ export function Pagination({
       <button
         type="button"
         disabled={disabled || page === pages}
-        aria-label={messages.nextPage}
+        aria-label={messages.pagination.nextPage}
         onClick={() => choose(page + 1)}
       >
         <ChevronRight size={16} aria-hidden="true" />
       </button>
       {showSizeChanger && (
-        <Select
+        <SelectControl
           size={size}
           className="leaf-pagination__size"
-          aria-label={messages.pageSize}
+          aria-label={messages.pagination.pageSize}
           disabled={disabled}
           value={String(perPage)}
           popupWidth="auto"
           popupMaxWidth={240}
           options={options.map((number) => ({
             value: String(number),
-            label: `${number} ${messages.itemsPerPage}`,
+            label: format('pagination.pageSizeOption', { count: number }),
           }))}
           onChange={(next) =>
             choose(Math.floor(((page - 1) * perPage) / Number(next)) + 1, Number(next))
@@ -189,10 +226,10 @@ export function Pagination({
       )}
       {showQuickJumper && (
         <label className="leaf-pagination__jumper" htmlFor={jumpId}>
-          {messages.jumpTo}
+          {messages.pagination.jumpTo}
           <InputNumber
             id={jumpId}
-            aria-label={messages.jumpTo}
+            aria-label={messages.pagination.jumpTo}
             size={size}
             min={1}
             max={pages}
@@ -201,16 +238,30 @@ export function Pagination({
             disabled={disabled}
             value={jump}
             onChange={setJump}
+            onFocus={() => {
+              committedJump.current = null;
+              pointerAction.current = false;
+            }}
+            onInput={(event) => {
+              if (event.currentTarget.value !== String(committedJump.current))
+                committedJump.current = null;
+            }}
+            onBlur={(event) => {
+              // A clicked page or size control takes precedence over an uncommitted draft.
+              const action = pointerAction.current;
+              pointerAction.current = false;
+              if (action || (event.relatedTarget && root.current?.contains(event.relatedTarget)))
+                return;
+              commitJump(event.currentTarget.value);
+            }}
             onKeyDown={(event) => {
               if (
                 event.key === 'Enter' &&
                 !event.nativeEvent.isComposing &&
-                event.currentTarget.value.trim() &&
-                Number.isFinite(Number(event.currentTarget.value))
+                event.currentTarget.value.trim()
               ) {
                 event.preventDefault();
-                choose(Number(event.currentTarget.value));
-                setJump(Math.min(pages, positiveInteger(Number(event.currentTarget.value))));
+                commitJump(event.currentTarget.value);
               }
             }}
           />
@@ -219,3 +270,8 @@ export function Pagination({
     </nav>
   );
 }
+
+export function Pagination(rawProps: PaginationProps) {
+  const props = useComponentProps('Pagination', rawProps);
+  return <PaginationControl {...props} />;
+}
diff --git a/packages/react/src/popconfirm/popconfirm.tsx b/packages/react/src/popconfirm/popconfirm.tsx
index 8cf60a0..ecf9780 100644
--- a/packages/react/src/popconfirm/popconfirm.tsx
+++ b/packages/react/src/popconfirm/popconfirm.tsx
@@ -1,8 +1,10 @@
 import { type ReactNode, useEffect, useRef, useState } from 'react';
 import { FeedbackIcon, type FeedbackType } from '../alert/alert';
-import { Button, type ButtonProps } from '../button';
+import { ButtonControl, type ButtonProps } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
-import { Popover, type PopoverProps } from '../popover';
+import type { PopoverProps } from '../popover';
+import { PopoverControl as Popover } from '../popover/popover';
 import { useControllable } from '../shared/use-controllable';
 import { useText } from '../shared/use-text';
 export interface PopconfirmProps
@@ -20,25 +22,26 @@ export interface PopconfirmProps
   onCancel?: () => void;
   onError?: (error: unknown) => void;
 }
-export function Popconfirm({
-  title,
-  description,
-  type = 'warning',
-  icon,
-  confirmText,
-  cancelText,
-  confirmButtonProps,
-  cancelButtonProps,
-  showCancel = true,
-  onConfirm,
-  onCancel,
-  onError,
-  open: controlled,
-  defaultOpen = false,
-  onOpenChange,
-  children,
-  ...props
-}: PopconfirmProps) {
+export function Popconfirm(rawProps: PopconfirmProps) {
+  const {
+    title,
+    description,
+    type = 'warning',
+    icon,
+    confirmText,
+    cancelText,
+    confirmButtonProps,
+    cancelButtonProps,
+    showCancel = true,
+    onConfirm,
+    onCancel,
+    onError,
+    open: controlled,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  } = useComponentProps('Popconfirm', rawProps);
   const { messages } = useLeafConfig();
   const t = useText();
   const [open, setOpen] = useControllable(controlled, defaultOpen, onOpenChange);
@@ -67,7 +70,9 @@ export function Popconfirm({
         }
       }}
       autoFocus={false}
-      aria-label={props['aria-label'] ?? (typeof title === 'string' ? title : messages.confirm)}
+      aria-label={
+        props['aria-label'] ?? (typeof title === 'string' ? title : messages.common.confirm)
+      }
       className={['leaf-popconfirm', props.className].filter(Boolean).join(' ')}
       content={
         <div className="leaf-popconfirm__content">
@@ -79,12 +84,12 @@ export function Popconfirm({
             {description && <div className="leaf-popconfirm__description">{description}</div>}
             {error && (
               <p role="alert" className="leaf-popconfirm__error">
-                {t('操作失败，请重试', 'Action failed. Please retry.')}
+                {t('popconfirm.actionFailedPleaseRetry')}
               </p>
             )}
             <div className="leaf-popconfirm__actions">
               {showCancel && (
-                <Button
+                <ButtonControl
                   {...cancelButtonProps}
                   size={cancelButtonProps?.size ?? 'sm'}
                   variant={cancelButtonProps?.variant ?? 'outline'}
@@ -97,10 +102,10 @@ export function Popconfirm({
                     }
                   }}
                 >
-                  {cancelText ?? messages.cancel}
-                </Button>
+                  {cancelText ?? messages.common.cancel}
+                </ButtonControl>
               )}
-              <Button
+              <ButtonControl
                 {...confirmButtonProps}
                 size={confirmButtonProps?.size ?? 'sm'}
                 danger={confirmButtonProps?.danger ?? type === 'error'}
@@ -128,8 +133,8 @@ export function Popconfirm({
                   }
                 }}
               >
-                {confirmText ?? messages.confirm}
-              </Button>
+                {confirmText ?? messages.common.confirm}
+              </ButtonControl>
             </div>
           </div>
         </div>
diff --git a/packages/react/src/popover/popover.tsx b/packages/react/src/popover/popover.tsx
index 3838214..ae8fe4a 100644
--- a/packages/react/src/popover/popover.tsx
+++ b/packages/react/src/popover/popover.tsx
@@ -12,6 +12,7 @@ import {
   version,
 } from 'react';
 import { tabbable } from 'tabbable';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useMergedRef } from '../shared/field';
 import { FloatingPanel, type PopupOptions, useFloatingDismiss } from '../shared/floating';
@@ -50,7 +51,7 @@ export interface PopoverProps extends PopupOptions {
   style?: CSSProperties;
   'aria-label'?: string;
 }
-export function Popover({
+export function PopoverControl({
   children,
   title,
   content,
@@ -218,3 +219,8 @@ export function Popover({
     </>
   );
 }
+
+export function Popover(rawProps: PopoverProps) {
+  const props = useComponentProps('Popover', rawProps);
+  return <PopoverControl {...props} />;
+}
diff --git a/packages/react/src/progress/progress.tsx b/packages/react/src/progress/progress.tsx
index d4ede01..98b863a 100644
--- a/packages/react/src/progress/progress.tsx
+++ b/packages/react/src/progress/progress.tsx
@@ -1,5 +1,6 @@
 import { Check, X } from 'lucide-react';
 import type { HTMLAttributes, ReactNode } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 
@@ -26,27 +27,28 @@ export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
   dashboard?: boolean;
   successPercent?: number;
 }
-export function Progress({
-  percent = 0,
-  type = 'line',
-  status = 'normal',
-  showInfo = true,
-  format,
-  strokeWidth,
-  color,
-  size = 100,
-  indeterminate = false,
-  active = true,
-  trailColor,
-  segments,
-  steps,
-  dashboard = false,
-  successPercent,
-  className,
-  style,
-  'aria-label': label,
-  ...props
-}: ProgressProps) {
+export function Progress(rawProps: ProgressProps) {
+  const {
+    percent = 0,
+    type = 'line',
+    status = 'normal',
+    showInfo = true,
+    format,
+    strokeWidth,
+    color,
+    size = 100,
+    indeterminate = false,
+    active = true,
+    trailColor,
+    segments,
+    steps,
+    dashboard = false,
+    successPercent,
+    className,
+    style,
+    'aria-label': label,
+    ...props
+  } = useComponentProps('Progress', rawProps);
   const { messages } = useLeafConfig();
   const value = Math.max(0, Math.min(100, Number.isFinite(percent) ? percent : 0));
   const state = !indeterminate && status === 'normal' && value === 100 ? 'success' : status;
@@ -84,8 +86,8 @@ export function Progress({
       aria-valuemin={0}
       aria-valuemax={100}
       aria-valuenow={indeterminate ? undefined : value}
-      aria-label={label ?? messages.progress}
-      aria-valuetext={indeterminate ? messages.loading : `${value}%`}
+      aria-label={label ?? messages.progress.label}
+      aria-valuetext={indeterminate ? messages.common.loading : `${value}%`}
       data-status={state}
       data-indeterminate={indeterminate || undefined}
       data-active={
diff --git a/packages/react/src/qrcode/qrcode.tsx b/packages/react/src/qrcode/qrcode.tsx
index db51b8b..c8d3144 100644
--- a/packages/react/src/qrcode/qrcode.tsx
+++ b/packages/react/src/qrcode/qrcode.tsx
@@ -1,8 +1,9 @@
 import { Download, RefreshCw } from 'lucide-react';
 import { QRCodeSVG } from 'qrcode.react';
 import { type HTMLAttributes, useRef } from 'react';
-import { Button } from '../button';
-import { Loading } from '../loading';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { LoadingControl as Loading } from '../loading/loading';
 import { classes } from '../shared/classes';
 import { useText } from '../shared/use-text';
 export interface QRCodeProps extends HTMLAttributes<HTMLDivElement> {
@@ -18,21 +19,22 @@ export interface QRCodeProps extends HTMLAttributes<HTMLDivElement> {
   downloadable?: boolean;
   fileName?: string;
 }
-export function QRCode({
-  value,
-  size = 160,
-  color = 'var(--leaf-color-text)',
-  backgroundColor = 'var(--leaf-color-surface)',
-  level = 'M',
-  logo,
-  logoSize = 32,
-  status = 'active',
-  onRefresh,
-  downloadable = false,
-  fileName = 'qrcode.svg',
-  className,
-  ...props
-}: QRCodeProps) {
+export function QRCode(rawProps: QRCodeProps) {
+  const {
+    value,
+    size = 160,
+    color = 'var(--leaf-color-text)',
+    backgroundColor = 'var(--leaf-color-surface)',
+    level = 'M',
+    logo,
+    logoSize = 32,
+    status = 'active',
+    onRefresh,
+    downloadable = false,
+    fileName = 'qrcode.svg',
+    className,
+    ...props
+  } = useComponentProps('QRCode', rawProps);
   const t = useText();
   const root = useRef<HTMLDivElement>(null);
   const download = () => {
@@ -65,7 +67,7 @@ export function QRCode({
           marginSize={2}
           fgColor={color}
           bgColor={backgroundColor}
-          title={props['aria-label'] ?? t('二维码', 'QR code')}
+          title={props['aria-label'] ?? t('qrCode.qrCode')}
           imageSettings={
             logo ? { src: logo, width: logoSize, height: logoSize, excavate: true } : undefined
           }
@@ -75,17 +77,17 @@ export function QRCode({
             {status === 'loading' ? (
               <Loading />
             ) : (
-              <Button variant="outline" startIcon={<RefreshCw />} onClick={onRefresh}>
-                {t('刷新二维码', 'Refresh code')}
-              </Button>
+              <ButtonControl variant="outline" startIcon={<RefreshCw />} onClick={onRefresh}>
+                {t('qrCode.refreshCode')}
+              </ButtonControl>
             )}
           </div>
         )}
       </div>
       {downloadable && (
-        <Button size="sm" variant="ghost" startIcon={<Download />} onClick={download}>
-          {t('下载', 'Download')}
-        </Button>
+        <ButtonControl size="sm" variant="ghost" startIcon={<Download />} onClick={download}>
+          {t('common.download')}
+        </ButtonControl>
       )}
     </div>
   );
diff --git a/packages/react/src/radio/index.ts b/packages/react/src/radio/index.ts
index 1140e08..cf0584d 100644
--- a/packages/react/src/radio/index.ts
+++ b/packages/react/src/radio/index.ts
@@ -1 +1,2 @@
-export * from './radio';
+export type { RadioGroupProps, RadioOption, RadioProps } from './radio';
+export { Radio, RadioGroup } from './radio';
diff --git a/packages/react/src/radio/radio.tsx b/packages/react/src/radio/radio.tsx
index 9bac2a7..2536a2b 100644
--- a/packages/react/src/radio/radio.tsx
+++ b/packages/react/src/radio/radio.tsx
@@ -6,6 +6,7 @@ import {
   type ReactNode,
   useId,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import type { ControlSize } from '../shared/types';
@@ -16,7 +17,7 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   icon?: ReactNode;
   extra?: ReactNode;
 }
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
+export const RadioControl = forwardRef<HTMLInputElement, RadioProps>(function RadioControl(
   {
     size = 'md',
     variant = 'plain',
@@ -28,7 +29,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
     disabled: disabledProp,
     children,
     ...props
-  },
+  }: RadioProps,
   ref,
 ) {
   const field = useFormField();
@@ -100,7 +101,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
     </label>
   );
 });
-Radio.displayName = 'Radio';
+RadioControl.displayName = 'RadioControl';
 export interface RadioOption {
   label: ReactNode;
   description?: ReactNode;
@@ -126,7 +127,10 @@ export interface RadioGroupProps
   onChange?: ChangeEventHandler<HTMLInputElement>;
 }
 export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroup(
-  {
+  rawProps: RadioGroupProps,
+  ref,
+) {
+  const {
     options,
     value,
     defaultValue,
@@ -140,9 +144,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(funct
     disabled: disabledProp,
     className,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('RadioGroup', rawProps);
   const id = useId();
   const field = useFormField();
   const disabled = disabledProp || field?.disabled;
@@ -168,7 +170,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(funct
       {label && <legend className="leaf-radio-group__legend">{label}</legend>}
       <div className="leaf-radio-group__options">
         {options.map((option) => (
-          <Radio
+          <RadioControl
             key={option.value}
             id={`${props.id ?? field?.id ?? id}-${option.value}`}
             size={size}
@@ -185,10 +187,19 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(funct
             onChange={onChange}
           >
             {option.label}
-          </Radio>
+          </RadioControl>
         ))}
       </div>
     </fieldset>
   );
 });
 RadioGroup.displayName = 'RadioGroup';
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
+  rawProps: RadioProps,
+  ref,
+) {
+  const props = useComponentProps('Radio', rawProps);
+  return <RadioControl {...props} ref={ref} />;
+});
+Radio.displayName = 'Radio';
diff --git a/packages/react/src/rate/rate.tsx b/packages/react/src/rate/rate.tsx
index a2a96fd..d710de3 100644
--- a/packages/react/src/rate/rate.tsx
+++ b/packages/react/src/rate/rate.tsx
@@ -1,5 +1,6 @@
 import { Star } from 'lucide-react';
 import { type HTMLAttributes, useRef, useState } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
@@ -24,27 +25,28 @@ export interface RateProps
   form?: string;
   required?: boolean;
 }
-export function Rate({
-  value,
-  defaultValue = 0,
-  onChange,
-  count = 5,
-  allowHalf = false,
-  allowClear = true,
-  disabled: disabledProp,
-  readOnly = false,
-  size = 'md',
-  color,
-  colorByValue = false,
-  colors = ['#ef5350', '#f49b23', '#ffc53d'],
-  name,
-  form,
-  required: requiredProp,
-  className,
-  style,
-  'aria-label': label,
-  ...props
-}: RateProps) {
+export function Rate(rawProps: RateProps) {
+  const {
+    value,
+    defaultValue = 0,
+    onChange,
+    count = 5,
+    allowHalf = false,
+    allowClear = true,
+    disabled: disabledProp,
+    readOnly = false,
+    size = 'md',
+    color,
+    colorByValue = false,
+    colors = ['#ef5350', '#f49b23', '#ffc53d'],
+    name,
+    form,
+    required: requiredProp,
+    className,
+    style,
+    'aria-label': label,
+    ...props
+  } = useComponentProps('Rate', rawProps);
   const { messages } = useLeafConfig();
   const field = useFormField();
   const disabled = disabledProp || field?.disabled;
@@ -79,7 +81,7 @@ export function Rate({
       id={props.id ?? field?.id}
       ref={root}
       role="radiogroup"
-      aria-label={label ?? (field?.labelId ? undefined : messages.rating)}
+      aria-label={label ?? (field?.labelId ? undefined : messages.rate.label)}
       aria-labelledby={props['aria-labelledby'] ?? field?.labelId}
       aria-disabled={disabled || undefined}
       aria-readonly={readOnly || undefined}
diff --git a/packages/react/src/result/result.tsx b/packages/react/src/result/result.tsx
index 3212c79..c2d765a 100644
--- a/packages/react/src/result/result.tsx
+++ b/packages/react/src/result/result.tsx
@@ -1,5 +1,6 @@
 import { Check, Inbox, Info, TriangleAlert, X } from 'lucide-react';
 import { type HTMLAttributes, type ReactNode, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { useContentTransition } from '../shared/presence';
@@ -19,7 +20,7 @@ const icons = {
   error: X,
   info: Info,
 };
-export function Result({
+export function ResultControl({
   status = 'empty',
   title,
   description,
@@ -38,15 +39,15 @@ export function Result({
     title !== undefined
       ? title
       : status === 'empty'
-        ? messages.noData
-        : messages[
+        ? messages.common.noData
+        : messages.result[
             status === 'success'
-              ? 'resultSuccess'
+              ? 'success'
               : status === 'warning'
-                ? 'resultWarning'
+                ? 'warning'
                 : status === 'error'
-                  ? 'resultError'
-                  : 'resultInfo'
+                  ? 'error'
+                  : 'info'
           ];
   return (
     <div
@@ -71,3 +72,8 @@ export function Result({
     </div>
   );
 }
+
+export function Result(rawProps: ResultProps) {
+  const props = useComponentProps('Result', rawProps);
+  return <ResultControl {...props} />;
+}
diff --git a/packages/react/src/scrollarea/scrollarea.tsx b/packages/react/src/scrollarea/scrollarea.tsx
index fb88feb..142605b 100644
--- a/packages/react/src/scrollarea/scrollarea.tsx
+++ b/packages/react/src/scrollarea/scrollarea.tsx
@@ -1,11 +1,18 @@
 import { forwardRef } from 'react';
-import { Scrollbar, type ScrollbarProps } from '../scrollbar';
+import { useComponentProps } from '../config-provider/component-defaults';
+import type { ScrollbarProps } from '../scrollbar';
+import { ScrollbarControl as Scrollbar } from '../scrollbar/scrollbar';
 import { classes } from '../shared/classes';
 export interface ScrollAreaProps extends ScrollbarProps {}
 export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(
-  { orientation = 'vertical', className, ...props },
+  rawProps: ScrollAreaProps,
   ref,
 ) {
+  const {
+    orientation = 'vertical',
+    className,
+    ...props
+  } = useComponentProps('ScrollArea', rawProps);
   return (
     <Scrollbar
       {...props}
diff --git a/packages/react/src/scrollbar/scrollbar.tsx b/packages/react/src/scrollbar/scrollbar.tsx
index 990c075..c4331ec 100644
--- a/packages/react/src/scrollbar/scrollbar.tsx
+++ b/packages/react/src/scrollbar/scrollbar.tsx
@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useMergedRef } from '../shared/field';
 import { useText } from '../shared/use-text';
@@ -44,295 +45,304 @@ const initialGeometry: Geometry = {
   rtl: false,
 };
 
-export const Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(
-  {
-    height,
-    maxHeight,
-    orientation = 'both',
-    scrollbar = 'auto',
-    viewportClassName,
-    viewportStyle,
-    contentClassName,
-    contentStyle,
-    verticalOffset = 0,
-    className,
-    style,
-    children,
-    tabIndex = 0,
-    onScroll,
-    id: providedId,
-    role = 'region',
-    'aria-label': label,
-    'aria-labelledby': labelledBy,
-    'aria-describedby': describedBy,
-    ...props
-  },
-  forwarded,
-) {
-  const viewport = useRef<HTMLDivElement>(null);
-  const content = useRef<HTMLDivElement>(null);
-  const ref = useMergedRef(viewport, forwarded);
-  const generatedId = useId();
-  const id = providedId ?? generatedId;
-  const t = useText();
-  const [geometry, setGeometry] = useState(initialGeometry);
-  const [scrolling, setScrolling] = useState(false);
-  const [dragging, setDragging] = useState(false);
-  const frame = useRef<number | undefined>(undefined);
-  const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const drag = useRef<{ pointerId: number; offset: number; vertical: boolean } | undefined>(
-    undefined,
-  );
-  const measure = useCallback(() => {
-    const element = viewport.current;
-    if (!element) return;
-    const next: Geometry = {
-      width: element.clientWidth,
-      height: element.clientHeight,
-      scrollWidth: element.scrollWidth,
-      scrollHeight: element.scrollHeight,
-      left: Math.abs(element.scrollLeft),
-      top: element.scrollTop,
-      rtl: getComputedStyle(element).direction === 'rtl',
-    };
-    setGeometry((previous) =>
-      Object.keys(next).every(
-        (key) => next[key as keyof Geometry] === previous[key as keyof Geometry],
-      )
-        ? previous
-        : next,
+export const ScrollbarControl = forwardRef<HTMLDivElement, ScrollbarProps>(
+  function ScrollbarControl(
+    {
+      height,
+      maxHeight,
+      orientation = 'both',
+      scrollbar = 'auto',
+      viewportClassName,
+      viewportStyle,
+      contentClassName,
+      contentStyle,
+      verticalOffset = 0,
+      className,
+      style,
+      children,
+      tabIndex = 0,
+      onScroll,
+      id: providedId,
+      role = 'region',
+      'aria-label': label,
+      'aria-labelledby': labelledBy,
+      'aria-describedby': describedBy,
+      ...props
+    }: ScrollbarProps,
+    forwarded,
+  ) {
+    const viewport = useRef<HTMLDivElement>(null);
+    const content = useRef<HTMLDivElement>(null);
+    const ref = useMergedRef(viewport, forwarded);
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const t = useText();
+    const [geometry, setGeometry] = useState(initialGeometry);
+    const [scrolling, setScrolling] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const frame = useRef<number | undefined>(undefined);
+    const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    const drag = useRef<{ pointerId: number; offset: number; vertical: boolean } | undefined>(
+      undefined,
     );
-  }, []);
-  const schedule = useCallback(() => {
-    if (frame.current !== undefined) return;
-    frame.current = requestAnimationFrame(() => {
-      frame.current = undefined;
-      measure();
-    });
-  }, [measure]);
-  useEffect(() => {
-    measure();
-    const observer =
-      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);
-    if (viewport.current) observer?.observe(viewport.current);
-    if (content.current) observer?.observe(content.current);
-    const mutation =
-      typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(schedule);
-    if (content.current)
-      mutation?.observe(content.current, {
-        childList: true,
-        subtree: true,
-        characterData: true,
-        attributes: true,
+    const measure = useCallback(() => {
+      const element = viewport.current;
+      if (!element) return;
+      const next: Geometry = {
+        width: element.clientWidth,
+        height: element.clientHeight,
+        scrollWidth: element.scrollWidth,
+        scrollHeight: element.scrollHeight,
+        left: Math.abs(element.scrollLeft),
+        top: element.scrollTop,
+        rtl: getComputedStyle(element).direction === 'rtl',
+      };
+      setGeometry((previous) =>
+        Object.keys(next).every(
+          (key) => next[key as keyof Geometry] === previous[key as keyof Geometry],
+        )
+          ? previous
+          : next,
+      );
+    }, []);
+    const schedule = useCallback(() => {
+      if (frame.current !== undefined) return;
+      frame.current = requestAnimationFrame(() => {
+        frame.current = undefined;
+        measure();
       });
-    window.addEventListener('resize', schedule);
-    return () => {
-      observer?.disconnect();
-      mutation?.disconnect();
-      window.removeEventListener('resize', schedule);
-      if (frame.current !== undefined) cancelAnimationFrame(frame.current);
-      frame.current = undefined;
-      clearTimeout(timeout.current);
-    };
-  }, [measure, schedule]);
+    }, [measure]);
+    useEffect(() => {
+      measure();
+      const observer =
+        typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);
+      if (viewport.current) observer?.observe(viewport.current);
+      if (content.current) observer?.observe(content.current);
+      const mutation =
+        typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(schedule);
+      if (content.current)
+        mutation?.observe(content.current, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+          attributes: true,
+        });
+      window.addEventListener('resize', schedule);
+      return () => {
+        observer?.disconnect();
+        mutation?.disconnect();
+        window.removeEventListener('resize', schedule);
+        if (frame.current !== undefined) cancelAnimationFrame(frame.current);
+        frame.current = undefined;
+        clearTimeout(timeout.current);
+      };
+    }, [measure, schedule]);
 
-  function setPosition(vertical: boolean, value: number) {
-    const element = viewport.current;
-    if (!element) return;
-    const maximum = vertical
-      ? element.scrollHeight - element.clientHeight
-      : element.scrollWidth - element.clientWidth;
-    const position = Math.min(Math.max(0, value), Math.max(0, maximum));
-    if (vertical) element.scrollTop = position;
-    else element.scrollLeft = geometry.rtl ? -position : position;
-    schedule();
-  }
+    function setPosition(vertical: boolean, value: number) {
+      const element = viewport.current;
+      if (!element) return;
+      const maximum = vertical
+        ? element.scrollHeight - element.clientHeight
+        : element.scrollWidth - element.clientWidth;
+      const position = Math.min(Math.max(0, value), Math.max(0, maximum));
+      if (vertical) element.scrollTop = position;
+      else element.scrollLeft = geometry.rtl ? -position : position;
+      schedule();
+    }
 
-  const horizontalOverflow =
-    orientation !== 'vertical' && geometry.scrollWidth > geometry.width + 1;
-  const verticalOverflow =
-    orientation !== 'horizontal' && geometry.scrollHeight > geometry.height + 1;
-  const inset = Math.min(Math.max(0, verticalOffset), Math.max(0, geometry.height - 32));
-  const viewportAccessibility = {
-    role,
-    'aria-label': label,
-    'aria-labelledby': labelledBy,
-    'aria-describedby': describedBy,
-  };
+    const horizontalOverflow =
+      orientation !== 'vertical' && geometry.scrollWidth > geometry.width + 1;
+    const verticalOverflow =
+      orientation !== 'horizontal' && geometry.scrollHeight > geometry.height + 1;
+    const inset = Math.min(Math.max(0, verticalOffset), Math.max(0, geometry.height - 32));
+    const viewportAccessibility = {
+      role,
+      'aria-label': label,
+      'aria-labelledby': labelledBy,
+      'aria-describedby': describedBy,
+    };
 
-  function bar(vertical: boolean) {
-    const visibleSize = vertical ? geometry.height : geometry.width;
-    const contentSize = vertical ? geometry.scrollHeight : geometry.scrollWidth;
-    const offset = vertical ? inset : 0;
-    const crossOverflow = vertical ? horizontalOverflow : verticalOverflow;
-    const trackSize = Math.max(0, visibleSize - offset - 8 - (crossOverflow ? 8 : 0));
-    const thumbSize = Math.min(
-      trackSize,
-      Math.max(24, (trackSize * (visibleSize - offset)) / Math.max(1, contentSize - offset)),
-    );
-    const maximum = Math.max(0, contentSize - visibleSize);
-    const position = Math.min(maximum, Math.max(0, vertical ? geometry.top : geometry.left));
-    const thumbPosition = maximum ? (position / maximum) * (trackSize - thumbSize) : 0;
-    const logicalPosition =
-      !vertical && geometry.rtl ? trackSize - thumbSize - thumbPosition : thumbPosition;
-    return (
-      <div
-        key={vertical ? 'vertical' : 'horizontal'}
-        className={classes(
-          'leaf-scrollbar__bar',
-          vertical ? 'leaf-scrollbar__bar--vertical' : 'leaf-scrollbar__bar--horizontal',
-        )}
-        style={
-          vertical
-            ? { top: inset + 4, bottom: horizontalOverflow ? 12 : 4 }
-            : {
-                right: verticalOverflow && !geometry.rtl ? 12 : 4,
-                left: verticalOverflow && geometry.rtl ? 12 : 4,
-              }
-        }
-      >
-        <span
-          aria-hidden="true"
-          className="leaf-scrollbar__thumb"
-          style={
-            vertical
-              ? { height: thumbSize, transform: `translateY(${logicalPosition}px)` }
-              : { width: thumbSize, transform: `translateX(${logicalPosition}px)` }
-          }
-        />
+    function bar(vertical: boolean) {
+      const visibleSize = vertical ? geometry.height : geometry.width;
+      const contentSize = vertical ? geometry.scrollHeight : geometry.scrollWidth;
+      const offset = vertical ? inset : 0;
+      const crossOverflow = vertical ? horizontalOverflow : verticalOverflow;
+      const trackSize = Math.max(0, visibleSize - offset - 8 - (crossOverflow ? 8 : 0));
+      const thumbSize = Math.min(
+        trackSize,
+        Math.max(24, (trackSize * (visibleSize - offset)) / Math.max(1, contentSize - offset)),
+      );
+      const maximum = Math.max(0, contentSize - visibleSize);
+      const position = Math.min(maximum, Math.max(0, vertical ? geometry.top : geometry.left));
+      const thumbPosition = maximum ? (position / maximum) * (trackSize - thumbSize) : 0;
+      const logicalPosition =
+        !vertical && geometry.rtl ? trackSize - thumbSize - thumbPosition : thumbPosition;
+      return (
         <div
-          role="scrollbar"
-          tabIndex={maximum ? 0 : -1}
-          className="leaf-scrollbar__control"
-          aria-label={
+          key={vertical ? 'vertical' : 'horizontal'}
+          className={classes(
+            'leaf-scrollbar__bar',
+            vertical ? 'leaf-scrollbar__bar--vertical' : 'leaf-scrollbar__bar--horizontal',
+          )}
+          style={
             vertical
-              ? t('纵向滚动条', 'Vertical scrollbar')
-              : t('横向滚动条', 'Horizontal scrollbar')
+              ? { top: inset + 4, bottom: horizontalOverflow ? 12 : 4 }
+              : {
+                  right: verticalOverflow && !geometry.rtl ? 12 : 4,
+                  left: verticalOverflow && geometry.rtl ? 12 : 4,
+                }
           }
-          aria-controls={id}
-          aria-orientation={vertical ? 'vertical' : 'horizontal'}
-          aria-valuemin={0}
-          aria-valuemax={maximum}
-          aria-valuenow={position}
-          aria-disabled={!maximum || undefined}
-          onKeyDown={(event) => {
-            if (!maximum) return;
-            const current = viewport.current;
-            const position = current
-              ? vertical
-                ? current.scrollTop
-                : Math.abs(current.scrollLeft)
-              : 0;
-            let value: number | undefined;
-            if (event.key === 'Home') value = 0;
-            if (event.key === 'End') value = maximum;
-            if (event.key === 'PageDown') value = position + visibleSize;
-            if (event.key === 'PageUp') value = position - visibleSize;
-            if (event.key === 'ArrowDown') value = position + 40;
-            if (event.key === 'ArrowUp') value = position - 40;
-            if (event.key === 'ArrowRight') value = position + (geometry.rtl ? -40 : 40);
-            if (event.key === 'ArrowLeft') value = position + (geometry.rtl ? 40 : -40);
-            if (value === undefined) return;
-            event.preventDefault();
-            setPosition(vertical, value);
-          }}
-          onPointerDown={(event) => {
-            if (event.button !== 0 || !maximum) return;
-            event.preventDefault();
-            const rect = event.currentTarget.getBoundingClientRect();
-            const pointer = vertical ? event.clientY - rect.top : event.clientX - rect.left;
-            const onThumb = pointer >= logicalPosition && pointer <= logicalPosition + thumbSize;
-            drag.current = {
-              pointerId: event.pointerId,
-              vertical,
-              offset: onThumb ? pointer - logicalPosition : thumbSize / 2,
-            };
-            event.currentTarget.setPointerCapture?.(event.pointerId);
-            setDragging(true);
-            if (!onThumb) {
-              const next = Math.min(trackSize - thumbSize, Math.max(0, pointer - thumbSize / 2));
+        >
+          <span
+            aria-hidden="true"
+            className="leaf-scrollbar__thumb"
+            style={
+              vertical
+                ? { height: thumbSize, transform: `translateY(${logicalPosition}px)` }
+                : { width: thumbSize, transform: `translateX(${logicalPosition}px)` }
+            }
+          />
+          <div
+            role="scrollbar"
+            tabIndex={maximum ? 0 : -1}
+            className="leaf-scrollbar__control"
+            aria-label={
+              vertical ? t('scrollbar.verticalScrollbar') : t('scrollbar.horizontalScrollbar')
+            }
+            aria-controls={id}
+            aria-orientation={vertical ? 'vertical' : 'horizontal'}
+            aria-valuemin={0}
+            aria-valuemax={maximum}
+            aria-valuenow={position}
+            aria-disabled={!maximum || undefined}
+            onKeyDown={(event) => {
+              if (!maximum) return;
+              const current = viewport.current;
+              const position = current
+                ? vertical
+                  ? current.scrollTop
+                  : Math.abs(current.scrollLeft)
+                : 0;
+              let value: number | undefined;
+              if (event.key === 'Home') value = 0;
+              if (event.key === 'End') value = maximum;
+              if (event.key === 'PageDown') value = position + visibleSize;
+              if (event.key === 'PageUp') value = position - visibleSize;
+              if (event.key === 'ArrowDown') value = position + 40;
+              if (event.key === 'ArrowUp') value = position - 40;
+              if (event.key === 'ArrowRight') value = position + (geometry.rtl ? -40 : 40);
+              if (event.key === 'ArrowLeft') value = position + (geometry.rtl ? 40 : -40);
+              if (value === undefined) return;
+              event.preventDefault();
+              setPosition(vertical, value);
+            }}
+            onPointerDown={(event) => {
+              if (event.button !== 0 || !maximum) return;
+              event.preventDefault();
+              const rect = event.currentTarget.getBoundingClientRect();
+              const pointer = vertical ? event.clientY - rect.top : event.clientX - rect.left;
+              const onThumb = pointer >= logicalPosition && pointer <= logicalPosition + thumbSize;
+              drag.current = {
+                pointerId: event.pointerId,
+                vertical,
+                offset: onThumb ? pointer - logicalPosition : thumbSize / 2,
+              };
+              event.currentTarget.setPointerCapture?.(event.pointerId);
+              setDragging(true);
+              if (!onThumb) {
+                const next = Math.min(trackSize - thumbSize, Math.max(0, pointer - thumbSize / 2));
+                setPosition(
+                  vertical,
+                  ((!vertical && geometry.rtl ? trackSize - thumbSize - next : next) /
+                    Math.max(1, trackSize - thumbSize)) *
+                    maximum,
+                );
+              }
+            }}
+            onPointerMove={(event) => {
+              const active = drag.current;
+              if (!active || active.pointerId !== event.pointerId || active.vertical !== vertical)
+                return;
+              const rect = event.currentTarget.getBoundingClientRect();
+              const pointer = vertical ? event.clientY - rect.top : event.clientX - rect.left;
+              const next = Math.min(trackSize - thumbSize, Math.max(0, pointer - active.offset));
               setPosition(
                 vertical,
                 ((!vertical && geometry.rtl ? trackSize - thumbSize - next : next) /
                   Math.max(1, trackSize - thumbSize)) *
                   maximum,
               );
-            }
-          }}
-          onPointerMove={(event) => {
-            const active = drag.current;
-            if (!active || active.pointerId !== event.pointerId || active.vertical !== vertical)
-              return;
-            const rect = event.currentTarget.getBoundingClientRect();
-            const pointer = vertical ? event.clientY - rect.top : event.clientX - rect.left;
-            const next = Math.min(trackSize - thumbSize, Math.max(0, pointer - active.offset));
-            setPosition(
-              vertical,
-              ((!vertical && geometry.rtl ? trackSize - thumbSize - next : next) /
-                Math.max(1, trackSize - thumbSize)) *
-                maximum,
-            );
-          }}
-          onPointerUp={() => {
-            drag.current = undefined;
-            setDragging(false);
-          }}
-          onPointerCancel={() => {
-            drag.current = undefined;
-            setDragging(false);
-          }}
-          onLostPointerCapture={() => {
-            drag.current = undefined;
-            setDragging(false);
-          }}
-        />
-      </div>
-    );
-  }
+            }}
+            onPointerUp={() => {
+              drag.current = undefined;
+              setDragging(false);
+            }}
+            onPointerCancel={() => {
+              drag.current = undefined;
+              setDragging(false);
+            }}
+            onLostPointerCapture={() => {
+              drag.current = undefined;
+              setDragging(false);
+            }}
+          />
+        </div>
+      );
+    }
 
-  return (
-    <div
-      {...props}
-      className={classes('leaf-scrollbar', className)}
-      data-scrollbar={scrollbar}
-      data-scrolling={scrolling || undefined}
-      data-dragging={dragging || undefined}
-      style={{ height, maxHeight, ...style }}
-    >
+    return (
       <div
-        ref={ref}
-        id={id}
-        tabIndex={tabIndex}
-        {...viewportAccessibility}
-        className={classes('leaf-scrollbar__viewport', viewportClassName)}
-        style={{
-          height: (style?.height ?? height) === undefined ? undefined : '100%',
-          overflowX: orientation === 'vertical' ? 'hidden' : 'auto',
-          overflowY: orientation === 'horizontal' ? 'hidden' : 'auto',
-          ...viewportStyle,
-        }}
-        onScroll={(event) => {
-          schedule();
-          setScrolling(true);
-          clearTimeout(timeout.current);
-          timeout.current = setTimeout(() => setScrolling(false), 700);
-          onScroll?.(event);
-        }}
+        {...props}
+        className={classes('leaf-scrollbar', className)}
+        data-scrollbar={scrollbar}
+        data-scrolling={scrolling || undefined}
+        data-dragging={dragging || undefined}
+        style={{ height, maxHeight, ...style }}
       >
         <div
-          ref={content}
-          className={classes('leaf-scrollbar__content', contentClassName)}
-          style={contentStyle}
+          ref={ref}
+          id={id}
+          tabIndex={tabIndex}
+          {...viewportAccessibility}
+          className={classes('leaf-scrollbar__viewport', viewportClassName)}
+          style={{
+            height: (style?.height ?? height) === undefined ? undefined : '100%',
+            overflowX: orientation === 'vertical' ? 'hidden' : 'auto',
+            overflowY: orientation === 'horizontal' ? 'hidden' : 'auto',
+            ...viewportStyle,
+          }}
+          onScroll={(event) => {
+            schedule();
+            setScrolling(true);
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(() => setScrolling(false), 700);
+            onScroll?.(event);
+          }}
         >
-          {children}
+          <div
+            ref={content}
+            className={classes('leaf-scrollbar__content', contentClassName)}
+            style={contentStyle}
+          >
+            {children}
+          </div>
         </div>
+        {scrollbar !== 'hidden' &&
+          (verticalOverflow || (scrollbar === 'always' && orientation !== 'horizontal')) &&
+          bar(true)}
+        {scrollbar !== 'hidden' &&
+          (horizontalOverflow || (scrollbar === 'always' && orientation !== 'vertical')) &&
+          bar(false)}
       </div>
-      {scrollbar !== 'hidden' &&
-        (verticalOverflow || (scrollbar === 'always' && orientation !== 'horizontal')) &&
-        bar(true)}
-      {scrollbar !== 'hidden' &&
-        (horizontalOverflow || (scrollbar === 'always' && orientation !== 'vertical')) &&
-        bar(false)}
-    </div>
-  );
+    );
+  },
+);
+
+export const Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(
+  rawProps: ScrollbarProps,
+  ref,
+) {
+  const props = useComponentProps('Scrollbar', rawProps);
+  return <ScrollbarControl {...props} ref={ref} />;
 });
+Scrollbar.displayName = 'Scrollbar';
diff --git a/packages/react/src/segmented/segmented.scss b/packages/react/src/segmented/segmented.scss
index 5b50c95..dbfdb47 100644
--- a/packages/react/src/segmented/segmented.scss
+++ b/packages/react/src/segmented/segmented.scss
@@ -53,7 +53,7 @@
     align-items: center;
     justify-content: center;
     gap: 6px;
-    min-height: calc(
+    height: calc(
       var(--leaf-current-control-height) - var(--leaf-surface-padding-top) - var(
           --leaf-surface-padding-bottom
         ) -
diff --git a/packages/react/src/segmented/segmented.tsx b/packages/react/src/segmented/segmented.tsx
index fa0e63c..bc8d996 100644
--- a/packages/react/src/segmented/segmented.tsx
+++ b/packages/react/src/segmented/segmented.tsx
@@ -1,4 +1,5 @@
 import { forwardRef, type HTMLAttributes, type ReactNode, useId, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
@@ -23,7 +24,10 @@ export interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   form?: string;
 }
 export const Segmented = forwardRef<HTMLDivElement, SegmentedProps>(function Segmented(
-  {
+  rawProps: SegmentedProps,
+  ref,
+) {
+  const {
     options,
     value,
     defaultValue,
@@ -35,9 +39,7 @@ export const Segmented = forwardRef<HTMLDivElement, SegmentedProps>(function Seg
     form,
     className,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('Segmented', rawProps);
   const field = useFormField();
   const { direction } = useLeafConfig();
   const root = useRef<HTMLDivElement>(null);
diff --git a/packages/react/src/select/index.ts b/packages/react/src/select/index.ts
index dac8310..5ce1384 100644
--- a/packages/react/src/select/index.ts
+++ b/packages/react/src/select/index.ts
@@ -1,2 +1,2 @@
-export type { SelectOptionGroup } from './select';
-export * from './select';
+export type { SelectOption, SelectOptionGroup, SelectProps } from './select';
+export { Select } from './select';
diff --git a/packages/react/src/select/select.scss b/packages/react/src/select/select.scss
index 0a048e9..e06ef73 100644
--- a/packages/react/src/select/select.scss
+++ b/packages/react/src/select/select.scss
@@ -1,5 +1,6 @@
 @use '../styles/mixins' as mixins;
 @use '../shared/picker';
+@use '../shared/selection';
 .leaf-select {
   @include mixins.field('select');
   display: inline-flex;
@@ -21,14 +22,6 @@
   &[data-clearable] {
     padding-inline-end: 54px;
   }
-  &__content {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    width: 100%;
-    min-width: 0;
-    gap: 3px;
-  }
   &__input-wrap {
     position: relative;
     flex: 1;
@@ -99,19 +92,10 @@
     }
   }
   &__panel[data-hover-motion] {
-    // One opaque fill keeps the moving layer and persistent selection identical.
-    .leaf-floating__highlight,
-    .leaf-floating__option[aria-selected='true'] {
-      background: var(--leaf-color-primary-surface-9);
-    }
     .leaf-floating__highlight {
       border-color: transparent;
     }
   }
-  &__option-label {
-    min-width: 0;
-    overflow-wrap: anywhere;
-  }
   &__check {
     opacity: 0;
     transform: scale(0.6) rotate(-12deg);
@@ -139,44 +123,7 @@
   }
   &--multiple &__input {
     height: calc(var(--leaf-current-control-height) - 8px);
-    min-width: 28px;
-  }
-  &__tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    max-width: 100%;
-    padding: 1px 6px;
-    border-radius: var(--leaf-radius-sm);
-    background: var(--leaf-color-surface-muted);
-    box-shadow: inset 0 0 0 1px var(--leaf-color-divider);
-    font-size: var(--leaf-font-size-sm);
-    > span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    > button {
-      display: inline-flex;
-      align-items: center;
-      padding: 1px;
-      border: 0;
-      border-radius: 2px;
-      color: var(--leaf-color-text-muted);
-      background: transparent;
-      cursor: pointer;
-      transition:
-        color var(--leaf-motion-fast) var(--leaf-motion-easing),
-        background-color var(--leaf-motion-fast) var(--leaf-motion-easing),
-        transform var(--leaf-motion-fast) var(--leaf-motion-spring);
-      &:hover {
-        color: var(--leaf-color-text);
-        background: var(--leaf-color-border);
-      }
-      &:active {
-        transform: scale(0.85);
-      }
-    }
+    min-width: 0;
   }
 }
 @keyframes leaf-select-spin {
diff --git a/packages/react/src/select/select.test.tsx b/packages/react/src/select/select.test.tsx
index 8a29c61..a5f1b36 100644
--- a/packages/react/src/select/select.test.tsx
+++ b/packages/react/src/select/select.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
@@ -65,8 +65,15 @@ describe('Select custom popup', () => {
     await userEvent.click(screen.getByRole('combobox'));
     expect(screen.getByRole('listbox')).toHaveAttribute('aria-busy', 'true');
     expect(screen.getByText('处理中')).toBeInTheDocument();
+    expect(screen.getByText('处理中').parentElement?.querySelector('svg')).toHaveAttribute(
+      'aria-hidden',
+      'true',
+    );
     rerender(<Select options={[]} notFoundContent="没有团队" />);
     expect(screen.getByText('没有团队')).toBeInTheDocument();
+    expect(screen.getByText('没有团队').parentElement?.querySelector('svg')).not.toHaveClass(
+      'leaf-floating__loading-icon',
+    );
     rerender(
       <Select options={options} optionRender={(option) => <span>{option.label}团队</span>} />,
     );
@@ -89,6 +96,84 @@ describe('Select custom popup', () => {
     expect(change).toHaveBeenCalledOnce();
     expect(input).toHaveValue('产品');
   });
+  it('keeps the selected label in the same input on reopen and replaces it on search', async () => {
+    const user = userEvent.setup();
+    const onSearch = vi.fn();
+    const change = vi.fn();
+    render(
+      <Select
+        options={options}
+        showSearch
+        defaultValue="design"
+        onSearch={onSearch}
+        onChange={change}
+      />,
+    );
+    const input = screen.getByRole('combobox') as HTMLInputElement;
+    await user.click(input);
+    expect(input).toHaveValue('设计');
+    expect(screen.getAllByRole('option')).toHaveLength(3);
+    expect(onSearch).not.toHaveBeenCalled();
+    await user.keyboard('产品');
+    expect(input).toHaveValue('产品');
+    expect(screen.getAllByRole('option')).toHaveLength(1);
+    await user.keyboard('{Enter}');
+    expect(input).toHaveValue('产品');
+    expect(change).toHaveBeenLastCalledWith('product', options[2]);
+    // A new search may start directly from the focused, closed control.
+    await user.keyboard('设计');
+    expect(input).toHaveValue('设计');
+    expect(screen.getAllByRole('option')).toHaveLength(1);
+    await user.keyboard('{Escape}');
+    expect(screen.getByRole('combobox')).toBe(input);
+    expect(input).toHaveValue('产品');
+  });
+  it('keeps an explicitly cleared search empty until dismissal without changing the selection', async () => {
+    const user = userEvent.setup();
+    render(
+      <form aria-label="Search form">
+        <Select options={options} showSearch name="team" defaultValue="design" />
+      </form>,
+    );
+    const input = screen.getByRole('combobox');
+    await user.click(input);
+    await user.keyboard('{Backspace}');
+    expect(input).toHaveValue('');
+    expect(screen.getAllByRole('option')).toHaveLength(3);
+    expect(new FormData(screen.getByRole('form') as HTMLFormElement).get('team')).toBe('design');
+    await user.keyboard('{Escape}');
+    expect(input).toHaveValue('设计');
+  });
+  it('starts a fresh search on paste and preserves composition and consumer event handlers', async () => {
+    const user = userEvent.setup();
+    const onPaste = vi.fn();
+    const onCompositionStart = vi.fn();
+    const change = vi.fn();
+    render(
+      <Select
+        options={options}
+        showSearch
+        defaultValue="design"
+        onPaste={onPaste}
+        onCompositionStart={onCompositionStart}
+        onChange={change}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+    await user.click(input);
+    await user.paste('产品');
+    expect(input).toHaveValue('产品');
+    expect(onPaste).toHaveBeenCalledOnce();
+    await user.keyboard('{Escape}');
+    fireEvent.compositionStart(input);
+    expect(onCompositionStart).toHaveBeenCalledOnce();
+    fireEvent.change(input, { target: { value: '产品' } });
+    fireEvent.keyDown(input, { key: 'Enter', isComposing: true });
+    expect(change).not.toHaveBeenCalled();
+    fireEvent.compositionEnd(input);
+    await user.keyboard('{Enter}');
+    expect(change).toHaveBeenLastCalledWith('product', options[2]);
+  });
   it('submits repeated values for multiple selection, removes tags and resets defaults', async () => {
     render(
       <form aria-label="Teams">
diff --git a/packages/react/src/select/select.tsx b/packages/react/src/select/select.tsx
index 52a3c41..8c71717 100644
--- a/packages/react/src/select/select.tsx
+++ b/packages/react/src/select/select.tsx
@@ -1,5 +1,5 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { Check, ChevronDown, LoaderCircle, Plus, X } from 'lucide-react';
+import { Check, ChevronDown, LoaderCircle, Plus } from 'lucide-react';
 import {
   type CSSProperties,
   forwardRef,
@@ -11,7 +11,9 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
+import { estimateControlHeight } from '../density';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { ClearButton } from '../shared/clear-button';
@@ -23,10 +25,12 @@ import {
   useFloatingDismiss,
   usePopupState,
 } from '../shared/floating';
+import { FloatingFeedback } from '../shared/floating-feedback';
 import { FloatingHighlight, useFloatingHighlight } from '../shared/floating-highlight';
 import { useListMotion } from '../shared/motion';
+import { SelectionContent } from '../shared/selection-content';
 import type { ControlSize, ControlStatus } from '../shared/types';
-import { useText } from '../shared/use-text';
+import { useFormattedText } from '../shared/use-formatted-text';
 
 export interface SelectOption {
   value: string;
@@ -68,6 +72,7 @@ interface SelectBaseProps
   optionRender?: (option: SelectOption) => ReactNode;
   maxCount?: number;
   maxTagCount?: number | 'responsive';
+  tagWrap?: boolean;
   allowCreate?: boolean;
   onCreate?: (option: SelectOption) => void;
   virtual?: boolean;
@@ -95,637 +100,626 @@ const searchText = (option: SelectOption) =>
   (typeof option.label === 'string' || typeof option.label === 'number'
     ? String(option.label)
     : option.value);
-export const Select = forwardRef<HTMLInputElement, SelectProps>(
-  function Select(props, forwardedRef) {
-    const {
-      options: suppliedOptions,
-      size = 'md',
-      status: statusProp,
-      placeholder,
-      value,
-      defaultValue,
-      name,
-      required: requiredProp,
-      allowClear = false,
-      form,
-      className,
-      style,
-      disabled: disabledProp,
-      id: idProp,
-      onOpenChange,
-      open: controlledOpen,
-      defaultOpen,
-      inputReadOnly,
-      labelRender,
-      tagRender,
-      popupRender,
-      onPopupScroll,
-      onClick,
-      onKeyDown,
-      onBlur,
-      multiple = false,
-      showSearch: searchProp = false,
-      filterOption = true,
-      onSearch,
-      popupWidth = 'auto',
-      popupMaxWidth = 420,
-      popupClassName,
-      popupStyle,
-      popupPlacement,
-      getPopupContainer,
-      loading = false,
-      notFoundContent,
-      optionRender,
-      maxCount,
-      maxTagCount,
-      allowCreate = false,
-      onCreate,
-      virtual: virtualProp,
-      listHeight = 248,
-      optionHeight = 36,
-      onChange: _onChange,
-      ...inputProps
-    } = props;
-    const t = useText();
-    const showSearch = searchProp || allowCreate;
-    const [created, setCreated] = useState<SelectOption[]>([]);
-    const baseOptions = useMemo(
-      () => suppliedOptions.flatMap((entry) => ('options' in entry ? [...entry.options] : [entry])),
-      [suppliedOptions],
-    );
-    const options = useMemo(
-      () => [
-        ...baseOptions,
-        ...created.filter((entry) => !baseOptions.some((option) => option.value === entry.value)),
-      ],
-      [baseOptions, created],
-    );
-    const optionGroups = useMemo(
-      () =>
-        new Map(
-          suppliedOptions.flatMap((entry) =>
-            'options' in entry
-              ? entry.options.map((option) => [option.value, entry.label] as const)
-              : [],
-          ),
+/** Internal rendering primitive; public Select defaults are resolved at its boundary. */
+export const SelectControl = forwardRef<HTMLInputElement, SelectProps>(function SelectControl(
+  props: SelectProps,
+  forwardedRef,
+) {
+  const {
+    options: suppliedOptions,
+    size = 'md',
+    status: statusProp,
+    placeholder,
+    value,
+    defaultValue,
+    name,
+    required: requiredProp,
+    allowClear = false,
+    form,
+    className,
+    style,
+    disabled: disabledProp,
+    id: idProp,
+    onOpenChange,
+    open: controlledOpen,
+    defaultOpen,
+    inputReadOnly,
+    labelRender,
+    tagRender,
+    popupRender,
+    onPopupScroll,
+    onClick,
+    onKeyDown,
+    onBeforeInput,
+    onCompositionStart,
+    onPaste,
+    onBlur,
+    multiple = false,
+    showSearch: searchProp = false,
+    filterOption = true,
+    onSearch,
+    popupWidth = 'auto',
+    popupMaxWidth = 420,
+    popupClassName,
+    popupStyle,
+    popupPlacement,
+    getPopupContainer,
+    loading = false,
+    notFoundContent,
+    optionRender,
+    maxCount,
+    maxTagCount,
+    tagWrap = true,
+    allowCreate = false,
+    onCreate,
+    virtual: virtualProp,
+    listHeight = 248,
+    optionHeight: optionHeightProp,
+    onChange: _onChange,
+    ...inputProps
+  } = props;
+  const format = useFormattedText();
+  const showSearch = searchProp || allowCreate;
+  const [created, setCreated] = useState<SelectOption[]>([]);
+  const baseOptions = useMemo(
+    () => suppliedOptions.flatMap((entry) => ('options' in entry ? [...entry.options] : [entry])),
+    [suppliedOptions],
+  );
+  const options = useMemo(
+    () => [
+      ...baseOptions,
+      ...created.filter((entry) => !baseOptions.some((option) => option.value === entry.value)),
+    ],
+    [baseOptions, created],
+  );
+  const optionGroups = useMemo(
+    () =>
+      new Map(
+        suppliedOptions.flatMap((entry) =>
+          'options' in entry
+            ? entry.options.map((option) => [option.value, entry.label] as const)
+            : [],
         ),
-      [suppliedOptions],
-    );
-    const virtual = virtualProp ?? options.length > 100;
-    const { messages } = useLeafConfig();
-    const field = useFormField();
-    const disabled = disabledProp || field?.disabled;
-    const required = requiredProp ?? field?.required;
-    const status = statusProp ?? (field?.error ? 'error' : undefined);
-    const root = useRef<HTMLDivElement>(null);
-    const input = useRef<HTMLInputElement>(null);
-    const panel = useRef<HTMLDivElement>(null);
-    const merged = useMergedRef(input, forwardedRef);
-    const panelId = `${useId()}-listbox`;
-    const [selected, setSelected] = useFieldValue<string | readonly string[]>(
-      value,
-      defaultValue ?? (multiple ? empty : ''),
-      input,
-      form,
-    );
-    const values = typeof selected === 'string' ? (selected ? [selected] : []) : selected;
-    const [responsiveCount, setResponsiveCount] = useState(3);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: Remeasure tag widths when the selected values change.
-    useEffect(() => {
-      if (maxTagCount !== 'responsive' || !root.current) return;
-      const measure = () => {
-        const width = root.current?.clientWidth ?? 0;
-        let used = 90;
-        let count = 0;
-        for (const tag of root.current?.querySelectorAll<HTMLElement>('[data-leaf-tag-measure]') ??
-          []) {
-          used += tag.getBoundingClientRect().width + 4;
-          if (used > width) break;
-          count++;
-        }
-        setResponsiveCount(count);
-      };
-      const observer =
-        typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);
-      observer?.observe(root.current);
-      window.addEventListener('resize', measure);
-      measure();
-      return () => {
-        observer?.disconnect();
-        window.removeEventListener('resize', measure);
-      };
-    }, [maxTagCount, values]);
-    const visibleTagCount =
-      maxTagCount === 'responsive'
-        ? responsiveCount
-        : maxTagCount === undefined
-          ? values.length
-          : Math.max(0, Math.floor(maxTagCount));
-    useListMotion(
-      root,
-      JSON.stringify(values.slice(0, visibleTagCount)),
-      '.leaf-select__tag[data-motion-key]',
-    );
-    useListMotion(root, values[0], multiple ? '' : '.leaf-select__input-wrap[data-motion-key]');
-    const atLimit =
-      multiple && maxCount !== undefined && values.length >= Math.max(0, Math.floor(maxCount));
-    const unavailable = (option: SelectOption) =>
-      option.disabled || (atLimit && !values.includes(option.value));
-    const selectedCache = useRef(new Map<string, SelectOption>());
-    const nextCache = new Map<string, SelectOption>();
-    for (const key of values) {
-      const record =
-        options.find((option) => option.value === key) ?? selectedCache.current.get(key);
-      if (record) nextCache.set(key, record);
+      ),
+    [suppliedOptions],
+  );
+  const virtual = virtualProp ?? options.length > 100;
+  const { messages, theme, density } = useLeafConfig();
+  const optionHeight = optionHeightProp ?? Math.max(24, estimateControlHeight(theme, density) - 4);
+  const field = useFormField();
+  const disabled = disabledProp || field?.disabled;
+  const required = requiredProp ?? field?.required;
+  const status = statusProp ?? (field?.error ? 'error' : undefined);
+  const root = useRef<HTMLDivElement>(null);
+  const input = useRef<HTMLInputElement>(null);
+  const panel = useRef<HTMLDivElement>(null);
+  const merged = useMergedRef(input, forwardedRef);
+  const panelId = `${useId()}-listbox`;
+  const [selected, setSelected] = useFieldValue<string | readonly string[]>(
+    value,
+    defaultValue ?? (multiple ? empty : ''),
+    input,
+    form,
+  );
+  const values = typeof selected === 'string' ? (selected ? [selected] : []) : selected;
+  useListMotion(root, values[0], multiple ? '' : '.leaf-select__input-wrap[data-motion-key]');
+  const atLimit =
+    multiple && maxCount !== undefined && values.length >= Math.max(0, Math.floor(maxCount));
+  const unavailable = (option: SelectOption) =>
+    option.disabled || (atLimit && !values.includes(option.value));
+  const selectedCache = useRef(new Map<string, SelectOption>());
+  const nextCache = new Map<string, SelectOption>();
+  for (const key of values) {
+    const record = options.find((option) => option.value === key) ?? selectedCache.current.get(key);
+    if (record) nextCache.set(key, record);
+  }
+  selectedCache.current = nextCache;
+  const selectedOptions = values.map((key) => nextCache.get(key) ?? { value: key, label: key });
+  // null keeps the selected label in the native input until a search is edited.
+  const [query, setQuery] = useState<string | null>(null);
+  const searchQuery = query ?? '';
+  const [open, setOpen] = usePopupState(
+    disabled || inputProps.readOnly,
+    onOpenChange,
+    controlledOpen,
+    defaultOpen,
+  );
+  const [highlighted, setHighlighted] = useState(-1);
+  const matched =
+    !searchQuery || !showSearch || filterOption === false
+      ? options
+      : options.filter((option) =>
+          typeof filterOption === 'function'
+            ? filterOption(searchQuery, option)
+            : searchText(option).toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()),
+        );
+  const newValue = searchQuery.trim();
+  const createOption =
+    allowCreate &&
+    newValue &&
+    !options.some((option) => option.value === newValue || searchText(option) === newValue)
+      ? { value: newValue, label: newValue }
+      : null;
+  const filtered = createOption ? [...matched, createOption] : matched;
+  const rows = useMemo(() => {
+    const entries: { key: string; option?: SelectOption; group?: ReactNode; index: number }[] = [];
+    let previousGroup: ReactNode;
+    filtered.forEach((option, index) => {
+      const group = optionGroups.get(option.value);
+      if (group !== undefined && group !== previousGroup)
+        entries.push({ key: `group-${option.value}`, group, index: -1 });
+      entries.push({ key: option.value, option, index });
+      previousGroup = group;
+    });
+    return entries;
+  }, [filtered, optionGroups]);
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => panel.current,
+    estimateSize: () => Math.max(24, optionHeight),
+    overscan: 5,
+    getItemKey: (index) => rows[index]?.key ?? index,
+    enabled: open && virtual,
+    initialRect: { height: listHeight, width: 240 },
+  });
+  useEffect(() => {
+    if (open && virtual && highlighted >= 0) {
+      const index = rows.findIndex((row) => row.index === highlighted);
+      if (index >= 0) virtualizer.scrollToIndex(index, { align: 'auto' });
     }
-    selectedCache.current = nextCache;
-    const selectedOptions = values.map((key) => nextCache.get(key) ?? { value: key, label: key });
-    const [query, setQuery] = useState('');
-    const [open, setOpen] = usePopupState(
-      disabled || inputProps.readOnly,
-      onOpenChange,
-      controlledOpen,
-      defaultOpen,
+  }, [open, virtual, highlighted, rows, virtualizer]);
+  const updateQuery = (next: string) => {
+    setQuery(next);
+    onSearch?.(next);
+  };
+  const close = () => {
+    setOpen(false);
+    setQuery(null);
+    if (searchQuery) onSearch?.('');
+  };
+  useFloatingDismiss(open, close, input, panel, root);
+  useActiveOption(open, highlighted >= 0 ? `${panelId}-${highlighted}` : undefined, panel);
+  const highlight = useFloatingHighlight(
+    open,
+    panel,
+    highlighted >= 0 ? `${panelId}-${highlighted}` : undefined,
+    `${searchQuery}:${filtered[highlighted]?.value}:${rows.length}:${virtualizer.range?.startIndex}:${virtualizer.range?.endIndex}`,
+  );
+  useEffect(() => {
+    if (!open) setQuery(null);
+  }, [open]);
+  const change = (next: readonly string[]) => {
+    if (disabled || inputProps.readOnly) return;
+    setSelected(multiple ? next : (next[0] ?? ''));
+    if (props.multiple)
+      props.onChange?.(
+        [...next],
+        [
+          ...selectedOptions,
+          ...options.filter((option) => !values.includes(option.value)),
+          ...(createOption ? [createOption] : []),
+        ].filter((option) => next.includes(option.value)),
+      );
+    else
+      props.onChange?.(
+        next[0] ?? '',
+        [...options, ...(createOption ? [createOption] : [])].find(
+          (option) => option.value === next[0],
+        ),
+      );
+  };
+  const openMenu = () => {
+    if (disabled || inputProps.readOnly) return;
+    const active = filtered.findIndex(
+      (option) => values.includes(option.value) && !unavailable(option),
     );
-    const [highlighted, setHighlighted] = useState(-1);
-    const matched =
-      !query || !showSearch || filterOption === false
-        ? options
-        : options.filter((option) =>
-            typeof filterOption === 'function'
-              ? filterOption(query, option)
-              : searchText(option).toLocaleLowerCase().includes(query.toLocaleLowerCase()),
-          );
-    const newValue = query.trim();
-    const createOption =
-      allowCreate &&
-      newValue &&
-      !options.some((option) => option.value === newValue || searchText(option) === newValue)
-        ? { value: newValue, label: newValue }
-        : null;
-    const filtered = createOption ? [...matched, createOption] : matched;
-    const rows = useMemo(() => {
-      const entries: { key: string; option?: SelectOption; group?: ReactNode; index: number }[] =
-        [];
-      let previousGroup: ReactNode;
-      filtered.forEach((option, index) => {
-        const group = optionGroups.get(option.value);
-        if (group !== undefined && group !== previousGroup)
-          entries.push({ key: `group-${option.value}`, group, index: -1 });
-        entries.push({ key: option.value, option, index });
-        previousGroup = group;
-      });
-      return entries;
-    }, [filtered, optionGroups]);
-    const virtualizer = useVirtualizer({
-      count: rows.length,
-      getScrollElement: () => panel.current,
-      estimateSize: () => Math.max(24, optionHeight),
-      overscan: 5,
-      getItemKey: (index) => rows[index]?.key ?? index,
-      enabled: open && virtual,
-      initialRect: { height: listHeight, width: 240 },
-    });
-    useEffect(() => {
-      if (open && virtual && highlighted >= 0) {
-        const index = rows.findIndex((row) => row.index === highlighted);
-        if (index >= 0) virtualizer.scrollToIndex(index, { align: 'auto' });
-      }
-    }, [open, virtual, highlighted, rows, virtualizer]);
-    const updateQuery = (next: string) => {
-      setQuery(next);
-      onSearch?.(next);
-    };
-    const close = () => {
-      setOpen(false);
-      if (query) updateQuery('');
-    };
-    useFloatingDismiss(open, close, input, panel, root);
-    useActiveOption(open, highlighted >= 0 ? `${panelId}-${highlighted}` : undefined, panel);
-    const highlight = useFloatingHighlight(
-      open,
-      panel,
-      highlighted >= 0 ? `${panelId}-${highlighted}` : undefined,
-      `${query}:${filtered[highlighted]?.value}:${rows.length}:${virtualizer.range?.startIndex}:${virtualizer.range?.endIndex}`,
+    setHighlighted(active >= 0 ? active : filtered.findIndex((option) => !unavailable(option)));
+    setOpen(true);
+  };
+  const beginSearch = () => {
+    if (!showSearch || disabled || inputProps.readOnly || inputReadOnly) return;
+    if (!multiple && query === null) input.current?.select();
+    if (!open) openMenu();
+  };
+  const selectOption = (option: SelectOption) => {
+    if (unavailable(option) || inputProps.readOnly) return;
+    if (createOption && option.value === createOption.value) {
+      setCreated((previous) => [...previous, option]);
+      onCreate?.(option);
+    }
+    change(
+      multiple
+        ? values.includes(option.value)
+          ? values.filter((value) => value !== option.value)
+          : [...values, option.value]
+        : [option.value],
     );
-    useEffect(() => {
-      if (!open) setQuery('');
-    }, [open]);
-    const change = (next: readonly string[]) => {
-      if (disabled || inputProps.readOnly) return;
-      setSelected(multiple ? next : (next[0] ?? ''));
-      if (props.multiple)
-        props.onChange?.(
-          [...next],
-          [
-            ...selectedOptions,
-            ...options.filter((option) => !values.includes(option.value)),
-            ...(createOption ? [createOption] : []),
-          ].filter((option) => next.includes(option.value)),
-        );
-      else
-        props.onChange?.(
-          next[0] ?? '',
-          [...options, ...(createOption ? [createOption] : [])].find(
-            (option) => option.value === next[0],
-          ),
-        );
-    };
-    const openMenu = () => {
-      if (disabled || inputProps.readOnly) return;
-      const active = filtered.findIndex(
-        (option) => values.includes(option.value) && !unavailable(option),
-      );
-      setHighlighted(active >= 0 ? active : filtered.findIndex((option) => !unavailable(option)));
-      setOpen(true);
-    };
-    const selectOption = (option: SelectOption) => {
-      if (unavailable(option) || inputProps.readOnly) return;
-      if (createOption && option.value === createOption.value) {
-        setCreated((previous) => [...previous, option]);
-        onCreate?.(option);
+    if (multiple) updateQuery('');
+    else close();
+    input.current?.focus();
+  };
+  const move = (direction: number) => {
+    if (!filtered.length) return;
+    let next = highlighted < 0 ? (direction > 0 ? -1 : filtered.length) : highlighted;
+    for (let i = 0; i < filtered.length; i++) {
+      next = (next + direction + filtered.length) % filtered.length;
+      const candidate = filtered[next];
+      if (candidate && !unavailable(candidate)) {
+        setHighlighted(next);
+        break;
       }
-      change(
-        multiple
-          ? values.includes(option.value)
-            ? values.filter((value) => value !== option.value)
-            : [...values, option.value]
-          : [option.value],
-      );
-      if (multiple) updateQuery('');
-      else close();
-      input.current?.focus();
-    };
-    const move = (direction: number) => {
-      if (!filtered.length) return;
-      let next = highlighted < 0 ? (direction > 0 ? -1 : filtered.length) : highlighted;
-      for (let i = 0; i < filtered.length; i++) {
-        next = (next + direction + filtered.length) % filtered.length;
-        const candidate = filtered[next];
-        if (candidate && !unavailable(candidate)) {
-          setHighlighted(next);
-          break;
+    }
+  };
+  const renderOption = (option: SelectOption, index: number) => (
+    <button
+      key={option.value}
+      id={`${panelId}-${index}`}
+      aria-posinset={index + 1}
+      aria-setsize={filtered.length}
+      type="button"
+      role="option"
+      aria-selected={values.includes(option.value)}
+      aria-disabled={option.disabled || (atLimit && !values.includes(option.value)) || undefined}
+      data-highlighted={highlighted === index || undefined}
+      className="leaf-floating__option"
+      disabled={option.disabled || (atLimit && !values.includes(option.value))}
+      tabIndex={-1}
+      onMouseEnter={() => {
+        if (!unavailable(option)) setHighlighted(index);
+      }}
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={() => selectOption(option)}
+    >
+      <span className="leaf-floating__option-label">
+        {createOption?.value === option.value ? (
+          <>
+            <Plus size={14} aria-hidden="true" />{' '}
+            {format('select.create', {
+              label: typeof option.label === 'string' ? option.label : option.value,
+            })}
+          </>
+        ) : optionRender ? (
+          optionRender(option)
+        ) : (
+          option.label
+        )}
+      </span>
+      <Check size={15} aria-hidden="true" className="leaf-select__check" />
+    </button>
+  );
+  const displayLabel = selectedOptions[0]
+    ? (labelRender?.(selectedOptions[0]) ?? selectedOptions[0].label)
+    : undefined;
+  const textLabel =
+    typeof displayLabel === 'string' || typeof displayLabel === 'number'
+      ? String(displayLabel)
+      : '';
+  const inputValue = multiple ? searchQuery : showSearch && open ? (query ?? textLabel) : textLabel;
+  const clearable = allowClear && values.length > 0 && !disabled && !inputProps.readOnly;
+  const listboxProps = {
+    id: panelId,
+    role: 'listbox' as const,
+    'aria-busy': loading || undefined,
+    'aria-label': inputProps['aria-label'] ?? messages.select.placeholder,
+    'aria-multiselectable': multiple || undefined,
+  };
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Pointer events on padding forward to the keyboard-accessible combobox input.
+    // biome-ignore lint/a11y/useKeyWithClickEvents: The combobox input owns all keyboard interaction; this wrapper only extends its hit area.
+    <div
+      ref={root}
+      className={classes(
+        'leaf-select',
+        `leaf-select--${size}`,
+        multiple && 'leaf-select--multiple',
+        className,
+      )}
+      style={style}
+      data-status={status}
+      data-disabled={disabled ? '' : undefined}
+      data-open={open ? '' : undefined}
+      data-clearable={clearable ? '' : undefined}
+      data-searchable={showSearch ? '' : undefined}
+      onMouseDown={(event) => {
+        if (
+          !disabled &&
+          event.target instanceof Element &&
+          !event.target.closest('input, button, a')
+        )
+          event.preventDefault();
+      }}
+      onClick={(event) => {
+        if (
+          !disabled &&
+          event.target instanceof Element &&
+          root.current?.contains(event.target) &&
+          !event.target.closest('input, button, a')
+        ) {
+          input.current?.focus();
+          input.current?.click();
         }
-      }
-    };
-    const renderOption = (option: SelectOption, index: number) => (
+      }}
+    >
+      <SelectionContent
+        className="leaf-select__content"
+        tagClassName="leaf-select__tag"
+        tagWrap={tagWrap}
+        maxTagCount={maxTagCount}
+        searchable={showSearch && !inputProps.readOnly && !inputReadOnly}
+        query={searchQuery}
+        removeLabel={messages.common.remove}
+        items={
+          multiple
+            ? selectedOptions.map((option) => {
+                const remove = () => {
+                  if (disabled || inputProps.readOnly || option.disabled) return;
+                  change(values.filter((item) => item !== option.value));
+                  input.current?.focus();
+                };
+                return {
+                  key: option.value,
+                  label: option.label,
+                  text: searchText(option),
+                  remove:
+                    !disabled && !inputProps.readOnly && !option.disabled ? remove : undefined,
+                  render: tagRender?.(option, remove),
+                };
+              })
+            : undefined
+        }
+      >
+        <span className="leaf-select__input-wrap" data-motion-key={values[0] ?? ''}>
+          {!multiple &&
+            !textLabel &&
+            displayLabel != null &&
+            (!showSearch || !open || query === null) && (
+              <span className="leaf-select__value">{displayLabel}</span>
+            )}
+          <input
+            {...inputProps}
+            ref={merged}
+            id={idProp ?? field?.id}
+            form={form}
+            type="text"
+            className="leaf-select__input"
+            disabled={disabled}
+            readOnly={!showSearch || inputProps.readOnly || inputReadOnly}
+            value={inputValue}
+            placeholder={values.length ? '' : (placeholder ?? messages.select.placeholder)}
+            autoComplete="off"
+            role="combobox"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            aria-controls={panelId}
+            aria-autocomplete={showSearch ? 'list' : undefined}
+            aria-activedescendant={
+              open && filtered[highlighted] ? `${panelId}-${highlighted}` : undefined
+            }
+            aria-required={required || undefined}
+            aria-invalid={status === 'error' ? true : inputProps['aria-invalid']}
+            aria-describedby={
+              [inputProps['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') ||
+              undefined
+            }
+            onClick={(event) => {
+              onClick?.(event);
+              if (!event.defaultPrevented) {
+                if (open && !showSearch) close();
+                else if (!open) openMenu();
+              }
+            }}
+            onBlur={(event) => {
+              onBlur?.(event);
+              if (
+                !event.defaultPrevented &&
+                !root.current?.contains(event.relatedTarget) &&
+                !panel.current?.contains(event.relatedTarget)
+              )
+                close();
+            }}
+            onChange={(event) => {
+              if (!open) openMenu();
+              updateQuery(event.target.value);
+              setHighlighted(-1);
+            }}
+            onBeforeInput={(event) => {
+              onBeforeInput?.(event);
+              if (!event.defaultPrevented) beginSearch();
+            }}
+            onCompositionStart={(event) => {
+              onCompositionStart?.(event);
+              if (!event.defaultPrevented) beginSearch();
+            }}
+            onPaste={(event) => {
+              onPaste?.(event);
+              if (!event.defaultPrevented) beginSearch();
+            }}
+            onKeyDown={(event) => {
+              onKeyDown?.(event);
+              if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+              if (
+                !event.ctrlKey &&
+                !event.metaKey &&
+                !event.altKey &&
+                (event.key.length === 1 || event.key === 'Backspace' || event.key === 'Delete')
+              )
+                beginSearch();
+              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                if (!open) openMenu();
+                else move(event.key === 'ArrowDown' ? 1 : -1);
+              } else if ((event.key === 'Home' || event.key === 'End') && open && !showSearch) {
+                event.preventDefault();
+                const candidates = filtered
+                  .map((option, index) => ({ option, index }))
+                  .filter(({ option }) => !unavailable(option));
+                setHighlighted(
+                  (event.key === 'Home' ? candidates[0] : candidates.at(-1))?.index ?? -1,
+                );
+              } else if (event.key === 'Enter' || (event.key === ' ' && !showSearch)) {
+                event.preventDefault();
+                if (!open) openMenu();
+                else {
+                  const option =
+                    filtered[highlighted] ?? filtered.find((option) => !unavailable(option));
+                  if (option) selectOption(option);
+                }
+              } else if (event.key === 'Escape' && open) {
+                event.preventDefault();
+                event.stopPropagation();
+                close();
+              } else if (event.key === 'Tab' && open) close();
+              else if (
+                event.key === 'Backspace' &&
+                multiple &&
+                !searchQuery &&
+                !inputProps.readOnly
+              ) {
+                const last = [...values]
+                  .reverse()
+                  .find((value) => !options.find((option) => option.value === value)?.disabled);
+                if (last) {
+                  event.preventDefault();
+                  change(values.filter((value) => value !== last));
+                }
+              }
+            }}
+          />
+        </span>
+      </SelectionContent>
       <button
-        key={option.value}
-        id={`${panelId}-${index}`}
-        aria-posinset={index + 1}
-        aria-setsize={filtered.length}
         type="button"
-        role="option"
-        aria-selected={values.includes(option.value)}
-        aria-disabled={option.disabled || (atLimit && !values.includes(option.value)) || undefined}
-        data-highlighted={highlighted === index || undefined}
-        className="leaf-floating__option"
-        disabled={option.disabled || (atLimit && !values.includes(option.value))}
+        className="leaf-select__arrow"
         tabIndex={-1}
-        onMouseEnter={() => {
-          if (!unavailable(option)) setHighlighted(index);
-        }}
+        disabled={disabled}
+        aria-label={messages.select.placeholder}
         onMouseDown={(event) => event.preventDefault()}
-        onClick={() => selectOption(option)}
+        onClick={() => {
+          if (open) close();
+          else openMenu();
+          input.current?.focus();
+        }}
       >
-        <span className="leaf-select__option-label">
-          {createOption?.value === option.value ? (
-            <>
-              <Plus size={14} aria-hidden="true" /> {t('创建', 'Create')} “{option.label}”
-            </>
-          ) : optionRender ? (
-            optionRender(option)
-          ) : (
-            option.label
-          )}
-        </span>
-        <Check size={15} aria-hidden="true" className="leaf-select__check" />
-      </button>
-    );
-    const displayLabel = selectedOptions[0]
-      ? (labelRender?.(selectedOptions[0]) ?? selectedOptions[0].label)
-      : undefined;
-    const textLabel =
-      typeof displayLabel === 'string' || typeof displayLabel === 'number'
-        ? String(displayLabel)
-        : '';
-    const inputValue = multiple || (showSearch && open) ? query : textLabel;
-    const clearable = allowClear && values.length > 0 && !disabled && !inputProps.readOnly;
-    return (
-      // biome-ignore lint/a11y/noStaticElementInteractions: Pointer events on padding forward to the keyboard-accessible combobox input.
-      // biome-ignore lint/a11y/useKeyWithClickEvents: The combobox input owns all keyboard interaction; this wrapper only extends its hit area.
-      <div
-        ref={root}
-        className={classes(
-          'leaf-select',
-          `leaf-select--${size}`,
-          multiple && 'leaf-select--multiple',
-          className,
+        {loading ? (
+          <LoaderCircle className="leaf-select__spinner" size={16} aria-hidden="true" />
+        ) : (
+          <ChevronDown size={16} aria-hidden="true" />
         )}
-        style={style}
-        data-status={status}
-        data-disabled={disabled ? '' : undefined}
-        data-open={open ? '' : undefined}
-        data-clearable={clearable ? '' : undefined}
-        data-searchable={showSearch ? '' : undefined}
-        onMouseDown={(event) => {
-          if (
-            !disabled &&
-            event.target instanceof Element &&
-            !event.target.closest('input, button, a')
-          )
-            event.preventDefault();
-        }}
-        onClick={(event) => {
-          if (
-            !disabled &&
-            event.target instanceof Element &&
-            root.current?.contains(event.target) &&
-            !event.target.closest('input, button, a')
-          ) {
+      </button>
+      {clearable && (
+        <ClearButton
+          label={messages.select.clear}
+          beforeArrow
+          onClear={() => {
+            change(empty);
+            close();
             input.current?.focus();
-            input.current?.click();
-          }
-        }}
+          }}
+        />
+      )}
+      <FormValue
+        name={multiple ? undefined : name}
+        form={form}
+        value={multiple ? values.join(',') : (values[0] ?? '')}
+        disabled={disabled}
+        required={required}
+        triggerRef={input}
+      />
+      {multiple &&
+        values.map((value) => (
+          <input
+            key={value}
+            type="hidden"
+            name={name}
+            form={form}
+            value={value}
+            disabled={disabled}
+          />
+        ))}
+      <FloatingPanel
+        open={open}
+        placement={popupPlacement}
+        container={getPopupContainer}
+        triggerRef={root}
+        panelRef={panel}
+        matchWidth={popupWidth === 'trigger'}
+        width={
+          popupWidth === 'trigger' ? undefined : popupWidth === 'auto' ? 'max-content' : popupWidth
+        }
+        minWidth={popupWidth === 'auto' ? 'trigger' : undefined}
+        maxWidth={popupMaxWidth}
+        {...(filtered.length ? listboxProps : {})}
+        className={classes('leaf-floating', 'leaf-select__panel', popupClassName)}
+        data-hover-motion=""
+        style={{ maxHeight: listHeight, ...popupStyle }}
+        onScroll={onPopupScroll}
       >
-        <div className="leaf-select__content">
-          {multiple &&
-            values.slice(0, visibleTagCount).map((value) => {
-              const option = nextCache.get(value) ?? { value, label: value };
-              const remove = () => change(values.filter((item) => item !== value));
-              if (tagRender)
-                return (
-                  <span key={value} className="leaf-select__tag" data-motion-key={value}>
-                    {tagRender(option, remove)}
-                  </span>
-                );
-              return (
-                <span key={value} className="leaf-select__tag" data-motion-key={value}>
-                  <span>{option?.label ?? value}</span>
-                  {!disabled && !inputProps.readOnly && !option?.disabled && (
-                    <button
-                      type="button"
-                      tabIndex={-1}
-                      aria-label={`${messages.remove} ${option ? searchText(option) : value}`}
-                      onMouseDown={(event) => event.preventDefault()}
-                      onClick={() => {
-                        change(values.filter((item) => item !== value));
-                        input.current?.focus();
+        {/* Feedback is announced beside an empty listbox, never as a selectable option. */}
+        {!filtered.length && <div {...listboxProps} />}
+        <FloatingHighlight
+          style={highlight}
+          selected={values.includes(filtered[highlighted]?.value ?? '')}
+        />
+        {(popupRender ?? ((content: ReactNode) => content))(
+          loading && !filtered.length ? (
+            <FloatingFeedback loading>{messages.common.loading}</FloatingFeedback>
+          ) : filtered.length ? (
+            virtual ? (
+              <div
+                style={{
+                  height: virtualizer.getTotalSize(),
+                  position: 'relative',
+                  minWidth: '100%',
+                }}
+              >
+                {virtualizer.getVirtualItems().map((item) => {
+                  const row = rows[item.index];
+                  if (!row) return null;
+                  return (
+                    <div
+                      key={row.key}
+                      ref={virtualizer.measureElement}
+                      data-index={item.index}
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        transform: `translateY(${item.start}px)`,
                       }}
                     >
-                      <X size={12} aria-hidden="true" />
-                    </button>
-                  )}
-                </span>
-              );
-            })}
-          {multiple && values.length > visibleTagCount && (
-            <span className="leaf-select__tag">+{values.length - visibleTagCount}</span>
-          )}
-          {multiple && maxTagCount === 'responsive' && (
-            <span
-              aria-hidden="true"
-              style={{
-                position: 'absolute',
-                visibility: 'hidden',
-                pointerEvents: 'none',
-                display: 'flex',
-              }}
-            >
-              {selectedOptions.map((option) => (
-                <span key={option.value} data-leaf-tag-measure className="leaf-select__tag">
-                  {option.label}
-                  <X size={12} />
-                </span>
-              ))}
-            </span>
-          )}
-          <div className="leaf-select__input-wrap" data-motion-key={values[0] ?? ''}>
-            {!multiple &&
-              !query &&
-              displayLabel != null &&
-              (!textLabel || (showSearch && open)) && (
-                <span className="leaf-select__value">{displayLabel}</span>
-              )}
-            <input
-              {...inputProps}
-              ref={merged}
-              id={idProp ?? field?.id}
-              form={form}
-              type="text"
-              className="leaf-select__input"
-              disabled={disabled}
-              readOnly={!showSearch || inputProps.readOnly || inputReadOnly}
-              value={inputValue}
-              placeholder={values.length ? '' : (placeholder ?? messages.select)}
-              autoComplete="off"
-              role="combobox"
-              aria-expanded={open}
-              aria-haspopup="listbox"
-              aria-controls={panelId}
-              aria-autocomplete={showSearch ? 'list' : undefined}
-              aria-activedescendant={
-                open && filtered[highlighted] ? `${panelId}-${highlighted}` : undefined
-              }
-              aria-required={required || undefined}
-              aria-invalid={status === 'error' ? true : inputProps['aria-invalid']}
-              aria-describedby={
-                [inputProps['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') ||
-                undefined
-              }
-              onClick={(event) => {
-                onClick?.(event);
-                if (!event.defaultPrevented) {
-                  if (open && !showSearch) close();
-                  else if (!open) openMenu();
-                }
-              }}
-              onBlur={(event) => {
-                onBlur?.(event);
-                if (
-                  !event.defaultPrevented &&
-                  !root.current?.contains(event.relatedTarget) &&
-                  !panel.current?.contains(event.relatedTarget)
-                )
-                  close();
-              }}
-              onChange={(event) => {
-                if (!open) openMenu();
-                updateQuery(event.target.value);
-                setHighlighted(-1);
-              }}
-              onKeyDown={(event) => {
-                onKeyDown?.(event);
-                if (event.defaultPrevented || event.nativeEvent.isComposing) return;
-                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                  event.preventDefault();
-                  if (!open) openMenu();
-                  else move(event.key === 'ArrowDown' ? 1 : -1);
-                } else if ((event.key === 'Home' || event.key === 'End') && open && !showSearch) {
-                  event.preventDefault();
-                  const candidates = filtered
-                    .map((option, index) => ({ option, index }))
-                    .filter(({ option }) => !unavailable(option));
-                  setHighlighted(
-                    (event.key === 'Home' ? candidates[0] : candidates.at(-1))?.index ?? -1,
+                      {row.option ? (
+                        renderOption(row.option, row.index)
+                      ) : (
+                        <div className="leaf-select__group">{row.group}</div>
+                      )}
+                    </div>
                   );
-                } else if (event.key === 'Enter' || (event.key === ' ' && !showSearch)) {
-                  event.preventDefault();
-                  if (!open) openMenu();
-                  else {
-                    const option =
-                      filtered[highlighted] ?? filtered.find((option) => !unavailable(option));
-                    if (option) selectOption(option);
-                  }
-                } else if (event.key === 'Escape' && open) {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  close();
-                } else if (event.key === 'Tab' && open) close();
-                else if (event.key === 'Backspace' && multiple && !query && !inputProps.readOnly) {
-                  const last = [...values]
-                    .reverse()
-                    .find((value) => !options.find((option) => option.value === value)?.disabled);
-                  if (last) {
-                    event.preventDefault();
-                    change(values.filter((value) => value !== last));
-                  }
-                }
-              }}
-            />
-          </div>
-        </div>
-        <button
-          type="button"
-          className="leaf-select__arrow"
-          tabIndex={-1}
-          disabled={disabled}
-          aria-label={messages.select}
-          onMouseDown={(event) => event.preventDefault()}
-          onClick={() => {
-            if (open) close();
-            else openMenu();
-            input.current?.focus();
-          }}
-        >
-          {loading ? (
-            <LoaderCircle className="leaf-select__spinner" size={16} aria-hidden="true" />
+                })}
+              </div>
+            ) : (
+              rows.map((row) =>
+                row.option ? (
+                  renderOption(row.option, row.index)
+                ) : (
+                  <div key={row.key} className="leaf-select__group">
+                    {row.group}
+                  </div>
+                ),
+              )
+            )
           ) : (
-            <ChevronDown size={16} aria-hidden="true" />
-          )}
-        </button>
-        {clearable && (
-          <ClearButton
-            label={messages.clearSelection}
-            beforeArrow
-            onClear={() => {
-              change(empty);
-              close();
-              input.current?.focus();
-            }}
-          />
+            <FloatingFeedback>{notFoundContent ?? messages.select.empty}</FloatingFeedback>
+          ),
         )}
-        <FormValue
-          name={multiple ? undefined : name}
-          form={form}
-          value={multiple ? values.join(',') : (values[0] ?? '')}
-          disabled={disabled}
-          required={required}
-          triggerRef={input}
-        />
-        {multiple &&
-          values.map((value) => (
-            <input
-              key={value}
-              type="hidden"
-              name={name}
-              form={form}
-              value={value}
-              disabled={disabled}
-            />
-          ))}
-        <FloatingPanel
-          open={open}
-          placement={popupPlacement}
-          container={getPopupContainer}
-          triggerRef={root}
-          panelRef={panel}
-          matchWidth={popupWidth === 'trigger'}
-          width={
-            popupWidth === 'trigger'
-              ? undefined
-              : popupWidth === 'auto'
-                ? 'max-content'
-                : popupWidth
-          }
-          minWidth={popupWidth === 'auto' ? 'trigger' : undefined}
-          maxWidth={popupMaxWidth}
-          id={panelId}
-          className={classes('leaf-floating', 'leaf-select__panel', popupClassName)}
-          data-hover-motion=""
-          style={{ maxHeight: listHeight, ...popupStyle }}
-          onScroll={onPopupScroll}
-          role="listbox"
-          aria-busy={loading || undefined}
-          aria-label={inputProps['aria-label'] ?? messages.select}
-          aria-multiselectable={multiple || undefined}
-        >
-          <FloatingHighlight style={highlight} />
-          {(popupRender ?? ((content: ReactNode) => content))(
-            loading && !filtered.length ? (
-              <div className="leaf-floating__empty">{messages.loading}</div>
-            ) : filtered.length ? (
-              virtual ? (
-                <div
-                  style={{
-                    height: virtualizer.getTotalSize(),
-                    position: 'relative',
-                    minWidth: '100%',
-                  }}
-                >
-                  {virtualizer.getVirtualItems().map((item) => {
-                    const row = rows[item.index];
-                    if (!row) return null;
-                    return (
-                      <div
-                        key={row.key}
-                        ref={virtualizer.measureElement}
-                        data-index={item.index}
-                        style={{
-                          position: 'absolute',
-                          top: 0,
-                          left: 0,
-                          width: '100%',
-                          transform: `translateY(${item.start}px)`,
-                        }}
-                      >
-                        {row.option ? (
-                          renderOption(row.option, row.index)
-                        ) : (
-                          <div className="leaf-select__group">{row.group}</div>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              ) : (
-                rows.map((row) =>
-                  row.option ? (
-                    renderOption(row.option, row.index)
-                  ) : (
-                    <div key={row.key} className="leaf-select__group">
-                      {row.group}
-                    </div>
-                  ),
-                )
-              )
-            ) : (
-              <div className="leaf-floating__empty">{notFoundContent ?? messages.empty}</div>
-            ),
-          )}
-        </FloatingPanel>
-      </div>
-    );
-  },
-);
+      </FloatingPanel>
+    </div>
+  );
+});
+SelectControl.displayName = 'SelectControl';
+
+export const Select = forwardRef<HTMLInputElement, SelectProps>(function Select(rawProps, ref) {
+  const props = useComponentProps('Select', rawProps);
+  return <SelectControl {...props} ref={ref} />;
+});
 Select.displayName = 'Select';
diff --git a/packages/react/src/shared/_floating.scss b/packages/react/src/shared/_floating.scss
index c305ccc..c4fee9c 100644
--- a/packages/react/src/shared/_floating.scss
+++ b/packages/react/src/shared/_floating.scss
@@ -104,6 +104,10 @@ $include-field-styles: true !default;
   align-items: center;
   gap: 8px;
   padding: var(--leaf-density-option-padding) var(--leaf-density-field-padding);
+  padding-block: min(
+    var(--leaf-density-option-padding),
+    max(0px, calc((var(--leaf-density-option-height) - 1.4em) / 2))
+  );
   border: 0;
   border-radius: var(--leaf-floating-option-radius, var(--leaf-radius-sm));
   color: inherit;
@@ -122,21 +126,30 @@ $include-field-styles: true !default;
   }
 
   @if $include-field-styles {
-    &:hover:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']),
-    &[data-highlighted='true']:not([aria-disabled='true']):not([aria-selected='true']) {
-      background: var(--leaf-color-surface-muted);
+    &:hover:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']):not(
+        [aria-checked='true']
+      ),
+    &:focus-visible:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']):not(
+        [aria-checked='true']
+      ),
+    &[data-highlighted='true']:not([aria-disabled='true']):not([aria-selected='true']):not(
+        [aria-checked='true']
+      ) {
+      background: var(--leaf-color-option-hover);
     }
   }
 
-  &:active:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']) {
-    background: var(--leaf-color-text-alpha-9);
+  &:active:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']):not(
+      [aria-checked='true']
+    ) {
+    background: var(--leaf-color-option-hover);
   }
 
   @if $include-field-styles {
     &[aria-selected='true'] {
       color: var(--leaf-color-primary);
       font-weight: var(--leaf-font-weight);
-      background: var(--leaf-color-primary-alpha-9);
+      background: var(--leaf-color-primary-surface-9);
     }
   }
 
@@ -153,6 +166,17 @@ $include-field-styles: true !default;
   }
 }
 
+.leaf-floating__option-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.leaf-floating__options {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .leaf-floating__option {
     transition: none;
@@ -169,18 +193,20 @@ $include-field-styles: true !default;
   translate: var(--leaf-option-highlight-x, 0px) var(--leaf-option-highlight-y, 0px);
   border: 1px solid var(--leaf-color-border-alpha-55);
   border-radius: var(--leaf-floating-option-radius);
-  background: var(--leaf-color-text-alpha-9);
+  background: var(--leaf-color-option-hover);
   pointer-events: none;
   transition:
     translate var(--leaf-motion-duration) var(--leaf-motion-spring),
     height var(--leaf-motion-fast) var(--leaf-motion-easing),
-    width var(--leaf-motion-fast) var(--leaf-motion-easing);
+    width var(--leaf-motion-fast) var(--leaf-motion-easing),
+    background-color var(--leaf-motion-fast) var(--leaf-motion-easing),
+    border-color var(--leaf-motion-fast) var(--leaf-motion-easing);
   &[data-ready='false'],
   &[data-hidden] {
     visibility: hidden;
   }
   &[data-selected] {
-    background: var(--leaf-color-primary-alpha-9);
+    background: var(--leaf-color-primary-surface-9);
     border-color: var(--leaf-color-primary-alpha-15);
   }
 }
@@ -188,11 +214,23 @@ $include-field-styles: true !default;
   position: relative;
   z-index: 1;
   &:hover:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']),
-  &[data-highlighted]:not([aria-disabled='true']):not([aria-selected='true']) {
+  &:focus-visible:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']),
+  &[data-highlighted]:not([aria-disabled='true']):not([aria-selected='true']),
+  &:active:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']) {
     background: transparent;
   }
 }
-.leaf-autocomplete__panel[data-hover-motion] .leaf-floating__option[aria-selected='true'] {
+// Suggestion listboxes announce the active candidate with aria-selected; it is not a saved value.
+.leaf-floating[data-selection='candidate'] .leaf-floating__option[aria-selected='true'] {
+  color: inherit;
+  font-weight: inherit;
+  background: transparent;
+  &:not(:disabled):not([aria-disabled='true']) {
+    background: var(--leaf-color-option-hover);
+  }
+}
+.leaf-floating[data-selection='candidate'][data-hover-motion]
+  .leaf-floating__option[aria-selected='true']:not(:disabled):not([aria-disabled='true']) {
   background: transparent;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -207,5 +245,43 @@ $include-field-styles: true !default;
     color: var(--leaf-color-text-muted);
     font-size: var(--leaf-font-size-sm);
     text-align: center;
+    &--feedback {
+      box-sizing: border-box;
+      display: flex;
+      min-height: 112px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 24px 16px;
+      > svg {
+        flex: none;
+      }
+      > div {
+        min-width: 0;
+        max-width: 100%;
+        overflow-wrap: anywhere;
+      }
+    }
+  }
+  .leaf-floating__loading-icon {
+    color: var(--leaf-color-primary);
+    animation: var(
+      --leaf-motion-animation,
+      leaf-floating-spin calc(var(--leaf-motion-duration) * 4) linear infinite
+    );
+    animation-play-state: var(--leaf-motion-play-state, running);
+  }
+
+  @keyframes leaf-floating-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .leaf-floating__loading-icon {
+      animation: none;
+    }
   }
 }
diff --git a/packages/react/src/shared/_selection.scss b/packages/react/src/shared/_selection.scss
new file mode 100644
index 0000000..22b4ee8
--- /dev/null
+++ b/packages/react/src/shared/_selection.scss
@@ -0,0 +1,115 @@
+.leaf-selection {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 6px;
+  width: 100%;
+  min-width: 0;
+  &__input {
+    display: flex;
+    flex: 1;
+    min-width: 24px;
+  }
+  &__tag {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    max-width: 100%;
+    height: calc(var(--leaf-current-control-height) - 8px);
+    padding: 0 7px;
+    border-radius: var(--leaf-radius-sm);
+    background: var(--leaf-color-surface-muted);
+    box-shadow: inset 0 0 0 1px var(--leaf-color-divider);
+    font-size: var(--leaf-font-size-sm);
+    line-height: 1.5;
+    white-space: nowrap;
+    &[hidden] {
+      display: none;
+    }
+    > span:not(.leaf-selection__sr) {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    > button {
+      display: grid;
+      place-items: center;
+      flex: none;
+      width: 18px;
+      height: 18px;
+      padding: 0;
+      border: 0;
+      border-radius: 3px;
+      color: var(--leaf-color-text-muted);
+      background: transparent;
+      cursor: pointer;
+      transition:
+        color var(--leaf-motion-fast),
+        background-color var(--leaf-motion-fast);
+      &:hover {
+        color: var(--leaf-color-text);
+        background: var(--leaf-color-border);
+      }
+    }
+    &[data-custom] {
+      padding: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    &[data-custom] > * {
+      max-width: 100%;
+    }
+  }
+  &[data-single-line] {
+    flex-wrap: nowrap;
+    overflow: clip;
+    > .leaf-selection__tag {
+      flex: none;
+    }
+    > .leaf-selection__tag:first-child {
+      max-width: var(--leaf-selection-first-width, 100%);
+    }
+    .leaf-selection__input {
+      flex: 1 0 var(--leaf-selection-input-width, 24px);
+      min-width: 0;
+      > * {
+        min-width: 0;
+      }
+    }
+    &[data-measuring] > .leaf-selection__tag {
+      display: inline-flex;
+      max-width: none;
+      width: max-content;
+    }
+  }
+  &__measure {
+    position: fixed;
+    visibility: hidden;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    white-space: pre;
+    > * {
+      width: max-content;
+      max-width: none;
+    }
+  }
+  &__sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .leaf-selection__tag > button {
+    transition: none;
+  }
+}
diff --git a/packages/react/src/shared/calendar.tsx b/packages/react/src/shared/calendar.tsx
index a9bfeab..499a4fc 100644
--- a/packages/react/src/shared/calendar.tsx
+++ b/packages/react/src/shared/calendar.tsx
@@ -295,10 +295,10 @@ export function CalendarPanel({
           className="leaf-date-picker__nav"
           aria-label={
             view === 'date'
-              ? messages.previousMonth
+              ? messages.calendar.previousMonth
               : view === 'month'
-                ? messages.previousYear
-                : messages.previousYears
+                ? messages.calendar.previousYear
+                : messages.calendar.previousYears
           }
           onClick={() => navigate(-1)}
         >
@@ -309,7 +309,7 @@ export function CalendarPanel({
             <button
               type="button"
               className="leaf-calendar__heading"
-              aria-label={messages.month}
+              aria-label={messages.calendar.month}
               onClick={() => setView('month')}
             >
               {new Intl.DateTimeFormat(locale, { month: 'short' }).format(visible)}
@@ -318,7 +318,7 @@ export function CalendarPanel({
           <button
             type="button"
             className="leaf-calendar__heading"
-            aria-label={view === 'year' ? undefined : messages.year}
+            aria-label={view === 'year' ? undefined : messages.calendar.year}
             disabled={view === 'year'}
             onClick={() => setView('year')}
           >
@@ -330,10 +330,10 @@ export function CalendarPanel({
           className="leaf-date-picker__nav"
           aria-label={
             view === 'date'
-              ? messages.nextMonth
+              ? messages.calendar.nextMonth
               : view === 'month'
-                ? messages.nextYear
-                : messages.nextYears
+                ? messages.calendar.nextYear
+                : messages.calendar.nextYears
           }
           onClick={() => navigate(1)}
         >
@@ -349,7 +349,7 @@ export function CalendarPanel({
               setActive(today);
             }}
           >
-            {messages.today}
+            {messages.calendar.today}
           </button>
         )}
         {headerExtra != null && <span className="leaf-calendar__extra">{headerExtra}</span>}
@@ -358,7 +358,8 @@ export function CalendarPanel({
         <div className="leaf-calendar__weekdays">
           {Array.from(
             { length: 7 },
-            (_, index) => messages.weekdays[(index + weekStartsOn + 6) % 7] ?? String(index),
+            (_, index) =>
+              messages.calendar.weekdays[(index + weekStartsOn + 6) % 7] ?? String(index),
           ).map((day) => (
             <span key={day}>{day}</span>
           ))}
diff --git a/packages/react/src/shared/date-input.tsx b/packages/react/src/shared/date-input.tsx
index 2d4c71a..d664981 100644
--- a/packages/react/src/shared/date-input.tsx
+++ b/packages/react/src/shared/date-input.tsx
@@ -142,8 +142,8 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(function D
     setInvalid(false);
   }, [displayValue]);
   useEffect(() => {
-    input.current?.setCustomValidity(invalid ? messages.invalid : '');
-  }, [invalid, messages.invalid]);
+    input.current?.setCustomValidity(invalid ? messages.form.invalid : '');
+  }, [invalid, messages.form.invalid]);
   useEffect(() => {
     if (open && focusPanel) {
       (
@@ -199,7 +199,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(function D
         disabled={disabled}
         readOnly={props.readOnly || inputReadOnly}
         value={dirty ? text : displayValue}
-        placeholder={placeholder ?? messages.date}
+        placeholder={placeholder ?? messages.datePicker.placeholder}
         role="combobox"
         aria-haspopup="dialog"
         aria-expanded={open}
@@ -258,7 +258,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(function D
       />
       {allowClear && (formValue || text) && !disabled && !props.readOnly && (
         <ClearButton
-          label={clearLabel ?? messages.clearDate}
+          label={clearLabel ?? messages.datePicker.clear}
           onClear={() => {
             onClear();
             setText('');
@@ -273,7 +273,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(function D
         className="leaf-date-picker__icon"
         tabIndex={-1}
         disabled={disabled}
-        aria-label={panelLabel ?? messages.chooseDate}
+        aria-label={panelLabel ?? messages.datePicker.label}
         onMouseDown={(event) => event.preventDefault()}
         onClick={() => {
           if (open) close();
@@ -304,7 +304,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(function D
         render={popupRender}
         container={getPopupContainer}
         role="dialog"
-        aria-label={panelLabel ?? messages.chooseDate}
+        aria-label={panelLabel ?? messages.datePicker.label}
       >
         {renderPanel(finish)}
       </FloatingPanel>
diff --git a/packages/react/src/shared/floating-feedback.tsx b/packages/react/src/shared/floating-feedback.tsx
new file mode 100644
index 0000000..85d2fc5
--- /dev/null
+++ b/packages/react/src/shared/floating-feedback.tsx
@@ -0,0 +1,24 @@
+import { Inbox, LoaderCircle } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+/** Shared loading and empty presentation for suggestion and selection panels. */
+export function FloatingFeedback({
+  loading = false,
+  children,
+}: {
+  loading?: boolean;
+  children: ReactNode;
+}) {
+  const Icon = loading ? LoaderCircle : Inbox;
+  return (
+    <div className="leaf-floating__empty leaf-floating__empty--feedback" role="status">
+      <Icon
+        size={24}
+        strokeWidth={1.5}
+        aria-hidden="true"
+        className={loading ? 'leaf-floating__loading-icon' : undefined}
+      />
+      <div>{children}</div>
+    </div>
+  );
+}
diff --git a/packages/react/src/shared/floating.tsx b/packages/react/src/shared/floating.tsx
index befe7ee..5f07f78 100644
--- a/packages/react/src/shared/floating.tsx
+++ b/packages/react/src/shared/floating.tsx
@@ -259,6 +259,7 @@ export function FloatingPanel({
         data-side={resolvedPlacement.split('-')[0]}
         data-align={resolvedPlacement.split('-')[1] ?? 'center'}
         dir={props.dir ?? theme.direction ?? config.direction}
+        lang={props.lang ?? config.locale}
         data-state={open ? 'open' : 'closing'}
         data-positioned={isPositioned || !open}
         aria-hidden={!open || undefined}
diff --git a/packages/react/src/shared/motion.ts b/packages/react/src/shared/motion.ts
index eb7b982..7e5b5d5 100644
--- a/packages/react/src/shared/motion.ts
+++ b/packages/react/src/shared/motion.ts
@@ -1,5 +1,12 @@
-import { type RefObject, useEffect, useLayoutEffect, useRef, useSyncExternalStore } from 'react';
-import { useLeafConfig } from '../config-provider/context';
+import {
+  type RefObject,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useSyncExternalStore,
+} from 'react';
+import { ConfigContext } from '../config-provider/config-context';
 
 const reducedQuery = '(prefers-reduced-motion: reduce)';
 const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
@@ -16,9 +23,9 @@ function subscribeMotion(listener: () => void) {
 
 /** Live preference with a deterministic server snapshot; CSS handles the first frame. */
 export function useMotionEnabled() {
-  const { theme } = useLeafConfig();
+  const config = useContext(ConfigContext);
   const reduced = useSyncExternalStore(subscribeMotion, reducedMotion, () => false);
-  return theme.motion !== false && !reduced;
+  return config?.theme.motion !== false && !reduced;
 }
 
 /** Read the actual region, including variables transferred to a portal. */
diff --git a/packages/react/src/shared/parse-date.ts b/packages/react/src/shared/parse-date.ts
index 6e12ed3..26ac226 100644
--- a/packages/react/src/shared/parse-date.ts
+++ b/packages/react/src/shared/parse-date.ts
@@ -2,7 +2,11 @@ import { type CalendarMode, periodKey, startOfPeriod } from './calendar';
 import { parseTime } from './time';
 
 /** Strict local parsing: never silently roll an invalid day into the next month. */
-export function parseDateText(text: string, mode: CalendarMode = 'date') {
+export function parseDateText(
+  text: string,
+  mode: CalendarMode = 'date',
+  periods?: readonly [string, string],
+) {
   if (mode === 'quarter') {
     const match = /^(\d{4})-Q([1-4])$/i.exec(text);
     if (!match) return null;
@@ -35,7 +39,7 @@ export function parseDateText(text: string, mode: CalendarMode = 'date') {
   if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
     return null;
   if (mode === 'datetime') {
-    const time = parseTime(match[4]);
+    const time = parseTime(match[4], periods);
     if (!time) return null;
     date.setHours(time.hour, time.minute, time.second, 0);
     if (date.getHours() !== time.hour || date.getMinutes() !== time.minute) return null;
diff --git a/packages/react/src/shared/scoped-portal.tsx b/packages/react/src/shared/scoped-portal.tsx
index 6d2aef8..ebf221d 100644
--- a/packages/react/src/shared/scoped-portal.tsx
+++ b/packages/react/src/shared/scoped-portal.tsx
@@ -58,6 +58,8 @@ export function ScopedPortal({
         createPortal(
           <div
             className="leaf-portal-scope"
+            lang={config.locale}
+            dir={config.direction}
             data-leaf-density={config.density}
             data-leaf-motion={
               config.theme.motion === undefined ? undefined : config.theme.motion ? 'on' : 'off'
diff --git a/packages/react/src/shared/selection-content.tsx b/packages/react/src/shared/selection-content.tsx
new file mode 100644
index 0000000..434fbce
--- /dev/null
+++ b/packages/react/src/shared/selection-content.tsx
@@ -0,0 +1,207 @@
+import { X } from 'lucide-react';
+import {
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { classes } from './classes';
+import { inertProps } from './inert';
+import { useListMotion } from './motion';
+
+const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+interface SelectionItem {
+  key: string;
+  label: ReactNode;
+  text: string;
+  remove?: () => void;
+  render?: ReactNode;
+}
+
+/** Shared selected-value layout. Measure the real tags, without mounting custom renderers twice. */
+export function SelectionContent({
+  items,
+  children,
+  className,
+  tagClassName,
+  tagWrap = true,
+  maxTagCount,
+  searchable = false,
+  query = '',
+  removeLabel,
+}: {
+  items?: readonly SelectionItem[];
+  children?: ReactNode;
+  className?: string;
+  tagClassName?: string;
+  tagWrap?: boolean;
+  maxTagCount?: number | 'responsive';
+  searchable?: boolean;
+  query?: string;
+  removeLabel?: string;
+}) {
+  const root = useRef<HTMLSpanElement>(null);
+  const count = items?.length ?? 0;
+  const limit = typeof maxTagCount === 'number' ? Math.max(0, Math.floor(maxTagCount)) : count;
+  const singleLine = items !== undefined && (!tagWrap || maxTagCount === 'responsive');
+  const [layout, setLayout] = useState({ count, firstWidth: 0, inputWidth: 0 });
+  const visibleCount = Math.min(count, limit, singleLine ? layout.count : count);
+  const hiddenItems = items?.slice(visibleCount) ?? [];
+  const measure = useRef(() => {});
+  measure.current = () => {
+    const element = root.current;
+    if (!singleLine || !element?.clientWidth) return;
+    const width = element.clientWidth;
+    const gap = Number.parseFloat(getComputedStyle(element).columnGap) || 0;
+    // All writes precede the reads. The temporary measurement is restored before paint.
+    const tags = Array.from(element.querySelectorAll<HTMLElement>('[data-selection-item]'));
+    const hiddenTags = tags.filter((tag) => tag.hidden);
+    element.dataset.measuring = '';
+    // Normalize/utility styles often enforce [hidden] with !important. Temporarily
+    // remove the attribute itself instead of relying on a CSS override.
+    for (const tag of hiddenTags) tag.hidden = false;
+    const widths = tags.map((tag) => tag.getBoundingClientRect().width);
+    const overflowWidth =
+      element.querySelector<HTMLElement>('[data-selection-counter]')?.getBoundingClientRect()
+        .width ?? 0;
+    const queryWidth =
+      element.querySelector<HTMLElement>('[data-selection-query]')?.getBoundingClientRect().width ??
+      0;
+    for (const tag of hiddenTags) tag.hidden = true;
+    delete element.dataset.measuring;
+    const inputWidth = children
+      ? Math.min(
+          Math.max(0, width - (count ? overflowWidth + gap : 0)),
+          searchable ? (query ? Math.max(48, queryWidth + 12) : 24) : 1,
+        )
+      : 0;
+    const budget = Math.max(0, width - inputWidth - (children && count ? gap : 0));
+    const totalWidth = widths.reduce((sum, value) => sum + value, 0) + Math.max(0, count - 1) * gap;
+    let nextCount = 0;
+    let firstWidth = 0;
+    if (count <= limit && totalWidth <= budget) nextCount = count;
+    else if (count === 1 && limit > 0 && budget >= Math.min(widths[0] ?? 0, 48)) {
+      nextCount = 1;
+      firstWidth = budget;
+    } else {
+      const tagBudget = Math.max(0, budget - overflowWidth - gap);
+      let used = 0;
+      for (const tagWidth of widths.slice(0, Math.min(limit, count - 1))) {
+        const next = used + (nextCount ? gap : 0) + tagWidth;
+        if (next > tagBudget) break;
+        used = next;
+        nextCount++;
+      }
+      // Keep the first long label useful, while preserving the remove button and +N.
+      if (!nextCount && limit > 0 && count > 1 && tagBudget >= Math.min(widths[0] ?? 0, 48)) {
+        nextCount = 1;
+        firstWidth = tagBudget;
+      }
+    }
+    setLayout((previous) =>
+      previous.count === nextCount &&
+      previous.firstWidth === firstWidth &&
+      previous.inputWidth === inputWidth
+        ? previous
+        : { count: nextCount, firstWidth, inputWidth },
+    );
+  };
+  useBrowserLayoutEffect(() => measure.current());
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Observe the new tag elements after selection changes.
+  useEffect(() => {
+    if (!singleLine || !root.current) return;
+    const update = () => measure.current();
+    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);
+    observer?.observe(root.current);
+    for (const tag of root.current.querySelectorAll('[data-selection-item]'))
+      observer?.observe(tag);
+    window.addEventListener('resize', update);
+    document.fonts?.addEventListener('loadingdone', update);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener('resize', update);
+      document.fonts?.removeEventListener('loadingdone', update);
+    };
+  }, [singleLine, count]);
+  useListMotion(
+    root,
+    JSON.stringify(items?.slice(0, visibleCount).map((item) => item.key)),
+    '.leaf-selection__tag[data-motion-key]:not([hidden])',
+    singleLine ? visibleCount : false,
+  );
+  return (
+    <span
+      ref={root}
+      className={classes('leaf-selection', className)}
+      data-multiple={items !== undefined || undefined}
+      data-single-line={singleLine || undefined}
+      style={
+        singleLine
+          ? ({
+              '--leaf-selection-first-width': layout.firstWidth
+                ? `${layout.firstWidth}px`
+                : undefined,
+              '--leaf-selection-input-width': `${layout.inputWidth}px`,
+            } as CSSProperties)
+          : undefined
+      }
+    >
+      {items?.slice(0, singleLine ? count : visibleCount).map((item, index) => (
+        <span
+          className={classes('leaf-selection__tag', tagClassName)}
+          key={item.key}
+          data-selection-item=""
+          data-motion-key={item.key}
+          data-custom={item.render != null || undefined}
+          hidden={index >= visibleCount}
+          {...inertProps(index >= visibleCount)}
+          title={item.text}
+        >
+          {item.render ?? (
+            <>
+              <span>{item.label}</span>
+              {item.remove && (
+                <button
+                  type="button"
+                  tabIndex={-1}
+                  aria-label={`${removeLabel} ${item.text}`}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    item.remove?.();
+                  }}
+                >
+                  <X size={12} aria-hidden="true" />
+                </button>
+              )}
+            </>
+          )}
+        </span>
+      ))}
+      {hiddenItems.length > 0 && (
+        <span
+          className={classes('leaf-selection__tag', tagClassName)}
+          title={hiddenItems.map((item) => item.text).join(', ')}
+          data-selection-overflow=""
+        >
+          +{hiddenItems.length}
+          <span className="leaf-selection__sr">
+            {hiddenItems.map((item) => item.text).join(', ')}
+          </span>
+        </span>
+      )}
+      {children && <span className="leaf-selection__input">{children}</span>}
+      {singleLine && (
+        <span className="leaf-selection__measure" aria-hidden="true">
+          <span className={classes('leaf-selection__tag', tagClassName)} data-selection-counter="">
+            +{count}
+          </span>
+          <span data-selection-query="">{query}</span>
+        </span>
+      )}
+    </span>
+  );
+}
diff --git a/packages/react/src/shared/time.ts b/packages/react/src/shared/time.ts
index f5b07d7..80d7d96 100644
--- a/packages/react/src/shared/time.ts
+++ b/packages/react/src/shared/time.ts
@@ -4,10 +4,29 @@ export interface TimeParts {
   second: number;
 }
 export const padTime = (value: number) => String(value).padStart(2, '0');
-export function parseTime(value: string | null | undefined): TimeParts | null {
-  const match = value
-    ?.trim()
-    .match(/^(?:(上午|下午)\s*)?(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM|上午|下午)?$/i);
+export function parseTime(
+  value: string | null | undefined,
+  periods?: readonly [string, string],
+): TimeParts | null {
+  let text = value?.trim();
+  if (text && periods) {
+    for (const [index, label] of periods.entries()) {
+      if (!label) continue;
+      const normalized = text.toLowerCase();
+      const token = label.toLowerCase();
+      if (normalized.endsWith(token)) {
+        text = `${text.slice(0, -label.length).trim()} ${index === 0 ? 'AM' : 'PM'}`;
+        break;
+      }
+      if (normalized.startsWith(token)) {
+        text = `${text.slice(label.length).trim()} ${index === 0 ? 'AM' : 'PM'}`;
+        break;
+      }
+    }
+  }
+  const match = text?.match(
+    /^(?:(上午|下午)\s*)?(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM|上午|下午)?$/i,
+  );
   if (!match) return null;
   if (match[1] && match[5]) return null;
   let hour = Number(match[2]);
diff --git a/packages/react/src/shared/types.ts b/packages/react/src/shared/types.ts
index bf7adbf..d8b823d 100644
--- a/packages/react/src/shared/types.ts
+++ b/packages/react/src/shared/types.ts
@@ -1,3 +1,3 @@
-/** Shared single-line control sizes: 34px / 40px / 46px by default. */
+/** Shared single-line control sizes: 30px / 36px / 42px by default. */
 export type ControlSize = 'sm' | 'md' | 'lg';
 export type ControlStatus = 'error' | 'warning';
diff --git a/packages/react/src/shared/use-drag-announcements.ts b/packages/react/src/shared/use-drag-announcements.ts
new file mode 100644
index 0000000..9ef17c2
--- /dev/null
+++ b/packages/react/src/shared/use-drag-announcements.ts
@@ -0,0 +1,22 @@
+import type { Announcements, UniqueIdentifier } from '@dnd-kit/core';
+import { useFormattedText } from './use-formatted-text';
+import { useText } from './use-text';
+
+export function useDragAnnouncements(label: (id: UniqueIdentifier) => string, tree = false) {
+  const t = useText();
+  const format = useFormattedText();
+  const announcements: Announcements = {
+    onDragStart: ({ active }) => format('drag.pickedUp', { label: label(active.id) }),
+    onDragOver: ({ over }) =>
+      over ? format('drag.moved', { label: label(over.id) }) : t('drag.outside'),
+    onDragEnd: ({ active, over }) =>
+      over ? format('drag.dropped', { label: label(active.id) }) : t('drag.cancelled'),
+    onDragCancel: () => t('drag.cancelled'),
+  };
+  return {
+    screenReaderInstructions: {
+      draggable: t(tree ? 'tree.reorderInstructions' : 'drag.instructions'),
+    },
+    announcements,
+  };
+}
diff --git a/packages/react/src/shared/use-formatted-text.ts b/packages/react/src/shared/use-formatted-text.ts
new file mode 100644
index 0000000..774c7d3
--- /dev/null
+++ b/packages/react/src/shared/use-formatted-text.ts
@@ -0,0 +1,80 @@
+import { type Formatters, IntlMessageFormat } from 'intl-messageformat';
+import { useMemo } from 'react';
+import { useLeafConfig } from '../config-provider/context';
+import { getEnglishMessage, getMessage } from '../locales/resolve';
+import type { TranslationKey } from '../locales/types';
+
+declare const process: { env: { NODE_ENV?: string } };
+
+/** ICU is used only by components with variable sentences, not the base configuration. */
+export function useFormattedText() {
+  const { locale, messages, messageLocales } = useLeafConfig();
+  return useMemo(() => {
+    const cache = new Map<string, IntlMessageFormat>();
+    const warned = new Set<string>();
+    const numbers = new Map<string, Intl.NumberFormat>();
+    const dates = new Map<string, Intl.DateTimeFormat>();
+    const plurals = new Map<string, Intl.PluralRules>();
+    const formatters: Formatters = {
+      getNumberFormat: (_, options) => {
+        const id = JSON.stringify(options ?? {});
+        let formatter = numbers.get(id);
+        if (!formatter) {
+          // FormatJS includes newer Intl options than the project's ES2020 lib declarations.
+          formatter = new Intl.NumberFormat(locale, options as Intl.NumberFormatOptions);
+          numbers.set(id, formatter);
+        }
+        return formatter;
+      },
+      getDateTimeFormat: (_, options) => {
+        const id = JSON.stringify(options ?? {});
+        let formatter = dates.get(id);
+        if (!formatter) {
+          formatter = new Intl.DateTimeFormat(locale, options);
+          dates.set(id, formatter);
+        }
+        return formatter;
+      },
+      getPluralRules: (language, options) => {
+        const id = JSON.stringify([language, options]);
+        let formatter = plurals.get(id);
+        if (!formatter) {
+          formatter = new Intl.PluralRules(language, options);
+          plurals.set(id, formatter);
+        }
+        return formatter;
+      },
+    };
+    function format(
+      template: string,
+      language: string,
+      values: Record<string, string | number | Date>,
+    ) {
+      const id = `${language}:${template}`;
+      let formatter = cache.get(id);
+      if (!formatter) {
+        formatter = new IntlMessageFormat(template, locale, undefined, {
+          ignoreTag: true,
+          formatters: {
+            ...formatters,
+            // Sentence grammar follows its translation; regional formats follow the active locale.
+            getPluralRules: (_, options) => formatters.getPluralRules(language, options),
+          },
+        });
+        cache.set(id, formatter);
+      }
+      return String(formatter.format(values));
+    }
+    return (key: TranslationKey, values: Record<string, string | number | Date>) => {
+      try {
+        return format(getMessage(messages, key), messageLocales[key] ?? locale, values);
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production' && !warned.has(key)) {
+          warned.add(key);
+          console.warn(`Leaf UI: invalid translation "${key}"; using English.`, error);
+        }
+        return format(getEnglishMessage(key), 'en-US', values);
+      }
+    };
+  }, [locale, messages, messageLocales]);
+}
diff --git a/packages/react/src/shared/use-text.ts b/packages/react/src/shared/use-text.ts
index f985564..c296b70 100644
--- a/packages/react/src/shared/use-text.ts
+++ b/packages/react/src/shared/use-text.ts
@@ -1,10 +1,9 @@
 import { useLeafConfig } from '../config-provider/context';
-import { traditionalTextMessages } from '../locales/zh-tw';
+import { getMessage } from '../locales/resolve';
+import type { TranslationKey } from '../locales/types';
 
-/** Small component-local labels follow the nearest language scope. */
+/** Static labels do not import the ICU parser or allocate formatters. */
 export function useText() {
-  const { locale, textMessages } = useLeafConfig();
-  return (zh: string, en: string) =>
-    textMessages[en] ??
-    (locale === 'zh-TW' ? (traditionalTextMessages[en] ?? zh) : locale.startsWith('zh') ? zh : en);
+  const { messages } = useLeafConfig();
+  return (key: TranslationKey) => getMessage(messages, key);
 }
diff --git a/packages/react/src/signaturepad/index.ts b/packages/react/src/signaturepad/index.ts
deleted file mode 100644
index 6a96ed7..0000000
--- a/packages/react/src/signaturepad/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type {
-  SignaturePadHandle,
-  SignaturePadProps,
-  SignaturePoint,
-  SignatureStroke,
-} from './signaturepad';
-export { SignaturePad } from './signaturepad';
diff --git a/packages/react/src/signaturepad/signaturepad.scss b/packages/react/src/signaturepad/signaturepad.scss
deleted file mode 100644
index a601218..0000000
--- a/packages/react/src/signaturepad/signaturepad.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.leaf-signature-pad {
-  color: var(--leaf-color-text);
-  font: var(--leaf-font-size) var(--leaf-font-family);
-  &__surface {
-    position: relative;
-    overflow: hidden;
-    border: 1px solid var(--leaf-color-border);
-    border-radius: var(--leaf-radius-md);
-    transition:
-      border-color var(--leaf-motion-duration) var(--leaf-motion-easing),
-      box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
-    &::after {
-      content: '';
-      position: absolute;
-      inset-inline: 24px;
-      inset-block-end: 42px;
-      border-bottom: 1px dashed var(--leaf-color-text-alpha-16);
-      pointer-events: none;
-    }
-    &[data-drawing] {
-      border-color: var(--leaf-color-primary);
-      box-shadow: 0 0 0 3px var(--leaf-color-primary-alpha-12);
-    }
-  }
-  canvas {
-    display: block;
-    width: 100%;
-    height: 100%;
-    touch-action: none;
-  }
-  &__placeholder {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, calc(-50% - 4px));
-    color: inherit;
-    opacity: 0;
-    pointer-events: none;
-    transition:
-      opacity var(--leaf-motion-fast) var(--leaf-motion-easing),
-      transform var(--leaf-motion-duration) var(--leaf-motion-spring);
-  }
-  &__surface[data-empty] &__placeholder {
-    opacity: 0.45;
-    transform: translate(-50%, -50%);
-  }
-  &__controls {
-    display: flex;
-    justify-content: flex-end;
-    gap: 6px;
-    margin-top: 8px;
-  }
-  &[data-disabled] {
-    opacity: 0.6;
-    canvas {
-      touch-action: auto;
-    }
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .leaf-signature-pad__surface,
-  .leaf-signature-pad__placeholder {
-    transition: none;
-  }
-}
diff --git a/packages/react/src/signaturepad/signaturepad.tsx b/packages/react/src/signaturepad/signaturepad.tsx
deleted file mode 100644
index 92441b3..0000000
--- a/packages/react/src/signaturepad/signaturepad.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import { Eraser, Undo2 } from 'lucide-react';
-import {
-  forwardRef,
-  type HTMLAttributes,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import type Pad from 'signature_pad';
-import { Button } from '../button';
-import { classes } from '../shared/classes';
-import { useText } from '../shared/use-text';
-export interface SignaturePoint {
-  x: number;
-  y: number;
-  pressure: number;
-  time: number;
-}
-export interface SignatureStroke {
-  points: SignaturePoint[];
-  penColor: string;
-  minWidth: number;
-  maxWidth: number;
-  dotSize: number;
-  velocityFilterWeight: number;
-  compositeOperation: GlobalCompositeOperation;
-}
-export interface SignaturePadHandle {
-  clear: () => void;
-  undo: () => void;
-  isEmpty: () => boolean;
-  getData: () => SignatureStroke[];
-  export: (type?: 'image/png' | 'image/jpeg' | 'image/svg+xml') => Promise<Blob>;
-}
-export interface SignaturePadProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onError' | 'defaultValue'> {
-  value?: readonly SignatureStroke[];
-  defaultValue?: readonly SignatureStroke[];
-  onChange?: (strokes: SignatureStroke[]) => void;
-  onError?: (error: Error) => void;
-  penColor?: string;
-  backgroundColor?: string;
-  minWidth?: number;
-  maxWidth?: number;
-  height?: number;
-  disabled?: boolean;
-  controls?: boolean;
-}
-export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(function SignaturePad(
-  {
-    value,
-    defaultValue = [],
-    onChange,
-    onError,
-    penColor = '#203329',
-    backgroundColor = '#ffffff',
-    minWidth = 0.5,
-    maxWidth = 2.5,
-    height = 220,
-    disabled = false,
-    controls = true,
-    className,
-    style,
-    ...props
-  },
-  ref,
-) {
-  const t = useText();
-  const canvas = useRef<HTMLCanvasElement>(null);
-  const pad = useRef<Pad | null>(null);
-  const [ready, setReady] = useState(false);
-  const [empty, setEmpty] = useState(true);
-  const [drawing, setDrawing] = useState(false);
-  const latest = useRef({
-    value,
-    defaultValue,
-    onChange,
-    onError,
-    penColor,
-    backgroundColor,
-    minWidth,
-    maxWidth,
-    disabled,
-  });
-  latest.current = {
-    value,
-    defaultValue,
-    onChange,
-    onError,
-    penColor,
-    backgroundColor,
-    minWidth,
-    maxWidth,
-    disabled,
-  };
-  const snapshot = useRef<readonly SignatureStroke[]>(value ?? defaultValue);
-  const publish = useCallback(() => {
-    const instance = pad.current;
-    if (!instance) return;
-    const data = instance
-      .toData()
-      .map((stroke) => ({ ...stroke, points: stroke.points.map((point) => ({ ...point })) }));
-    snapshot.current = data;
-    setEmpty(instance.isEmpty());
-    latest.current.onChange?.(data);
-    if (latest.current.value !== undefined) {
-      queueMicrotask(() => {
-        if (pad.current === instance) {
-          instance.fromData([...(latest.current.value ?? [])]);
-          setEmpty(instance.isEmpty());
-        }
-      });
-    }
-  }, []);
-  useEffect(() => {
-    let disposed = false;
-    let observer: ResizeObserver | undefined;
-    import('signature_pad')
-      .then(({ default: Signature }) => {
-        const node = canvas.current;
-        if (disposed || !node) return;
-        const config = latest.current;
-        const instance = new Signature(node, {
-          penColor: config.penColor,
-          backgroundColor: config.backgroundColor,
-          minWidth: config.minWidth,
-          maxWidth: config.maxWidth,
-        });
-        pad.current = instance;
-        let oldRatio = 0;
-        let oldWidth = 0;
-        let oldHeight = 0;
-        const resize = () => {
-          const rect = node.getBoundingClientRect();
-          if (!rect.width || !rect.height) return;
-          const ratio = Math.max(1, window.devicePixelRatio || 1);
-          if (
-            node.width === Math.round(rect.width * ratio) &&
-            node.height === Math.round(rect.height * ratio) &&
-            oldRatio === ratio
-          )
-            return;
-          const data = instance.toData().map((stroke) => ({
-            ...stroke,
-            points: stroke.points.map((point) => ({
-              ...point,
-              x: oldWidth ? (point.x * rect.width) / oldWidth : point.x,
-              y: oldHeight ? (point.y * rect.height) / oldHeight : point.y,
-            })),
-          }));
-          node.width = Math.round(rect.width * ratio);
-          node.height = Math.round(rect.height * ratio);
-          node.getContext('2d')?.scale(ratio, ratio);
-          oldRatio = ratio;
-          oldWidth = rect.width;
-          oldHeight = rect.height;
-          instance.clear();
-          instance.fromData(data.length ? data : [...snapshot.current]);
-          snapshot.current = instance.toData();
-          setEmpty(instance.isEmpty());
-        };
-        instance.fromData([...snapshot.current]);
-        resize();
-        const started = () => setDrawing(true);
-        const ended = () => {
-          setDrawing(false);
-          publish();
-        };
-        instance.addEventListener('beginStroke', started);
-        instance.addEventListener('endStroke', ended);
-        if (config.disabled) instance.off();
-        observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(resize);
-        observer?.observe(node);
-        window.addEventListener('resize', resize);
-        setReady(true);
-        cleanup = () => {
-          instance.off();
-          instance.removeEventListener('beginStroke', started);
-          instance.removeEventListener('endStroke', ended);
-          window.removeEventListener('resize', resize);
-          observer?.disconnect();
-          if (pad.current === instance) pad.current = null;
-        };
-      })
-      .catch((reason) => {
-        if (!disposed)
-          latest.current.onError?.(reason instanceof Error ? reason : new Error(String(reason)));
-      });
-    let cleanup = () => {};
-    return () => {
-      disposed = true;
-      cleanup();
-      observer?.disconnect();
-    };
-  }, [publish]);
-  useEffect(() => {
-    if (!ready) return;
-    const instance = pad.current;
-    if (!instance) return;
-    instance.penColor = penColor;
-    instance.backgroundColor = backgroundColor;
-    instance.minWidth = minWidth;
-    instance.maxWidth = maxWidth;
-    instance.redraw();
-    if (disabled) {
-      setDrawing(false);
-      instance.off();
-    } else instance.on();
-  }, [penColor, backgroundColor, minWidth, maxWidth, disabled, ready]);
-  useEffect(() => {
-    if (!ready || value === undefined || !pad.current) return;
-    snapshot.current = value;
-    pad.current.fromData([...value]);
-    setEmpty(pad.current.isEmpty());
-  }, [value, ready]);
-  const clear = () => {
-    if (disabled || !pad.current) return;
-    pad.current.clear();
-    publish();
-  };
-  const undo = () => {
-    if (disabled || !pad.current) return;
-    const data = pad.current.toData();
-    data.pop();
-    pad.current.fromData(data);
-    publish();
-  };
-  useImperativeHandle(ref, () => ({
-    clear,
-    undo,
-    isEmpty: () => pad.current?.isEmpty() ?? true,
-    getData: () =>
-      pad.current
-        ?.toData()
-        .map((stroke) => ({ ...stroke, points: stroke.points.map((point) => ({ ...point })) })) ??
-      [],
-    export: async (type = 'image/png') => {
-      if (!pad.current || !canvas.current) throw new Error('Signature pad is loading.');
-      if (type === 'image/svg+xml')
-        return new Blob([pad.current.toSVG({ includeBackgroundColor: true })], { type });
-      return new Promise<Blob>((resolve, reject) =>
-        canvas.current?.toBlob(
-          (blob) => (blob ? resolve(blob) : reject(new Error('Signature export failed.'))),
-          type,
-        ),
-      );
-    },
-  }));
-  return (
-    <div
-      {...props}
-      className={classes('leaf-signature-pad', className)}
-      style={style}
-      data-disabled={disabled ? '' : undefined}
-    >
-      <div
-        className="leaf-signature-pad__surface"
-        style={{ height, background: backgroundColor, color: penColor }}
-        data-empty={empty || undefined}
-        data-drawing={drawing || undefined}
-      >
-        <canvas
-          ref={canvas}
-          aria-label={props['aria-label'] ?? t('手写签名区域', 'Handwritten signature area')}
-          role="img"
-        />
-        <span className="leaf-signature-pad__placeholder" aria-hidden={!empty}>
-          {t('在此签名', 'Sign here')}
-        </span>
-      </div>
-      {controls && (
-        <div className="leaf-signature-pad__controls">
-          <Button
-            variant="ghost"
-            size="sm"
-            startIcon={<Undo2 size={15} />}
-            disabled={disabled || empty || !ready}
-            onClick={undo}
-          >
-            {t('撤销', 'Undo')}
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            startIcon={<Eraser size={15} />}
-            disabled={disabled || empty || !ready}
-            onClick={clear}
-          >
-            {t('清空', 'Clear')}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-});
diff --git a/packages/react/src/skeleton/skeleton.tsx b/packages/react/src/skeleton/skeleton.tsx
index e445cfc..c8ece4a 100644
--- a/packages/react/src/skeleton/skeleton.tsx
+++ b/packages/react/src/skeleton/skeleton.tsx
@@ -1,4 +1,5 @@
 import { type HTMLAttributes, useEffect, useLayoutEffect, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { animateMotion, useMotionEnabled } from '../shared/motion';
@@ -15,7 +16,7 @@ export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   rowWidths?: readonly (number | string)[];
   round?: boolean;
 }
-export function Skeleton({
+export function SkeletonControl({
   loading = true,
   active = true,
   avatar = false,
@@ -78,7 +79,7 @@ export function Skeleton({
       {...props}
       ref={root}
       role="status"
-      aria-label={props['aria-label'] ?? messages.loading}
+      aria-label={props['aria-label'] ?? messages.common.loading}
       className={classes(
         'leaf-skeleton',
         active && 'leaf-skeleton--active',
@@ -101,3 +102,8 @@ export function Skeleton({
     </div>
   );
 }
+
+export function Skeleton(rawProps: SkeletonProps) {
+  const props = useComponentProps('Skeleton', rawProps);
+  return <SkeletonControl {...props} />;
+}
diff --git a/packages/react/src/slider/slider.tsx b/packages/react/src/slider/slider.tsx
index 1137d49..d00d4d7 100644
--- a/packages/react/src/slider/slider.tsx
+++ b/packages/react/src/slider/slider.tsx
@@ -6,12 +6,13 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { useFieldValue, useMergedRef } from '../shared/field';
 import type { LeafThemeStyle } from '../theme';
-import { Tooltip } from '../tooltip';
+import { TooltipControl as Tooltip } from '../tooltip/tooltip';
 
 export interface SliderMark {
   value: number;
@@ -41,270 +42,280 @@ export type SliderProps = SliderBaseProps &
         onChange?: (value: [number, number]) => void;
       }
   );
-export const Slider = forwardRef<HTMLInputElement, SliderProps>(
-  function Slider(props, forwardedRef) {
-    const {
-      range = false,
-      value,
-      defaultValue,
-      onChange: _onChange,
-      min = 0,
-      max = 100,
-      step = 1,
-      marks = [],
-      vertical = false,
-      showValue = false,
-      onChangeComplete,
-      tooltip = false,
-      disabled: disabledProp,
-      readOnly,
-      className,
-      style,
-      name,
-      id: idProp,
-      onKeyDown,
-      onKeyUp,
-      onPointerUp,
-      onBlur,
-      'aria-label': label,
-      ...inputProps
-    } = props;
-    const { messages, direction } = useLeafConfig();
-    const [activeThumb, setActiveThumb] = useState<number | null>(null);
-    const field = useFormField();
-    const generatedId = useId();
-    const disabled = disabledProp || field?.disabled;
-    const minimum = Number.isFinite(min) ? min : 0;
-    const maximum = Math.max(minimum, Number.isFinite(max) ? max : 100);
-    const increment = step !== null && Number.isFinite(step) && step > 0 ? step : 1;
-    const positions = [
-      ...new Set(
-        marks.map((mark) => mark.value).filter((value) => value >= minimum && value <= maximum),
-      ),
-    ].sort((a, b) => a - b);
-    const clamp = (number: number) =>
-      Math.min(maximum, Math.max(minimum, Number.isFinite(number) ? number : minimum));
-    const snap = (number: number) =>
-      step === null && positions.length
-        ? positions.reduce(
-            (best, value) => (Math.abs(value - number) < Math.abs(best - number) ? value : best),
-            positions[0] ?? minimum,
-          )
-        : clamp(
-            Number((minimum + Math.round((number - minimum) / increment) * increment).toFixed(12)),
-          );
-    const input = useRef<HTMLInputElement>(null);
-    const ref = useMergedRef(input, forwardedRef);
-    const second = useRef<HTMLInputElement>(null);
-    const [current, setCurrent] = useFieldValue<number | readonly [number, number]>(
-      value,
-      defaultValue ?? (range ? [minimum, maximum] : minimum),
-      input,
-      inputProps.form,
-    );
-    const pair =
-      typeof current === 'number'
-        ? [minimum, clamp(current)]
-        : [clamp(current[0]), clamp(current[1])].sort((a, b) => a - b);
-    const low = pair[0] ?? minimum;
-    const high = pair[1] ?? maximum;
-    const activeRef = useRef<number | readonly [number, number]>(current);
-    activeRef.current = range ? [low, high] : high;
-    const changed = useRef(false);
-    const complete = () => {
-      if (changed.current) {
-        changed.current = false;
-        onChangeComplete?.(activeRef.current);
+export const SliderControl = forwardRef<HTMLInputElement, SliderProps>(function SliderControl(
+  props: SliderProps,
+  forwardedRef,
+) {
+  const {
+    range = false,
+    value,
+    defaultValue,
+    onChange: _onChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    marks = [],
+    vertical = false,
+    showValue = false,
+    onChangeComplete,
+    tooltip = false,
+    disabled: disabledProp,
+    readOnly,
+    className,
+    style,
+    name,
+    id: idProp,
+    onKeyDown,
+    onKeyUp,
+    onPointerUp,
+    onBlur,
+    'aria-label': label,
+    ...inputProps
+  } = props;
+  const { messages, direction } = useLeafConfig();
+  const [activeThumb, setActiveThumb] = useState<number | null>(null);
+  const field = useFormField();
+  const generatedId = useId();
+  const disabled = disabledProp || field?.disabled;
+  const minimum = Number.isFinite(min) ? min : 0;
+  const maximum = Math.max(minimum, Number.isFinite(max) ? max : 100);
+  const increment = step !== null && Number.isFinite(step) && step > 0 ? step : 1;
+  const positions = [
+    ...new Set(
+      marks.map((mark) => mark.value).filter((value) => value >= minimum && value <= maximum),
+    ),
+  ].sort((a, b) => a - b);
+  const clamp = (number: number) =>
+    Math.min(maximum, Math.max(minimum, Number.isFinite(number) ? number : minimum));
+  const snap = (number: number) =>
+    step === null && positions.length
+      ? positions.reduce(
+          (best, value) => (Math.abs(value - number) < Math.abs(best - number) ? value : best),
+          positions[0] ?? minimum,
+        )
+      : clamp(
+          Number((minimum + Math.round((number - minimum) / increment) * increment).toFixed(12)),
+        );
+  const input = useRef<HTMLInputElement>(null);
+  const ref = useMergedRef(input, forwardedRef);
+  const second = useRef<HTMLInputElement>(null);
+  const [current, setCurrent] = useFieldValue<number | readonly [number, number]>(
+    value,
+    defaultValue ?? (range ? [minimum, maximum] : minimum),
+    input,
+    inputProps.form,
+  );
+  const pair =
+    typeof current === 'number'
+      ? [minimum, clamp(current)]
+      : [clamp(current[0]), clamp(current[1])].sort((a, b) => a - b);
+  const low = pair[0] ?? minimum;
+  const high = pair[1] ?? maximum;
+  const activeRef = useRef<number | readonly [number, number]>(current);
+  activeRef.current = range ? [low, high] : high;
+  const changed = useRef(false);
+  const complete = () => {
+    if (changed.current) {
+      changed.current = false;
+      onChangeComplete?.(activeRef.current);
+    }
+  };
+  const change = (next: number, index: number) => {
+    if (disabled || readOnly) return;
+    const normalized = snap(next);
+    const result: number | [number, number] = range
+      ? index === 0
+        ? [Math.min(normalized, high), high]
+        : [low, Math.max(normalized, low)]
+      : normalized;
+    if (JSON.stringify(result) === JSON.stringify(activeRef.current)) return;
+    activeRef.current = result;
+    changed.current = true;
+    setCurrent(result);
+    if (props.range) props.onChange?.(result as [number, number]);
+    else props.onChange?.(result as number);
+  };
+  const percent = (number: number) =>
+    maximum === minimum ? 0 : ((number - minimum) / (maximum - minimum)) * 100;
+  return (
+    <div
+      className={classes(
+        'leaf-slider',
+        vertical && 'leaf-slider--vertical',
+        range && 'leaf-slider--range',
+        className,
+      )}
+      data-disabled={disabled || readOnly ? '' : undefined}
+      style={
+        {
+          '--leaf-slider-start': `${percent(range ? low : minimum)}%`,
+          '--leaf-slider-end': `${percent(high)}%`,
+          ...style,
+        } as LeafThemeStyle
       }
-    };
-    const change = (next: number, index: number) => {
-      if (disabled || readOnly) return;
-      const normalized = snap(next);
-      const result: number | [number, number] = range
-        ? index === 0
-          ? [Math.min(normalized, high), high]
-          : [low, Math.max(normalized, low)]
-        : normalized;
-      if (JSON.stringify(result) === JSON.stringify(activeRef.current)) return;
-      activeRef.current = result;
-      changed.current = true;
-      setCurrent(result);
-      if (props.range) props.onChange?.(result as [number, number]);
-      else props.onChange?.(result as number);
-    };
-    const percent = (number: number) =>
-      maximum === minimum ? 0 : ((number - minimum) / (maximum - minimum)) * 100;
-    return (
-      <div
-        className={classes(
-          'leaf-slider',
-          vertical && 'leaf-slider--vertical',
-          range && 'leaf-slider--range',
-          className,
-        )}
-        data-disabled={disabled || readOnly ? '' : undefined}
-        style={
-          {
-            '--leaf-slider-start': `${percent(range ? low : minimum)}%`,
-            '--leaf-slider-end': `${percent(high)}%`,
-            ...style,
-          } as LeafThemeStyle
-        }
-      >
-        <div className="leaf-slider__rail">
-          <div className="leaf-slider__fill" />
-        </div>
-        {(range ? [low, high] : [high]).map((number, index) => (
-          <input
-            {...inputProps}
-            key={range ? (index === 0 ? 'start' : 'end') : 'single'}
-            ref={index === 0 ? ref : second}
-            id={
-              index === 0
-                ? (idProp ?? field?.id ?? generatedId)
-                : `${idProp ?? field?.id ?? generatedId}-end`
-            }
-            type="range"
-            className="leaf-slider__input"
-            name={name}
-            min={minimum}
-            max={maximum}
-            step={increment}
-            value={number}
-            disabled={disabled}
-            readOnly={readOnly}
-            aria-readonly={readOnly || undefined}
-            aria-orientation={vertical ? 'vertical' : 'horizontal'}
-            aria-label={
-              range
-                ? `${label ?? messages.slider} ${index === 0 ? messages.start : messages.end}`
-                : (label ?? (field ? undefined : messages.slider))
-            }
-            aria-labelledby={range ? undefined : inputProps['aria-labelledby']}
-            aria-describedby={
-              [inputProps['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') ||
-              undefined
-            }
-            onChange={(event) => change(Number(event.target.value), index)}
-            onFocus={() => setActiveThumb(index)}
-            onPointerDown={() => setActiveThumb(index)}
-            onPointerEnter={() => setActiveThumb(index)}
-            onPointerLeave={() => {
-              if (
-                document.activeElement !== input.current &&
-                document.activeElement !== second.current
+    >
+      <div className="leaf-slider__rail">
+        <div className="leaf-slider__fill" />
+      </div>
+      {(range ? [low, high] : [high]).map((number, index) => (
+        <input
+          {...inputProps}
+          key={range ? (index === 0 ? 'start' : 'end') : 'single'}
+          ref={index === 0 ? ref : second}
+          id={
+            index === 0
+              ? (idProp ?? field?.id ?? generatedId)
+              : `${idProp ?? field?.id ?? generatedId}-end`
+          }
+          type="range"
+          className="leaf-slider__input"
+          name={name}
+          min={minimum}
+          max={maximum}
+          step={increment}
+          value={number}
+          disabled={disabled}
+          readOnly={readOnly}
+          aria-readonly={readOnly || undefined}
+          aria-orientation={vertical ? 'vertical' : 'horizontal'}
+          aria-label={
+            range
+              ? `${label ?? messages.slider.label} ${index === 0 ? messages.common.start : messages.common.end}`
+              : (label ?? (field ? undefined : messages.slider.label))
+          }
+          aria-labelledby={range ? undefined : inputProps['aria-labelledby']}
+          aria-describedby={
+            [inputProps['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') ||
+            undefined
+          }
+          onChange={(event) => change(Number(event.target.value), index)}
+          onFocus={() => setActiveThumb(index)}
+          onPointerDown={() => setActiveThumb(index)}
+          onPointerEnter={() => setActiveThumb(index)}
+          onPointerLeave={() => {
+            if (
+              document.activeElement !== input.current &&
+              document.activeElement !== second.current
+            )
+              setActiveThumb(null);
+          }}
+          onKeyDown={(event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented) return;
+            let next: number | undefined;
+            if (event.key === 'Home') next = step === null ? positions[0] : minimum;
+            else if (event.key === 'End') next = step === null ? positions.at(-1) : maximum;
+            else if (
+              ['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown', 'PageUp', 'PageDown'].includes(
+                event.key,
               )
-                setActiveThumb(null);
-            }}
-            onKeyDown={(event) => {
-              onKeyDown?.(event);
-              if (event.defaultPrevented) return;
-              let next: number | undefined;
-              if (event.key === 'Home') next = step === null ? positions[0] : minimum;
-              else if (event.key === 'End') next = step === null ? positions.at(-1) : maximum;
-              else if (
-                ['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown', 'PageUp', 'PageDown'].includes(
+            )
+              next =
+                number +
+                ([direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight', 'ArrowUp', 'PageUp'].includes(
                   event.key,
                 )
-              )
+                  ? 1
+                  : -1) *
+                  increment *
+                  (event.shiftKey || event.key.startsWith('Page') ? 10 : 1);
+            if (next !== undefined) {
+              if (step === null && positions.length && !['Home', 'End'].includes(event.key)) {
+                const previous = positions.filter((value) => value < number).at(-1);
                 next =
-                  number +
-                  ([direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight', 'ArrowUp', 'PageUp'].includes(
-                    event.key,
-                  )
-                    ? 1
-                    : -1) *
-                    increment *
-                    (event.shiftKey || event.key.startsWith('Page') ? 10 : 1);
-              if (next !== undefined) {
-                if (step === null && positions.length && !['Home', 'End'].includes(event.key)) {
-                  const previous = positions.filter((value) => value < number).at(-1);
-                  next =
-                    next > number
-                      ? (positions.find((value) => value > number) ?? positions.at(-1))
-                      : (previous ?? positions[0]);
-                }
-                event.preventDefault();
-                if (next !== undefined) change(next, index);
+                  next > number
+                    ? (positions.find((value) => value > number) ?? positions.at(-1))
+                    : (previous ?? positions[0]);
               }
-            }}
-            onKeyUp={(event) => {
-              onKeyUp?.(event);
-              complete();
-            }}
-            onPointerUp={(event) => {
-              onPointerUp?.(event);
-              complete();
-            }}
-            onBlur={(event) => {
-              setActiveThumb(null);
-              onBlur?.(event);
-              complete();
-            }}
+              event.preventDefault();
+              if (next !== undefined) change(next, index);
+            }
+          }}
+          onKeyUp={(event) => {
+            onKeyUp?.(event);
+            complete();
+          }}
+          onPointerUp={(event) => {
+            onPointerUp?.(event);
+            complete();
+          }}
+          onBlur={(event) => {
+            setActiveThumb(null);
+            onBlur?.(event);
+            complete();
+          }}
+        />
+      ))}
+      {tooltip && activeThumb !== null && (
+        <Tooltip
+          open
+          content={
+            typeof tooltip === 'object'
+              ? (tooltip.formatter?.(activeThumb === 0 && range ? low : high) ??
+                (activeThumb === 0 && range ? low : high))
+              : activeThumb === 0 && range
+                ? low
+                : high
+          }
+        >
+          <span
+            className="leaf-slider__tooltip-anchor"
+            style={
+              vertical
+                ? { bottom: `${percent(activeThumb === 0 && range ? low : high)}%` }
+                : { insetInlineStart: `${percent(activeThumb === 0 && range ? low : high)}%` }
+            }
           />
-        ))}
-        {tooltip && activeThumb !== null && (
-          <Tooltip
-            open
-            content={
-              typeof tooltip === 'object'
-                ? (tooltip.formatter?.(activeThumb === 0 && range ? low : high) ??
-                  (activeThumb === 0 && range ? low : high))
-                : activeThumb === 0 && range
-                  ? low
-                  : high
+        </Tooltip>
+      )}
+      {showValue && (
+        <output className="leaf-slider__value" aria-hidden="true">
+          {range ? `${low} – ${high}` : high}
+        </output>
+      )}
+      {marks
+        .filter((mark) => mark.value >= minimum && mark.value <= maximum)
+        .map((mark) => (
+          <button
+            type="button"
+            className="leaf-slider__mark"
+            data-active={
+              mark.value >= (range ? low : minimum) && mark.value <= high ? '' : undefined
             }
+            key={mark.value}
+            disabled={disabled || readOnly}
+            style={
+              vertical
+                ? { bottom: `${percent(mark.value)}%` }
+                : { insetInlineStart: `${percent(mark.value)}%` }
+            }
+            aria-label={typeof mark.label === 'string' ? mark.label : String(mark.value)}
+            onClick={() => {
+              change(
+                mark.value,
+                range && Math.abs(mark.value - low) < Math.abs(mark.value - high)
+                  ? 0
+                  : range
+                    ? 1
+                    : 0,
+              );
+              complete();
+              input.current?.focus();
+            }}
           >
-            <span
-              className="leaf-slider__tooltip-anchor"
-              style={
-                vertical
-                  ? { bottom: `${percent(activeThumb === 0 && range ? low : high)}%` }
-                  : { insetInlineStart: `${percent(activeThumb === 0 && range ? low : high)}%` }
-              }
-            />
-          </Tooltip>
-        )}
-        {showValue && (
-          <output className="leaf-slider__value" aria-hidden="true">
-            {range ? `${low} – ${high}` : high}
-          </output>
-        )}
-        {marks
-          .filter((mark) => mark.value >= minimum && mark.value <= maximum)
-          .map((mark) => (
-            <button
-              type="button"
-              className="leaf-slider__mark"
-              data-active={
-                mark.value >= (range ? low : minimum) && mark.value <= high ? '' : undefined
-              }
-              key={mark.value}
-              disabled={disabled || readOnly}
-              style={
-                vertical
-                  ? { bottom: `${percent(mark.value)}%` }
-                  : { insetInlineStart: `${percent(mark.value)}%` }
-              }
-              aria-label={typeof mark.label === 'string' ? mark.label : String(mark.value)}
-              onClick={() => {
-                change(
-                  mark.value,
-                  range && Math.abs(mark.value - low) < Math.abs(mark.value - high)
-                    ? 0
-                    : range
-                      ? 1
-                      : 0,
-                );
-                complete();
-                input.current?.focus();
-              }}
-            >
-              <span className="leaf-slider__dot" aria-hidden="true" />
-              <span>{mark.label ?? mark.value}</span>
-            </button>
-          ))}
-      </div>
-    );
-  },
-);
+            <span className="leaf-slider__dot" aria-hidden="true" />
+            <span>{mark.label ?? mark.value}</span>
+          </button>
+        ))}
+    </div>
+  );
+});
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
+  rawProps: SliderProps,
+  ref,
+) {
+  const props = useComponentProps('Slider', rawProps);
+  return <SliderControl {...props} ref={ref} />;
+});
+Slider.displayName = 'Slider';
diff --git a/packages/react/src/space/space.tsx b/packages/react/src/space/space.tsx
index 9a52fcb..5a8af26 100644
--- a/packages/react/src/space/space.tsx
+++ b/packages/react/src/space/space.tsx
@@ -1,4 +1,5 @@
 import { Children, Fragment, forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 
 export interface SpaceProps extends HTMLAttributes<HTMLDivElement> {
@@ -9,7 +10,10 @@ export interface SpaceProps extends HTMLAttributes<HTMLDivElement> {
   split?: ReactNode;
 }
 export const Space = forwardRef<HTMLDivElement, SpaceProps>(function Space(
-  {
+  rawProps: SpaceProps,
+  ref,
+) {
+  const {
     direction = 'horizontal',
     size = 'md',
     align = 'center',
@@ -19,9 +23,7 @@ export const Space = forwardRef<HTMLDivElement, SpaceProps>(function Space(
     children,
     style,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('Space', rawProps);
   const sizes = {
     sm: 'var(--leaf-spacing-sm, 8px)',
     md: 'var(--leaf-spacing-md, 16px)',
diff --git a/packages/react/src/splitter/index.ts b/packages/react/src/splitter/index.ts
index 4f6c96d..2326eb0 100644
--- a/packages/react/src/splitter/index.ts
+++ b/packages/react/src/splitter/index.ts
@@ -1 +1,2 @@
-export * from './splitter';
+export type { SplitterPanel, SplitterProps } from './splitter';
+export { ResizablePanels, Splitter } from './splitter';
diff --git a/packages/react/src/splitter/splitter.tsx b/packages/react/src/splitter/splitter.tsx
index 1a3d9e4..bdfbcc0 100644
--- a/packages/react/src/splitter/splitter.tsx
+++ b/packages/react/src/splitter/splitter.tsx
@@ -1,8 +1,10 @@
 import { type HTMLAttributes, type ReactNode, useEffect, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { inertProps } from '../shared/inert';
 import { useControllable } from '../shared/use-controllable';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
 export interface SplitterPanel {
   key: string;
@@ -20,18 +22,20 @@ export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onR
   onResizeEnd?: (sizes: number[]) => void;
   direction?: 'horizontal' | 'vertical';
 }
-export function Splitter({
-  panels,
-  sizes,
-  defaultSizes,
-  onResize,
-  onResizeEnd,
-  direction = 'horizontal',
-  className,
-  style,
-  ...props
-}: SplitterProps) {
+export function Splitter(rawProps: SplitterProps) {
+  const {
+    panels,
+    sizes,
+    defaultSizes,
+    onResize,
+    onResizeEnd,
+    direction = 'horizontal',
+    className,
+    style,
+    ...props
+  } = useComponentProps('Splitter', rawProps);
   const t = useText();
+  const format = useFormattedText();
   const config = useLeafConfig();
   const root = useRef<HTMLDivElement>(null);
   const [current, setCurrent] = useControllable<readonly number[]>(
@@ -108,7 +112,7 @@ export function Splitter({
             <div
               role="separator"
               tabIndex={panel.resizable === false ? -1 : 0}
-              aria-label={`${t('调整面板', 'Resize panel')} ${index + 1}`}
+              aria-label={format('splitter.resizePanel', { index: index + 1 })}
               aria-orientation={horizontal ? 'vertical' : 'horizontal'}
               aria-valuenow={Math.round(current[index] ?? 0)}
               aria-valuemin={panel.min ?? 0}
@@ -173,7 +177,7 @@ export function Splitter({
               {panel.collapsible && (
                 <button
                   type="button"
-                  aria-label={t('折叠或展开面板', 'Toggle panel')}
+                  aria-label={t('splitter.togglePanel')}
                   onPointerDown={(event) => event.stopPropagation()}
                   onClick={() => toggle(index)}
                 >
diff --git a/packages/react/src/statistic/index.ts b/packages/react/src/statistic/index.ts
index d35a70f..f275791 100644
--- a/packages/react/src/statistic/index.ts
+++ b/packages/react/src/statistic/index.ts
@@ -1 +1,2 @@
-export * from './statistic';
+export type { CountdownProps, StatisticProps } from './statistic';
+export { Countdown, Statistic } from './statistic';
diff --git a/packages/react/src/statistic/statistic.tsx b/packages/react/src/statistic/statistic.tsx
index e15d19e..d0b975a 100644
--- a/packages/react/src/statistic/statistic.tsx
+++ b/packages/react/src/statistic/statistic.tsx
@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { animateMotion, useMotionEnabled } from '../shared/motion';
@@ -21,7 +22,7 @@ export interface StatisticProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ti
   formatter?: (value: number | string) => ReactNode;
   loading?: boolean;
 }
-export function Statistic({
+export function StatisticControl({
   title,
   value,
   precision,
@@ -81,7 +82,7 @@ export function Statistic({
         {prefix}
         <span ref={number} className="leaf-statistic__number" data-loading={loading || undefined}>
           {loading
-            ? messages.loading
+            ? messages.common.loading
             : formatter
               ? formatter(value)
               : typeof value === 'number'
@@ -105,14 +106,15 @@ export interface CountdownProps
   onChange?: (remaining: number) => void;
   initialRemaining?: number;
 }
-export function Countdown({
-  value,
-  format = 'HH:mm:ss',
-  onFinish,
-  onChange,
-  initialRemaining,
-  ...props
-}: CountdownProps) {
+export function Countdown(rawProps: CountdownProps) {
+  const {
+    value,
+    format = 'HH:mm:ss',
+    onFinish,
+    onChange,
+    initialRemaining,
+    ...props
+  } = useComponentProps('Countdown', rawProps);
   const rawDeadline = value instanceof Date ? value.getTime() : value;
   const deadline = Number.isFinite(rawDeadline) ? rawDeadline : 0;
   const [now, setNow] = useState(() =>
@@ -160,5 +162,10 @@ export function Countdown({
               : remaining % 1000,
     ).padStart(token === 'SSS' ? 3 : 2, '0'),
   );
-  return <Statistic {...props} value={label} />;
+  return <StatisticControl {...props} value={label} />;
+}
+
+export function Statistic(rawProps: StatisticProps) {
+  const props = useComponentProps('Statistic', rawProps);
+  return <StatisticControl {...props} />;
 }
diff --git a/packages/react/src/steps/steps.tsx b/packages/react/src/steps/steps.tsx
index dc7f24c..1418994 100644
--- a/packages/react/src/steps/steps.tsx
+++ b/packages/react/src/steps/steps.tsx
@@ -1,5 +1,6 @@
 import { Check, LoaderCircle, X } from 'lucide-react';
 import { type HTMLAttributes, type ReactNode, useEffect, useLayoutEffect, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { animateMotion, useMotionEnabled } from '../shared/motion';
 import type { ControlSize } from '../shared/types';
@@ -26,19 +27,20 @@ export interface StepsProps extends Omit<HTMLAttributes<HTMLOListElement>, 'onCh
   percent?: number;
 }
 
-export function Steps({
-  items,
-  current = 0,
-  status = 'process',
-  direction = 'horizontal',
-  size = 'md',
-  loading = false,
-  onChange,
-  progressDot,
-  percent,
-  className,
-  ...props
-}: StepsProps) {
+export function Steps(rawProps: StepsProps) {
+  const {
+    items,
+    current = 0,
+    status = 'process',
+    direction = 'horizontal',
+    size = 'md',
+    loading = false,
+    onChange,
+    progressDot,
+    percent,
+    className,
+    ...props
+  } = useComponentProps('Steps', rawProps);
   const root = useRef<HTMLOListElement>(null);
   const motion = useMotionEnabled();
   const states = items.map(
diff --git a/packages/react/src/styles/_dialog-sections.scss b/packages/react/src/styles/_dialog-sections.scss
index 9b6d2aa..586b436 100644
--- a/packages/react/src/styles/_dialog-sections.scss
+++ b/packages/react/src/styles/_dialog-sections.scss
@@ -1,3 +1,5 @@
+@use './mixins';
+
 @mixin sections($component) {
   --leaf-dialog-heading-gap: var(--leaf-component-#{$component}-gap, 12px);
   --leaf-dialog-icon-size: calc(var(--leaf-control-height) + 6px);
@@ -92,6 +94,7 @@
       --leaf-component-#{$component}-padding,
       var(--leaf-density-dialog-block) var(--leaf-density-dialog-inline)
     );
+    @include mixins.action-footer-padding($component);
     padding-block-start: 0;
     border-end-start-radius: inherit;
     border-end-end-radius: inherit;
@@ -102,8 +105,7 @@
     border-block-end: 1px solid var(--leaf-dialog-divider);
   }
   &--divided > &__footer {
-    padding-block-start: var(--leaf-dialog-padding-block);
-    padding-block-end: var(--leaf-dialog-padding-block);
+    @include mixins.action-footer-padding($component);
     border-block-start: 1px solid var(--leaf-dialog-divider);
     background: var(
       --leaf-component-#{$component}-footer-background,
diff --git a/packages/react/src/styles/_mixins.scss b/packages/react/src/styles/_mixins.scss
index 3ae0a96..afa84d4 100644
--- a/packages/react/src/styles/_mixins.scss
+++ b/packages/react/src/styles/_mixins.scss
@@ -1,14 +1,20 @@
+// Shared compact spacing for action footers, with explicit component padding taking precedence.
+@mixin action-footer-padding($component) {
+  padding-block: var(--leaf-component-#{$component}-padding-top, calc(var(--leaf-spacing) * 1.5))
+    var(--leaf-component-#{$component}-padding-bottom, calc(var(--leaf-spacing) * 1.5));
+}
+
 @mixin control-size {
   --leaf-current-font-size: var(--leaf-font-size);
-  --leaf-current-control-height: var(--leaf-control-height, 40px);
+  --leaf-current-control-height: var(--leaf-control-height, 36px);
 
   &--sm {
-    --leaf-current-control-height: var(--leaf-control-height-sm, 34px);
+    --leaf-current-control-height: var(--leaf-control-height-sm, 30px);
     --leaf-current-font-size: var(--leaf-font-size-sm, 12px);
   }
 
   &--lg {
-    --leaf-current-control-height: var(--leaf-control-height-lg, 46px);
+    --leaf-current-control-height: var(--leaf-control-height-lg, 42px);
     --leaf-current-font-size: var(--leaf-font-size-lg, 16px);
   }
 }
diff --git a/packages/react/src/styles/_palette.scss b/packages/react/src/styles/_palette.scss
index edb3f24..8862150 100644
--- a/packages/react/src/styles/_palette.scss
+++ b/packages/react/src/styles/_palette.scss
@@ -1,5 +1,6 @@
 // Generated by scripts/generate-palette.mjs from colors.ts and color-recipes.ts.
 @mixin light {
+  --leaf-color-option-hover: #ebebeb;
   --leaf-color-primary-text-80: #206f42;
   --leaf-color-success-text-80: #206f42;
   --leaf-color-warning-text-80: #8d671c;
@@ -128,6 +129,7 @@
 }
 
 @mixin dark {
+  --leaf-color-option-hover: #2f2f33;
   --leaf-color-primary-text-80: #98d5ae;
   --leaf-color-success-text-80: #98d5ae;
   --leaf-color-warning-text-80: #fbcd61;
diff --git a/packages/react/src/styles/index.scss b/packages/react/src/styles/index.scss
index e976fdc..ff5e29e 100644
--- a/packages/react/src/styles/index.scss
+++ b/packages/react/src/styles/index.scss
@@ -41,12 +41,12 @@
 @use '../tree/tree';
 @use '../treeselect/treeselect';
 @use '../colorpicker/colorpicker';
-@use '../signaturepad/signaturepad';
 @use '../filelist/filelist';
 @use '../upload/upload';
 @use '../layout/layout';
 @use '../grid/grid';
 @use '../space/space';
+@use '../flex/flex';
 @use '../scrollarea/scrollarea';
 @use '../scrollbar/scrollbar';
 @use '../masonry/masonry';
@@ -59,7 +59,6 @@
 @use '../infinitescroll/infinitescroll';
 @use '../qrcode/qrcode';
 @use '../image/image';
-@use '../imagecropper/imagecropper';
 @use '../inputotp/inputotp';
 @use '../inputmask/inputmask';
 @use '../transfer/transfer';
diff --git a/packages/react/src/styles/tokens.scss b/packages/react/src/styles/tokens.scss
index 9cb2101..97c994a 100644
--- a/packages/react/src/styles/tokens.scss
+++ b/packages/react/src/styles/tokens.scss
@@ -10,7 +10,7 @@
   --leaf-color-warning: #faad14;
   --leaf-color-info: #1677ff;
   --leaf-color-success: #20834a;
-  --leaf-control-height: 40px;
+  --leaf-control-height: 36px;
   --leaf-density-form-gap: 24px;
   --leaf-density-label-gap: 6px;
   --leaf-density-row-padding: 12px;
@@ -20,8 +20,6 @@
   --leaf-density-dialog-block: 20px;
   --leaf-density-dialog-inline: 24px;
   --leaf-density-dialog-gap: 16px;
-  --leaf-control-height-sm: max(1px, calc(var(--leaf-control-height) - 6px));
-  --leaf-control-height-lg: calc(var(--leaf-control-height) + 6px);
   --leaf-z-index-popup: 1000;
   --leaf-z-index-modal: 1100;
   --leaf-z-index-message: 1200;
@@ -85,11 +83,6 @@
 :root,
 :host {
   --leaf-spacing: 8px;
-  --leaf-spacing-xs: calc(var(--leaf-spacing) * 0.5);
-  --leaf-spacing-sm: var(--leaf-spacing);
-  --leaf-spacing-md: calc(var(--leaf-spacing) * 2);
-  --leaf-spacing-lg: calc(var(--leaf-spacing) * 3);
-  --leaf-spacing-xl: calc(var(--leaf-spacing) * 4);
   --leaf-line-height: 1.6;
   --leaf-heading-weight: 600;
   --leaf-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.06), 0 0 0 1px rgb(0 0 0 / 0.02);
@@ -102,6 +95,13 @@
 :root,
 :host,
 [data-leaf-scope] {
+  --leaf-spacing-xs: calc(var(--leaf-spacing) * 0.5);
+  --leaf-spacing-sm: var(--leaf-spacing);
+  --leaf-spacing-md: calc(var(--leaf-spacing) * 2);
+  --leaf-spacing-lg: calc(var(--leaf-spacing) * 3);
+  --leaf-spacing-xl: calc(var(--leaf-spacing) * 4);
+  --leaf-control-height-sm: max(1px, calc(var(--leaf-control-height) - 6px));
+  --leaf-control-height-lg: calc(var(--leaf-control-height) + 6px);
   --leaf-motion-fast: calc(var(--leaf-motion-duration) * 0.6);
   --leaf-motion-slow: calc(var(--leaf-motion-duration) * 1.6);
   --leaf-color-text-subtle: var(--leaf-color-text-muted-surface-92);
diff --git a/packages/react/src/switch/index.ts b/packages/react/src/switch/index.ts
index 4dd2256..1ac04c4 100644
--- a/packages/react/src/switch/index.ts
+++ b/packages/react/src/switch/index.ts
@@ -1 +1,2 @@
-export * from './switch';
+export type { SwitchProps } from './switch';
+export { Switch } from './switch';
diff --git a/packages/react/src/switch/switch.tsx b/packages/react/src/switch/switch.tsx
index 56d7298..ee0d0d8 100644
--- a/packages/react/src/switch/switch.tsx
+++ b/packages/react/src/switch/switch.tsx
@@ -1,5 +1,6 @@
 import { LoaderCircle } from 'lucide-react';
 import { forwardRef, type InputHTMLAttributes } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import type { ControlSize } from '../shared/types';
@@ -9,7 +10,10 @@ export interface SwitchProps
   loading?: boolean;
 }
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-  {
+  rawProps: SwitchProps,
+  ref,
+) {
+  const {
     size = 'md',
     loading = false,
     disabled: disabledProp,
@@ -18,9 +22,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
     style,
     'aria-busy': ariaBusy,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('Switch', rawProps);
   const field = useFormField();
   const disabled = disabledProp || field?.disabled;
   return (
diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index f5ed022..1bb0df7 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -12,9 +12,10 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Button } from '../button';
-import { Loading } from '../loading';
-import { Scrollbar } from '../scrollbar';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { LoadingControl as Loading } from '../loading/loading';
+import { ScrollbarControl as Scrollbar } from '../scrollbar/scrollbar';
 import { classes } from '../shared/classes';
 import { useMergedRef } from '../shared/field';
 import { inertProps } from '../shared/inert';
@@ -62,7 +63,7 @@ export interface TableErrorProps extends TableStateProps {
   onRetry?: () => void;
 }
 
-const TableRoot = forwardRef<HTMLTableElement, TableProps>(function TableRoot(
+const TableRootControl = forwardRef<HTMLTableElement, TableProps>(function TableRootControl(
   {
     size = 'md',
     bordered = false,
@@ -132,7 +133,7 @@ const TableRoot = forwardRef<HTMLTableElement, TableProps>(function TableRoot(
         verticalOffset={headerHeight}
         orientation="both"
         role="region"
-        aria-label={`${props['aria-label'] ?? t('表格', 'Table')} · ${t('滚动区域', 'Scroll area')}`}
+        aria-label={`${props['aria-label'] ?? t('table.table')} · ${t('table.scrollArea')}`}
         {...inertProps(loading)}
       >
         <table
@@ -147,48 +148,53 @@ const TableRoot = forwardRef<HTMLTableElement, TableProps>(function TableRoot(
       </Scrollbar>
       {loading && (
         <div className="leaf-table__overlay">
-          <Loading size={size} tip={t('加载中', 'Loading')} />
+          <Loading size={size} tip={t('common.loading')} />
         </div>
       )}
     </div>
   );
 });
 
-export const TableHeader = forwardRef<
+export const TableHeaderControl = forwardRef<
   HTMLTableSectionElement,
   HTMLAttributes<HTMLTableSectionElement>
->(function TableHeader({ className, ...props }, ref) {
+>(function TableHeaderControl(
+  { className, ...props }: HTMLAttributes<HTMLTableSectionElement>,
+  ref,
+) {
   return <thead {...props} ref={ref} className={classes('leaf-table__header', className)} />;
 });
 
-export const TableBody = forwardRef<
+export const TableBodyControl = forwardRef<
   HTMLTableSectionElement,
   HTMLAttributes<HTMLTableSectionElement>
->(function TableBody({ className, ...props }, ref) {
+>(function TableBodyControl({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>, ref) {
   return <tbody {...props} ref={ref} className={classes('leaf-table__body', className)} />;
 });
 
-export const TableFooter = forwardRef<
+export const TableFooterControl = forwardRef<
   HTMLTableSectionElement,
   HTMLAttributes<HTMLTableSectionElement>
->(function TableFooter({ className, ...props }, ref) {
-  return <tfoot {...props} ref={ref} className={classes('leaf-table__footer', className)} />;
-});
-
-export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
-  { selected, className, ...props },
+>(function TableFooterControl(
+  { className, ...props }: HTMLAttributes<HTMLTableSectionElement>,
   ref,
 ) {
-  return (
-    <tr
-      {...props}
-      ref={ref}
-      className={classes('leaf-table__row', className)}
-      data-selected={selected || undefined}
-    />
-  );
+  return <tfoot {...props} ref={ref} className={classes('leaf-table__footer', className)} />;
 });
 
+export const TableRowControl = forwardRef<HTMLTableRowElement, TableRowProps>(
+  function TableRowControl({ selected, className, ...props }: TableRowProps, ref) {
+    return (
+      <tr
+        {...props}
+        ref={ref}
+        className={classes('leaf-table__row', className)}
+        data-selected={selected || undefined}
+      />
+    );
+  },
+);
+
 function cellStyle(
   style: CSSProperties | undefined,
   align: TableCellProps['align'],
@@ -203,25 +209,36 @@ function cellStyle(
   };
 }
 
-export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(
-  { align, pinned, pinOffset = 0, pinEdge, className, style, ...props },
-  ref,
-) {
-  return (
-    <td
-      {...props}
-      ref={ref}
-      className={classes('leaf-table__cell', className)}
-      data-pinned={pinned}
-      data-pin-edge={pinEdge || undefined}
-      style={cellStyle(style, align, pinned, pinOffset)}
-    />
-  );
-});
+export const TableCellControl = forwardRef<HTMLTableCellElement, TableCellProps>(
+  function TableCellControl(
+    { align, pinned, pinOffset = 0, pinEdge, className, style, ...props }: TableCellProps,
+    ref,
+  ) {
+    return (
+      <td
+        {...props}
+        ref={ref}
+        className={classes('leaf-table__cell', className)}
+        data-pinned={pinned}
+        data-pin-edge={pinEdge || undefined}
+        style={cellStyle(style, align, pinned, pinOffset)}
+      />
+    );
+  },
+);
 
-export const TableColumnHeader = forwardRef<HTMLTableCellElement, TableColumnHeaderProps>(
-  function TableColumnHeader(
-    { align, pinned, pinOffset = 0, pinEdge, className, style, scope = 'col', ...props },
+export const TableColumnHeaderControl = forwardRef<HTMLTableCellElement, TableColumnHeaderProps>(
+  function TableColumnHeaderControl(
+    {
+      align,
+      pinned,
+      pinOffset = 0,
+      pinEdge,
+      className,
+      style,
+      scope = 'col',
+      ...props
+    }: TableColumnHeaderProps,
     ref,
   ) {
     return (
@@ -238,59 +255,133 @@ export const TableColumnHeader = forwardRef<HTMLTableCellElement, TableColumnHea
   },
 );
 
-export const TableCaption = forwardRef<
+export const TableCaptionControl = forwardRef<
   HTMLTableCaptionElement,
   HTMLAttributes<HTMLTableCaptionElement>
->(function TableCaption({ className, ...props }, ref) {
+>(function TableCaptionControl(
+  { className, ...props }: HTMLAttributes<HTMLTableCaptionElement>,
+  ref,
+) {
   return <caption {...props} ref={ref} className={classes('leaf-table__caption', className)} />;
 });
 
-export function TableEmpty({ colSpan = 1, children }: TableStateProps) {
+export function TableEmptyControl({ colSpan = 1, children }: TableStateProps) {
   const t = useText();
   return (
-    <TableRow className="leaf-table__state-row">
-      <TableCell colSpan={colSpan}>
+    <TableRowControl className="leaf-table__state-row">
+      <TableCellControl colSpan={colSpan}>
         <div className="leaf-table__state" role="status">
           <Inbox size={28} aria-hidden="true" />
-          {children ?? t('暂无数据', 'No data')}
+          {children ?? t('common.noData')}
         </div>
-      </TableCell>
-    </TableRow>
+      </TableCellControl>
+    </TableRowControl>
   );
 }
 
-export function TableLoading({ colSpan = 1, children }: TableStateProps) {
+export function TableLoadingControl({ colSpan = 1, children }: TableStateProps) {
   const t = useText();
   return (
-    <TableRow className="leaf-table__state-row">
-      <TableCell colSpan={colSpan}>
+    <TableRowControl className="leaf-table__state-row">
+      <TableCellControl colSpan={colSpan}>
         <div className="leaf-table__state">
-          <Loading tip={children ?? t('加载中', 'Loading')} />
+          <Loading tip={children ?? t('common.loading')} />
         </div>
-      </TableCell>
-    </TableRow>
+      </TableCellControl>
+    </TableRowControl>
   );
 }
 
-export function TableError({ colSpan = 1, children, onRetry }: TableErrorProps) {
+export function TableErrorControl({ colSpan = 1, children, onRetry }: TableErrorProps) {
   const t = useText();
   return (
-    <TableRow className="leaf-table__state-row">
-      <TableCell colSpan={colSpan}>
+    <TableRowControl className="leaf-table__state-row">
+      <TableCellControl colSpan={colSpan}>
         <div className="leaf-table__state leaf-table__state--error" role="alert">
           <CircleAlert size={28} aria-hidden="true" />
-          {children ?? t('加载失败，请重试', 'Unable to load data. Please try again.')}
+          {children ?? t('table.loadError')}
           {onRetry && (
-            <Button size="sm" variant="outline" onClick={onRetry}>
-              {t('重试', 'Retry')}
-            </Button>
+            <ButtonControl size="sm" variant="outline" onClick={onRetry}>
+              {t('common.retry')}
+            </ButtonControl>
           )}
         </div>
-      </TableCell>
-    </TableRow>
+      </TableCellControl>
+    </TableRowControl>
   );
 }
 
+const TableRoot = forwardRef<HTMLTableElement, TableProps>(function TableRoot(rawProps, ref) {
+  const props = useComponentProps('Table', rawProps);
+  return <TableRootControl {...props} ref={ref} />;
+});
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
+  rawProps: TableRowProps,
+  ref,
+) {
+  const props = useComponentProps('TableRow', rawProps);
+  return <TableRowControl {...props} ref={ref} />;
+});
+TableRow.displayName = 'TableRow';
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(
+  rawProps: TableCellProps,
+  ref,
+) {
+  const props = useComponentProps('TableCell', rawProps);
+  return <TableCellControl {...props} ref={ref} />;
+});
+TableCell.displayName = 'TableCell';
+
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(function TableHeader(rawProps: HTMLAttributes<HTMLTableSectionElement>, ref) {
+  return <TableHeaderControl {...useComponentProps('TableHeader', rawProps)} ref={ref} />;
+});
+
+export const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(function TableBody(rawProps: HTMLAttributes<HTMLTableSectionElement>, ref) {
+  return <TableBodyControl {...useComponentProps('TableBody', rawProps)} ref={ref} />;
+});
+
+export const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(function TableFooter(rawProps: HTMLAttributes<HTMLTableSectionElement>, ref) {
+  return <TableFooterControl {...useComponentProps('TableFooter', rawProps)} ref={ref} />;
+});
+
+export const TableColumnHeader = forwardRef<HTMLTableCellElement, TableColumnHeaderProps>(
+  function TableColumnHeader(rawProps: TableColumnHeaderProps, ref) {
+    return (
+      <TableColumnHeaderControl {...useComponentProps('TableColumnHeader', rawProps)} ref={ref} />
+    );
+  },
+);
+
+export const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  HTMLAttributes<HTMLTableCaptionElement>
+>(function TableCaption(rawProps: HTMLAttributes<HTMLTableCaptionElement>, ref) {
+  return <TableCaptionControl {...useComponentProps('TableCaption', rawProps)} ref={ref} />;
+});
+
+export function TableEmpty(rawProps: TableStateProps) {
+  return <TableEmptyControl {...useComponentProps('TableEmpty', rawProps)} />;
+}
+
+export function TableError(rawProps: TableErrorProps) {
+  return <TableErrorControl {...useComponentProps('TableError', rawProps)} />;
+}
+
+export function TableLoading(rawProps: TableStateProps) {
+  return <TableLoadingControl {...useComponentProps('TableLoading', rawProps)} />;
+}
+
 export const Table = Object.assign(TableRoot, {
   Root: TableRoot,
   Header: TableHeader,
@@ -304,3 +395,17 @@ export const Table = Object.assign(TableRoot, {
   Loading: TableLoading,
   Error: TableError,
 });
+
+export const TableControl = Object.assign(TableRootControl, {
+  Root: TableRootControl,
+  Header: TableHeaderControl,
+  Body: TableBodyControl,
+  Footer: TableFooterControl,
+  Row: TableRowControl,
+  ColumnHeader: TableColumnHeaderControl,
+  Cell: TableCellControl,
+  Caption: TableCaptionControl,
+  Empty: TableEmptyControl,
+  Loading: TableLoadingControl,
+  Error: TableErrorControl,
+});
diff --git a/packages/react/src/tabletanstack/defaults.ts b/packages/react/src/tabletanstack/defaults.ts
new file mode 100644
index 0000000..e572f6b
--- /dev/null
+++ b/packages/react/src/tabletanstack/defaults.ts
@@ -0,0 +1,62 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { InputProps } from '../input/input';
+import type { PaginationProps } from '../pagination/pagination';
+import type { ControlSize } from '../shared/types';
+import type { TableProps } from '../table/table';
+
+export interface DataTableVirtualOptions {
+  estimateRowHeight?: number;
+  overscan?: number;
+}
+
+/** Shared presentation props do not depend on TanStack or the caller's row type. */
+export interface DataTablePresentationProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  children?: ReactNode;
+  caption?: ReactNode;
+  size?: ControlSize;
+  bordered?: boolean;
+  striped?: boolean;
+  stickyHeader?: boolean;
+  maxHeight?: TableProps['maxHeight'];
+  minWidth?: TableProps['minWidth'];
+  loading?: boolean;
+  emptyContent?: ReactNode;
+  error?: ReactNode;
+  onRetry?: () => void;
+  selection?: false | 'single' | 'multiple';
+  selectAllMode?: 'page' | 'all';
+  resizable?: boolean;
+  columnReordering?: boolean;
+  virtual?: boolean | DataTableVirtualOptions;
+  pagination?: boolean;
+  tableRef?: Ref<HTMLTableElement>;
+}
+
+export interface DataTableSearchProps
+  extends Omit<
+    InputProps,
+    | 'value'
+    | 'defaultValue'
+    | 'onChange'
+    | 'type'
+    | 'visibilityToggle'
+    | 'visible'
+    | 'defaultVisible'
+    | 'onVisibleChange'
+    | 'visibilityIcon'
+  > {
+  columnId?: string;
+}
+export interface DataTableColumnVisibilityProps {
+  children?: ReactNode;
+  label?: string;
+}
+export interface DataTablePaginationProps
+  extends Omit<
+    PaginationProps,
+    'total' | 'current' | 'defaultCurrent' | 'pageSize' | 'defaultPageSize' | 'onChange'
+  > {
+  hasNextPage?: boolean;
+}
+export interface DataTableContentProps extends HTMLAttributes<HTMLDivElement> {}
diff --git a/packages/react/src/tabletanstack/index.ts b/packages/react/src/tabletanstack/index.ts
index 56563f8..7073671 100644
--- a/packages/react/src/tabletanstack/index.ts
+++ b/packages/react/src/tabletanstack/index.ts
@@ -4,6 +4,7 @@ export type {
   DataTableContentProps,
   DataTableDataProps,
   DataTablePaginationProps,
+  DataTablePresentationProps,
   DataTableProps,
   DataTableRowReorderInfo,
   DataTableSearchProps,
diff --git a/packages/react/src/tabletanstack/reordering.tsx b/packages/react/src/tabletanstack/reordering.tsx
index 4b70c3c..64799e9 100644
--- a/packages/react/src/tabletanstack/reordering.tsx
+++ b/packages/react/src/tabletanstack/reordering.tsx
@@ -20,8 +20,10 @@ import { GripVertical } from 'lucide-react';
 import { createContext, forwardRef, type ReactNode, useContext, useRef } from 'react';
 import { assignRef } from '../shared/field';
 import { useMotionEnabled } from '../shared/motion';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
-import { Table, type TableColumnHeaderProps, type TableRowProps } from '../table';
+import type { TableColumnHeaderProps, TableRowProps } from '../table';
+import { TableControl as Table } from '../table/table';
 
 type ReorderKind = 'row' | 'column';
 const key = (kind: ReorderKind, id: string) => `${kind}:${id}`;
@@ -84,6 +86,7 @@ export function ReorderScope({ enabled, ...props }: ReorderScopeProps & { enable
 
 function ActiveReorderScope({ id, disabled, onReorder, children }: ReorderScopeProps) {
   const t = useText();
+  const format = useFormattedText();
   const scrollable = useRef<Element | null>(null);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
@@ -134,19 +137,18 @@ function ActiveReorderScope({ id, disabled, onReorder, children }: ReorderScopeP
       }}
       accessibility={{
         screenReaderInstructions: {
-          draggable: t(
-            '按空格开始排序，方向键移动，再按空格确认，Escape 取消。',
-            'Press Space to start, arrow keys to move, Space to drop, and Escape to cancel.',
-          ),
+          draggable: t('drag.instructions'),
         },
         announcements: {
           onDragStart: ({ active }) =>
-            `${t('开始移动', 'Picked up')} ${active.data.current?.label ?? active.id}`,
+            format('drag.pickedUp', { label: String(active.data.current?.label ?? active.id) }),
           onDragOver: ({ over }) =>
-            over ? `${t('移至', 'Move to')} ${over.data.current?.label ?? over.id}` : undefined,
+            over
+              ? format('drag.moved', { label: String(over.data.current?.label ?? over.id) })
+              : t('drag.outside'),
           onDragEnd: ({ active }) =>
-            `${t('已放置', 'Dropped')} ${active.data.current?.label ?? active.id}`,
-          onDragCancel: () => t('已取消排序', 'Reordering cancelled'),
+            format('drag.dropped', { label: String(active.data.current?.label ?? active.id) }),
+          onDragCancel: () => t('drag.cancelled'),
         },
       }}
     >
diff --git a/packages/react/src/tabletanstack/tabletanstack.test.tsx b/packages/react/src/tabletanstack/tabletanstack.test.tsx
index 22b02dc..69c4025 100644
--- a/packages/react/src/tabletanstack/tabletanstack.test.tsx
+++ b/packages/react/src/tabletanstack/tabletanstack.test.tsx
@@ -372,10 +372,14 @@ describe('DataTable TanStack adapter', () => {
     render(
       <Harness manual pageCount={-1}>
         <DataTable.Content />
-        <DataTable.Pagination hasNextPage={false} />
+        <DataTable.Pagination hasNextPage={false} variant="ghost" size="sm" />
       </Harness>,
     );
     expect(screen.getByRole('button', { name: 'Next page' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next page' })).toHaveClass(
+      'leaf-button--ghost',
+      'leaf-button--sm',
+    );
   });
 
   it('does not truncate convenience-mode data when pagination is disabled', () => {
diff --git a/packages/react/src/tabletanstack/tabletanstack.tsx b/packages/react/src/tabletanstack/tabletanstack.tsx
index 78c046d..ee7e4ad 100644
--- a/packages/react/src/tabletanstack/tabletanstack.tsx
+++ b/packages/react/src/tabletanstack/tabletanstack.tsx
@@ -1,3 +1,21 @@
+import { useFormattedText } from '../shared/use-formatted-text';
+import type {
+  DataTableColumnVisibilityProps,
+  DataTableContentProps,
+  DataTablePaginationProps,
+  DataTablePresentationProps,
+  DataTableSearchProps,
+} from './defaults';
+
+export type {
+  DataTableColumnVisibilityProps,
+  DataTableContentProps,
+  DataTablePaginationProps,
+  DataTablePresentationProps,
+  DataTableSearchProps,
+  DataTableVirtualOptions,
+} from './defaults';
+
 import {
   type Cell,
   type Column,
@@ -21,7 +39,6 @@ import {
   Fragment,
   type HTMLAttributes,
   type ReactNode,
-  type Ref,
   type RefObject,
   useContext,
   useEffect,
@@ -30,19 +47,24 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Button } from '../button';
-import { Checkbox } from '../checkbox';
+import { ButtonControl } from '../button/button';
+import { CheckboxControl as Checkbox } from '../checkbox/checkbox';
+import {
+  mergeComponentProps,
+  useComponentProps,
+  useGenericComponentDefaults,
+} from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { FieldScope } from '../form/form';
-import { Input, type InputProps } from '../input';
-import { Pagination, type PaginationProps } from '../pagination';
-import { Popover } from '../popover';
-import { Radio } from '../radio';
+import { InputControl } from '../input/input';
+import { PaginationControl as Pagination } from '../pagination/pagination';
+import { PopoverControl as Popover } from '../popover/popover';
+import { RadioControl as Radio } from '../radio/radio';
 import { classes } from '../shared/classes';
 import { assignRef } from '../shared/field';
-import type { ControlSize } from '../shared/types';
 import { useText } from '../shared/use-text';
-import { Table, type TableCellProps, type TableProps, type TableRowProps } from '../table';
+import type { TableCellProps, TableRowProps } from '../table';
+import { TableControl as Table } from '../table/table';
 import {
   ReorderColumnHeader,
   ReorderHandle,
@@ -51,11 +73,6 @@ import {
   ReorderScope,
 } from './reordering';
 
-export interface DataTableVirtualOptions {
-  estimateRowHeight?: number;
-  overscan?: number;
-}
-
 export interface DataTableColumnMeta {
   label?: string;
   align?: 'start' | 'center' | 'end';
@@ -71,36 +88,19 @@ export interface DataTableRowReorderInfo<TData> {
   overRow: Row<TData>;
 }
 
-export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface DataTableProps<TData> extends DataTablePresentationProps {
   table: TanStackTable<TData>;
   data?: never;
   columns?: never;
   rowKey?: never;
   options?: never;
-  children?: ReactNode;
-  caption?: ReactNode;
-  size?: ControlSize;
-  bordered?: boolean;
-  striped?: boolean;
-  stickyHeader?: boolean;
-  maxHeight?: TableProps['maxHeight'];
-  minWidth?: TableProps['minWidth'];
-  loading?: boolean;
-  emptyContent?: ReactNode;
-  error?: ReactNode;
-  onRetry?: () => void;
-  selection?: false | 'single' | 'multiple';
-  selectAllMode?: 'page' | 'all';
+
   getRowLabel?: (row: Row<TData>) => string;
   renderExpandedRow?: (row: Row<TData>) => ReactNode;
   getRowProps?: (row: Row<TData>) => TableRowProps;
   getCellProps?: (cell: Cell<TData, unknown>) => TableCellProps;
-  resizable?: boolean;
-  columnReordering?: boolean;
+
   onRowReorder?: (info: DataTableRowReorderInfo<TData>) => void;
-  virtual?: boolean | DataTableVirtualOptions;
-  pagination?: boolean;
-  tableRef?: Ref<HTMLTableElement>;
 }
 
 export interface DataTableDataProps<TData>
@@ -112,37 +112,6 @@ export interface DataTableDataProps<TData>
   options?: Omit<TableOptions<TData>, 'data' | 'columns' | 'getCoreRowModel' | 'getRowId'>;
 }
 
-export interface DataTableSearchProps
-  extends Omit<
-    InputProps,
-    | 'value'
-    | 'defaultValue'
-    | 'onChange'
-    | 'type'
-    | 'visibilityToggle'
-    | 'visible'
-    | 'defaultVisible'
-    | 'onVisibleChange'
-    | 'visibilityIcon'
-  > {
-  columnId?: string;
-}
-
-export interface DataTableColumnVisibilityProps {
-  children?: ReactNode;
-  label?: string;
-}
-
-export interface DataTablePaginationProps
-  extends Omit<
-    PaginationProps,
-    'total' | 'current' | 'defaultCurrent' | 'pageSize' | 'defaultPageSize' | 'onChange'
-  > {
-  hasNextPage?: boolean;
-}
-
-export interface DataTableContentProps extends HTMLAttributes<HTMLDivElement> {}
-
 type DataTableContextValue = Omit<DataTableProps<unknown>, keyof HTMLAttributes<HTMLDivElement>> & {
   id: string;
   label?: string;
@@ -287,11 +256,11 @@ function DataTableRoot<TData>({
           >
             {children ?? (
               <>
-                <DataTableContent />
+                <DataTableContentControl />
                 {pagination && (
-                  <DataTableFooter>
-                    <DataTablePagination />
-                  </DataTableFooter>
+                  <DataTableFooterControl>
+                    <DataTablePaginationControl />
+                  </DataTableFooterControl>
                 )}
               </>
             )}
@@ -302,23 +271,25 @@ function DataTableRoot<TData>({
   );
 }
 
-export function DataTableToolbar({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+export function DataTableToolbar(rawProps: HTMLAttributes<HTMLDivElement>) {
+  const { className, ...props } = useComponentProps('DataTableToolbar', rawProps);
   return <div {...props} className={classes('leaf-data-table__toolbar', className)} />;
 }
 
-export function DataTableFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+export function DataTableFooterControl({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return <div {...props} className={classes('leaf-data-table__footer', className)} />;
 }
 
-export function DataTableSearch({ columnId, className, ...props }: DataTableSearchProps) {
+export function DataTableSearch(rawProps: DataTableSearchProps) {
+  const { columnId, className, ...props } = useComponentProps('DataTableSearch', rawProps);
   const { table, loading, size } = useDataTable();
   const t = useText();
   const column = columnId ? table.getColumn(columnId) : undefined;
   const value = columnId ? column?.getFilterValue() : table.getState().globalFilter;
   return (
-    <Input
-      aria-label={t('搜索表格', 'Search table')}
-      placeholder={t('搜索表格', 'Search table')}
+    <InputControl
+      aria-label={t('dataTable.searchTable')}
+      placeholder={t('dataTable.searchTable')}
       prefix={<Search size={16} />}
       allowClear
       size={size}
@@ -342,10 +313,11 @@ function columnLabel(column: Column<unknown, unknown>) {
   );
 }
 
-export function DataTableColumnVisibility({ children, label }: DataTableColumnVisibilityProps) {
+export function DataTableColumnVisibility(rawProps: DataTableColumnVisibilityProps) {
+  const { children, label } = useComponentProps('DataTableColumnVisibility', rawProps);
   const { table, loading, size } = useDataTable();
   const t = useText();
-  const title = label ?? t('显示列', 'Columns');
+  const title = label ?? t('dataTable.columns');
   return (
     <Popover
       placement="bottom-end"
@@ -367,9 +339,14 @@ export function DataTableColumnVisibility({ children, label }: DataTableColumnVi
         </FieldScope>
       }
     >
-      <Button size={size} variant="outline" startIcon={<Columns3 size={16} />} disabled={loading}>
+      <ButtonControl
+        size={size}
+        variant="outline"
+        startIcon={<Columns3 size={16} />}
+        disabled={loading}
+      >
         {children ?? title}
-      </Button>
+      </ButtonControl>
     </Popover>
   );
 }
@@ -396,14 +373,14 @@ function pinProps(column: Column<unknown, unknown>) {
 function ResizeHandle({ header }: { header: Header<unknown, unknown> }) {
   const { table, loading } = useDataTable();
   const { direction } = useLeafConfig();
-  const t = useText();
+  const format = useFormattedText();
   const column = header.column;
   const min = column.columnDef.minSize ?? 20;
   const max = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
   return (
     <hr
       tabIndex={loading ? -1 : 0}
-      aria-label={`${t('调整列宽', 'Resize column')}: ${columnLabel(column)}`}
+      aria-label={format('dataTable.resizeColumn', { label: columnLabel(column) })}
       aria-orientation="vertical"
       aria-valuemin={min}
       aria-valuemax={max}
@@ -436,18 +413,14 @@ function SelectionHeader() {
   const { table, selection, selectAllMode, loading } = useDataTable();
   const t = useText();
   if (selection !== 'multiple')
-    return <span className="leaf-table__sr-only">{t('选择行', 'Select rows')}</span>;
+    return <span className="leaf-table__sr-only">{t('dataTable.selectRows')}</span>;
   const page = selectAllMode === 'page';
   const selectable = (
     page ? table.getRowModel() : table.getPrePaginationRowModel()
   ).flatRows.filter((row) => row.getCanSelect());
   return (
     <Checkbox
-      aria-label={
-        page
-          ? t('选择本页所有行', 'Select all rows on this page')
-          : t('选择所有行', 'Select all rows')
-      }
+      aria-label={page ? t('dataTable.selectAllRowsOnThisPage') : t('dataTable.selectAllRows')}
       checked={page ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected()}
       indeterminate={page ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected()}
       disabled={loading || !selectable.length}
@@ -472,7 +445,7 @@ function DataRow({
   const config = useDataTable();
   const { id, selection, loading, getRowLabel, renderExpandedRow, getRowProps, getCellProps } =
     config;
-  const t = useText();
+  const format = useFormattedText();
   const detailsId = `${id}-detail-${encodeURIComponent(row.id)}`;
   const label = getRowLabel?.(row) ?? row.id;
   const expandable = config.expandable;
@@ -516,7 +489,7 @@ function DataRow({
       >
         {config.rowReordering && (
           <Table.Cell className="leaf-data-table__utility">
-            <ReorderHandle label={`${t('移动行', 'Reorder row')}: ${label}`} />
+            <ReorderHandle label={format('dataTable.reorderRow', { label })} />
           </Table.Cell>
         )}
         {selection && (
@@ -525,14 +498,14 @@ function DataRow({
               <Radio
                 name={`${id}-selection`}
                 form={`${id}-detached-selection`}
-                aria-label={`${t('选择行', 'Select row')}: ${label}`}
+                aria-label={format('dataTable.selectRow', { label })}
                 checked={row.getIsSelected()}
                 disabled={loading || !row.getCanSelect()}
                 onChange={() => config.table.setRowSelection({ [row.id]: true })}
               />
             ) : (
               <Checkbox
-                aria-label={`${t('选择行', 'Select row')}: ${label}`}
+                aria-label={format('dataTable.selectRow', { label })}
                 checked={row.getIsSelected()}
                 indeterminate={row.getIsSomeSelected()}
                 disabled={loading || !row.getCanSelect()}
@@ -547,7 +520,10 @@ function DataRow({
               <button
                 type="button"
                 className="leaf-data-table__expand"
-                aria-label={`${row.getIsExpanded() ? t('收起行', 'Collapse row') : t('展开行', 'Expand row')}: ${label}`}
+                aria-label={format(
+                  row.getIsExpanded() ? 'dataTable.collapseRow' : 'dataTable.expandRow',
+                  { label },
+                )}
                 aria-expanded={row.getIsExpanded()}
                 aria-controls={renderExpandedRow && !row.subRows.length ? detailsId : undefined}
                 disabled={loading}
@@ -699,7 +675,7 @@ function VirtualRows({
   );
 }
 
-export function DataTableContent({ className, ...props }: DataTableContentProps) {
+export function DataTableContentControl({ className, ...props }: DataTableContentProps) {
   const config = useDataTable();
   const {
     table,
@@ -714,6 +690,7 @@ export function DataTableContent({ className, ...props }: DataTableContentProps)
     virtual,
   } = config;
   const t = useText();
+  const format = useFormattedText();
   const viewport = useRef<HTMLDivElement>(null);
   const element = useRef<HTMLTableElement>(null);
   const [focusedRowId, setFocusedRowId] = useState<string>();
@@ -796,7 +773,7 @@ export function DataTableContent({ className, ...props }: DataTableContentProps)
               <Table.Row key={group.id} aria-rowindex={virtual ? groupIndex + 1 : undefined}>
                 {groupIndex === 0 && config.rowReordering && (
                   <Table.ColumnHeader rowSpan={headers.length} className="leaf-data-table__utility">
-                    <span className="leaf-table__sr-only">{t('移动行', 'Reorder rows')}</span>
+                    <span className="leaf-table__sr-only">{t('dataTable.reorderRows')}</span>
                   </Table.ColumnHeader>
                 )}
                 {groupIndex === 0 && selection && (
@@ -806,7 +783,7 @@ export function DataTableContent({ className, ...props }: DataTableContentProps)
                 )}
                 {groupIndex === 0 && expandable && (
                   <Table.ColumnHeader rowSpan={headers.length} className="leaf-data-table__utility">
-                    <span className="leaf-table__sr-only">{t('展开行', 'Expand rows')}</span>
+                    <span className="leaf-table__sr-only">{t('dataTable.expandRows')}</span>
                   </Table.ColumnHeader>
                 )}
                 {group.headers.map((header) => {
@@ -820,10 +797,10 @@ export function DataTableContent({ className, ...props }: DataTableContentProps)
                   const nextSort = column.getNextSortingOrder();
                   const sortLabel =
                     nextSort === 'asc'
-                      ? t('升序排序', 'Sort ascending')
+                      ? t('dataTable.sortAscending')
                       : nextSort === 'desc'
-                        ? t('降序排序', 'Sort descending')
-                        : t('取消排序', 'Clear sorting');
+                        ? t('dataTable.sortDescending')
+                        : t('dataTable.clearSorting');
                   return (
                     <ReorderColumnHeader
                       key={header.id}
@@ -850,7 +827,9 @@ export function DataTableContent({ className, ...props }: DataTableContentProps)
                       <div className="leaf-data-table__heading">
                         {config.reorderColumns && !header.isPlaceholder && (
                           <ReorderHandle
-                            label={`${t('移动列', 'Reorder column')}: ${columnLabel(column)}`}
+                            label={format('dataTable.reorderColumn', {
+                              label: columnLabel(column),
+                            })}
                           />
                         )}
                         {header.isPlaceholder ? null : canSort ? (
@@ -939,7 +918,7 @@ export function DataTableContent({ className, ...props }: DataTableContentProps)
   );
 }
 
-export function DataTablePagination({
+export function DataTablePaginationControl({
   className,
   hasNextPage,
   ...props
@@ -951,26 +930,26 @@ export function DataTablePagination({
   if (pages < 0) {
     return (
       <nav
-        aria-label={t('分页', 'Pagination')}
+        aria-label={t('pagination.label')}
         className={classes('leaf-data-table__pagination', className)}
       >
-        <Button
-          size={size}
-          variant="outline"
+        <ButtonControl
+          size={props.size ?? size}
+          variant={props.variant ?? 'outline'}
           disabled={props.disabled || loading || !table.getCanPreviousPage()}
           onClick={() => table.previousPage()}
         >
-          {t('上一页', 'Previous page')}
-        </Button>
+          {t('pagination.previousPage')}
+        </ButtonControl>
         <span>{pageIndex + 1}</span>
-        <Button
-          size={size}
-          variant="outline"
+        <ButtonControl
+          size={props.size ?? size}
+          variant={props.variant ?? 'outline'}
           disabled={props.disabled || loading || !(hasNextPage ?? table.getCanNextPage())}
           onClick={() => table.nextPage()}
         >
-          {t('下一页', 'Next page')}
-        </Button>
+          {t('pagination.nextPage')}
+        </ButtonControl>
       </nav>
     );
   }
@@ -1028,7 +1007,11 @@ function ManagedDataTable<TData>({
   return <DataTableRoot {...props} table={table} />;
 }
 
-function DataTableComponent<TData>(props: DataTableProps<TData> | DataTableDataProps<TData>) {
+function DataTableComponent<TData>(rawProps: DataTableProps<TData> | DataTableDataProps<TData>) {
+  const props = mergeComponentProps<DataTableProps<TData> | DataTableDataProps<TData>>(
+    useGenericComponentDefaults('DataTable'),
+    rawProps,
+  );
   return props.table ? (
     <DataTableRoot {...(props as DataTableProps<TData>)} />
   ) : (
@@ -1044,3 +1027,18 @@ export const DataTable = Object.assign(DataTableComponent, {
   Footer: DataTableFooter,
   Pagination: DataTablePagination,
 });
+
+export function DataTableContent(rawProps: DataTableContentProps) {
+  const props = useComponentProps('DataTableContent', rawProps);
+  return <DataTableContentControl {...props} />;
+}
+
+export function DataTablePagination(rawProps: DataTablePaginationProps) {
+  const props = useComponentProps('DataTablePagination', rawProps);
+  return <DataTablePaginationControl {...props} />;
+}
+
+export function DataTableFooter(rawProps: HTMLAttributes<HTMLDivElement>) {
+  const props = useComponentProps('DataTableFooter', rawProps);
+  return <DataTableFooterControl {...props} />;
+}
diff --git a/packages/react/src/tabs/navigation-motion.test.tsx b/packages/react/src/tabs/navigation-motion.test.tsx
index 59357aa..66f5724 100644
--- a/packages/react/src/tabs/navigation-motion.test.tsx
+++ b/packages/react/src/tabs/navigation-motion.test.tsx
@@ -33,22 +33,32 @@ function animationRecorder() {
 describe('Navigation motion contracts', () => {
   it('keeps one indicator and uses local geometry under external scale and negative RTL scroll offsets', async () => {
     let secondWidth = 120;
+    let scrollLeft = -40;
+    vi.spyOn(Element.prototype, 'scrollLeft', 'get').mockImplementation(function (this: Element) {
+      return this.classList.contains('leaf-tabs__list') ? scrollLeft : 0;
+    });
     vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(function (
       this: HTMLElement,
     ) {
-      return this.classList.contains('leaf-tabs__list') ? 300 : 100;
+      if (this.classList.contains('leaf-tabs__list')) return 150;
+      if (this.classList.contains('leaf-tabs__track')) return secondWidth + 82;
+      return 100;
     });
     vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(34);
     vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (
       this: HTMLElement,
     ) {
-      if (this.classList.contains('leaf-tabs__list')) {
-        Object.defineProperty(this, 'scrollLeft', { configurable: true, value: -40 });
-        Object.defineProperty(this, 'clientLeft', { configurable: true, value: 1 });
-        return new DOMRect(100, 80, 240, 27.2);
-      }
-      if (this.dataset.tabKey === 'first') return new DOMRect(276, 80, 56, 27.2);
-      if (this.dataset.tabKey === 'second') return new DOMRect(172, 80, secondWidth * 0.8, 27.2);
+      if (this.classList.contains('leaf-tabs__list')) return new DOMRect(100, 80, 120, 28.8);
+      // The list scrolls; the indicator and entries share the inner track's local coordinates.
+      // Model a 150px list with 1px borders, a 70px first tab and a 12px gap at 0.8 scale.
+      const trackWidth = secondWidth + 82;
+      const trackLeft = 100 + (1 + 148 - trackWidth - scrollLeft) * 0.8;
+      if (this.classList.contains('leaf-tabs__track'))
+        return new DOMRect(trackLeft, 80.8, trackWidth * 0.8, 27.2);
+      if (this.dataset.tabKey === 'first')
+        return new DOMRect(trackLeft + (secondWidth + 12) * 0.8, 80.8, 56, 27.2);
+      if (this.dataset.tabKey === 'second')
+        return new DOMRect(trackLeft, 80.8, secondWidth * 0.8, 27.2);
       return new DOMRect(0, 0, 300, 100);
     });
     const { container } = render(
@@ -63,47 +73,38 @@ describe('Navigation motion contracts', () => {
       </ConfigProvider>,
     );
     const marker = container.querySelector<HTMLElement>('.leaf-tabs__indicator');
-    expect(marker?.style.getPropertyValue('--leaf-indicator-x')).toBe('179px');
-    expect(marker?.style.getPropertyValue('--leaf-indicator-width')).toBe('70px');
-    expect(marker?.style.getPropertyValue('--leaf-indicator-height')).toBe('34px');
+    const geometry = (property: 'x' | 'y' | 'width' | 'height') =>
+      Number.parseFloat(marker?.style.getPropertyValue(`--leaf-indicator-${property}`) ?? '');
+    expect(geometry('x')).toBeCloseTo(132);
+    expect(geometry('y')).toBeCloseTo(0);
+    expect(geometry('width')).toBeCloseTo(70);
+    expect(geometry('height')).toBeCloseTo(34);
     await userEvent.type(screen.getByRole('textbox'), 'Saved draft');
     fireEvent.click(screen.getByRole('tab', { name: 'Second' }));
-    expect(marker?.style.getPropertyValue('--leaf-indicator-x')).toBe('49px');
-    expect(marker?.style.getPropertyValue('--leaf-indicator-width')).toBe('120px');
+    expect(geometry('x')).toBeCloseTo(0);
+    expect(geometry('width')).toBeCloseTo(120);
     expect(marker).toHaveAttribute('data-animate', 'true');
     fireEvent.click(screen.getByRole('tab', { name: 'First' }));
     fireEvent.click(screen.getByRole('tab', { name: 'Second' }));
     expect(container.querySelector('.leaf-tabs__indicator')).toBe(marker);
     expect(container.querySelectorAll('.leaf-tabs__indicator')).toHaveLength(1);
+    scrollLeft = -20;
+    const list = screen.getByRole('tablist');
+    fireEvent.scroll(list);
+    expect(list.scrollLeft).toBe(-20);
+    expect(geometry('x')).toBeCloseTo(0);
     secondWidth = 155;
     fireEvent(window, new Event('resize'));
-    await waitFor(() =>
-      expect(marker?.style.getPropertyValue('--leaf-indicator-width')).toBe('155px'),
-    );
+    await waitFor(() => expect(geometry('width')).toBeCloseTo(155));
     expect(marker).toHaveAttribute('data-animate', 'false');
     fireEvent.click(screen.getByRole('tab', { name: 'First' }));
+    expect(geometry('x')).toBeCloseTo(167);
     expect(screen.getByRole('textbox')).toHaveValue('Saved draft');
   });
 
-  it('animates natural tab heights under external scale after earlier animations have finished', () => {
-    const { recorded } = animationRecorder();
-    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function (
-      this: HTMLElement,
-    ) {
-      if (this.classList.contains('leaf-tabs__panels'))
-        return this.querySelector(':not([hidden]).leaf-tabs__panel')?.textContent === 'Tall panel'
-          ? 220
-          : 90;
-      return 34;
-    });
-    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (
-      this: HTMLElement,
-    ) {
-      if (this.classList.contains('leaf-tabs__panels'))
-        return new DOMRect(0, 0, 240, this.offsetHeight * 0.8);
-      return new DOMRect(0, 0, 100, 34);
-    });
-    const { container } = render(
+  it('switches tab content immediately without animating panels or their container', () => {
+    const { animate } = animationRecorder();
+    render(
       <Tabs
         overflow={false}
         items={[
@@ -112,22 +113,11 @@ describe('Navigation motion contracts', () => {
         ]}
       />,
     );
-    expect(recorded).toHaveLength(0);
     fireEvent.click(screen.getByRole('tab', { name: 'Tall' }));
-    const firstResize = recorded.find(
-      (entry) => entry.node === container.querySelector('.leaf-tabs__panels'),
-    );
-    expect(firstResize?.keyframes).toEqual([{ height: '90px' }, { height: '220px' }]);
-    for (const entry of recorded)
-      Object.defineProperty(entry.animation, 'playState', {
-        value: 'finished',
-        configurable: true,
-      });
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('Tall panel');
     fireEvent.click(screen.getByRole('tab', { name: 'Short' }));
-    const resizes = recorded.filter(
-      (entry) => entry.node === container.querySelector('.leaf-tabs__panels'),
-    );
-    expect(resizes.at(-1)?.keyframes).toEqual([{ height: '220px' }, { height: '90px' }]);
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('Short panel');
+    expect(animate).not.toHaveBeenCalled();
   });
 
   it('keeps RTL segmented keyboard selection and submitted form value aligned', async () => {
diff --git a/packages/react/src/tabs/tabs.scss b/packages/react/src/tabs/tabs.scss
index 0657515..fd6d2e6 100644
--- a/packages/react/src/tabs/tabs.scss
+++ b/packages/react/src/tabs/tabs.scss
@@ -12,16 +12,22 @@
     gap: 12px;
   }
   &__list {
-    position: relative;
-    isolation: isolate;
-    display: flex;
     flex: 1;
-    gap: 12px;
     overflow: auto;
     min-width: 0;
     scrollbar-width: thin;
     box-shadow: inset 0 -1px 0 var(--leaf-color-divider);
   }
+  &__track {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    width: max-content;
+    min-width: 100%;
+    gap: 12px;
+    // The moving background must never enlarge the tablist's scrollable area.
+    overflow: clip;
+  }
   &__indicator {
     position: absolute;
     top: 0;
@@ -66,18 +72,16 @@
     background: transparent;
     font: inherit;
     cursor: pointer;
-    transition:
-      color var(--leaf-motion-fast) var(--leaf-motion-easing),
-      transform var(--leaf-motion-fast) var(--leaf-motion-easing);
+    transition: color var(--leaf-motion-fast) var(--leaf-motion-easing);
     &[aria-selected='true'] {
       color: var(--leaf-color-primary);
       font-weight: var(--leaf-font-weight);
     }
     &:hover:not(:disabled):not([aria-selected='true']) {
-      color: var(--leaf-color-text);
+      color: var(--leaf-color-primary-hover, var(--leaf-color-primary));
     }
-    &:active:not(:disabled) {
-      opacity: 0.8;
+    &:active:not(:disabled):not([aria-selected='true']) {
+      color: var(--leaf-color-primary-active, var(--leaf-color-primary));
     }
     &:disabled {
       opacity: 0.45;
@@ -120,15 +124,11 @@
     cursor: pointer;
     transition:
       color var(--leaf-motion-fast) var(--leaf-motion-easing),
-      background-color var(--leaf-motion-fast) var(--leaf-motion-easing),
-      transform var(--leaf-motion-fast) var(--leaf-motion-easing);
+      background-color var(--leaf-motion-fast) var(--leaf-motion-easing);
     &:hover:not(:disabled) {
       color: var(--leaf-color-text);
       background: var(--leaf-color-surface-muted);
     }
-    &:active:not(:disabled) {
-      transform: scale(0.9);
-    }
     &:focus-visible {
       @include mixins.focus-ring;
     }
@@ -154,11 +154,14 @@
     margin-inline-start: auto;
     flex-shrink: 0;
   }
+  & &__action {
+    align-self: stretch;
+    flex-shrink: 0;
+    width: auto;
+    aspect-ratio: 1;
+  }
   &__panels {
     min-width: 0;
-    &[data-transitioning] {
-      overflow: clip;
-    }
   }
   &__panel {
     padding-block: 18px;
@@ -175,13 +178,35 @@
     @include geometry.nested-surface(
       tabs,
       var(--leaf-component-tabs-radius, var(--leaf-radius)),
-      var(--leaf-component-tabs-padding, 3px)
+      var(--leaf-component-tabs-padding, var(--leaf-tabs-card-padding, 4px))
     );
-    gap: 3px;
+    flex: 0 1 auto;
+    box-sizing: border-box;
+    --leaf-tabs-card-tab-height: max(
+      1px,
+      calc(
+        var(--leaf-current-control-height) - var(--leaf-surface-padding-top) - var(
+            --leaf-surface-padding-bottom
+          ) -
+          2px
+      )
+    );
+    min-height: var(--leaf-current-control-height);
     border: 1px solid var(--leaf-color-border);
     background: var(--leaf-color-surface-muted);
     box-shadow: none;
   }
+  &--card &__track {
+    gap: 2px;
+    // Include the list's inset in the clip box so the raised selection can cast its shadow.
+    // Negative margins keep the existing tab geometry and scroll range unchanged.
+    box-sizing: border-box;
+    min-width: calc(100% + var(--leaf-surface-padding-left) + var(--leaf-surface-padding-right));
+    padding: var(--leaf-surface-padding-top) var(--leaf-surface-padding-right)
+      var(--leaf-surface-padding-bottom) var(--leaf-surface-padding-left);
+    margin: calc(-1 * var(--leaf-surface-padding-top)) calc(-1 * var(--leaf-surface-padding-right))
+      calc(-1 * var(--leaf-surface-padding-bottom)) calc(-1 * var(--leaf-surface-padding-left));
+  }
   &--card &__indicator {
     border-radius: var(--leaf-surface-inner-radius);
     background: var(--leaf-color-surface-raised);
@@ -190,11 +215,8 @@
       display: none;
     }
   }
-  &--card &__tab {
-    border-radius: var(--leaf-surface-inner-radius);
-    padding-inline: 14px;
-  }
   &--card &__entry {
+    height: var(--leaf-tabs-card-tab-height);
     border-radius: var(--leaf-surface-inner-radius);
   }
   &--bottom {
@@ -214,9 +236,12 @@
       align-items: stretch;
     }
     .leaf-tabs__list {
+      box-shadow: none;
+    }
+    .leaf-tabs__track {
       flex-direction: column;
+      width: auto;
       gap: 4px;
-      box-shadow: none;
     }
     .leaf-tabs__tab {
       justify-content: flex-start;
@@ -238,6 +263,10 @@
     .leaf-tabs__extra {
       margin: auto 12px 8px;
     }
+    .leaf-tabs__action {
+      align-self: center;
+      width: var(--leaf-current-control-height);
+    }
   }
   &--right {
     .leaf-tabs__header {
@@ -248,6 +277,15 @@
       inset-inline-end: auto;
     }
   }
+  &--card &__tab {
+    height: var(--leaf-tabs-card-tab-height);
+    min-height: var(--leaf-tabs-card-tab-height);
+    border-radius: var(--leaf-surface-inner-radius);
+    padding: 0 12px;
+    // Intrinsic bars must not resize when selection changes a label's weight.
+    font-weight: var(--leaf-font-weight);
+    line-height: 1.5;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .leaf-tabs__tab,
@@ -261,6 +299,7 @@
   --leaf-current-font-size: var(--leaf-component-tabs-font-size, var(--leaf-font-size));
 }
 .leaf-tabs--sm {
+  --leaf-tabs-card-padding: 2px;
   --leaf-current-control-height: var(
     --leaf-component-tabs-height-sm,
     var(--leaf-control-height-sm)
@@ -268,6 +307,7 @@
   --leaf-current-font-size: var(--leaf-font-size-sm);
 }
 .leaf-tabs--lg {
+  --leaf-tabs-card-padding: 5px;
   --leaf-current-control-height: var(
     --leaf-component-tabs-height-lg,
     var(--leaf-control-height-lg)
diff --git a/packages/react/src/tabs/tabs.test.tsx b/packages/react/src/tabs/tabs.test.tsx
index b39e63a..8404bd5 100644
--- a/packages/react/src/tabs/tabs.test.tsx
+++ b/packages/react/src/tabs/tabs.test.tsx
@@ -10,6 +10,45 @@ const items = [
   { key: 'two', label: 'Second', children: 'Second content' },
 ];
 describe('Tabs', () => {
+  it('removes the whole surface after the last close and restores it when items are added', async () => {
+    const onAdd = vi.fn();
+    function Example() {
+      const initial = items
+        .filter((item) => !item.disabled)
+        .map((item) => ({ ...item, closable: true }));
+      const [list, setList] = useState(initial);
+      return (
+        <>
+          <div data-testid="tabs-host">
+            <Tabs
+              items={list}
+              type="card"
+              onAdd={onAdd}
+              extra={<span>Extra actions</span>}
+              onClose={(key) => setList((current) => current.filter((item) => item.key !== key))}
+            />
+          </div>
+          <button type="button" onClick={() => setList(initial)}>
+            Restore tabs
+          </button>
+        </>
+      );
+    }
+    render(<Example />);
+    await userEvent.click(screen.getByRole('button', { name: '关闭标签页 First' }));
+    await userEvent.click(screen.getByRole('button', { name: '关闭标签页 Second' }));
+    expect(screen.getByTestId('tabs-host')).toBeEmptyDOMElement();
+    expect(screen.queryByRole('tablist')).toBeNull();
+    expect(screen.queryByText('Extra actions')).toBeNull();
+    expect(onAdd).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByRole('button', { name: 'Restore tabs' }));
+    expect(screen.getAllByRole('tab')).toHaveLength(2);
+    await userEvent.click(screen.getByRole('tab', { name: 'First' }));
+    expect(screen.getByRole('tab', { name: 'First' })).toHaveAttribute('aria-selected', 'true');
+    await userEvent.click(screen.getByRole('tab', { name: 'Second' }));
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('Second content');
+  });
+
   it('closes an active tab and moves selection and focus to a surviving tab', async () => {
     function Example() {
       const [list, setList] = useState(items.map((item) => ({ ...item, closable: true })));
diff --git a/packages/react/src/tabs/tabs.tsx b/packages/react/src/tabs/tabs.tsx
index e201bd6..08c8a29 100644
--- a/packages/react/src/tabs/tabs.tsx
+++ b/packages/react/src/tabs/tabs.tsx
@@ -22,21 +22,21 @@ import {
   type ReactNode,
   useEffect,
   useId,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
-import { Dropdown } from '../dropdown';
+import { DropdownControl as Dropdown } from '../dropdown/dropdown';
 import { classes } from '../shared/classes';
-import { animateMotion, useMotionEnabled } from '../shared/motion';
+import { useMotionEnabled } from '../shared/motion';
 import type { ControlSize } from '../shared/types';
+import { useDragAnnouncements } from '../shared/use-drag-announcements';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
 import { useMovingIndicator } from './use-moving-indicator';
 
-const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
-
 export interface TabItem {
   key: string;
   label: ReactNode;
@@ -63,7 +63,7 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
   sortable?: boolean;
   onReorder?: (items: TabItem[]) => void;
 }
-export function Tabs({
+export function TabsControl({
   items,
   activeKey,
   defaultActiveKey,
@@ -84,8 +84,9 @@ export function Tabs({
   'aria-label': label,
   ...props
 }: TabsProps) {
-  const { messages, direction } = useLeafConfig();
+  const { direction } = useLeafConfig();
   const t = useText();
+  const format = useFormattedText();
   const enabled = items.filter((item) => !item.disabled);
   const [internal, setInternal] = useState(defaultActiveKey ?? enabled[0]?.key);
   const requested = activeKey ?? internal;
@@ -96,22 +97,14 @@ export function Tabs({
   if (selected && !visited.includes(selected)) setVisited([...visited, selected]);
   const id = useId();
   const list = useRef<HTMLDivElement>(null);
+  const track = useRef<HTMLDivElement>(null);
   const indicator = useRef<HTMLSpanElement>(null);
-  const panels = useRef<HTMLDivElement>(null);
-  const motion = useMotionEnabled();
   useMovingIndicator(
-    list,
+    track,
     indicator,
     '[data-leaf-indicator-item][data-active="true"]',
     `${selected}-${placement}-${type}-${direction}`,
-  );
-  useTabPanelMotion(
-    panels,
-    selected,
-    items.findIndex((item) => item.key === selected),
-    placement,
-    direction,
-    motion,
+    items.length > 0,
   );
   const header = useRef<HTMLDivElement>(null);
   const [overflowKeys, setOverflowKeys] = useState<string[]>([]);
@@ -130,7 +123,11 @@ export function Tabs({
       const more = container.querySelector<HTMLElement>('[data-tabs-more]');
       const fullSize =
         (horizontal ? node.clientWidth : node.clientHeight) +
-        (more ? (horizontal ? more.offsetWidth : more.offsetHeight) + 16 : 0);
+        (more
+          ? (horizontal ? more.offsetWidth : more.offsetHeight) +
+            (Number.parseFloat(getComputedStyle(container)[horizontal ? 'columnGap' : 'rowGap']) ||
+              0)
+          : 0);
       const total = horizontal ? node.scrollWidth : node.scrollHeight;
       const rect = node.getBoundingClientRect();
       const keys =
@@ -168,6 +165,7 @@ export function Tabs({
     if (activeKey === undefined) setInternal(key);
     if (key !== selected) onChange?.(key);
   };
+  if (items.length === 0) return null;
   return (
     <div
       {...props}
@@ -193,99 +191,103 @@ export function Tabs({
             }
             className="leaf-tabs__list"
           >
-            <span ref={indicator} className="leaf-tabs__indicator" aria-hidden="true" />
-            <SortableContext
-              items={items.map((item) => item.key)}
-              strategy={
-                placement === 'top' || placement === 'bottom'
-                  ? horizontalListSortingStrategy
-                  : verticalListSortingStrategy
-              }
-            >
-              {items.map((item, index) => (
-                <TabEntry
-                  item={item}
-                  sortable={sorting}
-                  className="leaf-tabs__entry"
-                  key={item.key}
-                  data-active={item.key === selected || undefined}
-                  data-leaf-indicator-item=""
-                >
-                  <button
-                    id={`${id}-tab-${index}`}
-                    type="button"
-                    role="tab"
-                    aria-selected={item.key === selected}
-                    aria-controls={`${id}-panel-${index}`}
-                    disabled={item.disabled}
-                    tabIndex={item.key === focusKey ? 0 : -1}
-                    className="leaf-tabs__tab"
-                    onFocus={() => setFocused(item.key)}
-                    onClick={() => choose(item.key)}
-                    onKeyDown={(event) => {
-                      let next: string | undefined;
-                      const position = enabled.findIndex((entry) => entry.key === item.key);
-                      const forward =
-                        placement === 'left' || placement === 'right'
-                          ? 'ArrowDown'
-                          : direction === 'rtl'
-                            ? 'ArrowLeft'
-                            : 'ArrowRight';
-                      const backward =
-                        placement === 'left' || placement === 'right'
-                          ? 'ArrowUp'
-                          : direction === 'rtl'
-                            ? 'ArrowRight'
-                            : 'ArrowLeft';
-                      if (event.key === forward)
-                        next = enabled[(position + 1) % enabled.length]?.key;
-                      else if (event.key === backward)
-                        next = enabled[(position - 1 + enabled.length) % enabled.length]?.key;
-                      else if (event.key === 'Home') next = enabled[0]?.key;
-                      else if (event.key === 'End') next = enabled.at(-1)?.key;
-                      if (next !== undefined) {
-                        event.preventDefault();
-                        setFocused(next);
-                        const nextIndex = items.findIndex((entry) => entry.key === next);
-                        list.current
-                          ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)
-                          ?.focus();
-                        if (activationMode === 'automatic') choose(next);
-                      }
-                    }}
+            <div ref={track} className="leaf-tabs__track">
+              <span ref={indicator} className="leaf-tabs__indicator" aria-hidden="true" />
+              <SortableContext
+                items={items.map((item) => item.key)}
+                strategy={
+                  placement === 'top' || placement === 'bottom'
+                    ? horizontalListSortingStrategy
+                    : verticalListSortingStrategy
+                }
+              >
+                {items.map((item, index) => (
+                  <TabEntry
+                    item={item}
+                    sortable={sorting}
+                    className="leaf-tabs__entry"
+                    key={item.key}
+                    data-active={item.key === selected || undefined}
+                    data-leaf-indicator-item=""
                   >
-                    {item.icon && <span aria-hidden="true">{item.icon}</span>}
-                    {item.label}
-                  </button>
-                  {item.closable && (
                     <button
+                      id={`${id}-tab-${index}`}
                       type="button"
-                      className="leaf-tabs__close"
-                      disabled={item.disabled || !onClose}
-                      aria-label={`${messages.closeTab} ${typeof item.label === 'string' ? item.label : item.key}`}
-                      onClick={(event) => {
-                        onClose?.(item.key, event);
-                        if (event.defaultPrevented) return;
+                      role="tab"
+                      aria-selected={item.key === selected}
+                      aria-controls={`${id}-panel-${index}`}
+                      disabled={item.disabled}
+                      tabIndex={item.key === focusKey ? 0 : -1}
+                      className="leaf-tabs__tab"
+                      onFocus={() => setFocused(item.key)}
+                      onClick={() => choose(item.key)}
+                      onKeyDown={(event) => {
+                        let next: string | undefined;
                         const position = enabled.findIndex((entry) => entry.key === item.key);
-                        const next =
-                          item.key === selected
-                            ? (enabled[position + 1] ?? enabled[position - 1])
-                            : enabled.find((entry) => entry.key === selected);
-                        if (next) {
-                          if (item.key === selected) choose(next.key);
-                          const nextIndex = items.findIndex((entry) => entry.key === next.key);
+                        const forward =
+                          placement === 'left' || placement === 'right'
+                            ? 'ArrowDown'
+                            : direction === 'rtl'
+                              ? 'ArrowLeft'
+                              : 'ArrowRight';
+                        const backward =
+                          placement === 'left' || placement === 'right'
+                            ? 'ArrowUp'
+                            : direction === 'rtl'
+                              ? 'ArrowRight'
+                              : 'ArrowLeft';
+                        if (event.key === forward)
+                          next = enabled[(position + 1) % enabled.length]?.key;
+                        else if (event.key === backward)
+                          next = enabled[(position - 1 + enabled.length) % enabled.length]?.key;
+                        else if (event.key === 'Home') next = enabled[0]?.key;
+                        else if (event.key === 'End') next = enabled.at(-1)?.key;
+                        if (next !== undefined) {
+                          event.preventDefault();
+                          setFocused(next);
+                          const nextIndex = items.findIndex((entry) => entry.key === next);
                           list.current
                             ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)
                             ?.focus();
+                          if (activationMode === 'automatic') choose(next);
                         }
                       }}
                     >
-                      <X size={13} aria-hidden="true" />
+                      {item.icon && <span aria-hidden="true">{item.icon}</span>}
+                      {item.label}
                     </button>
-                  )}
-                </TabEntry>
-              ))}
-            </SortableContext>
+                    {item.closable && (
+                      <button
+                        type="button"
+                        className="leaf-tabs__close"
+                        disabled={item.disabled || !onClose}
+                        aria-label={format('tabs.closeLabel', {
+                          label: typeof item.label === 'string' ? item.label : item.key,
+                        })}
+                        onClick={(event) => {
+                          onClose?.(item.key, event);
+                          if (event.defaultPrevented) return;
+                          const position = enabled.findIndex((entry) => entry.key === item.key);
+                          const next =
+                            item.key === selected
+                              ? (enabled[position + 1] ?? enabled[position - 1])
+                              : enabled.find((entry) => entry.key === selected);
+                          if (next) {
+                            if (item.key === selected) choose(next.key);
+                            const nextIndex = items.findIndex((entry) => entry.key === next.key);
+                            list.current
+                              ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)
+                              ?.focus();
+                          }
+                        }}
+                      >
+                        <X size={13} aria-hidden="true" />
+                      </button>
+                    )}
+                  </TabEntry>
+                ))}
+              </SortableContext>
+            </div>
           </div>
           {overflowKeys.length > 0 && (
             <Dropdown
@@ -305,28 +307,30 @@ export function Tabs({
                   },
                 }))}
             >
-              <Button
+              <ButtonControl
+                className="leaf-tabs__action"
                 data-tabs-more=""
                 variant="ghost"
                 size={size}
                 startIcon={<Ellipsis size={16} />}
-                aria-label={t('更多标签页', 'More tabs')}
+                aria-label={t('tabs.moreTabs')}
               />
             </Dropdown>
           )}
           {onAdd && (
-            <Button
+            <ButtonControl
+              className="leaf-tabs__action"
               variant="ghost"
               size={size}
               startIcon={<Plus size={16} />}
-              aria-label={addLabel ?? t('添加标签页', 'Add tab')}
+              aria-label={addLabel ?? t('tabs.addTab')}
               onClick={onAdd}
             />
           )}
           {extra && <div className="leaf-tabs__extra">{extra}</div>}
         </div>
       </TabDragScope>
-      <div ref={panels} className="leaf-tabs__panels">
+      <div className="leaf-tabs__panels">
         {items.map((item, index) => (
           <div
             key={item.key}
@@ -347,81 +351,6 @@ export function Tabs({
   );
 }
 
-function useTabPanelMotion(
-  panels: React.RefObject<HTMLDivElement | null>,
-  selected: string | undefined,
-  index: number,
-  placement: TabsProps['placement'],
-  direction: 'ltr' | 'rtl',
-  enabled: boolean,
-) {
-  const previous = useRef({ key: selected, index, height: 0 });
-  const animations = useRef<Animation[]>([]);
-  const heightAnimation = useRef<Animation | undefined>(undefined);
-  useBrowserLayoutEffect(() => {
-    const host = panels.current;
-    if (!host) return;
-    const active = host.querySelector<HTMLElement>('.leaf-tabs__panel:not([hidden])');
-    const interruptedHeight =
-      heightAnimation.current?.playState === 'running'
-        ? host.offsetHeight
-        : previous.current.height;
-    for (const animation of animations.current) animation.cancel();
-    animations.current = [];
-    heightAnimation.current = undefined;
-    host.removeAttribute('data-transitioning');
-    const height = host.offsetHeight;
-    if (enabled && active && previous.current.key !== selected) {
-      const vertical = placement === 'left' || placement === 'right';
-      const delta =
-        (index >= previous.current.index ? 1 : -1) * (vertical || direction !== 'rtl' ? 1 : -1);
-      const enter = animateMotion(
-        active,
-        [
-          {
-            opacity: 0,
-            transform: vertical ? `translateY(${delta * 8}px)` : `translateX(${delta * 12}px)`,
-          },
-          { opacity: 1, transform: 'translate(0, 0)' },
-        ],
-        { durationMultiplier: 1.25 },
-      );
-      if (enter) animations.current.push(enter);
-      if (interruptedHeight > 0 && Math.abs(height - interruptedHeight) > 1) {
-        const resize = animateMotion(
-          host,
-          [{ height: `${interruptedHeight}px` }, { height: `${height}px` }],
-          { durationMultiplier: 1.5 },
-        );
-        if (resize) {
-          host.dataset.transitioning = 'true';
-          animations.current.push(resize);
-          heightAnimation.current = resize;
-          resize.addEventListener('finish', () => host.removeAttribute('data-transitioning'), {
-            once: true,
-          });
-        }
-      }
-    }
-    previous.current = { key: selected, index, height };
-    const observer =
-      typeof ResizeObserver === 'undefined'
-        ? null
-        : new ResizeObserver(() => {
-            if (!animations.current.some((animation) => animation.playState === 'running'))
-              previous.current.height = host.offsetHeight;
-          });
-    if (active) observer?.observe(active);
-    return () => observer?.disconnect();
-  }, [panels, selected, index, placement, direction, enabled]);
-  useEffect(
-    () => () => {
-      for (const animation of animations.current) animation.cancel();
-    },
-    [],
-  );
-}
-
 function TabEntry({
   item,
   sortable,
@@ -438,7 +367,7 @@ function SortableTab({
   children,
   ...props
 }: HTMLAttributes<HTMLDivElement> & { item: TabItem }) {
-  const { locale } = useLeafConfig();
+  const format = useFormattedText();
   const motion = useMotionEnabled();
   const {
     attributes,
@@ -471,7 +400,9 @@ function SortableTab({
         ref={setActivatorNodeRef}
         disabled={item.disabled}
         className="leaf-tabs__drag"
-        aria-label={`${locale === 'en-US' ? 'Reorder tab' : '移动标签页'} ${typeof item.label === 'string' ? item.label : item.key}`}
+        aria-label={format('tabs.reorder', {
+          label: typeof item.label === 'string' ? item.label : item.key,
+        })}
       >
         <GripVertical size={13} aria-hidden="true" />
       </button>
@@ -509,6 +440,10 @@ function TabSortScope({
   children: ReactNode;
 }) {
   const id = useId();
+  const accessibility = useDragAnnouncements((key) => {
+    const item = items.find((entry) => entry.key === key);
+    return typeof item?.label === 'string' ? item.label : String(key);
+  });
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
@@ -518,6 +453,7 @@ function TabSortScope({
       id={id}
       sensors={sensors}
       collisionDetection={closestCenter}
+      accessibility={accessibility}
       onDragEnd={({ active, over }) => {
         if (!over || active.id === over.id) return;
         const from = items.findIndex((item) => item.key === active.id);
@@ -530,3 +466,8 @@ function TabSortScope({
     </DndContext>
   );
 }
+
+export function Tabs(rawProps: TabsProps) {
+  const props = useComponentProps('Tabs', rawProps);
+  return <TabsControl {...props} />;
+}
diff --git a/packages/react/src/tag/group.tsx b/packages/react/src/tag/group.tsx
index e53cc9a..363aed7 100644
--- a/packages/react/src/tag/group.tsx
+++ b/packages/react/src/tag/group.tsx
@@ -1,4 +1,5 @@
 import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { FormValue, useFieldValue } from '../shared/field';
 import { useListMotion } from '../shared/motion';
@@ -11,16 +12,17 @@ export interface CheckableTagProps
   onChange?: (checked: boolean) => void;
   size?: ControlSize;
 }
-export function CheckableTag({
-  checked,
-  defaultChecked = false,
-  onChange,
-  size = 'md',
-  children,
-  className,
-  onClick,
-  ...props
-}: CheckableTagProps) {
+export function CheckableTag(rawProps: CheckableTagProps) {
+  const {
+    checked,
+    defaultChecked = false,
+    onChange,
+    size = 'md',
+    children,
+    className,
+    onClick,
+    ...props
+  } = useComponentProps('CheckableTag', rawProps);
   const [current, change] = useControllable(checked, defaultChecked, onChange);
   return (
     <button
@@ -61,19 +63,20 @@ export interface TagGroupProps
   form?: string;
   required?: boolean;
 }
-export function TagGroup({
-  options,
-  value,
-  defaultValue = [],
-  onChange,
-  disabled,
-  size,
-  name,
-  form,
-  required,
-  className,
-  ...props
-}: TagGroupProps) {
+export function TagGroup(rawProps: TagGroupProps) {
+  const {
+    options,
+    value,
+    defaultValue = [],
+    onChange,
+    disabled,
+    size,
+    name,
+    form,
+    required,
+    className,
+    ...props
+  } = useComponentProps('TagGroup', rawProps);
   const trigger = useRef<HTMLButtonElement>(null);
   const root = useRef<HTMLDivElement>(null);
   const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);
diff --git a/packages/react/src/tag/tag.scss b/packages/react/src/tag/tag.scss
index b7e6f89..f2b1f39 100644
--- a/packages/react/src/tag/tag.scss
+++ b/packages/react/src/tag/tag.scss
@@ -1,41 +1,35 @@
 .leaf-tag {
   --leaf-tag-ink-color: var(--leaf-tag-color);
   --leaf-tag-color: var(--leaf-color-text-muted);
-  --leaf-tag-color-alpha-22: var(--leaf-color-text-muted-alpha-22);
   --leaf-tag-color-surface-8: var(--leaf-color-text-muted-surface-8);
   --leaf-tag-color-alpha-10: var(--leaf-color-text-muted-alpha-10);
   &[data-color='primary'] {
     --leaf-tag-ink-color: var(--leaf-color-primary-text-80);
     --leaf-tag-color: var(--leaf-color-primary);
-    --leaf-tag-color-alpha-22: var(--leaf-color-primary-alpha-22);
     --leaf-tag-color-surface-8: var(--leaf-color-primary-surface-8);
     --leaf-tag-color-alpha-10: var(--leaf-color-primary-alpha-10);
   }
   &[data-color='success'] {
     --leaf-tag-ink-color: var(--leaf-color-success-text-80);
     --leaf-tag-color: var(--leaf-color-success);
-    --leaf-tag-color-alpha-22: var(--leaf-color-success-alpha-22);
     --leaf-tag-color-surface-8: var(--leaf-color-success-surface-8);
     --leaf-tag-color-alpha-10: var(--leaf-color-success-alpha-10);
   }
   &[data-color='warning'] {
     --leaf-tag-ink-color: var(--leaf-color-warning-text-80);
     --leaf-tag-color: var(--leaf-color-warning);
-    --leaf-tag-color-alpha-22: var(--leaf-color-warning-alpha-22);
     --leaf-tag-color-surface-8: var(--leaf-color-warning-surface-8);
     --leaf-tag-color-alpha-10: var(--leaf-color-warning-alpha-10);
   }
   &[data-color='error'] {
     --leaf-tag-ink-color: var(--leaf-color-danger-text-80);
     --leaf-tag-color: var(--leaf-color-danger);
-    --leaf-tag-color-alpha-22: var(--leaf-color-danger-alpha-22);
     --leaf-tag-color-surface-8: var(--leaf-color-danger-surface-8);
     --leaf-tag-color-alpha-10: var(--leaf-color-danger-alpha-10);
   }
   &[data-color='info'] {
     --leaf-tag-ink-color: var(--leaf-color-info-text-80);
     --leaf-tag-color: var(--leaf-color-info);
-    --leaf-tag-color-alpha-22: var(--leaf-color-info-alpha-22);
     --leaf-tag-color-surface-8: var(--leaf-color-info-surface-8);
     --leaf-tag-color-alpha-10: var(--leaf-color-info-alpha-10);
   }
@@ -44,9 +38,9 @@
   align-items: center;
   gap: 5px;
   max-width: var(--leaf-tag-width, 100%);
-  padding: 2px 9px;
-  border: 1px solid var(--leaf-tag-color-alpha-22);
-  border-radius: var(--leaf-component-tag-radius, 999px);
+  padding: 3px 10px;
+  border: 0;
+  border-radius: var(--leaf-component-tag-radius, calc(var(--leaf-radius-sm) * 5 / 6));
   color: var(--leaf-tag-ink-color);
   background: var(--leaf-tag-color-surface-8);
   font: max(1px, calc(var(--leaf-font-size) - 2px)) / 1.5 var(--leaf-font-family);
@@ -56,15 +50,13 @@
     opacity var(--leaf-motion-duration) var(--leaf-motion-easing),
     max-width var(--leaf-motion-duration) var(--leaf-motion-easing),
     padding-inline var(--leaf-motion-duration) var(--leaf-motion-easing),
-    gap var(--leaf-motion-duration) var(--leaf-motion-easing),
-    border-color var(--leaf-motion-duration) var(--leaf-motion-easing);
+    gap var(--leaf-motion-duration) var(--leaf-motion-easing);
   &[data-state='closing'] {
     opacity: 0;
     max-width: 0;
     padding-inline: 0;
     gap: 0;
     overflow: hidden;
-    border-color: transparent;
     pointer-events: none;
   }
   > span:not(.leaf-tag__icon) {
@@ -73,19 +65,15 @@
     text-overflow: ellipsis;
   }
   &--sm {
-    padding: 0 7px;
+    padding: 1px 8px;
   }
   &--lg {
-    padding: 3px 12px;
+    padding: 4px 13px;
     font-size: var(--leaf-font-size-sm);
   }
-  &--outline {
-    background: transparent;
-  }
   &--solid {
     --leaf-tag-close-background: rgba(255, 255, 255, 0.1);
     background: var(--leaf-tag-color);
-    border-color: var(--leaf-tag-color);
     color: white;
   }
   &--solid[data-color='primary'] {
@@ -144,14 +132,10 @@
   transition:
     color var(--leaf-motion-duration) var(--leaf-motion-easing),
     background-color var(--leaf-motion-duration) var(--leaf-motion-easing),
-    border-color var(--leaf-motion-duration) var(--leaf-motion-easing),
-    box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing),
     transform var(--leaf-motion-duration) var(--leaf-motion-spring);
   &:hover:not(:disabled):not([aria-pressed='true']) {
-    border-color: var(--leaf-color-border-hover);
-  }
-  &[aria-pressed='true'] {
-    box-shadow: inset 0 0 0 1px var(--leaf-color-primary-alpha-12);
+    color: var(--leaf-color-text);
+    background: var(--leaf-tag-color-alpha-10);
   }
   &:active:not(:disabled) {
     transform: scale(0.96);
diff --git a/packages/react/src/tag/tag.tsx b/packages/react/src/tag/tag.tsx
index f5a7d60..8670d84 100644
--- a/packages/react/src/tag/tag.tsx
+++ b/packages/react/src/tag/tag.tsx
@@ -8,6 +8,7 @@ import {
   useState,
 } from 'react';
 import { defaultColors, mixColors } from '../colors';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { classes } from '../shared/classes';
 import { composedParent } from '../shared/dom';
@@ -17,25 +18,26 @@ import type { ControlSize } from '../shared/types';
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | (string & {});
-  variant?: 'soft' | 'outline' | 'solid';
+  variant?: 'soft' | 'solid';
   size?: ControlSize;
   icon?: ReactNode;
   closable?: boolean;
   onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 const presets = ['default', 'primary', 'success', 'warning', 'error', 'info'];
-export function Tag({
-  color = 'default',
-  variant = 'soft',
-  size = 'md',
-  icon,
-  closable = false,
-  onClose,
-  className,
-  style,
-  children,
-  ...props
-}: TagProps) {
+export function Tag(rawProps: TagProps) {
+  const {
+    color = 'default',
+    variant = 'soft',
+    size = 'md',
+    icon,
+    closable = false,
+    onClose,
+    className,
+    style,
+    children,
+    ...props
+  } = useComponentProps('Tag', rawProps);
   const { messages, theme } = useLeafConfig();
   const [closed, setClosed] = useState(false);
   const root = useRef<HTMLSpanElement>(null);
@@ -45,7 +47,6 @@ export function Tag({
   const customVariables = custom
     ? {
         '--leaf-tag-color': color,
-        '--leaf-tag-color-alpha-22': mixColors(color, 'transparent', 22),
         '--leaf-tag-color-alpha-10': mixColors(color, 'transparent', 10),
         '--leaf-tag-color-surface-8': mixColors(color, surface, 8),
       }
@@ -63,7 +64,6 @@ export function Tag({
         getComputedStyle(node).getPropertyValue('--leaf-color-surface').trim() || surface;
       probe.remove();
       for (const [suffix, target, weight] of [
-        ['alpha-22', 'transparent', 22],
         ['alpha-10', 'transparent', 10],
         ['surface-8', background, 8],
       ] as const) {
@@ -106,7 +106,7 @@ export function Tag({
         <button
           type="button"
           className="leaf-tag__close"
-          aria-label={messages.remove}
+          aria-label={messages.common.remove}
           onClick={(event) => {
             onClose?.(event);
             if (!event.defaultPrevented) {
diff --git a/packages/react/src/tailwind-tokens.ts b/packages/react/src/tailwind-tokens.ts
new file mode 100644
index 0000000..d09c71f
--- /dev/null
+++ b/packages/react/src/tailwind-tokens.ts
@@ -0,0 +1,86 @@
+/** Shared by the Tailwind 3 preset and the generated Tailwind 4 CSS theme. */
+export const leafTailwindTokens = {
+  colors: {
+    'leaf-primary': 'var(--leaf-color-primary)',
+    'leaf-primary-hover': 'var(--leaf-color-primary-hover)',
+    'leaf-primary-active': 'var(--leaf-color-primary-active)',
+    'leaf-on-primary': 'var(--leaf-color-on-primary)',
+    'leaf-success': 'var(--leaf-color-success)',
+    'leaf-warning': 'var(--leaf-color-warning)',
+    'leaf-on-warning': 'var(--leaf-color-on-warning)',
+    'leaf-danger': 'var(--leaf-color-danger)',
+    'leaf-danger-hover': 'var(--leaf-color-danger-hover)',
+    'leaf-danger-active': 'var(--leaf-color-danger-active)',
+    'leaf-on-danger': 'var(--leaf-color-on-danger)',
+    'leaf-info': 'var(--leaf-color-info)',
+    'leaf-text': 'var(--leaf-color-text)',
+    'leaf-muted': 'var(--leaf-color-text-muted)',
+    'leaf-subtle': 'var(--leaf-color-text-subtle)',
+    'leaf-surface': 'var(--leaf-color-surface)',
+    'leaf-surface-muted': 'var(--leaf-color-surface-muted)',
+    'leaf-surface-raised': 'var(--leaf-color-surface-raised)',
+    'leaf-border': 'var(--leaf-color-border)',
+    'leaf-border-hover': 'var(--leaf-color-border-hover)',
+    'leaf-divider': 'var(--leaf-color-divider)',
+    'leaf-option-hover': 'var(--leaf-color-option-hover)',
+    'leaf-focus': 'var(--leaf-color-focus, var(--leaf-color-primary-alpha-42))',
+  },
+  borderRadius: {
+    leaf: 'var(--leaf-radius)',
+    'leaf-sm': 'var(--leaf-radius-sm)',
+    'leaf-md': 'var(--leaf-radius-md)',
+    'leaf-lg': 'var(--leaf-radius-lg)',
+    'leaf-choice': 'var(--leaf-choice-radius)',
+  },
+  spacing: {
+    leaf: 'var(--leaf-spacing)',
+    'leaf-xs': 'var(--leaf-spacing-xs)',
+    'leaf-sm': 'var(--leaf-spacing-sm)',
+    'leaf-md': 'var(--leaf-spacing-md)',
+    'leaf-lg': 'var(--leaf-spacing-lg)',
+    'leaf-xl': 'var(--leaf-spacing-xl)',
+    'leaf-control': 'var(--leaf-control-height)',
+    'leaf-control-sm': 'var(--leaf-control-height-sm)',
+    'leaf-control-lg': 'var(--leaf-control-height-lg)',
+    'leaf-form-gap': 'var(--leaf-density-form-gap)',
+    'leaf-label-gap': 'var(--leaf-density-label-gap)',
+    'leaf-row-padding': 'var(--leaf-density-row-padding)',
+    'leaf-option-height': 'var(--leaf-density-option-height)',
+    'leaf-option-padding': 'var(--leaf-density-option-padding)',
+    'leaf-field-padding': 'var(--leaf-density-field-padding)',
+    'leaf-dialog-block': 'var(--leaf-density-dialog-block)',
+    'leaf-dialog-inline': 'var(--leaf-density-dialog-inline)',
+    'leaf-dialog-gap': 'var(--leaf-density-dialog-gap)',
+  },
+  fontFamily: { leaf: 'var(--leaf-font-family)' },
+  fontSize: {
+    leaf: 'var(--leaf-font-size)',
+    'leaf-sm': 'var(--leaf-font-size-sm)',
+    'leaf-lg': 'var(--leaf-font-size-lg)',
+  },
+  lineHeight: { leaf: 'var(--leaf-line-height)' },
+  fontWeight: {
+    'leaf-medium': 'var(--leaf-font-weight)',
+    'leaf-heading': 'var(--leaf-heading-weight)',
+  },
+  boxShadow: {
+    'leaf-xs': 'var(--leaf-shadow-xs)',
+    'leaf-sm': 'var(--leaf-shadow-sm)',
+    'leaf-md': 'var(--leaf-shadow-md)',
+    'leaf-lg': 'var(--leaf-shadow-lg)',
+  },
+  transitionDuration: {
+    leaf: 'var(--leaf-motion-duration)',
+    'leaf-fast': 'var(--leaf-motion-fast)',
+    'leaf-slow': 'var(--leaf-motion-slow)',
+  },
+  transitionTimingFunction: {
+    leaf: 'var(--leaf-motion-easing)',
+    'leaf-spring': 'var(--leaf-motion-spring)',
+  },
+  zIndex: {
+    'leaf-popup': 'var(--leaf-z-index-popup)',
+    'leaf-modal': 'var(--leaf-z-index-modal)',
+    'leaf-message': 'var(--leaf-z-index-message)',
+  },
+};
diff --git a/packages/react/src/tailwind.ts b/packages/react/src/tailwind.ts
new file mode 100644
index 0000000..5561018
--- /dev/null
+++ b/packages/react/src/tailwind.ts
@@ -0,0 +1,23 @@
+import { leafTailwindTokens } from './tailwind-tokens';
+
+/** Tailwind CSS 3 preset. Extend the application theme without changing its defaults. */
+const leafPreset = {
+  theme: {
+    extend: {
+      ...leafTailwindTokens,
+      fontSize: Object.fromEntries(
+        Object.entries(leafTailwindTokens.fontSize).map(([name, value]) => [
+          name,
+          [value, { lineHeight: leafTailwindTokens.lineHeight.leaf }] as [
+            string,
+            { lineHeight: string },
+          ],
+        ]),
+      ),
+      minHeight: leafTailwindTokens.spacing,
+      minWidth: leafTailwindTokens.spacing,
+    },
+  },
+};
+
+export default leafPreset;
diff --git a/packages/react/src/textarea/index.ts b/packages/react/src/textarea/index.ts
index 51d6017..133e23f 100644
--- a/packages/react/src/textarea/index.ts
+++ b/packages/react/src/textarea/index.ts
@@ -1,2 +1,2 @@
-export type { TextareaAutoSize } from './textarea';
-export * from './textarea';
+export type { TextareaAutoSize, TextareaProps } from './textarea';
+export { Textarea } from './textarea';
diff --git a/packages/react/src/textarea/textarea.tsx b/packages/react/src/textarea/textarea.tsx
index d215f79..a6a70ef 100644
--- a/packages/react/src/textarea/textarea.tsx
+++ b/packages/react/src/textarea/textarea.tsx
@@ -6,6 +6,7 @@ import {
   useLayoutEffect,
   useRef,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { useFieldValue, useMergedRef } from '../shared/field';
@@ -26,126 +27,138 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
 
 const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
-  {
-    size = 'md',
-    status: statusProp,
-    resize = 'vertical',
-    rows = 3,
-    autoSize = false,
-    showCount = false,
-    value,
-    defaultValue,
-    onChange,
-    className,
-    style,
-    disabled: disabledProp,
-    'aria-invalid': ariaInvalid,
-    ...props
+export const TextareaControl = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  function TextareaControl(
+    {
+      size = 'md',
+      status: statusProp,
+      resize = 'vertical',
+      rows = 3,
+      autoSize = false,
+      showCount = false,
+      value,
+      defaultValue,
+      onChange,
+      className,
+      style,
+      disabled: disabledProp,
+      'aria-invalid': ariaInvalid,
+      ...props
+    }: TextareaProps,
+    ref,
+  ) {
+    const field = useFormField();
+    const textarea = useRef<HTMLTextAreaElement>(null);
+    const heightAnimation = useRef<Animation | undefined>(undefined);
+    const measuredHeight = useRef(false);
+    const motionEnabled = useMotionEnabled();
+    const merged = useMergedRef(textarea, ref);
+    const [current, setCurrent] = useFieldValue(
+      value === undefined ? undefined : String(value),
+      String(defaultValue ?? ''),
+      textarea,
+      props.form,
+    );
+    const disabled = disabledProp || field?.disabled;
+    const status = statusProp ?? (field?.error ? 'error' : undefined);
+    const minRows = typeof autoSize === 'object' ? Math.max(1, autoSize.minRows ?? rows) : rows;
+    const maxRows =
+      typeof autoSize === 'object' ? Math.max(minRows, autoSize.maxRows ?? Infinity) : Infinity;
+    useBrowserLayoutEffect(() => {
+      if (!autoSize || !textarea.current) {
+        heightAnimation.current?.cancel();
+        measuredHeight.current = false;
+        return;
+      }
+      const node = textarea.current;
+      const measure = () => {
+        const previousHeight =
+          Number.parseFloat(getComputedStyle(node).height) || node.offsetHeight;
+        heightAnimation.current?.cancel();
+        const computed = getComputedStyle(node);
+        const lineHeight =
+          Number.parseFloat(computed.lineHeight) ||
+          (Number.parseFloat(computed.fontSize) || 14) * 1.5;
+        const padding =
+          (Number.parseFloat(computed.paddingTop) || 0) +
+          (Number.parseFloat(computed.paddingBottom) || 0);
+        const border =
+          (Number.parseFloat(computed.borderTopWidth) || 0) +
+          (Number.parseFloat(computed.borderBottomWidth) || 0);
+        const addition = computed.boxSizing === 'border-box' ? padding + border : 0;
+        node.style.height = 'auto';
+        const measured =
+          node.scrollHeight + (computed.boxSizing === 'border-box' ? border : -padding);
+        const maximum = lineHeight * maxRows + addition;
+        const height = Math.min(maximum, Math.max(lineHeight * minRows + addition, measured));
+        node.style.height = `${height}px`;
+        node.style.overflowY = measured > maximum ? 'auto' : 'hidden';
+        if (measuredHeight.current && motionEnabled && Math.abs(previousHeight - height) > 0.5)
+          heightAnimation.current = animateMotion(
+            node,
+            [{ height: `${previousHeight}px` }, { height: `${height}px` }],
+            { durationMultiplier: 0.8 },
+          );
+        measuredHeight.current = true;
+      };
+      measure();
+      let width = node.clientWidth;
+      const observer =
+        typeof ResizeObserver === 'undefined'
+          ? null
+          : new ResizeObserver(() => {
+              if (width !== node.clientWidth) {
+                width = node.clientWidth;
+                measure();
+              }
+            });
+      observer?.observe(node);
+      return () => observer?.disconnect();
+    }, [autoSize, minRows, maxRows, current, motionEnabled]);
+    useEffect(() => () => heightAnimation.current?.cancel(), []);
+    const control = (
+      <textarea
+        {...props}
+        id={props.id ?? field?.id}
+        required={props.required ?? field?.required}
+        aria-describedby={
+          [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined
+        }
+        ref={merged}
+        disabled={disabled}
+        rows={rows}
+        value={current}
+        onChange={(event) => {
+          setCurrent(event.target.value);
+          onChange?.(event);
+        }}
+        className={classes('leaf-textarea', `leaf-textarea--${size}`, className)}
+        style={{ resize: autoSize ? 'none' : resize, ...style }}
+        data-status={status}
+        aria-invalid={status === 'error' ? true : ariaInvalid}
+      />
+    );
+    return showCount ? (
+      <div className="leaf-textarea-wrap">
+        {control}
+        <span className="leaf-textarea__count">
+          {typeof showCount === 'function'
+            ? showCount(current, props.maxLength)
+            : `${current.length}${props.maxLength === undefined ? '' : ` / ${props.maxLength}`}`}
+        </span>
+      </div>
+    ) : (
+      control
+    );
   },
+);
+TextareaControl.displayName = 'TextareaControl';
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  rawProps: TextareaProps,
   ref,
 ) {
-  const field = useFormField();
-  const textarea = useRef<HTMLTextAreaElement>(null);
-  const heightAnimation = useRef<Animation | undefined>(undefined);
-  const measuredHeight = useRef(false);
-  const motionEnabled = useMotionEnabled();
-  const merged = useMergedRef(textarea, ref);
-  const [current, setCurrent] = useFieldValue(
-    value === undefined ? undefined : String(value),
-    String(defaultValue ?? ''),
-    textarea,
-    props.form,
-  );
-  const disabled = disabledProp || field?.disabled;
-  const status = statusProp ?? (field?.error ? 'error' : undefined);
-  const minRows = typeof autoSize === 'object' ? Math.max(1, autoSize.minRows ?? rows) : rows;
-  const maxRows =
-    typeof autoSize === 'object' ? Math.max(minRows, autoSize.maxRows ?? Infinity) : Infinity;
-  useBrowserLayoutEffect(() => {
-    if (!autoSize || !textarea.current) {
-      heightAnimation.current?.cancel();
-      measuredHeight.current = false;
-      return;
-    }
-    const node = textarea.current;
-    const measure = () => {
-      const previousHeight = Number.parseFloat(getComputedStyle(node).height) || node.offsetHeight;
-      heightAnimation.current?.cancel();
-      const computed = getComputedStyle(node);
-      const lineHeight =
-        Number.parseFloat(computed.lineHeight) ||
-        (Number.parseFloat(computed.fontSize) || 14) * 1.5;
-      const padding =
-        (Number.parseFloat(computed.paddingTop) || 0) +
-        (Number.parseFloat(computed.paddingBottom) || 0);
-      const border =
-        (Number.parseFloat(computed.borderTopWidth) || 0) +
-        (Number.parseFloat(computed.borderBottomWidth) || 0);
-      const addition = computed.boxSizing === 'border-box' ? padding + border : 0;
-      node.style.height = 'auto';
-      const measured =
-        node.scrollHeight + (computed.boxSizing === 'border-box' ? border : -padding);
-      const maximum = lineHeight * maxRows + addition;
-      const height = Math.min(maximum, Math.max(lineHeight * minRows + addition, measured));
-      node.style.height = `${height}px`;
-      node.style.overflowY = measured > maximum ? 'auto' : 'hidden';
-      if (measuredHeight.current && motionEnabled && Math.abs(previousHeight - height) > 0.5)
-        heightAnimation.current = animateMotion(
-          node,
-          [{ height: `${previousHeight}px` }, { height: `${height}px` }],
-          { durationMultiplier: 0.8 },
-        );
-      measuredHeight.current = true;
-    };
-    measure();
-    let width = node.clientWidth;
-    const observer =
-      typeof ResizeObserver === 'undefined'
-        ? null
-        : new ResizeObserver(() => {
-            if (width !== node.clientWidth) {
-              width = node.clientWidth;
-              measure();
-            }
-          });
-    observer?.observe(node);
-    return () => observer?.disconnect();
-  }, [autoSize, minRows, maxRows, current, motionEnabled]);
-  useEffect(() => () => heightAnimation.current?.cancel(), []);
-  const control = (
-    <textarea
-      {...props}
-      id={props.id ?? field?.id}
-      required={props.required ?? field?.required}
-      aria-describedby={
-        [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined
-      }
-      ref={merged}
-      disabled={disabled}
-      rows={rows}
-      value={current}
-      onChange={(event) => {
-        setCurrent(event.target.value);
-        onChange?.(event);
-      }}
-      className={classes('leaf-textarea', `leaf-textarea--${size}`, className)}
-      style={{ resize: autoSize ? 'none' : resize, ...style }}
-      data-status={status}
-      aria-invalid={status === 'error' ? true : ariaInvalid}
-    />
-  );
-  return showCount ? (
-    <div className="leaf-textarea-wrap">
-      {control}
-      <span className="leaf-textarea__count">
-        {typeof showCount === 'function'
-          ? showCount(current, props.maxLength)
-          : `${current.length}${props.maxLength === undefined ? '' : ` / ${props.maxLength}`}`}
-      </span>
-    </div>
-  ) : (
-    control
-  );
+  const props = useComponentProps('Textarea', rawProps);
+  return <TextareaControl {...props} ref={ref} />;
 });
 Textarea.displayName = 'Textarea';
diff --git a/packages/react/src/timeline/timeline.tsx b/packages/react/src/timeline/timeline.tsx
index 72f9a32..7d2423a 100644
--- a/packages/react/src/timeline/timeline.tsx
+++ b/packages/react/src/timeline/timeline.tsx
@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactNode, useRef } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useListMotion } from '../shared/motion';
 import type { LeafThemeStyle } from '../theme';
@@ -15,14 +16,15 @@ export interface TimelineProps extends Omit<HTMLAttributes<HTMLOListElement>, 'o
   reverse?: boolean;
   pending?: ReactNode;
 }
-export function Timeline({
-  items,
-  mode = 'left',
-  reverse = false,
-  pending,
-  className,
-  ...props
-}: TimelineProps) {
+export function Timeline(rawProps: TimelineProps) {
+  const {
+    items,
+    mode = 'left',
+    reverse = false,
+    pending,
+    className,
+    ...props
+  } = useComponentProps('Timeline', rawProps);
   const root = useRef<HTMLOListElement>(null);
   const entries = [...items];
   if (reverse) entries.reverse();
diff --git a/packages/react/src/timepicker/index.ts b/packages/react/src/timepicker/index.ts
index 7a49126..826b1eb 100644
--- a/packages/react/src/timepicker/index.ts
+++ b/packages/react/src/timepicker/index.ts
@@ -1 +1,2 @@
-export * from './timepicker';
+export type { TimePickerProps } from './timepicker';
+export { TimePicker } from './timepicker';
diff --git a/packages/react/src/timepicker/time-panel.tsx b/packages/react/src/timepicker/time-panel.tsx
index 7fbc609..d33708a 100644
--- a/packages/react/src/timepicker/time-panel.tsx
+++ b/packages/react/src/timepicker/time-panel.tsx
@@ -176,7 +176,7 @@ export function TimePanel({
   return (
     <div ref={ref} className="leaf-time-picker__columns">
       {column(
-        messages.hours,
+        messages.timePicker.hours,
         hours,
         use12Hours ? value.hour % 12 || 12 : value.hour,
         (hour) =>
@@ -192,7 +192,7 @@ export function TimePanel({
           }),
       )}
       {column(
-        messages.minutes,
+        messages.timePicker.minutes,
         options(minuteStep, value.minute),
         value.minute,
         (minute) => onChange({ ...value, minute }),
@@ -201,7 +201,7 @@ export function TimePanel({
       )}
       {showSeconds &&
         column(
-          messages.seconds,
+          messages.timePicker.seconds,
           options(secondStep, value.second),
           value.second,
           (second) => onChange({ ...value, second }),
@@ -210,11 +210,11 @@ export function TimePanel({
         )}
       {use12Hours &&
         column(
-          messages.period,
+          messages.timePicker.period,
           [0, 1],
           value.hour < 12 ? 0 : 1,
           (period) => onChange({ ...value, hour: (value.hour % 12) + period * 12 }),
-          [messages.am, messages.pm],
+          [messages.timePicker.am, messages.timePicker.pm],
           (period) => !!disabledTime?.({ ...value, hour: (value.hour % 12) + period * 12 }),
         )}
     </div>
diff --git a/packages/react/src/timepicker/timepicker.scss b/packages/react/src/timepicker/timepicker.scss
index 30f9839..d90a2b1 100644
--- a/packages/react/src/timepicker/timepicker.scss
+++ b/packages/react/src/timepicker/timepicker.scss
@@ -60,6 +60,7 @@
     z-index: 1;
     justify-content: space-between;
     padding: 5px 7px;
+    padding-block: min(5px, max(0px, calc((var(--leaf-density-option-height) - 1.4em) / 2)));
     margin-top: 0;
     font-variant-numeric: tabular-nums;
     &[aria-selected='true'] {
@@ -75,7 +76,7 @@
     translate: 0 var(--leaf-time-selection-y, 0px);
     border: 1px solid var(--leaf-color-primary-alpha-15);
     border-radius: var(--leaf-floating-option-radius);
-    background: var(--leaf-color-primary-alpha-9);
+    background: var(--leaf-color-primary-surface-9);
     pointer-events: none;
     transition:
       translate var(--leaf-motion-duration) var(--leaf-motion-spring),
diff --git a/packages/react/src/timepicker/timepicker.tsx b/packages/react/src/timepicker/timepicker.tsx
index d66a09b..0510ecb 100644
--- a/packages/react/src/timepicker/timepicker.tsx
+++ b/packages/react/src/timepicker/timepicker.tsx
@@ -1,6 +1,7 @@
 import { Clock3 } from 'lucide-react';
 import { forwardRef, useRef, useState } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { DateInput, type PickerFieldProps } from '../shared/date-input';
@@ -21,7 +22,10 @@ export interface TimePickerProps extends PickerFieldProps {
   disabledTime?: (parts: TimeParts) => boolean;
 }
 export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function TimePicker(
-  {
+  rawProps: TimePickerProps,
+  ref,
+) {
+  const {
     value,
     defaultValue = null,
     minuteStep = 5,
@@ -34,9 +38,7 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
     open: controlledOpen,
     defaultOpen,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('TimePicker', rawProps);
   const { messages } = useLeafConfig();
   const field = useFormField();
   const trigger = useRef<HTMLInputElement>(null);
@@ -60,17 +62,17 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
     onChange?.(next);
   };
   const formatted = (parts: TimeParts) =>
-    displayTime(parts, showSeconds, use12Hours, [messages.am, messages.pm]);
+    displayTime(parts, showSeconds, use12Hours, [messages.timePicker.am, messages.timePicker.pm]);
   const parsed = parseTime(selected);
   return (
     <DateInput
       {...props}
       ref={merged}
       className={['leaf-time-picker', props.className].filter(Boolean).join(' ')}
-      placeholder={props.placeholder ?? messages.time}
+      placeholder={props.placeholder ?? messages.timePicker.placeholder}
       icon={<Clock3 size={16} aria-hidden="true" />}
-      panelLabel={messages.chooseTime}
-      clearLabel={messages.clearTime}
+      panelLabel={messages.timePicker.label}
+      clearLabel={messages.timePicker.clear}
       commitOnBlur={false}
       displayValue={parsed ? formatted(parsed) : ''}
       formValue={parsed ? timeString(parsed, showSeconds) : ''}
@@ -82,7 +84,7 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
       }}
       onClear={() => change(null)}
       onTextChange={(text) => {
-        const next = parseTime(text.trim());
+        const next = parseTime(text.trim(), [messages.timePicker.am, messages.timePicker.pm]);
         setValidText(Boolean(next));
         if (next) setDraft(next);
       }}
@@ -91,7 +93,7 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
           change(null);
           return true;
         }
-        const next = parseTime(text);
+        const next = parseTime(text, [messages.timePicker.am, messages.timePicker.pm]);
         if (!next || disabledTime?.(next)) return false;
         change(next);
         return true;
@@ -112,7 +114,7 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
             use12Hours={use12Hours}
           />
           <div className="leaf-picker-footer">
-            <Button
+            <ButtonControl
               variant="ghost"
               size="sm"
               onClick={() => {
@@ -125,9 +127,9 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
                 setValidText(true);
               }}
             >
-              {messages.now}
-            </Button>
-            <Button
+              {messages.timePicker.now}
+            </ButtonControl>
+            <ButtonControl
               size="sm"
               disabled={!validText || disabledTime?.(draft)}
               onClick={() => {
@@ -135,8 +137,8 @@ export const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function
                 close();
               }}
             >
-              {messages.confirm}
-            </Button>
+              {messages.common.confirm}
+            </ButtonControl>
           </div>
         </>
       )}
diff --git a/packages/react/src/timerangepicker/timerangepicker.tsx b/packages/react/src/timerangepicker/timerangepicker.tsx
index 7ac2122..c69f865 100644
--- a/packages/react/src/timerangepicker/timerangepicker.tsx
+++ b/packages/react/src/timerangepicker/timerangepicker.tsx
@@ -1,6 +1,7 @@
 import { Clock3 } from 'lucide-react';
 import { forwardRef, useRef, useState } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useFormField } from '../form/form';
 import { DateInput, type PickerFieldProps } from '../shared/date-input';
@@ -25,8 +26,8 @@ export interface TimeRangePickerProps extends PickerFieldProps {
 const startTime: TimeParts = { hour: 9, minute: 0, second: 0 };
 const endTime: TimeParts = { hour: 18, minute: 0, second: 0 };
 export const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps>(
-  function TimeRangePicker(
-    {
+  function TimeRangePicker(rawProps: TimeRangePickerProps, ref) {
+    const {
       value,
       defaultValue = null,
       onChange,
@@ -40,9 +41,7 @@ export const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps
       allowOvernight = false,
       disabledTime,
       ...props
-    },
-    ref,
-  ) {
+    } = useComponentProps('TimeRangePicker', rawProps);
     const t = useText();
     const field = useFormField();
     const { messages } = useLeafConfig();
@@ -63,7 +62,7 @@ export const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps
       !disabledTime?.(range[0], 'start') &&
       !disabledTime?.(range[1], 'end');
     const format = (parts: TimeParts) =>
-      displayTime(parts, showSeconds, use12Hours, [messages.am, messages.pm]);
+      displayTime(parts, showSeconds, use12Hours, [messages.timePicker.am, messages.timePicker.pm]);
     const change = (parts: readonly [TimeParts, TimeParts] | null) => {
       if (props.disabled || field?.disabled || props.readOnly || (parts && !valid(parts))) return;
       const next = parts
@@ -75,8 +74,9 @@ export const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps
     const parseRange = (text: string): readonly [TimeParts, TimeParts] | null => {
       const pair = text.split(/\s*[~～–—]\s*/);
       if (pair.length !== 2) return null;
-      const first = parseTime(pair[0]);
-      const second = parseTime(pair[1]);
+      const periods = [messages.timePicker.am, messages.timePicker.pm] as const;
+      const first = parseTime(pair[0], periods);
+      const second = parseTime(pair[1], periods);
       return first && second ? [first, second] : null;
     };
     const first = parseTime(selected?.[0]);
@@ -85,10 +85,10 @@ export const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps
       <DateInput
         {...props}
         ref={merged}
-        placeholder={props.placeholder ?? t('开始时间 ～ 结束时间', 'Start time ~ End time')}
+        placeholder={props.placeholder ?? t('timeRangePicker.placeholder')}
         icon={<Clock3 size={16} aria-hidden="true" />}
-        panelLabel={t('选择时间范围', 'Choose time range')}
-        clearLabel={t('清除时间范围', 'Clear time range')}
+        panelLabel={t('timeRangePicker.label')}
+        clearLabel={t('timeRangePicker.clear')}
         displayValue={first && second ? `${format(first)} ~ ${format(second)}` : ''}
         formValue={selected ? selected.join('/') : ''}
         open={open}
@@ -121,7 +121,7 @@ export const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps
             <div className="leaf-time-range-picker__panels">
               {([0, 1] as const).map((index) => (
                 <fieldset key={index} onFocusCapture={() => setActive(index)}>
-                  <legend>{index === 0 ? messages.start : messages.end}</legend>
+                  <legend>{index === 0 ? messages.common.start : messages.common.end}</legend>
                   <TimePanel
                     disabledTime={(parts) => !!disabledTime?.(parts, index === 0 ? 'start' : 'end')}
                     value={draft[index]}
@@ -141,7 +141,7 @@ export const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps
               ))}
             </div>
             <div className="leaf-picker-footer">
-              <Button
+              <ButtonControl
                 variant="ghost"
                 size="sm"
                 onClick={() => {
@@ -157,9 +157,9 @@ export const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps
                   setValidText(true);
                 }}
               >
-                {messages.now}
-              </Button>
-              <Button
+                {messages.timePicker.now}
+              </ButtonControl>
+              <ButtonControl
                 size="sm"
                 disabled={!validText || !valid(draft)}
                 onClick={() => {
@@ -167,8 +167,8 @@ export const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps
                   close();
                 }}
               >
-                {messages.confirm}
-              </Button>
+                {messages.common.confirm}
+              </ButtonControl>
             </div>
           </>
         )}
diff --git a/packages/react/src/tooltip/tooltip.tsx b/packages/react/src/tooltip/tooltip.tsx
index 9e8edfc..81a65c1 100644
--- a/packages/react/src/tooltip/tooltip.tsx
+++ b/packages/react/src/tooltip/tooltip.tsx
@@ -10,6 +10,7 @@ import {
   useState,
   version,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useMergedRef } from '../shared/field';
 import { FloatingPanel, type PopupOptions, useFloatingDismiss } from '../shared/floating';
@@ -40,7 +41,7 @@ export interface TooltipProps extends PopupOptions {
   leaveDelay?: number;
   className?: string;
 }
-export function Tooltip({
+export function TooltipControl({
   content,
   children,
   placement = 'top',
@@ -148,3 +149,8 @@ export function Tooltip({
     </>
   );
 }
+
+export function Tooltip(rawProps: TooltipProps) {
+  const props = useComponentProps('Tooltip', rawProps);
+  return <TooltipControl {...props} />;
+}
diff --git a/packages/react/src/tour/index.ts b/packages/react/src/tour/index.ts
index e13188b..b9f9465 100644
--- a/packages/react/src/tour/index.ts
+++ b/packages/react/src/tour/index.ts
@@ -1 +1,2 @@
-export * from './tour';
+export type { TourProps, TourStep } from './tour';
+export { Tour } from './tour';
diff --git a/packages/react/src/tour/tour.tsx b/packages/react/src/tour/tour.tsx
index 9f5163f..0fd495e 100644
--- a/packages/react/src/tour/tour.tsx
+++ b/packages/react/src/tour/tour.tsx
@@ -1,6 +1,7 @@
 import { X } from 'lucide-react';
 import { type ReactNode, type RefObject, useEffect, useId, useRef, useState } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
 import { useDialog } from '../shared/dialog';
 import { FloatingPanel, type PopupOptions } from '../shared/floating';
@@ -47,19 +48,20 @@ function TourFocus({
   useDialog(open, panel, owner, close, true, {}, true, modal);
   return children;
 }
-export function Tour({
-  open,
-  steps,
-  current,
-  defaultCurrent = 0,
-  onChange,
-  onClose,
-  onFinish,
-  missingTarget = 'center',
-  mask = true,
-  padding = 8,
-  getPopupContainer,
-}: TourProps) {
+export function Tour(rawProps: TourProps) {
+  const {
+    open,
+    steps,
+    current,
+    defaultCurrent = 0,
+    onChange,
+    onClose,
+    onFinish,
+    missingTarget = 'center',
+    mask = true,
+    padding = 8,
+    getPopupContainer,
+  } = useComponentProps('Tour', rawProps);
   const t = useText();
   const { messages } = useLeafConfig();
   const [index, setIndex] = useControllable(current, defaultCurrent, onChange);
@@ -114,11 +116,11 @@ export function Tour({
       <div ref={contentView} className="leaf-tour__content">
         <div className="leaf-tour__header">
           <h3 id={`${id}-title`}>{step.title}</h3>
-          <Button
+          <ButtonControl
             size="sm"
             variant="ghost"
             startIcon={<X size={16} />}
-            aria-label={messages.close}
+            aria-label={messages.common.close}
             onClick={onClose}
           />
         </div>
@@ -128,11 +130,11 @@ export function Tour({
             {index + 1} / {steps.length}
           </span>
           {index > 0 && (
-            <Button size="sm" variant="outline" onClick={() => setIndex(index - 1)}>
-              {t('上一步', 'Previous')}
-            </Button>
+            <ButtonControl size="sm" variant="outline" onClick={() => setIndex(index - 1)}>
+              {t('tour.previous')}
+            </ButtonControl>
           )}
-          <Button
+          <ButtonControl
             size="sm"
             onClick={() => {
               if (index < steps.length - 1) setIndex(index + 1);
@@ -142,8 +144,8 @@ export function Tour({
               }
             }}
           >
-            {index === steps.length - 1 ? t('完成', 'Finish') : t('下一步', 'Next')}
-          </Button>
+            {index === steps.length - 1 ? t('tour.finish') : t('tour.next')}
+          </ButtonControl>
         </div>
       </div>
     </TourFocus>
diff --git a/packages/react/src/transfer/transfer.tsx b/packages/react/src/transfer/transfer.tsx
index 2a21518..814d656 100644
--- a/packages/react/src/transfer/transfer.tsx
+++ b/packages/react/src/transfer/transfer.tsx
@@ -1,15 +1,18 @@
 import { ArrowLeft, ArrowRight, Search } from 'lucide-react';
 import { type HTMLAttributes, type ReactNode, useId, useRef, useState } from 'react';
-import { Button } from '../button';
-import { Checkbox } from '../checkbox';
+import { ButtonControl } from '../button/button';
+import { CheckboxControl as Checkbox } from '../checkbox/checkbox';
+import { useComponentProps } from '../config-provider/component-defaults';
+import { useLeafConfig } from '../config-provider/context';
+import { estimateControlHeight } from '../density';
 import { FieldScope, useFormField } from '../form/form';
-import { Input } from '../input';
-import { Result } from '../result';
+import { InputControl } from '../input/input';
+import { ResultControl as Result } from '../result/result';
 import { classes } from '../shared/classes';
 import { FormValue, useFieldValue } from '../shared/field';
 import { useListMotion } from '../shared/motion';
 import { useText } from '../shared/use-text';
-import { VirtualList } from '../virtuallist/virtuallist';
+import { VirtualListControl as VirtualList } from '../virtuallist/virtuallist';
 export interface TransferItem {
   key: string;
   label: ReactNode;
@@ -40,27 +43,29 @@ export interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
   required?: boolean;
   oneWay?: boolean;
 }
-export function Transfer({
-  items,
-  value,
-  defaultValue = [],
-  onChange,
-  selectedKeys,
-  onSelectionChange,
-  titles,
-  searchable = true,
-  filterOption,
-  renderItem,
-  disabled: disabledProp,
-  height = 180,
-  virtual = false,
-  name,
-  form,
-  required,
-  oneWay = false,
-  className,
-  ...props
-}: TransferProps) {
+export function Transfer(rawProps: TransferProps) {
+  const {
+    items,
+    value,
+    defaultValue = [],
+    onChange,
+    selectedKeys,
+    onSelectionChange,
+    titles,
+    searchable = true,
+    filterOption,
+    renderItem,
+    disabled: disabledProp,
+    height = 180,
+    virtual = false,
+    name,
+    form,
+    required,
+    oneWay = false,
+    className,
+    ...props
+  } = useComponentProps('Transfer', rawProps);
+  const { theme, density } = useLeafConfig();
   const field = useFormField();
   const disabled = disabledProp || field?.disabled;
   const t = useText();
@@ -139,7 +144,7 @@ export function Transfer({
       <section className="leaf-transfer__panel" aria-labelledby={`${id}-${side}`}>
         <header className="leaf-transfer__header">
           <Checkbox
-            aria-label={t('选择本页全部', 'Select all visible items')}
+            aria-label={t('transfer.selectAllVisibleItems')}
             disabled={disabled || !enabled.length}
             checked={enabled.length > 0 && checked.length === enabled.length}
             indeterminate={checked.length > 0 && checked.length < enabled.length}
@@ -152,8 +157,7 @@ export function Transfer({
             }
           />
           <span id={`${id}-${side}`}>
-            {titles?.[side] ??
-              (side === 0 ? t('可选项目', 'Available') : t('已选项目', 'Selected'))}
+            {titles?.[side] ?? (side === 0 ? t('transfer.available') : t('transfer.selected'))}
           </span>
           <small>
             {checked.length ? `${checked.length} / ` : ''}
@@ -162,14 +166,12 @@ export function Transfer({
         </header>
         {searchable && (
           <div className="leaf-transfer__search">
-            <Input
+            <InputControl
               size="sm"
               allowClear
               prefix={<Search size={14} />}
               aria-label={
-                side === 0
-                  ? t('搜索可选项目', 'Search available items')
-                  : t('搜索已选项目', 'Search selected items')
+                side === 0 ? t('transfer.searchAvailableItems') : t('transfer.searchSelectedItems')
               }
               value={query}
               onChange={(event) =>
@@ -186,15 +188,17 @@ export function Transfer({
             itemKey={(item) => item.key}
             renderItem={row}
             height={height}
-            estimateSize={items.some((item) => item.description) ? 54 : 40}
-            emptyContent={<Result size="sm" icon={null} title={t('暂无项目', 'No items')} />}
+            estimateSize={(item) =>
+              Math.max(estimateControlHeight(theme, density), item.description ? 42 : 0) + 6
+            }
+            emptyContent={<Result size="sm" icon={null} title={t('transfer.noItems')} />}
           />
         ) : (
           <div className="leaf-transfer__list" style={{ height }}>
             {list.length ? (
               list.map((item) => <div key={item.key}>{row(item)}</div>)
             ) : (
-              <Result size="sm" icon={null} title={t('暂无项目', 'No items')} />
+              <Result size="sm" icon={null} title={t('transfer.noItems')} />
             )}
           </div>
         )}
@@ -210,12 +214,12 @@ export function Transfer({
     >
       <FieldScope>{panel(0)}</FieldScope>
       <div className="leaf-transfer__actions">
-        <Button
+        <ButtonControl
           ref={trigger}
           id={props.id ?? field?.id}
           size="sm"
           startIcon={<ArrowRight size={16} />}
-          aria-label={t('移至已选', 'Move to selected')}
+          aria-label={t('transfer.moveToSelected')}
           disabled={
             disabled ||
             !items.some(
@@ -226,11 +230,11 @@ export function Transfer({
           onClick={() => move('right')}
         />
         {!oneWay && (
-          <Button
+          <ButtonControl
             size="sm"
             variant="outline"
             startIcon={<ArrowLeft size={16} />}
-            aria-label={t('移回可选', 'Move to available')}
+            aria-label={t('transfer.moveToAvailable')}
             disabled={
               disabled ||
               !items.some(
diff --git a/packages/react/src/tree/drag.tsx b/packages/react/src/tree/drag.tsx
index 56dca4d..8410acf 100644
--- a/packages/react/src/tree/drag.tsx
+++ b/packages/react/src/tree/drag.tsx
@@ -16,8 +16,9 @@ import {
 } from '@dnd-kit/core';
 import { GripVertical } from 'lucide-react';
 import { createContext, type ReactNode, useContext, useId, useRef, useState } from 'react';
-import { Button } from '../button';
-import { useText } from '../shared/use-text';
+import { ButtonControl } from '../button/button';
+import { useDragAnnouncements } from '../shared/use-drag-announcements';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { moveTreeNode } from './move';
 import type { TreeDropInfo, TreeNode } from './tree';
 
@@ -41,7 +42,10 @@ export function TreeDragScope({
   children: ReactNode;
 }) {
   const id = useId();
-  const t = useText();
+  const accessibility = useDragAnnouncements((key) => {
+    const node = nodes.get(String(key))?.node;
+    return node?.searchLabel ?? (typeof node?.title === 'string' ? node.title : String(key));
+  }, true);
   const [state, setState] = useState<DragState>({});
   const blocked = useRef(new Set<string>());
   const keyboardTarget = useRef<{ key: string; position: TreeDropInfo['position'] } | undefined>(
@@ -146,14 +150,7 @@ export function TreeDragScope({
       id={id}
       sensors={sensors}
       collisionDetection={collisionDetection}
-      accessibility={{
-        screenReaderInstructions: {
-          draggable: t(
-            '按空格开始拖动，上下选择目标，左放在目标前方，右放在目标后方，空格放置，Escape 取消。',
-            'Press Space to pick up, Up/Down to choose a target, Left/Right to place before/after it, Space to drop, and Escape to cancel.',
-          ),
-        },
-      }}
+      accessibility={accessibility}
       onDragStart={({ active }) => {
         const key = String(active.id);
         keyboardTarget.current = undefined;
@@ -201,7 +198,7 @@ export function TreeDragRow({
   draggable: boolean;
   children: ReactNode;
 }) {
-  const t = useText();
+  const format = useFormattedText();
   const state = useContext(Context);
   const {
     attributes,
@@ -222,7 +219,7 @@ export function TreeDragRow({
       data-drop={state.over === node.key && state.active !== node.key ? state.position : undefined}
     >
       {draggable && (
-        <Button
+        <ButtonControl
           {...attributes}
           {...listeners}
           ref={setActivatorNodeRef}
@@ -231,7 +228,9 @@ export function TreeDragRow({
           disabled={node.disabled}
           className="leaf-tree__drag-handle"
           startIcon={<GripVertical size={14} />}
-          aria-label={`${t('移动节点', 'Move node')} ${node.searchLabel ?? (typeof node.title === 'string' ? node.title : node.key)}`}
+          aria-label={format('tree.moveNode', {
+            label: node.searchLabel ?? (typeof node.title === 'string' ? node.title : node.key),
+          })}
         />
       )}
       {children}
diff --git a/packages/react/src/tree/tree.scss b/packages/react/src/tree/tree.scss
index ae7ec7c..763866f 100644
--- a/packages/react/src/tree/tree.scss
+++ b/packages/react/src/tree/tree.scss
@@ -36,8 +36,12 @@
   &__item:focus-visible > .leaf-tree__drag-row > .leaf-tree__row {
     outline: 2px solid var(--leaf-color-primary);
     outline-offset: -2px;
+    &:not([data-disabled]):not([data-selected]) {
+      background: var(--leaf-color-option-hover);
+    }
   }
   &__row {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     gap: 7px;
@@ -51,12 +55,12 @@
       color var(--leaf-motion-duration),
       box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
     &:hover:not([data-disabled]) {
-      background: var(--leaf-color-surface-muted);
+      background: var(--leaf-color-option-hover);
     }
     &[data-selected],
     &[data-selected]:hover {
       color: var(--leaf-color-primary);
-      background: var(--leaf-color-primary-surface-8);
+      background: var(--leaf-color-primary-surface-9);
     }
     &[data-disabled] {
       color: var(--leaf-color-text-muted);
diff --git a/packages/react/src/tree/tree.tsx b/packages/react/src/tree/tree.tsx
index e8aaadb..9099d9c 100644
--- a/packages/react/src/tree/tree.tsx
+++ b/packages/react/src/tree/tree.tsx
@@ -11,11 +11,14 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Checkbox } from '../checkbox';
+import { CheckboxControl as Checkbox } from '../checkbox/checkbox';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
-import { Result } from '../result';
+import { estimateControlHeight } from '../density';
+import { ResultControl as Result } from '../result/result';
 import { classes } from '../shared/classes';
 import { inertProps } from '../shared/inert';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { TreeDragRow, TreeDragScope } from './drag';
 import { treeChecks, treeMatches, treeModel } from './model';
 
@@ -87,7 +90,7 @@ export interface TreeProps
   allowDrop?: (info: Omit<TreeDropInfo, 'data'>) => boolean;
   onDrop?: (info: TreeDropInfo) => void;
 }
-export function Tree({
+export function TreeControl({
   data: suppliedData,
   selectedKeys,
   defaultSelectedKeys = [],
@@ -95,6 +98,8 @@ export function Tree({
   multiple = false,
   selectable = true,
   checkable = false,
+  checkOnClick = false,
+  expandOnClick = false,
   checkStrictly = false,
   checkedKeys,
   defaultCheckedKeys = [],
@@ -116,15 +121,17 @@ export function Tree({
   onLoadError,
   virtual = false,
   height = 320,
-  itemHeight = 34,
+  itemHeight: itemHeightProp,
   draggable = false,
   allowDrop,
   onDrop,
   className,
   'aria-label': label,
   ...props
-}: TreeProps) {
-  const { messages, direction } = useLeafConfig();
+}: TreeProps & { checkOnClick?: boolean; expandOnClick?: boolean }) {
+  const { messages, direction, theme, density } = useLeafConfig();
+  const format = useFormattedText();
+  const itemHeight = itemHeightProp ?? estimateControlHeight(theme, density) + 6;
   const [loaded, setLoaded] = useState<Map<string, readonly TreeNode[]>>(new Map());
   const [loading, setLoading] = useState<readonly string[]>([]);
   const requests = useRef(new Map<string, AbortController>());
@@ -328,7 +335,9 @@ export function Tree({
       if (hasChildren && isExpanded(node.key)) expand(node, false);
       else focus(records.get(node.key)?.parent);
     } else if (event.key === ' ' || event.key === 'Enter') {
-      if (checkable && event.key === ' ') check(node);
+      if (checkable && (event.key === ' ' || checkOnClick)) check(node);
+      else if (expandOnClick && hasChildren && (!selectable || node.selectable === false))
+        expand(node, !isExpanded(node.key));
       else select(node, event);
     } else if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
       const now = Date.now();
@@ -403,7 +412,10 @@ export function Tree({
           )
             return;
           focus(node.key);
-          select(node, event);
+          if (checkable && checkOnClick) check(node);
+          else if (expandOnClick && hasChildren && (!selectable || node.selectable === false))
+            expand(node, !opened);
+          else select(node, event);
         }}
       >
         <TreeRow
@@ -424,7 +436,9 @@ export function Tree({
               type="button"
               className="leaf-tree__toggle"
               tabIndex={-1}
-              aria-label={`${opened ? messages.collapseNode : messages.expand} ${node.searchLabel ?? (typeof node.title === 'string' ? node.title : node.key)}`}
+              aria-label={format(opened ? 'tree.collapseNode' : 'tree.expandNode', {
+                label: node.searchLabel ?? (typeof node.title === 'string' ? node.title : node.key),
+              })}
               disabled={disabled}
               data-hidden={!hasChildren || undefined}
               data-open={opened || undefined}
@@ -493,7 +507,7 @@ export function Tree({
       ref={root}
       style={{ ...(virtual ? { height, overflow: 'auto' } : {}), ...props.style }}
       role="tree"
-      aria-label={label ?? messages.tree}
+      aria-label={label ?? messages.tree.label}
       aria-multiselectable={multiple || checkable || undefined}
       aria-disabled={disabled || undefined}
       className={classes('leaf-tree', showLine && 'leaf-tree--lines', className)}
@@ -536,7 +550,7 @@ export function Tree({
           renderNodes(data, 1)
         )
       ) : (
-        (notFoundContent ?? <Result size="sm" title={messages.empty} icon={null} />)
+        (notFoundContent ?? <Result size="sm" title={messages.select.empty} icon={null} />)
       )}
     </div>
   );
@@ -594,3 +608,8 @@ function TreeRow({
     children
   );
 }
+
+export function Tree(rawProps: TreeProps) {
+  const props = useComponentProps('Tree', rawProps);
+  return <TreeControl {...props} />;
+}
diff --git a/packages/react/src/treeselect/treeselect.scss b/packages/react/src/treeselect/treeselect.scss
index bc1ed4b..3c46462 100644
--- a/packages/react/src/treeselect/treeselect.scss
+++ b/packages/react/src/treeselect/treeselect.scss
@@ -1,5 +1,6 @@
 @use '../styles/mixins' as mixins;
 @use '../styles/geometry' as geometry;
+@use '../shared/selection';
 .leaf-tree-select {
   @include mixins.field('tree-select');
   position: relative;
@@ -8,6 +9,9 @@
   min-height: var(--leaf-current-control-height);
   padding: var(--leaf-component-tree-select-padding, 0 30px 0 10px);
   cursor: pointer;
+  &[data-searchable] {
+    cursor: text;
+  }
   &[data-clearable] {
     padding-inline-end: 54px;
   }
@@ -15,20 +19,13 @@
     border-color: var(--leaf-field-color);
     box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
   }
-  &__content {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 3px;
-    align-items: center;
-    width: 100%;
-    min-width: 0;
-  }
   &__input-wrap {
     position: relative;
     flex: 1;
     min-width: 24px;
   }
   &__input {
+    display: block;
     box-sizing: border-box;
     width: 100%;
     height: calc(var(--leaf-current-control-height) - 2px);
@@ -108,44 +105,6 @@
   &--multiple &__input {
     height: calc(var(--leaf-current-control-height) - 8px);
   }
-  &__tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    min-width: 0;
-    max-width: 100%;
-    padding: 1px 5px;
-    border-radius: var(--leaf-radius-sm);
-    background: var(--leaf-color-surface-muted);
-    box-shadow: inset 0 0 0 1px var(--leaf-color-border);
-    font-size: 12px;
-    > span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    > button {
-      display: grid;
-      place-items: center;
-      padding: 1px;
-      border: 0;
-      border-radius: 2px;
-      color: var(--leaf-color-text-muted);
-      background: transparent;
-      cursor: pointer;
-      transition:
-        color var(--leaf-motion-fast) var(--leaf-motion-easing),
-        background-color var(--leaf-motion-fast) var(--leaf-motion-easing),
-        transform var(--leaf-motion-fast) var(--leaf-motion-spring);
-      &:hover {
-        color: var(--leaf-color-text);
-        background: var(--leaf-color-border);
-      }
-      &:active {
-        transform: scale(0.85);
-      }
-    }
-  }
   &__panel {
     --leaf-tree-select-row-margin: 3px;
     @include geometry.inset-corners(
@@ -157,8 +116,17 @@
       var(--leaf-surface-padding-left),
       var(--leaf-surface-border)
     );
+    .leaf-tree__toggle {
+      flex-basis: 24px;
+      width: 24px;
+      height: min(28px, calc(var(--leaf-density-option-height) - 6px));
+    }
+    .leaf-tree__title {
+      flex: 1;
+    }
     .leaf-tree__row {
       min-height: var(--leaf-density-option-height);
+      padding-block: min(3px, max(0px, calc((var(--leaf-density-option-height) - 24px) / 2)));
       margin-block: var(--leaf-tree-select-row-margin);
       border-radius: var(--leaf-tree-select-option-radius);
       white-space: nowrap;
diff --git a/packages/react/src/treeselect/treeselect.test.tsx b/packages/react/src/treeselect/treeselect.test.tsx
index d12e521..25a6a7f 100644
--- a/packages/react/src/treeselect/treeselect.test.tsx
+++ b/packages/react/src/treeselect/treeselect.test.tsx
@@ -32,7 +32,7 @@ describe('TreeSelect', () => {
     expect(input).toHaveFocus();
     expect(input).toHaveValue('Code');
     await userEvent.click(input);
-    expect(input).toHaveValue('');
+    expect(input).toHaveValue('Code');
     await userEvent.type(input, 'Design');
     await userEvent.click(screen.getByText('Design'));
     expect(input).toHaveValue('Design');
@@ -71,4 +71,107 @@ describe('TreeSelect', () => {
     expect(screen.getByRole('combobox')).toBeDisabled();
     expect(screen.getByRole('combobox')).toHaveAttribute('aria-expanded', 'false');
   });
+
+  it('remembers expansion after selection and after closing the popup', async () => {
+    const expand = vi.fn();
+    render(
+      <ConfigProvider locale="en-US">
+        <TreeSelect options={options} onExpand={expand} />
+      </ConfigProvider>,
+    );
+    const input = screen.getByRole('combobox');
+    await userEvent.click(input);
+    await userEvent.click(screen.getByText('Team'));
+    expect(expand).toHaveBeenLastCalledWith(['team']);
+    await userEvent.click(screen.getByText('Design'));
+    await waitFor(() => expect(screen.queryByRole('tree')).toBeNull());
+    await userEvent.click(input);
+    expect(screen.getByRole('treeitem', { name: 'Team' })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Code')).toBeVisible();
+    await userEvent.click(screen.getByRole('button', { name: 'Collapse Team' }));
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('tree')).toBeNull());
+    await userEvent.click(input);
+    expect(screen.getByRole('treeitem', { name: 'Team' })).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
+    await userEvent.type(input, 'Code');
+    expect(screen.getByText('Code')).toBeVisible();
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('tree')).toBeNull());
+    await userEvent.click(input);
+    expect(screen.getByRole('treeitem', { name: 'Team' })).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
+  });
+
+  it('keeps loaded branches expanded without requesting them again on reopen', async () => {
+    const lazyOptions = [{ value: 'remote', label: 'Remote', isLeaf: false }];
+    const load = vi
+      .fn()
+      .mockResolvedValue([{ value: 'child', label: 'Loaded child', isLeaf: true }]);
+    render(
+      <ConfigProvider locale="en-US">
+        <TreeSelect options={lazyOptions} loadData={load} />
+      </ConfigProvider>,
+    );
+    const input = screen.getByRole('combobox');
+    await userEvent.click(input);
+    await userEvent.click(screen.getByRole('button', { name: 'Expand Remote' }));
+    expect(await screen.findByText('Loaded child')).toBeVisible();
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('tree')).toBeNull());
+    await userEvent.click(input);
+    expect(screen.getByRole('treeitem', { name: 'Remote' })).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    );
+    expect(await screen.findByText('Loaded child')).toBeVisible();
+    expect(load).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps controlled expansion authoritative and supports checking whole rows with Enter', async () => {
+    const change = vi.fn();
+    const expand = vi.fn();
+    const { rerender, container } = render(
+      <ConfigProvider locale="en-US">
+        <TreeSelect
+          options={options}
+          treeCheckable
+          treeExpandedKeys={[]}
+          onExpand={expand}
+          onChange={change}
+        />
+      </ConfigProvider>,
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByRole('button', { name: 'Expand Team' }));
+    expect(expand).toHaveBeenLastCalledWith(['team']);
+    expect(screen.getByRole('treeitem', { name: 'Team' })).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
+    rerender(
+      <ConfigProvider locale="en-US">
+        <TreeSelect options={options} treeCheckable treeExpandedKeys={['team']} onChange={change} />
+      </ConfigProvider>,
+    );
+    await userEvent.click(screen.getByText('Code'));
+    expect(change).toHaveBeenLastCalledWith(['code']);
+    await userEvent.keyboard('{Enter}');
+    expect(change).toHaveBeenLastCalledWith([]);
+    await userEvent.click(screen.getByText('Locked'));
+    expect(change).toHaveBeenCalledTimes(2);
+    await userEvent.click(screen.getByText('Design'));
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('tree')).toBeNull());
+    await userEvent.click(screen.getByRole('button', { name: 'Remove Design' }));
+    expect(screen.getByRole('combobox')).toHaveFocus();
+    expect(screen.getByRole('combobox')).toHaveAttribute('aria-expanded', 'false');
+    // Padding belongs to the trigger, not only the text input.
+    await userEvent.click(container.querySelector('.leaf-tree-select') as HTMLElement);
+    expect(screen.getByRole('combobox')).toHaveAttribute('aria-expanded', 'true');
+  });
 });
diff --git a/packages/react/src/treeselect/treeselect.tsx b/packages/react/src/treeselect/treeselect.tsx
index e1a38a0..26748f6 100644
--- a/packages/react/src/treeselect/treeselect.tsx
+++ b/packages/react/src/treeselect/treeselect.tsx
@@ -10,7 +10,9 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { useLeafConfig } from '../config-provider/context';
+import { estimateControlHeight } from '../density';
 import { FieldScope, useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { FormValue, useFieldValue, useMergedRef } from '../shared/field';
@@ -21,9 +23,11 @@ import {
   usePopupState,
 } from '../shared/floating';
 import { useListMotion } from '../shared/motion';
+import { SelectionContent } from '../shared/selection-content';
 import type { ControlSize, ControlStatus } from '../shared/types';
-import { Tree, type TreeNode } from '../tree';
+import type { TreeNode } from '../tree';
 import { treeModel } from '../tree/model';
+import { TreeControl as Tree } from '../tree/tree';
 
 export interface TreeSelectOption {
   value: string;
@@ -73,7 +77,8 @@ interface InternalTreeSelectProps
   inputReadOnly?: boolean;
   open?: boolean;
   defaultOpen?: boolean;
-  maxTagCount?: number;
+  maxTagCount?: number | 'responsive';
+  tagWrap?: boolean;
   maxCount?: number;
   treeExpandedKeys?: readonly string[];
   onExpand?: (keys: string[]) => void;
@@ -110,11 +115,12 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
       onLoadError,
       virtual = false,
       listHeight = 256,
-      itemHeight = 34,
+      itemHeight: itemHeightProp,
       inputReadOnly,
       open: controlledOpen,
       defaultOpen,
-      maxTagCount = Infinity,
+      maxTagCount,
+      tagWrap = true,
       maxCount = Infinity,
       treeExpandedKeys,
       onExpand,
@@ -136,7 +142,9 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
     },
     forwardedRef,
   ) {
-    const { messages } = useLeafConfig();
+    const { messages, theme, density } = useLeafConfig();
+    const itemHeight =
+      itemHeightProp ?? Math.max(24, estimateControlHeight(theme, density) - 4) + 6;
     const field = useFormField();
     const disabled = disabledProp || field?.disabled;
     const required = requiredProp ?? field?.required;
@@ -149,13 +157,9 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
     const pendingFocus = useRef(false);
     const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);
     const selected = typeof current === 'string' ? [current] : (current ?? emptyKeys);
-    useListMotion(
-      root,
-      JSON.stringify(selected.slice(0, maxTagCount)),
-      '.leaf-tree-select__tag[data-motion-key]',
-    );
     useListMotion(root, selected[0], multi ? '' : '.leaf-tree-select__input-wrap[data-motion-key]');
-    const [query, setQuery] = useState('');
+    const [query, setQuery] = useState<string | null>(null);
+    const searchQuery = query ?? '';
     const [open, setOpen] = usePopupState(
       disabled || props.readOnly,
       onOpenChange,
@@ -220,13 +224,16 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
       return convert(allOptions);
     }, [allOptions]);
     const records = useMemo(() => treeModel(data), [data]);
+    const [expandedKeys, setExpandedKeys] = useState<readonly string[]>(() =>
+      defaultExpandAll ? [...records.keys()] : treeDefaultExpandedKeys,
+    );
     const close = () => {
       setOpen(false);
-      setQuery('');
+      setQuery(null);
     };
     useFloatingDismiss(open, close, trigger, panel, root);
     useEffect(() => {
-      if (!open) setQuery('');
+      if (!open) setQuery(null);
       else if (pendingFocus.current) {
         panel.current?.querySelector<HTMLElement>('[role="treeitem"][tabindex="0"]')?.focus();
         pendingFocus.current = false;
@@ -237,7 +244,7 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
       const next: TreeSelectValue = multi ? [...keys] : (keys[0] ?? null);
       setCurrent(next);
       onChange?.(next);
-      setQuery('');
+      setQuery(null);
       if (!multi) {
         setOpen(false);
         trigger.current?.focus();
@@ -257,14 +264,19 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
       selectedCaption !== undefined &&
       typeof selectedCaption !== 'string' &&
       typeof selectedCaption !== 'number';
-    const showCaption =
-      !multi && !query && selected[0] !== undefined && ((showSearch && open) || hasRichCaption);
-    const inputValue =
-      multi || (showSearch && open)
-        ? query
+    const showCaption = !multi && hasRichCaption && (!showSearch || !open || query === null);
+    const inputValue = multi
+      ? searchQuery
+      : showSearch && open
+        ? (query ?? (selected[0] === undefined ? '' : a11yCaption(selected[0])))
         : selected[0] === undefined
           ? ''
           : a11yCaption(selected[0]);
+    const beginSearch = () => {
+      if (!showSearch || disabled || props.readOnly || inputReadOnly) return;
+      if (!multi && query === null) trigger.current?.select();
+      setOpen(true);
+    };
     return (
       <>
         {/* biome-ignore lint/a11y/noStaticElementInteractions: The wrapper extends the input's clickable area, as in Select. */}
@@ -282,32 +294,51 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
           data-status={status}
           data-open={open || undefined}
           data-clearable={clearable || undefined}
+          data-searchable={showSearch || undefined}
+          onMouseDown={(event) => {
+            if (
+              !disabled &&
+              event.target instanceof Element &&
+              !event.target.closest('input, button, a')
+            )
+              event.preventDefault();
+          }}
           onClick={(event) => {
-            if (!disabled && !(event.target as HTMLElement).closest('button')) {
+            if (
+              !disabled &&
+              event.target instanceof Element &&
+              !event.target.closest('input, button, a')
+            ) {
               trigger.current?.focus();
-              setOpen(true);
+              trigger.current?.click();
             }
           }}
         >
-          <div className="leaf-tree-select__content">
-            {multi &&
-              selected.slice(0, Math.max(0, maxTagCount)).map((key) => (
-                <span className="leaf-tree-select__tag" key={key} data-motion-key={key}>
-                  <span>{caption(key)}</span>
-                  {canRemove(key) && !disabled && !props.readOnly && (
-                    <button
-                      type="button"
-                      aria-label={`${messages.remove} ${a11yCaption(key)}`}
-                      onClick={() => commit(selected.filter((item) => item !== key))}
-                    >
-                      <X size={12} aria-hidden="true" />
-                    </button>
-                  )}
-                </span>
-              ))}
-            {multi && selected.length > maxTagCount && (
-              <span className="leaf-tree-select__tag">+{selected.length - maxTagCount}</span>
-            )}
+          <SelectionContent
+            className="leaf-tree-select__content"
+            tagClassName="leaf-tree-select__tag"
+            tagWrap={tagWrap}
+            maxTagCount={maxTagCount}
+            searchable={showSearch && !props.readOnly && !inputReadOnly}
+            query={searchQuery}
+            removeLabel={messages.common.remove}
+            items={
+              multi
+                ? selected.map((key) => ({
+                    key,
+                    label: caption(key),
+                    text: a11yCaption(key),
+                    remove:
+                      canRemove(key) && !disabled && !props.readOnly
+                        ? () => {
+                            commit(selected.filter((item) => item !== key));
+                            trigger.current?.focus();
+                          }
+                        : undefined,
+                  }))
+                : undefined
+            }
+          >
             <span className="leaf-tree-select__input-wrap" data-motion-key={selected[0] ?? ''}>
               {showCaption && (
                 <span className="leaf-tree-select__value" aria-hidden="true">
@@ -323,7 +354,7 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
                 aria-expanded={open}
                 aria-controls={open ? id : undefined}
                 aria-autocomplete={showSearch ? 'list' : undefined}
-                aria-label={label ?? (field?.labelId ? undefined : messages.select)}
+                aria-label={label ?? (field?.labelId ? undefined : messages.treeSelect.placeholder)}
                 aria-labelledby={props['aria-labelledby'] ?? field?.labelId}
                 aria-describedby={
                   [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') ||
@@ -339,7 +370,27 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
                 value={inputValue}
                 readOnly={!showSearch || props.readOnly || inputReadOnly}
                 disabled={disabled}
-                placeholder={selected.length ? undefined : (placeholder ?? messages.select)}
+                placeholder={
+                  selected.length ? undefined : (placeholder ?? messages.treeSelect.placeholder)
+                }
+                onClick={(event) => {
+                  props.onClick?.(event);
+                  if (event.defaultPrevented) return;
+                  if (open && !showSearch) close();
+                  else setOpen(true);
+                }}
+                onBeforeInput={(event) => {
+                  props.onBeforeInput?.(event);
+                  if (!event.defaultPrevented) beginSearch();
+                }}
+                onPaste={(event) => {
+                  props.onPaste?.(event);
+                  if (!event.defaultPrevented) beginSearch();
+                }}
+                onCompositionStart={(event) => {
+                  props.onCompositionStart?.(event);
+                  if (!event.defaultPrevented) beginSearch();
+                }}
                 onChange={(event) => {
                   setQuery(event.target.value);
                   onSearch?.(event.target.value);
@@ -347,7 +398,14 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
                 }}
                 onKeyDown={(event) => {
                   props.onKeyDown?.(event);
-                  if (event.defaultPrevented || disabled) return;
+                  if (event.defaultPrevented || disabled || event.nativeEvent.isComposing) return;
+                  if (
+                    !event.ctrlKey &&
+                    !event.metaKey &&
+                    !event.altKey &&
+                    (event.key.length === 1 || event.key === 'Backspace' || event.key === 'Delete')
+                  )
+                    beginSearch();
                   if (event.key === 'ArrowDown') {
                     event.preventDefault();
                     if (!open) {
@@ -360,19 +418,23 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
                   } else if (event.key === 'Enter' && !open) {
                     event.preventDefault();
                     setOpen(true);
-                  } else if (event.key === 'Backspace' && !query && multi) {
+                  } else if (event.key === 'Backspace' && !searchQuery && multi) {
                     const last = [...selected].reverse().find(canRemove);
-                    if (last) commit(selected.filter((key) => key !== last));
+                    if (last) {
+                      event.preventDefault();
+                      commit(selected.filter((key) => key !== last));
+                    }
                   }
                 }}
               />
             </span>
-          </div>
+          </SelectionContent>
           {clearable && (
             <button
               type="button"
               className="leaf-tree-select__clear"
-              aria-label={messages.clearSelection}
+              aria-label={messages.treeSelect.clear}
+              onMouseDown={(event) => event.preventDefault()}
               onClick={() => {
                 commit(selected.filter((key) => !canRemove(key)));
                 trigger.current?.focus();
@@ -386,7 +448,7 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
             className="leaf-tree-select__arrow"
             tabIndex={-1}
             disabled={disabled}
-            aria-label={messages.select}
+            aria-label={messages.treeSelect.placeholder}
             onClick={() => {
               trigger.current?.focus();
               if (open) close();
@@ -436,8 +498,13 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
               loadData={loadData ? lazyLoad : undefined}
               cacheKey={cacheKey}
               disabled={disabled || props.readOnly}
-              expandedKeys={treeExpandedKeys}
-              onExpand={(keys) => onExpand?.(keys)}
+              expandedKeys={treeExpandedKeys ?? expandedKeys}
+              onExpand={(keys) => {
+                if (treeExpandedKeys === undefined) setExpandedKeys(keys);
+                onExpand?.(keys);
+              }}
+              checkOnClick={treeCheckable}
+              expandOnClick
               filterTreeNode={
                 filterTreeNode
                   ? (node, query) => {
@@ -460,17 +527,15 @@ const InternalTreeSelect = forwardRef<HTMLInputElement, InternalTreeSelectProps>
               }}
               id={id}
               data={data}
-              aria-label={label ?? messages.select}
+              aria-label={label ?? messages.treeSelect.placeholder}
               multiple={multi}
               selectable={!treeCheckable}
               checkable={treeCheckable}
               checkStrictly={checkStrictly}
               selectedKeys={treeCheckable ? emptyKeys : selected}
               checkedKeys={selected}
-              searchValue={query}
-              defaultExpandAll={defaultExpandAll}
-              defaultExpandedKeys={treeDefaultExpandedKeys}
-              notFoundContent={notFoundContent}
+              searchValue={searchQuery}
+              notFoundContent={notFoundContent ?? messages.treeSelect.empty}
               onSelect={(keys) => commit(keys)}
               onCheck={(keys) => {
                 const checked = new Set(keys);
@@ -523,6 +588,13 @@ export type TreeSelectProps = Omit<
         onChange?: (value: readonly string[]) => void;
       }
   );
-export const TreeSelect = InternalTreeSelect as React.ForwardRefExoticComponent<
+export const TreeSelectControl = InternalTreeSelect as React.ForwardRefExoticComponent<
   TreeSelectProps & React.RefAttributes<HTMLInputElement>
 >;
+export const TreeSelect = forwardRef<HTMLInputElement, TreeSelectProps>(
+  function TreeSelect(rawProps, ref) {
+    const props = useComponentProps('TreeSelect', rawProps);
+    return <TreeSelectControl {...props} ref={ref} />;
+  },
+);
+TreeSelect.displayName = 'TreeSelect';
diff --git a/packages/react/src/typography/index.ts b/packages/react/src/typography/index.ts
index 7a63a58..82deccd 100644
--- a/packages/react/src/typography/index.ts
+++ b/packages/react/src/typography/index.ts
@@ -1 +1,8 @@
-export * from './typography';
+export type {
+  LinkProps,
+  ParagraphProps,
+  TextProps,
+  TitleProps,
+  TypographyProps,
+} from './typography';
+export { Link, Paragraph, Text, Title, Typography } from './typography';
diff --git a/packages/react/src/typography/typography.tsx b/packages/react/src/typography/typography.tsx
index c689ec9..9fd14da 100644
--- a/packages/react/src/typography/typography.tsx
+++ b/packages/react/src/typography/typography.tsx
@@ -8,7 +8,8 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Button } from '../button';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
 import { classes } from '../shared/classes';
 import { useText } from '../shared/use-text';
 
@@ -16,9 +17,10 @@ export interface TypographyProps extends HTMLAttributes<HTMLDivElement> {
   compact?: boolean;
 }
 export const Typography = forwardRef<HTMLDivElement, TypographyProps>(function Typography(
-  { compact, className, ...props },
+  rawProps: TypographyProps,
   ref,
 ) {
+  const { compact, className, ...props } = useComponentProps('Typography', rawProps);
   return (
     <div
       {...props}
@@ -75,7 +77,7 @@ function TextContent({
         ref={input}
         className="leaf-text__editor"
         type="text"
-        aria-label={t('编辑文本', 'Edit text')}
+        aria-label={t('typography.editText')}
         value={draft}
         onChange={(event) => setDraft(event.target.value)}
         onBlur={finish}
@@ -114,15 +116,15 @@ function TextContent({
           aria-expanded={expanded}
           onClick={() => setExpanded(!expanded)}
         >
-          {expanded ? t('收起', 'Collapse') : t('展开', 'Expand')}
+          {expanded ? t('typography.collapse') : t('typography.expand')}
         </button>
       )}
       {copyable && (
-        <Button
+        <ButtonControl
           variant="ghost"
           size="sm"
           startIcon={copied ? <Check size={14} /> : <Copy size={14} />}
-          aria-label={t('复制文本', 'Copy text')}
+          aria-label={t('typography.copyText')}
           onClick={async () => {
             const value = typeof copyable === 'object' ? (copyable.text ?? text) : text;
             try {
@@ -136,11 +138,11 @@ function TextContent({
         />
       )}
       {editable && (
-        <Button
+        <ButtonControl
           variant="ghost"
           size="sm"
           startIcon={<Pencil size={14} />}
-          aria-label={t('编辑文本', 'Edit text')}
+          aria-label={t('typography.editText')}
           onClick={() => {
             setDraft(editable.text ?? text);
             session.current = true;
@@ -151,8 +153,8 @@ function TextContent({
     </>
   );
 }
-export const Text = forwardRef<HTMLSpanElement, TextProps>(function Text(
-  {
+export const Text = forwardRef<HTMLSpanElement, TextProps>(function Text(rawProps: TextProps, ref) {
+  const {
     tone = 'default',
     strong,
     italic,
@@ -165,9 +167,7 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(function Text(
     className,
     children,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('Text', rawProps);
   return (
     <span
       {...props}
@@ -189,7 +189,10 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(function Text(
 });
 export interface ParagraphProps extends TextProps {}
 export const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(function Paragraph(
-  {
+  rawProps: ParagraphProps,
+  ref,
+) {
+  const {
     tone = 'default',
     strong,
     italic,
@@ -202,9 +205,7 @@ export const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(functi
     className,
     children,
     ...props
-  },
-  ref,
-) {
+  } = useComponentProps('Paragraph', rawProps);
   return (
     <p
       {...props}
@@ -229,9 +230,10 @@ export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
   level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 export const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
-  { level = 2, className, ...props },
+  rawProps: TitleProps,
   ref,
 ) {
+  const { level = 2, className, ...props } = useComponentProps('Title', rawProps);
   const Heading = `h${level}` as 'h2';
   return (
     <Heading
@@ -248,9 +250,18 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   icon?: ReactNode;
 }
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
-  { disabled, underline = true, external, icon, className, children, ...props },
+  rawProps: LinkProps,
   ref,
 ) {
+  const {
+    disabled,
+    underline = true,
+    external,
+    icon,
+    className,
+    children,
+    ...props
+  } = useComponentProps('Link', rawProps);
   return (
     <a
       {...props}
diff --git a/packages/react/src/upload/upload.tsx b/packages/react/src/upload/upload.tsx
index 29de607..e255286 100644
--- a/packages/react/src/upload/upload.tsx
+++ b/packages/react/src/upload/upload.tsx
@@ -9,12 +9,15 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Button } from '../button';
-import { type FileItem, FileList } from '../filelist';
+import { ButtonControl } from '../button/button';
+import { useComponentProps } from '../config-provider/component-defaults';
+import type { FileItem } from '../filelist';
+import { FileListControl as FileList } from '../filelist/filelist';
 import { fileName } from '../filelist/model';
 import { FieldScope, useFormField } from '../form/form';
 import { classes } from '../shared/classes';
 import { FormValue } from '../shared/field';
+import { useFormattedText } from '../shared/use-formatted-text';
 import { useText } from '../shared/use-text';
 import { acceptsFile, type UploadRequest, type UploadResult, uploadRequest } from './request';
 
@@ -70,7 +73,10 @@ export interface UploadHandle {
   focus: () => void;
 }
 export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
-  {
+  rawProps: UploadProps,
+  ref,
+) {
+  const {
     fileList,
     defaultFileList = [],
     onChange,
@@ -108,12 +114,11 @@ export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
     onDragOver,
     onDrop,
     ...props
-  }: UploadProps,
-  ref,
-) {
+  } = useComponentProps('Upload', rawProps);
   const field = useFormField();
   const disabled = disabledProp || field?.disabled;
   const t = useText();
+  const format = useFormattedText();
   const id = useId();
   const count = useRef(0);
   const input = useRef<HTMLInputElement>(null);
@@ -264,7 +269,7 @@ export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
             ? await config.action(file.originFile)
             : config.action;
         if (request.signal.aborted) return;
-        if (!address) throw new Error(t('上传地址不能为空', 'Upload URL cannot be empty'));
+        if (!address) throw new Error(t('upload.uploadUrlCannotBeEmpty'));
         result = await uploadRequest({
           file: file.originFile,
           signal: request.signal,
@@ -295,7 +300,7 @@ export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
           file.uid,
           {
             status: 'error',
-            error: reason instanceof Error ? reason.message : t('上传失败', 'Upload failed'),
+            error: reason instanceof Error ? reason.message : t('upload.uploadFailed'),
           },
           'error',
         );
@@ -341,38 +346,36 @@ export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
           const reject = (reason: UploadRejection['reason'], message: string) =>
             rejected.push({ file: original, reason, message });
           if (!multiple && accepted.length > 0) {
-            reject('count', t('每次只能选择一个文件', 'Choose one file at a time'));
+            reject('count', t('upload.chooseOneFileAtATime'));
             continue;
           }
           if (!acceptsFile(file, accept)) {
-            reject('type', t('文件格式不支持', 'File type is not accepted'));
+            reject('type', t('upload.fileTypeIsNotAccepted'));
             continue;
           }
           if (maxSize !== undefined && file.size > maxSize) {
-            reject('size', t('文件超过大小限制', 'File exceeds the size limit'));
+            reject('size', t('upload.fileExceedsTheSizeLimit'));
             continue;
           }
           if (
             maxCount !== undefined &&
             latest.current.current.length + accepted.length >= maxCount
           ) {
-            reject('count', t('文件数量达到上限', 'File count limit reached'));
+            reject('count', t('upload.fileCountLimitReached'));
             continue;
           }
           try {
             const result = await beforeUpload?.(file);
             if (!mounted.current || batchGeneration !== generation.current) return;
             if (result === false) {
-              reject('validation', t('文件未通过校验', 'File validation failed'));
+              reject('validation', t('upload.fileValidationFailed'));
               continue;
             }
             if (result instanceof File) file = result;
           } catch (reason) {
             reject(
               'validation',
-              reason instanceof Error
-                ? reason.message
-                : t('文件未通过校验', 'File validation failed'),
+              reason instanceof Error ? reason.message : t('upload.fileValidationFailed'),
             );
             continue;
           }
@@ -485,7 +488,7 @@ export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
         multiple={multiple}
         disabled={disabled}
         tabIndex={-1}
-        aria-label={t('选择文件', 'Choose files')}
+        aria-label={t('upload.chooseFiles')}
         onChange={(event) => {
           addFiles([...(event.target.files ?? [])]);
           event.target.value = '';
@@ -503,16 +506,12 @@ export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
           <span className="leaf-upload__symbol">
             <CloudUpload size={28} aria-hidden="true" />
           </span>
-          <span className="leaf-upload__title">
-            {children ?? t('点击或拖拽文件到这里', 'Click or drop files here')}
-          </span>
-          <span className="leaf-upload__hint">
-            {hint ?? t('支持选择和拖拽上传', 'Choose files or drag them into this area')}
-          </span>
+          <span className="leaf-upload__title">{children ?? t('upload.dropHint')}</span>
+          <span className="leaf-upload__hint">{hint ?? t('upload.dropDescription')}</span>
         </button>
       ) : (
         <div className="leaf-upload__trigger">
-          <Button
+          <ButtonControl
             ref={trigger}
             id={idProp ?? field?.id}
             variant="outline"
@@ -521,8 +520,8 @@ export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
             startIcon={<UploadIcon size={16} />}
             onClick={() => input.current?.click()}
           >
-            {children ?? t('选择文件', 'Choose files')}
-          </Button>
+            {children ?? t('upload.chooseFiles')}
+          </ButtonControl>
           {hint && <span className="leaf-upload__hint">{hint}</span>}
         </div>
       )}
@@ -553,12 +552,12 @@ export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
             renderActions={(file, actions) => (
               <>
                 {file.status === 'uploading' && (
-                  <Button
+                  <ButtonControl
                     variant="ghost"
                     size="sm"
                     disabled={disabled}
                     startIcon={<X size={15} />}
-                    aria-label={`${t('取消上传', 'Cancel upload')} ${fileName(file)}`}
+                    aria-label={format('upload.cancelUpload', { name: fileName(file) })}
                     onClick={() => {
                       if (!file.uid) return;
                       jobs.current.get(file.uid)?.abort();
@@ -570,12 +569,12 @@ export const Upload = forwardRef<UploadHandle, UploadProps>(function Upload(
                 {['error', 'cancelled', 'ready'].includes(file.status ?? '') &&
                   (action || customRequest) &&
                   file.originFile && (
-                    <Button
+                    <ButtonControl
                       variant="ghost"
                       size="sm"
                       disabled={disabled}
                       startIcon={<RotateCw size={15} />}
-                      aria-label={`${t('重新上传', 'Retry upload')} ${fileName(file)}`}
+                      aria-label={format('upload.retryUpload', { name: fileName(file) })}
                       onClick={() => void start(file as UploadFile)}
                     />
                   )}
diff --git a/packages/react/src/virtuallist/virtuallist.tsx b/packages/react/src/virtuallist/virtuallist.tsx
index 455c141..1785c70 100644
--- a/packages/react/src/virtuallist/virtuallist.tsx
+++ b/packages/react/src/virtuallist/virtuallist.tsx
@@ -10,7 +10,11 @@ import {
   useImperativeHandle,
   useRef,
 } from 'react';
-import { Result } from '../result';
+import {
+  mergeComponentProps,
+  useGenericComponentDefaults,
+} from '../config-provider/component-defaults';
+import { ResultControl as Result } from '../result/result';
 import { classes } from '../shared/classes';
 export interface VirtualListHandle {
   element: HTMLDivElement | null;
@@ -27,8 +31,8 @@ export interface VirtualListProps<T> extends Omit<HTMLAttributes<HTMLDivElement>
   emptyContent?: ReactNode;
   horizontal?: boolean;
 }
-function VirtualListRoot<T>(
-  {
+function VirtualListRoot<T>(rawProps: VirtualListProps<T>, ref: Ref<VirtualListHandle>) {
+  const {
     items,
     itemKey,
     renderItem,
@@ -40,9 +44,7 @@ function VirtualListRoot<T>(
     className,
     style,
     ...props
-  }: VirtualListProps<T>,
-  ref: Ref<VirtualListHandle>,
-) {
+  } = rawProps;
   const root = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer<HTMLDivElement, HTMLLIElement>({
     count: items.length,
@@ -108,6 +110,17 @@ function VirtualListRoot<T>(
     </div>
   );
 }
-export const VirtualList = forwardRef(VirtualListRoot) as <T>(
+export const VirtualListControl = forwardRef(VirtualListRoot) as <T>(
+  props: VirtualListProps<T> & RefAttributes<VirtualListHandle>,
+) => ReactElement;
+
+function VirtualListEntry<T>(rawProps: VirtualListProps<T>, ref: Ref<VirtualListHandle>) {
+  const props = mergeComponentProps<VirtualListProps<T>>(
+    useGenericComponentDefaults('VirtualList'),
+    rawProps,
+  );
+  return <VirtualListControl {...props} ref={ref} />;
+}
+export const VirtualList = forwardRef(VirtualListEntry) as <T>(
   props: VirtualListProps<T> & RefAttributes<VirtualListHandle>,
 ) => ReactElement;
diff --git a/packages/react/tests/browser/access-scope-fixture.tsx b/packages/react/tests/browser/access-scope-fixture.tsx
new file mode 100644
index 0000000..0b8396f
--- /dev/null
+++ b/packages/react/tests/browser/access-scope-fixture.tsx
@@ -0,0 +1,146 @@
+import { Alert, Button, CheckboxGroup, Modal, Space, Steps, Tag } from '@ifhover/leaf-ui';
+import { Bot, HardDrive, Mail, MessageSquare, ShieldCheck, Snowflake } from 'lucide-react';
+import { useState } from 'react';
+
+export function AccessScope({ english = false }: { english?: boolean }) {
+  const t = (zh: string, en: string) => (english ? en : zh);
+  const [open, setOpen] = useState(false);
+  const [services, setServices] = useState<string[]>(['mail', 'drive']);
+  const [permissions, setPermissions] = useState<string[]>(['read', 'labels']);
+  const [saved, setSaved] = useState(false);
+  return (
+    <Space direction="vertical" align="start" size="sm">
+      <Button variant="outline" startIcon={<ShieldCheck />} onClick={() => setOpen(true)}>
+        {t('设置访问权限', 'Configure access')}
+      </Button>
+      {saved && <span role="status">{t('访问权限已保存。', 'Access settings saved.')}</span>}
+      <Modal
+        open={open}
+        width={680}
+        title={t('注册智能体', 'Register agent')}
+        description={t(
+          '设置身份，再授予工作所需的访问权限。',
+          'Give the agent an identity, then grant the access it needs.',
+        )}
+        icon={<Bot />}
+        cancelText={t('返回', 'Back')}
+        confirmText={t('保存权限', 'Save access')}
+        onClose={() => setOpen(false)}
+        onConfirm={() => {
+          setSaved(true);
+          setOpen(false);
+        }}
+        footer={({ cancelButton, confirmButton }) => (
+          <>
+            <span
+              style={{
+                flex: '1 1 180px',
+                color: 'var(--leaf-color-text-muted)',
+                fontSize: 'var(--leaf-font-size-sm)',
+              }}
+            >
+              {t('第 2 步，共 4 步 · 草稿已保存', 'Step 2 of 4 · Draft saved')}
+            </span>
+            <Space size="sm" wrap={false}>
+              {cancelButton}
+              {confirmButton}
+            </Space>
+          </>
+        )}
+      >
+        <Space direction="vertical" align="stretch" size={20}>
+          <Steps
+            size="sm"
+            current={1}
+            items={[
+              { title: t('身份', 'Identity') },
+              { title: t('访问范围', 'Access scope') },
+              { title: t('凭证', 'Credentials') },
+              { title: t('确认', 'Review') },
+            ]}
+          />
+          <CheckboxGroup
+            legend={t('连接服务', 'Integrations')}
+            variant="card"
+            value={services}
+            onChange={setServices}
+            options={[
+              {
+                value: 'mail',
+                label: t('邮件', 'Mail'),
+                description: t('读取与整理邮件', 'Read and organize messages'),
+                icon: <Mail />,
+              },
+              {
+                value: 'drive',
+                label: t('云端文件', 'Cloud drive'),
+                description: t('查找与整理文件', 'Find and organize files'),
+                icon: <HardDrive />,
+              },
+              {
+                value: 'chat',
+                label: t('团队沟通', 'Team chat'),
+                description: t('尚未连接', 'Not connected'),
+                icon: <MessageSquare />,
+              },
+              {
+                value: 'warehouse',
+                label: t('数据仓库', 'Data warehouse'),
+                description: t('需要管理员配置', 'Administrator setup required'),
+                icon: <Snowflake />,
+                disabled: true,
+              },
+            ]}
+          />
+          <CheckboxGroup
+            legend={t('邮件权限', 'Mail permissions')}
+            variant="list"
+            value={permissions}
+            onChange={setPermissions}
+            options={[
+              {
+                value: 'read',
+                label: t('读取邮件', 'Read messages'),
+                description: 'mail.readonly',
+              },
+              {
+                value: 'labels',
+                label: t('管理标签', 'Manage labels'),
+                description: 'mail.labels',
+              },
+              {
+                value: 'send',
+                label: t('发送邮件', 'Send messages'),
+                description: 'mail.send',
+                extra: (
+                  <Tag color="warning" size="sm">
+                    {t('需要审批', 'Needs approval')}
+                  </Tag>
+                ),
+              },
+              {
+                value: 'delete',
+                label: t('删除邮件', 'Delete messages'),
+                description: 'mail.modify',
+                extra: <Tag size="sm">{t('策略已限制', 'Blocked by policy')}</Tag>,
+                disabled: true,
+              },
+            ]}
+          />
+          <Alert
+            type="success"
+            icon={<ShieldCheck size={20} />}
+            title={t(
+              `已选择 ${services.length} 项服务、${permissions.length} 项权限`,
+              `${services.length} services and ${permissions.length} permissions selected`,
+            )}
+            description={t(
+              '默认仅授予读取权限，发送邮件仍需审批。',
+              'Read-only by default. Outbound messages still require approval.',
+            )}
+          />
+        </Space>
+      </Modal>
+    </Space>
+  );
+}
diff --git a/packages/react/tests/browser/accessibility-workbench.tsx b/packages/react/tests/browser/accessibility-workbench.tsx
new file mode 100644
index 0000000..363a27c
--- /dev/null
+++ b/packages/react/tests/browser/accessibility-workbench.tsx
@@ -0,0 +1,172 @@
+import {
+  Button,
+  Checkbox,
+  ConfigProvider,
+  Drawer,
+  Form,
+  FormField,
+  Input,
+  Modal,
+  RadioGroup,
+  Select,
+  Slider,
+  Space,
+  Switch,
+  Tabs,
+} from '@ifhover/leaf-ui';
+import { useId, useRef, useState } from 'react';
+
+/** Internal browser acceptance fixture for keyboard, forms and overlays. */
+export function AccessibilityWorkbench({ english = false }: { english?: boolean }) {
+  const t = (zh: string, en: string) => (english ? en : zh);
+  const id = useId();
+  const nameInput = useRef<HTMLInputElement>(null);
+  const [dark, setDark] = useState(false);
+  const [compact, setCompact] = useState(false);
+  const [motion, setMotion] = useState(true);
+  const [blur, setBlur] = useState(true);
+  const [modal, setModal] = useState(false);
+  const [drawer, setDrawer] = useState(false);
+  const [saved, setSaved] = useState(false);
+  return (
+    <ConfigProvider
+      data-testid="acceptance-workbench"
+      className="rp-not-doc"
+      locale={english ? 'en-US' : 'zh-CN'}
+      density={compact ? 'compact' : 'comfortable'}
+      maskBlur={blur}
+      theme={{ appearance: dark ? 'dark' : 'light', motion }}
+      style={{
+        padding: 20,
+        border: '1px solid var(--leaf-color-border)',
+        borderRadius: 16,
+        color: 'var(--leaf-color-text)',
+        background: 'var(--leaf-color-surface)',
+      }}
+    >
+      <Space wrap style={{ marginBottom: 20 }}>
+        <Switch checked={dark} onChange={(event) => setDark(event.target.checked)}>
+          {t('深色', 'Dark')}
+        </Switch>
+        <Switch checked={compact} onChange={(event) => setCompact(event.target.checked)}>
+          {t('紧凑', 'Compact')}
+        </Switch>
+        <Switch checked={motion} onChange={(event) => setMotion(event.target.checked)}>
+          {t('动效', 'Motion')}
+        </Switch>
+        <Switch checked={blur} onChange={(event) => setBlur(event.target.checked)}>
+          {t('遮罩模糊', 'Mask blur')}
+        </Switch>
+      </Space>
+      <Form
+        aria-label={t('验收表单', 'Acceptance form')}
+        onSubmit={(event) => {
+          event.preventDefault();
+          setSaved(true);
+        }}
+      >
+        <FormField label={t('姓名', 'Name')} required>
+          <Input name="name" required defaultValue="Lin" />
+        </FormField>
+        <FormField label={t('邮箱', 'Email')} required>
+          <Input type="email" name="email" required defaultValue="lin@example.com" />
+        </FormField>
+        <FormField label={t('负责人', 'Owner')}>
+          <Select
+            name="owner"
+            defaultValue="lin"
+            options={[
+              { value: 'lin', label: 'Lin' },
+              { value: 'alex', label: 'Alex' },
+            ]}
+          />
+        </FormField>
+        <FormField label={t('优先级', 'Priority')}>
+          <Slider aria-label={t('优先级', 'Priority')} defaultValue={40} />
+        </FormField>
+        <fieldset style={{ border: 0, padding: 0, margin: 0 }}>
+          <legend>{t('通知方式', 'Notification channel')}</legend>
+          <RadioGroup
+            name="channel"
+            defaultValue="email"
+            options={[
+              { value: 'email', label: t('邮件', 'Email') },
+              { value: 'app', label: t('应用内', 'In app') },
+            ]}
+          />
+        </fieldset>
+        <Checkbox name="reminders" defaultChecked>
+          {t('启用提醒', 'Enable reminders')}
+        </Checkbox>
+        <Space wrap>
+          <Button type="submit">{t('保存', 'Save')}</Button>
+          <Button variant="outline" disabled>
+            {t('不可用操作', 'Unavailable action')}
+          </Button>
+          <Button variant="outline" onClick={() => setModal(true)}>
+            {t('打开弹窗', 'Open dialog')}
+          </Button>
+          <Button variant="outline" onClick={() => setDrawer(true)}>
+            {t('打开抽屉', 'Open drawer')}
+          </Button>
+        </Space>
+        <div role="status">{saved ? t('表单已保存', 'Form saved') : ''}</div>
+      </Form>
+      <Tabs
+        aria-label={t('验收标签页', 'Acceptance tabs')}
+        items={[
+          {
+            key: 'overview',
+            label: t('概览', 'Overview'),
+            children: (
+              <p>{t('键盘可在标签页之间移动。', 'Use the keyboard to move between tabs.')}</p>
+            ),
+          },
+          {
+            key: 'details',
+            label: t('详情', 'Details'),
+            children: (
+              <p>{t('内容区域与选中标签页关联。', 'The selected tab labels its content panel.')}</p>
+            ),
+          },
+        ]}
+      />
+      <Modal
+        initialFocus={nameInput}
+        title={t('编辑信息', 'Edit details')}
+        open={modal}
+        onClose={() => setModal(false)}
+        footer={<Button onClick={() => setModal(false)}>{t('完成', 'Done')}</Button>}
+      >
+        <Form>
+          <FormField label={t('弹窗姓名', 'Dialog name')}>
+            <Input ref={nameInput} defaultValue="Lin" />
+          </FormField>
+          <FormField label={t('弹窗负责人', 'Dialog owner')}>
+            <Select
+              defaultValue="lin"
+              options={[
+                { value: 'lin', label: 'Lin' },
+                { value: 'alex', label: 'Alex' },
+              ]}
+            />
+          </FormField>
+        </Form>
+      </Modal>
+      <Drawer
+        title={t('检查抽屉', 'Inspect drawer')}
+        open={drawer}
+        onClose={() => setDrawer(false)}
+        footer={<Button onClick={() => setDrawer(false)}>{t('完成', 'Done')}</Button>}
+      >
+        <p id={`${id}-drawer-description`}>
+          {t(
+            '检查焦点循环、关闭与焦点返回。',
+            'Check focus trapping, dismissal and focus restoration.',
+          )}
+        </p>
+        <Input aria-label={t('抽屉备注', 'Drawer notes')} />
+      </Drawer>
+    </ConfigProvider>
+  );
+}
diff --git a/packages/react/tests/browser/card-fixture.tsx b/packages/react/tests/browser/card-fixture.tsx
new file mode 100644
index 0000000..9c9c973
--- /dev/null
+++ b/packages/react/tests/browser/card-fixture.tsx
@@ -0,0 +1,104 @@
+import { Button, Card, ConfigProvider, Input, type TabItem } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function CardTabsFixture() {
+  const params = new URLSearchParams(location.search);
+  const size = params.has('large') ? 'lg' : params.has('small') ? 'sm' : 'md';
+  const [title, setTitle] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [activeKey, setActiveKey] = useState('details');
+  const [sortedItems, setSortedItems] = useState<TabItem[]>([
+    { key: 'first', label: 'First', children: 'Original first content' },
+    { key: 'second', label: 'Second', children: 'Original second content' },
+  ]);
+  const [items, setItems] = useState<TabItem[]>(
+    Array.from({ length: 9 }, (_, index) => ({
+      key: `draft-${index}`,
+      label: `Draft ${index + 1}`,
+      children: `Draft ${index + 1} content`,
+      closable: true,
+    })),
+  );
+  return (
+    <ConfigProvider
+      theme={
+        params.has('overrides')
+          ? {
+              primaryColor: '#7c3aed',
+              borderRadius: 5,
+              components: {
+                Card: { padding: '12px 24px', headerBackground: '#292935', borderColor: '#888899' },
+              },
+            }
+          : { primaryColor: params.get('theme') === 'dark' ? '#76aaff' : '#1669dc' }
+      }
+    >
+      <h1>Card tabs</h1>
+      <h2>Integrated navigation</h2>
+      <div style={{ display: 'flex', gap: 12, marginBottom: 20 }}>
+        <Button onClick={() => setTitle((title) => !title)}>Toggle heading</Button>
+        <Button onClick={() => setLoading((loading) => !loading)}>Toggle loading</Button>
+      </div>
+      <div style={{ display: 'grid', gap: 24, maxWidth: 520 }}>
+        <Card
+          data-testid="titled-card"
+          title={title ? 'Project settings' : undefined}
+          description={title ? 'Manage project details and members.' : undefined}
+          extra={<Button variant="link">Manage project</Button>}
+          divided
+          loading={loading}
+          size={size}
+          tabs={{
+            'aria-label': 'Project pages',
+            size: params.has('tabs-small') ? 'sm' : undefined,
+            activeKey,
+            onChange: setActiveKey,
+            extra: <Button variant="link">Help</Button>,
+            items: [
+              {
+                key: 'details',
+                label: 'Details',
+                children: <Input aria-label="Card draft" placeholder="Write a draft" />,
+              },
+              { key: 'disabled', label: 'Billing', disabled: true, children: null },
+              { key: 'members', label: 'Members', children: <p>Project members</p> },
+            ],
+          }}
+          footer={<Button variant="outline">Save settings</Button>}
+        />
+        <Card
+          data-testid="untitled-card"
+          size={size}
+          extra={<Button variant="link">View project</Button>}
+          tabs={{
+            'aria-label': 'Overview pages',
+            items: [
+              { key: 'summary', label: 'Summary', children: 'Project overview' },
+              { key: 'activity', label: 'Activity', children: 'Recent activity' },
+            ],
+          }}
+        />
+        <Card
+          data-testid="overflow-card"
+          title={title ? 'Drafts' : undefined}
+          style={{ maxWidth: 320 }}
+          tabs={{
+            'aria-label': 'Draft pages',
+            items,
+            onClose: (key) => setItems((items) => items.filter((item) => item.key !== key)),
+            onAdd: () =>
+              setItems([...items, { key: 'new', label: 'New draft', children: 'New draft' }]),
+          }}
+        >
+          Shared note
+        </Card>
+        <Card
+          data-testid="sortable-card"
+          title="Ordered pages"
+          loading={loading}
+          tabs={{ items: sortedItems, sortable: true, onReorder: setSortedItems }}
+        />
+      </div>
+    </ConfigProvider>
+  );
+}
diff --git a/packages/react/tests/browser/card.spec.ts b/packages/react/tests/browser/card.spec.ts
new file mode 100644
index 0000000..558927d
--- /dev/null
+++ b/packages/react/tests/browser/card.spec.ts
@@ -0,0 +1,248 @@
+import { expect, type Locator, test } from '@playwright/test';
+import axe from 'axe-core';
+
+async function geometry(card: Locator) {
+  return card.evaluate((node) => {
+    const heading = node.querySelector<HTMLElement>('.leaf-card__header');
+    const bar = node.querySelector<HTMLElement>('.leaf-tabs__header');
+    const tab = node.querySelector<HTMLElement>('[role="tab"]');
+    const panel = node.querySelector<HTMLElement>('[role="tabpanel"]:not([hidden])');
+    if (!bar || !tab || !panel) throw new Error('Missing card navigation');
+    const style = getComputedStyle(panel);
+    return {
+      headingBottom: heading?.getBoundingClientRect().bottom,
+      barTop: bar.getBoundingClientRect().top,
+      barBottom: bar.getBoundingClientRect().bottom,
+      tabTop: tab.getBoundingClientRect().top,
+      tabBottom: tab.getBoundingClientRect().bottom,
+      barWidth: bar.offsetWidth,
+      width: node.clientWidth,
+      tabLeft:
+        tab.getBoundingClientRect().left + Number.parseFloat(getComputedStyle(tab).paddingLeft),
+      bodyLeft: panel.getBoundingClientRect().left + Number.parseFloat(style.paddingLeft),
+      bodyPadding: [style.paddingTop, style.paddingRight, style.paddingBottom, style.paddingLeft],
+      headingBorder: heading ? getComputedStyle(heading).borderBottomWidth : '0px',
+      barBorder: getComputedStyle(bar).borderBottomWidth,
+      overflow: node.scrollWidth - node.clientWidth,
+    };
+  });
+}
+
+async function expectTabsFillHeading(card: Locator) {
+  const shape = await geometry(card);
+  expect(shape.tabTop).toBeCloseTo(shape.barTop, 1);
+  expect(shape.tabBottom).toBeCloseTo(shape.barBottom - 1, 1);
+  await expect(card.locator('.leaf-tabs__header')).toHaveCSS('padding-top', '0px');
+  await expect(card.locator('.leaf-tabs__header')).toHaveCSS('padding-bottom', '0px');
+  await expect(card.getByRole('tab').first()).toHaveCSS('align-items', 'center');
+  const offset = await card.locator('.leaf-tabs__extra').evaluate((extra) => {
+    const bar = extra.parentElement?.getBoundingClientRect();
+    const bounds = extra.getBoundingClientRect();
+    if (!bar) throw new Error('Missing tab header');
+    return (bounds.top + bounds.bottom) / 2 - (bar.top + bar.bottom - 1) / 2;
+  });
+  expect(Math.abs(offset)).toBeLessThan(1);
+}
+
+for (const appearance of ['light', 'dark']) {
+  test(`card headings and tabs form one surface with one divider in ${appearance}`, async ({
+    page,
+  }, testInfo) => {
+    await page.goto(`/?fixture=card&theme=${appearance}`);
+    const titled = page.getByTestId('titled-card');
+    const shape = await geometry(titled);
+    expect(shape.headingBottom).toBeCloseTo(shape.barTop, 1);
+    expect(shape.headingBorder).toBe('0px');
+    expect(shape.barBorder).toBe('1px');
+    expect(shape.barWidth).toBe(shape.width);
+    expect(shape.tabLeft).toBeCloseTo(shape.bodyLeft, 1);
+    expect(shape.bodyPadding).toEqual(['20px', '20px', '20px', '20px']);
+    expect(shape.overflow).toBeLessThanOrEqual(1);
+    await expect(titled.locator('.leaf-card__footer')).toHaveCSS('padding-top', '12px');
+    await expect(titled.locator('.leaf-card__footer')).toHaveCSS('padding-bottom', '12px');
+    const plain = page.getByTestId('untitled-card');
+    await expect(plain.locator('.leaf-card__header')).toHaveCount(0);
+    await expectTabsFillHeading(plain);
+    await expect(
+      plain.locator('.leaf-tabs__header').getByRole('button', { name: 'View project' }),
+    ).toBeVisible();
+    expect((await geometry(plain)).barBorder).toBe('1px');
+    await expect(
+      titled.locator('.leaf-card__header').getByRole('button', { name: 'Manage project' }),
+    ).toBeVisible();
+    await page.getByRole('button', { name: 'Toggle heading' }).click();
+    await expect(titled.locator('.leaf-card__header')).toHaveCount(0);
+    await expectTabsFillHeading(titled);
+    await expect(
+      titled.locator('.leaf-tabs__header').getByRole('button', { name: 'Manage project' }),
+    ).toBeVisible();
+    expect((await geometry(titled)).barBorder).toBe('1px');
+    await titled.screenshot({
+      path: `.quality/card-tabs-${appearance}-${testInfo.project.name}.png`,
+    });
+  });
+
+  test(`card tabs preserve form state, loading selection and keyboard behavior in ${appearance}`, async ({
+    page,
+  }) => {
+    await page.goto(`/?fixture=card&theme=${appearance}`);
+    const card = page.getByTestId('titled-card');
+    const details = card.getByRole('tab', { name: 'Details' });
+    const members = card.getByRole('tab', { name: 'Members' });
+    await card.getByRole('textbox', { name: 'Card draft' }).fill('Unsent draft');
+    await details.focus();
+    await details.press('ArrowRight');
+    await expect(members).toBeFocused();
+    await expect(members).toHaveAttribute('aria-selected', 'true');
+    await members.press('Home');
+    await expect(card.getByRole('textbox', { name: 'Card draft' })).toHaveValue('Unsent draft');
+    await page.getByRole('button', { name: 'Toggle loading' }).click();
+    await expect(card).toHaveAttribute('aria-busy', 'true');
+    await expect(card.getByRole('status')).toBeVisible();
+    await members.click();
+    await expect(members).toHaveAttribute('aria-selected', 'true');
+    await page.getByRole('button', { name: 'Toggle loading' }).click();
+    await expect(card.getByRole('tabpanel', { name: 'Members' })).toHaveText('Project members');
+    await expect(card.getByRole('status')).toHaveCount(0);
+    await expect(card.getByRole('tab', { name: 'Billing' })).toBeDisabled();
+    await page.addScriptTag({ content: axe.source });
+    const violations = await page.evaluate(
+      async () =>
+        (await (window as unknown as { axe: typeof axe }).axe.run('[data-testid="titled-card"]'))
+          .violations,
+    );
+    expect(violations).toEqual([]);
+  });
+}
+
+test('embedded tabs handle real overflow, closing all pages and restoring a normal card', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 375, height: 900 });
+  await page.goto('/?fixture=card');
+  const card = page.getByTestId('overflow-card');
+  await expect(card.getByRole('button', { name: 'More tabs', exact: true })).toBeVisible();
+  await card.getByRole('button', { name: 'More tabs', exact: true }).click();
+  await page.getByRole('menuitem', { name: 'Draft 9', exact: true }).click();
+  await expect(card.getByRole('tab', { name: 'Draft 9', exact: true })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+  await expect(card.getByRole('tabpanel')).toHaveText('Draft 9 content');
+  const sampled = page.evaluate(async () => {
+    const card = document.querySelector<HTMLElement>('[data-testid="overflow-card"]');
+    if (!card) throw new Error('Missing card');
+    const frames: number[] = [];
+    const started = performance.now();
+    while (performance.now() - started < 900) {
+      frames.push(card.scrollWidth - card.clientWidth);
+      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    }
+    return frames;
+  });
+  for (let i = 0; i < 9; i++) {
+    await card
+      .getByRole('button', { name: /^Close tab/ })
+      .last()
+      .click();
+  }
+  expect(Math.max(...(await sampled))).toBeLessThanOrEqual(1);
+  await expect(card.getByRole('tablist')).toHaveCount(0);
+  await expect(card.getByRole('heading', { name: 'Drafts' })).toBeVisible();
+  await expect(card.getByText('Shared note')).toBeVisible();
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+
+  await page.goto('/?fixture=card');
+  await page.getByRole('button', { name: 'Toggle heading' }).click();
+  await expect(card.locator('.leaf-card__header')).toHaveCount(0);
+  await expect(card.getByRole('button', { name: 'More tabs', exact: true })).toBeVisible();
+  await card.getByRole('button', { name: 'More tabs', exact: true }).click();
+  await page.getByRole('menuitem', { name: 'Draft 9', exact: true }).click();
+  await expect(card.getByRole('tabpanel')).toHaveText('Draft 9 content');
+  const untitled = await geometry(card);
+  expect(untitled.tabTop).toBeCloseTo(untitled.barTop, 1);
+  expect(untitled.tabBottom).toBeCloseTo(untitled.barBottom - 1, 1);
+  expect(untitled.overflow).toBeLessThanOrEqual(1);
+});
+
+for (const [label, size] of [
+  ['small', 'sm'],
+  ['large', 'lg'],
+] as const) {
+  test(`${label} cards, RTL and custom surfaces retain integrated insets and theme values`, async ({
+    page,
+  }) => {
+    await page.goto(`/?fixture=card&theme=dark&${label}&compact&rtl&overrides`);
+    const card = page.getByTestId('titled-card');
+    await expect(card.locator('.leaf-tabs')).toHaveClass(new RegExp(`leaf-tabs--${size}`));
+    await expect(card.locator('.leaf-card__title')).toHaveCSS(
+      'font-size',
+      size === 'sm' ? '14px' : '16px',
+    );
+    await expect(card.locator('.leaf-tabs__header')).toHaveCSS(
+      'background-color',
+      'rgb(41, 41, 53)',
+    );
+    await expect(card.locator('.leaf-tabs__header')).toHaveCSS(
+      'border-bottom-color',
+      'rgb(136, 136, 153)',
+    );
+    await expect(card.locator('.leaf-card__header')).toHaveCSS('border-bottom-width', '0px');
+    await expect(card.getByRole('tab', { name: 'Details' })).toHaveCSS(
+      'color',
+      'rgb(124, 58, 237)',
+    );
+    expect((await geometry(card)).bodyPadding).toEqual(['12px', '24px', '12px', '24px']);
+    const customized = await geometry(card);
+    expect(customized.tabLeft).toBeCloseTo(customized.bodyLeft, 1);
+    await expectTabsFillHeading(page.getByTestId('untitled-card'));
+    await card.getByRole('tab', { name: 'Details' }).press('ArrowLeft');
+    await expect(card.getByRole('tab', { name: 'Members' })).toBeFocused();
+  });
+}
+
+test('large cards derive their heading height and keep tab and child sizes independent', async ({
+  page,
+}) => {
+  await page.goto('/?fixture=card&large');
+  const card = page.getByTestId('titled-card');
+  await expect(card.locator('.leaf-tabs')).toHaveClass(/leaf-tabs--lg/);
+  await expect(card.getByRole('tab', { name: 'Details' })).toHaveCSS('min-height', '42px');
+  expect((await geometry(card)).bodyPadding).toEqual(['24px', '24px', '24px', '24px']);
+  await expect(card.locator('.leaf-card__header')).toHaveCSS('padding-top', '20px');
+  await expect(card.locator('.leaf-card__title')).toHaveCSS('font-size', '16px');
+  await expect(card.locator('.leaf-input')).toHaveCSS('height', '36px');
+  await expect(card.getByRole('button', { name: 'Save settings' })).toHaveCSS('height', '36px');
+  await expectTabsFillHeading(page.getByTestId('untitled-card'));
+  await expect(page.getByTestId('untitled-card').getByRole('tab').first()).toHaveCSS(
+    'min-height',
+    '64px',
+  );
+
+  await page.goto('/?fixture=card&large&tabs-small');
+  await expect(card.locator('.leaf-tabs')).toHaveClass(/leaf-tabs--sm/);
+  expect((await geometry(card)).bodyPadding).toEqual(['24px', '24px', '24px', '24px']);
+  await expect(card.getByRole('tab', { name: 'Details' })).toHaveCSS('min-height', '30px');
+});
+
+test('reordering loaded pages keeps original content when loading ends', async ({ page }) => {
+  await page.goto('/?fixture=card');
+  const card = page.getByTestId('sortable-card');
+  await page.getByRole('button', { name: 'Toggle loading' }).click();
+  await expect(card.getByRole('status', { name: 'Loading' })).toBeVisible();
+  const handle = card.getByRole('button', { name: 'Reorder tab First' });
+  await handle.focus();
+  await handle.press('Space');
+  await expect(card.locator('[data-dragging]')).toHaveCount(1);
+  // The keyboard sensor registers its document listener after activation.
+  await page.waitForTimeout(150);
+  await handle.press('ArrowRight');
+  await expect(card.locator('[data-dragging]')).toHaveAttribute('style', /translate3d\((?!0px)/);
+  await handle.press('Space');
+  await expect(card.getByRole('tab')).toHaveText(['Second', 'First']);
+  await page.getByRole('button', { name: 'Toggle loading' }).click();
+  await expect(card.getByRole('tabpanel')).toHaveText('Original first content');
+  await card.getByRole('tab', { name: 'Second' }).click();
+  await expect(card.getByRole('tabpanel')).toHaveText('Original second content');
+  await expect(card.getByRole('status', { name: 'Loading' })).toHaveCount(0);
+});
diff --git a/packages/react/tests/browser/component-defaults-fixture.tsx b/packages/react/tests/browser/component-defaults-fixture.tsx
new file mode 100644
index 0000000..7439dbe
--- /dev/null
+++ b/packages/react/tests/browser/component-defaults-fixture.tsx
@@ -0,0 +1,310 @@
+import {
+  Button,
+  Card,
+  Checkbox,
+  CheckboxGroup,
+  CommandPalette,
+  ConfigProvider,
+  DatePicker,
+  Form,
+  FormField,
+  Input,
+  InputNumber,
+  InputSearch,
+  type LeafComponentDefaults,
+  LoadingBarProvider,
+  Modal,
+  Pagination,
+  Select,
+  Space,
+  SplitButton,
+  Tabs,
+  Tag,
+  Transfer,
+  Upload,
+  useConfirm,
+  useLoadingBar,
+  useMessage,
+  useNotification,
+} from '@ifhover/leaf-ui';
+import { useMemo, useRef, useState } from 'react';
+
+const options = [
+  { value: 'leaf', label: 'Leaf' },
+  { value: 'react', label: 'React' },
+];
+const inner: LeafComponentDefaults = { Button: { size: 'lg' } };
+const boundaryDefaults = {
+  Button: { loading: true, disabled: true, type: 'submit', size: 'sm', variant: 'outline' },
+  Input: { type: 'password', readOnly: true, required: true, value: 'Shared', id: 'global-field' },
+  Select: { readOnly: true, showSearch: true, loading: true },
+} satisfies LeafComponentDefaults;
+
+function ComponentDefaultsBoundaries() {
+  const [submits, setSubmits] = useState(0);
+  const [copied, setCopied] = useState(false);
+  const [pageSize, setPageSize] = useState(10);
+  const [commandsOpen, setCommandsOpen] = useState(false);
+  return (
+    <section aria-label="Component boundaries">
+      <h2>Component boundaries</h2>
+      <ConfigProvider components={boundaryDefaults}>
+        <Space direction="vertical" align="stretch">
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              setSubmits((value) => value + 1);
+            }}
+          >
+            <Space direction="vertical" align="start">
+              <SplitButton
+                loading={false}
+                disabled={false}
+                menuLabel="Split menu"
+                items={[{ key: 'copy', label: 'Copy item', onClick: () => setCopied(true) }]}
+              >
+                Split primary
+              </SplitButton>
+              <Upload>Choose boundary file</Upload>
+              <Pagination total={100} showSizeChanger onChange={(_, size) => setPageSize(size)} />
+            </Space>
+          </form>
+          <Space>
+            <output aria-label="Boundary submissions">{submits}</output>
+            <output aria-label="Copied item">{String(copied)}</output>
+            <output aria-label="Boundary page size">{pageSize}</output>
+          </Space>
+          <ConfigProvider components={{ Input: null, Button: null }}>
+            <form aria-label="Cleared defaults">
+              <Space direction="vertical" align="stretch">
+                <Input aria-label="Local reset input" name="local" defaultValue="Editable" />
+                <Button type="reset">Reset local input</Button>
+              </Space>
+            </form>
+          </ConfigProvider>
+          <Button
+            type="button"
+            loading={false}
+            disabled={false}
+            onClick={() => setCommandsOpen(true)}
+          >
+            Open boundary commands
+          </Button>
+        </Space>
+        <CommandPalette
+          open={commandsOpen}
+          onOpenChange={setCommandsOpen}
+          shortcut={false}
+          items={[
+            { key: 'copy', label: 'Copy command' },
+            { key: 'save', label: 'Save command' },
+          ]}
+        />
+      </ConfigProvider>
+    </section>
+  );
+}
+
+function ConfirmRequest() {
+  const { confirm } = useConfirm();
+  return (
+    <Button onClick={() => void confirm({ title: 'Delete item', children: 'Cannot undo.' })}>
+      Confirm request
+    </Button>
+  );
+}
+
+function ScopedServiceActions() {
+  const { confirm } = useConfirm();
+  const { message } = useMessage();
+  const notification = useNotification();
+  const loading = useLoadingBar();
+  const finish = useRef<(() => void) | undefined>(undefined);
+  return (
+    <Space wrap>
+      <Button
+        onClick={() =>
+          void confirm({ title: 'Regional confirm', children: <Tag>Confirm content</Tag> })
+        }
+      >
+        Regional confirm request
+      </Button>
+      <Button onClick={() => message.open({ content: <Tag>Message content</Tag> })}>
+        Regional message
+      </Button>
+      <Button
+        onClick={() =>
+          notification.open({ title: 'Regional notice', description: <Tag>Notice content</Tag> })
+        }
+      >
+        Regional notification
+      </Button>
+      <Button
+        onClick={() => {
+          finish.current = loading.start();
+        }}
+      >
+        Start scoped task
+      </Button>
+      <Button onClick={() => finish.current?.()}>Finish scoped task</Button>
+    </Space>
+  );
+}
+
+function ExpandedComponentDefaults() {
+  const [updated, setUpdated] = useState(false);
+  const components = useMemo<LeafComponentDefaults>(
+    () => ({
+      Form: { layout: 'vertical' },
+      Checkbox: { defaultChecked: true, name: 'independent' },
+      CheckboxGroup: { size: 'sm', defaultValue: ['a'] },
+      InputNumber: { size: updated ? 'lg' : 'sm', defaultValue: updated ? 7 : 2 },
+      DatePicker: { size: 'sm', allowClear: true, popupClassName: 'regional-date-panel' },
+      Card: { size: 'sm' },
+      Tabs: { size: 'lg', closable: true },
+      Tag: { variant: updated ? 'soft' : 'solid', color: 'success' },
+      Confirm: { confirmText: updated ? 'Proceed now' : 'Proceed', cancelText: 'Back' },
+      Message: { duration: 30, type: 'warning', closable: true },
+      Notification: { duration: 30, placement: 'bottom-left' },
+      LoadingBar: { height: updated ? 7 : 5, color: updated ? '#cf0b2d' : '#1d9bf0' },
+      VirtualList: { horizontal: true, className: 'public-list-default' },
+      Transfer: { height: 160 },
+    }),
+    [updated],
+  );
+  return (
+    <section aria-label="Expanded defaults">
+      <h2>Expanded defaults</h2>
+      <Button onClick={() => setUpdated((value) => !value)}>Change expanded defaults</Button>
+      <ConfigProvider components={components}>
+        <Space direction="vertical" align="stretch">
+          <Form aria-label="Expanded form">
+            <FormField label="Amount">
+              <InputNumber name="amount" />
+            </FormField>
+            <FormField label="Event date">
+              <DatePicker name="date" />
+            </FormField>
+            <Checkbox>Independent choice</Checkbox>
+            <CheckboxGroup
+              name="group"
+              options={[
+                { value: 'a', label: 'Group A' },
+                { value: 'b', label: 'Group B' },
+              ]}
+            />
+          </Form>
+          <Card
+            aria-label="Embedded tabs card"
+            tabs={{
+              'aria-label': 'Embedded tabs',
+              items: [{ key: 'one', label: 'Embedded one', children: 'Card content' }],
+            }}
+          />
+          <Tabs
+            data-testid="public-default-tabs"
+            aria-label="Public tabs"
+            items={[{ key: 'one', label: 'Public one', children: 'Public content' }]}
+          />
+          <ScopedServiceActions />
+          <Transfer
+            aria-label="Scoped transfer"
+            virtual
+            items={[{ key: 'a', label: 'Transfer row' }]}
+          />
+          <div
+            data-testid="provider-grid"
+            style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}
+          >
+            <LoadingBarProvider>
+              <Button>Grid first</Button>
+              <Button>Grid second</Button>
+            </LoadingBarProvider>
+          </div>
+        </Space>
+      </ConfigProvider>
+    </section>
+  );
+}
+
+export function ComponentDefaultsFixture() {
+  const [large, setLarge] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState<string[]>([]);
+  const components = useMemo<LeafComponentDefaults>(
+    () => ({
+      Button: { variant: 'outline', size: large ? 'lg' : 'sm' },
+      Input: {
+        allowClear: true,
+        size: large ? 'lg' : 'sm',
+        defaultValue: large ? 'Updated' : 'Leaf',
+      },
+      InputSearch: { enterButton: 'Find', onSearch: setQuery },
+      Select: { showSearch: true, allowClear: true, size: 'sm', popupClassName: 'defaults-popup' },
+      Modal: {
+        width: 520,
+        confirmText: 'Save',
+        maskClosable: false,
+        description: 'Modal defaults only',
+      },
+    }),
+    [large],
+  );
+  return (
+    <div className="component-defaults-fixture">
+      <h1>Component defaults</h1>
+      <Space>
+        <Button onClick={() => setLarge((value) => !value)}>Update defaults</Button>
+        <Button>Outside defaults</Button>
+      </Space>
+      <ConfigProvider components={components}>
+        <Space direction="vertical" align="stretch" size="lg">
+          <Space>
+            <Button>Inherited</Button>
+            <Button variant="solid" size="md">
+              Instance override
+            </Button>
+          </Space>
+          <ConfigProvider components={inner}>
+            <Button>Nested override</Button>
+          </ConfigProvider>
+          <form aria-label="Defaults form">
+            <Space direction="vertical" align="stretch">
+              <Input name="name" aria-label="Name" />
+              <InputSearch name="search" aria-label="Search" />
+              <Button type="reset">Reset inputs</Button>
+            </Space>
+          </form>
+          <Select
+            multiple
+            aria-label="Libraries"
+            options={options}
+            value={selected}
+            onChange={setSelected}
+          />
+          <output aria-label="Search result">{query || 'None'}</output>
+          <output aria-label="Selected libraries">{selected.join(',') || 'None'}</output>
+          <Form disabled>
+            <FormField label="Disabled search">
+              <InputSearch disabled={false} enterButton="Disabled find" />
+            </FormField>
+          </Form>
+          <Space>
+            <Button onClick={() => setOpen(true)}>Open defaults modal</Button>
+            <ConfirmRequest />
+          </Space>
+        </Space>
+        <Modal open={open} title="Default modal" onClose={() => setOpen(false)}>
+          <Space direction="vertical" align="stretch">
+            <Input aria-label="Modal name" />
+            <Select aria-label="Modal library" options={options} />
+            <Button>Portal button</Button>
+          </Space>
+        </Modal>
+      </ConfigProvider>
+      <ComponentDefaultsBoundaries />
+      <ExpandedComponentDefaults />
+    </div>
+  );
+}
diff --git a/packages/react/tests/browser/component-defaults.spec.ts b/packages/react/tests/browser/component-defaults.spec.ts
new file mode 100644
index 0000000..8a0a56e
--- /dev/null
+++ b/packages/react/tests/browser/component-defaults.spec.ts
@@ -0,0 +1,265 @@
+import { expect, test } from '@playwright/test';
+import axe from 'axe-core';
+
+for (const appearance of ['light', 'dark']) {
+  test(`default scopes, size overrides and forced disabled in ${appearance}`, async ({
+    page,
+  }, info) => {
+    await page.goto(`/?fixture=component-defaults&theme=${appearance}`);
+    const inherited = page.getByRole('button', { name: 'Inherited', exact: true });
+    await expect(inherited).toHaveClass(/leaf-button--outline/u);
+    await expect(inherited).toHaveCSS('height', '30px');
+    await expect(page.getByRole('button', { name: 'Nested override' })).toHaveCSS('height', '42px');
+    await expect(page.getByRole('button', { name: 'Instance override' })).toHaveCSS(
+      'height',
+      '36px',
+    );
+    await expect(page.getByRole('button', { name: 'Outside defaults' })).toHaveClass(
+      /leaf-button--solid/u,
+    );
+    await expect(
+      page.getByRole('textbox', { name: 'Disabled search', exact: true }),
+    ).toBeDisabled();
+    await expect(page.getByRole('button', { name: 'Disabled find' })).toBeDisabled();
+    await page.addScriptTag({ content: axe.source });
+    const violations = await page.evaluate(async () =>
+      (await (window as unknown as { axe: typeof axe }).axe.run(document.body)).violations.map(
+        (item) => item.id,
+      ),
+    );
+    expect(violations).toEqual([]);
+    await page.screenshot({
+      path: `.quality/component-defaults-${appearance}-${info.project.name}.png`,
+      fullPage: true,
+    });
+  });
+}
+
+test('updating defaults preserves native inputs, search values and current reset defaults', async ({
+  page,
+}) => {
+  await page.goto('/?fixture=component-defaults');
+  const name = page.getByRole('textbox', { name: 'Name', exact: true });
+  const search = page.getByRole('textbox', { name: 'Search', exact: true });
+  await expect(name).toHaveValue('Leaf');
+  await search.fill('Leaf search');
+  await name.fill('Edited name');
+  await page.getByRole('button', { name: 'Update defaults' }).click();
+  await expect(name).toHaveValue('Edited name');
+  await expect(search).toHaveValue('Leaf search');
+  await expect(page.getByRole('button', { name: 'Find', exact: true })).toHaveCSS('height', '42px');
+  await search.press('Enter');
+  await expect(page.getByRole('status', { name: 'Search result' })).toHaveText('Leaf search');
+  await page.getByRole('button', { name: 'Reset inputs' }).click();
+  await expect(name).toHaveValue('Updated');
+  await expect(search).toHaveValue('Updated');
+  await page.getByRole('button', { name: 'Find', exact: true }).click();
+  await expect(page.getByRole('status', { name: 'Search result' })).toHaveText('Updated');
+  const form = page.getByRole('form', { name: 'Defaults form' });
+  expect(
+    await form.evaluate((node) => Object.fromEntries(new FormData(node as HTMLFormElement))),
+  ).toEqual({ name: 'Updated', search: 'Updated' });
+});
+
+test('Select search defaults retain instance-owned multi-select values', async ({ page }) => {
+  await page.goto('/?fixture=component-defaults');
+  const input = page.getByRole('combobox', { name: 'Libraries' });
+  await input.fill('rea');
+  const popup = page.getByRole('listbox');
+  await expect(popup).toHaveClass(/defaults-popup/u);
+  await expect(popup.getByRole('option', { name: 'Leaf', exact: true })).toHaveCount(0);
+  await popup.getByRole('option', { name: 'React', exact: true }).click();
+  await expect(page.getByRole('status', { name: 'Selected libraries' })).toHaveText('react');
+  await expect(popup).toBeVisible();
+  await input.press('Escape');
+  await expect(popup).toBeHidden();
+});
+
+test('Modal portal inherits defaults and preserves keyboard/focus behavior', async ({ page }) => {
+  const errors: string[] = [];
+  page.on('pageerror', (error) => errors.push(error.message));
+  await page.goto('/?fixture=component-defaults');
+  const trigger = page.getByRole('button', { name: 'Open defaults modal' });
+  await trigger.focus();
+  await trigger.press('Enter');
+  const dialog = page.getByRole('dialog', { name: 'Default modal' });
+  await expect(dialog).toHaveCSS('width', '520px');
+  await expect(dialog).toHaveAccessibleDescription('Modal defaults only');
+  await expect(dialog.getByRole('button', { name: 'Portal button' })).toHaveCSS('height', '30px');
+  await expect(dialog.getByRole('button', { name: 'Portal button' })).toHaveClass(
+    /leaf-button--outline/u,
+  );
+  await expect(dialog.getByRole('textbox', { name: 'Modal name' })).toHaveValue('Leaf');
+  const select = dialog.getByRole('combobox', { name: 'Modal library' });
+  await select.fill('rea');
+  await page.getByRole('option', { name: 'React', exact: true }).click();
+  await expect(select).toBeFocused();
+  await expect(dialog).toBeVisible();
+  await select.press('Escape');
+  await expect(dialog).toBeHidden();
+  await expect(trigger).toBeFocused();
+  expect(errors).toEqual([]);
+});
+
+test('Confirm retains its own compact dialog and footer under Modal defaults', async ({ page }) => {
+  await page.goto('/?fixture=component-defaults');
+  await page.getByRole('button', { name: 'Confirm request', exact: true }).click();
+  const dialog = page.getByRole('alertdialog', { name: 'Delete item' });
+  await expect(dialog).toHaveCSS('width', '420px');
+  await expect(dialog).toHaveAccessibleDescription('Cannot undo.');
+  await expect(dialog.getByText('Modal defaults only')).toHaveCount(0);
+  await expect(dialog.getByRole('button', { name: 'OK' })).toBeVisible();
+  await dialog.getByRole('button', { name: 'Cancel' }).click();
+  await expect(dialog).toBeHidden();
+});
+
+test('cleared defaults restore editable local inputs, builtin buttons and native reset', async ({
+  page,
+}) => {
+  await page.goto('/?fixture=component-defaults');
+  const form = page.getByRole('form', { name: 'Cleared defaults' });
+  const input = form.getByRole('textbox', { name: 'Local reset input' });
+  await expect(input).toBeEditable();
+  await expect(input).toHaveAttribute('type', 'text');
+  await input.fill('Changed locally');
+  const reset = form.getByRole('button', { name: 'Reset local input' });
+  await expect(reset).toHaveCSS('height', '36px');
+  await expect(reset).toHaveClass(/leaf-button--solid/u);
+  await reset.click();
+  await expect(input).toHaveValue('Editable');
+});
+
+test('global defaults cannot change composite button actions, page size or command search', async ({
+  page,
+}) => {
+  const errors: string[] = [];
+  page.on('pageerror', (error) => errors.push(error.message));
+  await page.goto('/?fixture=component-defaults');
+  const section = page.getByRole('region', { name: 'Component boundaries' });
+  const main = section.getByRole('button', { name: 'Split primary' });
+  const menu = section.getByRole('button', { name: 'Split menu' });
+  await expect(main).toBeEnabled();
+  await expect(menu).toBeEnabled();
+  await expect(menu).toHaveAttribute('type', 'button');
+  await expect(main).toHaveCSS('height', '30px');
+  await expect(menu).toHaveCSS('height', '30px');
+  await menu.click();
+  await page.getByRole('menuitem', { name: 'Copy item' }).click();
+  await expect(section.getByLabel('Copied item')).toHaveText('true');
+  await expect(section.getByLabel('Boundary submissions')).toHaveText('0');
+  const chooser = page.waitForEvent('filechooser');
+  await section.getByRole('button', { name: 'Choose boundary file' }).click();
+  await (await chooser).setFiles([]);
+  await expect(section.getByLabel('Boundary submissions')).toHaveText('0');
+  await main.click();
+  await expect(section.getByLabel('Boundary submissions')).toHaveText('1');
+  await section.getByRole('combobox', { name: 'Page size' }).click();
+  await page.getByRole('option', { name: '20 / page' }).click();
+  await expect(section.getByLabel('Boundary page size')).toHaveText('20');
+  await section.getByRole('button', { name: 'Open boundary commands' }).click();
+  const dialog = page.getByRole('dialog', { name: 'Command search' });
+  const search = dialog.getByRole('combobox');
+  await expect(search).toBeEditable();
+  await expect(search).toHaveAttribute('type', 'text');
+  await search.fill('copy');
+  await expect(dialog.getByRole('option', { name: 'Copy command' })).toBeVisible();
+  await expect(dialog.getByRole('option', { name: 'Save command' })).toHaveCount(0);
+  await search.press('Escape');
+  await expect(dialog).toBeHidden();
+  expect(errors).toEqual([]);
+});
+
+test('expanded field and display defaults retain local state and isolate internal controls', async ({
+  page,
+}) => {
+  await page.goto('/?fixture=component-defaults');
+  const region = page.getByRole('region', { name: 'Expanded defaults' });
+  await expect(region.getByLabel('Independent choice')).toBeChecked();
+  await expect(region.getByLabel('Group A', { exact: true })).toBeChecked();
+  await expect(region.getByLabel('Group B', { exact: true })).not.toBeChecked();
+  await region.getByLabel('Group B', { exact: true }).check();
+  const form = region.getByRole('form');
+  expect(
+    await form.evaluate((node) => new FormData(node as HTMLFormElement).getAll('group')),
+  ).toEqual(['a', 'b']);
+  const amount = region.getByRole('spinbutton', { name: 'Amount', exact: true });
+  await amount.fill('9');
+  await region
+    .getByRole('button', { name: 'Change expanded defaults' })
+    .evaluate((node: HTMLButtonElement) => node.click());
+  await expect(amount).toHaveValue('9');
+  await expect(amount).toBeFocused();
+  await expect(region.locator('.leaf-input-number')).toHaveClass(/leaf-input-number--lg/u);
+  const card = region.getByLabel('Embedded tabs card');
+  await expect(card).toHaveClass(/leaf-card--sm/u);
+  await expect(card.locator('.leaf-tabs')).toHaveClass(/leaf-tabs--sm/u);
+  await expect(card.getByRole('button', { name: /close/iu })).toHaveCount(0);
+  await expect(region.getByTestId('public-default-tabs')).toHaveClass(/leaf-tabs--lg/u);
+  const first = await region.getByRole('button', { name: 'Grid first' }).boundingBox();
+  const second = await region.getByRole('button', { name: 'Grid second' }).boundingBox();
+  expect(first?.y).toBe(second?.y);
+  expect(second?.x).toBeGreaterThan(first?.x ?? 0);
+  await expect(region.locator('.leaf-transfer .public-list-default')).toHaveCount(0);
+  await expect(region.getByText('Transfer row', { exact: true })).toBeVisible();
+  const date = region.getByRole('combobox', { name: 'Event date' });
+  await date.fill('2026-10-15');
+  await date.press('Enter');
+  await expect(date).toHaveValue('2026-10-15');
+  await date.click();
+  await expect(page.locator('.regional-date-panel')).toBeVisible();
+  await date.press('Escape');
+  await expect(date).toBeFocused();
+});
+
+test('service requests keep options but content follows the calling region', async ({ page }) => {
+  await page.goto('/?fixture=component-defaults');
+  const region = page.getByRole('region', { name: 'Expanded defaults' });
+  await region.getByRole('button', { name: 'Regional message', exact: true }).click();
+  await expect(page.locator('.leaf-tag').filter({ hasText: 'Message content' })).toHaveClass(
+    /leaf-tag--solid/u,
+  );
+  await expect(page.locator('.leaf-message').filter({ hasText: 'Message content' })).toHaveClass(
+    /leaf-message--warning/u,
+  );
+  await region.getByRole('button', { name: 'Regional notification', exact: true }).click();
+  await expect(page.locator('.leaf-notification-region--bottom-left')).toContainText(
+    'Regional notice',
+  );
+  await region.getByRole('button', { name: 'Regional confirm request' }).click();
+  const dialog = page.getByRole('alertdialog', { name: 'Regional confirm' });
+  await expect(dialog.getByRole('button', { name: 'Proceed', exact: true })).toBeVisible();
+  await expect(dialog.locator('.leaf-tag')).toHaveClass(/leaf-tag--solid/u);
+  await region
+    .getByRole('button', { name: 'Change expanded defaults' })
+    .evaluate((node: HTMLButtonElement) => node.click());
+  await expect(dialog.getByRole('button', { name: 'Proceed', exact: true })).toBeVisible();
+  await expect(dialog.locator('.leaf-tag')).toHaveClass(/leaf-tag--soft/u);
+  await expect(page.locator('.leaf-tag').filter({ hasText: 'Message content' })).toHaveClass(
+    /leaf-tag--soft/u,
+  );
+  await expect(page.locator('.leaf-tag').filter({ hasText: 'Notice content' })).toHaveClass(
+    /leaf-tag--soft/u,
+  );
+  await dialog.getByRole('button', { name: 'Back', exact: true }).click();
+  await expect(dialog).toBeHidden();
+  await region.getByRole('button', { name: 'Regional confirm request' }).click();
+  await expect(dialog.getByRole('button', { name: 'Proceed now', exact: true })).toBeVisible();
+  await dialog.getByRole('button', { name: 'Back', exact: true }).click();
+});
+
+test('task loading bar snapshots presentation until the next batch', async ({ page }) => {
+  await page.goto('/?fixture=component-defaults');
+  const region = page.getByRole('region', { name: 'Expanded defaults' });
+  await region.getByRole('button', { name: 'Start scoped task' }).click();
+  const bar = page.getByRole('progressbar', { name: 'Page loading progress' });
+  await expect(bar).toHaveCSS('height', '5px');
+  await expect(bar.locator('span')).toHaveCSS('background-color', 'rgb(29, 155, 240)');
+  await region.getByRole('button', { name: 'Change expanded defaults' }).click();
+  await expect(bar).toHaveCSS('height', '5px');
+  await region.getByRole('button', { name: 'Finish scoped task' }).click();
+  await expect(bar).toBeHidden();
+  await region.getByRole('button', { name: 'Start scoped task' }).click();
+  await expect(bar).toHaveCSS('height', '7px');
+  await expect(bar.locator('span')).toHaveCSS('background-color', 'rgb(207, 11, 45)');
+  await region.getByRole('button', { name: 'Finish scoped task' }).click();
+});
diff --git a/packages/react/tests/browser/control-height-fixture.tsx b/packages/react/tests/browser/control-height-fixture.tsx
new file mode 100644
index 0000000..0839d5f
--- /dev/null
+++ b/packages/react/tests/browser/control-height-fixture.tsx
@@ -0,0 +1,115 @@
+import {
+  AutoComplete,
+  Button,
+  Cascader,
+  Checkbox,
+  ColorPicker,
+  DatePicker,
+  DateRangePicker,
+  DateTimePicker,
+  Input,
+  InputNumber,
+  InputOTP,
+  Radio,
+  Segmented,
+  Select,
+  Space,
+  Switch,
+  Tabs,
+  TimePicker,
+  TimeRangePicker,
+  Transfer,
+  TreeSelect,
+} from '@ifhover/leaf-ui';
+
+const options = Array.from({ length: 120 }, (_, index) => ({
+  value: String(index),
+  label: `Option ${index}`,
+}));
+
+export function ControlHeightFixture() {
+  return (
+    <Space direction="vertical" align="stretch" size={24} style={{ maxWidth: 480 }}>
+      <h1>Shared control height</h1>
+      {(['sm', 'md', 'lg'] as const).map((size) => (
+        <Space key={size} direction="vertical" align="stretch" data-testid={`controls-${size}`}>
+          <h2>{size}</h2>
+          <div data-height-control="Button">
+            <Button size={size}>Action</Button>
+          </div>
+          <div data-height-control="Input">
+            <Input size={size} aria-label={`Input ${size}`} />
+          </div>
+          <div data-height-control="InputNumber">
+            <InputNumber size={size} aria-label={`Number ${size}`} />
+          </div>
+          <div data-height-control="InputOTP">
+            <InputOTP size={size} length={4} />
+          </div>
+          <div data-height-control="Select">
+            <Select size={size} aria-label={`Select ${size}`} options={options} virtual />
+          </div>
+          <div data-height-control="AutoComplete">
+            <AutoComplete
+              size={size}
+              aria-label={`AutoComplete ${size}`}
+              options={options}
+              filterOption={false}
+              virtual
+            />
+          </div>
+          <div data-height-control="Cascader">
+            <Cascader size={size} aria-label={`Cascader ${size}`} options={options} />
+          </div>
+          <div data-height-control="TreeSelect">
+            <TreeSelect size={size} aria-label={`TreeSelect ${size}`} options={options} virtual />
+          </div>
+          <div data-height-control="DatePicker">
+            <DatePicker size={size} aria-label={`Date ${size}`} />
+          </div>
+          <div data-height-control="DateTimePicker">
+            <DateTimePicker size={size} aria-label={`Date time ${size}`} />
+          </div>
+          <div data-height-control="DateRangePicker">
+            <DateRangePicker size={size} aria-label={`Date range ${size}`} />
+          </div>
+          <div data-height-control="TimePicker">
+            <TimePicker size={size} aria-label={`Time ${size}`} />
+          </div>
+          <div data-height-control="TimeRangePicker">
+            <TimeRangePicker size={size} aria-label={`Time range ${size}`} />
+          </div>
+          <div data-height-control="ColorPicker">
+            <ColorPicker size={size} showText />
+          </div>
+          <div data-height-control="Checkbox">
+            <Checkbox size={size}>Choice</Checkbox>
+          </div>
+          <div data-height-control="Radio">
+            <Radio size={size}>Choice</Radio>
+          </div>
+          <div data-height-control="Switch">
+            <Switch size={size}>Setting</Switch>
+          </div>
+          <div data-height-control="Segmented">
+            <Segmented size={size} options={['One', 'Two']} />
+          </div>
+          <div data-height-control="Tabs">
+            <Tabs
+              size={size}
+              type="card"
+              items={[
+                { key: 'one', label: 'One', children: null },
+                { key: 'two', label: 'Two', children: null },
+              ]}
+            />
+          </div>
+        </Space>
+      ))}
+      <Transfer
+        virtual
+        items={options.map((option) => ({ key: option.value, label: option.label }))}
+      />
+    </Space>
+  );
+}
diff --git a/packages/react/tests/browser/control-height.spec.ts b/packages/react/tests/browser/control-height.spec.ts
new file mode 100644
index 0000000..c7d7e81
--- /dev/null
+++ b/packages/react/tests/browser/control-height.spec.ts
@@ -0,0 +1,69 @@
+import { expect, test } from '@playwright/test';
+
+for (const [suffix, base] of [
+  ['', 36],
+  ['&compact=1', 30],
+  ['&tokens=1', 44],
+  ['&theme=dark', 36],
+  ['&rtl=1', 36],
+] as const) {
+  test(`control and popup geometry follows the ${base}px region ${suffix || 'default'}`, async ({
+    page,
+  }, testInfo) => {
+    await page.goto(`/?fixture=control-height${suffix}`);
+    await expect(page.getByRole('heading', { name: 'Shared control height' })).toBeVisible();
+    const metrics = await page.evaluate(() =>
+      [...document.querySelectorAll<HTMLElement>('[data-height-control]')].map((wrapper) => {
+        const control = wrapper.querySelector<HTMLElement>(
+          ':scope > :not(input[type="hidden"]):not(.leaf-form-value)',
+        );
+        if (!control) throw new Error(`Missing ${wrapper.dataset.heightControl}`);
+        const measured =
+          wrapper.dataset.heightControl === 'Tabs'
+            ? (control.querySelector<HTMLElement>('.leaf-tabs__list') ?? control)
+            : control;
+        return {
+          name: wrapper.dataset.heightControl,
+          size: wrapper
+            .closest('[data-testid]')
+            ?.getAttribute('data-testid')
+            ?.replace('controls-', ''),
+          height: measured.getBoundingClientRect().height,
+        };
+      }),
+    );
+    await testInfo.attach('control-geometry', {
+      body: JSON.stringify(metrics),
+      contentType: 'application/json',
+    });
+    for (const metric of metrics) {
+      const height = base + (metric.size === 'sm' ? -6 : metric.size === 'lg' ? 6 : 0);
+      expect.soft(metric.height, `${metric.name} ${metric.size}`).toBeCloseTo(height, 0);
+    }
+    const rowHeight = base - 4;
+    for (const name of [
+      'Select md',
+      'AutoComplete md',
+      'Cascader md',
+      'TreeSelect md',
+      'Time md',
+    ]) {
+      await page.getByRole('combobox', { name, exact: true }).click();
+      const panel = page.locator('.leaf-floating[data-state="open"]');
+      await expect(panel).toBeVisible();
+      const row = panel
+        .locator(name.startsWith('TreeSelect') ? '.leaf-tree__row' : '.leaf-floating__option')
+        .first();
+      await expect.poll(async () => (await row.boundingBox())?.height).toBeCloseTo(rowHeight, 0);
+      if (name === 'Select md' || name === 'AutoComplete md' || name === 'TreeSelect md') {
+        const scroll = name.startsWith('TreeSelect') ? panel.locator('.leaf-tree') : panel;
+        await scroll.evaluate((node) => {
+          node.scrollTop = node.scrollHeight;
+        });
+        await expect(panel.getByText('Option 119', { exact: true })).toBeVisible();
+      }
+      await page.keyboard.press('Escape');
+      await expect(panel).toBeHidden();
+    }
+  });
+}
diff --git a/packages/react/tests/browser/file-list-fixture.tsx b/packages/react/tests/browser/file-list-fixture.tsx
new file mode 100644
index 0000000..32361c7
--- /dev/null
+++ b/packages/react/tests/browser/file-list-fixture.tsx
@@ -0,0 +1,124 @@
+import { Button, type FileItem, FileList, Upload, type UploadRequest } from '@ifhover/leaf-ui';
+import { useRef, useState } from 'react';
+
+const photo = new URL(
+  '../../../../apps/docs/docs/public/media/landscape-1.svg?no-inline',
+  import.meta.url,
+).href;
+const secondPhoto = new URL(
+  '../../../../apps/docs/docs/public/media/landscape-2.svg?no-inline',
+  import.meta.url,
+).href;
+const longName = 'Project handover documentation with a deliberately long filename final.pdf';
+const initial: FileItem[] = [
+  { uid: 'report', name: 'Project proposal.pdf', url: '/report.pdf', size: 2457600 },
+  { uid: 'photo', name: 'Summer landscape.svg', url: photo, size: 414 },
+  {
+    uid: 'long',
+    name: longName,
+    url: '/handover.pdf',
+    status: 'error',
+    error: 'Connection interrupted. Please retry the upload before downloading this attachment.',
+  },
+  { uid: 'data', name: 'Quarterly data.csv', url: '/data.csv' },
+];
+const pictures: FileItem[] = [
+  { uid: 'photo', name: 'Summer landscape.svg', url: photo, size: 414 },
+  { uid: 'trail', name: 'Mountain trail.svg', url: secondPhoto },
+  { uid: 'archive', name: 'Project attachments.zip', url: '/attachments.zip', size: 3145728 },
+];
+
+export function FileListFixture() {
+  const [files, setFiles] = useState(initial);
+  const [removing, setRemoving] = useState(false);
+  const finishRemoval = useRef<() => void>(() => {});
+  const attempted = useRef(new Set<string>());
+  const request = useRef<UploadRequest | null>(null);
+  const rejectUpload = useRef<(reason: Error) => void>(() => {});
+  return (
+    <div className="file-list-fixture">
+      <h1>File lists</h1>
+      <section aria-label="File information">
+        <h2>File information</h2>
+        <FileList
+          items={files}
+          removable
+          onRemove={async (file) => {
+            await new Promise<void>((resolve) => {
+              finishRemoval.current = resolve;
+              setRemoving(true);
+            });
+            if (file.uid === 'report' && !attempted.current.has(file.uid)) {
+              attempted.current.add(file.uid);
+              throw new Error('Removal failed. Please try again.');
+            }
+            setFiles((current) => current.filter((item) => item.uid !== file.uid));
+          }}
+        />
+        {removing && (
+          <Button
+            variant="outline"
+            onClick={() => {
+              setRemoving(false);
+              finishRemoval.current();
+            }}
+          >
+            Complete removal
+          </Button>
+        )}
+      </section>
+      <section aria-label="Thumbnails">
+        <h2>Thumbnails</h2>
+        <FileList listType="picture" items={pictures} />
+      </section>
+      <section aria-label="Picture cards">
+        <h2>Picture cards</h2>
+        <FileList listType="picture-card" items={pictures} />
+      </section>
+      <section aria-label="Status and empty">
+        <h2>Status and empty</h2>
+        <FileList
+          downloadable={false}
+          items={[
+            {
+              uid: 'upload',
+              name: 'Introduction.mp4',
+              status: 'uploading',
+              percent: 42,
+              size: 12582912,
+            },
+            { uid: 'done', name: 'Delivery notes.pdf', status: 'done' },
+            { uid: 'ready', name: 'Project notes.md', status: 'ready' },
+            { uid: 'cancelled', name: 'Backup.zip', status: 'cancelled' },
+          ]}
+        />
+        <FileList items={[]} />
+      </section>
+      <section aria-label="Disabled actions">
+        <h2>Disabled actions</h2>
+        <FileList items={[pictures[0] as FileItem]} removable onRemove={() => {}} disabled />
+      </section>
+      <section aria-label="Upload integration">
+        <h2>Upload integration</h2>
+        <Upload
+          multiple
+          customRequest={(entry) => {
+            request.current = entry;
+            return new Promise((_, reject) => {
+              rejectUpload.current = reject;
+            });
+          }}
+        />
+        <Button variant="outline" onClick={() => request.current?.onProgress(60)}>
+          Advance upload
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => rejectUpload.current(new Error('Upload connection failed.'))}
+        >
+          Fail upload
+        </Button>
+      </section>
+    </div>
+  );
+}
diff --git a/packages/react/tests/browser/file-list.spec.ts b/packages/react/tests/browser/file-list.spec.ts
new file mode 100644
index 0000000..7630088
--- /dev/null
+++ b/packages/react/tests/browser/file-list.spec.ts
@@ -0,0 +1,152 @@
+import { expect, test } from '@playwright/test';
+import axe from 'axe-core';
+
+for (const [name, query, width] of [
+  ['desktop', '', 1100],
+  ['mobile', '', 375],
+  ['dark RTL', '&theme=dark&rtl=1', 1100],
+  ['compact mobile', '&compact=1', 375],
+] as const) {
+  test(`file names, visuals and actions align without overflow: ${name}`, async ({
+    page,
+  }, testInfo) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto(`/?fixture=file-list${query}`);
+    const text = page.getByRole('region', { name: 'File information', exact: true });
+    const rows = text.locator('.leaf-file-list__item');
+    const geometry = await rows.evaluateAll((nodes) =>
+      nodes.map((node) => {
+        const rtl = getComputedStyle(node).direction === 'rtl';
+        const icon = node.querySelector('.leaf-file-list__icon')?.getBoundingClientRect();
+        const details = node.querySelector('.leaf-file-list__details')?.getBoundingClientRect();
+        const row = node.getBoundingClientRect();
+        const actions = [...node.querySelectorAll('.leaf-file-list__action')].map((action) => {
+          const rect = action.getBoundingClientRect();
+          return { width: rect.width, height: rect.height, left: rect.left, right: rect.right };
+        });
+        return {
+          icon: rtl ? icon?.right : icon?.left,
+          details: rtl ? details?.right : details?.left,
+          row: { left: row.left, right: row.right },
+          actions,
+        };
+      }),
+    );
+    expect(geometry).toHaveLength(4);
+    for (const entry of geometry) {
+      expect(entry.icon).toBeCloseTo(geometry[0]?.icon ?? 0, 0);
+      expect(entry.details).toBeCloseTo(geometry[0]?.details ?? 0, 0);
+      for (const action of entry.actions) {
+        expect(action.width).toBeCloseTo(action.height, 0);
+        expect(action.width).toBeCloseTo(geometry[0]?.actions[0]?.width ?? 0, 0);
+        expect(action.left).toBeGreaterThanOrEqual(entry.row.left);
+        expect(action.right).toBeLessThanOrEqual(entry.row.right);
+      }
+    }
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth - innerWidth),
+    ).toBeLessThanOrEqual(1);
+    const overflow = await page
+      .locator('.leaf-file-list')
+      .evaluateAll((nodes) => nodes.map((node) => node.scrollWidth - node.clientWidth));
+    expect(Math.max(...overflow)).toBeLessThanOrEqual(1);
+    const cards = page.getByRole('region', { name: 'Picture cards', exact: true });
+    const actionEdges = await cards
+      .locator('.leaf-file-list__actions')
+      .evaluateAll((nodes) => nodes.map((node) => node.getBoundingClientRect().bottom));
+    if (width > 480) expect(Math.max(...actionEdges) - Math.min(...actionEdges)).toBeLessThan(1);
+    await page.screenshot({
+      path: `.quality/file-list-${testInfo.project.name}-${name.replaceAll(' ', '-')}.png`,
+      fullPage: true,
+      animations: 'disabled',
+    });
+  });
+}
+
+test('removal keeps errors in the affected row, prevents double submit and recovers on retry', async ({
+  page,
+}) => {
+  await page.goto('/?fixture=file-list');
+  const text = page.getByRole('region', { name: 'File information', exact: true });
+  const first = text.locator('.leaf-file-list__item').first();
+  const remove = first.getByRole('button', { name: 'Remove Project proposal.pdf' });
+  await remove.click();
+  await expect(remove).toBeDisabled();
+  await text.getByRole('button', { name: 'Complete removal' }).click();
+  await expect(first.getByRole('alert')).toHaveText('Removal failed. Please try again.');
+  await expect(text.getByRole('alert')).toHaveCount(1);
+  await remove.click();
+  await text.getByRole('button', { name: 'Complete removal' }).click();
+  await expect(text.getByText('Project proposal.pdf')).toHaveCount(0);
+  await expect(text.locator('.leaf-file-list__item')).toHaveCount(3);
+  const row = text.locator('.leaf-file-list__item').first();
+  await expect(row).toHaveText(/Summer landscape/);
+  await expect(row.getByRole('button', { name: /Remove/ })).toBeEnabled();
+});
+
+test('keyboard image preview switches images, closes and returns focus to its trigger', async ({
+  page,
+}) => {
+  await page.goto('/?fixture=file-list');
+  const trigger = page
+    .getByRole('region', { name: 'Thumbnails', exact: true })
+    .getByRole('button', { name: 'Preview Summer landscape.svg' });
+  await trigger.focus();
+  await page.keyboard.press('Enter');
+  const preview = page.getByRole('dialog', { name: 'Image preview' });
+  await expect(preview).toBeVisible();
+  await page.keyboard.press('ArrowRight');
+  await expect(preview).toContainText('Mountain trail.svg');
+  await page.keyboard.press('Escape');
+  await expect(preview).toBeHidden();
+  await expect(trigger).toBeFocused();
+});
+
+test('Upload cancel and retry keep their action sizes and show progress and errors in the file row', async ({
+  page,
+}) => {
+  await page.goto('/?fixture=file-list');
+  const region = page.getByRole('region', { name: 'Upload integration', exact: true });
+  await region
+    .locator('input[type=file]')
+    .setInputFiles({ name: 'notes.txt', mimeType: 'text/plain', buffer: Buffer.from('notes') });
+  const row = region.locator('.leaf-file-list__item');
+  await expect(row).toContainText('Uploading');
+  await region.getByRole('button', { name: 'Advance upload' }).click();
+  await expect(row.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '60');
+  const cancel = row.getByRole('button', { name: 'Cancel upload notes.txt' });
+  const remove = row.getByRole('button', { name: 'Remove notes.txt' });
+  expect((await cancel.boundingBox())?.height).toBeCloseTo(
+    (await remove.boundingBox())?.height ?? 0,
+    0,
+  );
+  await cancel.click();
+  await expect(row).toContainText('Cancelled');
+  await row.getByRole('button', { name: 'Retry upload notes.txt' }).click();
+  await expect(row.getByRole('progressbar')).toBeVisible();
+  await region.getByRole('button', { name: 'Fail upload' }).click();
+  await expect(row).toContainText('Upload connection failed.');
+  await expect(row.getByRole('button', { name: 'Retry upload notes.txt' })).toBeEnabled();
+});
+
+test('file lists pass accessibility checks in both themes and respect reduced motion', async ({
+  page,
+}) => {
+  for (const theme of ['light', 'dark']) {
+    await page.goto(`/?fixture=file-list&theme=${theme}`);
+    await page.addScriptTag({ content: axe.source });
+    const violations = await page.evaluate(
+      async () => (await (window as unknown as { axe: typeof axe }).axe.run('main')).violations,
+    );
+    expect(violations).toEqual([]);
+    const disabled = page.getByRole('region', { name: 'Disabled actions', exact: true });
+    await expect(disabled.getByRole('button')).toHaveCount(2);
+    await expect(disabled.getByLabel('Download Summer landscape.svg')).not.toHaveAttribute('href');
+    await expect(disabled.getByRole('button').first()).toBeDisabled();
+  }
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await expect(page.locator('.leaf-file-list__item').first()).toHaveCSS(
+    'transition-duration',
+    '0s',
+  );
+});
diff --git a/packages/react/tests/browser/fixture.scss b/packages/react/tests/browser/fixture.scss
index 6b87436..315d71e 100644
--- a/packages/react/tests/browser/fixture.scss
+++ b/packages/react/tests/browser/fixture.scss
@@ -1,5 +1,9 @@
 @use '../../src/styles/mixins';
 
+.browser-multi-select [hidden] {
+  display: none !important;
+}
+
 .leaf-demo-section-title {
   @include mixins.section-label;
 }
@@ -27,7 +31,7 @@ main {
   height: 150px;
   background: var(--leaf-color-primary-soft);
 }
-.leaf-tabs,
+.leaf-tabs:not(.leaf-card__tabs),
 .leaf-calendar-view,
 .leaf-slider,
 .leaf-menu {
@@ -49,6 +53,9 @@ form {
 .surface-fixture [data-leaf-theme] {
   min-height: 0;
 }
+.component-defaults-fixture [data-leaf-theme] {
+  min-height: 0;
+}
 .surface-fixture form {
   max-width: none;
 }
@@ -64,3 +71,21 @@ form {
   inset: auto;
   width: max-content;
 }
+
+.file-list-fixture {
+  display: grid;
+  gap: 28px;
+  h1,
+  h2 {
+    margin: 0;
+    font-weight: 500;
+  }
+  h2 {
+    font-size: 16px;
+  }
+  section {
+    display: grid;
+    gap: 14px;
+    min-width: 0;
+  }
+}
diff --git a/packages/react/tests/browser/fixture.tsx b/packages/react/tests/browser/fixture.tsx
index aa38f37..cb2cf0d 100644
--- a/packages/react/tests/browser/fixture.tsx
+++ b/packages/react/tests/browser/fixture.tsx
@@ -41,16 +41,27 @@ import { Modal } from '../../src/modal';
 import '../../src/styles/index.scss';
 import css from '../../src/styles/index.scss?inline';
 import './fixture.scss';
-import { AccessibilityWorkbench } from '../../../../apps/docs/src/examples/scenarios/accessibility';
+import { AccessibilityWorkbench } from './accessibility-workbench';
+import { CardTabsFixture } from './card-fixture';
 import { ColorFixture } from './color-fixture';
+import { ComponentDefaultsFixture } from './component-defaults-fixture';
+import { ControlHeightFixture } from './control-height-fixture';
 import { FeedbackFixture } from './feedback-fixture';
+import { FileListFixture } from './file-list-fixture';
+import { FlexFixture } from './flex-fixture';
+import { FormFixture, FormHelpFixture } from './form-fixture';
 import { MotionFixture } from './motion-fixture';
+import { MultiSelectFixture } from './multi-select-fixture';
+import { PaginationFixture } from './pagination-fixture';
 import { RadiusFixture } from './radius-fixture';
 import { RefinementsFixture } from './refinements-fixture';
 import { ScrollbarFixture } from './scrollbar-fixture';
+import { SearchSelectFixture } from './search-select-fixture';
 import { SelectionFixture } from './selection-fixture';
 import { SurfaceFixture } from './surface-fixture';
 import { TableFixture } from './table-fixture';
+import { TabsFixture } from './tabs-fixture';
+import { TranslationsFixture } from './translations-fixture';
 import { WarningFixture } from './warning-fixture';
 
 const params = new URLSearchParams(location.search);
@@ -352,7 +363,27 @@ createRoot(root).render(
     }
   >
     <main>
-      {fixture === 'surfaces' ? (
+      {fixture === 'translations' ? (
+        <TranslationsFixture />
+      ) : fixture === 'component-defaults' ? (
+        <ComponentDefaultsFixture />
+      ) : fixture === 'pagination' ? (
+        <PaginationFixture />
+      ) : fixture === 'control-height' ? (
+        <ControlHeightFixture />
+      ) : fixture === 'card' ? (
+        <CardTabsFixture />
+      ) : fixture === 'flex' ? (
+        <FlexFixture />
+      ) : fixture === 'tabs' ? (
+        <TabsFixture />
+      ) : fixture === 'form-help' ? (
+        <FormHelpFixture />
+      ) : fixture === 'form' ? (
+        <FormFixture />
+      ) : fixture === 'file-list' ? (
+        <FileListFixture />
+      ) : fixture === 'surfaces' ? (
         <SurfaceFixture />
       ) : fixture === 'warning' ? (
         <WarningFixture />
@@ -370,6 +401,10 @@ createRoot(root).render(
         <FeedbackFixture />
       ) : fixture === 'refinements' ? (
         <RefinementsFixture />
+      ) : fixture === 'multi-select' ? (
+        <MultiSelectFixture />
+      ) : fixture === 'search-select' ? (
+        <SearchSelectFixture />
       ) : fixture === 'selection' ? (
         <SelectionFixture />
       ) : fixture === 'motion' ? (
diff --git a/packages/react/tests/browser/flex-fixture.tsx b/packages/react/tests/browser/flex-fixture.tsx
new file mode 100644
index 0000000..9f845ed
--- /dev/null
+++ b/packages/react/tests/browser/flex-fixture.tsx
@@ -0,0 +1,36 @@
+import { Button, ConfigProvider, Flex, FloatButtonGroup } from '@ifhover/leaf-ui';
+
+export function FlexFixture() {
+  return (
+    <ConfigProvider theme={{ spacing: 12 }}>
+      <Flex aria-label="Themed spacing" gap="sm">
+        <Button>First</Button>
+        <Button>Second</Button>
+      </Flex>
+      <Flex aria-label="Wrapping" gap={[12, 8]} wrap style={{ width: 220 }}>
+        <Button style={{ width: 140 }}>Wrap first</Button>
+        <Button style={{ width: 140 }}>Wrap second</Button>
+      </Flex>
+      <Flex aria-label="Alignment" justify="space-between" style={{ width: 300 }}>
+        <Button>Start</Button>
+        <Button>End</Button>
+      </Flex>
+      <Flex aria-label="Inline" inline gap="sm">
+        <Button>Inline first</Button>
+        <Button>Inline second</Button>
+      </Flex>
+      <Flex
+        aria-label="Reversed start"
+        direction="row-reverse"
+        justify="start"
+        align="end"
+        gap="sm"
+        style={{ width: 300, minHeight: 72 }}
+      >
+        <Button>Reversed first</Button>
+        <Button>Reversed second</Button>
+      </Flex>
+      <FloatButtonGroup fixed={false} actions={[{ key: 'save', label: 'Save' }]} />
+    </ConfigProvider>
+  );
+}
diff --git a/packages/react/tests/browser/flex.spec.ts b/packages/react/tests/browser/flex.spec.ts
new file mode 100644
index 0000000..b7be286
--- /dev/null
+++ b/packages/react/tests/browser/flex.spec.ts
@@ -0,0 +1,68 @@
+import { expect, test } from '@playwright/test';
+
+for (const rtl of [false, true]) {
+  test(`flex spacing, wrapping, alignment and native keyboard order (${rtl ? 'RTL' : 'LTR'})`, async ({
+    page,
+  }) => {
+    await page.goto(`/?fixture=flex${rtl ? '&rtl=1' : ''}`);
+    const spacing = page.getByLabel('Themed spacing');
+    await expect(spacing).toHaveCSS('gap', '12px');
+    const first = await spacing.getByRole('button', { name: 'First', exact: true }).boundingBox();
+    const second = await spacing.getByRole('button', { name: 'Second', exact: true }).boundingBox();
+    expect(first).not.toBeNull();
+    expect(second).not.toBeNull();
+    if (first && second)
+      expect(
+        rtl ? first.x - second.x - second.width : second.x - first.x - first.width,
+      ).toBeCloseTo(12, 0);
+
+    const wrapping = page.getByLabel('Wrapping');
+    const wrappedFirst = await wrapping.getByRole('button', { name: 'Wrap first' }).boundingBox();
+    const wrappedSecond = await wrapping.getByRole('button', { name: 'Wrap second' }).boundingBox();
+    expect(wrappedFirst).not.toBeNull();
+    expect(wrappedSecond).not.toBeNull();
+    if (wrappedFirst && wrappedSecond)
+      expect(wrappedSecond.y - wrappedFirst.y - wrappedFirst.height).toBeCloseTo(12, 0);
+
+    const alignment = page.getByLabel('Alignment');
+    const container = await alignment.boundingBox();
+    const start = await alignment.getByRole('button', { name: 'Start', exact: true }).boundingBox();
+    const end = await alignment.getByRole('button', { name: 'End', exact: true }).boundingBox();
+    expect(container).not.toBeNull();
+    if (container && start && end) {
+      expect(rtl ? start.x + start.width : end.x + end.width).toBeCloseTo(
+        container.x + container.width,
+        0,
+      );
+      expect(rtl ? end.x : start.x).toBeCloseTo(container.x, 0);
+    }
+    await alignment.getByRole('button', { name: 'Start', exact: true }).focus();
+    await page.keyboard.press('Tab');
+    await expect(alignment.getByRole('button', { name: 'End', exact: true })).toBeFocused();
+    await expect(page.getByLabel('Inline')).toHaveCSS('display', 'inline-flex');
+    const reversed = page.getByLabel('Reversed start');
+    const reversedBox = await reversed.boundingBox();
+    const reversedFirst = reversed.getByRole('button', { name: 'Reversed first', exact: true });
+    const reversedFirstBox = await reversedFirst.boundingBox();
+    expect(reversedBox).not.toBeNull();
+    expect(reversedFirstBox).not.toBeNull();
+    if (reversedBox && reversedFirstBox) {
+      expect(rtl ? reversedFirstBox.x : reversedFirstBox.x + reversedFirstBox.width).toBeCloseTo(
+        rtl ? reversedBox.x : reversedBox.x + reversedBox.width,
+        0,
+      );
+      expect(reversedFirstBox.y + reversedFirstBox.height).toBeCloseTo(
+        reversedBox.y + reversedBox.height,
+        0,
+      );
+    }
+    await reversedFirst.focus();
+    await page.keyboard.press('Tab');
+    await expect(
+      reversed.getByRole('button', { name: 'Reversed second', exact: true }),
+    ).toBeFocused();
+    await expect(page.locator('.leaf-float-group')).toHaveCSS('position', 'static');
+    await page.getByRole('button', { name: 'Quick actions', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'Save', exact: true })).toBeVisible();
+  });
+}
diff --git a/packages/react/tests/browser/form-fixture.tsx b/packages/react/tests/browser/form-fixture.tsx
new file mode 100644
index 0000000..dadd3be
--- /dev/null
+++ b/packages/react/tests/browser/form-fixture.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { Button, ConfigProvider, Form, FormField, FormGroup, Input, Space } from '../../src';
+
+export function FormFixture() {
+  const [saved, setSaved] = useState('');
+  return (
+    <Form
+      aria-label="Profile"
+      onSubmit={(event) => {
+        event.preventDefault();
+        setSaved(String(new FormData(event.currentTarget).get('name')));
+      }}
+      onReset={() => setSaved('')}
+    >
+      <FormField label="Name" required>
+        <Input name="name" defaultValue="Leaf Studio" />
+      </FormField>
+      <Space>
+        <Button type="submit">Save profile</Button>
+        <Button type="reset" variant="outline">
+          Reset profile
+        </Button>
+      </Space>
+      <output aria-label="Saved name">{saved}</output>
+    </Form>
+  );
+}
+
+export function FormHelpFixture() {
+  const params = new URLSearchParams(window.location.search);
+  const [feedback, setFeedback] = useState<'none' | 'short' | 'wrapped' | 'error' | 'url'>('none');
+  const help = {
+    none: undefined,
+    short: 'A short hint.',
+    wrapped:
+      'Use an address that your teammates can reach. Project updates, invitations and important account notices will be sent to this address. You can change it later in your workspace settings.',
+    error: 'A short hint.',
+    url: `https://example.com/${'very-long-workspace-address-'.repeat(12)}`,
+  }[feedback];
+  const fields = (
+    <>
+      <FormField
+        label="Primary"
+        help={help}
+        error={feedback === 'error' ? 'Check this value.' : undefined}
+      >
+        <Input name="primary" />
+      </FormField>
+      <FormField label="Next" help="Another hint at the end of the group.">
+        <Input name="next" />
+      </FormField>
+    </>
+  );
+  return (
+    <ConfigProvider
+      style={{ minHeight: 0 }}
+      theme={{
+        ...(params.get('large-text') ? { fontSize: 18, tokens: { fontSizeSm: 17 } } : {}),
+        ...(params.get('small-gap') ? { components: { Form: { gap: 8 } } } : {}),
+      }}
+    >
+      <Space wrap>
+        <Button onClick={() => setFeedback('none')}>No help</Button>
+        <Button onClick={() => setFeedback('short')}>One line</Button>
+        <Button onClick={() => setFeedback('wrapped')}>Wrapped help</Button>
+        <Button onClick={() => setFeedback('error')}>Show error</Button>
+        <Button onClick={() => setFeedback('url')}>Long address</Button>
+      </Space>
+      <Form
+        aria-label="Help spacing"
+        layout={params.get('layout') === 'vertical' ? 'vertical' : 'horizontal'}
+        style={{ width: '100%', maxWidth: 360, marginBlockStart: 24 }}
+      >
+        {params.get('nested') ? <FormGroup legend="Contact">{fields}</FormGroup> : fields}
+        <FormField label="Last" help="This last hint must stay inside the form.">
+          <Input name="last" />
+        </FormField>
+      </Form>
+      <p data-testid="after-form">Content after the form</p>
+    </ConfigProvider>
+  );
+}
diff --git a/packages/react/tests/browser/form.spec.ts b/packages/react/tests/browser/form.spec.ts
new file mode 100644
index 0000000..f7dc22f
--- /dev/null
+++ b/packages/react/tests/browser/form.spec.ts
@@ -0,0 +1,98 @@
+import { expect, test } from '@playwright/test';
+
+for (const method of ['typing', 'replacement'] as const) {
+  test(`keeps the edited value after validation during ${method}`, async ({ page }) => {
+    await page.goto('/?fixture=form');
+    const form = page.getByRole('form', { name: 'Profile' });
+    const input = form.getByRole('textbox', { name: 'Name', exact: true });
+    await input.fill('');
+    await form.getByRole('button', { name: 'Save profile', exact: true }).click();
+    await expect(form.getByRole('alert')).toBeVisible();
+    await expect(input).toBeFocused();
+
+    if (method === 'typing') await input.pressSequentially('Leaf Garden');
+    else await input.fill('Leaf Garden');
+    await expect(input).toHaveValue('Leaf Garden');
+    await expect(form.getByRole('alert')).toHaveCount(0);
+    await form.getByRole('button', { name: 'Save profile', exact: true }).click();
+    await expect(form.getByLabel('Saved name')).toHaveText('Leaf Garden');
+
+    await form.getByRole('button', { name: 'Reset profile', exact: true }).click();
+    await expect(input).toHaveValue('Leaf Studio');
+    await expect(form.getByLabel('Saved name')).toBeEmpty();
+  });
+}
+
+for (const [name, query, width] of [
+  ['horizontal', '', 1100],
+  ['vertical', '&layout=vertical', 1100],
+  ['stacked mobile', '', 375],
+  ['compact mobile', '&layout=vertical&compact=1', 375],
+  ['large text with small gap', '&layout=vertical&large-text=1&small-gap=1', 1100],
+  ['nested fields', '&layout=vertical&nested=1', 1100],
+] as const) {
+  test(`help stays in normal flow and preserves field spacing: ${name}`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto(`/?fixture=form-help${query}`);
+    const form = page.getByRole('form', { name: 'Help spacing' });
+    const primary = form.getByRole('textbox', { name: 'Primary', exact: true });
+    const geometry = () =>
+      form.evaluate((node) => {
+        const first = node.querySelector('.leaf-form-field') as HTMLElement;
+        const next = node
+          .querySelector('input[name="next"]')
+          ?.closest('.leaf-form-field') as HTMLElement;
+        const last = node
+          .querySelector('input[name="last"]')
+          ?.closest('.leaf-form-field') as HTMLElement;
+        const description = first.querySelector('.leaf-form-field__description');
+        const lastDescription = last.querySelector('.leaf-form-field__description') as HTMLElement;
+        const nextDescription = next.querySelector('.leaf-form-field__description') as HTMLElement;
+        const hint = description?.getBoundingClientRect();
+        return {
+          fieldGap: Number.parseFloat(getComputedStyle(node).rowGap),
+          nextTop: next.getBoundingClientRect().top - first.getBoundingClientRect().top,
+          gapAfterHint: hint ? next.getBoundingClientRect().top - hint.bottom : null,
+          hintHeight: hint?.height ?? 0,
+          lineHeight: description ? Number.parseFloat(getComputedStyle(description).lineHeight) : 0,
+          formBottom: node.getBoundingClientRect().bottom,
+          lastHintBottom: lastDescription.getBoundingClientRect().bottom,
+          nextHintBottom: nextDescription.getBoundingClientRect().bottom,
+          lastTop: last.getBoundingClientRect().top,
+        };
+      });
+    const baseline = await geometry();
+    await page.getByRole('button', { name: 'One line', exact: true }).click();
+    await expect(primary).toHaveAccessibleDescription('A short hint.');
+    const short = await geometry();
+    expect(short.hintHeight).toBeCloseTo(short.lineHeight, 0);
+    expect(short.nextTop - baseline.nextTop).toBeGreaterThanOrEqual(short.hintHeight);
+    expect(short.gapAfterHint).toBeCloseTo(short.fieldGap, 0);
+
+    await page.getByRole('button', { name: 'Wrapped help', exact: true }).click();
+    const wrapped = await geometry();
+    expect(wrapped.hintHeight).toBeGreaterThan(short.hintHeight);
+    expect(wrapped.nextTop - short.nextTop).toBeCloseTo(wrapped.hintHeight - short.hintHeight, 0);
+    expect(wrapped.gapAfterHint).toBeCloseTo(wrapped.fieldGap, 0);
+    expect(wrapped.lastHintBottom).toBeLessThanOrEqual(wrapped.formBottom + 0.5);
+    expect(wrapped.nextHintBottom).toBeLessThanOrEqual(wrapped.lastTop + 0.5);
+    const after = await page.getByTestId('after-form').boundingBox();
+    expect(after?.y).toBeGreaterThanOrEqual(wrapped.lastHintBottom);
+
+    await page.getByRole('button', { name: 'Show error', exact: true }).click();
+    await expect(primary).toHaveAccessibleDescription('Check this value.');
+    await expect(form.getByRole('alert')).toHaveText('Check this value.');
+    const error = await geometry();
+    expect(error.nextTop - baseline.nextTop).toBeGreaterThanOrEqual(error.hintHeight);
+
+    await page.getByRole('button', { name: 'Long address', exact: true }).click();
+    expect((await geometry()).gapAfterHint).toBeGreaterThanOrEqual(-0.5);
+    expect(await form.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(
+      1,
+    );
+
+    await page.getByRole('button', { name: 'No help', exact: true }).click();
+    await expect(primary).not.toHaveAttribute('aria-describedby');
+    expect((await geometry()).nextTop).toBeCloseTo(baseline.nextTop, 0);
+  });
+}
diff --git a/packages/react/tests/browser/motion.spec.ts b/packages/react/tests/browser/motion.spec.ts
index 79b83f3..7ecccd6 100644
--- a/packages/react/tests/browser/motion.spec.ts
+++ b/packages/react/tests/browser/motion.spec.ts
@@ -139,14 +139,34 @@ async function changeModalStep(dialog: Locator) {
   };
 }
 
-test('selection moves continuously, settles under rapid changes and retains panel state', async ({
-  page,
-}) => {
+test('selection animates while panels switch immediately and retain state', async ({ page }) => {
   await page.goto('/?fixture=motion&rtl=1');
   await page.getByRole('textbox', { name: 'Retained name', exact: true }).fill('kept value');
   const indicator = page.locator('.leaf-tabs__indicator');
   const longer = page.getByRole('tab', { name: 'Longer content', exact: true });
   await longer.evaluate((button) => {
+    button.addEventListener(
+      'click',
+      () => {
+        requestAnimationFrame(() => {
+          const host = button.closest('.leaf-tabs')?.querySelector('.leaf-tabs__panels');
+          const panel = host?.querySelector('.leaf-tabs__panel:not([hidden])');
+          if (!host || !panel) return;
+          button.setAttribute(
+            'data-panel-switch',
+            JSON.stringify({
+              animations: host.getAnimations({ subtree: true }).length,
+              heightDifference: Math.abs(
+                host.getBoundingClientRect().height - panel.getBoundingClientRect().height,
+              ),
+              opacity: getComputedStyle(panel).opacity,
+              transform: getComputedStyle(panel).transform,
+            }),
+          );
+        });
+      },
+      { once: true },
+    );
     const marker = button.closest('.leaf-tabs')?.querySelector('.leaf-tabs__indicator');
     if (!(marker instanceof HTMLElement)) return;
     const before = marker.style.getPropertyValue('--leaf-indicator-x');
@@ -177,6 +197,11 @@ test('selection moves continuously, settles under rapid changes and retains pane
   expect(
     JSON.parse((await longer.getAttribute('data-motion-selection')) ?? '{}').duration,
   ).toBeGreaterThan(0);
+  await expect(longer).toHaveAttribute('data-panel-switch', /"animations":0/);
+  const panelSwitch = JSON.parse((await longer.getAttribute('data-panel-switch')) ?? '{}');
+  expect(panelSwitch.heightDifference).toBeLessThan(1);
+  expect(panelSwitch.opacity).toBe('1');
+  expect(panelSwitch.transform).toBe('none');
   await page.getByRole('tab', { name: 'Final', exact: true }).click();
   await expect
     .poll(
diff --git a/packages/react/tests/browser/multi-select-fixture.tsx b/packages/react/tests/browser/multi-select-fixture.tsx
new file mode 100644
index 0000000..7cf4e9b
--- /dev/null
+++ b/packages/react/tests/browser/multi-select-fixture.tsx
@@ -0,0 +1,121 @@
+import { Button, Cascader, ConfigProvider, Select, Space, Tag, TreeSelect } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+const options = [
+  {
+    value: 'long',
+    label: 'A very long selected label that must never push the controls outside the field',
+  },
+  { value: 'design', label: 'Design' },
+  { value: 'code', label: 'Engineering' },
+  { value: 'locked', label: 'Locked', disabled: true },
+];
+const values = options.map((option) => option.value);
+const tree = [{ value: 'team', label: 'Team', selectable: false, children: options }];
+const paths = options.map((option) => ['team', option.value]);
+
+export function MultiSelectFixture() {
+  const [width, setWidth] = useState(300);
+  const [compact, setCompact] = useState(false);
+  const [rtl, setRtl] = useState(false);
+  return (
+    <ConfigProvider
+      className="browser-multi-select"
+      density={compact ? 'compact' : 'comfortable'}
+      direction={rtl ? 'rtl' : 'ltr'}
+    >
+      <h1>Multiple selections</h1>
+      <Space>
+        <Button onClick={() => setWidth(width === 300 ? 140 : 300)}>Resize selections</Button>
+        <Button onClick={() => setCompact(!compact)}>Toggle density</Button>
+        <Button onClick={() => setRtl(!rtl)}>Toggle direction</Button>
+      </Space>
+      <form aria-label="Selections" style={{ width, maxWidth: '100%', marginTop: 20 }}>
+        <Space direction="vertical" align="stretch">
+          {(['sm', 'md', 'lg'] as const).map((size) => (
+            <div key={size} data-size={size}>
+              <Space direction="vertical" align="stretch">
+                <Select
+                  aria-label={`Select ${size}`}
+                  name={`select-${size}`}
+                  size={size}
+                  multiple
+                  showSearch
+                  allowClear
+                  tagWrap={false}
+                  options={options}
+                  defaultValue={values}
+                />
+                <TreeSelect
+                  aria-label={`Tree ${size}`}
+                  name={`tree-${size}`}
+                  size={size}
+                  treeCheckable
+                  tagWrap={false}
+                  options={tree}
+                  defaultValue={values}
+                />
+                <Cascader
+                  aria-label={`Cascader ${size}`}
+                  name={`cascader-${size}`}
+                  size={size}
+                  multiple
+                  showSearch
+                  tagWrap={false}
+                  options={tree}
+                  defaultValue={paths}
+                />
+              </Space>
+            </div>
+          ))}
+          <Select
+            aria-label="One long value"
+            multiple
+            showSearch
+            allowClear
+            tagWrap={false}
+            options={options}
+            defaultValue={['long']}
+          />
+          <Select
+            aria-label="Custom tags"
+            multiple
+            maxTagCount="responsive"
+            options={options}
+            defaultValue={values}
+            tagRender={(option, remove) => (
+              <Tag closable onClose={remove}>
+                {option.label}
+              </Tag>
+            )}
+          />
+          <Select
+            aria-label="Count only"
+            multiple
+            tagWrap={false}
+            maxTagCount={0}
+            options={options}
+            defaultValue={values}
+          />
+          <Select
+            aria-label="Wrapped selections"
+            multiple
+            options={options}
+            defaultValue={values}
+          />
+          <Select
+            aria-label="Read only selections"
+            multiple
+            tagWrap={false}
+            readOnly
+            options={options}
+            defaultValue={values}
+          />
+          <TreeSelect aria-label="Single tree" options={tree} />
+          <TreeSelect aria-label="Checked tree" options={tree} treeCheckable />
+          <button type="reset">Reset selections</button>
+        </Space>
+      </form>
+    </ConfigProvider>
+  );
+}
diff --git a/packages/react/tests/browser/multi-select.spec.ts b/packages/react/tests/browser/multi-select.spec.ts
new file mode 100644
index 0000000..e0eaea1
--- /dev/null
+++ b/packages/react/tests/browser/multi-select.spec.ts
@@ -0,0 +1,177 @@
+import { expect, type Locator, test } from '@playwright/test';
+import axe from 'axe-core';
+
+function controlRoot(control: Locator) {
+  return control.locator(
+    'xpath=ancestor::*[contains(@class, "leaf-select--") or contains(@class, "leaf-tree-select--") or contains(@class, "leaf-cascader--")][1]',
+  );
+}
+
+async function assertSingleLine(control: Locator, height: number) {
+  const root = controlRoot(control);
+  await expect(root).toHaveCSS('height', `${height}px`);
+  const geometry = await root.evaluate((element) => {
+    const content = element.querySelector<HTMLElement>('.leaf-selection');
+    const visible = [
+      ...element.querySelectorAll<HTMLElement>(
+        '.leaf-selection > .leaf-selection__tag:not([hidden])',
+      ),
+    ];
+    const bounds = content?.getBoundingClientRect();
+    return {
+      width: element.clientWidth,
+      scrollWidth: element.scrollWidth,
+      tags: visible.map((tag) => {
+        const rect = tag.getBoundingClientRect();
+        return { top: rect.top, bottom: rect.bottom, left: rect.left, right: rect.right };
+      }),
+      bounds: bounds && { left: bounds.left, right: bounds.right },
+    };
+  });
+  expect(geometry.scrollWidth).toBeLessThanOrEqual(geometry.width);
+  for (const tag of geometry.tags) {
+    expect(tag.left).toBeGreaterThanOrEqual((geometry.bounds?.left ?? 0) - 1);
+    expect(tag.right).toBeLessThanOrEqual((geometry.bounds?.right ?? 0) + 1);
+    expect(tag.top).toBe(geometry.tags[0]?.top);
+    expect(tag.bottom - tag.top).toBe(height - 8);
+  }
+}
+
+for (const appearance of ['light', 'dark']) {
+  test.describe(appearance, () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/?fixture=multi-select&theme=${appearance}`);
+      await page.evaluate(() => document.fonts.ready);
+    });
+
+    test('single-line values fit all sizes, resize, density and RTL without losing form values', async ({
+      page,
+    }) => {
+      for (const [size, height] of [
+        ['sm', 30],
+        ['md', 36],
+        ['lg', 42],
+      ] as const) {
+        for (const kind of ['Select', 'Tree', 'Cascader'])
+          await assertSingleLine(
+            page.getByRole('combobox', { name: `${kind} ${size}`, exact: true }),
+            height,
+          );
+      }
+      const formValue = () =>
+        page.getByRole('form').evaluate((form) => [...new FormData(form as HTMLFormElement)]);
+      const before = await formValue();
+      await page.getByRole('button', { name: 'Resize selections' }).click();
+      await page.getByRole('button', { name: 'Toggle direction' }).click();
+      for (const kind of ['Select', 'Tree', 'Cascader']) {
+        const input = page.getByRole('combobox', { name: `${kind} md`, exact: true });
+        await assertSingleLine(input, 36);
+        await expect(
+          controlRoot(input)
+            .locator('.leaf-selection__tag[title]')
+            .filter({ hasText: '+4' })
+            .first(),
+        ).toBeVisible();
+      }
+      await page.getByRole('button', { name: 'Toggle density' }).click();
+      await assertSingleLine(page.getByRole('combobox', { name: 'Select md', exact: true }), 30);
+      expect(await formValue()).toEqual(before);
+      await page.getByRole('button', { name: 'Resize selections' }).click();
+      await assertSingleLine(page.getByRole('combobox', { name: 'Tree md', exact: true }), 30);
+    });
+
+    test('long first labels, search, removal and custom tags stay usable', async ({ page }) => {
+      const input = page.getByRole('combobox', { name: 'Select md', exact: true });
+      const root = controlRoot(input);
+      const first = root.locator('[data-selection-item]:not([hidden])').first();
+      await expect(first).toBeVisible();
+      expect(
+        await first
+          .locator('span')
+          .first()
+          .evaluate((label) => label.scrollWidth > label.clientWidth),
+      ).toBe(true);
+      await input.fill('Engineering');
+      await assertSingleLine(input, 36);
+      expect(await input.boundingBox()).toMatchObject({ height: 28 });
+      await expect(page.getByRole('option', { name: 'Engineering', exact: true })).toBeVisible();
+      await input.press('Escape');
+      await root.getByRole('button', { name: /^Remove A very long/ }).click();
+      await expect(input).toBeFocused();
+      await expect(input).toHaveAttribute('aria-expanded', 'false');
+      await input.press('Backspace');
+      // Disabled Locked cannot be removed; Backspace removes the last enabled value.
+      await expect(root.locator('[data-selection-item][title="Engineering"]')).toHaveCount(0);
+      await expect(root.locator('[data-selection-item][title="Locked"]')).toHaveCount(1);
+      await page.getByRole('button', { name: 'Reset selections' }).click();
+      await assertSingleLine(input, 36);
+      await assertSingleLine(page.getByRole('combobox', { name: 'One long value' }), 36);
+      await assertSingleLine(page.getByRole('combobox', { name: 'Custom tags' }), 36);
+      await assertSingleLine(page.getByRole('combobox', { name: 'Count only' }), 36);
+      await expect(
+        controlRoot(page.getByRole('combobox', { name: 'Count only' })).locator(
+          '[data-selection-overflow]',
+        ),
+      ).toContainText('+4');
+      await expect(
+        controlRoot(page.getByRole('combobox', { name: 'Read only selections' })).getByRole(
+          'button',
+          { name: /^Remove/ },
+        ),
+      ).toHaveCount(0);
+    });
+
+    test('tree expansion, whole-row checks, trigger edges and cascader search spacing', async ({
+      page,
+    }) => {
+      const input = page.getByRole('combobox', { name: 'Single tree' });
+      await controlRoot(input).click({ position: { x: 3, y: 18 } });
+      await page.getByText('Team', { exact: true }).last().click();
+      await expect(page.getByRole('treeitem', { name: 'Team', exact: true })).toHaveAttribute(
+        'aria-expanded',
+        'true',
+      );
+      await page.getByText('Design', { exact: true }).last().click();
+      await expect(input).toHaveValue('Design');
+      await input.click();
+      await expect(input).toHaveValue('Design');
+      await expect(page.getByRole('treeitem', { name: 'Team', exact: true })).toHaveAttribute(
+        'aria-expanded',
+        'true',
+      );
+      await input.press('Escape');
+      const checked = page.getByRole('combobox', { name: 'Checked tree' });
+      await checked.click();
+      await page.getByRole('button', { name: 'Expand Team', exact: true }).click();
+      const row = page.getByRole('treeitem', { name: 'Design', exact: true });
+      await row.locator('.leaf-tree__row').click({ position: { x: 200, y: 16 } });
+      await expect(row).toHaveAttribute('aria-checked', 'true');
+      await row.press('Enter');
+      await expect(row).toHaveAttribute('aria-checked', 'false');
+      await page.keyboard.press('Escape');
+      await page.getByRole('combobox', { name: 'Cascader md', exact: true }).click();
+      await expect(page.locator('.leaf-cascader__panel')).toHaveAttribute(
+        'data-positioned',
+        'true',
+      );
+      await page.waitForTimeout(350);
+      const gap = await page.locator('.leaf-cascader__panel').evaluate((panel) => {
+        const search = panel.querySelector('.leaf-cascader__search')?.getBoundingClientRect();
+        const column = panel.querySelector('.leaf-cascader__columns')?.getBoundingClientRect();
+        return (column?.top ?? 0) - (search?.bottom ?? 0);
+      });
+      expect(gap).toBeGreaterThanOrEqual(8);
+      await page.addScriptTag({ content: axe.source });
+      const violations = await page.evaluate(
+        async () =>
+          (
+            await (window as unknown as { axe: typeof axe }).axe.run(document, {
+              runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] },
+              rules: { 'color-contrast': { enabled: false } },
+            })
+          ).violations,
+      );
+      expect(violations).toEqual([]);
+    });
+  });
+}
diff --git a/packages/react/tests/browser/pagination-fixture.tsx b/packages/react/tests/browser/pagination-fixture.tsx
new file mode 100644
index 0000000..68d270f
--- /dev/null
+++ b/packages/react/tests/browser/pagination-fixture.tsx
@@ -0,0 +1,62 @@
+import { Button, ConfigProvider, Pagination, Space } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function PaginationFixture() {
+  const [pagination, setPagination] = useState({ current: 2, pageSize: 10 });
+  const [changes, setChanges] = useState(0);
+  return (
+    <>
+      <h1>Pagination</h1>
+      <Space direction="vertical" align="stretch" size="lg">
+        <Pagination aria-label="Outline pages" total={120} defaultCurrent={2} />
+        <Pagination aria-label="Ghost pages" total={120} defaultCurrent={2} variant="ghost" />
+        <section aria-label="Sizes">
+          <Space direction="vertical" align="stretch">
+            {(['sm', 'md', 'lg'] as const).map((size) => (
+              <Pagination
+                key={size}
+                aria-label={`Size ${size}`}
+                total={50}
+                size={size}
+                showSizeChanger
+                showQuickJumper
+              />
+            ))}
+          </Space>
+        </section>
+        <Pagination
+          aria-label="Controlled pages"
+          total={120}
+          {...pagination}
+          showSizeChanger
+          showQuickJumper
+          showTotal
+          onChange={(current, pageSize) => {
+            setPagination({ current, pageSize });
+            setChanges((count) => count + 1);
+          }}
+        />
+        <output aria-label="Pagination state">
+          {pagination.current}/{pagination.pageSize} ({changes})
+        </output>
+        <Button variant="outline">Outside</Button>
+        <Pagination aria-label="Simple pages" total={120} defaultCurrent={2} simple />
+        <Pagination
+          aria-label="Disabled pages"
+          total={120}
+          disabled
+          showSizeChanger
+          showQuickJumper
+        />
+        <Pagination aria-label="Hidden pages" total={0} hideOnSinglePage />
+        <ConfigProvider
+          direction="rtl"
+          density="compact"
+          theme={{ primaryColor: '#7654c6', controlHeight: 44, borderRadius: 4, motion: false }}
+        >
+          <Pagination aria-label="Custom pages" total={50} defaultCurrent={2} />
+        </ConfigProvider>
+      </Space>
+    </>
+  );
+}
diff --git a/packages/react/tests/browser/pagination.spec.ts b/packages/react/tests/browser/pagination.spec.ts
new file mode 100644
index 0000000..8f5b4c8
--- /dev/null
+++ b/packages/react/tests/browser/pagination.spec.ts
@@ -0,0 +1,185 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import { expect, type Locator, test } from '@playwright/test';
+import axe from 'axe-core';
+
+async function color(element: Locator, token: string) {
+  return new TinyColor(
+    await element.evaluate((node, name) => getComputedStyle(node).getPropertyValue(name), token),
+  ).toRgbString();
+}
+
+for (const appearance of ['light', 'dark']) {
+  test(`outline and ghost paints, stable press and moving selection in ${appearance}`, async ({
+    page,
+  }, info) => {
+    await page.goto(`/?fixture=pagination&theme=${appearance}`);
+    const outline = page.getByRole('navigation', { name: 'Outline pages' });
+    const ghost = page.getByRole('navigation', { name: 'Ghost pages' });
+    const candidate = outline.getByRole('button', { name: 'Page 3', exact: true });
+    await expect(candidate).toHaveCSS('border-color', await color(outline, '--leaf-color-border'));
+    expect(
+      await candidate.evaluate((node) => getComputedStyle(node, '::before').backgroundColor),
+    ).toBe(await color(outline, '--leaf-color-surface'));
+    await expect(ghost.getByRole('button', { name: 'Page 3', exact: true })).toHaveCSS(
+      'border-color',
+      'rgba(0, 0, 0, 0)',
+    );
+    const marker = outline.locator('.leaf-pagination__indicator');
+    await expect(marker).toHaveCSS('border-color', await color(outline, '--leaf-color-primary'));
+    await expect(marker).toHaveCSS(
+      'background-color',
+      await color(outline, '--leaf-color-primary-surface-8'),
+    );
+    const current = outline.getByRole('button', { name: 'Page 2', exact: true });
+    const currentColor = await current.evaluate((node) => getComputedStyle(node).color);
+    await current.hover();
+    await expect(current).toHaveCSS('color', currentColor);
+    await candidate.hover();
+    await expect(candidate).toHaveCSS(
+      'border-color',
+      await color(outline, '--leaf-color-primary-hover'),
+    );
+    const before = await candidate.boundingBox();
+    await page.mouse.down();
+    try {
+      await expect(candidate).toHaveCSS('transform', 'none');
+      expect(await candidate.boundingBox()).toEqual(before);
+      await expect(candidate).toHaveCSS(
+        'border-color',
+        await color(outline, '--leaf-color-primary-active'),
+      );
+    } finally {
+      await page.mouse.up();
+    }
+    await expect(candidate).toHaveAttribute('aria-current', 'page');
+    await expect
+      .poll(
+        async () => {
+          const [button, indicator] = await Promise.all([
+            candidate.boundingBox(),
+            marker.boundingBox(),
+          ]);
+          return (
+            Math.abs((button?.x ?? 0) - (indicator?.x ?? 0)) +
+            Math.abs((button?.y ?? 0) - (indicator?.y ?? 0))
+          );
+        },
+        { timeout: 20_000 },
+      )
+      .toBeLessThan(1);
+    await ghost.getByRole('button', { name: 'Page 3', exact: true }).hover();
+    await expect(ghost.getByRole('button', { name: 'Page 3', exact: true })).toHaveCSS(
+      'background-color',
+      await color(ghost, '--leaf-color-surface-muted'),
+    );
+    await page.screenshot({
+      path: `.quality/pagination-${appearance}-${info.project.name}.png`,
+      fullPage: true,
+    });
+  });
+
+  test(`sizes, region overrides and disabled controls in ${appearance}`, async ({ page }) => {
+    await page.goto(`/?fixture=pagination&theme=${appearance}`);
+    for (const [size, height] of [
+      ['sm', 30],
+      ['md', 36],
+      ['lg', 42],
+    ] as const) {
+      const pagination = page.getByRole('navigation', { name: `Size ${size}` });
+      await expect(pagination.getByRole('button', { name: 'Page 1', exact: true })).toHaveCSS(
+        'height',
+        `${height}px`,
+      );
+      await expect(pagination.locator('.leaf-select')).toHaveCSS('height', `${height}px`);
+      await expect(pagination.locator('.leaf-input-number')).toHaveCSS('height', `${height}px`);
+    }
+    const custom = page.getByRole('navigation', { name: 'Custom pages' });
+    await expect(custom.getByRole('button', { name: 'Page 2', exact: true })).toHaveCSS(
+      'height',
+      '44px',
+    );
+    await expect(custom.getByRole('button', { name: 'Page 2', exact: true })).toHaveCSS(
+      'border-radius',
+      '4px',
+    );
+    await expect(custom.locator('.leaf-pagination__indicator')).toHaveCSS(
+      'border-color',
+      'rgb(118, 84, 198)',
+    );
+    await expect(custom.getByRole('button', { name: 'Next page' }).locator('svg')).toHaveCSS(
+      'transform',
+      'matrix(-1, 0, 0, -1, 0, 0)',
+    );
+    await custom.getByRole('button', { name: 'Page 3', exact: true }).focus();
+    await page.keyboard.press('Enter');
+    await expect(custom.getByRole('button', { name: 'Page 3', exact: true })).toHaveAttribute(
+      'aria-current',
+      'page',
+    );
+    await expect(custom.locator('.leaf-pagination__indicator')).toHaveCSS(
+      'transition-duration',
+      /^0s(?:,\s*0s)*$/,
+    );
+    const disabled = page.getByRole('navigation', { name: 'Disabled pages' });
+    for (const button of await disabled.getByRole('button').all())
+      await expect(button).toBeDisabled();
+    await expect(disabled.getByRole('combobox')).toBeDisabled();
+    await expect(disabled.getByRole('spinbutton')).toBeDisabled();
+    await expect(page.getByRole('navigation', { name: 'Hidden pages' })).toHaveCount(0);
+  });
+}
+
+test('controlled page, size and quick jumps use one change per action', async ({ page }) => {
+  await page.goto('/?fixture=pagination');
+  const pagination = page.getByRole('navigation', { name: 'Controlled pages' });
+  const state = page.getByLabel('Pagination state');
+  const jump = pagination.getByRole('spinbutton', { name: 'Go to' });
+  await jump.fill('4');
+  await expect(state).toHaveText('2/10 (0)');
+  await jump.press('Enter');
+  await page.getByRole('button', { name: 'Outside' }).click();
+  await expect(state).toHaveText('4/10 (1)');
+  await jump.fill('5');
+  await pagination.getByRole('button', { name: 'Page 3', exact: true }).click();
+  await expect(state).toHaveText('3/10 (2)');
+  await pagination.getByRole('combobox', { name: 'Page size' }).click();
+  await page.getByRole('option', { name: '20 / page', exact: true }).click();
+  await expect(state).toHaveText('2/20 (3)');
+  await jump.fill('999');
+  await page.getByRole('button', { name: 'Outside' }).click();
+  await expect(state).toHaveText('6/20 (4)');
+  await expect(jump).toHaveValue('6');
+  await expect(pagination.getByRole('button', { name: 'Next page' })).toBeDisabled();
+});
+
+test('narrow compact pagination wraps, remains accessible and honors reduced motion', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 375, height: 900 });
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await page.goto('/?fixture=pagination&compact=1');
+  const pagination = page.getByRole('navigation', { name: 'Controlled pages' });
+  await expect(pagination.getByRole('button', { name: 'Page 2', exact: true })).toHaveCSS(
+    'height',
+    '30px',
+  );
+  await pagination.getByRole('button', { name: 'Page 3', exact: true }).focus();
+  await page.keyboard.press('Space');
+  await expect(pagination.getByRole('button', { name: 'Page 3', exact: true })).toHaveAttribute(
+    'aria-current',
+    'page',
+  );
+  await expect(pagination.locator('.leaf-pagination__indicator')).toHaveCSS(
+    'transition-duration',
+    '0s',
+  );
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(
+    true,
+  );
+  await page.addScriptTag({ content: axe.source });
+  const violations = await page.evaluate(
+    async () =>
+      (await (window as unknown as { axe: typeof axe }).axe.run(document.body)).violations,
+  );
+  expect(violations).toEqual([]);
+});
diff --git a/packages/react/tests/browser/quality.spec.ts b/packages/react/tests/browser/quality.spec.ts
index f63adba..d2f07bb 100644
--- a/packages/react/tests/browser/quality.spec.ts
+++ b/packages/react/tests/browser/quality.spec.ts
@@ -36,16 +36,16 @@ test('density, theme and blur propagate to popup content', async ({ page }) => {
   await page.getByRole('switch', { name: 'Mask blur', exact: true }).uncheck();
   const scope = page.getByTestId('acceptance-workbench');
   await expect(scope).toHaveAttribute('data-leaf-density', 'compact');
-  await expect(scope.locator('.leaf-input').first()).toHaveCSS('height', '34px');
+  await expect(scope.locator('.leaf-input').first()).toHaveCSS('height', '30px');
   await page.getByRole('button', { name: 'Open dialog', exact: true }).click();
   const dialog = page.getByRole('dialog', { name: 'Edit details' });
-  await expect(dialog.locator('.leaf-input')).toHaveCSS('height', '34px');
+  await expect(dialog.locator('.leaf-input')).toHaveCSS('height', '30px');
   await expect(dialog).toHaveCSS('color', 'rgb(237, 237, 240)');
   await expect(dialog.locator('..')).toHaveAttribute('data-blur', 'off');
   await dialog.getByRole('combobox', { name: 'Dialog owner' }).click();
   await expect(page.getByRole('option', { name: 'Alex', exact: true })).toHaveCSS(
     'min-height',
-    '30px',
+    '26px',
   );
 });
 
diff --git a/packages/react/tests/browser/radius.spec.ts b/packages/react/tests/browser/radius.spec.ts
index df71b6a..cc68859 100644
--- a/packages/react/tests/browser/radius.spec.ts
+++ b/packages/react/tests/browser/radius.spec.ts
@@ -116,7 +116,8 @@ for (const appearance of ['light', 'dark']) {
     await expectMatching(tabs.getByRole('tab').first(), tabs.locator('.leaf-tabs__indicator'));
     for (const name of ['Radius menu', 'Horizontal radius menu']) {
       const menu = page.getByRole('navigation', { name, exact: true });
-      await expectInset(menu, menu.getByRole('menuitem').first());
+      await expectMatching(menu, page.getByRole('button', { name: 'Change radius', exact: true }));
+      await expectMatching(menu, menu.getByRole('menuitem').first());
       await expectMatching(
         menu.getByRole('menuitem').first(),
         menu.locator('.leaf-menu__indicator'),
@@ -139,6 +140,14 @@ for (const radius of [0, 3]) {
     const segmented = page.getByRole('radiogroup', { name: 'Radius segmented' });
     await expectInset(segmented, segmented.getByRole('radio').first());
     await expect(segmented.getByRole('radio').first()).toHaveCSS('border-radius', '0px');
+    const menu = page.getByRole('navigation', { name: 'Radius menu', exact: true });
+    await expectMatching(menu, page.getByRole('button', { name: 'Change radius', exact: true }));
+    await expectMatching(menu, menu.getByRole('menuitem').first());
+    await expectMatching(menu, menu.locator('.leaf-menu__indicator'));
+    const tabs = page.getByRole('tablist', { name: 'Radius tabs' });
+    await expectInset(tabs, tabs.getByRole('tab').first());
+    await expect(tabs.getByRole('tab').first()).toHaveCSS('border-radius', '0px');
+    await expectMatching(tabs.getByRole('tab').first(), tabs.locator('.leaf-tabs__indicator'));
   });
 }
 
@@ -167,18 +176,15 @@ test('component padding shorthand keeps highlight geometry aligned in an RTL por
   await expect(panel).toHaveCSS('border-radius', '24px');
   await expectInset(panel, panel.getByRole('option').first());
   await page.keyboard.press('Escape');
-  for (const [surface, child] of [
-    [page.locator('.leaf-segmented'), page.locator('.leaf-segmented').getByRole('radio').first()],
-    [page.locator('.leaf-tabs__list'), page.getByRole('tab').first()],
-    [
-      page.getByRole('navigation', { name: 'Radius menu', exact: true }),
-      page
-        .getByRole('navigation', { name: 'Radius menu', exact: true })
-        .getByRole('menuitem')
-        .first(),
-    ],
-  ] as const)
-    await expectInset(surface, child);
+  const segmented = page.locator('.leaf-segmented');
+  await expectInset(segmented, segmented.getByRole('radio').first());
+  const tabs = page.getByRole('tablist', { name: 'Radius tabs' });
+  await expectInset(tabs, tabs.getByRole('tab').first());
+  await expectMatching(tabs.getByRole('tab').first(), tabs.locator('.leaf-tabs__indicator'));
+  const menu = page.getByRole('navigation', { name: 'Radius menu', exact: true });
+  await expect(menu).toHaveCSS('border-radius', '18px');
+  await expectMatching(menu, menu.getByRole('menuitem').first());
+  await expectMatching(menu, menu.locator('.leaf-menu__indicator'));
 });
 
 test('open portals follow live theme changes and preserve nested overrides', async ({ page }) => {
@@ -191,6 +197,9 @@ test('open portals follow live theme changes and preserve nested overrides', asy
     .evaluate((button: HTMLButtonElement) => button.click());
   await expect(panel.getByRole('option').first()).toHaveCSS('border-radius', '25px');
   await expectInset(panel, panel.getByRole('option').first());
+  const menu = page.getByRole('navigation', { name: 'Radius menu', exact: true });
+  await expect(menu.getByRole('menuitem').first()).toHaveCSS('border-radius', '20px');
+  await expectMatching(menu, menu.locator('.leaf-menu__indicator'));
   await page.keyboard.press('Escape');
   await page.getByRole('combobox', { name: 'Nested radius select' }).click();
   await expect(panel).toHaveCSS('border-radius', '12px');
diff --git a/packages/react/tests/browser/refinements.spec.ts b/packages/react/tests/browser/refinements.spec.ts
index c9f47e9..9737221 100644
--- a/packages/react/tests/browser/refinements.spec.ts
+++ b/packages/react/tests/browser/refinements.spec.ts
@@ -43,8 +43,8 @@ test('Cascader expands without transient overflow and keeps equal inline insets'
 });
 
 for (const [suffix, height] of [
-  ['', 36],
-  ['&compact=1', 30],
+  ['', 32],
+  ['&compact=1', 26],
   ['&tokens=1', 40],
 ] as const) {
   test(`popup rows follow the regional control height ${height}px`, async ({ page }, testInfo) => {
@@ -69,12 +69,24 @@ for (const [suffix, height] of [
       'min-height',
       `${height}px`,
     );
+    await expect
+      .poll(
+        async () =>
+          (await page.getByRole('option', { name: 'Bob', exact: true }).boundingBox())?.height,
+      )
+      .toBeCloseTo(height, 0);
     await page.keyboard.press('Escape');
     await page.getByRole('button', { name: 'Animated menu' }).click();
     await expect(page.getByRole('menuitem', { name: 'Edit', exact: true })).toHaveCSS(
       'min-height',
       `${height}px`,
     );
+    await expect
+      .poll(
+        async () =>
+          (await page.getByRole('menuitem', { name: 'Edit', exact: true }).boundingBox())?.height,
+      )
+      .toBeCloseTo(height, 0);
   });
 }
 
@@ -162,9 +174,11 @@ for (const appearance of ['light', 'dark']) {
     const second = page.getByRole('menuitem', { name: 'Edit', exact: true });
     const danger = page.getByRole('menuitem', { name: 'Delete', exact: true });
     await expect(first).toBeFocused();
-    const neutral = await marker.evaluate((node) =>
-      getComputedStyle(node).getPropertyValue('--leaf-color-text-alpha-9').trim(),
-    );
+    const neutral = new TinyColor(
+      await marker.evaluate((node) =>
+        getComputedStyle(node).getPropertyValue('--leaf-color-option-hover').trim(),
+      ),
+    ).toRgbString();
     await expect(marker).toHaveCSS('background-color', neutral);
     await second.hover();
     await expect(second).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
@@ -197,7 +211,7 @@ for (const appearance of ['light', 'dark']) {
 }
 
 for (const appearance of ['light', 'dark']) {
-  test(`Select keeps the same highlight color when crossing selected rows in ${appearance}`, async ({
+  test(`Select uses neutral candidates without changing selected rows in ${appearance}`, async ({
     page,
   }) => {
     await page.goto(`/?fixture=refinements&theme=${appearance}`);
@@ -211,19 +225,32 @@ for (const appearance of ['light', 'dark']) {
         getComputedStyle(node).getPropertyValue('--leaf-color-primary-surface-9').trim(),
       ),
     ).toRgbString();
+    const neutral = new TinyColor(
+      await marker.evaluate((node) =>
+        getComputedStyle(node).getPropertyValue('--leaf-color-option-hover').trim(),
+      ),
+    ).toRgbString();
+    expect(neutral).not.toBe(background);
     await expect(selected).toHaveCSS('background-color', background);
     await expect(marker).toBeVisible();
     await expect(marker).toHaveCSS('background-color', background);
     await next.hover();
     await expect(marker).toBeVisible();
-    await expect(marker).toHaveCSS('background-color', background);
+    await expect(marker).toHaveCSS('background-color', neutral);
+    await expect(selected).toHaveCSS('background-color', background);
     await expect(next).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+    await page.getByRole('option', { name: 'Unavailable', exact: true }).hover();
+    await expect(marker).toHaveCSS('background-color', neutral);
+    await expect(page.getByRole('option', { name: 'Unavailable', exact: true })).toHaveCSS(
+      'background-color',
+      'rgba(0, 0, 0, 0)',
+    );
     await selected.hover();
     await expect(marker).toBeVisible();
     await expect(marker).toHaveCSS('background-color', background);
     await input.press('ArrowDown');
     await expect(marker).toBeVisible();
-    await expect(marker).toHaveCSS('background-color', background);
+    await expect(marker).toHaveCSS('background-color', neutral);
     await input.press('ArrowUp');
     await expect(marker).toBeVisible();
     await expect(marker).toHaveCSS('background-color', background);
diff --git a/packages/react/tests/browser/search-select-fixture.tsx b/packages/react/tests/browser/search-select-fixture.tsx
new file mode 100644
index 0000000..ab61dbc
--- /dev/null
+++ b/packages/react/tests/browser/search-select-fixture.tsx
@@ -0,0 +1,36 @@
+import { AutoComplete, Select, Space } from '@ifhover/leaf-ui';
+
+const options = [
+  { value: 'alice', label: 'Alice Green' },
+  { value: 'bob', label: 'Bob Miller' },
+  { value: 'archived', label: 'Archived', disabled: true },
+];
+
+export function SearchSelectFixture() {
+  return (
+    <>
+      <h1>Searchable selections</h1>
+      <form aria-label="Search selections" style={{ maxWidth: 420 }}>
+        <Space direction="vertical" align="stretch">
+          {(['sm', 'md', 'lg'] as const).map((size) => (
+            <Select
+              key={size}
+              size={size}
+              aria-label={`Search ${size}`}
+              name={size}
+              showSearch
+              allowClear
+              options={options}
+              defaultValue="alice"
+            />
+          ))}
+          <AutoComplete aria-label="Matching suggestions" options={options} filterOption={false} />
+          <Select aria-label="Empty selection" options={[]} />
+          <Select aria-label="Loading selection" options={[]} loading />
+          <AutoComplete aria-label="Empty suggestions" options={[]} />
+          <AutoComplete aria-label="Loading suggestions" options={[]} loading />
+        </Space>
+      </form>
+    </>
+  );
+}
diff --git a/packages/react/tests/browser/search-select.spec.ts b/packages/react/tests/browser/search-select.spec.ts
new file mode 100644
index 0000000..42f3945
--- /dev/null
+++ b/packages/react/tests/browser/search-select.spec.ts
@@ -0,0 +1,157 @@
+import { expect, test } from '@playwright/test';
+import axe from 'axe-core';
+
+for (const appearance of ['light', 'dark']) {
+  test.describe(appearance, () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/?fixture=search-select&theme=${appearance}`);
+    });
+
+    test('reopening preserves the input, caret and text geometry at every size', async ({
+      page,
+    }) => {
+      for (const size of ['sm', 'md', 'lg']) {
+        const input = page.getByRole('combobox', { name: `Search ${size}`, exact: true });
+        await input.click();
+        await page.getByRole('option', { name: 'Bob Miller', exact: true }).click();
+        await expect(input).toHaveValue('Bob Miller');
+        await page.waitForTimeout(350);
+        const metrics = () =>
+          input.evaluate((node) => {
+            const style = getComputedStyle(node);
+            const bounds = node.getBoundingClientRect();
+            return {
+              height: bounds.height,
+              top: bounds.top,
+              left: bounds.left,
+              font: style.font,
+              lineHeight: style.lineHeight,
+            };
+          });
+        const before = await metrics();
+        await input.click({ position: { x: 180, y: before.height / 2 } });
+        await expect(input).toHaveValue('Bob Miller');
+        expect(
+          await input.evaluate((node: HTMLInputElement) => [
+            node.selectionStart,
+            node.selectionEnd,
+          ]),
+        ).toEqual([10, 10]);
+        expect(await metrics()).toEqual(before);
+        await expect(input.locator('..').locator('.leaf-select__value')).toHaveCount(0);
+        await expect(page.getByRole('option')).toHaveCount(3);
+        await page.keyboard.type('Alice');
+        await expect(input).toHaveValue('Alice');
+        await expect(page.getByRole('option')).toHaveCount(1);
+        await input.press('Escape');
+        await expect(input).toHaveValue('Bob Miller');
+        await expect(input).toBeFocused();
+        expect(
+          await page
+            .getByRole('form')
+            .evaluate((node, name) => new FormData(node as HTMLFormElement).get(name), size),
+        ).toBe('bob');
+      }
+    });
+
+    test('suggestions share option height, insets, spacing and neutral feedback with Select', async ({
+      page,
+    }) => {
+      const input = page.getByRole('combobox', { name: 'Search md', exact: true });
+      const metrics = (selector: string) =>
+        page
+          .locator(selector)
+          .getByRole('option')
+          .nth(1)
+          .evaluate((node) => {
+            const style = getComputedStyle(node);
+            const rect = node.getBoundingClientRect();
+            const previous = node
+              .closest('.leaf-floating')
+              ?.querySelector('[role="option"]')
+              ?.getBoundingClientRect();
+            return {
+              height: rect.height,
+              start: style.paddingInlineStart,
+              end: style.paddingInlineEnd,
+              radius: style.borderRadius,
+              gap: previous ? Math.round(rect.top - previous.bottom) : 0,
+              marker: getComputedStyle(node, '::before').content,
+            };
+          });
+      await input.click();
+      await expect(page.locator('.leaf-select__panel')).toHaveAttribute('data-positioned', 'true');
+      await page.waitForTimeout(350);
+      const selected = await metrics('.leaf-select__panel');
+      await input.press('Escape');
+      const autocomplete = page.getByRole('combobox', { name: 'Matching suggestions' });
+      await autocomplete.click();
+      const panel = page.locator('.leaf-autocomplete__panel');
+      await expect(panel).toHaveAttribute('data-positioned', 'true');
+      await page.waitForTimeout(350);
+      expect(await metrics('.leaf-autocomplete__panel')).toEqual(selected);
+      const row = panel.getByRole('option', { name: 'Bob Miller', exact: true });
+      await row.hover();
+      await expect(row).toHaveAttribute('aria-selected', 'true');
+      await expect(panel.locator('.leaf-floating__highlight')).toHaveCSS(
+        'border-color',
+        'rgba(0, 0, 0, 0)',
+      );
+      await expect(row).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+      await row.click();
+      await expect(autocomplete).toHaveValue('bob');
+    });
+
+    test('empty and busy panels put a decorative icon above the message and honor reduced motion', async ({
+      page,
+    }, info) => {
+      test.setTimeout(120_000);
+      await page.addScriptTag({ content: axe.source });
+      for (const name of [
+        'Empty selection',
+        'Loading selection',
+        'Empty suggestions',
+        'Loading suggestions',
+      ]) {
+        const input = page.getByRole('combobox', { name, exact: true });
+        await input.click();
+        const panel = page.locator('.leaf-floating[data-state="open"]');
+        const feedback = panel.locator('.leaf-floating__empty');
+        const icon = feedback.locator('svg');
+        await expect(icon).toHaveAttribute('aria-hidden', 'true');
+        await expect(feedback).toHaveCSS('flex-direction', 'column');
+        await expect
+          .poll(async () =>
+            feedback.evaluate((node) => {
+              const icon = node.querySelector('svg')?.getBoundingClientRect();
+              const text = node.querySelector('div')?.getBoundingClientRect();
+              return !!icon && !!text && icon.bottom <= text.top;
+            }),
+          )
+          .toBe(true);
+        if (name.startsWith('Loading')) {
+          await expect(panel.getByRole('listbox')).toHaveAttribute('aria-busy', 'true');
+          await expect(icon).toHaveCSS('animation-name', 'leaf-floating-spin');
+          await page.emulateMedia({ reducedMotion: 'reduce' });
+          await expect(icon).toHaveCSS('animation-name', 'none');
+          await page.emulateMedia({ reducedMotion: 'no-preference' });
+        } else await expect(icon).toHaveCSS('animation-name', 'none');
+        // Check settled colors rather than the translucent enter transition.
+        await expect(panel).toHaveCSS('opacity', '1');
+        const accessibility = await page.evaluate(async () => {
+          const result = await (window as typeof window & { axe: { run: typeof axe.run } }).axe.run(
+            { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'] } },
+          );
+          return result.violations.map((violation) => ({
+            id: violation.id,
+            nodes: violation.nodes.map((node) => node.html),
+          }));
+        });
+        expect(accessibility).toEqual([]);
+        await page.screenshot({ path: info.outputPath(`${name.replaceAll(' ', '-')}.png`) });
+        await input.press('Escape');
+        await expect(input).toHaveAttribute('aria-expanded', 'false');
+      }
+    });
+  });
+}
diff --git a/packages/react/tests/browser/selection-fixture.tsx b/packages/react/tests/browser/selection-fixture.tsx
index 2a133c3..be12945 100644
--- a/packages/react/tests/browser/selection-fixture.tsx
+++ b/packages/react/tests/browser/selection-fixture.tsx
@@ -1,9 +1,11 @@
 import {
   BottomNavigation,
   Breadcrumb,
+  Button,
   CheckableTag,
   ColorPicker,
   ConfigProvider,
+  Dropdown,
   Input,
   InputNumber,
   Pagination,
@@ -38,6 +40,16 @@ export function SelectionFixture() {
           ]}
         />
         <TimePicker aria-label="Selected time" defaultValue="09:00" />
+        <Dropdown
+          items={[
+            { key: 'saved', label: 'Saved filter', type: 'checkbox', checked: true },
+            { key: 'available', label: 'Available filter', type: 'checkbox' },
+            { key: 'disabled', label: 'Disabled filter', disabled: true },
+            { key: 'delete', label: 'Delete filter', danger: true },
+          ]}
+        >
+          <Button variant="outline">Checked menu</Button>
+        </Dropdown>
         <Pagination total={50} defaultCurrent={2} />
         <Breadcrumb
           items={[
diff --git a/packages/react/tests/browser/selection.spec.ts b/packages/react/tests/browser/selection.spec.ts
index c03129a..6f8879a 100644
--- a/packages/react/tests/browser/selection.spec.ts
+++ b/packages/react/tests/browser/selection.spec.ts
@@ -1,3 +1,4 @@
+import { TinyColor } from '@ctrl/tinycolor';
 import { expect, type Locator, test } from '@playwright/test';
 
 async function paint(locator: Locator) {
@@ -13,6 +14,15 @@ async function paint(locator: Locator) {
   });
 }
 
+async function tokenColor(locator: Locator, token: string) {
+  return new TinyColor(
+    await locator.evaluate(
+      (element, name) => getComputedStyle(element).getPropertyValue(name),
+      token,
+    ),
+  ).toRgbString();
+}
+
 for (const appearance of ['light', 'dark']) {
   test.describe(appearance, () => {
     test.beforeEach(async ({ page }) => {
@@ -114,5 +124,140 @@ for (const appearance of ['light', 'dark']) {
         'rgb(255, 255, 255)',
       );
     });
+
+    test('checked menu values stay primary while candidates share neutral hover and press', async ({
+      page,
+    }) => {
+      await page.getByRole('button', { name: 'Checked menu' }).click();
+      const panel = page.locator('.leaf-dropdown');
+      const marker = panel.locator('.leaf-dropdown__highlight');
+      const selected = panel.getByRole('menuitemcheckbox', { name: 'Saved filter' });
+      const candidate = panel.getByRole('menuitemcheckbox', { name: 'Available filter' });
+      const primary = await tokenColor(panel, '--leaf-color-primary-surface-9');
+      const neutral = await tokenColor(panel, '--leaf-color-option-hover');
+      await expect(selected).toBeFocused();
+      await expect(selected).toHaveCSS('background-color', primary);
+      await expect(marker).toHaveCSS('background-color', primary);
+      await candidate.hover();
+      await expect(marker).toHaveCSS('background-color', neutral);
+      await expect(candidate).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+      await expect(selected).toHaveCSS('background-color', primary);
+      await panel.getByRole('menuitem', { name: 'Disabled filter' }).hover();
+      await expect(marker).toHaveCSS('background-color', neutral);
+      await page.keyboard.press('Home');
+      await page.keyboard.press('ArrowDown');
+      await expect(candidate).toBeFocused();
+      await expect(marker).toHaveCSS('background-color', neutral);
+      await candidate.hover();
+      await page.mouse.down();
+      try {
+        await expect(candidate).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+      } finally {
+        await page.mouse.up();
+      }
+      await page.keyboard.press('Escape');
+      await page.getByRole('button', { name: 'Checked menu' }).click();
+      await panel.getByRole('menuitem', { name: 'Delete filter' }).hover();
+      await expect(marker).toHaveCSS(
+        'background-color',
+        await tokenColor(panel, '--leaf-color-danger-surface-8'),
+      );
+      await expect(selected).toHaveAttribute('aria-checked', 'true');
+    });
+
+    test('suggestions, cascader, tree, time and navigation share neutral candidates', async ({
+      page,
+    }) => {
+      await page.goto(`/?fixture=radius&theme=${appearance}`);
+      const select = page.getByRole('combobox', { name: 'Radius select', exact: true });
+      await select.click();
+      const selectPanel = page.locator('.leaf-select__panel');
+      const neutral = await tokenColor(selectPanel, '--leaf-color-option-hover');
+      const primary = await tokenColor(selectPanel, '--leaf-color-primary-surface-9');
+      await selectPanel.getByRole('option', { name: 'Bob', exact: true }).hover();
+      await expect(selectPanel.locator('.leaf-floating__highlight')).toHaveCSS(
+        'background-color',
+        neutral,
+      );
+      await select.press('Escape');
+
+      const autocomplete = page.getByRole('combobox', { name: 'Radius autocomplete' });
+      await autocomplete.fill('');
+      await autocomplete.press('ArrowDown');
+      const suggestions = page.locator('.leaf-autocomplete__panel');
+      const suggestion = suggestions.getByRole('option', { name: 'Bob', exact: true });
+      await suggestion.hover();
+      await expect(suggestions.locator('.leaf-floating__highlight')).toHaveCSS(
+        'background-color',
+        neutral,
+      );
+      await expect(suggestion).toHaveCSS(
+        'color',
+        await tokenColor(suggestions, '--leaf-color-text'),
+      );
+      await autocomplete.press('ArrowUp');
+      await expect(suggestions.locator('.leaf-floating__highlight')).toHaveCSS(
+        'background-color',
+        neutral,
+      );
+      await autocomplete.press('Escape');
+
+      const mentions = page.getByRole('combobox', { name: 'Radius mentions' });
+      await mentions.fill('@');
+      const mentionsPanel = page.locator('.leaf-mentions__panel');
+      const mention = mentionsPanel.getByRole('option', { name: 'Bob', exact: true });
+      await mention.hover();
+      await expect(mention).toHaveCSS('background-color', neutral);
+      await mentions.press('ArrowUp');
+      await expect(mentionsPanel.locator('[aria-selected="true"]')).toHaveCSS(
+        'background-color',
+        neutral,
+      );
+      await mentions.press('Escape');
+
+      await page.getByRole('combobox', { name: 'Radius cascader' }).click();
+      const cascader = page.locator('.leaf-cascader__panel');
+      const engineering = cascader.getByRole('option', { name: 'Engineering', exact: true });
+      await engineering.hover();
+      await expect(engineering).toHaveCSS('background-color', neutral);
+      await expect(cascader.getByRole('option', { name: 'Design', exact: true })).toHaveCSS(
+        'background-color',
+        primary,
+      );
+      await engineering.press('Home');
+      await page.keyboard.press('ArrowDown');
+      await expect(engineering).toBeFocused();
+      await expect(engineering).toHaveCSS('background-color', neutral);
+      await page.keyboard.press('Escape');
+
+      await page.getByRole('combobox', { name: 'Radius tree', exact: true }).click();
+      const tree = page.locator('.leaf-tree-select__panel');
+      const bob = tree.getByRole('treeitem', { name: 'Bob', exact: true });
+      await bob.locator('.leaf-tree__title').hover();
+      await expect(bob.locator('.leaf-tree__row')).toHaveCSS('background-color', neutral);
+      await expect(
+        tree.getByRole('treeitem', { name: 'Alice', exact: true }).locator('.leaf-tree__row'),
+      ).toHaveCSS('background-color', primary);
+      await page.keyboard.press('Escape');
+
+      await page.getByRole('combobox', { name: 'Radius time', exact: true }).click();
+      const hours = page.locator('.leaf-time-picker__column').first();
+      const nextHour = hours.getByRole('option', { name: '10', exact: true });
+      await nextHour.hover();
+      await expect(nextHour).toHaveCSS('background-color', neutral);
+      await expect(hours.locator('.leaf-time-picker__selection')).toHaveCSS(
+        'background-color',
+        primary,
+      );
+      await page.keyboard.press('Escape');
+
+      const menu = page.getByRole('navigation', { name: 'Radius menu', exact: true });
+      const team = menu.getByRole('menuitem', { name: 'Team', exact: true });
+      await team.hover();
+      await expect(team).toHaveCSS('background-color', neutral);
+      await team.focus();
+      await expect(team).toHaveCSS('background-color', neutral);
+      await expect(menu.locator('.leaf-menu__indicator')).toHaveCSS('background-color', primary);
+    });
   });
 }
diff --git a/packages/react/tests/browser/surface-fixture.tsx b/packages/react/tests/browser/surface-fixture.tsx
index c9c9f32..0fc2407 100644
--- a/packages/react/tests/browser/surface-fixture.tsx
+++ b/packages/react/tests/browser/surface-fixture.tsx
@@ -13,9 +13,9 @@ import {
 import { HardDrive, Mail, ShieldCheck } from 'lucide-react';
 import { useState } from 'react';
 import { NeutralAlerts } from '../../../../apps/docs/src/examples/alert/neutral';
-import { CardSections } from '../../../../apps/docs/src/examples/card/sections';
 import { DrawerSections } from '../../../../apps/docs/src/examples/drawer/sections';
-import { AccessScope } from '../../../../apps/docs/src/examples/modal/access-scope';
+import { CardSections } from '../../../../apps/docs/src/examples/en/card/sections';
+import { AccessScope } from './access-scope-fixture';
 
 function ConfirmationActions() {
   const { confirm } = useConfirm();
@@ -168,7 +168,7 @@ export function SurfaceFixture() {
           title="Neutral surface"
           description="Status icons carry meaning on the same neutral surface."
         />
-        <CardSections english />
+        <CardSections />
       </ConfigProvider>
     </div>
   );
diff --git a/packages/react/tests/browser/surfaces.spec.ts b/packages/react/tests/browser/surfaces.spec.ts
index 947cf2a..b59736c 100644
--- a/packages/react/tests/browser/surfaces.spec.ts
+++ b/packages/react/tests/browser/surfaces.spec.ts
@@ -167,7 +167,7 @@ test('theme settings reach portalled section surfaces and dense choices', async
   expect(color).not.toBe('rgb(246, 246, 247)');
   await expect(dialog.getByRole('button', { name: 'Save access', exact: true })).toHaveCSS(
     'min-height',
-    '34px',
+    '30px',
   );
 });
 
diff --git a/packages/react/tests/browser/tabs-fixture.tsx b/packages/react/tests/browser/tabs-fixture.tsx
new file mode 100644
index 0000000..e8617b7
--- /dev/null
+++ b/packages/react/tests/browser/tabs-fixture.tsx
@@ -0,0 +1,56 @@
+import { Button, Input, Space, type TabItem, Tabs } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+const initial: TabItem[] = [
+  { key: 'first', label: 'First', children: <Input aria-label="Retained draft" />, closable: true },
+  {
+    key: 'second',
+    label: 'A longer second tab',
+    children: <Input aria-label="Second draft" />,
+    closable: true,
+  },
+  {
+    key: 'third',
+    label: 'Third',
+    closable: true,
+    children: (
+      <Space direction="vertical" align="stretch">
+        <Input aria-label="Third draft" />
+        <Input aria-label="More details" />
+      </Space>
+    ),
+  },
+];
+
+export function TabsFixture() {
+  const params = new URLSearchParams(location.search);
+  const size = params.get('size') === 'sm' ? 'sm' : params.get('size') === 'lg' ? 'lg' : 'md';
+  const placement = params.get('vertical') ? 'left' : 'top';
+  const [items, setItems] = useState(initial);
+  return (
+    <Space direction="vertical" align="start">
+      <Tabs
+        data-testid="motion-tabs"
+        aria-label="Closable projects"
+        type={params.get('line') ? 'line' : 'card'}
+        placement={placement}
+        size={size}
+        items={items}
+        style={{
+          width: params.has('wide') ? 640 : params.has('narrow') ? 230 : 'max-content',
+          maxWidth: '100%',
+        }}
+        onAdd={() =>
+          setItems((current) => [
+            ...current,
+            { key: 'new', label: 'New', children: 'New content', closable: true },
+          ])
+        }
+        onClose={(key) => setItems((current) => current.filter((item) => item.key !== key))}
+      />
+      <Button variant="outline" onClick={() => setItems(initial)}>
+        Restore tabs
+      </Button>
+    </Space>
+  );
+}
diff --git a/packages/react/tests/browser/tabs-geometry.spec.ts b/packages/react/tests/browser/tabs-geometry.spec.ts
new file mode 100644
index 0000000..03ba21c
--- /dev/null
+++ b/packages/react/tests/browser/tabs-geometry.spec.ts
@@ -0,0 +1,83 @@
+import { expect, type Locator, test } from '@playwright/test';
+
+async function expectAligned(root: Locator) {
+  await expect
+    .poll(() =>
+      root.evaluate((node) => {
+        const marker = node.querySelector('.leaf-tabs__indicator');
+        const active = node.querySelector('[data-tab-key][data-active="true"]');
+        if (!marker || !active) throw new Error('Missing selection geometry');
+        const actual = marker.getBoundingClientRect();
+        const expected = active.getBoundingClientRect();
+        return Math.max(
+          Math.abs(actual.x - expected.x),
+          Math.abs(actual.y - expected.y),
+          Math.abs(actual.width - expected.width),
+          Math.abs(actual.height - expected.height),
+        );
+      }),
+    )
+    .toBeLessThan(1);
+}
+
+for (const direction of ['ltr', 'rtl']) {
+  for (const type of ['line', 'card']) {
+    test(`scaled ${direction} ${type} selection stays aligned through real scroll and resize`, async ({
+      page,
+    }, testInfo) => {
+      await page.emulateMedia({ reducedMotion: 'reduce' });
+      await page.goto(
+        `/?fixture=tabs&narrow=1${direction === 'rtl' ? '&rtl=1' : ''}${type === 'line' ? '&line=1' : ''}`,
+      );
+      const root = page.getByTestId('motion-tabs');
+      const list = root.locator('.leaf-tabs__list');
+      const marker = root.locator('.leaf-tabs__indicator');
+      await page.getByRole('textbox', { name: 'Retained draft', exact: true }).fill('Saved draft');
+      await root.evaluate((node) => {
+        node.style.transformOrigin = 'top left';
+        node.style.transform = 'scale(0.8)';
+      });
+      await expectAligned(root);
+      const localX = await marker.evaluate((node) =>
+        node.style.getPropertyValue('--leaf-indicator-x'),
+      );
+      await list.evaluate((node, rtl) => {
+        node.scrollLeft = rtl ? -40 : 40;
+      }, direction === 'rtl');
+      await expect
+        .poll(() => list.evaluate((node) => node.scrollLeft))
+        .toBe(direction === 'rtl' ? -40 : 40);
+      await expectAligned(root);
+      expect(
+        await marker.evaluate((node) => node.style.getPropertyValue('--leaf-indicator-x')),
+      ).toBe(localX);
+
+      for (const name of ['A longer second tab', 'Third', 'First']) {
+        await root.getByRole('tab', { name, exact: true }).click();
+        await expectAligned(root);
+      }
+      await expect(root.getByRole('textbox', { name: 'Retained draft', exact: true })).toHaveValue(
+        'Saved draft',
+      );
+      await root.getByRole('tab', { name: 'A longer second tab', exact: true }).click();
+      await expectAligned(root);
+      const before = await marker.evaluate((node) => node.getBoundingClientRect().width);
+      await root.getByRole('tab', { name: 'A longer second tab', exact: true }).evaluate((node) => {
+        node.append(' with more detail');
+      });
+      await expectAligned(root);
+      expect(await marker.evaluate((node) => node.getBoundingClientRect().width)).toBeGreaterThan(
+        before,
+      );
+      await root.evaluate((node) => {
+        node.style.width = '300px';
+      });
+      await expectAligned(root);
+      await expect(marker).toHaveCount(1);
+      await testInfo.attach('scaled selection after scrolling and resizing', {
+        body: await root.screenshot(),
+        contentType: 'image/png',
+      });
+    });
+  }
+}
diff --git a/packages/react/tests/browser/tabs.spec.ts b/packages/react/tests/browser/tabs.spec.ts
new file mode 100644
index 0000000..306cc4b
--- /dev/null
+++ b/packages/react/tests/browser/tabs.spec.ts
@@ -0,0 +1,243 @@
+import { expect, type Locator, test } from '@playwright/test';
+
+async function sampleOverflow(root: Locator) {
+  await root.evaluate((node) => {
+    node.dataset.overflowFrames = '[]';
+    node.dataset.sampling = 'true';
+    const start = performance.now();
+    const frames: {
+      time: number;
+      part: string;
+      width: number;
+      scroll: number;
+      height: number;
+      scrollHeight: number;
+    }[] = [];
+    const sample = () => {
+      for (const [part, element] of [
+        ['tabs', node],
+        ['list', node.querySelector('.leaf-tabs__list')],
+      ] as const) {
+        if (!element) continue;
+        if (
+          element.scrollWidth > element.clientWidth + 1 ||
+          element.scrollHeight > element.clientHeight + 1
+        ) {
+          frames.push({
+            time: performance.now() - start,
+            part,
+            width: element.clientWidth,
+            scroll: element.scrollWidth,
+            height: element.clientHeight,
+            scrollHeight: element.scrollHeight,
+          });
+        }
+      }
+      node.dataset.overflowFrames = JSON.stringify(frames);
+      if (node.isConnected && node.dataset.sampling === 'true') requestAnimationFrame(sample);
+    };
+    requestAnimationFrame(sample);
+  });
+}
+
+for (const query of ['', '&line=1', '&vertical=1', '&rtl=1&theme=dark', '&compact=1']) {
+  test(`switching and closing fitting tabs never creates scroll overflow (${query || 'default'})`, async ({
+    page,
+  }) => {
+    await page.goto(`/?fixture=tabs${query}`);
+    const root = page.getByTestId('motion-tabs');
+    await page
+      .getByRole('textbox', { name: 'Retained draft', exact: true })
+      .fill('keep this draft');
+    await sampleOverflow(root);
+    for (const name of ['A longer second tab', 'Third', 'First', 'Third', 'A longer second tab']) {
+      await root.getByRole('tab', { name, exact: true }).click();
+      await page.waitForTimeout(60);
+    }
+    await root.getByRole('button', { name: 'Close tab A longer second tab', exact: true }).click();
+    await page.waitForTimeout(400);
+    await root.getByRole('tab', { name: 'First', exact: true }).click();
+    await expect(page.getByRole('textbox', { name: 'Retained draft', exact: true })).toHaveValue(
+      'keep this draft',
+    );
+    await page.waitForTimeout(400);
+    const frames = await root.evaluate((node) => {
+      node.dataset.sampling = 'false';
+      return JSON.parse(node.dataset.overflowFrames ?? '[]');
+    });
+    expect(frames).toEqual([]);
+    await expect(page.getByRole('button', { name: 'More tabs', exact: true })).toHaveCount(0);
+    await root.getByRole('button', { name: 'Close tab Third', exact: true }).click();
+    await root.getByRole('button', { name: 'Close tab First', exact: true }).click();
+    await expect(root).toHaveCount(0);
+    await expect(page.getByRole('tablist')).toHaveCount(0);
+    await page.getByRole('button', { name: 'Restore tabs', exact: true }).click();
+    await expect(root.getByRole('tab')).toHaveCount(3);
+    await root.getByRole('tab', { name: 'A longer second tab', exact: true }).click();
+    await expect
+      .poll(() =>
+        root.locator('.leaf-tabs__indicator').evaluate((marker) => {
+          const active = marker.closest('.leaf-tabs')?.querySelector('[data-active="true"]');
+          return active
+            ? Math.abs(marker.getBoundingClientRect().x - active.getBoundingClientRect().x)
+            : Infinity;
+        }),
+      )
+      .toBeLessThan(1);
+  });
+}
+
+test('true horizontal overflow remains usable and the menu disappears when tabs fit', async ({
+  page,
+}) => {
+  await page.goto('/?fixture=tabs&narrow=1');
+  const root = page.getByTestId('motion-tabs');
+  const list = root.locator('.leaf-tabs__list');
+  await expect
+    .poll(() => list.evaluate((node) => node.scrollWidth - node.clientWidth))
+    .toBeGreaterThan(0);
+  await page.getByRole('button', { name: 'More tabs', exact: true }).click();
+  await page.getByRole('menuitem', { name: 'Third', exact: true }).click();
+  await expect(root.getByRole('tab', { name: 'Third', exact: true })).toBeFocused();
+  await root.getByRole('button', { name: 'Close tab A longer second tab', exact: true }).click();
+  await root.getByRole('button', { name: 'Close tab Third', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'More tabs', exact: true })).toHaveCount(0);
+  await expect
+    .poll(() => list.evaluate((node) => node.scrollWidth - node.clientWidth))
+    .toBeLessThanOrEqual(1);
+});
+
+for (const size of ['sm', 'md', 'lg']) {
+  test(`card ${size} header fits its labels and uses the full control height`, async ({ page }) => {
+    test.setTimeout(120_000);
+    await page.goto(`/?fixture=tabs&wide=1&size=${size}`);
+    const root = page.getByTestId('motion-tabs');
+    const list = root.locator('.leaf-tabs__list');
+    const height = size === 'sm' ? 30 : size === 'lg' ? 42 : 36;
+    const metrics = await root.evaluate((node) => {
+      const list = node.querySelector('.leaf-tabs__list');
+      const track = node.querySelector('.leaf-tabs__track');
+      const tab = node.querySelector('.leaf-tabs__tab');
+      if (!list || !track || !tab) throw new Error('Missing tab header');
+      return {
+        rootWidth: node.getBoundingClientRect().width,
+        listWidth: list.getBoundingClientRect().width,
+        listHeight: list.getBoundingClientRect().height,
+        tabHeight: tab.getBoundingClientRect().height,
+        trackWidth: track.getBoundingClientRect().width,
+      };
+    });
+    expect(metrics.listHeight).toBe(height);
+    expect(metrics.tabHeight).toBeLessThan(height);
+    expect(metrics.listWidth).toBeLessThan(metrics.rootWidth - height - 24);
+    expect(Math.abs(metrics.listWidth - metrics.trackWidth - 2)).toBeLessThan(1);
+    await root.getByRole('tab', { name: 'A longer second tab', exact: true }).click();
+    await expect
+      .poll(() => list.evaluate((node) => node.getBoundingClientRect().width), {
+        timeout: 20_000,
+      })
+      .toBe(metrics.listWidth);
+    await expect(root.getByRole('button', { name: 'More tabs', exact: true })).toHaveCount(0);
+    await root.evaluate((node) => {
+      node.style.width = '230px';
+    });
+    await expect(root.getByRole('button', { name: 'More tabs', exact: true })).toBeVisible({
+      timeout: 20_000,
+    });
+    await expect
+      .poll(() => list.evaluate((node) => node.scrollWidth - node.clientWidth), {
+        timeout: 20_000,
+      })
+      .toBeGreaterThan(0);
+    await root.evaluate((node) => {
+      node.style.width = '640px';
+    });
+    await expect(root.getByRole('button', { name: 'More tabs', exact: true })).toHaveCount(0, {
+      timeout: 20_000,
+    });
+    await expect
+      .poll(() => list.evaluate((node) => node.scrollWidth - node.clientWidth), {
+        timeout: 20_000,
+      })
+      .toBeLessThanOrEqual(1);
+  });
+
+  for (const vertical of [false, true]) {
+    test(`card ${size} selection has shadow room inside the clipped track (${vertical ? 'vertical' : 'horizontal'})`, async ({
+      page,
+    }) => {
+      await page.goto(`/?fixture=tabs&size=${size}${vertical ? '&vertical=1' : ''}`);
+      const root = page.getByTestId('motion-tabs');
+      for (const name of ['First', 'Third', 'A longer second tab']) {
+        await root.getByRole('tab', { name, exact: true }).click();
+        await expect
+          .poll(
+            () =>
+              root.evaluate((node) => {
+                const list = node.querySelector('.leaf-tabs__list');
+                const track = node.querySelector('.leaf-tabs__track');
+                const marker = node.querySelector('.leaf-tabs__indicator');
+                const active = node.querySelector('[data-active="true"]');
+                if (!list || !track || !marker || !active) throw new Error('Missing tab header');
+                const clip = track.getBoundingClientRect();
+                const selection = marker.getBoundingClientRect();
+                const item = active.getBoundingClientRect();
+                const style = getComputedStyle(list);
+                const insets = [
+                  selection.top - clip.top,
+                  clip.right - selection.right,
+                  clip.bottom - selection.bottom,
+                  selection.left - clip.left,
+                ];
+                const padding = [
+                  style.paddingTop,
+                  style.paddingRight,
+                  style.paddingBottom,
+                  style.paddingLeft,
+                ];
+                return {
+                  shadowRoom: insets.every(
+                    (inset, index) => inset >= Number.parseFloat(padding[index] ?? '0') - 0.5,
+                  ),
+                  aligned:
+                    Math.abs(selection.x - item.x) < 0.5 && Math.abs(selection.y - item.y) < 0.5,
+                  shadow: getComputedStyle(marker).boxShadow !== 'none',
+                  overflow:
+                    list.scrollWidth > list.clientWidth + 1 ||
+                    list.scrollHeight > list.clientHeight + 1,
+                };
+              }),
+            { timeout: 10_000 },
+          )
+          .toEqual({ shadowRoom: true, aligned: true, shadow: true, overflow: false });
+      }
+    });
+  }
+
+  test(`card add action matches the ${size} header without moving the close button`, async ({
+    page,
+  }) => {
+    await page.goto(`/?fixture=tabs&size=${size}`);
+    const root = page.getByTestId('motion-tabs');
+    const metrics = await root.evaluate((node) => {
+      const list = node.querySelector('.leaf-tabs__list');
+      const button = node.querySelector('.leaf-tabs__action');
+      if (!list || !button) throw new Error('Missing tab header');
+      return {
+        list: list.getBoundingClientRect().height,
+        action: button.getBoundingClientRect().height,
+      };
+    });
+    expect(Math.abs(metrics.list - metrics.action)).toBeLessThan(1);
+    expect(metrics.list).toBe(size === 'sm' ? 30 : size === 'lg' ? 42 : 36);
+    const close = root.getByRole('button', { name: 'Close tab First', exact: true });
+    await close.hover();
+    const before = await close.boundingBox();
+    await page.mouse.down();
+    await page.waitForTimeout(160);
+    expect(await close.boundingBox()).toEqual(before);
+    await expect(close).toHaveCSS('transform', 'none');
+    await page.mouse.move(0, 0);
+    await page.mouse.up();
+  });
+}
diff --git a/packages/react/tests/browser/translations-fixture.tsx b/packages/react/tests/browser/translations-fixture.tsx
new file mode 100644
index 0000000..9c49915
--- /dev/null
+++ b/packages/react/tests/browser/translations-fixture.tsx
@@ -0,0 +1,82 @@
+import {
+  Button,
+  ConfigProvider,
+  DatePicker,
+  Form,
+  FormField,
+  Pagination,
+  Select,
+  Space,
+  TimePicker,
+  useConfirm,
+  useMessage,
+  useNotification,
+} from '@ifhover/leaf-ui';
+import { useState } from 'react';
+import { useLeafConfig } from '../../src/config-provider/context';
+
+function Controls() {
+  const { locale } = useLeafConfig();
+  const { confirm } = useConfirm();
+  const { message } = useMessage();
+  const notification = useNotification();
+  return (
+    <Space direction="vertical" align="stretch">
+      <output aria-label="Current locale">{locale}</output>
+      <Form>
+        <FormField label="Choice">
+          <Select options={[]} allowClear />
+        </FormField>
+        <FormField label="Date">
+          <DatePicker defaultValue={new Date(2026, 9, 16)} />
+        </FormField>
+        <FormField label="Time">
+          <TimePicker use12Hours defaultValue="14:30" />
+        </FormField>
+      </Form>
+      <Pagination total={21} showTotal />
+      <Space>
+        <Button
+          onClick={() =>
+            void confirm({ title: 'Continue?', children: 'Your changes will be saved.' })
+          }
+        >
+          Confirm
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => message.open({ content: 'Saved', closable: true, duration: 0 })}
+        >
+          Message
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => notification.open({ title: 'Notice', duration: 0 })}
+        >
+          Notification
+        </Button>
+      </Space>
+    </Space>
+  );
+}
+export function TranslationsFixture() {
+  const [locale, setLocale] = useState('ja-JP');
+  return (
+    <Space direction="vertical" align="stretch">
+      <Space>
+        <Button onClick={() => setLocale('ja-JP')}>Japanese</Button>
+        <Button onClick={() => setLocale('ko-KR')}>Korean</Button>
+        <Button onClick={() => setLocale('en-US')}>English</Button>
+      </Space>
+      <ConfigProvider data-testid="translations" locale={[locale, 'en-US']}>
+        <Controls />
+        <ConfigProvider
+          data-testid="nested"
+          translations={{ 'ja-JP': { select: { empty: '候補なし' } } }}
+        >
+          <Select aria-label="Nested choice" options={[]} />
+        </ConfigProvider>
+      </ConfigProvider>
+    </Space>
+  );
+}
diff --git a/packages/react/tests/browser/translations.spec.ts b/packages/react/tests/browser/translations.spec.ts
new file mode 100644
index 0000000..e3b4a61
--- /dev/null
+++ b/packages/react/tests/browser/translations.spec.ts
@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test';
+import axe from 'axe-core';
+
+for (const appearance of ['light', 'dark']) {
+  test(`${appearance}: scoped translations, language switching, ICU, portals and time input`, async ({
+    page,
+  }) => {
+    const errors: string[] = [];
+    page.on('pageerror', (error) => errors.push(error.message));
+    await page.goto(`/?fixture=translations&theme=${appearance}`);
+    await expect(page.getByTestId('translations')).toHaveAttribute('lang', 'ja-JP');
+    await expect(page.getByLabel('Choice', { exact: true })).toHaveAttribute(
+      'placeholder',
+      '選択してください',
+    );
+    await expect(page.getByText('全 21 件')).toBeVisible();
+    const date = page.getByLabel('Date', { exact: true });
+    await date.click();
+    await expect(page.getByRole('button', { name: '月', exact: true })).toHaveText('10月');
+    await expect(page.getByRole('button', { name: '今日', exact: true })).toBeVisible();
+    await date.press('Escape');
+    const choice = page.getByLabel('Choice', { exact: true });
+    await choice.click();
+    await expect(page.getByText('選択肢がありません', { exact: true })).toBeVisible();
+    await expect(page.locator('[data-leaf-popup]:visible').last()).toHaveAttribute('lang', 'ja-JP');
+    await choice.press('Escape');
+    await page.getByRole('combobox', { name: 'Nested choice', exact: true }).click();
+    await expect(page.getByText('候補なし', { exact: true })).toBeVisible();
+    await page.keyboard.press('Escape');
+    const time = page.getByLabel('Time', { exact: true });
+    await time.fill('3:45 午後');
+    await time.press('Enter');
+    await expect(time).toHaveValue('03:45 午後');
+    await page.getByRole('button', { name: 'Confirm', exact: true }).click();
+    const dialog = page.getByRole('alertdialog', { name: 'Continue?' });
+    await expect(dialog.getByRole('button', { name: '確認', exact: true })).toBeVisible();
+    await dialog.getByRole('button', { name: 'キャンセル', exact: true }).click();
+    await expect(dialog).toBeHidden();
+    await page.getByRole('button', { name: 'Message', exact: true }).click();
+    await page.getByRole('button', { name: 'Notification', exact: true }).click();
+    await expect(page.getByRole('button', { name: '閉じる', exact: true })).toHaveCount(2);
+    await page.getByRole('button', { name: 'Korean', exact: true }).click();
+    await expect(page.getByTestId('translations')).toHaveAttribute('lang', 'ko-KR');
+    await expect(choice).toHaveAttribute('placeholder', '선택해 주세요');
+    await expect(time).toHaveValue('03:45 오후');
+    await expect(page.getByText('총 21개')).toBeVisible();
+    await expect(page.getByRole('button', { name: '닫기', exact: true })).toHaveCount(2);
+    await page.getByRole('button', { name: 'English', exact: true }).click();
+    await expect(page.getByTestId('translations')).toHaveAttribute('lang', 'en-US');
+    await expect(choice).toHaveAttribute('placeholder', 'Please select');
+    await expect(time).toHaveValue('03:45 PM');
+    await expect(page.getByText('Total 21 items')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Close', exact: true })).toHaveCount(2);
+    await page.getByRole('button', { name: 'Close', exact: true }).first().click();
+    await page.getByRole('button', { name: 'Close', exact: true }).click();
+    await page.waitForTimeout(450);
+    await page.evaluate(axe.source);
+    const audit = await page.evaluate(async () => {
+      const main = document.querySelector('main');
+      if (!main) throw new Error('Fixture main was not rendered');
+      return (window as unknown as { axe: typeof axe }).axe.run(main);
+    });
+    expect(audit.violations).toEqual([]);
+    expect(errors).toEqual([]);
+  });
+}
diff --git a/packages/react/tests/browser/visual.spec.ts b/packages/react/tests/browser/visual.spec.ts
index 26a8c50..8ae19a8 100644
--- a/packages/react/tests/browser/visual.spec.ts
+++ b/packages/react/tests/browser/visual.spec.ts
@@ -9,11 +9,11 @@ for (const variant of ['light', 'dark', 'rtl', 'narrow', 'reduced', 'tokens']) {
     );
     await expect(page.getByRole('heading', { name: 'Theme and direction' })).toBeVisible();
     for (const [size, height] of [
-      ['sm', 34],
-      ['md', 40],
-      ['lg', 46],
+      ['sm', 30],
+      ['md', 36],
+      ['lg', 42],
     ] as const) {
-      const expectedHeight = height + (variant === 'tokens' ? 4 : 0);
+      const expectedHeight = height + (variant === 'tokens' ? 8 : 0);
       const button = page.getByTestId(`button-${size}`);
       expect(Math.round((await button.boundingBox())?.height ?? 0)).toBe(expectedHeight);
       const inlinePadding = await button.evaluate((node) =>
@@ -22,7 +22,7 @@ for (const variant of ['light', 'dark', 'rtl', 'narrow', 'reduced', 'tokens']) {
       expect(inlinePadding).toBeCloseTo(variant === 'tokens' ? 20 : expectedHeight * 0.42, 1);
       if (variant === 'tokens') await expect(button).toHaveCSS('border-radius', '2px');
     }
-    const controlHeight = variant === 'tokens' ? 44 : 40;
+    const controlHeight = variant === 'tokens' ? 44 : 36;
     for (const selector of ['.leaf-input', '.leaf-select', '.leaf-date-picker']) {
       for (const control of await page.locator(selector).all())
         expect(Math.round((await control.boundingBox())?.height ?? 0)).toBe(controlHeight);
diff --git a/packages/react/tests/browser/warning-fixture.tsx b/packages/react/tests/browser/warning-fixture.tsx
index c9f816a..18b7798 100644
--- a/packages/react/tests/browser/warning-fixture.tsx
+++ b/packages/react/tests/browser/warning-fixture.tsx
@@ -24,9 +24,6 @@ function WarningFeedback() {
       <Input aria-label="Warning field" status="warning" />
       <Space>
         <Tag color="warning">Warning label</Tag>
-        <Tag color="warning" variant="outline">
-          Outlined warning
-        </Tag>
         <Tag color="warning" variant="solid">
           Solid warning
         </Tag>
diff --git a/packages/react/tests/browser/warning.spec.ts b/packages/react/tests/browser/warning.spec.ts
index 442ae95..a48edb3 100644
--- a/packages/react/tests/browser/warning.spec.ts
+++ b/packages/react/tests/browser/warning.spec.ts
@@ -11,18 +11,15 @@ for (const mode of ['light', 'dark'] as const) {
       await expect(page.locator(selector)).toHaveCSS('color', expected);
     await expect(page.locator('.leaf-input')).toHaveCSS('border-color', expected);
     await expect(page.locator('.leaf-badge__indicator')).toHaveCSS('background-color', expected);
-    for (const variant of ['soft', 'outline', 'solid']) {
+    for (const variant of ['soft', 'solid']) {
       const colors = await page.locator(`.leaf-tag--${variant}`).evaluate((node) => {
         const style = getComputedStyle(node);
         return {
           foreground: style.color,
           background: style.backgroundColor,
-          surface: style.getPropertyValue('--leaf-color-surface'),
         };
       });
-      expect(
-        readability(colors.foreground, variant === 'outline' ? colors.surface : colors.background),
-      ).toBeGreaterThanOrEqual(4.5);
+      expect(readability(colors.foreground, colors.background)).toBeGreaterThanOrEqual(4.5);
     }
     await page.getByRole('button', { name: 'Message warning', exact: true }).click();
     await expect(page.locator('.leaf-message__icon')).toHaveCSS('color', expected);
diff --git a/packages/react/tests/component-defaults.types.tsx b/packages/react/tests/component-defaults.types.tsx
new file mode 100644
index 0000000..0ec4286
--- /dev/null
+++ b/packages/react/tests/component-defaults.types.tsx
@@ -0,0 +1,212 @@
+import type { LeafComponentDefaults } from '../src';
+import {
+  DatePicker,
+  FormList,
+  InputNumber,
+  Modal,
+  Select,
+  Slider,
+  TreeSelect,
+  VirtualList,
+} from '../src';
+import type { LeafComponentDefaults as SubpathDefaults } from '../src/config-provider';
+import { useComponentProps } from '../src/config-provider/component-defaults';
+
+type PublicExports = typeof import('../src') & typeof import('../src/tabletanstack');
+type PublicComponentName = {
+  [Name in keyof PublicExports]: Name extends Capitalize<Name> ? Name : never;
+}[keyof PublicExports];
+type InfrastructureOrAlias =
+  | 'ConfigProvider'
+  | 'ConfirmProvider'
+  | 'MessageProvider'
+  | 'NotificationProvider'
+  | 'LoadingBarProvider'
+  | 'FAB'
+  | 'ResizablePanels';
+type MissingDefaults = Exclude<
+  PublicComponentName,
+  keyof LeafComponentDefaults | InfrastructureOrAlias
+>;
+type UnknownDefaults = Exclude<keyof LeafComponentDefaults, PublicComponentName | 'Confirm'>;
+export const completeComponentDefaultsCoverage: [MissingDefaults, UnknownDefaults] extends [
+  never,
+  never,
+]
+  ? true
+  : [MissingDefaults, UnknownDefaults] = true;
+
+// Compile-only contracts; required JSX props and mode-specific types stay instance-owned.
+export function componentDefaultsTypeContracts() {
+  const root: LeafComponentDefaults = {
+    Input: { value: '', defaultValue: 'Leaf', onChange: (event) => event.currentTarget.value },
+    Select: { showSearch: true, onSearch: (query) => query },
+    Modal: { footer: null },
+  };
+  const subpath: SubpathDefaults = root;
+  const reset: LeafComponentDefaults = {
+    Button: null,
+    Input: null,
+    InputSearch: null,
+    Select: null,
+    Modal: null,
+  };
+  // @ts-expect-error React refs are not configurable defaults.
+  const ref: LeafComponentDefaults = { Input: { ref: () => {} } };
+  // @ts-expect-error React keys are not configurable defaults.
+  const key: LeafComponentDefaults = { Button: { key: 'global' } };
+  // @ts-expect-error Select mode is required on the instance for sound value/callback inference.
+  const mode: LeafComponentDefaults = { Select: { multiple: true } };
+  // @ts-expect-error Select mode-dependent values stay on the instance.
+  const value: LeafComponentDefaults = { Select: { value: 'leaf' } };
+  // @ts-expect-error Select mode-dependent initial values stay on the instance.
+  const defaultValue: LeafComponentDefaults = { Select: { defaultValue: ['leaf'] } };
+  // @ts-expect-error Select mode-dependent callbacks stay on the instance.
+  const callback: LeafComponentDefaults = { Select: { onChange: () => {} } };
+  // @ts-expect-error Unsupported components are not silently accepted.
+  const unsupported: LeafComponentDefaults = { NonexistentComponent: {} };
+  // @ts-expect-error Required options belong to the Select instance.
+  const options: LeafComponentDefaults = { Select: { options: [] } };
+  // @ts-expect-error Required visibility belongs to the Modal instance.
+  const open: LeafComponentDefaults = { Modal: { open: true } };
+  // @ts-expect-error Provider defaults do not relax required JSX options.
+  const missingOptions = <Select />;
+  // @ts-expect-error Modal open remains required even if configured elsewhere.
+  const missingOpen = <Modal />;
+  const multi = <Select multiple options={[]} onChange={(values) => values.map(String)} />;
+  const single = <Select options={[]} onChange={(value) => value.toUpperCase()} />;
+  return {
+    subpath,
+    reset,
+    ref,
+    key,
+    mode,
+    value,
+    defaultValue,
+    callback,
+    unsupported,
+    options,
+    open,
+    missingOptions,
+    missingOpen,
+    multi,
+    single,
+  };
+}
+
+export function useComponentPropsTypeContracts() {
+  // @ts-expect-error A component name cannot be paired with another component's props.
+  const wrongComponent = useComponentProps('Input', { open: true, width: 400 });
+  // @ts-expect-error Unknown props must not be inferred as a new arbitrary props type.
+  const unknown = useComponentProps('Button', { misspelledVariant: 'invalid' });
+  // @ts-expect-error Known props do not allow unrelated extra props either.
+  const extra = useComponentProps('Button', { size: 'md', extra: true });
+  const multi = useComponentProps('Select', {
+    multiple: true,
+    options: [],
+    onChange: (values) => values.map(String),
+  });
+  const single = useComponentProps('Select', {
+    options: [],
+    onChange: (value) => value.toUpperCase(),
+  });
+  return { wrongComponent, unknown, extra, multi, single };
+}
+
+export function expandedComponentDefaultsContracts() {
+  const defaults: LeafComponentDefaults = {
+    Pagination: { variant: 'outline', showTotal: true },
+    Tabs: { size: 'sm' },
+    DataTable: { size: 'sm', striped: true },
+    DataTableSearch: { allowClear: true },
+    VirtualList: { estimateSize: 36 },
+    FormList: { className: 'rows' },
+    Confirm: { confirmText: 'Continue' },
+    Message: { duration: 5 },
+    Notification: { placement: 'bottom-right' },
+    LoadingBar: { height: 4 },
+  };
+  // @ts-expect-error Required pagination data stays instance-owned.
+  const pagination: LeafComponentDefaults = { Pagination: { total: 100 } };
+  // @ts-expect-error Required trigger children stay instance-owned.
+  const trigger: LeafComponentDefaults = { Tooltip: { children: <button type="button" /> } };
+  // @ts-expect-error Checkable TreeSelect mode determines the value and callback type.
+  const checked: LeafComponentDefaults = { TreeSelect: { treeCheckable: true } };
+  // @ts-expect-error Numeric/string mode cannot be selected regionally.
+  const number: LeafComponentDefaults = { InputNumber: { stringMode: true } };
+  // @ts-expect-error Range mode remains visible to the Slider instance's type checker.
+  const range: LeafComponentDefaults = { Slider: { range: true } };
+  // @ts-expect-error Multiple mode remains visible to DatePicker's type checker.
+  const multiple: LeafComponentDefaults = { DatePicker: { multiple: true } };
+  const list: LeafComponentDefaults = {
+    // @ts-expect-error A generic list's data and callbacks cannot be shared across item types.
+    VirtualList: { renderItem: (row: { name: string }) => row.name },
+  };
+  const estimate: LeafComponentDefaults = {
+    // @ts-expect-error Only a type-independent estimate is allowed in global defaults.
+    VirtualList: { estimateSize: (row: { height: number }) => row.height },
+  };
+  // @ts-expect-error FormList's values retain the instance's item type.
+  const form: LeafComponentDefaults = { FormList: { defaultValue: ['shared'] } };
+  const table: LeafComponentDefaults = {
+    // @ts-expect-error Row callbacks remain typed by the DataTable instance.
+    DataTable: { getRowLabel: (row: { name: string }) => row.name },
+  };
+  // @ts-expect-error An imperative scroll ref belongs to one Table instance.
+  const scrollRef: LeafComponentDefaults = { Table: { scrollRef: { current: null } } };
+  // @ts-expect-error A table element ref cannot be shared through regional defaults.
+  const tableRef: LeafComponentDefaults = { DataTable: { tableRef: { current: null } } };
+  // @ts-expect-error Task state is owned by the loading bar instance or service.
+  const loading: LeafComponentDefaults = { LoadingBar: { active: true } };
+  // @ts-expect-error Required notification titles remain request-owned.
+  const notification: LeafComponentDefaults = { Notification: { title: 'Shared title' } };
+  // @ts-expect-error Service identifiers stay request-owned.
+  const message: LeafComponentDefaults = { Message: { key: 'shared' } };
+  // @ts-expect-error Context providers configure scopes and are not component defaults targets.
+  const provider: LeafComponentDefaults = { ConfigProvider: { components: {} } };
+  const decimal = <InputNumber stringMode onChange={(value) => value?.toUpperCase()} />;
+  const numeric = <InputNumber onChange={(value) => value?.toFixed()} />;
+  const dates = (
+    <DatePicker multiple onChange={(values) => values.map((value) => value.getTime())} />
+  );
+  const slider = <Slider range onChange={(values) => values.map((value) => value.toFixed())} />;
+  const tree = <TreeSelect treeCheckable options={[]} onChange={(values) => values.map(String)} />;
+  const virtual = (
+    <VirtualList
+      items={[{ id: 1 }]}
+      itemKey={(row) => row.id}
+      renderItem={(row) => row.id.toFixed()}
+    />
+  );
+  const rows = (
+    <FormList name="rows" defaultValue={[{ name: 'Leaf' }]}>
+      {(fields) => fields.map((field) => field.value.name.toUpperCase())}
+    </FormList>
+  );
+  return {
+    defaults,
+    pagination,
+    trigger,
+    checked,
+    number,
+    range,
+    multiple,
+    list,
+    estimate,
+    form,
+    table,
+    scrollRef,
+    tableRef,
+    loading,
+    notification,
+    message,
+    provider,
+    decimal,
+    numeric,
+    dates,
+    slider,
+    tree,
+    virtual,
+    rows,
+  };
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8054c43..646641f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,12 +57,24 @@ importers:
       '@rsbuild/plugin-sass':
         specifier: ^2.0.1
         version: 2.0.1(@rsbuild/core@2.2.11)
+      '@tailwindcss/postcss':
+        specifier: ^4.3.3
+        version: 4.3.3
       '@types/react':
         specifier: ^19.3.0
         version: 19.3.0
       '@types/react-dom':
         specifier: ^19.3.0
         version: 19.3.0(@types/react@19.3.0)
+      postcss:
+        specifier: ^8.5.29
+        version: 8.5.29
+      tailwindcss:
+        specifier: ^4.3.3
+        version: 4.3.3
+      tailwindcss-v3:
+        specifier: npm:tailwindcss@3.4.19
+        version: tailwindcss@3.4.19
       zod:
         specifier: ^4.6.5
         version: 4.6.5
@@ -87,21 +99,18 @@ importers:
       '@tanstack/react-virtual':
         specifier: ^3.14.13
         version: 3.14.13(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
+      intl-messageformat:
+        specifier: ^12.1.3
+        version: 12.1.3
       lucide-react:
         specifier: ^1.50.0
         version: 1.50.0(@types/react@19.3.0)(react@19.3.0)
       qrcode.react:
         specifier: ^4.2.0
         version: 4.2.0(react@19.3.0)
-      react-image-crop:
-        specifier: ^11.1.2
-        version: 11.1.2(react@19.3.0)
       react-imask:
         specifier: ^7.6.1
         version: 7.6.1(react@19.3.0)
-      signature_pad:
-        specifier: ^5.1.4
-        version: 5.1.4
       tabbable:
         specifier: ^6.5.0
         version: 6.5.0
@@ -129,7 +138,7 @@ importers:
         version: 10.4.2
       '@testing-library/jest-dom':
         specifier: ^7.0.1
-        version: 7.0.1(@testing-library/dom@10.4.2)(vitest@5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1)))
+        version: 7.0.1(@testing-library/dom@10.4.2)(vitest@5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1)))
       '@testing-library/react':
         specifier: ^16.3.3
         version: 16.3.3(@testing-library/dom@10.4.2)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
@@ -162,16 +171,20 @@ importers:
         version: 1.105.1
       vite:
         specifier: ^8.3.2
-        version: 8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1)
+        version: 8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1)
       vitest:
         specifier: ^5.0.3
-        version: 5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1))
+        version: 5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1))
 
 packages:
 
   '@adobe/css-tools@4.5.0':
     resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==}
 
+  '@alloc/quick-lru@5.3.0':
+    resolution: {integrity: sha512-U4+70Pc5ZS9osnCBCE5Jha/ciHM+Yp+CNMNC/7HvYbNRk1Ldd+f7qO65W5qfhu/TCv+/ozljlXXe9Nj8419DMA==}
+    engines: {node: '>=10'}
+
   '@asamuzakjp/css-color@7.1.2':
     resolution: {integrity: sha512-99DHAnXDB5z6EEK+9GMpVI7Mw4oxj97dY5bpOzMnjADQWxI8rN6TvTduuFLUhUMlS7/CfVZ06tcZsus6cltnNw==}
     engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
@@ -605,9 +618,21 @@ packages:
   '@fontsource-variable/inter@5.3.0':
     resolution: {integrity: sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==}
 
+  '@formatjs/fast-memoize@3.1.7':
+    resolution: {integrity: sha512-zXfhLpvA6T7+efdt9JLbBwZ00tT7NsBMDVnDu8rpHeNNv8KfRZAMo2gkG0k9lK/Nzc//3kJ9pImsfuJxk3KhUA==}
+
+  '@formatjs/icu-messageformat-parser@3.5.21':
+    resolution: {integrity: sha512-Vnl7IOSyMRaP4Pjv48etkT2nlcIwzh4QWIa3hewzGlZZPBbft+TbMir4MijpDViOLN/1hvkGC10oYMuilsG+fw==}
+
+  '@formatjs/icu-skeleton-parser@2.1.12':
+    resolution: {integrity: sha512-ca7tZMLpfHX3sUD7hP6gE/qr6Iq89EDd3ZLeRhbsB7r0UD55DGJq+tmFLzrGrnx5StahUevQmQQVtbDRHsfDHA==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -633,6 +658,18 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
   '@oxc-project/types@0.152.0':
     resolution: {integrity: sha512-oM/5rLBm2tPkg0iBgkH/FOeR3PCDpY19GTgAZjMFM8h9WI9VW7cLgzp6nwtarYKmovavIQZ+Fe/RKX/8C8O/Rw==}
 
@@ -1008,6 +1045,98 @@ packages:
   '@swc/helpers@0.5.23':
     resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
 
+  '@tailwindcss/node@4.3.3':
+    resolution: {integrity: sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    resolution: {integrity: sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    resolution: {integrity: sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    resolution: {integrity: sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    resolution: {integrity: sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    resolution: {integrity: sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    resolution: {integrity: sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    resolution: {integrity: sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    resolution: {integrity: sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    resolution: {integrity: sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    resolution: {integrity: sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    resolution: {integrity: sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    resolution: {integrity: sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.3':
+    resolution: {integrity: sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.3.3':
+    resolution: {integrity: sha512-JTSZZGQi1AyKirbLN3azmjVzef92tcX7h+iSqPdaeStyFpGpDlKvvpxeOE8njhbUanbRwr3z8DyzhICWnMtQeg==}
+
   '@tanstack/react-table@8.21.3':
     resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
@@ -1273,6 +1402,16 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -1301,9 +1440,21 @@ packages:
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
   body-scroll-lock@4.0.0-beta.0:
     resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
 
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -1323,6 +1474,10 @@ packages:
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
 
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
   chokidar@5.0.0:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
@@ -1340,6 +1495,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
   compute-scroll-into-view@3.1.1:
     resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
 
@@ -1360,6 +1519,11 @@ packages:
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -1397,6 +1561,12 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -1407,6 +1577,10 @@ packages:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
     engines: {node: '>= 4'}
 
+  enhanced-resolve@5.26.0:
+    resolution: {integrity: sha512-9vhedylFonb2YGogzUKX6+Ja72gOJbN1QHAqdrvqLwhdl/QWbKopzoUC9EbQNVsAns/bx/4uyqalrQAoy1IByw==}
+    engines: {node: '>=10.13.0'}
+
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
@@ -1415,6 +1589,10 @@ packages:
     resolution: {integrity: sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==}
     engines: {node: '>=20.19.0'}
 
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
   es-module-lexer@2.3.2:
     resolution: {integrity: sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==}
 
@@ -1461,6 +1639,13 @@ packages:
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fastq@1.20.3:
+    resolution: {integrity: sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw==}
+
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -1470,6 +1655,10 @@ packages:
       picomatch:
         optional: true
 
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
   flexsearch@0.8.212:
     resolution: {integrity: sha512-wSyJr1GUWoOOIISRu+X2IXiOcVfg9qqBRyCPRUdLMIGJqPzMo+jMRlvE83t14v1j0dRMEaBbER/adQjp6Du2pw==}
 
@@ -1478,14 +1667,32 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
   get-east-asian-width@1.7.0:
     resolution: {integrity: sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q==}
     engines: {node: '>=18'}
 
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
+    engines: {node: '>= 0.4'}
+
   hast-util-from-parse5@8.0.3:
     resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
 
@@ -1546,6 +1753,9 @@ packages:
   inline-style-parser@0.2.7:
     resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
 
+  intl-messageformat@12.1.3:
+    resolution: {integrity: sha512-JXi5wk8R/oSECKyxSIZ00VS8KG6MZkHM0qU4NS7RrvIWWXkiv3wVqGlCvEvyXiDvKlt2yqwZMiZGIv+I8rrnZQ==}
+
   is-absolute-url@4.0.1:
     resolution: {integrity: sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -1556,6 +1766,14 @@ packages:
   is-alphanumerical@2.0.1:
     resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
 
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.17.0:
+    resolution: {integrity: sha512-J/vG0zBCbIKOQFfufSwyXdMrsohyJIUNkrnmo6WZGzoM7tr/lsbfW5b2BvisL6zsyMzK9UxV9L6c7AoFbyXHOA==}
+    engines: {node: '>= 0.4'}
+
   is-decimal@2.0.1:
     resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
 
@@ -1570,6 +1788,10 @@ packages:
   is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -1577,6 +1799,14 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1599,36 +1829,73 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
   lightningcss-android-arm64@1.33.0:
     resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [android]
 
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   lightningcss-darwin-arm64@1.33.0:
     resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
   lightningcss-darwin-x64@1.33.0:
     resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
   lightningcss-freebsd-x64@1.33.0:
     resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
   lightningcss-linux-arm-gnueabihf@1.33.0:
     resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   lightningcss-linux-arm64-gnu@1.33.0:
     resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
     engines: {node: '>= 12.0.0'}
@@ -1636,6 +1903,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   lightningcss-linux-arm64-musl@1.33.0:
     resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
     engines: {node: '>= 12.0.0'}
@@ -1643,6 +1917,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   lightningcss-linux-x64-gnu@1.33.0:
     resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
     engines: {node: '>= 12.0.0'}
@@ -1650,6 +1931,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   lightningcss-linux-x64-musl@1.33.0:
     resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
     engines: {node: '>= 12.0.0'}
@@ -1657,22 +1945,45 @@ packages:
     os: [linux]
     libc: [musl]
 
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
   lightningcss-win32-arm64-msvc@1.33.0:
     resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   lightningcss-win32-x64-msvc@1.33.0:
     resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
   lightningcss@1.33.0:
     resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
     engines: {node: '>= 12.0.0'}
 
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
   loader-utils@2.0.4:
     resolution: {integrity: sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==}
     engines: {node: '>=8.9.0'}
@@ -1701,6 +2012,9 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   magic-string@1.4.2:
     resolution: {integrity: sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g==}
 
@@ -1783,6 +2097,10 @@ packages:
   medium-zoom@1.1.0:
     resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==}
 
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
   micromark-core-commonmark@2.0.4:
     resolution: {integrity: sha512-wxEeE8v8XVvOrxn1TZj74qYhAtTQsSqufHVS3uNVyT1MupXxhyaHk8/9xDNPh9BmL77QNDgWTkZ3RsYHB2ry7w==}
 
@@ -1920,6 +2238,10 @@ packages:
   micromark@4.0.3:
     resolution: {integrity: sha512-oGYfQzHSG5dOMovQcJ3fyTmZlWAWpi0XA0sJwJs+i6OT88o1+Jtw/8z0CmdowSLxGhhFK89rQ/oXph/wN02PNw==}
 
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -1927,6 +2249,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
   nanoid@3.3.19:
     resolution: {integrity: sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1935,6 +2260,10 @@ packages:
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
   nprogress@0.2.0:
     resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
 
@@ -1942,6 +2271,10 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
   obug@2.2.1:
     resolution: {integrity: sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==}
     engines: {node: '>=12.20.0'}
@@ -1964,13 +2297,24 @@ packages:
   parse5@8.0.1:
     resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
 
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
   picomatch@4.0.7:
     resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
     engines: {node: '>=12'}
 
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
   playwright-core@1.63.0:
     resolution: {integrity: sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==}
     engines: {node: '>=20'}
@@ -1981,10 +2325,57 @@ packages:
     engines: {node: '>=20'}
     hasBin: true
 
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.1.4:
+    resolution: {integrity: sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
   postcss@8.5.28:
     resolution: {integrity: sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.29:
+    resolution: {integrity: sha512-49cGhUbXj8Qenv0iTMxA1cFBzxXoctpC9Ujd77t1WcbJIr6nF/eI7g/8MgxrYldFRuAXvja7xQRwavoW7kgrxQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prettier@3.9.9:
     resolution: {integrity: sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg==}
     engines: {node: '>=14'}
@@ -2009,16 +2400,14 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
   react-dom@19.3.0:
     resolution: {integrity: sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==}
     peerDependencies:
       react: ^19.3.0
 
-  react-image-crop@11.1.2:
-    resolution: {integrity: sha512-+0Pc2fxpwKL4u4oLmdKBw8XSwUceFbXbKEHvFOlsl/MGB1OVNic4uBlAPmEHGXYgoJIq+b63xHbc/aJMG0AVkA==}
-    peerDependencies:
-      react: '>=16.13.1'
-
   react-imask@7.6.1:
     resolution: {integrity: sha512-vLNfzcCz62Yzx/GRGh5tiCph9Gbh2cZu+Tz8OiO5it2eNuuhpA0DWhhSlOtVtSJ80+Bx+vFK5De8eQ9AmbkXzA==}
     engines: {npm: '>=4.0.0'}
@@ -2070,6 +2459,13 @@ packages:
     resolution: {integrity: sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==}
     engines: {node: '>=0.10.0'}
 
+  read-cache@1.0.2:
+    resolution: {integrity: sha512-/peqiBB/n07gQGLsWaHho3WfvUyRscw0gYTsEFMhrIe/nWLkYaf5SbKYjGYqtRV3aPwykJgF2VEMo1ac4bnsGA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
   readdirp@5.1.1:
     resolution: {integrity: sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==}
     engines: {node: '>= 20.19.0'}
@@ -2152,6 +2548,15 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  resolve@1.22.13:
+    resolution: {integrity: sha512-Dj/cW9zBV2aRj6XzCxuGIs3ESZKv02jixne3q6jFZYZ3/Tg09gHHviSMDL4kObh9pqSahdRHEnDoaP2gn8YLhA==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
   rolldown@1.2.12:
     resolution: {integrity: sha512-8wafseiaG80xmXSfqidUNqZcylTlhmPZZt+za2m+js2sFZ8dTNlhIOV2WcbIPx2hgwPBJpEUGFAMZ9bgBBLTSQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2170,6 +2575,9 @@ packages:
       typescript:
         optional: true
 
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
@@ -2315,9 +2723,6 @@ packages:
     resolution: {integrity: sha512-OcRW72ngQvc+MSVWBRIovC/BTW589iUE/Vxav7VeM4RcY9MUjqB+IR6ILG1k9nuW6LiG/nct9uma4/MBtnZbmQ==}
     engines: {node: '>=20'}
 
-  signature_pad@5.1.4:
-    resolution: {integrity: sha512-q0wO5a+U+AWPVcVmiNXz7FY4Ad1QiE8wto/3Yn41WVqepoVVYMvkb1CTokaWPUUAHWDLLabH3/acODeWM9jCrg==}
-
   source-map-js@1.2.2:
     resolution: {integrity: sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==}
     engines: {node: '>=0.10.0'}
@@ -2345,10 +2750,19 @@ packages:
   style-to-object@1.0.14:
     resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
   supports-color@8.1.1:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
 
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
   sync-child-process@1.0.2:
     resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==}
     engines: {node: '>=16.0.0'}
@@ -2360,6 +2774,25 @@ packages:
   tabbable@6.5.0:
     resolution: {integrity: sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==}
 
+  tailwindcss@3.4.19:
+    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  tailwindcss@4.3.3:
+    resolution: {integrity: sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
   tinybench@6.2.0:
     resolution: {integrity: sha512-78U2TlB2CnVenajOFzf3BKSm0J6oz5L0NV7g32LCPccvYc0lbWvys4d3uUUCS2B1N8PAf2+aekR8i1KbC3HO7Q==}
     engines: {node: '>=20.0.0'}
@@ -2379,6 +2812,10 @@ packages:
     resolution: {integrity: sha512-QwBER5KMR86IIjpIiO7H/Z3IMJPsZ1A6RKPAqzTTgOyUQUSt9FdnKcqhTaJmkY6HVrgouZHZR0ncK5QxvmnQeg==}
     hasBin: true
 
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
   toggle-selection@1.0.6:
     resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
 
@@ -2396,6 +2833,9 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -2438,6 +2878,9 @@ packages:
   unist-util-visit@5.1.0:
     resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   varint@6.0.0:
     resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
 
@@ -2593,6 +3036,8 @@ snapshots:
 
   '@adobe/css-tools@4.5.0': {}
 
+  '@alloc/quick-lru@5.3.0': {}
+
   '@asamuzakjp/css-color@7.1.2':
     dependencies:
       '@csstools/css-calc': 3.4.2(@csstools/css-parser-algorithms@4.0.2(@csstools/css-tokenizer@4.0.2))(@csstools/css-tokenizer@4.0.2)
@@ -2907,11 +3352,24 @@ snapshots:
 
   '@fontsource-variable/inter@5.3.0': {}
 
+  '@formatjs/fast-memoize@3.1.7': {}
+
+  '@formatjs/icu-messageformat-parser@3.5.21':
+    dependencies:
+      '@formatjs/icu-skeleton-parser': 2.1.12
+
+  '@formatjs/icu-skeleton-parser@2.1.12': {}
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.6.0
       '@jridgewell/trace-mapping': 0.3.31
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/sourcemap-codec@1.6.0': {}
@@ -2964,6 +3422,18 @@ snapshots:
       '@tybys/wasm-util': 0.10.4
     optional: true
 
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.3
+
   '@oxc-project/types@0.152.0': {}
 
   '@parcel/watcher-android-arm64@2.6.0':
@@ -3094,7 +3564,7 @@ snapshots:
     dependencies:
       deepmerge: 4.3.1
       loader-utils: 2.0.4
-      postcss: 8.5.28
+      postcss: 8.5.29
       reduce-configs: 2.0.1
       sass-embedded: 1.105.1
     optionalDependencies:
@@ -3298,6 +3768,75 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tailwindcss/node@4.3.3':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.26.0
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.2
+      tailwindcss: 4.3.3
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.3':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-x64': 4.3.3
+      '@tailwindcss/oxide-freebsd-x64': 4.3.3
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.3
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.3
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.3
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.3
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.3
+
+  '@tailwindcss/postcss@4.3.3':
+    dependencies:
+      '@alloc/quick-lru': 5.3.0
+      '@tailwindcss/node': 4.3.3
+      '@tailwindcss/oxide': 4.3.3
+      postcss: 8.5.28
+      tailwindcss: 4.3.3
+
   '@tanstack/react-table@8.21.3(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
     dependencies:
       '@tanstack/table-core': 8.21.3
@@ -3325,7 +3864,7 @@ snapshots:
       picocolors: 1.1.1
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@7.0.1(@testing-library/dom@10.4.2)(vitest@5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1)))':
+  '@testing-library/jest-dom@7.0.1(@testing-library/dom@10.4.2)(vitest@5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1)))':
     dependencies:
       '@adobe/css-tools': 4.5.0
       '@testing-library/dom': 10.4.2
@@ -3335,7 +3874,7 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
     optionalDependencies:
-      vitest: 5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1))
+      vitest: 5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1))
 
   '@testing-library/react@16.3.3(@testing-library/dom@10.4.2)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
     dependencies:
@@ -3470,14 +4009,14 @@ snapshots:
       react: 19.3.0
       unhead: 2.1.17
 
-  '@vitest/mocker@5.0.3(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1))':
+  '@vitest/mocker@5.0.3(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1))':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       '@vitest/spy': 5.0.3
       estree-walker: 3.0.3
       magic-string: 1.4.2
     optionalDependencies:
-      vite: 8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1)
+      vite: 8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1)
 
   '@vitest/spy@5.0.3': {}
 
@@ -3491,6 +4030,15 @@ snapshots:
 
   ansi-styles@5.2.0: {}
 
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.2
+
+  arg@5.0.2: {}
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -3511,8 +4059,16 @@ snapshots:
 
   big.js@5.2.2: {}
 
+  binary-extensions@2.3.0: {}
+
   body-scroll-lock@4.0.0-beta.0: {}
 
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  camelcase-css@2.0.1: {}
+
   ccount@2.0.1: {}
 
   chai@6.3.0: {}
@@ -3525,6 +4081,18 @@ snapshots:
 
   character-reference-invalid@2.0.1: {}
 
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   chokidar@5.0.0:
     dependencies:
       readdirp: 5.1.1
@@ -3538,6 +4106,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@4.1.1: {}
+
   compute-scroll-into-view@3.1.1: {}
 
   cookie@1.1.1: {}
@@ -3555,6 +4125,8 @@ snapshots:
 
   css.escape@1.5.1: {}
 
+  cssesc@3.0.0: {}
+
   csstype@3.2.3: {}
 
   data-urls@7.0.0:
@@ -3584,16 +4156,27 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  didyoumean@1.2.2: {}
+
+  dlv@1.1.3: {}
+
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
 
   emojis-list@3.0.0: {}
 
+  enhanced-resolve@5.26.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
   entities@6.0.1: {}
 
   entities@8.1.0: {}
 
+  es-errors@1.3.0: {}
+
   es-module-lexer@2.3.2: {}
 
   esast-util-from-estree@2.0.0:
@@ -3678,19 +4261,51 @@ snapshots:
 
   extend@3.0.2: {}
 
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fastq@1.20.3:
+    dependencies:
+      reusify: 1.1.0
+
   fdir@6.5.0(picomatch@4.0.7):
     optionalDependencies:
       picomatch: 4.0.7
 
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
   flexsearch@0.8.212: {}
 
   fsevents@2.3.3:
     optional: true
 
+  function-bind@1.1.2: {}
+
   get-east-asian-width@1.7.0: {}
 
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  graceful-fs@4.2.11: {}
+
   has-flag@4.0.0: {}
 
+  hasown@2.0.4:
+    dependencies:
+      function-bind: 1.1.2
+
   hast-util-from-parse5@8.0.3:
     dependencies:
       '@types/hast': 3.0.5
@@ -3831,6 +4446,11 @@ snapshots:
 
   inline-style-parser@0.2.7: {}
 
+  intl-messageformat@12.1.3:
+    dependencies:
+      '@formatjs/fast-memoize': 3.1.7
+      '@formatjs/icu-messageformat-parser': 3.5.21
+
   is-absolute-url@4.0.1: {}
 
   is-alphabetical@2.0.1: {}
@@ -3840,22 +4460,34 @@ snapshots:
       is-alphabetical: 2.0.1
       is-decimal: 2.0.1
 
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.17.0:
+    dependencies:
+      hasown: 2.0.4
+
   is-decimal@2.0.1: {}
 
-  is-extglob@2.1.1:
-    optional: true
+  is-extglob@2.1.1: {}
 
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
-    optional: true
 
   is-hexadecimal@2.0.1: {}
 
+  is-number@7.0.0: {}
+
   is-plain-obj@4.1.0: {}
 
   is-potential-custom-element-name@1.0.1: {}
 
+  jiti@1.21.7: {}
+
+  jiti@2.7.0: {}
+
   js-tokens@4.0.0: {}
 
   jsdom@30.1.1:
@@ -3887,39 +4519,88 @@ snapshots:
 
   json5@2.2.3: {}
 
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
   lightningcss-android-arm64@1.33.0:
     optional: true
 
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
   lightningcss-darwin-arm64@1.33.0:
     optional: true
 
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
   lightningcss-darwin-x64@1.33.0:
     optional: true
 
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
   lightningcss-freebsd-x64@1.33.0:
     optional: true
 
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
   lightningcss-linux-arm-gnueabihf@1.33.0:
     optional: true
 
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
   lightningcss-linux-arm64-gnu@1.33.0:
     optional: true
 
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
   lightningcss-linux-arm64-musl@1.33.0:
     optional: true
 
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
   lightningcss-linux-x64-gnu@1.33.0:
     optional: true
 
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
   lightningcss-linux-x64-musl@1.33.0:
     optional: true
 
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
   lightningcss-win32-arm64-msvc@1.33.0:
     optional: true
 
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
   lightningcss-win32-x64-msvc@1.33.0:
     optional: true
 
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
   lightningcss@1.33.0:
     dependencies:
       detect-libc: 2.1.2
@@ -3936,6 +4617,10 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.33.0
       lightningcss-win32-x64-msvc: 1.33.0
 
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
   loader-utils@2.0.4:
     dependencies:
       big.js: 5.2.2
@@ -3958,6 +4643,10 @@ snapshots:
 
   lz-string@1.5.0: {}
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
+
   magic-string@1.4.2:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.6.0
@@ -4157,6 +4846,8 @@ snapshots:
 
   medium-zoom@1.1.0: {}
 
+  merge2@1.4.1: {}
+
   micromark-core-commonmark@2.0.4:
     dependencies:
       decode-named-character-reference: 1.3.0
@@ -4459,19 +5150,34 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.2
+
   min-indent@1.0.1: {}
 
   ms@2.1.3: {}
 
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
   nanoid@3.3.19: {}
 
   node-addon-api@7.1.1:
     optional: true
 
+  normalize-path@3.0.0: {}
+
   nprogress@0.2.0: {}
 
   object-assign@4.1.1: {}
 
+  object-hash@3.0.0: {}
+
   obug@2.2.1: {}
 
   oniguruma-parser@0.12.2: {}
@@ -4502,22 +5208,65 @@ snapshots:
     dependencies:
       entities: 8.1.0
 
+  path-parse@1.0.7: {}
+
   picocolors@1.1.1: {}
 
+  picomatch@2.3.2: {}
+
   picomatch@4.0.7: {}
 
+  pirates@4.0.7: {}
+
   playwright-core@1.63.0: {}
 
   playwright@1.63.0:
     dependencies:
       playwright-core: 1.63.0
 
+  postcss-import@15.1.0(postcss@8.5.29):
+    dependencies:
+      postcss: 8.5.29
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.2
+      resolve: 1.22.13
+
+  postcss-js@4.1.0(postcss@8.5.29):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.29
+
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.29):
+    dependencies:
+      lilconfig: 3.1.3
+    optionalDependencies:
+      jiti: 1.21.7
+      postcss: 8.5.29
+
+  postcss-nested@6.2.0(postcss@8.5.29):
+    dependencies:
+      postcss: 8.5.29
+      postcss-selector-parser: 6.1.4
+
+  postcss-selector-parser@6.1.4:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
   postcss@8.5.28:
     dependencies:
       nanoid: 3.3.19
       picocolors: 1.1.1
       source-map-js: 1.2.2
 
+  postcss@8.5.29:
+    dependencies:
+      nanoid: 3.3.19
+      picocolors: 1.1.1
+      source-map-js: 1.2.2
+
   prettier@3.9.9: {}
 
   pretty-format@27.5.1:
@@ -4540,15 +5289,13 @@ snapshots:
     dependencies:
       react: 19.3.0
 
+  queue-microtask@1.2.3: {}
+
   react-dom@19.3.0(react@19.3.0):
     dependencies:
       react: 19.3.0
       scheduler: 0.28.0
 
-  react-image-crop@11.1.2(react@19.3.0):
-    dependencies:
-      react: 19.3.0
-
   react-imask@7.6.1(react@19.3.0):
     dependencies:
       imask: 7.6.1
@@ -4589,6 +5336,12 @@ snapshots:
 
   react@19.3.0: {}
 
+  read-cache@1.0.2: {}
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.2
+
   readdirp@5.1.1:
     optional: true
 
@@ -4727,6 +5480,15 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  resolve@1.22.13:
+    dependencies:
+      es-errors: 1.3.0
+      is-core-module: 2.17.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  reusify@1.1.0: {}
+
   rolldown@1.2.12:
     dependencies:
       '@oxc-project/types': 0.152.0
@@ -4755,6 +5517,10 @@ snapshots:
     optionalDependencies:
       typescript: 7.0.2
 
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
   rxjs@7.8.2:
     dependencies:
       tslib: 2.8.1
@@ -4880,8 +5646,6 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.5
 
-  signature_pad@5.1.4: {}
-
   source-map-js@1.2.2: {}
 
   source-map@0.7.6: {}
@@ -4907,10 +5671,22 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.17
+      ts-interface-checker: 0.1.13
+
   supports-color@8.1.1:
     dependencies:
       has-flag: 4.0.0
 
+  supports-preserve-symlinks-flag@1.0.0: {}
+
   sync-child-process@1.0.2:
     dependencies:
       sync-message-port: 1.2.0
@@ -4919,6 +5695,46 @@ snapshots:
 
   tabbable@6.5.0: {}
 
+  tailwindcss@3.4.19:
+    dependencies:
+      '@alloc/quick-lru': 5.3.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.29
+      postcss-import: 15.1.0(postcss@8.5.29)
+      postcss-js: 4.1.0(postcss@8.5.29)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.29)
+      postcss-nested: 6.2.0(postcss@8.5.29)
+      postcss-selector-parser: 6.1.4
+      resolve: 1.22.13
+      sucrase: 3.35.1
+    transitivePeerDependencies:
+      - tsx
+      - yaml
+
+  tailwindcss@4.3.3: {}
+
+  tapable@2.3.3: {}
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
   tinybench@6.2.0: {}
 
   tinyexec@1.3.1: {}
@@ -4934,6 +5750,10 @@ snapshots:
     dependencies:
       tldts-core: 7.4.16
 
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
   toggle-selection@1.0.6: {}
 
   tough-cookie@6.0.2:
@@ -4948,6 +5768,8 @@ snapshots:
 
   trough@2.2.0: {}
 
+  ts-interface-checker@0.1.13: {}
+
   tslib@2.8.1: {}
 
   typescript@7.0.2:
@@ -5022,6 +5844,8 @@ snapshots:
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
 
+  util-deprecate@1.0.2: {}
+
   varint@6.0.0: {}
 
   vfile-location@5.0.3:
@@ -5039,7 +5863,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1):
+  vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1):
     dependencies:
       lightningcss: 1.33.0
       picomatch: 4.0.7
@@ -5050,13 +5874,14 @@ snapshots:
       '@types/node': 26.6.4
       esbuild: 0.28.2
       fsevents: 2.3.3
+      jiti: 2.7.0
       sass: 1.105.1
       sass-embedded: 1.105.1
 
-  vitest@5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1)):
+  vitest@5.0.3(@types/node@26.6.4)(jsdom@30.1.1)(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1)):
     dependencies:
       '@types/chai': 5.2.3
-      '@vitest/mocker': 5.0.3(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1))
+      '@vitest/mocker': 5.0.3(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1))
       chai: 6.3.0
       es-module-lexer: 2.3.2
       expect-type: 1.4.0
@@ -5067,7 +5892,7 @@ snapshots:
       tinybench: 6.2.0
       tinyexec: 1.3.1
       tinyglobby: 0.2.17
-      vite: 8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(sass-embedded@1.105.1)(sass@1.105.1)
+      vite: 8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(sass-embedded@1.105.1)(sass@1.105.1)
       why-is-node-running: 3.2.1
     optionalDependencies:
       '@types/node': 26.6.4

From 861521fa293b3bc76b4cb62ecea96688e0c3c071 Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 05:27:10 +0800
Subject: [PATCH 04/13] docs: refresh bilingual guides, examples and theme
 tooling

---
 .gitignore                                    |   1 +
 AGENTS.md                                     |   6 +-
 DESIGN-REFRESH.md                             |   2 +-
 DESIGN-STANDARDS.md                           |  32 +-
 DEVELOPMENT.md                                |   6 +-
 README.en-US.md                               | 121 +++++
 README.md                                     | 231 ++++-----
 apps/docs/AGENTS.md                           |  11 +
 apps/docs/EXAMPLE-WRITING.md                  |  46 ++
 apps/docs/MAINTENANCE.md                      |  90 ++++
 apps/docs/README.md                           | 132 -----
 apps/docs/docs/api/component-defaults.mdx     | 151 ++++++
 apps/docs/docs/api/index.mdx                  |  14 +
 apps/docs/docs/api/popup-options.mdx          |  15 +
 apps/docs/docs/api/theme-tokens.mdx           |  97 ++++
 apps/docs/docs/api/translations.mdx           |  98 ++++
 apps/docs/docs/changelog.md                   |   3 +-
 apps/docs/docs/components/auto-complete.mdx   |  14 +-
 apps/docs/docs/components/button.mdx          |   2 +-
 apps/docs/docs/components/calendar.mdx        |   8 +-
 apps/docs/docs/components/card.mdx            |  87 +++-
 apps/docs/docs/components/cascader.mdx        |  18 +-
 apps/docs/docs/components/checkbox.mdx        |   2 +-
 apps/docs/docs/components/color-picker.mdx    |   4 +-
 apps/docs/docs/components/command-palette.mdx |   4 +-
 apps/docs/docs/components/config-provider.mdx | 355 +++++++------
 apps/docs/docs/components/date-picker.mdx     |   4 +-
 .../docs/components/date-range-picker.mdx     |   2 +-
 .../docs/docs/components/date-time-picker.mdx |   4 +-
 apps/docs/docs/components/drawer.mdx          |   4 +-
 apps/docs/docs/components/dropdown.mdx        |   4 +-
 apps/docs/docs/components/error-boundary.mdx  |   4 +-
 apps/docs/docs/components/file-list.mdx       |  74 ++-
 apps/docs/docs/components/flex.mdx            |  52 ++
 apps/docs/docs/components/float-button.mdx    |   3 +-
 apps/docs/docs/components/form.mdx            |  14 +-
 apps/docs/docs/components/grid.mdx            |   4 +-
 apps/docs/docs/components/icons.mdx           |  42 ++
 apps/docs/docs/components/image-cropper.mdx   |  80 ---
 apps/docs/docs/components/input-mask.mdx      |   4 +-
 apps/docs/docs/components/input-number.mdx    |   4 +-
 apps/docs/docs/components/input-otp.mdx       |   4 +-
 apps/docs/docs/components/input.mdx           |  10 +-
 apps/docs/docs/components/layout.mdx          |   8 +-
 apps/docs/docs/components/loading-bar.mdx     |   2 +-
 apps/docs/docs/components/masonry.mdx         |   4 +-
 apps/docs/docs/components/menu.mdx            |   4 +-
 apps/docs/docs/components/message.mdx         |   3 +-
 apps/docs/docs/components/modal.mdx           |  16 +-
 apps/docs/docs/components/notification.mdx    |   2 +-
 apps/docs/docs/components/pagination.mdx      |  79 ++-
 apps/docs/docs/components/popconfirm.mdx      |   4 +-
 apps/docs/docs/components/popover.mdx         |   2 +-
 apps/docs/docs/components/qr-code.mdx         |   2 +-
 apps/docs/docs/components/radio.mdx           |   2 +-
 apps/docs/docs/components/rate.mdx            |   6 +-
 apps/docs/docs/components/result.mdx          |  13 +-
 apps/docs/docs/components/segmented.mdx       |   4 +-
 apps/docs/docs/components/select.mdx          |  38 +-
 apps/docs/docs/components/signature-pad.mdx   |  84 ----
 apps/docs/docs/components/splitter.mdx        |   4 +-
 apps/docs/docs/components/steps.mdx           |   4 +-
 apps/docs/docs/components/switch.mdx          |   2 +-
 apps/docs/docs/components/table.mdx           |  68 ++-
 apps/docs/docs/components/tabs.mdx            |  22 +-
 apps/docs/docs/components/tag.mdx             |  22 +-
 apps/docs/docs/components/textarea.mdx        |   4 +-
 apps/docs/docs/components/time-picker.mdx     |   6 +-
 .../docs/components/time-range-picker.mdx     |   6 +-
 apps/docs/docs/components/timeline.mdx        |   4 +-
 apps/docs/docs/components/tour.mdx            |   6 +-
 apps/docs/docs/components/transfer.mdx        |   4 +-
 apps/docs/docs/components/tree-select.mdx     |  25 +-
 apps/docs/docs/components/tree.mdx            |   8 +-
 apps/docs/docs/en/api/component-defaults.mdx  | 151 ++++++
 apps/docs/docs/en/api/index.mdx               |  14 +
 apps/docs/docs/en/api/popup-options.mdx       |  15 +
 apps/docs/docs/en/api/theme-tokens.mdx        |  97 ++++
 apps/docs/docs/en/api/translations.mdx        |  98 ++++
 apps/docs/docs/en/changelog.md                |   3 +-
 .../docs/docs/en/components/auto-complete.mdx |  14 +-
 apps/docs/docs/en/components/calendar.mdx     |   8 +-
 apps/docs/docs/en/components/card.mdx         |  91 +++-
 apps/docs/docs/en/components/cascader.mdx     |  18 +-
 apps/docs/docs/en/components/checkbox.mdx     |   2 +-
 apps/docs/docs/en/components/color-picker.mdx |   4 +-
 .../docs/en/components/command-palette.mdx    |   4 +-
 .../docs/en/components/config-provider.mdx    | 351 +++++++------
 apps/docs/docs/en/components/date-picker.mdx  |   4 +-
 .../docs/en/components/date-range-picker.mdx  |   2 +-
 .../docs/en/components/date-time-picker.mdx   |   4 +-
 apps/docs/docs/en/components/drawer.mdx       |   4 +-
 apps/docs/docs/en/components/dropdown.mdx     |   4 +-
 .../docs/en/components/error-boundary.mdx     |   4 +-
 apps/docs/docs/en/components/file-list.mdx    |  74 ++-
 apps/docs/docs/en/components/flex.mdx         |  52 ++
 apps/docs/docs/en/components/float-button.mdx |   3 +-
 apps/docs/docs/en/components/form.mdx         |  14 +-
 apps/docs/docs/en/components/grid.mdx         |   4 +-
 apps/docs/docs/en/components/icons.mdx        |  42 ++
 .../docs/docs/en/components/image-cropper.mdx |  80 ---
 apps/docs/docs/en/components/input-mask.mdx   |   4 +-
 apps/docs/docs/en/components/input-number.mdx |   4 +-
 apps/docs/docs/en/components/input-otp.mdx    |   4 +-
 apps/docs/docs/en/components/input.mdx        |  10 +-
 apps/docs/docs/en/components/layout.mdx       |   8 +-
 apps/docs/docs/en/components/loading-bar.mdx  |   2 +-
 apps/docs/docs/en/components/masonry.mdx      |   4 +-
 apps/docs/docs/en/components/menu.mdx         |   4 +-
 apps/docs/docs/en/components/message.mdx      |   3 +-
 apps/docs/docs/en/components/modal.mdx        |  16 +-
 apps/docs/docs/en/components/notification.mdx |   2 +-
 apps/docs/docs/en/components/pagination.mdx   |  83 +++-
 apps/docs/docs/en/components/popconfirm.mdx   |   4 +-
 apps/docs/docs/en/components/popover.mdx      |   2 +-
 apps/docs/docs/en/components/qr-code.mdx      |   2 +-
 apps/docs/docs/en/components/radio.mdx        |   2 +-
 apps/docs/docs/en/components/rate.mdx         |   6 +-
 apps/docs/docs/en/components/result.mdx       |  13 +-
 apps/docs/docs/en/components/segmented.mdx    |   4 +-
 apps/docs/docs/en/components/select.mdx       |  36 +-
 .../docs/docs/en/components/signature-pad.mdx |  84 ----
 apps/docs/docs/en/components/splitter.mdx     |   4 +-
 apps/docs/docs/en/components/steps.mdx        |   4 +-
 apps/docs/docs/en/components/switch.mdx       |   2 +-
 apps/docs/docs/en/components/table.mdx        |  68 ++-
 apps/docs/docs/en/components/tabs.mdx         |  22 +-
 apps/docs/docs/en/components/tag.mdx          |  22 +-
 apps/docs/docs/en/components/textarea.mdx     |   4 +-
 apps/docs/docs/en/components/time-picker.mdx  |   6 +-
 .../docs/en/components/time-range-picker.mdx  |   6 +-
 apps/docs/docs/en/components/timeline.mdx     |   4 +-
 apps/docs/docs/en/components/tour.mdx         |   6 +-
 apps/docs/docs/en/components/transfer.mdx     |   4 +-
 apps/docs/docs/en/components/tree-select.mdx  |  25 +-
 apps/docs/docs/en/components/tree.mdx         |   8 +-
 apps/docs/docs/en/guide/accessibility.mdx     |  21 -
 apps/docs/docs/en/guide/compatibility.mdx     |  19 +-
 apps/docs/docs/en/guide/control-contracts.mdx |  59 ---
 apps/docs/docs/en/guide/design-resources.mdx  |  17 -
 apps/docs/docs/en/guide/design-standards.mdx  |  21 +-
 apps/docs/docs/en/guide/getting-started.mdx   |  35 +-
 apps/docs/docs/en/guide/icons.mdx             |  25 -
 .../docs/en/guide/internationalization.mdx    |  29 ++
 apps/docs/docs/en/guide/introduction.mdx      | 100 +++-
 apps/docs/docs/en/guide/scenarios.mdx         |  57 ---
 apps/docs/docs/en/guide/ssr.mdx               | 164 ++----
 apps/docs/docs/en/guide/tailwindcss.mdx       | 158 ++++++
 apps/docs/docs/en/guide/theming.mdx           | 288 +++++------
 apps/docs/docs/en/guide/workspace.mdx         |  20 +-
 apps/docs/docs/guide/accessibility.mdx        |  21 -
 apps/docs/docs/guide/compatibility.mdx        |  19 +-
 apps/docs/docs/guide/control-contracts.mdx    |  66 ---
 apps/docs/docs/guide/design-resources.mdx     |  17 -
 apps/docs/docs/guide/design-standards.mdx     |  21 +-
 apps/docs/docs/guide/getting-started.mdx      |  35 +-
 apps/docs/docs/guide/icons.mdx                |  29 --
 apps/docs/docs/guide/internationalization.mdx |  29 ++
 apps/docs/docs/guide/introduction.mdx         | 100 +++-
 apps/docs/docs/guide/scenarios.mdx            |  57 ---
 apps/docs/docs/guide/ssr.mdx                  | 166 ++-----
 apps/docs/docs/guide/tailwindcss.mdx          | 158 ++++++
 apps/docs/docs/guide/theming.mdx              | 292 +++++------
 apps/docs/docs/guide/workspace.mdx            |  20 +-
 apps/docs/docs/public/browsers/LICENSE.txt    |  19 +
 apps/docs/docs/public/browsers/SOURCES.txt    |  12 +
 apps/docs/docs/public/browsers/chrome.svg     |   1 +
 apps/docs/docs/public/browsers/edge.svg       |   1 +
 apps/docs/docs/public/browsers/firefox.svg    |   1 +
 apps/docs/docs/public/browsers/safari.svg     |   1 +
 .../docs/docs/public/components/file-list.svg |   2 +-
 apps/docs/docs/public/components/flex.svg     |  12 +
 .../docs/public/components/image-cropper.svg  |   1 -
 .../docs/public/components/pagination.svg     |   2 +-
 .../docs/public/components/signature-pad.svg  |   1 -
 apps/docs/docs/public/components/tag.svg      |   2 +-
 .../public/design/leaf-dark-components.svg    |   2 +-
 .../public/design/leaf-dark-foundations.svg   |   2 +-
 .../docs/public/design/leaf-figma-plugin.zip  | Bin 35062 -> 35231 bytes
 .../public/design/leaf-light-components.svg   |   2 +-
 .../public/design/leaf-light-foundations.svg  |   2 +-
 .../public/design/leaf.tokens-studio.json     |  16 +-
 apps/docs/docs/public/design/leaf.tokens.json |  26 +-
 .../package-managers/LICENSE.devicon.txt      |  20 +
 .../docs/public/package-managers/README.txt   |   7 +
 .../docs/docs/public/package-managers/bun.svg |   1 +
 .../docs/docs/public/package-managers/npm.svg |   1 +
 .../docs/public/package-managers/pnpm.svg     |   1 +
 .../docs/public/package-managers/yarn.svg     |   1 +
 apps/docs/package.json                        |  10 +-
 apps/docs/rspress.config.ts                   |  79 ++-
 apps/docs/scripts/api-type-display.d.mts      |   1 +
 apps/docs/scripts/api-type-display.mjs        |  66 +++
 apps/docs/scripts/component-metadata.mjs      |  33 +-
 apps/docs/scripts/export-ai-docs.mjs          |  39 +-
 .../scripts/generate-extension-thumbnails.mjs |  34 +-
 .../generate-foundation-thumbnails.mjs        |  14 +-
 apps/docs/scripts/sync-component-api.mjs      |  57 ++-
 apps/docs/scripts/sync-locales.mjs            |  17 +
 apps/docs/scripts/tailwind.test.mjs           | 189 +++++++
 apps/docs/scripts/versioned-docs.test.mjs     | 215 +++++++-
 apps/docs/src/components/component-catalog.ts |  27 +-
 .../src/components/component-example.scss     |  31 +-
 .../docs/src/components/component-example.tsx |  22 +-
 .../docs/src/components/component-filter.scss |  11 +
 apps/docs/src/components/component-filter.tsx |  38 ++
 .../src/components/component-overview.scss    |   9 +-
 .../src/components/component-overview.tsx     |  47 +-
 .../src/components/component-thumbnails.ts    | 105 ++++
 apps/docs/src/components/docs-collapse.tsx    |  15 +
 apps/docs/src/components/docs-sidebar.scss    |  35 ++
 apps/docs/src/components/docs-sidebar.tsx     |  65 +++
 apps/docs/src/components/docs-theme.tsx       | 108 ++++
 apps/docs/src/components/en-form-examples.tsx |   1 -
 apps/docs/src/components/form-examples.tsx    |   1 -
 apps/docs/src/components/home-showcase.scss   | 123 -----
 apps/docs/src/components/home-showcase.tsx    | 146 +-----
 apps/docs/src/components/home.tsx             |  79 ++-
 apps/docs/src/components/introduction.scss    | 117 +++++
 apps/docs/src/components/introduction.tsx     | 126 +++++
 apps/docs/src/components/package-install.scss | 118 +++++
 apps/docs/src/components/package-install.tsx  | 118 +++++
 .../src/components/theme-color-switcher.tsx   |  45 ++
 apps/docs/src/components/theme-playground.tsx |   9 +-
 apps/docs/src/examples/alert/basic.tsx        |   2 +-
 apps/docs/src/examples/alert/neutral.tsx      |   2 +-
 .../docs/src/examples/auto-complete/basic.tsx |  20 +-
 .../src/examples/auto-complete/search.tsx     |  13 +-
 apps/docs/src/examples/avatar/basic.tsx       |  30 +-
 apps/docs/src/examples/avatar/fallback.tsx    |  18 +-
 apps/docs/src/examples/avatar/image.tsx       |  18 +-
 apps/docs/src/examples/badge/basic.tsx        |  14 +-
 apps/docs/src/examples/breadcrumb/basic.tsx   |   5 +-
 apps/docs/src/examples/button/extensions.tsx  |  14 +-
 apps/docs/src/examples/calendar/basic.tsx     |  17 +-
 apps/docs/src/examples/calendar/compact.tsx   |   6 +-
 apps/docs/src/examples/card/basic.tsx         |  53 +-
 apps/docs/src/examples/card/sections.tsx      |  42 +-
 apps/docs/src/examples/card/sizes.tsx         |  19 +
 .../src/examples/card/tabs-with-title.tsx     |  65 +++
 apps/docs/src/examples/card/tabs.tsx          |  35 ++
 apps/docs/src/examples/cascader/basic.tsx     |  21 +-
 .../src/examples/cascader/capabilities.tsx    |  19 +-
 .../docs/src/examples/cascader/controlled.tsx |  13 +-
 .../src/examples/cascader/single-line.tsx     |  30 ++
 apps/docs/src/examples/checkbox/check-all.tsx |  10 +-
 apps/docs/src/examples/checkbox/surfaces.tsx  |   2 +-
 apps/docs/src/examples/collapse/basic.tsx     |  17 +-
 apps/docs/src/examples/color-picker/basic.tsx |   8 +-
 .../examples/color-picker/capabilities.tsx    |  16 +-
 .../src/examples/color-picker/formats.tsx     |  24 +-
 .../src/examples/color-picker/presets.tsx     |  19 +-
 .../src/examples/config-provider/basic.tsx    |  63 +--
 .../src/examples/config-provider/defaults.tsx |  39 ++
 .../src/examples/config-provider/density.tsx  |  63 +--
 .../examples/config-provider/inheritance.tsx  |  28 ++
 .../src/examples/config-provider/locale.tsx   |  32 ++
 .../config-provider/modal-defaults.tsx        |  17 +
 .../src/examples/config-provider/reset.tsx    |  26 +
 .../src/examples/config-provider/sizes.tsx    |  57 +--
 .../examples/config-provider/translations.tsx |  50 ++
 .../config-provider/zh-CN-x-mars.json         |  16 +
 apps/docs/src/examples/date-picker/basic.tsx  |  21 +-
 .../src/examples/date-picker/capabilities.tsx |  18 +-
 .../src/examples/date-picker/controlled.tsx   |  18 +-
 apps/docs/src/examples/date-picker/footer.tsx |   8 +-
 .../src/examples/date-range-picker/basic.tsx  |  17 +-
 .../date-range-picker/capabilities.tsx        |  12 +-
 .../src/examples/date-range-picker/modes.tsx  |  26 +-
 .../src/examples/date-time-picker/basic.tsx   |  21 +-
 .../date-time-picker/capabilities.tsx         |   8 +-
 apps/docs/src/examples/divider/basic.tsx      |   2 +-
 apps/docs/src/examples/drawer/basic.tsx       |   8 +-
 apps/docs/src/examples/dropdown/basic.tsx     |   3 +-
 apps/docs/src/examples/en/alert/basic.tsx     |   2 +-
 .../src/examples/en/auto-complete/basic.tsx   |  20 +-
 .../src/examples/en/auto-complete/search.tsx  |  15 +-
 apps/docs/src/examples/en/avatar/basic.tsx    |  30 +-
 apps/docs/src/examples/en/avatar/fallback.tsx |  18 +-
 apps/docs/src/examples/en/avatar/image.tsx    |  18 +-
 apps/docs/src/examples/en/badge/basic.tsx     |  14 +-
 .../docs/src/examples/en/breadcrumb/basic.tsx |   5 +-
 .../src/examples/en/button/extensions.tsx     |  14 +-
 apps/docs/src/examples/en/calendar/basic.tsx  |  17 +-
 .../docs/src/examples/en/calendar/compact.tsx |   8 +-
 apps/docs/src/examples/en/card/basic.tsx      |  53 +-
 apps/docs/src/examples/en/card/sections.tsx   |  26 +
 apps/docs/src/examples/en/card/sizes.tsx      |  23 +
 .../src/examples/en/card/tabs-with-title.tsx  |  65 +++
 apps/docs/src/examples/en/card/tabs.tsx       |  35 ++
 apps/docs/src/examples/en/cascader/basic.tsx  |  21 +-
 .../src/examples/en/cascader/controlled.tsx   |  13 +-
 .../src/examples/en/cascader/single-line.tsx  |  30 ++
 .../src/examples/en/checkbox/check-all.tsx    |  10 +-
 apps/docs/src/examples/en/collapse/basic.tsx  |  23 +-
 .../src/examples/en/color-picker/basic.tsx    |   8 +-
 .../src/examples/en/color-picker/formats.tsx  |  24 +-
 .../src/examples/en/color-picker/presets.tsx  |  19 +-
 .../src/examples/en/config-provider/basic.tsx |  63 +--
 .../examples/en/config-provider/defaults.tsx  |  39 ++
 .../examples/en/config-provider/density.tsx   |  41 ++
 .../en/config-provider/inheritance.tsx        |  28 ++
 .../examples/en/config-provider/locale.tsx    |  32 ++
 .../en/config-provider/modal-defaults.tsx     |  18 +
 .../src/examples/en/config-provider/reset.tsx |  26 +
 .../src/examples/en/config-provider/sizes.tsx |  57 +--
 .../en/config-provider/translations.tsx       |  51 ++
 .../src/examples/en/date-picker/basic.tsx     |  21 +-
 .../examples/en/date-picker/controlled.tsx    |  20 +-
 .../src/examples/en/date-picker/footer.tsx    |   8 +-
 .../examples/en/date-range-picker/basic.tsx   |  17 +-
 .../examples/en/date-range-picker/modes.tsx   |  26 +-
 .../examples/en/date-time-picker/basic.tsx    |  21 +-
 apps/docs/src/examples/en/divider/basic.tsx   |   2 +-
 apps/docs/src/examples/en/drawer/basic.tsx    |   8 +-
 apps/docs/src/examples/en/dropdown/basic.tsx  |   3 +-
 .../examples/en/error-boundary/advanced.tsx   |   2 +-
 .../src/examples/en/error-boundary/basic.tsx  |   2 +-
 .../src/examples/en/file-list/advanced.tsx    |   8 +-
 apps/docs/src/examples/en/file-list/basic.tsx |   6 +-
 apps/docs/src/examples/en/file-list/cards.tsx |  26 +
 apps/docs/src/examples/en/file-list/empty.tsx |   9 +
 .../src/examples/en/file-list/picture.tsx     |  27 +
 .../docs/src/examples/en/file-list/states.tsx |  38 ++
 apps/docs/src/examples/en/flex/alignment.tsx  |  16 +
 apps/docs/src/examples/en/flex/basic.tsx      |  11 +
 apps/docs/src/examples/en/form/basic.tsx      |  13 +-
 apps/docs/src/examples/en/form/extensions.tsx |   3 +-
 .../docs/src/examples/en/form/label-width.tsx |   8 +-
 apps/docs/src/examples/en/grid/advanced.tsx   |  47 +-
 apps/docs/src/examples/en/grid/basic.tsx      |  18 +-
 .../src/examples/en/guide/control-sizes.tsx   |  20 +-
 apps/docs/src/examples/en/guide/form.tsx      |  46 +-
 .../src/examples/en/guide/getting-started.tsx |   1 -
 .../examples/en/image-cropper/advanced.tsx    |  20 -
 .../src/examples/en/image-cropper/basic.tsx   |  22 -
 apps/docs/src/examples/en/image/advanced.tsx  |   6 +-
 apps/docs/src/examples/en/image/basic.tsx     |   6 +-
 .../src/examples/en/input-mask/advanced.tsx   |   8 +-
 .../docs/src/examples/en/input-mask/basic.tsx |   8 +-
 .../src/examples/en/input-number/basic.tsx    |   6 +-
 .../src/examples/en/input-otp/advanced.tsx    |  10 +-
 apps/docs/src/examples/en/input-otp/basic.tsx |   8 +-
 apps/docs/src/examples/en/input/basic.tsx     |  26 +-
 apps/docs/src/examples/en/input/clear.tsx     |  18 +-
 .../docs/src/examples/en/input/controlled.tsx |  15 +-
 .../docs/src/examples/en/input/extensions.tsx |   8 +-
 apps/docs/src/examples/en/input/password.tsx  |  26 +-
 apps/docs/src/examples/en/input/states.tsx    |  36 +-
 apps/docs/src/examples/en/layout/advanced.tsx | 101 +---
 apps/docs/src/examples/en/layout/basic.tsx    |  47 +-
 apps/docs/src/examples/en/loading/overlay.tsx |   8 +-
 apps/docs/src/examples/en/loading/sizes.tsx   |  24 +-
 apps/docs/src/examples/en/menu/advanced.tsx   |  19 +-
 apps/docs/src/examples/en/message/basic.tsx   |   6 +-
 apps/docs/src/examples/en/message/shared.tsx  |   6 +-
 .../src/examples/en/modal/description.tsx     |  25 +
 .../docs/src/examples/en/pagination/basic.tsx |  33 +-
 .../src/examples/en/pagination/controlled.tsx |  17 +
 .../docs/src/examples/en/pagination/sizes.tsx |  20 +
 .../src/examples/en/pagination/states.tsx     |  16 +
 apps/docs/src/examples/en/popover/basic.tsx   |   6 +-
 .../src/examples/en/popover/controlled.tsx    |  24 +-
 .../src/examples/en/popover/placements.tsx    |   6 +-
 apps/docs/src/examples/en/progress/basic.tsx  |   8 +-
 .../docs/src/examples/en/progress/circles.tsx |  24 +-
 apps/docs/src/examples/en/progress/states.tsx |  28 +-
 .../docs/src/examples/en/qr-code/advanced.tsx |  18 +-
 .../docs/src/examples/en/radio/controlled.tsx |   6 +-
 apps/docs/src/examples/en/rate/basic.tsx      |   8 +-
 apps/docs/src/examples/en/rate/colors.tsx     |  16 +-
 apps/docs/src/examples/en/rate/states.tsx     |  16 +-
 apps/docs/src/examples/en/result/states.tsx   |   2 +-
 .../src/examples/en/scroll-area/advanced.tsx  |   2 +-
 .../src/examples/en/segmented/advanced.tsx    |   8 +-
 apps/docs/src/examples/en/segmented/basic.tsx |   8 +-
 apps/docs/src/examples/en/select/basic.tsx    |  21 +-
 .../src/examples/en/select/controlled.tsx     |  18 +-
 apps/docs/src/examples/en/select/popup.tsx    |  32 +-
 apps/docs/src/examples/en/select/search.tsx   |  21 +-
 .../src/examples/en/select/single-line.tsx    |  29 ++
 apps/docs/src/examples/en/select/theme.tsx    |  28 --
 .../examples/en/signature-pad/advanced.tsx    |  20 -
 .../src/examples/en/signature-pad/basic.tsx   |  46 --
 apps/docs/src/examples/en/skeleton/basic.tsx  |  16 +-
 apps/docs/src/examples/en/slider/basic.tsx    |  29 +-
 apps/docs/src/examples/en/steps/basic.tsx     |  21 +-
 .../src/examples/en/switch/controlled.tsx     |  12 +-
 apps/docs/src/examples/en/tabs/basic.tsx      |  39 +-
 apps/docs/src/examples/en/tabs/closable.tsx   |  39 +-
 apps/docs/src/examples/en/tabs/extensions.tsx |  39 +-
 apps/docs/src/examples/en/tabs/sizes.tsx      |  34 ++
 apps/docs/src/examples/en/tag/basic.tsx       |  14 +-
 apps/docs/src/examples/en/tag/extensions.tsx  |  17 -
 .../src/examples/en/tailwindcss/basic.tsx     |  14 +
 .../src/examples/en/tailwindcss/theme.tsx     |  26 +
 apps/docs/src/examples/en/textarea/basic.tsx  |  21 +-
 .../src/examples/en/textarea/controlled.tsx   |  20 +-
 .../src/examples/en/theming/appearance.tsx    |  19 +
 apps/docs/src/examples/en/theming/basic.tsx   |   9 +
 apps/docs/src/examples/en/theming/scoped.tsx  |  14 +
 .../src/examples/en/time-picker/basic.tsx     |  21 +-
 .../examples/en/time-picker/controlled.tsx    |  18 +-
 .../examples/en/time-picker/twelve-hours.tsx  |  16 +-
 .../en/time-range-picker/advanced.tsx         |   8 +-
 .../examples/en/time-range-picker/basic.tsx   |   8 +-
 apps/docs/src/examples/en/tooltip/basic.tsx   |   6 +-
 .../src/examples/en/tree-select/basic.tsx     |   8 +-
 .../src/examples/en/tree-select/multiple.tsx  |  21 +-
 .../examples/en/tree-select/single-line.tsx   |  18 +
 .../src/examples/en/tree-select/states.tsx    |  21 +-
 apps/docs/src/examples/en/tree/basic.tsx      |   8 +-
 apps/docs/src/examples/en/tree/checkable.tsx  |   8 +-
 apps/docs/src/examples/en/tree/extensions.tsx |   3 +-
 apps/docs/src/examples/en/tree/search.tsx     |   2 +-
 apps/docs/src/examples/en/upload/advanced.tsx |   9 +-
 apps/docs/src/examples/en/upload/basic.tsx    |   2 +-
 .../src/examples/en/virtual-list/advanced.tsx |   2 +-
 .../src/examples/en/virtual-list/basic.tsx    |   1 -
 .../src/examples/error-boundary/advanced.tsx  |   2 +-
 .../src/examples/error-boundary/basic.tsx     |   2 +-
 apps/docs/src/examples/file-list/advanced.tsx |   8 +-
 apps/docs/src/examples/file-list/basic.tsx    |   6 +-
 apps/docs/src/examples/file-list/cards.tsx    |  17 +
 apps/docs/src/examples/file-list/empty.tsx    |   9 +
 apps/docs/src/examples/file-list/picture.tsx  |  17 +
 apps/docs/src/examples/file-list/states.tsx   |  38 ++
 apps/docs/src/examples/flex/alignment.tsx     |  16 +
 apps/docs/src/examples/flex/basic.tsx         |  11 +
 apps/docs/src/examples/float-button/basic.tsx |  39 +-
 apps/docs/src/examples/form/basic.tsx         |  13 +-
 apps/docs/src/examples/form/extensions.tsx    |   3 +-
 apps/docs/src/examples/form/label-width.tsx   |   8 +-
 apps/docs/src/examples/grid/advanced.tsx      |  47 +-
 apps/docs/src/examples/grid/basic.tsx         |  16 +-
 .../docs/src/examples/guide/control-sizes.tsx |  14 +-
 apps/docs/src/examples/guide/form.tsx         |  44 +-
 .../src/examples/guide/getting-started.tsx    |   1 -
 .../src/examples/image-cropper/advanced.tsx   |  20 -
 .../docs/src/examples/image-cropper/basic.tsx |  22 -
 apps/docs/src/examples/image/advanced.tsx     |   6 +-
 apps/docs/src/examples/image/basic.tsx        |   6 +-
 .../docs/src/examples/input-mask/advanced.tsx |   8 +-
 apps/docs/src/examples/input-mask/basic.tsx   |   8 +-
 apps/docs/src/examples/input-number/basic.tsx |   6 +-
 .../examples/input-number/capabilities.tsx    |   2 +-
 apps/docs/src/examples/input-otp/advanced.tsx |  10 +-
 apps/docs/src/examples/input-otp/basic.tsx    |   8 +-
 apps/docs/src/examples/input/basic.tsx        |  26 +-
 apps/docs/src/examples/input/clear.tsx        |  18 +-
 apps/docs/src/examples/input/controlled.tsx   |  15 +-
 apps/docs/src/examples/input/extensions.tsx   |   8 +-
 apps/docs/src/examples/input/password.tsx     |  26 +-
 apps/docs/src/examples/input/states.tsx       |  36 +-
 apps/docs/src/examples/layout/advanced.tsx    |  99 +---
 apps/docs/src/examples/layout/basic.tsx       |  47 +-
 apps/docs/src/examples/loading/overlay.tsx    |   8 +-
 apps/docs/src/examples/loading/sizes.tsx      |  24 +-
 apps/docs/src/examples/menu/advanced.tsx      |  19 +-
 apps/docs/src/examples/menu/capabilities.tsx  |   9 +-
 apps/docs/src/examples/message/basic.tsx      |   6 +-
 apps/docs/src/examples/message/shared.tsx     |   6 +-
 apps/docs/src/examples/modal/access-scope.tsx | 146 ------
 apps/docs/src/examples/modal/description.tsx  |  25 +
 apps/docs/src/examples/pagination/basic.tsx   |  33 +-
 .../src/examples/pagination/controlled.tsx    |  17 +
 apps/docs/src/examples/pagination/sizes.tsx   |  20 +
 apps/docs/src/examples/pagination/states.tsx  |  16 +
 apps/docs/src/examples/popover/basic.tsx      |   6 +-
 apps/docs/src/examples/popover/controlled.tsx |  24 +-
 apps/docs/src/examples/popover/placements.tsx |   6 +-
 apps/docs/src/examples/progress/basic.tsx     |   8 +-
 .../src/examples/progress/capabilities.tsx    |  20 +-
 apps/docs/src/examples/progress/circles.tsx   |  24 +-
 apps/docs/src/examples/progress/states.tsx    |  28 +-
 apps/docs/src/examples/qr-code/advanced.tsx   |  18 +-
 apps/docs/src/examples/radio/controlled.tsx   |   6 +-
 apps/docs/src/examples/rate/basic.tsx         |   8 +-
 apps/docs/src/examples/rate/colors.tsx        |  14 +-
 apps/docs/src/examples/rate/states.tsx        |  16 +-
 apps/docs/src/examples/result/states.tsx      |   2 +-
 .../src/examples/scenarios/accessibility.tsx  | 172 -------
 apps/docs/src/examples/scenarios/basic.tsx    | 158 ------
 apps/docs/src/examples/scenarios/remote.tsx   |  52 ++
 apps/docs/src/examples/scenarios/schema.tsx   |  15 +-
 .../src/examples/scenarios/validation.tsx     |  58 +++
 .../src/examples/scenarios/workspace.scss     | 113 -----
 .../docs/src/examples/scenarios/workspace.tsx | 466 ------------------
 .../src/examples/scroll-area/advanced.tsx     |   2 +-
 apps/docs/src/examples/scrollbar/basic.tsx    |  10 +-
 apps/docs/src/examples/segmented/advanced.tsx |   8 +-
 apps/docs/src/examples/segmented/basic.tsx    |   8 +-
 apps/docs/src/examples/select/basic.tsx       |  21 +-
 .../docs/src/examples/select/capabilities.tsx |  19 +-
 apps/docs/src/examples/select/controlled.tsx  |  18 +-
 apps/docs/src/examples/select/popup.tsx       |  32 +-
 apps/docs/src/examples/select/search.tsx      |  21 +-
 apps/docs/src/examples/select/single-line.tsx |  29 ++
 apps/docs/src/examples/select/theme.tsx       |  26 -
 .../src/examples/signature-pad/advanced.tsx   |  20 -
 .../docs/src/examples/signature-pad/basic.tsx |  40 --
 apps/docs/src/examples/skeleton/basic.tsx     |  16 +-
 apps/docs/src/examples/slider/basic.tsx       |  29 +-
 .../docs/src/examples/slider/capabilities.tsx |  10 +-
 apps/docs/src/examples/steps/basic.tsx        |  21 +-
 apps/docs/src/examples/steps/capabilities.tsx |  16 +-
 apps/docs/src/examples/switch/controlled.tsx  |  12 +-
 apps/docs/src/examples/table/basic.tsx        |   4 +-
 apps/docs/src/examples/table/data.tsx         |   2 +-
 apps/docs/src/examples/table/reordering.tsx   |   4 +-
 apps/docs/src/examples/tabs/basic.tsx         |  29 +-
 apps/docs/src/examples/tabs/capabilities.tsx  |  20 +-
 apps/docs/src/examples/tabs/closable.tsx      |  39 +-
 apps/docs/src/examples/tabs/extensions.tsx    |  39 +-
 apps/docs/src/examples/tabs/sizes.tsx         |  34 ++
 apps/docs/src/examples/tag/basic.tsx          |  14 +-
 apps/docs/src/examples/tag/extensions.tsx     |  17 -
 apps/docs/src/examples/tailwindcss/basic.tsx  |  14 +
 apps/docs/src/examples/tailwindcss/theme.tsx  |  26 +
 apps/docs/src/examples/textarea/basic.tsx     |  21 +-
 .../docs/src/examples/textarea/controlled.tsx |  20 +-
 apps/docs/src/examples/theming/appearance.tsx |  19 +
 apps/docs/src/examples/theming/basic.tsx      |   9 +
 apps/docs/src/examples/theming/scoped.tsx     |  14 +
 apps/docs/src/examples/time-picker/basic.tsx  |  21 +-
 .../src/examples/time-picker/capabilities.tsx |   6 +-
 .../src/examples/time-picker/controlled.tsx   |  18 +-
 .../src/examples/time-picker/twelve-hours.tsx |  16 +-
 .../examples/time-range-picker/advanced.tsx   |   8 +-
 .../src/examples/time-range-picker/basic.tsx  |   8 +-
 .../time-range-picker/capabilities.tsx        |   8 +-
 apps/docs/src/examples/tooltip/basic.tsx      |   6 +-
 apps/docs/src/examples/tree-select/basic.tsx  |   8 +-
 .../src/examples/tree-select/capabilities.tsx |  10 +-
 .../src/examples/tree-select/multiple.tsx     |  21 +-
 .../src/examples/tree-select/single-line.tsx  |  18 +
 apps/docs/src/examples/tree-select/states.tsx |  21 +-
 apps/docs/src/examples/tree/basic.tsx         |   8 +-
 apps/docs/src/examples/tree/capabilities.tsx  |   6 +-
 apps/docs/src/examples/tree/checkable.tsx     |   8 +-
 apps/docs/src/examples/tree/extensions.tsx    |   3 +-
 apps/docs/src/examples/tree/search.tsx        |   2 +-
 apps/docs/src/examples/upload/advanced.tsx    |   9 +-
 apps/docs/src/examples/upload/basic.tsx       |   2 +-
 .../src/examples/virtual-list/advanced.tsx    |   2 +-
 apps/docs/src/examples/virtual-list/basic.tsx |   1 -
 apps/docs/theme/index.scss                    | 346 +++++++------
 apps/docs/theme/index.tsx                     |  22 +-
 apps/docs/theme/tailwind.css                  |  10 +
 biome.json                                    |  10 +
 design/figma/code.js                          |   4 +-
 design/figma/tokens.js                        |   4 +-
 package.json                                  |   2 +-
 packages/react/DEVELOPMENT.md                 | 103 +++-
 packages/react/FILELIST-REFRESH.md            |  23 +
 packages/react/QUALITY.md                     | 319 ++++++++++++
 packages/react/README.md                      |  17 +-
 557 files changed, 9376 insertions(+), 6796 deletions(-)
 create mode 100644 README.en-US.md
 create mode 100644 apps/docs/AGENTS.md
 create mode 100644 apps/docs/EXAMPLE-WRITING.md
 create mode 100644 apps/docs/MAINTENANCE.md
 delete mode 100644 apps/docs/README.md
 create mode 100644 apps/docs/docs/api/component-defaults.mdx
 create mode 100644 apps/docs/docs/api/index.mdx
 create mode 100644 apps/docs/docs/api/popup-options.mdx
 create mode 100644 apps/docs/docs/api/theme-tokens.mdx
 create mode 100644 apps/docs/docs/api/translations.mdx
 create mode 100644 apps/docs/docs/components/flex.mdx
 create mode 100644 apps/docs/docs/components/icons.mdx
 delete mode 100644 apps/docs/docs/components/image-cropper.mdx
 delete mode 100644 apps/docs/docs/components/signature-pad.mdx
 create mode 100644 apps/docs/docs/en/api/component-defaults.mdx
 create mode 100644 apps/docs/docs/en/api/index.mdx
 create mode 100644 apps/docs/docs/en/api/popup-options.mdx
 create mode 100644 apps/docs/docs/en/api/theme-tokens.mdx
 create mode 100644 apps/docs/docs/en/api/translations.mdx
 create mode 100644 apps/docs/docs/en/components/flex.mdx
 create mode 100644 apps/docs/docs/en/components/icons.mdx
 delete mode 100644 apps/docs/docs/en/components/image-cropper.mdx
 delete mode 100644 apps/docs/docs/en/components/signature-pad.mdx
 delete mode 100644 apps/docs/docs/en/guide/accessibility.mdx
 delete mode 100644 apps/docs/docs/en/guide/control-contracts.mdx
 delete mode 100644 apps/docs/docs/en/guide/design-resources.mdx
 delete mode 100644 apps/docs/docs/en/guide/icons.mdx
 create mode 100644 apps/docs/docs/en/guide/internationalization.mdx
 delete mode 100644 apps/docs/docs/en/guide/scenarios.mdx
 create mode 100644 apps/docs/docs/en/guide/tailwindcss.mdx
 delete mode 100644 apps/docs/docs/guide/accessibility.mdx
 delete mode 100644 apps/docs/docs/guide/control-contracts.mdx
 delete mode 100644 apps/docs/docs/guide/design-resources.mdx
 delete mode 100644 apps/docs/docs/guide/icons.mdx
 create mode 100644 apps/docs/docs/guide/internationalization.mdx
 delete mode 100644 apps/docs/docs/guide/scenarios.mdx
 create mode 100644 apps/docs/docs/guide/tailwindcss.mdx
 create mode 100644 apps/docs/docs/public/browsers/LICENSE.txt
 create mode 100644 apps/docs/docs/public/browsers/SOURCES.txt
 create mode 100644 apps/docs/docs/public/browsers/chrome.svg
 create mode 100644 apps/docs/docs/public/browsers/edge.svg
 create mode 100644 apps/docs/docs/public/browsers/firefox.svg
 create mode 100644 apps/docs/docs/public/browsers/safari.svg
 create mode 100644 apps/docs/docs/public/components/flex.svg
 delete mode 100644 apps/docs/docs/public/components/image-cropper.svg
 delete mode 100644 apps/docs/docs/public/components/signature-pad.svg
 create mode 100644 apps/docs/docs/public/package-managers/LICENSE.devicon.txt
 create mode 100644 apps/docs/docs/public/package-managers/README.txt
 create mode 100644 apps/docs/docs/public/package-managers/bun.svg
 create mode 100644 apps/docs/docs/public/package-managers/npm.svg
 create mode 100644 apps/docs/docs/public/package-managers/pnpm.svg
 create mode 100644 apps/docs/docs/public/package-managers/yarn.svg
 create mode 100644 apps/docs/scripts/api-type-display.d.mts
 create mode 100644 apps/docs/scripts/api-type-display.mjs
 create mode 100644 apps/docs/scripts/sync-locales.mjs
 create mode 100644 apps/docs/scripts/tailwind.test.mjs
 create mode 100644 apps/docs/src/components/component-filter.scss
 create mode 100644 apps/docs/src/components/component-filter.tsx
 create mode 100644 apps/docs/src/components/component-thumbnails.ts
 create mode 100644 apps/docs/src/components/docs-collapse.tsx
 create mode 100644 apps/docs/src/components/docs-sidebar.scss
 create mode 100644 apps/docs/src/components/docs-sidebar.tsx
 create mode 100644 apps/docs/src/components/docs-theme.tsx
 create mode 100644 apps/docs/src/components/introduction.scss
 create mode 100644 apps/docs/src/components/introduction.tsx
 create mode 100644 apps/docs/src/components/package-install.scss
 create mode 100644 apps/docs/src/components/package-install.tsx
 create mode 100644 apps/docs/src/components/theme-color-switcher.tsx
 create mode 100644 apps/docs/src/examples/card/sizes.tsx
 create mode 100644 apps/docs/src/examples/card/tabs-with-title.tsx
 create mode 100644 apps/docs/src/examples/card/tabs.tsx
 create mode 100644 apps/docs/src/examples/cascader/single-line.tsx
 create mode 100644 apps/docs/src/examples/config-provider/defaults.tsx
 create mode 100644 apps/docs/src/examples/config-provider/inheritance.tsx
 create mode 100644 apps/docs/src/examples/config-provider/locale.tsx
 create mode 100644 apps/docs/src/examples/config-provider/modal-defaults.tsx
 create mode 100644 apps/docs/src/examples/config-provider/reset.tsx
 create mode 100644 apps/docs/src/examples/config-provider/translations.tsx
 create mode 100644 apps/docs/src/examples/config-provider/zh-CN-x-mars.json
 create mode 100644 apps/docs/src/examples/en/card/sections.tsx
 create mode 100644 apps/docs/src/examples/en/card/sizes.tsx
 create mode 100644 apps/docs/src/examples/en/card/tabs-with-title.tsx
 create mode 100644 apps/docs/src/examples/en/card/tabs.tsx
 create mode 100644 apps/docs/src/examples/en/cascader/single-line.tsx
 create mode 100644 apps/docs/src/examples/en/config-provider/defaults.tsx
 create mode 100644 apps/docs/src/examples/en/config-provider/density.tsx
 create mode 100644 apps/docs/src/examples/en/config-provider/inheritance.tsx
 create mode 100644 apps/docs/src/examples/en/config-provider/locale.tsx
 create mode 100644 apps/docs/src/examples/en/config-provider/modal-defaults.tsx
 create mode 100644 apps/docs/src/examples/en/config-provider/reset.tsx
 create mode 100644 apps/docs/src/examples/en/config-provider/translations.tsx
 create mode 100644 apps/docs/src/examples/en/file-list/cards.tsx
 create mode 100644 apps/docs/src/examples/en/file-list/empty.tsx
 create mode 100644 apps/docs/src/examples/en/file-list/picture.tsx
 create mode 100644 apps/docs/src/examples/en/file-list/states.tsx
 create mode 100644 apps/docs/src/examples/en/flex/alignment.tsx
 create mode 100644 apps/docs/src/examples/en/flex/basic.tsx
 delete mode 100644 apps/docs/src/examples/en/image-cropper/advanced.tsx
 delete mode 100644 apps/docs/src/examples/en/image-cropper/basic.tsx
 create mode 100644 apps/docs/src/examples/en/modal/description.tsx
 create mode 100644 apps/docs/src/examples/en/pagination/controlled.tsx
 create mode 100644 apps/docs/src/examples/en/pagination/sizes.tsx
 create mode 100644 apps/docs/src/examples/en/pagination/states.tsx
 create mode 100644 apps/docs/src/examples/en/select/single-line.tsx
 delete mode 100644 apps/docs/src/examples/en/select/theme.tsx
 delete mode 100644 apps/docs/src/examples/en/signature-pad/advanced.tsx
 delete mode 100644 apps/docs/src/examples/en/signature-pad/basic.tsx
 create mode 100644 apps/docs/src/examples/en/tabs/sizes.tsx
 delete mode 100644 apps/docs/src/examples/en/tag/extensions.tsx
 create mode 100644 apps/docs/src/examples/en/tailwindcss/basic.tsx
 create mode 100644 apps/docs/src/examples/en/tailwindcss/theme.tsx
 create mode 100644 apps/docs/src/examples/en/theming/appearance.tsx
 create mode 100644 apps/docs/src/examples/en/theming/basic.tsx
 create mode 100644 apps/docs/src/examples/en/theming/scoped.tsx
 create mode 100644 apps/docs/src/examples/en/tree-select/single-line.tsx
 create mode 100644 apps/docs/src/examples/file-list/cards.tsx
 create mode 100644 apps/docs/src/examples/file-list/empty.tsx
 create mode 100644 apps/docs/src/examples/file-list/picture.tsx
 create mode 100644 apps/docs/src/examples/file-list/states.tsx
 create mode 100644 apps/docs/src/examples/flex/alignment.tsx
 create mode 100644 apps/docs/src/examples/flex/basic.tsx
 delete mode 100644 apps/docs/src/examples/image-cropper/advanced.tsx
 delete mode 100644 apps/docs/src/examples/image-cropper/basic.tsx
 delete mode 100644 apps/docs/src/examples/modal/access-scope.tsx
 create mode 100644 apps/docs/src/examples/modal/description.tsx
 create mode 100644 apps/docs/src/examples/pagination/controlled.tsx
 create mode 100644 apps/docs/src/examples/pagination/sizes.tsx
 create mode 100644 apps/docs/src/examples/pagination/states.tsx
 delete mode 100644 apps/docs/src/examples/scenarios/accessibility.tsx
 delete mode 100644 apps/docs/src/examples/scenarios/basic.tsx
 create mode 100644 apps/docs/src/examples/scenarios/remote.tsx
 create mode 100644 apps/docs/src/examples/scenarios/validation.tsx
 delete mode 100644 apps/docs/src/examples/scenarios/workspace.scss
 delete mode 100644 apps/docs/src/examples/scenarios/workspace.tsx
 create mode 100644 apps/docs/src/examples/select/single-line.tsx
 delete mode 100644 apps/docs/src/examples/select/theme.tsx
 delete mode 100644 apps/docs/src/examples/signature-pad/advanced.tsx
 delete mode 100644 apps/docs/src/examples/signature-pad/basic.tsx
 create mode 100644 apps/docs/src/examples/tabs/sizes.tsx
 delete mode 100644 apps/docs/src/examples/tag/extensions.tsx
 create mode 100644 apps/docs/src/examples/tailwindcss/basic.tsx
 create mode 100644 apps/docs/src/examples/tailwindcss/theme.tsx
 create mode 100644 apps/docs/src/examples/theming/appearance.tsx
 create mode 100644 apps/docs/src/examples/theming/basic.tsx
 create mode 100644 apps/docs/src/examples/theming/scoped.tsx
 create mode 100644 apps/docs/src/examples/tree-select/single-line.tsx
 create mode 100644 apps/docs/theme/tailwind.css
 create mode 100644 packages/react/FILELIST-REFRESH.md

diff --git a/.gitignore b/.gitignore
index f83a18a..110a2e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
+apps/docs/docs/public/locales/
 dist/
 doc_build/
 site_build/
diff --git a/AGENTS.md b/AGENTS.md
index 47f5f78..75a5750 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -4,6 +4,8 @@
 
 开始开发、修改使用文档或准备发布前，必须阅读并遵守 [开发、版本与文档同步流程](DEVELOPMENT-WORKFLOW.md)。该文档是分支开发、正式发布、开发文档预览与清理的统一约定。
 
+新增、修改或重构组件前，必须阅读并遵守 [组件编写与开发规则](packages/react/DEVELOPMENT.md) 和 [样式与交互标准](DESIGN-STANDARDS.md)。组件的公共 API、区域默认参数、内部控件、复合组件、表单语义和验证要求均以这些规则为准。
+
 ## 核心规则
 
 - `main` 是稳定发布分支。组件代码和使用文档的改动必须在新分支完成，合并到 `main` 意味着完成一次新版本发布。
@@ -16,8 +18,8 @@
 ## 相关说明
 
 - 项目结构与本地开发：[DEVELOPMENT.md](DEVELOPMENT.md)
-- 组件实现约定：[packages/react/DEVELOPMENT.md](packages/react/DEVELOPMENT.md)
+- 组件编写与开发规则：[packages/react/DEVELOPMENT.md](packages/react/DEVELOPMENT.md)
 - 样式与交互标准：[DESIGN-STANDARDS.md](DESIGN-STANDARDS.md)
 - 发布操作：[packages/react/RELEASING.md](packages/react/RELEASING.md)
-- 文档构建与快照：[apps/docs/README.md](apps/docs/README.md)
+- 文档构建与快照：[apps/docs/AGENTS.md](apps/docs/AGENTS.md)
 - 质量验收：[packages/react/QUALITY.md](packages/react/QUALITY.md)
diff --git a/DESIGN-REFRESH.md b/DESIGN-REFRESH.md
index bfe4cf4..db9d0a1 100644
--- a/DESIGN-REFRESH.md
+++ b/DESIGN-REFRESH.md
@@ -31,7 +31,7 @@ All 83 catalog entries were reviewed. The seven static or direct manipulation pr
 | Button, Input, InputNumber, Textarea, Checkbox, Radio, Switch, Slider, Rate, InputOTP, InputMask, SignaturePad, ImageCropper, ColorPicker | Neutral field hierarchy, focus/hover/press feedback, continuous check/thumb changes, measured textarea growth, stable loading button width/name, validation and tool feedback. Typing, drawing, cropping and pointer dragging remain immediate. |
 | Select, AutoComplete, Mentions, Cascader, TreeSelect, Transfer | Refined trigger and option surfaces, opening origins, chevrons, selection feedback, column/list changes; virtual data windows do not animate as ordinary rows. |
 | Calendar, DatePicker, DateTimePicker, DateRangePicker, TimePicker, TimeRangePicker | Directional view changes, shared calendar surfaces, direct date range selection, simultaneous time endpoints, continuous time selection and keyboard feedback. |
-| Tabs, Segmented, Menu, Steps, Breadcrumb, Pagination, Anchor, BackTop, FloatButton, AppBar | Measured shared selection indicators, retained tab panels, directional content and height transitions, progress rings, navigation hover/press, staggered quick actions. Geometry handles scrolling, RTL, resized text and scaled ancestors. |
+| Tabs, Segmented, Menu, Steps, Breadcrumb, Pagination, Anchor, BackTop, FloatButton, AppBar | Measured shared selection indicators, immediately switched tab panels with retained state, progress rings, navigation hover/press, staggered quick actions. Geometry handles scrolling, RTL, resized text and scaled ancestors. |
 | Collapse, Tree, OrgChart, Carousel | Natural expansion/collapse with retained inert exit content, branch chevrons, interrupted list layout motion, zoom-aware geometry, directional overlapping carousel slides and natural host heights. Virtual Tree remains immediate. |
 | Modal, Drawer, Confirm, Popover, Popconfirm, Tooltip, Dropdown, CommandPalette, Tour | Coordinated masks/surfaces, actual floating origins, moving highlights, natural content height changes, preserved inputs/focus, orderly exit presence, async generation isolation and correct Tour step references. |
 | Alert, Message, Notification, Loading, LoadingBar, Progress, Result, ErrorBoundary, Skeleton, Statistic | State/icon feedback, continuous queue collapse, progress changes and completion, resolved skeleton content reveal without an extra wrapper, immediate numeric values with subtle update motion. Empty uses the Result family. |
diff --git a/DESIGN-STANDARDS.md b/DESIGN-STANDARDS.md
index 8353fcc..5f5222a 100644
--- a/DESIGN-STANDARDS.md
+++ b/DESIGN-STANDARDS.md
@@ -4,22 +4,32 @@ The default appearance is quiet and readable. Every component uses semantic them
 
 | Foundation | Comfortable | Compact |
 | --- | --- | --- |
-| Base control height | 40 px | 34 px |
+| Base control height | 36 px | 30 px |
 | Base body text | 14 px / 1.6 | 14 px / 1.6 |
 | Secondary text | 13 px | 13 px |
 | Spacing unit | 8 px | 6 px |
 | Form row gap | 24 px | 16 px |
 | List row vertical padding | 12 px | 8 px |
-| Popup option minimum height | 36 px | 30 px |
+| Popup option minimum height | 32 px | 26 px |
 | Dialog padding, block / inline | 20 / 24 px | 16 / 20 px |
 | Radius, small / base / medium / large | 6 / 10 / 12 / 16 px | 6 / 10 / 12 / 16 px |
 
 Component size is a local choice; density is a region-wide layout choice. Compact is intended for pointer/keyboard data-heavy interfaces. Use comfortable or larger explicit controls for touch interfaces; essential targets should be at least 24 px and preferably 44 px.
 
-Hierarchy comes from radius, borders and type rather than decoration. Radii step down from the outside in: dialogs, drawers and popups use the large radius; content surfaces (Card, Alert, Collapse, Descriptions, Transfer, Upload, FileList, Result content, choice cards and lists) use the medium radius; buttons, fields and Table frames use the base radius; checkboxes and small chips use the small radius; status tags are pills. Content surfaces use hairline borders and muted fills without shadows; shadows are reserved for layers that float (popups use `shadow-md`, dialogs `shadow-lg`) and for raised handles such as slider thumbs and selected segments. Text hierarchy relies on size and color: 14 px body, 13 px secondary text, `fontWeight` (500) for component titles, labels, selected tabs and buttons, and `headingWeight` (600) only for Typography headings. Option group headings in Select, Dropdown, Menu, CommandPalette, List and rich choice groups use the shared section label: 12 px, weight 500, 0.04em tracking, uppercase for Latin text, muted color. Indicators that accompany text (Steps icons, Result and Upload symbols) are sized relative to the text, not to the control height.
+Hierarchy comes from radius, borders and type rather than decoration. Radii step down from the outside in: dialogs, drawers and popups use the large radius; content surfaces (Card, Alert, Collapse, Descriptions, Transfer, Upload, FileList, Result content, choice cards and lists) use the medium radius; buttons, fields and Table frames use the base radius; checkboxes and small chips use the small radius; status tags use borderless fills and the small radius. Content surfaces use hairline borders and muted fills without shadows; shadows are reserved for layers that float (popups use `shadow-md`, dialogs `shadow-lg`) and for raised handles such as slider thumbs and selected segments. Text hierarchy relies on size and color: 14 px body, 13 px secondary text, `fontWeight` (500) for component titles, labels, selected tabs and buttons, and `headingWeight` (600) only for Typography headings. Option group headings in Select, Dropdown, Menu, CommandPalette, List and rich choice groups use the shared section label: 12 px, weight 500, 0.04em tracking, uppercase for Latin text, muted color. Indicators that accompany text (Steps icons, Result and Upload symbols) are sized relative to the text, not to the control height.
 
 Inset surfaces use concentric curves: `inner radius = max(0px, outer radius - padding - border width)`. A default popup has a 16 px outer radius, 6 px padding and a 1 px border, so its options use 9 px. Hover, selected and moving highlight layers share that curve. The shared geometry helper accounts for unequal padding with horizontal/vertical corner radii, including the extra insets in Cascader, TreeSelect and TimePicker. Theme and component padding changes update the curves automatically; small and square themes clamp to zero. Independent controls, calendar cells, tags and icons retain their semantic radii. Do not introduce clipping merely to hide a mismatch.
 
+Menu navigation items, hover backgrounds and moving selection indicators use the same base radius as buttons, independent of menu padding. An explicit Menu component radius overrides this shared default.
+
+Select, TreeSelect and Cascader use shared multi-selection tags: tag height is the current control height minus 8 px, with 6 px inline gaps and 3 px field padding above and below. Tags wrap by default; `tagWrap={false}` or `maxTagCount="responsive"` keeps one line, truncates long labels and collapses excess values into `+N`. Reserve the actual input, clear and arrow space; when a label cannot fit, show the count alone. Folding is presentation only and must not alter selection or FormData. Width-driven folding does not replay selection entry animations. TreeSelect retains expanded branches across popup unmounts; search expansion is temporary, arrows only expand, and checkbox rows accept both label and empty-area activation.
+
+Tag uses borderless tinted or solid fills and a tighter radius of five-sixths of the theme's small radius (5 px by default). Explicit Tag component radius overrides take precedence.
+
+Pagination defaults to surface-filled outline buttons; `variant="ghost"` keeps borderless controls. Both share control-height tokens, stable pressed geometry and a moving primary selection surface. Outline hover/press changes the border and text, while ghost uses neutral fills. `showTotal` accepts a boolean for a localized count or a render function. Page and page-size changes use one callback; quick jumps commit on Enter or on leaving the pagination region without overriding a clicked pagination action.
+
+Card-style Tabs fit the tab labels by default while panels retain the available content width. Their size describes the entire tab bar, including padding and borders: 30 / 36 / 42 px by default. Inner buttons subtract those insets from the shared control height. Tab entries, buttons and moving selection share an inner radius derived from the bar radius minus its actual padding and border, clamped at zero; regional themes and explicit component overrides feed the same calculation. Default bar padding is 2 / 4 / 5 px, with 12 px inline label padding and a 2 px gap. Keep room for the selection shadow inside the clipped track without introducing scroll overflow. Tab content and panel height update immediately without entry, fade, slide or height animations; the tab bar's selection indicator retains its movement animation.
+
 | State | Required behavior |
 | --- | --- |
 | Default | Legible text, consistent icon alignment, stable geometry |
@@ -36,9 +46,9 @@ Use the primary color for actionable emphasis. Use success/info/warning/danger f
 
 Warning glyphs, field accents and status fills use a clear amber (`#faad14` in light, `#ffc53d` in dark). Warning text derives a darker or lighter readable ink independently; solid warning tags choose a contrasting label. Do not darken every warning accent to achieve text contrast.
 
-Dropdown pointer, keyboard and pressed states share one moving background; danger transitions interpolate its color. Select uses the same opaque primary tint for selected rows and the moving highlight, which stays visible when crossing a selection. Selected text and checkmarks convey the persistent value without changing the hover fill.
+Unselected options use one opaque neutral hover color (`--leaf-color-option-hover`, 9% text mixed with 91% surface; default light `#ebebeb`, dark `#2f2f33`) for pointer, keyboard candidate and pressed feedback. Select, AutoComplete, Cascader, TreeSelect / Tree, time columns, Dropdown, Menu and CommandPalette share it. Persistent selections retain the opaque 9% primary tint, semantic text and checkmarks; suggestion candidates are neutral even when their listbox uses `aria-selected` to announce navigation. Moving backgrounds interpolate both position and color; opaque fills prevent darkening when they cross selected rows, and static rows must not add a second hover / pressed fill. Disabled options receive no interaction feedback; danger actions retain their red semantic fill. These states inherit the regional appearance and palette without changing option geometry.
 
-Ordinary action feedback uses 120–200 ms easing. Dialogs and drawers can use up to 320 ms; drawers slide without overshoot. Messages and notifications enter as one unit, without inner icon/text springs. Selection indicators may move to the newly selected item; their animation must not move the control itself. Card lift is opt-in through `hoverable`. Honor system reduced motion and `theme.motion={false}`; animation never gates functionality.
+Ordinary action feedback uses 120–200 ms easing. Dialogs and drawers can use up to 320 ms; drawers slide without overshoot. Messages and notifications enter as one unit, without inner icon/text springs. Selection indicators may move to the newly selected item; their animation must not move the control itself. Cards retain their position and surface on hover. Honor system reduced motion and `theme.motion={false}`; animation never gates functionality.
 
 Solid and outlined Button activation uses a single translucent perimeter wave, following Ant Design's ease-out curve: a 400 ms expansion to 6 px outside the border and a 2 s opacity decay from 0.2. Ghost and link buttons omit the decoration, including danger and icon-only ghost buttons. Both timings follow the regional motion duration. One persistent decorative span and one browser animation handle both properties, without geometry/color measurement, per-click React roots, observers or per-frame JavaScript. It follows the actual corner radii and semantic action color and never clips or scales the label. Repeated activation replaces the current wave; disabling, loading, switching to ghost, unmounting or changing motion preferences cancels it. The decoration neither intercepts pointers nor changes scrollable layout, native submission, focus or accessible names. Forced colors omits the wave while retaining the focus outline.
 
@@ -46,14 +56,18 @@ Solid buttons brighten on hover and deepen on press; derived shades retain reada
 
 Dialog headings, form edges and footer actions share the same inline padding. The body has sufficient separation from both heading and actions. A notification close action occupies only the heading row. Icons are decorative when the accompanying text already conveys the meaning. Every icon-only action needs an accessible name.
 
-Modal and Drawer use a content surface, subtle section dividers and a muted footer by default. `divided={false}` groups content with spacing. Their heading icons share a neutral circular base. Confirm is an API-only decision prompt: a compact 420 px surface, spacing-based sections, a bare semantic glyph beside the explanation and no background base or section dividers. Its heading starts at the content edge, independently of the body icon. Popconfirm and Notification use a bare semantic glyph aligned with the title line. Headers without a supporting description use a 16 px vertical inset; Modal and Confirm footers use 12 px. Titles and supporting descriptions share an independent text column. The close action remains on the inline end. Body content scrolls without moving the heading or footer. Borders and surfaces derive from the current light/dark region, including custom palettes and density.
+Modal and Drawer use a content surface, subtle section dividers and a muted footer by default. `divided={false}` groups content with spacing. Their heading icons share a neutral circular base. Confirm is an API-only decision prompt: a compact 420 px surface, spacing-based sections, a bare semantic glyph beside the explanation and no background base or section dividers. Its heading starts at the content edge, independently of the body icon. Popconfirm and Notification use a bare semantic glyph aligned with the title line. Headers without a supporting description use a 16 px vertical inset; Divided Card, Modal and Drawer footers share 12 px vertical insets; spacing-only dialog and Confirm footers use 12 px below their actions. Titles and supporting descriptions share an independent text column. The close action remains on the inline end. Body content scrolls without moving the heading or footer. Borders and surfaces derive from the current light/dark region, including custom palettes and density.
+
+Card no longer exposes `hoverable` or adds hover lift; `bordered` remains available. Card `size` offers small, default and large layouts: body padding defaults to 16 / 20 / 24 px, heading insets to 12 / 16 / 20 px and title text to 14 / 15 / 16 px. Embedded Tabs follow the Card size unless explicitly overridden; child controls keep their own sizes. Card headings use `fontWeight` (500 by default) and equal vertical insets; the body does not add a second inset below an undivided header. Card retains spacing-based sections by default; `divided` opts into borders and a muted footer for settings or action-focused content. Checkbox/Radio card choices have one full clickable label, a neutral icon base, a title/description column and a trailing native control. Groups may arrange these as a responsive grid or one list with shared borders and row separators. Selected borders use the primary color without gradients or lifting. Status tags are non-interactive, and supporting text is an accessible description rather than part of the choice name. Neutral Alert surfaces preserve semantic icon colors and announcement roles.
+
+Card can integrate top line tabs through its `tabs` configuration. With a heading, navigation sits below the title and description without an intervening divider; without a heading, tabs fill the entire heading height with vertically centered labels and Card actions move to the trailing edge. Replacement headings derive their minimum height from the Card title line and symmetric heading insets, respect larger explicit tab sizes, and have no top-only outer padding. One full-width divider runs under the entire tab bar, including its actions. Tab labels and panels align with the Card content edge, panel insets and header surfaces inherit Card tokens, and tab size follows Card size unless explicitly set. The footer retains Card's spacing or divided treatment. Reuse Tabs navigation, overflow, content retention and animation rather than creating a second tab state system; loading replaces panel content while navigation remains mounted.
 
-Card retains spacing-based sections by default; `divided` opts into borders and a muted footer for settings or action-focused content. Checkbox/Radio card choices have one full clickable label, a neutral icon base, a title/description column and a trailing native control. Groups may arrange these as a responsive grid or one list with shared borders and row separators. Selected borders use the primary color without gradients or lifting. Status tags are non-interactive, and supporting text is an accessible description rather than part of the choice name. Neutral Alert surfaces preserve semantic icon colors and announcement roles.
+FileList uses one shared frame and row separators for text and thumbnail lists. Visuals, file information and actions occupy separate columns; names truncate within their column, while type and optional size remain secondary. Upload state, progress and errors belong to the information column. Preview buttons, download links, removal and Upload actions share square geometry. Picture cards keep a stable preview ratio and align their actions at the bottom. Missing sizes leave no empty placeholder, failed thumbnails retain a type icon, and asynchronous removal feedback stays with its file. No row shadow or hover lift is applied.
 
-ConfigProvider remains the configuration entry. Base colors, radius and height derive related geometry; advanced `dividerColor`, component `borderColor`, `headerBackground` and `footerBackground` provide selective overrides. CSS variables are consumption points for application styling. Filled actions and checkmarks remain solid colors, and single-line controls keep the 40px base height.
+ConfigProvider remains the configuration entry. Base colors, radius and height derive related geometry; advanced `dividerColor`, component `borderColor`, `headerBackground` and `footerBackground` provide selective overrides. CSS variables are consumption points for application styling. Filled actions and checkmarks remain solid colors, and single-line controls keep the 36px base height.
 
 Buttons expose solid, outline, ghost and link appearances. Link actions use theme-colored text with no border, padding or control-height minimum; hover and press change only their color, and activation has no wave. Outline uses a content surface, body text and a visible neutral border; danger uses its semantic text and border. Alerts use one neutral surface with semantic icon colors. Result icons sit on the same muted circular base for every status. Table frames use the same base radius as buttons, 13 px muted column headers and divider-colored row separators, and fill their container before horizontal overflow; a minimum width remains a lower bound. Scrollbar tracks overlay content and appear on hover, scroll or keyboard focus; dragging must neither steal input focus nor add a pointer focus outline.
 
-Development migration: replace Button `variant="soft"` with `variant="outline"` and remove Alert `variant` props. Comfortable controls now derive 34 / 40 / 46 px sizes; compact controls use a 34 px base. Set `theme.controlHeight` explicitly when an application needs to retain its former sizing. Content surfaces move from the large to the new medium radius (`borderRadiusMd` / `--leaf-radius-md`) and drop their default shadow; small text becomes 13 px (`fontSize - 1px`); button inline padding derives from its actual height (0.42 times the height, 16.8 px at 40 px), with explicit component padding taking precedence for every size; component titles use `fontWeight` instead of `headingWeight`; small Steps retain body-size labels and at least 24 px indicators; rich choice legends use section labels; replace controlled `Confirm` / `ConfirmProps` with `useConfirm().confirm(options)` / `ConfirmOptions`, and move rich confirmation flows to Modal; Confirm retains a bare body icon; tags become pills; popups use `shadow-md`; Pagination items become borderless. Include these compatibility changes in the next release's migration notes.
+Development migration: replace Button `variant="soft"` with `variant="outline"` and remove Alert `variant` props. Comfortable controls now derive 30 / 36 / 42 px sizes; compact controls use a 30 px base. Set `theme.controlHeight` explicitly when an application needs to retain its former sizing. Content surfaces move from the large to the new medium radius (`borderRadiusMd` / `--leaf-radius-md`) and drop their default shadow; small text becomes 13 px (`fontSize - 1px`); button inline padding derives from its actual height (0.42 times the height, 15.12 px at 36 px), with explicit component padding taking precedence for every size; component titles use `fontWeight` instead of `headingWeight`; small Steps retain body-size labels and at least 24 px indicators; rich choice legends use section labels; replace controlled `Confirm` / `ConfirmProps` with `useConfirm().confirm(options)` / `ConfirmOptions`, and move rich confirmation flows to Modal; Confirm retains a bare body icon; tags use borderless fills and the small radius; replace Tag `variant="outline"` with the default `soft` appearance; popups use `shadow-md`; Pagination uses outlined page buttons by default; set variant="ghost" to retain borderless buttons. Include these compatibility changes in the next release's migration notes.
 
 Acceptance uses keyboard behavior, geometry assertions, axe, SSR, build/package checks and manual inspection in both themes and densities. Screenshot baseline comparisons are deliberately deferred. See `IMPLEMENTATION-BATCHES.md` and `packages/react/ACCESSIBILITY.md` for evidence and manual coverage limits.
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index 42e881a..80cc7f7 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -80,13 +80,13 @@ pnpm --dir packages/react pack
 
 ## 文档内容边界
 
-在线文档只包含组件使用说明。文档站运行与维护说明见 [apps/docs/README.md](apps/docs/README.md)，组件开发流程见 [packages/react/DEVELOPMENT.md](packages/react/DEVELOPMENT.md)。
+在线文档只包含组件使用说明。文档站运行与维护说明见 [apps/docs/AGENTS.md](apps/docs/AGENTS.md)，组件开发流程见 [packages/react/DEVELOPMENT.md](packages/react/DEVELOPMENT.md)。
 
-每次 npm 升版发布都需维护中英文更新记录，并同步部署版本快照。具体步骤见 [发布文档](packages/react/RELEASING.md)；`pnpm check:release` 会校验组件包当前版本的记录。`pnpm build:versions` 使用 npm gitHead 独立构建每个已发布版本，导航和 AI 查询均以快照版本为准。版本构建与 AI 文档契约见 [文档站维护说明](apps/docs/README.md)，Skill 发行见 [skills/README.md](skills/README.md)。
+每次 npm 升版发布都需维护中英文更新记录，并同步部署版本快照。具体步骤见 [发布文档](packages/react/RELEASING.md)；`pnpm check:release` 会校验组件包当前版本的记录。`pnpm build:versions` 使用 npm gitHead 独立构建每个已发布版本，导航和 AI 查询均以快照版本为准。版本构建与 AI 文档契约见 [文档站维护说明](apps/docs/AGENTS.md)，Skill 发行见 [skills/README.md](skills/README.md)。
 
 ## 样式与图标
 
-源码统一使用 SCSS，通过 @rsbuild/plugin-sass 构建。公共尺寸和样式 mixin 在 packages/react/src/styles；40px 是默认表单对齐基准。图标使用 lucide-react 的具名导入，具体约定见组件库开发文档。
+组件库与文档站主题使用 SCSS，通过 @rsbuild/plugin-sass 构建；文档示例优先使用 Flex、Space、Grid、FormField 和 Text，不依赖 Tailwind CSS；示例规则见 [文档站协作约定](apps/docs/AGENTS.md)。站点界面现有的 Tailwind CSS 入口由 PostCSS 编译。公共尺寸和样式 mixin 在 packages/react/src/styles；36px 是默认表单对齐基准。图标使用 lucide-react 的具名导入，具体约定见组件库开发文档。
 
 ## 质量验收
 
diff --git a/README.en-US.md b/README.en-US.md
new file mode 100644
index 0000000..d082ba3
--- /dev/null
+++ b/README.en-US.md
@@ -0,0 +1,121 @@
+<div align="center">
+  <a href="https://ifhover.github.io/leaf-ui/en/">
+    <img src="./apps/docs/docs/public/leaf.svg" alt="Leaf UI" width="112" height="112" />
+  </a>
+
+  <h1>Leaf UI</h1>
+
+  <p><strong>Lightweight · Natural · Customizable</strong></p>
+  <p>A React UI library with a green starting point and room for your own identity.</p>
+
+  <p>
+    <a href="https://www.npmjs.com/package/@ifhover/leaf-ui"><img src="https://img.shields.io/npm/v/@ifhover/leaf-ui?style=flat-square&amp;logo=npm&amp;logoColor=white&amp;color=20834a" alt="npm version" /></a>
+    <a href="https://www.npmjs.com/package/@ifhover/leaf-ui"><img src="https://img.shields.io/npm/dm/@ifhover/leaf-ui?style=flat-square&amp;logo=npm&amp;logoColor=white&amp;color=20834a" alt="npm monthly downloads" /></a>
+    <a href="https://react.dev/"><img src="https://img.shields.io/badge/React-18%20%7C%2019-149eca?style=flat-square&amp;logo=react&amp;logoColor=white" alt="React 18 and 19" /></a>
+    <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="TypeScript support" /></a>
+    <a href="https://github.com/ifhover/leaf-ui/actions/workflows/quality.yml"><img src="https://img.shields.io/github/actions/workflow/status/ifhover/leaf-ui/quality.yml?branch=main&amp;style=flat-square&amp;logo=githubactions&amp;logoColor=white&amp;label=CI" alt="Component quality check status" /></a>
+  </p>
+
+  <p>
+    <a href="https://ifhover.github.io/leaf-ui/en/">Documentation</a> ·
+    <a href="https://ifhover.github.io/leaf-ui/en/components/">Components</a> ·
+    <a href="https://ifhover.github.io/leaf-ui/en/changelog.html">Changelog</a> ·
+    <a href="https://github.com/ifhover/leaf-ui/issues">Report an issue</a>
+  </p>
+
+  <p><a href="./README.md">简体中文</a> · <strong>English</strong></p>
+</div>
+
+## ✨ Features
+
+- 🍃 **A natural starting point** — A green default theme and clear interaction states, with components for inputs, forms, layout, navigation, and feedback.
+- 🎨 **Make it yours** — Customize colors, radii, typography, control heights, and light or dark appearance through ConfigProvider, scoped themes, and CSS variables.
+- 🛡️ **Built with TypeScript** — Includes type declarations and preserves native HTML attributes, DOM refs, and form semantics.
+- 🌍 **Multiple languages** — Chinese and English documentation, built-in locales, custom translations, nested locale settings, and RTL direction.
+- ⌨️ **Thoughtful interactions** — Keyboard navigation, focus management, and support for reduced motion preferences.
+- 📦 **Fits your stack** — React 18 / 19, ESM, CommonJS, and SSR, with component styles retained on demand in supported production builds.
+
+## 🖥️ Compatibility
+
+Supports React **18 / 19**, modern browsers, and server-side rendering. We recommend the current or previous stable browser release.
+
+| <img src="./apps/docs/docs/public/browsers/chrome.svg" alt="" width="28" height="28" /><br />Chrome | <img src="./apps/docs/docs/public/browsers/edge.svg" alt="" width="28" height="28" /><br />Edge | <img src="./apps/docs/docs/public/browsers/firefox.svg" alt="" width="28" height="28" /><br />Firefox | <img src="./apps/docs/docs/public/browsers/safari.svg" alt="" width="28" height="28" /><br />Safari |
+| :-------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: |
+|                                                ≥ 109                                                |                                              ≥ 109                                              |                                                 ≥ 121                                                 |                                               ≥ 16.4                                                |
+
+These are minimum support targets. See [browser compatibility](https://ifhover.github.io/leaf-ui/en/guide/compatibility.html) for test coverage and fallbacks, and the [SSR guide](https://ifhover.github.io/leaf-ui/en/guide/ssr.html) for Next.js and other frameworks.
+
+## 📦 Installation
+
+```bash
+pnpm add @ifhover/leaf-ui
+```
+
+<details>
+<summary>Using npm / Yarn / Bun</summary>
+
+```bash
+npm install @ifhover/leaf-ui
+yarn add @ifhover/leaf-ui
+bun add @ifhover/leaf-ui
+```
+
+</details>
+
+Your application must provide `react` and `react-dom`. Compiled CSS is included; you do not need Sass.
+
+## 🔨 Quick start
+
+```tsx
+import { Button, DatePicker } from '@ifhover/leaf-ui';
+
+export default function App() {
+  return (
+    <>
+      <DatePicker aria-label="Choose a date" />
+      <Button>Get started</Button>
+    </>
+  );
+}
+```
+
+Base styles and the required component and service styles load automatically, without manual CSS imports. Vite and Rsbuild / Rspack production builds retain styles on demand for named ESM imports from the root entry. For direct esbuild or CommonJS use, component subpaths such as `@ifhover/leaf-ui/button` are available. Custom SSR pipelines can use the full static stylesheet at `@ifhover/leaf-ui/styles/all.css`.
+
+Single-line controls default to **36px**, with **30 / 42px** small and large sizes. Find more examples in [getting started](https://ifhover.github.io/leaf-ui/en/guide/getting-started.html).
+
+## 🎨 Themes and locales
+
+Use ConfigProvider to configure a theme and locale for your application or a specific region:
+
+```tsx
+import { ConfigProvider } from '@ifhover/leaf-ui';
+import App from './App';
+
+export default function Root() {
+  return (
+    <ConfigProvider locale="en-US" theme={{ primaryColor: '#20834a', borderRadius: 8 }}>
+      <App />
+    </ConfigProvider>
+  );
+}
+```
+
+Set `locale` to `zh-CN` for Simplified Chinese, or set `theme.appearance` to `dark` for dark mode. Nested providers inherit unspecified options, and popups and messages follow the theme and locale of their region.
+
+Explore [theming](https://ifhover.github.io/leaf-ui/en/guide/theming.html) · [ConfigProvider themes and locales](https://ifhover.github.io/leaf-ui/en/components/config-provider.html).
+
+## 🤖 AI-assisted development
+
+Install the Leaf UI Skill in your application directory so your AI assistant can look up component APIs for the version your project uses:
+
+```bash
+npx skills add ifhover/leaf-ui --skill leaf-ui
+```
+
+See [AI and Skills](https://ifhover.github.io/leaf-ui/en/guide/ai.html) for setup and usage. You can also switch between published versions at the top of the documentation site.
+
+## 🤝 Contributing
+
+Share bugs and ideas through [Issues](https://github.com/ifhover/leaf-ui/issues), or open a [Pull Request](https://github.com/ifhover/leaf-ui/pulls).
+
+See the [development guide](./DEVELOPMENT.md) for local setup, project structure, and builds. Before changing components or user documentation, read the [development, versioning, and documentation workflow](./DEVELOPMENT-WORKFLOW.md).
diff --git a/README.md b/README.md
index 99ae2ec..ca9556e 100644
--- a/README.md
+++ b/README.md
@@ -1,184 +1,121 @@
-# Leaf UI
+<div align="center">
+  <a href="https://ifhover.github.io/leaf-ui/">
+    <img src="./apps/docs/docs/public/leaf.svg" alt="Leaf UI" width="112" height="112" />
+  </a>
 
-轻盈、自然、可定制的 React UI 组件库。默认绿色主题，通过 ConfigProvider 调整颜色、圆角、字体和控件高度。支持 React 18 / 19，提供 TypeScript 类型、ESM 和 CommonJS 入口。
+  <h1>Leaf UI</h1>
 
-[在线文档](https://ifhover.github.io/leaf-ui/) · [更新记录](https://ifhover.github.io/leaf-ui/changelog.html) · [npm](https://www.npmjs.com/package/@ifhover/leaf-ui)
+  <p><strong>轻盈 · 自然 · 可定制</strong></p>
+  <p>一个以绿色为起点的 React UI 组件库，让界面保留你的个性。</p>
 
-使用 AI 编写界面时，可在应用目录安装按项目实际版本查询 API 的 Skill：`npx skills add ifhover/leaf-ui --skill leaf-ui`。安装与使用见 [AI 与 Skills](https://ifhover.github.io/leaf-ui/guide/ai.html)，文档顶部可切换已发布版本。
+  <p>
+    <a href="https://www.npmjs.com/package/@ifhover/leaf-ui"><img src="https://img.shields.io/npm/v/@ifhover/leaf-ui?style=flat-square&amp;logo=npm&amp;logoColor=white&amp;color=20834a" alt="npm 版本" /></a>
+    <a href="https://www.npmjs.com/package/@ifhover/leaf-ui"><img src="https://img.shields.io/npm/dm/@ifhover/leaf-ui?style=flat-square&amp;logo=npm&amp;logoColor=white&amp;color=20834a" alt="npm 月下载量" /></a>
+    <a href="https://react.dev/"><img src="https://img.shields.io/badge/React-18%20%7C%2019-149eca?style=flat-square&amp;logo=react&amp;logoColor=white" alt="React 18 和 19" /></a>
+    <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=flat-square&amp;logo=typescript&amp;logoColor=white" alt="TypeScript 类型支持" /></a>
+    <a href="https://github.com/ifhover/leaf-ui/actions/workflows/quality.yml"><img src="https://img.shields.io/github/actions/workflow/status/ifhover/leaf-ui/quality.yml?branch=main&amp;style=flat-square&amp;logo=githubactions&amp;logoColor=white&amp;label=CI" alt="组件质量检查状态" /></a>
+  </p>
 
-## 安装与使用
+  <p>
+    <a href="https://ifhover.github.io/leaf-ui/">在线文档</a> ·
+    <a href="https://ifhover.github.io/leaf-ui/components/">组件总览</a> ·
+    <a href="https://ifhover.github.io/leaf-ui/changelog.html">更新记录</a> ·
+    <a href="https://github.com/ifhover/leaf-ui/issues">反馈问题</a>
+  </p>
 
-在你的 React 应用中安装组件包：
+  <p><strong>简体中文</strong> · <a href="./README.en-US.md">English</a></p>
+</div>
 
-```bash
-pnpm add @ifhover/leaf-ui
-```
-
-也可以使用 `npm install @ifhover/leaf-ui` 或 `yarn add @ifhover/leaf-ui`。样式只需在应用入口引入一次，使用组件无需安装 Sass。
+## ✨ 特性
 
-```tsx
-import { Button, DatePicker, Input, Select } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
+- 🍃 **轻盈自然** — 绿色默认主题、清晰的交互状态，覆盖输入、表单、布局、导航与反馈。
+- 🎨 **随心定制** — 通过 ConfigProvider 调整颜色、圆角、字体、控件高度和明暗外观，支持区域主题与 CSS 变量。
+- 🛡️ **类型完备** — 使用 TypeScript 编写，提供类型声明，保留原生 HTML 属性、DOM ref 与表单语义。
+- 🌍 **多语言** — 提供中英文文档，支持内置语言、自定义翻译、嵌套语言配置与 RTL 方向。
+- ⌨️ **细致交互** — 支持键盘操作、焦点管理，以及系统的减少动态效果偏好。
+- 📦 **融入工程** — 兼容 React 18 / 19，提供 ESM、CommonJS 和 SSR 用法，组件样式可随生产构建按需保留。
 
-export function App() {
-  return (
-    <form onSubmit={(event) => {
-      event.preventDefault();
-      console.log(Object.fromEntries(new FormData(event.currentTarget)));
-    }}>
-      <Input name="title" aria-label="项目名称" placeholder="项目名称" required />
-      <Select name="team" aria-label="团队" required options={[
-        { value: 'design', label: '设计团队' },
-        { value: 'engineering', label: '工程团队' },
-      ]} />
-      <DatePicker name="deadline" aria-label="截止日期" />
-      <Button type="submit">创建项目</Button>
-    </form>
-  );
-}
-```
+## 🖥️ 兼容性
 
-单行控件默认高度统一为 **40px**，小 / 大尺寸为 **34 / 46px**。选择类组件使用统一的浮层，支持键盘操作、点击外部收起和局部主题。
-
-浏览器组件入口会自动加载样式。`styles.css` 在应用入口引入一次，提供主题变量及 API 服务样式。Vite、Rsbuild / Rspack 的生产构建支持根入口的 ESM 具名导入按需保留组件及其内部依赖的样式，无需使用组件子路径。直接使用 esbuild 或 CommonJS 根入口时不能保证样式裁剪，可使用 `@ifhover/leaf-ui/button` 等子路径。自行管理 SSR 样式时可使用完整静态入口 `@ifhover/leaf-ui/styles/all.css`。
-
-## 组件
-
-| 导入名称 | 用途 |
-| --- | --- |
-| `Button` | 按钮、图标、加载与红色危险状态 |
-| `Input` / `Textarea` | 单行 / 多行文本输入 |
-| `InputNumber` | 数量、金额、范围与小数精度 |
-| `Steps` / `Breadcrumb` / `Pagination` / `Tabs` | 步骤、路径、分页和内容切换 |
-| `Tag` / `Badge` | 分类标签、状态与未读角标 |
-| `Avatar` / `Card` / `Collapse` / `Tree` | 头像、卡片、折叠内容和层级数据 |
-| `Result` | 成功、警告、错误、信息与空数据结果 |
-| `TreeSelect` / `ColorPicker` | 层级选择、颜色与透明度选择 |
-| `Divider` / `Skeleton` / `Popover` | 内容分隔、加载占位和气泡卡片 |
-| `Slider` / `Rate` | 数值区间与评分输入 |
-| `Calendar` | 日历、日期选择与自定义日程 |
-| `Drawer` | 边缘抽屉，支持嵌套与表单操作 |
-| `Loading` / `Progress` / `Tooltip` | 加载、任务进度和文字说明 |
-| `Checkbox` | 多项选择与半选 |
-| `Radio` / `RadioGroup` | 单选与选项分组 |
-| `Switch` | 开关与加载状态 |
-| `Select` | 单选、多选和搜索，支持禁用选项与清除 |
-| `DatePicker` | 日期选择，支持最早 / 最晚日期 |
-| `TimePicker` | 24 / 12 小时制与秒选择 |
-| `AutoComplete` | 自由文本输入与动态建议 |
-| `Cascader` | 按层级选择完整路径 |
-| `Form` / `FormField` | 表单布局、自动标签宽度与校验反馈 |
-| `ConfigProvider` | 区域主题、自动派生尺寸、外观和中英文 |
-| `DateTimePicker` / `DateRangePicker` | 日期时间与多粒度起止区间 |
-| `Dropdown` | 操作菜单与键盘导航 |
-| `Modal` / `Confirm` | 弹窗与异步确认 |
-| `Alert` / `Message` / `useMessage` | 页内提示与短暂消息 |
-| `Layout` / `Grid` / `Row` / `Col` / `Space` / `ScrollArea` / `Masonry` | 页面布局、响应式栅格、间距、滚动与瀑布流 |
-| `Segmented` / `Menu` / `BackTop` | 分段切换、嵌套导航和回到顶部 |
-| `Descriptions` / `Timeline` / `QRCode` | 详情、事件和二维码 |
-| `Image` / `ImagePreviewGroup` / `ImagePreview` | 图片展示、缩放、图片组切换与全屏 |
-| `VirtualList` / `InfiniteScroll` | 大量数据和分页加载 |
-| `Transfer` / `InputOTP` / `InputMask` / `TimeRangePicker` | 穿梭选择、验证码、格式输入和时间范围 |
-| `Notification` / `useNotification` / `Popconfirm` / `ErrorBoundary` / `LoadingBar` / `useLoadingBar` | 通知、就地确认、异常恢复和任务进度 |
-| `Upload` / `FileList` / `ImageCropper` / `SignaturePad` | 文件上传、文件信息、图片裁剪和签名导出 |
-
-`Select` 的 onChange 返回字符串值与选项，多选时返回数组；`DatePicker` 返回 Date 或 null 及当前模式的日期字符串，支持日期、年、季度、月、周；`TimePicker` 返回 `HH:mm` 或 null；`AutoComplete` 返回输入文本；`Cascader` 返回路径数组与选项数组。
-
-设置 name 后，可通过 FormData 读取值。日期模式为 `YYYY-MM-DD`，其他日期粒度使用对应格式，时间为 `HH:mm`，级联路径为 JSON 数组字符串。非受控表单控件支持 form reset；受控组件需同时重置应用状态。为表单控件提供 label 或 aria-label。
-
-现有组件还提供 ButtonGroup / SplitButton、CheckboxGroup、AvatarGroup、CheckableTag / TagGroup、InputSearch / InputGroup、Textarea 自动高度、动态 FormList，以及 Select、Tree、TreeSelect、Tabs 的大数据、异步或排序能力。详细参数见组件文档。
-
-## 区域主题与语言
+支持 React **18 / 19**、现代浏览器与服务端渲染。推荐使用浏览器当前或上一代稳定版。
 
-```tsx
-import { ConfigProvider, DateTimePicker, Form, FormField } from '@ifhover/leaf-ui';
-
-<ConfigProvider locale="en-US" theme={{ primaryColor: '#7654c6', borderRadius: 6 }}>
-  <Form labelWidth="auto">
-    <FormField label="Deadline" required>
-      <DateTimePicker name="deadline" />
-    </FormField>
-  </Form>
-</ConfigProvider>
-```
+| <img src="./apps/docs/docs/public/browsers/chrome.svg" alt="" width="28" height="28" /><br />Chrome | <img src="./apps/docs/docs/public/browsers/edge.svg" alt="" width="28" height="28" /><br />Edge | <img src="./apps/docs/docs/public/browsers/firefox.svg" alt="" width="28" height="28" /><br />Firefox | <img src="./apps/docs/docs/public/browsers/safari.svg" alt="" width="28" height="28" /><br />Safari |
+| :-------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: |
+|                                                ≥ 109                                                |                                              ≥ 109                                              |                                                 ≥ 121                                                 |                                               ≥ 16.4                                                |
 
-嵌套配置继承未设置的选项；浮层、确认框与消息沿用调用区域的主题和语言。ConfigProvider 自动托管确认框、消息、通知和顶部加载条，子组件直接调用相应 hook：
+以上为最低支持目标；各版本实测范围与功能降级见[浏览器兼容性](https://ifhover.github.io/leaf-ui/guide/compatibility.html)，Next.js 等框架的接入见 [服务端渲染](https://ifhover.github.io/leaf-ui/guide/ssr.html)。
 
-```tsx
-import { Button, useMessage } from '@ifhover/leaf-ui';
+## 📦 安装
 
-export function SaveButton() {
-  const { message } = useMessage();
-  return <Button onClick={() => message.success('保存成功')}>保存</Button>;
-}
+```bash
+pnpm add @ifhover/leaf-ui
 ```
 
-确认框同样直接使用：
+<details>
+<summary>使用 npm / Yarn / Bun</summary>
 
-```tsx
-import { Button, useConfirm } from '@ifhover/leaf-ui';
-
-export function DeleteButton({ onDelete }: { onDelete: () => void | Promise<void> }) {
-  const { confirm } = useConfirm();
-  return <Button danger onClick={async () => {
-    if (await confirm({ title: '删除项目', children: '是否继续？', type: 'danger' })) {
-      await onDelete();
-    }
-  }}>删除</Button>;
-}
+```bash
+npm install @ifhover/leaf-ui
+yarn add @ifhover/leaf-ui
+bun add @ifhover/leaf-ui
 ```
 
-将这些组件放在应用入口的 ConfigProvider 下即可。单独使用时可在入口选择 ConfirmProvider 或 MessageProvider。详细用法见[在线文档](https://ifhover.github.io/leaf-ui/)。
+</details>
 
-通知和顶部加载条也由入口托管，子组件或自定义 hook 直接使用：
+需要在应用中安装 `react` 和 `react-dom`。组件提供编译后的 CSS，无需安装 Sass。
+
+## 🔨 快速使用
 
 ```tsx
-import { useLoadingBar, useNotification } from '@ifhover/leaf-ui';
-
-export function useProjectSave(saveProject: () => Promise<void>) {
-  const notification = useNotification();
-  const loadingBar = useLoadingBar();
-  return async () => {
-    const finish = loadingBar.start();
-    try {
-      await saveProject();
-      notification.success({ title: '保存成功', description: '项目内容已更新。' });
-    } finally {
-      finish();
-    }
-  };
+import { Button, DatePicker } from '@ifhover/leaf-ui';
+
+export default function App() {
+  return (
+    <>
+      <DatePicker aria-label="选择日期" />
+      <Button>开始使用</Button>
+    </>
+  );
 }
 ```
 
-每个任务的完成函数相互独立，并发任务全部完成后才收起加载条。Upload 支持文件校验、进度、取消和重试；FileList 展示文件信息，预览图片与音视频。
+基础样式与所需的组件、服务样式会自动加载，无需手动导入 CSS。Vite、Rsbuild / Rspack 的生产构建支持根入口 ESM 具名导入的样式按需保留。直接使用 esbuild 或 CommonJS 时，可使用 `@ifhover/leaf-ui/button` 等子路径；自行管理 SSR 样式时可使用完整静态入口 `@ifhover/leaf-ui/styles/all.css`。
 
-## 主题定制
+单行控件默认高度为 **36px**，小 / 大尺寸为 **30 / 42px**。更多示例见[安装与快速开始](https://ifhover.github.io/leaf-ui/guide/getting-started.html)。
 
-使用 ConfigProvider 调整主题。只需给出基础圆角、高度和字号，其他尺寸自动生成；特殊需求通过可选的 tokens 覆盖。
+## 🎨 主题与语言
+
+使用 ConfigProvider 为应用或某个区域配置主题和语言：
 
 ```tsx
-<ConfigProvider theme={{
-  primaryColor: '#7654c6',
-  borderRadius: 8,
-  controlHeight: 34,
-  appearance: 'light',
-}}>
-  <Button>品牌按钮</Button>
-</ConfigProvider>
-```
+import { ConfigProvider } from '@ifhover/leaf-ui';
+import App from './App';
 
-CSS 变量供业务组件读取：自己的按钮也可以使用 `var(--leaf-color-primary)`、`var(--leaf-radius)` 与 `var(--leaf-control-height)`，跟随所在区域的配置。
+export default function Root() {
+  return (
+    <ConfigProvider locale="zh-CN" theme={{ primaryColor: '#20834a', borderRadius: 8 }}>
+      <App />
+    </ConfigProvider>
+  );
+}
+```
 
-服务端渲染使用同一份静态 CSS 和初始主题，动态切换无需重新生成样式。Next.js App Router、Pages Router 和其他框架的例子见 [SSR 使用](https://ifhover.github.io/leaf-ui/guide/ssr.html)。
+将 `locale` 改为 `en-US` 即可切换为英文；设置 `theme.appearance` 为 `dark` 可启用深色外观。嵌套配置继承未设置的选项，浮层和消息沿用所在区域的主题与语言。
 
-图标采用 [Lucide](https://lucide.dev/)。应用中需要使用图标时安装 `lucide-react`，然后通过具名导入将图标节点传给 Button 的 startIcon / endIcon 或 Input 的 prefix / suffix。
+了解[定制主题](https://ifhover.github.io/leaf-ui/guide/theming.html) · [ConfigProvider 主题与语言](https://ifhover.github.io/leaf-ui/components/config-provider.html)。
 
-## Git 与反馈
+## 🤖 AI 辅助开发
 
-公开仓库：[ifhover/leaf-ui](https://github.com/ifhover/leaf-ui)。问题与建议请提交至 [GitHub Issues](https://github.com/ifhover/leaf-ui/issues)。
+在应用目录安装 Leaf UI Skill，让 AI 按项目实际使用的版本查询组件 API：
 
 ```bash
-git clone https://github.com/ifhover/leaf-ui.git
+npx skills add ifhover/leaf-ui --skill leaf-ui
 ```
 
-源码维护、构建与文档站说明见 [开发文档](DEVELOPMENT.md)。
+安装与使用见 [AI 与 Skills](https://ifhover.github.io/leaf-ui/guide/ai.html)。在线文档顶部也可切换已发布版本。
+
+## 🤝 参与贡献
+
+欢迎通过 [Issues](https://github.com/ifhover/leaf-ui/issues) 反馈问题与建议，或提交 [Pull Request](https://github.com/ifhover/leaf-ui/pulls)。
+
+本地开发、项目结构与构建说明见 [开发文档](./DEVELOPMENT.md)；提交组件或使用文档改动前，请阅读 [开发、版本与文档同步流程](./DEVELOPMENT-WORKFLOW.md)。
diff --git a/apps/docs/AGENTS.md b/apps/docs/AGENTS.md
new file mode 100644
index 0000000..b4ebb86
--- /dev/null
+++ b/apps/docs/AGENTS.md
@@ -0,0 +1,11 @@
+# 文档站 AI 协作约定
+
+本文件适用于 `apps/docs/`。修改文档、示例、主题或构建脚本前，必须阅读并遵守：
+
+- [开发、版本与文档同步流程](../../DEVELOPMENT-WORKFLOW.md)：开发分支、正式版本、独立预览与清理。
+- [示例编写规则](EXAMPLE-WRITING.md)：主站示例范围、布局、源码复用与验收。
+- [文档站维护说明](MAINTENANCE.md)：运行、主题、导航、中英文、快照与 AI 文档。
+
+主站面向组件使用者。示例应简短、可运行，并直接体现 Leaf UI 的默认外观；复杂业务页面留给独立 example 站点。维护说明放在本目录的源码 Markdown 中，不放入会发布并进入搜索的 `docs/`。
+
+保留已有未提交工作。组件与使用文档变更在开发分支完成，合并与发布遵循仓库流程；报告实际执行的验证，未发布的工作不能称为已上线。
diff --git a/apps/docs/EXAMPLE-WRITING.md b/apps/docs/EXAMPLE-WRITING.md
new file mode 100644
index 0000000..1f6cfbb
--- /dev/null
+++ b/apps/docs/EXAMPLE-WRITING.md
@@ -0,0 +1,46 @@
+# 文档示例编写规则
+
+本文件是 [AGENTS.md](AGENTS.md) 引用的必读约定，适用于主站组件和指南示例。
+
+## 内容范围
+
+每个示例说明一个明确的能力。基础用法先展示组件默认外观，再用独立示例说明尺寸、状态、受控值或必要的交互。状态对比应有清楚的名称。
+
+主站不编写完整的项目管理、权限工作台、十字段设置页或多步骤业务流程。复杂组合、装饰性封面和业务页面属于将来的独立 example 站点。展示 API 必需的本地状态、提交、重置和异步处理可以保留，但尽量使用最少的字段与数据。
+
+## 布局与样式
+
+- 示例容器 `ComponentExample` 默认在预览区水平、垂直居中，内容宽度为 **480px**；窄屏自动限制到可用宽度。用 `width={360}`、`width={600}` 或 `width="100%"` 调整单个示例。
+- 展示用宽度、居中和外围留白只写在 MDX 的 `ComponentExample` 配置中，不重复写进可复制示例源码。容器只控制外部展示，不改写组件圆角、字号、内边距、颜色和状态。
+- 只有一个触发按钮的浮层或服务示例使用 `width="fit-content"`，保持按钮自然宽度并居中；表单和对齐布局沿用默认宽度。
+- 组件排列使用公开的 `Flex`、`Space` 和 `Grid`。主轴对齐和换行使用 Flex；等间距组合使用 Space；分栏使用 Grid。
+- 表单标签、帮助信息和错误使用 `Form` / `FormField`，说明文字使用 `Text` / `Paragraph`，面板使用 `Card`。不手写相同的标签、面板或文字样式。
+- 主站示例不依赖 Tailwind 工具类、文档专属类名或隐藏样式文件。复制示例后，只安装 Leaf UI 及源码明确导入的依赖即可使用组件。
+- 只在表达当前能力必需时保留少量原生 `style`，例如滚动区域高度、浮层定位、动态颜色或实际演示的尺寸覆盖。不要用 CSS 装饰一个复杂场景来替代基础用法；需要大量 CSS 的内容移出主站。
+- 不通过源码过滤器删除布局或样式来制造简洁代码。预览组件与展示、复制、AI 导出的代码必须对应同一实现。
+
+## 源码与中英文
+
+中文示例位于 `src/examples/<component>/`，英文镜像位于 `src/examples/en/<component>/`。MDX 预览导入该组件，代码围栏的 `file` 引用相同的源码：
+
+````mdx
+import { ComponentExample } from '../../src/components/component-example';
+import { InputBasic } from '../../src/examples/input/basic';
+
+<ComponentExample title="基础输入" preview={<InputBasic />} width={360} fileName="basic.tsx">
+
+```tsx lineNumbers file="../../src/examples/input/basic.tsx"
+```
+
+</ComponentExample>
+````
+
+不要再维护一份独立手抄的展示代码。语言专用的 `english` 参数和翻译判断由 `scripts/example-source.mjs` 消除；真实的语言切换状态继续保留。显示、复制和 AI Markdown 导出使用同样的处理。
+
+组件新增或 API 改变时，同步中英文页面、公共类型、侧边栏、总览元数据与 SVG 缩略图。API 默认值必须来自实际实现。
+
+## 验收
+
+按改动范围执行类型检查、文档测试、库和文档构建。新增公开组件还需检查根入口、子路径、声明、自动样式和 SSR。
+
+布局调整必须在浏览器验证中文、英文、桌面与窄屏、深浅外观及主题切换。检查预览溢出、控件交互、源码展开/收起和复制的一致性；仅构建通过不能报告视觉验收完成。
diff --git a/apps/docs/MAINTENANCE.md b/apps/docs/MAINTENANCE.md
new file mode 100644
index 0000000..daf3814
--- /dev/null
+++ b/apps/docs/MAINTENANCE.md
@@ -0,0 +1,90 @@
+# 文档站维护说明
+
+本文件由 [AGENTS.md](AGENTS.md) 引用。示例写法遵循 [EXAMPLE-WRITING.md](EXAMPLE-WRITING.md)，版本开发与发布遵循 [仓库流程](../../DEVELOPMENT-WORKFLOW.md)。
+
+## 运行与构建
+
+使用 Node.js 22.22.2+ / 24.15.0+ 的受支持 LTS，或 Node.js 26；pnpm 固定为 11.10.0。在仓库根目录运行：
+
+```bash
+pnpm install
+pnpm dev
+pnpm build:docs
+pnpm preview
+```
+
+开发和预览地址为 `http://127.0.0.1:3000`。Rspress 和 TypeScript 直接引用 `packages/react/src`，组件与 SCSS 修改会热更新。当前源码构建产物位于 `apps/docs/doc_build`。
+
+`LEAF_DOCS_BASE` 配置部署路径，默认 `/`。自定义站内链接用 `withBase` 并指向真实 `.html`，验证直接访问和刷新。
+
+## 内容、导航与主题
+
+`docs/guide`、`docs/components`、`docs/api` 面向使用者，英文镜像在 `docs/en`。首页、主题编辑器与预览容器在 `src/components`，示例在 `src/examples`，Rspress 主题在 `theme`。维护说明不得放到 `docs/`。
+
+导航在 `rspress.config.ts`，中英文指南和组件侧边栏使用各自路径键。组件名称使用实际导入名称，中文副标题写在 `tag` 中。新增组件同步 `src/components/component-catalog.ts`、`scripts/component-metadata.mjs` 和 `docs/public/components` 静态 SVG；总览不挂载所有交互实例。图标使用 `lucide-react` 具名导入，避免手绘运行时图标集合。
+
+顶部 API 导航使用独立 `/api/`、`/en/api/` 侧边栏。ConfigProvider 页面先介绍多语言、主题与外观、组件默认值，底部独立 API 章节集中放置 `ConfigProvider API`、`LeafTheme` 与类型参考；API 表格使用三级标题。完整 `LeafComponentDefaults`、`LeafThemeTokens` 分别放在 `api/component-defaults`、`api/theme-tokens`，通过链接查询。默认参数示例要直观展示占位文本等变化，并说明配置键的命名规则与实例覆盖。使用建议只保留简短、常见的注意事项。
+
+所有文档页使用相同的正文宽度和水平留白，不根据是否包含演示切换布局；首页保留独立的展示布局。同步修改 API 表格时保留所在标题层级，避免自动生成额外的主章节。
+
+阅读样式集中在 `theme/index.scss`：侧栏主文字 15px / 500、副标题 12px、行高 42px；顶栏 16px、代码 13px。侧栏分组标题吸顶，并保留 Rspress 展开/收起、路由与移动菜单。组件总览和详情页共用正文宽度与内边距。字体由 `@fontsource-variable/inter` 本地加载，中文用系统字体回退。
+
+组件总览顶部的输入框实时过滤组件目录，组件侧栏顶部的输入框独立过滤当前菜单；支持中英文名称和忽略大小写的匹配，清空后恢复全部内容。侧栏由 `docs-sidebar.tsx` 复用 Rspress `SidebarList`，搜索框位于独立滚动列表之外，分组标题仍在列表内吸顶。过滤时展开匹配分组，清空后保留原来的折叠状态；指南与 API 沿用原生侧栏。
+
+顶部导航、侧栏和右侧目录的选中与 hover 文字直接使用当前 `--leaf-color-primary`，不使用加深的派生文字色。侧栏分组标题的上边距与向上遮罩范围共用 `--rp-sidebar-padding`，避免遮住上一组最后一项的文字、选中背景和底部圆角。
+
+组件总览通过 `component-thumbnails.ts` 将仓库静态 SVG 作为文本内联，主色、插画色阶和中性表面消费当前区域的主题变量，保留状态与多色示意的语义。新增缩略图沿用现有色板，使用新色值时同步映射；渐变和裁剪 ID 自动按组件名称隔离。不要改回隔离主题变量的 `<img>`，也不要挂载全部交互组件。
+
+正文规则排除 `.rp-not-doc`。站点排版与组件 token 分开，不能覆盖预览或首页中组件的默认圆角、阴影、内边距与状态。搜索和主题按钮使用 Leaf UI Button；外观切换保留 Rspress ThemeContext、存储和键盘操作。
+
+`DocsThemeProvider` 通过外层 ConfigProvider 同步站点和示例主题色。`ThemeColorSwitcher` 使用 ColorPicker，配色存储在 `leaf-ui-docs-primary-color`，支持刷新、语言切换与同源标签页同步；静态 HTML 和初次渲染使用默认值，挂载后恢复存储。存储不可用时仍可切换。Rspress 搜索 portal 只同步根元素的站点强调色，组件色板由 ConfigProvider 生成；局部主题保持独立。
+
+首页、认识 Leaf UI 和快速开始共用 `PackageInstall`。包管理器偏好存储在 `leaf-ui-docs-package-manager`，支持刷新、页面与语言切换、同页实例和同源标签页同步；存储不可用时仍可切换。品牌图标使用 `data-no-zoom` 排除文档图片放大。指南的四种命令保留在 MDX 子内容中，Markdown 导出完整输出这些命令。
+
+配色入口、首页和主题编辑器共用 `src/components/theme-colors.ts`：绿色、黑色、橙色 `#ff6900`、蓝色 `#1d9bf0`、红色 `#cf0b2d`。深浅外观保留预设原色，实色按钮文字与 Switch 滑块为白色；浅底内容保持可读。主题编辑器把 HEX / RGB / HSL 归一为 HEX，生成代码含 `onPrimaryColor: '#fff'`。
+
+组件和站点主题使用 SCSS，由 `pluginSass` 编译。Tailwind 4 入口 `theme/tailwind.css` 只服务现有站点界面，不是组件示例的前置依赖；PostCSS 接入 `@tailwindcss/postcss`，扫描 `src`、`docs`、`theme`，不加载 Preflight，不使用全局 `!important`。组件行内布局通过公共参数调整。不要把 Tailwind 依赖加入组件包。
+
+## 示例容器
+
+ComponentExample 上方预览始终挂载，下方源码在构建时高亮；复制、换行、展开都读取同一份 MDX 源码。宽度配置和内容范围见 [示例规则](EXAMPLE-WRITING.md)。
+
+长代码默认折叠，短代码完整显示。展开使用测量高度与约 160ms 过渡；减少动态效果时直接切换。收起有渐变遮罩，展开后的收起按钮在当前源码内吸附视口底部；中途收起滚动回本示例代码顶部。外框使用 `overflow: clip`，避免阻断吸附。实现位于 `src/components/component-example.tsx` 与 `.scss`。
+
+## API 与 AI 文档
+
+```bash
+node apps/docs/scripts/sync-component-api.mjs
+pnpm test:docs
+pnpm test:skills
+```
+
+API 生成器从公共 TypeScript 导出更新中英文表格，保留人工说明与默认值；简单联合类型展开，公开数据类型链接到详情。可用 `--page=components/flex` 限定页面，用 `--from-ref=<git-ref>` 恢复历史说明。元数据与 AI 导出共用 `component-metadata.mjs`。
+
+两份全局配置参考也由 API 生成器同步，可分别使用 `--page=api/component-defaults`、`--page=api/theme-tokens`。没有独立默认值的参考表使用三列表头（属性、类型、说明），同步时保持三列。`documentationPage` 决定类型的唯一参考位置；AI 导出包含 `/api/` 页面及其版本标识，历史快照没有独立参考页时仍使用该快照原有的组件或指南页，不把新文档混入旧版本。
+
+`LeafComponentTokens`、`LeafThemeStyle` 的完整参考放在 `api/theme-tokens`，共享浮层参数 `PopupOptions` 放在 `api/popup-options`。定制主题指南按基础配置、深色模式、局部主题、密度与进阶覆盖递进，只链接完整参数。组件侧栏先放组件总览与使用图标；ConfigProvider 放在通用分组首项，中文副标题保留“全局配置”，最右侧另放蓝色“配置”标签（英文为“Config”），沿用指南 SSR 标签的原生样式。中文 `tag` 使用 Rspress 支持的逗号分隔多标签，第一项显示为副标题，最后一项保留标签样式。使用图标文档位于 `components/icons`，与总览同组。
+
+翻译资源参考位于 `api/translations`，ConfigProvider 页面保留简短说明与 JSON 示例。内置 JSON、Schema 和类型由组件包维护；`sync-locales.mjs` 在开发和构建前复制到忽略跟踪的 `docs/public/locales/`，AI 导出另从对应发布快照源码读取并复制到该版本根目录 `locales/`。旧快照缺少资源时不补入新版本词条。JSON 下载使用 `<a href={withBase('/locales/en-US.json')} download>`，避免 Markdown 链接被 Rspress 转换成不存在的 `.json.html` 页面。
+
+API 类型单元格由 `scripts/api-type-display.mjs` 的 rehype 插件合并为一个行内代码容器，类型引用在容器内保持可点击并使用站点主题色；不能为标点和链接分别绘制代码底色。转换只作用于“类型 / Type”列，Markdown 源码、链接目标及 AI 导出保持原样。API 表格的说明列保留 240px 最小宽度，窄屏沿用表格内部横向滚动，避免说明被挤成过高的行。字段较多的高级 API 可使用 `leaf-api-details` 折叠表格，标题和类型锚点仍放在折叠容器外；不要隐藏主组件的常用参数表。
+
+Rspress 的 `llms: true` 输出页面 Markdown，`export-ai-docs.mjs` 输出 `api/index.json` 并写入准确包版本、提交和浏览器地址。每版根目录有 `llm.txt` / `llms.txt`；右侧 Markdown 链接必须指向当前版本。独立 Skill 维护见 [skills/README.md](../../skills/README.md)。
+
+## 正式站点与历史快照
+
+正式地址为 `https://ifhover.github.io/leaf-ui/`。`.github/workflows/pages.yml` 通过 GitHub Actions 部署 `site_build`，使用 `LEAF_DOCS_BASE=/leaf-ui/`。不提交静态产物和缓存。
+
+`pnpm build:versions` 从 npm 查询 `@ifhover/leaf-ui` 和历史包 `@sudden3/leaf-ui` 的已发布稳定版本、日期和 gitHead，经 `git archive` 还原发布提交，用对应源码、锁文件、示例与文档独立构建。需要完整 Git 历史。缺少提交、版本/包名不符、跨包重号、网络或权限错误、构建失败均中止部署。
+
+默认入口对应 npm latest，不跳转到版本目录；同一提交额外构建 `/v/X.Y.Z/`。两份产物分别使用自己的 base，不能复制带版本路径的页面充当根站点。新作用域首次正式发布前，默认仍展示历史包稳定版；历史快照保持原来的包名和 API。版本菜单读取 `versions.json`，切换保留页面和锚点，不存在时回退指南或组件总览。
+
+旧快照只补充版本导航和 AI 基础设施，组件实现、文档与示例保持发布提交。缓存 `.version-cache` 的键包含包名、提交、base 和基础设施摘要。修改 AI 导出的 import 后同步 `build-versioned-site.mjs` 的 `platformFiles` 及其直接依赖，并执行隔离快照测试。
+
+组件版本来自 `packages/react/package.json`；更新记录同步中英文，标题由 `pnpm check:release` 校验。未发布记录放在在线 `docs` 之外。npm、Git 标签、默认文档、固定快照和 AI 文档全部一致后才报告发布完成。
+
+## 开发预览
+
+开发分支可使用独立 `/dev/<name>/` 地址，展示开发状态、分支/提交和目标版本，使用独立资源、搜索与 base。稳定版本列表只记录 npm 正式版本；开发包使用 SemVer 预发布号和 `dev` 标签。
+
+当前 Pages 与 `build:versions` 没有自动开发预览部署/清理；配置 base 之外还需独立部署步骤。记录 URL、分支、提交、部署位置和清理方式。合并或放弃后删除预览、资源、入口与活动清单，保留清理证据；正式历史快照继续可访问。
diff --git a/apps/docs/README.md b/apps/docs/README.md
deleted file mode 100644
index 7b9cb2f..0000000
--- a/apps/docs/README.md
+++ /dev/null
@@ -1,132 +0,0 @@
-# Leaf UI 文档站
-
-此目录使用 Rspress 编写 Leaf UI 的在线文档。在线内容只面向组件使用者；文档站运行、维护与仓库开发说明放在源码 Markdown 中。
-
-分支、版本同步和临时预览清理遵循 [开发、版本与文档同步流程](../../DEVELOPMENT-WORKFLOW.md)。默认在线文档、`main` 的组件与使用文档、npm `latest` 必须在发布完成时对应同一正式版本。
-
-## 运行环境
-
-Node.js 22.22.2+ / 24.15.0+ 的受支持 LTS 版本，或 Node.js 26；pnpm 11，工作区固定使用 11.10.0。
-
-在仓库根目录运行：
-
-```bash
-pnpm install
-pnpm dev
-```
-
-打开 `http://127.0.0.1:3000`。文档直接引用 `packages/react/src`，组件和 SCSS 修改会热更新，不需要预先构建组件包。
-
-## 构建与预览
-
-```bash
-pnpm build:docs
-pnpm preview
-```
-
-当前源码的预览产物位于 `apps/docs/doc_build`。`LEAF_DOCS_BASE` 控制部署路径，默认 `/`。自定义链接必须使用 withBase 并指向实际的 .html 文件，保证刷新和直接访问可用。
-
-## GitHub Pages
-
-在线站点：https://ifhover.github.io/leaf-ui/。仓库的 Pages 来源为 GitHub Actions，.github/workflows/pages.yml 在 main 推送或手动触发时检查源码、构建组件与当前文档，再构建已发布的历史版本，上传 `apps/docs/site_build`。构建设置 `LEAF_DOCS_BASE=/leaf-ui/`，不提交静态产物或缓存。
-
-## 版本快照与 AI 文档
-
-```bash
-pnpm build:versions
-```
-
-`scripts/build-versioned-site.mjs` 从 npm 注册表读取 `@ifhover/leaf-ui` 与历史包 `@sudden3/leaf-ui` 实际发布的稳定版本、发布日期和 `gitHead`。每个版本通过 `git archive` 在临时目录还原该发布提交，使用该提交的锁文件、组件源码、页面与示例独立构建。需要完整 Git 历史（CI 使用 `fetch-depth: 0`）；缺少提交、包名或版本不匹配、跨包版本号重复或构建失败会中止部署。
-
-新包尚不存在或只有开发预发布时，默认文档保持旧包稳定版；新包正式发布后，默认入口使用新包的 `latest`。`versions.json` 顶层记录默认包名，每个版本条目记录其实际包名，旧版快照不会换成新作用域的安装命令或 API。新包注册表的网络错误与权限错误会中止构建，不会被当成尚未发布。
-
-默认地址 `/leaf-ui/` 直接展示 npm latest 指向的最新已发布文档，页面、资源和搜索都使用根地址，不跳转到版本路径。同一发布提交额外构建固定的 `/leaf-ui/v/X.Y.Z/` 快照供历史版本与 Skill 查询；两份构建使用各自 base，不能直接复制带版本路径的页面充当根站点。组件和使用文档在分支内开发，合并到 main 时完成新版本发布；构建器按 npm gitHead 部署，发布尚未完成时保留原稳定文档。顶部菜单从 `versions.json` 获取已发布列表，选择最新版返回根地址，旧版使用版本路径；切换时保留页面和锚点，目标没有该页面时回退对应指南或组件总览。
-
-旧快照只补充文档基础设施：版本菜单、AI 安装指南、Rspress Markdown 输出及 API 索引。基础设施的组件导入与安装提示使用该快照的包名；组件实现、例子与组件文档保持在发布提交。生成缓存位于 `.version-cache`，缓存键包含包名、发布提交、基础路径和基础设施文件摘要；修改基础设施会自动使缓存失效。
-
-Rspress `llms: true` 输出每页 Markdown，`scripts/export-ai-docs.mjs` 从各快照的公共导出建立 `api/index.json`，并为每页写入准确包版本、源码提交和浏览器地址。每版根目录提供 `llm.txt` 与标准 `llms.txt`，无需将完整手册放入 Skill。组件页面右侧的 Markdown 链接直接指向该版本的文本。
-
-维护 Skill 见 [skills/README.md](../../skills/README.md)。相关测试由 `pnpm test:docs` 和 `pnpm test:skills` 执行，均纳入 `pnpm check`。
-
-## 临时开发预览
-
-开发分支允许使用 `5.0-dev` 等名称部署独立在线预览，例如 `/leaf-ui/dev/5.0-dev/`。预览从对应分支提交构建，明确标记开发状态，使用自己的资源与搜索路径；稳定版版本列表仍只记录 npm 已发布的正式版本。
-
-当前 Pages 工作流与版本快照脚本尚未包含开发预览部署和自动清理；设置 `LEAF_DOCS_BASE` 后仍需独立部署步骤。分支合并到 `main` 或放弃开发后，必须删除该预览、资源和入口，正式发布验收包含清理结果。
-
-## 中英文文档
-
-中文页面位于 docs/guide 与 docs/components，英文镜像位于 docs/en。英文示例位于 src/examples/en；代码围栏与预览引用同一份源码。theme/Layout 按 Rspress useLang 设置 ConfigProvider 语言。组件侧边栏键需分别使用 /components/ 与 /en/components/，指南同理。
-
-组件总览数据在 src/components/component-catalog.ts；缩略图使用静态 SVG，新增资产可通过 scripts/generate-feedback-thumbnails.mjs 生成。
-
-## 内容与导航
-
-- `docs/guide/`：面向使用者的介绍、安装、快速开始、主题定制。
-- `docs/components/`：组件总览与各组件的使用/API 文档。
-- `docs/changelog.md` 与 `docs/en/changelog.md`：中英文版本更新记录。
-- `src/components/`：首页、主题编辑器、交互示例与示例容器。
-- `theme/`：Rspress 主题扩展和站点样式。
-
-`rspress.config.ts` 按路径分别配置指南和组件侧边栏。添加组件时同时更新总览、组件侧边栏和对应 MDX 页面。
-
-顶部版本号通过 Rspress 的 `afterNavTitle` 插槽展示，读取快照中的 `packages/react/package.json`，点击可切换已发布版本。每次 npm 发布都必须更新两份记录，具体步骤见 [发布文档](../../packages/react/RELEASING.md)。正式版本记录的标题格式由 `pnpm check:release` 校验，页面只记录已发布且面向使用者的变化，未发布草稿保留在 `docs` 目录之外。
-
-组件项的 text 使用实际导入名称，例如 DatePicker；tag 作为同一行的中文副标题，站点 SCSS 将其设置为更小、更浅的文字。不要在标题中拼接两种字号，或运行时修改 Rspress 的 DOM。
-
-导航与阅读样式集中在 `theme/index.scss`：侧栏主文字 15px、字重 500，中文副标题 12px，菜单行高 42px；顶部导航 16px，代码 13px。站点文字与组件预览的字体 token 分开调整，保持示例与实际组件一致。覆盖 Rspress 样式时使用布局作用域，确保当前项和悬停状态保持相同字号。语言入口复用 `theme/icons/languages.svg` 的 Lucide 图标，桌面和窄屏沿用 Rspress 的语言路由。
-
-字体由 `@fontsource-variable/inter` 本地打包加载，中文保留系统字体回退。首页的组件场景默认继承库的基础圆角和控件高度，只通过 `ConfigProvider` 切换主题色；不要再用站点 CSS 改写卡片圆角、阴影或内边距。正文排版规则排除 `.rp-not-doc`，保证可运行示例与实际组件一致。
-
-搜索和主题入口使用 Leaf UI `Button`。`SwitchAppearance` 保留 Rspress 的 `ThemeContext` 和主题存储，只替换交互控件，提供中英文的可访问名称和原生键盘操作；移动端沿用 Rspress 的菜单和路由。搜索文字在空间不足时省略，快捷键保持完整显示。
-
-不要将文档站运行命令、发布构建流程或仓库开发指南放入 `docs` 目录；其中的 Markdown 会成为在线页面并进入搜索索引。
-
-## 预览与代码模块
-
-首页的 HomeShowcase 提供组件、工作台和文件三种场景。组件场景在透明背景上以三列组织偏好表单、协作动态与空间创建，使用 34px 控件和按操作分组的按钮；窄屏按阅读顺序堆叠。工作台保留任务筛选、列表重排与两步弹窗。MotionGallery 展示选择、展开与保存反馈。示例中所有数据保存在本地 React 状态；保持中文/英文文案、窄屏和主题切换可用。ThemePlayground 同时展示表单控件和当前区域的动效开关。
-
-首页场景、主题编辑器与其颜色弹窗共用 `src/components/theme-colors.ts` 中的五种预设，顺序为主题绿、黑色、活力橙 `#ff6900`、亮蓝 `#1d9bf0` 和红色 `#cf0b2d`，默认绿色与组件库浅色主题一致。预设在深浅外观下均保持原色，实色按钮统一使用白色文字，Switch 滑块保持白色；浅底按钮、工作台选中菜单与分类标签保留可读的深色文字。编辑器将 ColorPicker 的 HEX / RGB / HSL 输出归一成 HEX，主题代码包含 `onPrimaryColor: '#fff'`。颜色选中圈及组件的选中、焦点和展开状态优先于 hover 样式。
-
-ComponentExample 在上方展示交互预览，下方同时展示源码，预览保持挂载。复制、换行和长代码展开行为读取同一份 MDX 高亮源码。通用示例布局（leaf-demo-*）和目录副标题样式位于 theme/index.scss，调整首页样式时必须保留这些共用规则。
-
-在 MDX 中使用 `ComponentExample`，将交互预览与源码包在同一个卡片内：
-
-````mdx
-import { ComponentExample } from '../../src/components/component-example';
-import { MyExample } from '../../src/components/my-example';
-
-<ComponentExample title="示例名称" preview={<MyExample />} fileName="example.tsx">
-
-```tsx lineNumbers
-import { Button } from '@ifhover/leaf-ui';
-
-<Button>示例按钮</Button>
-```
-
-</ComponentExample>
-````
-
-预览节点单独放在 `preview` 属性中，子内容使用 MDX 代码围栏，可用 `file="../../src/examples/button/variants.tsx"` 直接引用实际预览源码，避免演示与代码脱节。语法高亮在构建时生成；示例容器负责折叠、复制完整源码和代码换行。
-
-长代码默认折叠；短代码会完整展示。样式与行为定义在 `src/components/component-example.tsx` 和 `src/components/component-example.scss`。
-
-展开 / 收起使用测量得到的源码高度，默认约 160ms；收起底部保留渐变遮罩，展开按钮独立显示，系统减少动态效果时直接切换。`scripts/example-source.mjs` 在高亮与 AI Markdown 导出时按预览的语言消除文档专用 `english` 参数和翻译判断；用户看到、复制和 AI 获取的代码保持一致。ConfigProvider 示例中真实的语言切换状态不属于文档参数，继续保留。
-
-仓库整体架构见 [DEVELOPMENT.md](../../DEVELOPMENT.md)，组件开发约定见 [packages/react/DEVELOPMENT.md](../../packages/react/DEVELOPMENT.md)。
-
-## SCSS 与总览缩略图
-
-站点样式和示例模块使用 .scss，Rspress 的 builderConfig 启用 pluginSass。源码样式入口别名指向组件库的 src/styles/index.scss，消费者的 CSS 入口保持不变。
-
-总览位于 src/components/component-overview.tsx，采用静态 SVG 图片，资源保存在 docs/public/components。新增组件时更新卡片元数据和对应缩略图，无需在总览挂载交互组件。图标统一使用 lucide-react。
-
-选择类组件缩略图由 scripts/generate-picker-thumbnails.mjs 生成，包含静态控件与浮层示意，并复用 Lucide 图标；在此目录运行 `node scripts/generate-picker-thumbnails.mjs` 可重建。
-
-## API 与审计场景维护
-
-`node apps/docs/scripts/sync-component-api.mjs` 从公共 TypeScript 导出更新中英 API：简单联合类型直接展开，项目内对象类型链接到详细表格。生成器保留当前页面的人工说明与默认值，能够识别三列 / 四列表格与组合属性；`--from-ref=<git-ref>` 可恢复指定提交的说明。新增家族元数据在 scripts/component-metadata.mjs，AI 导出与 API 使用同一套页面映射。
-
-文档中的 API 表格默认值只写实际默认值；节点结构和回调信息无需制造默认值。每种示例要给出目的明确的标题或说明，不把不同状态挤成没有标识的一行。完整业务示例位于 src/examples/scenarios，包括复合字段 / 动态表单、Zod 校验与服务端错误、远程选项竞态。
-
-历史快照只复制版本导航和 AI 基础设施及其直接依赖。修改 export-ai-docs.mjs 的 import 后必须同步 build-versioned-site.mjs 的 platformFiles，并通过独立快照测试。未发布的新组件只进入工作区文档构建；线上与 `/v/` 仍按 npm gitHead 构建。
diff --git a/apps/docs/docs/api/component-defaults.mdx b/apps/docs/docs/api/component-defaults.mdx
new file mode 100644
index 0000000..6e9531e
--- /dev/null
+++ b/apps/docs/docs/api/component-defaults.mdx
@@ -0,0 +1,151 @@
+# 组件默认参数
+
+通过 ConfigProvider 的 `components` 设置区域内的组件默认参数。常用示例、命名规则和继承方式见[组件默认值](/components/config-provider#组件默认值)。
+
+## LeafComponentDefaults
+
+所有配置项均可选。每项接受下表列出的参数，或用 `null` 清除继承；点击类型可查看参数含义及组件内置默认值。必填项、模式关联值、泛型数据和命令式引用仍由实例提供。
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `Affix` | `Partial<Omit<`[`AffixProps`](../components/anchor#affix-api)`, 'key' \| 'ref'>> \| null` | 设置 Affix。 |
+| `Alert` | `Partial<Omit<`[`AlertProps`](../components/alert#alert-api)`, 'key' \| 'ref' \| 'title'>> \| null` | 设置 Alert。 |
+| `Anchor` | `Partial<Omit<`[`AnchorProps`](../components/anchor#anchor-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 Anchor。 |
+| `AppBar` | `Partial<Omit<`[`AppBarProps`](../components/app-bar#appbar-api)`, 'key' \| 'ref'>> \| null` | 设置 AppBar。 |
+| `AutoComplete` | `Partial<Omit<`[`AutoCompleteProps`](../components/auto-complete#autocomplete-api)`, 'key' \| 'ref' \| 'options'>> \| null` | 设置 AutoComplete。 |
+| `Avatar` | `Partial<Omit<`[`AvatarProps`](../components/avatar#avatar-api)`, 'key' \| 'ref'>> \| null` | 设置 Avatar。 |
+| `AvatarGroup` | `Partial<Omit<`[`AvatarGroupProps`](../components/avatar#avatargroupprops-api)`, 'key' \| 'ref'>> \| null` | 设置 AvatarGroup。 |
+| `BackTop` | `Partial<Omit<`[`BackTopProps`](../components/back-top#backtopprops-api)`, 'key' \| 'ref'>> \| null` | 设置 BackTop。 |
+| `Badge` | `Partial<Omit<`[`BadgeProps`](../components/badge#badge-api)`, 'key' \| 'ref'>> \| null` | 设置 Badge。 |
+| `BottomNavigation` | `Partial<Omit<`[`BottomNavigationProps`](../components/app-bar#bottomnavigation-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 BottomNavigation。 |
+| `Breadcrumb` | `Partial<Omit<`[`BreadcrumbProps`](../components/breadcrumb#breadcrumb-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 Breadcrumb。 |
+| `Button` | `Partial<Omit<`[`ButtonProps`](../components/button#button-api)`, 'key' \| 'ref'>> \| null` | 按钮的默认参数。 |
+| `ButtonGroup` | `Partial<Omit<`[`ButtonGroupProps`](../components/button#buttongroupprops-api)`, 'key' \| 'ref'>> \| null` | 设置 ButtonGroup。 |
+| `Calendar` | `Partial<Omit<`[`CalendarProps`](../components/calendar#calendar-api)`, 'key' \| 'ref'>> \| null` | 设置 Calendar。 |
+| `Card` | `Partial<Omit<`[`CardProps`](../components/card#card-api)`, 'key' \| 'ref'>> \| null` | 设置 Card。 |
+| `Carousel` | `Partial<Omit<`[`CarouselProps`](../components/carousel#carousel-api)`, 'key' \| 'ref'>> \| null` | 设置 Carousel。 |
+| `Cascader` | `Partial< Omit< `[`CascaderProps`](../components/cascader#cascader-api)`, 'key' \| 'ref' \| 'options' \| 'multiple' \| 'value' \| 'defaultValue' \| 'onChange' > > \| null` | 设置 Cascader。 |
+| `CheckableTag` | `Partial<Omit<`[`CheckableTagProps`](../components/tag#checkabletagprops-api)`, 'key' \| 'ref'>> \| null` | 设置 CheckableTag。 |
+| `Checkbox` | `Partial<Omit<`[`CheckboxProps`](../components/checkbox#checkbox-api)`, 'key' \| 'ref'>> \| null` | 设置 Checkbox。 |
+| `CheckboxGroup` | `Partial<Omit<`[`CheckboxGroupProps`](../components/checkbox#checkboxgroupprops-api)`, 'key' \| 'ref' \| 'options'>> \| null` | 设置 CheckboxGroup。 |
+| `Col` | `Partial<Omit<`[`ColProps`](../components/grid#colprops-api)`, 'key' \| 'ref'>> \| null` | 设置 Col。 |
+| `Collapse` | `Partial<Omit<`[`CollapseProps`](../components/collapse#collapse-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 Collapse。 |
+| `ColorPicker` | `Partial<Omit<`[`ColorPickerProps`](../components/color-picker#colorpicker-api)`, 'key' \| 'ref'>> \| null` | 设置 ColorPicker。 |
+| `CommandPalette` | `Partial<Omit<`[`CommandPaletteProps`](../components/command-palette#commandpalette-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 CommandPalette。 |
+| `Confirm` | `Partial<Omit<`[`ConfirmOptions`](../components/confirm#confirmoptions)`, 'key' \| 'ref'>> \| null` | 设置 Confirm。 |
+| `Countdown` | `Partial<Omit<`[`CountdownProps`](../components/statistic#countdown-api)`, 'key' \| 'ref' \| 'value'>> \| null` | 设置 Countdown。 |
+| `DataTable` | `Partial<Omit<`[`DataTablePresentationProps`](../components/table#datatablepresentation-api)`, 'tableRef'>> \| null` | 设置 DataTable。 |
+| `DataTableColumnVisibility` | `Partial<Omit<`[`DataTableColumnVisibilityProps`](../components/table#datatablecolumnvisibility-api)`, 'key' \| 'ref'>> \| null` | 设置 DataTableColumnVisibility。 |
+| `DataTableContent` | `Partial<Omit<`[`DataTableContentProps`](../components/table#datatablecontent-api)`, 'key' \| 'ref'>> \| null` | 设置 DataTableContent。 |
+| `DataTableFooter` | `Partial<Omit<HTMLAttributes<HTMLDivElement>, 'key' \| 'ref'>> \| null` | 设置 DataTableFooter。 |
+| `DataTablePagination` | `Partial<Omit<`[`DataTablePaginationProps`](../components/table#datatablepagination-api)`, 'key' \| 'ref'>> \| null` | 设置 DataTablePagination。 |
+| `DataTableSearch` | `Partial<Omit<`[`DataTableSearchProps`](../components/table#datatablesearch-api)`, 'key' \| 'ref'>> \| null` | 设置 DataTableSearch。 |
+| `DataTableToolbar` | `Partial<Omit<HTMLAttributes<HTMLDivElement>, 'key' \| 'ref'>> \| null` | 设置 DataTableToolbar。 |
+| `DatePicker` | `Partial< Omit<`[`DatePickerProps`](../components/date-picker#datepicker-api)`, 'key' \| 'ref' \| 'multiple' \| 'value' \| 'defaultValue' \| 'onChange'> > \| null` | 设置 DatePicker。 |
+| `DateRangePicker` | `Partial<Omit<`[`DateRangePickerProps`](../components/date-range-picker#daterangepicker-api)`, 'key' \| 'ref'>> \| null` | 设置 DateRangePicker。 |
+| `DateTimePicker` | `Partial<Omit<`[`DateTimePickerProps`](../components/date-time-picker#datetimepicker-api)`, 'key' \| 'ref'>> \| null` | 设置 DateTimePicker。 |
+| `Descriptions` | `Partial<Omit<`[`DescriptionsProps`](../components/descriptions#descriptionsprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 Descriptions。 |
+| `Divider` | `Partial<Omit<`[`DividerProps`](../components/divider#divider-api)`, 'key' \| 'ref'>> \| null` | 设置 Divider。 |
+| `Drawer` | `Partial<Omit<`[`DrawerProps`](../components/drawer#drawer-api)`, 'key' \| 'ref' \| 'open'>> \| null` | 设置 Drawer。 |
+| `Dropdown` | `Partial<Omit<`[`DropdownProps`](../components/dropdown#dropdown-api)`, 'key' \| 'ref' \| 'items' \| 'children'>> \| null` | 设置 Dropdown。 |
+| `Empty` | `Partial<Omit<`[`EmptyProps`](../components/result#empty-api)`, 'key' \| 'ref'>> \| null` | 设置 Empty。 |
+| `ErrorBoundary` | `Partial<Omit<`[`ErrorBoundaryProps`](../components/error-boundary#errorboundaryprops-api)`, 'key' \| 'ref'>> \| null` | 设置 ErrorBoundary。 |
+| `FileList` | `Partial<Omit<`[`FileListProps`](../components/file-list#filelistprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 FileList。 |
+| `Flex` | `Partial<Omit<`[`FlexProps`](../components/flex#flex-api)`, 'key' \| 'ref'>> \| null` | 设置 Flex。 |
+| `FloatButton` | `Partial<Omit<`[`FloatButtonProps`](../components/float-button#floatbutton-api)`, 'key' \| 'ref'>> \| null` | 设置 FloatButton。 |
+| `FloatButtonGroup` | `Partial<Omit<`[`FloatButtonGroupProps`](../components/float-button#floatbuttongroup-api)`, 'key' \| 'ref' \| 'actions'>> \| null` | 设置 FloatButtonGroup。 |
+| `Form` | `Partial<Omit<`[`FormProps`](../components/form#form-api)`, 'key' \| 'ref'>> \| null` | 设置 Form。 |
+| `FormErrorSummary` | `Partial<Omit<`[`FormErrorSummaryProps`](../components/form#formerrorsummaryprops-api)`, 'key' \| 'ref'>> \| null` | 设置 FormErrorSummary。 |
+| `FormField` | `Partial<Omit<`[`FormFieldProps`](../components/form#formfield-api)`, 'key' \| 'ref'>> \| null` | 设置 FormField。 |
+| `FormGroup` | `Partial<Omit<`[`FormGroupProps`](../components/form#formgroupprops-api)`, 'key' \| 'ref'>> \| null` | 设置 FormGroup。 |
+| `FormList` | `Partial< Omit< `[`FormListProps`](../components/form#formlistprops-api)`<unknown>, 'name' \| 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'itemKey' > > \| null` | 设置 FormList。 |
+| `Grid` | `Partial<Omit<`[`GridProps`](../components/grid#gridprops-api)`, 'key' \| 'ref'>> \| null` | 设置 Grid。 |
+| `Image` | `Partial<Omit<`[`ImageProps`](../components/image#imageprops-api)`, 'key' \| 'ref'>> \| null` | 设置 Image。 |
+| `ImagePreview` | `Partial< Omit<`[`ImagePreviewProps`](../components/image#imagepreviewprops-api)`, 'key' \| 'ref' \| 'items' \| 'open' \| 'onClose'> > \| null` | 设置 ImagePreview。 |
+| `ImagePreviewGroup` | `Partial<Omit<`[`ImagePreviewGroupProps`](../components/image#imagepreviewgroupprops-api)`, 'key' \| 'ref'>> \| null` | 设置 ImagePreviewGroup。 |
+| `InfiniteScroll` | `Partial< Omit<`[`InfiniteScrollProps`](../components/infinite-scroll#infinitescrollprops-api)`, 'key' \| 'ref' \| 'dataLength' \| 'hasMore' \| 'onLoadMore'> > \| null` | 设置 InfiniteScroll。 |
+| `Input` | `Partial<Omit<`[`InputProps`](../components/input#input-api)`, 'key' \| 'ref'>> \| null` | 输入框的默认参数，InputSearch 也继承这些输入参数。 |
+| `InputGroup` | `Partial<Omit<`[`InputGroupProps`](../components/input#inputgroupprops-api)`, 'key' \| 'ref'>> \| null` | 设置 InputGroup。 |
+| `InputMask` | `Partial<Omit<`[`InputMaskProps`](../components/input-mask#inputmaskprops-api)`, 'key' \| 'ref' \| 'mask'>> \| null` | 设置 InputMask。 |
+| `InputNumber` | `Partial< Omit< `[`InputNumberProps`](../components/input-number#inputnumber-api)`, 'key' \| 'ref' \| 'stringMode' \| 'value' \| 'defaultValue' \| 'onChange' \| 'min' \| 'max' \| 'step' > > \| null` | 设置 InputNumber。 |
+| `InputOTP` | `Partial<Omit<`[`InputOTPProps`](../components/input-otp#inputotpprops-api)`, 'key' \| 'ref'>> \| null` | 设置 InputOTP。 |
+| `InputSearch` | `Partial<Omit<`[`InputSearchProps`](../components/input#inputsearchprops-api)`, 'key' \| 'ref'>> \| null` | 搜索框默认参数，优先于 Input 配置。 |
+| `Layout` | `Partial<Omit<`[`LayoutProps`](../components/layout#layoutprops-api)`, 'key' \| 'ref'>> \| null` | 设置 Layout。 |
+| `LayoutContent` | `Partial<Omit<HTMLAttributes<HTMLElement>, 'key' \| 'ref'>> \| null` | 设置 LayoutContent。 |
+| `LayoutFooter` | `Partial<Omit<HTMLAttributes<HTMLElement>, 'key' \| 'ref'>> \| null` | 设置 LayoutFooter。 |
+| `LayoutHeader` | `Partial<Omit<HTMLAttributes<HTMLElement>, 'key' \| 'ref'>> \| null` | 设置 LayoutHeader。 |
+| `LayoutSider` | `Partial<Omit<`[`LayoutSiderProps`](../components/layout#layoutsiderprops-api)`, 'key' \| 'ref'>> \| null` | 设置 LayoutSider。 |
+| `Link` | `Partial<Omit<`[`LinkProps`](../components/typography#link-api)`, 'key' \| 'ref'>> \| null` | 设置 Link。 |
+| `Loading` | `Partial<Omit<`[`LoadingProps`](../components/loading#loading-api)`, 'key' \| 'ref'>> \| null` | 设置 Loading。 |
+| `LoadingBar` | `Partial<Omit<`[`LoadingBarProps`](../components/loading-bar#loadingbarprops-api)`, 'key' \| 'ref' \| 'active' \| 'progress'>> \| null` | 设置 LoadingBar。 |
+| `Masonry` | `Partial<Omit<`[`MasonryProps`](../components/masonry#masonryprops-api)`, 'key' \| 'ref'>> \| null` | 设置 Masonry。 |
+| `Mentions` | `Partial<Omit<`[`MentionsProps`](../components/mentions#mentions-api)`, 'key' \| 'ref' \| 'options'>> \| null` | 设置 Mentions。 |
+| `Menu` | `Partial<Omit<`[`MenuProps`](../components/menu#menuprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 Menu。 |
+| `Message` | `Partial<Omit<`[`MessageOptions`](../components/message#messageoptions)`, 'key' \| 'content'>> \| null` | 设置 Message。 |
+| `Modal` | `Partial<Omit<`[`ModalProps`](../components/modal#modal-api)`, 'key' \| 'ref' \| 'open'>> \| null` | 弹窗默认参数。 |
+| `Notification` | `Partial<Omit<`[`NotificationOptions`](../components/notification#notificationoptions-api)`, 'key' \| 'title'>> \| null` | 设置 Notification。 |
+| `Pagination` | `Partial<Omit<`[`PaginationProps`](../components/pagination#pagination-api)`, 'key' \| 'ref' \| 'total'>> \| null` | 设置 Pagination。 |
+| `Paragraph` | `Partial<Omit<`[`ParagraphProps`](../components/typography#paragraph-api)`, 'key' \| 'ref'>> \| null` | 设置 Paragraph。 |
+| `Popconfirm` | `Partial<Omit<`[`PopconfirmProps`](../components/popconfirm#popconfirmprops-api)`, 'key' \| 'ref' \| 'children' \| 'title'>> \| null` | 设置 Popconfirm。 |
+| `Popover` | `Partial<Omit<`[`PopoverProps`](../components/popover#popover-api)`, 'key' \| 'ref' \| 'children' \| 'content'>> \| null` | 设置 Popover。 |
+| `Progress` | `Partial<Omit<`[`ProgressProps`](../components/progress#progress-api)`, 'key' \| 'ref'>> \| null` | 设置 Progress。 |
+| `QRCode` | `Partial<Omit<`[`QRCodeProps`](../components/qr-code#qrcodeprops-api)`, 'key' \| 'ref' \| 'value'>> \| null` | 设置 QRCode。 |
+| `Radio` | `Partial<Omit<`[`RadioProps`](../components/radio#radio-api)`, 'key' \| 'ref'>> \| null` | 设置 Radio。 |
+| `RadioGroup` | `Partial<Omit<`[`RadioGroupProps`](../components/radio#radiogroup-api)`, 'key' \| 'ref' \| 'options'>> \| null` | 设置 RadioGroup。 |
+| `Rate` | `Partial<Omit<`[`RateProps`](../components/rate#rate-api)`, 'key' \| 'ref'>> \| null` | 设置 Rate。 |
+| `Result` | `Partial<Omit<`[`ResultProps`](../components/result#result-api)`, 'key' \| 'ref'>> \| null` | 设置 Result。 |
+| `Row` | `Partial<Omit<`[`RowProps`](../components/grid#rowprops-api)`, 'key' \| 'ref'>> \| null` | 设置 Row。 |
+| `ScrollArea` | `Partial<Omit<`[`ScrollAreaProps`](../components/scroll-area#scrollareaprops-api)`, 'key' \| 'ref'>> \| null` | 设置 ScrollArea。 |
+| `Scrollbar` | `Partial<Omit<`[`ScrollbarProps`](../components/scrollbar#scrollbar-api)`, 'key' \| 'ref'>> \| null` | 设置 Scrollbar。 |
+| `Segmented` | `Partial<Omit<`[`SegmentedProps`](../components/segmented#segmentedprops-api)`, 'key' \| 'ref' \| 'options'>> \| null` | 设置 Segmented。 |
+| `Select` | `Partial< Omit< `[`SelectProps`](../components/select#select-api)`, 'key' \| 'ref' \| 'options' \| 'multiple' \| 'value' \| 'defaultValue' \| 'onChange' > > \| null` | 选择器默认参数；模式、值与变更回调仍由实例设置。 |
+| `Skeleton` | `Partial<Omit<`[`SkeletonProps`](../components/skeleton#skeleton-api)`, 'key' \| 'ref'>> \| null` | 设置 Skeleton。 |
+| `Slider` | `Partial< Omit<`[`SliderProps`](../components/slider#slider-api)`, 'key' \| 'ref' \| 'range' \| 'value' \| 'defaultValue' \| 'onChange'> > \| null` | 设置 Slider。 |
+| `Space` | `Partial<Omit<`[`SpaceProps`](../components/space#spaceprops-api)`, 'key' \| 'ref'>> \| null` | 设置 Space。 |
+| `SplitButton` | `Partial<Omit<`[`SplitButtonProps`](../components/button#splitbuttonprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 SplitButton。 |
+| `Splitter` | `Partial<Omit<`[`SplitterProps`](../components/splitter#splitter-api)`, 'key' \| 'ref' \| 'panels'>> \| null` | 设置 Splitter。 |
+| `Statistic` | `Partial<Omit<`[`StatisticProps`](../components/statistic#statistic-api)`, 'key' \| 'ref' \| 'value'>> \| null` | 设置 Statistic。 |
+| `Steps` | `Partial<Omit<`[`StepsProps`](../components/steps#steps-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 Steps。 |
+| `Switch` | `Partial<Omit<`[`SwitchProps`](../components/switch#switch-api)`, 'key' \| 'ref'>> \| null` | 设置 Switch。 |
+| `Table` | `Partial<Omit<`[`TableProps`](../components/table#table-api)`, 'key' \| 'ref' \| 'scrollRef'>> \| null` | 设置 Table。 |
+| `TableBody` | `Partial<Omit<HTMLAttributes<HTMLTableSectionElement>, 'key' \| 'ref'>> \| null` | 设置 TableBody。 |
+| `TableCaption` | `Partial<Omit<HTMLAttributes<HTMLTableCaptionElement>, 'key' \| 'ref'>> \| null` | 设置 TableCaption。 |
+| `TableCell` | `Partial<Omit<`[`TableCellProps`](../components/table#tablecell-api)`, 'key' \| 'ref'>> \| null` | 设置 TableCell。 |
+| `TableColumnHeader` | `Partial<Omit<`[`TableColumnHeaderProps`](../components/table#tablecolumnheader-api)`, 'key' \| 'ref'>> \| null` | 设置 TableColumnHeader。 |
+| `TableEmpty` | `Partial<Omit<`[`TableStateProps`](../components/table#tablestate-api)`, 'key' \| 'ref'>> \| null` | 设置 TableEmpty。 |
+| `TableError` | `Partial<Omit<`[`TableErrorProps`](../components/table#tableerror-api)`, 'key' \| 'ref'>> \| null` | 设置 TableError。 |
+| `TableFooter` | `Partial<Omit<HTMLAttributes<HTMLTableSectionElement>, 'key' \| 'ref'>> \| null` | 设置 TableFooter。 |
+| `TableHeader` | `Partial<Omit<HTMLAttributes<HTMLTableSectionElement>, 'key' \| 'ref'>> \| null` | 设置 TableHeader。 |
+| `TableLoading` | `Partial<Omit<`[`TableStateProps`](../components/table#tablestate-api)`, 'key' \| 'ref'>> \| null` | 设置 TableLoading。 |
+| `TableRow` | `Partial<Omit<`[`TableRowProps`](../components/table#tablerow-api)`, 'key' \| 'ref'>> \| null` | 设置 TableRow。 |
+| `Tabs` | `Partial<Omit<`[`TabsProps`](../components/tabs#tabs-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 Tabs。 |
+| `Tag` | `Partial<Omit<`[`TagProps`](../components/tag#tag-api)`, 'key' \| 'ref'>> \| null` | 设置 Tag。 |
+| `TagGroup` | `Partial<Omit<`[`TagGroupProps`](../components/tag#taggroupprops-api)`, 'key' \| 'ref' \| 'options'>> \| null` | 设置 TagGroup。 |
+| `Text` | `Partial<Omit<`[`TextProps`](../components/typography#text-api)`, 'key' \| 'ref'>> \| null` | 设置 Text。 |
+| `Textarea` | `Partial<Omit<`[`TextareaProps`](../components/textarea#textarea-api)`, 'key' \| 'ref'>> \| null` | 设置 Textarea。 |
+| `Timeline` | `Partial<Omit<`[`TimelineProps`](../components/timeline#timelineprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 Timeline。 |
+| `TimePicker` | `Partial<Omit<`[`TimePickerProps`](../components/time-picker#timepicker-api)`, 'key' \| 'ref'>> \| null` | 设置 TimePicker。 |
+| `TimeRangePicker` | `Partial<Omit<`[`TimeRangePickerProps`](../components/time-range-picker#timerangepickerprops-api)`, 'key' \| 'ref'>> \| null` | 设置 TimeRangePicker。 |
+| `Title` | `Partial<Omit<`[`TitleProps`](../components/typography#title-api)`, 'key' \| 'ref'>> \| null` | 设置 Title。 |
+| `Toolbar` | `Partial<Omit<`[`ToolbarProps`](../components/app-bar#toolbar-api)`, 'key' \| 'ref'>> \| null` | 设置 Toolbar。 |
+| `Tooltip` | `Partial<Omit<`[`TooltipProps`](../components/tooltip#tooltip-api)`, 'key' \| 'ref' \| 'content' \| 'children'>> \| null` | 设置 Tooltip。 |
+| `Tour` | `Partial<Omit<`[`TourProps`](../components/tour#tour-api)`, 'key' \| 'ref' \| 'open' \| 'steps'>> \| null` | 设置 Tour。 |
+| `Transfer` | `Partial<Omit<`[`TransferProps`](../components/transfer#transferprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | 设置 Transfer。 |
+| `Tree` | `Partial<Omit<`[`TreeProps`](../components/tree#tree-api)`, 'key' \| 'ref' \| 'data'>> \| null` | 设置 Tree。 |
+| `TreeSelect` | `Partial< Omit< `[`TreeSelectProps`](../components/tree-select#treeselect-api)`, \| 'key' \| 'ref' \| 'options' \| 'multiple' \| 'treeCheckable' \| 'value' \| 'defaultValue' \| 'onChange' > > \| null` | 设置 TreeSelect。 |
+| `Typography` | `Partial<Omit<`[`TypographyProps`](../components/typography#typography-api)`, 'key' \| 'ref'>> \| null` | 设置 Typography。 |
+| `Upload` | `Partial<Omit<`[`UploadProps`](../components/upload#uploadprops-api)`, 'key' \| 'ref'>> \| null` | 设置 Upload。 |
+| `VirtualList` | `(Partial< Omit<`[`VirtualListProps`](../components/virtual-list#virtuallistprops-api)`<unknown>, 'items' \| 'itemKey' \| 'renderItem' \| 'estimateSize'> > & { estimateSize?: number }) \| null` | 设置 VirtualList。 |
+
+## 类型导入
+
+```tsx
+import type { LeafComponentDefaults } from '@ifhover/leaf-ui';
+
+const components = {
+  Button: { variant: 'outline' },
+  Confirm: { confirmText: '继续', cancelText: '返回' },
+} satisfies LeafComponentDefaults;
+```
+
+将该对象传给 `<ConfigProvider components={components}>`。实例参数和服务的单次调用参数仍优先于区域默认值。
diff --git a/apps/docs/docs/api/index.mdx b/apps/docs/docs/api/index.mdx
new file mode 100644
index 0000000..6f2a211
--- /dev/null
+++ b/apps/docs/docs/api/index.mdx
@@ -0,0 +1,14 @@
+# API 参考
+
+这里提供全局配置的完整字段，方便有进阶需求时查询。常用写法和可运行示例见 [ConfigProvider](/components/config-provider)。
+
+## 全局配置
+
+| 参考 | 用途 |
+| --- | --- |
+| [LeafComponentDefaults](./component-defaults#leafcomponentdefaults) | 可配置的组件名称和默认参数范围。 |
+| [LeafThemeTokens](./theme-tokens#leafthemetokens) | 单独覆盖主题自动生成的样式。 |
+| [PopupOptions](./popup-options#popupoptions) | 选择器与浮层共用的挂载容器、位置和内容定制参数。 |
+| [翻译资源](./translations) | 补充自定义语言、设置回退顺序并检查 JSON。 |
+
+各组件自身的参数、默认值和示例仍在对应组件文档中查询。
diff --git a/apps/docs/docs/api/popup-options.mdx b/apps/docs/docs/api/popup-options.mdx
new file mode 100644
index 0000000..8ded464
--- /dev/null
+++ b/apps/docs/docs/api/popup-options.mdx
@@ -0,0 +1,15 @@
+# PopupOptions
+
+Select、日期与时间选择器等组件共用的浮层参数。单个组件的配置优先于 ConfigProvider 的 `getPopupContainer`；Modal、Drawer 的挂载容器参数名为 `container`。
+
+## PopupOptions
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `popupPlacement` | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | 浮层相对触发控件的位置。 |
+| `popupClassName` | `string` | 浮层的自定义类名。 |
+| `popupStyle` | `CSSProperties` | 浮层的自定义样式。 |
+| `popupRender` | `(content: React.ReactNode) => React.ReactNode` | 包装或补充面板内容，保留传入的内容以维持交互。 |
+| `getPopupContainer` | `() => Element \| DocumentFragment` | 返回浮层的挂载容器，也可返回 ShadowRoot。 |
+
+容器应在交互前挂载，并避免裁剪浮层。通过函数延迟访问 DOM；使用 ShadowRoot 时，也需在对应的影子根内加载组件样式。各组件的默认位置和附加选项见对应组件文档。
diff --git a/apps/docs/docs/api/theme-tokens.mdx b/apps/docs/docs/api/theme-tokens.mdx
new file mode 100644
index 0000000..9cab2a2
--- /dev/null
+++ b/apps/docs/docs/api/theme-tokens.mdx
@@ -0,0 +1,97 @@
+# 主题变量
+
+日常定制优先设置 ConfigProvider 的 `theme.primaryColor`、`theme.borderRadius` 和 `theme.controlHeight`，其他样式会自动派生，见[定制主题](/guide/theming)。
+
+## LeafThemeTokens
+
+需要单独调整某个派生值时，再通过 `theme.tokens` 覆盖。所有字段均可选，嵌套区域继承未设置的字段。长度为数字时按 px 处理，动效时长为数字时按 ms 处理。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `onPrimaryColor` | `string` | 按主题生成 | 主题背景上的文字色 |
+| `dangerColor` | `string` | 按外观生成 | 危险色 / 危险背景上的文字色 |
+| `onDangerColor` | `string` | 按外观生成 | 危险色 / 危险背景上的文字色 |
+| `successColor` | `string` | 按外观生成 | 成功 / 警告 / 信息颜色 |
+| `warningColor` | `string` | 按外观生成 | 成功 / 警告 / 信息颜色 |
+| `infoColor` | `string` | 按外观生成 | 成功 / 警告 / 信息颜色 |
+| `textColor` | `string` | 按外观生成 | 主要 / 次要文字 |
+| `mutedTextColor` | `string` | 按外观生成 | 主要 / 次要文字 |
+| `subtleTextColor` | `string` | — | 更轻的辅助文字色。 |
+| `surfaceColor` | `string` | 按外观生成 | 表面 / 次级表面 |
+| `mutedSurfaceColor` | `string` | 按外观生成 | 表面 / 次级表面 |
+| `raisedSurfaceColor` | `string` | — | 浮层与抬升表面色。 |
+| `borderColor` | `string` | 按外观生成 | 中性边框 |
+| `borderHoverColor` | `string` | — | 悬停时的中性边框色。 |
+| `dividerColor` | `string` | — | 分区分隔线颜色；默认从边框和表面颜色派生。 |
+| `borderRadiusSm` | `number \| string` | `基础圆角 × 0.6` | 单独覆盖小 / 大圆角 |
+| `borderRadiusMd` | `number \| string` | `基础圆角 × 1.2` | 单独覆盖卡片、提示等内容表面的中圆角 |
+| `borderRadiusLg` | `number \| string` | 基础圆角 × 1.6 | 单独覆盖大圆角 |
+| `controlHeightSm` | `number \| string` | 基础高度 − 6px，最小 1px | 单独覆盖小尺寸控件高度 |
+| `controlHeightLg` | `number \| string` | 基础高度 + 6px | 单独覆盖大尺寸控件高度 |
+| `fontSizeSm` | `number \| string` | `基础字号 − 1px` | 单独覆盖小 / 大字号 |
+| `fontSizeLg` | `number \| string` | 基础字号 + 2px | 单独覆盖大字号 |
+| `fontWeight` | `number` | `500` | 按钮、标签与组件标题的强调字重 |
+| `motionDuration` | `number \| string` | `200` | 基础过渡时间；数字为 ms，也支持 CSS 时间。motion=false 时为 0。 |
+| `motionEasing` | `string` | `'cubic-bezier(0.22, 1, 0.36, 1)'` | 悬停、内容与普通过渡的曲线。 |
+| `motionSpring` | `string` | `'cubic-bezier(0.22, 1.28, 0.36, 1)'` | 选择与形状变化的轻微弹性曲线。 |
+| `popupZIndex` | `number` | `1000` | 浮层 / 弹窗 / 消息层级 |
+| `modalZIndex` | `number` | `1100` | 浮层 / 弹窗 / 消息层级 |
+| `messageZIndex` | `number` | `1200` | 浮层 / 弹窗 / 消息层级 |
+| `buttonBorderRadius` | `number \| string` | 当前控件尺寸 | 仅按钮的圆角 / 共用高度覆盖 |
+| `buttonHeight` | `number \| string` | 当前控件尺寸 | 仅按钮的圆角 / 共用高度覆盖 |
+| `choiceBorderRadius` | `number \| string` | 基础圆角 × 0.5 | 复选框圆角 |
+| `focusColor` | `string` | 当前语义色自动生成 | 焦点轮廓颜色 |
+| `primaryHoverColor` | `string` | 主题色自动生成 | 主色悬停 / 按下 |
+| `primaryActiveColor` | `string` | 主题色自动生成 | 主色悬停 / 按下 |
+| `primarySoftColor` | `string` | 主题色自动生成 | 主色柔和背景与交互状态 |
+| `primarySoftHoverColor` | `string` | 主题色自动生成 | 主色柔和背景与交互状态 |
+| `primarySoftActiveColor` | `string` | 主题色自动生成 | 主色柔和背景与交互状态 |
+| `primaryBorderColor` | `string` | 主题色自动生成 | 主题色边框 |
+| `dangerHoverColor` | `string` | 危险色自动生成 | 危险状态悬停 / 按下 |
+| `dangerActiveColor` | `string` | 危险色自动生成 | 危险状态悬停 / 按下 |
+| `spacingSm` | `number \| string` | — | 设置 spacingSm。 |
+| `spacingLg` | `number \| string` | — | 设置 spacingLg。 |
+| `shadowSm` | `string` | — | 设置 shadowSm。 |
+| `shadowXs` | `string` | — | 最轻的表面阴影。 |
+| `shadowMd` | `string` | — | 设置 shadowMd。 |
+| `shadowLg` | `string` | — | 设置 shadowLg。 |
+| `lineHeight` | `number` | — | 正文行高。 |
+
+## 类型导入
+
+```tsx
+import type { LeafThemeTokens } from '@ifhover/leaf-ui';
+
+const tokens = {
+  controlHeightSm: 28,
+  borderRadiusLg: 14,
+} satisfies LeafThemeTokens;
+```
+
+将该对象传给 `<ConfigProvider theme={{ tokens }}>`。
+
+## LeafComponentTokens
+
+供 `theme.components` 按组件名称覆盖样式。各组件支持的字段以组件文档为准。
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `borderRadius` | `string \| number` | 圆角；数字表示像素。 |
+| `controlHeight` | `string \| number` | 控件高度；数字表示像素。 |
+| `padding` | `string \| number` | 内容内边距。 |
+| `gap` | `string \| number` | 子项之间的间距。 |
+| `fontSize` | `string \| number` | 字号；数字表示像素。 |
+| `color` | `string` | 颜色或语义色。 |
+| `background` | `string` | 组件表面背景。 |
+| `borderColor` | `string` | 外层边框与分区分隔线颜色。 |
+| `headerBackground` | `string` | 标题区域背景。 |
+| `footerBackground` | `string` | 底部操作区域背景。 |
+| `shadow` | `string` | CSS box-shadow 的值。 |
+
+## LeafThemeStyle
+
+带 `--leaf-*` 自定义属性的 React 样式类型。业务 CSS 读取变量的示例见 [定制主题](/guide/theming#在业务样式中使用主题)。
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `` [key: `--leaf-${string}`] `` | `string \| number \| undefined` | 可复用的 CSS 自定义属性。 |
diff --git a/apps/docs/docs/api/translations.mdx b/apps/docs/docs/api/translations.mdx
new file mode 100644
index 0000000..de5bfd2
--- /dev/null
+++ b/apps/docs/docs/api/translations.mdx
@@ -0,0 +1,98 @@
+import { withBase } from '@rspress/core/runtime';
+
+# 翻译资源
+
+通过 ConfigProvider 的 `translations` 补充语言，`locale` 决定当前语言与回退顺序。[查看可运行示例](/components/config-provider#补充自己的语言)。
+
+## 从 JSON 开始
+
+复制<a href={withBase('/locales/en-US.json')} download>完整英文模板</a>，按原有键翻译内容。模板与组件实际使用的资源一致，也可从安装的包中读取：
+
+```ts
+import enUS from '@ifhover/leaf-ui/locales/en-US.json';
+```
+
+内置的 `zh-CN.json`、`zh-TW.json`、`ja-JP.json`、`ko-KR.json` 使用同一路径。使用内置语言只需设置 `locale`，无需导入这些文件。JSON 只保存文本；对象按组件分组，通用动作在 `common` 中。不需要注册或调用辅助函数。
+
+以下用火星文演示自定义资源，`zh-CN-x-mars` 是私用语言标记，日期和数字按简体中文格式显示：
+
+```tsx
+import { ConfigProvider } from '@ifhover/leaf-ui';
+import mars from './locales/zh-CN-x-mars.json';
+
+const translations = { 'zh-CN-x-mars': mars };
+
+<ConfigProvider locale={['zh-CN-x-mars', 'en-US']} translations={translations}>
+  <App />
+</ConfigProvider>;
+```
+
+## 回退与继承
+
+| 情况 | 行为 |
+| --- | --- |
+| `locale="zh-CN-x-mars"` | 等价于 `['zh-CN-x-mars']`；缺词时回退内置英文 |
+| `locale={['zh-CN-x-mars', 'zh-CN']}` | 每个词条先找火星文，再找简体中文，最后找内置英文 |
+| 第一项语言 | 决定区域的 `lang`、日期和数字的 Intl 格式，不随单个词条回退而变化 |
+| 覆盖内置语言 | 提供同名语言资源，只覆盖写出的词条 |
+| 嵌套 `translations` | 按语言、分组和词条合并，内层覆盖外层 |
+| 嵌套 `locale` | 未传则继承，传入后替换整条链，不拼接 |
+| 空字符串 | 保留为空；只有缺失或 `undefined` 才继续回退 |
+| 星期数组 | 完整替换，固定为周一到周日的 7 项；`weekStartsOn` 决定显示顺序 |
+
+语言代码使用有效的 BCP 47 标签；空数组或无效标签会抛出错误。需要 `fr-CA → fr` 时显式写出这两项。最终英文兜底始终使用库内置资源，若需自定义英文也参与查找，请把 `en-US` 放进链中。
+
+组件实例参数与 `components` 提供的文字优先于翻译资源。业务内容由应用翻译。翻译不会自动改变 `direction` 或 `weekStartsOn`，需要时单独设置。
+
+## 动态文本
+
+句子使用 ICU MessageFormat 占位符，译者可以调整完整语序，也可以定义复数：
+
+```json
+{
+  "pagination": {
+    "total": "{total, plural, one {# item} other {# items}}"
+  }
+}
+```
+
+保留英文模板中的变量名，例如 `{total}`、`{label}`。复数规则使用实际提供该词条的语言。模板无效时该句回退内置英文，开发环境会输出对应词条的警告；内容作为普通文本渲染。
+
+## 检查翻译
+
+安装包提供 <a href={withBase('/locales/schema.json')} download>JSON Schema</a>，编辑器可将它关联到翻译文件。也可在 JSON 顶层添加 `$schema` 指向本地安装包的 `dist/locales/schema.json`，运行时会忽略此字段。
+
+检查未知键、遗漏和 ICU 变量：
+
+```bash
+pnpm exec leaf-ui-check-translations ./locales/zh-CN-x-mars.json --allow-partial
+```
+
+有意只翻译部分词条时使用 `--allow-partial`。此时仍检查结构、拼写和变量，缺失项只输出清单。组件升级后重新检查，可找到需要补充的词条。
+
+## 类型
+
+```ts
+import type { LeafTranslation, LeafTranslations } from '@ifhover/leaf-ui';
+
+const mars = {
+  select: { placeholder: '挑①個唄' },
+} satisfies LeafTranslation;
+
+const translations = { 'zh-CN-x-mars': mars } satisfies LeafTranslations;
+```
+
+### LeafTranslations
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `[languageTag]` | [`LeafTranslation`](#leaftranslation) | 该语言的部分或完整翻译；标签大小写会按 BCP 47 规范化 |
+
+### LeafTranslation
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| `[group]` | `Partial<Record<entry, string \| readonly string[]>>` | 英文模板定义的分组和词条，例如 `common.confirm`、`select.placeholder`；类型提示限制为实际存在的键 |
+| `$schema` | `string` | 可选的编辑器校验路径，不参与运行时翻译 |
+
+翻译资源是只读配置；更新时传入新对象。资源保留在当前 Provider 内，不写入全局注册表。SSR 时服务端与客户端传入相同的语言链、JSON 和初始值，详见 [服务端渲染](/guide/ssr)。
diff --git a/apps/docs/docs/changelog.md b/apps/docs/docs/changelog.md
index f503ee8..209f62c 100644
--- a/apps/docs/docs/changelog.md
+++ b/apps/docs/docs/changelog.md
@@ -1,6 +1,5 @@
 ---
-pageType: doc-wide
-sidebar: false
+sidebar: placeholder
 footer: false
 ---
 
diff --git a/apps/docs/docs/components/auto-complete.mdx b/apps/docs/docs/components/auto-complete.mdx
index 7de343c..2046a1d 100644
--- a/apps/docs/docs/components/auto-complete.mdx
+++ b/apps/docs/docs/components/auto-complete.mdx
@@ -10,7 +10,7 @@ import { AutoCompleteBasic, AutoCompleteSearch } from '../../src/components/form
 
 通过 `options` 设置建议，默认按显示文本进行不区分大小写的包含匹配。`onChange` 响应输入和选择，`onSelect` 仅响应选择建议。
 
-<ComponentExample title="输入与选择建议" preview={<AutoCompleteBasic />} fileName="basic.tsx">
+<ComponentExample title="输入与选择建议" preview={<AutoCompleteBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/auto-complete/basic.tsx"
 ```
@@ -21,7 +21,7 @@ import { AutoCompleteBasic, AutoCompleteSearch } from '../../src/components/form
 
 `onSearch` 接收用户输入。建议由你生成或从服务端获取时，可设置 `filterOption={false}` 直接展示传入结果。
 
-<ComponentExample title="动态邮箱建议" preview={<AutoCompleteSearch />} fileName="search.tsx">
+<ComponentExample title="动态邮箱建议" preview={<AutoCompleteSearch />} fileName="search.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/auto-complete/search.tsx"
 ```
@@ -62,12 +62,12 @@ import { AutoCompleteBasic, AutoCompleteSearch } from '../../src/components/form
 | `allowClear` | `boolean` | — | 展示清除操作。 |
 | `virtual` | `boolean` | — | 启用虚拟滚动；大量选项默认启用。 |
 | `listHeight` | `number` | `248` | 可视列表高度。 |
-| `optionHeight` | `number` | `36` | 虚拟选项的估算高度；实际行会被测量。 |
-| `popupPlacement` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['popupPlacement']` | — | 浮层相对触发控件的位置。 |
+| `optionHeight` | `number` | `32` | 跟随区域控件高度和密度的预估行高；实际行会被测量。 |
+| `popupPlacement` | [`PopupOptions`](../api/popup-options#popupoptions)`['popupPlacement']` | — | 浮层相对触发控件的位置。 |
 | `popupClassName` | `string` | — | 浮层的自定义类名。 |
-| `popupStyle` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['popupStyle']` | — | 浮层的自定义样式。 |
-| `popupRender` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['popupRender']` | — | 包装或补充面板内容，保留传入的内容以维持交互。 |
-| `getPopupContainer` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['getPopupContainer']` | — | 返回浮层的挂载容器，也可返回 ShadowRoot。 |
+| `popupStyle` | [`PopupOptions`](../api/popup-options#popupoptions)`['popupStyle']` | — | 浮层的自定义样式。 |
+| `popupRender` | [`PopupOptions`](../api/popup-options#popupoptions)`['popupRender']` | — | 包装或补充面板内容，保留传入的内容以维持交互。 |
+| `getPopupContainer` | [`PopupOptions`](../api/popup-options#popupoptions)`['getPopupContainer']` | — | 返回浮层的挂载容器，也可返回 ShadowRoot。 |
 | `disabled` | `boolean` | `false` | 禁用交互。 |
 | `readOnly` | `boolean` | `false` | 锁定业务值，禁止输入、选择、清除和删除。 |
 | `ref` | `Ref<HTMLInputElement>` | — | 输入框引用 |
diff --git a/apps/docs/docs/components/button.mdx b/apps/docs/docs/components/button.mdx
index 2db4698..dc348ff 100644
--- a/apps/docs/docs/components/button.mdx
+++ b/apps/docs/docs/components/button.mdx
@@ -19,7 +19,7 @@ import { ButtonDanger, ButtonVariants, ButtonSizes, ButtonStates, ButtonIcons, B
 
 </ComponentExample>
 
-使用前，在应用入口导入一次 `@ifhover/leaf-ui/styles.css`。接入步骤见[快速开始](/guide/getting-started)。
+组件样式会自动加载，接入步骤见[快速开始](/guide/getting-started)。
 
 ## 危险操作
 
diff --git a/apps/docs/docs/components/calendar.mdx b/apps/docs/docs/components/calendar.mdx
index d73cf14..fb67a0f 100644
--- a/apps/docs/docs/components/calendar.mdx
+++ b/apps/docs/docs/components/calendar.mdx
@@ -9,7 +9,7 @@ import { CalendarMonth } from '../../src/examples/calendar/month';
 
 ## 日程日历
 
-<ComponentExample title="日程日历" preview={<CalendarBasic />} fileName="basic.tsx">
+<ComponentExample title="日程日历" preview={<CalendarBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/calendar/basic.tsx"
 ```
@@ -18,7 +18,7 @@ import { CalendarMonth } from '../../src/examples/calendar/month';
 
 ## 紧凑日历与禁用日期
 
-<ComponentExample title="紧凑日历与禁用日期" preview={<CalendarCompact />} fileName="compact.tsx">
+<ComponentExample title="紧凑日历与禁用日期" preview={<CalendarCompact />} fileName="compact.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/calendar/compact.tsx"
 ```
@@ -27,7 +27,7 @@ import { CalendarMonth } from '../../src/examples/calendar/month';
 
 ## 选择月份
 
-<ComponentExample title="选择月份" preview={<CalendarMonth />} fileName="month.tsx">
+<ComponentExample title="选择月份" preview={<CalendarMonth />} fileName="month.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/calendar/month.tsx"
 ```
@@ -63,4 +63,4 @@ import type { CalendarProps } from '@ifhover/leaf-ui';
 
 `fullscreen={false}` 展示紧凑日历。`cellRender` 中使用文字、图标等非交互内容，避免在日期按钮内嵌套按钮。禁用选中项保留清晰的灰色状态，不会再次触发选择。
 
-方向键移动日期，Home / End 跳至一行首尾，PageUp / PageDown 切换月份。SSR 页面应提供一致的初始日期，详见 [SSR 使用](/guide/ssr)。
+方向键移动日期，Home / End 跳至一行首尾，PageUp / PageDown 切换月份。SSR 页面应提供一致的初始日期，详见 [服务端渲染](/guide/ssr)。
diff --git a/apps/docs/docs/components/card.mdx b/apps/docs/docs/components/card.mdx
index 02526f1..9b3f516 100644
--- a/apps/docs/docs/components/card.mdx
+++ b/apps/docs/docs/components/card.mdx
@@ -1,6 +1,9 @@
 import { CardSections } from '../../src/examples/card/sections';
 import { ComponentExample } from '../../src/components/component-example';
 import { CardBasic } from '../../src/examples/card/basic';
+import { CardSizes } from '../../src/examples/card/sizes';
+import { CardTabs } from '../../src/examples/card/tabs';
+import { CardTabsWithTitle } from '../../src/examples/card/tabs-with-title';
 
 # Card 卡片
 
@@ -8,51 +11,109 @@ import { CardBasic } from '../../src/examples/card/basic';
 
 ## 基础用法
 
-<ComponentExample title="基础用法" preview={<CardBasic />} fileName="basic.tsx">
+<ComponentExample title="基础用法" preview={<CardBasic />} fileName="basic.tsx" width={520}>
 
 ```tsx lineNumbers file="../../src/examples/card/basic.tsx"
 ```
 
 </ComponentExample>
 
+## 尺寸
+
+`size` 提供小、默认和大三种尺寸，同时调整卡片内边距、标题字号与标题栏高度。内嵌 Tabs 默认跟随卡片尺寸，也可通过 `tabs.size` 单独设置；卡片内的按钮、输入框等控件使用各自的 `size`。
+
+下面的三张卡片展示相同内容，方便对比标题、标签栏与正文留白；每张卡片的标签均可独立切换。
+
+<ComponentExample title="尺寸" preview={<CardSizes />} fileName="sizes.tsx" width={520}>
+
+```tsx lineNumbers file="../../src/examples/card/sizes.tsx"
+```
+
+</ComponentExample>
+
 ## 内容分区
 
-默认以留白区分内容；设置 divided 可明确划分设置与操作区。
+默认以留白组织内容；设置 `divided` 可划分标题、正文与底部操作区。
 
-<ComponentExample title="内容分区" preview={<CardSections />} fileName="sections.tsx">
+<ComponentExample title="内容分区" preview={<CardSections />} fileName="sections.tsx" width={560}>
 
 ```tsx lineNumbers file="../../src/examples/card/sections.tsx"
 ```
 
 </ComponentExample>
 
+## 标签页卡片
+
+通过 `tabs.items` 设置标签与对应内容。没有标题时，标签占满标题栏高度，文字上下留白一致；卡片的 `extra` 显示在标签栏右侧。
+
+<ComponentExample title="标签页卡片" preview={<CardTabs />} fileName="tabs.tsx" width={520}>
+
+```tsx lineNumbers file="../../src/examples/card/tabs.tsx"
+```
+
+</ComponentExample>
+
+## 标题与标签页
+
+有 `title` 或 `description` 时，标签栏位于标题区域下方，两者之间没有分割线，分割线只展示在标签栏下方。`tabs.activeKey` / `tabs.onChange` 控制当前标签，默认保留已访问页面的输入内容；`divided` 继续控制底部操作区的分隔线和背景。
+
+<ComponentExample title="标题与标签页" preview={<CardTabsWithTitle />} fileName="tabs-with-title.tsx" width={520}>
+
+```tsx lineNumbers file="../../src/examples/card/tabs-with-title.tsx"
+```
+
+</ComponentExample>
+
 ## Card API
 
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| `title` | `ReactNode` | — | 标题 / 标题旁的内容 |
+| `title` | `ReactNode` | — | 卡片标题。 |
 | `description` | `ReactNode` | — | 补充说明。 |
-| `extra` | `ReactNode` | — | 标题 / 标题旁的内容 |
-| `cover` | `ReactNode` | — | 顶部封面 / 底部内容 |
-| `footer` | `ReactNode` | — | 顶部封面 / 底部内容 |
+| `extra` | `ReactNode` | — | 标题旁的操作；没有标题时显示在标签栏右侧。 |
+| `tabs` | [`CardTabsProps`](#cardtabs-api) | — | 内嵌标签页；无标题时替代标题栏，有标题时位于其下方。 |
+| `cover` | `ReactNode` | — | 顶部封面。 |
+| `footer` | `ReactNode` | — | 底部内容或操作。 |
 | `loading` | `boolean` | `false` | 使用骨架屏替换正文 |
-| `bordered` | `boolean` | `true` | 显示外轮廓 / 悬停强调卡片 |
+| `bordered` | `boolean` | `true` | 显示外轮廓 |
 | `divided` | `boolean` | `false` | 用浅分隔线划分标题、内容和底部操作区。 |
-| `hoverable` | `boolean` | `false` | 显示外轮廓 / 悬停强调卡片 |
-| `size` | `'sm' \| 'md'` | `'md'` | 内容间距 |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 卡片尺寸，影响内边距、标题字号、标题栏高度及内嵌 Tabs 的默认尺寸。 |
 
 ## 类型
 
 定义组件属性或组装列表时可导入相关类型。
 
 ```ts
-import type { CardProps } from '@ifhover/leaf-ui';
+import type { CardProps, CardTabsProps, TabItem } from '@ifhover/leaf-ui';
 ```
 
 ## 使用说明
 
-extra 和 footer 可以放置按钮或链接。hoverable 提供视觉反馈，需要点击操作时请使用明确的按钮或链接。
+extra 和 footer 可以放置按钮或链接。需要点击操作时请使用明确的按钮或链接。
+
+`tabs` 复用 Tabs 的配置和交互，固定使用顶部线形标签。`tabs.items[].children` 是对应页面内容；Card 的 `children` 可放置在所有页面下方的公共说明。`loading` 替换正文为骨架屏，标题、标签栏和操作保持可用。标签默认跟随卡片的 `size`，可用 `tabs.size` 单独调整；标签数组为空时恢复普通卡片。
+
+可在 `tabs` 中设置禁用、图标、手动键盘激活、保留或销毁页面、溢出菜单以及增删、排序回调。`tabs.extra` 始终属于标签栏；有标题时 Card 的 `extra` 仍位于标题右侧。
 
 ## 外观与丰富内容
 
-`description` 显示标题下的补充说明。默认不显示内部边框；设置 `divided` 使用分区边框和淡灰底部。通过 `ConfigProvider` 的 `components.Card` 可定制背景、分区背景和边框。
+`description` 显示标题下的补充说明。普通卡片默认不显示内部边框，标签页卡片始终在标签栏下方展示分割线；设置 `divided` 可增加底部的分隔线与淡灰背景，操作区与 Modal、Drawer 使用一致的纵向留白。通过 `ConfigProvider` 的 `components.Card` 可定制背景、分区背景和边框。
+
+## CardTabs API
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `items` | `readonly `[`TabItem`](../components/tabs#tabitem)`[]` | 必填 | 必需。标签与页面列表；为空时恢复普通卡片。 |
+| `activeKey` | `string` | 首个可用项 | 受控的激活项。 |
+| `defaultActiveKey` | `string` | 首个可用项 | 初始激活项。 |
+| `onChange` | `(key: string) => void` | — | 激活项变化时调用。 |
+| `size` | `'sm' \| 'md' \| 'lg'` | Card 的 `size` | 标签尺寸，可单独覆盖。 |
+| `activationMode` | `'automatic' \| 'manual'` | `'automatic'` | 方向键直接激活，或回车 / 空格激活。 |
+| `destroyInactive` | `boolean` | `false` | 切走时卸载内容；默认保留已访问页面。 |
+| `extra` | `ReactNode` | — | 标签栏右侧的附加内容。 |
+| `onClose` | `(key: string, event: MouseEvent<HTMLButtonElement>) => void` | — | 请求关闭，由应用移除对应项；可阻止默认切换。 |
+| `onAdd` | `() => void` | — | 添加页签，传入后显示添加按钮。 |
+| `addLabel` | `string` | 当前语言的提示 | 添加按钮的可访问名称。 |
+| `overflow` | `boolean` | `true` | 溢出页签收进更多菜单。 |
+| `sortable` | `boolean` | `false` | 启用排序，配合 `onReorder` 使用。 |
+| `onReorder` | `(items: `[`TabItem`](../components/tabs#tabitem)`[]) => void` | — | 返回排序后的原始页签，由应用更新列表。 |
diff --git a/apps/docs/docs/components/cascader.mdx b/apps/docs/docs/components/cascader.mdx
index ce5a31a..83eccb5 100644
--- a/apps/docs/docs/components/cascader.mdx
+++ b/apps/docs/docs/components/cascader.mdx
@@ -1,3 +1,4 @@
+import { SingleLine } from '../../src/examples/cascader/single-line';
 import { Capabilities } from '../../src/examples/cascader/capabilities';
 import { ComponentExample } from '../../src/components/component-example';
 import { CascaderBasic, CascaderControlled } from '../../src/components/form-examples';
@@ -10,7 +11,7 @@ import { CascaderBasic, CascaderControlled } from '../../src/components/form-exa
 
 `children` 定义子选项。点击父项展开下一列，点击末级选项确认完整路径；`disabled` 可以禁用一个分支。
 
-<ComponentExample title="两级分类" preview={<CascaderBasic />} fileName="basic.tsx">
+<ComponentExample title="两级分类" preview={<CascaderBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/cascader/basic.tsx"
 ```
@@ -21,7 +22,7 @@ import { CascaderBasic, CascaderControlled } from '../../src/components/form-exa
 
 `value` 是从根节点到末级节点的 value 数组，`onChange` 同时提供完整的选项对象路径。切换父项后会清除旧分支的后续选择。
 
-<ComponentExample title="三级地区" preview={<CascaderControlled />} fileName="controlled.tsx">
+<ComponentExample title="三级地区" preview={<CascaderControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/cascader/controlled.tsx"
 ```
@@ -42,6 +43,17 @@ import { CascaderBasic, CascaderControlled } from '../../src/components/form-exa
 
 </ComponentExample>
 
+## 单行多选
+
+设置 `tagWrap={false}` 后，已选项始终展示在一行内。长文字自动省略，放不下的选项合并为 `+N`；空间很窄时只显示数量，打开浮层可查看和修改选择。`maxTagCount` 可进一步限制标签数量，`maxTagCount="responsive"` 也会启用单行自动折叠。
+
+<ComponentExample title="单行多选" preview={<SingleLine />} fileName="single-line.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/cascader/single-line.tsx"
+```
+
+</ComponentExample>
+
 ## Cascader API
 
 | 属性 | 类型 | 默认值 | 说明 |
@@ -69,6 +81,8 @@ import { CascaderBasic, CascaderControlled } from '../../src/components/form-exa
 | `loadData` | `(option: `[`CascaderOption`](#cascaderoption)`, signal: AbortSignal) => Promise<readonly `[`CascaderOption`](#cascaderoption)`[]>` | — | 异步加载子节点；应响应 AbortSignal。 |
 | `onLoadError` | `(error: unknown, option: `[`CascaderOption`](#cascaderoption)`) => void` | — | 加载失败时调用，可展示重试提示。 |
 | `cacheKey` | `string \| number` | — | 数据版本改变时清空懒加载缓存，并取消旧请求。 |
+| `tagWrap` | `boolean` | `true` | 允许多选标签换行；false 单行显示并自动折叠溢出项。 |
+| `maxTagCount` | `number \| 'responsive'` | — | 最多展示的标签数；responsive 根据可用宽度自动折叠。 |
 | `multiple` | `false \| true` | `false` | 启用多选；value 和回调的类型随之变化。 |
 | `value` | `readonly string[] \| readonly (readonly string[])[]` | `[]` | 受控路径 / 非受控初始路径 |
 | `defaultValue` | `readonly string[] \| readonly (readonly string[])[]` | `[]` | 受控路径 / 非受控初始路径 |
diff --git a/apps/docs/docs/components/checkbox.mdx b/apps/docs/docs/components/checkbox.mdx
index 5b3d34b..e8dfbe2 100644
--- a/apps/docs/docs/components/checkbox.mdx
+++ b/apps/docs/docs/components/checkbox.mdx
@@ -21,7 +21,7 @@ import { CheckboxBasic, CheckboxCheckAll } from '../../src/components/form-examp
 
 indeterminate 表示部分选中，用于汇总子选项。它只影响显示与辅助技术识别；全选和提交值由 checked 决定。
 
-<ComponentExample title="全选与半选" preview={<CheckboxCheckAll />} fileName="check-all.tsx">
+<ComponentExample title="全选与半选" preview={<CheckboxCheckAll />} fileName="check-all.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/checkbox/check-all.tsx"
 ```
diff --git a/apps/docs/docs/components/color-picker.mdx b/apps/docs/docs/components/color-picker.mdx
index 9ce99a0..b074d11 100644
--- a/apps/docs/docs/components/color-picker.mdx
+++ b/apps/docs/docs/components/color-picker.mdx
@@ -10,7 +10,9 @@ import { ColorPickerPresets } from '../../src/examples/color-picker/presets';
 
 ## 选择颜色
 
-<ComponentExample title="选择颜色" preview={<ColorPickerBasic />} fileName="basic.tsx">
+点击色块、颜色文字或整行空白区域即可打开选择浮层。
+
+<ComponentExample title="选择颜色" preview={<ColorPickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/color-picker/basic.tsx"
 ```
diff --git a/apps/docs/docs/components/command-palette.mdx b/apps/docs/docs/components/command-palette.mdx
index bcf8ede..2156057 100644
--- a/apps/docs/docs/components/command-palette.mdx
+++ b/apps/docs/docs/components/command-palette.mdx
@@ -7,7 +7,7 @@ import { CommandPaletteBasic, CommandPaletteFailure } from '../../src/examples/c
 
 ## 基础用法
 
-<ComponentExample title="基础用法" preview={<CommandPaletteBasic />} fileName="basic.tsx">
+<ComponentExample title="基础用法" preview={<CommandPaletteBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/command-palette/basic.tsx"
 ```
@@ -16,7 +16,7 @@ import { CommandPaletteBasic, CommandPaletteFailure } from '../../src/examples/c
 
 ## 异步操作
 
-<ComponentExample title="异步操作" preview={<CommandPaletteFailure />} fileName="basic.tsx">
+<ComponentExample title="异步操作" preview={<CommandPaletteFailure />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/command-palette/basic.tsx"
 ```
diff --git a/apps/docs/docs/components/config-provider.mdx b/apps/docs/docs/components/config-provider.mdx
index 41093a5..4ddf3e2 100644
--- a/apps/docs/docs/components/config-provider.mdx
+++ b/apps/docs/docs/components/config-provider.mdx
@@ -1,245 +1,232 @@
-import { ConfigProviderDensity } from '../../src/examples/config-provider/density';
+import { withBase } from '@rspress/core/runtime';
+
 import { ComponentExample } from '../../src/components/component-example';
+import { DocsCollapse } from '../../src/components/docs-collapse';
 import { ConfigProviderBasic } from '../../src/examples/config-provider/basic';
+import { ConfigProviderDefaults } from '../../src/examples/config-provider/defaults';
+import { ConfigProviderModalDefaults } from '../../src/examples/config-provider/modal-defaults';
+import { ConfigProviderInheritance } from '../../src/examples/config-provider/inheritance';
+import { ConfigProviderReset } from '../../src/examples/config-provider/reset';
+import { ConfigProviderLocale } from '../../src/examples/config-provider/locale';
+import { ConfigProviderTranslations } from '../../src/examples/config-provider/translations';
+import { ConfigProviderDensity } from '../../src/examples/config-provider/density';
 import { ConfigProviderSizes } from '../../src/examples/config-provider/sizes';
 
 # ConfigProvider 配置
 
-统一设置区域的主题、外观与语言。
+为整个应用或局部区域统一设置主题、语言和组件默认参数。
+
+放在应用入口时作用于整个应用；嵌套使用时只调整当前区域。
+
+| 想调整什么 | 使用的配置 |
+| --- | --- |
+| 内置文本与自定义语言 | `locale`、`translations` |
+| 主题色、外观、尺寸与间距 | `theme`、`density` |
+| 统一组件参数 | `components` |
+
+## 多语言
+
+`locale` 切换日期面板、空状态、清除按钮等内置文本。业务标题、字段标签和选项内容由应用自行翻译。
+
+### 内置语言
+
+以下语言已内置，无需额外导入语言包。未配置 `locale` 时，默认使用简体中文。
+
+| 语言 | `locale` |
+| --- | --- |
+| 简体中文 | `zh-CN` |
+| 繁體中文 | `zh-TW` |
+| English | `en-US` |
+| 日本語 | `ja-JP` |
+| 한국어 | `ko-KR` |
+
+其他语言需要[提供翻译资源](#补充自己的语言)。仅传入其他语言代码不会自动翻译内置文本；未找到的词条最终回退到英文。
+
+### 切换语言
+
+更新 `locale` 即可切换语言。在下拉框中选择语言，再打开日期或空选项控件，可比较五种语言的内置提示。
+
+<ComponentExample title="切换内置语言" preview={<ConfigProviderLocale />} fileName="locale.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/config-provider/locale.tsx"
+```
+
+</ComponentExample>
+
+嵌套区域未指定语言时继承上层；`direction` 调整文字方向，`weekStartsOn` 设置一周的起始日，浮层也会继承这些配置。
+
+### 补充自己的语言
+
+复制<a href={withBase('/locales/en-US.json')} download>完整英文 JSON</a>作为模板，翻译后导入并传给 `translations`。键是语言代码，JSON 只包含按组件分组的文本，不需要重复写语言代码。可以只提供部分词条。
+
+👽 下面用[火星文](https://zh.wikipedia.org/wiki/火星文)演示自定义资源，作为一个小彩蛋。它是一种混用谐音字、形近字和符号的网络写法。
+
+未翻译的词条回退英文。字段名称、确认框正文等业务内容仍由应用提供。
 
-## 区域主题与语言
+火星文使用私用语言标记 `zh-CN-x-mars`，日期和数字仍按简体中文的区域格式显示。它仅用于演示，不属于内置语言。
 
-<ComponentExample title="区域主题与语言" preview={<ConfigProviderBasic />} fileName="basic.tsx">
+<ComponentExample title="自定义火星文" preview={<ConfigProviderTranslations />} fileName="translations.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/config-provider/translations.tsx"
+```
+
+</ComponentExample>
+
+示例中的 `zh-CN-x-mars.json`：
+
+```json file="../../src/examples/config-provider/zh-CN-x-mars.json"
+```
+
+`locale={['zh-CN-x-mars', 'en-US']}` 按顺序查找每个缺失词条，最后由内置英文兜底。第一项始终控制当前语言、日期与数字的区域格式；字符串等价于单项数组，空数组无效。不会自动添加 `zh-CN-x-mars → zh-CN` 或 `fr-CA → fr` 等回退。
+
+嵌套时 `translations` 按语言和词条合并；未传 `locale` 则继承，显式传入则替换整条语言链。组件实例与 `components` 设置的文案优先。完整规则、类型、JSON Schema 和词条检查见[翻译资源](/api/translations)。
+
+## 主题与外观
+
+### 区域主题
+
+主题会应用到区域内的组件和浮层。通常只需要修改主题色或基础圆角，其余样式会随之调整。
+
+<ComponentExample title="区域主题" preview={<ConfigProviderBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/config-provider/basic.tsx"
 ```
 
 </ComponentExample>
 
-## 基础尺寸与高级覆盖
+### 区域密度
+
+`density="compact"` 适合信息较多的界面，会一起收紧控件和内容间距；默认使用 `comfortable`。嵌套区域可单独设置。
+
+<ComponentExample title="舒适与紧凑" preview={<ConfigProviderDensity />} fileName="density.tsx" width={360}>
 
-修改基础高度时，小、大控件会同步调整。需要特殊尺寸时，再通过 tokens 单独覆盖。
+```tsx lineNumbers file="../../src/examples/config-provider/density.tsx"
+```
 
-<ComponentExample title="基础尺寸与高级覆盖" preview={<ConfigProviderSizes />} fileName="sizes.tsx">
+</ComponentExample>
+
+### 基础高度
+
+需要改变整体尺寸基准时，设置 `theme.controlHeight`，小、大尺寸会自动派生。无需逐项调整按钮和输入框的高度。
+
+<ComponentExample title="基础高度" preview={<ConfigProviderSizes />} fileName="sizes.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/config-provider/sizes.tsx"
 ```
 
 </ComponentExample>
 
-## 全局密度
+进一步定制见[定制主题](/guide/theming)。`theme.components` 调整组件局部样式，下方的 `components` 设置组件默认参数；两者用途不同，可以同时使用。服务端接入见 [服务端渲染](/guide/ssr)。
 
-密度调整间距与尺寸，同时保留正文字号。嵌套区域继承密度，可显式设置 comfortable 恢复舒适模式。
+## 组件默认值
 
-<ComponentExample title="舒适与紧凑" preview={<ConfigProviderDensity />} fileName="density.tsx">
+**常用参数设一次，省去每个组件重复传参。** 用 `components` 统一按钮样式、输入提示、弹窗关闭方式，后续调整也只改一处。
 
-```tsx lineNumbers file="../../src/examples/config-provider/density.tsx"
+放在应用入口作用于全站，放在局部只影响当前区域；个别组件仍可用自身参数覆盖。
+
+### 统一表单习惯
+
+下面统一输入提示、清除按钮和按钮样式，结束日期与保存按钮单独覆盖。
+
+<ComponentExample title="常用参数，一处配置" preview={<ConfigProviderDefaults />} fileName="defaults.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/config-provider/defaults.tsx"
+```
+
+</ComponentExample>
+
+### 防止误点遮罩关闭弹窗
+
+编辑时不希望误点遮罩就关掉弹窗，可以统一设置 `Modal: { maskClosable: false }`。区域内的 Modal 都会沿用，无需逐个设置；关闭按钮和 Esc 仍然可用。
+
+<ComponentExample title="打开弹窗，试试点击遮罩" preview={<ConfigProviderModalDefaults />} fileName="modal-defaults.tsx" width="fit-content">
+
+```tsx lineNumbers file="../../src/examples/config-provider/modal-defaults.tsx"
 ```
 
 </ComponentExample>
 
-## ConfigProvider API
+### 继承与覆盖
+
+统一默认值后，局部仍可灵活调整：**实例参数 > 内层配置 > 外层配置 > 组件内置值**。
+
+<ComponentExample title="继承与覆盖" preview={<ConfigProviderInheritance />} fileName="inheritance.tsx">
+
+```tsx lineNumbers file="../../src/examples/config-provider/inheritance.tsx"
+```
+
+</ComponentExample>
+
+### 清除继承
+
+将组件配置设为 `null`，可在局部恢复它的内置默认值，例如 `components={{ Input: null }}`。
+
+<ComponentExample title="清除继承" preview={<ConfigProviderReset />} fileName="reset.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/config-provider/reset.tsx"
+```
+
+</ComponentExample>
+
+<DocsCollapse title="配置键、合并规则与使用建议">
+
+使用 `LeafComponentDefaults` 获得类型提示，可配参数见[完整参考](/api/component-defaults#leafcomponentdefaults)。
+
+- 键名与组件名一致，如 `Input`、`Modal`。组合组件 `Table.Cell` 写作 `TableCell`，`Table.Root` 写作 `Table`；别名 `FAB`、`ResizablePanels` 使用 `FloatButton`、`Splitter`。
+- 只有 `undefined` 会回退到默认值；`false`、`0`、空字符串和类型允许的 `null` 均保留。对象、数组、类名和回调整体替换。
+- 组件配置为 `null` 时清除继承，空对象和 `undefined` 继续继承；其他组件与主题不受影响。
+- 每个实例的数据和事件仍写在组件上，如 `Select.options`、`Modal.open`、`onChange`。
+- 更新配置时传入新对象，不要直接修改原对象。
+- 内部按钮通过所属组件的参数调整，例如 `Modal.confirmButtonProps`；不会跟随全局 `Button` 配置。
+
+</DocsCollapse>
+
+## API
+
+### ConfigProvider API
 
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| `locale` | `LeafLocale` | `'zh-CN'` | 内置文本语言，嵌套时继承 |
+| `locale` | `LeafLocale \| readonly LeafLocale[]` | `'zh-CN'` | 当前语言与逐词条回退顺序；未指定则继承 |
+| `translations` | `Readonly<Record<string, `[`LeafTranslation`](../api/translations#leaftranslation)`>>` | — | 按语言代码提供 JSON 翻译，嵌套时按词条合并 |
 | `theme` | [`LeafTheme`](#leaftheme) | — | 区域主题；未设置的字段继承上层 |
-| `messages` | `Partial<`[`LeafMessages`](#leafmessages)`>` | — | 覆盖内置组件的语言文本。 |
-| `textMessages` | `Record<string, string>` | — | 以英文原文为 key，覆盖扩展组件的文本。 |
 | `direction` | `'ltr' \| 'rtl'` | — | 文字和交互方向。 |
 | `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | — | 一周起始日，0 表示周日、1 表示周一。 |
 | `getPopupContainer` | `() => Element \| DocumentFragment` | — | 返回浮层的挂载容器，也可返回 ShadowRoot。 |
 | `maskBlur` | `boolean` | `true` | 启用 Modal、Drawer 及基于 Modal 的确认框、命令面板等遮罩模糊；关闭可减少渲染开销，嵌套时继承。 |
 | `density` | `'comfortable' \| 'compact'` | `'comfortable'` | 继承控件、表单、菜单、列表与浮层的密度；显式尺寸优先于预设。 |
+| `components` | [`LeafComponentDefaults`](../api/component-defaults#leafcomponentdefaults) | — | 当前区域的组件默认参数，嵌套时按组件和参数继承。 |
 
-其余原生 div 属性、className 和 style 作用于区域容器。主题设置通过 theme 传入。
+其余原生 div 属性、`className` 和 `style` 作用于区域容器。`maskBlur={false}` 关闭背景模糊，仍保留半透明遮罩；此设置独立于 `theme.motion`。
 
-遮罩模糊会随打开和关闭渐变。性能敏感的页面可使用 `<ConfigProvider maskBlur={false}>` 关闭模糊，遮罩仍保留半透明背景；此设置独立于 `theme.motion`。
+### LeafTheme
 
-## LeafTheme
+常用主题配置。未设置的字段继承外层区域。
 
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | `primaryColor` | `string` | `'#20834a'` | 主题色，悬停和按下等状态自动生成；深色默认采用较浅的绿色 |
 | `borderRadius` | `number \| string` | `10` | 基础圆角；数字为 px，小 / 中 / 大圆角按 0.6 / 1.2 / 1.6 倍生成 |
-| `controlHeight` | `number \| string` | `40` | 基础控件高度；小 / 大尺寸分别减 / 加 6px |
+| `controlHeight` | `number \| string` | `36` | 基础控件高度；小 / 大尺寸分别减 / 加 6px |
 | `fontSize` | `number \| string` | `14` | 基础字号；小字号减 1px，大字号加 2px |
 | `fontFamily` | `string` | 系统无衬线字体 | 字体族 |
 | `appearance` | `'light' \| 'dark'` | `'light'` | 浅色或深色；嵌套时继承显式配置 |
 | `motion` | `boolean` | `true` | 启用当前区域的交互动效；系统减少动态效果优先，浮层继承此设置。 |
-| `tokens` | [`LeafThemeTokens`](#leafthemetokens) | — | 可选的高级覆盖，不必配置全部字段 |
+| `tokens` | [`LeafThemeTokens`](../api/theme-tokens#leafthemetokens) | — | 可选的高级覆盖，不必配置全部字段 |
 | `spacing` | `number` | — | 基础间距，其他间距按比例派生。 |
 | `lineHeight` | `number` | — | 正文行高。 |
 | `headingWeight` | `number` | — | Typography 文档标题的字重；组件标题使用 `tokens.fontWeight`。 |
 | `elevation` | `'none' \| 'soft' \| 'medium'` | — | 整体阴影强度。 |
 | `breakpoints` | `Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>` | — | useBreakpoint 使用的响应式断点。 |
-| `components` | `Record<string, `[`LeafComponentTokens`](../guide/theming#leafcomponenttokens)`>` | — | 按组件名称覆盖局部样式。 |
-
-以上默认值适用于未配置的应用。嵌套区域继承上层显式设置；长度也支持 CSS 单位。小控件高度和字号的自动结果不会小于 1px。
-
-## LeafThemeTokens
-
-所有字段均可选；显式值优先于默认或自动生成值。
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `onPrimaryColor` | `string` | 按主题生成 | 主题背景上的文字色 |
-| `dangerColor` | `string` | 按外观生成 | 危险色 / 危险背景上的文字色 |
-| `onDangerColor` | `string` | 按外观生成 | 危险色 / 危险背景上的文字色 |
-| `successColor` | `string` | 按外观生成 | 成功 / 警告 / 信息颜色 |
-| `warningColor` | `string` | 按外观生成 | 成功 / 警告 / 信息颜色 |
-| `infoColor` | `string` | 按外观生成 | 成功 / 警告 / 信息颜色 |
-| `textColor` | `string` | 按外观生成 | 主要 / 次要文字 |
-| `mutedTextColor` | `string` | 按外观生成 | 主要 / 次要文字 |
-| `subtleTextColor` | `string` | — | 更轻的辅助文字色。 |
-| `surfaceColor` | `string` | 按外观生成 | 表面 / 次级表面 |
-| `mutedSurfaceColor` | `string` | 按外观生成 | 表面 / 次级表面 |
-| `raisedSurfaceColor` | `string` | — | 浮层与抬升表面色。 |
-| `borderColor` | `string` | 按外观生成 | 中性边框 |
-| `borderHoverColor` | `string` | — | 悬停时的中性边框色。 |
-| `dividerColor` | `string` | — | 分区分隔线颜色；默认从边框和表面颜色派生。 |
-| `borderRadiusSm` | `number \| string` | `基础圆角 × 0.6` | 单独覆盖小 / 大圆角 |
-| `borderRadiusMd` | `number \| string` | `基础圆角 × 1.2` | 单独覆盖卡片、提示等内容表面的中圆角 |
-| `borderRadiusLg` | `number \| string` | `1.6` | 单独覆盖小 / 大圆角 |
-| `controlHeightSm` | `number \| string` | `基础高度 −` | 单独覆盖小 / 大高度 |
-| `controlHeightLg` | `number \| string` | `+ 6px` | 单独覆盖小 / 大高度 |
-| `fontSizeSm` | `number \| string` | `基础字号 − 1px` | 单独覆盖小 / 大字号 |
-| `fontSizeLg` | `number \| string` | `+ 2px` | 单独覆盖小 / 大字号 |
-| `fontWeight` | `number` | `500` | 按钮、标签与组件标题的强调字重 |
-| `motionDuration` | `number \| string` | `200` | 基础过渡时间；数字为 ms，也支持 CSS 时间。motion=false 时为 0。 |
-| `motionEasing` | `string` | `'cubic-bezier(0.22, 1, 0.36, 1)'` | 悬停、内容与普通过渡的曲线。 |
-| `motionSpring` | `string` | `'cubic-bezier(0.22, 1.28, 0.36, 1)'` | 选择与形状变化的轻微弹性曲线。 |
-| `popupZIndex` | `number` | `1000` | 浮层 / 弹窗 / 消息层级 |
-| `modalZIndex` | `number` | `1100` | 浮层 / 弹窗 / 消息层级 |
-| `messageZIndex` | `number` | `1200` | 浮层 / 弹窗 / 消息层级 |
-| `buttonBorderRadius` | `number \| string` | 当前控件尺寸 | 仅按钮的圆角 / 共用高度覆盖 |
-| `buttonHeight` | `number \| string` | 当前控件尺寸 | 仅按钮的圆角 / 共用高度覆盖 |
-| `choiceBorderRadius` | `number \| string` | 基础圆角 × 0.5 | 复选框圆角 |
-| `focusColor` | `string` | 当前语义色自动生成 | 焦点轮廓颜色 |
-| `primaryHoverColor` | `string` | 主题色自动生成 | 主色悬停 / 按下 |
-| `primaryActiveColor` | `string` | 主题色自动生成 | 主色悬停 / 按下 |
-| `primarySoftColor` | `string` | 主题色自动生成 | 主色柔和背景与交互状态 |
-| `primarySoftHoverColor` | `string` | 主题色自动生成 | 主色柔和背景与交互状态 |
-| `primarySoftActiveColor` | `string` | 主题色自动生成 | 主色柔和背景与交互状态 |
-| `primaryBorderColor` | `string` | 主题色自动生成 | 主题色边框 |
-| `dangerHoverColor` | `string` | 危险色自动生成 | 危险状态悬停 / 按下 |
-| `dangerActiveColor` | `string` | 危险色自动生成 | 危险状态悬停 / 按下 |
-| `spacingSm` | `number \| string` | — | 设置 spacingSm。 |
-| `spacingLg` | `number \| string` | — | 设置 spacingLg。 |
-| `shadowSm` | `string` | — | 设置 shadowSm。 |
-| `shadowXs` | `string` | — | 最轻的表面阴影。 |
-| `shadowMd` | `string` | — | 设置 shadowMd。 |
-| `shadowLg` | `string` | — | 设置 shadowLg。 |
-| `lineHeight` | `number` | — | 正文行高。 |
+| `components` | `Record<string, `[`LeafComponentTokens`](../api/theme-tokens#leafcomponenttokens)`>` | — | 按组件名称覆盖局部样式。 |
 
-## 类型
+### 类型与完整参考
 
-组装可复用的主题或属性时，可导入这些类型：
+组装可复用配置时，可按需导入类型：
 
 ```ts
-import type { ConfigProviderProps, LeafTheme, LeafThemeTokens, LeafLocale } from '@ifhover/leaf-ui';
-
-const theme: LeafTheme = { primaryColor: '#7654c6', borderRadius: 8 };
-const advanced: LeafThemeTokens = { controlHeightLg: 44 };
+import type { ConfigProviderProps, LeafComponentDefaults, LeafTheme } from '@ifhover/leaf-ui';
 ```
 
-`LeafLocale` 直接表示 `'zh-CN' | 'en-US'`。ConfigProviderProps 对应上方 [ConfigProvider API](#configprovider-api)。
-
-## 使用说明
-
-嵌套区域按字段合并 tokens；手动指定的派生尺寸会继续继承。浮层、Modal、确认框和消息沿用调用区域的配置。ConfigProvider 自动托管确认框、消息、通知和顶部加载条，子组件调用相应 hook 即可，详见 [Confirm](/components/confirm) 和 [Message](/components/message)。
-
-语言覆盖内置提示、日期、时间、清除按钮和反馈组件；业务内容、label 和 options 由应用翻译。
-
-使用 ConfigProvider 调整主题，CSS 变量供业务组件读取和复用。入门示例见[定制主题](/guide/theming)，服务端接入见 [SSR 使用](/guide/ssr)。
-
-## LeafMessages
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `select` | `string` | — | 必需。设置 select。 |
-| `empty` | `string` | — | 必需。设置 empty。 |
-| `noMatches` | `string` | — | 必需。设置 noMatches。 |
-| `clearSelection` | `string` | — | 必需。设置 clearSelection。 |
-| `date` | `string` | — | 必需。设置 date。 |
-| `time` | `string` | — | 必需。设置 time。 |
-| `dateTime` | `string` | — | 必需。设置 dateTime。 |
-| `range` | `string` | — | 必需。设置 range。 |
-| `clearDate` | `string` | — | 必需。设置 clearDate。 |
-| `clearTime` | `string` | — | 必需。设置 clearTime。 |
-| `clearRange` | `string` | — | 必需。设置 clearRange。 |
-| `clearCascader` | `string` | — | 必需。设置 clearCascader。 |
-| `chooseDate` | `string` | — | 必需。设置 chooseDate。 |
-| `chooseTime` | `string` | — | 必需。设置 chooseTime。 |
-| `previousMonth` | `string` | — | 必需。设置 previousMonth。 |
-| `nextMonth` | `string` | — | 必需。设置 nextMonth。 |
-| `previousYear` | `string` | — | 必需。设置 previousYear。 |
-| `nextYear` | `string` | — | 必需。设置 nextYear。 |
-| `previousYears` | `string` | — | 必需。设置 previousYears。 |
-| `nextYears` | `string` | — | 必需。设置 nextYears。 |
-| `hours` | `string` | — | 必需。设置 hours。 |
-| `minutes` | `string` | — | 必需。设置 minutes。 |
-| `seconds` | `string` | — | 必需。设置 seconds。 |
-| `period` | `string` | — | 必需。设置 period。 |
-| `am` | `string` | — | 必需。设置 am。 |
-| `pm` | `string` | — | 必需。设置 pm。 |
-| `weekdays` | `string[]` | — | 必需。设置 weekdays。 |
-| `confirm` | `string` | — | 必需。设置 confirm。 |
-| `cancel` | `string` | — | 必需。取消当前请求。 |
-| `close` | `string` | — | 必需。设置 close。 |
-| `start` | `string` | — | 必需。设置 start。 |
-| `end` | `string` | — | 必需。设置 end。 |
-| `required` | `string` | — | 必需。要求整体值非空，复合控件只校验一次。 |
-| `invalid` | `string` | — | 必需。设置 invalid。 |
-| `useTime` | `string` | — | 必需。设置 useTime。 |
-| `year` | `string` | — | 必需。设置 year。 |
-| `month` | `string` | — | 必需。设置 month。 |
-| `week` | `string` | — | 必需。设置 week。 |
-| `dateMode` | `string` | — | 必需。设置 dateMode。 |
-| `loading` | `string` | — | 必需。展示加载状态。 |
-| `today` | `string` | — | 必需。设置 today。 |
-| `now` | `string` | — | 必需。设置 now。 |
-| `selectTime` | `string` | — | 必需。设置 selectTime。 |
-| `selectDate` | `string` | — | 必需。设置 selectDate。 |
-| `remove` | `string` | — | 必需。设置 remove。 |
-| `search` | `string` | — | 必需。设置 search。 |
-| `breadcrumb` | `string` | — | 必需。设置 breadcrumb。 |
-| `pagination` | `string` | — | 必需。设置 pagination。 |
-| `previousPage` | `string` | — | 必需。设置 previousPage。 |
-| `nextPage` | `string` | — | 必需。设置 nextPage。 |
-| `page` | `string` | — | 必需。设置 page。 |
-| `pageSize` | `string` | — | 必需。设置 pageSize。 |
-| `itemsPerPage` | `string` | — | 必需。设置 itemsPerPage。 |
-| `jumpTo` | `string` | — | 必需。设置 jumpTo。 |
-| `showPassword` | `string` | — | 必需。设置 showPassword。 |
-| `hidePassword` | `string` | — | 必需。设置 hidePassword。 |
-| `increase` | `string` | — | 必需。设置 increase。 |
-| `decrease` | `string` | — | 必需。设置 decrease。 |
-| `invalidNumber` | `string` | — | 必需。设置 invalidNumber。 |
-| `progress` | `string` | — | 必需。设置 progress。 |
-| `calendar` | `string` | — | 必需。设置 calendar。 |
-| `clearInput` | `string` | — | 必需。设置 clearInput。 |
-| `noData` | `string` | — | 必需。设置 noData。 |
-| `avatar` | `string` | — | 必需。前置头像或图标。 |
-| `rating` | `string` | — | 必需。设置 rating。 |
-| `resultSuccess` | `string` | — | 必需。设置 resultSuccess。 |
-| `resultWarning` | `string` | — | 必需。设置 resultWarning。 |
-| `resultError` | `string` | — | 必需。设置 resultError。 |
-| `resultInfo` | `string` | — | 必需。设置 resultInfo。 |
-| `color` | `string` | — | 必需。颜色或语义色。 |
-| `clearColor` | `string` | — | 必需。设置 clearColor。 |
-| `saturation` | `string` | — | 必需。设置 saturation。 |
-| `brightness` | `string` | — | 必需。设置 brightness。 |
-| `hue` | `string` | — | 必需。设置 hue。 |
-| `alpha` | `string` | — | 必需。设置 alpha。 |
-| `colorValue` | `string` | — | 必需。设置 colorValue。 |
-| `invalidColor` | `string` | — | 必需。设置 invalidColor。 |
-| `presets` | `string` | — | 必需。快捷选项；value 可以动态计算。 |
-| `tree` | `string` | — | 必需。设置 tree。 |
-| `expand` | `string` | — | 必需。设置 expand。 |
-| `collapseNode` | `string` | — | 必需。设置 collapseNode。 |
-| `collapse` | `string` | — | 必需。设置 collapse。 |
-| `slider` | `string` | — | 必需。设置 slider。 |
-| `pageBack` | `string` | — | 必需。设置 pageBack。 |
-| `pageForward` | `string` | — | 必需。设置 pageForward。 |
-| `closeTab` | `string` | — | 必需。设置 closeTab。 |
+- [LeafComponentDefaults](/api/component-defaults#leafcomponentdefaults)：组件名称与可配置的默认参数。
+- [LeafThemeTokens](/api/theme-tokens#leafthemetokens)：高级主题覆盖。
diff --git a/apps/docs/docs/components/date-picker.mdx b/apps/docs/docs/components/date-picker.mdx
index 227f810..df033ff 100644
--- a/apps/docs/docs/components/date-picker.mdx
+++ b/apps/docs/docs/components/date-picker.mdx
@@ -14,7 +14,7 @@ import { DatePickerFooter } from '../../src/examples/date-picker/footer';
 
 点击控件打开日历，选择日期后收起。`defaultValue` 设置初始日期，`disabled` 禁用整个控件。
 
-<ComponentExample title="基础选择" preview={<DatePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="基础选择" preview={<DatePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/date-picker/basic.tsx"
 ```
@@ -25,7 +25,7 @@ import { DatePickerFooter } from '../../src/examples/date-picker/footer';
 
 通过 `minDate` / `maxDate` 限定可选日期，边界当天也可以选择。`onChange` 同时提供 Date 对象和本地日期字符串。
 
-<ComponentExample title="受控与日期限制" preview={<DatePickerControlled />} fileName="controlled.tsx">
+<ComponentExample title="受控与日期限制" preview={<DatePickerControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/date-picker/controlled.tsx"
 ```
diff --git a/apps/docs/docs/components/date-range-picker.mdx b/apps/docs/docs/components/date-range-picker.mdx
index 9a2f6c6..1aff856 100644
--- a/apps/docs/docs/components/date-range-picker.mdx
+++ b/apps/docs/docs/components/date-range-picker.mdx
@@ -9,7 +9,7 @@ import { DateRangePickerModes } from '../../src/examples/date-range-picker/modes
 
 ## 受控区间
 
-<ComponentExample title="受控区间" preview={<DateRangePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="受控区间" preview={<DateRangePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/date-range-picker/basic.tsx"
 ```
diff --git a/apps/docs/docs/components/date-time-picker.mdx b/apps/docs/docs/components/date-time-picker.mdx
index cffec3a..55714da 100644
--- a/apps/docs/docs/components/date-time-picker.mdx
+++ b/apps/docs/docs/components/date-time-picker.mdx
@@ -8,7 +8,7 @@ import { DateTimePickerBasic } from '../../src/examples/date-time-picker/basic';
 
 ## 日期与时间
 
-<ComponentExample title="日期与时间" preview={<DateTimePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="日期与时间" preview={<DateTimePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/date-time-picker/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { DateTimePickerBasic } from '../../src/examples/date-time-picker/basic';
 
 ## 自定义格式与营业时间
 
-<ComponentExample title="自定义格式与营业时间" preview={<Capabilities />} fileName="capabilities.tsx">
+<ComponentExample title="自定义格式与营业时间" preview={<Capabilities />} fileName="capabilities.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/date-time-picker/capabilities.tsx"
 ```
diff --git a/apps/docs/docs/components/drawer.mdx b/apps/docs/docs/components/drawer.mdx
index f6d2f93..2004b71 100644
--- a/apps/docs/docs/components/drawer.mdx
+++ b/apps/docs/docs/components/drawer.mdx
@@ -18,7 +18,7 @@ import { DrawerBasic } from '../../src/examples/drawer/basic';
 
 ## 调整宽度与嵌套推移
 
-<ComponentExample title="调整宽度与嵌套推移" preview={<Capabilities />} fileName="capabilities.tsx">
+<ComponentExample title="调整宽度与嵌套推移" preview={<Capabilities />} fileName="capabilities.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/drawer/capabilities.tsx"
 ```
@@ -29,7 +29,7 @@ import { DrawerBasic } from '../../src/examples/drawer/basic';
 
 标题、内容与底部操作分区，适合较长的设置流程。
 
-<ComponentExample title="通知偏好" preview={<DrawerSections />} fileName="sections.tsx">
+<ComponentExample title="通知偏好" preview={<DrawerSections />} fileName="sections.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/drawer/sections.tsx"
 ```
diff --git a/apps/docs/docs/components/dropdown.mdx b/apps/docs/docs/components/dropdown.mdx
index 56d9333..b136ee8 100644
--- a/apps/docs/docs/components/dropdown.mdx
+++ b/apps/docs/docs/components/dropdown.mdx
@@ -9,7 +9,7 @@ import { DropdownBasic } from '../../src/examples/dropdown/basic';
 
 ## 操作菜单
 
-<ComponentExample title="操作菜单" preview={<DropdownBasic />} fileName="basic.tsx">
+<ComponentExample title="操作菜单" preview={<DropdownBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/dropdown/basic.tsx"
 ```
@@ -18,7 +18,7 @@ import { DropdownBasic } from '../../src/examples/dropdown/basic';
 
 ## 扩展用法
 
-<ComponentExample title="扩展用法" preview={<ExtensionDemo />} fileName="extensions.tsx">
+<ComponentExample title="扩展用法" preview={<ExtensionDemo />} fileName="extensions.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/dropdown/extensions.tsx"
 ```
diff --git a/apps/docs/docs/components/error-boundary.mdx b/apps/docs/docs/components/error-boundary.mdx
index f2034e1..0d606af 100644
--- a/apps/docs/docs/components/error-boundary.mdx
+++ b/apps/docs/docs/components/error-boundary.mdx
@@ -8,7 +8,7 @@ import { ErrorBoundaryCustom } from '../../src/examples/error-boundary/advanced'
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<ErrorBoundaryBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<ErrorBoundaryBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/error-boundary/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { ErrorBoundaryCustom } from '../../src/examples/error-boundary/advanced'
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<ErrorBoundaryCustom />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<ErrorBoundaryCustom />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/error-boundary/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/file-list.mdx b/apps/docs/docs/components/file-list.mdx
index f3d796e..e69ff13 100644
--- a/apps/docs/docs/components/file-list.mdx
+++ b/apps/docs/docs/components/file-list.mdx
@@ -1,32 +1,84 @@
 import { ComponentExample } from '../../src/components/component-example';
 import { FileListBasic } from '../../src/examples/file-list/basic';
 import { FileListActions } from '../../src/examples/file-list/advanced';
+import { FileListPicture } from '../../src/examples/file-list/picture';
+import { FileListCards } from '../../src/examples/file-list/cards';
+import { FileListStates } from '../../src/examples/file-list/states';
+import { FileListEmpty } from '../../src/examples/file-list/empty';
 
 # FileList 文件列表
 
-展示文件名称、图标与文件操作。
+展示文件信息、上传状态，并提供预览、下载和移除操作。
 
 ## 文件信息
 
-<ComponentExample title="文件信息" preview={<FileListBasic />} fileName="basic.tsx">
+按文件类型展示图标，文件大小可按需提供。图片支持预览，其他文件可直接下载。
+
+<ComponentExample title="文件信息" preview={<FileListBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/file-list/basic.tsx"
 ```
 
 </ComponentExample>
 
+## 缩略图列表
+
+使用 `listType="picture"` 展示图片缩略图，非图片文件保留类型图标。
+
+<ComponentExample title="缩略图列表" preview={<FileListPicture />} fileName="picture.tsx" width="100%">
+
+```tsx lineNumbers file="../../src/examples/file-list/picture.tsx"
+```
+
+</ComponentExample>
+
+## 图片卡片
+
+使用 `listType="picture-card"` 展示图片卡片，预览中可以切换同一列表中的图片。
+
+<ComponentExample title="图片卡片" preview={<FileListCards />} fileName="cards.tsx" width="100%">
+
+```tsx lineNumbers file="../../src/examples/file-list/cards.tsx"
+```
+
+</ComponentExample>
+
+## 上传状态
+
+分别展示上传进度、完成、失败、等待和取消状态。失败说明放在对应文件下方。
+
+<ComponentExample title="上传状态" preview={<FileListStates />} fileName="states.tsx" width="100%">
+
+```tsx lineNumbers file="../../src/examples/file-list/states.tsx"
+```
+
+</ComponentExample>
+
 ## 仅 URL 与移除操作
 
-<ComponentExample title="仅 URL 与移除操作" preview={<FileListActions />} fileName="advanced.tsx">
+名称可从 URL 获取。通过 `onRemove` 更新 `items`；返回 Promise 时，移除按钮会等待操作结束。
+
+<ComponentExample title="仅 URL 与移除操作" preview={<FileListActions />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/file-list/advanced.tsx"
 ```
 
 </ComponentExample>
 
+## 空列表
+
+没有文件时展示空状态，也可以通过 `emptyContent` 自定义内容。
+
+<ComponentExample title="空列表" preview={<FileListEmpty />} fileName="empty.tsx" width="100%">
+
+```tsx lineNumbers file="../../src/examples/file-list/empty.tsx"
+```
+
+</ComponentExample>
+
 ## 使用说明
 
-名称可从 URL 获取，大小可不提供，不会自动请求文件元信息。图标根据 MIME 或后缀识别。图片、视频、音频显示预览，其他文件只提供下载。媒体能否播放取决于浏览器支持的编码。跨域下载可能在新标签打开，可通过 onDownload 接入下载服务。
+文件大小可不提供，不会自动请求文件元信息。图标根据 MIME 或后缀识别，缩略图加载失败时回退为类型图标。图片、视频、音频支持预览，其他文件只提供下载。媒体能否播放取决于浏览器支持的编码。跨域下载可能在新标签打开，可通过 `onDownload` 接入下载服务。上传交互请使用 [Upload](./upload.mdx)。
 
 ## 类型
 
@@ -39,14 +91,14 @@ import type { FileItem, FileListProps } from '@ifhover/leaf-ui';
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | `items` | `readonly `[`FileItem`](#fileitem-api)`[]` | 必填 | 必需。展示的文件 |
-| `downloadable` | `boolean` | `true` | 显示下载 / 媒体预览操作 |
-| `previewable` | `boolean` | `true` | 显示下载 / 媒体预览操作 |
-| `removable` | `boolean` | `false` | 显示移除操作 / 禁用操作 |
-| `onPreview` | `(file: `[`FileItem`](#fileitem-api)`) => void` | — | 自定义预览或下载；预览仍仅对媒体显示 |
-| `onDownload` | `(file: `[`FileItem`](#fileitem-api)`) => void` | — | 自定义预览或下载；预览仍仅对媒体显示 |
-| `onRemove` | `(file: `[`FileItem`](#fileitem-api)`) => void \| boolean \| Promise<void> \| Promise<boolean>` | — | 请求移除，由调用方更新 items |
+| `downloadable` | `boolean` | `true` | 为有 URL 的文件显示下载操作 |
+| `previewable` | `boolean` | `true` | 为有 URL 的图片、视频和音频显示预览操作 |
+| `removable` | `boolean` | `false` | 配合 `onRemove` 显示移除操作 |
+| `onPreview` | `(file: `[`FileItem`](#fileitem-api)`) => void` | — | 接管媒体预览；未提供时使用内置预览 |
+| `onDownload` | `(file: `[`FileItem`](#fileitem-api)`) => void` | — | 接管下载；未提供时使用文件 URL |
+| `onRemove` | `(file: `[`FileItem`](#fileitem-api)`) => void \| boolean \| Promise<void> \| Promise<boolean>` | — | 请求移除，由调用方更新 `items`。等待异步操作；拒绝时在该文件行显示错误。返回 `false` 可拒绝移除 |
 | `renderActions` | `(file: `[`FileItem`](#fileitem-api)`, actions: ReactNode) => ReactNode` | — | 定制操作区 |
-| `emptyContent` | `ReactNode` | — | 空列表内容 |
+| `emptyContent` | `ReactNode` | 暂无文件 | 空列表内容 |
 | `disabled` | `boolean` | `false` | 禁用交互。 |
 | `listType` | `'text' \| 'picture' \| 'picture-card'` | `'text'` | 文件列表的展示形式。 |
 
diff --git a/apps/docs/docs/components/flex.mdx b/apps/docs/docs/components/flex.mdx
new file mode 100644
index 0000000..9c046fa
--- /dev/null
+++ b/apps/docs/docs/components/flex.mdx
@@ -0,0 +1,52 @@
+import { ComponentExample } from '../../src/components/component-example';
+import { FlexBasic } from '../../src/examples/flex/basic';
+import { FlexAlignment } from '../../src/examples/flex/alignment';
+
+# Flex 弹性布局
+
+控制内容的排列方向、对齐、间距与换行，不为子元素添加额外容器。
+
+## 基础用法
+
+通过 `gap` 设置间距，`wrap` 允许内容在空间不足时换行。
+
+<ComponentExample title="基础用法" preview={<FlexBasic />} fileName="basic.tsx">
+
+```tsx lineNumbers file="../../src/examples/flex/basic.tsx"
+```
+
+</ComponentExample>
+
+## 方向与对齐
+
+`direction` 控制排列方向，`align` 控制交叉轴对齐，`justify` 控制主轴对齐；`start` / `end` 跟随对应弹性轴的方向。
+
+<ComponentExample title="方向与对齐" preview={<FlexAlignment />} fileName="alignment.tsx">
+
+```tsx lineNumbers file="../../src/examples/flex/alignment.tsx"
+```
+
+</ComponentExample>
+
+## Flex API
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `direction` | `'row' \| 'row-reverse' \| 'column' \| 'column-reverse'` | `'row'` | 排列方向。反向排列不改变 DOM 阅读与键盘顺序。 |
+| `gap` | `number \| string \| readonly [number \| string, number \| string]` | `0` | 间距；数字为 px，支持 CSS 长度和 `sm` / `md` / `lg` 主题间距。数组为 [行间距, 列间距]。 |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'stretch'` | 交叉轴对齐。 |
+| `justify` | `'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly'` | `'start'` | 主轴对齐。 |
+| `wrap` | `boolean \| 'nowrap' \| 'wrap' \| 'wrap-reverse'` | `false` | 是否换行或具体换行方向。 |
+| `inline` | `boolean` | `false` | 使用行内弹性布局。 |
+
+## 类型
+
+```ts
+import type { FlexGap, FlexProps } from '@ifhover/leaf-ui';
+```
+
+`FlexGap` 为 `number | string`。组件支持原生 `div` 属性、`className`、`style` 和 DOM ref；显式 `style` 优先于布局属性。
+
+## 使用说明
+
+简单等间距排列可使用 Space；需要主轴对齐、反向排列或行内布局时使用 Flex；多列布局使用 Grid。Flex 不改变子元素的外观和尺寸。
diff --git a/apps/docs/docs/components/float-button.mdx b/apps/docs/docs/components/float-button.mdx
index 27cde0e..73a7f0e 100644
--- a/apps/docs/docs/components/float-button.mdx
+++ b/apps/docs/docs/components/float-button.mdx
@@ -27,7 +27,7 @@ import { FloatButtonBasic, FloatButtonActions } from '../../src/examples/float-b
 
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| `variant` | `'solid' \| 'outline' \| 'ghost'` | — | 设置 variant。 |
+| `variant` | `'solid' \| 'outline' \| 'ghost' \| 'link'` | — | 设置 variant。 |
 | `size` | `'sm' \| 'md' \| 'lg'` | — | 展示尺寸。 |
 | `danger` | `boolean` | — | 设置 danger。 |
 | `loading` | `boolean` | — | 展示加载状态。 |
@@ -52,6 +52,7 @@ import { FloatButtonBasic, FloatButtonActions } from '../../src/examples/float-b
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | `actions` | `readonly `[`FloatButtonAction`](#floatbuttonaction)`[]` | — | 必需。条目操作区。 |
+| `fixed` | `boolean` | `true` | 固定在视口角落；false 时参与页面布局。 |
 | `expandable` | `boolean` | `true` | 提供展开操作组的按钮。 |
 | `icon` | `ReactNode` | — | 图标内容。 |
 | `open` | `boolean` | — | 控制面板是否展开。 |
diff --git a/apps/docs/docs/components/form.mdx b/apps/docs/docs/components/form.mdx
index f2003f5..be1d318 100644
--- a/apps/docs/docs/components/form.mdx
+++ b/apps/docs/docs/components/form.mdx
@@ -9,7 +9,7 @@ import { FormLabelWidth } from '../../src/examples/form/label-width';
 
 ## 提交与校验
 
-<ComponentExample title="提交与校验" preview={<FormBasic />} fileName="basic.tsx">
+<ComponentExample title="提交与校验" preview={<FormBasic />} fileName="basic.tsx" width={600}>
 
 ```tsx lineNumbers file="../../src/examples/form/basic.tsx"
 ```
@@ -18,7 +18,7 @@ import { FormLabelWidth } from '../../src/examples/form/label-width';
 
 ## 标签宽度
 
-<ComponentExample title="标签宽度" preview={<FormLabelWidth />} fileName="label-width.tsx">
+<ComponentExample title="标签宽度" preview={<FormLabelWidth />} fileName="label-width.tsx" width={600}>
 
 ```tsx lineNumbers file="../../src/examples/form/label-width.tsx"
 ```
@@ -27,7 +27,7 @@ import { FormLabelWidth } from '../../src/examples/form/label-width';
 
 ## 扩展用法
 
-<ComponentExample title="扩展用法" preview={<ExtensionDemo />} fileName="extensions.tsx">
+<ComponentExample title="扩展用法" preview={<ExtensionDemo />} fileName="extensions.tsx" width={600}>
 
 ```tsx lineNumbers file="../../src/examples/form/extensions.tsx"
 ```
@@ -48,11 +48,11 @@ import { FormLabelWidth } from '../../src/examples/form/label-width';
 
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| `label` | `ReactNode` | — | 标签 / 提示 / 业务错误 |
+| `label` | `ReactNode` | — | 字段标签 |
 | `htmlFor` | `string` | 自动生成 | 与输入控件的 id 关联；一个字段对应一个控件或组 |
 | `required` | `boolean` | `false` | 要求整体值非空，复合控件只校验一次。 |
-| `help` | `ReactNode` | — | 标签 / 提示 / 业务错误 |
-| `error` | `ReactNode` | — | 标签 / 提示 / 业务错误 |
+| `help` | `ReactNode` | — | 显示在控件下方的辅助提示，占据正常布局空间 |
+| `error` | `ReactNode` | — | 错误提示，优先于 help 展示 |
 | `labelWidth` | `number` | — | 当前字段的标签宽度，单位像素 |
 
 ## 类型
@@ -67,6 +67,8 @@ import type { FormProps, FormFieldProps } from '@ifhover/leaf-ui';
 
 默认自动计算同一 Form 中最宽的标签。标签文本、字体或可见字段变化时更新；窄屏和 vertical 布局按纵向排列。支持 onSubmit、onReset、action、method 等表单属性。
 
+help 和错误提示会占据正常布局空间，并与下一项保留表单间距；文字换行后自然增加高度。
+
 用 FormData 读取控件上的 name。简单校验使用 required、type、minLength 等属性，错误提示跟随字段显示；业务与服务端错误通过 error 传入。设置 noValidate 可以接管校验。FormData 返回字符串，不会自动转换为数字或嵌套对象，未勾选复选框不会提交 false。受控字段的重置由应用处理。
 
 ## 扩展类型
diff --git a/apps/docs/docs/components/grid.mdx b/apps/docs/docs/components/grid.mdx
index 72d2778..fae06a0 100644
--- a/apps/docs/docs/components/grid.mdx
+++ b/apps/docs/docs/components/grid.mdx
@@ -8,7 +8,7 @@ import { GridColumns } from '../../src/examples/grid/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<GridBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<GridBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/grid/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { GridColumns } from '../../src/examples/grid/advanced';
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<GridColumns />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<GridColumns />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/grid/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/icons.mdx b/apps/docs/docs/components/icons.mdx
new file mode 100644
index 0000000..4d4800e
--- /dev/null
+++ b/apps/docs/docs/components/icons.mdx
@@ -0,0 +1,42 @@
+import { ComponentExample } from '../../src/components/component-example';
+import { ButtonIcons } from '../../src/examples/button/icons';
+
+# 使用图标
+
+Leaf UI 内部及本文示例使用 **Lucide**，但 `lucide-react` 并不是唯一选择。按钮的 `startIcon` / `endIcon`、输入框的 `prefix` / `suffix` 接受 `ReactNode`，可以传入其他图标库的 React 组件。
+
+## 在线挑选图标
+
+打开 [Lucide 图标目录](https://lucide.dev/icons/)，按名称或关键词搜索、预览并挑选图标。项目源码见 [Lucide GitHub 仓库](https://github.com/lucide-icons/lucide)。
+
+也可以根据项目风格和已有依赖，选用以下图标库：
+
+| 图标库 | 在线目录 | GitHub |
+| --- | --- | --- |
+| React Icons（`react-icons`） | [挑选图标](https://react-icons.github.io/react-icons/) | [react-icons/react-icons](https://github.com/react-icons/react-icons) |
+| Heroicons | [挑选图标](https://heroicons.com/) | [tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons) |
+| Tabler Icons | [挑选图标](https://tabler.io/icons) | [tabler/tabler-icons](https://github.com/tabler/tabler-icons) |
+| Phosphor | [挑选图标](https://phosphoricons.com/) | [phosphor-icons/react](https://github.com/phosphor-icons/react) |
+
+## 安装和导入
+
+以下示例使用 `lucide-react`，直接引用时将它声明为应用依赖。如果使用其他图标库，安装对应依赖并替换图标导入即可。
+
+```bash
+pnpm add lucide-react
+```
+
+按名称导入需要的图标即可。尺寸默认跟随组件的图标容器，颜色继承组件的当前文字色。
+
+<ComponentExample title="图标使用" preview={<ButtonIcons />} fileName="icons.tsx">
+
+```tsx lineNumbers file="../../src/examples/button/icons.tsx"
+```
+
+</ComponentExample>
+
+## 为图标操作提供名称
+
+带文字的按钮使用文字作为名称，前后图标按装饰性内容处理。仅图标按钮必须提供 `aria-label`，例如“添加项目”或“删除项目”。图标不应作为操作含义的唯一提示。
+
+Button 的危险状态会让图标和文字一起使用危险色，无需在图标中固定颜色。
diff --git a/apps/docs/docs/components/image-cropper.mdx b/apps/docs/docs/components/image-cropper.mdx
deleted file mode 100644
index 9edab6f..0000000
--- a/apps/docs/docs/components/image-cropper.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { ComponentExample } from '../../src/components/component-example';
-import { ImageCropperBasic } from '../../src/examples/image-cropper/basic';
-import { ImageCropperAvatar } from '../../src/examples/image-cropper/advanced';
-
-# ImageCropper 图片裁剪
-
-移动选框并调整裁剪范围。
-
-## 基本用法
-
-<ComponentExample title="基本用法" preview={<ImageCropperBasic />} fileName="basic.tsx">
-
-```tsx lineNumbers file="../../src/examples/image-cropper/basic.tsx"
-```
-
-</ComponentExample>
-
-## 更多用法
-
-<ComponentExample title="更多用法" preview={<ImageCropperAvatar />} fileName="advanced.tsx">
-
-```tsx lineNumbers file="../../src/examples/image-cropper/advanced.tsx"
-```
-
-</ComponentExample>
-
-## 使用说明
-
-图片保持固定，拖动选框移动，拖动边缘或角点调整尺寸，支持触摸与键盘。画布默认正方形。未指定 aspect 时矩形可自由调整，圆形固定为 1:1。export() 返回 Blob。远程图片须允许 CORS；圆形 PNG 保留透明边角，JPEG 使用白底。
-
-## 类型
-
-组装数据、定义回调和使用 ref 时，可以导入这些类型。
-
-```ts
-import type { CropArea, ImageCropperHandle, ImageCropperProps, ImageCropResult } from '@ifhover/leaf-ui';
-```
-
-## CropArea API
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `x` | `number` | 必填 | 横坐标 |
-| `y` | `number` | 必填 | 纵坐标 |
-| `width` | `number` | 必填 | 宽度，数字按像素计算 |
-| `height` | `number` | 必填 | 高度，数字按像素计算 |
-
-## ImageCropperHandle API
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `export` | [`() => Promise<ImageCropResult>`](#imagecropresult-api) | 必填 | 导出为 Blob |
-| `reset` | `() => void` | 必填 | 重置状态或重试 |
-
-## ImageCropperProps API
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `src` | `string` | 必填 | 图片地址 |
-| `aspect` | `number` | — | 固定裁剪比例，未提供时自由调整 |
-| `shape` | `'rect' \| 'round'` | `'rect'` | 裁剪形状 |
-| `minWidth / minHeight` | `number` | `24` | 选框最小宽高，按显示像素计算 |
-| `disabled` | `boolean` | `false` | 禁止移动和调整选框 |
-| `showActions` | `boolean` | `true` | 显示重置与裁剪按钮 |
-| `showGrid` | `boolean` | `true` | 裁剪辅助线 |
-| `crossOrigin` | `'anonymous' \| 'use-credentials'` | `'anonymous'` | 图片跨域模式，导出需要服务器允许 CORS |
-| `type` | `'image/png' \| 'image/jpeg' \| 'image/webp'` | `'image/png'` | 导出图片格式 |
-| `quality` | `number` | `0.92` | 导出质量，0–1 |
-| `onChange` | [`(area: CropArea) => void`](#croparea-api) | — | 裁剪区域变化，坐标按原图像素计算 |
-| `onExport` | [`(result: ImageCropResult) => void`](#imagecropresult-api) | — | 导出成功 |
-| `onError` | `(error: Error) => void` | — | 异常回调 |
-| `extra` | `ReactNode` | — | 补充内容或操作 |
-
-## ImageCropResult API
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `blob` | `Blob` | 必填 | 导出的 Blob |
-| `width` | `number` | 必填 | 宽度，数字按像素计算 |
-| `height` | `number` | 必填 | 高度，数字按像素计算 |
diff --git a/apps/docs/docs/components/input-mask.mdx b/apps/docs/docs/components/input-mask.mdx
index 2d9bccc..1f8a0ed 100644
--- a/apps/docs/docs/components/input-mask.mdx
+++ b/apps/docs/docs/components/input-mask.mdx
@@ -8,7 +8,7 @@ import { InputMaskFormats } from '../../src/examples/input-mask/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<InputMaskBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<InputMaskBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input-mask/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { InputMaskFormats } from '../../src/examples/input-mask/advanced';
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<InputMaskFormats />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<InputMaskFormats />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input-mask/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/input-number.mdx b/apps/docs/docs/components/input-number.mdx
index 4a70959..1d6392d 100644
--- a/apps/docs/docs/components/input-number.mdx
+++ b/apps/docs/docs/components/input-number.mdx
@@ -8,7 +8,7 @@ import { InputNumberBasic } from '../../src/examples/input-number/basic';
 
 ## 基础用法
 
-<ComponentExample title="基础用法" preview={<InputNumberBasic />} fileName="basic.tsx">
+<ComponentExample title="基础用法" preview={<InputNumberBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input-number/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { InputNumberBasic } from '../../src/examples/input-number/basic';
 
 ## 格式化与高精度
 
-<ComponentExample title="格式化与高精度" preview={<Capabilities />} fileName="capabilities.tsx">
+<ComponentExample title="格式化与高精度" preview={<Capabilities />} fileName="capabilities.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input-number/capabilities.tsx"
 ```
diff --git a/apps/docs/docs/components/input-otp.mdx b/apps/docs/docs/components/input-otp.mdx
index f7113bb..64cf422 100644
--- a/apps/docs/docs/components/input-otp.mdx
+++ b/apps/docs/docs/components/input-otp.mdx
@@ -8,7 +8,7 @@ import { InputOTPOptions } from '../../src/examples/input-otp/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<InputOTPBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<InputOTPBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input-otp/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { InputOTPOptions } from '../../src/examples/input-otp/advanced';
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<InputOTPOptions />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<InputOTPOptions />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input-otp/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/input.mdx b/apps/docs/docs/components/input.mdx
index 9e3f698..16b0ca1 100644
--- a/apps/docs/docs/components/input.mdx
+++ b/apps/docs/docs/components/input.mdx
@@ -12,7 +12,7 @@ import { InputPassword } from '../../src/examples/input/password';
 
 可以使用 Lucide 图标作为前缀，或通过原生 type 指定邮箱、密码等输入方式。
 
-<ComponentExample title="基础输入" preview={<InputBasic />} fileName="basic.tsx">
+<ComponentExample title="基础输入" preview={<InputBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input/basic.tsx"
 ```
@@ -23,7 +23,7 @@ import { InputPassword } from '../../src/examples/input/password';
 
 设置 type="password" 可输入密码并切换可见状态。可自定义切换图标，也可以隐藏切换按钮。
 
-<ComponentExample title="密码输入" preview={<InputPassword />} fileName="password.tsx">
+<ComponentExample title="密码输入" preview={<InputPassword />} fileName="password.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input/password.tsx"
 ```
@@ -34,7 +34,7 @@ import { InputPassword } from '../../src/examples/input/password';
 
 通过 status 表达校验结果，并用 aria-describedby 关联说明。只读内容使用 readOnly。
 
-<ComponentExample title="校验与禁用" preview={<InputStates />} fileName="states.tsx">
+<ComponentExample title="校验与禁用" preview={<InputStates />} fileName="states.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input/states.tsx"
 ```
@@ -45,7 +45,7 @@ import { InputPassword } from '../../src/examples/input/password';
 
 onPressEnter 在按下 Enter 时触发；输入法正在组合文字或事件已被阻止时不会触发。
 
-<ComponentExample title="受控输入与回车" preview={<InputControlled />} fileName="controlled.tsx">
+<ComponentExample title="受控输入与回车" preview={<InputControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input/controlled.tsx"
 ```
@@ -65,7 +65,7 @@ onPressEnter 在按下 Enter 时触发；输入法正在组合文字或事件已
 
 ## 清除与字数统计
 
-<ComponentExample title="清除与字数统计" preview={<InputClear />} fileName="clear.tsx">
+<ComponentExample title="清除与字数统计" preview={<InputClear />} fileName="clear.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/input/clear.tsx"
 ```
diff --git a/apps/docs/docs/components/layout.mdx b/apps/docs/docs/components/layout.mdx
index 198a1f2..87a012f 100644
--- a/apps/docs/docs/components/layout.mdx
+++ b/apps/docs/docs/components/layout.mdx
@@ -8,20 +8,20 @@ import { LayoutResponsive } from '../../src/examples/layout/advanced';
 
 ## 基本用法
 
-通过不同背景区分 Header、Sider、Content 和 Footer，横向嵌套区域负责排列侧栏与内容。
+用 Header、Sider、Content 和 Footer 组合页面，横向嵌套区域负责排列侧栏与内容。
 
-<ComponentExample title="基本用法" preview={<LayoutBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<LayoutBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/layout/basic.tsx"
 ```
 
 </ComponentExample>
 
-## 可折叠的工作区
+## 响应式侧栏
 
 侧栏支持手动折叠，在窄屏上自动收起；菜单同步切换为图标导航。
 
-<ComponentExample title="可折叠的工作区" preview={<LayoutResponsive />} fileName="advanced.tsx">
+<ComponentExample title="响应式侧栏" preview={<LayoutResponsive />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/layout/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/loading-bar.mdx b/apps/docs/docs/components/loading-bar.mdx
index af78d74..657212f 100644
--- a/apps/docs/docs/components/loading-bar.mdx
+++ b/apps/docs/docs/components/loading-bar.mdx
@@ -8,7 +8,7 @@ import { LoadingBarProgress } from '../../src/examples/loading-bar/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<LoadingBarBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<LoadingBarBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/loading-bar/basic.tsx"
 ```
diff --git a/apps/docs/docs/components/masonry.mdx b/apps/docs/docs/components/masonry.mdx
index bc287cf..481ed88 100644
--- a/apps/docs/docs/components/masonry.mdx
+++ b/apps/docs/docs/components/masonry.mdx
@@ -8,7 +8,7 @@ import { MasonryImages } from '../../src/examples/masonry/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<MasonryBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<MasonryBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/masonry/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { MasonryImages } from '../../src/examples/masonry/advanced';
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<MasonryImages />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<MasonryImages />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/masonry/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/menu.mdx b/apps/docs/docs/components/menu.mdx
index 44b8719..7919c56 100644
--- a/apps/docs/docs/components/menu.mdx
+++ b/apps/docs/docs/components/menu.mdx
@@ -29,7 +29,7 @@ import { MenuRouting } from '../../src/examples/menu/capabilities';
 
 `selectedKey` 跟随当前路由。`linkRender` 可替换默认链接，例如 React Router 或 Next.js 的 Link；保留传入链接的事件、类名和 ARIA 属性。
 
-<ComponentExample title="受控导航与路由" preview={<MenuRouting />} fileName="capabilities.tsx">
+<ComponentExample title="受控导航与路由" preview={<MenuRouting />} fileName="capabilities.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/menu/capabilities.tsx"
 ```
@@ -42,6 +42,8 @@ import { MenuRouting } from '../../src/examples/menu/capabilities';
 
 子菜单展开、收起以及侧栏宽度变化均带有过渡。收起的子项不会参与键盘导航；系统开启减少动态效果时，过渡会自动关闭。
 
+菜单项、悬停背景和选中高亮与按钮共用基础圆角。通过 `ConfigProvider` 的 `theme.borderRadius` 统一调整，也可用 `theme.components.Menu.borderRadius` 单独设置菜单圆角。
+
 ## 类型
 
 组装数据、定义回调和使用 ref 时，可以导入这些类型。
diff --git a/apps/docs/docs/components/message.mdx b/apps/docs/docs/components/message.mdx
index 47685e5..2eaf96c 100644
--- a/apps/docs/docs/components/message.mdx
+++ b/apps/docs/docs/components/message.mdx
@@ -13,7 +13,6 @@ import { MessageShared } from '../../src/examples/message/shared';
 
 ```tsx
 import { ConfigProvider } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
 
 export function Root() {
   return <ConfigProvider><App /></ConfigProvider>;
@@ -46,7 +45,7 @@ export function Root() {
 
 消息关闭时，后续消息会平滑上移。不同高度的内容会按照实际占用空间收起。
 
-<ComponentExample title="多条消息" preview={<MessageStack />} fileName="stack.tsx">
+<ComponentExample title="多条消息" preview={<MessageStack />} fileName="stack.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/message/stack.tsx"
 ```
diff --git a/apps/docs/docs/components/modal.mdx b/apps/docs/docs/components/modal.mdx
index 38f47ec..1eb3438 100644
--- a/apps/docs/docs/components/modal.mdx
+++ b/apps/docs/docs/components/modal.mdx
@@ -1,4 +1,4 @@
-import { AccessScope } from '../../src/examples/modal/access-scope';
+import { ModalDescription } from '../../src/examples/modal/description';
 import { Capabilities } from '../../src/examples/modal/capabilities';
 import { ModalFooter } from '../../src/examples/modal/footer';
 import { ComponentExample } from '../../src/components/component-example';
@@ -10,7 +10,7 @@ import { ModalBasic } from '../../src/examples/modal/basic';
 
 ## 编辑内容
 
-<ComponentExample title="编辑内容" preview={<ModalBasic />} fileName="basic.tsx">
+<ComponentExample title="编辑内容" preview={<ModalBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/modal/basic.tsx"
 ```
@@ -20,7 +20,7 @@ import { ModalBasic } from '../../src/examples/modal/basic';
 
 ## 自定义底部
 
-<ComponentExample title="自定义底部" preview={<ModalFooter />} fileName="footer.tsx">
+<ComponentExample title="自定义底部" preview={<ModalFooter />} fileName="footer.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/modal/footer.tsx"
 ```
@@ -29,20 +29,20 @@ import { ModalBasic } from '../../src/examples/modal/basic';
 
 ## 状态销毁与初始焦点
 
-<ComponentExample title="状态销毁与初始焦点" preview={<Capabilities />} fileName="capabilities.tsx">
+<ComponentExample title="状态销毁与初始焦点" preview={<Capabilities />} fileName="capabilities.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/modal/capabilities.tsx"
 ```
 
 </ComponentExample>
 
-## 权限设置
+## 图标与说明
 
-结合标题说明、卡片选项和成组权限列表完成设置。
+使用 `icon` 和 `description` 为操作补充上下文。
 
-<ComponentExample title="权限设置" preview={<AccessScope />} fileName="access-scope.tsx">
+<ComponentExample title="图标与说明" preview={<ModalDescription />} fileName="description.tsx" width="fit-content">
 
-```tsx lineNumbers file="../../src/examples/modal/access-scope.tsx"
+```tsx lineNumbers file="../../src/examples/modal/description.tsx"
 ```
 
 </ComponentExample>
diff --git a/apps/docs/docs/components/notification.mdx b/apps/docs/docs/components/notification.mdx
index dc33ee1..2439798 100644
--- a/apps/docs/docs/components/notification.mdx
+++ b/apps/docs/docs/components/notification.mdx
@@ -8,7 +8,7 @@ import { NotificationOptions } from '../../src/examples/notification/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<NotificationBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<NotificationBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/notification/basic.tsx"
 ```
diff --git a/apps/docs/docs/components/pagination.mdx b/apps/docs/docs/components/pagination.mdx
index e72054c..5471c40 100644
--- a/apps/docs/docs/components/pagination.mdx
+++ b/apps/docs/docs/components/pagination.mdx
@@ -1,5 +1,8 @@
 import { ComponentExample } from '../../src/components/component-example';
 import { PaginationBasic } from '../../src/examples/pagination/basic';
+import { PaginationSizes } from '../../src/examples/pagination/sizes';
+import { PaginationControlled } from '../../src/examples/pagination/controlled';
+import { PaginationStates } from '../../src/examples/pagination/states';
 
 # Pagination 分页
 
@@ -7,6 +10,8 @@ import { PaginationBasic } from '../../src/examples/pagination/basic';
 
 ## 基础用法
 
+默认使用描边按钮，也可以通过 `variant="ghost"` 使用无边框按钮。
+
 <ComponentExample title="基础用法" preview={<PaginationBasic />} fileName="basic.tsx">
 
 ```tsx lineNumbers file="../../src/examples/pagination/basic.tsx"
@@ -14,25 +19,62 @@ import { PaginationBasic } from '../../src/examples/pagination/basic';
 
 </ComponentExample>
 
+## 不同尺寸
+
+分别展示小、默认和大尺寸。
+
+<ComponentExample title="不同尺寸" preview={<PaginationSizes />} fileName="sizes.tsx">
+
+```tsx lineNumbers file="../../src/examples/pagination/sizes.tsx"
+```
+
+</ComponentExample>
+
+## 数据控制
+
+同时控制页码和每页条数；开启统计、条数选择和页码跳转。
+
+<ComponentExample title="数据控制" preview={<PaginationControlled />} width={720} fileName="controlled.tsx">
+
+```tsx lineNumbers file="../../src/examples/pagination/controlled.tsx"
+```
+
+</ComponentExample>
+
+## 简洁与禁用
+
+`simple` 只保留前后翻页和当前页信息；`disabled` 禁用所有操作。
+
+<ComponentExample title="简洁与禁用" preview={<PaginationStates />} fileName="states.tsx">
+
+```tsx lineNumbers file="../../src/examples/pagination/states.tsx"
+```
+
+</ComponentExample>
+
 ## Pagination API
 
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| `total` | `number` | 必填 | 数据总条数 |
-| `current / defaultCurrent` | `number` | `1` | 受控页码 / 初始页码 |
-| `pageSize / defaultPageSize` | `number` | `10` | 受控每页条数 / 初始条数 |
-| `onChange` | `(page: number, pageSize: number) => void` | — | 页码或每页条数变化 |
+| `total` | `number` | 必填 | 必需。数据总条数 |
+| `current` | `number` | — | 受控页码，从 1 开始 |
+| `defaultCurrent` | `number` | `1` | 非受控初始页码 |
+| `pageSize` | `number` | — | 受控每页条数 |
+| `defaultPageSize` | `number` | `10` | 非受控初始每页条数 |
+| `onChange` | `(page: number, pageSize: number) => void` | — | 页码或条数实际变化时调用一次，同时返回两者 |
 | `showSizeChanger` | `boolean` | `false` | 展示每页条数选择器 |
-| `pageSizeOptions` | `readonly number[]` | — | 可选每页条数 |
-| `showQuickJumper` | `boolean` | `false` | 允许输入页码，回车跳转 |
-| `showTotal` | `(total: number, range: readonly [number, number]) => ReactNode` | — | 自定义总数说明 |
-| `simple` | `boolean` | `false` | 使用简洁页码展示 |
-| `disabled / hideOnSinglePage` | `boolean` | `false` | 禁用 / 单页时隐藏 |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 控件尺寸 |
+| `pageSizeOptions` | `readonly number[]` | `[10, 20, 50, 100]` | 可选每页条数；自动包含当前条数，忽略无效值并去重 |
+| `showQuickJumper` | `boolean` | `false` | 回车或离开分页区域时跳转；点击其他分页控件时以该操作为准 |
+| `showTotal` | `boolean \| ((total: number, range: readonly [number, number]) => ReactNode)` | `false` | true 展示默认统计，也可传入函数自定义；range 为当前页首末条目的序号 |
+| `simple` | `boolean` | `false` | 只展示前后翻页和当前页 / 总页数 |
+| `disabled` | `boolean` | `false` | 禁用交互。 |
+| `hideOnSinglePage` | `boolean` | `false` | 总页数不足两页时隐藏 |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 页码按钮、条数选择器和跳转输入框的尺寸 |
+| `variant` | `'outline' \| 'ghost'` | `'outline'` | 按钮样式：描边 / 无边框 |
 
-## 类型
+组件同时支持 `aria-label`、`className`、`style` 等原生 `<nav>` 属性。
 
-定义组件属性或组装列表时可导入相关类型。
+## 类型
 
 ```ts
 import type { PaginationProps } from '@ifhover/leaf-ui';
@@ -40,4 +82,15 @@ import type { PaginationProps } from '@ifhover/leaf-ui';
 
 ## 使用说明
 
-页码从 1 开始。应用根据 onChange 加载对应数据；改变每页条数时，页码会尽量保留当前数据的位置。越界页码会自动限制到有效范围。
+基础分页只需提供 `total`，组件自行管理页码和条数。加载远程数据时使用 `current` 和 `pageSize`，在 `onChange` 中一起更新并请求数据；`total` 应是完整结果的总条数，而非当前页条数。
+
+改变每页条数时尽量保留当前数据位置，例如从每页 10 条的第 3 页切换到每页 20 条，会进入第 2 页。越界页码自动限制到有效范围；空数据保留第 1 页，前后按钮均禁用。外部属性变化不会额外触发 `onChange`。
+
+`showTotal` 的默认统计跟随 ConfigProvider 的语言。需要展示当前数据范围时，可以传入渲染函数：
+
+```tsx
+<Pagination
+  total={240}
+  showTotal={(total, [start, end]) => `${start}–${end} / ${total} 条`}
+/>
+```
diff --git a/apps/docs/docs/components/popconfirm.mdx b/apps/docs/docs/components/popconfirm.mdx
index 91758c2..3bc559a 100644
--- a/apps/docs/docs/components/popconfirm.mdx
+++ b/apps/docs/docs/components/popconfirm.mdx
@@ -8,7 +8,7 @@ import { PopconfirmAsync } from '../../src/examples/popconfirm/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<PopconfirmBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<PopconfirmBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/popconfirm/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { PopconfirmAsync } from '../../src/examples/popconfirm/advanced';
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<PopconfirmAsync />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<PopconfirmAsync />} fileName="advanced.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/popconfirm/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/popover.mdx b/apps/docs/docs/components/popover.mdx
index eaec397..c781d73 100644
--- a/apps/docs/docs/components/popover.mdx
+++ b/apps/docs/docs/components/popover.mdx
@@ -18,7 +18,7 @@ import { PopoverPlacements } from '../../src/examples/popover/placements';
 
 ## 受控编辑
 
-<ComponentExample title="受控编辑" preview={<PopoverControlled />} fileName="controlled.tsx">
+<ComponentExample title="受控编辑" preview={<PopoverControlled />} fileName="controlled.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/popover/controlled.tsx"
 ```
diff --git a/apps/docs/docs/components/qr-code.mdx b/apps/docs/docs/components/qr-code.mdx
index 64115dc..8cc8054 100644
--- a/apps/docs/docs/components/qr-code.mdx
+++ b/apps/docs/docs/components/qr-code.mdx
@@ -17,7 +17,7 @@ import { QRCodeStatus } from '../../src/examples/qr-code/advanced';
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<QRCodeStatus />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<QRCodeStatus />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/qr-code/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/radio.mdx b/apps/docs/docs/components/radio.mdx
index de6159a..2aa5a59 100644
--- a/apps/docs/docs/components/radio.mdx
+++ b/apps/docs/docs/components/radio.mdx
@@ -22,7 +22,7 @@ import { RadioBasic, RadioControlled } from '../../src/components/form-examples'
 
 通过 value / onChange 管理选择结果，direction="vertical" 设置纵向排列。
 
-<ComponentExample title="受控与纵向排列" preview={<RadioControlled />} fileName="controlled.tsx">
+<ComponentExample title="受控与纵向排列" preview={<RadioControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/radio/controlled.tsx"
 ```
diff --git a/apps/docs/docs/components/rate.mdx b/apps/docs/docs/components/rate.mdx
index b5a80c2..1241419 100644
--- a/apps/docs/docs/components/rate.mdx
+++ b/apps/docs/docs/components/rate.mdx
@@ -9,7 +9,7 @@ import { RateStates } from '../../src/examples/rate/states';
 
 ## 选择评分
 
-<ComponentExample title="选择评分" preview={<RateBasic />} fileName="basic.tsx">
+<ComponentExample title="选择评分" preview={<RateBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/rate/basic.tsx"
 ```
@@ -18,7 +18,7 @@ import { RateStates } from '../../src/examples/rate/states';
 
 ## 按分数变色
 
-<ComponentExample title="按分数变色" preview={<RateColors />} fileName="colors.tsx">
+<ComponentExample title="按分数变色" preview={<RateColors />} fileName="colors.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/rate/colors.tsx"
 ```
@@ -27,7 +27,7 @@ import { RateStates } from '../../src/examples/rate/states';
 
 ## 只读与禁用
 
-<ComponentExample title="只读与禁用" preview={<RateStates />} fileName="states.tsx">
+<ComponentExample title="只读与禁用" preview={<RateStates />} fileName="states.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/rate/states.tsx"
 ```
diff --git a/apps/docs/docs/components/result.mdx b/apps/docs/docs/components/result.mdx
index 77b9b08..11a03ee 100644
--- a/apps/docs/docs/components/result.mdx
+++ b/apps/docs/docs/components/result.mdx
@@ -51,7 +51,7 @@ import { ResultCustom } from '../../src/examples/result/custom';
 可导入以下类型定义属性、组装数据或处理回调。
 
 ```ts
-import type { ResultProps } from '@ifhover/leaf-ui';
+import type { EmptyProps, ResultProps } from '@ifhover/leaf-ui';
 ```
 
 ## 使用说明
@@ -59,3 +59,14 @@ import type { ResultProps } from '@ifhover/leaf-ui';
 空数据使用 `status="empty"`，成功、警告、错误与信息状态有对应图标和颜色。传入 `icon`、`title`、`description` 和 `extra` 可自定义内容。
 
 原来的 `Empty` 仍保留兼容入口，建议迁移为 `Result`：`image` 改为 `icon`，`description` 改为 `title`，原本的操作按钮移到 `extra`。
+
+## Empty API
+
+兼容组件，新增用法请使用 `Result`。`EmptyProps` 同时支持原生 `div` 属性。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `image` | `ReactNode` | 空数据图标 | 自定义图标；`null` 隐藏。 |
+| `description` | `ReactNode` | 语言默认标题 | 空数据说明；`null` 隐藏。 |
+| `size` | `'sm' \| 'md'` | `'md'` | 内容间距和图标大小。 |
+| `children` | `ReactNode` | — | 底部操作内容。 |
diff --git a/apps/docs/docs/components/segmented.mdx b/apps/docs/docs/components/segmented.mdx
index 29c0760..a285757 100644
--- a/apps/docs/docs/components/segmented.mdx
+++ b/apps/docs/docs/components/segmented.mdx
@@ -8,7 +8,7 @@ import { SegmentedOptions } from '../../src/examples/segmented/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<SegmentedBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<SegmentedBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/segmented/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { SegmentedOptions } from '../../src/examples/segmented/advanced';
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<SegmentedOptions />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<SegmentedOptions />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/segmented/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/select.mdx b/apps/docs/docs/components/select.mdx
index 06d5d8e..46ab9ea 100644
--- a/apps/docs/docs/components/select.mdx
+++ b/apps/docs/docs/components/select.mdx
@@ -1,9 +1,10 @@
+import { SingleLine } from '../../src/examples/select/single-line';
 import { Capabilities } from '../../src/examples/select/capabilities';
 import { ExtensionDemo } from '../../src/examples/select/extensions';
 import { SelectPopup } from '../../src/examples/select/popup';
 import { SelectSearch } from '../../src/examples/select/search';
 import { ComponentExample } from '../../src/components/component-example';
-import { SelectBasic, SelectControlled, SelectTheme, ControlSizes } from '../../src/components/form-examples';
+import { SelectBasic, SelectControlled, ControlSizes } from '../../src/components/form-examples';
 
 # Select 选择器
 
@@ -13,7 +14,7 @@ import { SelectBasic, SelectControlled, SelectTheme, ControlSizes } from '../../
 
 通过 options 传入选项；placeholder 在空值时提示选择，单个选项可以禁用。
 
-<ComponentExample title="基础选择" preview={<SelectBasic />} fileName="basic.tsx">
+<ComponentExample title="基础选择" preview={<SelectBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/select/basic.tsx"
 ```
@@ -24,24 +25,13 @@ import { SelectBasic, SelectControlled, SelectTheme, ControlSizes } from '../../
 
 value / onChange 管理选择结果，回调直接返回字符串值和选项对象。`allowClear` 显示清除按钮；status="error" 同时提供错误外观与 aria-invalid。
 
-<ComponentExample title="受控与校验" preview={<SelectControlled />} fileName="controlled.tsx">
+<ComponentExample title="受控与校验" preview={<SelectControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/select/controlled.tsx"
 ```
 
 </ComponentExample>
 
-## 局部主题
-
-通过 ConfigProvider 设置局部主题，选项浮层也会使用相同的颜色与圆角。
-
-<ComponentExample title="局部主题与清除" preview={<SelectTheme />} fileName="theme.tsx">
-
-```tsx lineNumbers file="../../src/examples/select/theme.tsx"
-```
-
-</ComponentExample>
-
 ## 尺寸对齐
 
 <ComponentExample title="尺寸对齐" preview={<ControlSizes />} fileName="control-sizes.tsx">
@@ -56,7 +46,7 @@ value / onChange 管理选择结果，回调直接返回字符串值和选项对
 
 showSearch 只筛选已有选项；multiple 使用数组值并在选择后保持展开，可移除标签。
 
-<ComponentExample title="搜索与多选" preview={<SelectSearch />} fileName="search.tsx">
+<ComponentExample title="搜索与多选" preview={<SelectSearch />} fileName="search.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/select/search.tsx"
 ```
@@ -65,7 +55,7 @@ showSearch 只筛选已有选项；multiple 使用数组值并在选择后保持
 
 ## 浮层宽度与内容
 
-<ComponentExample title="浮层宽度与内容" preview={<SelectPopup />} fileName="popup.tsx">
+<ComponentExample title="浮层宽度与内容" preview={<SelectPopup />} fileName="popup.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/select/popup.tsx"
 ```
@@ -90,6 +80,17 @@ showSearch 只筛选已有选项；multiple 使用数组值并在选择后保持
 
 </ComponentExample>
 
+## 单行多选
+
+设置 `tagWrap={false}` 后，已选项始终展示在一行内。长文字自动省略，放不下的选项合并为 `+N`；空间很窄时只显示数量，打开浮层可查看和修改选择。`maxTagCount` 可进一步限制标签数量，`maxTagCount="responsive"` 也会启用单行自动折叠。
+
+<ComponentExample title="单行多选" preview={<SingleLine />} fileName="single-line.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/select/single-line.tsx"
+```
+
+</ComponentExample>
+
 ## Select API
 
 | 属性 | 类型 | 默认值 | 说明 |
@@ -119,12 +120,13 @@ showSearch 只筛选已有选项；multiple 使用数组值并在选择后保持
 | `notFoundContent` | `ReactNode` | — | 没有选项时的内容 |
 | `optionRender` | `(option: `[`SelectOption`](#selectoption)`) => ReactNode` | — | 自定义选项内容 |
 | `maxCount` | `number` | — | 多选数量上限，已选项可继续取消 |
-| `maxTagCount` | `number \| 'responsive'` | — | 展示的标签数量，其余用数量提示 |
+| `maxTagCount` | `number \| 'responsive'` | — | 最多展示的标签数；responsive 根据可用宽度自动折叠。 |
+| `tagWrap` | `boolean` | `true` | 允许多选标签换行；false 单行显示并自动折叠溢出项。 |
 | `allowCreate` | `boolean` | `false` | 允许创建未匹配的选项 |
 | `onCreate` | `(option: `[`SelectOption`](#selectoption)`) => void` | — | 新选项创建回调 |
 | `virtual` | `boolean` | 选项超过 100 时启用 | 仅渲染可见项目 |
 | `listHeight` | `number` | `248` | 列表高度 |
-| `optionHeight` | `number` | `36` | 虚拟列表的预估选项高度 |
+| `optionHeight` | `number` | `32` | 跟随区域控件高度和密度的预估行高；实际行会被测量。 |
 | `multiple` | `false \| true` | `false` | 多选时值为数组，默认 [] |
 | `value` | `string \| readonly string[]` | `''` | 受控值 / 非受控初始值 |
 | `defaultValue` | `string \| readonly string[]` | `''` | 受控值 / 非受控初始值 |
diff --git a/apps/docs/docs/components/signature-pad.mdx b/apps/docs/docs/components/signature-pad.mdx
deleted file mode 100644
index 21070f0..0000000
--- a/apps/docs/docs/components/signature-pad.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ComponentExample } from '../../src/components/component-example';
-import { SignaturePadBasic } from '../../src/examples/signature-pad/basic';
-import { SignaturePadControlled } from '../../src/examples/signature-pad/advanced';
-
-# SignaturePad 签名板
-
-手写签名并导出图片。
-
-## 基本用法
-
-<ComponentExample title="基本用法" preview={<SignaturePadBasic />} fileName="basic.tsx">
-
-```tsx lineNumbers file="../../src/examples/signature-pad/basic.tsx"
-```
-
-</ComponentExample>
-
-## 更多用法
-
-<ComponentExample title="更多用法" preview={<SignaturePadControlled />} fileName="advanced.tsx">
-
-```tsx lineNumbers file="../../src/examples/signature-pad/advanced.tsx"
-```
-
-</ComponentExample>
-
-## 使用说明
-
-value / onChange 保存可恢复编辑的笔画，ref.export() 返回 PNG、JPEG 或 SVG Blob。按设备像素比绘制，并在尺寸变化时保留笔画。请提供无法手写时的替代签署方式。
-
-## 类型
-
-组装数据、定义回调和使用 ref 时，可以导入这些类型。
-
-```ts
-import type { SignaturePadHandle, SignaturePadProps, SignaturePoint, SignatureStroke } from '@ifhover/leaf-ui';
-```
-
-## SignaturePadHandle API
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `clear` | `() => void` | 必填 | 清空笔迹 |
-| `undo` | `() => void` | 必填 | 撤销最后一笔 |
-| `isEmpty` | `() => boolean` | 必填 | 是否没有笔迹 |
-| `getData` | [`() => SignatureStroke[]`](#signaturestroke-api) | 必填 | 获取可编辑笔画 |
-| `export` | `(type?: 'image/png' \| 'image/jpeg' \| 'image/svg+xml') => Promise<Blob>` | 必填 | 导出为 Blob |
-
-## SignaturePadProps API
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `value` | [`readonly SignatureStroke[]`](#signaturestroke-api) | — | 受控值 |
-| `defaultValue` | [`readonly SignatureStroke[]`](#signaturestroke-api) | `[]` | 非受控模式的初始笔画 |
-| `onChange` | [`(strokes: SignatureStroke[]) => void`](#signaturestroke-api) | — | 值变化回调 |
-| `onError` | `(error: Error) => void` | — | 异常回调 |
-| `penColor` | `string` | `'#203329'` | 笔迹颜色 |
-| `backgroundColor` | `string` | `'#ffffff'` | 背景颜色 |
-| `minWidth` | `number` | `0.5` | 最细笔迹宽度 |
-| `maxWidth` | `number` | `2.5` | 最粗笔迹宽度 |
-| `height` | `number` | `220` | 高度，数字按像素计算 |
-| `disabled` | `boolean` | `false` | 禁止交互 |
-| `controls` | `boolean` | `true` | 显示操作栏 |
-
-## SignaturePoint API
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `x` | `number` | 必填 | 横坐标 |
-| `y` | `number` | 必填 | 纵坐标 |
-| `pressure` | `number` | 必填 | 笔压，0–1 |
-| `time` | `number` | 必填 | 点的时间戳 |
-
-## SignatureStroke API
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `points` | [`SignaturePoint[]`](#signaturepoint-api) | 必填 | 笔画的点序列 |
-| `penColor` | `string` | 必填 | 笔迹颜色 |
-| `minWidth` | `number` | 必填 | 最细笔迹宽度 |
-| `maxWidth` | `number` | 必填 | 最粗笔迹宽度 |
-| `dotSize` | `number` | 必填 | 单点尺寸 |
-| `velocityFilterWeight` | `number` | 必填 | 速度平滑系数 |
-| `compositeOperation` | `GlobalCompositeOperation` | 必填 | Canvas 合成模式 |
diff --git a/apps/docs/docs/components/splitter.mdx b/apps/docs/docs/components/splitter.mdx
index 82cc9b2..b5e0552 100644
--- a/apps/docs/docs/components/splitter.mdx
+++ b/apps/docs/docs/components/splitter.mdx
@@ -7,7 +7,7 @@ import { SplitterBasic, SplitterVertical } from '../../src/examples/splitter/bas
 
 ## 基础用法
 
-<ComponentExample title="基础用法" preview={<SplitterBasic />} fileName="basic.tsx">
+<ComponentExample title="基础用法" preview={<SplitterBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/splitter/basic.tsx"
 ```
@@ -16,7 +16,7 @@ import { SplitterBasic, SplitterVertical } from '../../src/examples/splitter/bas
 
 ## 上下布局
 
-<ComponentExample title="上下布局" preview={<SplitterVertical />} fileName="basic.tsx">
+<ComponentExample title="上下布局" preview={<SplitterVertical />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/splitter/basic.tsx"
 ```
diff --git a/apps/docs/docs/components/steps.mdx b/apps/docs/docs/components/steps.mdx
index 1051dc9..d89cb2c 100644
--- a/apps/docs/docs/components/steps.mdx
+++ b/apps/docs/docs/components/steps.mdx
@@ -8,7 +8,7 @@ import { StepsBasic } from '../../src/examples/steps/basic';
 
 ## 基础用法
 
-<ComponentExample title="基础用法" preview={<StepsBasic />} fileName="basic.tsx">
+<ComponentExample title="基础用法" preview={<StepsBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/steps/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { StepsBasic } from '../../src/examples/steps/basic';
 
 ## 点状与进度模式
 
-<ComponentExample title="点状与进度模式" preview={<Capabilities />} fileName="capabilities.tsx">
+<ComponentExample title="点状与进度模式" preview={<Capabilities />} fileName="capabilities.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/steps/capabilities.tsx"
 ```
diff --git a/apps/docs/docs/components/switch.mdx b/apps/docs/docs/components/switch.mdx
index 662f387..a2a6da0 100644
--- a/apps/docs/docs/components/switch.mdx
+++ b/apps/docs/docs/components/switch.mdx
@@ -20,7 +20,7 @@ loading 显示加载图标并阻止交互，可用于异步保存期间避免重
 
 通过 `checked` / `onChange` 管理开关状态，`size` 调整大小。
 
-<ComponentExample title="受控与尺寸" preview={<SwitchControlled />} fileName="controlled.tsx">
+<ComponentExample title="受控与尺寸" preview={<SwitchControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/switch/controlled.tsx"
 ```
diff --git a/apps/docs/docs/components/table.mdx b/apps/docs/docs/components/table.mdx
index 9aa7973..357c4b0 100644
--- a/apps/docs/docs/components/table.mdx
+++ b/apps/docs/docs/components/table.mdx
@@ -32,7 +32,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 基础用法
 
-<ComponentExample title="团队成员" preview={<TableBasic />} fileName="basic.tsx">
+<ComponentExample title="团队成员" preview={<TableBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/basic.tsx"
 ```
@@ -43,7 +43,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 快捷数据表格
 
-<ComponentExample title="传入数据和列" preview={<TableSimple />} fileName="basic.tsx">
+<ComponentExample title="传入数据和列" preview={<TableSimple />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/basic.tsx"
 ```
@@ -56,7 +56,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 排序、筛选、选择与分页
 
-<ComponentExample title="管理团队成员" preview={<TableData />} fileName="data.tsx">
+<ComponentExample title="管理团队成员" preview={<TableData />} fileName="data.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/data.tsx"
 ```
@@ -81,7 +81,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 固定表头、固定列与列宽
 
-<ComponentExample title="紧凑布局与列调整" preview={<TableColumns />} fileName="data.tsx">
+<ComponentExample title="紧凑布局与列调整" preview={<TableColumns />} fileName="data.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/data.tsx"
 ```
@@ -96,7 +96,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 分组与聚合
 
-<ComponentExample title="按团队汇总" preview={<TableGrouped />} fileName="advanced.tsx">
+<ComponentExample title="按团队汇总" preview={<TableGrouped />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/advanced.tsx"
 ```
@@ -105,7 +105,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 编辑单元格
 
-<ComponentExample title="编辑成员姓名" preview={<TableEditable />} fileName="advanced.tsx">
+<ComponentExample title="编辑成员姓名" preview={<TableEditable />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/advanced.tsx"
 ```
@@ -116,7 +116,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 行和列排序
 
-<ComponentExample title="调整团队顺序" preview={<TableReordering />} fileName="reordering.tsx">
+<ComponentExample title="调整团队顺序" preview={<TableReordering />} fileName="reordering.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/reordering.tsx"
 ```
@@ -129,7 +129,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 大数据
 
-<ComponentExample title="一万行成员" preview={<TableVirtual />} fileName="advanced.tsx">
+<ComponentExample title="一万行成员" preview={<TableVirtual />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/advanced.tsx"
 ```
@@ -142,7 +142,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 服务端数据
 
-<ComponentExample title="远程分页与重试" preview={<TableServer />} fileName="advanced.tsx">
+<ComponentExample title="远程分页与重试" preview={<TableServer />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/advanced.tsx"
 ```
@@ -155,7 +155,7 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## 空数据、加载和错误
 
-<ComponentExample title="数据状态" preview={<TableStates />} fileName="basic.tsx">
+<ComponentExample title="数据状态" preview={<TableStates />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/table/basic.tsx"
 ```
@@ -227,7 +227,6 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| `table` | `TanStackTable<TData>` | — | 必需。由 useReactTable 创建的实例，唯一的数据与状态来源。 |
 | `children` | `ReactNode` | — | 自定义布局；传入后不再渲染默认 Content 和 Pagination。 |
 | `caption` | `ReactNode` | — | 表格说明。 |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 展示尺寸。 |
@@ -242,16 +241,17 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 | `onRetry` | `() => void` | — | 请求重试。 |
 | `selection` | `false \| 'single' \| 'multiple'` | `false` | 不选择、单选或多选。 |
 | `selectAllMode` | `'page' \| 'all'` | `'page'` | 全选当前页，或实例内已加载的可选择行。 |
-| `getRowLabel` | `(row: Row<TData>) => string` | — | 行操作的可访问名称；默认使用稳定 row.id。 |
-| `renderExpandedRow` | `(row: Row<TData>) => ReactNode` | — | 渲染叶子行详情，同时配置 getRowCanExpand。 |
-| `getRowProps` | `(row: Row<TData>) => `[`TableRowProps`](#tablerow-api) | — | 自定义行属性与事件。 |
-| `getCellProps` | `(cell: Cell<TData, unknown>) => `[`TableCellProps`](#tablecell-api) | — | 自定义单元格属性、样式或合并；colSpan / rowSpan 为 0 时省略该单元格。 |
 | `resizable` | `boolean` | `false` | 展示可调整列的宽度手柄。 |
 | `columnReordering` | `boolean` | `false` | 展示单层表头的拖拽手柄。 |
-| `onRowReorder` | `(info: `[`DataTableRowReorderInfo`](#datatablerowreorderinfo)`<TData>) => void` | — | 展示行拖拽手柄，并返回重排后的当前页行；应用负责更新数据。 |
 | `virtual` | `boolean \| `[`DataTableVirtualOptions`](#datatablevirtualoptions) | `false` | 启用行虚拟化。 |
 | `pagination` | `boolean` | `true` | 默认布局是否展示分页器。 |
 | `tableRef` | `Ref<HTMLTableElement>` | — | 原生表格 DOM ref。 |
+| `table` | `TanStackTable<TData>` | — | 必需。由 useReactTable 创建的实例，唯一的数据与状态来源。 |
+| `getRowLabel` | `(row: Row<TData>) => string` | — | 行操作的可访问名称；默认使用稳定 row.id。 |
+| `renderExpandedRow` | `(row: Row<TData>) => ReactNode` | — | 渲染叶子行详情，同时配置 getRowCanExpand。 |
+| `getRowProps` | `(row: Row<TData>) => `[`TableRowProps`](#tablerow-api) | — | 自定义行属性与事件。 |
+| `getCellProps` | `(cell: Cell<TData, unknown>) => `[`TableCellProps`](#tablecell-api) | — | 自定义单元格属性、样式或合并；colSpan / rowSpan 为 0 时省略该单元格。 |
+| `onRowReorder` | `(info: `[`DataTableRowReorderInfo`](#datatablerowreorderinfo)`<TData>) => void` | — | 展示行拖拽手柄，并返回重排后的当前页行；应用负责更新数据。 |
 
 尺寸、边框、交替行、固定表头、滚动区域和 loading 与 Table 相同。`aria-label` / `aria-labelledby` 应用于原生表格，其他原生 div 属性用于外层。
 
@@ -284,12 +284,13 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 | --- | --- | --- | --- |
 | `showSizeChanger` | `boolean` | `true` | 展示每页条数选择器。 |
 | `pageSizeOptions` | `readonly number[]` | — | 可选择的每页条数。 |
-| `showQuickJumper` | `boolean` | — | 展示页码跳转输入框。 |
-| `showTotal` | `(total: number, range: readonly [number, number]) => ReactNode` | — | 定制总数及当前范围的展示。 |
+| `showQuickJumper` | `boolean` | `false` | 回车或离开分页区域时跳转。 |
+| `showTotal` | `boolean \| ((total: number, range: readonly [number, number]) => ReactNode)` | `false` | true 展示默认统计，也可传入函数定制总数及当前范围。 |
 | `simple` | `boolean` | — | 使用简洁分页器。 |
 | `disabled` | `boolean` | — | 禁用交互。 |
 | `hideOnSinglePage` | `boolean` | — | 只有一页时隐藏分页器。 |
 | `size` | `'sm' \| 'md' \| 'lg'` | — | 默认跟随 DataTable 的尺寸。 |
+| `variant` | `'outline' \| 'ghost'` | `'outline'` | 分页按钮样式：描边 / 无边框。 |
 | `hasNextPage` | `boolean` | — | 未知总数时控制下一页是否可用。 |
 
 
@@ -297,6 +298,11 @@ import type { DataTableProps, DataTableColumnMeta } from '@ifhover/leaf-ui/table
 
 ## DataTableContent API
 
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `className` | `string` | — | 内容区域的自定义类名。 |
+| `style` | `CSSProperties` | — | 内容区域的内联样式。 |
+
 `DataTable.Content` 支持原生 `div` 属性，包括 `className`、`style` 和事件。表格的布局、选择、展开与加载参数在 [DataTable](#datatable-api) 上配置，表格 DOM ref 使用 `tableRef`。公开类型为 `DataTableContentProps`。
 
 ## DataTableColumnMeta
@@ -347,3 +353,29 @@ Header / Body / Footer、Caption、Row 和 Cell 支持对应元素的原生属
 | `toIndex` | `number` | — | 必需。目标当前页索引，从 0 开始。 |
 | `activeRow` | `Row<TData>` | — | 必需。正在移动的行，包含稳定 row.id。 |
 | `overRow` | `Row<TData>` | — | 必需。放置目标行，包含稳定 row.id。 |
+
+## DataTablePresentation API
+
+ConfigProvider 的 `components.DataTable` 使用这些与行类型无关的参数。可从 `@ifhover/leaf-ui` 导入 `DataTablePresentationProps` 组装配置；只配置默认参数不需要安装 TanStack Table，使用 DataTable 时仍需要安装。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | — | 子内容；嵌套数据类型表示子节点。 |
+| `caption` | `ReactNode` | — | 设置 caption。 |
+| `size` | `'sm' \| 'md' \| 'lg'` | — | 展示尺寸。 |
+| `bordered` | `boolean` | — | 设置 bordered。 |
+| `striped` | `boolean` | — | 设置 striped。 |
+| `stickyHeader` | `boolean` | — | 设置 stickyHeader。 |
+| `maxHeight` | [`TableProps`](#table-api)`['maxHeight']` | — | 设置 maxHeight。 |
+| `minWidth` | [`TableProps`](#table-api)`['minWidth']` | — | 设置 minWidth。 |
+| `loading` | `boolean` | — | 展示加载状态。 |
+| `emptyContent` | `ReactNode` | — | 没有内容时的展示。 |
+| `error` | `ReactNode` | — | 设置 error。 |
+| `onRetry` | `() => void` | — | 设置 onRetry。 |
+| `selection` | `false \| 'single' \| 'multiple'` | — | 设置 selection。 |
+| `selectAllMode` | `'page' \| 'all'` | — | 设置 selectAllMode。 |
+| `resizable` | `boolean` | — | 允许拖动和使用方向键调整大小。 |
+| `columnReordering` | `boolean` | — | 设置 columnReordering。 |
+| `virtual` | `boolean \| `[`DataTableVirtualOptions`](#datatablevirtualoptions) | — | 启用虚拟滚动；大量选项默认启用。 |
+| `pagination` | `boolean` | — | 设置 pagination。 |
+| `tableRef` | `Ref<HTMLTableElement>` | — | 设置 tableRef。 |
diff --git a/apps/docs/docs/components/tabs.mdx b/apps/docs/docs/components/tabs.mdx
index 2311fb5..c51e4aa 100644
--- a/apps/docs/docs/components/tabs.mdx
+++ b/apps/docs/docs/components/tabs.mdx
@@ -3,11 +3,16 @@ import { ExtensionDemo } from '../../src/examples/tabs/extensions';
 import { TabsClosable } from '../../src/examples/tabs/closable';
 import { ComponentExample } from '../../src/components/component-example';
 import { TabsBasic } from '../../src/examples/tabs/basic';
+import { TabsSizes } from '../../src/examples/tabs/sizes';
 
 # Tabs 标签页
 
 在同一区域切换不同内容。
 
+切换时正文和内容区域高度立即更新，不使用过渡动画；标签栏的选中指示线保留移动效果。
+
+卡片样式的标签栏默认随标签内容调整宽度，空间不足时在栏内滚动。`size` 控制整个标签栏的尺寸，正文区域使用可用宽度。
+
 ## 基础用法
 
 <ComponentExample title="基础用法" preview={<TabsBasic />} fileName="basic.tsx">
@@ -17,8 +22,21 @@ import { TabsBasic } from '../../src/examples/tabs/basic';
 
 </ComponentExample>
 
+## 不同尺寸
+
+线形与卡片标签分别展示小、默认和大尺寸。
+
+<ComponentExample title="不同尺寸" preview={<TabsSizes />} fileName="sizes.tsx">
+
+```tsx lineNumbers file="../../src/examples/tabs/sizes.tsx"
+```
+
+</ComponentExample>
+
 ## 可关闭标签页
 
+点击加号新增标签页。全部关闭后组件隐藏，可使用示例中的新增按钮重新打开。
+
 <ComponentExample title="可关闭标签页" preview={<TabsClosable />} fileName="closable.tsx">
 
 ```tsx lineNumbers file="../../src/examples/tabs/closable.tsx"
@@ -48,13 +66,13 @@ import { TabsBasic } from '../../src/examples/tabs/basic';
 
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| `items` | `readonly `[`TabItem`](#tabitem)`[]` | 必填 | 必需。标签页列表 |
+| `items` | `readonly `[`TabItem`](#tabitem)`[]` | 必填 | 标签页列表；为空时不渲染组件 |
 | `activeKey` | `string` | 首个可用项 | 受控激活项 / 初始项 |
 | `defaultActiveKey` | `string` | 首个可用项 | 受控激活项 / 初始项 |
 | `onChange` | `(key: string) => void` | — | 激活项变化 |
 | `type` | `'line' \| 'card'` | `'line'` | 标签形态 |
 | `placement` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | 标签栏位置 |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 标签尺寸 |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 标签尺寸；卡片样式包含标签栏的内边距和边框 |
 | `activationMode` | `'automatic' \| 'manual'` | `'automatic'` | 方向键直接激活 / 回车或空格激活 |
 | `destroyInactive` | `boolean` | `false` | 切走时卸载内容 |
 | `extra` | `ReactNode` | — | 标签栏附加内容 |
diff --git a/apps/docs/docs/components/tag.mdx b/apps/docs/docs/components/tag.mdx
index 17d29c4..73c261e 100644
--- a/apps/docs/docs/components/tag.mdx
+++ b/apps/docs/docs/components/tag.mdx
@@ -1,4 +1,3 @@
-import { ExtensionDemo } from '../../src/examples/tag/extensions';
 import { ComponentExample } from '../../src/components/component-example';
 import { TagBasic } from '../../src/examples/tag/basic';
 
@@ -15,22 +14,13 @@ import { TagBasic } from '../../src/examples/tag/basic';
 
 </ComponentExample>
 
-## 扩展用法
-
-<ComponentExample title="扩展用法" preview={<ExtensionDemo />} fileName="extensions.tsx">
-
-```tsx lineNumbers file="../../src/examples/tag/extensions.tsx"
-```
-
-</ComponentExample>
-
 ## Tag API
 
 | 属性 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | `children` | `ReactNode` | — | 标签内容 |
 | `color` | `'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| string` | `'default'` | 语义颜色或自定义颜色 |
-| `variant` | `'soft' \| 'outline' \| 'solid'` | `'soft'` | 展示形态 |
+| `variant` | `'soft' \| 'solid'` | `'soft'` | 浅底或实色形态，均为无边框小圆角 |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 标签尺寸 |
 | `icon` | `ReactNode` | — | 前置图标 |
 | `closable` | `boolean` | `false` | 展示关闭按钮 |
@@ -41,18 +31,14 @@ import { TagBasic } from '../../src/examples/tag/basic';
 定义组件属性或组装列表时可导入相关类型。
 
 ```ts
-import type { TagProps } from '@ifhover/leaf-ui';
+import type { TagProps, CheckableTagProps, TagGroupProps, TagOption } from '@ifhover/leaf-ui';
 ```
 
 ## 使用说明
 
-调用 event.preventDefault() 可阻止默认移除。在动态列表中，也可以通过 onClose 更新应用状态并移除对应项。
-
-## 扩展类型
+标签使用无边框的小圆角，仅提供浅底与实色形态。圆角跟随区域主题，也可通过 `ConfigProvider` 的 `theme.components.Tag.borderRadius` 单独设置。
 
-```ts
-import type { CheckableTagProps, TagGroupProps, TagOption } from '@ifhover/leaf-ui';
-```
+调用 event.preventDefault() 可阻止默认移除。在动态列表中，也可以通过 onClose 更新应用状态并移除对应项。
 
 ## CheckableTagProps API
 
diff --git a/apps/docs/docs/components/textarea.mdx b/apps/docs/docs/components/textarea.mdx
index f59dc6b..c826860 100644
--- a/apps/docs/docs/components/textarea.mdx
+++ b/apps/docs/docs/components/textarea.mdx
@@ -8,7 +8,7 @@ import { TextareaBasic, TextareaControlled } from '../../src/components/form-exa
 
 ## 基础用法
 
-<ComponentExample title="基础用法" preview={<TextareaBasic />} fileName="basic.tsx">
+<ComponentExample title="基础用法" preview={<TextareaBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/textarea/basic.tsx"
 ```
@@ -19,7 +19,7 @@ import { TextareaBasic, TextareaControlled } from '../../src/components/form-exa
 
 使用 value / onChange 管理内容，结合 maxLength 限制长度。长度提示由业务决定，resize="none" 可以关闭手动缩放。
 
-<ComponentExample title="受控与长度提示" preview={<TextareaControlled />} fileName="controlled.tsx">
+<ComponentExample title="受控与长度提示" preview={<TextareaControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/textarea/controlled.tsx"
 ```
diff --git a/apps/docs/docs/components/time-picker.mdx b/apps/docs/docs/components/time-picker.mdx
index ee4a601..fc7b621 100644
--- a/apps/docs/docs/components/time-picker.mdx
+++ b/apps/docs/docs/components/time-picker.mdx
@@ -11,7 +11,7 @@ import { TimePickerTwelveHours } from '../../src/examples/time-picker/twelve-hou
 
 输入时间或在面板中选择小时、分钟和秒，点击确定后生效。关闭面板会放弃未确认的调整。
 
-<ComponentExample title="基础选择" preview={<TimePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="基础选择" preview={<TimePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/time-picker/basic.tsx"
 ```
@@ -22,7 +22,7 @@ import { TimePickerTwelveHours } from '../../src/examples/time-picker/twelve-hou
 
 通过 `value` / `onChange` 管理值，`minuteStep` 调整分钟选项的间隔。已有值的分钟不在间隔内时，仍会保留为可选项。
 
-<ComponentExample title="受控与分钟间隔" preview={<TimePickerControlled />} fileName="controlled.tsx">
+<ComponentExample title="受控与分钟间隔" preview={<TimePickerControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/time-picker/controlled.tsx"
 ```
@@ -33,7 +33,7 @@ import { TimePickerTwelveHours } from '../../src/examples/time-picker/twelve-hou
 
 设置 `use12Hours` 展示上午、下午选项；`showSeconds` 开启秒。12 小时制只改变显示，值仍使用 24 小时格式。
 
-<ComponentExample title="12 小时制与秒" preview={<TimePickerTwelveHours />} fileName="twelve-hours.tsx">
+<ComponentExample title="12 小时制与秒" preview={<TimePickerTwelveHours />} fileName="twelve-hours.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/time-picker/twelve-hours.tsx"
 ```
diff --git a/apps/docs/docs/components/time-range-picker.mdx b/apps/docs/docs/components/time-range-picker.mdx
index bac22f0..2a13511 100644
--- a/apps/docs/docs/components/time-range-picker.mdx
+++ b/apps/docs/docs/components/time-range-picker.mdx
@@ -9,7 +9,7 @@ import { TimeRangePickerOptions } from '../../src/examples/time-range-picker/adv
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<TimeRangePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<TimeRangePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/time-range-picker/basic.tsx"
 ```
@@ -18,7 +18,7 @@ import { TimeRangePickerOptions } from '../../src/examples/time-range-picker/adv
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<TimeRangePickerOptions />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<TimeRangePickerOptions />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/time-range-picker/advanced.tsx"
 ```
@@ -41,7 +41,7 @@ import type { TimeRangePickerProps, TimeRange, TimeParts } from '@ifhover/leaf-u
 
 ## 限制可选时间
 
-<ComponentExample title="限制可选时间" preview={<Capabilities />} fileName="capabilities.tsx">
+<ComponentExample title="限制可选时间" preview={<Capabilities />} fileName="capabilities.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/time-range-picker/capabilities.tsx"
 ```
diff --git a/apps/docs/docs/components/timeline.mdx b/apps/docs/docs/components/timeline.mdx
index 919f7d7..393bafc 100644
--- a/apps/docs/docs/components/timeline.mdx
+++ b/apps/docs/docs/components/timeline.mdx
@@ -8,7 +8,7 @@ import { TimelineAlternate } from '../../src/examples/timeline/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<TimelineBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<TimelineBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/timeline/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { TimelineAlternate } from '../../src/examples/timeline/advanced';
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<TimelineAlternate />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<TimelineAlternate />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/timeline/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/tour.mdx b/apps/docs/docs/components/tour.mdx
index e6db3dd..7027680 100644
--- a/apps/docs/docs/components/tour.mdx
+++ b/apps/docs/docs/components/tour.mdx
@@ -16,7 +16,7 @@ import { TourBasic, TourCentered } from '../../src/examples/tour/basic';
 
 ## 欢迎说明
 
-<ComponentExample title="欢迎说明" preview={<TourCentered />} fileName="basic.tsx">
+<ComponentExample title="欢迎说明" preview={<TourCentered />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../src/examples/tour/basic.tsx"
 ```
@@ -31,7 +31,7 @@ import { TourBasic, TourCentered } from '../../src/examples/tour/basic';
 | `title` | `ReactNode` | — | 必需。标题内容。 |
 | `description` | `ReactNode` | — | 补充说明。 |
 | `target` | `string \| (() => HTMLElement \| null)` | — | 目标的选择器或返回元素的函数；省略时居中。 |
-| `placement` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['popupPlacement']` | — | 布局或展示位置。 |
+| `placement` | [`PopupOptions`](../api/popup-options#popupoptions)`['popupPlacement']` | — | 布局或展示位置。 |
 
 ## Tour API
 
@@ -47,7 +47,7 @@ import { TourBasic, TourCentered } from '../../src/examples/tour/basic';
 | `missingTarget` | `'center' \| 'skip' \| 'close'` | `'center'` | 目标缺失时居中、跳过或关闭。 |
 | `mask` | `boolean` | `true` | 展示引导遮罩。 |
 | `padding` | `number` | `8` | 内容或高亮目标的内边距。 |
-| `getPopupContainer` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['getPopupContainer']` | — | 返回浮层的挂载容器，也可返回 ShadowRoot。 |
+| `getPopupContainer` | [`PopupOptions`](../api/popup-options#popupoptions)`['getPopupContainer']` | — | 返回浮层的挂载容器，也可返回 ShadowRoot。 |
 
 ## 类型与交互
 
diff --git a/apps/docs/docs/components/transfer.mdx b/apps/docs/docs/components/transfer.mdx
index eeb8ab0..d429c8b 100644
--- a/apps/docs/docs/components/transfer.mdx
+++ b/apps/docs/docs/components/transfer.mdx
@@ -8,7 +8,7 @@ import { TransferVirtual } from '../../src/examples/transfer/advanced';
 
 ## 基本用法
 
-<ComponentExample title="基本用法" preview={<TransferBasic />} fileName="basic.tsx">
+<ComponentExample title="基本用法" preview={<TransferBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/transfer/basic.tsx"
 ```
@@ -17,7 +17,7 @@ import { TransferVirtual } from '../../src/examples/transfer/advanced';
 
 ## 更多用法
 
-<ComponentExample title="更多用法" preview={<TransferVirtual />} fileName="advanced.tsx">
+<ComponentExample title="更多用法" preview={<TransferVirtual />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../src/examples/transfer/advanced.tsx"
 ```
diff --git a/apps/docs/docs/components/tree-select.mdx b/apps/docs/docs/components/tree-select.mdx
index 9e8aeaf..33826fc 100644
--- a/apps/docs/docs/components/tree-select.mdx
+++ b/apps/docs/docs/components/tree-select.mdx
@@ -1,3 +1,4 @@
+import { SingleLine } from '../../src/examples/tree-select/single-line';
 import { Capabilities } from '../../src/examples/tree-select/capabilities';
 import { ExtensionDemo } from '../../src/examples/tree-select/extensions';
 import { ComponentExample } from '../../src/components/component-example';
@@ -11,7 +12,7 @@ import { TreeSelectStates } from '../../src/examples/tree-select/states';
 
 ## 选择与搜索
 
-<ComponentExample title="选择与搜索" preview={<TreeSelectBasic />} fileName="basic.tsx">
+<ComponentExample title="选择与搜索" preview={<TreeSelectBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/tree-select/basic.tsx"
 ```
@@ -20,7 +21,7 @@ import { TreeSelectStates } from '../../src/examples/tree-select/states';
 
 ## 多选与勾选
 
-<ComponentExample title="多选与勾选" preview={<TreeSelectMultiple />} fileName="multiple.tsx">
+<ComponentExample title="多选与勾选" preview={<TreeSelectMultiple />} fileName="multiple.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/tree-select/multiple.tsx"
 ```
@@ -29,7 +30,7 @@ import { TreeSelectStates } from '../../src/examples/tree-select/states';
 
 ## 状态与浮层
 
-<ComponentExample title="状态与浮层" preview={<TreeSelectStates />} fileName="states.tsx">
+<ComponentExample title="状态与浮层" preview={<TreeSelectStates />} fileName="states.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/tree-select/states.tsx"
 ```
@@ -54,6 +55,19 @@ import { TreeSelectStates } from '../../src/examples/tree-select/states';
 
 </ComponentExample>
 
+## 单行多选
+
+设置 `tagWrap={false}` 后，已选项始终展示在一行内。长文字自动省略，放不下的选项合并为 `+N`；空间很窄时只显示数量，打开浮层可查看和修改选择。`maxTagCount` 可进一步限制标签数量，`maxTagCount="responsive"` 也会启用单行自动折叠。
+
+再次打开会保留上次展开的分支。不可选分类可点击整行展开；勾选模式可点击整行或按 Enter / 空格勾选，箭头只负责展开或收起。搜索临时展开匹配分支，不改变原有展开状态。
+
+<ComponentExample title="单行多选" preview={<SingleLine />} fileName="single-line.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/tree-select/single-line.tsx"
+```
+
+</ComponentExample>
+
 ## TreeSelect API
 
 | 属性 | 类型 | 默认值 | 说明 |
@@ -81,11 +95,12 @@ import { TreeSelectStates } from '../../src/examples/tree-select/states';
 | `onLoadError` | `(error: unknown, option: `[`TreeSelectOption`](#treeselectoption)`) => void` | — | 加载失败，再次展开可重试 |
 | `virtual` | `boolean` | `false` | 仅渲染可见项目 |
 | `listHeight` | `number` | `256` | 列表高度 |
-| `itemHeight` | `number` | `34` | 虚拟列表预估行高 |
+| `itemHeight` | `number` | `38` | 跟随区域控件高度和密度的预估行高，包含行间距；实际行会被测量。 |
 | `inputReadOnly` | `boolean` | — | 只禁止手动输入，仍可在面板中选择。 |
 | `open` | `boolean` | — | 控制面板是否展开。 |
 | `defaultOpen` | `boolean` | — | 面板初始展开状态。 |
-| `maxTagCount` | `number` | — | 最多展示的标签数；responsive 根据可用宽度折叠。 |
+| `maxTagCount` | `number \| 'responsive'` | — | 最多展示的标签数；responsive 根据可用宽度自动折叠。 |
+| `tagWrap` | `boolean` | `true` | 允许多选标签换行；false 单行显示并自动折叠溢出项。 |
 | `maxCount` | `number` | — | 最多可选的数量。 |
 | `treeExpandedKeys` | `readonly string[]` | — | 受控的展开节点。 |
 | `onExpand` | `(keys: string[]) => void` | — | 展开节点发生变化时调用。 |
diff --git a/apps/docs/docs/components/tree.mdx b/apps/docs/docs/components/tree.mdx
index e16e4ab..0e2867e 100644
--- a/apps/docs/docs/components/tree.mdx
+++ b/apps/docs/docs/components/tree.mdx
@@ -12,7 +12,7 @@ import { TreeSearch } from '../../src/examples/tree/search';
 
 ## 浏览与选择
 
-<ComponentExample title="浏览与选择" preview={<TreeBasic />} fileName="basic.tsx">
+<ComponentExample title="浏览与选择" preview={<TreeBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/tree/basic.tsx"
 ```
@@ -21,7 +21,7 @@ import { TreeSearch } from '../../src/examples/tree/search';
 
 ## 父子勾选联动
 
-<ComponentExample title="父子勾选联动" preview={<TreeCheckable />} fileName="checkable.tsx">
+<ComponentExample title="父子勾选联动" preview={<TreeCheckable />} fileName="checkable.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/tree/checkable.tsx"
 ```
@@ -41,7 +41,7 @@ import { TreeSearch } from '../../src/examples/tree/search';
 
 ## 搜索节点
 
-<ComponentExample title="搜索节点" preview={<TreeSearch />} fileName="search.tsx">
+<ComponentExample title="搜索节点" preview={<TreeSearch />} fileName="search.tsx" width={360}>
 
 ```tsx lineNumbers file="../../src/examples/tree/search.tsx"
 ```
@@ -102,7 +102,7 @@ import { TreeSearch } from '../../src/examples/tree/search';
 | `onLoadError` | `(error: unknown, node: `[`TreeNode`](#treenode)`) => void` | — | 加载失败，再次展开可重试 |
 | `virtual` | `boolean` | `false` | 仅渲染可视节点；大量节点时建议启用。 |
 | `height` | `number` | `320` | 高度，数字按像素计算 |
-| `itemHeight` | `number` | `34` | 虚拟列表预估行高 |
+| `itemHeight` | `number` | `42` | 跟随区域控件高度和密度的预估行高，包含行间距；实际行会被测量。 |
 | `draggable` | `boolean \| ((node: `[`TreeNode`](#treenode)`) => boolean)` | `false` | 允许通过手柄移动节点 |
 | `allowDrop` | `(info: Omit<`[`TreeDropInfo`](#treedropinfo-api)`, 'data'>) => boolean` | — | 限制放置位置 |
 | `onDrop` | `(info: `[`TreeDropInfo`](#treedropinfo-api)`) => void` | — | 移动结果，调用方更新 data |
diff --git a/apps/docs/docs/en/api/component-defaults.mdx b/apps/docs/docs/en/api/component-defaults.mdx
new file mode 100644
index 0000000..4885ffe
--- /dev/null
+++ b/apps/docs/docs/en/api/component-defaults.mdx
@@ -0,0 +1,151 @@
+# Component defaults
+
+Use `components` on ConfigProvider to set shared default props. See [component defaults](/en/components/config-provider#component-defaults) for examples, naming rules and inheritance.
+
+## LeafComponentDefaults
+
+All entries are optional. Each entry accepts the props listed below or `null` to clear inherited defaults. Follow a linked props type for the meaning and built-in default of each prop. Required props, mode-dependent values, generic data and imperative refs remain on instances.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `Affix` | `Partial<Omit<`[`AffixProps`](../components/anchor#affix-api)`, 'key' \| 'ref'>> \| null` | Configure affix. |
+| `Alert` | `Partial<Omit<`[`AlertProps`](../components/alert#alert-api)`, 'key' \| 'ref' \| 'title'>> \| null` | Configure alert. |
+| `Anchor` | `Partial<Omit<`[`AnchorProps`](../components/anchor#anchor-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure anchor. |
+| `AppBar` | `Partial<Omit<`[`AppBarProps`](../components/app-bar#appbar-api)`, 'key' \| 'ref'>> \| null` | Configure app bar. |
+| `AutoComplete` | `Partial<Omit<`[`AutoCompleteProps`](../components/auto-complete#autocomplete-api)`, 'key' \| 'ref' \| 'options'>> \| null` | Configure auto complete. |
+| `Avatar` | `Partial<Omit<`[`AvatarProps`](../components/avatar#avatar-api)`, 'key' \| 'ref'>> \| null` | Configure avatar. |
+| `AvatarGroup` | `Partial<Omit<`[`AvatarGroupProps`](../components/avatar#avatargroupprops-api)`, 'key' \| 'ref'>> \| null` | Configure avatar group. |
+| `BackTop` | `Partial<Omit<`[`BackTopProps`](../components/back-top#backtopprops-api)`, 'key' \| 'ref'>> \| null` | Configure back top. |
+| `Badge` | `Partial<Omit<`[`BadgeProps`](../components/badge#badge-api)`, 'key' \| 'ref'>> \| null` | Configure badge. |
+| `BottomNavigation` | `Partial<Omit<`[`BottomNavigationProps`](../components/app-bar#bottomnavigation-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure bottom navigation. |
+| `Breadcrumb` | `Partial<Omit<`[`BreadcrumbProps`](../components/breadcrumb#breadcrumb-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure breadcrumb. |
+| `Button` | `Partial<Omit<`[`ButtonProps`](../components/button#button-api)`, 'key' \| 'ref'>> \| null` | Default button props. |
+| `ButtonGroup` | `Partial<Omit<`[`ButtonGroupProps`](../components/button#buttongroupprops-api)`, 'key' \| 'ref'>> \| null` | Configure button group. |
+| `Calendar` | `Partial<Omit<`[`CalendarProps`](../components/calendar#calendar-api)`, 'key' \| 'ref'>> \| null` | Configure calendar. |
+| `Card` | `Partial<Omit<`[`CardProps`](../components/card#card-api)`, 'key' \| 'ref'>> \| null` | Configure card. |
+| `Carousel` | `Partial<Omit<`[`CarouselProps`](../components/carousel#carousel-api)`, 'key' \| 'ref'>> \| null` | Configure carousel. |
+| `Cascader` | `Partial< Omit< `[`CascaderProps`](../components/cascader#cascader-api)`, 'key' \| 'ref' \| 'options' \| 'multiple' \| 'value' \| 'defaultValue' \| 'onChange' > > \| null` | Configure cascader. |
+| `CheckableTag` | `Partial<Omit<`[`CheckableTagProps`](../components/tag#checkabletagprops-api)`, 'key' \| 'ref'>> \| null` | Configure checkable tag. |
+| `Checkbox` | `Partial<Omit<`[`CheckboxProps`](../components/checkbox#checkbox-api)`, 'key' \| 'ref'>> \| null` | Configure checkbox. |
+| `CheckboxGroup` | `Partial<Omit<`[`CheckboxGroupProps`](../components/checkbox#checkboxgroupprops-api)`, 'key' \| 'ref' \| 'options'>> \| null` | Configure checkbox group. |
+| `Col` | `Partial<Omit<`[`ColProps`](../components/grid#colprops-api)`, 'key' \| 'ref'>> \| null` | Configure col. |
+| `Collapse` | `Partial<Omit<`[`CollapseProps`](../components/collapse#collapse-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure collapse. |
+| `ColorPicker` | `Partial<Omit<`[`ColorPickerProps`](../components/color-picker#colorpicker-api)`, 'key' \| 'ref'>> \| null` | Configure color picker. |
+| `CommandPalette` | `Partial<Omit<`[`CommandPaletteProps`](../components/command-palette#commandpalette-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure command palette. |
+| `Confirm` | `Partial<Omit<`[`ConfirmOptions`](../components/confirm#confirmoptions)`, 'key' \| 'ref'>> \| null` | Configure confirm. |
+| `Countdown` | `Partial<Omit<`[`CountdownProps`](../components/statistic#countdown-api)`, 'key' \| 'ref' \| 'value'>> \| null` | Configure countdown. |
+| `DataTable` | `Partial<Omit<`[`DataTablePresentationProps`](../components/table#datatablepresentation-api)`, 'tableRef'>> \| null` | Configure data table. |
+| `DataTableColumnVisibility` | `Partial<Omit<`[`DataTableColumnVisibilityProps`](../components/table#datatablecolumnvisibility-api)`, 'key' \| 'ref'>> \| null` | Configure data table column visibility. |
+| `DataTableContent` | `Partial<Omit<`[`DataTableContentProps`](../components/table#datatablecontent-api)`, 'key' \| 'ref'>> \| null` | Configure data table content. |
+| `DataTableFooter` | `Partial<Omit<HTMLAttributes<HTMLDivElement>, 'key' \| 'ref'>> \| null` | Configure data table footer. |
+| `DataTablePagination` | `Partial<Omit<`[`DataTablePaginationProps`](../components/table#datatablepagination-api)`, 'key' \| 'ref'>> \| null` | Configure data table pagination. |
+| `DataTableSearch` | `Partial<Omit<`[`DataTableSearchProps`](../components/table#datatablesearch-api)`, 'key' \| 'ref'>> \| null` | Configure data table search. |
+| `DataTableToolbar` | `Partial<Omit<HTMLAttributes<HTMLDivElement>, 'key' \| 'ref'>> \| null` | Configure data table toolbar. |
+| `DatePicker` | `Partial< Omit<`[`DatePickerProps`](../components/date-picker#datepicker-api)`, 'key' \| 'ref' \| 'multiple' \| 'value' \| 'defaultValue' \| 'onChange'> > \| null` | Configure date picker. |
+| `DateRangePicker` | `Partial<Omit<`[`DateRangePickerProps`](../components/date-range-picker#daterangepicker-api)`, 'key' \| 'ref'>> \| null` | Configure date range picker. |
+| `DateTimePicker` | `Partial<Omit<`[`DateTimePickerProps`](../components/date-time-picker#datetimepicker-api)`, 'key' \| 'ref'>> \| null` | Configure date time picker. |
+| `Descriptions` | `Partial<Omit<`[`DescriptionsProps`](../components/descriptions#descriptionsprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure descriptions. |
+| `Divider` | `Partial<Omit<`[`DividerProps`](../components/divider#divider-api)`, 'key' \| 'ref'>> \| null` | Configure divider. |
+| `Drawer` | `Partial<Omit<`[`DrawerProps`](../components/drawer#drawer-api)`, 'key' \| 'ref' \| 'open'>> \| null` | Configure drawer. |
+| `Dropdown` | `Partial<Omit<`[`DropdownProps`](../components/dropdown#dropdown-api)`, 'key' \| 'ref' \| 'items' \| 'children'>> \| null` | Configure dropdown. |
+| `Empty` | `Partial<Omit<`[`EmptyProps`](../components/result#empty-api)`, 'key' \| 'ref'>> \| null` | Configure empty. |
+| `ErrorBoundary` | `Partial<Omit<`[`ErrorBoundaryProps`](../components/error-boundary#errorboundaryprops-api)`, 'key' \| 'ref'>> \| null` | Configure error boundary. |
+| `FileList` | `Partial<Omit<`[`FileListProps`](../components/file-list#filelistprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure file list. |
+| `Flex` | `Partial<Omit<`[`FlexProps`](../components/flex#flex-api)`, 'key' \| 'ref'>> \| null` | Configure flex. |
+| `FloatButton` | `Partial<Omit<`[`FloatButtonProps`](../components/float-button#floatbutton-api)`, 'key' \| 'ref'>> \| null` | Configure float button. |
+| `FloatButtonGroup` | `Partial<Omit<`[`FloatButtonGroupProps`](../components/float-button#floatbuttongroup-api)`, 'key' \| 'ref' \| 'actions'>> \| null` | Configure float button group. |
+| `Form` | `Partial<Omit<`[`FormProps`](../components/form#form-api)`, 'key' \| 'ref'>> \| null` | Configure form. |
+| `FormErrorSummary` | `Partial<Omit<`[`FormErrorSummaryProps`](../components/form#formerrorsummaryprops-api)`, 'key' \| 'ref'>> \| null` | Configure form error summary. |
+| `FormField` | `Partial<Omit<`[`FormFieldProps`](../components/form#formfield-api)`, 'key' \| 'ref'>> \| null` | Configure form field. |
+| `FormGroup` | `Partial<Omit<`[`FormGroupProps`](../components/form#formgroupprops-api)`, 'key' \| 'ref'>> \| null` | Configure form group. |
+| `FormList` | `Partial< Omit< `[`FormListProps`](../components/form#formlistprops-api)`<unknown>, 'name' \| 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'itemKey' > > \| null` | Configure form list. |
+| `Grid` | `Partial<Omit<`[`GridProps`](../components/grid#gridprops-api)`, 'key' \| 'ref'>> \| null` | Configure grid. |
+| `Image` | `Partial<Omit<`[`ImageProps`](../components/image#imageprops-api)`, 'key' \| 'ref'>> \| null` | Configure image. |
+| `ImagePreview` | `Partial< Omit<`[`ImagePreviewProps`](../components/image#imagepreviewprops-api)`, 'key' \| 'ref' \| 'items' \| 'open' \| 'onClose'> > \| null` | Configure image preview. |
+| `ImagePreviewGroup` | `Partial<Omit<`[`ImagePreviewGroupProps`](../components/image#imagepreviewgroupprops-api)`, 'key' \| 'ref'>> \| null` | Configure image preview group. |
+| `InfiniteScroll` | `Partial< Omit<`[`InfiniteScrollProps`](../components/infinite-scroll#infinitescrollprops-api)`, 'key' \| 'ref' \| 'dataLength' \| 'hasMore' \| 'onLoadMore'> > \| null` | Configure infinite scroll. |
+| `Input` | `Partial<Omit<`[`InputProps`](../components/input#input-api)`, 'key' \| 'ref'>> \| null` | Default input props, also inherited by InputSearch. |
+| `InputGroup` | `Partial<Omit<`[`InputGroupProps`](../components/input#inputgroupprops-api)`, 'key' \| 'ref'>> \| null` | Configure input group. |
+| `InputMask` | `Partial<Omit<`[`InputMaskProps`](../components/input-mask#inputmaskprops-api)`, 'key' \| 'ref' \| 'mask'>> \| null` | Configure input mask. |
+| `InputNumber` | `Partial< Omit< `[`InputNumberProps`](../components/input-number#inputnumber-api)`, 'key' \| 'ref' \| 'stringMode' \| 'value' \| 'defaultValue' \| 'onChange' \| 'min' \| 'max' \| 'step' > > \| null` | Configure input number. |
+| `InputOTP` | `Partial<Omit<`[`InputOTPProps`](../components/input-otp#inputotpprops-api)`, 'key' \| 'ref'>> \| null` | Configure input otp. |
+| `InputSearch` | `Partial<Omit<`[`InputSearchProps`](../components/input#inputsearchprops-api)`, 'key' \| 'ref'>> \| null` | Search input defaults, overriding Input defaults. |
+| `Layout` | `Partial<Omit<`[`LayoutProps`](../components/layout#layoutprops-api)`, 'key' \| 'ref'>> \| null` | Configure layout. |
+| `LayoutContent` | `Partial<Omit<HTMLAttributes<HTMLElement>, 'key' \| 'ref'>> \| null` | Configure layout content. |
+| `LayoutFooter` | `Partial<Omit<HTMLAttributes<HTMLElement>, 'key' \| 'ref'>> \| null` | Configure layout footer. |
+| `LayoutHeader` | `Partial<Omit<HTMLAttributes<HTMLElement>, 'key' \| 'ref'>> \| null` | Configure layout header. |
+| `LayoutSider` | `Partial<Omit<`[`LayoutSiderProps`](../components/layout#layoutsiderprops-api)`, 'key' \| 'ref'>> \| null` | Configure layout sider. |
+| `Link` | `Partial<Omit<`[`LinkProps`](../components/typography#link-api)`, 'key' \| 'ref'>> \| null` | Configure link. |
+| `Loading` | `Partial<Omit<`[`LoadingProps`](../components/loading#loading-api)`, 'key' \| 'ref'>> \| null` | Configure loading. |
+| `LoadingBar` | `Partial<Omit<`[`LoadingBarProps`](../components/loading-bar#loadingbarprops-api)`, 'key' \| 'ref' \| 'active' \| 'progress'>> \| null` | Configure loading bar. |
+| `Masonry` | `Partial<Omit<`[`MasonryProps`](../components/masonry#masonryprops-api)`, 'key' \| 'ref'>> \| null` | Configure masonry. |
+| `Mentions` | `Partial<Omit<`[`MentionsProps`](../components/mentions#mentions-api)`, 'key' \| 'ref' \| 'options'>> \| null` | Configure mentions. |
+| `Menu` | `Partial<Omit<`[`MenuProps`](../components/menu#menuprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure menu. |
+| `Message` | `Partial<Omit<`[`MessageOptions`](../components/message#messageoptions)`, 'key' \| 'content'>> \| null` | Configure message. |
+| `Modal` | `Partial<Omit<`[`ModalProps`](../components/modal#modal-api)`, 'key' \| 'ref' \| 'open'>> \| null` | Default modal props. |
+| `Notification` | `Partial<Omit<`[`NotificationOptions`](../components/notification#notificationoptions-api)`, 'key' \| 'title'>> \| null` | Configure notification. |
+| `Pagination` | `Partial<Omit<`[`PaginationProps`](../components/pagination#pagination-api)`, 'key' \| 'ref' \| 'total'>> \| null` | Configure pagination. |
+| `Paragraph` | `Partial<Omit<`[`ParagraphProps`](../components/typography#paragraph-api)`, 'key' \| 'ref'>> \| null` | Configure paragraph. |
+| `Popconfirm` | `Partial<Omit<`[`PopconfirmProps`](../components/popconfirm#popconfirmprops-api)`, 'key' \| 'ref' \| 'children' \| 'title'>> \| null` | Configure popconfirm. |
+| `Popover` | `Partial<Omit<`[`PopoverProps`](../components/popover#popover-api)`, 'key' \| 'ref' \| 'children' \| 'content'>> \| null` | Configure popover. |
+| `Progress` | `Partial<Omit<`[`ProgressProps`](../components/progress#progress-api)`, 'key' \| 'ref'>> \| null` | Configure progress. |
+| `QRCode` | `Partial<Omit<`[`QRCodeProps`](../components/qr-code#qrcodeprops-api)`, 'key' \| 'ref' \| 'value'>> \| null` | Configure qrcode. |
+| `Radio` | `Partial<Omit<`[`RadioProps`](../components/radio#radio-api)`, 'key' \| 'ref'>> \| null` | Configure radio. |
+| `RadioGroup` | `Partial<Omit<`[`RadioGroupProps`](../components/radio#radiogroup-api)`, 'key' \| 'ref' \| 'options'>> \| null` | Configure radio group. |
+| `Rate` | `Partial<Omit<`[`RateProps`](../components/rate#rate-api)`, 'key' \| 'ref'>> \| null` | Configure rate. |
+| `Result` | `Partial<Omit<`[`ResultProps`](../components/result#result-api)`, 'key' \| 'ref'>> \| null` | Configure result. |
+| `Row` | `Partial<Omit<`[`RowProps`](../components/grid#rowprops-api)`, 'key' \| 'ref'>> \| null` | Configure row. |
+| `ScrollArea` | `Partial<Omit<`[`ScrollAreaProps`](../components/scroll-area#scrollareaprops-api)`, 'key' \| 'ref'>> \| null` | Configure scroll area. |
+| `Scrollbar` | `Partial<Omit<`[`ScrollbarProps`](../components/scrollbar#scrollbar-api)`, 'key' \| 'ref'>> \| null` | Configure scrollbar. |
+| `Segmented` | `Partial<Omit<`[`SegmentedProps`](../components/segmented#segmentedprops-api)`, 'key' \| 'ref' \| 'options'>> \| null` | Configure segmented. |
+| `Select` | `Partial< Omit< `[`SelectProps`](../components/select#select-api)`, 'key' \| 'ref' \| 'options' \| 'multiple' \| 'value' \| 'defaultValue' \| 'onChange' > > \| null` | Select defaults; mode, values and change callbacks stay on the instance. |
+| `Skeleton` | `Partial<Omit<`[`SkeletonProps`](../components/skeleton#skeleton-api)`, 'key' \| 'ref'>> \| null` | Configure skeleton. |
+| `Slider` | `Partial< Omit<`[`SliderProps`](../components/slider#slider-api)`, 'key' \| 'ref' \| 'range' \| 'value' \| 'defaultValue' \| 'onChange'> > \| null` | Configure slider. |
+| `Space` | `Partial<Omit<`[`SpaceProps`](../components/space#spaceprops-api)`, 'key' \| 'ref'>> \| null` | Configure space. |
+| `SplitButton` | `Partial<Omit<`[`SplitButtonProps`](../components/button#splitbuttonprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure split button. |
+| `Splitter` | `Partial<Omit<`[`SplitterProps`](../components/splitter#splitter-api)`, 'key' \| 'ref' \| 'panels'>> \| null` | Configure splitter. |
+| `Statistic` | `Partial<Omit<`[`StatisticProps`](../components/statistic#statistic-api)`, 'key' \| 'ref' \| 'value'>> \| null` | Configure statistic. |
+| `Steps` | `Partial<Omit<`[`StepsProps`](../components/steps#steps-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure steps. |
+| `Switch` | `Partial<Omit<`[`SwitchProps`](../components/switch#switch-api)`, 'key' \| 'ref'>> \| null` | Configure switch. |
+| `Table` | `Partial<Omit<`[`TableProps`](../components/table#table-api)`, 'key' \| 'ref' \| 'scrollRef'>> \| null` | Configure table. |
+| `TableBody` | `Partial<Omit<HTMLAttributes<HTMLTableSectionElement>, 'key' \| 'ref'>> \| null` | Configure table body. |
+| `TableCaption` | `Partial<Omit<HTMLAttributes<HTMLTableCaptionElement>, 'key' \| 'ref'>> \| null` | Configure table caption. |
+| `TableCell` | `Partial<Omit<`[`TableCellProps`](../components/table#tablecell-api)`, 'key' \| 'ref'>> \| null` | Configure table cell. |
+| `TableColumnHeader` | `Partial<Omit<`[`TableColumnHeaderProps`](../components/table#tablecolumnheader-api)`, 'key' \| 'ref'>> \| null` | Configure table column header. |
+| `TableEmpty` | `Partial<Omit<`[`TableStateProps`](../components/table#tablestate-api)`, 'key' \| 'ref'>> \| null` | Configure table empty. |
+| `TableError` | `Partial<Omit<`[`TableErrorProps`](../components/table#tableerror-api)`, 'key' \| 'ref'>> \| null` | Configure table error. |
+| `TableFooter` | `Partial<Omit<HTMLAttributes<HTMLTableSectionElement>, 'key' \| 'ref'>> \| null` | Configure table footer. |
+| `TableHeader` | `Partial<Omit<HTMLAttributes<HTMLTableSectionElement>, 'key' \| 'ref'>> \| null` | Configure table header. |
+| `TableLoading` | `Partial<Omit<`[`TableStateProps`](../components/table#tablestate-api)`, 'key' \| 'ref'>> \| null` | Configure table loading. |
+| `TableRow` | `Partial<Omit<`[`TableRowProps`](../components/table#tablerow-api)`, 'key' \| 'ref'>> \| null` | Configure table row. |
+| `Tabs` | `Partial<Omit<`[`TabsProps`](../components/tabs#tabs-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure tabs. |
+| `Tag` | `Partial<Omit<`[`TagProps`](../components/tag#tag-api)`, 'key' \| 'ref'>> \| null` | Configure tag. |
+| `TagGroup` | `Partial<Omit<`[`TagGroupProps`](../components/tag#taggroupprops-api)`, 'key' \| 'ref' \| 'options'>> \| null` | Configure tag group. |
+| `Text` | `Partial<Omit<`[`TextProps`](../components/typography#text-api)`, 'key' \| 'ref'>> \| null` | Configure text. |
+| `Textarea` | `Partial<Omit<`[`TextareaProps`](../components/textarea#textarea-api)`, 'key' \| 'ref'>> \| null` | Configure textarea. |
+| `Timeline` | `Partial<Omit<`[`TimelineProps`](../components/timeline#timelineprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure timeline. |
+| `TimePicker` | `Partial<Omit<`[`TimePickerProps`](../components/time-picker#timepicker-api)`, 'key' \| 'ref'>> \| null` | Configure time picker. |
+| `TimeRangePicker` | `Partial<Omit<`[`TimeRangePickerProps`](../components/time-range-picker#timerangepickerprops-api)`, 'key' \| 'ref'>> \| null` | Configure time range picker. |
+| `Title` | `Partial<Omit<`[`TitleProps`](../components/typography#title-api)`, 'key' \| 'ref'>> \| null` | Configure title. |
+| `Toolbar` | `Partial<Omit<`[`ToolbarProps`](../components/app-bar#toolbar-api)`, 'key' \| 'ref'>> \| null` | Configure toolbar. |
+| `Tooltip` | `Partial<Omit<`[`TooltipProps`](../components/tooltip#tooltip-api)`, 'key' \| 'ref' \| 'content' \| 'children'>> \| null` | Configure tooltip. |
+| `Tour` | `Partial<Omit<`[`TourProps`](../components/tour#tour-api)`, 'key' \| 'ref' \| 'open' \| 'steps'>> \| null` | Configure tour. |
+| `Transfer` | `Partial<Omit<`[`TransferProps`](../components/transfer#transferprops-api)`, 'key' \| 'ref' \| 'items'>> \| null` | Configure transfer. |
+| `Tree` | `Partial<Omit<`[`TreeProps`](../components/tree#tree-api)`, 'key' \| 'ref' \| 'data'>> \| null` | Configure tree. |
+| `TreeSelect` | `Partial< Omit< `[`TreeSelectProps`](../components/tree-select#treeselect-api)`, \| 'key' \| 'ref' \| 'options' \| 'multiple' \| 'treeCheckable' \| 'value' \| 'defaultValue' \| 'onChange' > > \| null` | Configure tree select. |
+| `Typography` | `Partial<Omit<`[`TypographyProps`](../components/typography#typography-api)`, 'key' \| 'ref'>> \| null` | Configure typography. |
+| `Upload` | `Partial<Omit<`[`UploadProps`](../components/upload#uploadprops-api)`, 'key' \| 'ref'>> \| null` | Configure upload. |
+| `VirtualList` | `(Partial< Omit<`[`VirtualListProps`](../components/virtual-list#virtuallistprops-api)`<unknown>, 'items' \| 'itemKey' \| 'renderItem' \| 'estimateSize'> > & { estimateSize?: number }) \| null` | Configure virtual list. |
+
+## Type import
+
+```tsx
+import type { LeafComponentDefaults } from '@ifhover/leaf-ui';
+
+const components = {
+  Button: { variant: 'outline' },
+  Confirm: { confirmText: 'Continue', cancelText: 'Back' },
+} satisfies LeafComponentDefaults;
+```
+
+Pass this object to `<ConfigProvider components={components}>`. Instance props and individual service calls still take precedence.
diff --git a/apps/docs/docs/en/api/index.mdx b/apps/docs/docs/en/api/index.mdx
new file mode 100644
index 0000000..356d373
--- /dev/null
+++ b/apps/docs/docs/en/api/index.mdx
@@ -0,0 +1,14 @@
+# API reference
+
+Complete configuration fields for applications that need more control. For everyday setup and runnable examples, start with [ConfigProvider](/en/components/config-provider).
+
+## Configuration
+
+| Reference | Purpose |
+| --- | --- |
+| [LeafComponentDefaults](./component-defaults#leafcomponentdefaults) | Supported component names and default props. |
+| [LeafThemeTokens](./theme-tokens#leafthemetokens) | Advanced overrides for derived theme styles. |
+| [PopupOptions](./popup-options#popupoptions) | Shared popup containers, placement and content customization. |
+| [Translation resources](./translations) | Add languages, choose fallbacks and validate JSON. |
+
+Each component page documents its own props, defaults and examples. The references here describe shared configuration.
diff --git a/apps/docs/docs/en/api/popup-options.mdx b/apps/docs/docs/en/api/popup-options.mdx
new file mode 100644
index 0000000..5f4a2c4
--- /dev/null
+++ b/apps/docs/docs/en/api/popup-options.mdx
@@ -0,0 +1,15 @@
+# PopupOptions
+
+Shared popup settings for Select, date and time pickers, and related components. Component settings override ConfigProvider's `getPopupContainer`. Modal and Drawer call their mounting-container prop `container`.
+
+## PopupOptions
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `popupPlacement` | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | Placement relative to the trigger. |
+| `popupClassName` | `string` | Custom popup class. |
+| `popupStyle` | `CSSProperties` | Custom popup styles. |
+| `popupRender` | `(content: React.ReactNode) => React.ReactNode` | Wrap or extend popup content; retain the supplied content to preserve interaction. |
+| `getPopupContainer` | `() => Element \| DocumentFragment` | Return the popup container, including a ShadowRoot. |
+
+Mount the container before interaction and avoid clipping the popup. Access the DOM inside the callback. For a ShadowRoot, load component styles inside that root too. Each component documents its default placement and additional options.
diff --git a/apps/docs/docs/en/api/theme-tokens.mdx b/apps/docs/docs/en/api/theme-tokens.mdx
new file mode 100644
index 0000000..b194eeb
--- /dev/null
+++ b/apps/docs/docs/en/api/theme-tokens.mdx
@@ -0,0 +1,97 @@
+# Theme tokens
+
+Prefer ConfigProvider's `theme.primaryColor`, `theme.borderRadius` and `theme.controlHeight` for everyday customization. Related styles derive automatically; see [theming](/en/guide/theming).
+
+## LeafThemeTokens
+
+Pass advanced overrides through `theme.tokens` only when a derived value needs to change independently. Every field is optional, and nested providers inherit unspecified fields. Numeric lengths use pixels; numeric durations use milliseconds.
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `onPrimaryColor` | `string` | Theme | Text on primary backgrounds |
+| `dangerColor` | `string` | Appearance | Danger background / foreground |
+| `onDangerColor` | `string` | Appearance | Danger background / foreground |
+| `successColor` | `string` | Appearance | Success / warning / information |
+| `warningColor` | `string` | Appearance | Success / warning / information |
+| `infoColor` | `string` | Appearance | Success / warning / information |
+| `textColor` | `string` | Appearance | Main / secondary text |
+| `mutedTextColor` | `string` | Appearance | Main / secondary text |
+| `subtleTextColor` | `string` | — | Subtle supporting text color. |
+| `surfaceColor` | `string` | Appearance | Main / subtle surfaces |
+| `mutedSurfaceColor` | `string` | Appearance | Main / subtle surfaces |
+| `raisedSurfaceColor` | `string` | — | Raised and floating surface color. |
+| `borderColor` | `string` | Appearance | Neutral borders |
+| `borderHoverColor` | `string` | — | Neutral border color on hover. |
+| `dividerColor` | `string` | — | Section divider color, derived from border and surface colors by default. |
+| `borderRadiusSm` | `number \| string` | `Base × 0.6` | Small / large radius override |
+| `borderRadiusMd` | `number \| string` | `Base × 1.2` | Medium radius override for content surfaces such as cards and alerts |
+| `borderRadiusLg` | `number \| string` | Base × 1.6 | Large radius override |
+| `controlHeightSm` | `number \| string` | Base height − 6px (minimum 1px) | Small control height override |
+| `controlHeightLg` | `number \| string` | Base height + 6px | Large control height override |
+| `fontSizeSm` | `number \| string` | `Base − 1px` | Small / large font override |
+| `fontSizeLg` | `number \| string` | Base font size + 2px | Large font size override |
+| `fontWeight` | `number` | `500` | Emphasis weight for buttons, labels and component titles |
+| `motionDuration` | `number \| string` | `200` | Base transition duration; numbers are ms and CSS times are accepted. motion=false forces 0. |
+| `motionEasing` | `string` | `'cubic-bezier(0.22, 1, 0.36, 1)'` | Easing for hover, content and ordinary transitions. |
+| `motionSpring` | `string` | `'cubic-bezier(0.22, 1.28, 0.36, 1)'` | A mild spring curve for selection and shape changes. |
+| `popupZIndex` | `number` | `1000` | Popup / modal / message stacking |
+| `modalZIndex` | `number` | `1100` | Popup / modal / message stacking |
+| `messageZIndex` | `number` | `1200` | Popup / modal / message stacking |
+| `buttonBorderRadius` | `number \| string` | Control size | Button-only radius / shared height override |
+| `buttonHeight` | `number \| string` | Control size | Button-only radius / shared height override |
+| `choiceBorderRadius` | `number \| string` | Base × 0.5 | Checkbox radius |
+| `focusColor` | `string` | Semantic color | Focus outlines |
+| `primaryHoverColor` | `string` | Primary color | Hover / pressed primary states |
+| `primaryActiveColor` | `string` | Primary color | Hover / pressed primary states |
+| `primarySoftColor` | `string` | Primary color | Soft primary backgrounds and states |
+| `primarySoftHoverColor` | `string` | Primary color | Soft primary backgrounds and states |
+| `primarySoftActiveColor` | `string` | Primary color | Soft primary backgrounds and states |
+| `primaryBorderColor` | `string` | Primary color | Primary border |
+| `dangerHoverColor` | `string` | Danger color | Hover / pressed danger states |
+| `dangerActiveColor` | `string` | Danger color | Hover / pressed danger states |
+| `spacingSm` | `number \| string` | — | Configure spacing sm. |
+| `spacingLg` | `number \| string` | — | Configure spacing lg. |
+| `shadowSm` | `string` | — | Configure shadow sm. |
+| `shadowXs` | `string` | — | The lightest surface shadow. |
+| `shadowMd` | `string` | — | Configure shadow md. |
+| `shadowLg` | `string` | — | Configure shadow lg. |
+| `lineHeight` | `number` | — | Body line height. |
+
+## Type import
+
+```tsx
+import type { LeafThemeTokens } from '@ifhover/leaf-ui';
+
+const tokens = {
+  controlHeightSm: 28,
+  borderRadiusLg: 14,
+} satisfies LeafThemeTokens;
+```
+
+Pass this object to `<ConfigProvider theme={{ tokens }}>`.
+
+## LeafComponentTokens
+
+Style fields for `theme.components` overrides by component name. Check each component's documentation for the fields it supports.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `borderRadius` | `string \| number` | Corner radius; numbers are pixels. |
+| `controlHeight` | `string \| number` | Control height; numbers are pixels. |
+| `padding` | `string \| number` | Content padding. |
+| `gap` | `string \| number` | Space between children. |
+| `fontSize` | `string \| number` | Font size; numbers are pixels. |
+| `color` | `string` | Color or semantic color. |
+| `background` | `string` | Component surface background. |
+| `borderColor` | `string` | Outer borders and section dividers. |
+| `headerBackground` | `string` | Header background. |
+| `footerBackground` | `string` | Footer background. |
+| `shadow` | `string` | CSS box-shadow value. |
+
+## LeafThemeStyle
+
+A React style type with `--leaf-*` custom properties. See [Theming](/en/guide/theming#use-the-theme-in-application-css) for consuming variables in application CSS.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `` [key: `--leaf-${string}`] `` | `string \| number \| undefined` | Reusable CSS custom property. |
diff --git a/apps/docs/docs/en/api/translations.mdx b/apps/docs/docs/en/api/translations.mdx
new file mode 100644
index 0000000..7f779a0
--- /dev/null
+++ b/apps/docs/docs/en/api/translations.mdx
@@ -0,0 +1,98 @@
+import { withBase } from '@rspress/core/runtime';
+
+# Translation resources
+
+Add languages with ConfigProvider `translations`. Use `locale` to choose the active language and fallback order. [Runnable example](/en/components/config-provider#add-your-own-language).
+
+## Start with JSON
+
+Copy the <a href={withBase('/locales/en-US.json')} download>complete English template</a>, keeping its keys. It is the same resource used by the components. Read the installed version from the package:
+
+```ts
+import enUS from '@ifhover/leaf-ui/locales/en-US.json';
+```
+
+Built-in `zh-CN.json`, `zh-TW.json`, `ja-JP.json` and `ko-KR.json` use the same path. Set `locale` to use a built-in language without importing these files. Resources contain text grouped by component, with shared actions in `common`. No registration or helper function is required.
+
+This example uses playful “Martian” text with the private-use tag `zh-CN-x-mars`. Dates and numbers retain Simplified Chinese regional formatting:
+
+```tsx
+import { ConfigProvider } from '@ifhover/leaf-ui';
+import mars from './locales/zh-CN-x-mars.json';
+
+const translations = { 'zh-CN-x-mars': mars };
+
+<ConfigProvider locale={['zh-CN-x-mars', 'en-US']} translations={translations}>
+  <App />
+</ConfigProvider>;
+```
+
+## Fallback and inheritance
+
+| Case | Behavior |
+| --- | --- |
+| `locale="zh-CN-x-mars"` | Equivalent to `['zh-CN-x-mars']`; missing entries use built-in English |
+| `locale={['zh-CN-x-mars', 'zh-CN']}` | Look up each entry in Martian text, Simplified Chinese, then built-in English |
+| First tag | Controls `lang` and regional Intl date and number formats, regardless of individual fallback entries |
+| Built-in language overrides | A resource with the same tag overrides only the supplied entries |
+| Nested `translations` | Merge by language, group and entry, with inner values taking precedence |
+| Nested `locale` | Omit to inherit; an explicit value replaces the whole chain |
+| Empty string | Kept as empty; only missing or `undefined` entries fall back |
+| Weekday arrays | Replace all 7 entries, Monday through Sunday; `weekStartsOn` controls display order |
+
+Use valid BCP 47 tags. Empty chains and invalid tags throw an error. Specify `fr-CA → fr` explicitly when desired. The final fallback always uses built-in English. Include `en-US` in the chain if your English overrides should participate.
+
+Component props and `components` text take precedence. Translate application content separately. Resources do not change `direction` or `weekStartsOn`; configure those independently.
+
+## Variable sentences
+
+Sentences use ICU MessageFormat so translators can control word order and plurals:
+
+```json
+{
+  "pagination": {
+    "total": "{total, plural, one {# item} other {# items}}"
+  }
+}
+```
+
+Keep the variable names from the English template, such as `{total}` and `{label}`. Plurals use the language supplying the entry. Malformed templates fall back to built-in English and log the entry in development. Output is rendered as plain text.
+
+## Validate translations
+
+The package provides a <a href={withBase('/locales/schema.json')} download>JSON Schema</a> for editor validation. You may add `$schema` at the resource root pointing to the installed `dist/locales/schema.json`; runtime translation ignores it.
+
+Check unknown keys, missing entries and ICU arguments:
+
+```bash
+pnpm exec leaf-ui-check-translations ./locales/zh-CN-x-mars.json --allow-partial
+```
+
+Use `--allow-partial` for intentionally incomplete resources. Structure, spelling and variables are still checked; missing entries are listed without failing. Run the check again after upgrading to find new entries.
+
+## Types
+
+```ts
+import type { LeafTranslation, LeafTranslations } from '@ifhover/leaf-ui';
+
+const mars = {
+  select: { placeholder: '挑①個唄' },
+} satisfies LeafTranslation;
+
+const translations = { 'zh-CN-x-mars': mars } satisfies LeafTranslations;
+```
+
+### LeafTranslations
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `[languageTag]` | [`LeafTranslation`](#leaftranslation) | Partial or complete resources, indexed by a canonicalized BCP 47 tag |
+
+### LeafTranslation
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `[group]` | `Partial<Record<entry, string \| readonly string[]>>` | Groups and entries from the English template, such as `common.confirm` and `select.placeholder`; completion only allows existing keys |
+| `$schema` | `string` | Optional editor schema location, ignored at runtime |
+
+Treat resources as immutable and pass a new object when updating them. Resources stay within the Provider rather than a global registry. For SSR, use the same chain, JSON and initial values on server and client. See [SSR](/en/guide/ssr).
diff --git a/apps/docs/docs/en/changelog.md b/apps/docs/docs/en/changelog.md
index 17753c1..186f34a 100644
--- a/apps/docs/docs/en/changelog.md
+++ b/apps/docs/docs/en/changelog.md
@@ -1,6 +1,5 @@
 ---
-pageType: doc-wide
-sidebar: false
+sidebar: placeholder
 footer: false
 ---
 
diff --git a/apps/docs/docs/en/components/auto-complete.mdx b/apps/docs/docs/en/components/auto-complete.mdx
index 09b85dc..b6d2c28 100644
--- a/apps/docs/docs/en/components/auto-complete.mdx
+++ b/apps/docs/docs/en/components/auto-complete.mdx
@@ -10,14 +10,14 @@ Suggest values while allowing free-text input.
 
 Use options for suggestions and onChange for typed or selected text. onSelect fires only when choosing a suggestion; onSearch fires only for typing. Set filterOption=false for server-generated suggestions. Handle debouncing and request order in your application.
 
-<ComponentExample title="Input and suggestions" preview={<AutoCompleteBasic />} fileName="basic.tsx">
+<ComponentExample title="Input and suggestions" preview={<AutoCompleteBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/auto-complete/basic.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="Dynamic email suggestions" preview={<AutoCompleteSearch />} fileName="search.tsx">
+<ComponentExample title="Dynamic email suggestions" preview={<AutoCompleteSearch />} fileName="search.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/auto-complete/search.tsx"
 ```
@@ -56,12 +56,12 @@ Use options for suggestions and onChange for typed or selected text. onSelect fi
 | `allowClear` | `boolean` | — | Show a clear action. |
 | `virtual` | `boolean` | — | Enable virtual scrolling; enabled by default for large option sets. |
 | `listHeight` | `number` | `248` | Height of the visible list. |
-| `optionHeight` | `number` | `36` | Estimated virtual option height; actual rows are measured. |
-| `popupPlacement` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['popupPlacement']` | — | Placement relative to the trigger. |
+| `optionHeight` | `number` | `32` | Estimated virtual row height; follows the regional height and density. Actual rows are measured. |
+| `popupPlacement` | [`PopupOptions`](../api/popup-options#popupoptions)`['popupPlacement']` | — | Placement relative to the trigger. |
 | `popupClassName` | `string` | — | Custom class for the popup. |
-| `popupStyle` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['popupStyle']` | — | Custom popup styles. |
-| `popupRender` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['popupRender']` | — | Wrap or extend popup content; retain the supplied content to preserve interaction. |
-| `getPopupContainer` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['getPopupContainer']` | — | Return a popup container, including a ShadowRoot. |
+| `popupStyle` | [`PopupOptions`](../api/popup-options#popupoptions)`['popupStyle']` | — | Custom popup styles. |
+| `popupRender` | [`PopupOptions`](../api/popup-options#popupoptions)`['popupRender']` | — | Wrap or extend popup content; retain the supplied content to preserve interaction. |
+| `getPopupContainer` | [`PopupOptions`](../api/popup-options#popupoptions)`['getPopupContainer']` | — | Return a popup container, including a ShadowRoot. |
 | `disabled` | `boolean` | `false` | Disable interaction. |
 | `readOnly` | `boolean` | `false` | Lock the value against typing, selection, clearing and removal. |
 | `ref` | `Ref<HTMLInputElement>` | — | DOM reference |
diff --git a/apps/docs/docs/en/components/calendar.mdx b/apps/docs/docs/en/components/calendar.mdx
index 0c82c0f..7542b41 100644
--- a/apps/docs/docs/en/components/calendar.mdx
+++ b/apps/docs/docs/en/components/calendar.mdx
@@ -9,7 +9,7 @@ Browse and select dates, and display schedules.
 
 ## Schedule calendar
 
-<ComponentExample title="Schedule calendar" preview={<CalendarBasic />} fileName="basic.tsx">
+<ComponentExample title="Schedule calendar" preview={<CalendarBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/calendar/basic.tsx"
 ```
@@ -18,7 +18,7 @@ Browse and select dates, and display schedules.
 
 ## Compact calendar and disabled dates
 
-<ComponentExample title="Compact calendar and disabled dates" preview={<CalendarCompact />} fileName="compact.tsx">
+<ComponentExample title="Compact calendar and disabled dates" preview={<CalendarCompact />} fileName="compact.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/calendar/compact.tsx"
 ```
@@ -27,7 +27,7 @@ Browse and select dates, and display schedules.
 
 ## Choose a month
 
-<ComponentExample title="Choose a month" preview={<CalendarMonth />} fileName="month.tsx">
+<ComponentExample title="Choose a month" preview={<CalendarMonth />} fileName="month.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/calendar/month.tsx"
 ```
@@ -63,4 +63,4 @@ import type { CalendarProps } from '@ifhover/leaf-ui';
 
 Use `fullscreen={false}` for a compact calendar. Place non-interactive text or icons in `cellRender`; avoid nested buttons. A disabled selection stays readable and cannot be selected again.
 
-Use arrow keys to move dates, Home/End to jump within a row and PageUp/PageDown to switch months. Provide consistent initial dates for SSR; see [SSR usage](/guide/ssr).
+Use arrow keys to move dates, Home/End to jump within a row and PageUp/PageDown to switch months. Provide consistent initial dates for SSR; see [server-side rendering](/en/guide/ssr).
diff --git a/apps/docs/docs/en/components/card.mdx b/apps/docs/docs/en/components/card.mdx
index dd73c88..139ccd5 100644
--- a/apps/docs/docs/en/components/card.mdx
+++ b/apps/docs/docs/en/components/card.mdx
@@ -1,6 +1,9 @@
-import { CardSections } from '../../../src/examples/card/sections';
+import { CardSections } from '../../../src/examples/en/card/sections';
 import { ComponentExample } from '../../../src/components/component-example';
 import { CardBasic } from '../../../src/examples/en/card/basic';
+import { CardSizes } from '../../../src/examples/en/card/sizes';
+import { CardTabs } from '../../../src/examples/en/card/tabs';
+import { CardTabsWithTitle } from '../../../src/examples/en/card/tabs-with-title';
 
 # Card
 
@@ -8,20 +11,55 @@ Group related content and actions in a container.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<CardBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<CardBasic />} fileName="basic.tsx" width={520}>
 
 ```tsx lineNumbers file="../../../src/examples/en/card/basic.tsx"
 ```
 
 </ComponentExample>
 
+## Sizes
+
+`size` offers small, default and large cards, adjusting padding, heading typography and heading height together. Embedded Tabs follow the card size unless overridden with `tabs.size`. Buttons, inputs and other controls inside the card use their own `size`.
+
+These cards share the same content to compare headings, tab bars and content spacing. Each card's tabs switch independently.
+
+<ComponentExample title="Sizes" preview={<CardSizes />} fileName="sizes.tsx" width={520}>
+
+```tsx lineNumbers file="../../../src/examples/en/card/sizes.tsx"
+```
+
+</ComponentExample>
+
 ## Content sections
 
-Group content with spacing by default; divided separates settings from actions.
+Use spacing to group content. Set `divided` to separate the heading, body and footer actions.
+
+<ComponentExample title="Content sections" preview={<CardSections />} fileName="sections.tsx" width={560}>
+
+```tsx lineNumbers file="../../../src/examples/en/card/sections.tsx"
+```
+
+</ComponentExample>
+
+## Tabbed card
 
-<ComponentExample title="Content sections" preview={<CardSections english />} fileName="sections.tsx">
+Use `tabs.items` to define labels and their content. Without a title, tabs fill the heading height with vertically centered labels, and Card's `extra` appears at their trailing edge.
 
-```tsx lineNumbers file="../../../src/examples/card/sections.tsx"
+<ComponentExample title="Tabbed card" preview={<CardTabs />} fileName="tabs.tsx" width={520}>
+
+```tsx lineNumbers file="../../../src/examples/en/card/tabs.tsx"
+```
+
+</ComponentExample>
+
+## Heading with tabs
+
+With a `title` or `description`, tabs sit beneath the heading. There is no divider between the heading and tabs; the divider runs below the tab bar. Control selection with `tabs.activeKey` / `tabs.onChange`. Visited pages retain input state by default, and `divided` continues to control the footer divider and surface.
+
+<ComponentExample title="Heading with tabs" preview={<CardTabsWithTitle />} fileName="tabs-with-title.tsx" width={520}>
+
+```tsx lineNumbers file="../../../src/examples/en/card/tabs-with-title.tsx"
 ```
 
 </ComponentExample>
@@ -30,29 +68,52 @@ Group content with spacing by default; divided separates settings from actions.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `title` | `ReactNode` | — | Title / header actions |
+| `title` | `ReactNode` | — | Card heading. |
 | `description` | `ReactNode` | — | Additional description. |
-| `extra` | `ReactNode` | — | Title / header actions |
-| `cover` | `ReactNode` | — | Cover / footer |
-| `footer` | `ReactNode` | — | Cover / footer |
+| `extra` | `ReactNode` | — | Heading actions; shown at the trailing edge of tabs without a heading. |
+| `tabs` | [`CardTabsProps`](#cardtabs-api) | — | Embedded tabs; replace the heading without a title or sit beneath it. |
+| `cover` | `ReactNode` | — | Top cover. |
+| `footer` | `ReactNode` | — | Footer content or actions. |
 | `loading` | `boolean` | `false` | Replace the body with a skeleton |
-| `bordered` | `boolean` | `true` | Outer outline / hover emphasis |
+| `bordered` | `boolean` | `true` | Show the outer border |
 | `divided` | `boolean` | `false` | Separate the heading, content and footer with subtle borders. |
-| `hoverable` | `boolean` | `false` | Outer outline / hover emphasis |
-| `size` | `'sm' \| 'md'` | `'md'` | Content spacing |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Card size: padding, heading typography and height, and the default size of embedded Tabs. |
 
 ## Types
 
 Import the exported types when defining props or building item lists.
 
 ```ts
-import type { CardProps } from '@ifhover/leaf-ui';
+import type { CardProps, CardTabsProps, TabItem } from '@ifhover/leaf-ui';
 ```
 
 ## Usage notes
 
-Place buttons or links in extra and footer. hoverable adds visual feedback; use an explicit button or link for actions.
+Place buttons or links in extra and footer. Use an explicit button or link for actions.
+
+`tabs` reuses Tabs configuration and interaction with top-aligned line tabs. `tabs.items[].children` provides each page; Card's `children` may hold shared content below all pages. `loading` replaces the content with skeletons while headings, tabs and actions stay available. Tabs follow the card's `size`; set `tabs.size` to override. An empty item list restores the ordinary card layout.
+
+Use `tabs` to configure disabled tabs, icons, manual keyboard activation, retained or destroyed pages, overflow menus and add, close or reorder callbacks. `tabs.extra` always belongs to the tab bar; with a title, Card's `extra` stays alongside the heading.
 
 ## Surfaces and rich content
 
-`description` adds supporting text beneath the title. Cards have no internal dividers by default; `divided` adds section borders and a muted footer. Customize surfaces and borders through `ConfigProvider` `components.Card`.
+`description` adds supporting text beneath the title. Ordinary cards have no internal dividers by default; tabbed cards always have a divider below navigation. `divided` adds a footer divider and muted surface with the same vertical action spacing as Modal and Drawer. Customize surfaces and borders through `ConfigProvider` `components.Card`.
+
+## CardTabs API
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `readonly `[`TabItem`](../components/tabs#tabitem)`[]` | Required | Required. Tab labels and pages; an empty list restores an ordinary card. |
+| `activeKey` | `string` | First enabled item | Controlled active tab. |
+| `defaultActiveKey` | `string` | First enabled item | Initially active tab. |
+| `onChange` | `(key: string) => void` | — | Called when the active tab changes. |
+| `size` | `'sm' \| 'md' \| 'lg'` | Card's `size` | Tab size; may be overridden independently. |
+| `activationMode` | `'automatic' \| 'manual'` | `'automatic'` | Activate with arrow keys or with Enter / Space. |
+| `destroyInactive` | `boolean` | `false` | Unmount pages on leaving; visited pages are retained by default. |
+| `extra` | `ReactNode` | — | Trailing tab bar content. |
+| `onClose` | `(key: string, event: MouseEvent<HTMLButtonElement>) => void` | — | Request removal by the application; default switching can be prevented. |
+| `onAdd` | `() => void` | — | Show the add button and request a new tab. |
+| `addLabel` | `string` | Localized prompt | Accessible name of the add button. |
+| `overflow` | `boolean` | `true` | Move overflowing tabs into the more menu. |
+| `sortable` | `boolean` | `false` | Enable sorting alongside `onReorder`. |
+| `onReorder` | `(items: `[`TabItem`](../components/tabs#tabitem)`[]) => void` | — | Return the reordered original items for the application to store. |
diff --git a/apps/docs/docs/en/components/cascader.mdx b/apps/docs/docs/en/components/cascader.mdx
index 0d94b2c..a3e9f4f 100644
--- a/apps/docs/docs/en/components/cascader.mdx
+++ b/apps/docs/docs/en/components/cascader.mdx
@@ -1,3 +1,4 @@
+import { SingleLine } from '../../../src/examples/en/cascader/single-line';
 import { Capabilities } from '../../../src/examples/cascader/capabilities';
 import { ComponentExample } from '../../../src/components/component-example';
 import { CascaderBasic, CascaderControlled } from '../../../src/components/en-form-examples';
@@ -10,14 +11,14 @@ Choose a value through a hierarchy of options.
 
 A selection is committed at a leaf option. onChange supplies both the path and its options. Named fields submit a JSON array string. Use arrow keys to navigate levels, Enter to choose and Escape to close.
 
-<ComponentExample title="Interactive example" preview={<CascaderBasic />} fileName="basic.tsx">
+<ComponentExample title="Interactive example" preview={<CascaderBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/cascader/basic.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="Interactive example" preview={<CascaderControlled />} fileName="controlled.tsx">
+<ComponentExample title="Interactive example" preview={<CascaderControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/cascader/controlled.tsx"
 ```
@@ -33,6 +34,17 @@ A selection is committed at a leaf option. onChange supplies both the path and i
 
 </ComponentExample>
 
+## Single-line selections
+
+Set `tagWrap={false}` to keep selected values on one line. Long labels truncate; extra values collapse into `+N`. In very narrow controls, only the count is shown. Open the popup to review or change selections. `maxTagCount` can further limit the visible tags; `maxTagCount="responsive"` also enables automatic single-line collapsing.
+
+<ComponentExample title="Single-line selections" preview={<SingleLine />} fileName="single-line.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/cascader/single-line.tsx"
+```
+
+</ComponentExample>
+
 ## Cascader API
 
 | Property | Type | Default | Description |
@@ -60,6 +72,8 @@ A selection is committed at a leaf option. onChange supplies both the path and i
 | `loadData` | `(option: `[`CascaderOption`](#cascaderoption)`, signal: AbortSignal) => Promise<readonly `[`CascaderOption`](#cascaderoption)`[]>` | — | Load child nodes asynchronously and respect AbortSignal. |
 | `onLoadError` | `(error: unknown, option: `[`CascaderOption`](#cascaderoption)`) => void` | — | Called on loading failure, for retry feedback. |
 | `cacheKey` | `string \| number` | — | Changing the data version clears lazy caches and cancels stale requests. |
+| `tagWrap` | `boolean` | `true` | Allow selected tags to wrap; false keeps one line and collapses overflow. |
+| `maxTagCount` | `number \| 'responsive'` | — | Maximum visible tags; responsive collapses them to the available width. |
 | `multiple` | `false \| true` | `false` | Enable multiple selection; value and callback types change accordingly. |
 | `value` | `readonly string[] \| readonly (readonly string[])[]` | Required | Value; unique at the same level |
 | `defaultValue` | `readonly string[] \| readonly (readonly string[])[]` | `[]` | Controlled path / initial uncontrolled path |
diff --git a/apps/docs/docs/en/components/checkbox.mdx b/apps/docs/docs/en/components/checkbox.mdx
index 45a9026..9b4642d 100644
--- a/apps/docs/docs/en/components/checkbox.mdx
+++ b/apps/docs/docs/en/components/checkbox.mdx
@@ -19,7 +19,7 @@ Read event.target.checked in onChange. Use indeterminate to represent a partiall
 
 </ComponentExample>
 
-<ComponentExample title="Select all and indeterminate" preview={<CheckboxCheckAll />} fileName="check-all.tsx">
+<ComponentExample title="Select all and indeterminate" preview={<CheckboxCheckAll />} fileName="check-all.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/checkbox/check-all.tsx"
 ```
diff --git a/apps/docs/docs/en/components/color-picker.mdx b/apps/docs/docs/en/components/color-picker.mdx
index afc8ee7..dd7cf6f 100644
--- a/apps/docs/docs/en/components/color-picker.mdx
+++ b/apps/docs/docs/en/components/color-picker.mdx
@@ -10,7 +10,9 @@ Choose colors for content and branding.
 
 ## Choose a color
 
-<ComponentExample title="Choose a color" preview={<ColorPickerBasic />} fileName="basic.tsx">
+Click the swatch, color value or any empty area of the control to open the picker.
+
+<ComponentExample title="Choose a color" preview={<ColorPickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/color-picker/basic.tsx"
 ```
diff --git a/apps/docs/docs/en/components/command-palette.mdx b/apps/docs/docs/en/components/command-palette.mdx
index 769939b..51a2b52 100644
--- a/apps/docs/docs/en/components/command-palette.mdx
+++ b/apps/docs/docs/en/components/command-palette.mdx
@@ -7,7 +7,7 @@ Search and run actions quickly.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<CommandPaletteBasic english />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<CommandPaletteBasic english />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/command-palette/basic.tsx"
 ```
@@ -16,7 +16,7 @@ Search and run actions quickly.
 
 ## Async actions
 
-<ComponentExample title="Async actions" preview={<CommandPaletteFailure english />} fileName="basic.tsx">
+<ComponentExample title="Async actions" preview={<CommandPaletteFailure english />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/command-palette/basic.tsx"
 ```
diff --git a/apps/docs/docs/en/components/config-provider.mdx b/apps/docs/docs/en/components/config-provider.mdx
index d463a89..42e6db3 100644
--- a/apps/docs/docs/en/components/config-provider.mdx
+++ b/apps/docs/docs/en/components/config-provider.mdx
@@ -1,241 +1,232 @@
-import { ConfigProviderDensity } from '../../../src/examples/config-provider/density';
+import { withBase } from '@rspress/core/runtime';
+
 import { ComponentExample } from '../../../src/components/component-example';
+import { DocsCollapse } from '../../../src/components/docs-collapse';
 import { ConfigProviderBasic } from '../../../src/examples/en/config-provider/basic';
+import { ConfigProviderDefaults } from '../../../src/examples/en/config-provider/defaults';
+import { ConfigProviderModalDefaults } from '../../../src/examples/en/config-provider/modal-defaults';
+import { ConfigProviderInheritance } from '../../../src/examples/en/config-provider/inheritance';
+import { ConfigProviderReset } from '../../../src/examples/en/config-provider/reset';
+import { ConfigProviderLocale } from '../../../src/examples/en/config-provider/locale';
+import { ConfigProviderTranslations } from '../../../src/examples/en/config-provider/translations';
+import { ConfigProviderDensity } from '../../../src/examples/en/config-provider/density';
 import { ConfigProviderSizes } from '../../../src/examples/en/config-provider/sizes';
 
 # ConfigProvider
 
-Configure a region's theme, appearance and language.
+Set a shared theme, language and component defaults for an application or a local region.
+
+Wrap the application to configure it globally, or nest providers to customize one region.
+
+| Configure | Prop |
+| --- | --- |
+| Built-in text and custom languages | `locale`, `translations` |
+| Primary color, appearance, size and spacing | `theme`, `density` |
+| Shared component props | `components` |
+
+## Multilingual
+
+`locale` changes built-in text in date panels, empty states and clear actions. Translate business headings, field labels and options in your application.
+
+### Built-in languages
+
+These translations are included without importing a language pack. The default is Simplified Chinese when `locale` is not configured.
+
+| Language | `locale` |
+| --- | --- |
+| 简体中文 (Simplified Chinese) | `zh-CN` |
+| 繁體中文 (Traditional Chinese) | `zh-TW` |
+| English | `en-US` |
+| 日本語 (Japanese) | `ja-JP` |
+| 한국어 (Korean) | `ko-KR` |
+
+For another language, [provide translation resources](#add-your-own-language). A language tag alone does not translate built-in text. Missing entries ultimately fall back to English.
+
+### Switch languages
+
+Update `locale` to switch languages. Select a language from the dropdown, then open the date or empty-options control to compare built-in text in all five languages.
 
-## Regional themes and languages
+<ComponentExample title="Built-in language" preview={<ConfigProviderLocale />} fileName="locale.tsx" width={360}>
 
-<ComponentExample title="Regional themes and languages" preview={<ConfigProviderBasic />} fileName="basic.tsx">
+```tsx lineNumbers file="../../../src/examples/en/config-provider/locale.tsx"
+```
+
+</ComponentExample>
+
+Nested regions inherit their parent language unless overridden. `direction` controls text direction; `weekStartsOn` sets the first day of the week. Popups inherit these settings too.
+
+### Add your own language
+
+Copy the <a href={withBase('/locales/en-US.json')} download>complete English JSON</a>, translate it, and pass your imported file through `translations`. Each key is a language tag. The JSON contains component groups and text only; do not repeat the language tag inside it. Partial resources are supported.
+
+👽 A small Easter egg: this example uses [“Martian” text](https://en.wikipedia.org/wiki/Martian_language), a playful style of Chinese internet writing that mixes homophones, lookalike characters, and symbols.
+
+Missing entries fall back to English. Application content such as field names and confirmation descriptions remains under your control.
+
+It uses the private-use language tag `zh-CN-x-mars`, so dates and numbers retain Simplified Chinese regional formatting. This is a demonstration, not a built-in language.
+
+<ComponentExample title="Custom Martian translations" preview={<ConfigProviderTranslations />} fileName="translations.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/config-provider/translations.tsx"
+```
+
+</ComponentExample>
+
+The imported `zh-CN-x-mars.json`:
+
+```json file="../../../src/examples/config-provider/zh-CN-x-mars.json"
+```
+
+`locale={['zh-CN-x-mars', 'en-US']}` looks up each missing entry in order, with built-in English as the final fallback. The first tag always controls the current language and regional date and number formatting. A string equals a one-item array; empty arrays are invalid. No implicit `zh-CN-x-mars → zh-CN` or `fr-CA → fr` fallback is added.
+
+Nested `translations` merge by language and entry. An omitted `locale` inherits the chain; an explicit value replaces it. Text supplied through component props or `components` takes precedence. See [Translation resources](/en/api/translations) for types, JSON Schema and validation.
+
+## Theme and appearance
+
+### Regional themes
+
+The theme applies to components and their popups. Usually a primary color or base radius is enough; related styles follow automatically.
+
+<ComponentExample title="Regional theme" preview={<ConfigProviderBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/config-provider/basic.tsx"
 ```
 
 </ComponentExample>
 
-## Base sizes and advanced overrides
+### Regional density
+
+`density="compact"` reduces control sizes and content spacing for information-heavy interfaces. The default is `comfortable`. Nested regions can choose their own density.
+
+<ComponentExample title="Comfortable and compact" preview={<ConfigProviderDensity />} fileName="density.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/config-provider/density.tsx"
+```
+
+</ComponentExample>
+
+### Base height
 
-Small and large controls follow the base height. Use tokens only when a particular size needs an explicit override.
+Set `theme.controlHeight` to change the size baseline. Small and large controls derive their heights automatically, so individual buttons and inputs stay consistent.
 
-<ComponentExample title="Base sizes and advanced overrides" preview={<ConfigProviderSizes />} fileName="sizes.tsx">
+<ComponentExample title="Base height" preview={<ConfigProviderSizes />} fileName="sizes.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/config-provider/sizes.tsx"
 ```
 
 </ComponentExample>
 
-## Global density
+For further customization, see [Theming](/en/guide/theming). `theme.components` changes local component styles; `components` below sets default component props. For server rendering, see [SSR](/en/guide/ssr).
+
+## Component defaults
+
+**Set common props once instead of repeating them on every component.** Use `components` to share button styles, input hints and modal closing behavior. Change the configuration once when your conventions change.
 
-Density changes spacing and geometry while preserving body text readability. Nested scopes inherit it; use an explicit comfortable scope to reset.
+Configure the app root to apply defaults throughout the app, or wrap a region to keep them local. Individual components can still override them with their own props.
 
-<ComponentExample title="Comfortable and compact" preview={<ConfigProviderDensity />} fileName="density.tsx">
+### Consistent form defaults
 
-```tsx lineNumbers file="../../../src/examples/config-provider/density.tsx"
+This example shares placeholders, clear buttons and button styles. The end date and Save button override the shared defaults.
+
+<ComponentExample title="Common props, configured once" preview={<ConfigProviderDefaults />} fileName="defaults.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/config-provider/defaults.tsx"
+```
+
+</ComponentExample>
+
+### Prevent accidental dismissal from mask clicks
+
+Keep an accidental mask click from interrupting an edit: set `Modal: { maskClosable: false }` once for every Modal in the region. The close button and Esc still work.
+
+<ComponentExample title="Open the modal and try clicking the mask" preview={<ConfigProviderModalDefaults />} fileName="modal-defaults.tsx" width="fit-content">
+
+```tsx lineNumbers file="../../../src/examples/en/config-provider/modal-defaults.tsx"
+```
+
+</ComponentExample>
+
+### Inheritance and overrides
+
+Shared defaults leave room for local changes: **instance props > inner configuration > outer configuration > built-in defaults**.
+
+<ComponentExample title="Inheritance and overrides" preview={<ConfigProviderInheritance />} fileName="inheritance.tsx">
+
+```tsx lineNumbers file="../../../src/examples/en/config-provider/inheritance.tsx"
+```
+
+</ComponentExample>
+
+### Clearing inherited defaults
+
+Set a component entry to `null` to restore its built-in defaults locally, for example `components={{ Input: null }}`.
+
+<ComponentExample title="Clearing inherited defaults" preview={<ConfigProviderReset />} fileName="reset.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/config-provider/reset.tsx"
 ```
 
 </ComponentExample>
 
-## ConfigProvider API
+<DocsCollapse title="Configuration keys, merging rules and usage advice">
+
+Use `LeafComponentDefaults` for type completion. See [the complete reference](/en/api/component-defaults#leafcomponentdefaults) for configurable props.
+
+- Keys match component names, such as `Input` and `Modal`. `Table.Cell` uses `TableCell`, and `Table.Root` uses `Table`. The aliases `FAB` and `ResizablePanels` use `FloatButton` and `Splitter`.
+- Only `undefined` falls back to a default; `false`, `0`, empty strings and allowed `null` values are preserved. Objects, arrays, class names and callbacks are replaced as a whole.
+- A `null` component entry clears inherited defaults; an empty object and `undefined` continue to inherit. Other components and the theme are unaffected.
+- Keep instance data and events on the component, such as `Select.options`, `Modal.open` and `onChange`.
+- Pass a new object when updating configuration; do not mutate the existing one.
+- Configure internal actions through their owner, such as `Modal.confirmButtonProps`. They do not inherit shared `Button` defaults.
+
+</DocsCollapse>
+
+## API
+
+### ConfigProvider API
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `locale` | `LeafLocale` | `'zh-CN'` | Built-in language; nested providers inherit |
+| `locale` | `LeafLocale \| readonly LeafLocale[]` | `'zh-CN'` | Current language and per-entry fallback order; inherited when omitted |
+| `translations` | `Readonly<Record<string, `[`LeafTranslation`](../api/translations#leaftranslation)`>>` | — | JSON resources indexed by language tag; nested entries merge |
 | `theme` | [`LeafTheme`](#leaftheme) | — | Regional settings; omitted fields inherit |
-| `messages` | `Partial<`[`LeafMessages`](#leafmessages)`>` | — | Override built-in component messages. |
-| `textMessages` | `Record<string, string>` | — | Override extended component labels using the English source text as the key. |
 | `direction` | `'ltr' \| 'rtl'` | — | Text and interaction direction. |
 | `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | — | First day of the week; 0 is Sunday and 1 is Monday. |
 | `getPopupContainer` | `() => Element \| DocumentFragment` | — | Return a popup container, including a ShadowRoot. |
 | `maskBlur` | `boolean` | `true` | Enable mask blur for Modal, Drawer and Modal-based overlays such as confirmations and command palettes. Disable to reduce rendering cost; nested providers inherit it. |
 | `density` | `'comfortable' \| 'compact'` | `'comfortable'` | Inherited controls, forms, menus, lists and overlay spacing; explicit sizes override the preset. |
+| `components` | [`LeafComponentDefaults`](../api/component-defaults#leafcomponentdefaults) | — | Regional component defaults, inherited by component and prop. |
 
-Other native div attributes, className and style apply to the container. Configure themes through theme.
+Native div props, `className` and `style` apply to the region wrapper. `maskBlur={false}` disables backdrop blur while preserving the translucent mask; this is independent of `theme.motion`.
 
-Mask blur transitions on opening and closing. Use `<ConfigProvider maskBlur={false}>` on performance-sensitive pages to keep the translucent mask without blur. This setting is independent of `theme.motion`.
+### LeafTheme
 
-## LeafTheme
+Common theme options. Unspecified fields inherit from the outer region.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `primaryColor` | `string` | `'#20834a'` | Primary color with derived interaction states; dark appearance defaults to a lighter green |
 | `borderRadius` | `number \| string` | `10` | Base radius; small / medium / large radii use × 0.6 / 1.2 / 1.6 |
-| `controlHeight` | `number \| string` | `40` | Base height; small / large heights use − / + 6px |
+| `controlHeight` | `number \| string` | `36` | Base height; small / large heights use − / + 6px |
 | `fontSize` | `number \| string` | `14` | Base font; small font − 1px, large font + 2px |
 | `fontFamily` | `string` | System sans-serif | Font family |
 | `appearance` | `'light' \| 'dark'` | `'light'` | Light or dark; inherits explicit ancestor settings |
 | `motion` | `boolean` | `true` | Enable interaction motion in this region; reduced-motion preferences take precedence and portals inherit it. |
-| `tokens` | [`LeafThemeTokens`](#leafthemetokens) | — | Optional advanced overrides |
+| `tokens` | [`LeafThemeTokens`](../api/theme-tokens#leafthemetokens) | — | Optional advanced overrides |
 | `spacing` | `number` | — | Base spacing; other spacing values are derived. |
 | `lineHeight` | `number` | — | Body line height. |
 | `headingWeight` | `number` | — | Weight of Typography document headings; component titles use `tokens.fontWeight`. |
 | `elevation` | `'none' \| 'soft' \| 'medium'` | — | Overall shadow strength. |
 | `breakpoints` | `Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>` | — | Responsive thresholds used by useBreakpoint. |
-| `components` | `Record<string, `[`LeafComponentTokens`](../guide/theming#leafcomponenttokens)`>` | — | Override local styles by component name. |
-
-Defaults apply to an unconfigured application. Nested providers inherit supplied ancestor settings. CSS lengths are accepted; derived small height and font values stay at or above 1px.
+| `components` | `Record<string, `[`LeafComponentTokens`](../api/theme-tokens#leafcomponenttokens)`>` | — | Override local styles by component name. |
 
-## LeafThemeTokens
+### Types and complete reference
 
-All fields are optional. Explicit values take precedence over generated values.
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `onPrimaryColor` | `string` | Theme | Text on primary backgrounds |
-| `dangerColor` | `string` | Appearance | Danger background / foreground |
-| `onDangerColor` | `string` | Appearance | Danger background / foreground |
-| `successColor` | `string` | Appearance | Success / warning / information |
-| `warningColor` | `string` | Appearance | Success / warning / information |
-| `infoColor` | `string` | Appearance | Success / warning / information |
-| `textColor` | `string` | Appearance | Main / secondary text |
-| `mutedTextColor` | `string` | Appearance | Main / secondary text |
-| `subtleTextColor` | `string` | — | Subtle supporting text color. |
-| `surfaceColor` | `string` | Appearance | Main / subtle surfaces |
-| `mutedSurfaceColor` | `string` | Appearance | Main / subtle surfaces |
-| `raisedSurfaceColor` | `string` | — | Raised and floating surface color. |
-| `borderColor` | `string` | Appearance | Neutral borders |
-| `borderHoverColor` | `string` | — | Neutral border color on hover. |
-| `dividerColor` | `string` | — | Section divider color, derived from border and surface colors by default. |
-| `borderRadiusSm` | `number \| string` | `Base × 0.6` | Small / large radius override |
-| `borderRadiusMd` | `number \| string` | `Base × 1.2` | Medium radius override for content surfaces such as cards and alerts |
-| `borderRadiusLg` | `number \| string` | `1.6` | Small / large radius override |
-| `controlHeightSm` | `number \| string` | `Base −` | Small / large height override |
-| `controlHeightLg` | `number \| string` | `+ 6px` | Small / large height override |
-| `fontSizeSm` | `number \| string` | `Base − 1px` | Small / large font override |
-| `fontSizeLg` | `number \| string` | `+ 2px` | Small / large font override |
-| `fontWeight` | `number` | `500` | Emphasis weight for buttons, labels and component titles |
-| `motionDuration` | `number \| string` | `200` | Base transition duration; numbers are ms and CSS times are accepted. motion=false forces 0. |
-| `motionEasing` | `string` | `'cubic-bezier(0.22, 1, 0.36, 1)'` | Easing for hover, content and ordinary transitions. |
-| `motionSpring` | `string` | `'cubic-bezier(0.22, 1.28, 0.36, 1)'` | A mild spring curve for selection and shape changes. |
-| `popupZIndex` | `number` | `1000` | Popup / modal / message stacking |
-| `modalZIndex` | `number` | `1100` | Popup / modal / message stacking |
-| `messageZIndex` | `number` | `1200` | Popup / modal / message stacking |
-| `buttonBorderRadius` | `number \| string` | Control size | Button-only radius / shared height override |
-| `buttonHeight` | `number \| string` | Control size | Button-only radius / shared height override |
-| `choiceBorderRadius` | `number \| string` | Base × 0.5 | Checkbox radius |
-| `focusColor` | `string` | Semantic color | Focus outlines |
-| `primaryHoverColor` | `string` | Primary color | Hover / pressed primary states |
-| `primaryActiveColor` | `string` | Primary color | Hover / pressed primary states |
-| `primarySoftColor` | `string` | Primary color | Soft primary backgrounds and states |
-| `primarySoftHoverColor` | `string` | Primary color | Soft primary backgrounds and states |
-| `primarySoftActiveColor` | `string` | Primary color | Soft primary backgrounds and states |
-| `primaryBorderColor` | `string` | Primary color | Primary border |
-| `dangerHoverColor` | `string` | Danger color | Hover / pressed danger states |
-| `dangerActiveColor` | `string` | Danger color | Hover / pressed danger states |
-| `spacingSm` | `number \| string` | — | Configure spacing sm. |
-| `spacingLg` | `number \| string` | — | Configure spacing lg. |
-| `shadowSm` | `string` | — | Configure shadow sm. |
-| `shadowXs` | `string` | — | The lightest surface shadow. |
-| `shadowMd` | `string` | — | Configure shadow md. |
-| `shadowLg` | `string` | — | Configure shadow lg. |
-| `lineHeight` | `number` | — | Body line height. |
-
-## Types
+Import types when creating reusable configuration:
 
 ```ts
-import type { ConfigProviderProps, LeafTheme, LeafThemeTokens, LeafLocale } from '@ifhover/leaf-ui';
-
-const theme: LeafTheme = { primaryColor: '#7654c6', borderRadius: 8 };
-const advanced: LeafThemeTokens = { controlHeightLg: 44 };
+import type { ConfigProviderProps, LeafComponentDefaults, LeafTheme } from '@ifhover/leaf-ui';
 ```
 
-`LeafLocale` is `'zh-CN' | 'en-US'`. ConfigProviderProps corresponds to the [ConfigProvider API](#configprovider-api).
-
-## Usage notes
-
-Nested regions merge tokens by field; explicit derived-size overrides remain inherited. Floating panels, Modal, confirmations and messages inherit the calling region’s configuration. ConfigProvider manages confirmations, messages, notifications and loading bars automatically; descendants call the corresponding hooks. See [Confirm](/en/components/confirm) and [Message](/en/components/message).
-
-Translate application content, labels and options yourself. Configure themes through ConfigProvider and consume CSS variables in custom components. See [theming](/en/guide/theming) and [SSR usage](/en/guide/ssr).
-
-## LeafMessages
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `select` | `string` | — | Required. Configure select. |
-| `empty` | `string` | — | Required. Configure empty. |
-| `noMatches` | `string` | — | Required. Configure no matches. |
-| `clearSelection` | `string` | — | Required. Configure clear selection. |
-| `date` | `string` | — | Required. Configure date. |
-| `time` | `string` | — | Required. Configure time. |
-| `dateTime` | `string` | — | Required. Configure date time. |
-| `range` | `string` | — | Required. Configure range. |
-| `clearDate` | `string` | — | Required. Configure clear date. |
-| `clearTime` | `string` | — | Required. Configure clear time. |
-| `clearRange` | `string` | — | Required. Configure clear range. |
-| `clearCascader` | `string` | — | Required. Configure clear cascader. |
-| `chooseDate` | `string` | — | Required. Configure choose date. |
-| `chooseTime` | `string` | — | Required. Configure choose time. |
-| `previousMonth` | `string` | — | Required. Configure previous month. |
-| `nextMonth` | `string` | — | Required. Configure next month. |
-| `previousYear` | `string` | — | Required. Configure previous year. |
-| `nextYear` | `string` | — | Required. Configure next year. |
-| `previousYears` | `string` | — | Required. Configure previous years. |
-| `nextYears` | `string` | — | Required. Configure next years. |
-| `hours` | `string` | — | Required. Configure hours. |
-| `minutes` | `string` | — | Required. Configure minutes. |
-| `seconds` | `string` | — | Required. Configure seconds. |
-| `period` | `string` | — | Required. Configure period. |
-| `am` | `string` | — | Required. Configure am. |
-| `pm` | `string` | — | Required. Configure pm. |
-| `weekdays` | `string[]` | — | Required. Configure weekdays. |
-| `confirm` | `string` | — | Required. Configure confirm. |
-| `cancel` | `string` | — | Required. Cancel the current request. |
-| `close` | `string` | — | Required. Configure close. |
-| `start` | `string` | — | Required. Configure start. |
-| `end` | `string` | — | Required. Configure end. |
-| `required` | `string` | — | Required. Require a non-empty value; compound controls validate once. |
-| `invalid` | `string` | — | Required. Configure invalid. |
-| `useTime` | `string` | — | Required. Configure use time. |
-| `year` | `string` | — | Required. Configure year. |
-| `month` | `string` | — | Required. Configure month. |
-| `week` | `string` | — | Required. Configure week. |
-| `dateMode` | `string` | — | Required. Configure date mode. |
-| `loading` | `string` | — | Required. Show a loading state. |
-| `today` | `string` | — | Required. Configure today. |
-| `now` | `string` | — | Required. Configure now. |
-| `selectTime` | `string` | — | Required. Configure select time. |
-| `selectDate` | `string` | — | Required. Configure select date. |
-| `remove` | `string` | — | Required. Configure remove. |
-| `search` | `string` | — | Required. Configure search. |
-| `breadcrumb` | `string` | — | Required. Configure breadcrumb. |
-| `pagination` | `string` | — | Required. Configure pagination. |
-| `previousPage` | `string` | — | Required. Configure previous page. |
-| `nextPage` | `string` | — | Required. Configure next page. |
-| `page` | `string` | — | Required. Configure page. |
-| `pageSize` | `string` | — | Required. Configure page size. |
-| `itemsPerPage` | `string` | — | Required. Configure items per page. |
-| `jumpTo` | `string` | — | Required. Configure jump to. |
-| `showPassword` | `string` | — | Required. Configure show password. |
-| `hidePassword` | `string` | — | Required. Configure hide password. |
-| `increase` | `string` | — | Required. Configure increase. |
-| `decrease` | `string` | — | Required. Configure decrease. |
-| `invalidNumber` | `string` | — | Required. Configure invalid number. |
-| `progress` | `string` | — | Required. Configure progress. |
-| `calendar` | `string` | — | Required. Configure calendar. |
-| `clearInput` | `string` | — | Required. Configure clear input. |
-| `noData` | `string` | — | Required. Configure no data. |
-| `avatar` | `string` | — | Required. Leading avatar or icon. |
-| `rating` | `string` | — | Required. Configure rating. |
-| `resultSuccess` | `string` | — | Required. Configure result success. |
-| `resultWarning` | `string` | — | Required. Configure result warning. |
-| `resultError` | `string` | — | Required. Configure result error. |
-| `resultInfo` | `string` | — | Required. Configure result info. |
-| `color` | `string` | — | Required. Color or semantic tone. |
-| `clearColor` | `string` | — | Required. Configure clear color. |
-| `saturation` | `string` | — | Required. Configure saturation. |
-| `brightness` | `string` | — | Required. Configure brightness. |
-| `hue` | `string` | — | Required. Configure hue. |
-| `alpha` | `string` | — | Required. Configure alpha. |
-| `colorValue` | `string` | — | Required. Configure color value. |
-| `invalidColor` | `string` | — | Required. Configure invalid color. |
-| `presets` | `string` | — | Required. Presets; value may be computed on demand. |
-| `tree` | `string` | — | Required. Configure tree. |
-| `expand` | `string` | — | Required. Configure expand. |
-| `collapseNode` | `string` | — | Required. Configure collapse node. |
-| `collapse` | `string` | — | Required. Configure collapse. |
-| `slider` | `string` | — | Required. Configure slider. |
-| `pageBack` | `string` | — | Required. Configure page back. |
-| `pageForward` | `string` | — | Required. Configure page forward. |
-| `closeTab` | `string` | — | Required. Configure close tab. |
+- [LeafComponentDefaults](/en/api/component-defaults#leafcomponentdefaults): component keys and configurable props.
+- [LeafThemeTokens](/en/api/theme-tokens#leafthemetokens): advanced theme overrides.
diff --git a/apps/docs/docs/en/components/date-picker.mdx b/apps/docs/docs/en/components/date-picker.mdx
index 76f70f6..ee40627 100644
--- a/apps/docs/docs/en/components/date-picker.mdx
+++ b/apps/docs/docs/en/components/date-picker.mdx
@@ -12,14 +12,14 @@ Choose a date from a calendar.
 
 Values are Date objects in local time. onChange also supplies the formatted string for the current picker mode; named fields submit this string. Arrow keys move days, Home / End move within a week, and PageUp / PageDown move months. Use [DateTimePicker](/en/components/date-time-picker) for time, or [DateRangePicker](/en/components/date-range-picker) for a range.
 
-<ComponentExample title="Basic selection" preview={<DatePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic selection" preview={<DatePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/date-picker/basic.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="Interactive example" preview={<DatePickerControlled />} fileName="controlled.tsx">
+<ComponentExample title="Interactive example" preview={<DatePickerControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/date-picker/controlled.tsx"
 ```
diff --git a/apps/docs/docs/en/components/date-range-picker.mdx b/apps/docs/docs/en/components/date-range-picker.mdx
index 065d008..6921309 100644
--- a/apps/docs/docs/en/components/date-range-picker.mdx
+++ b/apps/docs/docs/en/components/date-range-picker.mdx
@@ -9,7 +9,7 @@ Select start and end dates or times to define a range.
 
 ## Controlled range
 
-<ComponentExample title="Controlled range" preview={<DateRangePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="Controlled range" preview={<DateRangePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/date-range-picker/basic.tsx"
 ```
diff --git a/apps/docs/docs/en/components/date-time-picker.mdx b/apps/docs/docs/en/components/date-time-picker.mdx
index 8abacf9..6eaa589 100644
--- a/apps/docs/docs/en/components/date-time-picker.mdx
+++ b/apps/docs/docs/en/components/date-time-picker.mdx
@@ -8,7 +8,7 @@ Select a specific date and time.
 
 ## Date and time
 
-<ComponentExample title="Date and time" preview={<DateTimePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="Date and time" preview={<DateTimePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/date-time-picker/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Select a specific date and time.
 
 ## Formats and business hours
 
-<ComponentExample title="Formats and business hours" preview={<Capabilities english />} fileName="capabilities.tsx">
+<ComponentExample title="Formats and business hours" preview={<Capabilities english />} fileName="capabilities.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/date-time-picker/capabilities.tsx"
 ```
diff --git a/apps/docs/docs/en/components/drawer.mdx b/apps/docs/docs/en/components/drawer.mdx
index 558cc19..c41944a 100644
--- a/apps/docs/docs/en/components/drawer.mdx
+++ b/apps/docs/docs/en/components/drawer.mdx
@@ -18,7 +18,7 @@ Open content from a page edge to view details or complete actions.
 
 ## Resize and nested push
 
-<ComponentExample title="Resize and nested push" preview={<Capabilities english />} fileName="capabilities.tsx">
+<ComponentExample title="Resize and nested push" preview={<Capabilities english />} fileName="capabilities.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/drawer/capabilities.tsx"
 ```
@@ -29,7 +29,7 @@ Open content from a page edge to view details or complete actions.
 
 Separate the heading, settings and footer actions.
 
-<ComponentExample title="Notification preferences" preview={<DrawerSections english />} fileName="sections.tsx">
+<ComponentExample title="Notification preferences" preview={<DrawerSections english />} fileName="sections.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/drawer/sections.tsx"
 ```
diff --git a/apps/docs/docs/en/components/dropdown.mdx b/apps/docs/docs/en/components/dropdown.mdx
index 8ebfdd2..38dd682 100644
--- a/apps/docs/docs/en/components/dropdown.mdx
+++ b/apps/docs/docs/en/components/dropdown.mdx
@@ -9,7 +9,7 @@ Group additional actions in a menu.
 
 ## Action menu
 
-<ComponentExample title="Action menu" preview={<DropdownBasic />} fileName="basic.tsx">
+<ComponentExample title="Action menu" preview={<DropdownBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/dropdown/basic.tsx"
 ```
@@ -18,7 +18,7 @@ Group additional actions in a menu.
 
 ## Extended features
 
-<ComponentExample title="Extended features" preview={<ExtensionDemo />} fileName="extensions.tsx">
+<ComponentExample title="Extended features" preview={<ExtensionDemo />} fileName="extensions.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/dropdown/extensions.tsx"
 ```
diff --git a/apps/docs/docs/en/components/error-boundary.mdx b/apps/docs/docs/en/components/error-boundary.mdx
index a0d59b4..5300618 100644
--- a/apps/docs/docs/en/components/error-boundary.mdx
+++ b/apps/docs/docs/en/components/error-boundary.mdx
@@ -8,7 +8,7 @@ Provide a fallback when content fails to render.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<ErrorBoundaryBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<ErrorBoundaryBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/error-boundary/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Provide a fallback when content fails to render.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<ErrorBoundaryCustom />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<ErrorBoundaryCustom />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/error-boundary/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/file-list.mdx b/apps/docs/docs/en/components/file-list.mdx
index 7f863a6..a6c294a 100644
--- a/apps/docs/docs/en/components/file-list.mdx
+++ b/apps/docs/docs/en/components/file-list.mdx
@@ -1,32 +1,84 @@
 import { ComponentExample } from '../../../src/components/component-example';
 import { FileListBasic } from '../../../src/examples/en/file-list/basic';
 import { FileListActions } from '../../../src/examples/en/file-list/advanced';
+import { FileListPicture } from '../../../src/examples/en/file-list/picture';
+import { FileListCards } from '../../../src/examples/en/file-list/cards';
+import { FileListStates } from '../../../src/examples/en/file-list/states';
+import { FileListEmpty } from '../../../src/examples/en/file-list/empty';
 
 # FileList
 
-Display file names, icons and file actions.
+Display file information and upload status, with preview, download and removal actions.
 
 ## File information
 
-<ComponentExample title="File information" preview={<FileListBasic />} fileName="basic.tsx">
+Icons identify each file type. File size is optional. Preview images or download other files.
+
+<ComponentExample title="File information" preview={<FileListBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/file-list/basic.tsx"
 ```
 
 </ComponentExample>
 
+## Thumbnail list
+
+Use `listType="picture"` to show image thumbnails. Other files keep their type icons.
+
+<ComponentExample title="Thumbnail list" preview={<FileListPicture />} fileName="picture.tsx" width="100%">
+
+```tsx lineNumbers file="../../../src/examples/en/file-list/picture.tsx"
+```
+
+</ComponentExample>
+
+## Picture cards
+
+Use `listType="picture-card"` to show picture cards. The preview lets you switch between images in the same list.
+
+<ComponentExample title="Picture cards" preview={<FileListCards />} fileName="cards.tsx" width="100%">
+
+```tsx lineNumbers file="../../../src/examples/en/file-list/cards.tsx"
+```
+
+</ComponentExample>
+
+## Upload status
+
+Show progress, completed, failed, ready and cancelled uploads. Error details appear below the affected file.
+
+<ComponentExample title="Upload status" preview={<FileListStates />} fileName="states.tsx" width="100%">
+
+```tsx lineNumbers file="../../../src/examples/en/file-list/states.tsx"
+```
+
+</ComponentExample>
+
 ## URL-only files and removal
 
-<ComponentExample title="URL-only files and removal" preview={<FileListActions />} fileName="advanced.tsx">
+Names can come from the URL. Update `items` in `onRemove`; the remove button waits when the callback returns a Promise.
+
+<ComponentExample title="URL-only files and removal" preview={<FileListActions />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/file-list/advanced.tsx"
 ```
 
 </ComponentExample>
 
+## Empty list
+
+An empty state appears when there are no files. Use `emptyContent` to customize it.
+
+<ComponentExample title="Empty list" preview={<FileListEmpty />} fileName="empty.tsx" width="100%">
+
+```tsx lineNumbers file="../../../src/examples/en/file-list/empty.tsx"
+```
+
+</ComponentExample>
+
 ## Usage notes
 
-Names are inferred from URLs; size is optional and no file metadata is fetched automatically. File icons follow MIME types or extensions. Preview is available for images, video and audio; other files show download only. Browser codec support determines media playback. Cross-origin downloads may open in a new tab; use onDownload for your download service.
+Size is optional and no file metadata is fetched automatically. Icons follow MIME types or extensions; failed thumbnails fall back to a type icon. Preview is available for images, video and audio; other files show download only. Browser codec support determines media playback. Cross-origin downloads may open in a new tab; use `onDownload` for your download service. Use [Upload](./upload.mdx) to handle file uploads.
 
 ## Types
 
@@ -39,14 +91,14 @@ import type { FileItem, FileListProps } from '@ifhover/leaf-ui';
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `items` | `readonly `[`FileItem`](#fileitem-api)`[]` | Required | Required. Files to display |
-| `downloadable` | `boolean` | `true` | Show download / media preview actions |
-| `previewable` | `boolean` | `true` | Show download / media preview actions |
-| `removable` | `boolean` | `false` | Show remove actions / disable actions |
-| `onPreview` | `(file: `[`FileItem`](#fileitem-api)`) => void` | — | Override preview or download; preview remains media only |
-| `onDownload` | `(file: `[`FileItem`](#fileitem-api)`) => void` | — | Override preview or download; preview remains media only |
-| `onRemove` | `(file: `[`FileItem`](#fileitem-api)`) => void \| boolean \| Promise<void> \| Promise<boolean>` | — | Request removal; the caller updates items |
+| `downloadable` | `boolean` | `true` | Show download actions for files with a URL |
+| `previewable` | `boolean` | `true` | Show preview actions for images, video and audio with a URL |
+| `removable` | `boolean` | `false` | Show removal actions when `onRemove` is also provided |
+| `onPreview` | `(file: `[`FileItem`](#fileitem-api)`) => void` | — | Override media preview; uses the built-in preview when omitted |
+| `onDownload` | `(file: `[`FileItem`](#fileitem-api)`) => void` | — | Override download; uses the file URL when omitted |
+| `onRemove` | `(file: `[`FileItem`](#fileitem-api)`) => void \| boolean \| Promise<void> \| Promise<boolean>` | — | Request removal; the caller updates `items`. Waits for async callbacks and shows rejections in the affected row. Return `false` to deny removal |
 | `renderActions` | `(file: `[`FileItem`](#fileitem-api)`, actions: ReactNode) => ReactNode` | — | Customize the action area |
-| `emptyContent` | `ReactNode` | — | Empty list content |
+| `emptyContent` | `ReactNode` | No files | Empty list content |
 | `disabled` | `boolean` | `false` | Disable interaction. |
 | `listType` | `'text' \| 'picture' \| 'picture-card'` | `'text'` | File list presentation. |
 
diff --git a/apps/docs/docs/en/components/flex.mdx b/apps/docs/docs/en/components/flex.mdx
new file mode 100644
index 0000000..d5eae6a
--- /dev/null
+++ b/apps/docs/docs/en/components/flex.mdx
@@ -0,0 +1,52 @@
+import { ComponentExample } from '../../../src/components/component-example';
+import { FlexBasic } from '../../../src/examples/en/flex/basic';
+import { FlexAlignment } from '../../../src/examples/en/flex/alignment';
+
+# Flex
+
+Control direction, alignment, spacing and wrapping without adding wrappers around children.
+
+## Basic usage
+
+Use `gap` for spacing and `wrap` to allow items to move onto another line.
+
+<ComponentExample title="Basic usage" preview={<FlexBasic />} fileName="basic.tsx">
+
+```tsx lineNumbers file="../../../src/examples/en/flex/basic.tsx"
+```
+
+</ComponentExample>
+
+## Direction and alignment
+
+`direction` controls flow, `align` controls cross-axis alignment and `justify` controls main-axis alignment. `start` / `end` follow the corresponding flex axis.
+
+<ComponentExample title="Direction and alignment" preview={<FlexAlignment />} fileName="alignment.tsx">
+
+```tsx lineNumbers file="../../../src/examples/en/flex/alignment.tsx"
+```
+
+</ComponentExample>
+
+## Flex API
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `direction` | `'row' \| 'row-reverse' \| 'column' \| 'column-reverse'` | `'row'` | Flow direction. Reversing layout does not change DOM reading or keyboard order. |
+| `gap` | `number \| string \| readonly [number \| string, number \| string]` | `0` | Numbers are px. Supports CSS lengths and themed `sm` / `md` / `lg` spacing. A pair means [row gap, column gap]. |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'stretch'` | Cross-axis alignment. |
+| `justify` | `'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly'` | `'start'` | Main-axis alignment. |
+| `wrap` | `boolean \| 'nowrap' \| 'wrap' \| 'wrap-reverse'` | `false` | Enable wrapping or choose its direction. |
+| `inline` | `boolean` | `false` | Use inline flex layout. |
+
+## Types
+
+```ts
+import type { FlexGap, FlexProps } from '@ifhover/leaf-ui';
+```
+
+`FlexGap` is `number | string`. Native `div` attributes, `className`, `style` and DOM refs are supported. Explicit `style` takes precedence over layout props.
+
+## Usage notes
+
+Use Space for simple equal spacing, Flex for main-axis alignment, reversed flow or inline layout, and Grid for columns. Flex preserves the appearance and size of its children.
diff --git a/apps/docs/docs/en/components/float-button.mdx b/apps/docs/docs/en/components/float-button.mdx
index 5297302..5e8baba 100644
--- a/apps/docs/docs/en/components/float-button.mdx
+++ b/apps/docs/docs/en/components/float-button.mdx
@@ -27,7 +27,7 @@ Keep quick actions within reach.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `variant` | `'solid' \| 'outline' \| 'ghost'` | — | Configure variant. |
+| `variant` | `'solid' \| 'outline' \| 'ghost' \| 'link'` | — | Configure variant. |
 | `size` | `'sm' \| 'md' \| 'lg'` | — | Presentation size. |
 | `danger` | `boolean` | — | Configure danger. |
 | `loading` | `boolean` | — | Show a loading state. |
@@ -52,6 +52,7 @@ Keep quick actions within reach.
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `actions` | `readonly `[`FloatButtonAction`](#floatbuttonaction)`[]` | — | Required. Actions for the item. |
+| `fixed` | `boolean` | `true` | Fix to a viewport corner; false keeps it in layout. |
 | `expandable` | `boolean` | `true` | Provide a button to expand the action group. |
 | `icon` | `ReactNode` | — | Icon content. |
 | `open` | `boolean` | — | Control whether the panel is open. |
diff --git a/apps/docs/docs/en/components/form.mdx b/apps/docs/docs/en/components/form.mdx
index edbb541..2b1f8b6 100644
--- a/apps/docs/docs/en/components/form.mdx
+++ b/apps/docs/docs/en/components/form.mdx
@@ -9,7 +9,7 @@ Organize fields, labels and validation feedback, and collect form data.
 
 ## Submission and validation
 
-<ComponentExample title="Submission and validation" preview={<FormBasic />} fileName="basic.tsx">
+<ComponentExample title="Submission and validation" preview={<FormBasic />} fileName="basic.tsx" width={600}>
 
 ```tsx lineNumbers file="../../../src/examples/en/form/basic.tsx"
 ```
@@ -18,7 +18,7 @@ Organize fields, labels and validation feedback, and collect form data.
 
 ## Label widths
 
-<ComponentExample title="Label widths" preview={<FormLabelWidth />} fileName="label-width.tsx">
+<ComponentExample title="Label widths" preview={<FormLabelWidth />} fileName="label-width.tsx" width={600}>
 
 ```tsx lineNumbers file="../../../src/examples/en/form/label-width.tsx"
 ```
@@ -27,7 +27,7 @@ Organize fields, labels and validation feedback, and collect form data.
 
 ## Extended features
 
-<ComponentExample title="Extended features" preview={<ExtensionDemo />} fileName="extensions.tsx">
+<ComponentExample title="Extended features" preview={<ExtensionDemo />} fileName="extensions.tsx" width={600}>
 
 ```tsx lineNumbers file="../../../src/examples/en/form/extensions.tsx"
 ```
@@ -48,11 +48,11 @@ Organize fields, labels and validation feedback, and collect form data.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `label` | `ReactNode` | — | Label / help text / application error |
+| `label` | `ReactNode` | — | Field label |
 | `htmlFor` | `string` | Generated | The associated control ID; one field wraps one control or group |
 | `required` | `boolean` | `false` | Require a non-empty value; compound controls validate once. |
-| `help` | `ReactNode` | — | Label / help text / application error |
-| `error` | `ReactNode` | — | Label / help text / application error |
+| `help` | `ReactNode` | — | Supporting text below the control, included in the field layout |
+| `error` | `ReactNode` | — | Error message, displayed instead of help |
 | `labelWidth` | `number` | — | Override this field’s label width in pixels |
 
 ## Types
@@ -67,6 +67,8 @@ import type { FormProps, FormFieldProps } from '@ifhover/leaf-ui';
 
 By default, all labels in one Form use the width of its widest label. Widths update when text, fonts or mounted fields change. Vertical layouts and narrow screens stack labels above fields. Standard form attributes such as action, method, onSubmit and onReset are supported.
 
+Help and error messages occupy normal layout space and preserve the form gap before the next field. Wrapped text naturally adds height.
+
 Read named controls with FormData. Use required, type and minLength for basic validation; errors appear beside their fields. Pass application or server errors through error. Set noValidate when handling validation yourself. FormData contains strings, does not build nested objects, and omits unchecked checkboxes. Reset controlled fields in application state.
 
 ## Extension types
diff --git a/apps/docs/docs/en/components/grid.mdx b/apps/docs/docs/en/components/grid.mdx
index 6597f2a..d15c7e1 100644
--- a/apps/docs/docs/en/components/grid.mdx
+++ b/apps/docs/docs/en/components/grid.mdx
@@ -8,7 +8,7 @@ Arrange content for different screen widths.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<GridBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<GridBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/grid/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Arrange content for different screen widths.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<GridColumns />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<GridColumns />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/grid/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/icons.mdx b/apps/docs/docs/en/components/icons.mdx
new file mode 100644
index 0000000..1122a20
--- /dev/null
+++ b/apps/docs/docs/en/components/icons.mdx
@@ -0,0 +1,42 @@
+import { ComponentExample } from '../../../src/components/component-example';
+import { ButtonIcons } from '../../../src/examples/en/button/icons';
+
+# Icons
+
+Leaf UI's internal icons and the examples on this page use **Lucide**, but `lucide-react` is one of many options. Button's `startIcon` / `endIcon` and Input's `prefix` / `suffix` accept `ReactNode`, so you can use React components from other icon libraries.
+
+## Browse icons online
+
+Open the [Lucide icon directory](https://lucide.dev/icons/) to search by name or keyword and preview icons. Source code is available in the [Lucide GitHub repository](https://github.com/lucide-icons/lucide).
+
+You can also choose a library that matches your project's style and existing dependencies:
+
+| Icon library | Online directory | GitHub |
+| --- | --- | --- |
+| React Icons (`react-icons`) | [Browse icons](https://react-icons.github.io/react-icons/) | [react-icons/react-icons](https://github.com/react-icons/react-icons) |
+| Heroicons | [Browse icons](https://heroicons.com/) | [tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons) |
+| Tabler Icons | [Browse icons](https://tabler.io/icons) | [tabler/tabler-icons](https://github.com/tabler/tabler-icons) |
+| Phosphor | [Browse icons](https://phosphoricons.com/) | [phosphor-icons/react](https://github.com/phosphor-icons/react) |
+
+## Install and import
+
+The example below uses `lucide-react`. Add it as an application dependency when importing icons directly. For another library, install its package and replace the icon imports.
+
+```bash
+pnpm add lucide-react
+```
+
+Import only the icons you need. Icons follow the component's icon container size and inherit its current text color.
+
+<ComponentExample title="Icon buttons" preview={<ButtonIcons />} fileName="icons.tsx">
+
+```tsx lineNumbers file="../../../src/examples/en/button/icons.tsx"
+```
+
+</ComponentExample>
+
+## Accessible names
+
+Text supplies the name of a text button; its leading and trailing icons are decorative. Supply `aria-label` for icon-only buttons, such as “Add project” or “Delete project”. Icons should not be the only indication of an action.
+
+Button's danger state applies the danger color to both its icon and text, so you do not need to hardcode a color on the icon.
diff --git a/apps/docs/docs/en/components/image-cropper.mdx b/apps/docs/docs/en/components/image-cropper.mdx
deleted file mode 100644
index 5a0a90e..0000000
--- a/apps/docs/docs/en/components/image-cropper.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { ComponentExample } from '../../../src/components/component-example';
-import { ImageCropperBasic } from '../../../src/examples/en/image-cropper/basic';
-import { ImageCropperAvatar } from '../../../src/examples/en/image-cropper/advanced';
-
-# ImageCropper
-
-Move and resize a selection to crop images.
-
-## Basic usage
-
-<ComponentExample title="Basic usage" preview={<ImageCropperBasic />} fileName="basic.tsx">
-
-```tsx lineNumbers file="../../../src/examples/en/image-cropper/basic.tsx"
-```
-
-</ComponentExample>
-
-## More examples
-
-<ComponentExample title="More examples" preview={<ImageCropperAvatar />} fileName="advanced.tsx">
-
-```tsx lineNumbers file="../../../src/examples/en/image-cropper/advanced.tsx"
-```
-
-</ComponentExample>
-
-## Usage
-
-The image stays fixed. Move the selection or drag its edges to resize it; touch and keyboard are supported. The canvas is square by default. Omit aspect for free resizing; round crops use 1:1. export() returns a Blob. Remote images require CORS permissions; round PNGs keep transparent corners and JPEGs use white.
-
-## Types
-
-Import these types for data, callbacks and refs.
-
-```ts
-import type { CropArea, ImageCropperHandle, ImageCropperProps, ImageCropResult } from '@ifhover/leaf-ui';
-```
-
-## CropArea API
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `x` | `number` | Required | X coordinate |
-| `y` | `number` | Required | Y coordinate |
-| `width` | `number` | Required | Width, numbers are in pixels |
-| `height` | `number` | Required | Height, numbers are in pixels |
-
-## ImageCropperHandle API
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `export` | [`() => Promise<ImageCropResult>`](#imagecropresult-api) | Required | Export as Blob |
-| `reset` | `() => void` | Required | Reset or retry |
-
-## ImageCropperProps API
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `src` | `string` | Required | Image URL |
-| `aspect` | `number` | — | Fixed crop aspect ratio; omitted means free resizing |
-| `shape` | `'rect' \| 'round'` | `'rect'` | Crop shape |
-| `minWidth / minHeight` | `number` | `24` | Minimum selection size in displayed pixels |
-| `disabled` | `boolean` | `false` | Disable moving and resizing |
-| `showActions` | `boolean` | `true` | Show reset and export actions |
-| `showGrid` | `boolean` | `true` | Crop guides |
-| `crossOrigin` | `'anonymous' \| 'use-credentials'` | `'anonymous'` | Image cross-origin mode; export needs server CORS permission |
-| `type` | `'image/png' \| 'image/jpeg' \| 'image/webp'` | `'image/png'` | Export image format |
-| `quality` | `number` | `0.92` | Export quality, 0–1 |
-| `onChange` | [`(area: CropArea) => void`](#croparea-api) | — | Crop area change, measured in original image pixels |
-| `onExport` | [`(result: ImageCropResult) => void`](#imagecropresult-api) | — | Export completed |
-| `onError` | `(error: Error) => void` | — | Error callback |
-| `extra` | `ReactNode` | — | Supplementary content or actions |
-
-## ImageCropResult API
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `blob` | `Blob` | Required | Exported Blob |
-| `width` | `number` | Required | Width, numbers are in pixels |
-| `height` | `number` | Required | Height, numbers are in pixels |
diff --git a/apps/docs/docs/en/components/input-mask.mdx b/apps/docs/docs/en/components/input-mask.mdx
index 9dcc3c5..9d2cec1 100644
--- a/apps/docs/docs/en/components/input-mask.mdx
+++ b/apps/docs/docs/en/components/input-mask.mdx
@@ -8,7 +8,7 @@ Enter information in a specified format.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<InputMaskBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<InputMaskBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input-mask/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Enter information in a specified format.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<InputMaskFormats />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<InputMaskFormats />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input-mask/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/input-number.mdx b/apps/docs/docs/en/components/input-number.mdx
index 6dce09d..3b48342 100644
--- a/apps/docs/docs/en/components/input-number.mdx
+++ b/apps/docs/docs/en/components/input-number.mdx
@@ -8,7 +8,7 @@ Enter numeric values such as quantities or prices.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<InputNumberBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<InputNumberBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input-number/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Enter numeric values such as quantities or prices.
 
 ## Formatting and exact decimals
 
-<ComponentExample title="Formatting and exact decimals" preview={<Capabilities english />} fileName="capabilities.tsx">
+<ComponentExample title="Formatting and exact decimals" preview={<Capabilities english />} fileName="capabilities.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/input-number/capabilities.tsx"
 ```
diff --git a/apps/docs/docs/en/components/input-otp.mdx b/apps/docs/docs/en/components/input-otp.mdx
index 8bb3f74..d9deff3 100644
--- a/apps/docs/docs/en/components/input-otp.mdx
+++ b/apps/docs/docs/en/components/input-otp.mdx
@@ -8,7 +8,7 @@ Enter and paste verification codes.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<InputOTPBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<InputOTPBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input-otp/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Enter and paste verification codes.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<InputOTPOptions />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<InputOTPOptions />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input-otp/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/input.mdx b/apps/docs/docs/en/components/input.mdx
index 4c027ed..e8be36f 100644
--- a/apps/docs/docs/en/components/input.mdx
+++ b/apps/docs/docs/en/components/input.mdx
@@ -12,21 +12,21 @@ Enter a single line of text.
 
 Use controlled value / onChange or uncontrolled defaultValue. Prefix and suffix are decorative content. Standard name, required, type, form and aria-* properties are forwarded to the input; className and style apply to the container.
 
-<ComponentExample title="Basic input" preview={<InputBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic input" preview={<InputBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input/basic.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="Interactive example" preview={<InputStates />} fileName="states.tsx">
+<ComponentExample title="Interactive example" preview={<InputStates />} fileName="states.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input/states.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="Interactive example" preview={<InputControlled />} fileName="controlled.tsx">
+<ComponentExample title="Interactive example" preview={<InputControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input/controlled.tsx"
 ```
@@ -44,7 +44,7 @@ Use controlled value / onChange or uncontrolled defaultValue. Prefix and suffix
 
 Use type="password" to mask input and show a visibility toggle. Customize the icon or hide the toggle when needed.
 
-<ComponentExample title="Password input" preview={<InputPassword />} fileName="password.tsx">
+<ComponentExample title="Password input" preview={<InputPassword />} fileName="password.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input/password.tsx"
 ```
@@ -53,7 +53,7 @@ Use type="password" to mask input and show a visibility toggle. Customize the ic
 
 ## Clear and character count
 
-<ComponentExample title="Clear and character count" preview={<InputClear />} fileName="clear.tsx">
+<ComponentExample title="Clear and character count" preview={<InputClear />} fileName="clear.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/input/clear.tsx"
 ```
diff --git a/apps/docs/docs/en/components/layout.mdx b/apps/docs/docs/en/components/layout.mdx
index 8a787df..e2f358e 100644
--- a/apps/docs/docs/en/components/layout.mdx
+++ b/apps/docs/docs/en/components/layout.mdx
@@ -8,20 +8,20 @@ Organize headers, sidebars, content and footers.
 
 ## Basic usage
 
-Distinct backgrounds show Header, Sider, Content and Footer. The nested horizontal layout places the sidebar next to the content.
+Compose the page with Header, Sider, Content and Footer. The nested horizontal layout places the sidebar next to the content.
 
-<ComponentExample title="Basic usage" preview={<LayoutBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<LayoutBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/layout/basic.tsx"
 ```
 
 </ComponentExample>
 
-## Collapsible workspace
+## Responsive sidebar
 
 Collapse the sidebar manually or automatically on narrow screens; the menu follows with icon navigation.
 
-<ComponentExample title="Collapsible workspace" preview={<LayoutResponsive />} fileName="advanced.tsx">
+<ComponentExample title="Responsive sidebar" preview={<LayoutResponsive />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/layout/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/loading-bar.mdx b/apps/docs/docs/en/components/loading-bar.mdx
index a32f301..5a45196 100644
--- a/apps/docs/docs/en/components/loading-bar.mdx
+++ b/apps/docs/docs/en/components/loading-bar.mdx
@@ -8,7 +8,7 @@ Show page or task loading progress.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<LoadingBarBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<LoadingBarBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/loading-bar/basic.tsx"
 ```
diff --git a/apps/docs/docs/en/components/masonry.mdx b/apps/docs/docs/en/components/masonry.mdx
index 5845a4f..d119983 100644
--- a/apps/docs/docs/en/components/masonry.mdx
+++ b/apps/docs/docs/en/components/masonry.mdx
@@ -8,7 +8,7 @@ Arrange cards and images of varying heights.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<MasonryBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<MasonryBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/masonry/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Arrange cards and images of varying heights.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<MasonryImages />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<MasonryImages />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/masonry/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/menu.mdx b/apps/docs/docs/en/components/menu.mdx
index a31bc07..dcbc0fd 100644
--- a/apps/docs/docs/en/components/menu.mdx
+++ b/apps/docs/docs/en/components/menu.mdx
@@ -29,7 +29,7 @@ Organize hierarchical navigation.
 
 Keep `selectedKey` in sync with the current route. Use `linkRender` to replace the default anchor with a React Router or Next.js Link, retaining its event handlers, classes and ARIA attributes.
 
-<ComponentExample title="Controlled navigation and routing" preview={<MenuRouting english />} fileName="capabilities.tsx">
+<ComponentExample title="Controlled navigation and routing" preview={<MenuRouting english />} fileName="capabilities.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/menu/capabilities.tsx"
 ```
@@ -42,6 +42,8 @@ The vertical menu defaults to 240px (60px when collapsed); use style.width to cu
 
 Submenus animate in both directions, and the sidebar width transitions when collapsed. Closed items are excluded from keyboard navigation. Transitions are disabled when the system requests reduced motion.
 
+Menu items, hover backgrounds and selection highlights share the base radius with buttons. Set `ConfigProvider`'s `theme.borderRadius` to adjust them together, or use `theme.components.Menu.borderRadius` to customize the menu radius.
+
 ## Types
 
 Import these types for data, callbacks and refs.
diff --git a/apps/docs/docs/en/components/message.mdx b/apps/docs/docs/en/components/message.mdx
index 192c8a0..34e94ae 100644
--- a/apps/docs/docs/en/components/message.mdx
+++ b/apps/docs/docs/en/components/message.mdx
@@ -13,7 +13,6 @@ Wrap your application in `ConfigProvider`. It manages messages automatically, so
 
 ```tsx
 import { ConfigProvider } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
 
 export function Root() {
   return <ConfigProvider><App /></ConfigProvider>;
@@ -46,7 +45,7 @@ These two buttons belong to different components. Use the same `key` to update o
 
 When a message closes, those below it move up smoothly. Content of different heights collapses using its actual space.
 
-<ComponentExample title="Multiple messages" preview={<MessageStack />} fileName="stack.tsx">
+<ComponentExample title="Multiple messages" preview={<MessageStack />} fileName="stack.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/message/stack.tsx"
 ```
diff --git a/apps/docs/docs/en/components/modal.mdx b/apps/docs/docs/en/components/modal.mdx
index 29f6385..b1174ef 100644
--- a/apps/docs/docs/en/components/modal.mdx
+++ b/apps/docs/docs/en/components/modal.mdx
@@ -1,4 +1,4 @@
-import { AccessScope } from '../../../src/examples/modal/access-scope';
+import { ModalDescription } from '../../../src/examples/en/modal/description';
 import { Capabilities } from '../../../src/examples/modal/capabilities';
 import { ModalFooter } from '../../../src/examples/en/modal/footer';
 import { ComponentExample } from '../../../src/components/component-example';
@@ -10,7 +10,7 @@ Display content or complete an action in a dialog.
 
 ## Edit content
 
-<ComponentExample title="Edit content" preview={<ModalBasic />} fileName="basic.tsx">
+<ComponentExample title="Edit content" preview={<ModalBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/modal/basic.tsx"
 ```
@@ -20,7 +20,7 @@ Display content or complete an action in a dialog.
 
 ## Custom footer
 
-<ComponentExample title="Custom footer" preview={<ModalFooter />} fileName="footer.tsx">
+<ComponentExample title="Custom footer" preview={<ModalFooter />} fileName="footer.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/modal/footer.tsx"
 ```
@@ -29,20 +29,20 @@ Display content or complete an action in a dialog.
 
 ## Destroying state and initial focus
 
-<ComponentExample title="Destroying state and initial focus" preview={<Capabilities english />} fileName="capabilities.tsx">
+<ComponentExample title="Destroying state and initial focus" preview={<Capabilities english />} fileName="capabilities.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/modal/capabilities.tsx"
 ```
 
 </ComponentExample>
 
-## Access settings
+## Icon and description
 
-Combine a descriptive heading, card choices and grouped permissions.
+Use `icon` and `description` to explain the action.
 
-<ComponentExample title="Access settings" preview={<AccessScope english />} fileName="access-scope.tsx">
+<ComponentExample title="Icon and description" preview={<ModalDescription />} fileName="description.tsx" width="fit-content">
 
-```tsx lineNumbers file="../../../src/examples/modal/access-scope.tsx"
+```tsx lineNumbers file="../../../src/examples/en/modal/description.tsx"
 ```
 
 </ComponentExample>
diff --git a/apps/docs/docs/en/components/notification.mdx b/apps/docs/docs/en/components/notification.mdx
index 1ab1221..aa291ca 100644
--- a/apps/docs/docs/en/components/notification.mdx
+++ b/apps/docs/docs/en/components/notification.mdx
@@ -8,7 +8,7 @@ Present notifications and actions in a page corner.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<NotificationBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<NotificationBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/notification/basic.tsx"
 ```
diff --git a/apps/docs/docs/en/components/pagination.mdx b/apps/docs/docs/en/components/pagination.mdx
index 38f774d..15eaaba 100644
--- a/apps/docs/docs/en/components/pagination.mdx
+++ b/apps/docs/docs/en/components/pagination.mdx
@@ -1,5 +1,8 @@
 import { ComponentExample } from '../../../src/components/component-example';
 import { PaginationBasic } from '../../../src/examples/en/pagination/basic';
+import { PaginationSizes } from '../../../src/examples/en/pagination/sizes';
+import { PaginationControlled } from '../../../src/examples/en/pagination/controlled';
+import { PaginationStates } from '../../../src/examples/en/pagination/states';
 
 # Pagination
 
@@ -7,6 +10,8 @@ Browse large datasets one page at a time.
 
 ## Basic usage
 
+Buttons use outlines by default. Set `variant="ghost"` for borderless buttons.
+
 <ComponentExample title="Basic usage" preview={<PaginationBasic />} fileName="basic.tsx">
 
 ```tsx lineNumbers file="../../../src/examples/en/pagination/basic.tsx"
@@ -14,25 +19,62 @@ Browse large datasets one page at a time.
 
 </ComponentExample>
 
+## Sizes
+
+Compare small, default and large controls.
+
+<ComponentExample title="Sizes" preview={<PaginationSizes />} fileName="sizes.tsx">
+
+```tsx lineNumbers file="../../../src/examples/en/pagination/sizes.tsx"
+```
+
+</ComponentExample>
+
+## Controlled pagination
+
+Control the page and page size together, with a total, size selector and quick jumper.
+
+<ComponentExample title="Controlled pagination" preview={<PaginationControlled />} width={720} fileName="controlled.tsx">
+
+```tsx lineNumbers file="../../../src/examples/en/pagination/controlled.tsx"
+```
+
+</ComponentExample>
+
+## Simple and disabled
+
+Use `simple` for previous/next controls and a page count. `disabled` blocks all interaction.
+
+<ComponentExample title="Simple and disabled" preview={<PaginationStates />} fileName="states.tsx">
+
+```tsx lineNumbers file="../../../src/examples/en/pagination/states.tsx"
+```
+
+</ComponentExample>
+
 ## Pagination API
 
-| Prop | Type | Default | Description |
+| Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `total` | `number` | Required | Total number of items |
-| `current / defaultCurrent` | `number` | `1` | Controlled / initial page |
-| `pageSize / defaultPageSize` | `number` | `10` | Controlled / initial page size |
-| `onChange` | `(page: number, pageSize: number) => void` | — | Page or page size changes |
-| `showSizeChanger` | `boolean` | `false` | Show page size selector |
-| `pageSizeOptions` | `readonly number[]` | — | Available page sizes |
-| `showQuickJumper` | `boolean` | `false` | Allow typing a page and pressing Enter |
-| `showTotal` | `(total: number, range: readonly [number, number]) => ReactNode` | — | Custom total and visible range description |
-| `simple` | `boolean` | `false` | Use compact page display |
-| `disabled / hideOnSinglePage` | `boolean` | `false` | Disable / hide when only one page exists |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Control size |
+| `total` | `number` | Required | Required. Total number of items. |
+| `current` | `number` | — | Controlled page, starting at 1. |
+| `defaultCurrent` | `number` | `1` | Initial page in uncontrolled mode. |
+| `pageSize` | `number` | — | Controlled number of items per page. |
+| `defaultPageSize` | `number` | `10` | Initial page size in uncontrolled mode. |
+| `onChange` | `(page: number, pageSize: number) => void` | — | Called once when the page or size actually changes, with both values. |
+| `showSizeChanger` | `boolean` | `false` | Show the page size selector. |
+| `pageSizeOptions` | `readonly number[]` | `[10, 20, 50, 100]` | Available sizes; includes the current size, removes duplicates and ignores invalid values. |
+| `showQuickJumper` | `boolean` | `false` | Commit on Enter or when leaving the pagination region; other pagination controls take precedence. |
+| `showTotal` | `boolean \| ((total: number, range: readonly [number, number]) => ReactNode)` | `false` | true shows a localized total; pass a function for a custom total and visible item range. |
+| `simple` | `boolean` | `false` | Show only previous/next controls and the current / total page count. |
+| `disabled` | `boolean` | `false` | Disable interaction. |
+| `hideOnSinglePage` | `boolean` | `false` | Hide when there are fewer than two pages. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of page buttons, size selector and jump input. |
+| `variant` | `'outline' \| 'ghost'` | `'outline'` | Button appearance: outlined or borderless. |
 
-## Types
+The component also accepts native `<nav>` attributes such as `aria-label`, `className` and `style`.
 
-Import the component props and item types when preparing your own values.
+## Types
 
 ```ts
 import type { PaginationProps } from '@ifhover/leaf-ui';
@@ -40,4 +82,15 @@ import type { PaginationProps } from '@ifhover/leaf-ui';
 
 ## Usage notes
 
-Pages start at 1. Load data in response to onChange. Page size changes preserve the current item position where possible, and out of range pages are bounded automatically.
+Only `total` is required for basic use; uncontrolled pages and page sizes are managed internally. Use `current` and `pageSize` when loading remote data, and update both in `onChange`. Keep `total` equal to the full result count, rather than the number of items on the current page.
+
+Changing page size preserves the current item position where possible. For example, page 3 at 10 items per page becomes page 2 at 20 items per page. Out-of-range pages are clamped; an empty dataset displays page 1 and disables both arrows. Changes to props do not emit `onChange`.
+
+`showTotal` uses the nearest ConfigProvider language. To describe the visible range, pass a render function:
+
+```tsx
+<Pagination
+  total={240}
+  showTotal={(total, [start, end]) => `${start}–${end} / ${total} items`}
+/>
+```
diff --git a/apps/docs/docs/en/components/popconfirm.mdx b/apps/docs/docs/en/components/popconfirm.mdx
index 2efbd18..d46491c 100644
--- a/apps/docs/docs/en/components/popconfirm.mdx
+++ b/apps/docs/docs/en/components/popconfirm.mdx
@@ -8,7 +8,7 @@ Confirm important actions near their triggers.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<PopconfirmBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<PopconfirmBasic />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/popconfirm/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Confirm important actions near their triggers.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<PopconfirmAsync />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<PopconfirmAsync />} fileName="advanced.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/popconfirm/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/popover.mdx b/apps/docs/docs/en/components/popover.mdx
index 4956a60..392f9db 100644
--- a/apps/docs/docs/en/components/popover.mdx
+++ b/apps/docs/docs/en/components/popover.mdx
@@ -18,7 +18,7 @@ Show details or actions next to an element.
 
 ## Controlled editing
 
-<ComponentExample title="Controlled editing" preview={<PopoverControlled />} fileName="controlled.tsx">
+<ComponentExample title="Controlled editing" preview={<PopoverControlled />} fileName="controlled.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/en/popover/controlled.tsx"
 ```
diff --git a/apps/docs/docs/en/components/qr-code.mdx b/apps/docs/docs/en/components/qr-code.mdx
index ace0e41..290a337 100644
--- a/apps/docs/docs/en/components/qr-code.mdx
+++ b/apps/docs/docs/en/components/qr-code.mdx
@@ -17,7 +17,7 @@ Present text and links as QR codes.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<QRCodeStatus />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<QRCodeStatus />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/qr-code/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/radio.mdx b/apps/docs/docs/en/components/radio.mdx
index 09bdaa2..9abd8ee 100644
--- a/apps/docs/docs/en/components/radio.mdx
+++ b/apps/docs/docs/en/components/radio.mdx
@@ -18,7 +18,7 @@ RadioGroup builds options and supplies a group name. Provide label, aria-label o
 
 </ComponentExample>
 
-<ComponentExample title="Controlled and vertical layout" preview={<RadioControlled />} fileName="controlled.tsx">
+<ComponentExample title="Controlled and vertical layout" preview={<RadioControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/radio/controlled.tsx"
 ```
diff --git a/apps/docs/docs/en/components/rate.mdx b/apps/docs/docs/en/components/rate.mdx
index 2e82542..f2b961c 100644
--- a/apps/docs/docs/en/components/rate.mdx
+++ b/apps/docs/docs/en/components/rate.mdx
@@ -9,7 +9,7 @@ Select or display a rating.
 
 ## Choose a rating
 
-<ComponentExample title="Choose a rating" preview={<RateBasic />} fileName="basic.tsx">
+<ComponentExample title="Choose a rating" preview={<RateBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/rate/basic.tsx"
 ```
@@ -18,7 +18,7 @@ Select or display a rating.
 
 ## Colors by score
 
-<ComponentExample title="Colors by score" preview={<RateColors />} fileName="colors.tsx">
+<ComponentExample title="Colors by score" preview={<RateColors />} fileName="colors.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/rate/colors.tsx"
 ```
@@ -27,7 +27,7 @@ Select or display a rating.
 
 ## Read-only and disabled
 
-<ComponentExample title="Read-only and disabled" preview={<RateStates />} fileName="states.tsx">
+<ComponentExample title="Read-only and disabled" preview={<RateStates />} fileName="states.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/rate/states.tsx"
 ```
diff --git a/apps/docs/docs/en/components/result.mdx b/apps/docs/docs/en/components/result.mdx
index f974488..5f99061 100644
--- a/apps/docs/docs/en/components/result.mdx
+++ b/apps/docs/docs/en/components/result.mdx
@@ -51,7 +51,7 @@ Present operation results, empty content and other states.
 Import these types to define props or prepare data.
 
 ```ts
-import type { ResultProps } from '@ifhover/leaf-ui';
+import type { EmptyProps, ResultProps } from '@ifhover/leaf-ui';
 ```
 
 ## Usage notes
@@ -59,3 +59,14 @@ import type { ResultProps } from '@ifhover/leaf-ui';
 Use `status="empty"` for empty content. Success, warning, error and information have matching icons and colors. Customize `icon`, `title`, `description` and `extra` as needed.
 
 The original `Empty` remains as a compatibility entry. Migrate to `Result`: rename `image` to `icon`, `description` to `title`, and move action buttons to `extra`.
+
+## Empty API
+
+Compatibility component; prefer `Result` for new code. `EmptyProps` also accepts native `div` attributes.
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `image` | `ReactNode` | Empty state icon | Custom icon; `null` hides it. |
+| `description` | `ReactNode` | Localized title | Empty state description; `null` hides it. |
+| `size` | `'sm' \| 'md'` | `'md'` | Content spacing and icon size. |
+| `children` | `ReactNode` | — | Actions below the description. |
diff --git a/apps/docs/docs/en/components/segmented.mdx b/apps/docs/docs/en/components/segmented.mdx
index 3c2b6e9..e348dbc 100644
--- a/apps/docs/docs/en/components/segmented.mdx
+++ b/apps/docs/docs/en/components/segmented.mdx
@@ -8,7 +8,7 @@ Switch between related options.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<SegmentedBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<SegmentedBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/segmented/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Switch between related options.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<SegmentedOptions />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<SegmentedOptions />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/segmented/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/select.mdx b/apps/docs/docs/en/components/select.mdx
index 2c7b4aa..304716d 100644
--- a/apps/docs/docs/en/components/select.mdx
+++ b/apps/docs/docs/en/components/select.mdx
@@ -1,9 +1,10 @@
+import { SingleLine } from '../../../src/examples/en/select/single-line';
 import { Capabilities } from '../../../src/examples/select/capabilities';
 import { ExtensionDemo } from '../../../src/examples/en/select/extensions';
 import { SelectPopup } from '../../../src/examples/en/select/popup';
 import { SelectSearch } from '../../../src/examples/en/select/search';
 import { ComponentExample } from '../../../src/components/component-example';
-import { SelectBasic, SelectControlled, SelectTheme, ControlSizes } from '../../../src/components/en-form-examples';
+import { SelectBasic, SelectControlled, ControlSizes } from '../../../src/components/en-form-examples';
 
 # Select
 
@@ -13,27 +14,20 @@ Choose one or several options from a dropdown list.
 
 Use options with unique nonempty string values. onChange returns the value and option; clearing returns an empty string and undefined. Arrow keys highlight options, Enter selects, Escape closes and Tab moves on.
 
-<ComponentExample title="Basic selection" preview={<SelectBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic selection" preview={<SelectBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/select/basic.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="Controlled value and validation" preview={<SelectControlled />} fileName="controlled.tsx">
+<ComponentExample title="Controlled value and validation" preview={<SelectControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/select/controlled.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="Interactive example" preview={<SelectTheme />} fileName="theme.tsx">
-
-```tsx lineNumbers file="../../../src/examples/en/select/theme.tsx"
-```
-
-</ComponentExample>
-
 <ComponentExample title="Control sizes" preview={<ControlSizes />} fileName="control-sizes.tsx">
 
 ```tsx lineNumbers file="../../../src/examples/en/guide/control-sizes.tsx"
@@ -46,7 +40,7 @@ Use options with unique nonempty string values. onChange returns the value and o
 
 showSearch filters existing options; multiple accepts an array and keeps the menu open while choosing.
 
-<ComponentExample title="Search and multiple selection" preview={<SelectSearch />} fileName="search.tsx">
+<ComponentExample title="Search and multiple selection" preview={<SelectSearch />} fileName="search.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/select/search.tsx"
 ```
@@ -55,7 +49,7 @@ showSearch filters existing options; multiple accepts an array and keeps the men
 
 ## Popup width and content
 
-<ComponentExample title="Popup width and content" preview={<SelectPopup />} fileName="popup.tsx">
+<ComponentExample title="Popup width and content" preview={<SelectPopup />} fileName="popup.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/select/popup.tsx"
 ```
@@ -80,6 +74,17 @@ showSearch filters existing options; multiple accepts an array and keeps the men
 
 </ComponentExample>
 
+## Single-line selections
+
+Set `tagWrap={false}` to keep selected values on one line. Long labels truncate; extra values collapse into `+N`. In very narrow controls, only the count is shown. Open the popup to review or change selections. `maxTagCount` can further limit the visible tags; `maxTagCount="responsive"` also enables automatic single-line collapsing.
+
+<ComponentExample title="Single-line selections" preview={<SingleLine />} fileName="single-line.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/select/single-line.tsx"
+```
+
+</ComponentExample>
+
 ## Select API
 
 | Property | Type | Default | Description |
@@ -109,12 +114,13 @@ showSearch filters existing options; multiple accepts an array and keeps the men
 | `notFoundContent` | `ReactNode` | — | Content when no options match |
 | `optionRender` | `(option: `[`SelectOption`](#selectoption)`) => ReactNode` | — | Custom option content |
 | `maxCount` | `number` | — | Maximum selections; selected items remain removable |
-| `maxTagCount` | `number \| 'responsive'` | — | Number of visible tags; the rest show as a count |
+| `maxTagCount` | `number \| 'responsive'` | — | Maximum visible tags; responsive collapses them to the available width. |
+| `tagWrap` | `boolean` | `true` | Allow selected tags to wrap; false keeps one line and collapses overflow. |
 | `allowCreate` | `boolean` | `false` | Allow creating unmatched search text |
 | `onCreate` | `(option: `[`SelectOption`](#selectoption)`) => void` | — | Created option callback |
 | `virtual` | `boolean` | More than 100 options | Render visible items only |
 | `listHeight` | `number` | `248` | List height |
-| `optionHeight` | `number` | `36` | Estimated option height |
+| `optionHeight` | `number` | `32` | Estimated virtual row height; follows the regional height and density. Actual rows are measured. |
 | `multiple` | `false \| true` | `false` | Use arrays for multiple values; default [] |
 | `value` | `string \| readonly string[]` | Required | Unique option value; empty strings are reserved |
 | `defaultValue` | `string \| readonly string[]` | `''` | Controlled value / initial uncontrolled value |
@@ -137,7 +143,7 @@ showSearch filters existing options; multiple accepts an array and keeps the men
 | `onCreate` | [`(option: SelectOption) => void`](#selectoption) | — | Created option callback |
 | `virtual` | `boolean` | More than 100 options | Render visible items only |
 | `listHeight` | `number` | `248` | List height |
-| `optionHeight` | `number` | `36` | Estimated option height |
+| `optionHeight` | `number` | `32` | Estimated virtual row height; follows the regional height and density. Actual rows are measured. |
 
 ## Types
 
diff --git a/apps/docs/docs/en/components/signature-pad.mdx b/apps/docs/docs/en/components/signature-pad.mdx
deleted file mode 100644
index 66451a3..0000000
--- a/apps/docs/docs/en/components/signature-pad.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ComponentExample } from '../../../src/components/component-example';
-import { SignaturePadBasic } from '../../../src/examples/en/signature-pad/basic';
-import { SignaturePadControlled } from '../../../src/examples/en/signature-pad/advanced';
-
-# SignaturePad
-
-Capture handwritten signatures and export images.
-
-## Basic usage
-
-<ComponentExample title="Basic usage" preview={<SignaturePadBasic />} fileName="basic.tsx">
-
-```tsx lineNumbers file="../../../src/examples/en/signature-pad/basic.tsx"
-```
-
-</ComponentExample>
-
-## More examples
-
-<ComponentExample title="More examples" preview={<SignaturePadControlled />} fileName="advanced.tsx">
-
-```tsx lineNumbers file="../../../src/examples/en/signature-pad/advanced.tsx"
-```
-
-</ComponentExample>
-
-## Usage
-
-Persist editable strokes with value / onChange. ref.export() returns PNG, JPEG or SVG Blobs. Uses the device pixel ratio and preserves strokes across resize. Provide an alternative for users who cannot draw.
-
-## Types
-
-Import these types for data, callbacks and refs.
-
-```ts
-import type { SignaturePadHandle, SignaturePadProps, SignaturePoint, SignatureStroke } from '@ifhover/leaf-ui';
-```
-
-## SignaturePadHandle API
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `clear` | `() => void` | Required | Clear strokes |
-| `undo` | `() => void` | Required | Undo last stroke |
-| `isEmpty` | `() => boolean` | Required | Whether the pad is empty |
-| `getData` | [`() => SignatureStroke[]`](#signaturestroke-api) | Required | Get editable strokes |
-| `export` | `(type?: 'image/png' \| 'image/jpeg' \| 'image/svg+xml') => Promise<Blob>` | Required | Export as Blob |
-
-## SignaturePadProps API
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `value` | [`readonly SignatureStroke[]`](#signaturestroke-api) | — | Controlled value |
-| `defaultValue` | [`readonly SignatureStroke[]`](#signaturestroke-api) | `[]` | Initial strokes in uncontrolled mode |
-| `onChange` | [`(strokes: SignatureStroke[]) => void`](#signaturestroke-api) | — | Value change callback |
-| `onError` | `(error: Error) => void` | — | Error callback |
-| `penColor` | `string` | `'#203329'` | Stroke color |
-| `backgroundColor` | `string` | `'#ffffff'` | Background color |
-| `minWidth` | `number` | `0.5` | Minimum stroke width |
-| `maxWidth` | `number` | `2.5` | Maximum stroke width |
-| `height` | `number` | `220` | Height, numbers are in pixels |
-| `disabled` | `boolean` | `false` | Disable interactions |
-| `controls` | `boolean` | `true` | Show controls |
-
-## SignaturePoint API
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `x` | `number` | Required | X coordinate |
-| `y` | `number` | Required | Y coordinate |
-| `pressure` | `number` | Required | Pressure, 0–1 |
-| `time` | `number` | Required | Point timestamp |
-
-## SignatureStroke API
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `points` | [`SignaturePoint[]`](#signaturepoint-api) | Required | Stroke points |
-| `penColor` | `string` | Required | Stroke color |
-| `minWidth` | `number` | Required | Minimum stroke width |
-| `maxWidth` | `number` | Required | Maximum stroke width |
-| `dotSize` | `number` | Required | Dot size |
-| `velocityFilterWeight` | `number` | Required | Velocity smoothing |
-| `compositeOperation` | `GlobalCompositeOperation` | Required | Canvas compositing mode |
diff --git a/apps/docs/docs/en/components/splitter.mdx b/apps/docs/docs/en/components/splitter.mdx
index d4cc6b1..c406153 100644
--- a/apps/docs/docs/en/components/splitter.mdx
+++ b/apps/docs/docs/en/components/splitter.mdx
@@ -7,7 +7,7 @@ Resize panels in a workspace.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<SplitterBasic english />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<SplitterBasic english />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/splitter/basic.tsx"
 ```
@@ -16,7 +16,7 @@ Resize panels in a workspace.
 
 ## Vertical panels
 
-<ComponentExample title="Vertical panels" preview={<SplitterVertical english />} fileName="basic.tsx">
+<ComponentExample title="Vertical panels" preview={<SplitterVertical english />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/splitter/basic.tsx"
 ```
diff --git a/apps/docs/docs/en/components/steps.mdx b/apps/docs/docs/en/components/steps.mdx
index 5a31fa3..47cdf21 100644
--- a/apps/docs/docs/en/components/steps.mdx
+++ b/apps/docs/docs/en/components/steps.mdx
@@ -8,7 +8,7 @@ Show the progress and current step of a task.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<StepsBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<StepsBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/steps/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Show the progress and current step of a task.
 
 ## Dots and step progress
 
-<ComponentExample title="Dots and step progress" preview={<Capabilities english />} fileName="capabilities.tsx">
+<ComponentExample title="Dots and step progress" preview={<Capabilities english />} fileName="capabilities.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/steps/capabilities.tsx"
 ```
diff --git a/apps/docs/docs/en/components/switch.mdx b/apps/docs/docs/en/components/switch.mdx
index a45f0de..7228754 100644
--- a/apps/docs/docs/en/components/switch.mdx
+++ b/apps/docs/docs/en/components/switch.mdx
@@ -16,7 +16,7 @@ Read event.target.checked in onChange. Loading preserves children and prevents i
 
 </ComponentExample>
 
-<ComponentExample title="Interactive example" preview={<SwitchControlled />} fileName="controlled.tsx">
+<ComponentExample title="Interactive example" preview={<SwitchControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/switch/controlled.tsx"
 ```
diff --git a/apps/docs/docs/en/components/table.mdx b/apps/docs/docs/en/components/table.mdx
index cf5d4ca..eafd8a3 100644
--- a/apps/docs/docs/en/components/table.mdx
+++ b/apps/docs/docs/en/components/table.mdx
@@ -32,7 +32,7 @@ Component subpaths load their styles automatically. Import the base stylesheet o
 
 ## Basic usage
 
-<ComponentExample title="Team members" preview={<TableBasic english />} fileName="basic.tsx">
+<ComponentExample title="Team members" preview={<TableBasic english />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/basic.tsx"
 ```
@@ -43,7 +43,7 @@ Component subpaths load their styles automatically. Import the base stylesheet o
 
 ## Quick data table
 
-<ComponentExample title="Provide data and columns" preview={<TableSimple english />} fileName="basic.tsx">
+<ComponentExample title="Provide data and columns" preview={<TableSimple english />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/basic.tsx"
 ```
@@ -56,7 +56,7 @@ These modes are mutually exclusive: when supplying `table`, do not also pass `da
 
 ## Sorting, filtering, selection and pagination
 
-<ComponentExample title="Manage team members" preview={<TableData english />} fileName="data.tsx">
+<ComponentExample title="Manage team members" preview={<TableData english />} fileName="data.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/data.tsx"
 ```
@@ -81,7 +81,7 @@ DataTable.Search updates the global filter unless columnId is specified. ColumnV
 
 ## Sticky headers, pinned columns and resizing
 
-<ComponentExample title="Compact table and column sizing" preview={<TableColumns english />} fileName="data.tsx">
+<ComponentExample title="Compact table and column sizing" preview={<TableColumns english />} fileName="data.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/data.tsx"
 ```
@@ -96,7 +96,7 @@ Drag a resize handle or focus it and press Left/Right. Shift increases the step;
 
 ## Grouping and aggregation
 
-<ComponentExample title="Totals by team" preview={<TableGrouped english />} fileName="advanced.tsx">
+<ComponentExample title="Totals by team" preview={<TableGrouped english />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/advanced.tsx"
 ```
@@ -105,7 +105,7 @@ Drag a resize handle or focus it and press Left/Right. Shift increases the step;
 
 ## Editable cells
 
-<ComponentExample title="Edit member names" preview={<TableEditable english />} fileName="advanced.tsx">
+<ComponentExample title="Edit member names" preview={<TableEditable english />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/advanced.tsx"
 ```
@@ -116,7 +116,7 @@ Render Input, Select or other controls through `cell`. Keep data, submission and
 
 ## Row and column reordering
 
-<ComponentExample title="Arrange team priorities" preview={<TableReordering english />} fileName="reordering.tsx">
+<ComponentExample title="Arrange team priorities" preview={<TableReordering english />} fileName="reordering.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/reordering.tsx"
 ```
@@ -129,7 +129,7 @@ Row handles are only shown for flat, nonvirtual tables without active sorting, f
 
 ## Large data
 
-<ComponentExample title="10000 members" preview={<TableVirtual english />} fileName="advanced.tsx">
+<ComponentExample title="10000 members" preview={<TableVirtual english />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/advanced.tsx"
 ```
@@ -142,7 +142,7 @@ This is not a spreadsheet DataGrid: it does not add arrow-key cell navigation, c
 
 ## Server data
 
-<ComponentExample title="Remote pagination and retry" preview={<TableServer english />} fileName="advanced.tsx">
+<ComponentExample title="Remote pagination and retry" preview={<TableServer english />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/advanced.tsx"
 ```
@@ -155,7 +155,7 @@ Refreshing keeps existing rows, adds a loading overlay and prevents duplicate in
 
 ## Empty, loading and error
 
-<ComponentExample title="Data states" preview={<TableStates english />} fileName="basic.tsx">
+<ComponentExample title="Data states" preview={<TableStates english />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/table/basic.tsx"
 ```
@@ -227,7 +227,6 @@ This table describes the instance mode. For the data and columns mode, see [Data
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `table` | `TanStackTable<TData>` | — | Required. Instance created by useReactTable; the sole data and state owner. |
 | `children` | `ReactNode` | — | Replace the default Content/Pagination layout. |
 | `caption` | `ReactNode` | — | Table caption. |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Presentation size. |
@@ -242,16 +241,17 @@ This table describes the instance mode. For the data and columns mode, see [Data
 | `onRetry` | `() => void` | — | Retry action. |
 | `selection` | `false \| 'single' \| 'multiple'` | `false` | None, single or multiple row selection. |
 | `selectAllMode` | `'page' \| 'all'` | `'page'` | Select the page or all loaded selectable rows. |
-| `getRowLabel` | `(row: Row<TData>) => string` | — | Accessible row-action name; defaults to row.id. |
-| `renderExpandedRow` | `(row: Row<TData>) => ReactNode` | — | Leaf-row details; configure getRowCanExpand. |
-| `getRowProps` | `(row: Row<TData>) => `[`TableRowProps`](#tablerow-api) | — | Custom row attributes/events. |
-| `getCellProps` | `(cell: Cell<TData, unknown>) => `[`TableCellProps`](#tablecell-api) | — | Cell attributes, styles or spans; a zero colSpan / rowSpan omits the cell. |
 | `resizable` | `boolean` | `false` | Show resize handles for eligible columns. |
 | `columnReordering` | `boolean` | `false` | Show drag handles for single-level headers. |
-| `onRowReorder` | `(info: `[`DataTableRowReorderInfo`](#datatablerowreorderinfo)`<TData>) => void` | — | Show row handles and return reordered current-page rows; the application updates the data. |
 | `virtual` | `boolean \| `[`DataTableVirtualOptions`](#datatablevirtualoptions) | `false` | Explicit row virtualization. |
 | `pagination` | `boolean` | `true` | Pagination in the default layout. |
 | `tableRef` | `Ref<HTMLTableElement>` | — | Native table DOM ref. |
+| `table` | `TanStackTable<TData>` | — | Required. Instance created by useReactTable; the sole data and state owner. |
+| `getRowLabel` | `(row: Row<TData>) => string` | — | Accessible row-action name; defaults to row.id. |
+| `renderExpandedRow` | `(row: Row<TData>) => ReactNode` | — | Leaf-row details; configure getRowCanExpand. |
+| `getRowProps` | `(row: Row<TData>) => `[`TableRowProps`](#tablerow-api) | — | Custom row attributes/events. |
+| `getCellProps` | `(cell: Cell<TData, unknown>) => `[`TableCellProps`](#tablecell-api) | — | Cell attributes, styles or spans; a zero colSpan / rowSpan omits the cell. |
+| `onRowReorder` | `(info: `[`DataTableRowReorderInfo`](#datatablerowreorderinfo)`<TData>) => void` | — | Show row handles and return reordered current-page rows; the application updates the data. |
 
 Size, borders, stripes, sticky headers, scrolling and loading match Table. aria-label/aria-labelledby name the native table; other div attributes apply to the wrapper.
 
@@ -284,12 +284,13 @@ Other Input attributes are supported; value and onChange belong to the instance.
 | --- | --- | --- | --- |
 | `showSizeChanger` | `boolean` | `true` | Show the page-size selector. |
 | `pageSizeOptions` | `readonly number[]` | — | Available page sizes. |
-| `showQuickJumper` | `boolean` | — | Show a page-number input. |
-| `showTotal` | `(total: number, range: readonly [number, number]) => ReactNode` | — | Customize the total and current range. |
+| `showQuickJumper` | `boolean` | `false` | Commit a quick jump on Enter or when leaving the pagination region. |
+| `showTotal` | `boolean \| ((total: number, range: readonly [number, number]) => ReactNode)` | `false` | true shows a localized total; pass a function to customize the total and visible range. |
 | `simple` | `boolean` | — | Use compact pagination. |
 | `disabled` | `boolean` | — | Disable interaction. |
 | `hideOnSinglePage` | `boolean` | — | Hide when only one page exists. |
 | `size` | `'sm' \| 'md' \| 'lg'` | — | Inherit DataTable size by default. |
+| `variant` | `'outline' \| 'ghost'` | `'outline'` | Pagination button appearance: outlined or borderless. |
 | `hasNextPage` | `boolean` | — | Control next-page availability when the total is unknown. |
 
 
@@ -297,6 +298,11 @@ Supports Pagination display options. Total, current, pageSize and onChange belon
 
 ## DataTableContent API
 
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string` | — | Custom class for the content region. |
+| `style` | `CSSProperties` | — | Inline styles for the content region. |
+
 `DataTable.Content` accepts native `div` attributes, including `className`, `style` and events. Configure table layout, selection, expansion and loading on [DataTable](#datatable-api); use `tableRef` for the table DOM ref. The exported type is `DataTableContentProps`.
 
 ## DataTableColumnMeta
@@ -347,3 +353,29 @@ Additional convenience-mode properties are listed below. Presentation, selection
 | `toIndex` | `number` | — | Required. Destination zero-based current-page index. |
 | `activeRow` | `Row<TData>` | — | Required. The moved row, including its stable row.id. |
 | `overRow` | `Row<TData>` | — | Required. The target row, including its stable row.id. |
+
+## DataTablePresentation API
+
+ConfigProvider's `components.DataTable` uses these row-independent props. Import `DataTablePresentationProps` from `@ifhover/leaf-ui` to type reusable defaults. Configuring defaults alone does not require TanStack Table; using DataTable still requires it.
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | — | Content, or child nodes for hierarchical records. |
+| `caption` | `ReactNode` | — | Configure caption. |
+| `size` | `'sm' \| 'md' \| 'lg'` | — | Presentation size. |
+| `bordered` | `boolean` | — | Configure bordered. |
+| `striped` | `boolean` | — | Configure striped. |
+| `stickyHeader` | `boolean` | — | Configure sticky header. |
+| `maxHeight` | [`TableProps`](#table-api)`['maxHeight']` | — | Configure max height. |
+| `minWidth` | [`TableProps`](#table-api)`['minWidth']` | — | Configure min width. |
+| `loading` | `boolean` | — | Show a loading state. |
+| `emptyContent` | `ReactNode` | — | Content for an empty collection. |
+| `error` | `ReactNode` | — | Configure error. |
+| `onRetry` | `() => void` | — | Configure on retry. |
+| `selection` | `false \| 'single' \| 'multiple'` | — | Configure selection. |
+| `selectAllMode` | `'page' \| 'all'` | — | Configure select all mode. |
+| `resizable` | `boolean` | — | Allow resizing by dragging or arrow keys. |
+| `columnReordering` | `boolean` | — | Configure column reordering. |
+| `virtual` | `boolean \| `[`DataTableVirtualOptions`](#datatablevirtualoptions) | — | Enable virtual scrolling; enabled by default for large option sets. |
+| `pagination` | `boolean` | — | Configure pagination. |
+| `tableRef` | `Ref<HTMLTableElement>` | — | Configure table ref. |
diff --git a/apps/docs/docs/en/components/tabs.mdx b/apps/docs/docs/en/components/tabs.mdx
index 8aa376f..c972411 100644
--- a/apps/docs/docs/en/components/tabs.mdx
+++ b/apps/docs/docs/en/components/tabs.mdx
@@ -3,11 +3,16 @@ import { ExtensionDemo } from '../../../src/examples/en/tabs/extensions';
 import { TabsClosable } from '../../../src/examples/en/tabs/closable';
 import { ComponentExample } from '../../../src/components/component-example';
 import { TabsBasic } from '../../../src/examples/en/tabs/basic';
+import { TabsSizes } from '../../../src/examples/en/tabs/sizes';
 
 # Tabs
 
 Switch between content views within the same region.
 
+Content and panel height update immediately without transition animations. The tab bar's selection indicator keeps its movement animation.
+
+The card-style tab bar fits its labels by default and scrolls within the bar when space is limited. `size` controls the entire tab bar; content panels use the available width.
+
 ## Basic usage
 
 <ComponentExample title="Basic usage" preview={<TabsBasic />} fileName="basic.tsx">
@@ -17,8 +22,21 @@ Switch between content views within the same region.
 
 </ComponentExample>
 
+## Sizes
+
+Compare small, default and large sizes for both line and card tabs.
+
+<ComponentExample title="Sizes" preview={<TabsSizes />} fileName="sizes.tsx">
+
+```tsx lineNumbers file="../../../src/examples/en/tabs/sizes.tsx"
+```
+
+</ComponentExample>
+
 ## Closable tabs
 
+Use the plus button to add a tab. Closing every tab hides the component; the example's add button can reopen it.
+
 <ComponentExample title="Closable tabs" preview={<TabsClosable />} fileName="closable.tsx">
 
 ```tsx lineNumbers file="../../../src/examples/en/tabs/closable.tsx"
@@ -48,13 +66,13 @@ Switch between content views within the same region.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `items` | `readonly `[`TabItem`](#tabitem)`[]` | Required | Required. Tab items |
+| `items` | `readonly `[`TabItem`](#tabitem)`[]` | Required | Tab items; an empty array hides the component |
 | `activeKey` | `string` | First enabled item | Controlled / initial active key |
 | `defaultActiveKey` | `string` | First enabled item | Controlled / initial active key |
 | `onChange` | `(key: string) => void` | — | Active key change |
 | `type` | `'line' \| 'card'` | `'line'` | Tab appearance |
 | `placement` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | Tab bar placement |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tab size |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tab size; the card style includes the tab bar padding and border |
 | `activationMode` | `'automatic' \| 'manual'` | `'automatic'` | Activate on arrow navigation / Enter or Space |
 | `destroyInactive` | `boolean` | `false` | Unmount content when inactive |
 | `extra` | `ReactNode` | — | Extra tab bar content |
diff --git a/apps/docs/docs/en/components/tag.mdx b/apps/docs/docs/en/components/tag.mdx
index 3fdf884..a5d1687 100644
--- a/apps/docs/docs/en/components/tag.mdx
+++ b/apps/docs/docs/en/components/tag.mdx
@@ -1,4 +1,3 @@
-import { ExtensionDemo } from '../../../src/examples/en/tag/extensions';
 import { ComponentExample } from '../../../src/components/component-example';
 import { TagBasic } from '../../../src/examples/en/tag/basic';
 
@@ -15,22 +14,13 @@ Label content categories or statuses.
 
 </ComponentExample>
 
-## Extended features
-
-<ComponentExample title="Extended features" preview={<ExtensionDemo />} fileName="extensions.tsx">
-
-```tsx lineNumbers file="../../../src/examples/en/tag/extensions.tsx"
-```
-
-</ComponentExample>
-
 ## Tag API
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `children` | `ReactNode` | — | Tag content |
 | `color` | `'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| string` | `'default'` | Semantic or custom color |
-| `variant` | `'soft' \| 'outline' \| 'solid'` | `'soft'` | Visual style |
+| `variant` | `'soft' \| 'solid'` | `'soft'` | Tinted or solid appearance, both borderless with small rounded corners |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tag size |
 | `icon` | `ReactNode` | — | Leading icon |
 | `closable` | `boolean` | `false` | Show a close button |
@@ -41,18 +31,14 @@ Label content categories or statuses.
 Import the component props and item types when preparing your own values.
 
 ```ts
-import type { TagProps } from '@ifhover/leaf-ui';
+import type { TagProps, CheckableTagProps, TagGroupProps, TagOption } from '@ifhover/leaf-ui';
 ```
 
 ## Usage notes
 
-Call event.preventDefault() to prevent removal. In a dynamic list, onClose can update application state to remove the matching item.
-
-## Extension types
+Tags use borderless fills and small rounded corners, with tinted and solid appearances. The radius follows the regional theme; set `ConfigProvider`'s `theme.components.Tag.borderRadius` for a component override.
 
-```ts
-import type { CheckableTagProps, TagGroupProps, TagOption } from '@ifhover/leaf-ui';
-```
+Call event.preventDefault() to prevent removal. In a dynamic list, onClose can update application state to remove the matching item.
 
 ## CheckableTagProps API
 
diff --git a/apps/docs/docs/en/components/textarea.mdx b/apps/docs/docs/en/components/textarea.mdx
index 4b2011f..f13ccf1 100644
--- a/apps/docs/docs/en/components/textarea.mdx
+++ b/apps/docs/docs/en/components/textarea.mdx
@@ -10,14 +10,14 @@ Enter multiple lines of text.
 
 Use rows for initial height and resize for manual resizing. Standard maxLength, name, required and form attributes are supported. Controlled values update through onChange. className and style apply to the container.
 
-<ComponentExample title="Interactive example" preview={<TextareaBasic />} fileName="basic.tsx">
+<ComponentExample title="Interactive example" preview={<TextareaBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/textarea/basic.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="Interactive example" preview={<TextareaControlled />} fileName="controlled.tsx">
+<ComponentExample title="Interactive example" preview={<TextareaControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/textarea/controlled.tsx"
 ```
diff --git a/apps/docs/docs/en/components/time-picker.mdx b/apps/docs/docs/en/components/time-picker.mdx
index 5cd85ae..eb7d8d6 100644
--- a/apps/docs/docs/en/components/time-picker.mdx
+++ b/apps/docs/docs/en/components/time-picker.mdx
@@ -11,21 +11,21 @@ Choose a time.
 
 Values use 24-hour HH:mm, or HH:mm:ss with showSeconds. use12Hours changes the display to a 12-hour clock with AM/PM, while values remain 24-hour. Midnight is 12 AM and noon is 12 PM. The initial draft is 09:00. Close without confirming to discard edits. Minute and second steps preserve an existing value outside the step.
 
-<ComponentExample title="Basic selection" preview={<TimePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic selection" preview={<TimePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/time-picker/basic.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="Controlled value and minute steps" preview={<TimePickerControlled />} fileName="controlled.tsx">
+<ComponentExample title="Controlled value and minute steps" preview={<TimePickerControlled />} fileName="controlled.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/time-picker/controlled.tsx"
 ```
 
 </ComponentExample>
 
-<ComponentExample title="12-hour clock and seconds" preview={<TimePickerTwelveHours />} fileName="twelve-hours.tsx">
+<ComponentExample title="12-hour clock and seconds" preview={<TimePickerTwelveHours />} fileName="twelve-hours.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/time-picker/twelve-hours.tsx"
 ```
diff --git a/apps/docs/docs/en/components/time-range-picker.mdx b/apps/docs/docs/en/components/time-range-picker.mdx
index 147834b..07ef418 100644
--- a/apps/docs/docs/en/components/time-range-picker.mdx
+++ b/apps/docs/docs/en/components/time-range-picker.mdx
@@ -9,7 +9,7 @@ Choose a start and end time.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<TimeRangePickerBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<TimeRangePickerBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/time-range-picker/basic.tsx"
 ```
@@ -18,7 +18,7 @@ Choose a start and end time.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<TimeRangePickerOptions />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<TimeRangePickerOptions />} fileName="advanced.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/time-range-picker/advanced.tsx"
 ```
@@ -41,7 +41,7 @@ The exported `TimeRange` type is `readonly [string, string]`, using 24-hour time
 
 ## Restrict available times
 
-<ComponentExample title="Restrict available times" preview={<Capabilities english />} fileName="capabilities.tsx">
+<ComponentExample title="Restrict available times" preview={<Capabilities english />} fileName="capabilities.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/time-range-picker/capabilities.tsx"
 ```
diff --git a/apps/docs/docs/en/components/timeline.mdx b/apps/docs/docs/en/components/timeline.mdx
index fcc7ddb..f6a0a4d 100644
--- a/apps/docs/docs/en/components/timeline.mdx
+++ b/apps/docs/docs/en/components/timeline.mdx
@@ -8,7 +8,7 @@ Present events and progress in sequence.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<TimelineBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<TimelineBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/timeline/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Present events and progress in sequence.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<TimelineAlternate />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<TimelineAlternate />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/timeline/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/tour.mdx b/apps/docs/docs/en/components/tour.mdx
index c3a2bf2..0f6a9b8 100644
--- a/apps/docs/docs/en/components/tour.mdx
+++ b/apps/docs/docs/en/components/tour.mdx
@@ -16,7 +16,7 @@ Introduce features in a sequence of steps.
 
 ## Welcome step
 
-<ComponentExample title="Welcome step" preview={<TourCentered english />} fileName="basic.tsx">
+<ComponentExample title="Welcome step" preview={<TourCentered english />} fileName="basic.tsx" width="fit-content">
 
 ```tsx lineNumbers file="../../../src/examples/tour/basic.tsx"
 ```
@@ -31,7 +31,7 @@ Introduce features in a sequence of steps.
 | `title` | `ReactNode` | — | Required. Title content. |
 | `description` | `ReactNode` | — | Additional description. |
 | `target` | `string \| (() => HTMLElement \| null)` | — | Target selector or element getter; omit to center the step. |
-| `placement` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['popupPlacement']` | — | Layout or display placement. |
+| `placement` | [`PopupOptions`](../api/popup-options#popupoptions)`['popupPlacement']` | — | Layout or display placement. |
 
 ## Tour API
 
@@ -47,7 +47,7 @@ Introduce features in a sequence of steps.
 | `missingTarget` | `'center' \| 'skip' \| 'close'` | `'center'` | Center, skip or close when a target is missing. |
 | `mask` | `boolean` | `true` | Show a tour mask. |
 | `padding` | `number` | `8` | Padding for content or a highlighted target. |
-| `getPopupContainer` | [`PopupOptions`](../guide/control-contracts#popupoptions)`['getPopupContainer']` | — | Return a popup container, including a ShadowRoot. |
+| `getPopupContainer` | [`PopupOptions`](../api/popup-options#popupoptions)`['getPopupContainer']` | — | Return a popup container, including a ShadowRoot. |
 
 ## Types and interaction
 
diff --git a/apps/docs/docs/en/components/transfer.mdx b/apps/docs/docs/en/components/transfer.mdx
index dcf6d07..aa446fe 100644
--- a/apps/docs/docs/en/components/transfer.mdx
+++ b/apps/docs/docs/en/components/transfer.mdx
@@ -8,7 +8,7 @@ Select and move items between two lists.
 
 ## Basic usage
 
-<ComponentExample title="Basic usage" preview={<TransferBasic />} fileName="basic.tsx">
+<ComponentExample title="Basic usage" preview={<TransferBasic />} fileName="basic.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/transfer/basic.tsx"
 ```
@@ -17,7 +17,7 @@ Select and move items between two lists.
 
 ## More examples
 
-<ComponentExample title="More examples" preview={<TransferVirtual />} fileName="advanced.tsx">
+<ComponentExample title="More examples" preview={<TransferVirtual />} fileName="advanced.tsx" width="100%">
 
 ```tsx lineNumbers file="../../../src/examples/en/transfer/advanced.tsx"
 ```
diff --git a/apps/docs/docs/en/components/tree-select.mdx b/apps/docs/docs/en/components/tree-select.mdx
index e5967ca..bbcd6bd 100644
--- a/apps/docs/docs/en/components/tree-select.mdx
+++ b/apps/docs/docs/en/components/tree-select.mdx
@@ -1,3 +1,4 @@
+import { SingleLine } from '../../../src/examples/en/tree-select/single-line';
 import { Capabilities } from '../../../src/examples/tree-select/capabilities';
 import { ExtensionDemo } from '../../../src/examples/en/tree-select/extensions';
 import { ComponentExample } from '../../../src/components/component-example';
@@ -11,7 +12,7 @@ Choose one or more values from hierarchical data.
 
 ## Selection and search
 
-<ComponentExample title="Selection and search" preview={<TreeSelectBasic />} fileName="basic.tsx">
+<ComponentExample title="Selection and search" preview={<TreeSelectBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/tree-select/basic.tsx"
 ```
@@ -20,7 +21,7 @@ Choose one or more values from hierarchical data.
 
 ## Multiple selection and checks
 
-<ComponentExample title="Multiple selection and checks" preview={<TreeSelectMultiple />} fileName="multiple.tsx">
+<ComponentExample title="Multiple selection and checks" preview={<TreeSelectMultiple />} fileName="multiple.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/tree-select/multiple.tsx"
 ```
@@ -29,7 +30,7 @@ Choose one or more values from hierarchical data.
 
 ## States and panel width
 
-<ComponentExample title="States and panel width" preview={<TreeSelectStates />} fileName="states.tsx">
+<ComponentExample title="States and panel width" preview={<TreeSelectStates />} fileName="states.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/tree-select/states.tsx"
 ```
@@ -54,6 +55,19 @@ Choose one or more values from hierarchical data.
 
 </ComponentExample>
 
+## Single-line selections
+
+Set `tagWrap={false}` to keep selected values on one line. Long labels truncate; extra values collapse into `+N`. In very narrow controls, only the count is shown. Open the popup to review or change selections. `maxTagCount` can further limit the visible tags; `maxTagCount="responsive"` also enables automatic single-line collapsing.
+
+Reopening preserves the expanded branches. Click a category that cannot be selected to expand it; in checkbox mode, click anywhere on a row or press Enter / Space to check it. The arrow only expands or collapses the branch. Search temporarily reveals matching branches without changing the saved expansion.
+
+<ComponentExample title="Single-line selections" preview={<SingleLine />} fileName="single-line.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/tree-select/single-line.tsx"
+```
+
+</ComponentExample>
+
 ## TreeSelect API
 
 | Property | Type | Default | Description |
@@ -81,11 +95,12 @@ Choose one or more values from hierarchical data.
 | `onLoadError` | `(error: unknown, option: `[`TreeSelectOption`](#treeselectoption)`) => void` | — | Loading failed; expand again to retry |
 | `virtual` | `boolean` | `false` | Render visible items only |
 | `listHeight` | `number` | `256` | List height |
-| `itemHeight` | `number` | `34` | Estimated virtual row height |
+| `itemHeight` | `number` | `38` | Estimated virtual row height including spacing; follows the regional height and density. Actual rows are measured. |
 | `inputReadOnly` | `boolean` | — | Disable typing while retaining panel selection. |
 | `open` | `boolean` | — | Control whether the panel is open. |
 | `defaultOpen` | `boolean` | — | Initial open state. |
-| `maxTagCount` | `number` | — | Maximum visible tags; responsive collapses tags to available width. |
+| `maxTagCount` | `number \| 'responsive'` | — | Maximum visible tags; responsive collapses them to the available width. |
+| `tagWrap` | `boolean` | `true` | Allow selected tags to wrap; false keeps one line and collapses overflow. |
 | `maxCount` | `number` | — | Maximum selection count. |
 | `treeExpandedKeys` | `readonly string[]` | — | Controlled expanded nodes. |
 | `onExpand` | `(keys: string[]) => void` | — | Called when expanded nodes change. |
diff --git a/apps/docs/docs/en/components/tree.mdx b/apps/docs/docs/en/components/tree.mdx
index e7f1cca..7fa0087 100644
--- a/apps/docs/docs/en/components/tree.mdx
+++ b/apps/docs/docs/en/components/tree.mdx
@@ -12,7 +12,7 @@ Browse, select and check hierarchical content.
 
 ## Browse and select
 
-<ComponentExample title="Browse and select" preview={<TreeBasic />} fileName="basic.tsx">
+<ComponentExample title="Browse and select" preview={<TreeBasic />} fileName="basic.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/tree/basic.tsx"
 ```
@@ -21,7 +21,7 @@ Browse, select and check hierarchical content.
 
 ## Linked checks
 
-<ComponentExample title="Linked checks" preview={<TreeCheckable />} fileName="checkable.tsx">
+<ComponentExample title="Linked checks" preview={<TreeCheckable />} fileName="checkable.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/tree/checkable.tsx"
 ```
@@ -41,7 +41,7 @@ Parents and children are checked independently.
 
 ## Search nodes
 
-<ComponentExample title="Search nodes" preview={<TreeSearch />} fileName="search.tsx">
+<ComponentExample title="Search nodes" preview={<TreeSearch />} fileName="search.tsx" width={360}>
 
 ```tsx lineNumbers file="../../../src/examples/en/tree/search.tsx"
 ```
@@ -102,7 +102,7 @@ Update `cacheKey` to refresh lazy caches for the same node keys. Changing `data`
 | `onLoadError` | `(error: unknown, node: `[`TreeNode`](#treenode)`) => void` | — | Loading failed; expand again to retry |
 | `virtual` | `boolean` | `false` | Render visible nodes only; enable for large trees. |
 | `height` | `number` | `320` | Height, numbers are in pixels |
-| `itemHeight` | `number` | `34` | Estimated virtual row height |
+| `itemHeight` | `number` | `42` | Estimated virtual row height including spacing; follows the regional height and density. Actual rows are measured. |
 | `draggable` | `boolean \| ((node: `[`TreeNode`](#treenode)`) => boolean)` | `false` | Enable node drag handles |
 | `allowDrop` | `(info: Omit<`[`TreeDropInfo`](#treedropinfo-api)`, 'data'>) => boolean` | — | Restrict drop positions |
 | `onDrop` | `(info: `[`TreeDropInfo`](#treedropinfo-api)`) => void` | — | Drop result; update data in the caller |
diff --git a/apps/docs/docs/en/guide/accessibility.mdx b/apps/docs/docs/en/guide/accessibility.mdx
deleted file mode 100644
index 32b65bd..0000000
--- a/apps/docs/docs/en/guide/accessibility.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { AccessibilityWorkbench } from '../../../src/examples/scenarios/accessibility';
-
-# Accessibility acceptance
-
-Exercise keyboard behavior, appearance, density, overlays and reduced motion below. Applications must still supply meaningful names and descriptions for business fields, icon actions and compound controls.
-
-<AccessibilityWorkbench english />
-
-| Check | Expected behavior |
-| --- | --- |
-| Tab / Shift+Tab | Logical order, visible focus, disabled actions excluded |
-| Enter / Space / arrows | Actions, selections, tabs and Slider work from the keyboard |
-| Dialog + nested Select | Focus remains within the overlay stack; Escape closes the popup before the dialog |
-| Dismissal | Focus returns to the opener and the page becomes usable/scrollable |
-| Required / email fields | Errors identify the field and focus moves to the correction |
-| Light/dark / forced colors | Focus, state and text remain identifiable; retest custom business colors |
-| 200% / 400% zoom | Reflow at 320 CSS px, reachable actions, no unnecessary page-level horizontal scrolling |
-| Touch | Essential actions work by tapping without requiring hover |
-| Reduced motion | Every flow remains usable with animations disabled |
-
-Automation uses axe and real browser behavior assertions without screenshot baselines. Emulated touch and narrow viewports do not replace physical-device browser zoom checks. Run manual NVDA on Windows and VoiceOver on macOS/iOS, recording versions, names/roles/states and error announcements. Unperformed manual checks remain pending. Executed coverage is recorded in `packages/react/ACCESSIBILITY.md`.
diff --git a/apps/docs/docs/en/guide/compatibility.mdx b/apps/docs/docs/en/guide/compatibility.mdx
index f73b024..6bb5e44 100644
--- a/apps/docs/docs/en/guide/compatibility.mdx
+++ b/apps/docs/docs/en/guide/compatibility.mdx
@@ -1,6 +1,21 @@
+import { withBase } from '@rspress/core/runtime';
+
 # Browser compatibility
 
-Use the current and previous stable Chrome, Edge, Firefox or Safari. Engineering targets are Chrome/Edge 109, Firefox 121 and Safari 16.4. These minimum versions are support targets, not a claim that each version has been tested. IE and older WebViews are outside the supported range.
+Use the current or previous stable release of Chrome, Edge, Firefox or Safari.
+
+## Minimum versions
+
+| Browser | Minimum version |
+| --- | --- |
+| <span className="leaf-browser-name"><img src={withBase('/browsers/chrome.svg')} width={20} height={20} alt="" /> Google Chrome</span> | 109 or later |
+| <span className="leaf-browser-name"><img src={withBase('/browsers/edge.svg')} width={20} height={20} alt="" /> Microsoft Edge</span> | 109 or later |
+| <span className="leaf-browser-name"><img src={withBase('/browsers/firefox.svg')} width={20} height={20} alt="" /> Mozilla Firefox</span> | 121 or later |
+| <span className="leaf-browser-name"><img src={withBase('/browsers/safari.svg')} width={20} height={20} alt="" /> Safari</span> | 16.4 or later |
+
+These versions are Leaf UI's minimum support targets, not a claim that every version has been tested. IE, legacy Edge (EdgeHTML) and older WebViews are outside the supported range.
+
+## Features and fallbacks
 
 | Capability | Implementation and fallback |
 | --- | --- |
@@ -21,4 +36,6 @@ Use the current and previous stable Chrome, Edge, Firefox or Safari. Engineering
 
 Use concrete hex/rgb/hsl/named colors through `theme` and `tokens`. A server cannot resolve CSS variables: `var(...)` colors resolve after mounting and synchronize when ancestor class/style attributes change. Pass concrete colors for a deterministic SSR first frame. Changing only a base CSS color does not recalculate the full palette.
 
+## Validation coverage
+
 CI covers Chromium, Firefox, WebKit, React 18/19, SSR and package exports. WebKit coverage does not imply physical Safari/iOS coverage. Local Firefox currently fails to launch (`spawn UNKNOWN`) and is not recorded as passed. See `packages/react/ACCESSIBILITY.md` in the repository for executed checks and manual limits.
diff --git a/apps/docs/docs/en/guide/control-contracts.mdx b/apps/docs/docs/en/guide/control-contracts.mdx
deleted file mode 100644
index 935caf3..0000000
--- a/apps/docs/docs/en/guide/control-contracts.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
-# Control and popup contracts
-
-A common contract for fields and floating panels.
-
-## Disabled and read-only values
-
-- `disabled` prevents interaction and excludes the field from native submission. `Form disabled` applies throughout the form; a field cannot override it with `disabled={false}`.
-- `readOnly` locks typing, selecting, clearing and removing tags while keeping the value available for submission.
-- Picker and Select `inputReadOnly` prevents typing but retains panel selection.
-- Compound controls validate `required` once for the overall value. Internal searches and checkboxes do not introduce unrelated required fields.
-
-## Native forms and reset
-
-Provide `name` to collect values with `new FormData(form)`. Use `data.getAll(name)` for multiple values and check each component's serialization contract. Native reset restores an uncontrolled field's `defaultValue`; reset your own state when controlling a field.
-
-Date `format` changes displayed text and the text returned by `onChange`. FormData remains canonical: `YYYY-MM-DD` dates, `HH:mm[:ss]` times and `start/end` ranges. Keep display formats separate from server interchange formats.
-
-## Customize a popup
-
-Selector popups share the options below. Component settings override ConfigProvider's `getPopupContainer`. Retain the supplied content when adding actions with `popupRender`.
-
-```tsx
-import { ConfigProvider, Select } from '@ifhover/leaf-ui';
-
-<ConfigProvider getPopupContainer={() => document.getElementById('overlay-root')!}>
-  <Select options={[{ value: 'design', label: 'Design' }]}
-    popupPlacement="bottom-start" popupStyle={{ maxHeight: 320 }}
-    popupRender={content => <>{content}<p>Choose a team</p></>} />
-</ConfigProvider>
-```
-
-Mount the container before interaction. Popups copy the trigger region's theme and direction; avoid clipping containers. Modal and Drawer expose the equivalent option as `container`.
-
-## Shadow DOM and micro-frontends
-
-`getPopupContainer` can return a ShadowRoot. Import compiled component CSS inside that root too: external styles do not cross the boundary. Use a `style` / `link` element or `adoptedStyleSheets`. A separate configured container for each application region keeps styles and stacking predictable.
-
-## Language and direction
-
-Built-in locales are `zh-CN`, `zh-TW` and `en-US`. Override common control text with `messages`; `textMessages` uses English source text as keys for extension components. `weekStartsOn` configures the first weekday (0 is Sunday, 1 Monday), and `direction="rtl"` configures a region, including its popups.
-
-```tsx
-<ConfigProvider locale="zh-TW" weekStartsOn={0}
-  messages={{ empty: '沒有可選項目' }} textMessages={{ 'Next': '下一步' }}>
-  <Select options={[]} />
-</ConfigProvider>
-```
-
-Use BCP 47 names for custom locales so Intl date and number formatting stays consistent, and provide translations through both message properties. See [LeafMessages](/en/components/config-provider#leafmessages) for the full message contract.
-
-## PopupOptions
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `popupPlacement` | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | — | Placement relative to the trigger. |
-| `popupClassName` | `string` | — | Custom class for the popup. |
-| `popupStyle` | `CSSProperties` | — | Custom popup styles. |
-| `popupRender` | `(content: React.ReactNode) => React.ReactNode` | — | Wrap or extend popup content; retain the supplied content to preserve interaction. |
-| `getPopupContainer` | `() => Element \| DocumentFragment` | — | Return a popup container, including a ShadowRoot. |
diff --git a/apps/docs/docs/en/guide/design-resources.mdx b/apps/docs/docs/en/guide/design-resources.mdx
deleted file mode 100644
index ebc2a94..0000000
--- a/apps/docs/docs/en/guide/design-resources.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { withBase } from '@rspress/core/runtime';
-
-# Design resources
-
-Resources are generated from the runtime colors, derivation recipes and density values.
-
-- <a href={withBase('/design/leaf.tokens.json')} download>DTCG tokens</a>: standard colors, dimensions, line height and motion duration.
-- <a href={withBase('/design/leaf.tokens-studio.json')} download>Tokens Studio tokens</a>: the legacy `type`/`value` shape; select one appearance and one density set.
-- <a href={withBase('/design/leaf-light-foundations.svg')} download>Light foundations</a> and <a href={withBase('/design/leaf-dark-foundations.svg')} download>dark foundations</a>.
-- <a href={withBase('/design/leaf-light-components.svg')} download>Light component states</a> and <a href={withBase('/design/leaf-dark-components.svg')} download>dark component states</a>: editable text, paths and named groups.
-- <a href={withBase('/design/leaf-figma-plugin.zip')} download>Local Figma import plugin</a>: native color/density variables and Button/Input component variants.
-
-Drag SVG files into Figma. Unzip the plugin, then use Figma desktop **Plugins → Development → Import plugin from manifest**, select `manifest.json`, and run **Leaf UI Resources**. Each run creates a page and collections; undo the import if needed. Inter is preferred with an available-font fallback.
-
-Button has four variants, four states and two densities. Input has default/focus/error/disabled states and both densities. Fills and heights bind to variables. Other SVG sheets remain editable design references that can be converted into components.
-
-Run `pnpm design:export` in the repository to regenerate. JSON, SVG and JavaScript syntax are checked locally; actual Figma import requires manual acceptance. This kit has not been published as an online Figma library.
diff --git a/apps/docs/docs/en/guide/design-standards.mdx b/apps/docs/docs/en/guide/design-standards.mdx
index 8245eea..0f4aad9 100644
--- a/apps/docs/docs/en/guide/design-standards.mdx
+++ b/apps/docs/docs/en/guide/design-standards.mdx
@@ -2,13 +2,18 @@
 
 Semantic colors, dimensions and spacing keep components consistent across light/dark appearance and comfortable/compact density. The full standard lives in `DESIGN-STANDARDS.md` in the repository.
 
+Card's small, default and large sizes adjust spacing, heading typography and heading height together, with embedded Tabs following the card size by default. Tabs share the heading area: they sit beneath a title or fill the entire heading height with vertically centered labels when no title is provided. The divider runs only below the entire tab bar. Labels and content share the Card content edge and insets, while `divided` continues to control the footer treatment.
+
 Warnings use a bright amber consistently for icons, field borders and status fills, with independently derived readable text colors. Customize the warning color through ConfigProvider's `theme.tokens.warningColor`.
 
-Dropdown hover, keyboard and pressed states share one moving background, with smooth color changes for danger items. Select uses the same fill for selected rows and its moving highlight, which remains continuous when crossing a selection; text and checkmarks distinguish the selected value.
+Options share a neutral gray background for hover and keyboard candidates; selected values retain a primary tint, semantic text and checkmarks. Select, AutoComplete, Cascader, TreeSelect, time lists and menus follow this palette; AutoComplete, Mentions and CommandPalette candidates stay neutral. Moving backgrounds smoothly change position and color without stacking fills over selected rows. Disabled options receive no interaction feedback, and danger actions retain red accents. Colors follow the regional ConfigProvider theme and light or dark appearance.
+
+Select, TreeSelect and Cascader share selected-tag sizes and spacing. Tags wrap by default; `tagWrap={false}` keeps one line and collapses overflow into `+N`. Long labels truncate while preserving room for search and actions. Folding affects presentation only, never selected values.
 
 | Foundation | Comfortable | Compact |
 | --- | --- | --- |
-| Control height | 40px | 34px |
+| Control height | 36px | 30px |
+| Popup option minimum height | 32px | 26px |
 | Body text / line height | 14px / 1.6 | 14px / 1.6 |
 | Spacing unit | 8px | 6px |
 | Form row gap | 24px | 16px |
@@ -18,14 +23,22 @@ Dropdown hover, keyboard and pressed states share one moving background, with sm
 
 Solid and outlined buttons emit a wave that quickly expands outside their contour, then slowly fades, while the button and label remain stable; ghost buttons do not emit a wave. Solid buttons brighten on hover and deepen on press; outlined buttons change text and border colors. Menus and tabs use color, opacity, borders and shadows for feedback; selected indicators may move to the selected item. Drawers slide smoothly; feedback enters as a unit without separate icon/text springs. Buttons omit the wave when regional motion is disabled or system reduced motion is enabled; the system preference takes precedence.
 
-Radius, borders and type build the hierarchy together. Radii step down from the outside in: dialogs, drawers and popups use the large radius; content surfaces such as cards, alerts and choice cards use the medium radius; buttons, fields and table frames use the base radius; checkboxes and other small elements use the small radius; status tags are pills. Content surfaces are separated by hairline borders and muted fills, not shadows; shadows are reserved for layers that actually float, such as popups, dialogs, dragged items and slider handles. Type hierarchy comes from size and color: 14px body, 13px secondary text, weight 500 for component titles, labels and buttons, and 600 only for document headings. Option group headings use a 12px tracked muted style.
+Radius, borders and type build the hierarchy together. Radii step down from the outside in: dialogs, drawers and popups use the large radius; content surfaces such as cards, alerts and choice cards use the medium radius; buttons, fields and table frames use the base radius; checkboxes and other small elements use the small radius; status tags use borderless fills and the small radius. Content surfaces are separated by hairline borders and muted fills, not shadows; shadows are reserved for layers that actually float, such as popups, dialogs, dragged items and slider handles. Type hierarchy comes from size and color: 14px body, 13px secondary text, weight 500 for component titles, labels and buttons, and 600 only for document headings. Option group headings use a 12px tracked muted style.
 
 Inset backgrounds use nested curves: `inner radius = max(0px, outer radius - padding - border width)`. The default popup has a 16px outer radius, 6px padding and a 1px border, so options use 9px. Hover, selected and moving highlights share the same curve and follow theme changes. Unequal padding is calculated per direction; additional insets in nested structures are included. Small and square themes clamp to zero. Independent controls, calendar cells, tags and icons keep their semantic radii.
 
+Menu navigation items, hover backgrounds and moving selection highlights use the same base radius as buttons, independent of menu padding. A Menu radius override updates these curves together.
+
+Pagination defaults to outlined buttons, with a borderless alternative. Both follow control-height tokens and retain their geometry on press, with a moving selection background. Outlined controls change text and border color; ghost controls use neutral fills.
+
+Card-style Tabs use matching inner radii for tabs and the moving selection background, derived from the bar radius minus its actual padding and border and clamped at zero. Regional themes and component radius overrides feed the same calculation. The bar fits its labels and its size includes borders and padding; content panels retain the available width.
+
+Tag provides borderless tinted and solid fills, with a radius of five-sixths of the theme's small radius (5px by default). A component radius override takes precedence.
+
 Acceptance covers default, hover, pressed, focus-visible, selected, disabled, loading, error and empty states. Text or ARIA must also express state. Icon-only actions need accessible names. Align icons with labels and dialog form edges with footer actions.
 
 Compact density suits pointer/keyboard interfaces and keeps body text readable. Prefer comfortable or larger explicit controls on touch; essential targets should be at least 24px, preferably 44px. Local component settings and explicit theme dimensions override density and defaults.
 
-Button inline padding follows its actual height, and component-level `padding` applies to every size. Small Steps keep body-size labels; card and list choice groups share a quiet section heading. Modal keeps a heading icon and subtle section dividers. Confirm is a compact API prompt with a bare icon beside its explanation and spacing-based sections. Headers without a description have less vertical space; Modal and Confirm actions use a compact footer.
+Button inline padding follows its actual height, and component-level `padding` applies to every size. Small Steps keep body-size labels; card and list choice groups share a quiet section heading. Card headings have equal top and bottom insets, without duplicate spacing where they meet the body. Modal keeps a heading icon and subtle section dividers. Confirm is a compact API prompt with a bare icon beside its explanation and spacing-based sections. Headers without a description have less vertical space; divided Card, Modal and Drawer actions share compact footer spacing; Confirm uses the same bottom inset.
 
 Link buttons have no background, border, padding or fixed control height. Hover and press change text color without a wave. Use Link for navigation and the Button link variant for text actions.
diff --git a/apps/docs/docs/en/guide/getting-started.mdx b/apps/docs/docs/en/guide/getting-started.mdx
index fe80e5f..dc08562 100644
--- a/apps/docs/docs/en/guide/getting-started.mdx
+++ b/apps/docs/docs/en/guide/getting-started.mdx
@@ -1,31 +1,40 @@
 import { ComponentExample } from '../../../src/components/component-example';
 import { GettingStartedExample } from '../../../src/examples/en/guide/getting-started';
+import { PackageInstall } from '../../../src/components/package-install';
 
 # Installation & quick start
 
-Leaf UI supports React 18 and React 19. Install the package and import its styles to start using components in your application.
+Leaf UI supports React 18 and React 19. Install the package to start using components; base and component styles load automatically.
 
 ## Install the package
 
+Run this in your React project directory:
+
+<PackageInstall>
+
 ```bash
-pnpm add @ifhover/leaf-ui
-# or
 npm install @ifhover/leaf-ui
-# or
+```
+
+```bash
 yarn add @ifhover/leaf-ui
 ```
 
-React 18 or 19 and the matching React DOM version must be installed in your application. If needed, run `pnpm add react react-dom`. See the current release on [npm](https://www.npmjs.com/package/@ifhover/leaf-ui).
+```bash
+pnpm add @ifhover/leaf-ui
+```
 
-## Styles
+```bash
+bun add @ifhover/leaf-ui
+```
 
-Import the base stylesheet once in the application entry. It includes theme variables, shared popup styles and API services such as Confirm and Message:
+</PackageInstall>
 
-```tsx
-import '@ifhover/leaf-ui/styles.css';
-```
+React 18 or 19 and the matching React DOM version must be installed in your application. If needed, run `pnpm add react react-dom`. See the current release on [npm](https://www.npmjs.com/package/@ifhover/leaf-ui).
+
+Browser component entries load theme variables, shared styles and the required component and service styles automatically. No manual CSS imports or Sass installation are needed. See [server-side rendering](/en/guide/ssr) for framework-specific setup in Next.js, TanStack Start and other frameworks.
 
-Browser component entries load their styles automatically. No separate component CSS imports or Sass installation are needed. See [SSR usage](/en/guide/ssr) for Next.js and other frameworks.
+Examples use Flex, Space, Grid and FormField for layout. Tailwind CSS is not required.
 
 ## Use a component
 
@@ -44,7 +53,7 @@ The root entry is the recommended default. Vite and Rsbuild / Rspack production
 
 - [Components](/en/components/): explore available components.
 - [Button](/en/components/button): styles, sizes, loading states and API.
-- [Icons](/en/guide/icons): use Lucide icons for actions.
+- [Icons](/en/components/icons): use Lucide icons for actions.
 - [Theming](/en/guide/theming): customize colors, shapes and appearance.
-- [SSR usage](/en/guide/ssr): use components in Next.js and other frameworks.
+- [Server-side rendering](/en/guide/ssr): framework-specific setup in Next.js, TanStack Start and other frameworks.
 - [Browser compatibility](./compatibility): supported browsers and fallbacks.
diff --git a/apps/docs/docs/en/guide/icons.mdx b/apps/docs/docs/en/guide/icons.mdx
deleted file mode 100644
index 79c682c..0000000
--- a/apps/docs/docs/en/guide/icons.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentExample } from '../../../src/components/component-example';
-import { ButtonIcons } from '../../../src/examples/en/button/icons';
-
-# Icons
-
-Leaf UI uses [Lucide](https://lucide.dev/) icons. Install lucide-react when importing icons in your application:
-
-```bash
-pnpm add lucide-react
-```
-
-## Using icons
-
-Button accepts startIcon and endIcon; Input accepts prefix and suffix. Import only the icons you need. Icons inherit the current text color.
-
-<ComponentExample title="Icon buttons" preview={<ButtonIcons />} fileName="icons.tsx">
-
-```tsx lineNumbers file="../../../src/examples/en/button/icons.tsx"
-```
-
-</ComponentExample>
-
-## Accessible names
-
-Text supplies the name of a text button. Supply aria-label for icon-only buttons. Icons are decorative and should not be the only indication of an action. Icon properties accept ReactNode, so you can use your existing React icon components too.
diff --git a/apps/docs/docs/en/guide/internationalization.mdx b/apps/docs/docs/en/guide/internationalization.mdx
new file mode 100644
index 0000000..11511da
--- /dev/null
+++ b/apps/docs/docs/en/guide/internationalization.mdx
@@ -0,0 +1,29 @@
+# Switch languages
+
+Set `locale` on ConfigProvider to change built-in text in date panels, empty states and clear actions.
+
+## Set a language
+
+Wrap your application with ConfigProvider and pass a language tag. This example switches the date panel's built-in text to English:
+
+```tsx
+import { ConfigProvider, DatePicker } from '@ifhover/leaf-ui';
+
+export default function App() {
+  return (
+    <ConfigProvider locale="en-US">
+      <DatePicker />
+    </ConfigProvider>
+  );
+}
+```
+
+Replace DatePicker with your application content to share the language across components and popups. The default is Simplified Chinese. See [ConfigProvider → Built-in languages](/en/components/config-provider#built-in-languages) for the full list and language tags.
+
+## Switch in your application
+
+If your application already has a language selector, pass its current language state to `locale`. Components in the region update when that state changes. See the [interactive ConfigProvider example](/en/components/config-provider#switch-languages).
+
+To change only part of a page, nest a ConfigProvider around that region. An omitted `locale` inherits the parent language.
+
+Translate page headings, field labels and options in your application. For another language or custom built-in text, see [ConfigProvider → Add your own language](/en/components/config-provider#add-your-own-language).
diff --git a/apps/docs/docs/en/guide/introduction.mdx b/apps/docs/docs/en/guide/introduction.mdx
index e8c7c3b..5d6b3bf 100644
--- a/apps/docs/docs/en/guide/introduction.mdx
+++ b/apps/docs/docs/en/guide/introduction.mdx
@@ -1,19 +1,101 @@
+import { ComponentExample } from '../../../src/components/component-example';
+import {
+  IntroductionBrowsers,
+  IntroductionFeature,
+  IntroductionFeatures,
+  IntroductionHero,
+} from '../../../src/components/introduction';
+import { PackageInstall } from '../../../src/components/package-install';
+import { GettingStartedExample } from '../../../src/examples/en/guide/getting-started';
+
 # Introduction
 
-Leaf UI is a lightweight React component library with a natural visual style. Start with its green theme, then adapt it to your product.
+<IntroductionHero>
+
+A UI component library for React applications. Start with a natural green theme, then make room for your own brand and ideas.
+
+</IntroductionHero>
+
+## Why Leaf UI
+
+<IntroductionFeatures>
+  <IntroductionFeature icon="leaf" title="A natural starting point">
+
+Quiet colors, comfortable corners, and clear interaction states keep the focus on your content. Ready to use, with room for your own design.
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="palette" title="Your theme, your style">
+
+Configure colors, radii, control heights, typography, and light or dark appearance with ConfigProvider. Nested themes, popups, and messages share the settings of their region.
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="types" title="Familiar React patterns">
+
+TypeScript declarations, native HTML attributes, and DOM refs are included. Use controlled or uncontrolled values, native form submission, and FormData.
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="components" title="Everyday components, in sync">
+
+Buttons, inputs, date pickers, tables, navigation, and feedback share consistent sizing and interaction rules. Use Lucide icons or pass your own icon nodes.
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="languages" title="Ready for different languages">
+
+Built-in locales, custom translations, language fallbacks, and RTL direction are supported. Configure component messages while keeping application titles and labels in your own translation system.
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="keyboard" title="Thoughtful interactions">
+
+Keyboard navigation, visible focus, disabled and loading states, and reduced-motion preferences are supported. Add an aria-label to icon-only buttons to give them an accessible name.
+
+  </IntroductionFeature>
+</IntroductionFeatures>
+
+## Environment support
+
+Supports **React 18 / 19**, **ESM / CommonJS**, and server-side rendering. We recommend the current or previous stable release of a modern browser.
+
+<IntroductionBrowsers />
+
+These are minimum support targets. See [browser compatibility](/en/guide/compatibility) for tested environments and fallbacks, or [server-side rendering](/en/guide/ssr) for Next.js, TanStack Start, and other frameworks.
+
+## Start with one component
+
+Install the library in an existing React project:
+
+<PackageInstall>
+
+```bash
+npm install @ifhover/leaf-ui
+```
+
+```bash
+yarn add @ifhover/leaf-ui
+```
+
+```bash
+pnpm add @ifhover/leaf-ui
+```
+
+```bash
+bun add @ifhover/leaf-ui
+```
 
-## Your own theme
+</PackageInstall>
 
-Use [ConfigProvider](/en/components/config-provider) to customize colors, base radius, control height, typography, motion and language. Other sizes are derived automatically. Nested regions inherit omitted settings, and custom components can consume the same CSS variables.
+Import a component and start using it. Browser builds load the required styles automatically; you do not need Sass. Try the button below:
 
-## Familiar React patterns
+<ComponentExample title="Your first button" preview={<GettingStartedExample />} width="fit-content" fileName="getting-started.tsx">
 
-Components support React 18 and 19, controlled and uncontrolled values, standard HTML attributes and DOM refs. TypeScript declarations are included. [Form](/en/components/form) organizes labels and feedback while preserving normal form submission and FormData.
+```tsx lineNumbers file="../../../src/examples/en/guide/getting-started.tsx"
 
-## Everyday components
+```
 
-Leaf UI includes buttons, text fields, selection controls, date and time pickers, forms, menus, dialogs and feedback. Explore the [component overview](/en/components/).
+</ComponentExample>
 
-Keyboard interaction, visible focus, disabled states and reduced-motion preferences are supported. Built-in text supports Chinese and English; application labels remain under your control.
+## Next steps
 
-Start with [installation & quick start](/en/guide/getting-started), or try the [theme playground](/en/guide/theming).
+- [Installation and quick start](/en/guide/getting-started): Set up the library in your project.
+- [Component overview](/en/components/): Find the components your interface needs.
+- [Theming](/en/guide/theming): Customize brand colors, corners, and dark mode.
+- [Internationalization](/en/guide/internationalization): Configure component languages for your application.
diff --git a/apps/docs/docs/en/guide/scenarios.mdx b/apps/docs/docs/en/guide/scenarios.mdx
deleted file mode 100644
index 1de70f0..0000000
--- a/apps/docs/docs/en/guide/scenarios.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ComponentExample } from '../../../src/components/component-example';
-import { CompositeForm, RemoteSelection } from '../../../src/examples/scenarios/basic';
-import { SchemaForm } from '../../../src/examples/scenarios/schema';
-
-# Application scenarios
-
-Combine field layout, async validation and compound controls in one form.
-
-## Dynamic fields and async validation
-
-`Form` uses native form semantics. `useFormValidation` accepts `FormData` for synchronous validation, schema adapters, async requests and server errors. Return an object keyed by field name; use `setErrors` to map server field errors after submission.
-
-Bind `handleSubmit` and `handleReset` to the form. Resubmission and reset cancel previous requests; async functions must respect `AbortSignal`. Compound fields such as CheckboxGroup and Transfer validate the overall value. Upload appends File objects or existing URLs to FormData; directory paths remain available through `File.webkitRelativePath`.
-
-<ComponentExample title="Dynamic fields and async validation" preview={<CompositeForm english />} fileName="basic.tsx">
-
-```tsx lineNumbers file="../../../src/examples/scenarios/basic.tsx"
-```
-
-</ComponentExample>
-
-With Zod or Valibot, parse FormData inside `validate` and map schema issues to field errors. Read repeated fields with `data.getAll(name)`. Convert dynamic arrays using your application's model; Leaf does not interpret dotted field paths implicitly. See [Form](../components/form) for React Hook Form integration.
-
-## Schemas and server errors
-
-This example uses Zod and maps issue paths to `FormField` errors. Set `noValidate` when the schema owns all validation; omit it to retain native validation. Check the supplied cancellation signal before applying server errors in `onSubmit`.
-
-<ComponentExample title="Schemas and server errors" preview={<SchemaForm english />} fileName="schema.tsx">
-
-```tsx lineNumbers file="../../../src/examples/scenarios/schema.tsx"
-```
-
-</ComponentExample>
-
-## Remote search and request races
-
-Use `filterOption={false}` for remote filtering. Manage query parameters, cancellation and page state in the application. `onPopupScroll` can load another page, while `popupRender` can add a retry action. Select caches only selected records for display, rather than all historical search results.
-
-<ComponentExample title="Remote search" preview={<RemoteSelection english />} fileName="basic.tsx">
-
-```tsx lineNumbers file="../../../src/examples/scenarios/basic.tsx"
-```
-
-</ComponentExample>
-
-When changing tenants or tree-data versions, update the `cacheKey` on Tree, TreeSelect or Cascader. The component discards lazy caches and aborts old requests. Return children belonging to the current request.
-
-## Upload transport adapters
-
-Use `autoUpload={false}` with `UploadHandle.upload()` to start manually. `concurrency` limits simultaneous requests. Chunking, checksums and resumable upload IDs belong to your server protocol: implement them in `customRequest` using `File.slice()`, the supplied `signal`, and aggregate `onProgress` updates. Leaf does not assume a storage-specific resume protocol.
-
-See [Form](../components/form), [Select](../components/select) and [Upload](../components/upload) for details.
-
-
-## Complete application page
-
-The [complete workspace](./workspace) combines project search, creation, editing, archiving/restoration, field validation and saved team settings. The [accessibility workbench](./accessibility) exercises keyboard, overlays, themes and density.
diff --git a/apps/docs/docs/en/guide/ssr.mdx b/apps/docs/docs/en/guide/ssr.mdx
index f65c711..f3c1e33 100644
--- a/apps/docs/docs/en/guide/ssr.mdx
+++ b/apps/docs/docs/en/guide/ssr.mdx
@@ -1,163 +1,77 @@
-# SSR usage
+# Server-side rendering
 
-Leaf UI supports server rendering. Import the compiled stylesheet at your framework's root entry and provide an initial theme with ConfigProvider.
-
-## Static styles and dynamic themes
-
-Layout, states and animations use compiled static CSS. `styles.css` supplies base and API-service styles. Browser component entries load component styles; production builds with CSS pruning can retain styles for root named imports on demand. Direct Node entries do not load CSS; use `@ifhover/leaf-ui/styles/all.css` when managing SSR styles yourself. ConfigProvider renders the region's theme variables into HTML; derived sizes use CSS calculations.
-
-Server rendering and dynamic themes therefore work together: the server renders the initial HTML and theme, the client hydrates using the same settings, and React state handles later switches. No CSS-in-JS registry, server style extraction, Sass configuration or SSR opt-out is required.
+Leaf UI loads its base and component styles automatically. This page covers only framework-specific setup. See [quick start](/en/guide/getting-started) for installation and component usage.
 
 ## Next.js App Router
 
-### Import styles in the root layout
-
-```tsx title="app/layout.tsx"
-import type { ReactNode } from 'react';
-import { cookies } from 'next/headers';
-import type { LeafTheme } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
-import './globals.css';
-import { Providers } from './providers';
-
-export default async function RootLayout({ children }: { children: ReactNode }) {
-  const store = await cookies();
-  const initialTheme: LeafTheme = {
-    primaryColor: '#7654c6',
-    borderRadius: 8,
-    controlHeight: 40,
-    appearance: store.get('leaf-appearance')?.value === 'dark' ? 'dark' : 'light',
-  };
-
-  return (
-    <html lang="en">
-      <body>
-        <Providers initialTheme={initialTheme}>{children}</Providers>
-      </body>
-    </html>
-  );
-}
-```
-
-This example uses the current async Next.js cookies API. The appearance cookie is optional; account preferences or a fixed server theme also work.
-
-### Create an interactive provider
+Put application-wide configuration in a Client Component:
 
 ```tsx title="app/providers.tsx"
 'use client';
 
-import { useState, type ReactNode } from 'react';
-import { Button, ConfigProvider, type LeafTheme } from '@ifhover/leaf-ui';
-
-export function Providers({
-  initialTheme,
-  children,
-}: {
-  initialTheme: LeafTheme;
-  children: ReactNode;
-}) {
-  const [theme, setTheme] = useState(initialTheme);
-
-  function toggleAppearance() {
-    const appearance = theme.appearance === 'dark' ? 'light' : 'dark';
-    setTheme((current) => ({ ...current, appearance }));
-    document.cookie =
-      'leaf-appearance=' + appearance + '; Path=/; Max-Age=31536000; SameSite=Lax';
-  }
+import { ConfigProvider } from '@ifhover/leaf-ui';
+import type { ReactNode } from 'react';
 
-  return (
-    <ConfigProvider locale="en-US" theme={theme}>
-      <Button onClick={toggleAppearance}>Switch appearance</Button>
-      {children}
-    </ConfigProvider>
-  );
+export function Providers({ children }: { children: ReactNode }) {
+  return <ConfigProvider>{children}</ConfigProvider>;
 }
 ```
 
-`'use client'` declares a client boundary, which Next.js still prerenders on the server. The package's built entries preserve this directive. Server Components may import and render Leaf UI components; put event handlers, hooks and interactive state in Client Components, and pass serializable settings across the boundary.
+In your existing `app/layout.tsx`, wrap `{children}` inside `<body>` with `Providers`. Keep the layout itself as a Server Component.
 
-Passing server-rendered content through children preserves its Server Component boundary.
+Business components with event handlers, hooks or interactive state also need `'use client'`. Client Components still participate in server prerendering; there is no need to set `ssr: false`.
 
-### Use form components
+## Next.js Pages Router
 
-```tsx title="app/project-form.tsx"
-'use client';
+Place application-wide configuration in `pages/_app.tsx`. No `'use client'` directive is needed.
 
-import { Button, Form, FormField, Input } from '@ifhover/leaf-ui';
+For Webpack builds, add this option to your existing Next.js configuration:
 
-export function ProjectForm() {
-  return (
-    <Form onSubmit={(event) => {
-      event.preventDefault();
-      const data = new FormData(event.currentTarget);
-      console.log(data.get('name'));
-    }}>
-      <FormField label="Project name" required>
-        <Input name="name" />
-      </FormField>
-      <Button type="submit">Save</Button>
-    </Form>
-  );
-}
+```js title="next.config.mjs"
+export default {
+  transpilePackages: ['@ifhover/leaf-ui'],
+};
 ```
 
-Import ProjectForm into your page. It inherits the outer theme without `dynamic(..., { ssr: false })`.
+Append the package if you already have `transpilePackages`, then restart the development server. This lets Next.js process CSS inside the library and avoids the global CSS import error from `node_modules`. The option requires Next.js 13 or later.
 
-## Next.js Pages Router
+The default Turbopack build in Next.js 16.4.1 needs no extra configuration. Neither build requires manual Leaf UI stylesheet imports.
 
-Import styles and wrap the page in `pages/_app.tsx`:
+## TanStack Start
 
-```tsx title="pages/_app.tsx"
-import type { AppProps } from 'next/app';
+Use the default Vite setup. For application-wide configuration, wrap `Outlet` in your existing root route, `src/routes/__root.tsx`:
+
+```tsx title="src/routes/__root.tsx"
 import { ConfigProvider } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
+import { Outlet } from '@tanstack/react-router';
 
-export default function App({ Component, pageProps }: AppProps) {
+function RootComponent() {
   return (
-    <ConfigProvider theme={pageProps.initialTheme ?? { borderRadius: 8 }}>
-      <Component {...pageProps} />
-    </ConfigProvider>
+    <RootDocument>
+      <ConfigProvider>
+        <Outlet />
+      </ConfigProvider>
+    </RootDocument>
   );
 }
 ```
 
-For a personalized first frame, read preferences in getServerSideProps and return initialTheme. The client's first render uses the same pageProps. Later switches can use React state as in Providers above.
-
-## Other React SSR frameworks
-
-Remix, React Router framework mode and custom React SSR servers follow the same steps:
-
-1. Import `styles.css` through the framework's root entry or route, so it loads with the first frame.
-2. Read theme and language on the server and wrap the rendered tree in ConfigProvider.
-3. Pass the same initial settings to the browser through the framework's data mechanism.
-4. Initialize client state with those settings, then handle later switches.
+Keep your project's existing `RootDocument` and the other root route options. `HeadContent` in `<head>` renders the initial stylesheet links; `Scripts` in `<body>` loads the client scripts. Start discovers component styles in the build output, so Leaf UI needs no explicit `?url` stylesheet link or `'use client'` directive.
 
-The static stylesheet is cacheable. Dynamic settings stay on each region's HTML container, with no DOM or window access during theme calculation.
+See TanStack Start's [root route](https://tanstack.com/start/latest/docs/framework/react/guide/routing) and [CSS styling](https://tanstack.com/start/latest/docs/framework/react/guide/css-styling) guides.
 
 ## Keep the first render consistent
 
-Prefer cookies, account settings or fixed defaults that the server can read. A preference stored only in localStorage is unavailable on the server: hydrate with a consistent default, then load it in an effect. This causes a visible theme switch. Persist preferences where the server can read them when the first frame should already match.
+Use the same theme, language and initial values on the server and during client hydration. For dark mode on the first frame, read configuration from a Cookie or other server-readable data. Read preferences stored only in `localStorage` after mounting. See [theming](/en/guide/theming) and [switch languages](/en/guide/internationalization) for configuration.
 
-Date pickers display local dates and times. Different server and browser time zones can produce different labels. Use a shared time-zone policy for SSR date defaults, or set the user's local dates after hydration. Avoid independently generating different initial values with `new Date()`.
+Pass consistent initial values to dates, times and countdowns too; avoid separate `new Date()` calls for each side's initial render. Popups such as Modal and Message appear after mounting on the client.
 
-Modal, Confirm, Message and floating panels create their portals after client mounting. Form controls themselves can render on the server; initially open overlays appear after hydration.
+## Custom SSR
 
-The entry `ConfigProvider` manages confirmations, messages, notifications and task loading bars automatically. Client descendants call `useConfirm`, `useMessage`, `useNotification` and `useLoadingBar`. These containers do not render on the server. State belongs to individual application roots and is not shared between SSR requests.
+When rendering directly with Node without framework-managed stylesheet discovery, import the full static stylesheet in the entry that builds your browser assets:
 
-## Images and file interactions
-
-Image renders its image on the server. The enlarged viewer, ImageCropper engine and SignaturePad engine load on demand in the browser. Stable containers and placeholders keep the server output consistent. Use these components in a Client Component without disabling SSR for the page.
-
-FileList renders URL-based metadata on the server. Upload keeps browser-selected File objects and temporary preview URLs in client state; no upload request is started during SSR.
-
-Interactive behavior requires client JavaScript. See [theming](/en/guide/theming) for style reuse and advanced settings.
-
-See [getting started](/en/guide/getting-started) for styles on demand. Default Node entries remain free of CSS imports, so ESM and CommonJS can render directly on the server. Framework browser builds use automatic style entries and retain the Next.js client boundary. For custom SSR or a build without the `browser` export condition, import `@ifhover/leaf-ui/styles/all.css` in the entry that produces page styles and include its emitted stylesheet in the initial HTML.
-
-## Date, number and popup hydration
-
-Pickers use local Date calendar fields and time. Date inputs and FormData represent local calendar values. `date.toISOString()` represents a UTC instant, so truncating it is not a reliable local date conversion. Convert business time zones at your application boundary and use the same convention on both server and client. Non-Gregorian calendars and dedicated timezone date types need an application adapter.
-
-Use consistent `locale`, values and timezone settings on server and client to keep Intl output identical. Pass a fixed deadline and `initialRemaining` to Countdown to avoid rendering differences caused by request latency. System appearance and breakpoint hooks accept initial values and read browser preferences after mounting.
+```ts
+import '@ifhover/leaf-ui/styles/all.css';
+```
 
-Portals mount on the client. Use function-valued `container` / `getPopupContainer` to defer DOM access; do not access `document` at module scope or during server rendering. See [Control and popup contracts](/en/guide/control-contracts).
+Include the emitted CSS link in the initial HTML. The Node component entry does not import CSS and can be used directly for server rendering.
diff --git a/apps/docs/docs/en/guide/tailwindcss.mdx b/apps/docs/docs/en/guide/tailwindcss.mdx
new file mode 100644
index 0000000..77fbee8
--- /dev/null
+++ b/apps/docs/docs/en/guide/tailwindcss.mdx
@@ -0,0 +1,158 @@
+import { ComponentExample } from '../../../src/components/component-example';
+import { DocsCollapse } from '../../../src/components/docs-collapse';
+import { TailwindBasic } from '../../../src/examples/en/tailwindcss/basic';
+import { TailwindTheme } from '../../../src/examples/en/tailwindcss/theme';
+
+# Tailwind CSS
+
+Reuse Leaf UI colors, radii and spacing in Tailwind.
+
+## Quick setup
+
+For a project with Tailwind installed, choose the configuration for your version. Versions 3.x and 4.x are supported; upgrade first if you use 2.x or earlier.
+
+### Tailwind CSS 4
+
+Add one import to your CSS entry:
+
+```css title="app.css"
+@import 'tailwindcss';
+@import '@ifhover/leaf-ui/tailwind.css';
+```
+
+<DocsCollapse title="Keep your existing base styles">
+
+To omit Tailwind's Preflight reset, use this entry instead:
+
+```css title="app.css"
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+@import '@ifhover/leaf-ui/tailwind.css';
+```
+
+</DocsCollapse>
+
+### Tailwind CSS 3
+
+Add the preset and adjust `content` to match your source directories:
+
+```js title="tailwind.config.cjs"
+const leafPreset = require('@ifhover/leaf-ui/tailwind').default;
+
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  presets: [leafPreset],
+};
+```
+
+Keep the Tailwind 3 directives in your CSS entry:
+
+```css title="app.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+For an existing configuration, append the preset and keep your source paths and plugins.
+
+<DocsCollapse title="Use a TypeScript configuration (3.3+)">
+
+```ts title="tailwind.config.ts"
+import type { Config } from 'tailwindcss';
+import leafPreset from '@ifhover/leaf-ui/tailwind';
+
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  presets: [leafPreset],
+} satisfies Config;
+```
+
+To disable Preflight, add `corePlugins: { preflight: false }` to the configuration.
+
+</DocsCollapse>
+
+## Examples
+
+### Basic usage
+
+After setup, use `leaf-` names in utilities to share styles with components:
+
+<ComponentExample title="Reuse design variables" preview={<TailwindBasic />} fileName="basic.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/tailwindcss/basic.tsx"
+
+```
+
+</ComponentExample>
+
+`bg-leaf-surface` sets the background, `p-leaf-md` sets padding, and `rounded-leaf` sets the radius. Standard Tailwind utilities and variants such as `hover:` and `md:` still work.
+
+### Follow the theme
+
+Utilities inside ConfigProvider follow its regional theme. Turn on dark mode to see the panel and button change together:
+
+<ComponentExample title="Follow the theme" preview={<TailwindTheme />} fileName="theme.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/tailwindcss/theme.tsx"
+
+```
+
+</ComponentExample>
+
+Backgrounds, text and borders read the current region's variables without extra `dark:` classes. Color and density changes do not require rebuilding Tailwind. See [Theming](/en/guide/theming) for more options.
+
+## Common design variables
+
+Both versions use the same utility names and extend the theme while keeping Tailwind defaults.
+
+<div className="leaf-tailwind-table">
+
+| Design variable        | Utility examples                                                               |
+| ---------------------- | ------------------------------------------------------------------------------ |
+| Primary color          | `bg-leaf-primary`, `text-leaf-primary`, `text-leaf-on-primary`                 |
+| Status colors          | `text-leaf-success`, `text-leaf-warning`, `text-leaf-danger`, `text-leaf-info` |
+| Text colors            | `text-leaf-text`, `text-leaf-muted`, `text-leaf-subtle`                        |
+| Backgrounds            | `bg-leaf-surface`, `bg-leaf-surface-muted`, `bg-leaf-surface-raised`           |
+| Borders and focus      | `border-leaf-border`, `border-leaf-divider`, `ring-leaf-focus`                 |
+| Radii                  | `rounded-leaf`, `rounded-leaf-sm`, `rounded-leaf-md`, `rounded-leaf-lg`        |
+| Spacing                | `p-leaf`, `p-leaf-xs`, `gap-leaf-sm`, `p-leaf-md`, `gap-leaf-lg`, `m-leaf-xl`  |
+| Control heights        | `h-leaf-control`, `h-leaf-control-sm`, `h-leaf-control-lg`                     |
+| Font and type sizes    | `font-leaf`, `text-leaf`, `text-leaf-sm`, `text-leaf-lg`                       |
+| Weight and line height | `font-leaf-medium`, `font-leaf-heading`, `leading-leaf`                        |
+| Shadows                | `shadow-leaf-xs`, `shadow-leaf-sm`, `shadow-leaf-md`, `shadow-leaf-lg`         |
+
+</div>
+
+Color names also work with `border-*`, `ring-*`, `fill-*` and similar utilities. Type size utilities include the theme line height.
+
+<DocsCollapse title="More design variables">
+
+<div className="leaf-tailwind-table">
+
+| Design variable         | Utility examples                                                                                                                               |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| Primary interactions    | `hover:bg-leaf-primary-hover`, `active:bg-leaf-primary-active`                                                                                 |
+| Danger interactions     | `hover:bg-leaf-danger-hover`, `active:bg-leaf-danger-active`                                                                                   |
+| Text on status colors   | `text-leaf-on-warning`, `text-leaf-on-danger`                                                                                                  |
+| Border and option hover | `hover:border-leaf-border-hover`, `hover:bg-leaf-option-hover`                                                                                 |
+| Choice control radius   | `rounded-leaf-choice`                                                                                                                          |
+| Density spacing         | `gap-leaf-form-gap`, `gap-leaf-label-gap`, `py-leaf-row-padding`, `min-h-leaf-option-height`, `p-leaf-option-padding`, `px-leaf-field-padding` |
+| Dialog spacing          | `py-leaf-dialog-block`, `px-leaf-dialog-inline`, `gap-leaf-dialog-gap`                                                                         |
+| Transition durations    | `duration-leaf`, `duration-leaf-fast`, `duration-leaf-slow`                                                                                    |
+| Easing                  | `ease-leaf`, `ease-leaf-spring`                                                                                                                |
+| Overlay stacking        | `z-leaf-popup`, `z-leaf-modal`, `z-leaf-message`                                                                                               |
+
+</div>
+
+Combine motion utilities as `transition-colors duration-leaf ease-leaf motion-reduce:transition-none`. `theme.motion: false` disables regional transitions; `motion-reduce:` respects the system's reduced-motion preference.
+
+</DocsCollapse>
+
+## Usage tips
+
+- **Opacity**: Tailwind 4 supports `bg-leaf-primary/50`. In Tailwind 3, these colors do not support `/50`, `bg-opacity-*` or `text-opacity-*`; define translucent colors in application CSS.
+- **Source scanning**: Write complete class names such as `bg-leaf-primary` instead of constructing `bg-leaf-${color}`.
+- **Base styles**: A CSS-only page with no Leaf UI component imports also needs `@ifhover/leaf-ui/styles.css`.
+- **Breakpoints**: `sm:` and `md:` use your Tailwind configuration, independently of ConfigProvider breakpoints. Follow Tailwind 4's official browser support requirements.
+- **Regions and overlays**: Custom Portal content needs the intended theme scope too. Leaf UI overlays synchronize themes automatically. Configure component-specific variables through [ConfigProvider](/en/guide/theming).
diff --git a/apps/docs/docs/en/guide/theming.mdx b/apps/docs/docs/en/guide/theming.mdx
index d028faf..4c18ce4 100644
--- a/apps/docs/docs/en/guide/theming.mdx
+++ b/apps/docs/docs/en/guide/theming.mdx
@@ -1,253 +1,199 @@
-import { ThemePlayground } from '../../../src/components/theme-playground';
+import { ComponentExample } from '../../../src/components/component-example';
+import { ThemeBasic } from '../../../src/examples/en/theming/basic';
+import { ThemeAppearance } from '../../../src/examples/en/theming/appearance';
+import { ThemeScoped } from '../../../src/examples/en/theming/scoped';
 
 # Theming
 
-Configure components with [ConfigProvider](/en/components/config-provider). Start with a primary color, base radius and control height; related sizes and interaction colors are derived for you.
+Set colors, corner radii and dark mode through ConfigProvider's `theme`. A few settings are usually enough; related styles update automatically.
 
-## Start with a few settings
+## Change colors and corners
 
-Wrap the application and import the stylesheet once:
+Wrap your application in ConfigProvider. This example uses a purple primary color and an 8px base radius:
 
-```tsx
-import { Button, ConfigProvider, Input } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
+<ComponentExample title="Colors and corners" preview={<ThemeBasic />} fileName="basic.tsx" width="fit-content">
 
-export function App() {
-  return (
-    <ConfigProvider theme={{
-      primaryColor: '#7654c6',
-      borderRadius: 8,
-      controlHeight: 40,
-    }}>
-      <Input aria-label="Project name" placeholder="Project name" />
-      <Button>Save</Button>
-    </ConfigProvider>
-  );
-}
+```tsx lineNumbers file="../../../src/examples/en/theming/basic.tsx"
 ```
 
-Omitted settings use defaults. Hover, pressed, soft backgrounds and focus colors follow the primary color automatically.
-
-## Try your theme
+</ComponentExample>
 
-Choose a preset or a custom color, then adjust radius and appearance. Expand the theme code or copy it directly into your application.
+Replace Button with your application content. Buttons, fields, selectors and popups share the theme. Hover, pressed and focus colors derive automatically.
 
-<ThemePlayground />
+`borderRadius` sets the base radius. Cards, dialogs and other surfaces derive radii for their own level, so you do not need to configure each component. Numbers represent pixels; CSS lengths such as `'0.5rem'` also work.
 
-## Derived sizes
+### Common settings
 
-The defaults are a 10px base radius, 40px control height and 14px font size:
+These fields all belong inside `theme`. Set only what you want to change.
 
-| Base setting | Derived values | Default result |
+| Setting | Example | Purpose |
 | --- | --- | --- |
-| `borderRadius` | Small / medium / large radius × 0.6 / 1.2 / 1.6 | `6px / 12px / 16px` |
-| `controlHeight` | Small height − 6px; large height + 6px | `34px / 46px` |
-| `fontSize` | Small font − 1px; large font + 2px | `13px / 16px` |
-
-Numbers are pixels; CSS lengths with units are also accepted. Buttons, inputs and pickers share the same sizes.
+| `primaryColor` | `'#7654c6'` | Set the primary color and derive related interaction colors. |
+| `borderRadius` | `8` | Set the base radius; use `0` for square corners. |
+| `appearance` | `'light'` / `'dark'` | Choose light or dark appearance. |
+| `controlHeight` | `40` | Set the base single-line control height; small and large sizes follow. |
+| `fontSize` | `14` | Set the base component font size. |
+| `fontFamily` | `'Inter, sans-serif'` | Set the font family; your application loads the font files. |
+| `motion` | `false` | Disable regional animations while keeping interactions available. |
 
-Radii step down from the outside in: dialogs, drawers and popups use the large radius; content surfaces such as cards, alerts and choice cards use the medium radius; buttons, fields and table frames use the base radius; checkboxes and other small elements use the small radius; status tags are pills. Content surfaces are separated by hairline borders rather than shadows.
+Unspecified fields inherit the outer configuration. Defaults are light appearance, a 10px base radius, 36px base control height and 14px font size.
 
-Inset options and selected backgrounds derive their radius from the surface radius, padding and border: the default popup uses `16px - 6px - 1px = 9px`. Set `borderRadius` and `padding` through `theme.components.Floating` for shared popups; local `Dropdown` settings take precedence. Card `Tabs`, `Segmented` and `Menu` follow their own surfaces. Padding accepts numbers, CSS lengths and 1–4 value shorthand (such as `4px 8px`), updating the inner curves in each direction.
+See [LeafTheme](/en/components/config-provider#leaftheme) for all theme fields. For individual text colors, backgrounds or sizes, use [LeafThemeTokens](/en/api/theme-tokens#leafthemetokens).
 
-## Regional themes
+## Use dark mode
 
-Nested providers override only supplied settings, including individual token overrides:
+Set `appearance: 'dark'`. Use `'light'` to switch back:
 
 ```tsx
-<ConfigProvider theme={{ primaryColor: '#20834a', controlHeight: 36 }}>
-  <Button>Default region</Button>
-  <ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 16 }}>
-    <Button>Campaign region</Button>
-  </ConfigProvider>
+<ConfigProvider theme={{ appearance: 'dark' }}>
+  <App />
 </ConfigProvider>
 ```
 
-Floating panels, Modal, confirmations and messages inherit their calling region’s theme. ConfigProvider manages confirmations and messages automatically; descendants call useConfirm and useMessage. Set `locale` separately for built-in text.
+Component text, backgrounds and borders change together. An explicit `primaryColor` keeps its value; otherwise, the appearance supplies its default primary color.
 
-## Appearance and switching
+ConfigProvider styles the components in its region. It does not add a background to the page's `body`. To update your own page backgrounds and text, use the [CSS variables](#use-the-theme-in-application-css) below.
 
-```tsx
-import { useState } from 'react';
-import { Button, ConfigProvider } from '@ifhover/leaf-ui';
+### Add an appearance switch
 
-export function ThemeSwitch() {
-  const [dark, setDark] = useState(false);
-  return (
-    <ConfigProvider theme={{ appearance: dark ? 'dark' : 'light' }}>
-      <Button onClick={() => setDark(!dark)}>Switch appearance</Button>
-    </ConfigProvider>
-  );
-}
+Theme settings are ordinary React props, so state can update them. Toggle the switch below to change the card, button and text together:
+
+<ComponentExample title="Switch dark mode" preview={<ThemeAppearance />} fileName="appearance.tsx" width={360}>
+
+```tsx lineNumbers file="../../../src/examples/en/theming/appearance.tsx"
 ```
 
-Dark appearance supplies suitable text, surface, border and status colors. Explicit primary colors keep their value. Pair very light brand colors with a suitable `onPrimaryColor` override.
+</ComponentExample>
 
-## Advanced overrides
+### Follow the system
 
-Use `theme.tokens` when you need specific derived sizes, semantic colors, surfaces, typography, motion or overlay stacking:
+Use `useSystemAppearance` and pass its result to `theme.appearance` to follow the operating system:
 
 ```tsx
-import type { LeafTheme } from '@ifhover/leaf-ui';
+import { ConfigProvider, useSystemAppearance } from '@ifhover/leaf-ui';
 
-const theme: LeafTheme = {
-  controlHeight: 36,
-  borderRadius: 8,
-  tokens: {
-    controlHeightSm: 28,
-    borderRadiusLg: 18,
-    infoColor: '#1677ff',
-    motionDuration: 200,
-  },
-};
+export function AppTheme() {
+  const appearance = useSystemAppearance('light');
+
+  return (
+    <ConfigProvider theme={{ appearance }}>
+      <App />
+    </ConfigProvider>
+  );
+}
 ```
 
-Explicit small and large sizes take precedence over derived values. See [LeafThemeTokens](/en/components/config-provider#leafthemetokens) for all options.
+The `'light'` argument is the initial appearance. After mounting, the hook reads and watches system preferences. Your application stores manual choices and decides when to keep following the system.
 
-## Tune the interaction rhythm
+## Theme one region
 
-The default base duration is 200ms. Press and hover feedback use a shorter duration; selection, disclosure and overlays use timing suited to their change. Row reordering and dialog height changes continue from the current visual position.
+Nest another ConfigProvider to theme a specific area. The inner provider overrides only the supplied fields and inherits the rest:
 
-Use `tokens.motionDuration` to adjust the region's pace, `motionEasing` for ordinary transitions, and `motionSpring` for selection and shape changes:
+<ComponentExample title="Local theme" preview={<ThemeScoped />} fileName="scoped.tsx" width="fit-content">
 
-```tsx
-<ConfigProvider theme={{ tokens: {
-  motionDuration: 240,
-  motionEasing: 'cubic-bezier(0.22, 1, 0.36, 1)',
-  motionSpring: 'cubic-bezier(0.22, 1.28, 0.36, 1)',
-} }}>
-  <YourProduct />
-</ConfigProvider>
+```tsx lineNumbers file="../../../src/examples/en/theming/scoped.tsx"
 ```
 
-`motion: false` stops CSS and JavaScript animations in the region, including loading rotation and portals. An inner `motion: true` region can resume motion. The system's reduced-motion preference always takes precedence. Direct interactions such as typing, dragging and cropping respond immediately.
+</ComponentExample>
 
-Surfaces and text use neutral grays, with the primary color reserved for actions and selection. Use `subtleTextColor`, `raisedSurfaceColor`, `borderHoverColor` and `shadowXs` to refine the hierarchy.
+Both buttons use an 8px base radius. The inner provider changes only the primary color to purple. Select popups, Modal, and feedback created with `useConfirm` or `useMessage` also use their calling region's theme.
 
-## Reuse styles in your own components
+## Adjust control size and density
 
-Read the current region's CSS variables in your application styles. Use ConfigProvider to configure Leaf UI, and `var()` to make custom components follow that configuration:
+For one control, prefer its `size="sm"` or `size="lg"` prop. To make an entire region more compact, set ConfigProvider's `density`:
 
 ```tsx
-<ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 8 }}>
-  <button className="product-button" type="button">Custom button</button>
-  <Button>Leaf UI button</Button>
+<ConfigProvider density="compact">
+  <App />
 </ConfigProvider>
 ```
 
-```scss
-.product-button {
-  min-height: var(--leaf-control-height);
-  padding: 0 14px;
-  border: 0;
-  border-radius: var(--leaf-radius);
-  background: var(--leaf-color-primary);
-  color: var(--leaf-color-on-primary);
-  font-family: var(--leaf-font-family);
-  font-size: var(--leaf-font-size);
-  font-weight: var(--leaf-font-weight);
-  cursor: pointer;
-}
-```
+`density` is a sibling of `theme`. It defaults to `'comfortable'`. The `'compact'` preset tightens control, form and popup spacing and changes the base control height from 36px to 30px without reducing text size.
 
-| Variables to read | Purpose |
-| --- | --- |
-| `--leaf-color-primary` / `--leaf-color-on-primary` | Primary background and foreground |
-| `--leaf-color-danger` / `--leaf-color-success` / `--leaf-color-warning` / `--leaf-color-info` | Semantic colors |
-| `--leaf-color-text` / `--leaf-color-text-muted` | Main / secondary text |
-| `--leaf-color-surface` / `--leaf-color-surface-muted` / `--leaf-color-border` | Surfaces and borders |
-| `--leaf-radius` / `--leaf-radius-sm` / `--leaf-radius-md` / `--leaf-radius-lg` | Base / small / medium / large radius |
-| `--leaf-control-height` / `--leaf-control-height-sm` / `--leaf-control-height-lg` | Base / small / large height |
-| `--leaf-font-family` / `--leaf-font-size` / `--leaf-font-weight` | Typography |
-| `--leaf-motion-duration` / `--leaf-motion-fast` / `--leaf-motion-slow` | Base / fast / layout transition duration |
-| `--leaf-motion-easing` / `--leaf-motion-spring` | Ordinary / spring easing |
-
-Place custom components inside the intended provider. Import the compiled `styles.css`; consumers do not need Sass.
+Set `theme.controlHeight` when you need an explicit height; it overrides the density preset. For example, `controlHeight: 40` produces 34px / 40px / 46px controls. See [ConfigProvider](/en/components/config-provider#base-height) for a size comparison.
 
-## Server rendering
+## Advanced customization
 
-Static CSS and dynamic themes work together without generating CSS at runtime. See [SSR usage](/en/guide/ssr) for Next.js and other frameworks.
+Use the settings below when your design needs more specific overrides. For colors, corners and appearance, the basic settings above are sufficient.
 
-## Spacing, typography and component overrides
+### Override individual colors or sizes
 
-`spacing` derives small and large spacing. `lineHeight`, `headingWeight` and `elevation` configure body line height, Typography heading weight and shadows; dialog, card and other component titles use `tokens.fontWeight`. Keep configuring through ConfigProvider; use `theme.components` for scoped component overrides:
+Use `theme.tokens` for specific styles beyond the basic settings. This example adjusts the success color, large radius and animation duration:
 
 ```tsx
+import type { LeafTheme } from '@ifhover/leaf-ui';
+
 const theme = {
-  spacing: 8, lineHeight: 1.6, headingWeight: 600, elevation: 'soft',
-  components: {
-    Button: { borderRadius: 6, padding: '0 18px' },
-    Input: { borderRadius: 6, controlHeight: 36 },
-    Card: { padding: 16, shadow: '0 6px 20px #0001' },
+  primaryColor: '#7654c6',
+  borderRadius: 8,
+  tokens: {
+    successColor: '#20834a',
+    borderRadiusLg: 18,
+    motionDuration: 160,
   },
 } satisfies LeafTheme;
 ```
 
-Use exported component names. Each component consumes tokens relevant to its layout: input controls use radius, height, background and font size; containers use padding and shadow; layout components use gaps. For further changes, use component `className` / `style` and popup `popupClassName` / `popupStyle`.
+Pass this object to `<ConfigProvider theme={theme}>`. Here, `borderRadiusLg` overrides the derived large radius, and numeric `motionDuration` values are milliseconds. See [LeafThemeTokens](/en/api/theme-tokens#leafthemetokens) for the complete reference.
+
+For a very light primary color, use `tokens.onPrimaryColor` to set the text color on solid primary buttons. Check readability in normal, hovered and disabled states after changing your palette. `motion: false` disables regional animations; system reduced-motion preferences always take precedence.
+
+### Style one component type
 
-## System appearance, responsive breakpoints and contrast
+`theme.components` assigns styles by component name. For example, use 4px button corners and change card padding:
 
 ```tsx
-import { ConfigProvider, colorContrast, useBreakpoint, useSystemAppearance } from '@ifhover/leaf-ui';
-function Application() {
-  const appearance = useSystemAppearance('light');
-  return <ConfigProvider theme={{ appearance, breakpoints: { md: 800 } }}><Content /></ConfigProvider>;
-}
-function Content() {
-  const { md } = useBreakpoint({ md: false });
-  return <p>{md ? 'Wide layout' : 'Compact layout'}</p>;
-}
-const contrast = colorContrast('#ffffff', '#20834a');
+<ConfigProvider theme={{
+  components: {
+    Button: { borderRadius: 4 },
+    Card: { padding: 24 },
+  },
+}}>
+  <App />
+</ConfigProvider>
 ```
 
-`useBreakpoint` reads breakpoints from the current region for your application layout. Grid's existing `sm/md/lg` CSS rules still use the fixed breakpoints listed in its docs. `colorContrast` returns a WCAG contrast ratio, or `null` for invalid colors. Transparent colors are composited with the background and optional third canvas argument. Aim for 4.5 for ordinary text, or 3 for large text.
+See [LeafComponentTokens](/en/api/theme-tokens#leafcomponenttokens) for style fields, and each component's documentation for the fields it supports.
 
-System preferences update after client hydration. For SSR, start with a server Cookie or a consistent fallback; see [SSR](/en/guide/ssr).
+`theme.components` changes styles. To set default button `size`, `variant` or other component props, use ConfigProvider's separate `components` prop; see [Component defaults](/en/components/config-provider#component-defaults).
 
-## Section surfaces
+### Use the theme in application CSS
 
-Dialog sections, rich choices and neutral alerts derive their appearance from the same base theme. The muted surface controls supporting areas, and dividerColor is an optional advanced override. Configure individual section backgrounds through components; Confirm shares Modal settings. Header and footer backgrounds apply to Modal, Drawer and Card; borderColor also applies to rich Checkbox/Radio and Alert surfaces.
+ConfigProvider exposes `--leaf-*` CSS variables within its region. Your own content can read them to follow color and appearance changes:
 
 ```tsx
-<ConfigProvider
-  theme={{
-    primaryColor: '#20834a',
-    borderRadius: 10,
-    components: {
-      Modal: { footerBackground: 'var(--leaf-color-surface-muted)' },
-      Card: { borderColor: 'var(--leaf-color-divider)' },
-    },
-  }}
->
-  <App />
+<ConfigProvider theme={{ appearance: 'dark' }}>
+  <section className="app-panel">Application content</section>
 </ConfigProvider>
 ```
 
-## LeafComponentTokens
+```css
+.app-panel {
+  padding: 16px;
+  color: var(--leaf-color-text);
+  background: var(--leaf-color-surface);
+  border: 1px solid var(--leaf-color-border);
+  border-radius: var(--leaf-radius);
+}
+```
 
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `borderRadius` | `string \| number` | — | Border radius; numbers are pixels. |
-| `controlHeight` | `string \| number` | — | Base control height, deriving other sizes. |
-| `padding` | `string \| number` | — | Padding for content or a highlighted target. |
-| `gap` | `string \| number` | — | Gap between items; numbers are pixels. |
-| `fontSize` | `string \| number` | — | Font size; numbers are pixels. |
-| `color` | `string` | — | Color or semantic tone. |
-| `background` | `string` | — | Component surface background. |
-| `borderColor` | `string` | — | Color of outer borders and section dividers. |
-| `headerBackground` | `string` | — | Header background; inherits the surface by default. |
-| `footerBackground` | `string` | — | Footer background; divided surfaces use the muted surface by default. |
-| `shadow` | `string` | — | CSS box-shadow value. |
+| Common variable | Purpose |
+| --- | --- |
+| `--leaf-color-primary` | Current primary color. |
+| `--leaf-color-on-primary` | Text on a solid primary background. |
+| `--leaf-color-text` / `--leaf-color-text-muted` | Primary and secondary text. |
+| `--leaf-color-surface` / `--leaf-color-surface-muted` | Content and supporting backgrounds. |
+| `--leaf-color-border` | Border color. |
+| `--leaf-radius` | Base radius. |
 
-## LeafThemeStyle
+Configure Leaf UI component themes through ConfigProvider and read the results from application CSS. Changing a single base CSS variable does not regenerate the full set of interaction colors.
 
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `` [key: `--leaf-${string}`] `` | `string \| number \| undefined` | — | Reusable CSS custom property. |
+For Tailwind CSS, import the package configuration to reuse the theme through utilities such as `bg-leaf-surface` and `text-leaf-primary`. See [Tailwind CSS](/en/guide/tailwindcss) for Tailwind 3 / 4 setup.
 
+## Server rendering
 
-## Density and portable colors
+Use the same appearance for the server and the client's initial render. To remember a user's choice, read a cookie on the server and supply that initial value. System appearance updates after mounting.
 
-Use `<ConfigProvider density="compact">` to reduce control heights and spacing throughout a region, including portals. Explicit theme sizes take precedence. Derived colors are calculated in JavaScript; static light/dark palettes support standalone CSS and SSR. Pass concrete colors for a deterministic first frame; CSS variables resolve in the browser.
+Prefer concrete HEX, RGB or HSL colors. A color such as `var(--brand-color)` resolves after mounting in the browser and cannot guarantee matching derived colors in the server's first frame.
 
-See [Browser compatibility](./compatibility), [Design resources](./design-resources) and [Visual standards](./design-standards).
+See [Installation & quick start](/en/guide/getting-started) for setup, [server-side rendering](/en/guide/ssr) for frameworks such as Next.js, and [Browser compatibility](/en/guide/compatibility) for support targets.
diff --git a/apps/docs/docs/en/guide/workspace.mdx b/apps/docs/docs/en/guide/workspace.mdx
index 4e5625f..8249acf 100644
--- a/apps/docs/docs/en/guide/workspace.mdx
+++ b/apps/docs/docs/en/guide/workspace.mdx
@@ -1,19 +1,5 @@
-import { BusinessWorkspace } from '../../../src/examples/scenarios/workspace';
+# Workspace composition
 
-# Complete workspace
+Use [Layout](../components/layout) for the page shell, [Flex](../components/flex) and [Grid](../components/grid) for layout, [Form](../components/form) for editing, and [Table](../components/table) for structured data.
 
-A working project-management and team-settings page. Search, create, edit, archive and restore projects, then save team details, appearance, density and background blur preferences.
-
-<BusinessWorkspace />
-
-This example uses in-memory data and a 350ms simulated save; refreshing restores the initial data. Enter an existing project name to exercise server field errors and retry. Required names and email addresses use native form validation. Search for an unknown name to see the empty state. Discard changes to restore saved preferences.
-
-Replace the simulated save with your API and handle authentication, persistence and cancellation in the application.
-
-<details>
-<summary>View source</summary>
-
-```tsx lineNumbers file="../../../src/examples/scenarios/workspace.tsx"
-```
-
-</details>
+Keep authentication, persistence and request cancellation in application code. Component pages show focused API examples.
diff --git a/apps/docs/docs/guide/accessibility.mdx b/apps/docs/docs/guide/accessibility.mdx
deleted file mode 100644
index bbc6d32..0000000
--- a/apps/docs/docs/guide/accessibility.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { AccessibilityWorkbench } from '../../src/examples/scenarios/accessibility';
-
-# 可访问性验收
-
-使用下面的工作台检查键盘、主题、密度、浮层和减少动态效果。组件提供基础语义；应用还需要为业务字段、图标按钮和复合控件补充合适的名称与说明。
-
-<AccessibilityWorkbench />
-
-| 检查 | 预期 |
-| --- | --- |
-| Tab / Shift+Tab | 顺序合理，焦点可见，禁用操作不进入顺序 |
-| Enter / Space / 方向键 | 按钮可触发，选择和标签页可切换，Slider 可调整 |
-| 弹窗 + 内部 Select | 焦点留在浮层体系内，Escape 先关闭内部浮层，再关闭弹窗 |
-| 关闭浮层 | 焦点返回打开按钮，页面恢复可滚动与可操作 |
-| 空字段 / 无效邮箱 | 显示字段错误，焦点定位到需要修正的字段 |
-| 深浅色 / 高对比度 | 焦点、状态和文本仍可辨认；业务自定义色需重新测量对比度 |
-| 200% / 400% 放大 | 320 CSS px 宽度可重排，操作可见，无不必要的页面横向滚动 |
-| 触屏 | 点按可开关浮层，关键操作目标足够大，不依赖 hover |
-| 减少动态效果 | 关闭动画后所有流程仍可使用 |
-
-自动检查使用 axe 与真实浏览器行为断言，不进行截图基线对比。Chromium/WebKit 模拟的触摸与视口重排不能代替真机浏览器缩放测试。读屏器需另行人工验收：Windows + NVDA，macOS/iOS + VoiceOver，并记录版本、读出的名称/角色/状态及错误通知。未经人工执行的项目必须标记“待验收”。实际记录见仓库 `packages/react/ACCESSIBILITY.md`。
diff --git a/apps/docs/docs/guide/compatibility.mdx b/apps/docs/docs/guide/compatibility.mdx
index 27a3a4e..02de30a 100644
--- a/apps/docs/docs/guide/compatibility.mdx
+++ b/apps/docs/docs/guide/compatibility.mdx
@@ -1,6 +1,21 @@
+import { withBase } from '@rspress/core/runtime';
+
 # 浏览器兼容性
 
-建议使用当前与上一代稳定版 Chrome、Edge、Firefox 或 Safari。工程基线为 Chrome/Edge 109、Firefox 121、Safari 16.4；这些最低版本是支持目标，不能等同于已逐个实测的版本。IE 和旧版 WebView 不在支持范围内。
+建议使用 Chrome、Edge、Firefox 或 Safari 的当前或上一代稳定版。
+
+## 最低版本
+
+| 浏览器 | 最低版本要求 |
+| --- | --- |
+| <span className="leaf-browser-name"><img src={withBase('/browsers/chrome.svg')} width={20} height={20} alt="" /> Google Chrome</span> | 109 及以上 |
+| <span className="leaf-browser-name"><img src={withBase('/browsers/edge.svg')} width={20} height={20} alt="" /> Microsoft Edge</span> | 109 及以上 |
+| <span className="leaf-browser-name"><img src={withBase('/browsers/firefox.svg')} width={20} height={20} alt="" /> Mozilla Firefox</span> | 121 及以上 |
+| <span className="leaf-browser-name"><img src={withBase('/browsers/safari.svg')} width={20} height={20} alt="" /> Safari</span> | 16.4 及以上 |
+
+表中版本是 Leaf UI 的最低支持目标，不代表已逐个版本完成实测。IE、旧版 Edge（EdgeHTML）和旧版 WebView 不在支持范围内。
+
+## 功能与降级
 
 | 能力 | 实现与降级 |
 | --- | --- |
@@ -21,4 +36,6 @@
 
 颜色支持具体 hex、rgb、hsl 和命名色，推荐通过 `theme` / `tokens` 配置。JS 无法在服务端解析 CSS 变量；使用 `var(...)` 时，浏览器在挂载后解析并生成派生值，祖先的 class/style 变化会重新同步。需要严格一致的 SSR 首屏时应传入具体颜色。不要只改 CSS 中的基础色而期望所有派生色自动重新计算。
 
+## 验证范围
+
 CI 已配置 Chromium、Firefox、WebKit 行为测试，以及 React 18/19、SSR 和包导出检查。WebKit 的通过不代表已经在真实 Safari 或 iOS 设备验收。当前本机 Firefox 启动存在环境问题（`spawn UNKNOWN`），不能将其列为通过；具体已执行记录见仓库 `packages/react/ACCESSIBILITY.md`。
diff --git a/apps/docs/docs/guide/control-contracts.mdx b/apps/docs/docs/guide/control-contracts.mdx
deleted file mode 100644
index 040b6c4..0000000
--- a/apps/docs/docs/guide/control-contracts.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-# 控件与浮层
-
-输入控件与浮层使用一致的状态约定。
-
-## 禁用与只读
-
-- `disabled` 禁止交互，也不参加原生表单提交。`Form disabled` 会禁用所有内部控件，单个控件的 `disabled={false}` 不会绕过它。
-- `readOnly` 锁定业务值，禁止输入、选项选择、清除与标签删除；已有值仍可以提交。
-- 日期、时间和 Select 的 `inputReadOnly` 只关闭键盘输入，仍允许面板选择。它适合需要减少输入错误的场景。
-- `required` 按整个字段的值校验，CheckboxGroup、Transfer 等内部搜索框不会额外成为必填项。
-
-## 原生表单与重置
-
-传入 `name` 后可通过 `new FormData(form)` 读取值。多选值使用 `data.getAll(name)`；具体序列化方式见各组件文档。非受控组件通过 `defaultValue` 提供初始值，原生 `reset` 恢复初始值；受控组件需要同步重置应用状态。
-
-日期的 `format` 控制显示文字和 `onChange` 的文字参数；FormData 仍使用稳定格式：日期 `YYYY-MM-DD`、时间 `HH:mm[:ss]`、区间 `start/end`。避免把用户显示格式当作服务端交换格式。
-
-## 定制浮层
-
-选择器共用下面的浮层选项。单个组件的配置优先于 ConfigProvider 的 `getPopupContainer`。`popupRender` 可附加操作区，保留收到的内容以维持键盘操作。
-
-```tsx
-import { ConfigProvider, Select } from '@ifhover/leaf-ui';
-
-<ConfigProvider getPopupContainer={() => document.getElementById('overlay-root')!}>
-  <Select
-    options={[{ value: 'design', label: '设计' }]}
-    popupPlacement="bottom-start"
-    popupStyle={{ maxHeight: 320 }}
-    popupRender={content => <>{content}<p>选择一个团队</p></>}
-  />
-</ConfigProvider>
-```
-
-容器应该在交互发生前挂载。浮层会复制触发区域的主题与方向；避免把它放进会裁剪内容的容器。Modal / Drawer 的同类配置名为 `container`。
-
-## Shadow DOM 与微前端
-
-`getPopupContainer` 可以返回 ShadowRoot。组件的样式也必须导入对应的 ShadowRoot；外部页面的 CSS 不会穿过这个边界。可将同一份编译 CSS 放到影子根的 `style` / `link` 或 `adoptedStyleSheets` 中。优先为每个应用区域配置容器，避免多个微前端共享未知的样式与层级。
-
-## 可扩展语言与方向
-
-内置 `zh-CN`、`zh-TW`、`en-US`。`messages` 覆盖控件的常用文本，`textMessages` 用英语原文作为键覆盖扩展组件文本。`weekStartsOn` 设置周起点（0 为周日，1 为周一），`direction="rtl"` 设置区域方向；浮层同时继承。
-
-```tsx
-<ConfigProvider
-  locale="zh-TW"
-  weekStartsOn={0}
-  messages={{ empty: '沒有可選項目' }}
-  textMessages={{ 'Next': '下一步' }}
->
-  <Select options={[]} />
-</ConfigProvider>
-```
-
-自定义 `locale` 使用 BCP 47 名称，让数字与日期的 Intl 格式保持一致，并通过两个消息属性提供自己的翻译。完整文本字段见 [LeafMessages](/components/config-provider#leafmessages)。
-
-## PopupOptions
-
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `popupPlacement` | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | — | 浮层相对触发控件的位置。 |
-| `popupClassName` | `string` | — | 浮层的自定义类名。 |
-| `popupStyle` | `CSSProperties` | — | 浮层的自定义样式。 |
-| `popupRender` | `(content: React.ReactNode) => React.ReactNode` | — | 包装或补充面板内容，保留传入的内容以维持交互。 |
-| `getPopupContainer` | `() => Element \| DocumentFragment` | — | 返回浮层的挂载容器，也可返回 ShadowRoot。 |
diff --git a/apps/docs/docs/guide/design-resources.mdx b/apps/docs/docs/guide/design-resources.mdx
deleted file mode 100644
index 8c952a8..0000000
--- a/apps/docs/docs/guide/design-resources.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { withBase } from '@rspress/core/runtime';
-
-# 设计资源
-
-资源由组件运行时使用的颜色、派生配方和密度参数生成，便于设计与实现保持一致。
-
-- <a href={withBase('/design/leaf.tokens.json')} download>DTCG tokens</a>：标准颜色、尺寸、行高与动效时长。
-- <a href={withBase('/design/leaf.tokens-studio.json')} download>Tokens Studio tokens</a>：兼容 `type` / `value` 格式，选择一个外观和一个密度集合。
-- <a href={withBase('/design/leaf-light-foundations.svg')} download>浅色基础变量</a>、<a href={withBase('/design/leaf-dark-foundations.svg')} download>深色基础变量</a>。
-- <a href={withBase('/design/leaf-light-components.svg')} download>浅色组件状态</a>、<a href={withBase('/design/leaf-dark-components.svg')} download>深色组件状态</a>：可编辑文字、路径与命名分组。
-- <a href={withBase('/design/leaf-figma-plugin.zip')} download>本地 Figma 导入插件</a>：原生颜色/密度变量、Button 与 Input 组件变体。
-
-SVG 可直接拖入 Figma。插件解压后，在 Figma 桌面端选择 **Plugins → Development → Import plugin from manifest**，导入 `manifest.json` 并运行 **Leaf UI Resources**。每次运行创建一个页面与变量集合；可使用 Undo 撤回。字体使用 Inter，缺少时插件选择可用字体。
-
-插件包括 Button 的四种外观、四种状态和两种密度，Input 的默认、焦点、错误、禁用状态与两种密度。颜色填充与控件高度绑定变量。其余 SVG 是可编辑设计参考，可在 Figma 中进一步转换为组件。
-
-在仓库运行 `pnpm design:export` 可重新生成资源。本地已检查 JSON、SVG 与 JavaScript 语法；Figma 实际导入效果需要人工验收。这套资源尚未发布为在线 Figma 组件库。
diff --git a/apps/docs/docs/guide/design-standards.mdx b/apps/docs/docs/guide/design-standards.mdx
index 256bafb..5d37682 100644
--- a/apps/docs/docs/guide/design-standards.mdx
+++ b/apps/docs/docs/guide/design-standards.mdx
@@ -2,13 +2,18 @@
 
 统一使用语义颜色、尺寸与间距变量，组件在深浅色、舒适与紧凑模式下保持一致。完整规范维护在仓库 `DESIGN-STANDARDS.md`。
 
+Card 的小、默认和大尺寸统一调整留白、标题字号和标题栏高度，内嵌 Tabs 默认跟随卡片尺寸。标签页与标题共用一个头部区域：有标题时在标题下方，没有标题时占满标题栏高度并垂直居中，分割线只位于整条标签栏下方。标签文字与正文左边缘对齐，页面内容沿用卡片内边距，底部继续由 `divided` 控制分区外观。
+
 警告状态统一使用明亮的黄橙色，图标、控件边框和状态填充保持一致；文字使用独立派生的可读颜色。可通过 ConfigProvider 的 `theme.tokens.warningColor` 定制警告色。
 
-下拉菜单的悬停、键盘定位与按下共用移动高亮背景，危险项的颜色平滑过渡。Select 的选中项和移动高亮使用相同底色，经过选中项时保持连续移动；选中值通过文字与勾选标记区分。
+下拉选项统一使用灰色的悬停与键盘候选背景，已选中项保留主题色底色、文字和勾选标记。Select、自动完成、级联、树选择、时间列表和菜单使用同一配色方案；自动完成、提及和命令面板中的候选项仍使用灰色。移动背景平滑切换位置和颜色，经过选中项时不会叠色；禁用项不响应交互，危险操作保留红色提示。配色随 ConfigProvider 的区域主题与深浅外观调整。
+
+Select、TreeSelect 和 Cascader 的多选标签使用一致的尺寸与间距。默认可换行，`tagWrap={false}` 保持单行并以 `+N` 折叠超出部分；长标签自动省略，搜索框和操作按钮始终保留空间。折叠只影响展示，不改变已选值。
 
 | 基础项 | 舒适 | 紧凑 |
 | --- | --- | --- |
-| 控件高度 | 40px | 34px |
+| 控件高度 | 36px | 30px |
+| 下拉选项最小高度 | 32px | 26px |
 | 正文字号 / 行高 | 14px / 1.6 | 14px / 1.6 |
 | 间距单位 | 8px | 6px |
 | 表单行间距 | 24px | 16px |
@@ -18,14 +23,22 @@
 
 主按钮和描边按钮点击后沿外轮廓快速扩散一圈波纹，再缓慢淡出，按钮与文字保持稳定；文字按钮不展示波纹。主按钮悬停提亮、按下加深，描边按钮通过文字和边框变色反馈。菜单和标签页通过颜色、透明度、边框和阴影反馈，选中指示器可以移动到目标项。抽屉平滑滑入；提示内容整体出现，图标和文字不单独回弹。关闭区域动效或系统减少动态效果时，按钮不展示波纹；系统偏好优先于页面设置。
 
-层级由圆角、边框和文字共同建立。圆角由外向内递减：弹窗、抽屉和浮层使用大圆角，卡片、提示与选项卡片等内容表面使用中圆角，按钮、输入框和表格外框使用基础圆角，复选框等小元素使用小圆角，状态标签为胶囊形。内容表面依靠细边框和浅灰底区分，不叠加阴影；阴影只留给真正浮起的层，例如浮层、弹窗、拖动中的项目和滑块把手。文字层级依靠字号与颜色：正文 14px、辅助文字 13px，组件标题、标签和按钮使用 500 字重，600 只用于文档标题；选项分组等小标题使用 12px、加字距的灰色样式。
+层级由圆角、边框和文字共同建立。圆角由外向内递减：弹窗、抽屉和浮层使用大圆角，卡片、提示与选项卡片等内容表面使用中圆角，按钮、输入框和表格外框使用基础圆角，复选框等小元素使用小圆角，状态标签使用无边框的小圆角。内容表面依靠细边框和浅灰底区分，不叠加阴影；阴影只留给真正浮起的层，例如浮层、弹窗、拖动中的项目和滑块把手。文字层级依靠字号与颜色：正文 14px、辅助文字 13px，组件标题、标签和按钮使用 500 字重，600 只用于文档标题；选项分组等小标题使用 12px、加字距的灰色样式。
 
 紧贴容器的内部背景采用嵌套圆角：`内部圆角 = max(0px, 外框圆角 − 内边距 − 边框厚度)`。默认浮层的外框为 16px、内边距为 6px、边框为 1px，因此选项为 9px。悬停、选中和移动高亮背景使用同一轮廓，并随主题自动更新；非等距留白按各方向计算，多层结构计入额外留白。小圆角和直角主题收敛到 0，独立控件、日历格子、标签和图标继续使用各自的语义圆角。
 
+Menu 的导航项、悬停背景与移动选中高亮使用和按钮一致的基础圆角，不随菜单内边距缩小；单独配置 Menu 圆角时，这些轮廓一起更新。
+
+Pagination 默认使用描边按钮，也可切换为无边框样式；尺寸沿用控件高度，按下时保持位置与大小，选中背景平滑移动。描边按钮通过文字和边框变色反馈，无边框按钮使用中性背景。
+
+卡片样式 Tabs 的内层标签和移动选中背景使用相同圆角，由标签栏圆角减去实际留白和边框派生，最小为零，跟随区域主题或组件级圆角配置。标签栏随内容收缩，尺寸包含边框和内边距，正文仍使用可用宽度。
+
+Tag 仅提供无边框的浅底和实色形态，圆角取主题小圆角的六分之五，默认 5px；组件级圆角配置优先。
+
 组件验收要覆盖默认、悬停、按下、键盘焦点、选中、禁用、加载、错误、空状态。状态同时用文字或 ARIA 表达，不能只依靠颜色。图标按钮需要可访问名称；图标与文本的基线、弹窗表单与页脚边缘需要对齐。
 
 紧凑模式面向鼠标和键盘的信息密集页面，不缩小正文字号。触屏优先舒适或更大的显式尺寸；必要操作目标至少 24px，推荐 44px。尺寸覆盖的顺序是局部组件设置、显式主题尺寸、区域密度、默认值。
 
-按钮的横向留白随实际高度按比例生成，各尺寸都可以用组件级 `padding` 定制。小尺寸步骤条保留正文字号，卡片和列表形式的选项组使用统一的分区标题。Modal 的标题图标与浅分隔线适合丰富内容；Confirm 是通过 API 调用的简短提示，使用留白分区，图标放在正文旁。没有副标题时减少头部留白，Modal 和 Confirm 的底部操作区保持紧凑。
+按钮的横向留白随实际高度按比例生成，各尺寸都可以用组件级 `padding` 定制。小尺寸步骤条保留正文字号，卡片和列表形式的选项组使用统一的分区标题。Card 标题区域的上下留白一致，与正文衔接时不重复叠加间距。Modal 的标题图标与浅分隔线适合丰富内容；Confirm 是通过 API 调用的简短提示，使用留白分区，图标放在正文旁。没有副标题时减少头部留白，Card 分区、Modal 和 Drawer 的底部操作区使用一致的紧凑留白；Confirm 沿用相同的底部留白。
 
 链接按钮无背景、边框、内边距和固定控件高度，悬停 / 按下只改变文字颜色，不展示波纹。页面跳转使用 Link；Button 的链接样式用于文字操作。
diff --git a/apps/docs/docs/guide/getting-started.mdx b/apps/docs/docs/guide/getting-started.mdx
index 8b8b58f..78219fe 100644
--- a/apps/docs/docs/guide/getting-started.mdx
+++ b/apps/docs/docs/guide/getting-started.mdx
@@ -1,37 +1,40 @@
 import { ComponentExample } from '../../src/components/component-example';
 import { GettingStartedExample } from '../../src/components/guide-examples';
+import { PackageInstall } from '../../src/components/package-install';
 
 # 安装&快速开始
 
-Leaf UI 支持 React 18 与 React 19。安装组件包并引入样式后，就可以在 React 页面中使用。
+Leaf UI 支持 React 18 与 React 19。安装后即可在 React 页面中使用，基础样式与组件样式会自动加载。
 
 ## 安装组件包
 
 在你的 React 项目目录下执行：
 
+<PackageInstall>
+
 ```bash
-pnpm add @ifhover/leaf-ui
+npm install @ifhover/leaf-ui
 ```
 
-也可以使用 npm 或 Yarn：
-
 ```bash
-npm install @ifhover/leaf-ui
-# 或者
 yarn add @ifhover/leaf-ui
 ```
 
-React 和 React DOM 由你的应用提供。如果项目尚未安装，请先执行 `pnpm add react react-dom`。可在 [npm](https://www.npmjs.com/package/@ifhover/leaf-ui) 查看最新版本。
+```bash
+pnpm add @ifhover/leaf-ui
+```
 
-## 引入样式
+```bash
+bun add @ifhover/leaf-ui
+```
 
-在应用入口导入一次基础样式，包含主题变量、公共浮层和 Confirm、Message 等 API 服务的样式：
+</PackageInstall>
 
-```tsx title="src/main.tsx"
-import '@ifhover/leaf-ui/styles.css';
-```
+React 和 React DOM 由你的应用提供。如果项目尚未安装，请先执行 `pnpm add react react-dom`。可在 [npm](https://www.npmjs.com/package/@ifhover/leaf-ui) 查看最新版本。
+
+浏览器打包时，组件入口会自动加载主题变量、公共样式与所需的组件和服务样式，无需手动导入 CSS 或安装 Sass。Next.js、TanStack Start 等框架的额外配置见[服务端渲染](/guide/ssr)。
 
-浏览器打包时，组件入口会自动加载组件样式，无需再手动导入每个组件的 CSS，也无需安装 Sass。Next.js 等框架的配置见 [SSR 使用](/guide/ssr)。
+示例通过 Flex、Space、Grid 和 FormField 组织布局，无需安装 Tailwind CSS。
 
 ## 使用组件
 
@@ -50,7 +53,7 @@ import '@ifhover/leaf-ui/styles.css';
 
 - [组件总览](/components/)：浏览可用组件。
 - [Button 按钮](/components/button)：查看样式、尺寸、加载状态与完整 API。
-- [使用图标](/guide/icons)：通过 Lucide 图标表达操作。
-- [定制主题](/guide/theming)：实时调整颜色、圆角和外观。
-- [SSR 使用](/guide/ssr)：在 Next.js 等框架中使用组件。
+- [使用图标](/components/icons)：通过 Lucide 图标表达操作。
+- [定制主题](/guide/theming)：设置主题色、圆角和深色模式。
+- [服务端渲染](/guide/ssr)：Next.js、TanStack Start 等框架的额外配置。
 - [浏览器兼容性](./compatibility)：查看支持的浏览器与降级策略。
diff --git a/apps/docs/docs/guide/icons.mdx b/apps/docs/docs/guide/icons.mdx
deleted file mode 100644
index ed5d870..0000000
--- a/apps/docs/docs/guide/icons.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ComponentExample } from '../../src/components/component-example';
-import { ButtonIcons } from '../../src/components/button-examples';
-
-# 使用图标
-
-Leaf UI 使用 **Lucide** 图标。按钮通过 startIcon / endIcon 放置图标，输入框通过 prefix / suffix 放置装饰图标。
-
-## 安装和导入
-
-在应用中直接引用图标时，将 lucide-react 声明为应用依赖：
-
-```bash
-pnpm add lucide-react
-```
-
-按名称导入需要的图标即可。尺寸默认跟随组件的图标容器，颜色继承组件的当前文字色。
-
-<ComponentExample title="图标使用" preview={<ButtonIcons />} fileName="icons.tsx">
-
-```tsx lineNumbers file="../../src/examples/button/icons.tsx"
-```
-
-</ComponentExample>
-
-## 为图标操作提供名称
-
-带文字的按钮使用文字作为名称，前后图标按装饰性内容处理。仅图标按钮必须提供 aria-label，例如“添加项目”或“删除项目”。图标不应作为操作含义的唯一提示。
-
-Leaf UI 的图标属性接受 ReactNode，也可以传入你现有项目的图标组件。Button 的危险状态会让图标和文字一起使用危险色，无需在图标中固定颜色。
diff --git a/apps/docs/docs/guide/internationalization.mdx b/apps/docs/docs/guide/internationalization.mdx
new file mode 100644
index 0000000..70293a8
--- /dev/null
+++ b/apps/docs/docs/guide/internationalization.mdx
@@ -0,0 +1,29 @@
+# 切换语言
+
+通过 ConfigProvider 的 `locale` 设置组件语言，日期面板、空状态、清除按钮等内置文本会一起切换。
+
+## 设置语言
+
+在应用入口用 ConfigProvider 包住页面，指定语言代码即可。下面将日期面板的内置文本切换为英文：
+
+```tsx
+import { ConfigProvider, DatePicker } from '@ifhover/leaf-ui';
+
+export default function App() {
+  return (
+    <ConfigProvider locale="en-US">
+      <DatePicker />
+    </ConfigProvider>
+  );
+}
+```
+
+把 DatePicker 换成你的应用内容，就能统一设置应用内组件及浮层的语言。默认使用简体中文；所有内置语言及代码见 [ConfigProvider → 内置语言](/components/config-provider#内置语言)。
+
+## 在应用中切换
+
+如果应用已有语言选择器，将当前语言状态传给 `locale` 即可。状态变化后，区域内的组件会随之更新，参见 [ConfigProvider 的切换示例](/components/config-provider#切换语言)。
+
+只想改变一部分页面时，可以在该区域嵌套 ConfigProvider。内层未设置 `locale` 时会继承外层语言。
+
+页面标题、字段标签和选项内容仍由应用自行翻译。如果需要内置列表以外的语言，或想修改某条提示，请参阅 [ConfigProvider → 补充自己的语言](/components/config-provider#补充自己的语言)。
diff --git a/apps/docs/docs/guide/introduction.mdx b/apps/docs/docs/guide/introduction.mdx
index 85848e3..12b8dba 100644
--- a/apps/docs/docs/guide/introduction.mdx
+++ b/apps/docs/docs/guide/introduction.mdx
@@ -1,33 +1,101 @@
+import { ComponentExample } from '../../src/components/component-example';
+import {
+  IntroductionBrowsers,
+  IntroductionFeature,
+  IntroductionFeatures,
+  IntroductionHero,
+} from '../../src/components/introduction';
+import { PackageInstall } from '../../src/components/package-install';
+import { GettingStartedExample } from '../../src/examples/guide/getting-started';
+
 # 认识 Leaf UI
 
-Leaf UI 是一个轻盈、自然、可定制的 React 组件库。以绿色为起点，让组件融入你的产品，也保留你的个性。
+<IntroductionHero>
+
+一套为 React 应用准备的 UI 组件。以绿色为起点，让界面清晰自然，也保留你的品牌个性。
+
+</IntroductionHero>
+
+## 为什么选择 Leaf UI
+
+<IntroductionFeatures>
+  <IntroductionFeature icon="leaf" title="轻盈自然">
+
+克制的色彩、舒适的圆角与清晰的交互状态，让内容成为主角。开箱即用，也为你的设计留出空间。
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="palette" title="你的主题，你的风格">
+
+颜色、圆角、控件高度、字体和明暗外观，都可以通过 ConfigProvider 调整。支持嵌套区域主题，浮层与消息沿用所在区域的配置。
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="types" title="熟悉的 React 用法">
+
+提供 TypeScript 类型，保留原生 HTML 属性与 DOM ref。支持受控与非受控用法，表单仍可使用原生提交和 FormData。
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="components" title="日常所需，保持一致">
+
+从按钮、输入框到日期选择、表格、导航和反馈，使用一致的尺寸与交互规则。图标采用 Lucide，也支持传入自己的图标节点。
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="languages" title="面向不同语言">
+
+内置多种语言资源，支持自定义翻译、语言回退与 RTL 方向。组件文案由配置管理，业务标题和字段标签由应用自行翻译。
+
+  </IntroductionFeature>
+  <IntroductionFeature icon="keyboard" title="照顾每一次交互">
+
+键盘操作、可见焦点、禁用与加载状态贯穿组件，并响应减少动态效果的系统偏好。为仅含图标的按钮提供 aria-label，即可补充可访问名称。
+
+  </IntroductionFeature>
+</IntroductionFeatures>
+
+## 环境支持
+
+支持 **React 18 / 19**，提供 **ESM / CommonJS** 入口与服务端渲染用法。推荐使用现代浏览器当前或上一代稳定版。
+
+<IntroductionBrowsers />
+
+以上为最低支持目标，实际验证范围与降级策略见[浏览器兼容性](/guide/compatibility)。Next.js、TanStack Start 等框架的接入见[服务端渲染](/guide/ssr)。
 
-## 轻盈自然
+## 从一个组件开始
 
-克制的色彩、舒适的圆角和清晰的交互状态，让内容成为主角。你可以直接使用默认的绿色主题，也可以调整主题色，让组件与品牌保持一致。
+在已有 React 项目中安装：
 
-## 可定制
+<PackageInstall>
 
-通过 ConfigProvider 调整颜色、基础圆角、控件高度、字体与动效。大小尺寸自动生成，同一页面可以使用不同区域主题；业务组件也能读取主题变量复用样式。
+```bash
+npm install @ifhover/leaf-ui
+```
 
-## 熟悉的使用方式
+```bash
+yarn add @ifhover/leaf-ui
+```
 
-组件支持 React 18 / 19，提供 TypeScript 类型，保留原生 HTML 属性与 DOM ref。你可以沿用 React 中处理事件、表单与状态的方式。
+```bash
+pnpm add @ifhover/leaf-ui
+```
 
-## 一致的基础组件
+```bash
+bun add @ifhover/leaf-ui
+```
 
-提供常用输入、选择、日期时间、表单、菜单、弹窗和反馈组件。可在[组件总览](/components/)中浏览所有组件。
+</PackageInstall>
 
-图标使用 `lucide-react`，你也可以将自己的 React 图标节点传给组件。
+直接导入组件即可使用，浏览器构建会自动加载所需样式，无需安装 Sass。试着点击下面的按钮：
 
-## 照顾每一次交互
+<ComponentExample title="第一个按钮" preview={<GettingStartedExample />} width="fit-content" fileName="getting-started.tsx">
 
-组件包含键盘焦点、禁用与加载状态，并响应减少动态效果的系统偏好。只有图标的按钮需要设置 `aria-label`，为辅助技术提供清晰的名称。
+```tsx lineNumbers file="../../src/examples/guide/getting-started.tsx"
 
-选择菜单、日历、时间和级联面板都沿用相同的主题，可以使用键盘选择、清除或收起。面板在页面边缘自动避让，并继承局部容器的主题变量。
+```
 
-## 从这里开始
+</ComponentExample>
 
-先阅读[安装&快速开始](/guide/getting-started)，再前往[组件总览](/components/)找到需要的组件。
+## 接下来
 
-如果希望调整颜色和圆角，可以直接使用[主题编辑器](/guide/theming)。
+- [安装与快速开始](/guide/getting-started)：了解安装方式与项目接入。
+- [组件总览](/components/)：找到界面需要的组件。
+- [定制主题](/guide/theming)：设置品牌色、圆角和深色模式。
+- [切换语言](/guide/internationalization)：为应用配置组件语言。
diff --git a/apps/docs/docs/guide/scenarios.mdx b/apps/docs/docs/guide/scenarios.mdx
deleted file mode 100644
index 78dacb0..0000000
--- a/apps/docs/docs/guide/scenarios.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ComponentExample } from '../../src/components/component-example';
-import { CompositeForm, RemoteSelection } from '../../src/examples/scenarios/basic';
-import { SchemaForm } from '../../src/examples/scenarios/schema';
-
-# 业务场景
-
-把字段布局、异步校验和复合控件组合到一个表单中。
-
-## 动态表单与异步校验
-
-`Form` 使用原生表单。`useFormValidation` 接收 `FormData`，支持同步校验、Schema 适配、异步请求和服务端错误。校验回调返回以字段名为 key 的错误；提交函数中可用 `setErrors` 回填服务端字段错误。
-
-将 `handleSubmit`、`handleReset` 绑定到表单。新的提交或重置会取消旧请求，异步函数需要响应 `AbortSignal`。`CheckboxGroup`、`Transfer` 等复合字段按整体值校验。文件上传在表单构造 FormData 时追加 File 或已有文件 URL，目录文件可从 `File.webkitRelativePath` 读取相对路径。
-
-<ComponentExample title="动态表单与异步校验" preview={<CompositeForm />} fileName="basic.tsx">
-
-```tsx lineNumbers file="../../src/examples/scenarios/basic.tsx"
-```
-
-</ComponentExample>
-
-使用 Zod、Valibot 等 Schema 时，在 `validate` 中解析 `FormData`，将 Schema 的 issues 映射为字段错误即可。重复字段用 `data.getAll(name)`，动态数组需要按应用的数据模型转换；Leaf 不隐式解析点号路径。React Hook Form 的接入见 [Form](../components/form#接入-react-hook-form)。
-
-## Schema 与服务端错误
-
-这个示例使用 Zod，把 issues 的字段路径转换为 `FormField` 的错误。若由 Schema 完整接管校验，给表单设置 `noValidate`；保留原生校验时省略它即可。`onSubmit` 接收取消信号，提交完成前检查信号再回填服务端错误。
-
-<ComponentExample title="Schema 与服务端错误" preview={<SchemaForm />} fileName="schema.tsx">
-
-```tsx lineNumbers file="../../src/examples/scenarios/schema.tsx"
-```
-
-</ComponentExample>
-
-## 远程搜索与竞态
-
-远程过滤设为 `filterOption={false}`，将查询参数、取消请求与分页状态放在应用层。`onPopupScroll` 可触发加载下一页，`popupRender` 可追加重试按钮。Select 只保留已选项的回显记录，不会无限缓存历史搜索结果。
-
-<ComponentExample title="远程搜索" preview={<RemoteSelection />} fileName="basic.tsx">
-
-```tsx lineNumbers file="../../src/examples/scenarios/basic.tsx"
-```
-
-</ComponentExample>
-
-切换租户或树的数据版本时，更新 `Tree`、`TreeSelect` 或 `Cascader` 的 `cacheKey`。组件会丢弃懒加载缓存并取消旧请求；加载函数必须返回当前请求的子节点。
-
-## 上传服务适配
-
-`autoUpload={false}` 配合 `UploadHandle.upload()` 实现手动开始；`concurrency` 限制同时进行的上传。分片、校验摘要和断点续传属于服务端协议，在 `customRequest` 中实现：读取 `File.slice()`、保存服务端 uploadId、传递 `signal`，每片完成时通过 `onProgress` 更新总进度。不要在前端组件中假定一种存储服务的续传协议。
-
-更多 API 见 [Form](../components/form)、[Select](../components/select) 和 [Upload](../components/upload)。
-
-
-## 完整业务页面
-
-[完整工作空间](./workspace) 串起项目搜索、新建、编辑、归档与恢复、字段校验和团队设置保存；[可访问性工作台](./accessibility) 可检查键盘、浮层、主题与密度。
diff --git a/apps/docs/docs/guide/ssr.mdx b/apps/docs/docs/guide/ssr.mdx
index c6a9224..7220490 100644
--- a/apps/docs/docs/guide/ssr.mdx
+++ b/apps/docs/docs/guide/ssr.mdx
@@ -1,163 +1,77 @@
-# SSR 使用
+# 服务端渲染
 
-Leaf UI 支持服务端渲染。将编译好的样式导入框架入口，再通过 ConfigProvider 提供初始主题即可。
-
-## 静态样式与动态主题
-
-组件布局、状态和动画使用编译好的静态 CSS。`styles.css` 提供基础与 API 服务样式，浏览器组件入口自动加载组件样式；支持 CSS 裁剪的生产构建可从根入口按需保留具名导入的样式。直接 Node 入口不加载 CSS，自行管理 SSR 样式时使用完整静态入口 `@ifhover/leaf-ui/styles/all.css`。ConfigProvider 在渲染时输出当前区域的主题变量，大小尺寸使用 CSS 计算，浏览器直接应用它们。
-
-因此 SSR 和动态主题可以同时保留：服务端输出首屏 HTML 与初始主题，客户端使用同一份配置接管后，再通过 React 状态切换主题。无需 CSS-in-JS 注册器、服务端提取样式、Sass 配置或关闭 SSR。
+Leaf UI 的基础样式和组件样式会自动加载。下面只介绍各框架需要额外处理的部分，安装和组件用法见[快速开始](/guide/getting-started)。
 
 ## Next.js App Router
 
-### 在根布局导入样式
-
-```tsx title="app/layout.tsx"
-import type { ReactNode } from 'react';
-import { cookies } from 'next/headers';
-import type { LeafTheme } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
-import './globals.css';
-import { Providers } from './providers';
-
-export default async function RootLayout({ children }: { children: ReactNode }) {
-  const store = await cookies();
-  const initialTheme: LeafTheme = {
-    primaryColor: '#7654c6',
-    borderRadius: 8,
-    controlHeight: 40,
-    appearance: store.get('leaf-appearance')?.value === 'dark' ? 'dark' : 'light',
-  };
-
-  return (
-    <html lang="zh-CN">
-      <body>
-        <Providers initialTheme={initialTheme}>{children}</Providers>
-      </body>
-    </html>
-  );
-}
-```
-
-该示例使用当前 Next.js 的异步 cookies API。Cookie 为可选的外观偏好；也可以在服务端读取账户设置，或始终提供固定主题。
-
-### 创建可以切换主题的区域
+全局配置放在 Client Component 中：
 
 ```tsx title="app/providers.tsx"
 'use client';
 
-import { useState, type ReactNode } from 'react';
-import { Button, ConfigProvider, type LeafTheme } from '@ifhover/leaf-ui';
-
-export function Providers({
-  initialTheme,
-  children,
-}: {
-  initialTheme: LeafTheme;
-  children: ReactNode;
-}) {
-  const [theme, setTheme] = useState(initialTheme);
-
-  function toggleAppearance() {
-    const appearance = theme.appearance === 'dark' ? 'light' : 'dark';
-    setTheme((current) => ({ ...current, appearance }));
-    document.cookie =
-      'leaf-appearance=' + appearance + '; Path=/; Max-Age=31536000; SameSite=Lax';
-  }
+import { ConfigProvider } from '@ifhover/leaf-ui';
+import type { ReactNode } from 'react';
 
-  return (
-    <ConfigProvider locale="zh-CN" theme={theme}>
-      <Button onClick={toggleAppearance}>切换外观</Button>
-      {children}
-    </ConfigProvider>
-  );
+export function Providers({ children }: { children: ReactNode }) {
+  return <ConfigProvider>{children}</ConfigProvider>;
 }
 ```
 
-`'use client'` 为交互组件声明客户端边界，仍会参与 Next.js 的服务端预渲染。包的构建入口也保留了该声明。在 Server Component 中可以导入并渲染 Leaf UI 组件；事件回调、hooks 和交互状态应放在 Client Component 中，传过边界的配置保持可序列化。
+在已有的 `app/layout.tsx` 中，用 `Providers` 包裹 `<body>` 内的 `{children}`。布局本身保留为 Server Component。
 
-将服务端内容作为 children 传给 Providers 可以保留这些内容的 Server Component 边界，不必把整个应用写成客户端组件。
+含事件回调、hooks 或交互状态的业务组件也要声明 `'use client'`。Client Component 仍会参与服务端预渲染，无需设置 `ssr: false`。
 
-### 使用表单组件
+## Next.js Pages Router
 
-```tsx title="app/project-form.tsx"
-'use client';
+全局配置放在 `pages/_app.tsx`，无需声明 `'use client'`。
 
-import { Button, Form, FormField, Input } from '@ifhover/leaf-ui';
+使用 Webpack 构建时，在现有 Next.js 配置中加入：
 
-export function ProjectForm() {
-  return (
-    <Form onSubmit={(event) => {
-      event.preventDefault();
-      const data = new FormData(event.currentTarget);
-      console.log(data.get('name'));
-    }}>
-      <FormField label="项目名称" required>
-        <Input name="name" />
-      </FormField>
-      <Button type="submit">保存</Button>
-    </Form>
-  );
-}
+```js title="next.config.mjs"
+export default {
+  transpilePackages: ['@ifhover/leaf-ui'],
+};
 ```
 
-在页面里导入 ProjectForm 后即可使用，它会继承外层主题。无需 `dynamic(..., { ssr: false })`。
+已有 `transpilePackages` 时追加包名，修改后重启开发服务。它让 Next.js 处理组件库内部的 CSS，避免“不能从 node_modules 内导入全局 CSS”的错误。此选项需要 Next.js 13 或以上。
 
-## Next.js Pages Router
+Next.js 16.4.1 的默认 Turbopack 构建无需这项额外配置。两种构建方式都无需手动导入 Leaf UI 样式。
 
-在 `pages/_app.tsx` 导入样式并包裹组件：
+## TanStack Start
 
-```tsx title="pages/_app.tsx"
-import type { AppProps } from 'next/app';
+使用默认 Vite 配置即可。需要全局配置时，在已有根路由 `src/routes/__root.tsx` 中包裹 `Outlet`：
+
+```tsx title="src/routes/__root.tsx"
 import { ConfigProvider } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
+import { Outlet } from '@tanstack/react-router';
 
-export default function App({ Component, pageProps }: AppProps) {
+function RootComponent() {
   return (
-    <ConfigProvider theme={pageProps.initialTheme ?? { borderRadius: 8 }}>
-      <Component {...pageProps} />
-    </ConfigProvider>
+    <RootDocument>
+      <ConfigProvider>
+        <Outlet />
+      </ConfigProvider>
+    </RootDocument>
   );
 }
 ```
 
-需要用户专属首屏主题时，在页面的 getServerSideProps 中读取偏好并返回 initialTheme。客户端首次渲染使用同样的 pageProps；后续切换可以参照上方 Providers 的 React 状态写法。
-
-## 其他 React SSR 框架
-
-Remix、React Router 框架模式或自建 React SSR 服务使用相同方式：
-
-1. 按框架规则在根入口或根路由引入 `styles.css`，确保样式随首屏加载。
-2. 在服务端读取主题和语言，把 ConfigProvider 包裹进要渲染的组件树。
-3. 将同一份初始配置通过框架的数据机制传给客户端。
-4. 客户端从这份配置初始化状态，再响应主题切换。
+`RootDocument` 沿用项目已有的文档组件，根路由的其他配置保持不变。`<head>` 中的 `HeadContent` 输出首屏样式链接，`<body>` 中的 `Scripts` 加载客户端脚本。Start 会从构建产物中发现组件样式，无需为 Leaf UI 添加 `?url` 样式链接或 `'use client'`。
 
-静态 CSS 可以由浏览器缓存，动态配置保留在 HTML 的区域容器中。主题计算不依赖 window、matchMedia 或读取 DOM。
+详见 TanStack Start 的[根路由](https://tanstack.com/start/latest/docs/framework/react/guide/routing)与[样式处理](https://tanstack.com/start/latest/docs/framework/react/guide/css-styling)。
 
-## 保持首次渲染一致
+## 首次渲染保持一致
 
-首屏主题优先来自服务端可读的 Cookie、账户设置或固定默认值。若只把偏好放在 localStorage，服务端无法读取：先用一致的默认配置完成接管，再在 effect 中读取偏好，会产生一次可见主题切换。希望首屏直接正确时，应把偏好同步到服务端可读的存储。
+服务端与客户端首次渲染使用相同的主题、语言和初始值。首屏需要深色模式时，从 Cookie 等服务端可读的数据中取得配置；只存在 `localStorage` 中的偏好，应在挂载后读取。主题和语言的配置方式见[定制主题](/guide/theming)与[切换语言](/guide/internationalization)。
 
-日期选择器使用本地日期和时间；时区不同可能导致服务器与浏览器显示不同的值。SSR 页面使用日期默认值时，让服务端与浏览器采用同一时区策略，或在客户端接管后设置用户本地日期。不要在两次首次渲染中分别调用 `new Date()` 生成不同初值。
+日期、时间和倒计时也应传入一致的初值；避免两端分别用 `new Date()` 生成初值。Modal、Message 等浮层在客户端挂载后显示。
 
-Modal、Confirm、Message 与选择浮层会在客户端挂载后创建 Portal。表单控件本身可以服务端渲染；已打开的弹层在客户端接管后展示。
+## 自行搭建 SSR
 
-入口的 `ConfigProvider` 会自动托管确认框、消息、通知和任务加载条，客户端子组件通过 `useConfirm`、`useMessage`、`useNotification`、`useLoadingBar` 调用即可。服务端不输出这些容器；每个应用入口的状态相互独立，不会在 SSR 请求之间共享队列。
+直接使用 Node 渲染、未通过框架收集页面样式时，在负责生成浏览器资源的入口引入完整静态样式：
 
-## 图片与文件交互
-
-Image 的图片本身可以服务端渲染。放大预览、ImageCropper 的裁剪引擎、SignaturePad 的绘图引擎在客户端按需加载；服务端保留稳定的容器与占位内容。可以直接在 Client Component 中使用这些组件，无需禁用整个页面的 SSR。
-
-FileList 可在服务端展示基于 URL 的文件信息。Upload 选择的 File 对象和临时预览 URL 保留在客户端状态中；服务端渲染不会启动上传请求。
-
-这些交互组件需要客户端 JavaScript 才能响应操作。样式复用与高级主题配置见[定制主题](/guide/theming)。
-
-按需样式的用法统一见[安装&快速开始](/guide/getting-started)。包的 Node 默认入口不导入 CSS，ESM / CommonJS 可直接用于服务端渲染；支持 CSS 的框架浏览器构建使用自动样式入口，并保留 Next.js 客户端边界。若自行搭建 SSR，或构建器未启用 `browser` 导出条件，请在负责生成页面样式的入口导入 `@ifhover/leaf-ui/styles/all.css`，将输出的 CSS 链接加入首屏 HTML。
-
-## 日期、数字与浮层的首屏
-
-Picker 采用本地 Date 的年月日与时间。日期输入及 FormData 是本地日历值；`date.toISOString()` 表示 UTC 时间点，不能直接用它截取用户所在地区的日期。需要业务时区时在应用的数据边界完成转换，并在客户端和服务端使用同一约定。非公历与带时区的专用 Date 类型由应用适配。
-
-服务端与客户端使用相同的 `locale`、初始值和时区设置，以免 Intl 数字或日期文字不同。倒计时可以传固定 `value` 与 `initialRemaining` 避免请求延迟导致首屏差异。系统外观与断点辅助 Hook 接受初始值，挂载后再读取浏览器偏好。
+```ts
+import '@ifhover/leaf-ui/styles/all.css';
+```
 
-浮层会在客户端挂载。`container` / `getPopupContainer` 使用函数延迟访问 DOM；不要在模块顶层或服务端渲染时直接读取 `document`。详情见 [控件与浮层](/guide/control-contracts)。
+将输出的 CSS 链接加入首屏 HTML。Node 的组件入口不导入 CSS，可以直接用于服务端渲染。
diff --git a/apps/docs/docs/guide/tailwindcss.mdx b/apps/docs/docs/guide/tailwindcss.mdx
new file mode 100644
index 0000000..4918b3a
--- /dev/null
+++ b/apps/docs/docs/guide/tailwindcss.mdx
@@ -0,0 +1,158 @@
+import { ComponentExample } from '../../src/components/component-example';
+import { DocsCollapse } from '../../src/components/docs-collapse';
+import { TailwindBasic } from '../../src/examples/tailwindcss/basic';
+import { TailwindTheme } from '../../src/examples/tailwindcss/theme';
+
+# Tailwind CSS
+
+在 Tailwind 中复用 Leaf UI 的颜色、圆角和间距。
+
+## 快速接入
+
+在已安装 Tailwind 的项目中，按版本选择下面的配置。支持 3.x 和 4.x，2.x 及更早版本请先升级。
+
+### Tailwind CSS 4
+
+在 CSS 入口增加一行导入即可：
+
+```css title="app.css"
+@import 'tailwindcss';
+@import '@ifhover/leaf-ui/tailwind.css';
+```
+
+<DocsCollapse title="沿用项目的基础样式">
+
+如果不需要 Tailwind 的 Preflight 重置样式，改用下面的入口：
+
+```css title="app.css"
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+@import '@ifhover/leaf-ui/tailwind.css';
+```
+
+</DocsCollapse>
+
+### Tailwind CSS 3
+
+在配置中加入 preset，`content` 按项目目录调整：
+
+```js title="tailwind.config.cjs"
+const leafPreset = require('@ifhover/leaf-ui/tailwind').default;
+
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  presets: [leafPreset],
+};
+```
+
+CSS 入口保持 Tailwind 3 的写法：
+
+```css title="app.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+已有配置只需追加 preset，保留自己的扫描目录和插件。
+
+<DocsCollapse title="使用 TypeScript 配置（3.3+）">
+
+```ts title="tailwind.config.ts"
+import type { Config } from 'tailwindcss';
+import leafPreset from '@ifhover/leaf-ui/tailwind';
+
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  presets: [leafPreset],
+} satisfies Config;
+```
+
+需要关闭 Preflight 时，在配置中添加 `corePlugins: { preflight: false }`。
+
+</DocsCollapse>
+
+## 使用示例
+
+### 基础用法
+
+引入配置后，在普通工具类中使用 `leaf-` 名称，就能与组件共享样式：
+
+<ComponentExample title="复用设计变量" preview={<TailwindBasic />} fileName="basic.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/tailwindcss/basic.tsx"
+
+```
+
+</ComponentExample>
+
+`bg-leaf-surface` 设置背景，`p-leaf-md` 设置内边距，`rounded-leaf` 设置圆角。Tailwind 原有工具类和 `hover:`、`md:` 等变体仍可照常使用。
+
+### 跟随主题
+
+放在 ConfigProvider 内的工具类会跟随区域主题。试着打开深色模式，查看面板和按钮一起变化：
+
+<ComponentExample title="跟随主题" preview={<TailwindTheme />} fileName="theme.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/tailwindcss/theme.tsx"
+
+```
+
+</ComponentExample>
+
+背景、文字和边框读取当前区域的变量，无需额外编写 `dark:` 类名。颜色和密度变化也无需重新构建 Tailwind；更多配置见 [定制主题](/guide/theming)。
+
+## 常用设计变量
+
+两种版本使用相同的工具类名称，只扩展主题，保留 Tailwind 的默认值。
+
+<div className="leaf-tailwind-table">
+
+| 设计变量   | 工具类示例                                                                     |
+| ---------- | ------------------------------------------------------------------------------ |
+| 主题色     | `bg-leaf-primary`、`text-leaf-primary`、`text-leaf-on-primary`                 |
+| 状态色     | `text-leaf-success`、`text-leaf-warning`、`text-leaf-danger`、`text-leaf-info` |
+| 文字颜色   | `text-leaf-text`、`text-leaf-muted`、`text-leaf-subtle`                        |
+| 背景颜色   | `bg-leaf-surface`、`bg-leaf-surface-muted`、`bg-leaf-surface-raised`           |
+| 边框与焦点 | `border-leaf-border`、`border-leaf-divider`、`ring-leaf-focus`                 |
+| 圆角       | `rounded-leaf`、`rounded-leaf-sm`、`rounded-leaf-md`、`rounded-leaf-lg`        |
+| 间距       | `p-leaf`、`p-leaf-xs`、`gap-leaf-sm`、`p-leaf-md`、`gap-leaf-lg`、`m-leaf-xl`  |
+| 控件高度   | `h-leaf-control`、`h-leaf-control-sm`、`h-leaf-control-lg`                     |
+| 字体与字号 | `font-leaf`、`text-leaf`、`text-leaf-sm`、`text-leaf-lg`                       |
+| 字重与行高 | `font-leaf-medium`、`font-leaf-heading`、`leading-leaf`                        |
+| 阴影       | `shadow-leaf-xs`、`shadow-leaf-sm`、`shadow-leaf-md`、`shadow-leaf-lg`         |
+
+</div>
+
+颜色名称也可用于 `border-*`、`ring-*`、`fill-*` 等工具类。字号类默认包含主题行高。
+
+<DocsCollapse title="更多设计变量">
+
+<div className="leaf-tailwind-table">
+
+| 设计变量       | 工具类示例                                                                                                                                     |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| 主题色交互     | `hover:bg-leaf-primary-hover`、`active:bg-leaf-primary-active`                                                                                 |
+| 危险色交互     | `hover:bg-leaf-danger-hover`、`active:bg-leaf-danger-active`                                                                                   |
+| 状态色上的文字 | `text-leaf-on-warning`、`text-leaf-on-danger`                                                                                                  |
+| 边框与选项悬停 | `hover:border-leaf-border-hover`、`hover:bg-leaf-option-hover`                                                                                 |
+| 选择控件圆角   | `rounded-leaf-choice`                                                                                                                          |
+| 密度相关间距   | `gap-leaf-form-gap`、`gap-leaf-label-gap`、`py-leaf-row-padding`、`min-h-leaf-option-height`、`p-leaf-option-padding`、`px-leaf-field-padding` |
+| 弹窗间距       | `py-leaf-dialog-block`、`px-leaf-dialog-inline`、`gap-leaf-dialog-gap`                                                                         |
+| 过渡时间       | `duration-leaf`、`duration-leaf-fast`、`duration-leaf-slow`                                                                                    |
+| 过渡曲线       | `ease-leaf`、`ease-leaf-spring`                                                                                                                |
+| 浮层层级       | `z-leaf-popup`、`z-leaf-modal`、`z-leaf-message`                                                                                               |
+
+</div>
+
+动效可写为 `transition-colors duration-leaf ease-leaf motion-reduce:transition-none`。`theme.motion: false` 关闭区域过渡；`motion-reduce:` 响应系统的减少动态效果偏好。
+
+</DocsCollapse>
+
+## 使用提示
+
+- **透明度**：Tailwind 4 支持 `bg-leaf-primary/50`；Tailwind 3 不支持这些颜色的 `/50`、`bg-opacity-*` 或 `text-opacity-*`，半透明色需在业务 CSS 中定义。
+- **源码扫描**：写完整类名，如 `bg-leaf-primary`，不要拼接 `bg-leaf-${color}`。
+- **基础样式**：没有导入 Leaf UI 组件的纯 CSS 页面，还需引入 `@ifhover/leaf-ui/styles.css`。
+- **响应式断点**：`sm:`、`md:` 使用项目的 Tailwind 配置，不随 ConfigProvider 的断点变化。Tailwind 4 的浏览器要求以其官方支持范围为准。
+- **区域与浮层**：自定义 Portal 内容也需放在对应主题区域。Leaf UI 自带浮层会自动同步主题；组件专用变量通过 [ConfigProvider](/guide/theming) 调整。
diff --git a/apps/docs/docs/guide/theming.mdx b/apps/docs/docs/guide/theming.mdx
index 897286b..6bf8300 100644
--- a/apps/docs/docs/guide/theming.mdx
+++ b/apps/docs/docs/guide/theming.mdx
@@ -1,259 +1,199 @@
-import { ThemePlayground } from '../../src/components/theme-playground';
+import { ComponentExample } from '../../src/components/component-example';
+import { ThemeBasic } from '../../src/examples/theming/basic';
+import { ThemeAppearance } from '../../src/examples/theming/appearance';
+import { ThemeScoped } from '../../src/examples/theming/scoped';
 
 # 定制主题
 
-通过 [ConfigProvider](/components/config-provider) 设置组件的主题。通常只需调整主题色、基础圆角和控件高度，其余样式会自动配合。
+颜色、圆角和深色模式都通过 ConfigProvider 的 `theme` 设置。通常几行配置就够了，其他样式会自动跟随。
 
-## 从几个设置开始
+## 改颜色和圆角
 
-在应用最外层放置 ConfigProvider，并引入一次组件样式：
+在应用入口用 ConfigProvider 包住页面。下面把主题色改成紫色，基础圆角改成 8px：
 
-```tsx
-import { Button, ConfigProvider, Input } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
+<ComponentExample title="颜色与圆角" preview={<ThemeBasic />} fileName="basic.tsx" width="fit-content">
 
-export function App() {
-  return (
-    <ConfigProvider theme={{
-      primaryColor: '#7654c6',
-      borderRadius: 8,
-      controlHeight: 40,
-    }}>
-      <Input aria-label="项目名称" placeholder="项目名称" />
-      <Button>保存</Button>
-    </ConfigProvider>
-  );
-}
+```tsx lineNumbers file="../../src/examples/theming/basic.tsx"
 ```
 
-未传入的选项使用默认值。悬停、按下、浅色背景和焦点颜色会跟随主题色，不需要分别配置。
-
-## 试试你的风格
+</ComponentExample>
 
-选择预设配色或自定义颜色，调整圆角和外观，预览会立即更新。展开主题代码或直接复制，即可应用到自己的页面。
+把示例中的 Button 换成你的应用内容即可。按钮、输入框、选择器及浮层会一起使用这份主题；悬停、按下和焦点颜色会自动生成。
 
-<ThemePlayground />
+`borderRadius` 是圆角的基准值。卡片、弹窗等会按各自的层级生成圆角，因此不必逐个组件设置。数字表示像素，也支持 `'0.5rem'` 等 CSS 长度。
 
-## 自动生成大小尺寸
+### 常用参数
 
-默认基础圆角为 10px，单行控件高度为 40px，字号为 14px。修改基础值后，其他尺寸会同步调整：
+下面这些参数都放在 `theme` 中，只写需要修改的项。
 
-| 基础设置 | 自动生成的值 | 默认结果 |
+| 参数 | 常见写法 | 用途 |
 | --- | --- | --- |
-| `borderRadius` | 小 / 中 / 大圆角分别为基础值的 0.6 / 1.2 / 1.6 倍 | `6px / 12px / 16px` |
-| `controlHeight` | 小尺寸减 6px，大尺寸加 6px | `34px / 46px` |
-| `fontSize` | 小字号减 1px，大字号加 2px | `13px / 16px` |
-
-数字表示像素，也可以传入带单位的 CSS 长度。按钮、输入框和选择器共用这套尺寸，放在一起时保持一致。
+| `primaryColor` | `'#7654c6'` | 设置主题色，相关交互颜色自动生成。 |
+| `borderRadius` | `8` | 调整基础圆角，`0` 为直角。 |
+| `appearance` | `'light'` / `'dark'` | 设置浅色或深色外观。 |
+| `controlHeight` | `40` | 调整单行控件的基础高度，小、大尺寸同步变化。 |
+| `fontSize` | `14` | 设置组件基础字号。 |
+| `fontFamily` | `'Inter, sans-serif'` | 设置字体；字体文件由应用加载。 |
+| `motion` | `false` | 关闭当前区域的动效，保留正常操作。 |
 
-圆角由外向内递减：弹窗、抽屉和浮层使用大圆角，卡片、提示和选项卡片等内容表面使用中圆角，按钮、输入框和表格外框使用基础圆角，复选框等小元素使用小圆角，状态标签为胶囊形。内容表面默认只用细边框区分层级，不叠加阴影。
+未设置的字段继承外层配置。默认使用浅色外观、10px 基础圆角、36px 基础控件高度和 14px 字号。
 
-紧贴容器的选项与选中背景按外框圆角、内边距和边框自动推导圆角，默认浮层为 `16px − 6px − 1px = 9px`。通过 `theme.components.Floating` 可统一设置浮层的 `borderRadius` 和 `padding`，`Dropdown` 的局部设置优先；卡片式 `Tabs`、`Segmented` 和 `Menu` 同样跟随各自的容器。内边距支持数字、CSS 长度和 1–4 值简写（例如 `4px 8px`），各方向的内部圆弧会同步更新。
+完整参数见 [LeafTheme](/components/config-provider#leaftheme)。需要单独调整文字色、背景色或某个尺寸时，再查阅 [LeafThemeTokens](/api/theme-tokens#leafthemetokens)。
 
-## 局部主题与嵌套
+## 使用深色模式
 
-ConfigProvider 可以包裹整个应用，也可以只包裹一个区域。内层只覆盖明确设置的选项：
+设置 `appearance: 'dark'` 即可；改回 `'light'` 恢复浅色：
 
 ```tsx
-<ConfigProvider theme={{ primaryColor: '#20834a', controlHeight: 36 }}>
-  <Button>默认区域</Button>
-  <ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 16 }}>
-    <Button>活动区域</Button>
-  </ConfigProvider>
+<ConfigProvider theme={{ appearance: 'dark' }}>
+  <App />
 </ConfigProvider>
 ```
 
-浮层、Modal、确认框与消息会继承调用区域的主题。ConfigProvider 自动托管确认框和消息，子组件通过 useConfirm 和 useMessage 调用。语言通过 ConfigProvider 的 `locale` 单独设置。
+组件的文字、背景和边框会一起切换。显式设置的 `primaryColor` 会保留原色；没有指定时使用该外观的默认主题色。
 
-## 深色外观与动态切换
+ConfigProvider 负责区域内组件的样式，不会给页面的 `body` 自动添加背景。业务页面的背景和文字也需要跟随外观时，可使用下文的 [CSS 变量](#在业务样式中使用主题)。
 
-使用 `appearance` 切换浅色与深色；主题是普通 React 属性，可以用状态动态更新：
+### 加一个切换开关
 
-```tsx
-import { useState } from 'react';
-import { Button, ConfigProvider } from '@ifhover/leaf-ui';
+主题是普通 React 参数，可以用状态更新。打开下面的开关，查看卡片、按钮和文字一起切换：
 
-export function ThemeSwitch() {
-  const [dark, setDark] = useState(false);
-  return (
-    <ConfigProvider theme={{ appearance: dark ? 'dark' : 'light' }}>
-      <Button onClick={() => setDark(!dark)}>切换外观</Button>
-    </ConfigProvider>
-  );
-}
+<ComponentExample title="切换深色模式" preview={<ThemeAppearance />} fileName="appearance.tsx" width={360}>
+
+```tsx lineNumbers file="../../src/examples/theming/appearance.tsx"
 ```
 
-深色外观会提供适合深色表面的文字、边框和状态色。显式设置的主题色保留原值；很浅的品牌色可以在高级配置中搭配 `onPrimaryColor`。
+</ComponentExample>
 
-## 有特殊需求时再覆盖
+### 跟随系统外观
 
-`theme.tokens` 可以单独调整自动生成的尺寸、语义色、表面色、文字色、动效或浮层层级：
+希望随操作系统切换时，使用 `useSystemAppearance`，并把结果传给 `theme.appearance`：
 
 ```tsx
-import type { LeafTheme } from '@ifhover/leaf-ui';
+import { ConfigProvider, useSystemAppearance } from '@ifhover/leaf-ui';
 
-const theme: LeafTheme = {
-  controlHeight: 36,
-  borderRadius: 8,
-  tokens: {
-    controlHeightSm: 28,
-    borderRadiusLg: 18,
-    infoColor: '#1677ff',
-    motionDuration: 200,
-  },
-};
+export function AppTheme() {
+  const appearance = useSystemAppearance('light');
+
+  return (
+    <ConfigProvider theme={{ appearance }}>
+      <App />
+    </ConfigProvider>
+  );
+}
 ```
 
-手动设置的小 / 大尺寸优先于自动生成的值。嵌套配置按字段合并，包括 tokens；未覆盖的配置继续继承。完整选项见 [LeafThemeTokens](/components/config-provider#leafthemetokens)。
+这里的 `'light'` 是首次渲染使用的外观，挂载后会读取并监听系统偏好。用户手动选择外观时，由应用保存选择并决定是否继续跟随系统。
 
-## 调整交互节奏
+## 只调整一个区域
 
-默认基础过渡时间为 200ms。按压和悬停采用更短的反馈，选中指示条、展开与浮层使用与变化幅度相配的时间；列表重排和弹窗内容高度变化会从当前位置继续过渡。
+嵌套一个 ConfigProvider，就能为某块内容设置独立主题。内层只覆盖写出的字段，其他配置继续继承：
 
-通过 `tokens.motionDuration` 调整当前区域的整体节奏，`motionEasing` 调整普通过渡，`motionSpring` 调整选择和形状变化的弹性曲线：
+<ComponentExample title="局部主题" preview={<ThemeScoped />} fileName="scoped.tsx" width="fit-content">
 
-```tsx
-<ConfigProvider theme={{ tokens: {
-  motionDuration: 240,
-  motionEasing: 'cubic-bezier(0.22, 1, 0.36, 1)',
-  motionSpring: 'cubic-bezier(0.22, 1.28, 0.36, 1)',
-} }}>
-  <YourProduct />
-</ConfigProvider>
+```tsx lineNumbers file="../../src/examples/theming/scoped.tsx"
 ```
 
-`motion: false` 关闭当前区域的 CSS 与 JavaScript 动画，包括加载旋转和浮层。内层可通过 `motion: true` 单独启用。系统的“减少动态效果”偏好始终优先。输入、拖动和裁剪等直接操作保持即时响应。
+</ComponentExample>
 
-表面与文字使用中性灰阶；主题色用于操作和选择。需要更精细地调整层次时，可使用 `subtleTextColor`、`raisedSurfaceColor`、`borderHoverColor` 和 `shadowXs`。
+示例中两个按钮的基础圆角都是 8px，内层只把主题色改成紫色。从该区域打开的 Select 浮层、Modal，以及通过 `useConfirm`、`useMessage` 创建的反馈也会使用所在区域的主题。
 
-## 在自己的组件中复用样式
+## 调整控件尺寸和密度
 
-CSS 变量用于读取当前区域的主题，方便自己编写的组件与 Leaf UI 保持一致。调整库组件的主题时使用 ConfigProvider；在业务 CSS 中通过 `var()` 消费这些变量：
+只调整一个控件时，优先使用它的 `size="sm"` 或 `size="lg"`。要让整个区域的控件更紧凑，可以设置 ConfigProvider 的 `density`：
 
 ```tsx
-<ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 8 }}>
-  <button className="product-button" type="button">自己的按钮</button>
-  <Button>Leaf UI 按钮</Button>
+<ConfigProvider density="compact">
+  <App />
 </ConfigProvider>
 ```
 
-```scss
-.product-button {
-  min-height: var(--leaf-control-height);
-  padding: 0 14px;
-  border: 0;
-  border-radius: var(--leaf-radius);
-  background: var(--leaf-color-primary);
-  color: var(--leaf-color-on-primary);
-  font-family: var(--leaf-font-family);
-  font-size: var(--leaf-font-size);
-  font-weight: var(--leaf-font-weight);
-  cursor: pointer;
-}
-```
+`density` 与 `theme` 同级。默认值为 `'comfortable'`；`'compact'` 会同时收紧控件、表单和浮层的间距，基础控件高度从 36px 调整为 30px，字号保持不变。
 
-| 可读取的变量 | 用途 |
-| --- | --- |
-| `--leaf-color-primary` / `--leaf-color-on-primary` | 主题背景与其上的文字 |
-| `--leaf-color-danger` / `--leaf-color-success` / `--leaf-color-warning` / `--leaf-color-info` | 语义状态色 |
-| `--leaf-color-text` / `--leaf-color-text-muted` | 主要 / 次要文字 |
-| `--leaf-color-surface` / `--leaf-color-surface-muted` / `--leaf-color-border` | 表面与边框 |
-| `--leaf-radius` / `--leaf-radius-sm` / `--leaf-radius-md` / `--leaf-radius-lg` | 基础 / 小 / 中 / 大圆角 |
-| `--leaf-control-height` / `--leaf-control-height-sm` / `--leaf-control-height-lg` | 基础 / 小 / 大控件高度 |
-| `--leaf-font-family` / `--leaf-font-size` / `--leaf-font-weight` | 字体、字号与字重 |
-| `--leaf-motion-duration` / `--leaf-motion-fast` / `--leaf-motion-slow` | 基础 / 快速 / 布局过渡时间 |
-| `--leaf-motion-easing` / `--leaf-motion-spring` | 普通过渡 / 弹性曲线 |
-
-业务组件需要位于相应的 ConfigProvider 区域内，才能读取该区域的主题。使用者只需引入编译好的 `styles.css`，无需安装 Sass。
+需要指定高度时再设置 `theme.controlHeight`，它优先于密度预设。例如 `controlHeight: 40` 会生成 34px / 40px / 46px 三种控件高度。尺寸对比见 [ConfigProvider](/components/config-provider#基础高度)。
 
-## 服务端渲染
+## 进阶定制
 
-静态 CSS 与动态主题可以一起使用，不需要运行时生成 CSS。Next.js 与其他 SSR 框架的接入方法见 [SSR 使用](/guide/ssr)。
+下面的配置适合已有明确设计要求的项目。只改颜色、圆角或外观时，使用前面的基础参数即可。
 
-## 间距、字体与组件覆盖
+### 单独覆盖颜色或尺寸
 
-基础 `spacing` 会生成小、大间距，`lineHeight`、`headingWeight` 和 `elevation` 分别调整正文行高、Typography 标题字重和阴影；弹窗、卡片等组件标题使用 `tokens.fontWeight`。继续通过 ConfigProvider 配置；组件专属覆盖放在 `theme.components`：
+`theme.tokens` 用于修改基础参数之外的具体样式。例如只调整成功色、大圆角和动效时长：
 
 ```tsx
+import type { LeafTheme } from '@ifhover/leaf-ui';
+
 const theme = {
-  spacing: 8,
-  lineHeight: 1.6,
-  headingWeight: 600,
-  elevation: 'soft',
-  components: {
-    Button: { borderRadius: 6, padding: '0 18px' },
-    Input: { borderRadius: 6, controlHeight: 36 },
-    Card: { padding: 16, shadow: '0 6px 20px #0001' },
+  primaryColor: '#7654c6',
+  borderRadius: 8,
+  tokens: {
+    successColor: '#20834a',
+    borderRadiusLg: 18,
+    motionDuration: 160,
   },
 } satisfies LeafTheme;
 ```
 
-组件名使用导出的名称。覆盖只作用于该区域中对应组件；每类组件使用与其布局相关的 token：输入组件支持圆角、高度、背景、字号，容器支持内边距和阴影，排列组件支持间距。通过组件本身的 `className` / `style` 与浮层的 `popupClassName` / `popupStyle` 可进一步定制。
+将这个对象传给 `<ConfigProvider theme={theme}>`。这里的 `borderRadiusLg` 会覆盖自动生成的大圆角；`motionDuration` 的数字单位是毫秒。完整字段和说明见 [LeafThemeTokens](/api/theme-tokens#leafthemetokens)。
 
-## 系统外观、响应断点与对比度
+如果使用很浅的主题色，可通过 `tokens.onPrimaryColor` 设置实色按钮上的文字色。自定义配色后，应检查正常、悬停和禁用状态的可读性。`motion: false` 可以关闭区域动效，系统的“减少动态效果”偏好始终优先。
 
-```tsx
-import { ConfigProvider, colorContrast, useBreakpoint, useSystemAppearance } from '@ifhover/leaf-ui';
+### 只调整某类组件的样式
 
-function Application() {
-  const appearance = useSystemAppearance('light');
-  return <ConfigProvider theme={{ appearance, breakpoints: { md: 800 } }}><Content /></ConfigProvider>;
-}
-function Content() {
-  const { md } = useBreakpoint({ md: false });
-  return <p>{md ? '宽屏布局' : '紧凑布局'}</p>;
-}
-const contrast = colorContrast('#ffffff', '#20834a');
+`theme.components` 按组件名称设置样式。例如让按钮使用 4px 圆角，同时调整卡片内边距：
+
+```tsx
+<ConfigProvider theme={{
+  components: {
+    Button: { borderRadius: 4 },
+    Card: { padding: 24 },
+  },
+}}>
+  <App />
+</ConfigProvider>
 ```
 
-`useBreakpoint` 按当前区域的断点生成布尔值，可用于业务布局。Grid 的现有 `sm/md/lg` CSS 响应规则仍使用组件文档中的固定断点。`colorContrast` 返回 WCAG 对比度比值，无法解析颜色时返回 `null`；透明颜色会先与背景和可选第三参数的底色合成。普通文字建议至少 4.5，较大文字至少 3。
+可用样式字段见 [LeafComponentTokens](/api/theme-tokens#leafcomponenttokens)，具体组件支持的字段以其文档为准。
 
-系统偏好在客户端接管后更新；SSR 的首次外观应来自服务端 Cookie 或一致的初始值，见 [SSR 使用](/guide/ssr)。
+这里的 `theme.components` 调整样式。如果想统一按钮的 `size`、`variant` 或其他组件参数，使用 ConfigProvider 上的 `components`，见 [组件默认值](/components/config-provider#组件默认值)。
 
-## 分区与辅助表面
+### 在业务样式中使用主题
 
-弹窗分区、卡片选项和中性提示从同一基础主题派生外观。辅助面沿用 mutedSurfaceColor，分隔线可通过高级 dividerColor 覆盖。按组件覆盖分区背景时使用 components；Confirm 共用 Modal 的配置。headerBackground、footerBackground 用于 Modal、Drawer 和 Card；borderColor 也用于卡片选项、成组选项和 Alert 的边框。
+ConfigProvider 会在它包裹的区域提供 `--leaf-*` CSS 变量。业务内容位于该区域内时，可以读取当前主题，随颜色和外观一起更新：
 
 ```tsx
-<ConfigProvider
-  theme={{
-    primaryColor: '#20834a',
-    borderRadius: 10,
-    components: {
-      Modal: { footerBackground: 'var(--leaf-color-surface-muted)' },
-      Card: { borderColor: 'var(--leaf-color-divider)' },
-    },
-  }}
->
-  <App />
+<ConfigProvider theme={{ appearance: 'dark' }}>
+  <section className="app-panel">业务内容</section>
 </ConfigProvider>
 ```
 
-## LeafComponentTokens
+```css
+.app-panel {
+  padding: 16px;
+  color: var(--leaf-color-text);
+  background: var(--leaf-color-surface);
+  border: 1px solid var(--leaf-color-border);
+  border-radius: var(--leaf-radius);
+}
+```
 
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `borderRadius` | `string \| number` | — | 圆角；数字表示像素。 |
-| `controlHeight` | `string \| number` | — | 基础控件高度；其他尺寸由此生成。 |
-| `padding` | `string \| number` | — | 内容或高亮目标的内边距。 |
-| `gap` | `string \| number` | — | 子项之间的间距；数字表示像素。 |
-| `fontSize` | `string \| number` | — | 字号；数字表示像素。 |
-| `color` | `string` | — | 颜色或语义色。 |
-| `background` | `string` | — | 组件表面背景。 |
-| `borderColor` | `string` | — | 外层边框与分区分隔线颜色。 |
-| `headerBackground` | `string` | — | 标题区域背景；默认继承表面颜色。 |
-| `footerBackground` | `string` | — | 底部操作区域背景；分区外观默认使用淡灰辅助面。 |
-| `shadow` | `string` | — | CSS box-shadow 的值。 |
+| 常用变量 | 用途 |
+| --- | --- |
+| `--leaf-color-primary` | 当前主题色。 |
+| `--leaf-color-on-primary` | 实色主题背景上的文字色。 |
+| `--leaf-color-text` / `--leaf-color-text-muted` | 主要、次要文字色。 |
+| `--leaf-color-surface` / `--leaf-color-surface-muted` | 内容背景、辅助背景。 |
+| `--leaf-color-border` | 边框颜色。 |
+| `--leaf-radius` | 基础圆角。 |
 
-## LeafThemeStyle
+调整 Leaf UI 组件的主题仍通过 ConfigProvider，业务 CSS 用这些变量读取结果。仅修改某个基础 CSS 变量，不会重新生成整套交互颜色。
 
-| 属性 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `` [key: `--leaf-${string}`] `` | `string \| number \| undefined` | — | 可复用的 CSS 自定义属性。 |
+使用 Tailwind CSS 时，可直接引入包提供的配置，通过 `bg-leaf-surface`、`text-leaf-primary` 等工具类复用主题。Tailwind 3 / 4 的接入方式见 [Tailwind CSS](/guide/tailwindcss)。
 
+## 服务端渲染
 
-## 密度与兼容色板
+服务端和客户端首次渲染应使用相同的外观。需要记住用户选择时，可由服务端读取 Cookie 并传入初始值；使用系统外观时，挂载后再更新。
 
-使用 `<ConfigProvider density="compact">` 同时调整区域及浮层的控件高度与间距。显式主题尺寸优先。派生色由 JavaScript 生成；静态深浅色板支持独立 CSS 和 SSR。需要确定的首屏颜色时传入具体颜色，CSS 变量在浏览器中解析。
+主题色优先传入具体的 HEX、RGB 或 HSL 颜色。`var(--brand-color)` 需要在浏览器挂载后解析，不能保证服务端首屏就得到对应的派生颜色。
 
-参见[浏览器兼容性](./compatibility)、[设计资源](./design-resources)与[视觉规范](./design-standards)。
+安装见 [安装&快速开始](/guide/getting-started)，Next.js 等框架的接入见 [服务端渲染](/guide/ssr)，支持范围见 [浏览器兼容性](/guide/compatibility)。
diff --git a/apps/docs/docs/guide/workspace.mdx b/apps/docs/docs/guide/workspace.mdx
index d28f22e..556663f 100644
--- a/apps/docs/docs/guide/workspace.mdx
+++ b/apps/docs/docs/guide/workspace.mdx
@@ -1,19 +1,5 @@
-import { BusinessWorkspace } from '../../src/examples/scenarios/workspace';
+# 工作空间组合
 
-# 完整工作空间
+使用 [Layout](../components/layout) 组织页面框架，[Flex](../components/flex) 与 [Grid](../components/grid) 排列内容，[Form](../components/form) 编辑字段，[Table](../components/table) 展示结构化数据。
 
-项目管理和团队设置组成一个可操作的业务页面。可搜索项目、新建或编辑项目、归档与恢复，也可以保存团队信息、外观、密度和背景模糊设置。
-
-<BusinessWorkspace />
-
-示例使用内存数据和 350ms 的模拟保存，刷新后恢复初始数据。输入已有的项目名称可体验服务端字段错误与重试；空名称、无效邮箱使用原生表单校验。搜索不存在的内容可查看空状态。设置页可放弃未保存的修改。
-
-应用接入时可用真实 API 替换模拟保存，并在业务层处理鉴权、持久化和请求取消。
-
-<details>
-<summary>查看源码</summary>
-
-```tsx lineNumbers file="../../src/examples/scenarios/workspace.tsx"
-```
-
-</details>
+鉴权、持久化和请求取消由应用处理。组件页面提供各自能力的简短示例。
diff --git a/apps/docs/docs/public/browsers/LICENSE.txt b/apps/docs/docs/public/browsers/LICENSE.txt
new file mode 100644
index 0000000..b08c647
--- /dev/null
+++ b/apps/docs/docs/public/browsers/LICENSE.txt
@@ -0,0 +1,19 @@
+Copyright (c) Cătălin Mariș
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/apps/docs/docs/public/browsers/SOURCES.txt b/apps/docs/docs/public/browsers/SOURCES.txt
new file mode 100644
index 0000000..370b61e
--- /dev/null
+++ b/apps/docs/docs/public/browsers/SOURCES.txt
@@ -0,0 +1,12 @@
+Browser logos identify the browsers in the compatibility guide.
+
+Source: https://github.com/alrra/browser-logos
+Revision: 58881b84c4d73adc03c06fa2c275a7abee02d935
+
+chrome.svg: src/chrome/chrome.svg
+edge.svg: src/edge/edge.svg
+firefox.svg: src/firefox/firefox.svg
+safari.svg: src/safari/safari.svg
+
+The upstream MIT license is included in LICENSE.txt.
+Browser names and logos belong to their respective owners.
diff --git a/apps/docs/docs/public/browsers/chrome.svg b/apps/docs/docs/public/browsers/chrome.svg
new file mode 100644
index 0000000..a627998
--- /dev/null
+++ b/apps/docs/docs/public/browsers/chrome.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 276 276"><title>Google Chrome</title><linearGradient id="a" x1="145" x2="34" y1="253" y2="61" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1e8e3e"/><stop offset="1" stop-color="#34a853"/></linearGradient><linearGradient id="b" x1="111" x2="222" y1="254" y2="62" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fcc934"/><stop offset="1" stop-color="#fbbc04"/></linearGradient><linearGradient id="c" x1="17" x2="239" y1="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d93025"/><stop offset="1" stop-color="#ea4335"/></linearGradient><circle cx="128" cy="128" r="64" fill="#fff"/><path fill="url(#a)" d="M96 183.4A63.7 63.7 0 0 1 72.6 160L17.2 64A128 128 0 0 0 128 256l55.4-96A64 64 0 0 1 96 183.4Z"/><path fill="url(#b)" d="M192 128a63.7 63.7 0 0 1-8.6 32L128 256A128 128 0 0 0 238.9 64h-111a64 64 0 0 1 64 64Z"/><circle cx="128" cy="128" r="52" fill="#1a73e8"/><path fill="url(#c)" d="M96 72.6a63.7 63.7 0 0 1 32-8.6h110.8a128 128 0 0 0-221.7 0l55.5 96A64 64 0 0 1 96 72.6Z"/></svg>
\ No newline at end of file
diff --git a/apps/docs/docs/public/browsers/edge.svg b/apps/docs/docs/public/browsers/edge.svg
new file mode 100644
index 0000000..06f0cad
--- /dev/null
+++ b/apps/docs/docs/public/browsers/edge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" viewBox="0 0 27600 27600"><title>Microsoft Edge</title><linearGradient id="a" gradientUnits="userSpaceOnUse"/><linearGradient id="b" x1="6870" x2="24704" y1="18705" y2="18705" x:href="#a"><stop offset="0" stop-color="#0c59a4"/><stop offset="1" stop-color="#114a8b"/></linearGradient><linearGradient id="c" x1="16272" x2="5133" y1="10968" y2="23102" x:href="#a"><stop offset="0" stop-color="#1b9de2"/><stop offset=".16" stop-color="#1595df"/><stop offset=".67" stop-color="#0680d7"/><stop offset="1" stop-color="#0078d4"/></linearGradient><radialGradient id="d" cx="16720" cy="18747" r="9538" x:href="#a"><stop offset=".72" stop-opacity="0"/><stop offset=".95" stop-opacity=".53"/><stop offset="1"/></radialGradient><radialGradient id="e" cx="7130" cy="19866" r="14324" gradientTransform="matrix(.14843 -.98892 .79688 .1196 -8759 25542)" x:href="#a"><stop offset=".76" stop-opacity="0"/><stop offset=".95" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="f" cx="2523" cy="4680" r="20243" gradientTransform="matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)" x:href="#a"><stop offset="0" stop-color="#35c1f1"/><stop offset=".11" stop-color="#34c1ed"/><stop offset=".23" stop-color="#2fc2df"/><stop offset=".31" stop-color="#2bc3d2"/><stop offset=".67" stop-color="#36c752"/></radialGradient><radialGradient id="g" cx="24247" cy="7758" r="9734" gradientTransform="matrix(.28109 .95968 -.78353 .22949 24510 -16292)" x:href="#a"><stop offset="0" stop-color="#66eb6e"/><stop offset="1" stop-color="#66eb6e" stop-opacity="0"/></radialGradient><path id="h" d="M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z"/><path id="i" d="M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z"/><path id="j" d="M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z"/><use fill="url(#b)" x:href="#h"/><use fill="url(#d)" opacity=".35" x:href="#h"/><use fill="url(#c)" x:href="#i"/><use fill="url(#e)" opacity=".4" x:href="#i"/><use fill="url(#f)" x:href="#j"/><use fill="url(#g)" x:href="#j"/></svg>
\ No newline at end of file
diff --git a/apps/docs/docs/public/browsers/firefox.svg b/apps/docs/docs/public/browsers/firefox.svg
new file mode 100644
index 0000000..9f690c1
--- /dev/null
+++ b/apps/docs/docs/public/browsers/firefox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" viewBox="0 0 51500 51500"><title>Mozilla Firefox</title><radialGradient id="b" cx="87.4%" cy="-12.9%" r="128%" gradientTransform="matrix(.8 0 0 1 .18 .13)"><stop offset=".13" stop-color="#ffbd4f"/><stop offset=".28" stop-color="#ff980e"/><stop offset=".47" stop-color="#ff3750"/><stop offset=".78" stop-color="#eb0878"/><stop offset=".86" stop-color="#e50080"/></radialGradient><radialGradient id="d" cx="49%" cy="40%" r="128%" gradientTransform="matrix(.82 0 0 1 .09 0)"><stop offset=".3" stop-color="#960e18"/><stop offset=".35" stop-color="#b11927" stop-opacity=".74"/><stop offset=".43" stop-color="#db293d" stop-opacity=".34"/><stop offset=".5" stop-color="#f5334b" stop-opacity=".1"/><stop offset=".53" stop-color="#ff3750" stop-opacity="0"/></radialGradient><radialGradient id="e" cx="48%" cy="-12%" r="140%"><stop offset=".13" stop-color="#fff44f"/><stop offset=".53" stop-color="#ff980e"/></radialGradient><radialGradient id="f" cx="22.76%" cy="110.11%" r="100%"><stop offset=".35" stop-color="#3a8ee6"/><stop offset=".67" stop-color="#9059ff"/><stop offset="1" stop-color="#c139e6"/></radialGradient><radialGradient id="h" cx="52%" cy="33%" r="59%" gradientTransform="scale(.9 1)"><stop offset=".21" stop-color="#9059ff" stop-opacity="0"/><stop offset=".97" stop-color="#6e008b" stop-opacity=".6"/></radialGradient><radialGradient id="i" cx="210%" cy="-100%" r="290%"><stop offset=".1" stop-color="#ffe226"/><stop offset=".79" stop-color="#ff7139"/></radialGradient><radialGradient id="j" cx="84%" cy="-41%" r="180%"><stop offset=".11" stop-color="#fff44f"/><stop offset=".46" stop-color="#ff980e"/><stop offset=".72" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="k" cx="16.1%" cy="-18.6%" r="348.8%" gradientTransform="matrix(.10453 .46743 -.99452 .04913 -.05 -.26)"><stop offset="0" stop-color="#fff44f"/><stop offset=".3" stop-color="#ff980e"/><stop offset=".57" stop-color="#ff3647"/><stop offset=".74" stop-color="#e31587"/></radialGradient><radialGradient id="l" cx="18.9%" cy="-42.5%" r="238.4%"><stop offset=".14" stop-color="#fff44f"/><stop offset=".48" stop-color="#ff980e"/><stop offset=".66" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="m" cx="159.3%" cy="-44.72%" r="313.1%"><stop offset=".09" stop-color="#fff44f"/><stop offset=".63" stop-color="#ff980e"/></radialGradient><linearGradient id="a" x1="87.25%" x2="9.4%" y1="15.5%" y2="93.1%"><stop offset=".05" stop-color="#fff44f"/><stop offset=".37" stop-color="#ff980e"/><stop offset=".53" stop-color="#ff3647"/><stop offset=".7" stop-color="#e31587"/></linearGradient><linearGradient id="n" x1="80%" x2="18%" y1="14%" y2="84%"><stop offset=".17" stop-color="#fff44f" stop-opacity=".8"/><stop offset=".6" stop-color="#fff44f" stop-opacity="0"/></linearGradient><path id="c" d="M47870 16735c-1044-2512-3160-5224-4820-6082 1352 2650 2134 5310 2433 7294 0-6 2 5 4 22l4 26c2268 6147 1032 12398-748 16218-2754 5910-9420 11967-19857 11670-11276-318-21210-8683-23064-19643-338-1728 0-2605 170-4008-207 1080-286 1394-390 3315l-2 123c0 13270 10760 24030 24032 24030 11887 0 21756-8630 23690-19963l110-927c477-4120-53-8453-1560-12075z"/><path id="g" d="M25677 21050c-40 598-2150 2660-2890 2660-6834 0-7943 4133-7943 4133 303 3480 2726 6348 5660 7865 134 70 270 130 405 193a13277 13277 0 00706 289 10674 10674 0 003127 603c11978 562 14300-14320 5655-18640 2213-385 4510 505 5794 1407-2100-3672-6025-6150-10530-6150-285 0-564 24-844 43a12025 12025 0 00-6614 2549c366 310 780 724 1650 1583 1630 1606 5813 3270 5822 3465z"/><path fill="url(#a)" d="M47870 16735c-1044-2512-3160-5224-4820-6082 1352 2650 2134 5310 2433 7294l5 40c-2718-6773-7325-9505-11088-15452l-566-920a7372 7372 0 01-265-497 4370 4370 0 01-359-950 63 63 0 00-55-65 82 82 0 00-45 0l-12 7-17 10 10-14c-6037 3536-8085 10076-8274 13350a12025 12025 0 00-6614 2548 7136 7136 0 00-622-470 11134 11134 0 01-68-5873c-2468 1124-4390 2900-5785 4470h-10c-953-1206-886-5187-832-6018-10-52-710 363-802 425a17507 17507 0 00-2349 2012 21048 21048 0 00-2244 2692l-1 3v-3a20284 20284 0 00-3225 7280l-32 160a39700 39700 0 00-237 1500l-5 52a22907 22907 0 00-390 3316l-1 120c0 13270 10760 24030 24032 24030 11887 0 21756-8630 23690-19963l110-927c477-4120-53-8453-1560-12075zM20170 35545c113 53 220 112 334 164l16 10a12620 12620 0 01-350-174zm5506-14493zm19813-3060l-3-23 4 26z"/><use fill="url(#b)" x:href="#c"/><use fill="url(#d)" x:href="#c"/><path fill="url(#e)" d="M36192 19560l150 110a13070 13070 0 00-2231-2911C26640 9290 32150 563 33080 120l10-13c-6037 3535-8085 10076-8273 13348 280-20 560-43 844-43 4505 0 8430 2477 10530 6150z"/><use fill="url(#f)" x:href="#g"/><use fill="url(#h)" x:href="#g"/><path fill="url(#i)" d="M17083 15204a24404 24404 0 01498 330 11134 11134 0 01-67-5874c-2470 1125-4390 2900-5785 4470 115-3 3600-66 5354 1074z"/><path fill="url(#j)" d="M1822 26240c1855 10960 11788 19325 23063 19644 10437 296 17104-5762 19858-11670 1780-3820 3016-10070 748-16218v-2l-4-24c-2-17-4-28-4-22l5 40c853 5566-1980 10958-6405 14604l-13 30c-8625 7023-16878 4237-18550 3097a14410 14410 0 01-350-174c-5028-2403-7105-6984-6660-10913-4245 0-5693-3580-5693-3580s3812-2718 8836-355c4653 2190 9023 355 9023 354-10-195-4192-1860-5822-3465-872-860-1285-1272-1652-1583a7136 7136 0 00-622-470 28293 28293 0 00-498-330c-1753-1140-5240-1076-5355-1073h-10c-953-1207-886-5188-832-6020-10-50-710 363-802 426a17507 17507 0 00-2349 2012 21048 21048 0 00-2244 2692l-1 3v-3a20284 20284 0 00-3225 7280c-10 52-865 3784-444 5720z"/><path fill="url(#k)" d="M34110 16760a13070 13070 0 012231 2910l360 296c5450 5020 2594 12120 2380 12626 4426-3646 7258-9038 6405-14604-2716-6774-7323-9506-11086-15453l-566-920a7372 7372 0 01-265-497 4370 4370 0 01-359-950 63 63 0 00-55-65 82 82 0 00-45 0l-12 7-17 10c-930 443-6440 9170 1030 16640z"/><path fill="url(#l)" d="M36702 19965a4743 4743 0 00-360-295l-150-110c-1283-900-3580-1792-5794-1407 8644 4322 6323 19203-5655 18640a10674 10674 0 01-3127-603 13451 13451 0 01-706-289 9064 9064 0 01-405-193l16 10c1670 1140 9924 3925 18550-3097l13-30c213-506 3068-7606-2380-12626z"/><path fill="url(#m)" d="M14844 27844s1110-4133 7943-4133c740 0 2850-2062 2890-2660s-4370 1836-9023-354c-5024-2363-8836 354-8836 354s1448 3580 5693 3580c-445 3930 1632 8510 6660 10913 113 53 218 112 334 164-2935-1517-5358-4384-5660-7865z"/><path fill="url(#n)" d="M47870 16735c-1044-2512-3160-5224-4820-6082 1352 2650 2134 5310 2433 7294l5 40c-2718-6773-7325-9505-11088-15452l-566-920a7372 7372 0 01-265-497 4370 4370 0 01-359-950 63 63 0 00-55-65 82 82 0 00-45 0l-12 7-17 10 10-14c-6037 3536-8085 10076-8274 13350 280-20 560-43 845-43 4505 0 8430 2477 10530 6148-1284-900-3580-1792-5795-1407 8644 4322 6323 19203-5655 18640a10674 10674 0 01-3127-603 13451 13451 0 01-706-289 9064 9064 0 01-405-193l17 10a14410 14410 0 01-350-174c112 53 218 112 333 164-2935-1517-5358-4384-5660-7865 0 0 1108-4133 7942-4133 740 0 2850-2062 2890-2660-10-195-4190-1860-5822-3465-870-860-1285-1272-1650-1583a7136 7136 0 00-623-470 11134 11134 0 01-67-5873c-2470 1124-4390 2900-5785 4470h-10c-953-1207-886-5187-832-6020-10-50-710 363-802 426a17507 17507 0 00-2349 2012 21048 21048 0 00-2243 2692l-1 3v-3a20284 20284 0 00-3225 7280l-32 160a39787 39787 0 00-277 1515c-2 18 2-17 0 0a27956 27956 0 00-355 3353l-3 122c0 13270 10760 24030 24032 24030 11887 0 21756-8630 23690-19963l110-927c477-4120-53-8453-1560-12075zm-2384 1234l4 26v-2l-4-24z"/></svg>
\ No newline at end of file
diff --git a/apps/docs/docs/public/browsers/safari.svg b/apps/docs/docs/public/browsers/safari.svg
new file mode 100644
index 0000000..be56160
--- /dev/null
+++ b/apps/docs/docs/public/browsers/safari.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="194.5 190.1 135.1 135.1"><title>Apple Safari</title><style>.b{color-interpolation-filters:srgb}.c{flood-opacity:.31}</style><defs><linearGradient id="a" x1="132.55" x2="134.37" y1="111.67" y2="-105.3" xlink:href="#b"><stop offset="0" stop-color="#d2d2d2"/><stop offset=".53" stop-color="#f2f2f2"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse"/><linearGradient id="c" x1="65.44" x2="67.4" y1="115.72" y2="17.14" xlink:href="#b"><stop offset="0" stop-color="#005ad5"/><stop offset=".16" stop-color="#0875f0"/><stop offset=".31" stop-color="#218cee"/><stop offset=".63" stop-color="#27a5f3"/><stop offset=".81" stop-color="#25aaf2"/><stop offset="1" stop-color="#21aaef"/></linearGradient><linearGradient id="d" x1="158.7" x2="176.28" y1="96.71" y2="79.53" xlink:href="#b"><stop offset="0" stop-color="#c72e24"/><stop offset="1" stop-color="#fd3b2f"/></linearGradient><filter id="e" class="b"><feFlood flood-opacity=".28"/><feComposite in2="SourceGraphic" operator="in"/><feGaussianBlur stdDeviation="3"/><feOffset dx=".3" dy="2.8"/><feComposite in="SourceGraphic"/></filter><filter id="f" class="b"><feFlood class="c"/><feComposite class="c" in2="SourceGraphic" operator="out"/><feGaussianBlur flood-opacity=".3" stdDeviation=".7"/><feOffset dy="1.8"/><feComposite in2="SourceGraphic" operator="atop"/></filter><filter id="g" class="b"><feFlood flood-opacity=".61"/><feComposite in2="SourceGraphic" operator="in"/><feGaussianBlur stdDeviation=".5"/><feOffset dx=".8" dy=".8"/><feComposite in="SourceGraphic" result="A"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feFlood flood-opacity=".4"/><feComposite in2="A" operator="in"/><feGaussianBlur stdDeviation="3.8"/><feOffset dx="2.3" dy="3.3"/><feComposite in="A"/></filter><filter id="h" width="110%" height="110%" x="-1%" y="-1%"><feGaussianBlur in="SourceAlpha" stdDeviation=".4"/><feOffset dx=".1" dy=".2"/><feComponentTransfer result="A"><feFuncA type="linear"/></feComponentTransfer><feFlood flood-color="rgba(0,0,0,0.5)"/><feComposite in2="A" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><radialGradient id="i" cx="-69.88" cy="69.29" r="54.01" gradientTransform="matrix(.9023 -.01249 .0377 2.7234 -9.44 -120.29)" xlink:href="#b"><stop offset="0" stop-color="#24a5f3" stop-opacity=".01"/><stop offset="1" stop-color="#1e8ceb" stop-opacity=".98"/></radialGradient><radialGradient id="j" cx="109.35" cy="13.76" r="93.08" gradientTransform="matrix(-.01822 1.0922 -1.042 -.01765 136.95 -115.33)" xlink:href="#b"><stop offset="0" stop-opacity="0"/><stop offset=".96" stop-color="#5488d6" stop-opacity="0"/><stop offset="1" stop-color="#5d96eb"/></radialGradient></defs><rect width="220" height="220" x="22" y="-106.53" fill="url(#a)" filter="url(#e)" ry="49" transform="matrix(.56938 0 0 .56921 186.86 255.75)"/><g filter="url(#f)" transform="translate(194.2 190.07)"><ellipse cx="67.77" cy="67.73" fill="url(#c)" paint-order="stroke fill markers" rx="54.01" ry="53.98"/><ellipse cx="-69.88" cy="69.29" fill="url(#i)" rx="54.01" ry="53.98" transform="translate(137.65 -1.55)"/></g><ellipse cx="120" cy="14.15" fill="url(#j)" rx="93.08" ry="93.67" transform="matrix(.58082 0 0 .57636 192.3 249.63)"/><g filter="url(#g)" transform="matrix(.58289 0 0 .56508 196.8 181.63)"><path fill="#cac7c8" d="m46 191.66.73.35 72.18-48.2-7.34-8.95L46 191.66Z"/><path fill="#fbfffc" d="m45.8 190.87.2.8 65.57-56.8-6.95-8.92-58.83 64.92Z"/><path fill="url(#d)" d="m118.91 143.81-7.35-8.95 66.08-57.2.27.73-59 65.42Z"/><path fill="#fb645c" d="m104.62 125.95 6.94 8.92 66.08-57.2-.65-.35-72.37 48.63Z"/></g><path stroke="#fff" stroke-linecap="round" stroke-miterlimit="1" stroke-width="1.33" d="m286.59 278.44 3.14-2.14m-11.23-17.8 7.8-1.37m-8.32-2.9 3.78-.3m-3.3-12.47 7.8 1.38m-8.2 3.03 3.76.38m-1.2-13.05 7.47 2.73m-3.77-10.5 6.86 3.96m-1.87-10.96 6.07 5.09m.05-11.07 5.09 6.07m1.97-10.99 3.97 6.86m3.7-10.53 2.71 7.43m5.62-9.62 1.37 7.8m15.62-7.89-1.38 7.8m9.82-5.6-2.72 7.42m10.5-3.75-3.96 6.86m10.98-1.89-5.12 6.07m16.18 6.96-6.87 3.96m10.45 3.88-7.45 2.7m9.64 5.6-7.82 1.38m7.81 15.79-7.82-1.39m5.6 9.7-7.44-2.71m3.8 10.47-6.87-3.95m1.91 10.98-6.07-5.07m-.05 11.2-5.1-6.08m-1.95 10.99-4-6.88m-3.87 10.5-2.7-7.43m-5.61 9.61-1.37-7.78m-15.78 7.75 1.4-7.86m-9.7 5.58 2.72-7.47m-10.5 3.73 3.97-6.87m-10.96 1.9 5.08-6.03m-8.26 3.13 2.75-2.68m3.84 8.23 2.2-3.1m5.2 7.44 1.66-3.45m6.43 6.47 1.02-3.7m7.52 5.32.43-3.82m8.08 3.8-.31-3.84m8.81 2.33-.97-3.69m9.06.75-1.58-3.48m9.05-.76-2.16-3.18m8.78-2.38-2.68-2.73m8.24-3.85-3.11-2.2m7.42-5.2-3.47-1.67m6.42-6.41-3.7-1.03m5.17-7.46-3.78-.37m3.8-8.24-3.81.3m2.35-8.8-3.7.97m.8-9.06-3.49 1.61m-1.03-9.12-3.2 2.2m-2.12-8.62-2.72 2.7m-3.84-8.28-2.23 3.12m-5.21-7.45-1.66 3.44m-6.55-6.32-1.02 3.63m-7.42-5.2-.38 3.81m-8.09-3.66.28 3.8m-8.79-2.34.95 3.68m-8.9-.72 1.61 3.46m-9.06.82 2.18 3.16m-8.82 2.27 2.68 2.7m-8.25 3.85 3.1 2.23m-7.44 5.17 3.42 1.66m-6.3 6.36 3.7 1.05m-3.71 24.39 3.7-.91m-2.44 5.03 7.48-2.72m-5.86 6.73 3.5-1.61m-1.53 5.43 6.87-3.95m-13.33-20.52 7.96.01m41.16-41.44v-7.96m.02 98.74.01-7.94m49.33-41.4-7.95-.01" filter="url(#h)" transform="translate(-65 7.73)"/></svg>
\ No newline at end of file
diff --git a/apps/docs/docs/public/components/file-list.svg b/apps/docs/docs/public/components/file-list.svg
index cd34f93..660f4a6 100644
--- a/apps/docs/docs/public/components/file-list.svg
+++ b/apps/docs/docs/public/components/file-list.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 156" fill="none" role="img" aria-label="file-list"><rect x="48" y="16" width="204" height="126" rx="6" fill="#f4f7f5" stroke="#e5e5e8"/><rect x="81" y="23" width="138" height="112" rx="6" fill="#fff" stroke="#e5e5e8"/><text x="101" y="48" font-size="11" fill="#202024" font-family="system-ui,sans-serif">Project report</text><rect x="101" y="61" width="93" height="5" rx="2" fill="#e2ebe5" stroke="none"/><rect x="101" y="77" width="98" height="5" rx="2" fill="#e2ebe5" stroke="none"/><rect x="101" y="93" width="85" height="5" rx="2" fill="#e2ebe5" stroke="none"/><text x="129" y="125" font-size="9" fill="#718078" font-family="system-ui,sans-serif">1 / 4</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 156" fill="none" role="img" aria-label="file-list"><rect x="28" y="22" width="244" height="112" rx="6" fill="#fff" stroke="#e5e5e8"/><rect x="42" y="35" width="30" height="30" rx="6" fill="#fff1f1" stroke="#e5e5e8"/><text x="83" y="45" font-size="11" fill="#202024" font-family="system-ui,sans-serif">Project report.pdf</text><text x="83" y="63" font-size="9" fill="#718078" font-family="system-ui,sans-serif">PDF · 2.4 MB</text><g transform="translate(240 44)" stroke="#718078" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0V10M-4 6L0 10L4 6M-6 12V15H6V12"/></g><rect x="42" y="89" width="30" height="30" rx="6" fill="#eff5ff" stroke="#e5e5e8"/><text x="83" y="99" font-size="11" fill="#202024" font-family="system-ui,sans-serif">Project notes.md</text><text x="83" y="117" font-size="9" fill="#718078" font-family="system-ui,sans-serif">MD · 4 KB</text><g transform="translate(240 98)" stroke="#718078" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0V10M-4 6L0 10L4 6M-6 12V15H6V12"/></g><path d="M28 78H272" stroke="#e5e5e8"/></svg>
diff --git a/apps/docs/docs/public/components/flex.svg b/apps/docs/docs/public/components/flex.svg
new file mode 100644
index 0000000..86fb610
--- /dev/null
+++ b/apps/docs/docs/public/components/flex.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="280" viewBox="0 0 480 280" fill="none">
+  <title>Flex</title>
+  <rect width="480" height="280" rx="20" fill="#f5f7f6"/>
+  <g fill="#d7ebe0" stroke="#8ebfa3" stroke-width="2">
+    <rect x="44" y="60" width="100" height="48" rx="10"/>
+    <rect x="158" y="60" width="100" height="48" rx="10"/>
+    <rect x="272" y="60" width="164" height="48" rx="10"/>
+    <rect x="44" y="136" width="124" height="48" rx="10"/>
+    <rect x="312" y="136" width="124" height="48" rx="10"/>
+  </g>
+  <path d="M188 160h104m-10-8 10 8-10 8m-84-16-10 8 10 8" stroke="#387b56" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/docs/docs/public/components/image-cropper.svg b/apps/docs/docs/public/components/image-cropper.svg
deleted file mode 100644
index 4208480..0000000
--- a/apps/docs/docs/public/components/image-cropper.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 156" fill="none" role="img" aria-label="image-cropper"><rect x="43" y="24" width="214" height="112" rx="6" fill="#d9eddf" stroke="none"/><path d="M43 136L112 61L173 117L222 63L257 136Z" fill="#81b58f"/><rect x="84" y="36" width="132" height="86" rx="0" fill="none" stroke="#fff"/><path d="M128 36V122M172 36V122M84 65H216M84 94H216" stroke="#fff" stroke-opacity=".5"/></svg>
diff --git a/apps/docs/docs/public/components/pagination.svg b/apps/docs/docs/public/components/pagination.svg
index 942a28b..f004f17 100644
--- a/apps/docs/docs/public/components/pagination.svg
+++ b/apps/docs/docs/public/components/pagination.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="240" height="128" viewBox="0 0 240 128" fill="none"><title>pagination</title><g transform="translate(20 48)"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#68686f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg></g><rect x="43" y="40" width="26" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><text x="53" y="58" fill="#202024" font-size="10" font-family="system-ui,sans-serif">1</text><rect x="74" y="40" width="26" height="28" rx="6" fill="#eaf4ed" stroke="#20834a"/><text x="84" y="58" fill="#20834a" font-size="10" font-family="system-ui,sans-serif">2</text><rect x="105" y="40" width="26" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><text x="115" y="58" fill="#202024" font-size="10" font-family="system-ui,sans-serif">3</text><rect x="136" y="40" width="26" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><text x="146" y="58" fill="#202024" font-size="10" font-family="system-ui,sans-serif">4</text><rect x="167" y="40" width="26" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><text x="177" y="58" fill="#202024" font-size="10" font-family="system-ui,sans-serif">5</text><g transform="translate(204 48)"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#68686f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></g><text x="73" y="92" fill="#68686f" font-size="9" font-family="system-ui,sans-serif">11–20 / 50 items</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="128" viewBox="0 0 240 128" fill="none"><title>pagination</title><rect x="12" y="40" width="28" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><g transform="translate(20 48)"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#68686f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg></g><rect x="43" y="40" width="26" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><text x="53" y="58" fill="#202024" font-size="10" font-family="system-ui,sans-serif">1</text><rect x="74" y="40" width="26" height="28" rx="6" fill="#eaf4ed" stroke="#20834a"/><text x="84" y="58" fill="#20834a" font-size="10" font-family="system-ui,sans-serif">2</text><rect x="105" y="40" width="26" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><text x="115" y="58" fill="#202024" font-size="10" font-family="system-ui,sans-serif">3</text><rect x="136" y="40" width="26" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><text x="146" y="58" fill="#202024" font-size="10" font-family="system-ui,sans-serif">4</text><rect x="167" y="40" width="26" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><text x="177" y="58" fill="#202024" font-size="10" font-family="system-ui,sans-serif">5</text><rect x="200" y="40" width="28" height="28" rx="6" fill="#fff" stroke="#e5e5e8"/><g transform="translate(208 48)"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#68686f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></g><text x="73" y="92" fill="#68686f" font-size="9" font-family="system-ui,sans-serif">11–20 / 50 items</text></svg>
diff --git a/apps/docs/docs/public/components/signature-pad.svg b/apps/docs/docs/public/components/signature-pad.svg
deleted file mode 100644
index e09bf99..0000000
--- a/apps/docs/docs/public/components/signature-pad.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 156" fill="none" role="img" aria-label="signature-pad"><rect x="32" y="30" width="236" height="94" rx="6" fill="#fff" stroke="#e5e5e8"/><path d="M60 99C88 32 74 107 105 72S96 117 132 93S131 116 170 93S196 107 230 78" fill="none"/><text x="52" y="141" font-size="10" fill="#718078" font-family="system-ui,sans-serif">Signature</text></svg>
diff --git a/apps/docs/docs/public/components/tag.svg b/apps/docs/docs/public/components/tag.svg
index 8076acc..db9d4d0 100644
--- a/apps/docs/docs/public/components/tag.svg
+++ b/apps/docs/docs/public/components/tag.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="240" height="128" viewBox="0 0 240 128" fill="none"><title>tag</title><rect x="21" y="34" width="59" height="25" rx="6" fill="#eaf4ed" stroke="#bddcc7"/><text x="30" y="51" fill="#20834a" font-size="9" font-family="system-ui,sans-serif">Published</text><rect x="90" y="34" width="54" height="25" rx="6" fill="#edf5ff" stroke="#bbd7fc"/><text x="101" y="51" fill="#1677ff" font-size="10" font-family="system-ui,sans-serif">Design</text><rect x="154" y="34" width="64" height="25" rx="6" fill="#fff6e9" stroke="#e8d1af"/><text x="164" y="51" fill="#8d671c" font-size="10" font-family="system-ui,sans-serif">Pending</text><rect x="56" y="74" width="61" height="25" rx="6" fill="#20834a" stroke="none"/><text x="68" y="91" fill="#fff" font-size="10" font-family="system-ui,sans-serif">Ready</text><rect x="129" y="74" width="61" height="25" rx="6" fill="#f4effb" stroke="#d9cdee"/><text x="141" y="91" fill="#7654c6" font-size="10" font-family="system-ui,sans-serif">Leaf</text><g transform="translate(169 80)"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7654c6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="128" viewBox="0 0 240 128" fill="none"><title>tag</title><rect x="21" y="34" width="59" height="25" rx="5" fill="#eaf4ed" stroke="none"/><text x="30" y="51" fill="#20834a" font-size="9" font-family="system-ui,sans-serif">Published</text><rect x="90" y="34" width="54" height="25" rx="5" fill="#edf5ff" stroke="none"/><text x="101" y="51" fill="#1677ff" font-size="10" font-family="system-ui,sans-serif">Design</text><rect x="154" y="34" width="64" height="25" rx="5" fill="#fff6e9" stroke="none"/><text x="164" y="51" fill="#8d671c" font-size="10" font-family="system-ui,sans-serif">Pending</text><rect x="56" y="74" width="61" height="25" rx="5" fill="#20834a" stroke="none"/><text x="68" y="91" fill="#fff" font-size="10" font-family="system-ui,sans-serif">Ready</text><rect x="129" y="74" width="61" height="25" rx="5" fill="#f4effb" stroke="none"/><text x="141" y="91" fill="#7654c6" font-size="10" font-family="system-ui,sans-serif">Leaf</text><g transform="translate(169 80)"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7654c6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></g></svg>
diff --git a/apps/docs/docs/public/design/leaf-dark-components.svg b/apps/docs/docs/public/design/leaf-dark-components.svg
index e920af5..0f1c946 100644
--- a/apps/docs/docs/public/design/leaf-dark-components.svg
+++ b/apps/docs/docs/public/design/leaf-dark-components.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="848" height="1080" viewBox="0 0 848 1080" font-family="Inter, Arial, sans-serif"><title>Leaf UI dark design resources</title><rect x="0" y="0" width="848" height="1080" rx="0" fill="#1c1c20" stroke="none"/><text x="32" y="50" fill="#ededf0" font-size="28" font-weight="600">Leaf UI / dark component states</text><text x="32" y="118" fill="#a5a5ae" font-size="14" font-weight="400">solid</text><g id="button-solid-default" opacity="1"><rect x="160" y="94" width="136" height="40" rx="10" fill="#83cf9e" stroke="none"/><text x="184" y="119" fill="#11271a" font-size="14" font-weight="500">Default</text></g><g id="button-solid-hover" opacity="1"><rect x="320" y="94" width="136" height="40" rx="10" fill="rgba(134, 208, 160, 1)" stroke="none"/><text x="344" y="119" fill="#11271a" font-size="14" font-weight="500">Hover</text></g><g id="button-solid-pressed" opacity="1"><rect x="480" y="94" width="136" height="40" rx="10" fill="rgba(134, 208, 160, 1)" stroke="none"/><text x="504" y="119" fill="#11271a" font-size="14" font-weight="500">Pressed</text></g><g id="button-solid-disabled" opacity="0.45"><rect x="640" y="94" width="136" height="40" rx="10" fill="#83cf9e" stroke="none"/><text x="664" y="119" fill="#11271a" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="202" fill="#a5a5ae" font-size="14" font-weight="400">outline</text><g id="button-outline-default" opacity="1"><rect x="160" y="178" width="136" height="40" rx="10" fill="#1c1c20" stroke="#38383f"/><text x="184" y="203" fill="#ededf0" font-size="14" font-weight="500">Default</text></g><g id="button-outline-hover" opacity="1"><rect x="320" y="178" width="136" height="40" rx="10" fill="#25252b" stroke="#38383f"/><text x="344" y="203" fill="#ededf0" font-size="14" font-weight="500">Hover</text></g><g id="button-outline-pressed" opacity="1"><rect x="480" y="178" width="136" height="40" rx="10" fill="#25252b" stroke="#38383f"/><text x="504" y="203" fill="#ededf0" font-size="14" font-weight="500">Pressed</text></g><g id="button-outline-disabled" opacity="0.45"><rect x="640" y="178" width="136" height="40" rx="10" fill="#1c1c20" stroke="#38383f"/><text x="664" y="203" fill="#ededf0" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="286" fill="#a5a5ae" font-size="14" font-weight="400">ghost</text><g id="button-ghost-default" opacity="1"><rect x="160" y="262" width="136" height="40" rx="10" fill="none" stroke="none"/><text x="184" y="287" fill="#ededf0" font-size="14" font-weight="500">Default</text></g><g id="button-ghost-hover" opacity="1"><rect x="320" y="262" width="136" height="40" rx="10" fill="#25252b" stroke="none"/><text x="344" y="287" fill="#ededf0" font-size="14" font-weight="500">Hover</text></g><g id="button-ghost-pressed" opacity="1"><rect x="480" y="262" width="136" height="40" rx="10" fill="#38383f" stroke="none"/><text x="504" y="287" fill="#ededf0" font-size="14" font-weight="500">Pressed</text></g><g id="button-ghost-disabled" opacity="0.45"><rect x="640" y="262" width="136" height="40" rx="10" fill="none" stroke="none"/><text x="664" y="287" fill="#ededf0" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="450" fill="#ededf0" font-size="20" font-weight="600">Fields / default · focus · error</text><g id="input-default"><rect x="32" y="487" width="240" height="40" rx="10" fill="#1c1c20" stroke="#38383f"/><text x="42" y="512" fill="#ededf0" font-size="14" font-weight="400">Default</text></g><g id="input-focus"><rect x="293" y="484" width="246" height="46" rx="12" fill="none" stroke="rgba(131, 207, 158, 0.42)"/><rect x="296" y="487" width="240" height="40" rx="10" fill="#1c1c20" stroke="#83cf9e"/><text x="306" y="512" fill="#ededf0" font-size="14" font-weight="400">Focus</text></g><g id="input-error"><rect x="560" y="487" width="240" height="40" rx="10" fill="#1c1c20" stroke="#ef8585"/><text x="570" y="512" fill="#ededf0" font-size="14" font-weight="400">Error</text></g><g id="alert-info"><rect x="32" y="557" width="784" height="72" rx="16" fill="#25252b" stroke="rgba(48, 48, 54, 1)"/><text x="59" y="596" fill="#69b1ff" font-size="18" font-weight="600">i</text><text x="90" y="584" fill="#ededf0" font-size="14" font-weight="500">Keep the team informed</text><text x="90" y="608" fill="#a5a5ae" font-size="14" font-weight="400">Readable spacing and a semantic status icon.</text></g><g id="result-success"><rect x="32" y="657" width="784" height="188" rx="16" fill="#1c1c20" stroke="#38383f"/><rect x="392" y="681" width="64" height="64" rx="32" fill="#25252b" stroke="none"/><path d="M410 713 L420 723 L439 702" fill="none" stroke="#83cf9e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><text x="332" y="778" fill="#ededf0" font-size="24" font-weight="600">Project saved</text><text x="278" y="812" fill="#a5a5ae" font-size="14" font-weight="400">Your changes are ready for the team.</text></g><g id="dialog-anatomy"><rect x="32" y="877" width="784" height="170" rx="16" fill="#1c1c20" stroke="#38383f"/><rect x="33" y="985" width="782" height="61" rx="15" fill="#25252b" stroke="none"/><rect x="33" y="985" width="782" height="30" rx="0" fill="#25252b" stroke="none"/><path d="M33 929 H815 M33 985 H815" stroke="rgba(48, 48, 54, 1)"/><text x="56" y="910" fill="#ededf0" font-size="17" font-weight="600">Dialog heading</text><rect x="56" y="940" width="736" height="40" rx="10" fill="#1c1c20" stroke="#38383f"/><text x="66" y="965" fill="#a5a5ae" font-size="14" font-weight="400">Form and footer share an inline edge</text><rect x="680" y="997" width="112" height="40" rx="10" fill="#83cf9e" stroke="none"/><text x="710" y="1022" fill="#11271a" font-size="14" font-weight="500">Save</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="848" height="1080" viewBox="0 0 848 1080" font-family="Inter, Arial, sans-serif"><title>Leaf UI dark design resources</title><rect x="0" y="0" width="848" height="1080" rx="0" fill="#1c1c20" stroke="none"/><text x="32" y="50" fill="#ededf0" font-size="28" font-weight="600">Leaf UI / dark component states</text><text x="32" y="118" fill="#a5a5ae" font-size="14" font-weight="400">solid</text><g id="button-solid-default" opacity="1"><rect x="160" y="94" width="136" height="36" rx="10" fill="#83cf9e" stroke="none"/><text x="184" y="117" fill="#11271a" font-size="14" font-weight="500">Default</text></g><g id="button-solid-hover" opacity="1"><rect x="320" y="94" width="136" height="36" rx="10" fill="rgba(134, 208, 160, 1)" stroke="none"/><text x="344" y="117" fill="#11271a" font-size="14" font-weight="500">Hover</text></g><g id="button-solid-pressed" opacity="1"><rect x="480" y="94" width="136" height="36" rx="10" fill="rgba(134, 208, 160, 1)" stroke="none"/><text x="504" y="117" fill="#11271a" font-size="14" font-weight="500">Pressed</text></g><g id="button-solid-disabled" opacity="0.45"><rect x="640" y="94" width="136" height="36" rx="10" fill="#83cf9e" stroke="none"/><text x="664" y="117" fill="#11271a" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="202" fill="#a5a5ae" font-size="14" font-weight="400">outline</text><g id="button-outline-default" opacity="1"><rect x="160" y="178" width="136" height="36" rx="10" fill="#1c1c20" stroke="#38383f"/><text x="184" y="201" fill="#ededf0" font-size="14" font-weight="500">Default</text></g><g id="button-outline-hover" opacity="1"><rect x="320" y="178" width="136" height="36" rx="10" fill="#25252b" stroke="#38383f"/><text x="344" y="201" fill="#ededf0" font-size="14" font-weight="500">Hover</text></g><g id="button-outline-pressed" opacity="1"><rect x="480" y="178" width="136" height="36" rx="10" fill="#25252b" stroke="#38383f"/><text x="504" y="201" fill="#ededf0" font-size="14" font-weight="500">Pressed</text></g><g id="button-outline-disabled" opacity="0.45"><rect x="640" y="178" width="136" height="36" rx="10" fill="#1c1c20" stroke="#38383f"/><text x="664" y="201" fill="#ededf0" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="286" fill="#a5a5ae" font-size="14" font-weight="400">ghost</text><g id="button-ghost-default" opacity="1"><rect x="160" y="262" width="136" height="36" rx="10" fill="none" stroke="none"/><text x="184" y="285" fill="#ededf0" font-size="14" font-weight="500">Default</text></g><g id="button-ghost-hover" opacity="1"><rect x="320" y="262" width="136" height="36" rx="10" fill="#25252b" stroke="none"/><text x="344" y="285" fill="#ededf0" font-size="14" font-weight="500">Hover</text></g><g id="button-ghost-pressed" opacity="1"><rect x="480" y="262" width="136" height="36" rx="10" fill="#38383f" stroke="none"/><text x="504" y="285" fill="#ededf0" font-size="14" font-weight="500">Pressed</text></g><g id="button-ghost-disabled" opacity="0.45"><rect x="640" y="262" width="136" height="36" rx="10" fill="none" stroke="none"/><text x="664" y="285" fill="#ededf0" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="450" fill="#ededf0" font-size="20" font-weight="600">Fields / default · focus · error</text><g id="input-default"><rect x="32" y="487" width="240" height="36" rx="10" fill="#1c1c20" stroke="#38383f"/><text x="42" y="510" fill="#ededf0" font-size="14" font-weight="400">Default</text></g><g id="input-focus"><rect x="293" y="484" width="246" height="42" rx="12" fill="none" stroke="rgba(131, 207, 158, 0.42)"/><rect x="296" y="487" width="240" height="36" rx="10" fill="#1c1c20" stroke="#83cf9e"/><text x="306" y="510" fill="#ededf0" font-size="14" font-weight="400">Focus</text></g><g id="input-error"><rect x="560" y="487" width="240" height="36" rx="10" fill="#1c1c20" stroke="#ef8585"/><text x="570" y="510" fill="#ededf0" font-size="14" font-weight="400">Error</text></g><g id="alert-info"><rect x="32" y="557" width="784" height="72" rx="16" fill="#25252b" stroke="rgba(48, 48, 54, 1)"/><text x="59" y="596" fill="#69b1ff" font-size="18" font-weight="600">i</text><text x="90" y="584" fill="#ededf0" font-size="14" font-weight="500">Keep the team informed</text><text x="90" y="608" fill="#a5a5ae" font-size="14" font-weight="400">Readable spacing and a semantic status icon.</text></g><g id="result-success"><rect x="32" y="657" width="784" height="188" rx="16" fill="#1c1c20" stroke="#38383f"/><rect x="392" y="681" width="64" height="64" rx="32" fill="#25252b" stroke="none"/><path d="M410 713 L420 723 L439 702" fill="none" stroke="#83cf9e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><text x="332" y="778" fill="#ededf0" font-size="24" font-weight="600">Project saved</text><text x="278" y="812" fill="#a5a5ae" font-size="14" font-weight="400">Your changes are ready for the team.</text></g><g id="dialog-anatomy"><rect x="32" y="877" width="784" height="170" rx="16" fill="#1c1c20" stroke="#38383f"/><rect x="33" y="985" width="782" height="61" rx="15" fill="#25252b" stroke="none"/><rect x="33" y="985" width="782" height="30" rx="0" fill="#25252b" stroke="none"/><path d="M33 929 H815 M33 985 H815" stroke="rgba(48, 48, 54, 1)"/><text x="56" y="910" fill="#ededf0" font-size="17" font-weight="600">Dialog heading</text><rect x="56" y="940" width="736" height="36" rx="10" fill="#1c1c20" stroke="#38383f"/><text x="66" y="963" fill="#a5a5ae" font-size="14" font-weight="400">Form and footer share an inline edge</text><rect x="680" y="997" width="112" height="36" rx="10" fill="#83cf9e" stroke="none"/><text x="710" y="1020" fill="#11271a" font-size="14" font-weight="500">Save</text></g></svg>
diff --git a/apps/docs/docs/public/design/leaf-dark-foundations.svg b/apps/docs/docs/public/design/leaf-dark-foundations.svg
index 1224cf0..baccb87 100644
--- a/apps/docs/docs/public/design/leaf-dark-foundations.svg
+++ b/apps/docs/docs/public/design/leaf-dark-foundations.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="848" height="724" viewBox="0 0 848 724" font-family="Inter, Arial, sans-serif"><title>Leaf UI dark design resources</title><rect x="0" y="0" width="848" height="724" rx="0" fill="#1c1c20" stroke="none"/><text x="32" y="50" fill="#ededf0" font-size="28" font-weight="600">Leaf UI / dark foundations</text><g id="color-primary"><rect x="32" y="82" width="172" height="68" rx="12" fill="#83cf9e" stroke="#38383f"/><text x="32" y="176" fill="#ededf0" font-size="14" font-weight="500">primary</text><text x="32" y="198" fill="#a5a5ae" font-size="12" font-weight="400">#83cf9e</text></g><g id="color-on-primary"><rect x="232" y="82" width="172" height="68" rx="12" fill="#11271a" stroke="#38383f"/><text x="232" y="176" fill="#ededf0" font-size="14" font-weight="500">on-primary</text><text x="232" y="198" fill="#a5a5ae" font-size="12" font-weight="400">#11271a</text></g><g id="color-danger"><rect x="432" y="82" width="172" height="68" rx="12" fill="#ef8585" stroke="#38383f"/><text x="432" y="176" fill="#ededf0" font-size="14" font-weight="500">danger</text><text x="432" y="198" fill="#a5a5ae" font-size="12" font-weight="400">#ef8585</text></g><g id="color-on-danger"><rect x="632" y="82" width="172" height="68" rx="12" fill="#381818" stroke="#38383f"/><text x="632" y="176" fill="#ededf0" font-size="14" font-weight="500">on-danger</text><text x="632" y="198" fill="#a5a5ae" font-size="12" font-weight="400">#381818</text></g><g id="color-warning"><rect x="32" y="220" width="172" height="68" rx="12" fill="#ffc53d" stroke="#38383f"/><text x="32" y="314" fill="#ededf0" font-size="14" font-weight="500">warning</text><text x="32" y="336" fill="#a5a5ae" font-size="12" font-weight="400">#ffc53d</text></g><g id="color-info"><rect x="232" y="220" width="172" height="68" rx="12" fill="#69b1ff" stroke="#38383f"/><text x="232" y="314" fill="#ededf0" font-size="14" font-weight="500">info</text><text x="232" y="336" fill="#a5a5ae" font-size="12" font-weight="400">#69b1ff</text></g><g id="color-success"><rect x="432" y="220" width="172" height="68" rx="12" fill="#83cf9e" stroke="#38383f"/><text x="432" y="314" fill="#ededf0" font-size="14" font-weight="500">success</text><text x="432" y="336" fill="#a5a5ae" font-size="12" font-weight="400">#83cf9e</text></g><g id="color-text"><rect x="632" y="220" width="172" height="68" rx="12" fill="#ededf0" stroke="#38383f"/><text x="632" y="314" fill="#ededf0" font-size="14" font-weight="500">text</text><text x="632" y="336" fill="#a5a5ae" font-size="12" font-weight="400">#ededf0</text></g><g id="color-text-muted"><rect x="32" y="358" width="172" height="68" rx="12" fill="#a5a5ae" stroke="#38383f"/><text x="32" y="452" fill="#ededf0" font-size="14" font-weight="500">text-muted</text><text x="32" y="474" fill="#a5a5ae" font-size="12" font-weight="400">#a5a5ae</text></g><g id="color-surface"><rect x="232" y="358" width="172" height="68" rx="12" fill="#1c1c20" stroke="#38383f"/><text x="232" y="452" fill="#ededf0" font-size="14" font-weight="500">surface</text><text x="232" y="474" fill="#a5a5ae" font-size="12" font-weight="400">#1c1c20</text></g><g id="color-surface-muted"><rect x="432" y="358" width="172" height="68" rx="12" fill="#25252b" stroke="#38383f"/><text x="432" y="452" fill="#ededf0" font-size="14" font-weight="500">surface-muted</text><text x="432" y="474" fill="#a5a5ae" font-size="12" font-weight="400">#25252b</text></g><g id="color-border"><rect x="632" y="358" width="172" height="68" rx="12" fill="#38383f" stroke="#38383f"/><text x="632" y="452" fill="#ededf0" font-size="14" font-weight="500">border</text><text x="632" y="474" fill="#a5a5ae" font-size="12" font-weight="400">#38383f</text></g><text x="32" y="542" fill="#ededf0" font-size="20" font-weight="600">Typography · Inter / system sans-serif</text><text x="32" y="580" fill="#ededf0" font-size="24" font-weight="600">Heading 24 / 600</text><text x="32" y="614" fill="#ededf0" font-size="14" font-weight="400">Body 14 / 1.6 · Semantic colors and stable geometry</text><text x="32" y="650" fill="#a5a5ae" font-size="14" font-weight="400">Comfortable: 40px controls / 8px spacing</text><text x="32" y="680" fill="#a5a5ae" font-size="14" font-weight="400">Compact: 34px controls / 6px spacing</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="848" height="724" viewBox="0 0 848 724" font-family="Inter, Arial, sans-serif"><title>Leaf UI dark design resources</title><rect x="0" y="0" width="848" height="724" rx="0" fill="#1c1c20" stroke="none"/><text x="32" y="50" fill="#ededf0" font-size="28" font-weight="600">Leaf UI / dark foundations</text><g id="color-primary"><rect x="32" y="82" width="172" height="68" rx="12" fill="#83cf9e" stroke="#38383f"/><text x="32" y="176" fill="#ededf0" font-size="14" font-weight="500">primary</text><text x="32" y="198" fill="#a5a5ae" font-size="12" font-weight="400">#83cf9e</text></g><g id="color-on-primary"><rect x="232" y="82" width="172" height="68" rx="12" fill="#11271a" stroke="#38383f"/><text x="232" y="176" fill="#ededf0" font-size="14" font-weight="500">on-primary</text><text x="232" y="198" fill="#a5a5ae" font-size="12" font-weight="400">#11271a</text></g><g id="color-danger"><rect x="432" y="82" width="172" height="68" rx="12" fill="#ef8585" stroke="#38383f"/><text x="432" y="176" fill="#ededf0" font-size="14" font-weight="500">danger</text><text x="432" y="198" fill="#a5a5ae" font-size="12" font-weight="400">#ef8585</text></g><g id="color-on-danger"><rect x="632" y="82" width="172" height="68" rx="12" fill="#381818" stroke="#38383f"/><text x="632" y="176" fill="#ededf0" font-size="14" font-weight="500">on-danger</text><text x="632" y="198" fill="#a5a5ae" font-size="12" font-weight="400">#381818</text></g><g id="color-warning"><rect x="32" y="220" width="172" height="68" rx="12" fill="#ffc53d" stroke="#38383f"/><text x="32" y="314" fill="#ededf0" font-size="14" font-weight="500">warning</text><text x="32" y="336" fill="#a5a5ae" font-size="12" font-weight="400">#ffc53d</text></g><g id="color-info"><rect x="232" y="220" width="172" height="68" rx="12" fill="#69b1ff" stroke="#38383f"/><text x="232" y="314" fill="#ededf0" font-size="14" font-weight="500">info</text><text x="232" y="336" fill="#a5a5ae" font-size="12" font-weight="400">#69b1ff</text></g><g id="color-success"><rect x="432" y="220" width="172" height="68" rx="12" fill="#83cf9e" stroke="#38383f"/><text x="432" y="314" fill="#ededf0" font-size="14" font-weight="500">success</text><text x="432" y="336" fill="#a5a5ae" font-size="12" font-weight="400">#83cf9e</text></g><g id="color-text"><rect x="632" y="220" width="172" height="68" rx="12" fill="#ededf0" stroke="#38383f"/><text x="632" y="314" fill="#ededf0" font-size="14" font-weight="500">text</text><text x="632" y="336" fill="#a5a5ae" font-size="12" font-weight="400">#ededf0</text></g><g id="color-text-muted"><rect x="32" y="358" width="172" height="68" rx="12" fill="#a5a5ae" stroke="#38383f"/><text x="32" y="452" fill="#ededf0" font-size="14" font-weight="500">text-muted</text><text x="32" y="474" fill="#a5a5ae" font-size="12" font-weight="400">#a5a5ae</text></g><g id="color-surface"><rect x="232" y="358" width="172" height="68" rx="12" fill="#1c1c20" stroke="#38383f"/><text x="232" y="452" fill="#ededf0" font-size="14" font-weight="500">surface</text><text x="232" y="474" fill="#a5a5ae" font-size="12" font-weight="400">#1c1c20</text></g><g id="color-surface-muted"><rect x="432" y="358" width="172" height="68" rx="12" fill="#25252b" stroke="#38383f"/><text x="432" y="452" fill="#ededf0" font-size="14" font-weight="500">surface-muted</text><text x="432" y="474" fill="#a5a5ae" font-size="12" font-weight="400">#25252b</text></g><g id="color-border"><rect x="632" y="358" width="172" height="68" rx="12" fill="#38383f" stroke="#38383f"/><text x="632" y="452" fill="#ededf0" font-size="14" font-weight="500">border</text><text x="632" y="474" fill="#a5a5ae" font-size="12" font-weight="400">#38383f</text></g><text x="32" y="542" fill="#ededf0" font-size="20" font-weight="600">Typography · Inter / system sans-serif</text><text x="32" y="580" fill="#ededf0" font-size="24" font-weight="600">Heading 24 / 600</text><text x="32" y="614" fill="#ededf0" font-size="14" font-weight="400">Body 14 / 1.6 · Semantic colors and stable geometry</text><text x="32" y="650" fill="#a5a5ae" font-size="14" font-weight="400">Comfortable: 36px controls / 8px spacing</text><text x="32" y="680" fill="#a5a5ae" font-size="14" font-weight="400">Compact: 30px controls / 6px spacing</text></svg>
diff --git a/apps/docs/docs/public/design/leaf-figma-plugin.zip b/apps/docs/docs/public/design/leaf-figma-plugin.zip
index 17913556d21e879bbfbdbbcd1b11b41f520dc091..245b23cfd3b661493d9344c5af7452c49c569980 100644
GIT binary patch
delta 193
zcmex1k!k*9rVZkZTsI^?q}SFnFx1v>R%Cq6%#&YGl9`{Un~`6ZS~Pi=oZ{poa)OLW
zllRMsO=gxCnOx2qx;cyWzagr+i%yD@HIl>_jV3e7i)}75m(^!7Hk&*(EgK|~zKGXA
zN2$0VF*!3YUCGL9^1?Kc$w$&X8I2~TOK;Z9h*m&y#N@sXSLM|W3=Bc8jxN5gdbue9
T-mGj4K)?)y%YpQx4iFCj(QH0=

delta 110
zcmbO~nd#d^rVZkZTooG{c3r7sV7OAZS&{KM^W@|5e3KO{xF+9Y_1b)l^}iuVV6%dS
zj6Rcz!DPGiY(}%mtI`)SnoRc1$Ye4$0CJ=@U&@G9Kr(2ud8aEQ)8yJt88*uf1|R?c
DJh~`4

diff --git a/apps/docs/docs/public/design/leaf-light-components.svg b/apps/docs/docs/public/design/leaf-light-components.svg
index 9e6edb3..1b90e0e 100644
--- a/apps/docs/docs/public/design/leaf-light-components.svg
+++ b/apps/docs/docs/public/design/leaf-light-components.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="848" height="1080" viewBox="0 0 848 1080" font-family="Inter, Arial, sans-serif"><title>Leaf UI light design resources</title><rect x="0" y="0" width="848" height="1080" rx="0" fill="#ffffff" stroke="none"/><text x="32" y="50" fill="#202024" font-size="28" font-weight="600">Leaf UI / light component states</text><text x="32" y="118" fill="#68686f" font-size="14" font-weight="400">solid</text><g id="button-solid-default" opacity="1"><rect x="160" y="94" width="136" height="40" rx="10" fill="#20834a" stroke="none"/><text x="184" y="119" fill="#ffffff" font-size="14" font-weight="500">Default</text></g><g id="button-solid-hover" opacity="1"><rect x="320" y="94" width="136" height="40" rx="10" fill="rgba(38, 134, 79, 1)" stroke="none"/><text x="344" y="119" fill="#ffffff" font-size="14" font-weight="500">Hover</text></g><g id="button-solid-pressed" opacity="1"><rect x="480" y="94" width="136" height="40" rx="10" fill="rgba(38, 134, 79, 1)" stroke="none"/><text x="504" y="119" fill="#ffffff" font-size="14" font-weight="500">Pressed</text></g><g id="button-solid-disabled" opacity="0.45"><rect x="640" y="94" width="136" height="40" rx="10" fill="#20834a" stroke="none"/><text x="664" y="119" fill="#ffffff" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="202" fill="#68686f" font-size="14" font-weight="400">outline</text><g id="button-outline-default" opacity="1"><rect x="160" y="178" width="136" height="40" rx="10" fill="#ffffff" stroke="#e5e5e8"/><text x="184" y="203" fill="#202024" font-size="14" font-weight="500">Default</text></g><g id="button-outline-hover" opacity="1"><rect x="320" y="178" width="136" height="40" rx="10" fill="#f6f6f7" stroke="#e5e5e8"/><text x="344" y="203" fill="#202024" font-size="14" font-weight="500">Hover</text></g><g id="button-outline-pressed" opacity="1"><rect x="480" y="178" width="136" height="40" rx="10" fill="#f6f6f7" stroke="#e5e5e8"/><text x="504" y="203" fill="#202024" font-size="14" font-weight="500">Pressed</text></g><g id="button-outline-disabled" opacity="0.45"><rect x="640" y="178" width="136" height="40" rx="10" fill="#ffffff" stroke="#e5e5e8"/><text x="664" y="203" fill="#202024" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="286" fill="#68686f" font-size="14" font-weight="400">ghost</text><g id="button-ghost-default" opacity="1"><rect x="160" y="262" width="136" height="40" rx="10" fill="none" stroke="none"/><text x="184" y="287" fill="#202024" font-size="14" font-weight="500">Default</text></g><g id="button-ghost-hover" opacity="1"><rect x="320" y="262" width="136" height="40" rx="10" fill="#f6f6f7" stroke="none"/><text x="344" y="287" fill="#202024" font-size="14" font-weight="500">Hover</text></g><g id="button-ghost-pressed" opacity="1"><rect x="480" y="262" width="136" height="40" rx="10" fill="#e5e5e8" stroke="none"/><text x="504" y="287" fill="#202024" font-size="14" font-weight="500">Pressed</text></g><g id="button-ghost-disabled" opacity="0.45"><rect x="640" y="262" width="136" height="40" rx="10" fill="none" stroke="none"/><text x="664" y="287" fill="#202024" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="450" fill="#202024" font-size="20" font-weight="600">Fields / default · focus · error</text><g id="input-default"><rect x="32" y="487" width="240" height="40" rx="10" fill="#ffffff" stroke="#e5e5e8"/><text x="42" y="512" fill="#202024" font-size="14" font-weight="400">Default</text></g><g id="input-focus"><rect x="293" y="484" width="246" height="46" rx="12" fill="none" stroke="rgba(32, 131, 74, 0.42)"/><rect x="296" y="487" width="240" height="40" rx="10" fill="#ffffff" stroke="#20834a"/><text x="306" y="512" fill="#202024" font-size="14" font-weight="400">Focus</text></g><g id="input-error"><rect x="560" y="487" width="240" height="40" rx="10" fill="#ffffff" stroke="#c83c3c"/><text x="570" y="512" fill="#202024" font-size="14" font-weight="400">Error</text></g><g id="alert-info"><rect x="32" y="557" width="784" height="72" rx="16" fill="#f6f6f7" stroke="rgba(237, 237, 239, 1)"/><text x="59" y="596" fill="#1677ff" font-size="18" font-weight="600">i</text><text x="90" y="584" fill="#202024" font-size="14" font-weight="500">Keep the team informed</text><text x="90" y="608" fill="#68686f" font-size="14" font-weight="400">Readable spacing and a semantic status icon.</text></g><g id="result-success"><rect x="32" y="657" width="784" height="188" rx="16" fill="#ffffff" stroke="#e5e5e8"/><rect x="392" y="681" width="64" height="64" rx="32" fill="#f6f6f7" stroke="none"/><path d="M410 713 L420 723 L439 702" fill="none" stroke="#20834a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><text x="332" y="778" fill="#202024" font-size="24" font-weight="600">Project saved</text><text x="278" y="812" fill="#68686f" font-size="14" font-weight="400">Your changes are ready for the team.</text></g><g id="dialog-anatomy"><rect x="32" y="877" width="784" height="170" rx="16" fill="#ffffff" stroke="#e5e5e8"/><rect x="33" y="985" width="782" height="61" rx="15" fill="#f6f6f7" stroke="none"/><rect x="33" y="985" width="782" height="30" rx="0" fill="#f6f6f7" stroke="none"/><path d="M33 929 H815 M33 985 H815" stroke="rgba(237, 237, 239, 1)"/><text x="56" y="910" fill="#202024" font-size="17" font-weight="600">Dialog heading</text><rect x="56" y="940" width="736" height="40" rx="10" fill="#ffffff" stroke="#e5e5e8"/><text x="66" y="965" fill="#68686f" font-size="14" font-weight="400">Form and footer share an inline edge</text><rect x="680" y="997" width="112" height="40" rx="10" fill="#20834a" stroke="none"/><text x="710" y="1022" fill="#ffffff" font-size="14" font-weight="500">Save</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="848" height="1080" viewBox="0 0 848 1080" font-family="Inter, Arial, sans-serif"><title>Leaf UI light design resources</title><rect x="0" y="0" width="848" height="1080" rx="0" fill="#ffffff" stroke="none"/><text x="32" y="50" fill="#202024" font-size="28" font-weight="600">Leaf UI / light component states</text><text x="32" y="118" fill="#68686f" font-size="14" font-weight="400">solid</text><g id="button-solid-default" opacity="1"><rect x="160" y="94" width="136" height="36" rx="10" fill="#20834a" stroke="none"/><text x="184" y="117" fill="#ffffff" font-size="14" font-weight="500">Default</text></g><g id="button-solid-hover" opacity="1"><rect x="320" y="94" width="136" height="36" rx="10" fill="rgba(38, 134, 79, 1)" stroke="none"/><text x="344" y="117" fill="#ffffff" font-size="14" font-weight="500">Hover</text></g><g id="button-solid-pressed" opacity="1"><rect x="480" y="94" width="136" height="36" rx="10" fill="rgba(38, 134, 79, 1)" stroke="none"/><text x="504" y="117" fill="#ffffff" font-size="14" font-weight="500">Pressed</text></g><g id="button-solid-disabled" opacity="0.45"><rect x="640" y="94" width="136" height="36" rx="10" fill="#20834a" stroke="none"/><text x="664" y="117" fill="#ffffff" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="202" fill="#68686f" font-size="14" font-weight="400">outline</text><g id="button-outline-default" opacity="1"><rect x="160" y="178" width="136" height="36" rx="10" fill="#ffffff" stroke="#e5e5e8"/><text x="184" y="201" fill="#202024" font-size="14" font-weight="500">Default</text></g><g id="button-outline-hover" opacity="1"><rect x="320" y="178" width="136" height="36" rx="10" fill="#f6f6f7" stroke="#e5e5e8"/><text x="344" y="201" fill="#202024" font-size="14" font-weight="500">Hover</text></g><g id="button-outline-pressed" opacity="1"><rect x="480" y="178" width="136" height="36" rx="10" fill="#f6f6f7" stroke="#e5e5e8"/><text x="504" y="201" fill="#202024" font-size="14" font-weight="500">Pressed</text></g><g id="button-outline-disabled" opacity="0.45"><rect x="640" y="178" width="136" height="36" rx="10" fill="#ffffff" stroke="#e5e5e8"/><text x="664" y="201" fill="#202024" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="286" fill="#68686f" font-size="14" font-weight="400">ghost</text><g id="button-ghost-default" opacity="1"><rect x="160" y="262" width="136" height="36" rx="10" fill="none" stroke="none"/><text x="184" y="285" fill="#202024" font-size="14" font-weight="500">Default</text></g><g id="button-ghost-hover" opacity="1"><rect x="320" y="262" width="136" height="36" rx="10" fill="#f6f6f7" stroke="none"/><text x="344" y="285" fill="#202024" font-size="14" font-weight="500">Hover</text></g><g id="button-ghost-pressed" opacity="1"><rect x="480" y="262" width="136" height="36" rx="10" fill="#e5e5e8" stroke="none"/><text x="504" y="285" fill="#202024" font-size="14" font-weight="500">Pressed</text></g><g id="button-ghost-disabled" opacity="0.45"><rect x="640" y="262" width="136" height="36" rx="10" fill="none" stroke="none"/><text x="664" y="285" fill="#202024" font-size="14" font-weight="500">Disabled</text></g><text x="32" y="450" fill="#202024" font-size="20" font-weight="600">Fields / default · focus · error</text><g id="input-default"><rect x="32" y="487" width="240" height="36" rx="10" fill="#ffffff" stroke="#e5e5e8"/><text x="42" y="510" fill="#202024" font-size="14" font-weight="400">Default</text></g><g id="input-focus"><rect x="293" y="484" width="246" height="42" rx="12" fill="none" stroke="rgba(32, 131, 74, 0.42)"/><rect x="296" y="487" width="240" height="36" rx="10" fill="#ffffff" stroke="#20834a"/><text x="306" y="510" fill="#202024" font-size="14" font-weight="400">Focus</text></g><g id="input-error"><rect x="560" y="487" width="240" height="36" rx="10" fill="#ffffff" stroke="#c83c3c"/><text x="570" y="510" fill="#202024" font-size="14" font-weight="400">Error</text></g><g id="alert-info"><rect x="32" y="557" width="784" height="72" rx="16" fill="#f6f6f7" stroke="rgba(237, 237, 239, 1)"/><text x="59" y="596" fill="#1677ff" font-size="18" font-weight="600">i</text><text x="90" y="584" fill="#202024" font-size="14" font-weight="500">Keep the team informed</text><text x="90" y="608" fill="#68686f" font-size="14" font-weight="400">Readable spacing and a semantic status icon.</text></g><g id="result-success"><rect x="32" y="657" width="784" height="188" rx="16" fill="#ffffff" stroke="#e5e5e8"/><rect x="392" y="681" width="64" height="64" rx="32" fill="#f6f6f7" stroke="none"/><path d="M410 713 L420 723 L439 702" fill="none" stroke="#20834a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><text x="332" y="778" fill="#202024" font-size="24" font-weight="600">Project saved</text><text x="278" y="812" fill="#68686f" font-size="14" font-weight="400">Your changes are ready for the team.</text></g><g id="dialog-anatomy"><rect x="32" y="877" width="784" height="170" rx="16" fill="#ffffff" stroke="#e5e5e8"/><rect x="33" y="985" width="782" height="61" rx="15" fill="#f6f6f7" stroke="none"/><rect x="33" y="985" width="782" height="30" rx="0" fill="#f6f6f7" stroke="none"/><path d="M33 929 H815 M33 985 H815" stroke="rgba(237, 237, 239, 1)"/><text x="56" y="910" fill="#202024" font-size="17" font-weight="600">Dialog heading</text><rect x="56" y="940" width="736" height="36" rx="10" fill="#ffffff" stroke="#e5e5e8"/><text x="66" y="963" fill="#68686f" font-size="14" font-weight="400">Form and footer share an inline edge</text><rect x="680" y="997" width="112" height="36" rx="10" fill="#20834a" stroke="none"/><text x="710" y="1020" fill="#ffffff" font-size="14" font-weight="500">Save</text></g></svg>
diff --git a/apps/docs/docs/public/design/leaf-light-foundations.svg b/apps/docs/docs/public/design/leaf-light-foundations.svg
index 7fb8531..83756ee 100644
--- a/apps/docs/docs/public/design/leaf-light-foundations.svg
+++ b/apps/docs/docs/public/design/leaf-light-foundations.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="848" height="724" viewBox="0 0 848 724" font-family="Inter, Arial, sans-serif"><title>Leaf UI light design resources</title><rect x="0" y="0" width="848" height="724" rx="0" fill="#ffffff" stroke="none"/><text x="32" y="50" fill="#202024" font-size="28" font-weight="600">Leaf UI / light foundations</text><g id="color-primary"><rect x="32" y="82" width="172" height="68" rx="12" fill="#20834a" stroke="#e5e5e8"/><text x="32" y="176" fill="#202024" font-size="14" font-weight="500">primary</text><text x="32" y="198" fill="#68686f" font-size="12" font-weight="400">#20834a</text></g><g id="color-on-primary"><rect x="232" y="82" width="172" height="68" rx="12" fill="#ffffff" stroke="#e5e5e8"/><text x="232" y="176" fill="#202024" font-size="14" font-weight="500">on-primary</text><text x="232" y="198" fill="#68686f" font-size="12" font-weight="400">#ffffff</text></g><g id="color-danger"><rect x="432" y="82" width="172" height="68" rx="12" fill="#c83c3c" stroke="#e5e5e8"/><text x="432" y="176" fill="#202024" font-size="14" font-weight="500">danger</text><text x="432" y="198" fill="#68686f" font-size="12" font-weight="400">#c83c3c</text></g><g id="color-on-danger"><rect x="632" y="82" width="172" height="68" rx="12" fill="#ffffff" stroke="#e5e5e8"/><text x="632" y="176" fill="#202024" font-size="14" font-weight="500">on-danger</text><text x="632" y="198" fill="#68686f" font-size="12" font-weight="400">#ffffff</text></g><g id="color-warning"><rect x="32" y="220" width="172" height="68" rx="12" fill="#faad14" stroke="#e5e5e8"/><text x="32" y="314" fill="#202024" font-size="14" font-weight="500">warning</text><text x="32" y="336" fill="#68686f" font-size="12" font-weight="400">#faad14</text></g><g id="color-info"><rect x="232" y="220" width="172" height="68" rx="12" fill="#1677ff" stroke="#e5e5e8"/><text x="232" y="314" fill="#202024" font-size="14" font-weight="500">info</text><text x="232" y="336" fill="#68686f" font-size="12" font-weight="400">#1677ff</text></g><g id="color-success"><rect x="432" y="220" width="172" height="68" rx="12" fill="#20834a" stroke="#e5e5e8"/><text x="432" y="314" fill="#202024" font-size="14" font-weight="500">success</text><text x="432" y="336" fill="#68686f" font-size="12" font-weight="400">#20834a</text></g><g id="color-text"><rect x="632" y="220" width="172" height="68" rx="12" fill="#202024" stroke="#e5e5e8"/><text x="632" y="314" fill="#202024" font-size="14" font-weight="500">text</text><text x="632" y="336" fill="#68686f" font-size="12" font-weight="400">#202024</text></g><g id="color-text-muted"><rect x="32" y="358" width="172" height="68" rx="12" fill="#68686f" stroke="#e5e5e8"/><text x="32" y="452" fill="#202024" font-size="14" font-weight="500">text-muted</text><text x="32" y="474" fill="#68686f" font-size="12" font-weight="400">#68686f</text></g><g id="color-surface"><rect x="232" y="358" width="172" height="68" rx="12" fill="#ffffff" stroke="#e5e5e8"/><text x="232" y="452" fill="#202024" font-size="14" font-weight="500">surface</text><text x="232" y="474" fill="#68686f" font-size="12" font-weight="400">#ffffff</text></g><g id="color-surface-muted"><rect x="432" y="358" width="172" height="68" rx="12" fill="#f6f6f7" stroke="#e5e5e8"/><text x="432" y="452" fill="#202024" font-size="14" font-weight="500">surface-muted</text><text x="432" y="474" fill="#68686f" font-size="12" font-weight="400">#f6f6f7</text></g><g id="color-border"><rect x="632" y="358" width="172" height="68" rx="12" fill="#e5e5e8" stroke="#e5e5e8"/><text x="632" y="452" fill="#202024" font-size="14" font-weight="500">border</text><text x="632" y="474" fill="#68686f" font-size="12" font-weight="400">#e5e5e8</text></g><text x="32" y="542" fill="#202024" font-size="20" font-weight="600">Typography · Inter / system sans-serif</text><text x="32" y="580" fill="#202024" font-size="24" font-weight="600">Heading 24 / 600</text><text x="32" y="614" fill="#202024" font-size="14" font-weight="400">Body 14 / 1.6 · Semantic colors and stable geometry</text><text x="32" y="650" fill="#68686f" font-size="14" font-weight="400">Comfortable: 40px controls / 8px spacing</text><text x="32" y="680" fill="#68686f" font-size="14" font-weight="400">Compact: 34px controls / 6px spacing</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="848" height="724" viewBox="0 0 848 724" font-family="Inter, Arial, sans-serif"><title>Leaf UI light design resources</title><rect x="0" y="0" width="848" height="724" rx="0" fill="#ffffff" stroke="none"/><text x="32" y="50" fill="#202024" font-size="28" font-weight="600">Leaf UI / light foundations</text><g id="color-primary"><rect x="32" y="82" width="172" height="68" rx="12" fill="#20834a" stroke="#e5e5e8"/><text x="32" y="176" fill="#202024" font-size="14" font-weight="500">primary</text><text x="32" y="198" fill="#68686f" font-size="12" font-weight="400">#20834a</text></g><g id="color-on-primary"><rect x="232" y="82" width="172" height="68" rx="12" fill="#ffffff" stroke="#e5e5e8"/><text x="232" y="176" fill="#202024" font-size="14" font-weight="500">on-primary</text><text x="232" y="198" fill="#68686f" font-size="12" font-weight="400">#ffffff</text></g><g id="color-danger"><rect x="432" y="82" width="172" height="68" rx="12" fill="#c83c3c" stroke="#e5e5e8"/><text x="432" y="176" fill="#202024" font-size="14" font-weight="500">danger</text><text x="432" y="198" fill="#68686f" font-size="12" font-weight="400">#c83c3c</text></g><g id="color-on-danger"><rect x="632" y="82" width="172" height="68" rx="12" fill="#ffffff" stroke="#e5e5e8"/><text x="632" y="176" fill="#202024" font-size="14" font-weight="500">on-danger</text><text x="632" y="198" fill="#68686f" font-size="12" font-weight="400">#ffffff</text></g><g id="color-warning"><rect x="32" y="220" width="172" height="68" rx="12" fill="#faad14" stroke="#e5e5e8"/><text x="32" y="314" fill="#202024" font-size="14" font-weight="500">warning</text><text x="32" y="336" fill="#68686f" font-size="12" font-weight="400">#faad14</text></g><g id="color-info"><rect x="232" y="220" width="172" height="68" rx="12" fill="#1677ff" stroke="#e5e5e8"/><text x="232" y="314" fill="#202024" font-size="14" font-weight="500">info</text><text x="232" y="336" fill="#68686f" font-size="12" font-weight="400">#1677ff</text></g><g id="color-success"><rect x="432" y="220" width="172" height="68" rx="12" fill="#20834a" stroke="#e5e5e8"/><text x="432" y="314" fill="#202024" font-size="14" font-weight="500">success</text><text x="432" y="336" fill="#68686f" font-size="12" font-weight="400">#20834a</text></g><g id="color-text"><rect x="632" y="220" width="172" height="68" rx="12" fill="#202024" stroke="#e5e5e8"/><text x="632" y="314" fill="#202024" font-size="14" font-weight="500">text</text><text x="632" y="336" fill="#68686f" font-size="12" font-weight="400">#202024</text></g><g id="color-text-muted"><rect x="32" y="358" width="172" height="68" rx="12" fill="#68686f" stroke="#e5e5e8"/><text x="32" y="452" fill="#202024" font-size="14" font-weight="500">text-muted</text><text x="32" y="474" fill="#68686f" font-size="12" font-weight="400">#68686f</text></g><g id="color-surface"><rect x="232" y="358" width="172" height="68" rx="12" fill="#ffffff" stroke="#e5e5e8"/><text x="232" y="452" fill="#202024" font-size="14" font-weight="500">surface</text><text x="232" y="474" fill="#68686f" font-size="12" font-weight="400">#ffffff</text></g><g id="color-surface-muted"><rect x="432" y="358" width="172" height="68" rx="12" fill="#f6f6f7" stroke="#e5e5e8"/><text x="432" y="452" fill="#202024" font-size="14" font-weight="500">surface-muted</text><text x="432" y="474" fill="#68686f" font-size="12" font-weight="400">#f6f6f7</text></g><g id="color-border"><rect x="632" y="358" width="172" height="68" rx="12" fill="#e5e5e8" stroke="#e5e5e8"/><text x="632" y="452" fill="#202024" font-size="14" font-weight="500">border</text><text x="632" y="474" fill="#68686f" font-size="12" font-weight="400">#e5e5e8</text></g><text x="32" y="542" fill="#202024" font-size="20" font-weight="600">Typography · Inter / system sans-serif</text><text x="32" y="580" fill="#202024" font-size="24" font-weight="600">Heading 24 / 600</text><text x="32" y="614" fill="#202024" font-size="14" font-weight="400">Body 14 / 1.6 · Semantic colors and stable geometry</text><text x="32" y="650" fill="#68686f" font-size="14" font-weight="400">Comfortable: 36px controls / 8px spacing</text><text x="32" y="680" fill="#68686f" font-size="14" font-weight="400">Compact: 30px controls / 6px spacing</text></svg>
diff --git a/apps/docs/docs/public/design/leaf.tokens-studio.json b/apps/docs/docs/public/design/leaf.tokens-studio.json
index 97dccd7..c7726ac 100644
--- a/apps/docs/docs/public/design/leaf.tokens-studio.json
+++ b/apps/docs/docs/public/design/leaf.tokens-studio.json
@@ -49,6 +49,10 @@
         "type": "color",
         "value": "#e5e5e8"
       },
+      "option-hover": {
+        "type": "color",
+        "value": "rgba(235, 235, 235, 1)"
+      },
       "primary-text-80": {
         "type": "color",
         "value": "rgba(32, 111, 66, 1)"
@@ -601,6 +605,10 @@
         "type": "color",
         "value": "#38383f"
       },
+      "option-hover": {
+        "type": "color",
+        "value": "rgba(47, 47, 51, 1)"
+      },
       "primary-text-80": {
         "type": "color",
         "value": "rgba(152, 213, 174, 1)"
@@ -1107,7 +1115,7 @@
     "dimension": {
       "control-height": {
         "type": "dimension",
-        "value": "40px"
+        "value": "36px"
       },
       "spacing": {
         "type": "dimension",
@@ -1127,7 +1135,7 @@
       },
       "density-option-height": {
         "type": "dimension",
-        "value": "36px"
+        "value": "32px"
       },
       "density-option-padding": {
         "type": "dimension",
@@ -1155,7 +1163,7 @@
     "dimension": {
       "control-height": {
         "type": "dimension",
-        "value": "34px"
+        "value": "30px"
       },
       "spacing": {
         "type": "dimension",
@@ -1175,7 +1183,7 @@
       },
       "density-option-height": {
         "type": "dimension",
-        "value": "30px"
+        "value": "26px"
       },
       "density-option-padding": {
         "type": "dimension",
diff --git a/apps/docs/docs/public/design/leaf.tokens.json b/apps/docs/docs/public/design/leaf.tokens.json
index 746c859..accef57 100644
--- a/apps/docs/docs/public/design/leaf.tokens.json
+++ b/apps/docs/docs/public/design/leaf.tokens.json
@@ -109,6 +109,15 @@
           "hex": "#e5e5e8"
         }
       },
+      "option-hover": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.9215686274509803, 0.9215686274509803, 0.9215686274509803],
+          "alpha": 1,
+          "hex": "#ebebeb"
+        }
+      },
       "primary-text-80": {
         "$type": "color",
         "$value": {
@@ -1346,6 +1355,15 @@
           "hex": "#38383f"
         }
       },
+      "option-hover": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.1843137254901961, 0.1843137254901961, 0.2],
+          "alpha": 1,
+          "hex": "#2f2f33"
+        }
+      },
       "primary-text-80": {
         "$type": "color",
         "$value": {
@@ -2478,7 +2496,7 @@
       "control-height": {
         "$type": "dimension",
         "$value": {
-          "value": 40,
+          "value": 36,
           "unit": "px"
         }
       },
@@ -2513,7 +2531,7 @@
       "density-option-height": {
         "$type": "dimension",
         "$value": {
-          "value": 36,
+          "value": 32,
           "unit": "px"
         }
       },
@@ -2559,7 +2577,7 @@
       "control-height": {
         "$type": "dimension",
         "$value": {
-          "value": 34,
+          "value": 30,
           "unit": "px"
         }
       },
@@ -2594,7 +2612,7 @@
       "density-option-height": {
         "$type": "dimension",
         "$value": {
-          "value": 30,
+          "value": 26,
           "unit": "px"
         }
       },
diff --git a/apps/docs/docs/public/package-managers/LICENSE.devicon.txt b/apps/docs/docs/public/package-managers/LICENSE.devicon.txt
new file mode 100644
index 0000000..fcc9b66
--- /dev/null
+++ b/apps/docs/docs/public/package-managers/LICENSE.devicon.txt
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 konpa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/apps/docs/docs/public/package-managers/README.txt b/apps/docs/docs/public/package-managers/README.txt
new file mode 100644
index 0000000..c0d6ca2
--- /dev/null
+++ b/apps/docs/docs/public/package-managers/README.txt
@@ -0,0 +1,7 @@
+Package manager brand assets, stored locally for the documentation UI.
+
+npm: Simple Icons (CC0), https://github.com/simple-icons/simple-icons/blob/develop/icons/npm.svg
+The original npm brand color is applied to the SVG.
+
+Yarn, pnpm, Bun: Devicon (MIT), https://github.com/devicons/devicon/tree/master/icons
+See LICENSE.devicon.txt. Brand names and marks belong to their respective owners.
diff --git a/apps/docs/docs/public/package-managers/bun.svg b/apps/docs/docs/public/package-managers/bun.svg
new file mode 100644
index 0000000..bb0174d
--- /dev/null
+++ b/apps/docs/docs/public/package-managers/bun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>Bun</title><path d="M113.744 41.999a18.558 18.558 0 0 0-.8-.772c-.272-.246-.528-.524-.8-.771s-.528-.525-.8-.771c-.272-.247-.528-.525-.8-.772s-.528-.524-.8-.771-.528-.525-.8-.772-.528-.524-.8-.771c7.936 7.52 12.483 17.752 12.656 28.481 0 25.565-26.912 46.363-60 46.363-18.528 0-35.104-6.526-46.128-16.756l.8.772.8.771.8.772.8.771.8.772.8.771.8.771c11.008 10.662 27.952 17.527 46.928 17.527 33.088 0 60-20.797 60-46.285 0-10.893-4.864-21.215-13.456-29.33z"/><path fill="#fbf0df" d="M116.8 65.08c0 23.467-25.072 42.49-56 42.49s-56-19.023-56-42.49c0-14.55 9.6-27.401 24.352-35.023C43.904 22.435 53.088 14.628 60.8 14.628S75.104 21 92.448 30.058C107.2 37.677 116.8 50.53 116.8 65.08Z"/><path fill="#f6dece" d="M116.8 65.08a32.314 32.314 0 0 0-1.28-8.918c-4.368 51.377-69.36 53.846-94.912 38.48 11.486 8.584 25.66 13.144 40.192 12.928 30.88 0 56-19.054 56-42.49z"/><path fill="#fffefc" d="M39.248 27.234c7.152-4.135 16.656-11.896 26-11.911a15.372 15.372 0 0 0-4.448-.695c-3.872 0-8 1.93-13.2 4.83-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08v1.836c9.696-33.033 27.312-35.547 34.448-39.682z"/><path fill="#ccbea7" d="M56.192 18.532A24.553 24.553 0 0 1 53.867 29.1a25.407 25.407 0 0 1-6.683 8.671c-.448.386-.096 1.127.48.91 5.392-2.02 12.672-8.068 9.6-20.272-.128-.695-1.072-.51-1.072.123zm3.632 0a24.474 24.474 0 0 1 3.646 10.12c.445 3.587.08 7.224-1.07 10.662-.192.54.496 1.003.88.556 3.504-4.32 6.56-12.899-2.592-22.156-.464-.4-1.184.216-.864.756zm4.416-.262a25.702 25.702 0 0 1 7.521 7.925A24.71 24.71 0 0 1 75.2 36.414c-.016.13.02.26.101.365a.543.543 0 0 0 .718.117.509.509 0 0 0 .221-.313c1.472-5.384.64-14.564-11.472-19.332-.64-.246-1.056.587-.528.957zM34.704 34.315a27.418 27.418 0 0 0 9.91-5.222 26.262 26.262 0 0 0 6.842-8.663c.288-.556 1.2-.34 1.056.277-2.768 12.343-12.032 14.92-17.792 14.58-.608.016-.592-.802-.016-.972z"/><path d="M60.8 111.443c-33.088 0-60-20.798-60-46.363 0-15.429 9.888-29.823 26.448-38.448 4.8-2.469 8.912-4.953 12.576-7.128 2.016-1.203 3.92-2.33 5.76-3.379C51.2 12.916 56 10.771 60.8 10.771c4.8 0 8.992 1.852 14.24 4.845 1.6.88 3.2 1.836 4.912 2.885 3.984 2.376 8.48 5.06 14.4 8.131 16.56 8.625 26.448 23.004 26.448 38.448 0 25.565-26.912 46.363-60 46.363zm0-96.814c-3.872 0-8 1.928-13.2 4.829-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08c0 23.436 25.12 42.506 56 42.506s56-19.07 56-42.506c0-14.01-9.104-27.108-24.352-35.023-6.048-3.086-10.768-5.986-14.592-8.27-1.744-1.033-3.344-1.99-4.8-2.838-4.848-2.778-8.384-4.32-12.256-4.32z"/><path fill="#b71422" d="M72.08 76.343c-.719 2.839-2.355 5.383-4.672 7.267a11.07 11.07 0 0 1-6.4 2.9 11.13 11.13 0 0 1-6.608-2.9c-2.293-1.892-3.906-4.436-4.608-7.267a1.073 1.073 0 0 1 .05-.5 1.11 1.11 0 0 1 .272-.428 1.19 1.19 0 0 1 .958-.322h19.744a1.185 1.185 0 0 1 .947.33 1.073 1.073 0 0 1 .317.92z"/><path fill="#ff6164" d="M54.4 83.733a11.24 11.24 0 0 0 6.592 2.932 11.239 11.239 0 0 0 6.576-2.932 16.652 16.652 0 0 0 1.6-1.65 10.904 10.904 0 0 0-3.538-2.564 11.26 11.26 0 0 0-4.302-1 10.121 10.121 0 0 0-4.549 1.192 9.71 9.71 0 0 0-3.451 3.097c.368.323.688.632 1.072.925z"/><path d="M54.656 82.514a8.518 8.518 0 0 1 2.97-2.347 8.836 8.836 0 0 1 3.734-.862 9.78 9.78 0 0 1 6.4 2.608c.368-.386.72-.787 1.056-1.188-2.035-1.87-4.726-2.933-7.536-2.978a10.487 10.487 0 0 0-4.335.975 10.125 10.125 0 0 0-3.489 2.666c.378.396.779.772 1.2 1.126z"/><path d="M60.944 87.436a12.078 12.078 0 0 1-7.12-3.086c-2.477-2.02-4.22-4.75-4.976-7.791-.054-.27-.045-.55.027-.817a1.83 1.83 0 0 1 .389-.726 2.25 2.25 0 0 1 .81-.595 2.32 2.32 0 0 1 .998-.192h19.744c.343-.007.683.06.996.196a2.3 2.3 0 0 1 .812.591c.182.212.313.46.382.728.07.267.076.545.018.815-.756 3.042-2.5 5.771-4.976 7.791a12.078 12.078 0 0 1-7.104 3.086zm-9.872-11.417c-.256 0-.32.108-.336.139.676 2.638 2.206 4.999 4.368 6.742a10.122 10.122 0 0 0 5.84 2.7 10.207 10.207 0 0 0 5.84-2.67c2.155-1.745 3.679-4.106 4.352-6.741a.333.333 0 0 0-.14-.113.348.348 0 0 0-.18-.026z"/><path fill="#febbd0" d="M85.152 77.3c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307zm-48.432 0c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307z"/><path d="M41.12 69.863a9.052 9.052 0 0 0 4.902-1.425 8.578 8.578 0 0 0 3.254-3.812 8.22 8.22 0 0 0 .508-4.913 8.41 8.41 0 0 0-2.408-4.357 8.92 8.92 0 0 0-4.514-2.33 9.12 9.12 0 0 0-5.096.48 8.755 8.755 0 0 0-3.96 3.131 8.287 8.287 0 0 0-1.486 4.725c0 2.252.927 4.412 2.577 6.005 1.65 1.594 3.888 2.492 6.223 2.496zm39.632 0a9.054 9.054 0 0 0 4.915-1.403 8.582 8.582 0 0 0 3.275-3.802 8.22 8.22 0 0 0 .528-4.917 8.408 8.408 0 0 0-2.398-4.368 8.92 8.92 0 0 0-4.512-2.344 9.12 9.12 0 0 0-5.103.473 8.756 8.756 0 0 0-3.967 3.13 8.287 8.287 0 0 0-1.49 4.73c-.004 2.245.914 4.4 2.555 5.994 1.64 1.593 3.869 2.495 6.197 2.507z"/><path fill="#fff" d="M38.4 61.902a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .844.347 1.654.964 2.253a3.374 3.374 0 0 0 2.332.94zm39.632 0a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .84.342 1.644.953 2.242.61.598 1.44.94 2.311.952z"/></svg>
diff --git a/apps/docs/docs/public/package-managers/npm.svg b/apps/docs/docs/public/package-managers/npm.svg
new file mode 100644
index 0000000..84e8478
--- /dev/null
+++ b/apps/docs/docs/public/package-managers/npm.svg
@@ -0,0 +1 @@
+<svg fill="#cb3837" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>npm</title><path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg>
\ No newline at end of file
diff --git a/apps/docs/docs/public/package-managers/pnpm.svg b/apps/docs/docs/public/package-managers/pnpm.svg
new file mode 100644
index 0000000..f1d43e7
--- /dev/null
+++ b/apps/docs/docs/public/package-managers/pnpm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>pnpm</title><path fill="#f8ab00" d="M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z"/><path fill="#4c4c4c" d="M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z"/></svg>
diff --git a/apps/docs/docs/public/package-managers/yarn.svg b/apps/docs/docs/public/package-managers/yarn.svg
new file mode 100644
index 0000000..d58de65
--- /dev/null
+++ b/apps/docs/docs/public/package-managers/yarn.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>Yarn</title> <path fill="#2c8ebb" d="M64 0a64 64 0 1 0 64 64A64 64 0 0 0 64 0Zm4.685 21.948a5.037 5.037 0 0 1 2.21.802c.671.444 1.528 1.032 4.026 6.194a4.841 4.841 0 0 1 2.942-.103 3.933 3.933 0 0 1 2.468 2.004c2.55 4.893 2.889 13.614 1.774 19.22a34.89 34.89 0 0 1-6.028 13.74 26.56 26.56 0 0 1 5.957 9.733 26.24 26.24 0 0 1 1.456 10.746 29.626 29.626 0 0 0 3.22-1.796c3.158-1.951 7.927-4.894 13.615-4.966a6.834 6.834 0 0 1 7.225 5.885 6.555 6.555 0 0 1-5.046 7.256c-3.458.836-5.069 1.486-9.714 4.5a69.161 69.161 0 0 1-16.062 7.412 8.991 8.991 0 0 1-3.758 1.828c-3.933.96-17.425 1.682-18.488 1.682h-.248c-4.13 0-6.47-1.28-7.73-2.621-3.51 1.755-8.052 1.03-11.355-.714a5.729 5.729 0 0 1-3.097-4.024 6.194 6.194 0 0 1 0-2.127 6.875 6.875 0 0 1-.816-1.032 16.908 16.908 0 0 1-2.333-10.386c.3-3.85 2.964-7.287 4.698-9.114A29.481 29.481 0 0 1 35.726 64a27.685 27.685 0 0 1 7.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789 1.208-3.21 2.199-4.996 4.377-5.76a7.06 7.06 0 0 0 2.59-1.383 18.22 18.22 0 0 1 12.243-5.843c.196-.495.423-1.033.671-1.508 1.652-3.51 3.406-5.48 5.46-6.193a5.037 5.037 0 0 1 2.332-.286zm-.558 3.697c-2.703.089-5.355 8.099-5.355 8.099a14.452 14.452 0 0 0-12.089 4.645 9.951 9.951 0 0 1-3.973 2.345c-.424.144-.94.122-2.22 3.58-1.961 5.234 3.345 11.16 3.345 11.16s-6.328 4.47-8.672 10.034a25.58 25.58 0 0 0-1.806 12.057s-4.5 3.901-4.788 7.927a13.285 13.285 0 0 0 1.826 8.083 2.003 2.003 0 0 0 2.714.94s-2.993 3.487-.196 4.963c2.55 1.331 6.844 2.065 9.115-.196 1.652-1.651 1.982-5.335 2.591-6.842.144-.351.64.588 1.115 1.032a10.323 10.323 0 0 0 1.403 1.032s-4.024 1.734-2.373 5.688c.547 1.31 2.498 2.145 5.688 2.125 1.187 0 14.203-.743 17.671-1.58a4.47 4.47 0 0 0 2.696-1.505 65.032 65.032 0 0 0 15.99-7.226c4.892-3.19 6.895-4.059 10.848-4.998 3.262-.774 3.045-5.83-1.28-5.758-4.48.052-8.402 2.363-11.716 4.427-6.193 3.83-9.29 3.583-9.29 3.583l-.105-.175c-.423-.692 1.983-6.896-.712-14.287-2.91-8.082-7.534-10.033-7.163-10.653 1.58-2.673 5.534-6.917 7.113-14.824.94-4.79.691-12.676-1.435-16.805-.393-.764-3.902 1.28-3.902 1.28s-3.283-7.319-4.201-7.907a1.442 1.442 0 0 0-.839-.244z" /> </svg>
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 69aee4a..a665eba 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -4,15 +4,15 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "rspress dev --host 127.0.0.1 --port 3000",
-    "build": "rspress build",
+    "dev": "node scripts/sync-locales.mjs && rspress dev --host 127.0.0.1 --port 3000",
+    "build": "node scripts/sync-locales.mjs && rspress build",
     "preview": "rspress preview --host 127.0.0.1 --port 3000",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@fontsource-variable/inter": "5.3.0",
-    "@rspress/core": "^2.0.23",
     "@ifhover/leaf-ui": "workspace:*",
+    "@rspress/core": "^2.0.23",
     "@tanstack/react-table": "^8.21.3",
     "lucide-react": "^1.50.0",
     "react": "^19.3.0",
@@ -20,8 +20,12 @@
   },
   "devDependencies": {
     "@rsbuild/plugin-sass": "^2.0.1",
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
+    "postcss": "^8.5.29",
+    "tailwindcss": "^4.3.3",
+    "tailwindcss-v3": "npm:tailwindcss@3.4.19",
     "zod": "^4.6.5"
   }
 }
diff --git a/apps/docs/rspress.config.ts b/apps/docs/rspress.config.ts
index 2235399..e598566 100644
--- a/apps/docs/rspress.config.ts
+++ b/apps/docs/rspress.config.ts
@@ -3,6 +3,8 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { defineConfig } from '@rspress/core';
+import tailwindcss from '@tailwindcss/postcss';
+import { rehypeApiTypes } from './scripts/api-type-display.mjs';
 import { remarkExampleSource } from './scripts/example-source.mjs';
 
 const directory = path.dirname(fileURLToPath(import.meta.url));
@@ -13,22 +15,18 @@ const guideSidebar = [
     items: [
       { text: '认识 Leaf UI', link: '/guide/introduction' },
       { text: '安装&快速开始', link: '/guide/getting-started' },
-      { text: 'SSR 使用', link: '/guide/ssr' },
+      { text: '服务端渲染', tag: 'SSR', link: '/guide/ssr' },
       { text: 'AI 与 Skills', link: '/guide/ai' },
-      { text: '控件与浮层', link: '/guide/control-contracts' },
-      { text: '业务场景', link: '/guide/scenarios' },
-      { text: '完整工作空间', link: '/guide/workspace' },
       { text: '浏览器兼容性', link: '/guide/compatibility' },
-      { text: '可访问性验收', link: '/guide/accessibility' },
     ],
   },
   {
     text: '个性化',
     items: [
       { text: '定制主题', link: '/guide/theming' },
+      { text: 'Tailwind CSS', link: '/guide/tailwindcss' },
+      { text: '切换语言', link: '/guide/internationalization' },
       { text: '视觉与交互规范', link: '/guide/design-standards' },
-      { text: '设计资源', link: '/guide/design-resources' },
-      { text: '使用图标', link: '/guide/icons' },
     ],
   },
 ];
@@ -36,11 +34,15 @@ const guideSidebar = [
 const componentSidebar = [
   {
     text: '组件',
-    items: [{ text: '组件总览', link: '/components/' }],
+    items: [
+      { text: '组件总览', link: '/components/' },
+      { text: '使用图标', link: '/components/icons' },
+    ],
   },
   {
     text: '通用',
     items: [
+      { text: 'ConfigProvider', tag: '全局配置,配置', link: '/components/config-provider' },
       { text: 'Typography', tag: '排版', link: '/components/typography' },
       { text: 'Button', tag: '按钮', link: '/components/button' },
       { text: 'Divider', tag: '分割线', link: '/components/divider' },
@@ -52,6 +54,7 @@ const componentSidebar = [
       { text: 'Splitter', tag: '分割面板', link: '/components/splitter' },
       { text: 'Layout', tag: '布局', link: '/components/layout' },
       { text: 'Grid', tag: '栅格', link: '/components/grid' },
+      { text: 'Flex', tag: '弹性布局', link: '/components/flex' },
       { text: 'Space', tag: '间距', link: '/components/space' },
       { text: 'ScrollArea', tag: '滚动区域', link: '/components/scroll-area' },
       { text: 'Scrollbar', tag: '滚动条', link: '/components/scrollbar' },
@@ -98,8 +101,6 @@ const componentSidebar = [
       { text: 'Carousel', tag: '轮播', link: '/components/carousel' },
       { text: 'Image', tag: '图片', link: '/components/image' },
       { text: 'FileList', tag: '文件列表', link: '/components/file-list' },
-      { text: 'ImageCropper', tag: '图片裁剪', link: '/components/image-cropper' },
-      { text: 'SignaturePad', tag: '签名板', link: '/components/signature-pad' },
     ],
   },
   {
@@ -159,27 +160,39 @@ const componentSidebar = [
       { text: 'Popover', tag: '气泡卡片', link: '/components/popover' },
     ],
   },
+];
+
+const apiSidebar = [
   {
-    text: '配置',
-    items: [{ text: 'ConfigProvider', tag: '全局配置', link: '/components/config-provider' }],
+    text: 'API 参考',
+    items: [{ text: '参考总览', link: '/api/' }],
+  },
+  {
+    text: '全局配置',
+    items: [
+      { text: 'LeafComponentDefaults', link: '/api/component-defaults' },
+      { text: 'LeafThemeTokens', link: '/api/theme-tokens' },
+      { text: 'PopupOptions', link: '/api/popup-options' },
+      { text: '翻译资源', link: '/api/translations' },
+    ],
   },
 ];
 
 const englishLabels: Record<string, string> = {
-  控件与浮层: 'Control and popup contracts',
-  业务场景: 'Application scenarios',
-  完整工作空间: 'Complete workspace',
+  'API 参考': 'API reference',
+  参考总览: 'Overview',
+  翻译资源: 'Translation resources',
+  全局配置: 'Configuration',
   浏览器兼容性: 'Browser compatibility',
-  可访问性验收: 'Accessibility acceptance',
   视觉与交互规范: 'Visual and interaction standard',
-  设计资源: 'Design resources',
   开始使用: 'Getting started',
   '认识 Leaf UI': 'Introduction',
   '安装&快速开始': 'Installation & quick start',
-  'SSR 使用': 'SSR usage',
+  服务端渲染: 'Server-side rendering',
   'AI 与 Skills': 'AI & Skills',
   个性化: 'Personalization',
   定制主题: 'Theming',
+  切换语言: 'Switch languages',
   使用图标: 'Icons',
   组件: 'Components',
   组件总览: 'Overview',
@@ -193,14 +206,20 @@ const englishLabels: Record<string, string> = {
   反馈与交互: 'Feedback',
   配置: 'Configuration',
 };
-const englishSidebar = (items: typeof guideSidebar | typeof componentSidebar): typeof items =>
+const englishSidebarTags: Record<string, string> = {
+  '/guide/ssr': 'SSR',
+  '/components/config-provider': 'Config',
+};
+const englishSidebar = (
+  items: typeof guideSidebar | typeof componentSidebar | typeof apiSidebar,
+): typeof items =>
   items.map((item) => ({
     ...item,
     text: englishLabels[item.text] ?? item.text,
     items: item.items.map((child) => ({
       ...child,
       text: englishLabels[child.text] ?? child.text,
-      tag: undefined,
+      tag: englishSidebarTags[child.link],
     })),
   }));
 
@@ -243,7 +262,11 @@ export default defineConfig({
   logoText: 'Leaf UI',
   outDir: 'doc_build',
   mediumZoom: { selector: '.rspress-doc img:not([data-no-zoom])' },
-  markdown: { link: { checkDeadLinks: true }, remarkPlugins: [remarkExampleSource] },
+  markdown: {
+    link: { checkDeadLinks: true },
+    remarkPlugins: [remarkExampleSource],
+    rehypePlugins: [rehypeApiTypes],
+  },
   themeConfig: {
     llmsUI: { placement: 'outline', viewOptions: ['markdownLink'] },
     darkMode: 'light',
@@ -251,7 +274,7 @@ export default defineConfig({
       {
         lang: 'zh',
         label: '简体中文',
-        sidebar: { '/guide/': guideSidebar, '/components/': componentSidebar },
+        sidebar: { '/guide/': guideSidebar, '/components/': componentSidebar, '/api/': apiSidebar },
       },
       {
         lang: 'en',
@@ -259,20 +282,23 @@ export default defineConfig({
         nav: [
           { text: 'Guide', link: '/guide/introduction', activeMatch: '^/en/guide/' },
           { text: 'Components', link: '/components/', activeMatch: '^/en/components/' },
+          { text: 'API', link: '/api/', activeMatch: '^/en/api/' },
           { text: 'Changelog', link: '/changelog', activeMatch: '^/en/changelog' },
         ],
         sidebar: {
           '/en/guide/': englishSidebar(guideSidebar),
           '/en/components/': englishSidebar(componentSidebar),
+          '/en/api/': englishSidebar(apiSidebar),
         },
       },
     ],
     nav: [
       { text: '指南', link: '/guide/introduction', activeMatch: '^/guide/' },
       { text: '组件', link: '/components/', activeMatch: '^/components/' },
+      { text: 'API', link: '/api/', activeMatch: '^/api/' },
       { text: '更新记录', link: '/changelog', activeMatch: '^/changelog' },
     ],
-    sidebar: { '/guide/': guideSidebar, '/components/': componentSidebar },
+    sidebar: { '/guide/': guideSidebar, '/components/': componentSidebar, '/api/': apiSidebar },
     socialLinks: [{ icon: 'github', mode: 'link', content: 'https://github.com/ifhover/leaf-ui' }],
   },
   builderConfig: {
@@ -284,6 +310,13 @@ export default defineConfig({
       },
     },
     plugins: [pluginSass()],
+    tools: {
+      postcss: {
+        postcssOptions: {
+          plugins: [tailwindcss()],
+        },
+      },
+    },
     resolve: {
       alias: {
         '@ifhover/leaf-ui/table/tanstack$': path.resolve(
diff --git a/apps/docs/scripts/api-type-display.d.mts b/apps/docs/scripts/api-type-display.d.mts
new file mode 100644
index 0000000..1ba7550
--- /dev/null
+++ b/apps/docs/scripts/api-type-display.d.mts
@@ -0,0 +1 @@
+export function rehypeApiTypes(): (tree: unknown) => void;
diff --git a/apps/docs/scripts/api-type-display.mjs b/apps/docs/scripts/api-type-display.mjs
new file mode 100644
index 0000000..88040d2
--- /dev/null
+++ b/apps/docs/scripts/api-type-display.mjs
@@ -0,0 +1,66 @@
+const isElement = (node, name) => node.type === 'element' && node.tagName === name;
+const textContent = (node) =>
+  node.type === 'text' ? node.value : (node.children ?? []).map(textContent).join('');
+
+/** Keep linked type expressions in one code box without changing Markdown or API data. */
+export function rehypeApiTypes() {
+  return (tree) => {
+    const visit = (node) => {
+      if (isElement(node, 'table')) {
+        const rows = node.children
+          .flatMap((child) =>
+            isElement(child, 'thead') || isElement(child, 'tbody') ? child.children : [child],
+          )
+          .filter((child) => isElement(child, 'tr'));
+        const headers = rows[0]?.children.filter((child) => isElement(child, 'th')) ?? [];
+        const column = headers.findIndex((header) =>
+          /^(?:Type|类型)$/u.test(textContent(header).trim()),
+        );
+        if (column !== -1) {
+          if (/^(?:Description|说明)$/u.test(textContent(headers.at(-1)).trim())) {
+            node.properties = {
+              ...node.properties,
+              className: [
+                ...new Set([].concat(node.properties?.className ?? [], 'leaf-api-table')),
+              ],
+            };
+          }
+          for (const row of rows.slice(1)) {
+            const cell = row.children.filter((child) => isElement(child, 'td'))[column];
+            if (!cell?.children.some((child) => isElement(child, 'code') || isElement(child, 'a')))
+              continue;
+            const inline = (child) =>
+              child.type === 'text' ||
+              isElement(child, 'code') ||
+              (isElement(child, 'a') &&
+                child.children.every((part) => part.type === 'text' || isElement(part, 'code')));
+            if (!cell.children.every(inline)) continue;
+            const children = cell.children.flatMap((child) => {
+              if (isElement(child, 'code')) return child.children;
+              if (isElement(child, 'a'))
+                return [
+                  {
+                    ...child,
+                    children: child.children.flatMap((part) =>
+                      isElement(part, 'code') ? part.children : [part],
+                    ),
+                  },
+                ];
+              return [child];
+            });
+            cell.children = [
+              {
+                type: 'element',
+                tagName: 'code',
+                properties: { className: ['leaf-api-type'] },
+                children,
+              },
+            ];
+          }
+        }
+      }
+      for (const child of node.children ?? []) visit(child);
+    };
+    visit(tree);
+  };
+}
diff --git a/apps/docs/scripts/component-metadata.mjs b/apps/docs/scripts/component-metadata.mjs
index ddf0179..746cc3d 100644
--- a/apps/docs/scripts/component-metadata.mjs
+++ b/apps/docs/scripts/component-metadata.mjs
@@ -1,4 +1,17 @@
 export const additions = [
+  [
+    'Flex',
+    '弹性布局',
+    'flex',
+    '布局',
+    'Layout',
+    '控制内容方向、对齐、间距与换行。',
+    'Control direction, alignment, spacing and wrapping.',
+    'FlexBasic',
+    'FlexAlignment',
+    '方向与对齐',
+    'Direction and alignment',
+  ],
   [
     'Typography',
     '排版',
@@ -176,16 +189,30 @@ export const updatedPages = new Set([
   'menu',
   'tabs',
   'breadcrumb',
+  'pagination',
   'steps',
   'slider',
   'color-picker',
   'progress',
   'config-provider',
   'guide/theming',
-  'guide/control-contracts',
+  'api/popup-options',
+  'api/component-defaults',
+  'api/theme-tokens',
 ]);
 
-export function documentationPage(entry) {
+export function documentationPage(entry, availablePages) {
+  const reference = {
+    LeafComponentDefaults: 'api/component-defaults',
+    LeafThemeTokens: 'api/theme-tokens',
+    LeafComponentTokens: 'api/theme-tokens',
+    LeafThemeStyle: 'api/theme-tokens',
+    PopupOptions: 'api/popup-options',
+    LeafTranslation: 'api/translations',
+    LeafTranslations: 'api/translations',
+  }[entry.name];
+  // Historical snapshots keep their original pages when separate references do not exist.
+  if (reference && (!availablePages || availablePages.has(reference))) return reference;
   if (entry.module === './theme' || entry.module === './shared/types') return 'guide/theming';
   if (entry.module === './shared/floating') return 'guide/control-contracts';
   if (entry.module === './shared/dialog') return 'components/modal';
@@ -206,11 +233,9 @@ export function documentationPage(entry) {
     inputnumber: 'input-number',
     inputotp: 'input-otp',
     inputmask: 'input-mask',
-    imagecropper: 'image-cropper',
     infinitescroll: 'infinite-scroll',
     loadingbar: 'loading-bar',
     scrollarea: 'scroll-area',
-    signaturepad: 'signature-pad',
     timepicker: 'time-picker',
     timerangepicker: 'time-range-picker',
     treeselect: 'tree-select',
diff --git a/apps/docs/scripts/export-ai-docs.mjs b/apps/docs/scripts/export-ai-docs.mjs
index 7d84e6e..8f296b7 100644
--- a/apps/docs/scripts/export-ai-docs.mjs
+++ b/apps/docs/scripts/export-ai-docs.mjs
@@ -68,13 +68,25 @@ export async function exportAiDocs({ repository, output, base, sourceCommit = nu
   const version = manifest.version;
   const exports = await publicApi(repository);
   const files = await walkFiles(output);
+  const markdownFiles = files.filter((file) => {
+    const relative = path.relative(output, file).replaceAll(path.sep, '/');
+    return /^(en\/)?(components|guide|api)\/.+\.md$/.test(relative);
+  });
+  const availablePages = new Set(
+    markdownFiles.map((file) =>
+      path
+        .relative(output, file)
+        .replaceAll(path.sep, '/')
+        .replace(/^en\//, '')
+        .replace(/\.md$/, ''),
+    ),
+  );
   const pages = [];
   const normalize = (value) => value.replace(/[^a-z0-9]/gi, '').toLowerCase();
   const origin = 'https://ifhover.github.io';
   let exampleSource;
-  for (const file of files.filter((candidate) => candidate.endsWith('.md'))) {
+  for (const file of markdownFiles) {
     const relative = path.relative(output, file).replaceAll(path.sep, '/');
-    if (!/^(en\/)?(components|guide)\/.+\.md$/.test(relative)) continue;
     const english = relative.startsWith('en/');
     const id = relative.replace(/^en\//, '').replace(/\.md$/, '');
     let document;
@@ -104,7 +116,9 @@ export async function exportAiDocs({ repository, output, base, sourceCommit = nu
     const html = relative.replace(/\.md$/, '.html');
     const symbols = exports
       .filter((entry) => {
-        if (documentationPage(entry) === id) return true;
+        const target = documentationPage(entry, availablePages);
+        if (target.startsWith('api/')) return target === id;
+        if (target === id) return true;
         const module = entry.module.split('/').filter(Boolean).at(-1);
         if (id === 'components/result' && module === 'empty') return true;
         if (id === 'components/textarea' && entry.module.startsWith('./textarea/')) return true;
@@ -155,6 +169,25 @@ export async function exportAiDocs({ repository, output, base, sourceCommit = nu
   };
   await mkdir(path.join(output, 'api'), { recursive: true });
   await writeFile(path.join(output, 'api/index.json'), `${JSON.stringify(index, null, 2)}\n`);
+  // Copy only resources from this snapshot. Older releases without JSON stay unchanged.
+  for (const name of [
+    'en-US.json',
+    'zh-CN.json',
+    'zh-TW.json',
+    'ja-JP.json',
+    'ko-KR.json',
+    'schema.json',
+  ]) {
+    let resource;
+    try {
+      resource = await readFile(path.join(repository, 'packages/react/src/locales', name));
+    } catch (error) {
+      if (error.code === 'ENOENT') continue;
+      throw error;
+    }
+    await mkdir(path.join(output, 'locales'), { recursive: true });
+    await writeFile(path.join(output, 'locales', name), resource);
+  }
   const llms = await readFile(path.join(output, 'llms.txt'), 'utf8');
   const text = `# Leaf UI ${version}\n\n> Version-specific documentation for ${manifest.name}@${version}.\n\nRead only the pages required for your task. Match the package name and version installed in the application; do not substitute the latest version.\n\n## API discovery\n\n- [API and exported type index](${origin}${base}api/index.json): Map exact public exports to individual Markdown pages.\n\n${llms.replace(/^# .+\n/, '')}`;
   await writeFile(path.join(output, 'llms.txt'), text, 'utf8');
diff --git a/apps/docs/scripts/generate-extension-thumbnails.mjs b/apps/docs/scripts/generate-extension-thumbnails.mjs
index 9cb3a80..a20652f 100644
--- a/apps/docs/scripts/generate-extension-thumbnails.mjs
+++ b/apps/docs/scripts/generate-extension-thumbnails.mjs
@@ -194,25 +194,21 @@ const images = {
     '<path d="M112 82V97H188V82M150 45V82M139 56L150 45L161 56" stroke="#20834a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>' +
     t(108, 117, 'Upload files', 11),
   'file-list':
-    r(48, 16, 204, 126, '#f4f7f5') +
-    r(81, 23, 138, 112) +
-    t(101, 48, 'Project report', 11) +
-    line(101, 61, 93) +
-    line(101, 77, 98) +
-    line(101, 93, 85) +
-    t(129, 125, '1 / 4', 9, '#718078'),
-  'image-cropper':
-    r(43, 24, 214, 112, '#d9eddf', 'none') +
-    '<path d="M43 136L112 61L173 117L222 63L257 136Z" fill="#81b58f"/>' +
-    r(84, 36, 132, 86, 'none', '#fff', 0) +
-    '<path d="M128 36V122M172 36V122M84 65H216M84 94H216" stroke="#fff" stroke-opacity=".5"/>',
-  'signature-pad':
-    r(32, 30, 236, 94) +
-    '<path d="M sixty" fill="none"/>'.replace(
-      ' sixty',
-      '60 99C88 32 74 107 105 72S96 117 132 93S131 116 170 93S196 107 230 78',
-    ) +
-    t(52, 141, 'Signature', 10, '#718078'),
+    r(28, 22, 244, 112) +
+    [0, 1]
+      .map((i) => {
+        const y = 35 + i * 54;
+        return (
+          r(42, y, 30, 30, i ? '#eff5ff' : '#fff1f1') +
+          t(83, y + 10, i ? 'Project notes.md' : 'Project report.pdf', 11) +
+          t(83, y + 28, i ? 'MD · 4 KB' : 'PDF · 2.4 MB', 9, '#718078') +
+          '<g transform="translate(240 ' +
+          (y + 9) +
+          ')" stroke="#718078" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0V10M-4 6L0 10L4 6M-6 12V15H6V12"/></g>'
+        );
+      })
+      .join('') +
+    '<path d="M28 78H272" stroke="#e5e5e8"/>',
 };
 for (const [name, content] of Object.entries(images)) {
   const svg =
diff --git a/apps/docs/scripts/generate-foundation-thumbnails.mjs b/apps/docs/scripts/generate-foundation-thumbnails.mjs
index ccfe3d9..2df2b78 100644
--- a/apps/docs/scripts/generate-foundation-thumbnails.mjs
+++ b/apps/docs/scripts/generate-foundation-thumbnails.mjs
@@ -100,6 +100,7 @@ const images = {
     rect(22, 72, 196, 26, '#f6f6f7', 'none') +
     text(33, 89, 'Home / Projects / Leaf Garden', '#68686f', 9),
   pagination:
+    rect(12, 40, 28, 28, '#fff', '#e5e5e8') +
     icon(ChevronLeft, 20, 48, '#68686f') +
     [1, 2, 3, 4, 5]
       .map(
@@ -114,18 +115,19 @@ const images = {
           ) + text(53 + i * 31, 58, n, n === 2 ? '#20834a' : '#202024'),
       )
       .join('') +
-    icon(ChevronRight, 204, 48, '#68686f') +
+    rect(200, 40, 28, 28, '#fff', '#e5e5e8') +
+    icon(ChevronRight, 208, 48, '#68686f') +
     text(73, 92, '11–20 / 50 items', '#68686f', 9),
   tag:
-    rect(21, 34, 59, 25, '#eaf4ed', '#bddcc7') +
+    rect(21, 34, 59, 25, '#eaf4ed', 'none', 5) +
     text(30, 51, 'Published', '#20834a', 9) +
-    rect(90, 34, 54, 25, '#edf5ff', '#bbd7fc') +
+    rect(90, 34, 54, 25, '#edf5ff', 'none', 5) +
     text(101, 51, 'Design', '#1677ff') +
-    rect(154, 34, 64, 25, '#fff6e9', '#e8d1af') +
+    rect(154, 34, 64, 25, '#fff6e9', 'none', 5) +
     text(164, 51, 'Pending', '#8d671c') +
-    rect(56, 74, 61, 25, '#20834a', 'none') +
+    rect(56, 74, 61, 25, '#20834a', 'none', 5) +
     text(68, 91, 'Ready', '#fff') +
-    rect(129, 74, 61, 25, '#f4effb', '#d9cdee') +
+    rect(129, 74, 61, 25, '#f4effb', 'none', 5) +
     text(141, 91, 'Leaf', '#7654c6') +
     icon(X, 169, 80, '#7654c6', 12),
   badge:
diff --git a/apps/docs/scripts/sync-component-api.mjs b/apps/docs/scripts/sync-component-api.mjs
index b52028d..07d5882 100644
--- a/apps/docs/scripts/sync-component-api.mjs
+++ b/apps/docs/scripts/sync-component-api.mjs
@@ -306,11 +306,6 @@ const descriptions = {
     'Offset; color stops use a percentage from 0 to 100.',
   ],
   color: ['颜色或语义色。', 'Color or semantic tone.'],
-  messages: ['覆盖内置组件的语言文本。', 'Override built-in component messages.'],
-  textMessages: [
-    '以英文原文为 key，覆盖扩展组件的文本。',
-    'Override extended component labels using the English source text as the key.',
-  ],
   direction: ['文字和交互方向。', 'Text and interaction direction.'],
   weekStartsOn: [
     '一周起始日，0 表示周日、1 表示周一。',
@@ -555,10 +550,17 @@ const specific = {
     'Show the page-size selector.',
   ],
   'DataTablePaginationProps.pageSizeOptions': ['可选择的每页条数。', 'Available page sizes.'],
-  'DataTablePaginationProps.showQuickJumper': ['展示页码跳转输入框。', 'Show a page-number input.'],
+  'DataTablePaginationProps.showQuickJumper': [
+    '回车或离开分页区域时跳转。',
+    'Commit a quick jump on Enter or when leaving the pagination region.',
+  ],
   'DataTablePaginationProps.showTotal': [
-    '定制总数及当前范围的展示。',
-    'Customize the total and current range.',
+    'true 展示默认统计，也可传入函数定制总数及当前范围。',
+    'true shows a localized total; pass a function to customize the total and visible range.',
+  ],
+  'DataTablePaginationProps.variant': [
+    '分页按钮样式：描边 / 无边框。',
+    'Pagination button appearance: outlined or borderless.',
   ],
   'DataTablePaginationProps.simple': ['使用简洁分页器。', 'Use compact pagination.'],
   'DataTablePaginationProps.hideOnSinglePage': [
@@ -687,6 +689,7 @@ const specific = {
   ],
 };
 const headings = new Map();
+const documentedTypes = new Set();
 for (const english of [false, true]) {
   for (const [page, names] of byPage) {
     let document = '';
@@ -697,6 +700,7 @@ for (const english of [false, true]) {
       );
     } catch {}
     for (const name of names) {
+      if (sectionMatch(document, name)) documentedTypes.add(`${english}/${name}`);
       headings.set(
         `${english}/${name}`,
         sectionMatch(document, name)?.heading ??
@@ -724,12 +728,13 @@ function typeCell(value, page, english) {
   let position = 0;
   for (const match of text.matchAll(/\b[A-Za-z_]\w*\b/gu)) {
     const type = types.find((item) => item.name === match[0]);
-    if (!type || !schema.get(type.name)?.size) continue;
+    if (!type || (!schema.get(type.name)?.size && !documentedTypes.has(`${english}/${type.name}`)))
+      continue;
     const target = documentationPage(type);
     const url =
       target === page
         ? `#${anchor(type.name, english)}`
-        : `${target.startsWith('guide/') ? '../guide/' : '../components/'}${target.split('/').at(-1)}#${anchor(type.name, english)}`;
+        : `${path.posix.relative(path.posix.dirname(page), target)}#${anchor(type.name, english)}`;
     if (match.index > position) pieces.push(code(text.slice(position, match.index)));
     pieces.push(`[${code(match[0])}](${url})`);
     position = match.index + match[0].length;
@@ -743,12 +748,14 @@ function escapePattern(value) {
 function sectionMatch(document, name) {
   const headings = [`${name.replace(/Props$/u, '')} API`, `${name} API`, name];
   for (const heading of headings) {
-    const expression = new RegExp(
-      `(^## ${escapePattern(heading)}\\r?\\n)([\\s\\S]*?)(?=^## |$(?![\\s\\S]))`,
-      'mu',
-    );
-    const match = document.match(expression);
-    if (match) return { match, heading, expression };
+    for (let level = 2; level <= 6; level++) {
+      const expression = new RegExp(
+        `(^#{${level}} ${escapePattern(heading)}\\r?\\n)([\\s\\S]*?)(?=^#{1,${level}} |$(?![\\s\\S]))`,
+        'mu',
+      );
+      const match = document.match(expression);
+      if (match) return { match, heading, expression };
+    }
   }
   return null;
 }
@@ -770,7 +777,7 @@ for (const [page, names] of byPage) {
     try {
       document = await readFile(file, 'utf8');
     } catch {
-      if (!addition && page !== 'guide/control-contracts') continue;
+      if (!addition) continue;
       document = '';
     }
     if (addition && !document) {
@@ -790,10 +797,6 @@ for (const [page, names] of byPage) {
       const prefix = english ? '../../../src' : '../../src';
       document = `import { ComponentExample } from '${prefix}/components/component-example';\nimport { ${basic}, ${advanced} } from '${prefix}/examples/${slug}/basic';\n\n# ${name}${english ? '' : ` ${zh}`}\n\n${english ? enDescription : description}\n\n## ${english ? 'Basic usage' : '基础用法'}\n\n<ComponentExample title="${english ? 'Basic usage' : '基础用法'}" preview={<${basic}${english ? ' english' : ''} />} fileName="basic.tsx">\n\n\`\`\`tsx lineNumbers file="${prefix}/examples/${slug}/basic.tsx"\n\`\`\`\n\n</ComponentExample>\n\n## ${english ? enAdvancedTitle : advancedTitle}\n\n<ComponentExample title="${english ? enAdvancedTitle : advancedTitle}" preview={<${advanced}${english ? ' english' : ''} />} fileName="basic.tsx">\n\n\`\`\`tsx lineNumbers file="${prefix}/examples/${slug}/basic.tsx"\n\`\`\`\n\n</ComponentExample>\n`;
     }
-    if (page === 'guide/control-contracts' && !document)
-      document = english
-        ? '# Control and popup contracts\n\nA common contract for fields and floating panels.\n'
-        : '# 控件与浮层\n\n输入控件与浮层使用一致的状态约定。\n';
     let original = document;
     try {
       if (baselineRef)
@@ -808,9 +811,13 @@ for (const [page, names] of byPage) {
       if (!props?.size) continue;
       const section = sectionMatch(document, name);
       const old = readApiRows(sectionMatch(original, name)?.match[2] ?? section?.match[2] ?? '');
+      const hasDefault =
+        !/^\| (?:属性 \| 类型 \| 说明|Property \| Type \| Description) \|\r?$/mu.test(
+          section?.match[2] ?? '',
+        );
       const rows = [
-        `| ${english ? 'Property | Type | Default | Description' : '属性 | 类型 | 默认值 | 说明'} |`,
-        '| --- | --- | --- | --- |',
+        `| ${english ? 'Property | Type' : '属性 | 类型'} | ${hasDefault ? `${english ? 'Default' : '默认值'} | ` : ''}${english ? 'Description' : '说明'} |`,
+        hasDefault ? '| --- | --- | --- | --- |' : '| --- | --- | --- |',
       ];
       for (const [property, value] of props) {
         if (value.type === 'never') continue;
@@ -837,7 +844,7 @@ for (const [page, names] of byPage) {
                 : `设置 ${property}。`))
         ).replace(/^(?:Required\.\s*|必需。)+/u, '');
         rows.push(
-          `| ${code(property)} | ${typeCell(value.type, page, english)} | ${value.defaultValue ? code(value.defaultValue) : ((!addition ? previous?.defaultValue : undefined) ?? '—')} | ${!value.optional ? (english ? 'Required. ' : '必需。') : ''}${description} |`,
+          `| ${code(property)} | ${typeCell(value.type, page, english)} | ${hasDefault ? `${value.defaultValue ? code(value.defaultValue) : ((!addition ? previous?.defaultValue : undefined) ?? '—')} | ` : ''}${!value.optional ? (english ? 'Required. ' : '必需。') : ''}${description} |`,
         );
       }
       for (const [property, value] of old)
@@ -867,7 +874,7 @@ for (const [page, names] of byPage) {
           ].includes(property)
         )
           rows.push(
-            `| ${code(property)} | ${value.type} | ${value.defaultValue} | ${descriptions[property]?.[english ? 1 : 0] ?? value.description} |`,
+            `| ${code(property)} | ${value.type} | ${hasDefault ? `${value.defaultValue} | ` : ''}${descriptions[property]?.[english ? 1 : 0] ?? value.description} |`,
           );
       const table = rows.join('\n');
       if (section) {
diff --git a/apps/docs/scripts/sync-locales.mjs b/apps/docs/scripts/sync-locales.mjs
new file mode 100644
index 0000000..2cfd8f0
--- /dev/null
+++ b/apps/docs/scripts/sync-locales.mjs
@@ -0,0 +1,17 @@
+import { copyFile, mkdir } from 'node:fs/promises';
+
+// Public files must exist before Rspress checks links and collects static assets.
+const output = new URL('../docs/public/locales/', import.meta.url);
+await mkdir(output, { recursive: true });
+for (const name of [
+  'en-US.json',
+  'zh-CN.json',
+  'zh-TW.json',
+  'ja-JP.json',
+  'ko-KR.json',
+  'schema.json',
+])
+  await copyFile(
+    new URL(`../../../packages/react/src/locales/${name}`, import.meta.url),
+    new URL(name, output),
+  );
diff --git a/apps/docs/scripts/tailwind.test.mjs b/apps/docs/scripts/tailwind.test.mjs
new file mode 100644
index 0000000..ceb8bd3
--- /dev/null
+++ b/apps/docs/scripts/tailwind.test.mjs
@@ -0,0 +1,189 @@
+import assert from 'node:assert/strict';
+import { execFileSync } from 'node:child_process';
+import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import test from 'node:test';
+import { fileURLToPath } from 'node:url';
+import { renderTailwindTheme } from '../../../packages/react/scripts/build-tailwind.mjs';
+
+const docsRoot = fileURLToPath(new URL('../', import.meta.url));
+const libraryRoot = fileURLToPath(new URL('../../../packages/react/', import.meta.url));
+// An isolated dependency directory can exercise earlier compiler versions with the same cases.
+const compilerRoot = process.env.LEAF_TAILWIND_COMPAT_ROOT
+  ? path.resolve(process.env.LEAF_TAILWIND_COMPAT_ROOT)
+  : docsRoot;
+const requireCompiler = createRequire(path.join(compilerRoot, 'package.json'));
+const tailwind3 = requireCompiler('tailwindcss-v3');
+const tailwind4 = requireCompiler('@tailwindcss/postcss');
+const postcss = requireCompiler('postcss');
+const requireLibrary = createRequire(path.join(libraryRoot, 'package.json'));
+const { build } = requireLibrary('esbuild');
+const { outputFiles } = await build({
+  stdin: {
+    contents:
+      "export { default as preset } from './tailwind'; export { leafTailwindTokens as tokens } from './tailwind-tokens';",
+    resolveDir: path.join(libraryRoot, 'src'),
+  },
+  bundle: true,
+  write: false,
+  format: 'esm',
+  platform: 'node',
+});
+const { preset, tokens } = await import(
+  `data:text/javascript;base64,${Buffer.from(outputFiles[0].text).toString('base64')}`
+);
+const cssTheme = renderTailwindTheme(tokens);
+const utilityPrefixes = {
+  colors: 'bg',
+  borderRadius: 'rounded',
+  spacing: 'p',
+  fontFamily: 'font',
+  fontSize: 'text',
+  lineHeight: 'leading',
+  fontWeight: 'font',
+  boxShadow: 'shadow',
+  transitionDuration: 'duration',
+  transitionTimingFunction: 'ease',
+  zIndex: 'z',
+};
+const tokenClasses = Object.entries(utilityPrefixes).flatMap(([group, prefix]) =>
+  Object.keys(tokens[group]).map((name) => `${prefix}-${name}`),
+);
+const extraClasses = [
+  'p-4',
+  'rounded-lg',
+  'bg-red-500',
+  'text-sm',
+  'text-leaf-primary',
+  'border-leaf-border',
+  'ring-leaf-focus',
+  'fill-leaf-success',
+  'stroke-leaf-info',
+  'h-leaf-control',
+  'min-h-leaf-control',
+  'min-w-leaf-control',
+  'gap-leaf-sm',
+  'hover:bg-leaf-option-hover',
+  'focus-visible:ring-leaf-focus',
+  'md:p-leaf-lg',
+];
+const guideFiles = ['guide/tailwindcss.mdx', 'en/guide/tailwindcss.mdx'].map((file) =>
+  path.join(docsRoot, 'docs', file),
+);
+const guides = await Promise.all(guideFiles.map((file) => readFile(file, 'utf8')));
+const examples = await Promise.all(
+  guides.flatMap((guide, index) =>
+    [...guide.matchAll(/\bfile="([^"]+\.tsx)"/g)].map((match) =>
+      readFile(path.resolve(path.dirname(guideFiles[index]), match[1]), 'utf8'),
+    ),
+  ),
+);
+const guideClasses = examples.flatMap((source) =>
+  [...source.matchAll(/className="([^"]+)"/g)].flatMap((match) => match[1].split(/\s+/)),
+);
+const commonClasses = [...new Set([...tokenClasses, ...extraClasses, ...guideClasses])];
+
+function ruleFor(root, className) {
+  const selector = `.${className.replaceAll(/[:/]/g, '\\$&')}`;
+  let found;
+  root.walkRules((rule) => {
+    if (rule.selector === selector) found = rule;
+  });
+  return found;
+}
+
+for (const version of [3, 4]) {
+  const packageVersion = requireCompiler(
+    `${version === 3 ? 'tailwindcss-v3' : 'tailwindcss'}/package.json`,
+  ).version;
+  test(`Tailwind ${packageVersion} compiles every mapped token and the guide examples`, async () => {
+    const classes = [
+      ...commonClasses,
+      ...(version === 4 ? ['bg-leaf-primary/50', 'text-leaf-muted/75'] : []),
+    ];
+    const html = `<section class="${classes.join(' ')}"></section>`;
+    let result;
+    if (version === 3) {
+      result = await postcss([
+        tailwind3({
+          content: [{ raw: html, extension: 'html' }],
+          presets: [preset],
+          corePlugins: { preflight: false },
+        }),
+      ]).process('@tailwind utilities;', { from: undefined });
+    } else {
+      const directory = await mkdtemp(path.join(compilerRoot, '.tailwind-test-'));
+      try {
+        await writeFile(path.join(directory, 'input.html'), html);
+        result = await postcss([tailwind4({ optimize: false })]).process(
+          `@import "tailwindcss/theme.css" layer(theme);\n@import "tailwindcss/utilities.css" source(none);\n@source "./input.html";\n${cssTheme}`,
+          { from: path.join(directory, 'input.css') },
+        );
+      } finally {
+        assert.ok(directory.startsWith(path.join(compilerRoot, '.tailwind-test-')));
+        await rm(directory, { recursive: true, force: true });
+      }
+    }
+    for (const className of classes.filter((name) => !name.includes(':'))) {
+      assert.ok(ruleFor(result.root, className), `Tailwind ${version}: ${className} exists`);
+    }
+    for (const [group, prefix] of Object.entries(utilityPrefixes)) {
+      for (const [name, value] of Object.entries(tokens[group])) {
+        const rule = ruleFor(result.root, `${prefix}-${name}`);
+        assert.ok(
+          rule.toString().includes(value),
+          `Tailwind ${version}: ${prefix}-${name} reads the Leaf variable on the element`,
+        );
+      }
+    }
+    const color = ruleFor(result.root, 'bg-leaf-primary');
+    assert.ok(
+      color.nodes.some(
+        (node) => node.prop === 'background-color' && node.value === 'var(--leaf-color-primary)',
+      ),
+    );
+    if (version === 4)
+      assert.match(ruleFor(result.root, 'bg-leaf-primary/50').toString(), /color-mix\(/);
+    assert.match(ruleFor(result.root, 'text-leaf').toString(), /--leaf-line-height/);
+    assert.match(result.css, /hover\\:bg-leaf-option-hover/);
+    assert.match(result.css, /focus-visible\\:ring-leaf-focus/);
+    assert.match(result.css, /md\\:p-leaf-lg/);
+  });
+}
+
+test('the preset satisfies the official Tailwind 3 Config type without Tailwind runtime imports', async () => {
+  const directory = await mkdtemp(path.join(docsRoot, '.tailwind-test-'));
+  try {
+    const source = path.join(libraryRoot, 'src/tailwind').replaceAll('\\', '/');
+    await writeFile(
+      path.join(directory, 'config.ts'),
+      `import type { Config } from 'tailwindcss-v3';\nimport leafPreset from ${JSON.stringify(source)};\nexport default { content: [], presets: [leafPreset] } satisfies Config;\n`,
+    );
+    await writeFile(
+      path.join(directory, 'tsconfig.json'),
+      JSON.stringify({
+        compilerOptions: {
+          noEmit: true,
+          strict: true,
+          target: 'ES2022',
+          module: 'ESNext',
+          moduleResolution: 'Bundler',
+          types: [],
+          skipLibCheck: false,
+        },
+        files: ['./config.ts'],
+      }),
+    );
+    const compiler = path.join(
+      path.dirname(requireLibrary.resolve('typescript/package.json')),
+      'bin/tsc',
+    );
+    execFileSync(process.execPath, [compiler, '--project', path.join(directory, 'tsconfig.json')], {
+      stdio: 'pipe',
+    });
+  } finally {
+    assert.ok(directory.startsWith(path.join(docsRoot, '.tailwind-test-')));
+    await rm(directory, { recursive: true, force: true });
+  }
+});
diff --git a/apps/docs/scripts/versioned-docs.test.mjs b/apps/docs/scripts/versioned-docs.test.mjs
index dd9c531..a0fe66b 100644
--- a/apps/docs/scripts/versioned-docs.test.mjs
+++ b/apps/docs/scripts/versioned-docs.test.mjs
@@ -7,6 +7,7 @@ import test from 'node:test';
 import { parse } from '@babel/parser';
 import { versionTarget } from '../src/components/version-path.ts';
 import { properties, readApiRows } from './api-model.mjs';
+import { rehypeApiTypes } from './api-type-display.mjs';
 import {
   extractExampleMarkdown,
   extractExampleSource,
@@ -14,6 +15,67 @@ import {
   remarkExampleSource,
 } from './example-source.mjs';
 
+test('API type links keep one code expression without changing links or other cells', () => {
+  const text = (value) => ({ type: 'text', value });
+  const element = (tagName, children, properties = {}) => ({
+    type: 'element',
+    tagName,
+    children,
+    properties,
+  });
+  const code = (value) => element('code', [text(value)]);
+  const reference = (name, href) => element('a', [code(name)], { href });
+  for (const label of ['Type', '类型']) {
+    const type = element('td', [
+      code('Partial<Omit<'),
+      reference('InputProps', '/components/input#input-api'),
+      code(", 'key' | 'ref'>> | "),
+      reference('LeafTheme', '#leaftheme'),
+    ]);
+    const property = element('td', [code('Input')]);
+    const description = element('td', [reference('InputProps', '/components/input#input-api')]);
+    const unrelated = structuredClone(description);
+    const tree = element('table', [
+      element('thead', [
+        element('tr', [
+          element('th', [text('Property')]),
+          element('th', [text(label)]),
+          element('th', [text('Description')]),
+        ]),
+      ]),
+      element('tbody', [element('tr', [property, type, description])]),
+    ]);
+    rehypeApiTypes()(tree);
+    assert.deepEqual(tree.properties.className, ['leaf-api-table']);
+    assert.equal(type.children.length, 1);
+    const expression = type.children[0];
+    assert.equal(expression.tagName, 'code');
+    assert.deepEqual(
+      expression.children
+        .filter((node) => node.tagName === 'a')
+        .map((node) => node.properties.href),
+      ['/components/input#input-api', '#leaftheme'],
+    );
+    assert.equal(
+      expression.children
+        .map((node) => (node.type === 'text' ? node.value : node.children[0].value))
+        .join(''),
+      "Partial<Omit<InputProps, 'key' | 'ref'>> | LeafTheme",
+    );
+    assert.equal(
+      expression.children.some(
+        (node) => node.tagName === 'code' || node.children?.some((part) => part.tagName === 'code'),
+      ),
+      false,
+    );
+    assert.deepEqual(property.children, [code('Input')]);
+    assert.deepEqual(description, unrelated);
+    const once = structuredClone(tree);
+    rehypeApiTypes()(tree);
+    assert.deepEqual(tree, once);
+  }
+});
+
 test('example language props and translation helpers disappear while real locale state remains', () => {
   const source = `import { Button } from '@ifhover/leaf-ui';
 export function Demo({ english = false }: { english?: boolean }) {
@@ -37,7 +99,7 @@ export function LocaleDemo() {
   assert.match(extractExampleSource(nested, 'Demo'), /"乙"/);
 });
 
-import { publicApi, walkFiles } from './export-ai-docs.mjs';
+import { exportAiDocs, publicApi, walkFiles } from './export-ai-docs.mjs';
 
 test('example code keeps only the selected preview and its scoped dependencies', () => {
   const source = `import { Button, Input, type ButtonProps } from '@ifhover/leaf-ui';
@@ -185,6 +247,28 @@ test('AI discovery records the optional adapter import path separately from nati
   assert.equal(api.find((item) => item.name === 'DataTableRowReorderInfo')?.kind, 'type');
 });
 
+test('scoped component defaults retain public discovery and built-in API defaults', async () => {
+  const root = path.resolve(import.meta.dirname, '../../..');
+  const entry = path.join(root, 'packages/react/src/index.ts');
+  const api = await publicApi(root);
+  assert.equal(api.find((item) => item.name === 'LeafComponentDefaults')?.kind, 'type');
+  assert.ok(!api.some((item) => item.name === 'LeafMessages'));
+  const config = await properties(entry, 'ConfigProviderProps');
+  assert.equal(config.get('components').type, 'LeafComponentDefaults');
+  assert.ok(!config.has('messages') && !config.has('textMessages'));
+  assert.equal((await properties(entry, 'ButtonProps')).get('size').defaultValue, "'md'");
+  assert.equal((await properties(entry, 'InputProps')).get('size').defaultValue, "'md'");
+  assert.equal((await properties(entry, 'InputProps')).get('allowClear').defaultValue, 'false');
+  assert.equal((await properties(entry, 'InputSearchProps')).get('loading').defaultValue, 'false');
+  assert.equal((await properties(entry, 'SelectProps')).get('size').defaultValue, "'md'");
+  const defaults = await properties(entry, 'LeafComponentDefaults');
+  for (const name of ['Button', 'Input', 'InputSearch', 'Select', 'Modal'])
+    assert.match(defaults.get(name).type, /\| null/u);
+  assert.match(defaults.get('Select').type, /'options'/u);
+  assert.match(defaults.get('Modal').type, /'open'/u);
+  assert.equal((await properties(entry, 'ModalProps')).get('width').defaultValue, '480');
+});
+
 test('version switch preserves the page, language and anchor when available', () => {
   const release = {
     version: '0.2.0',
@@ -407,6 +491,135 @@ for (const [packageName, version] of [
     }
   });
 
+test('AI references own configuration types without changing historical snapshot destinations', async () => {
+  for (const separateReferences of [false, true]) {
+    const root = await mkdtemp(path.join(tmpdir(), 'leaf-ui-reference-test-'));
+    const output = path.join(root, 'output');
+    try {
+      await mkdir(path.join(root, 'packages/react/src'), { recursive: true });
+      await writeFile(
+        path.join(root, 'packages/react/package.json'),
+        JSON.stringify({ name: '@ifhover/leaf-ui', version: '0.5.0' }),
+      );
+      await writeFile(
+        path.join(root, 'packages/react/src/index.ts'),
+        [
+          "export { Button } from './button';",
+          "export { ConfigProvider } from './config-provider';",
+          "export type { LeafComponentDefaults } from './config-provider';",
+          "export type { LeafThemeTokens } from './theme';",
+          "export type { LeafComponentTokens, LeafThemeStyle } from './theme';",
+          "export type { PopupOptions } from './shared/floating';",
+          ...(separateReferences
+            ? ["export type { LeafTranslation, LeafTranslations } from './locales/types';"]
+            : []),
+          ...(separateReferences
+            ? []
+            : ["export type { LeafMessages } from './config-provider/context';"]),
+        ].join('\n'),
+      );
+      const references = {
+        LeafComponentDefaults: 'api/component-defaults',
+        LeafThemeTokens: 'api/theme-tokens',
+        LeafComponentTokens: 'api/theme-tokens',
+        LeafThemeStyle: 'api/theme-tokens',
+        PopupOptions: 'api/popup-options',
+        ...(separateReferences
+          ? { LeafTranslation: 'api/translations', LeafTranslations: 'api/translations' }
+          : {}),
+        ...(!separateReferences ? { LeafMessages: 'components/config-provider' } : {}),
+      };
+      for (const prefix of ['', 'en/']) {
+        const pages = {
+          'components/button': '# Button\n',
+          'components/config-provider': '# ConfigProvider\n',
+          'guide/theming': '# Theming\n',
+          ...(!separateReferences ? { 'guide/control-contracts': '# Popup contracts\n' } : {}),
+          ...(separateReferences
+            ? Object.fromEntries(
+                Object.entries(references).map(([name, page]) => [page, `# ${name}\n`]),
+              )
+            : {}),
+        };
+        for (const [page, content] of Object.entries(pages)) {
+          const file = path.join(output, `${prefix}${page}.md`);
+          await mkdir(path.dirname(file), { recursive: true });
+          await writeFile(file, content);
+        }
+      }
+      await mkdir(path.join(output, 'api'), { recursive: true });
+      await writeFile(path.join(output, 'api/index.html'), '<h1>API reference</h1>');
+      await writeFile(path.join(output, 'llms.txt'), '# Leaf UI\n');
+      const resources = [
+        'en-US.json',
+        'zh-CN.json',
+        'zh-TW.json',
+        'ja-JP.json',
+        'ko-KR.json',
+        'schema.json',
+      ];
+      if (separateReferences) {
+        await mkdir(path.join(root, 'packages/react/src/locales'), { recursive: true });
+        for (const name of resources)
+          await writeFile(
+            path.join(root, 'packages/react/src/locales', name),
+            JSON.stringify({ snapshot: '0.5.0', file: name }),
+          );
+      }
+      const index = await exportAiDocs({
+        repository: root,
+        output,
+        base: '/leaf-ui/v/0.5.0/',
+        sourceCommit: 'b'.repeat(40),
+      });
+      for (const [name, reference] of Object.entries(references)) {
+        for (const language of ['zh', 'en']) {
+          const owners = index.pages.filter(
+            (page) =>
+              page.language === language && page.symbols.some((symbol) => symbol.name === name),
+          );
+          assert.deepEqual(
+            owners.map((page) => page.id),
+            [
+              separateReferences
+                ? reference
+                : ['LeafThemeTokens', 'LeafComponentTokens', 'LeafThemeStyle'].includes(name)
+                  ? 'guide/theming'
+                  : name === 'PopupOptions'
+                    ? 'guide/control-contracts'
+                    : 'components/config-provider',
+            ],
+          );
+          if (separateReferences) {
+            const markdown = await readFile(path.join(output, owners[0].markdown), 'utf8');
+            assert.ok(markdown.includes('Leaf UI 0.5.0 · Package: @ifhover/leaf-ui'));
+            assert.ok(markdown.includes(`/v/0.5.0/${owners[0].html}`));
+          }
+        }
+      }
+      assert.equal(
+        await readFile(path.join(output, 'api/index.html'), 'utf8'),
+        '<h1>API reference</h1>',
+      );
+      assert.equal(
+        JSON.parse(await readFile(path.join(output, 'api/index.json'), 'utf8')).version,
+        '0.5.0',
+      );
+      for (const name of resources) {
+        const file = path.join(output, 'locales', name);
+        if (separateReferences)
+          assert.deepEqual(JSON.parse(await readFile(file, 'utf8')), {
+            snapshot: '0.5.0',
+            file: name,
+          });
+        else await assert.rejects(readFile(file), { code: 'ENOENT' });
+      }
+    } finally {
+      await rm(root, { recursive: true, force: true });
+    }
+  }
+});
+
 const registryFixture = (name, version, commit = 'a'.repeat(40)) => ({
   name,
   'dist-tags': { latest: version },
diff --git a/apps/docs/src/components/component-catalog.ts b/apps/docs/src/components/component-catalog.ts
index 1118023..bcea6f5 100644
--- a/apps/docs/src/components/component-catalog.ts
+++ b/apps/docs/src/components/component-catalog.ts
@@ -1,4 +1,13 @@
 export const componentCatalog = [
+  [
+    'Flex',
+    '弹性布局',
+    'flex',
+    '布局',
+    'Layout',
+    '控制内容方向、对齐、间距与换行。',
+    'Control direction, alignment, spacing and wrapping.',
+  ],
   [
     'Scrollbar',
     '滚动条',
@@ -629,24 +638,6 @@ export const componentCatalog = [
     '选择或拖拽文件并上传。',
     'Choose or drop files to upload.',
   ],
-  [
-    'ImageCropper',
-    '图片裁剪',
-    'image-cropper',
-    '媒体',
-    'Media',
-    '移动选框并调整裁剪范围。',
-    'Move and resize a selection to crop images.',
-  ],
-  [
-    'SignaturePad',
-    '签名板',
-    'signature-pad',
-    '媒体',
-    'Media',
-    '手写签名并导出图片。',
-    'Capture handwritten signatures and export images.',
-  ],
   [
     'Typography',
     '排版',
diff --git a/apps/docs/src/components/component-example.scss b/apps/docs/src/components/component-example.scss
index c0f2ab7..0c0091d 100644
--- a/apps/docs/src/components/component-example.scss
+++ b/apps/docs/src/components/component-example.scss
@@ -3,7 +3,7 @@
   --rp-code-block-bg: var(--leaf-example-code-bg);
   --rp-code-font-size: 13px;
   min-width: 0;
-  overflow: hidden;
+  overflow: clip;
   margin: 20px 0 32px;
   border: 1px solid var(--leaf-site-border);
   border-radius: 12px;
@@ -29,26 +29,24 @@
 }
 
 .leaf-component-example__preview-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 16px;
-  width: 100%;
   min-width: 0;
+  max-width: 100%;
 }
 
-.leaf-component-example__preview-content > .leaf-demo-stack {
-  margin-inline: auto;
-}
-
-.leaf-component-example__preview-content > * {
+:where(.leaf-component-example__preview-content) > * {
   min-width: 0;
   max-width: 100%;
 }
 
 .leaf-component-example__code {
   border-top: 1px solid var(--leaf-site-divider);
+  background: var(--leaf-example-code-bg);
+  scroll-margin-top: calc(
+    var(--rp-nav-height) + var(--rp-sidebar-menu-height) + var(--rp-banner-height, 0px) + 16px
+  );
 }
 
 // Keep the documentation's prose list rules out of component previews.
@@ -127,6 +125,7 @@
 .leaf-component-example__code-viewport::after {
   content: '';
   position: absolute;
+  z-index: 2;
   inset: auto 0 0;
   height: 88px;
   background: linear-gradient(to bottom, transparent 5%, var(--leaf-example-code-bg) 90%);
@@ -167,7 +166,7 @@
 }
 
 .leaf-component-example__expand {
-  z-index: 1;
+  z-index: 3;
   display: flex;
   justify-content: center;
   position: relative;
@@ -180,12 +179,20 @@
 }
 
 .leaf-component-example[data-expanded='true'] .leaf-component-example__expand {
+  position: sticky;
+  bottom: 0;
   margin-top: 0;
   padding-top: 6px;
+  pointer-events: none;
 }
 
 .leaf-component-example__expand > button {
   background: var(--leaf-site-panel);
+  pointer-events: auto;
+}
+
+.leaf-component-example[data-expanded='true'] .leaf-component-example__expand > button {
+  box-shadow: none;
 }
 
 .leaf-component-example__expand svg {
diff --git a/apps/docs/src/components/component-example.tsx b/apps/docs/src/components/component-example.tsx
index 4597052..5555e50 100644
--- a/apps/docs/src/components/component-example.tsx
+++ b/apps/docs/src/components/component-example.tsx
@@ -1,6 +1,6 @@
 import './component-example.scss';
 import { Button } from '@ifhover/leaf-ui';
-import { type ReactNode, useEffect, useId, useRef, useState } from 'react';
+import { type CSSProperties, type ReactNode, useEffect, useId, useRef, useState } from 'react';
 import { CopyButton } from './copy-button';
 import { useDocsLocale } from './i18n';
 import { Icon } from './icon';
@@ -12,6 +12,8 @@ interface ComponentExampleProps {
   preview: ReactNode;
   children: ReactNode;
   fileName?: string;
+  /** Preview width in pixels or a CSS length; always limited to the available space. */
+  width?: CSSProperties['width'];
 }
 
 /** A build-highlighted MDX code fence paired with its live React preview. */
@@ -20,6 +22,7 @@ export function ComponentExample({
   preview,
   children,
   fileName = 'example.tsx',
+  width = 480,
 }: ComponentExampleProps) {
   const { t } = useDocsLocale();
   const [expanded, setExpanded] = useState(false);
@@ -47,6 +50,17 @@ export function ComponentExample({
     return sourceRef.current?.querySelector('code')?.textContent ?? '';
   }
 
+  function toggleExpanded() {
+    const code = sourceRef.current?.closest('.leaf-component-example__code');
+    if (expanded && code) {
+      const scrollMargin = Number.parseFloat(getComputedStyle(code).scrollMarginTop);
+      if (code.getBoundingClientRect().top < scrollMargin) {
+        code.scrollIntoView({ block: 'start', behavior: 'instant' });
+      }
+    }
+    setExpanded(!expanded);
+  }
+
   return (
     <section
       className="leaf-component-example"
@@ -56,7 +70,9 @@ export function ComponentExample({
       data-wrap-code={wrapCode}
     >
       <div className="leaf-component-example__preview rp-not-doc">
-        <div className="leaf-component-example__preview-content">{preview}</div>
+        <div className="leaf-component-example__preview-content" style={{ width }}>
+          {preview}
+        </div>
       </div>
       <div className="leaf-component-example__code">
         <div className="leaf-component-example__code-header">
@@ -94,7 +110,7 @@ export function ComponentExample({
               variant="outline"
               aria-expanded={expanded}
               aria-controls={codeId}
-              onClick={() => setExpanded(!expanded)}
+              onClick={toggleExpanded}
               endIcon={<Icon name="chevron" />}
             >
               {expanded ? t('收起代码', 'Collapse code') : t('展开代码', 'Expand code')}
diff --git a/apps/docs/src/components/component-filter.scss b/apps/docs/src/components/component-filter.scss
new file mode 100644
index 0000000..6677747
--- /dev/null
+++ b/apps/docs/src/components/component-filter.scss
@@ -0,0 +1,11 @@
+.leaf-component-filter {
+  min-width: 0;
+
+  > .leaf-input {
+    width: 100%;
+  }
+
+  input::-webkit-search-cancel-button {
+    appearance: none;
+  }
+}
diff --git a/apps/docs/src/components/component-filter.tsx b/apps/docs/src/components/component-filter.tsx
new file mode 100644
index 0000000..74fbf1f
--- /dev/null
+++ b/apps/docs/src/components/component-filter.tsx
@@ -0,0 +1,38 @@
+import './component-filter.scss';
+import { Input } from '@ifhover/leaf-ui';
+import { Search } from 'lucide-react';
+
+export function matchesComponentQuery(query: string, text: string) {
+  const normalize = (value: string) => value.toLowerCase().replace(/[\s_-]+/g, '');
+  const normalizedText = normalize(text);
+  return query
+    .trim()
+    .split(/\s+/)
+    .every((word) => normalizedText.includes(normalize(word)));
+}
+
+export function ComponentFilter({
+  value,
+  onChange,
+  label,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  label: string;
+}) {
+  return (
+    <div className="leaf-component-filter rp-not-doc">
+      <Input
+        type="search"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        prefix={<Search size={16} />}
+        allowClear
+        aria-label={label}
+        placeholder={label}
+        autoComplete="off"
+        spellCheck={false}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/src/components/component-overview.scss b/apps/docs/src/components/component-overview.scss
index 2b3da40..07d9d0c 100644
--- a/apps/docs/src/components/component-overview.scss
+++ b/apps/docs/src/components/component-overview.scss
@@ -1,3 +1,9 @@
+.leaf-component-overview__empty {
+  padding-block: 32px;
+  color: var(--leaf-site-muted);
+  text-align: center;
+}
+
 .leaf-component-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(175px, 100%), 1fr));
@@ -38,11 +44,10 @@
     aspect-ratio: 2 / 1;
     border-bottom: 1px solid var(--leaf-site-border);
     background: var(--leaf-site-soft);
-    img {
+    > svg {
       display: block;
       width: 100%;
       height: 100%;
-      object-fit: contain;
     }
   }
   &__body {
diff --git a/apps/docs/src/components/component-overview.tsx b/apps/docs/src/components/component-overview.tsx
index e1daf33..f97d947 100644
--- a/apps/docs/src/components/component-overview.tsx
+++ b/apps/docs/src/components/component-overview.tsx
@@ -1,23 +1,38 @@
 import './component-overview.scss';
-import { withBase } from '@rspress/core/runtime';
 import { ArrowUpRight } from 'lucide-react';
+import { useState } from 'react';
 import { componentCatalog } from './component-catalog';
+import { ComponentFilter, matchesComponentQuery } from './component-filter';
+import { componentThumbnails } from './component-thumbnails';
+import { useDocsTheme } from './docs-theme';
 import { useDocsLocale } from './i18n';
 
 export function ComponentOverview() {
   const { english, t, url } = useDocsLocale();
-  const components = componentCatalog.map(
-    ([name, label, slug, zhCategory, enCategory, zhDesc, enDesc]) => ({
+  const { color } = useDocsTheme();
+  const [query, setQuery] = useState('');
+  const components = componentCatalog
+    .filter(([name, label, slug]) => matchesComponentQuery(query, `${name} ${label} ${slug}`))
+    .map(([name, label, slug, zhCategory, enCategory, zhDesc, enDesc]) => ({
       name,
       label,
       slug,
       category: t(zhCategory, enCategory),
       description: t(zhDesc, enDesc),
-    }),
-  );
+    }));
   const groups = [...new Set(components.map((component) => component.category))];
   return (
     <div className="leaf-component-overview">
+      <ComponentFilter
+        value={query}
+        onChange={setQuery}
+        label={t('过滤所有组件', 'Filter all components')}
+      />
+      {components.length === 0 && (
+        <p className="leaf-component-overview__empty" role="status">
+          {t('没有匹配的组件，试试其他关键词。', 'No matching components. Try another keyword.')}
+        </p>
+      )}
       {groups.map((group) => (
         <section key={group} className="leaf-component-group">
           <h2>{group}</h2>
@@ -30,17 +45,17 @@ export function ComponentOverview() {
                   className="leaf-component-card"
                   href={url(`/components/${component.slug}.html`)}
                 >
-                  <div className="leaf-component-card__preview">
-                    <img
-                      data-no-zoom
-                      src={withBase(`/components/${component.slug}.svg`)}
-                      alt=""
-                      width={240}
-                      height={128}
-                      loading="lazy"
-                      decoding="async"
-                    />
-                  </div>
+                  <div
+                    className="leaf-component-card__preview"
+                    aria-hidden="true"
+                    // biome-ignore lint/security/noDangerouslySetInnerHtml: Only repository-owned static SVG markup is inlined.
+                    dangerouslySetInnerHTML={{
+                      __html: (componentThumbnails[component.slug] ?? '').replace(
+                        '>#20834A<',
+                        `>${color.toUpperCase()}<`,
+                      ),
+                    }}
+                  />
                   <div className="leaf-component-card__body">
                     <h3>
                       {component.name} {!english && <span>{component.label}</span>}
diff --git a/apps/docs/src/components/component-thumbnails.ts b/apps/docs/src/components/component-thumbnails.ts
new file mode 100644
index 0000000..e0d8c72
--- /dev/null
+++ b/apps/docs/src/components/component-thumbnails.ts
@@ -0,0 +1,105 @@
+import { componentCatalog } from './component-catalog';
+
+const colors: Record<string, string> = {
+  '#20834a': 'var(--leaf-color-primary)',
+  '#eaf4ed': 'var(--leaf-color-primary-surface-9)',
+  '#e8f4ec': 'var(--leaf-color-primary-surface-9)',
+  '#edf6ee': 'var(--leaf-color-primary-surface-9)',
+  '#eff7f1': 'var(--leaf-color-primary-surface-9)',
+  '#eff5f0': 'var(--leaf-color-primary-surface-9)',
+  '#e9f3ed': 'var(--leaf-color-primary-surface-9)',
+  '#e4f1e8': 'var(--leaf-color-primary-surface-9)',
+  '#bddcc7': 'var(--leaf-color-primary-border-30)',
+  '#202024': 'var(--leaf-color-text)',
+  '#24372c': 'var(--leaf-color-text)',
+  '#68686f': 'var(--leaf-color-text-muted)',
+  '#64796c': 'var(--leaf-color-text-muted)',
+  '#718078': 'var(--leaf-color-text-muted)',
+  '#708275': 'var(--leaf-color-text-muted)',
+  '#7c8e81': 'var(--leaf-color-text-muted)',
+  '#e5e5e8': 'var(--leaf-color-border)',
+  '#e2ebe5': 'var(--leaf-color-border)',
+  '#eeeeef': 'var(--leaf-color-divider)',
+  '#eeeef0': 'var(--leaf-color-divider)',
+  '#f6f6f7': 'var(--leaf-color-surface-muted)',
+  '#fafafb': 'var(--leaf-color-surface-muted)',
+  '#e7ece8': 'var(--leaf-color-border-surface-35)',
+  '#e9efeb': 'var(--leaf-color-border-surface-35)',
+  '#edf1ee': 'var(--leaf-color-border-surface-35)',
+  '#f4f7f5': 'var(--leaf-color-surface-muted)',
+  '#f5f7f6': 'var(--leaf-color-surface-muted)',
+  '#f0f4f1': 'var(--leaf-color-surface-muted)',
+  '#c83c3c': 'var(--leaf-color-danger)',
+  '#e8adad': 'var(--leaf-color-danger-border-30)',
+  '#fff1f1': 'var(--leaf-color-danger-surface-9)',
+  '#1677ff': 'var(--leaf-color-info)',
+  '#edf5ff': 'var(--leaf-color-info-surface-9)',
+  '#eff5ff': 'var(--leaf-color-info-surface-9)',
+  '#e8effb': 'var(--leaf-color-info-surface-9)',
+  '#faad14': 'var(--leaf-color-warning)',
+  '#ffc53d': 'var(--leaf-color-warning)',
+  '#8d671c': 'var(--leaf-color-warning-text-80)',
+  '#fff6e9': 'var(--leaf-color-warning-surface-9)',
+  '#f6eedb': 'var(--leaf-color-warning-surface-9)',
+  '#f4effb': 'color-mix(in srgb, #7654c6 8%, var(--leaf-color-surface))',
+  '#f1edf9': 'color-mix(in srgb, #7654c6 8%, var(--leaf-color-surface))',
+  '#d9cdee': 'color-mix(in srgb, #7654c6 25%, var(--leaf-color-surface))',
+  '#eaf5f5': 'color-mix(in srgb, #087f8c 8%, var(--leaf-color-surface))',
+  '#bfdfe1': 'color-mix(in srgb, #087f8c 25%, var(--leaf-color-surface))',
+};
+
+// Decorative green illustration shades follow the primary color, too.
+const shades: Record<string, number> = {
+  '#387b56': 85,
+  '#79b68c': 60,
+  '#81b58f': 60,
+  '#8ebfa3': 50,
+  '#8aa693': 50,
+  '#91ae99': 45,
+  '#9cab9f': 40,
+  '#a3c7ae': 35,
+  '#bdcdbf': 25,
+  '#becac2': 25,
+  '#c1d2c5': 25,
+  '#c5dfce': 20,
+  '#d7ebe0': 15,
+  '#d9eddf': 15,
+  '#dae3dc': 15,
+  '#e1e9e3': 10,
+};
+
+function prepareThumbnail(source: string, slug: string) {
+  return source
+    .replace(/\bid="([^"]+)"/g, (_, id: string) => `id="leaf-preview-${slug}-${id}"`)
+    .replace(/url\(#([^)]+)\)/g, (_, id: string) => `url(#leaf-preview-${slug}-${id})`)
+    .replace(/<[^>]+>/g, (element) =>
+      element.replace(/\b(fill|stroke|stop-color)="(#[\da-f]+|white)"/gi, (paint, attr, value) => {
+        const color = value.toLowerCase();
+        // White labels/checkmarks stay distinct from theme-aware panel surfaces.
+        if (color === '#fff' || color === '#ffffff' || color === 'white') {
+          if (element.startsWith('<rect ')) return `${attr}="var(--leaf-color-surface)"`;
+          if (element.startsWith('<text ')) return `${attr}="var(--leaf-color-on-primary)"`;
+          return paint;
+        }
+        // Success glyphs carry meaning independently of the selected site color.
+        if (color === '#20834a' && attr === 'stroke' && (slug === 'alert' || slug === 'result')) {
+          return `${attr}="var(--leaf-color-success)"`;
+        }
+        const shade = shades[color];
+        const replacement =
+          colors[color] ??
+          (shade === undefined
+            ? undefined
+            : `color-mix(in srgb, var(--leaf-color-primary) ${shade}%, var(--leaf-color-surface))`);
+        return replacement ? `${attr}="${replacement}"` : paint;
+      }),
+    );
+}
+
+// Rsbuild bundles these trusted local SVGs as text; no client fetch or component instances.
+export const componentThumbnails: Readonly<Record<string, string>> = Object.fromEntries(
+  componentCatalog.map(([, , slug]) => [
+    slug,
+    prepareThumbnail(require(`../../docs/public/components/${slug}.svg?raw`), slug),
+  ]),
+);
diff --git a/apps/docs/src/components/docs-collapse.tsx b/apps/docs/src/components/docs-collapse.tsx
new file mode 100644
index 0000000..e8ed54a
--- /dev/null
+++ b/apps/docs/src/components/docs-collapse.tsx
@@ -0,0 +1,15 @@
+import { Collapse } from '@ifhover/leaf-ui';
+import type { ReactNode } from 'react';
+
+export function DocsCollapse({ title, children }: { title: string; children: ReactNode }) {
+  // Include the prose in Markdown exports before the browser opens the panel.
+  if (process.env.__SSR_MD__) {
+    return (
+      <section>
+        <p>{title}</p>
+        {children}
+      </section>
+    );
+  }
+  return <Collapse aria-label={title} items={[{ key: 'content', label: title, children }]} />;
+}
diff --git a/apps/docs/src/components/docs-sidebar.scss b/apps/docs/src/components/docs-sidebar.scss
new file mode 100644
index 0000000..5f91b4e
--- /dev/null
+++ b/apps/docs/src/components/docs-sidebar.scss
@@ -0,0 +1,35 @@
+.rp-doc-layout__sidebar:has(.leaf-component-sidebar) {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+  scrollbar-gutter: auto;
+}
+
+.leaf-component-sidebar {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  &__filter {
+    flex: 0 0 auto;
+    padding: var(--rp-sidebar-padding);
+    border-bottom: 1px solid var(--leaf-site-divider);
+    background: var(--rp-c-bg);
+  }
+
+  &__list {
+    flex: 1;
+    min-height: 0;
+    padding: 0 var(--rp-sidebar-padding) var(--rp-sidebar-padding);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  &__empty {
+    margin-block: var(--rp-sidebar-padding);
+    color: var(--leaf-site-muted);
+    font-size: 13px;
+  }
+}
diff --git a/apps/docs/src/components/docs-sidebar.tsx b/apps/docs/src/components/docs-sidebar.tsx
new file mode 100644
index 0000000..a34788e
--- /dev/null
+++ b/apps/docs/src/components/docs-sidebar.tsx
@@ -0,0 +1,65 @@
+import './docs-sidebar.scss';
+import type { SidebarData } from '@rspress/core';
+import { useLocation, useSidebarDynamic } from '@rspress/core/runtime';
+import { Sidebar as RspressSidebar, SidebarList } from '@rspress/core/theme-original';
+import { useRef, useState } from 'react';
+import { ComponentFilter, matchesComponentQuery } from './component-filter';
+import { useDocsLocale } from './i18n';
+
+function filterSidebar(items: SidebarData, query: string): SidebarData {
+  const filtered: SidebarData = [];
+  for (const item of items) {
+    if ('items' in item) {
+      const children = filterSidebar(item.items, query);
+      if (children.length) {
+        filtered.push({ ...item, items: children, collapsed: false, collapsible: false });
+      }
+    } else if (
+      'link' in item &&
+      matchesComponentQuery(query, `${item.text} ${item.tag ?? ''} ${item.link.split('/').pop()}`)
+    ) {
+      filtered.push(item);
+    }
+  }
+  return filtered;
+}
+
+function ComponentSidebar() {
+  const { t } = useDocsLocale();
+  const [sidebar, setSidebar] = useSidebarDynamic();
+  const [query, setQuery] = useState('');
+  const listRef = useRef<HTMLElement>(null);
+  const filtered = query.trim() ? filterSidebar(sidebar, query) : sidebar;
+
+  return (
+    <div className="leaf-component-sidebar">
+      <div className="leaf-component-sidebar__filter">
+        <ComponentFilter
+          value={query}
+          onChange={(value) => {
+            setQuery(value);
+            if (listRef.current) listRef.current.scrollTop = 0;
+          }}
+          label={t('过滤组件菜单', 'Filter component menu')}
+        />
+      </div>
+      <nav
+        className="leaf-component-sidebar__list rp-scrollbar"
+        aria-label={t('组件菜单', 'Component menu')}
+        ref={listRef}
+      >
+        <SidebarList sidebarData={filtered} setSidebarData={setSidebar} />
+        {filtered.length === 0 && (
+          <p className="leaf-component-sidebar__empty" role="status">
+            {t('没有匹配的组件', 'No matching components')}
+          </p>
+        )}
+      </nav>
+    </div>
+  );
+}
+
+export function DocsSidebar() {
+  const { pathname } = useLocation();
+  return /\/components(?:\/|$)/.test(pathname) ? <ComponentSidebar /> : <RspressSidebar />;
+}
diff --git a/apps/docs/src/components/docs-theme.tsx b/apps/docs/src/components/docs-theme.tsx
new file mode 100644
index 0000000..7690153
--- /dev/null
+++ b/apps/docs/src/components/docs-theme.tsx
@@ -0,0 +1,108 @@
+import { ConfigProvider } from '@ifhover/leaf-ui';
+import { useDark } from '@rspress/core/runtime';
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useDocsLocale } from './i18n';
+import { defaultThemeColor, normalizeThemeColor } from './theme-colors';
+
+const storageKey = 'leaf-ui-docs-primary-color';
+const brandVariables = [
+  '--leaf-site-accent',
+  '--rp-c-brand',
+  '--rp-c-brand-light',
+  '--rp-c-brand-lighter',
+  '--rp-c-brand-dark',
+  '--rp-c-brand-darker',
+  '--rp-c-brand-tint',
+] as const;
+
+const DocsThemeContext = createContext({
+  color: defaultThemeColor as string,
+  setColor: (_color: string) => {},
+});
+
+export function useDocsTheme() {
+  return useContext(DocsThemeContext);
+}
+
+/** Keep the first client render identical to the static HTML. */
+export function DocsThemeProvider({ children }: { children: ReactNode }) {
+  const { english } = useDocsLocale();
+  const dark = useDark();
+  const [color, setCurrentColor] = useState<string>(defaultThemeColor);
+
+  useEffect(() => {
+    const restore = () => {
+      try {
+        const saved = localStorage.getItem(storageKey);
+        setCurrentColor(
+          saved && /^#[\da-f]{6}$/i.test(saved) ? saved.toLowerCase() : defaultThemeColor,
+        );
+      } catch {
+        // The picker still works when browser storage is unavailable.
+      }
+    };
+    const sync = (event: StorageEvent) => {
+      if (event.key === storageKey || event.key === null) restore();
+    };
+    restore();
+    window.addEventListener('storage', sync);
+    return () => window.removeEventListener('storage', sync);
+  }, []);
+
+  const setColor = useCallback((value: string) => {
+    const normalized = normalizeThemeColor(value).toLowerCase();
+    if (!/^#[\da-f]{6}$/.test(normalized)) return;
+    setCurrentColor(normalized);
+    try {
+      localStorage.setItem(storageKey, normalized);
+    } catch {
+      // Updating the theme must not depend on persistence.
+    }
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: The computed palette changes when these theme inputs change.
+  useEffect(() => {
+    const scope = document.querySelector<HTMLElement>('[data-leaf-docs-theme]');
+    if (!scope) return;
+    const root = document.documentElement.style;
+    const computed = getComputedStyle(scope);
+    const previous = brandVariables.map(
+      (name) => [name, root.getPropertyValue(name), root.getPropertyPriority(name)] as const,
+    );
+    // Rspress search is portalled outside ConfigProvider; share only site accents with it.
+    for (const name of brandVariables)
+      root.setProperty(name, computed.getPropertyValue(name).trim());
+    return () => {
+      for (const [name, value, priority] of previous) {
+        if (value) root.setProperty(name, value, priority);
+        else root.removeProperty(name);
+      }
+    };
+  }, [color, dark]);
+
+  const context = useMemo(() => ({ color, setColor }), [color, setColor]);
+  const theme = useMemo(
+    () => ({ primaryColor: color, appearance: dark ? ('dark' as const) : ('light' as const) }),
+    [color, dark],
+  );
+  return (
+    <DocsThemeContext.Provider value={context}>
+      <ConfigProvider
+        className="leaf-docs-theme"
+        data-leaf-docs-theme=""
+        locale={english ? 'en-US' : 'zh-CN'}
+        theme={theme}
+      >
+        {children}
+      </ConfigProvider>
+    </DocsThemeContext.Provider>
+  );
+}
diff --git a/apps/docs/src/components/en-form-examples.tsx b/apps/docs/src/components/en-form-examples.tsx
index a52c2c8..572c98e 100644
--- a/apps/docs/src/components/en-form-examples.tsx
+++ b/apps/docs/src/components/en-form-examples.tsx
@@ -14,7 +14,6 @@ export { RadioBasic } from '../examples/en/radio/basic';
 export { RadioControlled } from '../examples/en/radio/controlled';
 export { SelectBasic } from '../examples/en/select/basic';
 export { SelectControlled } from '../examples/en/select/controlled';
-export { SelectTheme } from '../examples/en/select/theme';
 export { SwitchBasic } from '../examples/en/switch/basic';
 export { SwitchControlled } from '../examples/en/switch/controlled';
 export { TextareaBasic } from '../examples/en/textarea/basic';
diff --git a/apps/docs/src/components/form-examples.tsx b/apps/docs/src/components/form-examples.tsx
index 83acd83..9119e8e 100644
--- a/apps/docs/src/components/form-examples.tsx
+++ b/apps/docs/src/components/form-examples.tsx
@@ -14,7 +14,6 @@ export { RadioBasic } from '../examples/radio/basic';
 export { RadioControlled } from '../examples/radio/controlled';
 export { SelectBasic } from '../examples/select/basic';
 export { SelectControlled } from '../examples/select/controlled';
-export { SelectTheme } from '../examples/select/theme';
 export { SwitchBasic } from '../examples/switch/basic';
 export { SwitchControlled } from '../examples/switch/controlled';
 export { TextareaBasic } from '../examples/textarea/basic';
diff --git a/apps/docs/src/components/home-showcase.scss b/apps/docs/src/components/home-showcase.scss
index 0e4efd3..5e5fa50 100644
--- a/apps/docs/src/components/home-showcase.scss
+++ b/apps/docs/src/components/home-showcase.scss
@@ -335,114 +335,6 @@
   }
 }
 
-.leaf-motion-gallery {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  border: 1px solid var(--leaf-site-border);
-  border-radius: 14px;
-  background: var(--leaf-site-panel);
-  overflow: hidden;
-  > article {
-    min-width: 0;
-    padding: 28px 24px 24px;
-    + article {
-      border-inline-start: 1px solid var(--leaf-site-border);
-    }
-    > h3 {
-      margin: 10px 0 26px;
-      font-size: 17px;
-      font-weight: 600;
-      letter-spacing: -0.3px;
-    }
-  }
-  .leaf-tabs {
-    min-height: 128px;
-  }
-  .leaf-tabs__panel {
-    padding-inline: 0;
-  }
-  .leaf-collapse__content p {
-    margin: 2px 0 8px;
-    font-size: 12px;
-    color: var(--leaf-site-muted);
-    line-height: 1.8;
-  }
-  &__metric {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    padding-top: 6px;
-    .leaf-statistic__title,
-    .leaf-badge__text {
-      font-size: 12px;
-    }
-    .leaf-statistic__value {
-      font-size: 26px;
-    }
-    .leaf-statistic__suffix {
-      font-size: 12px;
-    }
-  }
-  &__activity {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-height: 85px;
-    p {
-      flex: 1;
-      margin: 0;
-      font-size: 14px;
-    }
-    small {
-      display: block;
-      margin-top: 7px;
-      font-size: 13px;
-      color: var(--leaf-site-muted);
-    }
-    > svg {
-      color: var(--leaf-color-primary);
-    }
-  }
-  &__members {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    align-items: start;
-    padding-top: 8px;
-    font-size: 12px;
-    color: var(--leaf-site-muted);
-  }
-  &__slider {
-    display: grid;
-    gap: 14px;
-    padding: 8px 0 12px;
-  }
-  &__feedback {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 14px;
-    text-align: center;
-    p {
-      margin: 0;
-      font-size: 12px;
-      color: var(--leaf-site-muted);
-    }
-    .leaf-button {
-      min-width: 144px;
-    }
-  }
-  &__feedback-icon {
-    display: grid;
-    place-items: center;
-    width: 42px;
-    height: 42px;
-    border-radius: 50%;
-    background: var(--leaf-site-soft);
-    color: var(--leaf-color-primary);
-  }
-}
 @media (max-width: 1000px) {
   .leaf-workspace {
     &__layout {
@@ -462,9 +354,6 @@
       display: none;
     }
   }
-  .leaf-motion-gallery > article {
-    padding-inline: 20px;
-  }
 }
 @media (max-width: 760px) {
   .leaf-workspace {
@@ -481,18 +370,6 @@
       margin-bottom: 24px;
     }
   }
-  .leaf-motion-gallery {
-    grid-template-columns: minmax(0, 1fr);
-    > article {
-      + article {
-        border-inline-start: 0;
-        border-top: 1px solid var(--leaf-site-border);
-      }
-      > h3 {
-        margin-bottom: 20px;
-      }
-    }
-  }
 }
 @media (max-width: 520px) {
   .leaf-workspace {
diff --git a/apps/docs/src/components/home-showcase.tsx b/apps/docs/src/components/home-showcase.tsx
index 378515d..2a0aa5b 100644
--- a/apps/docs/src/components/home-showcase.tsx
+++ b/apps/docs/src/components/home-showcase.tsx
@@ -1,11 +1,9 @@
 import {
   Avatar,
   AvatarGroup,
-  Badge,
   Button,
   Card,
   Checkbox,
-  Collapse,
   ConfigProvider,
   DatePicker,
   Dropdown,
@@ -16,10 +14,8 @@ import {
   Progress,
   Segmented,
   Select,
-  Slider,
   Statistic,
   Switch,
-  Tabs,
   Tag,
   Tooltip,
   useMessage,
@@ -37,10 +33,11 @@ import {
   RotateCcw,
   Sparkles,
 } from 'lucide-react';
-import { type CSSProperties, useEffect, useRef, useState } from 'react';
+import { type CSSProperties, useRef, useState } from 'react';
+import { useDocsTheme } from './docs-theme';
 import { ComponentShowcase } from './home-components';
 import { useDocsLocale } from './i18n';
-import { defaultThemeColor, themeColorPresets } from './theme-colors';
+import { themeColorPresets } from './theme-colors';
 import './home-showcase.scss';
 
 interface Task {
@@ -85,7 +82,7 @@ const initialTasks: Task[] = [
 export function HomeShowcase() {
   const { t } = useDocsLocale();
   const [scene, setScene] = useState('components');
-  const [accent, setAccent] = useState<string>(defaultThemeColor);
+  const { color: accent, setColor: setAccent } = useDocsTheme();
   return (
     <section
       className="leaf-showroom rp-not-doc"
@@ -532,138 +529,3 @@ function ProjectShowcase() {
     </section>
   );
 }
-
-export function MotionGallery() {
-  const { t } = useDocsLocale();
-  const { message } = useMessage();
-  const [tab, setTab] = useState('overview');
-  const [value, setValue] = useState(64);
-  const [saving, setSaving] = useState(false);
-  const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  useEffect(() => () => clearTimeout(timeout.current), []);
-  return (
-    <div className="leaf-motion-gallery rp-not-doc">
-      <article>
-        <span className="leaf-eyebrow">01 / {t('选择', 'SELECTION')}</span>
-        <h3>{t('视线跟着选择走。', 'Follow the selection.')}</h3>
-        <Tabs
-          activeKey={tab}
-          onChange={setTab}
-          size="sm"
-          items={[
-            {
-              key: 'overview',
-              label: t('概览', 'Overview'),
-              children: (
-                <div className="leaf-motion-gallery__metric">
-                  <Statistic
-                    title={t('每一点进步都看得见', 'Every bit of progress')}
-                    value={24}
-                    suffix={t('项', 'tasks')}
-                  />
-                  <Badge status="success" text={t('节奏刚好', 'At your pace')} />
-                </div>
-              ),
-            },
-            {
-              key: 'activity',
-              label: t('动态', 'Activity'),
-              children: (
-                <div className="leaf-motion-gallery__activity">
-                  <Avatar size={28}>J</Avatar>
-                  <p>
-                    {t('Jamie 完成了一项任务', 'Jamie completed a task')}
-                    <small>{t('刚刚 · 每一步都算数', 'Just now · Every step counts')}</small>
-                  </p>
-                  <Check size={16} />
-                </div>
-              ),
-            },
-            {
-              key: 'members',
-              label: t('成员', 'Members'),
-              children: (
-                <div className="leaf-motion-gallery__members">
-                  <AvatarGroup size={34}>
-                    <Avatar alt="Alex">A</Avatar>
-                    <Avatar alt="Jamie">J</Avatar>
-                    <Avatar alt="Sam">S</Avatar>
-                  </AvatarGroup>
-                  <span>{t('好想法，一起完成。', 'Good ideas, made together.')}</span>
-                </div>
-              ),
-            },
-          ]}
-        />
-      </article>
-      <article>
-        <span className="leaf-eyebrow">02 / {t('展开', 'DISCLOSURE')}</span>
-        <h3>{t('细节，适时出现。', 'Details, when you need them.')}</h3>
-        <Collapse
-          size="sm"
-          bordered={false}
-          accordion
-          defaultActiveKey="details"
-          items={[
-            {
-              key: 'details',
-              label: t('给想法留一点空间', 'Make room for an idea'),
-              children: (
-                <p>
-                  {t(
-                    '展开后的内容自然接上，收起时也能跟上变化。',
-                    'Content flows into place, and folds away just as naturally.',
-                  )}
-                </p>
-              ),
-            },
-            {
-              key: 'preferences',
-              label: t('调整你的节奏', 'Find your own pace'),
-              children: (
-                <div className="leaf-motion-gallery__slider">
-                  <Slider
-                    aria-label={t('工作节奏', 'Working pace')}
-                    value={value}
-                    onChange={setValue}
-                    showValue={false}
-                  />
-                  <Progress
-                    percent={value}
-                    showInfo={false}
-                    aria-label={t('当前节奏', 'Current pace')}
-                  />
-                </div>
-              ),
-            },
-          ]}
-        />
-      </article>
-      <article>
-        <span className="leaf-eyebrow">03 / {t('反馈', 'FEEDBACK')}</span>
-        <h3>{t('每个动作，都有回应。', 'A response to every action.')}</h3>
-        <div className="leaf-motion-gallery__feedback">
-          <span className="leaf-motion-gallery__feedback-icon">
-            <Check size={24} />
-          </span>
-          <p>{t('按下、等待、完成，一气呵成。', 'Press, wait, and finish in one flow.')}</p>
-          <Button
-            loading={saving}
-            startIcon={<Check size={16} />}
-            onClick={() => {
-              setSaving(true);
-              timeout.current = setTimeout(() => {
-                setSaving(false);
-                message.success(
-                  t('已保存，可以继续向前了。', 'Saved. You are ready for the next step.'),
-                );
-              }, 900);
-            }}
-          >
-            {t('保存这次进展', 'Save this progress')}
-          </Button>
-        </div>
-      </article>
-    </div>
-  );
-}
diff --git a/apps/docs/src/components/home.tsx b/apps/docs/src/components/home.tsx
index 258373b..51ef7c5 100644
--- a/apps/docs/src/components/home.tsx
+++ b/apps/docs/src/components/home.tsx
@@ -1,10 +1,10 @@
 import { Badge } from '@ifhover/leaf-ui';
 import { ButtonLink } from './button-link';
 import { componentCatalog } from './component-catalog';
-import { CopyButton } from './copy-button';
-import { HomeShowcase, MotionGallery } from './home-showcase';
+import { HomeShowcase } from './home-showcase';
 import { useDocsLocale } from './i18n';
 import { Icon } from './icon';
+import { PackageInstall } from './package-install';
 import { ThemePlayground } from './theme-playground';
 
 export function HomeLayout() {
@@ -12,26 +12,32 @@ export function HomeLayout() {
   const features = [
     {
       icon: 'sliders',
-      title: t('顺着你的动作。', 'In step with you.'),
+      title: t('交互顺手，细节到位。', 'Small details. Smoother interactions.'),
       text: t(
-        '选择、展开、加载，每一步都接得自然。细节让界面更顺手。',
-        'Selection, disclosure and loading flow into one another. Details make the interface feel effortless.',
+        '清楚的状态反馈、自然的动效、完整的键盘操作。常用的交互，已经替你照顾好。',
+        'Clear feedback, natural motion and keyboard support. The everyday interactions are taken care of.',
       ),
     },
     {
       icon: 'leaf',
-      title: t('留白，也是设计。', 'Room to breathe.'),
+      title: t('你的品牌，自有风格。', 'Your brand. Your style.'),
       text: t(
-        '清晰的层次，安静的底色。让品牌和内容拥有自己的表达。',
-        'Clear hierarchy and calm surfaces give your brand and content their own voice.',
+        '从主题色、圆角到深浅外观，几处设置就能融入你的产品。默认好看，也经得起定制。',
+        'Make it yours with colors, corners and light or dark themes. Start with thoughtful defaults and adapt them to your product.',
       ),
     },
     {
       icon: 'code',
-      title: t('从细节到整个产品。', 'From detail to product.'),
+      title: t('常用参数，只设一次。', 'Set it once. Use it everywhere.'),
       text: t(
-        `${componentCatalog.length} 个 React 组件，照顾表单、键盘、主题和每一种状态。`,
-        `${componentCatalog.length} React components with care for forms, keyboards, themes and every state.`,
+        '按钮样式、输入提示、弹窗防误关，一处配置，全站沿用。省去重复传参，个别组件仍可单独调整。',
+        'Share button styles, input hints and modal closing behavior across your app. Skip repeated props and override individual components when needed.',
+      ),
+      href: url(
+        t(
+          '/components/config-provider.html#组件默认值',
+          '/components/config-provider.html#component-defaults',
+        ),
       ),
     },
   ] as const;
@@ -43,23 +49,25 @@ export function HomeLayout() {
           status="success"
           color="var(--leaf-color-primary)"
           text={t(
-            `${componentCatalog.length} 个组件 · 一个顺手的体验`,
-            `${componentCatalog.length} components · One effortless experience`,
+            `${componentCatalog.length} 个 React 组件 · 开箱即用，随你定制`,
+            `${componentCatalog.length} React components · Ready to make your own`,
           )}
         />
         <h1>
-          {t('让界面，', 'Interfaces that ')}
-          <span>{t('流动起来。', 'feel alive.')}</span>
+          <span className="leaf-hero__brand">Leaf UI</span>
+          <span className="leaf-hero__headline">
+            {t('让好想法，长成好界面。', 'Good ideas deserve great interfaces.')}
+          </span>
         </h1>
         <p>
           {t(
-            '从一次轻巧的按下，到流畅的状态变化。',
-            'From a subtle press to a seamless change of state.',
+            '轻盈、好用、随你定制的 React 组件库。',
+            'A lightweight React component library that feels right at home.',
           )}
           <br />
           {t(
-            '用 Leaf UI，构建清晰、自然、有回应的产品。',
-            'Build clear, thoughtful, responsive products with Leaf UI.',
+            '从按钮到表单，细节已经就位，接下来随你发挥。',
+            'From buttons to forms, the details are ready. Make something of your own.',
           )}
         </p>
         <div className="leaf-hero__actions">
@@ -74,45 +82,26 @@ export function HomeLayout() {
             {t('探索组件', 'Explore components')}
           </ButtonLink>
         </div>
-        <div className="leaf-install">
-          <Icon name="code" width="15" height="15" />
-          <code>pnpm add @ifhover/leaf-ui</code>
-          <CopyButton
-            text="pnpm add @ifhover/leaf-ui"
-            label={t('复制安装命令', 'Copy install command')}
-          />
-        </div>
+        <PackageInstall variant="hero" />
         <span className="leaf-hero__note">
           React 18 / 19 <span>·</span> TypeScript <span>·</span> CSS Variables
         </span>
       </section>
       <HomeShowcase />
-      <section className="leaf-features" aria-label={t('设计理念', 'Design principles')}>
+      <section className="leaf-features" aria-label={t('产品特点', 'Product features')}>
         {features.map((feature) => (
           <article key={feature.icon}>
             <Icon name={feature.icon} width="19" height="19" />
             <h2>{feature.title}</h2>
             <p>{feature.text}</p>
+            {'href' in feature && (
+              <ButtonLink variant="link" href={feature.href} endIcon={<Icon name="arrow" />}>
+                {t('了解组件默认值', 'Explore component defaults')}
+              </ButtonLink>
+            )}
           </article>
         ))}
       </section>
-      <section className="leaf-home-motion" aria-labelledby="motion-heading">
-        <div className="leaf-section-heading">
-          <div>
-            <span className="leaf-eyebrow">SMALL DETAILS. BETTER FEEL.</span>
-            <h2 id="motion-heading">
-              {t('亲手试一下，会更有感觉。', 'A little interaction goes a long way.')}
-            </h2>
-            <p>
-              {t(
-                '切换、展开、保存。好体验，藏在每一次操作里。',
-                'Switch, unfold, save. The experience is in every little action.',
-              )}
-            </p>
-          </div>
-        </div>
-        <MotionGallery />
-      </section>
       <section className="leaf-home-playground" aria-labelledby="playground-heading">
         <div className="leaf-section-heading">
           <div>
diff --git a/apps/docs/src/components/introduction.scss b/apps/docs/src/components/introduction.scss
new file mode 100644
index 0000000..9b0902a
--- /dev/null
+++ b/apps/docs/src/components/introduction.scss
@@ -0,0 +1,117 @@
+.leaf-intro-hero {
+  margin-block: 24px 8px;
+  padding: 36px 24px;
+  border: 1px solid var(--leaf-site-border);
+  border-radius: 16px;
+  background: var(--leaf-site-soft);
+  text-align: center;
+
+  &__name {
+    margin: 0;
+    color: var(--leaf-site-text);
+    font-size: 42px;
+    font-weight: 600;
+    line-height: 1.1;
+    letter-spacing: -0.04em;
+  }
+
+  &__tagline {
+    margin: 0;
+    color: var(--leaf-color-primary-text-55);
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.6;
+  }
+
+  &__description {
+    max-inline-size: 500px;
+    color: var(--leaf-site-muted);
+    font-size: 15px;
+    line-height: 1.8;
+
+    > p {
+      margin: 0;
+    }
+  }
+
+  &__badges {
+    margin-block: 2px 8px;
+
+    > span {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 9px;
+      border: 1px solid var(--leaf-site-border);
+      border-radius: 6px;
+      color: var(--leaf-site-muted);
+      background: var(--leaf-site-panel);
+      font-size: 12px;
+      line-height: 1.5;
+      white-space: nowrap;
+    }
+  }
+}
+
+.leaf-intro-features {
+  margin-block: 20px;
+}
+
+.leaf-intro-feature {
+  min-inline-size: 0;
+
+  &__icon {
+    flex-shrink: 0;
+    color: var(--leaf-site-accent);
+  }
+
+  &__description {
+    color: var(--leaf-site-muted);
+    font-size: 14px;
+    line-height: 1.8;
+
+    > p {
+      margin: 0;
+    }
+  }
+}
+
+.leaf-intro-browsers {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 20px 0;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--leaf-site-border);
+  border-radius: 12px;
+  background: var(--leaf-site-panel);
+  list-style: none;
+
+  > li {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+    padding: 20px 8px;
+    color: var(--leaf-site-text);
+    font-size: 14px;
+    font-weight: 500;
+
+    + li {
+      border-inline-start: 1px solid var(--leaf-site-border);
+    }
+  }
+
+  &__version {
+    color: var(--leaf-site-muted);
+    font-size: 13px;
+    font-weight: 400;
+  }
+}
+
+@media (max-width: 480px) {
+  .leaf-intro-hero {
+    padding: 28px 16px;
+  }
+}
diff --git a/apps/docs/src/components/introduction.tsx b/apps/docs/src/components/introduction.tsx
new file mode 100644
index 0000000..fcf64be
--- /dev/null
+++ b/apps/docs/src/components/introduction.tsx
@@ -0,0 +1,126 @@
+import { Card, Flex, Grid } from '@ifhover/leaf-ui';
+import { withBase } from '@rspress/core/runtime';
+import {
+  ArrowRight,
+  Blocks,
+  Braces,
+  Globe2,
+  Keyboard,
+  Leaf,
+  Monitor,
+  Palette,
+  ShieldCheck,
+} from 'lucide-react';
+import type { ReactNode } from 'react';
+import { ButtonLink } from './button-link';
+import { useDocsLocale } from './i18n';
+import './introduction.scss';
+
+export function IntroductionHero({ children }: { children: ReactNode }) {
+  const { t, url } = useDocsLocale();
+  return (
+    <section className="leaf-intro-hero rp-not-doc" aria-label="Leaf UI">
+      <Flex direction="column" align="center" gap={16}>
+        <img src={withBase('/leaf.svg')} width={72} height={72} alt="" />
+        <p className="leaf-intro-hero__name">Leaf UI</p>
+        <p className="leaf-intro-hero__tagline">
+          {t('轻盈 · 自然 · 可定制', 'Lightweight · Natural · Customizable')}
+        </p>
+        <div className="leaf-intro-hero__description">{children}</div>
+        <Flex gap={8} justify="center" wrap className="leaf-intro-hero__badges">
+          <span>
+            <Blocks size={14} aria-hidden="true" />
+            React 18 / 19
+          </span>
+          <span>
+            <ShieldCheck size={14} aria-hidden="true" />
+            TypeScript
+          </span>
+          <span>
+            <Monitor size={14} aria-hidden="true" />
+            SSR
+          </span>
+          <span>
+            <Braces size={14} aria-hidden="true" />
+            ESM / CommonJS
+          </span>
+        </Flex>
+        <Flex gap={12} justify="center" wrap>
+          <ButtonLink href={url('/guide/getting-started.html')} endIcon={<ArrowRight size={16} />}>
+            {t('开始使用', 'Get started')}
+          </ButtonLink>
+          <ButtonLink variant="outline" href={url('/components/index.html')}>
+            {t('探索组件', 'Explore components')}
+          </ButtonLink>
+        </Flex>
+      </Flex>
+    </section>
+  );
+}
+
+const featureIcons = {
+  leaf: Leaf,
+  palette: Palette,
+  types: ShieldCheck,
+  components: Blocks,
+  languages: Globe2,
+  keyboard: Keyboard,
+};
+
+export function IntroductionFeatures({ children }: { children: ReactNode }) {
+  return (
+    <Grid columns={{ xs: 1, sm: 2 }} gap={16} className="leaf-intro-features rp-not-doc">
+      {children}
+    </Grid>
+  );
+}
+
+export function IntroductionFeature({
+  icon,
+  title,
+  children,
+}: {
+  icon: keyof typeof featureIcons;
+  title: string;
+  children: ReactNode;
+}) {
+  const Icon = featureIcons[icon];
+  return (
+    <Card
+      className="leaf-intro-feature"
+      title={
+        <Flex align="center" gap={10}>
+          <Icon size={20} className="leaf-intro-feature__icon" aria-hidden="true" />
+          {title}
+        </Flex>
+      }
+    >
+      <div className="leaf-intro-feature__description">{children}</div>
+    </Card>
+  );
+}
+
+const browsers = [
+  { name: 'Chrome', icon: 'chrome', minimum: '109' },
+  { name: 'Edge', icon: 'edge', minimum: '109' },
+  { name: 'Firefox', icon: 'firefox', minimum: '121' },
+  { name: 'Safari', icon: 'safari', minimum: '16.4' },
+];
+
+export function IntroductionBrowsers() {
+  const { t } = useDocsLocale();
+  return (
+    <ul
+      className="leaf-intro-browsers rp-not-doc"
+      aria-label={t('浏览器最低版本', 'Minimum browser versions')}
+    >
+      {browsers.map(({ name, icon, minimum }) => (
+        <li key={name}>
+          <img src={withBase(`/browsers/${icon}.svg`)} width={32} height={32} alt="" />
+          <span>{name}</span>
+          <span className="leaf-intro-browsers__version">≥ {minimum}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/apps/docs/src/components/package-install.scss b/apps/docs/src/components/package-install.scss
new file mode 100644
index 0000000..5e37850
--- /dev/null
+++ b/apps/docs/src/components/package-install.scss
@@ -0,0 +1,118 @@
+.leaf-package-install {
+  width: 100%;
+  min-width: 0;
+  text-align: start;
+
+  .leaf-tabs__panel {
+    padding-block: 0;
+  }
+
+  .leaf-tabs__tab img {
+    display: block;
+    flex: none;
+  }
+
+  &__command {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 56px;
+    padding: 10px 14px;
+    background: var(--leaf-site-soft);
+
+    code {
+      flex: 1;
+      min-width: 0;
+      color: var(--leaf-site-text);
+      font-family: var(--rp-font-family-mono);
+      font-size: 13px;
+      line-height: 1.7;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+
+      > span {
+        color: var(--leaf-color-primary);
+      }
+    }
+
+    .leaf-button {
+      flex: none;
+      color: var(--leaf-site-muted);
+    }
+  }
+
+  &__prompt {
+    color: var(--leaf-site-muted);
+    font-family: var(--rp-font-family-mono);
+    font-size: 13px;
+    user-select: none;
+  }
+
+  &[data-variant='guide'] {
+    margin-block: 20px 24px;
+
+    .leaf-tabs__panels {
+      padding-top: 8px;
+    }
+
+    .rp-codeblock {
+      margin-block: 0;
+    }
+  }
+
+  &[data-variant='hero'] {
+    max-width: 410px;
+    overflow: clip;
+    border: 1px solid var(--leaf-site-border);
+    border-radius: 12px;
+    background: var(--leaf-site-panel);
+
+    .leaf-tabs__header {
+      padding-inline: 12px;
+    }
+
+    .leaf-tabs__list {
+      flex: 1;
+    }
+
+    .leaf-tabs__track {
+      gap: 0;
+    }
+
+    .leaf-tabs__entry {
+      flex: 1;
+    }
+
+    .leaf-tabs__tab {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+}
+
+@media (max-width: 520px) {
+  .leaf-package-install {
+    .leaf-tabs__track {
+      gap: 0;
+    }
+
+    .leaf-tabs__entry,
+    .leaf-tabs__tab {
+      flex: 1;
+    }
+
+    .leaf-tabs__tab {
+      gap: 6px;
+      padding-inline: 7px;
+    }
+
+    &__command {
+      gap: 8px;
+      padding-inline: 12px;
+    }
+
+    &[data-variant='hero'] .leaf-tabs__header {
+      padding-inline: 6px;
+    }
+  }
+}
diff --git a/apps/docs/src/components/package-install.tsx b/apps/docs/src/components/package-install.tsx
new file mode 100644
index 0000000..8435286
--- /dev/null
+++ b/apps/docs/src/components/package-install.tsx
@@ -0,0 +1,118 @@
+import { Tabs } from '@ifhover/leaf-ui';
+import { withBase } from '@rspress/core/runtime';
+import { Children, isValidElement, type ReactNode, useEffect, useState } from 'react';
+import { CopyButton } from './copy-button';
+import { useDocsLocale } from './i18n';
+import './package-install.scss';
+
+const packageManagers = [
+  { key: 'npm', label: 'npm', action: 'install' },
+  { key: 'yarn', label: 'Yarn', action: 'add' },
+  { key: 'pnpm', label: 'pnpm', action: 'add' },
+  { key: 'bun', label: 'Bun', action: 'add' },
+] as const;
+
+const storageKey = 'leaf-ui-docs-package-manager';
+const changeEvent = 'leaf-ui-docs-package-manager-change';
+
+function usePackageManager() {
+  // Match the static HTML before restoring the browser's preference.
+  const [manager, setManager] = useState('pnpm');
+
+  useEffect(() => {
+    const restore = (value: unknown) => {
+      setManager(packageManagers.find((item) => item.key === value)?.key ?? 'pnpm');
+    };
+    const syncStorage = (event: StorageEvent) => {
+      if (event.key === storageKey || event.key === null) restore(event.newValue);
+    };
+    const syncPage = (event: Event) => {
+      if (event instanceof CustomEvent) restore(event.detail);
+    };
+
+    try {
+      restore(window.localStorage.getItem(storageKey));
+    } catch {
+      // The tabs still work when browser storage is unavailable.
+    }
+    window.addEventListener('storage', syncStorage);
+    window.addEventListener(changeEvent, syncPage);
+    return () => {
+      window.removeEventListener('storage', syncStorage);
+      window.removeEventListener(changeEvent, syncPage);
+    };
+  }, []);
+
+  function selectManager(key: string) {
+    const selection = packageManagers.find((item) => item.key === key);
+    if (!selection) return;
+    setManager(selection.key);
+    try {
+      window.localStorage.setItem(storageKey, selection.key);
+    } catch {
+      // Changing the selection must not depend on persistence.
+    }
+    window.dispatchEvent(new CustomEvent(changeEvent, { detail: selection.key }));
+  }
+
+  return { manager, selectManager };
+}
+
+export function PackageInstall({
+  variant = 'guide',
+  children,
+}: {
+  variant?: 'guide' | 'hero';
+  children?: ReactNode;
+}) {
+  const { t } = useDocsLocale();
+  const { manager, selectManager } = usePackageManager();
+  // Rspress passes the original fences as one string when exporting Markdown.
+  if (typeof children === 'string') return <>{children}</>;
+  const panels = Children.toArray(children).filter(isValidElement);
+
+  return (
+    <div className="leaf-package-install rp-not-doc" data-variant={variant}>
+      <Tabs
+        aria-label={t('选择包管理器', 'Choose a package manager')}
+        activeKey={manager}
+        onChange={selectManager}
+        size="md"
+        overflow={false}
+        destroyInactive
+        items={packageManagers.map((manager, index) => {
+          const command = `${manager.key} ${manager.action} @ifhover/leaf-ui`;
+          return {
+            key: manager.key,
+            label: manager.label,
+            icon: (
+              <img
+                src={withBase(`/package-managers/${manager.key}.svg`)}
+                alt=""
+                width={18}
+                height={18}
+                aria-hidden="true"
+                data-no-zoom=""
+              />
+            ),
+            children: panels[index] ?? (
+              <div className="leaf-package-install__command">
+                <span className="leaf-package-install__prompt" aria-hidden="true">
+                  $
+                </span>
+                <code>
+                  <span>{manager.key}</span> {manager.action} @ifhover/leaf-ui
+                </code>
+                <CopyButton
+                  text={command}
+                  label={t('复制安装命令', 'Copy install command')}
+                  iconOnly
+                />
+              </div>
+            ),
+          };
+        })}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/src/components/theme-color-switcher.tsx b/apps/docs/src/components/theme-color-switcher.tsx
new file mode 100644
index 0000000..36bc565
--- /dev/null
+++ b/apps/docs/src/components/theme-color-switcher.tsx
@@ -0,0 +1,45 @@
+import { Button, ColorPicker } from '@ifhover/leaf-ui';
+import { useDocsTheme } from './docs-theme';
+import { useDocsLocale } from './i18n';
+import { defaultThemeColor, themeColorPresets } from './theme-colors';
+
+export function ThemeColorSwitcher() {
+  const { color, setColor } = useDocsTheme();
+  const { t } = useDocsLocale();
+  return (
+    <ColorPicker
+      className="leaf-docs-color-switcher"
+      aria-label={t('切换主题色', 'Change theme color')}
+      title={t('切换主题色', 'Change theme color')}
+      size="sm"
+      value={color}
+      onChange={setColor}
+      disableAlpha
+      popupPlacement="bottom-end"
+      popupClassName="leaf-docs-color-panel"
+      presets={[
+        {
+          label: t('配色预设', 'Color presets'),
+          colors: themeColorPresets.map((preset) => preset.color),
+        },
+      ]}
+      popupRender={(content) => (
+        <>
+          <div className="mb-3">
+            <div className="font-medium">{t('主题色', 'Theme color')}</div>
+            <p className="mt-1 text-(length:--leaf-font-size-sm) text-(--leaf-color-text-muted)">
+              {t('同步应用到文档和组件预览', 'Applies to the docs and component previews')}
+            </p>
+          </div>
+          {content}
+          <div className="mt-3 flex justify-between gap-3 text-(length:--leaf-font-size-sm)">
+            <span className="font-mono text-(--leaf-color-text-muted)">{color.toUpperCase()}</span>
+            <Button variant="link" onClick={() => setColor(defaultThemeColor)}>
+              {t('恢复默认', 'Reset color')}
+            </Button>
+          </div>
+        </>
+      )}
+    />
+  );
+}
diff --git a/apps/docs/src/components/theme-playground.tsx b/apps/docs/src/components/theme-playground.tsx
index b4ca3dd..f198cb4 100644
--- a/apps/docs/src/components/theme-playground.tsx
+++ b/apps/docs/src/components/theme-playground.tsx
@@ -13,13 +13,16 @@ import {
 import { CodeBlockRuntime } from '@rspress/core/theme-original';
 import { useId, useState } from 'react';
 import { CopyButton } from './copy-button';
+import { useDocsTheme } from './docs-theme';
 import { useDocsLocale } from './i18n';
 import { Icon } from './icon';
-import { defaultThemeColor, normalizeThemeColor, themeColorPresets } from './theme-colors';
+import { normalizeThemeColor, themeColorPresets } from './theme-colors';
 
 export function ThemePlayground() {
   const { t } = useDocsLocale();
-  const [color, setColor] = useState<string>(defaultThemeColor);
+  const { color: docsColor } = useDocsTheme();
+  const [customColor, setColor] = useState<string>();
+  const color = customColor ?? docsColor;
   const [radius, setRadius] = useState(10);
   const [mode, setMode] = useState<'light' | 'dark'>('light');
   const [density, setDensity] = useState<'comfortable' | 'compact'>('comfortable');
@@ -44,7 +47,7 @@ export function ThemePlayground() {
   ].join('\n');
 
   function reset() {
-    setColor(defaultThemeColor);
+    setColor(undefined);
     setRadius(10);
     setMode('light');
     setDensity('comfortable');
diff --git a/apps/docs/src/examples/alert/basic.tsx b/apps/docs/src/examples/alert/basic.tsx
index 847d1d1..689c477 100644
--- a/apps/docs/src/examples/alert/basic.tsx
+++ b/apps/docs/src/examples/alert/basic.tsx
@@ -1,7 +1,7 @@
 import { Alert, Space } from '@ifhover/leaf-ui';
 export function AlertBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Alert title="项目已保存" type="success" />
       <Alert title="有新的版本可用" description="你可以在方便的时候更新。" closable />
       <Alert title="请检查当前设置" type="warning" />
diff --git a/apps/docs/src/examples/alert/neutral.tsx b/apps/docs/src/examples/alert/neutral.tsx
index cb21a7a..d8c101c 100644
--- a/apps/docs/src/examples/alert/neutral.tsx
+++ b/apps/docs/src/examples/alert/neutral.tsx
@@ -4,7 +4,7 @@ import { ShieldCheck } from 'lucide-react';
 export function NeutralAlerts({ english = false }: { english?: boolean }) {
   const t = (zh: string, en: string) => (english ? en : zh);
   return (
-    <Space direction="vertical" align="stretch" style={{ width: '100%' }}>
+    <Space direction="vertical" align="stretch">
       <Alert
         type="success"
         icon={<ShieldCheck size={20} />}
diff --git a/apps/docs/src/examples/auto-complete/basic.tsx b/apps/docs/src/examples/auto-complete/basic.tsx
index fd1ee69..6785493 100644
--- a/apps/docs/src/examples/auto-complete/basic.tsx
+++ b/apps/docs/src/examples/auto-complete/basic.tsx
@@ -1,4 +1,4 @@
-import { AutoComplete, Space } from '@ifhover/leaf-ui';
+import { AutoComplete, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const options = [
@@ -12,9 +12,8 @@ export function AutoCompleteBasic() {
   const [value, setValue] = useState('');
   const [selected, setSelected] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">项目名称</span>
+    <Form layout="vertical">
+      <FormField label="项目名称">
         <AutoComplete
           aria-label="项目名称"
           placeholder="输入 Leaf 或自由填写"
@@ -23,14 +22,13 @@ export function AutoCompleteBasic() {
           onChange={setValue}
           onSelect={setSelected}
         />
-      </div>
-      <span className="leaf-demo-note">
+      </FormField>
+      <Text tone="muted">
         输入：{value || '空'} · 最近选中：{selected || '无'}
-      </span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用建议</span>
+      </Text>
+      <FormField label="禁用建议">
         <AutoComplete aria-label="禁用建议" options={options} disabled defaultValue="Leaf Garden" />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/auto-complete/search.tsx b/apps/docs/src/examples/auto-complete/search.tsx
index 82cc2ae..cb41a05 100644
--- a/apps/docs/src/examples/auto-complete/search.tsx
+++ b/apps/docs/src/examples/auto-complete/search.tsx
@@ -1,12 +1,11 @@
-import { AutoComplete, type AutoCompleteOption, Space } from '@ifhover/leaf-ui';
+import { AutoComplete, type AutoCompleteOption, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function AutoCompleteSearch() {
   const [options, setOptions] = useState<AutoCompleteOption[]>([]);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">邮箱地址</span>
+    <Form layout="vertical">
+      <FormField label="邮箱地址">
         <AutoComplete
           aria-label="邮箱地址"
           placeholder="输入邮箱前缀"
@@ -23,8 +22,8 @@ export function AutoCompleteSearch() {
             );
           }}
         />
-      </div>
-      <span className="leaf-demo-note">建议由输入动态生成，也可以直接填写完整地址。</span>
-    </Space>
+      </FormField>
+      <Text tone="muted">建议由输入动态生成，也可以直接填写完整地址。</Text>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/avatar/basic.tsx b/apps/docs/src/examples/avatar/basic.tsx
index 640ae3d..0726620 100644
--- a/apps/docs/src/examples/avatar/basic.tsx
+++ b/apps/docs/src/examples/avatar/basic.tsx
@@ -1,27 +1,27 @@
-import { Avatar, Badge, Space } from '@ifhover/leaf-ui';
+import { Avatar, Badge, Flex, Text } from '@ifhover/leaf-ui';
 export function AvatarBasic() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">小尺寸</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>小尺寸</Text>
         <Avatar size="sm">LF</Avatar>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">默认尺寸</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>默认尺寸</Text>
         <Avatar>LE</Avatar>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">大尺寸 · 方形</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>大尺寸 · 方形</Text>
         <Avatar size="lg" shape="square">
           UI
         </Avatar>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">未读提醒</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>未读提醒</Text>
         <Badge dot>
           <Avatar alt="未读消息">A</Avatar>
         </Badge>
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/avatar/fallback.tsx b/apps/docs/src/examples/avatar/fallback.tsx
index 9a87f36..0211a50 100644
--- a/apps/docs/src/examples/avatar/fallback.tsx
+++ b/apps/docs/src/examples/avatar/fallback.tsx
@@ -1,17 +1,17 @@
-import { Avatar, Space } from '@ifhover/leaf-ui';
+import { Avatar, Flex, Text } from '@ifhover/leaf-ui';
 export function AvatarFallback() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">加载失败时显示文字</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>加载失败时显示文字</Text>
         <Avatar src="data:image/png;base64,broken" alt="图片加载失败">
           LF
         </Avatar>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">未设置图片时显示默认图标</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>未设置图片时显示默认图标</Text>
         <Avatar alt="访客" />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/avatar/image.tsx b/apps/docs/src/examples/avatar/image.tsx
index 111b6ea..5fa2507 100644
--- a/apps/docs/src/examples/avatar/image.tsx
+++ b/apps/docs/src/examples/avatar/image.tsx
@@ -1,16 +1,16 @@
-import { Avatar, Space } from '@ifhover/leaf-ui';
+import { Avatar, Flex, Text } from '@ifhover/leaf-ui';
 export function AvatarImage() {
   const image = '../avatar-portrait.svg';
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">圆形图片</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>圆形图片</Text>
         <Avatar src={image} alt="Alex" size="lg" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">方形图片</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>方形图片</Text>
         <Avatar src={image} alt="Alex" size={64} shape="square" imageProps={{ loading: 'lazy' }} />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/badge/basic.tsx b/apps/docs/src/examples/badge/basic.tsx
index 55a1c51..2d9d8c5 100644
--- a/apps/docs/src/examples/badge/basic.tsx
+++ b/apps/docs/src/examples/badge/basic.tsx
@@ -1,4 +1,4 @@
-import { Badge, Button, Space } from '@ifhover/leaf-ui';
+import { Badge, Button, Flex, Space, Text } from '@ifhover/leaf-ui';
 import { Bell, Mail } from 'lucide-react';
 
 export function BadgeBasic() {
@@ -12,18 +12,18 @@ export function BadgeBasic() {
 export function BadgeCounts() {
   return (
     <Space wrap size={32}>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">超过数量上限</span>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>超过数量上限</Text>
         <Badge count={120}>
           <Button variant="outline" startIcon={<Bell />} aria-label="通知" />
         </Badge>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">显示零值</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>显示零值</Text>
         <Badge count={0} showZero>
           <Button variant="outline" startIcon={<Bell />} aria-label="通知" />
         </Badge>
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/breadcrumb/basic.tsx b/apps/docs/src/examples/breadcrumb/basic.tsx
index bb50cea..721083e 100644
--- a/apps/docs/src/examples/breadcrumb/basic.tsx
+++ b/apps/docs/src/examples/breadcrumb/basic.tsx
@@ -1,4 +1,5 @@
-import { Breadcrumb, type BreadcrumbItem, Space } from '@ifhover/leaf-ui';
+import type { BreadcrumbItem } from '@ifhover/leaf-ui';
+import { Breadcrumb, Space } from '@ifhover/leaf-ui';
 import { House } from 'lucide-react';
 
 const items: readonly BreadcrumbItem[] = [
@@ -8,7 +9,7 @@ const items: readonly BreadcrumbItem[] = [
 ];
 export function BreadcrumbBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Breadcrumb items={items} />
       <Breadcrumb items={items} separator="/" />
     </Space>
diff --git a/apps/docs/src/examples/button/extensions.tsx b/apps/docs/src/examples/button/extensions.tsx
index 36777b5..3eddf17 100644
--- a/apps/docs/src/examples/button/extensions.tsx
+++ b/apps/docs/src/examples/button/extensions.tsx
@@ -1,16 +1,16 @@
-import { Button, ButtonGroup, Space, SplitButton } from '@ifhover/leaf-ui';
+import { Button, ButtonGroup, Flex, Space, SplitButton, Text } from '@ifhover/leaf-ui';
 export function ExtensionDemo() {
   return (
     <Space direction="vertical" align="start">
-      <div className="leaf-demo-case">
-        <p>按钮组</p>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>按钮组</Text>
         <ButtonGroup>
           <Button variant="outline">上一步</Button>
           <Button variant="outline">下一步</Button>
         </ButtonGroup>
-      </div>
-      <div className="leaf-demo-case">
-        <p>分裂按钮</p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>分裂按钮</Text>
         <SplitButton
           items={[
             { key: 'copy', label: '保存副本' },
@@ -19,7 +19,7 @@ export function ExtensionDemo() {
         >
           保存
         </SplitButton>
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/calendar/basic.tsx b/apps/docs/src/examples/calendar/basic.tsx
index 08f0c33..5bf3a5c 100644
--- a/apps/docs/src/examples/calendar/basic.tsx
+++ b/apps/docs/src/examples/calendar/basic.tsx
@@ -1,4 +1,4 @@
-import { Calendar, Space } from '@ifhover/leaf-ui';
+import { Calendar, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const events: Record<number, { label: string; color: string }> = {
@@ -9,22 +9,19 @@ const events: Record<number, { label: string; color: string }> = {
 export function CalendarBasic() {
   const [value, setValue] = useState(new Date(2026, 9, 4));
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Calendar
         value={value}
         onChange={setValue}
         cellRender={(date) => {
           const event = date.getMonth() === 9 ? events[date.getDate()] : undefined;
-          return event ? (
-            <span className="leaf-demo-calendar-event" style={{ color: event.color }}>
-              <i />
-              {event.label}
-            </span>
-          ) : null;
+          return event ? <Text style={{ color: event.color }}>{event.label}</Text> : null;
         }}
       />
-      <output className="leaf-demo-note">
-        已选日期: {value.getFullYear()}-{value.getMonth() + 1}-{value.getDate()}
+      <output>
+        <Text tone="muted">
+          已选日期: {value.getFullYear()}-{value.getMonth() + 1}-{value.getDate()}
+        </Text>
       </output>
     </Space>
   );
diff --git a/apps/docs/src/examples/calendar/compact.tsx b/apps/docs/src/examples/calendar/compact.tsx
index 0245618..2623f1e 100644
--- a/apps/docs/src/examples/calendar/compact.tsx
+++ b/apps/docs/src/examples/calendar/compact.tsx
@@ -1,13 +1,13 @@
-import { Calendar, Space } from '@ifhover/leaf-ui';
+import { Calendar, Space, Text } from '@ifhover/leaf-ui';
 export function CalendarCompact() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Calendar
         fullscreen={false}
         defaultValue={new Date(2026, 9, 4)}
         disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
       />
-      <p className="leaf-demo-note">周末不可选；已有的选中日期仍清晰可见。</p>
+      <Text tone="muted">周末不可选；已有的选中日期仍清晰可见。</Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/card/basic.tsx b/apps/docs/src/examples/card/basic.tsx
index a945b7a..d2dc639 100644
--- a/apps/docs/src/examples/card/basic.tsx
+++ b/apps/docs/src/examples/card/basic.tsx
@@ -1,53 +1,4 @@
-import { Avatar, Button, Card, Space, Tag } from '@ifhover/leaf-ui';
-import { ArrowUpRight, Leaf } from 'lucide-react';
-
+import { Card } from '@ifhover/leaf-ui';
 export function CardBasic() {
-  return (
-    <Space
-      direction="vertical"
-      align="stretch"
-      className="leaf-demo-stack leaf-demo-stack--wide"
-      style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))', gap: 20 }}
-    >
-      <Card
-        title="Leaf Garden"
-        extra={<Tag color="success">进行中</Tag>}
-        hoverable
-        footer={
-          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 10 }}>
-            <Avatar size="sm">LF</Avatar>
-            <span style={{ color: 'var(--leaf-color-text-muted)', fontSize: 12 }}>设计团队</span>
-            <Button
-              variant="ghost"
-              size="sm"
-              endIcon={<ArrowUpRight />}
-              style={{ marginInlineStart: 'auto' }}
-            >
-              查看项目
-            </Button>
-          </div>
-        }
-      >
-        <div
-          style={{
-            display: 'grid',
-            placeItems: 'center',
-            padding: 28,
-            borderRadius: 'var(--leaf-radius)',
-            color: 'var(--leaf-color-primary)',
-            background: 'var(--leaf-color-primary-surface-8)',
-          }}
-        >
-          <Leaf size={44} strokeWidth={1.3} aria-hidden="true" />
-        </div>
-        <p style={{ color: 'var(--leaf-color-text-muted)', marginBlockStart: 16 }}>
-          整理项目与近期计划，让每一个好想法都有生长的空间。
-        </p>
-      </Card>
-      <Card title="加载中" loading />
-      <Card title="紧凑卡片" size="sm" bordered={false} style={{ gridColumn: '1 / -1' }}>
-        适合内容密集的页面。
-      </Card>
-    </Space>
-  );
+  return <Card title="项目概览">整理项目资料，让团队围绕同一份计划协作。</Card>;
 }
diff --git a/apps/docs/src/examples/card/sections.tsx b/apps/docs/src/examples/card/sections.tsx
index 39a1e5d..025495a 100644
--- a/apps/docs/src/examples/card/sections.tsx
+++ b/apps/docs/src/examples/card/sections.tsx
@@ -1,42 +1,32 @@
-import { Button, Card, Space, Tag } from '@ifhover/leaf-ui';
-import { useState } from 'react';
-
+import { Button, Card, Flex, Space, Tag } from '@ifhover/leaf-ui';
 export function CardSections({ english = false }: { english?: boolean }) {
   const t = (zh: string, en: string) => (english ? en : zh);
-  const [saved, setSaved] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" style={{ width: '100%' }}>
+    <Space direction="vertical" align="stretch" size="lg">
       <Card
-        title={t('团队空间', 'Team workspace')}
-        description={t('通过留白组织内容', 'Group content with spacing')}
-        extra={<Tag>{t('默认', 'Default')}</Tag>}
+        title={t('项目概览', 'Project overview')}
+        description={t('默认通过留白组织内容', 'Group content with spacing')}
+        extra={<Tag>{t('进行中', 'In progress')}</Tag>}
       >
         {t(
-          '适合展示概览、项目或其他轻量内容。',
-          'Use for summaries, projects and lightweight content.',
+          '标题、说明和正文自然分组。',
+          'The heading, description and body form natural sections.',
         )}
       </Card>
       <Card
         divided
-        title={t('通知设置', 'Notification settings')}
-        description={t('使用分区组织操作', 'Group settings and actions into sections')}
+        title={t('内容分区', 'Content sections')}
         footer={
-          <Space style={{ justifyContent: 'flex-end' }}>
-            <Button variant="outline" onClick={() => setSaved(false)}>
-              {t('重置', 'Reset')}
-            </Button>
-            <Button onClick={() => setSaved(true)}>{t('保存', 'Save')}</Button>
-          </Space>
+          <Flex justify="end" gap="sm" wrap>
+            <Button variant="outline">{t('取消', 'Cancel')}</Button>
+            <Button>{t('确认', 'Confirm')}</Button>
+          </Flex>
         }
       >
-        <span role={saved ? 'status' : undefined}>
-          {saved
-            ? t('设置已保存。', 'Settings saved.')
-            : t(
-                '接收重要事件提醒，每周汇总一次活动。',
-                'Receive important updates and a weekly activity summary.',
-              )}
-        </span>
+        {t(
+          '设置 divided 后，标题、正文和底部操作使用分隔线划分。',
+          'Enable divided to separate the heading, body and footer actions.',
+        )}
       </Card>
     </Space>
   );
diff --git a/apps/docs/src/examples/card/sizes.tsx b/apps/docs/src/examples/card/sizes.tsx
new file mode 100644
index 0000000..f4bdb4e
--- /dev/null
+++ b/apps/docs/src/examples/card/sizes.tsx
@@ -0,0 +1,19 @@
+import { Card, Space } from '@ifhover/leaf-ui';
+
+export function CardSizes() {
+  const items = [
+    { key: 'overview', label: '概览', children: '整理项目资料，让设计与开发围绕同一份计划协作。' },
+    {
+      key: 'activity',
+      label: '最近动态',
+      children: '今天更新了组件规范，并邀请两位成员加入项目。',
+    },
+  ];
+  return (
+    <Space direction="vertical" align="stretch" size="lg">
+      <Card title="小尺寸" size="sm" tabs={{ items }} />
+      <Card title="默认尺寸" tabs={{ items }} />
+      <Card title="大尺寸" size="lg" tabs={{ items }} />
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/card/tabs-with-title.tsx b/apps/docs/src/examples/card/tabs-with-title.tsx
new file mode 100644
index 0000000..b2e8ff9
--- /dev/null
+++ b/apps/docs/src/examples/card/tabs-with-title.tsx
@@ -0,0 +1,65 @@
+import { Button, Card, Descriptions, Flex, Form, FormField, Input, Tag } from '@ifhover/leaf-ui';
+import { useId, useState } from 'react';
+
+export function CardTabsWithTitle() {
+  const [activeKey, setActiveKey] = useState('settings');
+  const [saved, setSaved] = useState(false);
+  const formId = useId();
+  return (
+    <Card
+      divided
+      title="项目设置"
+      description="管理项目资料与团队成员。"
+      extra={<Tag>{saved ? '已保存' : '草稿'}</Tag>}
+      tabs={{
+        activeKey,
+        onChange: setActiveKey,
+        items: [
+          {
+            key: 'settings',
+            label: '基本信息',
+            children: (
+              <Form
+                id={formId}
+                layout="vertical"
+                onChange={() => setSaved(false)}
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  setSaved(true);
+                }}
+              >
+                <FormField label="项目名称">
+                  <Input name="name" defaultValue="Leaf 设计系统" required />
+                </FormField>
+                <FormField label="联系邮箱">
+                  <Input name="email" type="email" defaultValue="team@example.com" required />
+                </FormField>
+              </Form>
+            ),
+          },
+          {
+            key: 'members',
+            label: '团队成员',
+            children: (
+              <Descriptions
+                columns={1}
+                items={[
+                  { key: 'owner', label: '项目负责人', children: '林若' },
+                  { key: 'designer', label: '设计师', children: '陈安' },
+                ]}
+              />
+            ),
+          },
+          { key: 'billing', label: '账单', disabled: true, children: null },
+        ],
+      }}
+      footer={
+        <Flex align="center" gap="sm" justify="end">
+          <Button type="submit" form={formId} disabled={activeKey !== 'settings'}>
+            保存修改
+          </Button>
+        </Flex>
+      }
+    />
+  );
+}
diff --git a/apps/docs/src/examples/card/tabs.tsx b/apps/docs/src/examples/card/tabs.tsx
new file mode 100644
index 0000000..1f2a422
--- /dev/null
+++ b/apps/docs/src/examples/card/tabs.tsx
@@ -0,0 +1,35 @@
+import { Button, Card, Descriptions, Space } from '@ifhover/leaf-ui';
+
+export function CardTabs() {
+  return (
+    <Card
+      extra={<Button variant="link">查看项目</Button>}
+      tabs={{
+        'aria-label': '项目概览',
+        items: [
+          {
+            key: 'overview',
+            label: '概览',
+            children: (
+              <Space direction="vertical" align="stretch" size="md">
+                <span>让设计与开发围绕同一份计划协作。</span>
+                <Descriptions
+                  columns={2}
+                  items={[
+                    { key: 'owner', label: '负责人', children: '林若' },
+                    { key: 'members', label: '团队成员', children: '8 人' },
+                  ]}
+                />
+              </Space>
+            ),
+          },
+          {
+            key: 'activity',
+            label: '最近动态',
+            children: '今天更新了组件规范，并邀请两位成员加入项目。',
+          },
+        ],
+      }}
+    />
+  );
+}
diff --git a/apps/docs/src/examples/cascader/basic.tsx b/apps/docs/src/examples/cascader/basic.tsx
index 1d840a7..d7ae82b 100644
--- a/apps/docs/src/examples/cascader/basic.tsx
+++ b/apps/docs/src/examples/cascader/basic.tsx
@@ -1,4 +1,4 @@
-import { Cascader, Space } from '@ifhover/leaf-ui';
+import { Cascader, Form, FormField } from '@ifhover/leaf-ui';
 
 const options = [
   {
@@ -22,19 +22,16 @@ const options = [
 
 export function CascaderBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">项目分类</span>
+    <Form layout="vertical">
+      <FormField label="项目分类">
         <Cascader aria-label="项目分类" options={options} placeholder="选择项目分类" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">默认分类</span>
+      </FormField>
+      <FormField label="默认分类">
         <Cascader aria-label="默认分类" options={options} defaultValue={['design', 'interface']} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用分类</span>
+      </FormField>
+      <FormField label="禁用分类">
         <Cascader aria-label="禁用分类" options={options} disabled />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/cascader/capabilities.tsx b/apps/docs/src/examples/cascader/capabilities.tsx
index 590ecea..21c4dec 100644
--- a/apps/docs/src/examples/cascader/capabilities.tsx
+++ b/apps/docs/src/examples/cascader/capabilities.tsx
@@ -1,4 +1,5 @@
-import { Button, Cascader, type CascaderOption, Space } from '@ifhover/leaf-ui';
+import type { CascaderOption } from '@ifhover/leaf-ui';
+import { Button, Cascader, Flex, Space, Text } from '@ifhover/leaf-ui';
 import { useCallback, useState } from 'react';
 
 const options = [
@@ -31,18 +32,16 @@ export function Capabilities({ english = false }) {
   }, []);
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>
           {english ? 'Search, multiple paths and intermediate levels' : '搜索、多选与选择中间层'}
-        </p>
+        </Text>
         <Cascader options={options} showSearch multiple changeOnSelect />
-      </div>
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
-          {english ? 'Lazy loading and explicit cache refresh' : '懒加载与刷新缓存'}
-        </p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Lazy loading and explicit cache refresh' : '懒加载与刷新缓存'}</Text>
         <Cascader options={lazy} loadData={load} cacheKey={version} allowClear />
-      </div>
+      </Flex>
       <Button variant="outline" onClick={() => setVersion(version + 1)}>
         {english ? 'Refresh data' : '刷新数据'}
       </Button>
diff --git a/apps/docs/src/examples/cascader/controlled.tsx b/apps/docs/src/examples/cascader/controlled.tsx
index f610c01..a797334 100644
--- a/apps/docs/src/examples/cascader/controlled.tsx
+++ b/apps/docs/src/examples/cascader/controlled.tsx
@@ -1,16 +1,15 @@
-import { Cascader, Space } from '@ifhover/leaf-ui';
+import { Cascader, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 import { regions } from './options';
 
 export function CascaderControlled() {
   const [value, setValue] = useState<string[]>(['zhejiang', 'hangzhou', 'xihu']);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">收货地区</span>
+    <Form layout="vertical">
+      <FormField label="收货地区">
         <Cascader aria-label="收货地区" options={regions} value={value} onChange={setValue} />
-      </div>
-      <span className="leaf-demo-note">选中路径：{value.join(' → ') || '未选择'}</span>
-    </Space>
+      </FormField>
+      <Text tone="muted">选中路径：{value.join(' → ') || '未选择'}</Text>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/cascader/single-line.tsx b/apps/docs/src/examples/cascader/single-line.tsx
new file mode 100644
index 0000000..1a627fb
--- /dev/null
+++ b/apps/docs/src/examples/cascader/single-line.tsx
@@ -0,0 +1,30 @@
+import { Cascader } from '@ifhover/leaf-ui';
+
+const options = [
+  {
+    value: 'product',
+    label: '产品团队',
+    children: [
+      { value: 'design', label: '产品体验设计' },
+      { value: 'web', label: '前端开发' },
+      { value: 'mobile', label: '移动端开发' },
+    ],
+  },
+];
+
+export function SingleLine() {
+  return (
+    <Cascader
+      aria-label="产品团队"
+      multiple
+      showSearch
+      tagWrap={false}
+      options={options}
+      defaultValue={[
+        ['product', 'design'],
+        ['product', 'web'],
+        ['product', 'mobile'],
+      ]}
+    />
+  );
+}
diff --git a/apps/docs/src/examples/checkbox/check-all.tsx b/apps/docs/src/examples/checkbox/check-all.tsx
index c383d7d..42a8f11 100644
--- a/apps/docs/src/examples/checkbox/check-all.tsx
+++ b/apps/docs/src/examples/checkbox/check-all.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, Space } from '@ifhover/leaf-ui';
+import { Checkbox, Flex, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const options = ['设计更新', '产品动态', '每周摘要'];
@@ -7,7 +7,7 @@ export function CheckboxCheckAll() {
   const [selected, setSelected] = useState<string[]>(['设计更新']);
   const allChecked = selected.length === options.length;
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Checkbox
         checked={allChecked}
         indeterminate={selected.length > 0 && !allChecked}
@@ -15,7 +15,7 @@ export function CheckboxCheckAll() {
       >
         订阅全部
       </Checkbox>
-      <Space wrap className="leaf-demo-row">
+      <Flex gap="md" align="center" wrap justify="center">
         {options.map((option) => (
           <Checkbox
             key={option}
@@ -31,8 +31,8 @@ export function CheckboxCheckAll() {
             {option}
           </Checkbox>
         ))}
-      </Space>
-      <span className="leaf-demo-note">已选择 {selected.length} 项</span>
+      </Flex>
+      <Text tone="muted">已选择 {selected.length} 项</Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/checkbox/surfaces.tsx b/apps/docs/src/examples/checkbox/surfaces.tsx
index c8fa051..f0a3064 100644
--- a/apps/docs/src/examples/checkbox/surfaces.tsx
+++ b/apps/docs/src/examples/checkbox/surfaces.tsx
@@ -4,7 +4,7 @@ import { HardDrive, Mail, MessageSquare } from 'lucide-react';
 export function CheckboxCards({ english = false }: { english?: boolean }) {
   const t = (zh: string, en: string) => (english ? en : zh);
   return (
-    <Space direction="vertical" align="stretch" style={{ width: '100%' }}>
+    <Space direction="vertical" align="stretch">
       <CheckboxGroup
         variant="card"
         legend={t('连接服务', 'Connected services')}
diff --git a/apps/docs/src/examples/collapse/basic.tsx b/apps/docs/src/examples/collapse/basic.tsx
index 4369c14..2929c2a 100644
--- a/apps/docs/src/examples/collapse/basic.tsx
+++ b/apps/docs/src/examples/collapse/basic.tsx
@@ -1,4 +1,5 @@
-import { Collapse, type CollapseItem, Input, Space } from '@ifhover/leaf-ui';
+import type { CollapseItem } from '@ifhover/leaf-ui';
+import { Collapse, Flex, Input, Space, Text } from '@ifhover/leaf-ui';
 
 const items: CollapseItem[] = [
   { key: 'about', label: '项目介绍', children: <p>Leaf Garden 的项目信息。</p> },
@@ -11,15 +12,15 @@ const items: CollapseItem[] = [
 ];
 export function CollapseBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">自由展开</span>
+    <Space direction="vertical" align="stretch">
+      <Flex direction="column" gap="sm">
+        <Text>自由展开</Text>
         <Collapse items={items} defaultActiveKey="about" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">手风琴 · 紧凑尺寸</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>手风琴 · 紧凑尺寸</Text>
         <Collapse items={items} accordion size="sm" />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/color-picker/basic.tsx b/apps/docs/src/examples/color-picker/basic.tsx
index c7b0961..a0f0193 100644
--- a/apps/docs/src/examples/color-picker/basic.tsx
+++ b/apps/docs/src/examples/color-picker/basic.tsx
@@ -1,13 +1,11 @@
-import { ColorPicker, Space } from '@ifhover/leaf-ui';
+import { ColorPicker, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function ColorPickerBasic() {
   const [color, setColor] = useState('#20834a');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="start">
       <ColorPicker value={color} onChange={setColor} showText aria-label="品牌颜色" />
-      <div className="leaf-demo-surface" style={{ borderColor: color, color }}>
-        你的品牌，你的颜色。
-      </div>
+      <Text tone="muted">当前颜色：{color}</Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/color-picker/capabilities.tsx b/apps/docs/src/examples/color-picker/capabilities.tsx
index 3c10bd7..9d42e8a 100644
--- a/apps/docs/src/examples/color-picker/capabilities.tsx
+++ b/apps/docs/src/examples/color-picker/capabilities.tsx
@@ -1,21 +1,21 @@
-import { ColorPicker, Space } from '@ifhover/leaf-ui';
+import { ColorPicker, Flex, Space, Text } from '@ifhover/leaf-ui';
 export function Capabilities({ english = false }) {
   return (
     <Space>
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>{english ? 'Solid color' : '纯色'}</p>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Solid color' : '纯色'}</Text>
         <ColorPicker showText />
-      </div>
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>
           {english ? 'Gradient: select, add or remove stops' : '渐变：选择、添加或移除色标'}
-        </p>
+        </Text>
         <ColorPicker
           mode="gradient"
           showText
           defaultValue="linear-gradient(90deg, #20834a 0%, #83cf9e 100%)"
         />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/color-picker/formats.tsx b/apps/docs/src/examples/color-picker/formats.tsx
index d685d5d..6f7e2d0 100644
--- a/apps/docs/src/examples/color-picker/formats.tsx
+++ b/apps/docs/src/examples/color-picker/formats.tsx
@@ -1,19 +1,19 @@
-import { ColorPicker, Space } from '@ifhover/leaf-ui';
+import { ColorPicker, Flex, Text } from '@ifhover/leaf-ui';
 export function ColorPickerFormats() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">HEX</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>HEX</Text>
         <ColorPicker defaultValue="#1677ff" showText />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">RGB · 半透明</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>RGB · 半透明</Text>
         <ColorPicker defaultValue="rgba(118, 84, 198, 0.6)" defaultFormat="rgb" showText />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">HSL · 不透明</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>HSL · 不透明</Text>
         <ColorPicker defaultValue="hsl(35, 91%, 55%)" defaultFormat="hsl" disableAlpha showText />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/color-picker/presets.tsx b/apps/docs/src/examples/color-picker/presets.tsx
index d504533..84134cb 100644
--- a/apps/docs/src/examples/color-picker/presets.tsx
+++ b/apps/docs/src/examples/color-picker/presets.tsx
@@ -1,4 +1,5 @@
-import { ColorPicker, type ColorPreset, Space } from '@ifhover/leaf-ui';
+import type { ColorPreset } from '@ifhover/leaf-ui';
+import { ColorPicker, Flex, Text } from '@ifhover/leaf-ui';
 
 const presets: readonly ColorPreset[] = [
   { label: '品牌颜色', colors: ['#20834a', '#1677ff', '#7654c6', '#f49b23'] },
@@ -6,15 +7,15 @@ const presets: readonly ColorPreset[] = [
 ];
 export function ColorPickerPresets() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">自定义预设 · 可清除</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>自定义预设 · 可清除</Text>
         <ColorPicker presets={presets} allowClear showText />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>禁用</Text>
         <ColorPicker disabled defaultValue="#1677ff" showText />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/config-provider/basic.tsx b/apps/docs/src/examples/config-provider/basic.tsx
index 092d2ff..1987dc5 100644
--- a/apps/docs/src/examples/config-provider/basic.tsx
+++ b/apps/docs/src/examples/config-provider/basic.tsx
@@ -1,50 +1,23 @@
-import {
-  Button,
-  ConfigProvider,
-  DatePicker,
-  Select,
-  Space,
-  Switch,
-  useConfirm,
-  useMessage,
-} from '@ifhover/leaf-ui';
-import { useState } from 'react';
+import { Button, ConfigProvider, Form, FormField, Input, Select } from '@ifhover/leaf-ui';
 
-function Region() {
-  const { message } = useMessage();
-  const { confirm } = useConfirm();
-  return (
-    <Space wrap className="leaf-demo-row">
-      <Select aria-label="选项" options={[]} />
-      <DatePicker aria-label="日期" />
-      <Button onClick={() => message.success('Success / 操作成功')}>Message</Button>
-      <Button
-        variant="outline"
-        onClick={() =>
-          confirm({ title: 'Continue / 是否继续', children: 'Please review / 请查看提示内容' })
-        }
-      >
-        Confirm
-      </Button>
-    </Space>
-  );
-}
 export function ConfigProviderBasic() {
-  const [english, setEnglish] = useState(true);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Switch checked={english} onChange={(event) => setEnglish(event.target.checked)}>
-        English
-      </Switch>
-      <ConfigProvider
-        locale={english ? 'en-US' : 'zh-CN'}
-        theme={{ primaryColor: '#7654c6', borderRadius: 4 }}
-      >
-        <Region />
-      </ConfigProvider>
-      <ConfigProvider theme={{ primaryColor: '#087f8c', borderRadius: 16 }}>
-        <Region />
-      </ConfigProvider>
-    </Space>
+    <ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 8 }}>
+      <Form onSubmit={(event) => event.preventDefault()}>
+        <FormField label="项目名称">
+          <Input defaultValue="Leaf UI" />
+        </FormField>
+        <FormField label="项目类型">
+          <Select
+            defaultValue="website"
+            options={[
+              { value: 'website', label: '网站' },
+              { value: 'app', label: '应用' },
+            ]}
+          />
+        </FormField>
+        <Button type="submit">保存设置</Button>
+      </Form>
+    </ConfigProvider>
   );
 }
diff --git a/apps/docs/src/examples/config-provider/defaults.tsx b/apps/docs/src/examples/config-provider/defaults.tsx
new file mode 100644
index 0000000..fd33712
--- /dev/null
+++ b/apps/docs/src/examples/config-provider/defaults.tsx
@@ -0,0 +1,39 @@
+import {
+  Button,
+  ConfigProvider,
+  DatePicker,
+  Form,
+  FormField,
+  Input,
+  Space,
+} from '@ifhover/leaf-ui';
+
+export function ConfigProviderDefaults() {
+  return (
+    <ConfigProvider
+      components={{
+        Button: { variant: 'outline' },
+        Input: { placeholder: '请输入项目名称', allowClear: true },
+        DatePicker: { placeholder: '选择项目开始日期', allowClear: true },
+      }}
+    >
+      <Form onSubmit={(event) => event.preventDefault()}>
+        <FormField label="项目名称">
+          <Input />
+        </FormField>
+        <FormField label="开始日期">
+          <DatePicker />
+        </FormField>
+        <FormField label="结束日期">
+          <DatePicker placeholder="实例覆盖：选择结束日期" />
+        </FormField>
+        <Space wrap>
+          <Button type="reset">重置</Button>
+          <Button type="submit" variant="solid">
+            保存（实例覆盖）
+          </Button>
+        </Space>
+      </Form>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/config-provider/density.tsx b/apps/docs/src/examples/config-provider/density.tsx
index 7eb9042..dec2e31 100644
--- a/apps/docs/src/examples/config-provider/density.tsx
+++ b/apps/docs/src/examples/config-provider/density.tsx
@@ -1,40 +1,41 @@
-import { Button, ConfigProvider, Form, FormField, Input, Select, Space } from '@ifhover/leaf-ui';
-import { useDocsLocale } from '../../components/i18n';
+import {
+  Button,
+  ConfigProvider,
+  Form,
+  FormField,
+  Input,
+  Select,
+  Space,
+  Text,
+} from '@ifhover/leaf-ui';
 
 export function ConfigProviderDensity() {
-  const { t } = useDocsLocale();
   return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))',
-        gap: 24,
-      }}
-    >
+    <Space direction="vertical" align="stretch" size="lg">
       {(['comfortable', 'compact'] as const).map((density) => (
         <ConfigProvider key={density} density={density}>
-          <h3>{density === 'compact' ? t('紧凑', 'Compact') : t('舒适', 'Comfortable')}</h3>
-          <Form onSubmit={(event) => event.preventDefault()}>
-            <FormField label={t('项目名称', 'Project name')}>
-              <Input aria-label={t('项目名称', 'Project name')} defaultValue="Leaf workspace" />
-            </FormField>
-            <FormField label={t('负责人', 'Owner')}>
-              <Select
-                aria-label={t('负责人', 'Owner')}
-                options={[
-                  { value: 'lin', label: 'Lin' },
-                  { value: 'alex', label: 'Alex' },
-                ]}
-                defaultValue="lin"
-              />
-            </FormField>
-            <Space>
-              <Button>{t('保存', 'Save')}</Button>
-              <Button variant="outline">{t('取消', 'Cancel')}</Button>
-            </Space>
-          </Form>
+          <Space direction="vertical" align="stretch">
+            <Text tone="muted">{density === 'compact' ? '紧凑' : '舒适'}</Text>
+            <Form>
+              <FormField label="项目名称">
+                <Input defaultValue="Leaf UI" />
+              </FormField>
+              <FormField label="负责人">
+                <Select
+                  options={[
+                    { value: 'lin', label: 'Lin' },
+                    { value: 'alex', label: 'Alex' },
+                  ]}
+                  defaultValue="lin"
+                />
+              </FormField>
+              <Button type="reset" variant="outline">
+                重置
+              </Button>
+            </Form>
+          </Space>
         </ConfigProvider>
       ))}
-    </div>
+    </Space>
   );
 }
diff --git a/apps/docs/src/examples/config-provider/inheritance.tsx b/apps/docs/src/examples/config-provider/inheritance.tsx
new file mode 100644
index 0000000..6269d61
--- /dev/null
+++ b/apps/docs/src/examples/config-provider/inheritance.tsx
@@ -0,0 +1,28 @@
+import { Button, ConfigProvider, Flex, Space, Text } from '@ifhover/leaf-ui';
+
+export function ConfigProviderInheritance() {
+  return (
+    <ConfigProvider components={{ Button: { variant: 'outline', size: 'sm' } }}>
+      <Space direction="vertical" align="stretch">
+        <Flex justify="space-between" align="center" gap="md">
+          <Text tone="muted">外层配置</Text>
+          <Button>小尺寸 · 边框</Button>
+        </Flex>
+        <ConfigProvider components={{ Button: { size: 'lg' } }}>
+          <Space direction="vertical" align="stretch">
+            <Flex justify="space-between" align="center" gap="md">
+              <Text tone="muted">内层覆盖尺寸</Text>
+              <Button>大尺寸 · 继承边框</Button>
+            </Flex>
+            <Flex justify="space-between" align="center" gap="md">
+              <Text tone="muted">实例覆盖参数</Text>
+              <Button size="md" variant="solid">
+                默认尺寸 · 主要
+              </Button>
+            </Flex>
+          </Space>
+        </ConfigProvider>
+      </Space>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/config-provider/locale.tsx b/apps/docs/src/examples/config-provider/locale.tsx
new file mode 100644
index 0000000..c560a2f
--- /dev/null
+++ b/apps/docs/src/examples/config-provider/locale.tsx
@@ -0,0 +1,32 @@
+import { ConfigProvider, DatePicker, Form, FormField, Select, Space } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function ConfigProviderLocale() {
+  const [locale, setLocale] = useState('zh-CN');
+  return (
+    <Space direction="vertical" align="stretch">
+      <Select
+        aria-label="组件语言"
+        value={locale}
+        onChange={setLocale}
+        options={[
+          { value: 'zh-CN', label: '简体中文' },
+          { value: 'zh-TW', label: '繁體中文' },
+          { value: 'en-US', label: 'English' },
+          { value: 'ja-JP', label: '日本語' },
+          { value: 'ko-KR', label: '한국어' },
+        ]}
+      />
+      <ConfigProvider locale={locale}>
+        <Form>
+          <FormField label="日期">
+            <DatePicker />
+          </FormField>
+          <FormField label="空选项">
+            <Select options={[]} />
+          </FormField>
+        </Form>
+      </ConfigProvider>
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/config-provider/modal-defaults.tsx b/apps/docs/src/examples/config-provider/modal-defaults.tsx
new file mode 100644
index 0000000..6892b74
--- /dev/null
+++ b/apps/docs/src/examples/config-provider/modal-defaults.tsx
@@ -0,0 +1,17 @@
+import { Button, ConfigProvider, Modal, Paragraph } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function ConfigProviderModalDefaults() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ConfigProvider components={{ Modal: { maskClosable: false } }}>
+      <Button onClick={() => setOpen(true)}>打开弹窗</Button>
+      <Modal open={open} title="点击遮罩不会关闭" onClose={() => setOpen(false)}>
+        <Paragraph>
+          试着点击弹窗外的遮罩，弹窗会保持打开。仍可通过关闭按钮、底部操作或 Esc 关闭。
+        </Paragraph>
+      </Modal>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/config-provider/reset.tsx b/apps/docs/src/examples/config-provider/reset.tsx
new file mode 100644
index 0000000..0d6320d
--- /dev/null
+++ b/apps/docs/src/examples/config-provider/reset.tsx
@@ -0,0 +1,26 @@
+import {
+  ConfigProvider,
+  Form,
+  FormField,
+  Input,
+  type LeafComponentDefaults,
+} from '@ifhover/leaf-ui';
+
+const defaults = { Input: { readOnly: true } } satisfies LeafComponentDefaults;
+
+export function ConfigProviderReset() {
+  return (
+    <ConfigProvider components={defaults}>
+      <Form>
+        <FormField label="继承默认参数">
+          <Input defaultValue="此输入框为只读" />
+        </FormField>
+        <ConfigProvider components={{ Input: null }}>
+          <FormField label="清除当前区域的默认参数">
+            <Input defaultValue="试试修改这里的内容" />
+          </FormField>
+        </ConfigProvider>
+      </Form>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/config-provider/sizes.tsx b/apps/docs/src/examples/config-provider/sizes.tsx
index 1da6ad7..96f1832 100644
--- a/apps/docs/src/examples/config-provider/sizes.tsx
+++ b/apps/docs/src/examples/config-provider/sizes.tsx
@@ -1,39 +1,32 @@
-import { Button, ConfigProvider, Input, Slider, Space } from '@ifhover/leaf-ui';
+import { Button, ConfigProvider, Form, FormField, Slider, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function ConfigProviderSizes() {
-  const [height, setHeight] = useState(34);
+  const [height, setHeight] = useState(36);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <p>基础高度：{height}px</p>
-        <Slider
-          aria-label="基础控件高度"
-          min={28}
-          max={44}
-          value={height}
-          onChange={setHeight}
-          showValue={false}
-        />
-      </div>
-      <ConfigProvider
-        className="leaf-demo-stack"
-        theme={{ controlHeight: height, borderRadius: 8 }}
-      >
-        {(['sm', 'md', 'lg'] as const).map((size) => (
-          <div key={size} className="leaf-demo-control-row">
-            <span className="leaf-demo-size">{size}</span>
-            <Input size={size} aria-label={`${size} 主题输入框`} placeholder="项目名称" />
-            <Button size={size}>保存</Button>
-          </div>
-        ))}
-      </ConfigProvider>
-      <ConfigProvider
-        theme={{ controlHeight: height, tokens: { controlHeightSm: 26, borderRadiusLg: 20 } }}
-      >
-        <Button size="sm" variant="outline">
-          高级覆盖：小尺寸固定为 26px
-        </Button>
+    <Space direction="vertical" align="stretch" size="lg">
+      <Form>
+        <FormField label={`基础高度：${height}px`}>
+          <Slider min={28} max={44} value={height} onChange={setHeight} showValue={false} />
+        </FormField>
+      </Form>
+      <ConfigProvider theme={{ controlHeight: height }}>
+        <Space wrap align="end" size="lg">
+          {(
+            [
+              ['sm', '小尺寸'],
+              ['md', '默认尺寸'],
+              ['lg', '大尺寸'],
+            ] as const
+          ).map(([size, label]) => (
+            <Space key={size} direction="vertical" size="sm">
+              <Text tone="muted">{label}</Text>
+              <Button size={size} variant="outline">
+                按钮
+              </Button>
+            </Space>
+          ))}
+        </Space>
       </ConfigProvider>
     </Space>
   );
diff --git a/apps/docs/src/examples/config-provider/translations.tsx b/apps/docs/src/examples/config-provider/translations.tsx
new file mode 100644
index 0000000..39003b3
--- /dev/null
+++ b/apps/docs/src/examples/config-provider/translations.tsx
@@ -0,0 +1,50 @@
+import {
+  Button,
+  ConfigProvider,
+  DatePicker,
+  Form,
+  FormField,
+  Pagination,
+  Select,
+  Space,
+  useConfirm,
+} from '@ifhover/leaf-ui';
+import mars from './zh-CN-x-mars.json';
+
+const translations = { 'zh-CN-x-mars': mars };
+
+function Controls() {
+  const { confirm } = useConfirm();
+  return (
+    <Space direction="vertical" align="stretch">
+      <Form>
+        <FormField label="日期">
+          <DatePicker />
+        </FormField>
+        <FormField label="空选项">
+          <Select options={[]} />
+        </FormField>
+      </Form>
+      <Pagination total={24} showTotal />
+      <Button
+        variant="outline"
+        onClick={() =>
+          void confirm({
+            title: '继续操作？',
+            children: '确认与取消按钮使用火星文，未翻译的文本回退英文。',
+          })
+        }
+      >
+        打开确认框
+      </Button>
+    </Space>
+  );
+}
+
+export function ConfigProviderTranslations() {
+  return (
+    <ConfigProvider locale={['zh-CN-x-mars', 'en-US']} translations={translations}>
+      <Controls />
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/config-provider/zh-CN-x-mars.json b/apps/docs/src/examples/config-provider/zh-CN-x-mars.json
new file mode 100644
index 0000000..e03876c
--- /dev/null
+++ b/apps/docs/src/examples/config-provider/zh-CN-x-mars.json
@@ -0,0 +1,16 @@
+{
+  "common": {
+    "confirm": "確萣",
+    "cancel": "筭ㄋ"
+  },
+  "select": {
+    "placeholder": "挑①個唄",
+    "empty": "暫蒔木洧選項"
+  },
+  "datePicker": {
+    "placeholder": "選個ㄖ剘"
+  },
+  "pagination": {
+    "total": "共 {total} 條數據"
+  }
+}
diff --git a/apps/docs/src/examples/date-picker/basic.tsx b/apps/docs/src/examples/date-picker/basic.tsx
index fe508f1..b6aa464 100644
--- a/apps/docs/src/examples/date-picker/basic.tsx
+++ b/apps/docs/src/examples/date-picker/basic.tsx
@@ -1,20 +1,17 @@
-import { DatePicker, Space } from '@ifhover/leaf-ui';
+import { DatePicker, Form, FormField } from '@ifhover/leaf-ui';
 
 export function DatePickerBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">选择日期</span>
+    <Form layout="vertical">
+      <FormField label="选择日期">
         <DatePicker aria-label="选择日期" placeholder="选择一个好日子" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">默认日期</span>
+      </FormField>
+      <FormField label="默认日期">
         <DatePicker aria-label="默认日期" defaultValue={new Date(2026, 9, 15)} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用日期</span>
+      </FormField>
+      <FormField label="禁用日期">
         <DatePicker aria-label="禁用日期" defaultValue={new Date(2026, 9, 15)} disabled />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/date-picker/capabilities.tsx b/apps/docs/src/examples/date-picker/capabilities.tsx
index 6809e2e..e97beae 100644
--- a/apps/docs/src/examples/date-picker/capabilities.tsx
+++ b/apps/docs/src/examples/date-picker/capabilities.tsx
@@ -1,23 +1,21 @@
-import { DatePicker, Space } from '@ifhover/leaf-ui';
+import { DatePicker, Flex, Space, Text } from '@ifhover/leaf-ui';
 export function Capabilities({ english = false }) {
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>
           {english ? 'Custom display and weekday restrictions' : '自定义显示格式与工作日限制'}
-        </p>
+        </Text>
         <DatePicker
           format="DD/MM/YYYY"
           disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
           presets={[{ label: english ? 'Today' : '今天', value: () => new Date() }]}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
-          {english ? 'Select up to three dates' : '选择最多三个日期'}
-        </p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Select up to three dates' : '选择最多三个日期'}</Text>
         <DatePicker multiple maxCount={3} format="MM/DD" />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/date-picker/controlled.tsx b/apps/docs/src/examples/date-picker/controlled.tsx
index a3dbd8a..8252504 100644
--- a/apps/docs/src/examples/date-picker/controlled.tsx
+++ b/apps/docs/src/examples/date-picker/controlled.tsx
@@ -1,13 +1,12 @@
-import { DatePicker, Space } from '@ifhover/leaf-ui';
+import { DatePicker, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function DatePickerControlled() {
   const [date, setDate] = useState<Date | null>(new Date(2026, 9, 15));
   const [dateString, setDateString] = useState('2026-10-15');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">十月的日期</span>
+    <Form layout="vertical">
+      <FormField label="十月的日期">
         <DatePicker
           aria-label="十月的日期"
           value={date}
@@ -18,12 +17,11 @@ export function DatePickerControlled() {
             setDateString(text);
           }}
         />
-      </div>
-      <span className="leaf-demo-note">可选 10 月 5–25 日，当前值：{dateString || '未选择'}</span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">必填日期 · 错误</span>
+      </FormField>
+      <Text tone="muted">可选 10 月 5–25 日，当前值：{dateString || '未选择'}</Text>
+      <FormField label="必填日期 · 错误">
         <DatePicker aria-label="必填日期" status="error" required placeholder="请设置截止日期" />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/date-picker/footer.tsx b/apps/docs/src/examples/date-picker/footer.tsx
index 036fe3c..eb4ed7c 100644
--- a/apps/docs/src/examples/date-picker/footer.tsx
+++ b/apps/docs/src/examples/date-picker/footer.tsx
@@ -1,4 +1,4 @@
-import { Button, DatePicker } from '@ifhover/leaf-ui';
+import { Button, DatePicker, Flex, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function DatePickerFooter() {
   const [value, setValue] = useState<Date | null>(null);
@@ -9,8 +9,8 @@ export function DatePickerFooter() {
     setValue(next);
   };
   return (
-    <div className="leaf-demo-case">
-      <span className="leaf-demo-label">自定义快捷日期</span>
+    <Flex direction="column" gap="sm" align="start">
+      <Text>自定义快捷日期</Text>
       <DatePicker
         aria-label="自定义快捷日期"
         value={value}
@@ -22,6 +22,6 @@ export function DatePickerFooter() {
           </Button>
         }
       />
-    </div>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/date-range-picker/basic.tsx b/apps/docs/src/examples/date-range-picker/basic.tsx
index fc6c76a..d07635e 100644
--- a/apps/docs/src/examples/date-range-picker/basic.tsx
+++ b/apps/docs/src/examples/date-range-picker/basic.tsx
@@ -1,18 +1,19 @@
-import { type DateRange, DateRangePicker, Space } from '@ifhover/leaf-ui';
+import { type DateRange, DateRangePicker, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function DateRangePickerBasic() {
   const [range, setRange] = useState<DateRange | null>(null);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">日期区间</span>
+    <Form layout="vertical">
+      <FormField label="日期区间">
         <DateRangePicker aria-label="日期区间" value={range} onChange={setRange} />
-      </div>
+      </FormField>
       {range && (
-        <output className="leaf-demo-note">
-          {range[0].toLocaleDateString()} – {range[1].toLocaleDateString()}
+        <output>
+          <Text tone="muted">
+            {range[0].toLocaleDateString()} – {range[1].toLocaleDateString()}
+          </Text>
         </output>
       )}
-    </Space>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/date-range-picker/capabilities.tsx b/apps/docs/src/examples/date-range-picker/capabilities.tsx
index c0297e4..c05f18f 100644
--- a/apps/docs/src/examples/date-range-picker/capabilities.tsx
+++ b/apps/docs/src/examples/date-range-picker/capabilities.tsx
@@ -1,12 +1,12 @@
-import { DateRangePicker, Space } from '@ifhover/leaf-ui';
+import { DateRangePicker, Flex, Space, Text } from '@ifhover/leaf-ui';
 export function Capabilities({ english = false }) {
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>{english ? 'Quarter range' : '季度区间'}</p>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Quarter range' : '季度区间'}</Text>
         <DateRangePicker picker="quarter" format="YYYY-[Q]Q" />
-      </div>
-      <div className="leaf-demo-case">
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
         {english
           ? 'Allow an open end, or use a recent-seven-day preset'
           : '允许结束为空，或选择最近七天'}
@@ -25,7 +25,7 @@ export function Capabilities({ english = false }) {
             },
           ]}
         />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/date-range-picker/modes.tsx b/apps/docs/src/examples/date-range-picker/modes.tsx
index ea3396a..9607b3f 100644
--- a/apps/docs/src/examples/date-range-picker/modes.tsx
+++ b/apps/docs/src/examples/date-range-picker/modes.tsx
@@ -1,28 +1,24 @@
-import { DateRangePicker, Space } from '@ifhover/leaf-ui';
+import { DateRangePicker, Form, FormField } from '@ifhover/leaf-ui';
 export function DateRangePickerModes() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">年份区间</span>
+    <Form layout="vertical">
+      <FormField label="年份区间">
         <DateRangePicker aria-label="年份区间" picker="year" placeholder="年份区间" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">月份区间</span>
+      </FormField>
+      <FormField label="月份区间">
         <DateRangePicker aria-label="月份区间" picker="month" placeholder="月份区间" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">周区间</span>
+      </FormField>
+      <FormField label="周区间">
         <DateRangePicker aria-label="周区间" picker="week" placeholder="周区间" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">日期时间区间</span>
+      </FormField>
+      <FormField label="日期时间区间">
         <DateRangePicker
           aria-label="日期时间区间"
           picker="datetime"
           placeholder="日期时间区间"
           use12Hours
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/date-time-picker/basic.tsx b/apps/docs/src/examples/date-time-picker/basic.tsx
index f00dac5..db8825e 100644
--- a/apps/docs/src/examples/date-time-picker/basic.tsx
+++ b/apps/docs/src/examples/date-time-picker/basic.tsx
@@ -1,24 +1,21 @@
-import { DateTimePicker, Space } from '@ifhover/leaf-ui';
+import { DateTimePicker, Form, FormField } from '@ifhover/leaf-ui';
 export function DateTimePickerBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">预约时间</span>
+    <Form layout="vertical">
+      <FormField label="预约时间">
         <DateTimePicker aria-label="预约时间" defaultValue={new Date(2026, 9, 3, 14, 30)} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">12小时预约时间</span>
+      </FormField>
+      <FormField label="12小时预约时间">
         <DateTimePicker aria-label="12小时预约时间" use12Hours minuteStep={15} secondStep={10} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">限定时间</span>
+      </FormField>
+      <FormField label="限定时间">
         <DateTimePicker
           aria-label="限定时间"
           minDate={new Date(2026, 9, 1)}
           maxDate={new Date(2026, 9, 31, 23, 59, 59)}
           placeholder="选择十月的时间"
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/date-time-picker/capabilities.tsx b/apps/docs/src/examples/date-time-picker/capabilities.tsx
index f936eee..a914494 100644
--- a/apps/docs/src/examples/date-time-picker/capabilities.tsx
+++ b/apps/docs/src/examples/date-time-picker/capabilities.tsx
@@ -1,10 +1,10 @@
-import { DateTimePicker, Space } from '@ifhover/leaf-ui';
+import { DateTimePicker, Space, Text } from '@ifhover/leaf-ui';
 export function Capabilities({ english = false }) {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <p style={{ margin: '0 0 8px' }}>
+    <Space direction="vertical" align="stretch">
+      <Text>
         {english ? 'Business hours, custom format and preset' : '营业时间、自定义格式与快捷预设'}
-      </p>
+      </Text>
       <DateTimePicker
         format="DD/MM/YYYY HH:mm"
         showSeconds={false}
diff --git a/apps/docs/src/examples/divider/basic.tsx b/apps/docs/src/examples/divider/basic.tsx
index 01ef8a6..b03054e 100644
--- a/apps/docs/src/examples/divider/basic.tsx
+++ b/apps/docs/src/examples/divider/basic.tsx
@@ -2,7 +2,7 @@ import { Divider, Space } from '@ifhover/leaf-ui';
 
 export function DividerBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <p>项目信息</p>
       <Divider>设置</Divider>
       <Divider align="start" dashed>
diff --git a/apps/docs/src/examples/drawer/basic.tsx b/apps/docs/src/examples/drawer/basic.tsx
index 2e03955..6a282a2 100644
--- a/apps/docs/src/examples/drawer/basic.tsx
+++ b/apps/docs/src/examples/drawer/basic.tsx
@@ -1,11 +1,11 @@
-import { Button, Drawer, Form, FormField, Input, Select, Space } from '@ifhover/leaf-ui';
+import { Button, Drawer, Flex, Form, FormField, Input, Select, Space } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function DrawerBasic() {
   const [placement, setPlacement] = useState<'left' | 'right' | 'top' | 'bottom'>('right');
   const [open, setOpen] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Space wrap className="leaf-demo-row">
+    <Space direction="vertical" align="stretch">
+      <Flex gap="md" align="center" wrap justify="center">
         {(['left', 'right', 'top', 'bottom'] as const).map((side) => (
           <Button
             key={side}
@@ -18,7 +18,7 @@ export function DrawerBasic() {
             {side}
           </Button>
         ))}
-      </Space>
+      </Flex>
       <Drawer
         open={open}
         placement={placement}
diff --git a/apps/docs/src/examples/dropdown/basic.tsx b/apps/docs/src/examples/dropdown/basic.tsx
index 31cbec1..c319248 100644
--- a/apps/docs/src/examples/dropdown/basic.tsx
+++ b/apps/docs/src/examples/dropdown/basic.tsx
@@ -1,4 +1,5 @@
-import { Button, Dropdown, type DropdownItem, useMessage } from '@ifhover/leaf-ui';
+import type { DropdownItem } from '@ifhover/leaf-ui';
+import { Button, Dropdown, useMessage } from '@ifhover/leaf-ui';
 import { ChevronDown, Copy, Pencil, Trash2 } from 'lucide-react';
 
 const items: DropdownItem[] = [
diff --git a/apps/docs/src/examples/en/alert/basic.tsx b/apps/docs/src/examples/en/alert/basic.tsx
index a2609cb..b48c0e0 100644
--- a/apps/docs/src/examples/en/alert/basic.tsx
+++ b/apps/docs/src/examples/en/alert/basic.tsx
@@ -1,7 +1,7 @@
 import { Alert, Space } from '@ifhover/leaf-ui';
 export function AlertBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Alert title="Project saved" type="success" />
       <Alert
         title="A new version is available"
diff --git a/apps/docs/src/examples/en/auto-complete/basic.tsx b/apps/docs/src/examples/en/auto-complete/basic.tsx
index 79588ac..0ae7220 100644
--- a/apps/docs/src/examples/en/auto-complete/basic.tsx
+++ b/apps/docs/src/examples/en/auto-complete/basic.tsx
@@ -1,4 +1,4 @@
-import { AutoComplete, Space } from '@ifhover/leaf-ui';
+import { AutoComplete, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const options = [
@@ -12,9 +12,8 @@ export function AutoCompleteBasic() {
   const [value, setValue] = useState('');
   const [selected, setSelected] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Project name</span>
+    <Form layout="vertical">
+      <FormField label="Project name">
         <AutoComplete
           aria-label="Project name"
           placeholder="Type Leaf or enter any text"
@@ -23,19 +22,18 @@ export function AutoCompleteBasic() {
           onChange={setValue}
           onSelect={setSelected}
         />
-      </div>
-      <span className="leaf-demo-note">
+      </FormField>
+      <Text tone="muted">
         Input:{value || 'Empty'} · Last selection:{selected || 'None'}
-      </span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled suggestions</span>
+      </Text>
+      <FormField label="Disabled suggestions">
         <AutoComplete
           aria-label="Disabled suggestions"
           options={options}
           disabled
           defaultValue="Leaf Garden"
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/auto-complete/search.tsx b/apps/docs/src/examples/en/auto-complete/search.tsx
index 81c3ebf..d0a7d88 100644
--- a/apps/docs/src/examples/en/auto-complete/search.tsx
+++ b/apps/docs/src/examples/en/auto-complete/search.tsx
@@ -1,12 +1,11 @@
-import { AutoComplete, type AutoCompleteOption, Space } from '@ifhover/leaf-ui';
+import { AutoComplete, type AutoCompleteOption, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function AutoCompleteSearch() {
   const [options, setOptions] = useState<AutoCompleteOption[]>([]);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Email address</span>
+    <Form layout="vertical">
+      <FormField label="Email address">
         <AutoComplete
           aria-label="Email address"
           placeholder="Enter the first part of an email"
@@ -23,10 +22,10 @@ export function AutoCompleteSearch() {
             );
           }}
         />
-      </div>
-      <span className="leaf-demo-note">
+      </FormField>
+      <Text tone="muted">
         Suggestions are generated as you type. You can also enter a complete address.
-      </span>
-    </Space>
+      </Text>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/avatar/basic.tsx b/apps/docs/src/examples/en/avatar/basic.tsx
index bd089d7..f7c1445 100644
--- a/apps/docs/src/examples/en/avatar/basic.tsx
+++ b/apps/docs/src/examples/en/avatar/basic.tsx
@@ -1,27 +1,27 @@
-import { Avatar, Badge, Space } from '@ifhover/leaf-ui';
+import { Avatar, Badge, Flex, Text } from '@ifhover/leaf-ui';
 export function AvatarBasic() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Small</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Small</Text>
         <Avatar size="sm">LF</Avatar>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Medium</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Medium</Text>
         <Avatar>LE</Avatar>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Large · Square</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Large · Square</Text>
         <Avatar size="lg" shape="square">
           UI
         </Avatar>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Unread indicator</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Unread indicator</Text>
         <Badge dot>
           <Avatar alt="Unread messages">A</Avatar>
         </Badge>
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/avatar/fallback.tsx b/apps/docs/src/examples/en/avatar/fallback.tsx
index 40e47e4..2055bc2 100644
--- a/apps/docs/src/examples/en/avatar/fallback.tsx
+++ b/apps/docs/src/examples/en/avatar/fallback.tsx
@@ -1,17 +1,17 @@
-import { Avatar, Space } from '@ifhover/leaf-ui';
+import { Avatar, Flex, Text } from '@ifhover/leaf-ui';
 export function AvatarFallback() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Text fallback</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Text fallback</Text>
         <Avatar src="data:image/png;base64,broken" alt="Failed image">
           LF
         </Avatar>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Default icon</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Default icon</Text>
         <Avatar alt="Guest" />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/avatar/image.tsx b/apps/docs/src/examples/en/avatar/image.tsx
index 360de31..48eab85 100644
--- a/apps/docs/src/examples/en/avatar/image.tsx
+++ b/apps/docs/src/examples/en/avatar/image.tsx
@@ -1,16 +1,16 @@
-import { Avatar, Space } from '@ifhover/leaf-ui';
+import { Avatar, Flex, Text } from '@ifhover/leaf-ui';
 export function AvatarImage() {
   const image = '../../avatar-portrait.svg';
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Circle image</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Circle image</Text>
         <Avatar src={image} alt="Alex" size="lg" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Square image</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Square image</Text>
         <Avatar src={image} alt="Alex" size={64} shape="square" imageProps={{ loading: 'lazy' }} />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/badge/basic.tsx b/apps/docs/src/examples/en/badge/basic.tsx
index bb9a7f9..7ee6d38 100644
--- a/apps/docs/src/examples/en/badge/basic.tsx
+++ b/apps/docs/src/examples/en/badge/basic.tsx
@@ -1,4 +1,4 @@
-import { Badge, Button, Space } from '@ifhover/leaf-ui';
+import { Badge, Button, Flex, Space, Text } from '@ifhover/leaf-ui';
 import { Bell, Mail } from 'lucide-react';
 
 export function BadgeBasic() {
@@ -12,18 +12,18 @@ export function BadgeBasic() {
 export function BadgeCounts() {
   return (
     <Space wrap size={32}>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Count limit</span>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Count limit</Text>
         <Badge count={120}>
           <Button variant="outline" startIcon={<Bell />} aria-label="Notifications" />
         </Badge>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Show zero</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Show zero</Text>
         <Badge count={0} showZero>
           <Button variant="outline" startIcon={<Bell />} aria-label="Notifications" />
         </Badge>
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/breadcrumb/basic.tsx b/apps/docs/src/examples/en/breadcrumb/basic.tsx
index 24068bb..f35672f 100644
--- a/apps/docs/src/examples/en/breadcrumb/basic.tsx
+++ b/apps/docs/src/examples/en/breadcrumb/basic.tsx
@@ -1,4 +1,5 @@
-import { Breadcrumb, type BreadcrumbItem, Space } from '@ifhover/leaf-ui';
+import type { BreadcrumbItem } from '@ifhover/leaf-ui';
+import { Breadcrumb, Space } from '@ifhover/leaf-ui';
 import { House } from 'lucide-react';
 
 const items: readonly BreadcrumbItem[] = [
@@ -8,7 +9,7 @@ const items: readonly BreadcrumbItem[] = [
 ];
 export function BreadcrumbBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Breadcrumb items={items} />
       <Breadcrumb items={items} separator="/" />
     </Space>
diff --git a/apps/docs/src/examples/en/button/extensions.tsx b/apps/docs/src/examples/en/button/extensions.tsx
index 35766d7..0af5c19 100644
--- a/apps/docs/src/examples/en/button/extensions.tsx
+++ b/apps/docs/src/examples/en/button/extensions.tsx
@@ -1,16 +1,16 @@
-import { Button, ButtonGroup, Space, SplitButton } from '@ifhover/leaf-ui';
+import { Button, ButtonGroup, Flex, Space, SplitButton, Text } from '@ifhover/leaf-ui';
 export function ExtensionDemo() {
   return (
     <Space direction="vertical" align="start">
-      <div className="leaf-demo-case">
-        <p>Button group</p>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>Button group</Text>
         <ButtonGroup>
           <Button variant="outline">Previous</Button>
           <Button variant="outline">Next</Button>
         </ButtonGroup>
-      </div>
-      <div className="leaf-demo-case">
-        <p>Split button</p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>Split button</Text>
         <SplitButton
           items={[
             { key: 'copy', label: 'Save a copy' },
@@ -19,7 +19,7 @@ export function ExtensionDemo() {
         >
           Save
         </SplitButton>
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/calendar/basic.tsx b/apps/docs/src/examples/en/calendar/basic.tsx
index 2caa464..d721847 100644
--- a/apps/docs/src/examples/en/calendar/basic.tsx
+++ b/apps/docs/src/examples/en/calendar/basic.tsx
@@ -1,4 +1,4 @@
-import { Calendar, Space } from '@ifhover/leaf-ui';
+import { Calendar, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const events: Record<number, { label: string; color: string }> = {
@@ -9,22 +9,19 @@ const events: Record<number, { label: string; color: string }> = {
 export function CalendarBasic() {
   const [value, setValue] = useState(new Date(2026, 9, 4));
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Calendar
         value={value}
         onChange={setValue}
         cellRender={(date) => {
           const event = date.getMonth() === 9 ? events[date.getDate()] : undefined;
-          return event ? (
-            <span className="leaf-demo-calendar-event" style={{ color: event.color }}>
-              <i />
-              {event.label}
-            </span>
-          ) : null;
+          return event ? <Text style={{ color: event.color }}>{event.label}</Text> : null;
         }}
       />
-      <output className="leaf-demo-note">
-        Selected date: {value.getFullYear()}-{value.getMonth() + 1}-{value.getDate()}
+      <output>
+        <Text tone="muted">
+          Selected date: {value.getFullYear()}-{value.getMonth() + 1}-{value.getDate()}
+        </Text>
       </output>
     </Space>
   );
diff --git a/apps/docs/src/examples/en/calendar/compact.tsx b/apps/docs/src/examples/en/calendar/compact.tsx
index 273c9fe..bcbdade 100644
--- a/apps/docs/src/examples/en/calendar/compact.tsx
+++ b/apps/docs/src/examples/en/calendar/compact.tsx
@@ -1,15 +1,13 @@
-import { Calendar, Space } from '@ifhover/leaf-ui';
+import { Calendar, Space, Text } from '@ifhover/leaf-ui';
 export function CalendarCompact() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Calendar
         fullscreen={false}
         defaultValue={new Date(2026, 9, 4)}
         disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
       />
-      <p className="leaf-demo-note">
-        Weekends are unavailable; an existing selection remains readable.
-      </p>
+      <Text tone="muted">Weekends are unavailable; an existing selection remains readable.</Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/card/basic.tsx b/apps/docs/src/examples/en/card/basic.tsx
index 9dc4929..d0cf0c3 100644
--- a/apps/docs/src/examples/en/card/basic.tsx
+++ b/apps/docs/src/examples/en/card/basic.tsx
@@ -1,53 +1,8 @@
-import { Avatar, Button, Card, Space, Tag } from '@ifhover/leaf-ui';
-import { ArrowUpRight, Leaf } from 'lucide-react';
-
+import { Card } from '@ifhover/leaf-ui';
 export function CardBasic() {
   return (
-    <Space
-      direction="vertical"
-      align="stretch"
-      className="leaf-demo-stack leaf-demo-stack--wide"
-      style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))', gap: 20 }}
-    >
-      <Card
-        title="Leaf Garden"
-        extra={<Tag color="success">In progress</Tag>}
-        hoverable
-        footer={
-          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 10 }}>
-            <Avatar size="sm">LF</Avatar>
-            <span style={{ color: 'var(--leaf-color-text-muted)', fontSize: 12 }}>Design team</span>
-            <Button
-              variant="ghost"
-              size="sm"
-              endIcon={<ArrowUpRight />}
-              style={{ marginInlineStart: 'auto' }}
-            >
-              View project
-            </Button>
-          </div>
-        }
-      >
-        <div
-          style={{
-            display: 'grid',
-            placeItems: 'center',
-            padding: 28,
-            borderRadius: 'var(--leaf-radius)',
-            color: 'var(--leaf-color-primary)',
-            background: 'var(--leaf-color-primary-surface-8)',
-          }}
-        >
-          <Leaf size={44} strokeWidth={1.3} aria-hidden="true" />
-        </div>
-        <p style={{ color: 'var(--leaf-color-text-muted)', marginBlockStart: 16 }}>
-          Organize projects and plans, and give every good idea room to grow.
-        </p>
-      </Card>
-      <Card title="Loading" loading />
-      <Card title="Compact card" size="sm" bordered={false} style={{ gridColumn: '1 / -1' }}>
-        For pages with dense content.
-      </Card>
-    </Space>
+    <Card title="Project overview">
+      Keep project details together so your team can work from the same plan.
+    </Card>
   );
 }
diff --git a/apps/docs/src/examples/en/card/sections.tsx b/apps/docs/src/examples/en/card/sections.tsx
new file mode 100644
index 0000000..eb2eb3b
--- /dev/null
+++ b/apps/docs/src/examples/en/card/sections.tsx
@@ -0,0 +1,26 @@
+import { Button, Card, Flex, Space, Tag } from '@ifhover/leaf-ui';
+export function CardSections() {
+  return (
+    <Space direction="vertical" align="stretch" size="lg">
+      <Card
+        title="Project overview"
+        description="Group content with spacing"
+        extra={<Tag>In progress</Tag>}
+      >
+        The heading, description and body form natural sections.
+      </Card>
+      <Card
+        divided
+        title="Content sections"
+        footer={
+          <Flex justify="end" gap="sm" wrap>
+            <Button variant="outline">Cancel</Button>
+            <Button>Confirm</Button>
+          </Flex>
+        }
+      >
+        Enable divided to separate the heading, body and footer actions.
+      </Card>
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/en/card/sizes.tsx b/apps/docs/src/examples/en/card/sizes.tsx
new file mode 100644
index 0000000..5cd6315
--- /dev/null
+++ b/apps/docs/src/examples/en/card/sizes.tsx
@@ -0,0 +1,23 @@
+import { Card, Space } from '@ifhover/leaf-ui';
+
+export function CardSizes() {
+  const items = [
+    {
+      key: 'overview',
+      label: 'Overview',
+      children: 'Keep project details, design and development working from the same plan.',
+    },
+    {
+      key: 'activity',
+      label: 'Activity',
+      children: 'Updated the component guidelines and invited two teammates today.',
+    },
+  ];
+  return (
+    <Space direction="vertical" align="stretch" size="lg">
+      <Card title="Small" size="sm" tabs={{ items }} />
+      <Card title="Default" tabs={{ items }} />
+      <Card title="Large" size="lg" tabs={{ items }} />
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/en/card/tabs-with-title.tsx b/apps/docs/src/examples/en/card/tabs-with-title.tsx
new file mode 100644
index 0000000..f6b713b
--- /dev/null
+++ b/apps/docs/src/examples/en/card/tabs-with-title.tsx
@@ -0,0 +1,65 @@
+import { Button, Card, Descriptions, Flex, Form, FormField, Input, Tag } from '@ifhover/leaf-ui';
+import { useId, useState } from 'react';
+
+export function CardTabsWithTitle() {
+  const [activeKey, setActiveKey] = useState('settings');
+  const [saved, setSaved] = useState(false);
+  const formId = useId();
+  return (
+    <Card
+      divided
+      title="Project settings"
+      description="Manage project details and team members."
+      extra={<Tag>{saved ? 'Saved' : 'Draft'}</Tag>}
+      tabs={{
+        activeKey,
+        onChange: setActiveKey,
+        items: [
+          {
+            key: 'settings',
+            label: 'Details',
+            children: (
+              <Form
+                id={formId}
+                layout="vertical"
+                onChange={() => setSaved(false)}
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  setSaved(true);
+                }}
+              >
+                <FormField label="Project name">
+                  <Input name="name" defaultValue="Leaf Design System" required />
+                </FormField>
+                <FormField label="Contact email">
+                  <Input name="email" type="email" defaultValue="team@example.com" required />
+                </FormField>
+              </Form>
+            ),
+          },
+          {
+            key: 'members',
+            label: 'Members',
+            children: (
+              <Descriptions
+                columns={1}
+                items={[
+                  { key: 'owner', label: 'Project lead', children: 'Rowan Lin' },
+                  { key: 'designer', label: 'Designer', children: 'Alex Chen' },
+                ]}
+              />
+            ),
+          },
+          { key: 'billing', label: 'Billing', disabled: true, children: null },
+        ],
+      }}
+      footer={
+        <Flex align="center" gap="sm" justify="end">
+          <Button type="submit" form={formId} disabled={activeKey !== 'settings'}>
+            Save changes
+          </Button>
+        </Flex>
+      }
+    />
+  );
+}
diff --git a/apps/docs/src/examples/en/card/tabs.tsx b/apps/docs/src/examples/en/card/tabs.tsx
new file mode 100644
index 0000000..36ca33c
--- /dev/null
+++ b/apps/docs/src/examples/en/card/tabs.tsx
@@ -0,0 +1,35 @@
+import { Button, Card, Descriptions, Space } from '@ifhover/leaf-ui';
+
+export function CardTabs() {
+  return (
+    <Card
+      extra={<Button variant="link">View project</Button>}
+      tabs={{
+        'aria-label': 'Project overview',
+        items: [
+          {
+            key: 'overview',
+            label: 'Overview',
+            children: (
+              <Space direction="vertical" align="stretch" size="md">
+                <span>Keep design and development working from the same plan.</span>
+                <Descriptions
+                  columns={2}
+                  items={[
+                    { key: 'owner', label: 'Owner', children: 'Rowan Lin' },
+                    { key: 'members', label: 'Team members', children: '8 people' },
+                  ]}
+                />
+              </Space>
+            ),
+          },
+          {
+            key: 'activity',
+            label: 'Activity',
+            children: 'Updated the component guidelines and invited two teammates today.',
+          },
+        ],
+      }}
+    />
+  );
+}
diff --git a/apps/docs/src/examples/en/cascader/basic.tsx b/apps/docs/src/examples/en/cascader/basic.tsx
index 0137233..5fbdf60 100644
--- a/apps/docs/src/examples/en/cascader/basic.tsx
+++ b/apps/docs/src/examples/en/cascader/basic.tsx
@@ -1,4 +1,4 @@
-import { Cascader, Space } from '@ifhover/leaf-ui';
+import { Cascader, Form, FormField } from '@ifhover/leaf-ui';
 
 const options = [
   {
@@ -22,23 +22,20 @@ const options = [
 
 export function CascaderBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Project category</span>
+    <Form layout="vertical">
+      <FormField label="Project category">
         <Cascader aria-label="Project category" options={options} placeholder="Choose a category" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Default category</span>
+      </FormField>
+      <FormField label="Default category">
         <Cascader
           aria-label="Default category"
           options={options}
           defaultValue={['design', 'interface']}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled category</span>
+      </FormField>
+      <FormField label="Disabled category">
         <Cascader aria-label="Disabled category" options={options} disabled />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/cascader/controlled.tsx b/apps/docs/src/examples/en/cascader/controlled.tsx
index eb4ca32..affed44 100644
--- a/apps/docs/src/examples/en/cascader/controlled.tsx
+++ b/apps/docs/src/examples/en/cascader/controlled.tsx
@@ -1,21 +1,20 @@
-import { Cascader, Space } from '@ifhover/leaf-ui';
+import { Cascader, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 import { regions } from './options';
 
 export function CascaderControlled() {
   const [value, setValue] = useState<string[]>(['zhejiang', 'hangzhou', 'xihu']);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Delivery region</span>
+    <Form layout="vertical">
+      <FormField label="Delivery region">
         <Cascader
           aria-label="Delivery region"
           options={regions}
           value={value}
           onChange={setValue}
         />
-      </div>
-      <span className="leaf-demo-note">Selected path:{value.join(' → ') || 'Not selected'}</span>
-    </Space>
+      </FormField>
+      <Text tone="muted">Selected path:{value.join(' → ') || 'Not selected'}</Text>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/cascader/single-line.tsx b/apps/docs/src/examples/en/cascader/single-line.tsx
new file mode 100644
index 0000000..26c1236
--- /dev/null
+++ b/apps/docs/src/examples/en/cascader/single-line.tsx
@@ -0,0 +1,30 @@
+import { Cascader } from '@ifhover/leaf-ui';
+
+const options = [
+  {
+    value: 'product',
+    label: 'Product',
+    children: [
+      { value: 'design', label: 'Experience design' },
+      { value: 'web', label: 'Web development' },
+      { value: 'mobile', label: 'Mobile development' },
+    ],
+  },
+];
+
+export function SingleLine() {
+  return (
+    <Cascader
+      aria-label="Product teams"
+      multiple
+      showSearch
+      tagWrap={false}
+      options={options}
+      defaultValue={[
+        ['product', 'design'],
+        ['product', 'web'],
+        ['product', 'mobile'],
+      ]}
+    />
+  );
+}
diff --git a/apps/docs/src/examples/en/checkbox/check-all.tsx b/apps/docs/src/examples/en/checkbox/check-all.tsx
index 220eaf9..a223e3b 100644
--- a/apps/docs/src/examples/en/checkbox/check-all.tsx
+++ b/apps/docs/src/examples/en/checkbox/check-all.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, Space } from '@ifhover/leaf-ui';
+import { Checkbox, Flex, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const options = ['Design updates', 'Product news', 'Weekly updates'];
@@ -7,7 +7,7 @@ export function CheckboxCheckAll() {
   const [selected, setSelected] = useState<string[]>(['Design updates']);
   const allChecked = selected.length === options.length;
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Checkbox
         checked={allChecked}
         indeterminate={selected.length > 0 && !allChecked}
@@ -15,7 +15,7 @@ export function CheckboxCheckAll() {
       >
         Subscribe to all
       </Checkbox>
-      <Space wrap className="leaf-demo-row">
+      <Flex gap="md" align="center" wrap justify="center">
         {options.map((option) => (
           <Checkbox
             key={option}
@@ -31,8 +31,8 @@ export function CheckboxCheckAll() {
             {option}
           </Checkbox>
         ))}
-      </Space>
-      <span className="leaf-demo-note">Selected {selected.length} items</span>
+      </Flex>
+      <Text tone="muted">Selected {selected.length} items</Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/collapse/basic.tsx b/apps/docs/src/examples/en/collapse/basic.tsx
index f769459..6bbfeec 100644
--- a/apps/docs/src/examples/en/collapse/basic.tsx
+++ b/apps/docs/src/examples/en/collapse/basic.tsx
@@ -1,4 +1,5 @@
-import { Collapse, type CollapseItem, Input, Space } from '@ifhover/leaf-ui';
+import type { CollapseItem } from '@ifhover/leaf-ui';
+import { Collapse, Flex, Input, Space, Text } from '@ifhover/leaf-ui';
 
 const items: CollapseItem[] = [
   { key: 'about', label: 'About the project', children: <p>About Leaf Garden.</p> },
@@ -6,25 +7,25 @@ const items: CollapseItem[] = [
     key: 'settings',
     label: 'Settings',
     children: (
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Project name</span>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Project name</Text>
         <Input aria-label="Project name" placeholder="Type a draft, then collapse to keep it" />
-      </div>
+      </Flex>
     ),
   },
   { key: 'archived', label: 'Archived', children: null, disabled: true },
 ];
 export function CollapseBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Expand freely</span>
+    <Space direction="vertical" align="stretch">
+      <Flex direction="column" gap="sm">
+        <Text>Expand freely</Text>
         <Collapse items={items} defaultActiveKey="about" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Accordion · Compact</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>Accordion · Compact</Text>
         <Collapse items={items} accordion size="sm" />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/color-picker/basic.tsx b/apps/docs/src/examples/en/color-picker/basic.tsx
index 62440eb..d3e35a0 100644
--- a/apps/docs/src/examples/en/color-picker/basic.tsx
+++ b/apps/docs/src/examples/en/color-picker/basic.tsx
@@ -1,13 +1,11 @@
-import { ColorPicker, Space } from '@ifhover/leaf-ui';
+import { ColorPicker, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function ColorPickerBasic() {
   const [color, setColor] = useState('#20834a');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="start">
       <ColorPicker value={color} onChange={setColor} showText aria-label="Brand color" />
-      <div className="leaf-demo-surface" style={{ borderColor: color, color }}>
-        Your brand, your color.
-      </div>
+      <Text tone="muted">Current color：{color}</Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/color-picker/formats.tsx b/apps/docs/src/examples/en/color-picker/formats.tsx
index e4fe91f..c635460 100644
--- a/apps/docs/src/examples/en/color-picker/formats.tsx
+++ b/apps/docs/src/examples/en/color-picker/formats.tsx
@@ -1,19 +1,19 @@
-import { ColorPicker, Space } from '@ifhover/leaf-ui';
+import { ColorPicker, Flex, Text } from '@ifhover/leaf-ui';
 export function ColorPickerFormats() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">HEX</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>HEX</Text>
         <ColorPicker defaultValue="#1677ff" showText />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">RGB · Transparent</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>RGB · Transparent</Text>
         <ColorPicker defaultValue="rgba(118, 84, 198, 0.6)" defaultFormat="rgb" showText />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">HSL · Opaque</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>HSL · Opaque</Text>
         <ColorPicker defaultValue="hsl(35, 91%, 55%)" defaultFormat="hsl" disableAlpha showText />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/color-picker/presets.tsx b/apps/docs/src/examples/en/color-picker/presets.tsx
index f4eaa55..4f78cdf 100644
--- a/apps/docs/src/examples/en/color-picker/presets.tsx
+++ b/apps/docs/src/examples/en/color-picker/presets.tsx
@@ -1,4 +1,5 @@
-import { ColorPicker, type ColorPreset, Space } from '@ifhover/leaf-ui';
+import type { ColorPreset } from '@ifhover/leaf-ui';
+import { ColorPicker, Flex, Text } from '@ifhover/leaf-ui';
 
 const presets: readonly ColorPreset[] = [
   { label: 'Brand colors', colors: ['#20834a', '#1677ff', '#7654c6', '#f49b23'] },
@@ -6,15 +7,15 @@ const presets: readonly ColorPreset[] = [
 ];
 export function ColorPickerPresets() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Custom presets · Clearable</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Custom presets · Clearable</Text>
         <ColorPicker presets={presets} allowClear showText />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Disabled</Text>
         <ColorPicker disabled defaultValue="#1677ff" showText />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/config-provider/basic.tsx b/apps/docs/src/examples/en/config-provider/basic.tsx
index edc0dab..f7aae0c 100644
--- a/apps/docs/src/examples/en/config-provider/basic.tsx
+++ b/apps/docs/src/examples/en/config-provider/basic.tsx
@@ -1,50 +1,23 @@
-import {
-  Button,
-  ConfigProvider,
-  DatePicker,
-  Select,
-  Space,
-  Switch,
-  useConfirm,
-  useMessage,
-} from '@ifhover/leaf-ui';
-import { useState } from 'react';
+import { Button, ConfigProvider, Form, FormField, Input, Select } from '@ifhover/leaf-ui';
 
-function Region() {
-  const { message } = useMessage();
-  const { confirm } = useConfirm();
-  return (
-    <Space wrap className="leaf-demo-row">
-      <Select aria-label="Options" options={[]} />
-      <DatePicker aria-label="Date" />
-      <Button onClick={() => message.success('Success / Completed')}>Message</Button>
-      <Button
-        variant="outline"
-        onClick={() =>
-          confirm({ title: 'Continue / 是否继续', children: 'Please review / 请查看提示内容' })
-        }
-      >
-        Confirm
-      </Button>
-    </Space>
-  );
-}
 export function ConfigProviderBasic() {
-  const [english, setEnglish] = useState(true);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Switch checked={english} onChange={(event) => setEnglish(event.target.checked)}>
-        English
-      </Switch>
-      <ConfigProvider
-        locale={english ? 'en-US' : 'zh-CN'}
-        theme={{ primaryColor: '#7654c6', borderRadius: 4 }}
-      >
-        <Region />
-      </ConfigProvider>
-      <ConfigProvider theme={{ primaryColor: '#087f8c', borderRadius: 16 }}>
-        <Region />
-      </ConfigProvider>
-    </Space>
+    <ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 8 }}>
+      <Form onSubmit={(event) => event.preventDefault()}>
+        <FormField label="Project name">
+          <Input defaultValue="Leaf UI" />
+        </FormField>
+        <FormField label="Project type">
+          <Select
+            defaultValue="website"
+            options={[
+              { value: 'website', label: 'Website' },
+              { value: 'app', label: 'Application' },
+            ]}
+          />
+        </FormField>
+        <Button type="submit">Save settings</Button>
+      </Form>
+    </ConfigProvider>
   );
 }
diff --git a/apps/docs/src/examples/en/config-provider/defaults.tsx b/apps/docs/src/examples/en/config-provider/defaults.tsx
new file mode 100644
index 0000000..26f7016
--- /dev/null
+++ b/apps/docs/src/examples/en/config-provider/defaults.tsx
@@ -0,0 +1,39 @@
+import {
+  Button,
+  ConfigProvider,
+  DatePicker,
+  Form,
+  FormField,
+  Input,
+  Space,
+} from '@ifhover/leaf-ui';
+
+export function ConfigProviderDefaults() {
+  return (
+    <ConfigProvider
+      components={{
+        Button: { variant: 'outline' },
+        Input: { placeholder: 'Enter a project name', allowClear: true },
+        DatePicker: { placeholder: 'Choose a project start date', allowClear: true },
+      }}
+    >
+      <Form onSubmit={(event) => event.preventDefault()}>
+        <FormField label="Project name">
+          <Input />
+        </FormField>
+        <FormField label="Start date">
+          <DatePicker />
+        </FormField>
+        <FormField label="End date">
+          <DatePicker placeholder="Instance override: choose an end date" />
+        </FormField>
+        <Space wrap>
+          <Button type="reset">Reset</Button>
+          <Button type="submit" variant="solid">
+            Save (instance override)
+          </Button>
+        </Space>
+      </Form>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/en/config-provider/density.tsx b/apps/docs/src/examples/en/config-provider/density.tsx
new file mode 100644
index 0000000..62f9fcd
--- /dev/null
+++ b/apps/docs/src/examples/en/config-provider/density.tsx
@@ -0,0 +1,41 @@
+import {
+  Button,
+  ConfigProvider,
+  Form,
+  FormField,
+  Input,
+  Select,
+  Space,
+  Text,
+} from '@ifhover/leaf-ui';
+
+export function ConfigProviderDensity() {
+  return (
+    <Space direction="vertical" align="stretch" size="lg">
+      {(['comfortable', 'compact'] as const).map((density) => (
+        <ConfigProvider key={density} density={density}>
+          <Space direction="vertical" align="stretch">
+            <Text tone="muted">{density === 'compact' ? 'Compact' : 'Comfortable'}</Text>
+            <Form>
+              <FormField label="Project name">
+                <Input defaultValue="Leaf UI" />
+              </FormField>
+              <FormField label="Owner">
+                <Select
+                  options={[
+                    { value: 'lin', label: 'Lin' },
+                    { value: 'alex', label: 'Alex' },
+                  ]}
+                  defaultValue="lin"
+                />
+              </FormField>
+              <Button type="reset" variant="outline">
+                Reset
+              </Button>
+            </Form>
+          </Space>
+        </ConfigProvider>
+      ))}
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/en/config-provider/inheritance.tsx b/apps/docs/src/examples/en/config-provider/inheritance.tsx
new file mode 100644
index 0000000..4648c02
--- /dev/null
+++ b/apps/docs/src/examples/en/config-provider/inheritance.tsx
@@ -0,0 +1,28 @@
+import { Button, ConfigProvider, Flex, Space, Text } from '@ifhover/leaf-ui';
+
+export function ConfigProviderInheritance() {
+  return (
+    <ConfigProvider components={{ Button: { variant: 'outline', size: 'sm' } }}>
+      <Space direction="vertical" align="stretch">
+        <Flex justify="space-between" align="center" gap="md">
+          <Text tone="muted">Outer scope</Text>
+          <Button>Small · Outline</Button>
+        </Flex>
+        <ConfigProvider components={{ Button: { size: 'lg' } }}>
+          <Space direction="vertical" align="stretch">
+            <Flex justify="space-between" align="center" gap="md">
+              <Text tone="muted">Inner size override</Text>
+              <Button>Large · Outline</Button>
+            </Flex>
+            <Flex justify="space-between" align="center" gap="md">
+              <Text tone="muted">Instance override</Text>
+              <Button size="md" variant="solid">
+                Default · Solid
+              </Button>
+            </Flex>
+          </Space>
+        </ConfigProvider>
+      </Space>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/en/config-provider/locale.tsx b/apps/docs/src/examples/en/config-provider/locale.tsx
new file mode 100644
index 0000000..f4719d0
--- /dev/null
+++ b/apps/docs/src/examples/en/config-provider/locale.tsx
@@ -0,0 +1,32 @@
+import { ConfigProvider, DatePicker, Form, FormField, Select, Space } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function ConfigProviderLocale() {
+  const [locale, setLocale] = useState('en-US');
+  return (
+    <Space direction="vertical" align="stretch">
+      <Select
+        aria-label="Component language"
+        value={locale}
+        onChange={setLocale}
+        options={[
+          { value: 'zh-CN', label: '简体中文' },
+          { value: 'zh-TW', label: '繁體中文' },
+          { value: 'en-US', label: 'English' },
+          { value: 'ja-JP', label: '日本語' },
+          { value: 'ko-KR', label: '한국어' },
+        ]}
+      />
+      <ConfigProvider locale={locale}>
+        <Form>
+          <FormField label="Date">
+            <DatePicker />
+          </FormField>
+          <FormField label="Empty options">
+            <Select options={[]} />
+          </FormField>
+        </Form>
+      </ConfigProvider>
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/en/config-provider/modal-defaults.tsx b/apps/docs/src/examples/en/config-provider/modal-defaults.tsx
new file mode 100644
index 0000000..f8357c7
--- /dev/null
+++ b/apps/docs/src/examples/en/config-provider/modal-defaults.tsx
@@ -0,0 +1,18 @@
+import { Button, ConfigProvider, Modal, Paragraph } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function ConfigProviderModalDefaults() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ConfigProvider components={{ Modal: { maskClosable: false } }}>
+      <Button onClick={() => setOpen(true)}>Open modal</Button>
+      <Modal open={open} title="Mask clicks keep this open" onClose={() => setOpen(false)}>
+        <Paragraph>
+          Try clicking outside the modal. It stays open. The close button, footer actions and Esc
+          still close it.
+        </Paragraph>
+      </Modal>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/en/config-provider/reset.tsx b/apps/docs/src/examples/en/config-provider/reset.tsx
new file mode 100644
index 0000000..2f176cc
--- /dev/null
+++ b/apps/docs/src/examples/en/config-provider/reset.tsx
@@ -0,0 +1,26 @@
+import {
+  ConfigProvider,
+  Form,
+  FormField,
+  Input,
+  type LeafComponentDefaults,
+} from '@ifhover/leaf-ui';
+
+const defaults = { Input: { readOnly: true } } satisfies LeafComponentDefaults;
+
+export function ConfigProviderReset() {
+  return (
+    <ConfigProvider components={defaults}>
+      <Form>
+        <FormField label="Inherited defaults">
+          <Input defaultValue="This input is read-only" />
+        </FormField>
+        <ConfigProvider components={{ Input: null }}>
+          <FormField label="Clear defaults in this region">
+            <Input defaultValue="Try editing this text" />
+          </FormField>
+        </ConfigProvider>
+      </Form>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/en/config-provider/sizes.tsx b/apps/docs/src/examples/en/config-provider/sizes.tsx
index b08aefa..21374e8 100644
--- a/apps/docs/src/examples/en/config-provider/sizes.tsx
+++ b/apps/docs/src/examples/en/config-provider/sizes.tsx
@@ -1,39 +1,32 @@
-import { Button, ConfigProvider, Input, Slider, Space } from '@ifhover/leaf-ui';
+import { Button, ConfigProvider, Form, FormField, Slider, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function ConfigProviderSizes() {
-  const [height, setHeight] = useState(34);
+  const [height, setHeight] = useState(36);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <p>Base height: {height}px</p>
-        <Slider
-          aria-label="Base control height"
-          min={28}
-          max={44}
-          value={height}
-          onChange={setHeight}
-          showValue={false}
-        />
-      </div>
-      <ConfigProvider
-        className="leaf-demo-stack"
-        theme={{ controlHeight: height, borderRadius: 8 }}
-      >
-        {(['sm', 'md', 'lg'] as const).map((size) => (
-          <div key={size} className="leaf-demo-control-row">
-            <span className="leaf-demo-size">{size}</span>
-            <Input size={size} aria-label={`${size} themed input`} placeholder="Project name" />
-            <Button size={size}>Save</Button>
-          </div>
-        ))}
-      </ConfigProvider>
-      <ConfigProvider
-        theme={{ controlHeight: height, tokens: { controlHeightSm: 26, borderRadiusLg: 20 } }}
-      >
-        <Button size="sm" variant="outline">
-          Advanced override: small height stays at 26px
-        </Button>
+    <Space direction="vertical" align="stretch" size="lg">
+      <Form>
+        <FormField label={`Base height: ${height}px`}>
+          <Slider min={28} max={44} value={height} onChange={setHeight} showValue={false} />
+        </FormField>
+      </Form>
+      <ConfigProvider theme={{ controlHeight: height }}>
+        <Space wrap align="end" size="lg">
+          {(
+            [
+              ['sm', 'Small'],
+              ['md', 'Default'],
+              ['lg', 'Large'],
+            ] as const
+          ).map(([size, label]) => (
+            <Space key={size} direction="vertical" size="sm">
+              <Text tone="muted">{label}</Text>
+              <Button size={size} variant="outline">
+                Button
+              </Button>
+            </Space>
+          ))}
+        </Space>
       </ConfigProvider>
     </Space>
   );
diff --git a/apps/docs/src/examples/en/config-provider/translations.tsx b/apps/docs/src/examples/en/config-provider/translations.tsx
new file mode 100644
index 0000000..4e41862
--- /dev/null
+++ b/apps/docs/src/examples/en/config-provider/translations.tsx
@@ -0,0 +1,51 @@
+import {
+  Button,
+  ConfigProvider,
+  DatePicker,
+  Form,
+  FormField,
+  Pagination,
+  Select,
+  Space,
+  useConfirm,
+} from '@ifhover/leaf-ui';
+import mars from '../../config-provider/zh-CN-x-mars.json';
+
+const translations = { 'zh-CN-x-mars': mars };
+
+function Controls() {
+  const { confirm } = useConfirm();
+  return (
+    <Space direction="vertical" align="stretch">
+      <Form>
+        <FormField label="Date">
+          <DatePicker />
+        </FormField>
+        <FormField label="Empty options">
+          <Select options={[]} />
+        </FormField>
+      </Form>
+      <Pagination total={24} showTotal />
+      <Button
+        variant="outline"
+        onClick={() =>
+          void confirm({
+            title: 'Continue?',
+            children:
+              'Confirm and Cancel use Martian text. Missing translations fall back to English.',
+          })
+        }
+      >
+        Open confirmation
+      </Button>
+    </Space>
+  );
+}
+
+export function ConfigProviderTranslations() {
+  return (
+    <ConfigProvider locale={['zh-CN-x-mars', 'en-US']} translations={translations}>
+      <Controls />
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/en/date-picker/basic.tsx b/apps/docs/src/examples/en/date-picker/basic.tsx
index d47ecae..33dfc41 100644
--- a/apps/docs/src/examples/en/date-picker/basic.tsx
+++ b/apps/docs/src/examples/en/date-picker/basic.tsx
@@ -1,20 +1,17 @@
-import { DatePicker, Space } from '@ifhover/leaf-ui';
+import { DatePicker, Form, FormField } from '@ifhover/leaf-ui';
 
 export function DatePickerBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Choose a date</span>
+    <Form layout="vertical">
+      <FormField label="Choose a date">
         <DatePicker aria-label="Choose a date" placeholder="Pick a good day" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Default date</span>
+      </FormField>
+      <FormField label="Default date">
         <DatePicker aria-label="Default date" defaultValue={new Date(2026, 9, 15)} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled date</span>
+      </FormField>
+      <FormField label="Disabled date">
         <DatePicker aria-label="Disabled date" defaultValue={new Date(2026, 9, 15)} disabled />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/date-picker/controlled.tsx b/apps/docs/src/examples/en/date-picker/controlled.tsx
index 3b8f0a4..638fd36 100644
--- a/apps/docs/src/examples/en/date-picker/controlled.tsx
+++ b/apps/docs/src/examples/en/date-picker/controlled.tsx
@@ -1,13 +1,12 @@
-import { DatePicker, Space } from '@ifhover/leaf-ui';
+import { DatePicker, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function DatePickerControlled() {
   const [date, setDate] = useState<Date | null>(new Date(2026, 9, 15));
   const [dateString, setDateString] = useState('2026-10-15');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Date in October</span>
+    <Form layout="vertical">
+      <FormField label="Date in October">
         <DatePicker
           aria-label="Date in October"
           value={date}
@@ -18,19 +17,16 @@ export function DatePickerControlled() {
             setDateString(text);
           }}
         />
-      </div>
-      <span className="leaf-demo-note">
-        October 5–25 are available. Current:{dateString || 'Not selected'}
-      </span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Required date · Error</span>
+      </FormField>
+      <Text tone="muted">October 5–25 are available. Current:{dateString || 'Not selected'}</Text>
+      <FormField label="Required date · Error">
         <DatePicker
           aria-label="Required date"
           status="error"
           required
           placeholder="Set a deadline"
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/date-picker/footer.tsx b/apps/docs/src/examples/en/date-picker/footer.tsx
index a9dc61d..00964f8 100644
--- a/apps/docs/src/examples/en/date-picker/footer.tsx
+++ b/apps/docs/src/examples/en/date-picker/footer.tsx
@@ -1,4 +1,4 @@
-import { Button, DatePicker } from '@ifhover/leaf-ui';
+import { Button, DatePicker, Flex, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function DatePickerFooter() {
   const [value, setValue] = useState<Date | null>(null);
@@ -9,8 +9,8 @@ export function DatePickerFooter() {
     setValue(next);
   };
   return (
-    <div className="leaf-demo-case">
-      <span className="leaf-demo-label">Custom date shortcuts</span>
+    <Flex direction="column" gap="sm" align="start">
+      <Text>Custom date shortcuts</Text>
       <DatePicker
         aria-label="Custom date shortcuts"
         value={value}
@@ -22,6 +22,6 @@ export function DatePickerFooter() {
           </Button>
         }
       />
-    </div>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/date-range-picker/basic.tsx b/apps/docs/src/examples/en/date-range-picker/basic.tsx
index 96d8f1f..655fb2c 100644
--- a/apps/docs/src/examples/en/date-range-picker/basic.tsx
+++ b/apps/docs/src/examples/en/date-range-picker/basic.tsx
@@ -1,18 +1,19 @@
-import { type DateRange, DateRangePicker, Space } from '@ifhover/leaf-ui';
+import { type DateRange, DateRangePicker, Form, FormField, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function DateRangePickerBasic() {
   const [range, setRange] = useState<DateRange | null>(null);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Date range</span>
+    <Form layout="vertical">
+      <FormField label="Date range">
         <DateRangePicker aria-label="Date range" value={range} onChange={setRange} />
-      </div>
+      </FormField>
       {range && (
-        <output className="leaf-demo-note">
-          {range[0].toLocaleDateString()} – {range[1].toLocaleDateString()}
+        <output>
+          <Text tone="muted">
+            {range[0].toLocaleDateString()} – {range[1].toLocaleDateString()}
+          </Text>
         </output>
       )}
-    </Space>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/date-range-picker/modes.tsx b/apps/docs/src/examples/en/date-range-picker/modes.tsx
index f82a14c..b120094 100644
--- a/apps/docs/src/examples/en/date-range-picker/modes.tsx
+++ b/apps/docs/src/examples/en/date-range-picker/modes.tsx
@@ -1,28 +1,24 @@
-import { DateRangePicker, Space } from '@ifhover/leaf-ui';
+import { DateRangePicker, Form, FormField } from '@ifhover/leaf-ui';
 export function DateRangePickerModes() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Year range</span>
+    <Form layout="vertical">
+      <FormField label="Year range">
         <DateRangePicker aria-label="Year range" picker="year" placeholder="Year range" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Month range</span>
+      </FormField>
+      <FormField label="Month range">
         <DateRangePicker aria-label="Month range" picker="month" placeholder="Month range" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Week range</span>
+      </FormField>
+      <FormField label="Week range">
         <DateRangePicker aria-label="Week range" picker="week" placeholder="Week range" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Date and time range</span>
+      </FormField>
+      <FormField label="Date and time range">
         <DateRangePicker
           aria-label="Date and time range"
           picker="datetime"
           placeholder="Date and time range"
           use12Hours
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/date-time-picker/basic.tsx b/apps/docs/src/examples/en/date-time-picker/basic.tsx
index ffa4b19..3640342 100644
--- a/apps/docs/src/examples/en/date-time-picker/basic.tsx
+++ b/apps/docs/src/examples/en/date-time-picker/basic.tsx
@@ -1,29 +1,26 @@
-import { DateTimePicker, Space } from '@ifhover/leaf-ui';
+import { DateTimePicker, Form, FormField } from '@ifhover/leaf-ui';
 export function DateTimePickerBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Appointment</span>
+    <Form layout="vertical">
+      <FormField label="Appointment">
         <DateTimePicker aria-label="Appointment" defaultValue={new Date(2026, 9, 3, 14, 30)} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">12-hour appointment</span>
+      </FormField>
+      <FormField label="12-hour appointment">
         <DateTimePicker
           aria-label="12-hour appointment"
           use12Hours
           minuteStep={15}
           secondStep={10}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Bounded time</span>
+      </FormField>
+      <FormField label="Bounded time">
         <DateTimePicker
           aria-label="Bounded time"
           minDate={new Date(2026, 9, 1)}
           maxDate={new Date(2026, 9, 31, 23, 59, 59)}
           placeholder="Select a time in October"
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/divider/basic.tsx b/apps/docs/src/examples/en/divider/basic.tsx
index b226c8d..4b58078 100644
--- a/apps/docs/src/examples/en/divider/basic.tsx
+++ b/apps/docs/src/examples/en/divider/basic.tsx
@@ -2,7 +2,7 @@ import { Divider, Space } from '@ifhover/leaf-ui';
 
 export function DividerBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <p>Project details</p>
       <Divider>Settings</Divider>
       <Divider align="start" dashed>
diff --git a/apps/docs/src/examples/en/drawer/basic.tsx b/apps/docs/src/examples/en/drawer/basic.tsx
index dafe538..daa5f3d 100644
--- a/apps/docs/src/examples/en/drawer/basic.tsx
+++ b/apps/docs/src/examples/en/drawer/basic.tsx
@@ -1,11 +1,11 @@
-import { Button, Drawer, Form, FormField, Input, Select, Space } from '@ifhover/leaf-ui';
+import { Button, Drawer, Flex, Form, FormField, Input, Select, Space } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function DrawerBasic() {
   const [placement, setPlacement] = useState<'left' | 'right' | 'top' | 'bottom'>('right');
   const [open, setOpen] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Space wrap className="leaf-demo-row">
+    <Space direction="vertical" align="stretch">
+      <Flex gap="md" align="center" wrap justify="center">
         {(['left', 'right', 'top', 'bottom'] as const).map((side) => (
           <Button
             key={side}
@@ -18,7 +18,7 @@ export function DrawerBasic() {
             {side}
           </Button>
         ))}
-      </Space>
+      </Flex>
       <Drawer
         open={open}
         placement={placement}
diff --git a/apps/docs/src/examples/en/dropdown/basic.tsx b/apps/docs/src/examples/en/dropdown/basic.tsx
index e1537d6..31e1ffb 100644
--- a/apps/docs/src/examples/en/dropdown/basic.tsx
+++ b/apps/docs/src/examples/en/dropdown/basic.tsx
@@ -1,4 +1,5 @@
-import { Button, Dropdown, type DropdownItem, useMessage } from '@ifhover/leaf-ui';
+import type { DropdownItem } from '@ifhover/leaf-ui';
+import { Button, Dropdown, useMessage } from '@ifhover/leaf-ui';
 import { ChevronDown, Copy, Pencil, Trash2 } from 'lucide-react';
 
 const items: DropdownItem[] = [
diff --git a/apps/docs/src/examples/en/error-boundary/advanced.tsx b/apps/docs/src/examples/en/error-boundary/advanced.tsx
index e2b7ff4..6886d14 100644
--- a/apps/docs/src/examples/en/error-boundary/advanced.tsx
+++ b/apps/docs/src/examples/en/error-boundary/advanced.tsx
@@ -8,7 +8,7 @@ import { useState } from 'react';
 export function ErrorBoundaryCustom() {
   const [broken, setBroken] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => setBroken(true)}>
         Test fallback
       </Button>
diff --git a/apps/docs/src/examples/en/error-boundary/basic.tsx b/apps/docs/src/examples/en/error-boundary/basic.tsx
index 5638665..625dcd1 100644
--- a/apps/docs/src/examples/en/error-boundary/basic.tsx
+++ b/apps/docs/src/examples/en/error-boundary/basic.tsx
@@ -8,7 +8,7 @@ import { useState } from 'react';
 export function ErrorBoundaryBasic() {
   const [broken, setBroken] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => setBroken(true)}>
         Simulate a rendering error
       </Button>
diff --git a/apps/docs/src/examples/en/file-list/advanced.tsx b/apps/docs/src/examples/en/file-list/advanced.tsx
index 64aae14..72cadc6 100644
--- a/apps/docs/src/examples/en/file-list/advanced.tsx
+++ b/apps/docs/src/examples/en/file-list/advanced.tsx
@@ -1,4 +1,4 @@
-import { type FileItem, FileList, Space } from '@ifhover/leaf-ui';
+import { type FileItem, FileList, Space, Text } from '@ifhover/leaf-ui';
 import { withBase } from '@rspress/core/runtime';
 import { useState } from 'react';
 export function FileListActions() {
@@ -8,10 +8,10 @@ export function FileListActions() {
     { uid: 'c', url: withBase('/media/empty.txt'), size: 0 },
   ]);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <p className="leaf-demo-note">
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">
         Names can come from the URL; size is optional. Zero-byte files still display their size.
-      </p>
+      </Text>
       <FileList
         items={items}
         removable
diff --git a/apps/docs/src/examples/en/file-list/basic.tsx b/apps/docs/src/examples/en/file-list/basic.tsx
index 1de48b1..81c48da 100644
--- a/apps/docs/src/examples/en/file-list/basic.tsx
+++ b/apps/docs/src/examples/en/file-list/basic.tsx
@@ -2,17 +2,17 @@ import { FileList, Space } from '@ifhover/leaf-ui';
 import { withBase } from '@rspress/core/runtime';
 export function FileListBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <FileList
         items={[
-          { url: withBase('/media/landscape-1.svg'), name: 'Summer landscape.svg', size: 414 },
-          { url: withBase('/media/landscape-2.svg'), name: 'Mountain trail.svg' },
           {
             url: withBase('/media/sample.pdf'),
             name: 'Project proposal.pdf',
             size: 685,
           },
           { url: withBase('/media/quarterly-data.csv'), name: 'Quarterly data.csv' },
+          { url: withBase('/media/landscape-1.svg'), name: 'Summer landscape.svg', size: 414 },
+          { url: withBase('/media/file-list-readme.md'), name: 'Delivery notes.md' },
         ]}
       />
     </Space>
diff --git a/apps/docs/src/examples/en/file-list/cards.tsx b/apps/docs/src/examples/en/file-list/cards.tsx
new file mode 100644
index 0000000..a579da3
--- /dev/null
+++ b/apps/docs/src/examples/en/file-list/cards.tsx
@@ -0,0 +1,26 @@
+import { FileList } from '@ifhover/leaf-ui';
+import { withBase } from '@rspress/core/runtime';
+
+export function FileListCards() {
+  return (
+    <div>
+      <FileList
+        listType="picture-card"
+        items={[
+          {
+            uid: 'lake',
+            url: withBase('/media/landscape-1.svg'),
+            name: 'Summer landscape.svg',
+            size: 414,
+          },
+          { uid: 'trail', url: withBase('/media/landscape-2.svg'), name: 'Mountain trail.svg' },
+          {
+            uid: 'cover',
+            url: withBase('/media/landscape-3.svg'),
+            name: 'Homepage cover final.svg',
+          },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/src/examples/en/file-list/empty.tsx b/apps/docs/src/examples/en/file-list/empty.tsx
new file mode 100644
index 0000000..5a69359
--- /dev/null
+++ b/apps/docs/src/examples/en/file-list/empty.tsx
@@ -0,0 +1,9 @@
+import { FileList } from '@ifhover/leaf-ui';
+
+export function FileListEmpty() {
+  return (
+    <div>
+      <FileList items={[]} />
+    </div>
+  );
+}
diff --git a/apps/docs/src/examples/en/file-list/picture.tsx b/apps/docs/src/examples/en/file-list/picture.tsx
new file mode 100644
index 0000000..01413c6
--- /dev/null
+++ b/apps/docs/src/examples/en/file-list/picture.tsx
@@ -0,0 +1,27 @@
+import { FileList } from '@ifhover/leaf-ui';
+import { withBase } from '@rspress/core/runtime';
+
+export function FileListPicture() {
+  return (
+    <div>
+      <FileList
+        listType="picture"
+        items={[
+          {
+            uid: 'lake',
+            url: withBase('/media/landscape-1.svg'),
+            name: 'Summer landscape.svg',
+            size: 414,
+          },
+          { uid: 'trail', url: withBase('/media/landscape-2.svg'), name: 'Mountain trail.svg' },
+          {
+            uid: 'plan',
+            url: withBase('/media/sample.pdf'),
+            name: 'Project proposal.pdf',
+            size: 685,
+          },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/src/examples/en/file-list/states.tsx b/apps/docs/src/examples/en/file-list/states.tsx
new file mode 100644
index 0000000..c47985b
--- /dev/null
+++ b/apps/docs/src/examples/en/file-list/states.tsx
@@ -0,0 +1,38 @@
+import { FileList } from '@ifhover/leaf-ui';
+import { withBase } from '@rspress/core/runtime';
+
+export function FileListStates() {
+  return (
+    <div>
+      <FileList
+        downloadable={false}
+        previewable={false}
+        items={[
+          {
+            uid: 'uploading',
+            name: 'Project introduction.mp4',
+            size: 12582912,
+            status: 'uploading',
+            percent: 42,
+          },
+          {
+            uid: 'done',
+            name: 'Delivery notes.pdf',
+            size: 685,
+            status: 'done',
+            url: withBase('/media/sample.pdf'),
+          },
+          {
+            uid: 'error',
+            name: 'Attachments.zip',
+            size: 3145728,
+            status: 'error',
+            error: 'Connection interrupted. Please upload again.',
+          },
+          { uid: 'ready', name: 'Project notes.md', status: 'ready' },
+          { uid: 'cancelled', name: 'Backup.zip', status: 'cancelled' },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/src/examples/en/flex/alignment.tsx b/apps/docs/src/examples/en/flex/alignment.tsx
new file mode 100644
index 0000000..a952d95
--- /dev/null
+++ b/apps/docs/src/examples/en/flex/alignment.tsx
@@ -0,0 +1,16 @@
+import { Button, Flex, Text } from '@ifhover/leaf-ui';
+
+export function FlexAlignment() {
+  return (
+    <Flex direction="column" gap="lg">
+      <Flex justify="space-between" align="center" gap="sm" wrap>
+        <Text>Project settings</Text>
+        <Button size="sm">Save</Button>
+      </Flex>
+      <Flex justify="end" gap="sm" wrap>
+        <Button variant="outline">Cancel</Button>
+        <Button>Confirm</Button>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/examples/en/flex/basic.tsx b/apps/docs/src/examples/en/flex/basic.tsx
new file mode 100644
index 0000000..f6f1cca
--- /dev/null
+++ b/apps/docs/src/examples/en/flex/basic.tsx
@@ -0,0 +1,11 @@
+import { Button, Flex } from '@ifhover/leaf-ui';
+
+export function FlexBasic() {
+  return (
+    <Flex gap="sm" wrap>
+      <Button>Save</Button>
+      <Button variant="outline">Cancel</Button>
+      <Button variant="ghost">More actions</Button>
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/examples/en/form/basic.tsx b/apps/docs/src/examples/en/form/basic.tsx
index 3b73f5f..3b0cc71 100644
--- a/apps/docs/src/examples/en/form/basic.tsx
+++ b/apps/docs/src/examples/en/form/basic.tsx
@@ -1,10 +1,9 @@
-import { Button, Form, FormField, Input, Select, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Form, FormField, Input, Select, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function FormBasic() {
   const [result, setResult] = useState('');
   return (
     <Form
-      className="leaf-demo-stack leaf-demo-stack--wide"
       onSubmit={(event) => {
         event.preventDefault();
         const data = new FormData(event.currentTarget);
@@ -28,14 +27,18 @@ export function FormBasic() {
         />
       </FormField>
       <FormField>
-        <Space wrap className="leaf-demo-row">
+        <Flex gap="md" align="center" wrap justify="center">
           <Button type="submit">Submit</Button>
           <Button type="reset" variant="outline">
             Reset
           </Button>
-        </Space>
+        </Flex>
       </FormField>
-      {result && <output className="leaf-demo-note">{result}</output>}
+      {result && (
+        <output>
+          <Text tone="muted">{result}</Text>
+        </output>
+      )}
     </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/form/extensions.tsx b/apps/docs/src/examples/en/form/extensions.tsx
index a2d79c5..d899a67 100644
--- a/apps/docs/src/examples/en/form/extensions.tsx
+++ b/apps/docs/src/examples/en/form/extensions.tsx
@@ -18,13 +18,12 @@ export function ExtensionDemo() {
             <>
               {fields.map((field) => (
                 <FormField key={field.key} label={`Contact ${field.index + 1}`} required>
-                  <Space size="sm">
+                  <Space size="sm" wrap>
                     <Input
                       name={`${field.name}.email`}
                       type="email"
                       value={field.value}
                       onChange={(e) => ops.update(field.index, e.target.value)}
-                      style={{ flex: 1, minWidth: 0 }}
                     />
                     <Button variant="ghost" onClick={() => ops.remove(field.index)}>
                       Remove
diff --git a/apps/docs/src/examples/en/form/label-width.tsx b/apps/docs/src/examples/en/form/label-width.tsx
index 2235592..4436822 100644
--- a/apps/docs/src/examples/en/form/label-width.tsx
+++ b/apps/docs/src/examples/en/form/label-width.tsx
@@ -1,18 +1,18 @@
-import { Button, Form, FormField, Input, Space, Switch } from '@ifhover/leaf-ui';
+import { Button, Flex, Form, FormField, Input, Space, Switch } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function FormLabelWidth() {
   const [automatic, setAutomatic] = useState(true);
   const [extra, setExtra] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Space wrap className="leaf-demo-row">
+    <Space direction="vertical" align="stretch">
+      <Flex gap="md" align="center" wrap justify="center">
         <Switch checked={automatic} onChange={(event) => setAutomatic(event.target.checked)}>
           Automatic label widths
         </Switch>
         <Button variant="outline" onClick={() => setExtra(!extra)}>
           Toggle long label
         </Button>
-      </Space>
+      </Flex>
       <Form labelWidth={automatic ? 'auto' : 110}>
         <FormField label="Name">
           <Input name="name" />
diff --git a/apps/docs/src/examples/en/grid/advanced.tsx b/apps/docs/src/examples/en/grid/advanced.tsx
index 706f4d8..8603c66 100644
--- a/apps/docs/src/examples/en/grid/advanced.tsx
+++ b/apps/docs/src/examples/en/grid/advanced.tsx
@@ -1,54 +1,21 @@
-import { Col, Row, Space } from '@ifhover/leaf-ui';
-
+import { Card, Col, Row, Space } from '@ifhover/leaf-ui';
 export function GridColumns() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Row gutter={[12, 12]}>
+    <Space direction="vertical" align="stretch">
+      <Row gutter={12}>
         <Col span={8}>
-          <div
-            style={{
-              padding: 18,
-              borderRadius: 'var(--leaf-radius)',
-              background: 'var(--leaf-color-surface-muted)',
-            }}
-          >
-            8 / 24
-          </div>
+          <Card>8 / 24</Card>
         </Col>
         <Col span={16}>
-          <div
-            style={{
-              padding: 18,
-              borderRadius: 'var(--leaf-radius)',
-              background: 'var(--leaf-color-surface-muted)',
-            }}
-          >
-            16 / 24
-          </div>
+          <Card>16 / 24</Card>
         </Col>
       </Row>
       <Row gutter={12}>
         <Col xs={24} md={12}>
-          <div
-            style={{
-              padding: 18,
-              borderRadius: 'var(--leaf-radius)',
-              background: 'var(--leaf-color-surface-muted)',
-            }}
-          >
-            Responsive column
-          </div>
+          <Card>Responsive width</Card>
         </Col>
         <Col xs={0} md={12}>
-          <div
-            style={{
-              padding: 18,
-              borderRadius: 'var(--leaf-radius)',
-              background: 'var(--leaf-color-surface-muted)',
-            }}
-          >
-            Visible on wider screens
-          </div>
+          <Card>Hidden on narrow screens</Card>
         </Col>
       </Row>
     </Space>
diff --git a/apps/docs/src/examples/en/grid/basic.tsx b/apps/docs/src/examples/en/grid/basic.tsx
index d8c8d15..6bd0f56 100644
--- a/apps/docs/src/examples/en/grid/basic.tsx
+++ b/apps/docs/src/examples/en/grid/basic.tsx
@@ -1,19 +1,9 @@
-import { Grid } from '@ifhover/leaf-ui';
-
+import { Card, Grid } from '@ifhover/leaf-ui';
 export function GridBasic() {
   return (
-    <Grid style={{ width: '100%' }} columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
-      {['Design', 'Develop', 'Publish'].map((label) => (
-        <div
-          key={label}
-          style={{
-            padding: 24,
-            background: 'var(--leaf-color-surface-muted)',
-            borderRadius: 'var(--leaf-radius)',
-          }}
-        >
-          {label}
-        </div>
+    <Grid columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
+      {['Design', 'Develop', 'Release'].map((label) => (
+        <Card key={label}>{label}</Card>
       ))}
     </Grid>
   );
diff --git a/apps/docs/src/examples/en/guide/control-sizes.tsx b/apps/docs/src/examples/en/guide/control-sizes.tsx
index eaa0b9e..da906cf 100644
--- a/apps/docs/src/examples/en/guide/control-sizes.tsx
+++ b/apps/docs/src/examples/en/guide/control-sizes.tsx
@@ -1,24 +1,24 @@
-import { Button, type ControlSize, Input, Select, Space } from '@ifhover/leaf-ui';
-
+import type { ControlSize } from '@ifhover/leaf-ui';
+import { Button, Flex, Input, Select, Text } from '@ifhover/leaf-ui';
 export function ControlSizes() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Flex direction="column" gap="md">
       {(['sm', 'md', 'lg'] as const).map((size: ControlSize) => (
-        <div key={size} className="leaf-demo-control-row">
-          <span className="leaf-demo-size">{size}</span>
-          <Input size={size} aria-label={`${size} Search`} placeholder="Search projects" />
+        <Flex key={size} align="center" gap="sm" wrap>
+          <Text tone="muted">{size}</Text>
+          <Input size={size} aria-label={`${size} search`} placeholder="Search projects" />
           <Select
             size={size}
-            aria-label={`${size} Status`}
+            aria-label={`${size} status`}
             defaultValue="all"
             options={[
               { label: 'All statuses', value: 'all' },
-              { label: 'In progress', value: 'active' },
+              { label: 'Active', value: 'active' },
             ]}
           />
           <Button size={size}>Search</Button>
-        </div>
+        </Flex>
       ))}
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/guide/form.tsx b/apps/docs/src/examples/en/guide/form.tsx
index 7691331..9812045 100644
--- a/apps/docs/src/examples/en/guide/form.tsx
+++ b/apps/docs/src/examples/en/guide/form.tsx
@@ -1,36 +1,38 @@
-import { Button, Input, Select } from '@ifhover/leaf-ui';
+import { Button, Form, FormField, Input, Select, Text } from '@ifhover/leaf-ui';
 import { Plus } from 'lucide-react';
-import { useId, useState } from 'react';
-
+import { useState } from 'react';
 export function GettingStartedForm() {
-  const id = useId();
   const [result, setResult] = useState('');
   return (
-    <form
-      style={{ display: 'grid', gap: 12, width: 'min(100%, 360px)' }}
+    <Form
+      layout="vertical"
       onSubmit={(event) => {
         event.preventDefault();
         const data = new FormData(event.currentTarget);
-        setResult(`Created:${data.get('title')}`);
+        setResult(`Created: ${data.get('title')}`);
       }}
     >
-      <label htmlFor={`${id}-title`}>Project name</label>
-      <Input id={`${id}-title`} name="title" required placeholder="For example: Leaf Garden" />
-      <label htmlFor={`${id}-team`}>Team</label>
-      <Select
-        id={`${id}-team`}
-        name="team"
-        required
-        placeholder="Select a team"
-        options={[
-          { label: 'Design team', value: 'design' },
-          { label: 'Product team', value: 'product' },
-        ]}
-      />
+      <FormField label="Project name" required>
+        <Input name="title" placeholder="Leaf Garden" />
+      </FormField>
+      <FormField label="Team" required>
+        <Select
+          name="team"
+          placeholder="Choose a team"
+          options={[
+            { label: 'Design', value: 'design' },
+            { label: 'Engineering', value: 'engineering' },
+          ]}
+        />
+      </FormField>
       <Button type="submit" startIcon={<Plus />}>
         Create project
       </Button>
-      <span aria-live="polite">{result}</span>
-    </form>
+      {result && (
+        <Text role="status" tone="muted">
+          {result}
+        </Text>
+      )}
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/guide/getting-started.tsx b/apps/docs/src/examples/en/guide/getting-started.tsx
index 18e4e6a..85670b7 100644
--- a/apps/docs/src/examples/en/guide/getting-started.tsx
+++ b/apps/docs/src/examples/en/guide/getting-started.tsx
@@ -1,5 +1,4 @@
 import { Button } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
 import { useState } from 'react';
 
 export function GettingStartedExample() {
diff --git a/apps/docs/src/examples/en/image-cropper/advanced.tsx b/apps/docs/src/examples/en/image-cropper/advanced.tsx
deleted file mode 100644
index e65adbc..0000000
--- a/apps/docs/src/examples/en/image-cropper/advanced.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ImageCropper } from '@ifhover/leaf-ui';
-import { withBase } from '@rspress/core/runtime';
-
-export function ImageCropperAvatar() {
-  return (
-    <ImageCropper
-      src={withBase('/media/landscape-2.svg')}
-      shape="round"
-      aspect={1}
-      onExport={(result) => {
-        const url = URL.createObjectURL(result.blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = 'avatar.png';
-        link.click();
-        setTimeout(() => URL.revokeObjectURL(url), 1000);
-      }}
-    />
-  );
-}
diff --git a/apps/docs/src/examples/en/image-cropper/basic.tsx b/apps/docs/src/examples/en/image-cropper/basic.tsx
deleted file mode 100644
index f1f8da4..0000000
--- a/apps/docs/src/examples/en/image-cropper/basic.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Image, ImageCropper, Space } from '@ifhover/leaf-ui';
-import { withBase } from '@rspress/core/runtime';
-import { useEffect, useState } from 'react';
-export function ImageCropperBasic() {
-  const [result, setResult] = useState<Blob | null>(null);
-  const [url, setUrl] = useState('');
-  useEffect(() => {
-    if (!result) return;
-    const address = URL.createObjectURL(result);
-    setUrl(address);
-    return () => URL.revokeObjectURL(address);
-  }, [result]);
-  return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <ImageCropper
-        src={withBase('/media/landscape-1.svg')}
-        onExport={(result) => setResult(result.blob)}
-      />
-      {url && <Image src={url} alt="Cropped image" width={220} fit="contain" />}
-    </Space>
-  );
-}
diff --git a/apps/docs/src/examples/en/image/advanced.tsx b/apps/docs/src/examples/en/image/advanced.tsx
index 11b7e68..cda1a91 100644
--- a/apps/docs/src/examples/en/image/advanced.tsx
+++ b/apps/docs/src/examples/en/image/advanced.tsx
@@ -1,10 +1,10 @@
-import { Image, ImagePreviewGroup, Space } from '@ifhover/leaf-ui';
+import { Flex, Image, ImagePreviewGroup } from '@ifhover/leaf-ui';
 import { withBase } from '@rspress/core/runtime';
 
 export function ImageGallery() {
   return (
     <ImagePreviewGroup thumbnails downloadable>
-      <Space wrap className="leaf-demo-row">
+      <Flex gap="md" align="center" wrap justify="center">
         {[1, 2, 3].map((index) => (
           <Image
             key={index}
@@ -14,7 +14,7 @@ export function ImageGallery() {
             alt={`Landscape ${index}`}
           />
         ))}
-      </Space>
+      </Flex>
     </ImagePreviewGroup>
   );
 }
diff --git a/apps/docs/src/examples/en/image/basic.tsx b/apps/docs/src/examples/en/image/basic.tsx
index 5372a96..9b4534a 100644
--- a/apps/docs/src/examples/en/image/basic.tsx
+++ b/apps/docs/src/examples/en/image/basic.tsx
@@ -1,9 +1,9 @@
-import { Image, Space } from '@ifhover/leaf-ui';
+import { Flex, Image } from '@ifhover/leaf-ui';
 import { withBase } from '@rspress/core/runtime';
 
 export function ImageBasic() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       <Image src={withBase('/media/landscape-1.svg')} width={240} height={160} alt="Green valley" />
       <Image
         src="data:image/png;base64,invalid"
@@ -12,6 +12,6 @@ export function ImageBasic() {
         alt="Failed image example"
         fallback={<span>No image</span>}
       />
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/input-mask/advanced.tsx b/apps/docs/src/examples/en/input-mask/advanced.tsx
index 32a787f..e19761f 100644
--- a/apps/docs/src/examples/en/input-mask/advanced.tsx
+++ b/apps/docs/src/examples/en/input-mask/advanced.tsx
@@ -1,11 +1,11 @@
-import { InputMask, Space } from '@ifhover/leaf-ui';
+import { InputMask, Space, Text } from '@ifhover/leaf-ui';
 
 export function InputMaskFormats() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <strong className="leaf-demo-note">Card number format</strong>
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">Card number format</Text>
       <InputMask mask="0000 0000 0000 0000" lazy={false} aria-label="Card number" />
-      <strong className="leaf-demo-note">Custom letter and digit rules</strong>
+      <Text tone="muted">Custom letter and digit rules</Text>
       <InputMask
         mask="AA-0000"
         definitions={{ A: /[A-Z]/ }}
diff --git a/apps/docs/src/examples/en/input-mask/basic.tsx b/apps/docs/src/examples/en/input-mask/basic.tsx
index 81600f7..9930464 100644
--- a/apps/docs/src/examples/en/input-mask/basic.tsx
+++ b/apps/docs/src/examples/en/input-mask/basic.tsx
@@ -1,9 +1,9 @@
-import { InputMask, Space } from '@ifhover/leaf-ui';
+import { InputMask, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function InputMaskBasic() {
   const [value, setValue] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <InputMask
         mask="+{86} 000 0000 0000"
         placeholder="+86 138 0000 0000"
@@ -12,7 +12,9 @@ export function InputMaskBasic() {
         onChange={setValue}
         aria-label="Phone number"
       />
-      <output className="leaf-demo-note">Unmasked value: {value || '—'}</output>
+      <output>
+        <Text tone="muted">Unmasked value: {value || '—'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/input-number/basic.tsx b/apps/docs/src/examples/en/input-number/basic.tsx
index df5bcb4..86c9024 100644
--- a/apps/docs/src/examples/en/input-number/basic.tsx
+++ b/apps/docs/src/examples/en/input-number/basic.tsx
@@ -1,9 +1,9 @@
-import { Form, FormField, InputNumber } from '@ifhover/leaf-ui';
+import { Form, FormField, InputNumber, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function InputNumberBasic() {
   const [value, setValue] = useState<number | null>(3);
   return (
-    <Form layout="vertical" className="leaf-demo-stack">
+    <Form layout="vertical">
       <FormField label="Quantity">
         <InputNumber name="quantity" min={0} max={20} value={value} onChange={setValue} />
       </FormField>
@@ -19,7 +19,7 @@ export function InputNumberBasic() {
       <FormField label="Disabled">
         <InputNumber defaultValue={8} disabled />
       </FormField>
-      <p className="leaf-demo-note">Current quantity: {value ?? 'Empty'}</p>
+      <Text tone="muted">Current quantity: {value ?? 'Empty'}</Text>
     </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/input-otp/advanced.tsx b/apps/docs/src/examples/en/input-otp/advanced.tsx
index c95e73d..427df84 100644
--- a/apps/docs/src/examples/en/input-otp/advanced.tsx
+++ b/apps/docs/src/examples/en/input-otp/advanced.tsx
@@ -1,17 +1,17 @@
-import { InputOTP, Space } from '@ifhover/leaf-ui';
+import { InputOTP, Space, Text } from '@ifhover/leaf-ui';
 
 export function InputOTPOptions() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <strong className="leaf-demo-note">Letters and digits</strong>
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">Letters and digits</Text>
       <InputOTP
         mode="alphanumeric"
         length={8}
         separator={(index) => (index === 3 ? <span>—</span> : null)}
       />
-      <strong className="leaf-demo-note">Masked characters</strong>
+      <Text tone="muted">Masked characters</Text>
       <InputOTP length={4} mask size="lg" />
-      <strong className="leaf-demo-note">Disabled</strong>
+      <Text tone="muted">Disabled</Text>
       <InputOTP defaultValue="123456" disabled />
     </Space>
   );
diff --git a/apps/docs/src/examples/en/input-otp/basic.tsx b/apps/docs/src/examples/en/input-otp/basic.tsx
index 35388f1..b364e77 100644
--- a/apps/docs/src/examples/en/input-otp/basic.tsx
+++ b/apps/docs/src/examples/en/input-otp/basic.tsx
@@ -1,12 +1,14 @@
-import { InputOTP, Space } from '@ifhover/leaf-ui';
+import { InputOTP, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function InputOTPBasic() {
   const [value, setValue] = useState('');
   const [complete, setComplete] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <InputOTP value={value} onChange={setValue} onComplete={setComplete} />
-      <output className="leaf-demo-note">Completed: {complete || '—'}</output>
+      <output>
+        <Text tone="muted">Completed: {complete || '—'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/input/basic.tsx b/apps/docs/src/examples/en/input/basic.tsx
index 5cefe58..ed4bd4f 100644
--- a/apps/docs/src/examples/en/input/basic.tsx
+++ b/apps/docs/src/examples/en/input/basic.tsx
@@ -1,25 +1,21 @@
-import { Input, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Input } from '@ifhover/leaf-ui';
 import { Mail, Search } from 'lucide-react';
 
 export function InputBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Project name</span>
+    <Form layout="vertical">
+      <FormField label="Project name">
         <Input aria-label="Project name" placeholder="Name your project" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Search projects</span>
+      </FormField>
+      <FormField label="Search projects">
         <Input aria-label="Search projects" prefix={<Search />} placeholder="Search projects" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Email</span>
+      </FormField>
+      <FormField label="Email">
         <Input aria-label="Email" type="email" prefix={<Mail />} placeholder="hello@leaf.design" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Read-only project name</span>
+      </FormField>
+      <FormField label="Read-only project name">
         <Input aria-label="Read-only project name" defaultValue="Leaf Garden" readOnly />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/input/clear.tsx b/apps/docs/src/examples/en/input/clear.tsx
index 09c1398..da75557 100644
--- a/apps/docs/src/examples/en/input/clear.tsx
+++ b/apps/docs/src/examples/en/input/clear.tsx
@@ -1,11 +1,10 @@
-import { Input, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Input, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function InputClear() {
   const [value, setValue] = useState('Leaf Garden');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Project name</span>
+    <Form layout="vertical">
+      <FormField label="Project name">
         <Input
           aria-label="Project name"
           value={value}
@@ -14,17 +13,16 @@ export function InputClear() {
           showCount
           maxLength={30}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Keyword</span>
+      </FormField>
+      <FormField label="Keyword">
         <Input
           aria-label="Keyword"
           defaultValue="Leaf"
           allowClear
           showCount={(text) => `${text.length} characters`}
         />
-      </div>
-      <p className="leaf-demo-note">Current text: {value || 'Empty'}</p>
-    </Space>
+      </FormField>
+      <Text tone="muted">Current text: {value || 'Empty'}</Text>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/input/controlled.tsx b/apps/docs/src/examples/en/input/controlled.tsx
index 9ab22b9..844c92d 100644
--- a/apps/docs/src/examples/en/input/controlled.tsx
+++ b/apps/docs/src/examples/en/input/controlled.tsx
@@ -1,13 +1,12 @@
-import { Input, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Input, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function InputControlled() {
   const [value, setValue] = useState('');
   const [submitted, setSubmitted] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Enter and submit</span>
+    <Form layout="vertical">
+      <FormField label="Enter and submit">
         <Input
           aria-label="Enter and submit"
           value={value}
@@ -15,10 +14,10 @@ export function InputControlled() {
           onChange={(event) => setValue(event.target.value)}
           onPressEnter={() => setSubmitted(value)}
         />
-      </div>
-      <span className="leaf-demo-note" aria-live="polite">
+      </FormField>
+      <Text tone="muted" aria-live="polite">
         Submitted:{submitted || 'Waiting for input'}
-      </span>
-    </Space>
+      </Text>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/input/extensions.tsx b/apps/docs/src/examples/en/input/extensions.tsx
index a26c74c..6b1ffc7 100644
--- a/apps/docs/src/examples/en/input/extensions.tsx
+++ b/apps/docs/src/examples/en/input/extensions.tsx
@@ -1,4 +1,4 @@
-import { Input, InputGroup, InputSearch, Select, Space } from '@ifhover/leaf-ui';
+import { Flex, Input, InputGroup, InputSearch, Select, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function ExtensionDemo() {
   const [query, setQuery] = useState('');
@@ -14,8 +14,8 @@ export function ExtensionDemo() {
         />
       </label>
       <p role="status">Search: {query || 'No search yet'}</p>
-      <div className="leaf-demo-case">
-        <p>Input group</p>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>Input group</Text>
         <InputGroup aria-label="URL">
           <Select
             style={{ width: 110 }}
@@ -24,7 +24,7 @@ export function ExtensionDemo() {
           />
           <Input aria-label="Domain" placeholder="example.com" />
         </InputGroup>
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/input/password.tsx b/apps/docs/src/examples/en/input/password.tsx
index 275d949..ee10eb6 100644
--- a/apps/docs/src/examples/en/input/password.tsx
+++ b/apps/docs/src/examples/en/input/password.tsx
@@ -1,12 +1,11 @@
-import { Input, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Input } from '@ifhover/leaf-ui';
 import { Eye, EyeOff, LockKeyhole } from 'lucide-react';
 import { useState } from 'react';
 export function InputPassword() {
   const [visible, setVisible] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Password</span>
+    <Form layout="vertical">
+      <FormField label="Password">
         <Input
           type="password"
           aria-label="Password"
@@ -14,9 +13,8 @@ export function InputPassword() {
           autoComplete="new-password"
           prefix={<LockKeyhole />}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Controlled password</span>
+      </FormField>
+      <FormField label="Controlled password">
         <Input
           type="password"
           aria-label="Controlled password"
@@ -25,20 +23,18 @@ export function InputPassword() {
           onVisibleChange={setVisible}
           visibilityIcon={(shown) => (shown ? <EyeOff size={16} /> : <Eye size={16} />)}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled password</span>
+      </FormField>
+      <FormField label="Disabled password">
         <Input type="password" aria-label="Disabled password" defaultValue="leaf-garden" disabled />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">No visibility toggle</span>
+      </FormField>
+      <FormField label="No visibility toggle">
         <Input
           type="password"
           aria-label="No visibility toggle"
           placeholder="No visibility toggle"
           visibilityToggle={false}
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/input/states.tsx b/apps/docs/src/examples/en/input/states.tsx
index 0238d13..7365146 100644
--- a/apps/docs/src/examples/en/input/states.tsx
+++ b/apps/docs/src/examples/en/input/states.tsx
@@ -1,28 +1,16 @@
-import { Input, Space } from '@ifhover/leaf-ui';
-
+import { Form, FormField, Input } from '@ifhover/leaf-ui';
 export function InputStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled input</span>
-        <Input aria-label="Disabled input" disabled placeholder="Cannot edit right now" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Project name error · Error</span>
-        <Input
-          aria-label="Project name error"
-          status="error"
-          placeholder="Enter a project name"
-          aria-describedby="project-error"
-        />
-      </div>
-      <span id="project-error" className="leaf-demo-error">
-        Project name is required.
-      </span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Name warning</span>
-        <Input aria-label="Name warning" status="warning" defaultValue="A similar name exists" />
-      </div>
-    </Space>
+    <Form layout="vertical" onSubmit={(event) => event.preventDefault()}>
+      <FormField label="Disabled input">
+        <Input disabled placeholder="Currently unavailable" />
+      </FormField>
+      <FormField label="Project name error" error="Project name is required.">
+        <Input placeholder="Enter a project name" />
+      </FormField>
+      <FormField label="Name warning">
+        <Input status="warning" defaultValue="A similar name already exists" />
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/layout/advanced.tsx b/apps/docs/src/examples/en/layout/advanced.tsx
index 5195627..3908fa5 100644
--- a/apps/docs/src/examples/en/layout/advanced.tsx
+++ b/apps/docs/src/examples/en/layout/advanced.tsx
@@ -1,111 +1,38 @@
-import { Layout, Menu } from '@ifhover/leaf-ui';
-import {
-  Folder,
-  LayoutDashboard,
-  Leaf,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Settings,
-} from 'lucide-react';
-import { useEffect, useState } from 'react';
-
+import { Card, Layout, Menu, useBreakpoint } from '@ifhover/leaf-ui';
+import { Folder, LayoutDashboard } from 'lucide-react';
+import { useState } from 'react';
 export function LayoutResponsive() {
   const [collapsed, setCollapsed] = useState(false);
-  const [narrow, setNarrow] = useState(false);
+  const { sm } = useBreakpoint();
+  const compact = collapsed || !sm;
   const [selected, setSelected] = useState('overview');
-  useEffect(() => {
-    const query = matchMedia('(max-width: 640px)');
-    const update = () => setNarrow(query.matches);
-    update();
-    query.addEventListener('change', update);
-    return () => query.removeEventListener('change', update);
-  }, []);
-  const compact = collapsed || narrow;
   const items = [
     { key: 'overview', label: 'Overview', icon: <LayoutDashboard /> },
     { key: 'projects', label: 'Projects', icon: <Folder /> },
-    { key: 'settings', label: 'Settings', icon: <Settings /> },
   ];
   return (
-    <Layout
-      direction="horizontal"
-      style={{
-        width: '100%',
-        minHeight: 360,
-        border: '1px solid var(--leaf-color-border)',
-        borderRadius: 'var(--leaf-radius)',
-        overflow: 'hidden',
-      }}
-    >
+    <Layout direction="horizontal">
       <Layout.Sider
         width={180}
         collapsedWidth={64}
         collapsed={collapsed}
         onCollapse={setCollapsed}
         collapsible
-        breakpoint={640}
-        trigger={compact ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />}
-        style={{ borderInlineEnd: '1px solid var(--leaf-color-border)' }}
+        breakpoint={575}
       >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: compact ? 'center' : 'flex-start',
-            gap: 8,
-            height: 48,
-            paddingInline: compact ? 0 : 12,
-            color: 'var(--leaf-color-primary)',
-          }}
-        >
-          <Leaf size={20} aria-hidden="true" />
-          {!compact && <strong>Leaf Studio</strong>}
-        </div>
         <Menu
-          items={items}
+          mode="inline"
           collapsed={compact}
           selectedKey={selected}
           onSelect={setSelected}
-          style={{ width: '100%', background: 'transparent', padding: 0 }}
+          items={items}
         />
       </Layout.Sider>
-      <Layout>
-        <Layout.Header style={{ borderBottom: '1px solid var(--leaf-color-border)' }}>
-          <strong>Workspace</strong>
-        </Layout.Header>
-        <Layout.Content style={{ padding: 20 }}>
-          <div style={{ color: 'var(--leaf-color-text-muted)', fontSize: 12, marginBottom: 12 }}>
-            Workspace / {items.find((item) => item.key === selected)?.label}
-          </div>
-          <div
-            style={{
-              minHeight: 140,
-              padding: 20,
-              background: 'var(--leaf-color-surface)',
-              border: '1px solid var(--leaf-color-border)',
-              borderRadius: 'var(--leaf-radius)',
-            }}
-          >
-            <h3 style={{ margin: '0 0 8px', fontSize: 17, fontWeight: 600 }}>
-              {items.find((item) => item.key === selected)?.label}
-            </h3>
-            <p style={{ margin: 0, color: 'var(--leaf-color-text-muted)', lineHeight: 1.7 }}>
-              Manage projects and track progress in one workspace.
-            </p>
-          </div>
-        </Layout.Content>
-        <Layout.Footer
-          style={{
-            padding: '12px 20px',
-            background: 'transparent',
-            textAlign: 'center',
-            color: 'var(--leaf-color-text-muted)',
-            fontSize: 12,
-          }}
-        >
-          Leaf Studio · Workspace
-        </Layout.Footer>
-      </Layout>
+      <Layout.Content>
+        <Card title={items.find((item) => item.key === selected)?.label}>
+          Select a navigation item to view its content.
+        </Card>
+      </Layout.Content>
     </Layout>
   );
 }
diff --git a/apps/docs/src/examples/en/layout/basic.tsx b/apps/docs/src/examples/en/layout/basic.tsx
index 75c6bb2..3c03f9a 100644
--- a/apps/docs/src/examples/en/layout/basic.tsx
+++ b/apps/docs/src/examples/en/layout/basic.tsx
@@ -1,48 +1,15 @@
-import { Layout } from '@ifhover/leaf-ui';
-
+import { Layout, Text } from '@ifhover/leaf-ui';
 export function LayoutBasic() {
   return (
-    <Layout
-      style={{
-        width: '100%',
-        minHeight: 300,
-        border: '1px solid var(--leaf-color-border)',
-        borderRadius: 'var(--leaf-radius)',
-        overflow: 'hidden',
-        textAlign: 'center',
-      }}
-    >
-      <Layout.Header
-        style={{
-          background: 'var(--leaf-color-primary-surface-14)',
-          color: 'var(--leaf-color-primary)',
-          fontWeight: 600,
-        }}
-      >
-        Header
+    <Layout>
+      <Layout.Header>
+        <Text>Header</Text>
       </Layout.Header>
       <Layout direction="horizontal">
-        <Layout.Sider
-          width="26%"
-          style={{
-            display: 'grid',
-            placeItems: 'center',
-            background: 'var(--leaf-color-primary-surface-9)',
-          }}
-        >
-          Sider
-        </Layout.Sider>
-        <Layout.Content style={{ display: 'grid', placeItems: 'center', minHeight: 180 }}>
-          Content
-        </Layout.Content>
+        <Layout.Sider width={140}>Sidebar</Layout.Sider>
+        <Layout.Content>Content</Layout.Content>
       </Layout>
-      <Layout.Footer
-        style={{
-          background: 'var(--leaf-color-primary-surface-6)',
-        }}
-      >
-        Footer
-      </Layout.Footer>
+      <Layout.Footer>Footer</Layout.Footer>
     </Layout>
   );
 }
diff --git a/apps/docs/src/examples/en/loading/overlay.tsx b/apps/docs/src/examples/en/loading/overlay.tsx
index e3e4fc5..ffd8594 100644
--- a/apps/docs/src/examples/en/loading/overlay.tsx
+++ b/apps/docs/src/examples/en/loading/overlay.tsx
@@ -1,18 +1,18 @@
-import { Button, Loading, Space } from '@ifhover/leaf-ui';
+import { Button, Card, Loading, Space } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function LoadingOverlay() {
   const [spinning, setSpinning] = useState(true);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => setSpinning(!spinning)}>
         {spinning ? 'Finish loading' : 'Start loading'}
       </Button>
       <Loading spinning={spinning} tip="Loading projects" delay={200}>
-        <div className="leaf-demo-surface">
+        <Card>
           <strong>Leaf Garden</strong>
           <p>See project details and recent updates here.</p>
           <Button variant="outline">Edit project</Button>
-        </div>
+        </Card>
       </Loading>
     </Space>
   );
diff --git a/apps/docs/src/examples/en/loading/sizes.tsx b/apps/docs/src/examples/en/loading/sizes.tsx
index 508b5b0..a23c862 100644
--- a/apps/docs/src/examples/en/loading/sizes.tsx
+++ b/apps/docs/src/examples/en/loading/sizes.tsx
@@ -1,19 +1,19 @@
-import { Loading, Space } from '@ifhover/leaf-ui';
+import { Flex, Loading, Text } from '@ifhover/leaf-ui';
 export function LoadingSizes() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Small</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Small</Text>
         <Loading size="sm" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Medium</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Medium</Text>
         <Loading />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Large</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Large</Text>
         <Loading size="lg" />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/menu/advanced.tsx b/apps/docs/src/examples/en/menu/advanced.tsx
index 70c17e6..8600614 100644
--- a/apps/docs/src/examples/en/menu/advanced.tsx
+++ b/apps/docs/src/examples/en/menu/advanced.tsx
@@ -1,4 +1,5 @@
-import { Button, Menu, type MenuItem, Space } from '@ifhover/leaf-ui';
+import type { MenuItem } from '@ifhover/leaf-ui';
+import { Button, Flex, Menu, Text } from '@ifhover/leaf-ui';
 import { BookOpen, Folder, House, Palette, Settings } from 'lucide-react';
 import { useState } from 'react';
 
@@ -18,18 +19,18 @@ const items: MenuItem[] = [
 export function MenuHorizontal() {
   const [collapsed, setCollapsed] = useState(false);
   return (
-    <Space direction="vertical" align="start" size={20}>
-      <div className="leaf-demo-case">
-        <p className="leaf-demo-note">Horizontal navigation</p>
+    <Flex direction="column" gap={20}>
+      <Flex direction="column" gap="sm" align="center">
+        <Text tone="muted">Horizontal navigation</Text>
         <Menu mode="horizontal" items={items} defaultSelectedKey="home" />
-      </div>
-      <div className="leaf-demo-case">
-        <p className="leaf-demo-note">Collapsible sidebar</p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text tone="muted">Collapsible sidebar</Text>
         <Button variant="ghost" size="sm" onClick={() => setCollapsed((value) => !value)}>
           Toggle sidebar
         </Button>
         <Menu collapsed={collapsed} items={items} defaultSelectedKey="home" />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/message/basic.tsx b/apps/docs/src/examples/en/message/basic.tsx
index 0cfab8b..a167302 100644
--- a/apps/docs/src/examples/en/message/basic.tsx
+++ b/apps/docs/src/examples/en/message/basic.tsx
@@ -1,4 +1,4 @@
-import { Button, Space, useMessage } from '@ifhover/leaf-ui';
+import { Button, Flex, useMessage } from '@ifhover/leaf-ui';
 export function MessageBasic() {
   const { message } = useMessage();
   async function save() {
@@ -13,7 +13,7 @@ export function MessageBasic() {
     });
   }
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       <Button onClick={save}>Save asynchronously</Button>
       <Button variant="outline" onClick={() => message.info('An information message')}>
         Information
@@ -30,6 +30,6 @@ export function MessageBasic() {
       <Button variant="ghost" onClick={() => message.close()}>
         Clear messages
       </Button>
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/message/shared.tsx b/apps/docs/src/examples/en/message/shared.tsx
index 31e339a..9710e54 100644
--- a/apps/docs/src/examples/en/message/shared.tsx
+++ b/apps/docs/src/examples/en/message/shared.tsx
@@ -1,4 +1,4 @@
-import { Button, Space, useMessage } from '@ifhover/leaf-ui';
+import { Button, Flex, useMessage } from '@ifhover/leaf-ui';
 
 function PublishAction() {
   const { message } = useMessage();
@@ -35,9 +35,9 @@ function PublishResult() {
 
 export function MessageShared() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       <PublishAction />
       <PublishResult />
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/modal/description.tsx b/apps/docs/src/examples/en/modal/description.tsx
new file mode 100644
index 0000000..aced816
--- /dev/null
+++ b/apps/docs/src/examples/en/modal/description.tsx
@@ -0,0 +1,25 @@
+import { Button, Modal } from '@ifhover/leaf-ui';
+import { Save } from 'lucide-react';
+import { useState } from 'react';
+
+export function ModalDescription() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        Icon and description
+      </Button>
+      <Modal
+        open={open}
+        title="Save settings"
+        description="Your changes take effect immediately after saving."
+        icon={<Save />}
+        confirmText="Save"
+        onClose={() => setOpen(false)}
+        onConfirm={() => setOpen(false)}
+      >
+        Save the current settings?
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/src/examples/en/pagination/basic.tsx b/apps/docs/src/examples/en/pagination/basic.tsx
index aec9950..2ace1a3 100644
--- a/apps/docs/src/examples/en/pagination/basic.tsx
+++ b/apps/docs/src/examples/en/pagination/basic.tsx
@@ -1,27 +1,16 @@
-import { Pagination, Space } from '@ifhover/leaf-ui';
-import { useState } from 'react';
+import { Pagination, Space, Text } from '@ifhover/leaf-ui';
+
 export function PaginationBasic() {
-  const [current, setCurrent] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Pagination
-        total={240}
-        current={current}
-        pageSize={pageSize}
-        showSizeChanger
-        showQuickJumper
-        showTotal={(total, [start, end]) => `${start}–${end} / ${total} items`}
-        onChange={(page, size) => {
-          setCurrent(page);
-          setPageSize(size);
-        }}
-      />
-      <Pagination total={50} size="sm" />
-      <Pagination total={240} simple disabled />
-      <p className="leaf-demo-note">
-        Current page: {current}; page size: {pageSize} items.
-      </p>
+    <Space direction="vertical" align="center" size="lg">
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">Outline (default)</Text>
+        <Pagination total={50} defaultCurrent={2} />
+      </Space>
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">Ghost</Text>
+        <Pagination total={50} defaultCurrent={2} variant="ghost" />
+      </Space>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/pagination/controlled.tsx b/apps/docs/src/examples/en/pagination/controlled.tsx
new file mode 100644
index 0000000..210d7ac
--- /dev/null
+++ b/apps/docs/src/examples/en/pagination/controlled.tsx
@@ -0,0 +1,17 @@
+import { Pagination } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function PaginationControlled() {
+  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
+
+  return (
+    <Pagination
+      total={240}
+      {...pagination}
+      showTotal
+      showSizeChanger
+      showQuickJumper
+      onChange={(current, pageSize) => setPagination({ current, pageSize })}
+    />
+  );
+}
diff --git a/apps/docs/src/examples/en/pagination/sizes.tsx b/apps/docs/src/examples/en/pagination/sizes.tsx
new file mode 100644
index 0000000..e53e259
--- /dev/null
+++ b/apps/docs/src/examples/en/pagination/sizes.tsx
@@ -0,0 +1,20 @@
+import { Pagination, Space, Text } from '@ifhover/leaf-ui';
+
+export function PaginationSizes() {
+  return (
+    <Space direction="vertical" align="center" size="lg">
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">Small</Text>
+        <Pagination total={30} defaultCurrent={2} size="sm" />
+      </Space>
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">Default</Text>
+        <Pagination total={30} defaultCurrent={2} size="md" />
+      </Space>
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">Large</Text>
+        <Pagination total={30} defaultCurrent={2} size="lg" />
+      </Space>
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/en/pagination/states.tsx b/apps/docs/src/examples/en/pagination/states.tsx
new file mode 100644
index 0000000..8a388aa
--- /dev/null
+++ b/apps/docs/src/examples/en/pagination/states.tsx
@@ -0,0 +1,16 @@
+import { Pagination, Space, Text } from '@ifhover/leaf-ui';
+
+export function PaginationStates() {
+  return (
+    <Space direction="vertical" align="center" size="lg">
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">Simple</Text>
+        <Pagination total={240} defaultCurrent={3} simple />
+      </Space>
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">Disabled</Text>
+        <Pagination total={50} defaultCurrent={2} disabled />
+      </Space>
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/en/popover/basic.tsx b/apps/docs/src/examples/en/popover/basic.tsx
index e29de04..3025b04 100644
--- a/apps/docs/src/examples/en/popover/basic.tsx
+++ b/apps/docs/src/examples/en/popover/basic.tsx
@@ -1,7 +1,7 @@
-import { Button, Popover, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Popover } from '@ifhover/leaf-ui';
 export function PopoverBasic() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       <Popover title="Project details" content="See project details and recent updates here.">
         <Button variant="outline">Click for details</Button>
       </Popover>
@@ -13,6 +13,6 @@ export function PopoverBasic() {
       >
         <Button variant="outline">Hover for details</Button>
       </Popover>
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/popover/controlled.tsx b/apps/docs/src/examples/en/popover/controlled.tsx
index 635e9c3..023425f 100644
--- a/apps/docs/src/examples/en/popover/controlled.tsx
+++ b/apps/docs/src/examples/en/popover/controlled.tsx
@@ -1,7 +1,6 @@
-import { Button, Input, Popover, Space } from '@ifhover/leaf-ui';
-import { useId, useState } from 'react';
+import { Button, Form, FormField, Input, Popover } from '@ifhover/leaf-ui';
+import { useState } from 'react';
 export function PopoverControlled() {
-  const id = useId();
   const [open, setOpen] = useState(false);
   return (
     <Popover
@@ -10,13 +9,18 @@ export function PopoverControlled() {
       onOpenChange={setOpen}
       width={260}
       content={
-        <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-          <label className="leaf-demo-field" htmlFor={id}>
-            Project name
-            <Input id={id} defaultValue="Leaf Garden" />
-          </label>
-          <Button onClick={() => setOpen(false)}>Save and close</Button>
-        </Space>
+        <Form
+          layout="vertical"
+          onSubmit={(event) => {
+            event.preventDefault();
+            setOpen(false);
+          }}
+        >
+          <FormField label="Project name">
+            <Input defaultValue="Leaf Garden" />
+          </FormField>
+          <Button type="submit">Save and close</Button>
+        </Form>
       }
     >
       <Button variant="outline">Click to edit</Button>
diff --git a/apps/docs/src/examples/en/popover/placements.tsx b/apps/docs/src/examples/en/popover/placements.tsx
index 80e7286..753c4ed 100644
--- a/apps/docs/src/examples/en/popover/placements.tsx
+++ b/apps/docs/src/examples/en/popover/placements.tsx
@@ -1,7 +1,7 @@
-import { Button, Popover, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Popover } from '@ifhover/leaf-ui';
 export function PopoverPlacements() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       {(['top', 'bottom', 'left', 'right'] as const).map((placement) => (
         <Popover
           key={placement}
@@ -14,6 +14,6 @@ export function PopoverPlacements() {
           </Button>
         </Popover>
       ))}
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/progress/basic.tsx b/apps/docs/src/examples/en/progress/basic.tsx
index 8fc7c3b..1194043 100644
--- a/apps/docs/src/examples/en/progress/basic.tsx
+++ b/apps/docs/src/examples/en/progress/basic.tsx
@@ -1,11 +1,11 @@
-import { Button, Progress, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Progress, Space } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function ProgressBasic() {
   const [percent, setPercent] = useState(45);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Progress percent={percent} aria-label="Upload progress" />
-      <Space wrap className="leaf-demo-row">
+      <Flex gap="md" align="center" wrap justify="center">
         <Button
           variant="outline"
           disabled={percent === 0}
@@ -16,7 +16,7 @@ export function ProgressBasic() {
         <Button disabled={percent === 100} onClick={() => setPercent(Math.min(100, percent + 10))}>
           Increase
         </Button>
-      </Space>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/progress/circles.tsx b/apps/docs/src/examples/en/progress/circles.tsx
index 3fe12ff..151e482 100644
--- a/apps/docs/src/examples/en/progress/circles.tsx
+++ b/apps/docs/src/examples/en/progress/circles.tsx
@@ -1,19 +1,19 @@
-import { Progress, Space } from '@ifhover/leaf-ui';
+import { Flex, Progress, Text } from '@ifhover/leaf-ui';
 export function ProgressCircles() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">In progress</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>In progress</Text>
         <Progress percent={45} type="circle" size={80} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Complete</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Complete</Text>
         <Progress percent={100} type="circle" size={80} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Failed</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>Failed</Text>
         <Progress percent={60} type="circle" status="error" size={80} />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/progress/states.tsx b/apps/docs/src/examples/en/progress/states.tsx
index c2d3fab..751a5d5 100644
--- a/apps/docs/src/examples/en/progress/states.tsx
+++ b/apps/docs/src/examples/en/progress/states.tsx
@@ -1,23 +1,23 @@
-import { Progress, Space } from '@ifhover/leaf-ui';
+import { Flex, Progress, Space, Text } from '@ifhover/leaf-ui';
 export function ProgressStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Static progress</span>
+    <Space direction="vertical" align="stretch">
+      <Flex direction="column" gap="sm">
+        <Text>Static progress</Text>
         <Progress percent={45} active={false} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Task failed</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>Task failed</Text>
         <Progress percent={70} status="error" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Task complete</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>Task complete</Text>
         <Progress percent={100} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Unknown duration</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>Unknown duration</Text>
         <Progress indeterminate />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/qr-code/advanced.tsx b/apps/docs/src/examples/en/qr-code/advanced.tsx
index 450271a..75b4583 100644
--- a/apps/docs/src/examples/en/qr-code/advanced.tsx
+++ b/apps/docs/src/examples/en/qr-code/advanced.tsx
@@ -1,15 +1,15 @@
-import { QRCode, Space } from '@ifhover/leaf-ui';
+import { Flex, QRCode, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function QRCodeStatus() {
   const [expired, setExpired] = useState(true);
   return (
-    <Space wrap className="leaf-demo-row">
-      <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-        <strong className="leaf-demo-note">Loading</strong>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Space direction="vertical" align="stretch">
+        <Text tone="muted">Loading</Text>
         <QRCode value="Leaf UI" size={140} status="loading" />
       </Space>
-      <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-        <strong className="leaf-demo-note">Refresh after expiry</strong>
+      <Space direction="vertical" align="stretch">
+        <Text tone="muted">Refresh after expiry</Text>
         <QRCode
           value="Leaf UI"
           size={140}
@@ -17,10 +17,10 @@ export function QRCodeStatus() {
           onRefresh={() => setExpired(false)}
         />
       </Space>
-      <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-        <strong className="leaf-demo-note">Custom color</strong>
+      <Space direction="vertical" align="stretch">
+        <Text tone="muted">Custom color</Text>
         <QRCode value="Leaf UI" size={140} color="#2463eb" />
       </Space>
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/radio/controlled.tsx b/apps/docs/src/examples/en/radio/controlled.tsx
index 3f8f50b..336d25d 100644
--- a/apps/docs/src/examples/en/radio/controlled.tsx
+++ b/apps/docs/src/examples/en/radio/controlled.tsx
@@ -1,10 +1,10 @@
-import { RadioGroup, Space } from '@ifhover/leaf-ui';
+import { RadioGroup, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function RadioControlled() {
   const [value, setValue] = useState('daily');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <RadioGroup
         label="Notification frequency"
         direction="vertical"
@@ -16,7 +16,7 @@ export function RadioControlled() {
           { label: 'Important messages only', value: 'important' },
         ]}
       />
-      <span className="leaf-demo-note">Selected:{value}</span>
+      <Text tone="muted">Selected:{value}</Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/rate/basic.tsx b/apps/docs/src/examples/en/rate/basic.tsx
index 606ab5f..73e9daa 100644
--- a/apps/docs/src/examples/en/rate/basic.tsx
+++ b/apps/docs/src/examples/en/rate/basic.tsx
@@ -1,11 +1,13 @@
-import { Rate, Space } from '@ifhover/leaf-ui';
+import { Rate, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function RateBasic() {
   const [value, setValue] = useState(3.5);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Rate aria-label="Project rating" value={value} onChange={setValue} allowHalf />
-      <output className="leaf-demo-note">Current rating: {value}</output>
+      <output>
+        <Text tone="muted">Current rating: {value}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/rate/colors.tsx b/apps/docs/src/examples/en/rate/colors.tsx
index 12069c9..7a6b59e 100644
--- a/apps/docs/src/examples/en/rate/colors.tsx
+++ b/apps/docs/src/examples/en/rate/colors.tsx
@@ -1,17 +1,19 @@
-import { Rate, Space } from '@ifhover/leaf-ui';
+import { Flex, Rate, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function RateColors() {
   const [value, setValue] = useState(2);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Rate aria-label="Score colors" value={value} onChange={setValue} colorByValue />
-      <output className="leaf-demo-note">
-        Coral for low scores, amber for medium and yellow for high. Current rating: {value}
+      <output>
+        <Text tone="muted">
+          Coral for low scores, amber for medium and yellow for high. Current rating: {value}
+        </Text>
       </output>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Brand color</span>
+      <Flex direction="column" gap="sm">
+        <Text>Brand color</Text>
         <Rate defaultValue={4} readOnly color="#7654c6" />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/rate/states.tsx b/apps/docs/src/examples/en/rate/states.tsx
index 7008046..d1e0af3 100644
--- a/apps/docs/src/examples/en/rate/states.tsx
+++ b/apps/docs/src/examples/en/rate/states.tsx
@@ -1,15 +1,15 @@
-import { Rate, Space } from '@ifhover/leaf-ui';
+import { Flex, Rate, Space, Text } from '@ifhover/leaf-ui';
 export function RateStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Read-only rating</span>
+    <Space direction="vertical" align="stretch">
+      <Flex direction="column" gap="sm">
+        <Text>Read-only rating</Text>
         <Rate defaultValue={4} readOnly />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled rating</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>Disabled rating</Text>
         <Rate defaultValue={2} disabled size="sm" />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/result/states.tsx b/apps/docs/src/examples/en/result/states.tsx
index 2a20235..f71e86d 100644
--- a/apps/docs/src/examples/en/result/states.tsx
+++ b/apps/docs/src/examples/en/result/states.tsx
@@ -1,7 +1,7 @@
 import { Button, Result, Space } from '@ifhover/leaf-ui';
 export function ResultStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Result
         status="empty"
         size="sm"
diff --git a/apps/docs/src/examples/en/scroll-area/advanced.tsx b/apps/docs/src/examples/en/scroll-area/advanced.tsx
index c9c5e30..ec9db53 100644
--- a/apps/docs/src/examples/en/scroll-area/advanced.tsx
+++ b/apps/docs/src/examples/en/scroll-area/advanced.tsx
@@ -2,7 +2,7 @@ import { Card, ScrollArea, Space } from '@ifhover/leaf-ui';
 
 export function ScrollAreaHorizontal() {
   return (
-    <ScrollArea orientation="horizontal" style={{ width: '100%' }} aria-label="Horizontal cards">
+    <ScrollArea orientation="horizontal" aria-label="Horizontal cards">
       <Space size={12}>
         {['A', 'B', 'C', 'D', 'E'].map((name) => (
           <Card key={name} title={name} style={{ width: 180, flex: 'none' }}>
diff --git a/apps/docs/src/examples/en/segmented/advanced.tsx b/apps/docs/src/examples/en/segmented/advanced.tsx
index 1366941..6a04166 100644
--- a/apps/docs/src/examples/en/segmented/advanced.tsx
+++ b/apps/docs/src/examples/en/segmented/advanced.tsx
@@ -1,9 +1,9 @@
-import { Segmented, Space } from '@ifhover/leaf-ui';
+import { Segmented, Space, Text } from '@ifhover/leaf-ui';
 
 export function SegmentedOptions() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <strong className="leaf-demo-note">Fill container</strong>
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">Fill container</Text>
       <Segmented
         block
         options={[
@@ -12,7 +12,7 @@ export function SegmentedOptions() {
           { value: 'archived', label: 'Archive (unavailable', disabled: true },
         ]}
       />
-      <strong className="leaf-demo-note">Small size</strong>
+      <Text tone="muted">Small size</Text>
       <Segmented size="sm" options={['A', 'B', 'C']} />
     </Space>
   );
diff --git a/apps/docs/src/examples/en/segmented/basic.tsx b/apps/docs/src/examples/en/segmented/basic.tsx
index 5bad4f3..afa5e74 100644
--- a/apps/docs/src/examples/en/segmented/basic.tsx
+++ b/apps/docs/src/examples/en/segmented/basic.tsx
@@ -1,11 +1,13 @@
-import { Segmented, Space } from '@ifhover/leaf-ui';
+import { Segmented, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function SegmentedBasic() {
   const [value, setValue] = useState('Weekly');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Segmented options={['Daily', 'Weekly', 'Monthly']} value={value} onChange={setValue} />
-      <output className="leaf-demo-note">Current view: {value}</output>
+      <output>
+        <Text tone="muted">Current view: {value}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/select/basic.tsx b/apps/docs/src/examples/en/select/basic.tsx
index 27ec769..4145470 100644
--- a/apps/docs/src/examples/en/select/basic.tsx
+++ b/apps/docs/src/examples/en/select/basic.tsx
@@ -1,4 +1,4 @@
-import { Select, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Select } from '@ifhover/leaf-ui';
 
 const options = [
   { label: 'Design studio', value: 'design' },
@@ -9,19 +9,16 @@ const options = [
 
 export function SelectBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Choose a team</span>
+    <Form layout="vertical">
+      <FormField label="Choose a team">
         <Select aria-label="Choose a team" options={options} placeholder="Select a team" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Default team</span>
+      </FormField>
+      <FormField label="Default team">
         <Select aria-label="Default team" options={options} defaultValue="design" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled team</span>
+      </FormField>
+      <FormField label="Disabled team">
         <Select aria-label="Disabled team" options={options} disabled defaultValue="product" />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/select/controlled.tsx b/apps/docs/src/examples/en/select/controlled.tsx
index 932e57a..835b1b7 100644
--- a/apps/docs/src/examples/en/select/controlled.tsx
+++ b/apps/docs/src/examples/en/select/controlled.tsx
@@ -1,12 +1,11 @@
-import { Select, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Select, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function SelectControlled() {
   const [value, setValue] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Project visibility</span>
+    <Form layout="vertical">
+      <FormField label="Project visibility">
         <Select
           aria-label="Project visibility"
           value={value}
@@ -19,17 +18,16 @@ export function SelectControlled() {
             { label: 'Private', value: 'private' },
           ]}
         />
-      </div>
-      <span className="leaf-demo-note">Current:{value || 'Not selected'}</span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Team required · Error</span>
+      </FormField>
+      <Text tone="muted">Current:{value || 'Not selected'}</Text>
+      <FormField label="Team required · Error">
         <Select
           aria-label="Team required"
           status="error"
           placeholder="Select a team"
           options={[{ label: 'Design team', value: 'design' }]}
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/select/popup.tsx b/apps/docs/src/examples/en/select/popup.tsx
index cc90888..5918907 100644
--- a/apps/docs/src/examples/en/select/popup.tsx
+++ b/apps/docs/src/examples/en/select/popup.tsx
@@ -1,4 +1,5 @@
-import { Select, type SelectOption, Space } from '@ifhover/leaf-ui';
+import type { SelectOption } from '@ifhover/leaf-ui';
+import { Form, FormField, Select } from '@ifhover/leaf-ui';
 
 const options: SelectOption[] = [
   { value: 'garden', label: 'Leaf Garden Design System' },
@@ -7,18 +8,16 @@ const options: SelectOption[] = [
 ];
 export function SelectPopup() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Automatic popup width</span>
+    <Form layout="vertical">
+      <FormField label="Automatic popup width">
         <Select
           aria-label="Automatic popup width"
           style={{ width: 180 }}
           options={options}
           defaultValue="studio"
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Fixed popup width</span>
+      </FormField>
+      <FormField label="Fixed popup width">
         <Select
           aria-label="Fixed popup width"
           popupWidth={300}
@@ -32,9 +31,8 @@ export function SelectPopup() {
             </div>
           )}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Selection limit</span>
+      </FormField>
+      <FormField label="Selection limit">
         <Select
           aria-label="Selection limit"
           multiple
@@ -44,15 +42,13 @@ export function SelectPopup() {
           maxTagCount={1}
           allowClear
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Loading options</span>
+      </FormField>
+      <FormField label="Loading options">
         <Select aria-label="Loading options" options={[]} loading placeholder="Loading" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Empty options</span>
+      </FormField>
+      <FormField label="Empty options">
         <Select aria-label="Empty options" options={[]} notFoundContent="No projects yet" />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/select/search.tsx b/apps/docs/src/examples/en/select/search.tsx
index 79f70b0..0ef47e7 100644
--- a/apps/docs/src/examples/en/select/search.tsx
+++ b/apps/docs/src/examples/en/select/search.tsx
@@ -1,4 +1,5 @@
-import { Select, type SelectOption, Space } from '@ifhover/leaf-ui';
+import type { SelectOption } from '@ifhover/leaf-ui';
+import { Form, FormField, Select, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const options: SelectOption[] = [
@@ -9,9 +10,8 @@ const options: SelectOption[] = [
 export function SelectSearch() {
   const [teams, setTeams] = useState<string[]>(['design']);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Search teams</span>
+    <Form layout="vertical">
+      <FormField label="Search teams">
         <Select
           aria-label="Search teams"
           showSearch
@@ -19,9 +19,8 @@ export function SelectSearch() {
           options={options}
           placeholder="Type to search"
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Choose several teams</span>
+      </FormField>
+      <FormField label="Choose several teams">
         <Select
           aria-label="Choose several teams"
           multiple
@@ -31,8 +30,10 @@ export function SelectSearch() {
           value={teams}
           onChange={setTeams}
         />
-      </div>
-      <output className="leaf-demo-note">{teams.join(', ') || '—'}</output>
-    </Space>
+      </FormField>
+      <output>
+        <Text tone="muted">{teams.join(', ') || '—'}</Text>
+      </output>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/select/single-line.tsx b/apps/docs/src/examples/en/select/single-line.tsx
new file mode 100644
index 0000000..5b3e815
--- /dev/null
+++ b/apps/docs/src/examples/en/select/single-line.tsx
@@ -0,0 +1,29 @@
+import { Form, FormField, Select } from '@ifhover/leaf-ui';
+
+const options = [
+  { value: '0', label: 'A longer design team name' },
+  { value: '1', label: 'Frontend' },
+  { value: '2', label: 'Backend' },
+  { value: '3', label: 'Operations' },
+];
+const selected = options.map((option) => option.value);
+
+export function SingleLine() {
+  return (
+    <Form layout="vertical">
+      <FormField label="Single line with long labels">
+        <Select
+          multiple
+          showSearch
+          allowClear
+          tagWrap={false}
+          options={options}
+          defaultValue={selected}
+        />
+      </FormField>
+      <FormField label="Wrapping by default">
+        <Select multiple options={options} defaultValue={selected} />
+      </FormField>
+    </Form>
+  );
+}
diff --git a/apps/docs/src/examples/en/select/theme.tsx b/apps/docs/src/examples/en/select/theme.tsx
deleted file mode 100644
index cc32c7d..0000000
--- a/apps/docs/src/examples/en/select/theme.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ConfigProvider, type LeafTheme, Select } from '@ifhover/leaf-ui';
-
-const theme: LeafTheme = {
-  primaryColor: '#7654c6',
-  borderRadius: 6,
-};
-
-export function SelectTheme() {
-  return (
-    <ConfigProvider className="leaf-demo-stack" theme={theme}>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Themed team</span>
-        <Select
-          aria-label="Themed team"
-          allowClear
-          defaultValue="design"
-          options={[
-            { value: 'design', label: 'Design studio' },
-            { value: 'product', label: 'Product team' },
-          ]}
-        />
-      </div>
-      <span className="leaf-demo-note">
-        Open the list to see its purple theme and border radius.
-      </span>
-    </ConfigProvider>
-  );
-}
diff --git a/apps/docs/src/examples/en/signature-pad/advanced.tsx b/apps/docs/src/examples/en/signature-pad/advanced.tsx
deleted file mode 100644
index 1d5f770..0000000
--- a/apps/docs/src/examples/en/signature-pad/advanced.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Button, SignaturePad, Space } from '@ifhover/leaf-ui';
-import { useState } from 'react';
-export function SignaturePadControlled() {
-  const [strokes, setStrokes] = useState<import('@ifhover/leaf-ui').SignatureStroke[]>([]);
-  return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <SignaturePad
-        value={strokes}
-        onChange={setStrokes}
-        penColor="#2463eb"
-        minWidth={1}
-        maxWidth={3}
-      />
-      <output className="leaf-demo-note">Stroke count: {strokes.length}</output>
-      <Button variant="ghost" onClick={() => setStrokes([])}>
-        Clear controlled value
-      </Button>
-    </Space>
-  );
-}
diff --git a/apps/docs/src/examples/en/signature-pad/basic.tsx b/apps/docs/src/examples/en/signature-pad/basic.tsx
deleted file mode 100644
index 80d166e..0000000
--- a/apps/docs/src/examples/en/signature-pad/basic.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Button, Image, SignaturePad, Space } from '@ifhover/leaf-ui';
-import { useEffect, useRef, useState } from 'react';
-export function SignaturePadBasic() {
-  const pad = useRef<import('@ifhover/leaf-ui').SignaturePadHandle>(null);
-  const [result, setResult] = useState<Blob | null>(null);
-  const [preview, setPreview] = useState('');
-  useEffect(() => {
-    if (!result) return;
-    const url = URL.createObjectURL(result);
-    setPreview(url);
-    return () => URL.revokeObjectURL(url);
-  }, [result]);
-  return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <SignaturePad ref={pad} />
-      <Button
-        variant="outline"
-        onClick={async () => {
-          const blob = await pad.current?.export();
-          if (!blob) return;
-          setResult(blob);
-          const url = URL.createObjectURL(blob);
-          const link = document.createElement('a');
-          link.href = url;
-          link.download = 'signature.png';
-          link.click();
-          setTimeout(() => URL.revokeObjectURL(url), 1000);
-        }}
-      >
-        Download signature
-      </Button>
-      {preview && (
-        <div className="leaf-demo-case">
-          <span className="leaf-demo-label">PNG export preview</span>
-          <Image
-            src={preview}
-            alt="Exported signature"
-            preview={false}
-            fit="contain"
-            width="100%"
-          />
-        </div>
-      )}
-    </Space>
-  );
-}
diff --git a/apps/docs/src/examples/en/skeleton/basic.tsx b/apps/docs/src/examples/en/skeleton/basic.tsx
index 05363ef..a0c5836 100644
--- a/apps/docs/src/examples/en/skeleton/basic.tsx
+++ b/apps/docs/src/examples/en/skeleton/basic.tsx
@@ -1,23 +1,23 @@
-import { Button, Skeleton, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Skeleton, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function SkeletonBasic() {
   const [loading, setLoading] = useState(true);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => setLoading(!loading)}>
         Toggle loading
       </Button>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Loading content</span>
+      <Flex direction="column" gap="sm">
+        <Text>Loading content</Text>
         <Skeleton loading={loading} avatar rows={3} rowWidths={['100%', '85%', '55%']} round>
           <p>Project content is ready.</p>
         </Skeleton>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Static placeholder</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>Static placeholder</Text>
         <Skeleton active={false} title={false} rows={2} />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/slider/basic.tsx b/apps/docs/src/examples/en/slider/basic.tsx
index c5ae422..7c9e5df 100644
--- a/apps/docs/src/examples/en/slider/basic.tsx
+++ b/apps/docs/src/examples/en/slider/basic.tsx
@@ -1,4 +1,5 @@
-import { Slider, type SliderMark, Space } from '@ifhover/leaf-ui';
+import type { SliderMark } from '@ifhover/leaf-ui';
+import { Form, FormField, Slider, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const marks: SliderMark[] = [
@@ -9,24 +10,20 @@ const marks: SliderMark[] = [
 export function SliderBasic() {
   const [value, setValue] = useState(35);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Volume</span>
+    <Form layout="vertical">
+      <FormField label="Volume">
         <Slider aria-label="Volume" value={value} onChange={setValue} marks={marks} />
-      </div>
-      <p className="leaf-demo-note">Current value: {value}</p>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Budget</span>
+      </FormField>
+      <Text tone="muted">Current value: {value}</Text>
+      <FormField label="Budget">
         <Slider aria-label="Budget" range defaultValue={[20, 70]} marks={marks} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled value</span>
+      </FormField>
+      <FormField label="Disabled value">
         <Slider aria-label="Disabled value" defaultValue={45} disabled />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Vertical value</span>
+      </FormField>
+      <FormField label="Vertical value">
         <Slider aria-label="Vertical value" vertical defaultValue={60} />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/steps/basic.tsx b/apps/docs/src/examples/en/steps/basic.tsx
index 9dc71b9..6915fd6 100644
--- a/apps/docs/src/examples/en/steps/basic.tsx
+++ b/apps/docs/src/examples/en/steps/basic.tsx
@@ -1,4 +1,5 @@
-import { Button, Space, type StepItem, Steps } from '@ifhover/leaf-ui';
+import type { StepItem } from '@ifhover/leaf-ui';
+import { Button, Flex, Space, Steps, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const items: readonly StepItem[] = [
@@ -9,23 +10,23 @@ const items: readonly StepItem[] = [
 export function StepsBasic() {
   const [current, setCurrent] = useState(1);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Interactive steps</span>
+    <Space direction="vertical" align="stretch">
+      <Flex direction="column" gap="sm">
+        <Text>Interactive steps</Text>
         <Steps items={items} current={current} onChange={setCurrent} />
-      </div>
-      <Space wrap className="leaf-demo-row">
+      </Flex>
+      <Flex gap="md" align="center" wrap justify="center">
         <Button variant="outline" disabled={current === 0} onClick={() => setCurrent(current - 1)}>
           Previous
         </Button>
         <Button disabled={current === 2} onClick={() => setCurrent(current + 1)}>
           Next
         </Button>
-      </Space>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Error feedback</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>Error feedback</Text>
         <Steps items={items} current={1} direction="vertical" status="error" size="sm" />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/switch/controlled.tsx b/apps/docs/src/examples/en/switch/controlled.tsx
index 9b3039e..7c91306 100644
--- a/apps/docs/src/examples/en/switch/controlled.tsx
+++ b/apps/docs/src/examples/en/switch/controlled.tsx
@@ -1,17 +1,17 @@
-import { Space, Switch } from '@ifhover/leaf-ui';
+import { Flex, Space, Switch, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function SwitchControlled() {
   const [checked, setChecked] = useState(true);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Switch checked={checked} onChange={(event) => setChecked(event.target.checked)}>
         Receive email
       </Switch>
-      <span className="leaf-demo-note" aria-live="polite">
+      <Text tone="muted" aria-live="polite">
         {checked ? 'Email notifications enabled' : 'Email notifications disabled'}
-      </span>
-      <Space wrap className="leaf-demo-row">
+      </Text>
+      <Flex gap="md" align="center" wrap justify="center">
         <Switch size="sm" defaultChecked>
           Small
         </Switch>
@@ -19,7 +19,7 @@ export function SwitchControlled() {
         <Switch size="lg" defaultChecked>
           Large
         </Switch>
-      </Space>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/tabs/basic.tsx b/apps/docs/src/examples/en/tabs/basic.tsx
index cd62fcc..a437107 100644
--- a/apps/docs/src/examples/en/tabs/basic.tsx
+++ b/apps/docs/src/examples/en/tabs/basic.tsx
@@ -1,4 +1,5 @@
-import { Input, Space, type TabItem, Tabs } from '@ifhover/leaf-ui';
+import type { TabItem } from '@ifhover/leaf-ui';
+import { Input, Space, Tabs } from '@ifhover/leaf-ui';
 import { ChartNoAxesColumn, Settings } from 'lucide-react';
 
 const items: readonly TabItem[] = [
@@ -6,39 +7,31 @@ const items: readonly TabItem[] = [
     key: 'overview',
     label: 'Overview',
     icon: <ChartNoAxesColumn />,
-    children: <p>View project activity, members and recent updates.</p>,
+    children: 'View project activity, members and recent updates.',
   },
   {
     key: 'settings',
     label: 'Settings',
     icon: <Settings />,
-    children: (
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Project name</span>
-        <Input
-          aria-label="Project name"
-          placeholder="Type, switch tabs, and your draft is preserved"
-        />
-      </div>
-    ),
+    children: <Input aria-label="Project name" placeholder="Type and switch; your draft is kept" />,
   },
   { key: 'history', label: 'History', disabled: true, children: null },
 ];
 export function TabsBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Line tabs</span>
+    <Space direction="vertical" align="stretch">
+      <Space direction="vertical" align="stretch" size="sm">
+        <span>Line tabs</span>
         <Tabs aria-label="Project information" items={items} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Card tabs</span>
-        <Tabs items={items} type="card" size="sm" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Vertical tabs</span>
-        <Tabs items={items} placement="left" />
-      </div>
+      </Space>
+      <Space direction="vertical" align="stretch" size="sm">
+        <span>Card tabs</span>
+        <Tabs aria-label="Card tabs" items={items} type="card" />
+      </Space>
+      <Space direction="vertical" align="stretch" size="sm">
+        <span>Vertical tabs</span>
+        <Tabs aria-label="Vertical tabs" items={items} placement="left" />
+      </Space>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/tabs/closable.tsx b/apps/docs/src/examples/en/tabs/closable.tsx
index 8ca4b32..ac4ddad 100644
--- a/apps/docs/src/examples/en/tabs/closable.tsx
+++ b/apps/docs/src/examples/en/tabs/closable.tsx
@@ -1,4 +1,4 @@
-import { Button, type TabItem, Tabs } from '@ifhover/leaf-ui';
+import { Button, Space, type TabItem, Tabs } from '@ifhover/leaf-ui';
 import { useRef, useState } from 'react';
 export function TabsClosable() {
   const sequence = useRef(2);
@@ -6,29 +6,30 @@ export function TabsClosable() {
     { key: '1', label: 'First project', children: 'First project content', closable: true },
     { key: '2', label: 'Second project', children: 'Second project content', closable: true },
   ]);
+  const addTab = () => {
+    const key = String(++sequence.current);
+    setItems((list) => [
+      ...list,
+      { key, label: `Project ${key}`, children: `Project ${key} content`, closable: true },
+    ]);
+  };
   return (
-    <div className="leaf-demo-case">
-      <span className="leaf-demo-label">Card tabs</span>
+    <Space direction="vertical" align="stretch">
       <Tabs
+        aria-label="Closable tabs"
         items={items}
         type="card"
         onClose={(key) => setItems((list) => list.filter((item) => item.key !== key))}
-        extra={
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => {
-              const key = String(++sequence.current);
-              setItems((list) => [
-                ...list,
-                { key, label: `Project ${key}`, children: `Project ${key}`, closable: true },
-              ]);
-            }}
-          >
-            Add
-          </Button>
-        }
+        onAdd={addTab}
+        addLabel="Add tab"
       />
-    </div>
+      {items.length === 0 && (
+        <Space>
+          <Button variant="outline" onClick={addTab}>
+            Add tab
+          </Button>
+        </Space>
+      )}
+    </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/tabs/extensions.tsx b/apps/docs/src/examples/en/tabs/extensions.tsx
index 967afe2..ce1e227 100644
--- a/apps/docs/src/examples/en/tabs/extensions.tsx
+++ b/apps/docs/src/examples/en/tabs/extensions.tsx
@@ -1,4 +1,4 @@
-import { type TabItem, Tabs } from '@ifhover/leaf-ui';
+import { Button, Space, type TabItem, Tabs } from '@ifhover/leaf-ui';
 import { useRef, useState } from 'react';
 export function ExtensionDemo() {
   const count = useRef(7);
@@ -10,19 +10,30 @@ export function ExtensionDemo() {
       closable: true,
     })),
   );
+  const addTab = () => {
+    const id = String(count.current++);
+    setItems((current) => [
+      ...current,
+      { key: id, label: `Item ${id}`, children: 'New item', closable: true },
+    ]);
+  };
   return (
-    <Tabs
-      items={items}
-      sortable
-      onReorder={setItems}
-      onAdd={() => {
-        const id = String(count.current++);
-        setItems((current) => [
-          ...current,
-          { key: id, label: `Item ${id}`, children: 'New item', closable: true },
-        ]);
-      }}
-      onClose={(key) => setItems((current) => current.filter((item) => item.key !== key))}
-    />
+    <Space direction="vertical" align="stretch">
+      <Tabs
+        aria-label="Sortable tabs"
+        items={items}
+        sortable
+        onReorder={setItems}
+        onAdd={addTab}
+        onClose={(key) => setItems((current) => current.filter((item) => item.key !== key))}
+      />
+      {items.length === 0 && (
+        <Space>
+          <Button variant="outline" onClick={addTab}>
+            Add tab
+          </Button>
+        </Space>
+      )}
+    </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/tabs/sizes.tsx b/apps/docs/src/examples/en/tabs/sizes.tsx
new file mode 100644
index 0000000..8d0ec28
--- /dev/null
+++ b/apps/docs/src/examples/en/tabs/sizes.tsx
@@ -0,0 +1,34 @@
+import { Grid, Space, Tabs, Text } from '@ifhover/leaf-ui';
+
+const items = [
+  { key: 'overview', label: 'Overview', children: 'View recent project updates.' },
+  { key: 'members', label: 'Members', children: 'Manage project members and access.' },
+];
+const labels = { sm: 'Small', md: 'Default', lg: 'Large' };
+const variants = [
+  { type: 'line', label: 'Line tabs' },
+  { type: 'card', label: 'Card tabs' },
+] as const;
+
+export function TabsSizes() {
+  return (
+    <Grid columns={{ xs: 1, sm: 2 }} gap={24}>
+      {variants.map(({ type, label }) => (
+        <Space key={type} direction="vertical" align="stretch" size="lg">
+          <Text strong>{label}</Text>
+          {(['sm', 'md', 'lg'] as const).map((size) => (
+            <Space key={size} direction="vertical" align="stretch" size="sm">
+              <span>{labels[size]}</span>
+              <Tabs
+                aria-label={`${label} · ${labels[size]}`}
+                items={items}
+                type={type}
+                size={size}
+              />
+            </Space>
+          ))}
+        </Space>
+      ))}
+    </Grid>
+  );
+}
diff --git a/apps/docs/src/examples/en/tag/basic.tsx b/apps/docs/src/examples/en/tag/basic.tsx
index 77f4715..6daf23d 100644
--- a/apps/docs/src/examples/en/tag/basic.tsx
+++ b/apps/docs/src/examples/en/tag/basic.tsx
@@ -1,20 +1,20 @@
-import { Space, Tag } from '@ifhover/leaf-ui';
+import { Flex, Space, Tag } from '@ifhover/leaf-ui';
 import { Check } from 'lucide-react';
 export function TagBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Space wrap className="leaf-demo-row">
+    <Space direction="vertical" align="stretch">
+      <Flex gap="md" align="center" wrap justify="center">
         {(['default', 'primary', 'success', 'info', 'warning', 'error'] as const).map((color) => (
           <Tag key={color} color={color}>
             {color}
           </Tag>
         ))}
-      </Space>
-      <Space wrap className="leaf-demo-row">
+      </Flex>
+      <Flex gap="md" align="center" wrap justify="center">
         <Tag color="primary" variant="solid">
           Published
         </Tag>
-        <Tag color="success" variant="outline" icon={<Check />}>
+        <Tag color="success" icon={<Check />}>
           Completed
         </Tag>
         <Tag color="#7654c6" closable>
@@ -23,7 +23,7 @@ export function TagBasic() {
         <Tag size="lg" color="primary">
           Large tag
         </Tag>
-      </Space>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/tag/extensions.tsx b/apps/docs/src/examples/en/tag/extensions.tsx
deleted file mode 100644
index 0d85ea4..0000000
--- a/apps/docs/src/examples/en/tag/extensions.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CheckableTag, Space, TagGroup } from '@ifhover/leaf-ui';
-export function ExtensionDemo() {
-  return (
-    <Space direction="vertical" align="start">
-      <CheckableTag defaultChecked>Favorites only</CheckableTag>
-      <TagGroup
-        aria-label="Tag filters"
-        options={[
-          { value: 'design', label: 'Design' },
-          { value: 'dev', label: 'Development' },
-          { value: 'photo', label: 'Photography' },
-        ]}
-        defaultValue={['design']}
-      />
-    </Space>
-  );
-}
diff --git a/apps/docs/src/examples/en/tailwindcss/basic.tsx b/apps/docs/src/examples/en/tailwindcss/basic.tsx
new file mode 100644
index 0000000..1c0c52f
--- /dev/null
+++ b/apps/docs/src/examples/en/tailwindcss/basic.tsx
@@ -0,0 +1,14 @@
+import { Flex } from '@ifhover/leaf-ui';
+
+export function TailwindBasic() {
+  return (
+    <Flex
+      direction="column"
+      gap="sm"
+      className="rounded-leaf border border-leaf-border bg-leaf-surface p-leaf-md font-leaf text-leaf"
+    >
+      <p className="font-leaf-medium text-leaf-primary">Reuse your theme styles</p>
+      <p className="text-leaf-muted">Share colors, radii and spacing with components.</p>
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/examples/en/tailwindcss/theme.tsx b/apps/docs/src/examples/en/tailwindcss/theme.tsx
new file mode 100644
index 0000000..900cc04
--- /dev/null
+++ b/apps/docs/src/examples/en/tailwindcss/theme.tsx
@@ -0,0 +1,26 @@
+import { Button, ConfigProvider, Flex, Switch } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function TailwindTheme() {
+  const [dark, setDark] = useState(false);
+
+  return (
+    <Flex direction="column" gap="md">
+      <Switch checked={dark} onChange={(event) => setDark(event.target.checked)}>
+        Dark mode
+      </Switch>
+      <ConfigProvider theme={{ primaryColor: '#7654c6', appearance: dark ? 'dark' : 'light' }}>
+        <Flex
+          direction="column"
+          align="start"
+          gap="md"
+          className="rounded-leaf border border-leaf-border bg-leaf-surface p-leaf-md font-leaf text-leaf"
+        >
+          <p className="text-leaf-primary">Utilities and components share a theme</p>
+          <p className="text-leaf-muted">Backgrounds, text and borders change together.</p>
+          <Button>Leaf UI button</Button>
+        </Flex>
+      </ConfigProvider>
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/examples/en/textarea/basic.tsx b/apps/docs/src/examples/en/textarea/basic.tsx
index 02a1416..3542fa7 100644
--- a/apps/docs/src/examples/en/textarea/basic.tsx
+++ b/apps/docs/src/examples/en/textarea/basic.tsx
@@ -1,35 +1,32 @@
-import { Space, Textarea } from '@ifhover/leaf-ui';
+import { Form, FormField, Textarea } from '@ifhover/leaf-ui';
 
 export function TextareaBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Project description</span>
+    <Form layout="vertical">
+      <FormField label="Project description">
         <Textarea
           aria-label="Project description"
           placeholder="Describe your new idea…"
           rows={3}
           maxLength={200}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Read-only introduction</span>
+      </FormField>
+      <FormField label="Read-only introduction">
         <Textarea
           aria-label="Read-only introduction"
           defaultValue="Plant your ideas in the interface."
           readOnly
           rows={2}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled introduction</span>
+      </FormField>
+      <FormField label="Disabled introduction">
         <Textarea
           aria-label="Disabled introduction"
           placeholder="Cannot edit right now"
           disabled
           rows={2}
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/textarea/controlled.tsx b/apps/docs/src/examples/en/textarea/controlled.tsx
index 6270959..a1f0916 100644
--- a/apps/docs/src/examples/en/textarea/controlled.tsx
+++ b/apps/docs/src/examples/en/textarea/controlled.tsx
@@ -1,25 +1,21 @@
-import { Space, Textarea } from '@ifhover/leaf-ui';
+import { Form, FormField, Textarea } from '@ifhover/leaf-ui';
 import { useState } from 'react';
-
 export function TextareaControlled() {
   const [value, setValue] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-field">
+    <Form layout="vertical">
+      <FormField label="Message" help={`${value.length} / 120`}>
         <Textarea
-          aria-label="Comment"
           value={value}
           maxLength={120}
           resize="none"
           placeholder="Up to 120 characters"
           onChange={(event) => setValue(event.target.value)}
         />
-        <span className="leaf-demo-note">{value.length} / 120</span>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Comment error · Error</span>
-        <Textarea aria-label="Comment error" status="error" placeholder="Add a description" />
-      </div>
-    </Space>
+      </FormField>
+      <FormField label="Message error" error="Add a description.">
+        <Textarea placeholder="Add a description" />
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/theming/appearance.tsx b/apps/docs/src/examples/en/theming/appearance.tsx
new file mode 100644
index 0000000..82455ad
--- /dev/null
+++ b/apps/docs/src/examples/en/theming/appearance.tsx
@@ -0,0 +1,19 @@
+import { Button, Card, ConfigProvider, Flex, Switch } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function ThemeAppearance() {
+  const [dark, setDark] = useState(false);
+
+  return (
+    <ConfigProvider theme={{ appearance: dark ? 'dark' : 'light' }}>
+      <Card>
+        <Flex direction="column" gap="md" align="start">
+          <Switch checked={dark} onChange={(event) => setDark(event.target.checked)}>
+            Dark mode
+          </Switch>
+          <Button>Save changes</Button>
+        </Flex>
+      </Card>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/en/theming/basic.tsx b/apps/docs/src/examples/en/theming/basic.tsx
new file mode 100644
index 0000000..09014b6
--- /dev/null
+++ b/apps/docs/src/examples/en/theming/basic.tsx
@@ -0,0 +1,9 @@
+import { Button, ConfigProvider } from '@ifhover/leaf-ui';
+
+export function ThemeBasic() {
+  return (
+    <ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 8 }}>
+      <Button>Save changes</Button>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/en/theming/scoped.tsx b/apps/docs/src/examples/en/theming/scoped.tsx
new file mode 100644
index 0000000..02e5ac3
--- /dev/null
+++ b/apps/docs/src/examples/en/theming/scoped.tsx
@@ -0,0 +1,14 @@
+import { Button, ConfigProvider, Flex } from '@ifhover/leaf-ui';
+
+export function ThemeScoped() {
+  return (
+    <ConfigProvider theme={{ primaryColor: '#1677ff', borderRadius: 8 }}>
+      <Flex direction="column" gap="md" align="start">
+        <Button>Global blue</Button>
+        <ConfigProvider theme={{ primaryColor: '#7654c6' }}>
+          <Button>Local purple</Button>
+        </ConfigProvider>
+      </Flex>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/en/time-picker/basic.tsx b/apps/docs/src/examples/en/time-picker/basic.tsx
index 43bc730..8ed3978 100644
--- a/apps/docs/src/examples/en/time-picker/basic.tsx
+++ b/apps/docs/src/examples/en/time-picker/basic.tsx
@@ -1,20 +1,17 @@
-import { Space, TimePicker } from '@ifhover/leaf-ui';
+import { Form, FormField, TimePicker } from '@ifhover/leaf-ui';
 
 export function TimePickerBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Choose a time</span>
+    <Form layout="vertical">
+      <FormField label="Choose a time">
         <TimePicker aria-label="Choose a time" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Default time</span>
+      </FormField>
+      <FormField label="Default time">
         <TimePicker aria-label="Default time" defaultValue="09:30" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled time</span>
+      </FormField>
+      <FormField label="Disabled time">
         <TimePicker aria-label="Disabled time" defaultValue="18:00" disabled />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/time-picker/controlled.tsx b/apps/docs/src/examples/en/time-picker/controlled.tsx
index c9dd5ae..ec5f1fb 100644
--- a/apps/docs/src/examples/en/time-picker/controlled.tsx
+++ b/apps/docs/src/examples/en/time-picker/controlled.tsx
@@ -1,24 +1,22 @@
-import { Space, TimePicker } from '@ifhover/leaf-ui';
+import { Form, FormField, Text, TimePicker } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function TimePickerControlled() {
   const [time, setTime] = useState<string | null>('14:30');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Meeting time</span>
+    <Form layout="vertical">
+      <FormField label="Meeting time">
         <TimePicker aria-label="Meeting time" value={time} onChange={setTime} minuteStep={15} />
-      </div>
-      <span className="leaf-demo-note">15-minute steps. Current:{time || 'Not selected'}</span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Preserved time</span>
+      </FormField>
+      <Text tone="muted">15-minute steps. Current:{time || 'Not selected'}</Text>
+      <FormField label="Preserved time">
         <TimePicker
           aria-label="Preserved time"
           defaultValue="08:07"
           minuteStep={15}
           allowClear={false}
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/time-picker/twelve-hours.tsx b/apps/docs/src/examples/en/time-picker/twelve-hours.tsx
index 92c9ec0..3d4d834 100644
--- a/apps/docs/src/examples/en/time-picker/twelve-hours.tsx
+++ b/apps/docs/src/examples/en/time-picker/twelve-hours.tsx
@@ -1,13 +1,11 @@
-import { Space, TimePicker } from '@ifhover/leaf-ui';
+import { Form, FormField, TimePicker } from '@ifhover/leaf-ui';
 export function TimePickerTwelveHours() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">12-hour clock</span>
+    <Form layout="vertical">
+      <FormField label="12-hour clock">
         <TimePicker aria-label="12-hour clock" use12Hours defaultValue="14:30" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Include seconds</span>
+      </FormField>
+      <FormField label="Include seconds">
         <TimePicker
           aria-label="Include seconds"
           use12Hours
@@ -15,7 +13,7 @@ export function TimePickerTwelveHours() {
           secondStep={10}
           defaultValue="00:05:30"
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/time-range-picker/advanced.tsx b/apps/docs/src/examples/en/time-range-picker/advanced.tsx
index ecd43b6..8d6f2f1 100644
--- a/apps/docs/src/examples/en/time-range-picker/advanced.tsx
+++ b/apps/docs/src/examples/en/time-range-picker/advanced.tsx
@@ -1,11 +1,11 @@
-import { Space, TimeRangePicker } from '@ifhover/leaf-ui';
+import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';
 
 export function TimeRangePickerOptions() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <strong className="leaf-demo-note">12-hour clock with seconds</strong>
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">12-hour clock with seconds</Text>
       <TimeRangePicker use12Hours showSeconds defaultValue={['09:30:00', '17:45:00']} />
-      <strong className="leaf-demo-note">Allow an overnight range</strong>
+      <Text tone="muted">Allow an overnight range</Text>
       <TimeRangePicker allowOvernight defaultValue={['22:00', '06:00']} />
     </Space>
   );
diff --git a/apps/docs/src/examples/en/time-range-picker/basic.tsx b/apps/docs/src/examples/en/time-range-picker/basic.tsx
index 62b68d0..17601b5 100644
--- a/apps/docs/src/examples/en/time-range-picker/basic.tsx
+++ b/apps/docs/src/examples/en/time-range-picker/basic.tsx
@@ -1,4 +1,4 @@
-import { Space, TimeRangePicker } from '@ifhover/leaf-ui';
+import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function TimeRangePickerBasic() {
   const [value, setValue] = useState<import('@ifhover/leaf-ui').TimeRange | null>([
@@ -6,9 +6,11 @@ export function TimeRangePickerBasic() {
     '18:00',
   ]);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <TimeRangePicker value={value} onChange={setValue} />
-      <output className="leaf-demo-note">{value?.join(' ~ ') || '—'}</output>
+      <output>
+        <Text tone="muted">{value?.join(' ~ ') || '—'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/tooltip/basic.tsx b/apps/docs/src/examples/en/tooltip/basic.tsx
index e5f1714..c42886f 100644
--- a/apps/docs/src/examples/en/tooltip/basic.tsx
+++ b/apps/docs/src/examples/en/tooltip/basic.tsx
@@ -1,8 +1,8 @@
-import { Button, Space, Tooltip } from '@ifhover/leaf-ui';
+import { Button, Flex, Tooltip } from '@ifhover/leaf-ui';
 import { Info } from 'lucide-react';
 export function TooltipBasic() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       {(['top', 'right', 'bottom', 'left'] as const).map((placement) => (
         <Tooltip
           key={placement}
@@ -15,6 +15,6 @@ export function TooltipBasic() {
       <Tooltip content="This setting applies to all projects">
         <Button variant="ghost" startIcon={<Info />} aria-label="Settings information" />
       </Tooltip>
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/en/tree-select/basic.tsx b/apps/docs/src/examples/en/tree-select/basic.tsx
index 865b252..495d05c 100644
--- a/apps/docs/src/examples/en/tree-select/basic.tsx
+++ b/apps/docs/src/examples/en/tree-select/basic.tsx
@@ -1,10 +1,10 @@
-import { Space, TreeSelect } from '@ifhover/leaf-ui';
+import { Space, Text, TreeSelect } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 import { treeOptions } from './options';
 export function TreeSelectBasic() {
   const [value, setValue] = useState<string | null>(null);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <TreeSelect
         options={treeOptions}
         value={value}
@@ -13,8 +13,8 @@ export function TreeSelectBasic() {
         aria-label="Team"
         placeholder="Select a team"
       />
-      <output className="leaf-demo-note">
-        Current value: {typeof value === 'string' ? value : 'None'}
+      <output>
+        <Text tone="muted">Current value: {typeof value === 'string' ? value : 'None'}</Text>
       </output>
     </Space>
   );
diff --git a/apps/docs/src/examples/en/tree-select/multiple.tsx b/apps/docs/src/examples/en/tree-select/multiple.tsx
index ccedb3f..9b18024 100644
--- a/apps/docs/src/examples/en/tree-select/multiple.tsx
+++ b/apps/docs/src/examples/en/tree-select/multiple.tsx
@@ -1,23 +1,20 @@
-import { Space, TreeSelect } from '@ifhover/leaf-ui';
+import { Form, FormField, TreeSelect } from '@ifhover/leaf-ui';
 import { treeOptions } from './options';
 export function TreeSelectMultiple() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Multiple · Select individual items</span>
+    <Form layout="vertical">
+      <FormField label="Multiple · Select individual items">
         <TreeSelect options={treeOptions} multiple defaultValue={['visual']} defaultExpandAll />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Linked checks · Child values</span>
+      </FormField>
+      <FormField label="Linked checks · Child values">
         <TreeSelect
           options={treeOptions}
           treeCheckable
           defaultValue={['visual']}
           defaultExpandAll
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Linked checks · Parent values</span>
+      </FormField>
+      <FormField label="Linked checks · Parent values">
         <TreeSelect
           options={treeOptions}
           treeCheckable
@@ -25,7 +22,7 @@ export function TreeSelectMultiple() {
           defaultValue={['design']}
           defaultExpandAll
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/tree-select/single-line.tsx b/apps/docs/src/examples/en/tree-select/single-line.tsx
new file mode 100644
index 0000000..8ab7583
--- /dev/null
+++ b/apps/docs/src/examples/en/tree-select/single-line.tsx
@@ -0,0 +1,18 @@
+import { Form, FormField, TreeSelect } from '@ifhover/leaf-ui';
+import { treeOptions } from './options';
+
+export function SingleLine() {
+  return (
+    <Form layout="vertical">
+      <FormField label="Multiple values on one line">
+        <TreeSelect
+          treeCheckable
+          tagWrap={false}
+          options={treeOptions}
+          defaultValue={['visual', 'product', 'web', 'server']}
+          treeDefaultExpandedKeys={['design']}
+        />
+      </FormField>
+    </Form>
+  );
+}
diff --git a/apps/docs/src/examples/en/tree-select/states.tsx b/apps/docs/src/examples/en/tree-select/states.tsx
index d7f828a..4cef5d6 100644
--- a/apps/docs/src/examples/en/tree-select/states.tsx
+++ b/apps/docs/src/examples/en/tree-select/states.tsx
@@ -1,20 +1,17 @@
-import { Space, TreeSelect } from '@ifhover/leaf-ui';
+import { Form, FormField, TreeSelect } from '@ifhover/leaf-ui';
 import { treeOptions } from './options';
 export function TreeSelectStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Disabled</span>
+    <Form layout="vertical">
+      <FormField label="Disabled">
         <TreeSelect options={treeOptions} disabled defaultValue="web" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Validation feedback</span>
+      </FormField>
+      <FormField label="Validation feedback">
         <TreeSelect options={treeOptions} status="error" placeholder="Select a team" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">Custom popup width</span>
+      </FormField>
+      <FormField label="Custom popup width">
         <TreeSelect options={treeOptions} popupWidth={320} popupMaxWidth={360} defaultExpandAll />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/en/tree/basic.tsx b/apps/docs/src/examples/en/tree/basic.tsx
index f3f522b..0d68843 100644
--- a/apps/docs/src/examples/en/tree/basic.tsx
+++ b/apps/docs/src/examples/en/tree/basic.tsx
@@ -1,10 +1,10 @@
-import { Space, Tree } from '@ifhover/leaf-ui';
+import { Space, Text, Tree } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 import { treeData } from './data';
 export function TreeBasic() {
   const [selected, setSelected] = useState<readonly string[]>([]);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Tree
         data={treeData}
         defaultExpandedKeys={['design']}
@@ -12,7 +12,9 @@ export function TreeBasic() {
         selectedKeys={selected}
         onSelect={setSelected}
       />
-      <output className="leaf-demo-note">Selected: {selected.join(', ') || 'None'}</output>
+      <output>
+        <Text tone="muted">Selected: {selected.join(', ') || 'None'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/tree/checkable.tsx b/apps/docs/src/examples/en/tree/checkable.tsx
index 0900734..54546e4 100644
--- a/apps/docs/src/examples/en/tree/checkable.tsx
+++ b/apps/docs/src/examples/en/tree/checkable.tsx
@@ -1,10 +1,10 @@
-import { Space, Tree } from '@ifhover/leaf-ui';
+import { Space, Text, Tree } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 import { treeData } from './data';
 export function TreeCheckable() {
   const [checked, setChecked] = useState<readonly string[]>(['components']);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Tree
         data={treeData}
         checkable
@@ -14,7 +14,9 @@ export function TreeCheckable() {
         checkedKeys={checked}
         onCheck={setChecked}
       />
-      <output className="leaf-demo-note">Checked keys: {checked.join(', ') || 'None'}</output>
+      <output>
+        <Text tone="muted">Checked keys: {checked.join(', ') || 'None'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/en/tree/extensions.tsx b/apps/docs/src/examples/en/tree/extensions.tsx
index 6315de2..f019ad5 100644
--- a/apps/docs/src/examples/en/tree/extensions.tsx
+++ b/apps/docs/src/examples/en/tree/extensions.tsx
@@ -1,4 +1,5 @@
-import { Space, Tree, type TreeNode } from '@ifhover/leaf-ui';
+import type { TreeNode } from '@ifhover/leaf-ui';
+import { Space, Tree } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const initial: TreeNode[] = [
diff --git a/apps/docs/src/examples/en/tree/search.tsx b/apps/docs/src/examples/en/tree/search.tsx
index 49c2786..a8741bc 100644
--- a/apps/docs/src/examples/en/tree/search.tsx
+++ b/apps/docs/src/examples/en/tree/search.tsx
@@ -5,7 +5,7 @@ import { treeData } from './data';
 export function TreeSearch() {
   const [query, setQuery] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Input
         aria-label="Search nodes"
         placeholder="Search nodes"
diff --git a/apps/docs/src/examples/en/upload/advanced.tsx b/apps/docs/src/examples/en/upload/advanced.tsx
index 5241bfc..24e2cf6 100644
--- a/apps/docs/src/examples/en/upload/advanced.tsx
+++ b/apps/docs/src/examples/en/upload/advanced.tsx
@@ -1,4 +1,5 @@
-import { Space, Upload, type UploadRequest } from '@ifhover/leaf-ui';
+import type { UploadRequest } from '@ifhover/leaf-ui';
+import { Space, Text, Upload } from '@ifhover/leaf-ui';
 
 const demoRequest = ({ signal, onProgress }: UploadRequest) =>
   new Promise<void>((resolve, reject) => {
@@ -24,11 +25,11 @@ const demoRequest = ({ signal, onProgress }: UploadRequest) =>
   });
 export function UploadDrag() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <p className="leaf-demo-note">
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">
         This demo simulates progress locally. Use action or customRequest to connect your upload
         service.
-      </p>
+      </Text>
       <Upload
         drag
         multiple
diff --git a/apps/docs/src/examples/en/upload/basic.tsx b/apps/docs/src/examples/en/upload/basic.tsx
index 97f6266..64b5730 100644
--- a/apps/docs/src/examples/en/upload/basic.tsx
+++ b/apps/docs/src/examples/en/upload/basic.tsx
@@ -1,7 +1,7 @@
 import { Space, Upload } from '@ifhover/leaf-ui';
 export function UploadBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Upload
         multiple
         accept="image/*,.pdf,.txt"
diff --git a/apps/docs/src/examples/en/virtual-list/advanced.tsx b/apps/docs/src/examples/en/virtual-list/advanced.tsx
index 172bf48..4318529 100644
--- a/apps/docs/src/examples/en/virtual-list/advanced.tsx
+++ b/apps/docs/src/examples/en/virtual-list/advanced.tsx
@@ -9,7 +9,7 @@ export function VirtualListDynamic() {
     })),
   );
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => list.current?.scrollToIndex(500, 'start')}>
         Go to item 501
       </Button>
diff --git a/apps/docs/src/examples/en/virtual-list/basic.tsx b/apps/docs/src/examples/en/virtual-list/basic.tsx
index 812a098..668afc4 100644
--- a/apps/docs/src/examples/en/virtual-list/basic.tsx
+++ b/apps/docs/src/examples/en/virtual-list/basic.tsx
@@ -9,7 +9,6 @@ export function VirtualListBasic() {
   );
   return (
     <VirtualList
-      style={{ width: '100%' }}
       items={items}
       itemKey={(item) => item.id}
       height={240}
diff --git a/apps/docs/src/examples/error-boundary/advanced.tsx b/apps/docs/src/examples/error-boundary/advanced.tsx
index ccd3d34..3e0875c 100644
--- a/apps/docs/src/examples/error-boundary/advanced.tsx
+++ b/apps/docs/src/examples/error-boundary/advanced.tsx
@@ -8,7 +8,7 @@ import { useState } from 'react';
 export function ErrorBoundaryCustom() {
   const [broken, setBroken] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => setBroken(true)}>
         测试备用界面
       </Button>
diff --git a/apps/docs/src/examples/error-boundary/basic.tsx b/apps/docs/src/examples/error-boundary/basic.tsx
index e063868..7730c7d 100644
--- a/apps/docs/src/examples/error-boundary/basic.tsx
+++ b/apps/docs/src/examples/error-boundary/basic.tsx
@@ -8,7 +8,7 @@ import { useState } from 'react';
 export function ErrorBoundaryBasic() {
   const [broken, setBroken] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => setBroken(true)}>
         模拟内容异常
       </Button>
diff --git a/apps/docs/src/examples/file-list/advanced.tsx b/apps/docs/src/examples/file-list/advanced.tsx
index 9842943..a62d671 100644
--- a/apps/docs/src/examples/file-list/advanced.tsx
+++ b/apps/docs/src/examples/file-list/advanced.tsx
@@ -1,4 +1,4 @@
-import { type FileItem, FileList, Space } from '@ifhover/leaf-ui';
+import { type FileItem, FileList, Space, Text } from '@ifhover/leaf-ui';
 import { withBase } from '@rspress/core/runtime';
 import { useState } from 'react';
 export function FileListActions() {
@@ -8,10 +8,8 @@ export function FileListActions() {
     { uid: 'c', url: withBase('/media/empty.txt'), size: 0 },
   ]);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <p className="leaf-demo-note">
-        名称可以从 URL 获取，文件大小可不提供。零字节文件也会展示大小。
-      </p>
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">名称可以从 URL 获取，文件大小可不提供。零字节文件也会展示大小。</Text>
       <FileList
         items={items}
         removable
diff --git a/apps/docs/src/examples/file-list/basic.tsx b/apps/docs/src/examples/file-list/basic.tsx
index a7caf9c..5734ee1 100644
--- a/apps/docs/src/examples/file-list/basic.tsx
+++ b/apps/docs/src/examples/file-list/basic.tsx
@@ -2,17 +2,17 @@ import { FileList, Space } from '@ifhover/leaf-ui';
 import { withBase } from '@rspress/core/runtime';
 export function FileListBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <FileList
         items={[
-          { url: withBase('/media/landscape-1.svg'), name: '夏日风景.svg', size: 414 },
-          { url: withBase('/media/landscape-2.svg'), name: '山间小径.svg' },
           {
             url: withBase('/media/sample.pdf'),
             name: '项目方案.pdf',
             size: 685,
           },
           { url: withBase('/media/quarterly-data.csv'), name: '季度数据.csv' },
+          { url: withBase('/media/landscape-1.svg'), name: '夏日风景.svg', size: 414 },
+          { url: withBase('/media/file-list-readme.md'), name: '交付说明.md' },
         ]}
       />
     </Space>
diff --git a/apps/docs/src/examples/file-list/cards.tsx b/apps/docs/src/examples/file-list/cards.tsx
new file mode 100644
index 0000000..96357d1
--- /dev/null
+++ b/apps/docs/src/examples/file-list/cards.tsx
@@ -0,0 +1,17 @@
+import { FileList } from '@ifhover/leaf-ui';
+import { withBase } from '@rspress/core/runtime';
+
+export function FileListCards() {
+  return (
+    <div>
+      <FileList
+        listType="picture-card"
+        items={[
+          { uid: 'lake', url: withBase('/media/landscape-1.svg'), name: '夏日风景.svg', size: 414 },
+          { uid: 'trail', url: withBase('/media/landscape-2.svg'), name: '山间小径.svg' },
+          { uid: 'cover', url: withBase('/media/landscape-3.svg'), name: '首页封面最终稿.svg' },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/src/examples/file-list/empty.tsx b/apps/docs/src/examples/file-list/empty.tsx
new file mode 100644
index 0000000..5a69359
--- /dev/null
+++ b/apps/docs/src/examples/file-list/empty.tsx
@@ -0,0 +1,9 @@
+import { FileList } from '@ifhover/leaf-ui';
+
+export function FileListEmpty() {
+  return (
+    <div>
+      <FileList items={[]} />
+    </div>
+  );
+}
diff --git a/apps/docs/src/examples/file-list/picture.tsx b/apps/docs/src/examples/file-list/picture.tsx
new file mode 100644
index 0000000..b8dce7b
--- /dev/null
+++ b/apps/docs/src/examples/file-list/picture.tsx
@@ -0,0 +1,17 @@
+import { FileList } from '@ifhover/leaf-ui';
+import { withBase } from '@rspress/core/runtime';
+
+export function FileListPicture() {
+  return (
+    <div>
+      <FileList
+        listType="picture"
+        items={[
+          { uid: 'lake', url: withBase('/media/landscape-1.svg'), name: '夏日风景.svg', size: 414 },
+          { uid: 'trail', url: withBase('/media/landscape-2.svg'), name: '山间小径.svg' },
+          { uid: 'plan', url: withBase('/media/sample.pdf'), name: '项目方案.pdf', size: 685 },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/src/examples/file-list/states.tsx b/apps/docs/src/examples/file-list/states.tsx
new file mode 100644
index 0000000..b8060ed
--- /dev/null
+++ b/apps/docs/src/examples/file-list/states.tsx
@@ -0,0 +1,38 @@
+import { FileList } from '@ifhover/leaf-ui';
+import { withBase } from '@rspress/core/runtime';
+
+export function FileListStates() {
+  return (
+    <div>
+      <FileList
+        downloadable={false}
+        previewable={false}
+        items={[
+          {
+            uid: 'uploading',
+            name: '项目介绍.mp4',
+            size: 12582912,
+            status: 'uploading',
+            percent: 42,
+          },
+          {
+            uid: 'done',
+            name: '交付说明.pdf',
+            size: 685,
+            status: 'done',
+            url: withBase('/media/sample.pdf'),
+          },
+          {
+            uid: 'error',
+            name: '附件包.zip',
+            size: 3145728,
+            status: 'error',
+            error: '连接中断，请重新上传。',
+          },
+          { uid: 'ready', name: '项目笔记.md', status: 'ready' },
+          { uid: 'cancelled', name: '备份文件.zip', status: 'cancelled' },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/src/examples/flex/alignment.tsx b/apps/docs/src/examples/flex/alignment.tsx
new file mode 100644
index 0000000..cdb652a
--- /dev/null
+++ b/apps/docs/src/examples/flex/alignment.tsx
@@ -0,0 +1,16 @@
+import { Button, Flex, Text } from '@ifhover/leaf-ui';
+
+export function FlexAlignment() {
+  return (
+    <Flex direction="column" gap="lg">
+      <Flex justify="space-between" align="center" gap="sm" wrap>
+        <Text>项目设置</Text>
+        <Button size="sm">保存</Button>
+      </Flex>
+      <Flex justify="end" gap="sm" wrap>
+        <Button variant="outline">取消</Button>
+        <Button>确认</Button>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/examples/flex/basic.tsx b/apps/docs/src/examples/flex/basic.tsx
new file mode 100644
index 0000000..77dfc38
--- /dev/null
+++ b/apps/docs/src/examples/flex/basic.tsx
@@ -0,0 +1,11 @@
+import { Button, Flex } from '@ifhover/leaf-ui';
+
+export function FlexBasic() {
+  return (
+    <Flex gap="sm" wrap>
+      <Button>保存</Button>
+      <Button variant="outline">取消</Button>
+      <Button variant="ghost">更多操作</Button>
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/examples/float-button/basic.tsx b/apps/docs/src/examples/float-button/basic.tsx
index ca042f4..db05449 100644
--- a/apps/docs/src/examples/float-button/basic.tsx
+++ b/apps/docs/src/examples/float-button/basic.tsx
@@ -24,27 +24,22 @@ export function FloatButtonBasic({ english = false }: { english?: boolean }) {
 export function FloatButtonActions({ english = false }: { english?: boolean }) {
   const { message } = useMessage();
   return (
-    <div style={{ position: 'relative', height: 160 }}>
-      <FloatButtonGroup
-        className="demo-float-group"
-        actions={[
-          {
-            key: 'share',
-            label: english ? 'Share' : '分享',
-            icon: <Share2 size={18} />,
-            onClick: () => message.info(english ? 'Share link copied' : '分享链接已复制'),
-          },
-          {
-            key: 'mail',
-            label: english ? 'Contact' : '联系',
-            icon: <Mail size={18} />,
-            onClick: () => message.info(english ? 'Contact action' : '联系操作'),
-          },
-        ]}
-      />
-      <style>
-        {'.demo-float-group{position:absolute!important;inset:auto 16px 16px auto!important;}'}
-      </style>
-    </div>
+    <FloatButtonGroup
+      fixed={false}
+      actions={[
+        {
+          key: 'share',
+          label: english ? 'Share' : '分享',
+          icon: <Share2 size={18} />,
+          onClick: () => message.info(english ? 'Share link copied' : '分享链接已复制'),
+        },
+        {
+          key: 'mail',
+          label: english ? 'Contact' : '联系',
+          icon: <Mail size={18} />,
+          onClick: () => message.info(english ? 'Contact action' : '联系操作'),
+        },
+      ]}
+    />
   );
 }
diff --git a/apps/docs/src/examples/form/basic.tsx b/apps/docs/src/examples/form/basic.tsx
index 0b50bf3..16d5963 100644
--- a/apps/docs/src/examples/form/basic.tsx
+++ b/apps/docs/src/examples/form/basic.tsx
@@ -1,10 +1,9 @@
-import { Button, Form, FormField, Input, Select, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Form, FormField, Input, Select, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function FormBasic() {
   const [result, setResult] = useState('');
   return (
     <Form
-      className="leaf-demo-stack leaf-demo-stack--wide"
       onSubmit={(event) => {
         event.preventDefault();
         const data = new FormData(event.currentTarget);
@@ -28,14 +27,18 @@ export function FormBasic() {
         />
       </FormField>
       <FormField>
-        <Space wrap className="leaf-demo-row">
+        <Flex gap="md" align="center" wrap justify="center">
           <Button type="submit">提交</Button>
           <Button type="reset" variant="outline">
             重置
           </Button>
-        </Space>
+        </Flex>
       </FormField>
-      {result && <output className="leaf-demo-note">{result}</output>}
+      {result && (
+        <output>
+          <Text tone="muted">{result}</Text>
+        </output>
+      )}
     </Form>
   );
 }
diff --git a/apps/docs/src/examples/form/extensions.tsx b/apps/docs/src/examples/form/extensions.tsx
index 4814e9b..08e0608 100644
--- a/apps/docs/src/examples/form/extensions.tsx
+++ b/apps/docs/src/examples/form/extensions.tsx
@@ -18,13 +18,12 @@ export function ExtensionDemo() {
             <>
               {fields.map((field) => (
                 <FormField key={field.key} label={`联系人 ${field.index + 1}`} required>
-                  <Space size="sm">
+                  <Space size="sm" wrap>
                     <Input
                       name={`${field.name}.email`}
                       type="email"
                       value={field.value}
                       onChange={(e) => ops.update(field.index, e.target.value)}
-                      style={{ flex: 1, minWidth: 0 }}
                     />
                     <Button variant="ghost" onClick={() => ops.remove(field.index)}>
                       移除
diff --git a/apps/docs/src/examples/form/label-width.tsx b/apps/docs/src/examples/form/label-width.tsx
index a7361fd..4154f9f 100644
--- a/apps/docs/src/examples/form/label-width.tsx
+++ b/apps/docs/src/examples/form/label-width.tsx
@@ -1,18 +1,18 @@
-import { Button, Form, FormField, Input, Space, Switch } from '@ifhover/leaf-ui';
+import { Button, Flex, Form, FormField, Input, Space, Switch } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function FormLabelWidth() {
   const [automatic, setAutomatic] = useState(true);
   const [extra, setExtra] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Space wrap className="leaf-demo-row">
+    <Space direction="vertical" align="stretch">
+      <Flex gap="md" align="center" wrap justify="center">
         <Switch checked={automatic} onChange={(event) => setAutomatic(event.target.checked)}>
           自动标签宽度
         </Switch>
         <Button variant="outline" onClick={() => setExtra(!extra)}>
           切换长标签
         </Button>
-      </Space>
+      </Flex>
       <Form labelWidth={automatic ? 'auto' : 110}>
         <FormField label="姓名">
           <Input name="name" />
diff --git a/apps/docs/src/examples/grid/advanced.tsx b/apps/docs/src/examples/grid/advanced.tsx
index 57b91c5..6def059 100644
--- a/apps/docs/src/examples/grid/advanced.tsx
+++ b/apps/docs/src/examples/grid/advanced.tsx
@@ -1,54 +1,21 @@
-import { Col, Row, Space } from '@ifhover/leaf-ui';
-
+import { Card, Col, Row, Space } from '@ifhover/leaf-ui';
 export function GridColumns() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Row gutter={[12, 12]}>
+    <Space direction="vertical" align="stretch">
+      <Row gutter={12}>
         <Col span={8}>
-          <div
-            style={{
-              padding: 18,
-              borderRadius: 'var(--leaf-radius)',
-              background: 'var(--leaf-color-surface-muted)',
-            }}
-          >
-            8 / 24
-          </div>
+          <Card>8 / 24</Card>
         </Col>
         <Col span={16}>
-          <div
-            style={{
-              padding: 18,
-              borderRadius: 'var(--leaf-radius)',
-              background: 'var(--leaf-color-surface-muted)',
-            }}
-          >
-            16 / 24
-          </div>
+          <Card>16 / 24</Card>
         </Col>
       </Row>
       <Row gutter={12}>
         <Col xs={24} md={12}>
-          <div
-            style={{
-              padding: 18,
-              borderRadius: 'var(--leaf-radius)',
-              background: 'var(--leaf-color-surface-muted)',
-            }}
-          >
-            自适应宽度
-          </div>
+          <Card>自适应宽度</Card>
         </Col>
         <Col xs={0} md={12}>
-          <div
-            style={{
-              padding: 18,
-              borderRadius: 'var(--leaf-radius)',
-              background: 'var(--leaf-color-surface-muted)',
-            }}
-          >
-            仅宽屏展示
-          </div>
+          <Card>窄屏隐藏</Card>
         </Col>
       </Row>
     </Space>
diff --git a/apps/docs/src/examples/grid/basic.tsx b/apps/docs/src/examples/grid/basic.tsx
index 70ef730..3c1cc5c 100644
--- a/apps/docs/src/examples/grid/basic.tsx
+++ b/apps/docs/src/examples/grid/basic.tsx
@@ -1,19 +1,9 @@
-import { Grid } from '@ifhover/leaf-ui';
-
+import { Card, Grid } from '@ifhover/leaf-ui';
 export function GridBasic() {
   return (
-    <Grid style={{ width: '100%' }} columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
+    <Grid columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
       {['设计', '开发', '发布'].map((label) => (
-        <div
-          key={label}
-          style={{
-            padding: 24,
-            background: 'var(--leaf-color-surface-muted)',
-            borderRadius: 'var(--leaf-radius)',
-          }}
-        >
-          {label}
-        </div>
+        <Card key={label}>{label}</Card>
       ))}
     </Grid>
   );
diff --git a/apps/docs/src/examples/guide/control-sizes.tsx b/apps/docs/src/examples/guide/control-sizes.tsx
index af36750..b89bd4e 100644
--- a/apps/docs/src/examples/guide/control-sizes.tsx
+++ b/apps/docs/src/examples/guide/control-sizes.tsx
@@ -1,11 +1,11 @@
-import { Button, type ControlSize, Input, Select, Space } from '@ifhover/leaf-ui';
-
+import type { ControlSize } from '@ifhover/leaf-ui';
+import { Button, Flex, Input, Select, Text } from '@ifhover/leaf-ui';
 export function ControlSizes() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Flex direction="column" gap="md">
       {(['sm', 'md', 'lg'] as const).map((size: ControlSize) => (
-        <div key={size} className="leaf-demo-control-row">
-          <span className="leaf-demo-size">{size}</span>
+        <Flex key={size} align="center" gap="sm" wrap>
+          <Text tone="muted">{size}</Text>
           <Input size={size} aria-label={`${size} 搜索`} placeholder="搜索项目" />
           <Select
             size={size}
@@ -17,8 +17,8 @@ export function ControlSizes() {
             ]}
           />
           <Button size={size}>查询</Button>
-        </div>
+        </Flex>
       ))}
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/guide/form.tsx b/apps/docs/src/examples/guide/form.tsx
index 2aff9c7..4264ff7 100644
--- a/apps/docs/src/examples/guide/form.tsx
+++ b/apps/docs/src/examples/guide/form.tsx
@@ -1,36 +1,38 @@
-import { Button, Input, Select } from '@ifhover/leaf-ui';
+import { Button, Form, FormField, Input, Select, Text } from '@ifhover/leaf-ui';
 import { Plus } from 'lucide-react';
-import { useId, useState } from 'react';
-
+import { useState } from 'react';
 export function GettingStartedForm() {
-  const id = useId();
   const [result, setResult] = useState('');
   return (
-    <form
-      style={{ display: 'grid', gap: 12, width: 'min(100%, 360px)' }}
+    <Form
+      layout="vertical"
       onSubmit={(event) => {
         event.preventDefault();
         const data = new FormData(event.currentTarget);
         setResult(`已创建：${data.get('title')}`);
       }}
     >
-      <label htmlFor={`${id}-title`}>项目名称</label>
-      <Input id={`${id}-title`} name="title" required placeholder="例如：Leaf Garden" />
-      <label htmlFor={`${id}-team`}>所属团队</label>
-      <Select
-        id={`${id}-team`}
-        name="team"
-        required
-        placeholder="请选择团队"
-        options={[
-          { label: '设计团队', value: 'design' },
-          { label: '产品团队', value: 'product' },
-        ]}
-      />
+      <FormField label="项目名称" required>
+        <Input name="title" placeholder="Leaf Garden" />
+      </FormField>
+      <FormField label="所属团队" required>
+        <Select
+          name="team"
+          placeholder="请选择团队"
+          options={[
+            { label: '设计团队', value: 'design' },
+            { label: '工程团队', value: 'engineering' },
+          ]}
+        />
+      </FormField>
       <Button type="submit" startIcon={<Plus />}>
         创建项目
       </Button>
-      <span aria-live="polite">{result}</span>
-    </form>
+      {result && (
+        <Text role="status" tone="muted">
+          {result}
+        </Text>
+      )}
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/guide/getting-started.tsx b/apps/docs/src/examples/guide/getting-started.tsx
index 24a9c93..cd50fdd 100644
--- a/apps/docs/src/examples/guide/getting-started.tsx
+++ b/apps/docs/src/examples/guide/getting-started.tsx
@@ -1,5 +1,4 @@
 import { Button } from '@ifhover/leaf-ui';
-import '@ifhover/leaf-ui/styles.css';
 import { useState } from 'react';
 
 export function GettingStartedExample() {
diff --git a/apps/docs/src/examples/image-cropper/advanced.tsx b/apps/docs/src/examples/image-cropper/advanced.tsx
deleted file mode 100644
index e65adbc..0000000
--- a/apps/docs/src/examples/image-cropper/advanced.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ImageCropper } from '@ifhover/leaf-ui';
-import { withBase } from '@rspress/core/runtime';
-
-export function ImageCropperAvatar() {
-  return (
-    <ImageCropper
-      src={withBase('/media/landscape-2.svg')}
-      shape="round"
-      aspect={1}
-      onExport={(result) => {
-        const url = URL.createObjectURL(result.blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = 'avatar.png';
-        link.click();
-        setTimeout(() => URL.revokeObjectURL(url), 1000);
-      }}
-    />
-  );
-}
diff --git a/apps/docs/src/examples/image-cropper/basic.tsx b/apps/docs/src/examples/image-cropper/basic.tsx
deleted file mode 100644
index 878db79..0000000
--- a/apps/docs/src/examples/image-cropper/basic.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Image, ImageCropper, Space } from '@ifhover/leaf-ui';
-import { withBase } from '@rspress/core/runtime';
-import { useEffect, useState } from 'react';
-export function ImageCropperBasic() {
-  const [result, setResult] = useState<Blob | null>(null);
-  const [url, setUrl] = useState('');
-  useEffect(() => {
-    if (!result) return;
-    const address = URL.createObjectURL(result);
-    setUrl(address);
-    return () => URL.revokeObjectURL(address);
-  }, [result]);
-  return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <ImageCropper
-        src={withBase('/media/landscape-1.svg')}
-        onExport={(result) => setResult(result.blob)}
-      />
-      {url && <Image src={url} alt="裁剪结果" width={220} fit="contain" />}
-    </Space>
-  );
-}
diff --git a/apps/docs/src/examples/image/advanced.tsx b/apps/docs/src/examples/image/advanced.tsx
index f380949..4550755 100644
--- a/apps/docs/src/examples/image/advanced.tsx
+++ b/apps/docs/src/examples/image/advanced.tsx
@@ -1,10 +1,10 @@
-import { Image, ImagePreviewGroup, Space } from '@ifhover/leaf-ui';
+import { Flex, Image, ImagePreviewGroup } from '@ifhover/leaf-ui';
 import { withBase } from '@rspress/core/runtime';
 
 export function ImageGallery() {
   return (
     <ImagePreviewGroup thumbnails downloadable>
-      <Space wrap className="leaf-demo-row">
+      <Flex gap="md" align="center" wrap justify="center">
         {[1, 2, 3].map((index) => (
           <Image
             key={index}
@@ -14,7 +14,7 @@ export function ImageGallery() {
             alt={`风景 ${index}`}
           />
         ))}
-      </Space>
+      </Flex>
     </ImagePreviewGroup>
   );
 }
diff --git a/apps/docs/src/examples/image/basic.tsx b/apps/docs/src/examples/image/basic.tsx
index c4e7961..84f1cd0 100644
--- a/apps/docs/src/examples/image/basic.tsx
+++ b/apps/docs/src/examples/image/basic.tsx
@@ -1,9 +1,9 @@
-import { Image, Space } from '@ifhover/leaf-ui';
+import { Flex, Image } from '@ifhover/leaf-ui';
 import { withBase } from '@rspress/core/runtime';
 
 export function ImageBasic() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       <Image src={withBase('/media/landscape-1.svg')} width={240} height={160} alt="绿色山谷" />
       <Image
         src="data:image/png;base64,invalid"
@@ -12,6 +12,6 @@ export function ImageBasic() {
         alt="加载失败示例"
         fallback={<span>暂无图片</span>}
       />
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/input-mask/advanced.tsx b/apps/docs/src/examples/input-mask/advanced.tsx
index d631323..eba1514 100644
--- a/apps/docs/src/examples/input-mask/advanced.tsx
+++ b/apps/docs/src/examples/input-mask/advanced.tsx
@@ -1,11 +1,11 @@
-import { InputMask, Space } from '@ifhover/leaf-ui';
+import { InputMask, Space, Text } from '@ifhover/leaf-ui';
 
 export function InputMaskFormats() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <strong className="leaf-demo-note">银行卡格式</strong>
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">银行卡格式</Text>
       <InputMask mask="0000 0000 0000 0000" lazy={false} aria-label="卡号" />
-      <strong className="leaf-demo-note">字母与数字规则</strong>
+      <Text tone="muted">字母与数字规则</Text>
       <InputMask
         mask="AA-0000"
         definitions={{ A: /[A-Z]/ }}
diff --git a/apps/docs/src/examples/input-mask/basic.tsx b/apps/docs/src/examples/input-mask/basic.tsx
index 43be37b..8a1a275 100644
--- a/apps/docs/src/examples/input-mask/basic.tsx
+++ b/apps/docs/src/examples/input-mask/basic.tsx
@@ -1,9 +1,9 @@
-import { InputMask, Space } from '@ifhover/leaf-ui';
+import { InputMask, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function InputMaskBasic() {
   const [value, setValue] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <InputMask
         mask="+{86} 000 0000 0000"
         placeholder="+86 138 0000 0000"
@@ -12,7 +12,9 @@ export function InputMaskBasic() {
         onChange={setValue}
         aria-label="电话号码"
       />
-      <output className="leaf-demo-note">原始值: {value || '—'}</output>
+      <output>
+        <Text tone="muted">原始值: {value || '—'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/input-number/basic.tsx b/apps/docs/src/examples/input-number/basic.tsx
index 26af280..2445213 100644
--- a/apps/docs/src/examples/input-number/basic.tsx
+++ b/apps/docs/src/examples/input-number/basic.tsx
@@ -1,9 +1,9 @@
-import { Form, FormField, InputNumber } from '@ifhover/leaf-ui';
+import { Form, FormField, InputNumber, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function InputNumberBasic() {
   const [value, setValue] = useState<number | null>(3);
   return (
-    <Form layout="vertical" className="leaf-demo-stack">
+    <Form layout="vertical">
       <FormField label="数量">
         <InputNumber name="quantity" min={0} max={20} value={value} onChange={setValue} />
       </FormField>
@@ -19,7 +19,7 @@ export function InputNumberBasic() {
       <FormField label="禁用">
         <InputNumber defaultValue={8} disabled />
       </FormField>
-      <p className="leaf-demo-note">当前数量：{value ?? '未填写'}</p>
+      <Text tone="muted">当前数量：{value ?? '未填写'}</Text>
     </Form>
   );
 }
diff --git a/apps/docs/src/examples/input-number/capabilities.tsx b/apps/docs/src/examples/input-number/capabilities.tsx
index dcfee8e..0edcf8a 100644
--- a/apps/docs/src/examples/input-number/capabilities.tsx
+++ b/apps/docs/src/examples/input-number/capabilities.tsx
@@ -1,7 +1,7 @@
 import { Form, FormField, InputNumber } from '@ifhover/leaf-ui';
 export function Capabilities({ english = false }) {
   return (
-    <Form layout="vertical" className="leaf-demo-stack">
+    <Form layout="vertical">
       <FormField label={english ? 'Grouped amount' : '金额与千分位'}>
         <InputNumber defaultValue={12345.67} precision={2} grouping prefix="$" />
       </FormField>
diff --git a/apps/docs/src/examples/input-otp/advanced.tsx b/apps/docs/src/examples/input-otp/advanced.tsx
index d0463ec..461acb3 100644
--- a/apps/docs/src/examples/input-otp/advanced.tsx
+++ b/apps/docs/src/examples/input-otp/advanced.tsx
@@ -1,17 +1,17 @@
-import { InputOTP, Space } from '@ifhover/leaf-ui';
+import { InputOTP, Space, Text } from '@ifhover/leaf-ui';
 
 export function InputOTPOptions() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <strong className="leaf-demo-note">字母与数字</strong>
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">字母与数字</Text>
       <InputOTP
         mode="alphanumeric"
         length={8}
         separator={(index) => (index === 3 ? <span>—</span> : null)}
       />
-      <strong className="leaf-demo-note">隐藏字符</strong>
+      <Text tone="muted">隐藏字符</Text>
       <InputOTP length={4} mask size="lg" />
-      <strong className="leaf-demo-note">禁用</strong>
+      <Text tone="muted">禁用</Text>
       <InputOTP defaultValue="123456" disabled />
     </Space>
   );
diff --git a/apps/docs/src/examples/input-otp/basic.tsx b/apps/docs/src/examples/input-otp/basic.tsx
index 555dfc8..8df34ae 100644
--- a/apps/docs/src/examples/input-otp/basic.tsx
+++ b/apps/docs/src/examples/input-otp/basic.tsx
@@ -1,12 +1,14 @@
-import { InputOTP, Space } from '@ifhover/leaf-ui';
+import { InputOTP, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function InputOTPBasic() {
   const [value, setValue] = useState('');
   const [complete, setComplete] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <InputOTP value={value} onChange={setValue} onComplete={setComplete} />
-      <output className="leaf-demo-note">已完成: {complete || '—'}</output>
+      <output>
+        <Text tone="muted">已完成: {complete || '—'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/input/basic.tsx b/apps/docs/src/examples/input/basic.tsx
index c6208ac..fd85c9c 100644
--- a/apps/docs/src/examples/input/basic.tsx
+++ b/apps/docs/src/examples/input/basic.tsx
@@ -1,25 +1,21 @@
-import { Input, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Input } from '@ifhover/leaf-ui';
 import { Mail, Search } from 'lucide-react';
 
 export function InputBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">项目名称</span>
+    <Form layout="vertical">
+      <FormField label="项目名称">
         <Input aria-label="项目名称" placeholder="为你的项目起个名字" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">搜索项目</span>
+      </FormField>
+      <FormField label="搜索项目">
         <Input aria-label="搜索项目" prefix={<Search />} placeholder="搜索项目" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">邮箱</span>
+      </FormField>
+      <FormField label="邮箱">
         <Input aria-label="邮箱" type="email" prefix={<Mail />} placeholder="hello@leaf.design" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">只读项目名称</span>
+      </FormField>
+      <FormField label="只读项目名称">
         <Input aria-label="只读项目名称" defaultValue="Leaf Garden" readOnly />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/input/clear.tsx b/apps/docs/src/examples/input/clear.tsx
index 3cf9809..79e28a1 100644
--- a/apps/docs/src/examples/input/clear.tsx
+++ b/apps/docs/src/examples/input/clear.tsx
@@ -1,11 +1,10 @@
-import { Input, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Input, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function InputClear() {
   const [value, setValue] = useState('Leaf Garden');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">项目名称</span>
+    <Form layout="vertical">
+      <FormField label="项目名称">
         <Input
           aria-label="项目名称"
           value={value}
@@ -14,17 +13,16 @@ export function InputClear() {
           showCount
           maxLength={30}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">关键词</span>
+      </FormField>
+      <FormField label="关键词">
         <Input
           aria-label="关键词"
           defaultValue="Leaf"
           allowClear
           showCount={(text) => `${text.length} 字`}
         />
-      </div>
-      <p className="leaf-demo-note">当前内容：{value || '未填写'}</p>
-    </Space>
+      </FormField>
+      <Text tone="muted">当前内容：{value || '未填写'}</Text>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/input/controlled.tsx b/apps/docs/src/examples/input/controlled.tsx
index bdbcb23..55f0bd5 100644
--- a/apps/docs/src/examples/input/controlled.tsx
+++ b/apps/docs/src/examples/input/controlled.tsx
@@ -1,13 +1,12 @@
-import { Input, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Input, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function InputControlled() {
   const [value, setValue] = useState('');
   const [submitted, setSubmitted] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">输入并回车</span>
+    <Form layout="vertical">
+      <FormField label="输入并回车">
         <Input
           aria-label="输入并回车"
           value={value}
@@ -15,10 +14,10 @@ export function InputControlled() {
           onChange={(event) => setValue(event.target.value)}
           onPressEnter={() => setSubmitted(value)}
         />
-      </div>
-      <span className="leaf-demo-note" aria-live="polite">
+      </FormField>
+      <Text tone="muted" aria-live="polite">
         已提交：{submitted || '等待输入'}
-      </span>
-    </Space>
+      </Text>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/input/extensions.tsx b/apps/docs/src/examples/input/extensions.tsx
index 7fc8fa9..0283719 100644
--- a/apps/docs/src/examples/input/extensions.tsx
+++ b/apps/docs/src/examples/input/extensions.tsx
@@ -1,4 +1,4 @@
-import { Input, InputGroup, InputSearch, Select, Space } from '@ifhover/leaf-ui';
+import { Flex, Input, InputGroup, InputSearch, Select, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function ExtensionDemo() {
   const [query, setQuery] = useState('');
@@ -14,8 +14,8 @@ export function ExtensionDemo() {
         />
       </label>
       <p role="status">搜索内容：{query || '未搜索'}</p>
-      <div className="leaf-demo-case">
-        <p>输入组合</p>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>输入组合</Text>
         <InputGroup aria-label="网址">
           <Select
             style={{ width: 110 }}
@@ -24,7 +24,7 @@ export function ExtensionDemo() {
           />
           <Input aria-label="域名" placeholder="example.com" />
         </InputGroup>
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/input/password.tsx b/apps/docs/src/examples/input/password.tsx
index fd8486d..e0afe8b 100644
--- a/apps/docs/src/examples/input/password.tsx
+++ b/apps/docs/src/examples/input/password.tsx
@@ -1,12 +1,11 @@
-import { Input, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Input } from '@ifhover/leaf-ui';
 import { Eye, EyeOff, LockKeyhole } from 'lucide-react';
 import { useState } from 'react';
 export function InputPassword() {
   const [visible, setVisible] = useState(false);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">密码</span>
+    <Form layout="vertical">
+      <FormField label="密码">
         <Input
           type="password"
           aria-label="密码"
@@ -14,9 +13,8 @@ export function InputPassword() {
           autoComplete="new-password"
           prefix={<LockKeyhole />}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">受控密码</span>
+      </FormField>
+      <FormField label="受控密码">
         <Input
           type="password"
           aria-label="受控密码"
@@ -25,20 +23,18 @@ export function InputPassword() {
           onVisibleChange={setVisible}
           visibilityIcon={(shown) => (shown ? <EyeOff size={16} /> : <Eye size={16} />)}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用密码</span>
+      </FormField>
+      <FormField label="禁用密码">
         <Input type="password" aria-label="禁用密码" defaultValue="leaf-garden" disabled />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">无切换按钮</span>
+      </FormField>
+      <FormField label="无切换按钮">
         <Input
           type="password"
           aria-label="无切换按钮"
           placeholder="不展示切换按钮"
           visibilityToggle={false}
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/input/states.tsx b/apps/docs/src/examples/input/states.tsx
index 2ad4b2c..752b34d 100644
--- a/apps/docs/src/examples/input/states.tsx
+++ b/apps/docs/src/examples/input/states.tsx
@@ -1,28 +1,16 @@
-import { Input, Space } from '@ifhover/leaf-ui';
-
+import { Form, FormField, Input } from '@ifhover/leaf-ui';
 export function InputStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用输入</span>
-        <Input aria-label="禁用输入" disabled placeholder="暂时不可编辑" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">项目名称错误</span>
-        <Input
-          aria-label="项目名称错误"
-          status="error"
-          placeholder="请输入项目名称"
-          aria-describedby="project-error"
-        />
-      </div>
-      <span id="project-error" className="leaf-demo-error">
-        项目名称不能为空。
-      </span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">名称警告</span>
-        <Input aria-label="名称警告" status="warning" defaultValue="已经存在相似名称" />
-      </div>
-    </Space>
+    <Form layout="vertical" onSubmit={(event) => event.preventDefault()}>
+      <FormField label="禁用输入">
+        <Input disabled placeholder="暂时不可编辑" />
+      </FormField>
+      <FormField label="项目名称错误" error="项目名称不能为空。">
+        <Input placeholder="请输入项目名称" />
+      </FormField>
+      <FormField label="名称警告">
+        <Input status="warning" defaultValue="已经存在相似名称" />
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/layout/advanced.tsx b/apps/docs/src/examples/layout/advanced.tsx
index bc44043..90357af 100644
--- a/apps/docs/src/examples/layout/advanced.tsx
+++ b/apps/docs/src/examples/layout/advanced.tsx
@@ -1,111 +1,36 @@
-import { Layout, Menu } from '@ifhover/leaf-ui';
-import {
-  Folder,
-  LayoutDashboard,
-  Leaf,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Settings,
-} from 'lucide-react';
-import { useEffect, useState } from 'react';
-
+import { Card, Layout, Menu, useBreakpoint } from '@ifhover/leaf-ui';
+import { Folder, LayoutDashboard } from 'lucide-react';
+import { useState } from 'react';
 export function LayoutResponsive() {
   const [collapsed, setCollapsed] = useState(false);
-  const [narrow, setNarrow] = useState(false);
+  const { sm } = useBreakpoint();
+  const compact = collapsed || !sm;
   const [selected, setSelected] = useState('overview');
-  useEffect(() => {
-    const query = matchMedia('(max-width: 640px)');
-    const update = () => setNarrow(query.matches);
-    update();
-    query.addEventListener('change', update);
-    return () => query.removeEventListener('change', update);
-  }, []);
-  const compact = collapsed || narrow;
   const items = [
     { key: 'overview', label: '概览', icon: <LayoutDashboard /> },
     { key: 'projects', label: '项目', icon: <Folder /> },
-    { key: 'settings', label: '设置', icon: <Settings /> },
   ];
   return (
-    <Layout
-      direction="horizontal"
-      style={{
-        width: '100%',
-        minHeight: 360,
-        border: '1px solid var(--leaf-color-border)',
-        borderRadius: 'var(--leaf-radius)',
-        overflow: 'hidden',
-      }}
-    >
+    <Layout direction="horizontal">
       <Layout.Sider
         width={180}
         collapsedWidth={64}
         collapsed={collapsed}
         onCollapse={setCollapsed}
         collapsible
-        breakpoint={640}
-        trigger={compact ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />}
-        style={{ borderInlineEnd: '1px solid var(--leaf-color-border)' }}
+        breakpoint={575}
       >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: compact ? 'center' : 'flex-start',
-            gap: 8,
-            height: 48,
-            paddingInline: compact ? 0 : 12,
-            color: 'var(--leaf-color-primary)',
-          }}
-        >
-          <Leaf size={20} aria-hidden="true" />
-          {!compact && <strong>Leaf Studio</strong>}
-        </div>
         <Menu
-          items={items}
+          mode="inline"
           collapsed={compact}
           selectedKey={selected}
           onSelect={setSelected}
-          style={{ width: '100%', background: 'transparent', padding: 0 }}
+          items={items}
         />
       </Layout.Sider>
-      <Layout>
-        <Layout.Header style={{ borderBottom: '1px solid var(--leaf-color-border)' }}>
-          <strong>工作空间</strong>
-        </Layout.Header>
-        <Layout.Content style={{ padding: 20 }}>
-          <div style={{ color: 'var(--leaf-color-text-muted)', fontSize: 12, marginBottom: 12 }}>
-            工作空间 / {items.find((item) => item.key === selected)?.label}
-          </div>
-          <div
-            style={{
-              minHeight: 140,
-              padding: 20,
-              background: 'var(--leaf-color-surface)',
-              border: '1px solid var(--leaf-color-border)',
-              borderRadius: 'var(--leaf-radius)',
-            }}
-          >
-            <h3 style={{ margin: '0 0 8px', fontSize: 17, fontWeight: 600 }}>
-              {items.find((item) => item.key === selected)?.label}
-            </h3>
-            <p style={{ margin: 0, color: 'var(--leaf-color-text-muted)', lineHeight: 1.7 }}>
-              管理项目、查看工作进度，让团队协作更清晰。
-            </p>
-          </div>
-        </Layout.Content>
-        <Layout.Footer
-          style={{
-            padding: '12px 20px',
-            background: 'transparent',
-            textAlign: 'center',
-            color: 'var(--leaf-color-text-muted)',
-            fontSize: 12,
-          }}
-        >
-          Leaf Studio · 工作区
-        </Layout.Footer>
-      </Layout>
+      <Layout.Content>
+        <Card title={items.find((item) => item.key === selected)?.label}>选择导航项查看内容。</Card>
+      </Layout.Content>
     </Layout>
   );
 }
diff --git a/apps/docs/src/examples/layout/basic.tsx b/apps/docs/src/examples/layout/basic.tsx
index 75c6bb2..15fb829 100644
--- a/apps/docs/src/examples/layout/basic.tsx
+++ b/apps/docs/src/examples/layout/basic.tsx
@@ -1,48 +1,15 @@
-import { Layout } from '@ifhover/leaf-ui';
-
+import { Layout, Text } from '@ifhover/leaf-ui';
 export function LayoutBasic() {
   return (
-    <Layout
-      style={{
-        width: '100%',
-        minHeight: 300,
-        border: '1px solid var(--leaf-color-border)',
-        borderRadius: 'var(--leaf-radius)',
-        overflow: 'hidden',
-        textAlign: 'center',
-      }}
-    >
-      <Layout.Header
-        style={{
-          background: 'var(--leaf-color-primary-surface-14)',
-          color: 'var(--leaf-color-primary)',
-          fontWeight: 600,
-        }}
-      >
-        Header
+    <Layout>
+      <Layout.Header>
+        <Text>顶部导航</Text>
       </Layout.Header>
       <Layout direction="horizontal">
-        <Layout.Sider
-          width="26%"
-          style={{
-            display: 'grid',
-            placeItems: 'center',
-            background: 'var(--leaf-color-primary-surface-9)',
-          }}
-        >
-          Sider
-        </Layout.Sider>
-        <Layout.Content style={{ display: 'grid', placeItems: 'center', minHeight: 180 }}>
-          Content
-        </Layout.Content>
+        <Layout.Sider width={140}>侧栏</Layout.Sider>
+        <Layout.Content>正文内容</Layout.Content>
       </Layout>
-      <Layout.Footer
-        style={{
-          background: 'var(--leaf-color-primary-surface-6)',
-        }}
-      >
-        Footer
-      </Layout.Footer>
+      <Layout.Footer>底部信息</Layout.Footer>
     </Layout>
   );
 }
diff --git a/apps/docs/src/examples/loading/overlay.tsx b/apps/docs/src/examples/loading/overlay.tsx
index 158a168..9d3790c 100644
--- a/apps/docs/src/examples/loading/overlay.tsx
+++ b/apps/docs/src/examples/loading/overlay.tsx
@@ -1,18 +1,18 @@
-import { Button, Loading, Space } from '@ifhover/leaf-ui';
+import { Button, Card, Loading, Space } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function LoadingOverlay() {
   const [spinning, setSpinning] = useState(true);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => setSpinning(!spinning)}>
         {spinning ? '结束加载' : '开始加载'}
       </Button>
       <Loading spinning={spinning} tip="正在读取项目" delay={200}>
-        <div className="leaf-demo-surface">
+        <Card>
           <strong>Leaf Garden</strong>
           <p>在此查看项目概览和最近更新。</p>
           <Button variant="outline">编辑项目</Button>
-        </div>
+        </Card>
       </Loading>
     </Space>
   );
diff --git a/apps/docs/src/examples/loading/sizes.tsx b/apps/docs/src/examples/loading/sizes.tsx
index 972fa12..ded3734 100644
--- a/apps/docs/src/examples/loading/sizes.tsx
+++ b/apps/docs/src/examples/loading/sizes.tsx
@@ -1,19 +1,19 @@
-import { Loading, Space } from '@ifhover/leaf-ui';
+import { Flex, Loading, Text } from '@ifhover/leaf-ui';
 export function LoadingSizes() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">小尺寸</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>小尺寸</Text>
         <Loading size="sm" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">默认尺寸</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>默认尺寸</Text>
         <Loading />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">大尺寸</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>大尺寸</Text>
         <Loading size="lg" />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/menu/advanced.tsx b/apps/docs/src/examples/menu/advanced.tsx
index ab0c4e4..c04ea36 100644
--- a/apps/docs/src/examples/menu/advanced.tsx
+++ b/apps/docs/src/examples/menu/advanced.tsx
@@ -1,4 +1,5 @@
-import { Button, Menu, type MenuItem, Space } from '@ifhover/leaf-ui';
+import type { MenuItem } from '@ifhover/leaf-ui';
+import { Button, Flex, Menu, Text } from '@ifhover/leaf-ui';
 import { BookOpen, Folder, House, Palette, Settings } from 'lucide-react';
 import { useState } from 'react';
 
@@ -18,18 +19,18 @@ const items: MenuItem[] = [
 export function MenuHorizontal() {
   const [collapsed, setCollapsed] = useState(false);
   return (
-    <Space direction="vertical" align="start" size={20}>
-      <div className="leaf-demo-case">
-        <p className="leaf-demo-note">横向导航</p>
+    <Flex direction="column" gap={20}>
+      <Flex direction="column" gap="sm" align="center">
+        <Text tone="muted">横向导航</Text>
         <Menu mode="horizontal" items={items} defaultSelectedKey="home" />
-      </div>
-      <div className="leaf-demo-case">
-        <p className="leaf-demo-note">可折叠侧栏</p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text tone="muted">可折叠侧栏</Text>
         <Button variant="ghost" size="sm" onClick={() => setCollapsed((value) => !value)}>
           切换折叠
         </Button>
         <Menu collapsed={collapsed} items={items} defaultSelectedKey="home" />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/menu/capabilities.tsx b/apps/docs/src/examples/menu/capabilities.tsx
index 50d9a0a..8ae987e 100644
--- a/apps/docs/src/examples/menu/capabilities.tsx
+++ b/apps/docs/src/examples/menu/capabilities.tsx
@@ -1,4 +1,5 @@
-import { Menu, type MenuItem, Space } from '@ifhover/leaf-ui';
+import type { MenuItem } from '@ifhover/leaf-ui';
+import { Menu, Space, Text } from '@ifhover/leaf-ui';
 import { BookOpen, House, Settings } from 'lucide-react';
 import {
   type AnchorHTMLAttributes,
@@ -28,7 +29,7 @@ export function MenuRouting({ english = false }: { english?: boolean }) {
     },
   ];
   return (
-    <Space direction="vertical" align="center" className="leaf-demo-stack">
+    <Space direction="vertical" align="center">
       <Menu
         aria-label={english ? 'Application navigation' : '应用导航'}
         items={items}
@@ -46,11 +47,11 @@ export function MenuRouting({ english = false }: { english?: boolean }) {
           });
         }}
       />
-      <p className="leaf-demo-note">
+      <Text tone="muted">
         {english
           ? `Current page: ${selected}. The example updates local state; replace the anchor with your router Link and retain its props.`
           : `当前页面：${selected}。示例切换本地状态；接入路由时使用自己的 Link，并保留传入属性。`}
-      </p>
+      </Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/message/basic.tsx b/apps/docs/src/examples/message/basic.tsx
index 9f05d2a..ed4ca89 100644
--- a/apps/docs/src/examples/message/basic.tsx
+++ b/apps/docs/src/examples/message/basic.tsx
@@ -1,4 +1,4 @@
-import { Button, Space, useMessage } from '@ifhover/leaf-ui';
+import { Button, Flex, useMessage } from '@ifhover/leaf-ui';
 export function MessageBasic() {
   const { message } = useMessage();
   async function save() {
@@ -7,7 +7,7 @@ export function MessageBasic() {
     message.open({ key, type: 'success', content: '保存成功', duration: 3, closable: true });
   }
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       <Button onClick={save}>异步保存</Button>
       <Button variant="outline" onClick={() => message.info('一条消息提示')}>
         提示
@@ -24,6 +24,6 @@ export function MessageBasic() {
       <Button variant="ghost" onClick={() => message.close()}>
         清空消息
       </Button>
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/message/shared.tsx b/apps/docs/src/examples/message/shared.tsx
index d9104cb..6fa11c6 100644
--- a/apps/docs/src/examples/message/shared.tsx
+++ b/apps/docs/src/examples/message/shared.tsx
@@ -1,4 +1,4 @@
-import { Button, Space, useMessage } from '@ifhover/leaf-ui';
+import { Button, Flex, useMessage } from '@ifhover/leaf-ui';
 
 function PublishAction() {
   const { message } = useMessage();
@@ -35,9 +35,9 @@ function PublishResult() {
 
 export function MessageShared() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       <PublishAction />
       <PublishResult />
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/modal/access-scope.tsx b/apps/docs/src/examples/modal/access-scope.tsx
deleted file mode 100644
index 0b8396f..0000000
--- a/apps/docs/src/examples/modal/access-scope.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { Alert, Button, CheckboxGroup, Modal, Space, Steps, Tag } from '@ifhover/leaf-ui';
-import { Bot, HardDrive, Mail, MessageSquare, ShieldCheck, Snowflake } from 'lucide-react';
-import { useState } from 'react';
-
-export function AccessScope({ english = false }: { english?: boolean }) {
-  const t = (zh: string, en: string) => (english ? en : zh);
-  const [open, setOpen] = useState(false);
-  const [services, setServices] = useState<string[]>(['mail', 'drive']);
-  const [permissions, setPermissions] = useState<string[]>(['read', 'labels']);
-  const [saved, setSaved] = useState(false);
-  return (
-    <Space direction="vertical" align="start" size="sm">
-      <Button variant="outline" startIcon={<ShieldCheck />} onClick={() => setOpen(true)}>
-        {t('设置访问权限', 'Configure access')}
-      </Button>
-      {saved && <span role="status">{t('访问权限已保存。', 'Access settings saved.')}</span>}
-      <Modal
-        open={open}
-        width={680}
-        title={t('注册智能体', 'Register agent')}
-        description={t(
-          '设置身份，再授予工作所需的访问权限。',
-          'Give the agent an identity, then grant the access it needs.',
-        )}
-        icon={<Bot />}
-        cancelText={t('返回', 'Back')}
-        confirmText={t('保存权限', 'Save access')}
-        onClose={() => setOpen(false)}
-        onConfirm={() => {
-          setSaved(true);
-          setOpen(false);
-        }}
-        footer={({ cancelButton, confirmButton }) => (
-          <>
-            <span
-              style={{
-                flex: '1 1 180px',
-                color: 'var(--leaf-color-text-muted)',
-                fontSize: 'var(--leaf-font-size-sm)',
-              }}
-            >
-              {t('第 2 步，共 4 步 · 草稿已保存', 'Step 2 of 4 · Draft saved')}
-            </span>
-            <Space size="sm" wrap={false}>
-              {cancelButton}
-              {confirmButton}
-            </Space>
-          </>
-        )}
-      >
-        <Space direction="vertical" align="stretch" size={20}>
-          <Steps
-            size="sm"
-            current={1}
-            items={[
-              { title: t('身份', 'Identity') },
-              { title: t('访问范围', 'Access scope') },
-              { title: t('凭证', 'Credentials') },
-              { title: t('确认', 'Review') },
-            ]}
-          />
-          <CheckboxGroup
-            legend={t('连接服务', 'Integrations')}
-            variant="card"
-            value={services}
-            onChange={setServices}
-            options={[
-              {
-                value: 'mail',
-                label: t('邮件', 'Mail'),
-                description: t('读取与整理邮件', 'Read and organize messages'),
-                icon: <Mail />,
-              },
-              {
-                value: 'drive',
-                label: t('云端文件', 'Cloud drive'),
-                description: t('查找与整理文件', 'Find and organize files'),
-                icon: <HardDrive />,
-              },
-              {
-                value: 'chat',
-                label: t('团队沟通', 'Team chat'),
-                description: t('尚未连接', 'Not connected'),
-                icon: <MessageSquare />,
-              },
-              {
-                value: 'warehouse',
-                label: t('数据仓库', 'Data warehouse'),
-                description: t('需要管理员配置', 'Administrator setup required'),
-                icon: <Snowflake />,
-                disabled: true,
-              },
-            ]}
-          />
-          <CheckboxGroup
-            legend={t('邮件权限', 'Mail permissions')}
-            variant="list"
-            value={permissions}
-            onChange={setPermissions}
-            options={[
-              {
-                value: 'read',
-                label: t('读取邮件', 'Read messages'),
-                description: 'mail.readonly',
-              },
-              {
-                value: 'labels',
-                label: t('管理标签', 'Manage labels'),
-                description: 'mail.labels',
-              },
-              {
-                value: 'send',
-                label: t('发送邮件', 'Send messages'),
-                description: 'mail.send',
-                extra: (
-                  <Tag color="warning" size="sm">
-                    {t('需要审批', 'Needs approval')}
-                  </Tag>
-                ),
-              },
-              {
-                value: 'delete',
-                label: t('删除邮件', 'Delete messages'),
-                description: 'mail.modify',
-                extra: <Tag size="sm">{t('策略已限制', 'Blocked by policy')}</Tag>,
-                disabled: true,
-              },
-            ]}
-          />
-          <Alert
-            type="success"
-            icon={<ShieldCheck size={20} />}
-            title={t(
-              `已选择 ${services.length} 项服务、${permissions.length} 项权限`,
-              `${services.length} services and ${permissions.length} permissions selected`,
-            )}
-            description={t(
-              '默认仅授予读取权限，发送邮件仍需审批。',
-              'Read-only by default. Outbound messages still require approval.',
-            )}
-          />
-        </Space>
-      </Modal>
-    </Space>
-  );
-}
diff --git a/apps/docs/src/examples/modal/description.tsx b/apps/docs/src/examples/modal/description.tsx
new file mode 100644
index 0000000..6c567f1
--- /dev/null
+++ b/apps/docs/src/examples/modal/description.tsx
@@ -0,0 +1,25 @@
+import { Button, Modal } from '@ifhover/leaf-ui';
+import { Save } from 'lucide-react';
+import { useState } from 'react';
+
+export function ModalDescription() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        带图标与说明
+      </Button>
+      <Modal
+        open={open}
+        title="保存设置"
+        description="保存后，新设置将立即生效。"
+        icon={<Save />}
+        confirmText="保存"
+        onClose={() => setOpen(false)}
+        onConfirm={() => setOpen(false)}
+      >
+        确认保存当前设置？
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/src/examples/pagination/basic.tsx b/apps/docs/src/examples/pagination/basic.tsx
index a4b3fd7..a35a873 100644
--- a/apps/docs/src/examples/pagination/basic.tsx
+++ b/apps/docs/src/examples/pagination/basic.tsx
@@ -1,27 +1,16 @@
-import { Pagination, Space } from '@ifhover/leaf-ui';
-import { useState } from 'react';
+import { Pagination, Space, Text } from '@ifhover/leaf-ui';
+
 export function PaginationBasic() {
-  const [current, setCurrent] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Pagination
-        total={240}
-        current={current}
-        pageSize={pageSize}
-        showSizeChanger
-        showQuickJumper
-        showTotal={(total, [start, end]) => `${start}–${end} / ${total} 条`}
-        onChange={(page, size) => {
-          setCurrent(page);
-          setPageSize(size);
-        }}
-      />
-      <Pagination total={50} size="sm" />
-      <Pagination total={240} simple disabled />
-      <p className="leaf-demo-note">
-        当前第 {current} 页，每页 {pageSize} 条。
-      </p>
+    <Space direction="vertical" align="center" size="lg">
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">描边（默认）</Text>
+        <Pagination total={50} defaultCurrent={2} />
+      </Space>
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">无边框</Text>
+        <Pagination total={50} defaultCurrent={2} variant="ghost" />
+      </Space>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/pagination/controlled.tsx b/apps/docs/src/examples/pagination/controlled.tsx
new file mode 100644
index 0000000..210d7ac
--- /dev/null
+++ b/apps/docs/src/examples/pagination/controlled.tsx
@@ -0,0 +1,17 @@
+import { Pagination } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function PaginationControlled() {
+  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
+
+  return (
+    <Pagination
+      total={240}
+      {...pagination}
+      showTotal
+      showSizeChanger
+      showQuickJumper
+      onChange={(current, pageSize) => setPagination({ current, pageSize })}
+    />
+  );
+}
diff --git a/apps/docs/src/examples/pagination/sizes.tsx b/apps/docs/src/examples/pagination/sizes.tsx
new file mode 100644
index 0000000..05a4dc5
--- /dev/null
+++ b/apps/docs/src/examples/pagination/sizes.tsx
@@ -0,0 +1,20 @@
+import { Pagination, Space, Text } from '@ifhover/leaf-ui';
+
+export function PaginationSizes() {
+  return (
+    <Space direction="vertical" align="center" size="lg">
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">小尺寸</Text>
+        <Pagination total={30} defaultCurrent={2} size="sm" />
+      </Space>
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">默认尺寸</Text>
+        <Pagination total={30} defaultCurrent={2} size="md" />
+      </Space>
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">大尺寸</Text>
+        <Pagination total={30} defaultCurrent={2} size="lg" />
+      </Space>
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/pagination/states.tsx b/apps/docs/src/examples/pagination/states.tsx
new file mode 100644
index 0000000..7e20bb8
--- /dev/null
+++ b/apps/docs/src/examples/pagination/states.tsx
@@ -0,0 +1,16 @@
+import { Pagination, Space, Text } from '@ifhover/leaf-ui';
+
+export function PaginationStates() {
+  return (
+    <Space direction="vertical" align="center" size="lg">
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">简洁模式</Text>
+        <Pagination total={240} defaultCurrent={3} simple />
+      </Space>
+      <Space direction="vertical" align="start" size="sm">
+        <Text tone="muted">禁用状态</Text>
+        <Pagination total={50} defaultCurrent={2} disabled />
+      </Space>
+    </Space>
+  );
+}
diff --git a/apps/docs/src/examples/popover/basic.tsx b/apps/docs/src/examples/popover/basic.tsx
index 9fa398f..357bc15 100644
--- a/apps/docs/src/examples/popover/basic.tsx
+++ b/apps/docs/src/examples/popover/basic.tsx
@@ -1,7 +1,7 @@
-import { Button, Popover, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Popover } from '@ifhover/leaf-ui';
 export function PopoverBasic() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       <Popover title="项目信息" content="在此查看项目概览和最近更新。">
         <Button variant="outline">点击查看</Button>
       </Popover>
@@ -13,6 +13,6 @@ export function PopoverBasic() {
       >
         <Button variant="outline">悬停查看</Button>
       </Popover>
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/popover/controlled.tsx b/apps/docs/src/examples/popover/controlled.tsx
index 7be932f..c5356de 100644
--- a/apps/docs/src/examples/popover/controlled.tsx
+++ b/apps/docs/src/examples/popover/controlled.tsx
@@ -1,7 +1,6 @@
-import { Button, Input, Popover, Space } from '@ifhover/leaf-ui';
-import { useId, useState } from 'react';
+import { Button, Form, FormField, Input, Popover } from '@ifhover/leaf-ui';
+import { useState } from 'react';
 export function PopoverControlled() {
-  const id = useId();
   const [open, setOpen] = useState(false);
   return (
     <Popover
@@ -10,13 +9,18 @@ export function PopoverControlled() {
       onOpenChange={setOpen}
       width={260}
       content={
-        <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-          <label className="leaf-demo-field" htmlFor={id}>
-            项目名称
-            <Input id={id} defaultValue="Leaf Garden" />
-          </label>
-          <Button onClick={() => setOpen(false)}>保存并关闭</Button>
-        </Space>
+        <Form
+          layout="vertical"
+          onSubmit={(event) => {
+            event.preventDefault();
+            setOpen(false);
+          }}
+        >
+          <FormField label="项目名称">
+            <Input defaultValue="Leaf Garden" />
+          </FormField>
+          <Button type="submit">保存并关闭</Button>
+        </Form>
       }
     >
       <Button variant="outline">点击编辑</Button>
diff --git a/apps/docs/src/examples/popover/placements.tsx b/apps/docs/src/examples/popover/placements.tsx
index 5030e2c..5e9f96f 100644
--- a/apps/docs/src/examples/popover/placements.tsx
+++ b/apps/docs/src/examples/popover/placements.tsx
@@ -1,7 +1,7 @@
-import { Button, Popover, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Popover } from '@ifhover/leaf-ui';
 export function PopoverPlacements() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       {(['top', 'bottom', 'left', 'right'] as const).map((placement) => (
         <Popover
           key={placement}
@@ -14,6 +14,6 @@ export function PopoverPlacements() {
           </Button>
         </Popover>
       ))}
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/progress/basic.tsx b/apps/docs/src/examples/progress/basic.tsx
index b7461c1..8be888e 100644
--- a/apps/docs/src/examples/progress/basic.tsx
+++ b/apps/docs/src/examples/progress/basic.tsx
@@ -1,11 +1,11 @@
-import { Button, Progress, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Progress, Space } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function ProgressBasic() {
   const [percent, setPercent] = useState(45);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Progress percent={percent} aria-label="上传进度" />
-      <Space wrap className="leaf-demo-row">
+      <Flex gap="md" align="center" wrap justify="center">
         <Button
           variant="outline"
           disabled={percent === 0}
@@ -16,7 +16,7 @@ export function ProgressBasic() {
         <Button disabled={percent === 100} onClick={() => setPercent(Math.min(100, percent + 10))}>
           增加
         </Button>
-      </Space>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/progress/capabilities.tsx b/apps/docs/src/examples/progress/capabilities.tsx
index c81dc20..c9ff302 100644
--- a/apps/docs/src/examples/progress/capabilities.tsx
+++ b/apps/docs/src/examples/progress/capabilities.tsx
@@ -1,9 +1,9 @@
-import { Progress, Space } from '@ifhover/leaf-ui';
+import { Flex, Progress, Space, Text } from '@ifhover/leaf-ui';
 export function Capabilities({ english = false }) {
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>{english ? 'Segmented tasks' : '分段任务'}</p>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Segmented tasks' : '分段任务'}</Text>
         <Progress
           percent={75}
           segments={[
@@ -11,15 +11,15 @@ export function Capabilities({ english = false }) {
             { key: 'b', percent: 40, color: '#1677ff' },
           ]}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>{english ? 'Discrete steps' : '分步进度'}</p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Discrete steps' : '分步进度'}</Text>
         <Progress percent={60} steps={10} />
-      </div>
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>{english ? 'Dashboard' : '仪表盘'}</p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Dashboard' : '仪表盘'}</Text>
         <Progress type="circle" dashboard percent={65} successPercent={30} />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/progress/circles.tsx b/apps/docs/src/examples/progress/circles.tsx
index faccc35..5549026 100644
--- a/apps/docs/src/examples/progress/circles.tsx
+++ b/apps/docs/src/examples/progress/circles.tsx
@@ -1,19 +1,19 @@
-import { Progress, Space } from '@ifhover/leaf-ui';
+import { Flex, Progress, Text } from '@ifhover/leaf-ui';
 export function ProgressCircles() {
   return (
-    <Space wrap className="leaf-demo-row">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">进行中</span>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Flex direction="column" gap="sm" align="start">
+        <Text>进行中</Text>
         <Progress percent={45} type="circle" size={80} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">已完成</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>已完成</Text>
         <Progress percent={100} type="circle" size={80} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">失败</span>
+      </Flex>
+      <Flex direction="column" gap="sm" align="start">
+        <Text>失败</Text>
         <Progress percent={60} type="circle" status="error" size={80} />
-      </div>
-    </Space>
+      </Flex>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/progress/states.tsx b/apps/docs/src/examples/progress/states.tsx
index bd947dc..0e81daf 100644
--- a/apps/docs/src/examples/progress/states.tsx
+++ b/apps/docs/src/examples/progress/states.tsx
@@ -1,23 +1,23 @@
-import { Progress, Space } from '@ifhover/leaf-ui';
+import { Flex, Progress, Space, Text } from '@ifhover/leaf-ui';
 export function ProgressStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">静态进度</span>
+    <Space direction="vertical" align="stretch">
+      <Flex direction="column" gap="sm">
+        <Text>静态进度</Text>
         <Progress percent={45} active={false} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">任务失败</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>任务失败</Text>
         <Progress percent={70} status="error" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">任务完成</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>任务完成</Text>
         <Progress percent={100} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">进度暂时无法估计</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>进度暂时无法估计</Text>
         <Progress indeterminate />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/qr-code/advanced.tsx b/apps/docs/src/examples/qr-code/advanced.tsx
index 3b7fb3e..088ca20 100644
--- a/apps/docs/src/examples/qr-code/advanced.tsx
+++ b/apps/docs/src/examples/qr-code/advanced.tsx
@@ -1,15 +1,15 @@
-import { QRCode, Space } from '@ifhover/leaf-ui';
+import { Flex, QRCode, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function QRCodeStatus() {
   const [expired, setExpired] = useState(true);
   return (
-    <Space wrap className="leaf-demo-row">
-      <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-        <strong className="leaf-demo-note">加载中</strong>
+    <Flex gap="md" align="center" wrap justify="center">
+      <Space direction="vertical" align="stretch">
+        <Text tone="muted">加载中</Text>
         <QRCode value="Leaf UI" size={140} status="loading" />
       </Space>
-      <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-        <strong className="leaf-demo-note">过期后刷新</strong>
+      <Space direction="vertical" align="stretch">
+        <Text tone="muted">过期后刷新</Text>
         <QRCode
           value="Leaf UI"
           size={140}
@@ -17,10 +17,10 @@ export function QRCodeStatus() {
           onRefresh={() => setExpired(false)}
         />
       </Space>
-      <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-        <strong className="leaf-demo-note">自定义颜色</strong>
+      <Space direction="vertical" align="stretch">
+        <Text tone="muted">自定义颜色</Text>
         <QRCode value="Leaf UI" size={140} color="#2463eb" />
       </Space>
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/radio/controlled.tsx b/apps/docs/src/examples/radio/controlled.tsx
index 353241b..d7cb551 100644
--- a/apps/docs/src/examples/radio/controlled.tsx
+++ b/apps/docs/src/examples/radio/controlled.tsx
@@ -1,10 +1,10 @@
-import { RadioGroup, Space } from '@ifhover/leaf-ui';
+import { RadioGroup, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function RadioControlled() {
   const [value, setValue] = useState('daily');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <RadioGroup
         label="提醒频率"
         direction="vertical"
@@ -16,7 +16,7 @@ export function RadioControlled() {
           { label: '仅重要消息', value: 'important' },
         ]}
       />
-      <span className="leaf-demo-note">当前选择：{value}</span>
+      <Text tone="muted">当前选择：{value}</Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/rate/basic.tsx b/apps/docs/src/examples/rate/basic.tsx
index e1076bf..6d7637b 100644
--- a/apps/docs/src/examples/rate/basic.tsx
+++ b/apps/docs/src/examples/rate/basic.tsx
@@ -1,11 +1,13 @@
-import { Rate, Space } from '@ifhover/leaf-ui';
+import { Rate, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function RateBasic() {
   const [value, setValue] = useState(3.5);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Rate aria-label="项目评分" value={value} onChange={setValue} allowHalf />
-      <output className="leaf-demo-note">当前评分: {value}</output>
+      <output>
+        <Text tone="muted">当前评分: {value}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/rate/colors.tsx b/apps/docs/src/examples/rate/colors.tsx
index a785765..d5c75e9 100644
--- a/apps/docs/src/examples/rate/colors.tsx
+++ b/apps/docs/src/examples/rate/colors.tsx
@@ -1,17 +1,17 @@
-import { Rate, Space } from '@ifhover/leaf-ui';
+import { Flex, Rate, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function RateColors() {
   const [value, setValue] = useState(2);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Rate aria-label="按分数变色" value={value} onChange={setValue} colorByValue />
-      <output className="leaf-demo-note">
-        低分珊瑚红，中等琥珀橙，高分星光黄。当前评分: {value}
+      <output>
+        <Text tone="muted">低分珊瑚红，中等琥珀橙，高分星光黄。当前评分: {value}</Text>
       </output>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">自定义品牌颜色</span>
+      <Flex direction="column" gap="sm">
+        <Text>自定义品牌颜色</Text>
         <Rate defaultValue={4} readOnly color="#7654c6" />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/rate/states.tsx b/apps/docs/src/examples/rate/states.tsx
index 96bbc94..4030057 100644
--- a/apps/docs/src/examples/rate/states.tsx
+++ b/apps/docs/src/examples/rate/states.tsx
@@ -1,15 +1,15 @@
-import { Rate, Space } from '@ifhover/leaf-ui';
+import { Flex, Rate, Space, Text } from '@ifhover/leaf-ui';
 export function RateStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">只读评分</span>
+    <Space direction="vertical" align="stretch">
+      <Flex direction="column" gap="sm">
+        <Text>只读评分</Text>
         <Rate defaultValue={4} readOnly />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用评分</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>禁用评分</Text>
         <Rate defaultValue={2} disabled size="sm" />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/result/states.tsx b/apps/docs/src/examples/result/states.tsx
index cad8645..7196545 100644
--- a/apps/docs/src/examples/result/states.tsx
+++ b/apps/docs/src/examples/result/states.tsx
@@ -1,7 +1,7 @@
 import { Button, Result, Space } from '@ifhover/leaf-ui';
 export function ResultStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Result
         status="empty"
         size="sm"
diff --git a/apps/docs/src/examples/scenarios/accessibility.tsx b/apps/docs/src/examples/scenarios/accessibility.tsx
deleted file mode 100644
index 19be7ab..0000000
--- a/apps/docs/src/examples/scenarios/accessibility.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import {
-  Button,
-  Checkbox,
-  ConfigProvider,
-  Drawer,
-  Form,
-  FormField,
-  Input,
-  Modal,
-  RadioGroup,
-  Select,
-  Slider,
-  Space,
-  Switch,
-  Tabs,
-} from '@ifhover/leaf-ui';
-import { useId, useRef, useState } from 'react';
-
-/** The documentation and browser acceptance exercise this same interactive sample. */
-export function AccessibilityWorkbench({ english = false }: { english?: boolean }) {
-  const t = (zh: string, en: string) => (english ? en : zh);
-  const id = useId();
-  const nameInput = useRef<HTMLInputElement>(null);
-  const [dark, setDark] = useState(false);
-  const [compact, setCompact] = useState(false);
-  const [motion, setMotion] = useState(true);
-  const [blur, setBlur] = useState(true);
-  const [modal, setModal] = useState(false);
-  const [drawer, setDrawer] = useState(false);
-  const [saved, setSaved] = useState(false);
-  return (
-    <ConfigProvider
-      data-testid="acceptance-workbench"
-      className="rp-not-doc"
-      locale={english ? 'en-US' : 'zh-CN'}
-      density={compact ? 'compact' : 'comfortable'}
-      maskBlur={blur}
-      theme={{ appearance: dark ? 'dark' : 'light', motion }}
-      style={{
-        padding: 20,
-        border: '1px solid var(--leaf-color-border)',
-        borderRadius: 16,
-        color: 'var(--leaf-color-text)',
-        background: 'var(--leaf-color-surface)',
-      }}
-    >
-      <Space wrap style={{ marginBottom: 20 }}>
-        <Switch checked={dark} onChange={(event) => setDark(event.target.checked)}>
-          {t('深色', 'Dark')}
-        </Switch>
-        <Switch checked={compact} onChange={(event) => setCompact(event.target.checked)}>
-          {t('紧凑', 'Compact')}
-        </Switch>
-        <Switch checked={motion} onChange={(event) => setMotion(event.target.checked)}>
-          {t('动效', 'Motion')}
-        </Switch>
-        <Switch checked={blur} onChange={(event) => setBlur(event.target.checked)}>
-          {t('遮罩模糊', 'Mask blur')}
-        </Switch>
-      </Space>
-      <Form
-        aria-label={t('验收表单', 'Acceptance form')}
-        onSubmit={(event) => {
-          event.preventDefault();
-          setSaved(true);
-        }}
-      >
-        <FormField label={t('姓名', 'Name')} required>
-          <Input name="name" required defaultValue="Lin" />
-        </FormField>
-        <FormField label={t('邮箱', 'Email')} required>
-          <Input type="email" name="email" required defaultValue="lin@example.com" />
-        </FormField>
-        <FormField label={t('负责人', 'Owner')}>
-          <Select
-            name="owner"
-            defaultValue="lin"
-            options={[
-              { value: 'lin', label: 'Lin' },
-              { value: 'alex', label: 'Alex' },
-            ]}
-          />
-        </FormField>
-        <FormField label={t('优先级', 'Priority')}>
-          <Slider aria-label={t('优先级', 'Priority')} defaultValue={40} />
-        </FormField>
-        <fieldset style={{ border: 0, padding: 0, margin: 0 }}>
-          <legend>{t('通知方式', 'Notification channel')}</legend>
-          <RadioGroup
-            name="channel"
-            defaultValue="email"
-            options={[
-              { value: 'email', label: t('邮件', 'Email') },
-              { value: 'app', label: t('应用内', 'In app') },
-            ]}
-          />
-        </fieldset>
-        <Checkbox name="reminders" defaultChecked>
-          {t('启用提醒', 'Enable reminders')}
-        </Checkbox>
-        <Space wrap>
-          <Button type="submit">{t('保存', 'Save')}</Button>
-          <Button variant="outline" disabled>
-            {t('不可用操作', 'Unavailable action')}
-          </Button>
-          <Button variant="outline" onClick={() => setModal(true)}>
-            {t('打开弹窗', 'Open dialog')}
-          </Button>
-          <Button variant="outline" onClick={() => setDrawer(true)}>
-            {t('打开抽屉', 'Open drawer')}
-          </Button>
-        </Space>
-        <div role="status">{saved ? t('表单已保存', 'Form saved') : ''}</div>
-      </Form>
-      <Tabs
-        aria-label={t('验收标签页', 'Acceptance tabs')}
-        items={[
-          {
-            key: 'overview',
-            label: t('概览', 'Overview'),
-            children: (
-              <p>{t('键盘可在标签页之间移动。', 'Use the keyboard to move between tabs.')}</p>
-            ),
-          },
-          {
-            key: 'details',
-            label: t('详情', 'Details'),
-            children: (
-              <p>{t('内容区域与选中标签页关联。', 'The selected tab labels its content panel.')}</p>
-            ),
-          },
-        ]}
-      />
-      <Modal
-        initialFocus={nameInput}
-        title={t('编辑信息', 'Edit details')}
-        open={modal}
-        onClose={() => setModal(false)}
-        footer={<Button onClick={() => setModal(false)}>{t('完成', 'Done')}</Button>}
-      >
-        <Form>
-          <FormField label={t('弹窗姓名', 'Dialog name')}>
-            <Input ref={nameInput} defaultValue="Lin" />
-          </FormField>
-          <FormField label={t('弹窗负责人', 'Dialog owner')}>
-            <Select
-              defaultValue="lin"
-              options={[
-                { value: 'lin', label: 'Lin' },
-                { value: 'alex', label: 'Alex' },
-              ]}
-            />
-          </FormField>
-        </Form>
-      </Modal>
-      <Drawer
-        title={t('检查抽屉', 'Inspect drawer')}
-        open={drawer}
-        onClose={() => setDrawer(false)}
-        footer={<Button onClick={() => setDrawer(false)}>{t('完成', 'Done')}</Button>}
-      >
-        <p id={`${id}-drawer-description`}>
-          {t(
-            '检查焦点循环、关闭与焦点返回。',
-            'Check focus trapping, dismissal and focus restoration.',
-          )}
-        </p>
-        <Input aria-label={t('抽屉备注', 'Drawer notes')} />
-      </Drawer>
-    </ConfigProvider>
-  );
-}
diff --git a/apps/docs/src/examples/scenarios/basic.tsx b/apps/docs/src/examples/scenarios/basic.tsx
deleted file mode 100644
index f32d7f2..0000000
--- a/apps/docs/src/examples/scenarios/basic.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import {
-  Button,
-  CheckboxGroup,
-  Form,
-  FormField,
-  FormList,
-  Input,
-  Select,
-  type SelectOption,
-  Space,
-  Upload,
-  useFormValidation,
-} from '@ifhover/leaf-ui';
-import { useEffect, useRef, useState } from 'react';
-export function CompositeForm({ english = false }: { english?: boolean }) {
-  const validation = useFormValidation({
-    validate: async (data, signal): Promise<Record<string, string>> => {
-      const name = String(data.get('name') ?? '').trim();
-      await new Promise<void>((resolve) => {
-        const timer = setTimeout(resolve, 250);
-        signal.addEventListener(
-          'abort',
-          () => {
-            clearTimeout(timer);
-            resolve();
-          },
-          { once: true },
-        );
-      });
-      if (signal.aborted) return {};
-      return name.length < 2
-        ? { name: english ? 'Use at least two characters.' : '名称至少两个字符。' }
-        : {};
-    },
-    onSubmit: async (data) => {
-      setSummary(
-        JSON.stringify(
-          [...data.entries()].map(([key, value]) => [
-            key,
-            value instanceof File ? value.name : value,
-          ]),
-          null,
-          2,
-        ),
-      );
-    },
-  });
-  const [summary, setSummary] = useState('');
-  return (
-    <Form
-      onSubmit={validation.handleSubmit}
-      onReset={validation.handleReset}
-      disabled={validation.pending}
-    >
-      <FormField label={english ? 'Project' : '项目名称'} required error={validation.errors.name}>
-        <Input name="name" placeholder={english ? 'Project name' : '项目名称'} />
-      </FormField>
-      <FormField label={english ? 'Teams' : '参与团队'} required>
-        <CheckboxGroup name="teams" options={['Design', 'Engineering', 'Support']} />
-      </FormField>
-      <FormField label={english ? 'Files' : '相关文件'}>
-        <Upload
-          name="files"
-          autoUpload={false}
-          multiple
-          hint={
-            english ? 'Files are included in native FormData.' : '文件会包含在原生 FormData 中。'
-          }
-        />
-      </FormField>
-      <FormList name="members" defaultValue={[{ email: '' }]}>
-        {(fields, operations) => (
-          <div style={{ display: 'grid', gap: 12 }}>
-            {fields.map((field) => (
-              <FormField
-                key={field.key}
-                label={`${english ? 'Member' : '成员'} ${field.index + 1}`}
-              >
-                <Space>
-                  <Input
-                    name={`${field.name}.email`}
-                    type="email"
-                    placeholder="name@example.com"
-                    aria-label={english ? 'Member email' : '成员邮箱'}
-                  />
-                  <Button variant="ghost" danger onClick={() => operations.remove(field.index)}>
-                    {english ? 'Remove' : '移除'}
-                  </Button>
-                </Space>
-              </FormField>
-            ))}
-            <Button variant="outline" onClick={() => operations.add({ email: '' })}>
-              {english ? 'Add member' : '添加成员'}
-            </Button>
-          </div>
-        )}
-      </FormList>
-      <Space>
-        <Button type="submit" loading={validation.pending}>
-          {english ? 'Save' : '保存'}
-        </Button>
-        <Button variant="outline" type="reset">
-          {english ? 'Reset' : '重置'}
-        </Button>
-      </Space>
-      {summary && <pre style={{ whiteSpace: 'pre-wrap' }}>{summary}</pre>}
-    </Form>
-  );
-}
-const teams = [
-  { value: 'design', label: 'Design' },
-  { value: 'engineering', label: 'Engineering' },
-  { value: 'support', label: 'Support' },
-  { value: 'research', label: 'Research' },
-];
-export function RemoteSelection({ english = false }: { english?: boolean }) {
-  const [query, setQuery] = useState(''),
-    [options, setOptions] = useState<SelectOption[]>(teams),
-    [loading, setLoading] = useState(false),
-    [value, setValue] = useState('design');
-  const generation = useRef(0);
-  useEffect(() => {
-    const request = ++generation.current;
-    const abort = new AbortController();
-    setLoading(true);
-    const timer = setTimeout(() => {
-      if (abort.signal.aborted || request !== generation.current) return;
-      setOptions(
-        teams.filter((option) => String(option.label).toLowerCase().includes(query.toLowerCase())),
-      );
-      setLoading(false);
-    }, 300);
-    return () => {
-      abort.abort();
-      clearTimeout(timer);
-    };
-  }, [query]);
-  return (
-    <div style={{ maxWidth: 360 }}>
-      <Select
-        aria-label={english ? 'Remote team' : '远程团队'}
-        showSearch
-        filterOption={false}
-        loading={loading}
-        options={options}
-        onSearch={setQuery}
-        value={value}
-        onChange={setValue}
-        allowClear
-      />
-      <p>
-        {english
-          ? 'Selected labels remain visible when search results are replaced. Superseded requests cannot overwrite a later result.'
-          : '搜索结果替换后仍保留选中项名称，过期请求不会覆盖较新的结果。'}
-      </p>
-    </div>
-  );
-}
diff --git a/apps/docs/src/examples/scenarios/remote.tsx b/apps/docs/src/examples/scenarios/remote.tsx
new file mode 100644
index 0000000..3d835ae
--- /dev/null
+++ b/apps/docs/src/examples/scenarios/remote.tsx
@@ -0,0 +1,52 @@
+import { Flex, Select, type SelectOption, Text } from '@ifhover/leaf-ui';
+import { useEffect, useRef, useState } from 'react';
+
+const teams = [
+  { value: 'design', label: 'Design' },
+  { value: 'engineering', label: 'Engineering' },
+  { value: 'support', label: 'Support' },
+  { value: 'research', label: 'Research' },
+];
+export function RemoteSelection({ english = false }: { english?: boolean }) {
+  const [query, setQuery] = useState(''),
+    [options, setOptions] = useState<SelectOption[]>(teams),
+    [loading, setLoading] = useState(false),
+    [value, setValue] = useState('design');
+  const generation = useRef(0);
+  useEffect(() => {
+    const request = ++generation.current;
+    const abort = new AbortController();
+    setLoading(true);
+    const timer = setTimeout(() => {
+      if (abort.signal.aborted || request !== generation.current) return;
+      setOptions(
+        teams.filter((option) => String(option.label).toLowerCase().includes(query.toLowerCase())),
+      );
+      setLoading(false);
+    }, 300);
+    return () => {
+      abort.abort();
+      clearTimeout(timer);
+    };
+  }, [query]);
+  return (
+    <Flex direction="column" gap="sm">
+      <Select
+        aria-label={english ? 'Remote team' : '远程团队'}
+        showSearch
+        filterOption={false}
+        loading={loading}
+        options={options}
+        onSearch={setQuery}
+        value={value}
+        onChange={setValue}
+        allowClear
+      />
+      <Text tone="muted">
+        {english
+          ? 'Selected labels remain visible when search results are replaced. Superseded requests cannot overwrite a later result.'
+          : '搜索结果替换后仍保留选中项名称，过期请求不会覆盖较新的结果。'}
+      </Text>
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/examples/scenarios/schema.tsx b/apps/docs/src/examples/scenarios/schema.tsx
index 5320d6b..a2832a9 100644
--- a/apps/docs/src/examples/scenarios/schema.tsx
+++ b/apps/docs/src/examples/scenarios/schema.tsx
@@ -1,4 +1,13 @@
-import { Alert, Button, Form, FormField, Input, Space, useFormValidation } from '@ifhover/leaf-ui';
+import {
+  Alert,
+  Button,
+  Form,
+  FormField,
+  Input,
+  Space,
+  Text,
+  useFormValidation,
+} from '@ifhover/leaf-ui';
 import { useState } from 'react';
 import { z } from 'zod';
 
@@ -67,11 +76,11 @@ export function SchemaForm({ english = false }: { english?: boolean }) {
           {english ? 'Reset' : '重置'}
         </Button>
       </Space>
-      <p className="leaf-demo-note">
+      <Text tone="muted">
         {english
           ? 'An account shorter than three characters fails schema validation. Use reserved with a valid email to see a server field error.'
           : '账号不足三个字符会出现 Schema 校验错误；使用 reserved 并填写有效邮箱，可查看服务端字段错误。'}
-      </p>
+      </Text>
       {saved && <Alert type="success" title={english ? 'Saved successfully.' : '保存成功。'} />}
     </Form>
   );
diff --git a/apps/docs/src/examples/scenarios/validation.tsx b/apps/docs/src/examples/scenarios/validation.tsx
new file mode 100644
index 0000000..a831e4a
--- /dev/null
+++ b/apps/docs/src/examples/scenarios/validation.tsx
@@ -0,0 +1,58 @@
+import { Button, Flex, Form, FormField, Input, Text, useFormValidation } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function AsyncValidation({ english = false }: { english?: boolean }) {
+  const [summary, setSummary] = useState('');
+  const validation = useFormValidation({
+    validate: async (data, signal): Promise<Record<string, string>> => {
+      await new Promise<void>((resolve) => {
+        const timer = setTimeout(resolve, 250);
+        signal.addEventListener(
+          'abort',
+          () => {
+            clearTimeout(timer);
+            resolve();
+          },
+          { once: true },
+        );
+      });
+      if (signal.aborted) return {};
+      const name = String(data.get('name') ?? '').trim();
+      return name.length < 2
+        ? { name: english ? 'Use at least two characters.' : '名称至少两个字符。' }
+        : {};
+    },
+    onSubmit: async (data) => {
+      setSummary(String(data.get('name') ?? ''));
+    },
+  });
+  return (
+    <Form
+      layout="vertical"
+      onSubmit={validation.handleSubmit}
+      onReset={(event) => {
+        validation.handleReset(event);
+        setSummary('');
+      }}
+      disabled={validation.pending}
+    >
+      <FormField label={english ? 'Project' : '项目名称'} required error={validation.errors.name}>
+        <Input name="name" placeholder="Leaf Garden" />
+      </FormField>
+      <Flex gap="sm" wrap>
+        <Button type="submit" loading={validation.pending}>
+          {english ? 'Save' : '保存'}
+        </Button>
+        <Button type="reset" variant="outline">
+          {english ? 'Reset' : '重置'}
+        </Button>
+      </Flex>
+      {summary && (
+        <Text role="status">
+          {english ? 'Saved: ' : '已保存：'}
+          {summary}
+        </Text>
+      )}
+    </Form>
+  );
+}
diff --git a/apps/docs/src/examples/scenarios/workspace.scss b/apps/docs/src/examples/scenarios/workspace.scss
deleted file mode 100644
index 732baba..0000000
--- a/apps/docs/src/examples/scenarios/workspace.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-.leaf-business {
-  border: 1px solid var(--leaf-color-border);
-  border-radius: var(--leaf-radius-lg);
-  overflow: hidden;
-  color: var(--leaf-color-text);
-  background: var(--leaf-color-surface-muted);
-  font: var(--leaf-font-size)/1.6 var(--leaf-font-family);
-  * {
-    box-sizing: border-box;
-  }
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--leaf-color-border);
-    background: var(--leaf-color-surface);
-  }
-  &__body {
-    min-height: 560px;
-  }
-  &__nav {
-    background: var(--leaf-color-surface);
-    padding: 12px 6px;
-    border-inline-end: 1px solid var(--leaf-color-border);
-    .leaf-menu {
-      width: 100%;
-    }
-  }
-  &__content {
-    flex: 1;
-    min-width: 0;
-    padding: var(--leaf-spacing-lg);
-  }
-  &__heading {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 20px;
-    h2 {
-      margin: 0;
-      font-size: 22px;
-      border: 0;
-    }
-    p {
-      margin: 4px 0 0;
-      color: var(--leaf-color-text-muted);
-    }
-  }
-  &__metrics {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
-    margin-bottom: 16px;
-  }
-  &__filters {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 12px;
-    .leaf-input {
-      flex: 1;
-      min-width: min(100%, 160px);
-    }
-  }
-  &__count {
-    color: var(--leaf-color-text-muted);
-    font-size: 12px;
-    margin-top: 12px;
-  }
-  &__projects {
-    padding: 0;
-    margin: 16px 0 0;
-    list-style: none;
-  }
-  &__project {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 16px;
-    padding: 16px 0;
-    & + & {
-      border-top: 1px solid var(--leaf-color-divider);
-    }
-    p {
-      margin: 4px 0 0;
-      color: var(--leaf-color-text-muted);
-    }
-  }
-  .leaf-alert {
-    margin-bottom: 16px;
-  }
-  @media (max-width: 760px) {
-    &__body {
-      flex-direction: column;
-    }
-    &__nav {
-      width: 100% !important;
-      border-inline-end: 0;
-      border-bottom: 1px solid var(--leaf-color-border);
-      .leaf-menu {
-        display: flex;
-        gap: 8px;
-      }
-    }
-    &__content {
-      padding: 16px;
-    }
-  }
-}
diff --git a/apps/docs/src/examples/scenarios/workspace.tsx b/apps/docs/src/examples/scenarios/workspace.tsx
deleted file mode 100644
index a2441d2..0000000
--- a/apps/docs/src/examples/scenarios/workspace.tsx
+++ /dev/null
@@ -1,466 +0,0 @@
-import {
-  Alert,
-  Button,
-  Card,
-  ConfigProvider,
-  Form,
-  FormField,
-  Input,
-  Layout,
-  Menu,
-  Modal,
-  Result,
-  Segmented,
-  Select,
-  Space,
-  Statistic,
-  Switch,
-  Tag,
-  Textarea,
-  useMessage,
-} from '@ifhover/leaf-ui';
-import { useDark } from '@rspress/core/runtime';
-import { Folder, Plus, Settings } from 'lucide-react';
-import { useEffect, useId, useState } from 'react';
-import { useDocsLocale } from '../../components/i18n';
-import './workspace.scss';
-
-type Project = { id: number; name: string; owner: string; description: string; archived: boolean };
-type Preferences = {
-  team: string;
-  email: string;
-  dark: boolean;
-  compact: boolean;
-  blur: boolean;
-  notifications: boolean;
-};
-const pause = () => new Promise((resolve) => setTimeout(resolve, 350));
-
-export function BusinessWorkspace() {
-  const dark = useDark();
-  const [preferences, setPreferences] = useState<Preferences>({
-    team: 'Leaf Studio',
-    email: 'team@example.com',
-    dark,
-    compact: false,
-    blur: true,
-    notifications: true,
-  });
-  return (
-    <ConfigProvider
-      className="leaf-business rp-not-doc"
-      density={preferences.compact ? 'compact' : 'comfortable'}
-      maskBlur={preferences.blur}
-      theme={{ appearance: preferences.dark ? 'dark' : 'light' }}
-    >
-      <Workspace preferences={preferences} onPreferencesChange={setPreferences} />
-    </ConfigProvider>
-  );
-}
-
-function Workspace({
-  preferences,
-  onPreferencesChange,
-}: {
-  preferences: Preferences;
-  onPreferencesChange: (next: Preferences) => void;
-}) {
-  const { t } = useDocsLocale();
-  const { message } = useMessage();
-  const id = useId();
-  const [page, setPage] = useState('projects');
-  const [query, setQuery] = useState('');
-  const [view, setView] = useState('active');
-  const [projects, setProjects] = useState<Project[]>([
-    {
-      id: 1,
-      name: t('品牌网站', 'Brand website'),
-      owner: 'Lin',
-      description: t('设计与发布团队的新网站。', 'Design and launch the team website.'),
-      archived: false,
-    },
-    {
-      id: 2,
-      name: t('移动体验', 'Mobile experience'),
-      owner: 'Alex',
-      description: t('完善移动端的关键流程。', 'Improve the core mobile flows.'),
-      archived: false,
-    },
-    {
-      id: 3,
-      name: t('春季活动', 'Spring campaign'),
-      owner: 'Lin',
-      description: t('已完成的活动资料。', 'Completed campaign resources.'),
-      archived: true,
-    },
-  ]);
-  const [editing, setEditing] = useState<Project | null>(null);
-  const [dialog, setDialog] = useState(false);
-  const [draft, setDraft] = useState({ name: '', owner: 'Lin', description: '' });
-  const [error, setError] = useState('');
-  const [saving, setSaving] = useState(false);
-  const [settings, setSettings] = useState(preferences);
-  const [saved, setSaved] = useState(false);
-  const visible = projects.filter(
-    (project) =>
-      project.archived === (view === 'archived') &&
-      `${project.name} ${project.owner}`.toLowerCase().includes(query.toLowerCase()),
-  );
-  const changed = JSON.stringify(settings) !== JSON.stringify(preferences);
-  useEffect(() => {
-    if (error) document.getElementById(`${id}-name`)?.focus();
-  }, [error, id]);
-
-  function open(project?: Project) {
-    setEditing(project ?? null);
-    setDraft(project ?? { name: '', owner: 'Lin', description: '' });
-    setError('');
-    setDialog(true);
-  }
-  async function saveProject() {
-    if (saving) return;
-    if (!draft.name.trim()) {
-      setError(t('请填写项目名称。', 'Enter a project name.'));
-      document.getElementById(`${id}-name`)?.focus();
-      return;
-    }
-    setSaving(true);
-    setError('');
-    await pause();
-    if (
-      projects.some(
-        (project) =>
-          project.id !== editing?.id &&
-          project.name.toLowerCase() === draft.name.trim().toLowerCase(),
-      )
-    ) {
-      setError(
-        t(
-          '已有同名项目，请修改名称后重试。',
-          'A project with this name exists. Choose another name and retry.',
-        ),
-      );
-      setSaving(false);
-      document.getElementById(`${id}-name`)?.focus();
-      return;
-    }
-    const next = {
-      ...draft,
-      name: draft.name.trim(),
-      id: editing?.id ?? Date.now(),
-      archived: editing?.archived ?? false,
-    };
-    setProjects((previous) =>
-      editing
-        ? previous.map((project) => (project.id === editing.id ? next : project))
-        : [...previous, next],
-    );
-    setQuery('');
-    setView(next.archived ? 'archived' : 'active');
-    setSaving(false);
-    setDialog(false);
-    message.success(t('项目已保存', 'Project saved'));
-  }
-
-  return (
-    <Layout>
-      <Layout.Header className="leaf-business__header">
-        <strong>{preferences.team}</strong>
-        <Tag color="primary">{t('工作空间', 'Workspace')}</Tag>
-      </Layout.Header>
-      <Layout direction="horizontal" className="leaf-business__body">
-        <Layout.Sider width={172} className="leaf-business__nav">
-          <Menu
-            aria-label={t('工作空间导航', 'Workspace navigation')}
-            selectedKey={page}
-            onSelect={(key) => setPage(key)}
-            items={[
-              { key: 'projects', label: t('项目管理', 'Projects'), icon: <Folder /> },
-              { key: 'settings', label: t('团队设置', 'Team settings'), icon: <Settings /> },
-            ]}
-          />
-        </Layout.Sider>
-        <div className="leaf-business__content">
-          {page === 'projects' ? (
-            <>
-              <div className="leaf-business__heading">
-                <div>
-                  <h2>{t('项目管理', 'Projects')}</h2>
-                  <p>{t('管理团队正在推进的工作。', 'Keep the team’s work organized.')}</p>
-                </div>
-                <Button startIcon={<Plus />} onClick={() => open()}>
-                  {t('新建项目', 'New project')}
-                </Button>
-              </div>
-              <div className="leaf-business__metrics">
-                <Card>
-                  <Statistic
-                    title={t('进行中', 'Active')}
-                    value={projects.filter((project) => !project.archived).length}
-                  />
-                </Card>
-                <Card>
-                  <Statistic
-                    title={t('已归档', 'Archived')}
-                    value={projects.filter((project) => project.archived).length}
-                  />
-                </Card>
-              </div>
-              <Card>
-                <div className="leaf-business__filters">
-                  <Input
-                    aria-label={t('搜索项目', 'Search projects')}
-                    placeholder={t('搜索项目或负责人', 'Search by project or owner')}
-                    value={query}
-                    onChange={(event) => setQuery(event.target.value)}
-                    allowClear
-                  />
-                  <Segmented
-                    aria-label={t('项目状态', 'Project status')}
-                    value={view}
-                    onChange={setView}
-                    options={[
-                      { value: 'active', label: t('进行中', 'Active') },
-                      { value: 'archived', label: t('已归档', 'Archived') },
-                    ]}
-                  />
-                </div>
-                <div aria-live="polite" className="leaf-business__count">
-                  {t(`找到 ${visible.length} 个项目`, `${visible.length} projects found`)}
-                </div>
-                {visible.length === 0 ? (
-                  <Result
-                    status="empty"
-                    title={t('没有匹配的项目', 'No matching projects')}
-                    description={t(
-                      '调整筛选条件，或创建新的项目。',
-                      'Change the filters or create a project.',
-                    )}
-                    extra={
-                      <Button
-                        variant="outline"
-                        onClick={() => {
-                          setQuery('');
-                          setView('active');
-                        }}
-                      >
-                        {t('清除筛选', 'Clear filters')}
-                      </Button>
-                    }
-                  />
-                ) : (
-                  <ul
-                    className="leaf-business__projects"
-                    aria-label={t('项目列表', 'Project list')}
-                  >
-                    {visible.map((project) => (
-                      <li key={project.id} className="leaf-business__project">
-                        <div>
-                          <strong>{project.name}</strong>
-                          <p>
-                            {project.description}
-                            <br />
-                            {t('负责人：', 'Owner: ')}
-                            {project.owner}
-                          </p>
-                        </div>
-                        <Space wrap>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            aria-label={t(`编辑 ${project.name}`, `Edit ${project.name}`)}
-                            onClick={() => open(project)}
-                          >
-                            {t('编辑', 'Edit')}
-                          </Button>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            aria-label={t(
-                              `${project.archived ? '恢复' : '归档'} ${project.name}`,
-                              `${project.archived ? 'Restore' : 'Archive'} ${project.name}`,
-                            )}
-                            onClick={() => {
-                              setProjects((previous) =>
-                                previous.map((item) =>
-                                  item.id === project.id
-                                    ? { ...item, archived: !item.archived }
-                                    : item,
-                                ),
-                              );
-                              message.success(
-                                project.archived
-                                  ? t('项目已恢复', 'Project restored')
-                                  : t('项目已归档', 'Project archived'),
-                              );
-                            }}
-                          >
-                            {project.archived ? t('恢复', 'Restore') : t('归档', 'Archive')}
-                          </Button>
-                        </Space>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </Card>
-            </>
-          ) : (
-            <>
-              <div className="leaf-business__heading">
-                <div>
-                  <h2>{t('团队设置', 'Team settings')}</h2>
-                  <p>
-                    {t(
-                      '保存后应用到整个工作空间。',
-                      'Saved preferences apply to the whole workspace.',
-                    )}
-                  </p>
-                </div>
-              </div>
-              <Card>
-                {saved && <Alert type="success" title={t('设置已保存', 'Settings saved')} />}
-                <Form
-                  disabled={saving}
-                  aria-label={t('团队设置表单', 'Team settings form')}
-                  onSubmit={async (event) => {
-                    event.preventDefault();
-                    if (saving) return;
-                    setSaving(true);
-                    await pause();
-                    onPreferencesChange(settings);
-                    setSaved(true);
-                    setSaving(false);
-                    message.success(t('设置已保存', 'Settings saved'));
-                  }}
-                >
-                  <FormField label={t('团队名称', 'Team name')} required>
-                    <Input
-                      required
-                      value={settings.team}
-                      onChange={(event) => {
-                        setSaved(false);
-                        setSettings({ ...settings, team: event.target.value });
-                      }}
-                    />
-                  </FormField>
-                  <FormField label={t('联系邮箱', 'Contact email')} required>
-                    <Input
-                      type="email"
-                      required
-                      value={settings.email}
-                      onChange={(event) => {
-                        setSaved(false);
-                        setSettings({ ...settings, email: event.target.value });
-                      }}
-                    />
-                  </FormField>
-                  {(
-                    [
-                      ['dark', t('深色外观', 'Dark appearance')],
-                      ['compact', t('紧凑密度', 'Compact density')],
-                      ['blur', t('背景模糊', 'Background blur')],
-                      ['notifications', t('邮件提醒', 'Email reminders')],
-                    ] as const
-                  ).map(([key, label]) => (
-                    <FormField key={key} label={label}>
-                      <Switch
-                        aria-label={label}
-                        checked={settings[key]}
-                        onChange={(event) => {
-                          setSaved(false);
-                          setSettings({ ...settings, [key]: event.target.checked });
-                        }}
-                      />
-                    </FormField>
-                  ))}
-                  <p aria-live="polite">
-                    {changed
-                      ? t('有尚未保存的修改', 'You have unsaved changes')
-                      : t('设置已同步', 'Preferences are up to date')}
-                  </p>
-                  <Space>
-                    <Button type="submit" loading={saving} disabled={!changed}>
-                      {t('保存设置', 'Save preferences')}
-                    </Button>
-                    <Button
-                      variant="outline"
-                      disabled={saving || !changed}
-                      onClick={() => {
-                        setSettings(preferences);
-                        setSaved(false);
-                      }}
-                    >
-                      {t('放弃修改', 'Discard changes')}
-                    </Button>
-                  </Space>
-                </Form>
-              </Card>
-            </>
-          )}
-        </div>
-      </Layout>
-      <Modal
-        open={dialog}
-        onClose={() => {
-          if (!saving) setDialog(false);
-        }}
-        title={editing ? t('编辑项目', 'Edit project') : t('新建项目', 'New project')}
-        footer={
-          <>
-            <Button variant="outline" disabled={saving} onClick={() => setDialog(false)}>
-              {t('取消', 'Cancel')}
-            </Button>
-            <Button type="submit" form={`${id}-project`} loading={saving}>
-              {t('保存项目', 'Save project')}
-            </Button>
-          </>
-        }
-      >
-        <Form
-          disabled={saving}
-          id={`${id}-project`}
-          onSubmit={(event) => {
-            event.preventDefault();
-            void saveProject();
-          }}
-        >
-          <FormField
-            label={t('项目名称', 'Project name')}
-            htmlFor={`${id}-name`}
-            required
-            error={error}
-          >
-            <Input
-              id={`${id}-name`}
-              autoFocus
-              required
-              maxLength={60}
-              value={draft.name}
-              onChange={(event) => {
-                setError('');
-                setDraft({ ...draft, name: event.target.value });
-              }}
-            />
-          </FormField>
-          <FormField label={t('负责人', 'Owner')}>
-            <Select
-              value={draft.owner}
-              onChange={(owner) => setDraft({ ...draft, owner })}
-              options={[
-                { value: 'Lin', label: 'Lin' },
-                { value: 'Alex', label: 'Alex' },
-              ]}
-            />
-          </FormField>
-          <FormField label={t('项目说明', 'Description')}>
-            <Textarea
-              rows={3}
-              value={draft.description}
-              onChange={(event) => setDraft({ ...draft, description: event.target.value })}
-            />
-          </FormField>
-        </Form>
-      </Modal>
-    </Layout>
-  );
-}
diff --git a/apps/docs/src/examples/scroll-area/advanced.tsx b/apps/docs/src/examples/scroll-area/advanced.tsx
index a486f3b..5b7f141 100644
--- a/apps/docs/src/examples/scroll-area/advanced.tsx
+++ b/apps/docs/src/examples/scroll-area/advanced.tsx
@@ -2,7 +2,7 @@ import { Card, ScrollArea, Space } from '@ifhover/leaf-ui';
 
 export function ScrollAreaHorizontal() {
   return (
-    <ScrollArea orientation="horizontal" style={{ width: '100%' }} aria-label="横向卡片">
+    <ScrollArea orientation="horizontal" aria-label="横向卡片">
       <Space size={12}>
         {['A', 'B', 'C', 'D', 'E'].map((name) => (
           <Card key={name} title={name} style={{ width: 180, flex: 'none' }}>
diff --git a/apps/docs/src/examples/scrollbar/basic.tsx b/apps/docs/src/examples/scrollbar/basic.tsx
index 1e6026d..6f75b24 100644
--- a/apps/docs/src/examples/scrollbar/basic.tsx
+++ b/apps/docs/src/examples/scrollbar/basic.tsx
@@ -1,4 +1,4 @@
-import { Button, Scrollbar } from '@ifhover/leaf-ui';
+import { Button, Flex, Scrollbar } from '@ifhover/leaf-ui';
 import { useRef, useState } from 'react';
 
 export function ScrollbarBasic({ english = false }: { english?: boolean }) {
@@ -43,8 +43,8 @@ export function ScrollbarDynamic({ english = false }: { english?: boolean }) {
   const viewport = useRef<HTMLDivElement>(null);
   const [count, setCount] = useState(3);
   return (
-    <div className="demo-stack">
-      <div className="demo-row">
+    <Flex direction="column" gap="md">
+      <Flex gap="sm" wrap>
         <Button variant="outline" onClick={() => setCount((previous) => previous + 3)}>
           {english ? 'Add items' : '增加内容'}
         </Button>
@@ -54,7 +54,7 @@ export function ScrollbarDynamic({ english = false }: { english?: boolean }) {
         >
           {english ? 'Back to top' : '返回顶部'}
         </Button>
-      </div>
+      </Flex>
       <Scrollbar ref={viewport} maxHeight={200} aria-label={english ? 'Dynamic list' : '动态列表'}>
         {Array.from({ length: count }, (_, index) => (
           <div key={String(index)} style={{ padding: '12px 20px' }}>
@@ -62,6 +62,6 @@ export function ScrollbarDynamic({ english = false }: { english?: boolean }) {
           </div>
         ))}
       </Scrollbar>
-    </div>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/segmented/advanced.tsx b/apps/docs/src/examples/segmented/advanced.tsx
index dd7dad6..9a3be12 100644
--- a/apps/docs/src/examples/segmented/advanced.tsx
+++ b/apps/docs/src/examples/segmented/advanced.tsx
@@ -1,9 +1,9 @@
-import { Segmented, Space } from '@ifhover/leaf-ui';
+import { Segmented, Space, Text } from '@ifhover/leaf-ui';
 
 export function SegmentedOptions() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <strong className="leaf-demo-note">填满容器</strong>
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">填满容器</Text>
       <Segmented
         block
         options={[
@@ -12,7 +12,7 @@ export function SegmentedOptions() {
           { value: 'archived', label: '归档（不可用）', disabled: true },
         ]}
       />
-      <strong className="leaf-demo-note">小尺寸</strong>
+      <Text tone="muted">小尺寸</Text>
       <Segmented size="sm" options={['A', 'B', 'C']} />
     </Space>
   );
diff --git a/apps/docs/src/examples/segmented/basic.tsx b/apps/docs/src/examples/segmented/basic.tsx
index 86d78fe..2e34913 100644
--- a/apps/docs/src/examples/segmented/basic.tsx
+++ b/apps/docs/src/examples/segmented/basic.tsx
@@ -1,11 +1,13 @@
-import { Segmented, Space } from '@ifhover/leaf-ui';
+import { Segmented, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function SegmentedBasic() {
   const [value, setValue] = useState('按周');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Segmented options={['按日', '按周', '按月']} value={value} onChange={setValue} />
-      <output className="leaf-demo-note">当前视图: {value}</output>
+      <output>
+        <Text tone="muted">当前视图: {value}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/select/basic.tsx b/apps/docs/src/examples/select/basic.tsx
index 450088d..493171c 100644
--- a/apps/docs/src/examples/select/basic.tsx
+++ b/apps/docs/src/examples/select/basic.tsx
@@ -1,4 +1,4 @@
-import { Select, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Select } from '@ifhover/leaf-ui';
 
 const options = [
   { label: '设计工作室', value: 'design' },
@@ -9,19 +9,16 @@ const options = [
 
 export function SelectBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">选择团队</span>
+    <Form layout="vertical">
+      <FormField label="选择团队">
         <Select aria-label="选择团队" options={options} placeholder="请选择团队" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">默认团队</span>
+      </FormField>
+      <FormField label="默认团队">
         <Select aria-label="默认团队" options={options} defaultValue="design" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用团队</span>
+      </FormField>
+      <FormField label="禁用团队">
         <Select aria-label="禁用团队" options={options} disabled defaultValue="product" />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/select/capabilities.tsx b/apps/docs/src/examples/select/capabilities.tsx
index f8d1b2a..d5cbe49 100644
--- a/apps/docs/src/examples/select/capabilities.tsx
+++ b/apps/docs/src/examples/select/capabilities.tsx
@@ -1,4 +1,4 @@
-import { Button, Select, Space, Tag } from '@ifhover/leaf-ui';
+import { Button, Flex, Select, Space, Tag, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const options = ['Design', 'Engineering', 'Marketing', 'Operations'].map((label) => ({
@@ -9,28 +9,25 @@ export function Capabilities({ english = false }) {
   const [open, setOpen] = useState(false);
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>
           {english ? 'Responsive tags, constrained to the available width' : '根据宽度自动折叠标签'}
-        </p>
+        </Text>
         <Select
           multiple
           showSearch
           defaultValue={['Design', 'Engineering', 'Marketing']}
           options={options}
           maxTagCount="responsive"
-          style={{ width: 300 }}
           tagRender={(option, remove) => (
             <Tag closable onClose={remove}>
               {option.label}
             </Tag>
           )}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
-          {english ? 'Controlled popup with an extra action' : '受控浮层与附加操作'}
-        </p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Controlled popup with an extra action' : '受控浮层与附加操作'}</Text>
         <Select
           options={options}
           open={open}
@@ -45,7 +42,7 @@ export function Capabilities({ english = false }) {
             </>
           )}
         />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/select/controlled.tsx b/apps/docs/src/examples/select/controlled.tsx
index e72d396..701f3af 100644
--- a/apps/docs/src/examples/select/controlled.tsx
+++ b/apps/docs/src/examples/select/controlled.tsx
@@ -1,12 +1,11 @@
-import { Select, Space } from '@ifhover/leaf-ui';
+import { Form, FormField, Select, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function SelectControlled() {
   const [value, setValue] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">项目可见性</span>
+    <Form layout="vertical">
+      <FormField label="项目可见性">
         <Select
           aria-label="项目可见性"
           value={value}
@@ -19,17 +18,16 @@ export function SelectControlled() {
             { label: '私密', value: 'private' },
           ]}
         />
-      </div>
-      <span className="leaf-demo-note">当前值：{value || '尚未选择'}</span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">未设置团队 · 错误</span>
+      </FormField>
+      <Text tone="muted">当前值：{value || '尚未选择'}</Text>
+      <FormField label="未设置团队 · 错误">
         <Select
           aria-label="未设置团队"
           status="error"
           placeholder="请选择所属团队"
           options={[{ label: '设计团队', value: 'design' }]}
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/select/popup.tsx b/apps/docs/src/examples/select/popup.tsx
index 4ff6735..b4ec601 100644
--- a/apps/docs/src/examples/select/popup.tsx
+++ b/apps/docs/src/examples/select/popup.tsx
@@ -1,4 +1,5 @@
-import { Select, type SelectOption, Space } from '@ifhover/leaf-ui';
+import type { SelectOption } from '@ifhover/leaf-ui';
+import { Form, FormField, Select } from '@ifhover/leaf-ui';
 
 const options: SelectOption[] = [
   { value: 'garden', label: 'Leaf Garden Design System' },
@@ -7,18 +8,16 @@ const options: SelectOption[] = [
 ];
 export function SelectPopup() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">自动浮层宽度</span>
+    <Form layout="vertical">
+      <FormField label="自动浮层宽度">
         <Select
           aria-label="自动浮层宽度"
           style={{ width: 180 }}
           options={options}
           defaultValue="studio"
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">固定浮层宽度</span>
+      </FormField>
+      <FormField label="固定浮层宽度">
         <Select
           aria-label="固定浮层宽度"
           popupWidth={300}
@@ -32,9 +31,8 @@ export function SelectPopup() {
             </div>
           )}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">多选数量限制</span>
+      </FormField>
+      <FormField label="多选数量限制">
         <Select
           aria-label="多选数量限制"
           multiple
@@ -44,15 +42,13 @@ export function SelectPopup() {
           maxTagCount={1}
           allowClear
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">加载选项</span>
+      </FormField>
+      <FormField label="加载选项">
         <Select aria-label="加载选项" options={[]} loading placeholder="加载中" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">空选项</span>
+      </FormField>
+      <FormField label="空选项">
         <Select aria-label="空选项" options={[]} notFoundContent="还没有项目" />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/select/search.tsx b/apps/docs/src/examples/select/search.tsx
index c8a5b9d..3c3f228 100644
--- a/apps/docs/src/examples/select/search.tsx
+++ b/apps/docs/src/examples/select/search.tsx
@@ -1,4 +1,5 @@
-import { Select, type SelectOption, Space } from '@ifhover/leaf-ui';
+import type { SelectOption } from '@ifhover/leaf-ui';
+import { Form, FormField, Select, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const options: SelectOption[] = [
@@ -9,9 +10,8 @@ const options: SelectOption[] = [
 export function SelectSearch() {
   const [teams, setTeams] = useState<string[]>(['design']);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">搜索团队</span>
+    <Form layout="vertical">
+      <FormField label="搜索团队">
         <Select
           aria-label="搜索团队"
           showSearch
@@ -19,9 +19,8 @@ export function SelectSearch() {
           options={options}
           placeholder="输入搜索团队"
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">多选团队</span>
+      </FormField>
+      <FormField label="多选团队">
         <Select
           aria-label="多选团队"
           multiple
@@ -31,8 +30,10 @@ export function SelectSearch() {
           value={teams}
           onChange={setTeams}
         />
-      </div>
-      <output className="leaf-demo-note">{teams.join(', ') || '—'}</output>
-    </Space>
+      </FormField>
+      <output>
+        <Text tone="muted">{teams.join(', ') || '—'}</Text>
+      </output>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/select/single-line.tsx b/apps/docs/src/examples/select/single-line.tsx
new file mode 100644
index 0000000..e8d568d
--- /dev/null
+++ b/apps/docs/src/examples/select/single-line.tsx
@@ -0,0 +1,29 @@
+import { Form, FormField, Select } from '@ifhover/leaf-ui';
+
+const options = [
+  { value: '0', label: '一个名称比较长的产品设计团队' },
+  { value: '1', label: '前端开发' },
+  { value: '2', label: '服务端开发' },
+  { value: '3', label: '日常运营' },
+];
+const selected = options.map((option) => option.value);
+
+export function SingleLine() {
+  return (
+    <Form layout="vertical">
+      <FormField label="单行显示 · 长标签自动省略">
+        <Select
+          multiple
+          showSearch
+          allowClear
+          tagWrap={false}
+          options={options}
+          defaultValue={selected}
+        />
+      </FormField>
+      <FormField label="默认换行">
+        <Select multiple options={options} defaultValue={selected} />
+      </FormField>
+    </Form>
+  );
+}
diff --git a/apps/docs/src/examples/select/theme.tsx b/apps/docs/src/examples/select/theme.tsx
deleted file mode 100644
index c69e1f1..0000000
--- a/apps/docs/src/examples/select/theme.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ConfigProvider, type LeafTheme, Select } from '@ifhover/leaf-ui';
-
-const theme: LeafTheme = {
-  primaryColor: '#7654c6',
-  borderRadius: 6,
-};
-
-export function SelectTheme() {
-  return (
-    <ConfigProvider className="leaf-demo-stack" theme={theme}>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">主题团队</span>
-        <Select
-          aria-label="主题团队"
-          allowClear
-          defaultValue="design"
-          options={[
-            { value: 'design', label: '设计工作室' },
-            { value: 'product', label: '产品团队' },
-          ]}
-        />
-      </div>
-      <span className="leaf-demo-note">展开选项，浮层会沿用这里的紫色主题与圆角。</span>
-    </ConfigProvider>
-  );
-}
diff --git a/apps/docs/src/examples/signature-pad/advanced.tsx b/apps/docs/src/examples/signature-pad/advanced.tsx
deleted file mode 100644
index 6c2691d..0000000
--- a/apps/docs/src/examples/signature-pad/advanced.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Button, SignaturePad, Space } from '@ifhover/leaf-ui';
-import { useState } from 'react';
-export function SignaturePadControlled() {
-  const [strokes, setStrokes] = useState<import('@ifhover/leaf-ui').SignatureStroke[]>([]);
-  return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <SignaturePad
-        value={strokes}
-        onChange={setStrokes}
-        penColor="#2463eb"
-        minWidth={1}
-        maxWidth={3}
-      />
-      <output className="leaf-demo-note">笔画数量: {strokes.length}</output>
-      <Button variant="ghost" onClick={() => setStrokes([])}>
-        清空受控值
-      </Button>
-    </Space>
-  );
-}
diff --git a/apps/docs/src/examples/signature-pad/basic.tsx b/apps/docs/src/examples/signature-pad/basic.tsx
deleted file mode 100644
index 9ecf58e..0000000
--- a/apps/docs/src/examples/signature-pad/basic.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Button, Image, SignaturePad, Space } from '@ifhover/leaf-ui';
-import { useEffect, useRef, useState } from 'react';
-export function SignaturePadBasic() {
-  const pad = useRef<import('@ifhover/leaf-ui').SignaturePadHandle>(null);
-  const [result, setResult] = useState<Blob | null>(null);
-  const [preview, setPreview] = useState('');
-  useEffect(() => {
-    if (!result) return;
-    const url = URL.createObjectURL(result);
-    setPreview(url);
-    return () => URL.revokeObjectURL(url);
-  }, [result]);
-  return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <SignaturePad ref={pad} />
-      <Button
-        variant="outline"
-        onClick={async () => {
-          const blob = await pad.current?.export();
-          if (!blob) return;
-          setResult(blob);
-          const url = URL.createObjectURL(blob);
-          const link = document.createElement('a');
-          link.href = url;
-          link.download = 'signature.png';
-          link.click();
-          setTimeout(() => URL.revokeObjectURL(url), 1000);
-        }}
-      >
-        下载签名
-      </Button>
-      {preview && (
-        <div className="leaf-demo-case">
-          <span className="leaf-demo-label">PNG 导出预览</span>
-          <Image src={preview} alt="签名导出预览" preview={false} fit="contain" width="100%" />
-        </div>
-      )}
-    </Space>
-  );
-}
diff --git a/apps/docs/src/examples/skeleton/basic.tsx b/apps/docs/src/examples/skeleton/basic.tsx
index 03162df..4bb10e9 100644
--- a/apps/docs/src/examples/skeleton/basic.tsx
+++ b/apps/docs/src/examples/skeleton/basic.tsx
@@ -1,23 +1,23 @@
-import { Button, Skeleton, Space } from '@ifhover/leaf-ui';
+import { Button, Flex, Skeleton, Space, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function SkeletonBasic() {
   const [loading, setLoading] = useState(true);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => setLoading(!loading)}>
         切换加载状态
       </Button>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">内容加载</span>
+      <Flex direction="column" gap="sm">
+        <Text>内容加载</Text>
         <Skeleton loading={loading} avatar rows={3} rowWidths={['100%', '85%', '55%']} round>
           <p>项目内容已加载完成。</p>
         </Skeleton>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">静态占位</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>静态占位</Text>
         <Skeleton active={false} title={false} rows={2} />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/slider/basic.tsx b/apps/docs/src/examples/slider/basic.tsx
index be59613..c64e1b0 100644
--- a/apps/docs/src/examples/slider/basic.tsx
+++ b/apps/docs/src/examples/slider/basic.tsx
@@ -1,4 +1,5 @@
-import { Slider, type SliderMark, Space } from '@ifhover/leaf-ui';
+import type { SliderMark } from '@ifhover/leaf-ui';
+import { Form, FormField, Slider, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const marks: SliderMark[] = [
@@ -9,24 +10,20 @@ const marks: SliderMark[] = [
 export function SliderBasic() {
   const [value, setValue] = useState(35);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">音量</span>
+    <Form layout="vertical">
+      <FormField label="音量">
         <Slider aria-label="音量" value={value} onChange={setValue} marks={marks} />
-      </div>
-      <p className="leaf-demo-note">当前数值：{value}</p>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">预算</span>
+      </FormField>
+      <Text tone="muted">当前数值：{value}</Text>
+      <FormField label="预算">
         <Slider aria-label="预算" range defaultValue={[20, 70]} marks={marks} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用数值</span>
+      </FormField>
+      <FormField label="禁用数值">
         <Slider aria-label="禁用数值" defaultValue={45} disabled />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">垂直数值</span>
+      </FormField>
+      <FormField label="垂直数值">
         <Slider aria-label="垂直数值" vertical defaultValue={60} />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/slider/capabilities.tsx b/apps/docs/src/examples/slider/capabilities.tsx
index 13e558e..214ef6f 100644
--- a/apps/docs/src/examples/slider/capabilities.tsx
+++ b/apps/docs/src/examples/slider/capabilities.tsx
@@ -1,11 +1,11 @@
-import { Slider, Space } from '@ifhover/leaf-ui';
+import { Flex, Slider, Space, Text } from '@ifhover/leaf-ui';
 export function Capabilities({ english = false }) {
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>
           {english ? 'Discrete marks with formatted tooltip' : '只选择指定刻度与自定义提示'}
-        </p>
+        </Text>
         <Slider
           defaultValue={25}
           step={null}
@@ -17,7 +17,7 @@ export function Capabilities({ english = false }) {
           ]}
           tooltip={{ formatter: (value) => `${value}%` }}
         />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/steps/basic.tsx b/apps/docs/src/examples/steps/basic.tsx
index b8a1c23..797ca07 100644
--- a/apps/docs/src/examples/steps/basic.tsx
+++ b/apps/docs/src/examples/steps/basic.tsx
@@ -1,4 +1,5 @@
-import { Button, Space, type StepItem, Steps } from '@ifhover/leaf-ui';
+import type { StepItem } from '@ifhover/leaf-ui';
+import { Button, Flex, Space, Steps, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const items: readonly StepItem[] = [
@@ -9,23 +10,23 @@ const items: readonly StepItem[] = [
 export function StepsBasic() {
   const [current, setCurrent] = useState(1);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">可切换步骤</span>
+    <Space direction="vertical" align="stretch">
+      <Flex direction="column" gap="sm">
+        <Text>可切换步骤</Text>
         <Steps items={items} current={current} onChange={setCurrent} />
-      </div>
-      <Space wrap className="leaf-demo-row">
+      </Flex>
+      <Flex gap="md" align="center" wrap justify="center">
         <Button variant="outline" disabled={current === 0} onClick={() => setCurrent(current - 1)}>
           上一步
         </Button>
         <Button disabled={current === 2} onClick={() => setCurrent(current + 1)}>
           下一步
         </Button>
-      </Space>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">错误反馈</span>
+      </Flex>
+      <Flex direction="column" gap="sm">
+        <Text>错误反馈</Text>
         <Steps items={items} current={1} direction="vertical" status="error" size="sm" />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/steps/capabilities.tsx b/apps/docs/src/examples/steps/capabilities.tsx
index e7ad476..2e63e1f 100644
--- a/apps/docs/src/examples/steps/capabilities.tsx
+++ b/apps/docs/src/examples/steps/capabilities.tsx
@@ -1,19 +1,17 @@
-import { Space, Steps } from '@ifhover/leaf-ui';
+import { Flex, Space, Steps, Text } from '@ifhover/leaf-ui';
 
 const items = [{ title: 'Create' }, { title: 'Review' }, { title: 'Publish' }];
 export function Capabilities({ english = false }) {
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>{english ? 'Dot steps' : '点状步骤'}</p>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Dot steps' : '点状步骤'}</Text>
         <Steps progressDot current={1} items={items} />
-      </div>
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
-          {english ? 'Progress within the current step' : '当前步骤的进度'}
-        </p>
+      </Flex>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>{english ? 'Progress within the current step' : '当前步骤的进度'}</Text>
         <Steps current={1} percent={65} items={items} />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/switch/controlled.tsx b/apps/docs/src/examples/switch/controlled.tsx
index 6858def..fe323a3 100644
--- a/apps/docs/src/examples/switch/controlled.tsx
+++ b/apps/docs/src/examples/switch/controlled.tsx
@@ -1,17 +1,17 @@
-import { Space, Switch } from '@ifhover/leaf-ui';
+import { Flex, Space, Switch, Text } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function SwitchControlled() {
   const [checked, setChecked] = useState(true);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Switch checked={checked} onChange={(event) => setChecked(event.target.checked)}>
         接收邮件
       </Switch>
-      <span className="leaf-demo-note" aria-live="polite">
+      <Text tone="muted" aria-live="polite">
         {checked ? '邮件通知已开启' : '邮件通知已关闭'}
-      </span>
-      <Space wrap className="leaf-demo-row">
+      </Text>
+      <Flex gap="md" align="center" wrap justify="center">
         <Switch size="sm" defaultChecked>
           小尺寸
         </Switch>
@@ -19,7 +19,7 @@ export function SwitchControlled() {
         <Switch size="lg" defaultChecked>
           大尺寸
         </Switch>
-      </Space>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/table/basic.tsx b/apps/docs/src/examples/table/basic.tsx
index a95a112..4d80a95 100644
--- a/apps/docs/src/examples/table/basic.tsx
+++ b/apps/docs/src/examples/table/basic.tsx
@@ -46,7 +46,7 @@ export function TableBasic({ english = false }: { english?: boolean }) {
             <Table.Cell>{person.email}</Table.Cell>
             <Table.Cell>{person.role}</Table.Cell>
             <Table.Cell>
-              <Tag variant="outline" color={person.active ? 'success' : 'default'}>
+              <Tag color={person.active ? 'success' : 'default'}>
                 {person.active ? (english ? 'Active' : '活跃') : english ? 'Invited' : '已邀请'}
               </Tag>
             </Table.Cell>
@@ -60,7 +60,7 @@ export function TableBasic({ english = false }: { english?: boolean }) {
 export function TableStates({ english = false }: { english?: boolean }) {
   const [state, setState] = useState<'empty' | 'loading' | 'error'>('empty');
   return (
-    <Space direction="vertical" align="stretch" style={{ width: '100%' }}>
+    <Space direction="vertical" align="stretch">
       <Space wrap>
         <Button variant={state === 'empty' ? 'outline' : 'ghost'} onClick={() => setState('empty')}>
           {english ? 'Empty' : '空数据'}
diff --git a/apps/docs/src/examples/table/data.tsx b/apps/docs/src/examples/table/data.tsx
index d98efa1..a7d9459 100644
--- a/apps/docs/src/examples/table/data.tsx
+++ b/apps/docs/src/examples/table/data.tsx
@@ -82,7 +82,7 @@ export function useMemberColumns(english = false) {
         minSize: 100,
         maxSize: 160,
         cell: ({ getValue }) => (
-          <Tag variant="outline" color={getValue() ? 'success' : 'default'}>
+          <Tag color={getValue() ? 'success' : 'default'}>
             {getValue() ? (english ? 'Active' : '活跃') : english ? 'Invited' : '已邀请'}
           </Tag>
         ),
diff --git a/apps/docs/src/examples/table/reordering.tsx b/apps/docs/src/examples/table/reordering.tsx
index ad95317..e9994df 100644
--- a/apps/docs/src/examples/table/reordering.tsx
+++ b/apps/docs/src/examples/table/reordering.tsx
@@ -30,7 +30,7 @@ export function TableReordering({ english = false }: { english?: boolean }) {
         accessorKey: 'status',
         header: english ? 'Status' : '状态',
         cell: ({ getValue }) => (
-          <Tag variant="outline" color={getValue() === 'active' ? 'success' : 'default'}>
+          <Tag color={getValue() === 'active' ? 'success' : 'default'}>
             {getValue() === 'active'
               ? english
                 ? 'Active'
@@ -45,7 +45,7 @@ export function TableReordering({ english = false }: { english?: boolean }) {
     [english],
   );
   return (
-    <Space direction="vertical" align="stretch" style={{ width: '100%' }}>
+    <Space direction="vertical" align="stretch">
       <p>
         {english ? 'Use the handles to reorder rows or columns.' : '使用行首和表头的手柄调整顺序。'}
       </p>
diff --git a/apps/docs/src/examples/tabs/basic.tsx b/apps/docs/src/examples/tabs/basic.tsx
index 2b5c7a3..9b76b50 100644
--- a/apps/docs/src/examples/tabs/basic.tsx
+++ b/apps/docs/src/examples/tabs/basic.tsx
@@ -1,4 +1,5 @@
-import { Input, Space, type TabItem, Tabs } from '@ifhover/leaf-ui';
+import type { TabItem } from '@ifhover/leaf-ui';
+import { Input, Space, Tabs } from '@ifhover/leaf-ui';
 import { ChartNoAxesColumn, Settings } from 'lucide-react';
 
 const items: readonly TabItem[] = [
@@ -6,7 +7,7 @@ const items: readonly TabItem[] = [
     key: 'overview',
     label: '概览',
     icon: <ChartNoAxesColumn />,
-    children: <p>查看项目活动、成员和最近更新。</p>,
+    children: '查看项目活动、成员和最近更新。',
   },
   {
     key: 'settings',
@@ -18,19 +19,19 @@ const items: readonly TabItem[] = [
 ];
 export function TabsBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">线形标签</span>
+    <Space direction="vertical" align="stretch">
+      <Space direction="vertical" align="stretch" size="sm">
+        <span>线形标签</span>
         <Tabs aria-label="项目信息" items={items} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">卡片标签</span>
-        <Tabs items={items} type="card" size="sm" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">纵向标签</span>
-        <Tabs items={items} placement="left" />
-      </div>
+      </Space>
+      <Space direction="vertical" align="stretch" size="sm">
+        <span>卡片标签</span>
+        <Tabs aria-label="卡片标签" items={items} type="card" />
+      </Space>
+      <Space direction="vertical" align="stretch" size="sm">
+        <span>纵向标签</span>
+        <Tabs aria-label="纵向标签" items={items} placement="left" />
+      </Space>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/tabs/capabilities.tsx b/apps/docs/src/examples/tabs/capabilities.tsx
index c2039dd..a2a127f 100644
--- a/apps/docs/src/examples/tabs/capabilities.tsx
+++ b/apps/docs/src/examples/tabs/capabilities.tsx
@@ -7,14 +7,18 @@ const items = [
 export function Capabilities({ english = false }) {
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>{english ? 'Bottom placement' : '底部标签页'}</p>
-        <Tabs placement="bottom" items={items} />
-      </div>
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>{english ? 'Right placement' : '右侧标签页'}</p>
-        <Tabs placement="right" items={items} />
-      </div>
+      <Space direction="vertical" align="stretch" size="sm">
+        <span>{english ? 'Bottom placement' : '底部标签页'}</span>
+        <Tabs
+          aria-label={english ? 'Bottom tabs' : '底部标签页'}
+          placement="bottom"
+          items={items}
+        />
+      </Space>
+      <Space direction="vertical" align="stretch" size="sm">
+        <span>{english ? 'Right placement' : '右侧标签页'}</span>
+        <Tabs aria-label={english ? 'Right tabs' : '右侧标签页'} placement="right" items={items} />
+      </Space>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/tabs/closable.tsx b/apps/docs/src/examples/tabs/closable.tsx
index 340fc4e..1d5c1ee 100644
--- a/apps/docs/src/examples/tabs/closable.tsx
+++ b/apps/docs/src/examples/tabs/closable.tsx
@@ -1,4 +1,4 @@
-import { Button, type TabItem, Tabs } from '@ifhover/leaf-ui';
+import { Button, Space, type TabItem, Tabs } from '@ifhover/leaf-ui';
 import { useRef, useState } from 'react';
 export function TabsClosable() {
   const sequence = useRef(2);
@@ -6,29 +6,30 @@ export function TabsClosable() {
     { key: '1', label: '项目一', children: '项目一的内容', closable: true },
     { key: '2', label: '项目二', children: '项目二的内容', closable: true },
   ]);
+  const addTab = () => {
+    const key = String(++sequence.current);
+    setItems((list) => [
+      ...list,
+      { key, label: `项目 ${key}`, children: `项目 ${key} 的内容`, closable: true },
+    ]);
+  };
   return (
-    <div className="leaf-demo-case">
-      <span className="leaf-demo-label">卡片标签</span>
+    <Space direction="vertical" align="stretch">
       <Tabs
+        aria-label="可关闭标签页"
         items={items}
         type="card"
         onClose={(key) => setItems((list) => list.filter((item) => item.key !== key))}
-        extra={
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => {
-              const key = String(++sequence.current);
-              setItems((list) => [
-                ...list,
-                { key, label: `Project ${key}`, children: `Project ${key}`, closable: true },
-              ]);
-            }}
-          >
-            新增
-          </Button>
-        }
+        onAdd={addTab}
+        addLabel="新增标签页"
       />
-    </div>
+      {items.length === 0 && (
+        <Space>
+          <Button variant="outline" onClick={addTab}>
+            新增标签页
+          </Button>
+        </Space>
+      )}
+    </Space>
   );
 }
diff --git a/apps/docs/src/examples/tabs/extensions.tsx b/apps/docs/src/examples/tabs/extensions.tsx
index cd26200..779cdb6 100644
--- a/apps/docs/src/examples/tabs/extensions.tsx
+++ b/apps/docs/src/examples/tabs/extensions.tsx
@@ -1,4 +1,4 @@
-import { type TabItem, Tabs } from '@ifhover/leaf-ui';
+import { Button, Space, type TabItem, Tabs } from '@ifhover/leaf-ui';
 import { useRef, useState } from 'react';
 export function ExtensionDemo() {
   const count = useRef(7);
@@ -10,19 +10,30 @@ export function ExtensionDemo() {
       closable: true,
     })),
   );
+  const addTab = () => {
+    const id = String(count.current++);
+    setItems((current) => [
+      ...current,
+      { key: id, label: `项目 ${id}`, children: '新项目', closable: true },
+    ]);
+  };
   return (
-    <Tabs
-      items={items}
-      sortable
-      onReorder={setItems}
-      onAdd={() => {
-        const id = String(count.current++);
-        setItems((current) => [
-          ...current,
-          { key: id, label: `项目 ${id}`, children: '新项目', closable: true },
-        ]);
-      }}
-      onClose={(key) => setItems((current) => current.filter((item) => item.key !== key))}
-    />
+    <Space direction="vertical" align="stretch">
+      <Tabs
+        aria-label="可排序标签页"
+        items={items}
+        sortable
+        onReorder={setItems}
+        onAdd={addTab}
+        onClose={(key) => setItems((current) => current.filter((item) => item.key !== key))}
+      />
+      {items.length === 0 && (
+        <Space>
+          <Button variant="outline" onClick={addTab}>
+            新增标签页
+          </Button>
+        </Space>
+      )}
+    </Space>
   );
 }
diff --git a/apps/docs/src/examples/tabs/sizes.tsx b/apps/docs/src/examples/tabs/sizes.tsx
new file mode 100644
index 0000000..9758161
--- /dev/null
+++ b/apps/docs/src/examples/tabs/sizes.tsx
@@ -0,0 +1,34 @@
+import { Grid, Space, Tabs, Text } from '@ifhover/leaf-ui';
+
+const items = [
+  { key: 'overview', label: '概览', children: '查看项目的最近更新。' },
+  { key: 'members', label: '成员', children: '管理项目成员和访问权限。' },
+];
+const labels = { sm: '小尺寸', md: '默认尺寸', lg: '大尺寸' };
+const variants = [
+  { type: 'line', label: '线形标签' },
+  { type: 'card', label: '卡片标签' },
+] as const;
+
+export function TabsSizes() {
+  return (
+    <Grid columns={{ xs: 1, sm: 2 }} gap={24}>
+      {variants.map(({ type, label }) => (
+        <Space key={type} direction="vertical" align="stretch" size="lg">
+          <Text strong>{label}</Text>
+          {(['sm', 'md', 'lg'] as const).map((size) => (
+            <Space key={size} direction="vertical" align="stretch" size="sm">
+              <span>{labels[size]}</span>
+              <Tabs
+                aria-label={`${label} · ${labels[size]}`}
+                items={items}
+                type={type}
+                size={size}
+              />
+            </Space>
+          ))}
+        </Space>
+      ))}
+    </Grid>
+  );
+}
diff --git a/apps/docs/src/examples/tag/basic.tsx b/apps/docs/src/examples/tag/basic.tsx
index b733407..8bae5bf 100644
--- a/apps/docs/src/examples/tag/basic.tsx
+++ b/apps/docs/src/examples/tag/basic.tsx
@@ -1,20 +1,20 @@
-import { Space, Tag } from '@ifhover/leaf-ui';
+import { Flex, Space, Tag } from '@ifhover/leaf-ui';
 import { Check } from 'lucide-react';
 export function TagBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <Space wrap className="leaf-demo-row">
+    <Space direction="vertical" align="stretch">
+      <Flex gap="md" align="center" wrap justify="center">
         {(['default', 'primary', 'success', 'info', 'warning', 'error'] as const).map((color) => (
           <Tag key={color} color={color}>
             {color}
           </Tag>
         ))}
-      </Space>
-      <Space wrap className="leaf-demo-row">
+      </Flex>
+      <Flex gap="md" align="center" wrap justify="center">
         <Tag color="primary" variant="solid">
           已发布
         </Tag>
-        <Tag color="success" variant="outline" icon={<Check />}>
+        <Tag color="success" icon={<Check />}>
           已完成
         </Tag>
         <Tag color="#7654c6" closable>
@@ -23,7 +23,7 @@ export function TagBasic() {
         <Tag size="lg" color="primary">
           大标签
         </Tag>
-      </Space>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/tag/extensions.tsx b/apps/docs/src/examples/tag/extensions.tsx
deleted file mode 100644
index e519a3a..0000000
--- a/apps/docs/src/examples/tag/extensions.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CheckableTag, Space, TagGroup } from '@ifhover/leaf-ui';
-export function ExtensionDemo() {
-  return (
-    <Space direction="vertical" align="start">
-      <CheckableTag defaultChecked>只看收藏</CheckableTag>
-      <TagGroup
-        aria-label="标签筛选"
-        options={[
-          { value: 'design', label: '设计' },
-          { value: 'dev', label: '开发' },
-          { value: 'photo', label: '摄影' },
-        ]}
-        defaultValue={['design']}
-      />
-    </Space>
-  );
-}
diff --git a/apps/docs/src/examples/tailwindcss/basic.tsx b/apps/docs/src/examples/tailwindcss/basic.tsx
new file mode 100644
index 0000000..3825c89
--- /dev/null
+++ b/apps/docs/src/examples/tailwindcss/basic.tsx
@@ -0,0 +1,14 @@
+import { Flex } from '@ifhover/leaf-ui';
+
+export function TailwindBasic() {
+  return (
+    <Flex
+      direction="column"
+      gap="sm"
+      className="rounded-leaf border border-leaf-border bg-leaf-surface p-leaf-md font-leaf text-leaf"
+    >
+      <p className="font-leaf-medium text-leaf-primary">主题样式，直接复用</p>
+      <p className="text-leaf-muted">颜色、圆角和间距都与组件保持一致。</p>
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/examples/tailwindcss/theme.tsx b/apps/docs/src/examples/tailwindcss/theme.tsx
new file mode 100644
index 0000000..9f75ed3
--- /dev/null
+++ b/apps/docs/src/examples/tailwindcss/theme.tsx
@@ -0,0 +1,26 @@
+import { Button, ConfigProvider, Flex, Switch } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function TailwindTheme() {
+  const [dark, setDark] = useState(false);
+
+  return (
+    <Flex direction="column" gap="md">
+      <Switch checked={dark} onChange={(event) => setDark(event.target.checked)}>
+        深色模式
+      </Switch>
+      <ConfigProvider theme={{ primaryColor: '#7654c6', appearance: dark ? 'dark' : 'light' }}>
+        <Flex
+          direction="column"
+          align="start"
+          gap="md"
+          className="rounded-leaf border border-leaf-border bg-leaf-surface p-leaf-md font-leaf text-leaf"
+        >
+          <p className="text-leaf-primary">工具类与组件使用同一份主题</p>
+          <p className="text-leaf-muted">背景、文字和边框会一起切换。</p>
+          <Button>Leaf UI 按钮</Button>
+        </Flex>
+      </ConfigProvider>
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/examples/textarea/basic.tsx b/apps/docs/src/examples/textarea/basic.tsx
index 38e363f..c5b2c79 100644
--- a/apps/docs/src/examples/textarea/basic.tsx
+++ b/apps/docs/src/examples/textarea/basic.tsx
@@ -1,25 +1,22 @@
-import { Space, Textarea } from '@ifhover/leaf-ui';
+import { Form, FormField, Textarea } from '@ifhover/leaf-ui';
 
 export function TextareaBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">项目简介</span>
+    <Form layout="vertical">
+      <FormField label="项目简介">
         <Textarea
           aria-label="项目简介"
           placeholder="描述一下你的新想法…"
           rows={3}
           maxLength={200}
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">只读介绍</span>
+      </FormField>
+      <FormField label="只读介绍">
         <Textarea aria-label="只读介绍" defaultValue="把灵感，种进界面。" readOnly rows={2} />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用介绍</span>
+      </FormField>
+      <FormField label="禁用介绍">
         <Textarea aria-label="禁用介绍" placeholder="暂时不可编辑" disabled rows={2} />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/textarea/controlled.tsx b/apps/docs/src/examples/textarea/controlled.tsx
index 7947f52..86cc0a2 100644
--- a/apps/docs/src/examples/textarea/controlled.tsx
+++ b/apps/docs/src/examples/textarea/controlled.tsx
@@ -1,25 +1,21 @@
-import { Space, Textarea } from '@ifhover/leaf-ui';
+import { Form, FormField, Textarea } from '@ifhover/leaf-ui';
 import { useState } from 'react';
-
 export function TextareaControlled() {
   const [value, setValue] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-field">
+    <Form layout="vertical">
+      <FormField label="留言" help={`${value.length} / 120`}>
         <Textarea
-          aria-label="留言"
           value={value}
           maxLength={120}
           resize="none"
           placeholder="最多 120 个字符"
           onChange={(event) => setValue(event.target.value)}
         />
-        <span className="leaf-demo-note">{value.length} / 120</span>
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">错误留言</span>
-        <Textarea aria-label="错误留言" status="error" placeholder="请补充描述" />
-      </div>
-    </Space>
+      </FormField>
+      <FormField label="错误留言" error="请补充描述。">
+        <Textarea placeholder="请补充描述" />
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/theming/appearance.tsx b/apps/docs/src/examples/theming/appearance.tsx
new file mode 100644
index 0000000..78dd4e7
--- /dev/null
+++ b/apps/docs/src/examples/theming/appearance.tsx
@@ -0,0 +1,19 @@
+import { Button, Card, ConfigProvider, Flex, Switch } from '@ifhover/leaf-ui';
+import { useState } from 'react';
+
+export function ThemeAppearance() {
+  const [dark, setDark] = useState(false);
+
+  return (
+    <ConfigProvider theme={{ appearance: dark ? 'dark' : 'light' }}>
+      <Card>
+        <Flex direction="column" gap="md" align="start">
+          <Switch checked={dark} onChange={(event) => setDark(event.target.checked)}>
+            深色模式
+          </Switch>
+          <Button>保存更改</Button>
+        </Flex>
+      </Card>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/theming/basic.tsx b/apps/docs/src/examples/theming/basic.tsx
new file mode 100644
index 0000000..b34f03d
--- /dev/null
+++ b/apps/docs/src/examples/theming/basic.tsx
@@ -0,0 +1,9 @@
+import { Button, ConfigProvider } from '@ifhover/leaf-ui';
+
+export function ThemeBasic() {
+  return (
+    <ConfigProvider theme={{ primaryColor: '#7654c6', borderRadius: 8 }}>
+      <Button>保存更改</Button>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/theming/scoped.tsx b/apps/docs/src/examples/theming/scoped.tsx
new file mode 100644
index 0000000..8786fd7
--- /dev/null
+++ b/apps/docs/src/examples/theming/scoped.tsx
@@ -0,0 +1,14 @@
+import { Button, ConfigProvider, Flex } from '@ifhover/leaf-ui';
+
+export function ThemeScoped() {
+  return (
+    <ConfigProvider theme={{ primaryColor: '#1677ff', borderRadius: 8 }}>
+      <Flex direction="column" gap="md" align="start">
+        <Button>全局蓝色</Button>
+        <ConfigProvider theme={{ primaryColor: '#7654c6' }}>
+          <Button>局部紫色</Button>
+        </ConfigProvider>
+      </Flex>
+    </ConfigProvider>
+  );
+}
diff --git a/apps/docs/src/examples/time-picker/basic.tsx b/apps/docs/src/examples/time-picker/basic.tsx
index 5e66104..7383760 100644
--- a/apps/docs/src/examples/time-picker/basic.tsx
+++ b/apps/docs/src/examples/time-picker/basic.tsx
@@ -1,20 +1,17 @@
-import { Space, TimePicker } from '@ifhover/leaf-ui';
+import { Form, FormField, TimePicker } from '@ifhover/leaf-ui';
 
 export function TimePickerBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">选择时间</span>
+    <Form layout="vertical">
+      <FormField label="选择时间">
         <TimePicker aria-label="选择时间" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">默认时间</span>
+      </FormField>
+      <FormField label="默认时间">
         <TimePicker aria-label="默认时间" defaultValue="09:30" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用时间</span>
+      </FormField>
+      <FormField label="禁用时间">
         <TimePicker aria-label="禁用时间" defaultValue="18:00" disabled />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/time-picker/capabilities.tsx b/apps/docs/src/examples/time-picker/capabilities.tsx
index ff3b4ce..a1f477c 100644
--- a/apps/docs/src/examples/time-picker/capabilities.tsx
+++ b/apps/docs/src/examples/time-picker/capabilities.tsx
@@ -1,8 +1,8 @@
-import { Space, TimePicker } from '@ifhover/leaf-ui';
+import { Flex, Space, TimePicker } from '@ifhover/leaf-ui';
 export function Capabilities({ english = false }) {
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
+      <Flex direction="column" gap="sm" align="center">
         {english
           ? 'Business hours; disabled choices cannot be submitted'
           : '营业时间；禁用项无法选择或通过输入提交'}
@@ -12,7 +12,7 @@ export function Capabilities({ english = false }) {
           disabledTime={(time) => time.hour < 9 || time.hour >= 18}
           minuteStep={15}
         />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/time-picker/controlled.tsx b/apps/docs/src/examples/time-picker/controlled.tsx
index 8ae1cdd..80a249b 100644
--- a/apps/docs/src/examples/time-picker/controlled.tsx
+++ b/apps/docs/src/examples/time-picker/controlled.tsx
@@ -1,19 +1,17 @@
-import { Space, TimePicker } from '@ifhover/leaf-ui';
+import { Form, FormField, Text, TimePicker } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 export function TimePickerControlled() {
   const [time, setTime] = useState<string | null>('14:30');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">会议时间</span>
+    <Form layout="vertical">
+      <FormField label="会议时间">
         <TimePicker aria-label="会议时间" value={time} onChange={setTime} minuteStep={15} />
-      </div>
-      <span className="leaf-demo-note">以 15 分钟为间隔，当前值：{time || '未选择'}</span>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">保留不符合间隔的已有值</span>
+      </FormField>
+      <Text tone="muted">以 15 分钟为间隔，当前值：{time || '未选择'}</Text>
+      <FormField label="保留不符合间隔的已有值">
         <TimePicker aria-label="保留时间" defaultValue="08:07" minuteStep={15} allowClear={false} />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/time-picker/twelve-hours.tsx b/apps/docs/src/examples/time-picker/twelve-hours.tsx
index f5dd0b0..384b3cb 100644
--- a/apps/docs/src/examples/time-picker/twelve-hours.tsx
+++ b/apps/docs/src/examples/time-picker/twelve-hours.tsx
@@ -1,13 +1,11 @@
-import { Space, TimePicker } from '@ifhover/leaf-ui';
+import { Form, FormField, TimePicker } from '@ifhover/leaf-ui';
 export function TimePickerTwelveHours() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">12小时制</span>
+    <Form layout="vertical">
+      <FormField label="12小时制">
         <TimePicker aria-label="12小时制" use12Hours defaultValue="14:30" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">精确到秒</span>
+      </FormField>
+      <FormField label="精确到秒">
         <TimePicker
           aria-label="精确到秒"
           use12Hours
@@ -15,7 +13,7 @@ export function TimePickerTwelveHours() {
           secondStep={10}
           defaultValue="00:05:30"
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/time-range-picker/advanced.tsx b/apps/docs/src/examples/time-range-picker/advanced.tsx
index 2f9c677..ba5128f 100644
--- a/apps/docs/src/examples/time-range-picker/advanced.tsx
+++ b/apps/docs/src/examples/time-range-picker/advanced.tsx
@@ -1,11 +1,11 @@
-import { Space, TimeRangePicker } from '@ifhover/leaf-ui';
+import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';
 
 export function TimeRangePickerOptions() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <strong className="leaf-demo-note">12 小时制与秒</strong>
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">12 小时制与秒</Text>
       <TimeRangePicker use12Hours showSeconds defaultValue={['09:30:00', '17:45:00']} />
-      <strong className="leaf-demo-note">允许跨过午夜</strong>
+      <Text tone="muted">允许跨过午夜</Text>
       <TimeRangePicker allowOvernight defaultValue={['22:00', '06:00']} />
     </Space>
   );
diff --git a/apps/docs/src/examples/time-range-picker/basic.tsx b/apps/docs/src/examples/time-range-picker/basic.tsx
index 62b68d0..17601b5 100644
--- a/apps/docs/src/examples/time-range-picker/basic.tsx
+++ b/apps/docs/src/examples/time-range-picker/basic.tsx
@@ -1,4 +1,4 @@
-import { Space, TimeRangePicker } from '@ifhover/leaf-ui';
+import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 export function TimeRangePickerBasic() {
   const [value, setValue] = useState<import('@ifhover/leaf-ui').TimeRange | null>([
@@ -6,9 +6,11 @@ export function TimeRangePickerBasic() {
     '18:00',
   ]);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <TimeRangePicker value={value} onChange={setValue} />
-      <output className="leaf-demo-note">{value?.join(' ~ ') || '—'}</output>
+      <output>
+        <Text tone="muted">{value?.join(' ~ ') || '—'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/time-range-picker/capabilities.tsx b/apps/docs/src/examples/time-range-picker/capabilities.tsx
index a9699e0..565cba7 100644
--- a/apps/docs/src/examples/time-range-picker/capabilities.tsx
+++ b/apps/docs/src/examples/time-range-picker/capabilities.tsx
@@ -1,10 +1,8 @@
-import { Space, TimeRangePicker } from '@ifhover/leaf-ui';
+import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';
 export function Capabilities({ english = false }) {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <p style={{ margin: '0 0 8px' }}>
-        {english ? 'Business hours for both endpoints' : '开始与结束均限制在营业时间'}
-      </p>
+    <Space direction="vertical" align="stretch">
+      <Text>{english ? 'Business hours for both endpoints' : '开始与结束均限制在营业时间'}</Text>
       <TimeRangePicker
         defaultValue={['09:00', '17:30']}
         disabledTime={(time) => time.hour < 9 || time.hour > 18}
diff --git a/apps/docs/src/examples/tooltip/basic.tsx b/apps/docs/src/examples/tooltip/basic.tsx
index 1d83f44..c9aa4f2 100644
--- a/apps/docs/src/examples/tooltip/basic.tsx
+++ b/apps/docs/src/examples/tooltip/basic.tsx
@@ -1,8 +1,8 @@
-import { Button, Space, Tooltip } from '@ifhover/leaf-ui';
+import { Button, Flex, Tooltip } from '@ifhover/leaf-ui';
 import { Info } from 'lucide-react';
 export function TooltipBasic() {
   return (
-    <Space wrap className="leaf-demo-row">
+    <Flex gap="md" align="center" wrap justify="center">
       {(['top', 'right', 'bottom', 'left'] as const).map((placement) => (
         <Tooltip key={placement} placement={placement} content="保存当前项目的修改">
           <Button variant="outline">{placement}</Button>
@@ -11,6 +11,6 @@ export function TooltipBasic() {
       <Tooltip content="该设置将应用到所有项目">
         <Button variant="ghost" startIcon={<Info />} aria-label="设置说明" />
       </Tooltip>
-    </Space>
+    </Flex>
   );
 }
diff --git a/apps/docs/src/examples/tree-select/basic.tsx b/apps/docs/src/examples/tree-select/basic.tsx
index f656aaa..f4ec55e 100644
--- a/apps/docs/src/examples/tree-select/basic.tsx
+++ b/apps/docs/src/examples/tree-select/basic.tsx
@@ -1,10 +1,10 @@
-import { Space, TreeSelect } from '@ifhover/leaf-ui';
+import { Space, Text, TreeSelect } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 import { treeOptions } from './options';
 export function TreeSelectBasic() {
   const [value, setValue] = useState<string | null>(null);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <TreeSelect
         options={treeOptions}
         value={value}
@@ -13,8 +13,8 @@ export function TreeSelectBasic() {
         aria-label="所属团队"
         placeholder="选择所属团队"
       />
-      <output className="leaf-demo-note">
-        当前值: {typeof value === 'string' ? value : '未选择'}
+      <output>
+        <Text tone="muted">当前值: {typeof value === 'string' ? value : '未选择'}</Text>
       </output>
     </Space>
   );
diff --git a/apps/docs/src/examples/tree-select/capabilities.tsx b/apps/docs/src/examples/tree-select/capabilities.tsx
index 34cf550..ac80a26 100644
--- a/apps/docs/src/examples/tree-select/capabilities.tsx
+++ b/apps/docs/src/examples/tree-select/capabilities.tsx
@@ -1,4 +1,4 @@
-import { Space, TreeSelect } from '@ifhover/leaf-ui';
+import { Flex, Space, Text, TreeSelect } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const options = [
@@ -16,12 +16,12 @@ export function Capabilities({ english = false }) {
   const [expanded, setExpanded] = useState<readonly string[]>(['team']);
   return (
     <Space direction="vertical" align="stretch">
-      <div className="leaf-demo-case">
-        <p style={{ margin: '0 0 8px' }}>
+      <Flex direction="column" gap="sm" align="center">
+        <Text>
           {english
             ? 'Choose up to two people; keep one tag visible'
             : '最多选择两人，只展示一个标签'}
-        </p>
+        </Text>
         <TreeSelect
           treeCheckable
           options={options}
@@ -35,7 +35,7 @@ export function Capabilities({ english = false }) {
           }
           showSearch
         />
-      </div>
+      </Flex>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/tree-select/multiple.tsx b/apps/docs/src/examples/tree-select/multiple.tsx
index b10ce95..76f8a2e 100644
--- a/apps/docs/src/examples/tree-select/multiple.tsx
+++ b/apps/docs/src/examples/tree-select/multiple.tsx
@@ -1,23 +1,20 @@
-import { Space, TreeSelect } from '@ifhover/leaf-ui';
+import { Form, FormField, TreeSelect } from '@ifhover/leaf-ui';
 import { treeOptions } from './options';
 export function TreeSelectMultiple() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">多选 · 逐项选择</span>
+    <Form layout="vertical">
+      <FormField label="多选 · 逐项选择">
         <TreeSelect options={treeOptions} multiple defaultValue={['visual']} defaultExpandAll />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">勾选联动 · 提交子节点</span>
+      </FormField>
+      <FormField label="勾选联动 · 提交子节点">
         <TreeSelect
           options={treeOptions}
           treeCheckable
           defaultValue={['visual']}
           defaultExpandAll
         />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">勾选联动 · 合并显示父节点</span>
+      </FormField>
+      <FormField label="勾选联动 · 合并显示父节点">
         <TreeSelect
           options={treeOptions}
           treeCheckable
@@ -25,7 +22,7 @@ export function TreeSelectMultiple() {
           defaultValue={['design']}
           defaultExpandAll
         />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/tree-select/single-line.tsx b/apps/docs/src/examples/tree-select/single-line.tsx
new file mode 100644
index 0000000..4f7f51b
--- /dev/null
+++ b/apps/docs/src/examples/tree-select/single-line.tsx
@@ -0,0 +1,18 @@
+import { Form, FormField, TreeSelect } from '@ifhover/leaf-ui';
+import { treeOptions } from './options';
+
+export function SingleLine() {
+  return (
+    <Form layout="vertical">
+      <FormField label="单行多选">
+        <TreeSelect
+          treeCheckable
+          tagWrap={false}
+          options={treeOptions}
+          defaultValue={['visual', 'product', 'web', 'server']}
+          treeDefaultExpandedKeys={['design']}
+        />
+      </FormField>
+    </Form>
+  );
+}
diff --git a/apps/docs/src/examples/tree-select/states.tsx b/apps/docs/src/examples/tree-select/states.tsx
index 40eb8de..7d765ce 100644
--- a/apps/docs/src/examples/tree-select/states.tsx
+++ b/apps/docs/src/examples/tree-select/states.tsx
@@ -1,20 +1,17 @@
-import { Space, TreeSelect } from '@ifhover/leaf-ui';
+import { Form, FormField, TreeSelect } from '@ifhover/leaf-ui';
 import { treeOptions } from './options';
 export function TreeSelectStates() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">禁用</span>
+    <Form layout="vertical">
+      <FormField label="禁用">
         <TreeSelect options={treeOptions} disabled defaultValue="web" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">校验反馈</span>
+      </FormField>
+      <FormField label="校验反馈">
         <TreeSelect options={treeOptions} status="error" placeholder="请选择一个团队" />
-      </div>
-      <div className="leaf-demo-case">
-        <span className="leaf-demo-label">自定义浮层宽度</span>
+      </FormField>
+      <FormField label="自定义浮层宽度">
         <TreeSelect options={treeOptions} popupWidth={320} popupMaxWidth={360} defaultExpandAll />
-      </div>
-    </Space>
+      </FormField>
+    </Form>
   );
 }
diff --git a/apps/docs/src/examples/tree/basic.tsx b/apps/docs/src/examples/tree/basic.tsx
index 2f1f973..f1f788b 100644
--- a/apps/docs/src/examples/tree/basic.tsx
+++ b/apps/docs/src/examples/tree/basic.tsx
@@ -1,10 +1,10 @@
-import { Space, Tree } from '@ifhover/leaf-ui';
+import { Space, Text, Tree } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 import { treeData } from './data';
 export function TreeBasic() {
   const [selected, setSelected] = useState<readonly string[]>([]);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Tree
         data={treeData}
         defaultExpandedKeys={['design']}
@@ -12,7 +12,9 @@ export function TreeBasic() {
         selectedKeys={selected}
         onSelect={setSelected}
       />
-      <output className="leaf-demo-note">已选: {selected.join(', ') || '暂无'}</output>
+      <output>
+        <Text tone="muted">已选: {selected.join(', ') || '暂无'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/tree/capabilities.tsx b/apps/docs/src/examples/tree/capabilities.tsx
index 8fae8f2..a1cc6ee 100644
--- a/apps/docs/src/examples/tree/capabilities.tsx
+++ b/apps/docs/src/examples/tree/capabilities.tsx
@@ -1,4 +1,4 @@
-import { Button, Space, Tree, type TreeNode } from '@ifhover/leaf-ui';
+import { Button, Space, Text, Tree, type TreeNode } from '@ifhover/leaf-ui';
 import { useCallback, useMemo, useState } from 'react';
 
 export function TreeCacheRefresh({ english = false }: { english?: boolean }) {
@@ -45,11 +45,11 @@ export function TreeCacheRefresh({ english = false }: { english?: boolean }) {
         cacheKey={version}
         defaultExpandedKeys={['root']}
       />
-      <p className="leaf-demo-note">
+      <Text tone="muted">
         {english
           ? 'The root key stays stable. A new cache version discards old children and cancels pending requests.'
           : '根节点 key 保持不变，数据版本变化后会清除旧子节点并取消未完成的请求。'}
-      </p>
+      </Text>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/tree/checkable.tsx b/apps/docs/src/examples/tree/checkable.tsx
index 8a66f6d..bde4ead 100644
--- a/apps/docs/src/examples/tree/checkable.tsx
+++ b/apps/docs/src/examples/tree/checkable.tsx
@@ -1,10 +1,10 @@
-import { Space, Tree } from '@ifhover/leaf-ui';
+import { Space, Text, Tree } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 import { treeData } from './data';
 export function TreeCheckable() {
   const [checked, setChecked] = useState<readonly string[]>(['components']);
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Tree
         data={treeData}
         checkable
@@ -14,7 +14,9 @@ export function TreeCheckable() {
         checkedKeys={checked}
         onCheck={setChecked}
       />
-      <output className="leaf-demo-note">勾选节点: {checked.join(', ') || '暂无'}</output>
+      <output>
+        <Text tone="muted">勾选节点: {checked.join(', ') || '暂无'}</Text>
+      </output>
     </Space>
   );
 }
diff --git a/apps/docs/src/examples/tree/extensions.tsx b/apps/docs/src/examples/tree/extensions.tsx
index b31aee9..330385c 100644
--- a/apps/docs/src/examples/tree/extensions.tsx
+++ b/apps/docs/src/examples/tree/extensions.tsx
@@ -1,4 +1,5 @@
-import { Space, Tree, type TreeNode } from '@ifhover/leaf-ui';
+import type { TreeNode } from '@ifhover/leaf-ui';
+import { Space, Tree } from '@ifhover/leaf-ui';
 import { useState } from 'react';
 
 const initial: TreeNode[] = [
diff --git a/apps/docs/src/examples/tree/search.tsx b/apps/docs/src/examples/tree/search.tsx
index 08571d8..b7b927c 100644
--- a/apps/docs/src/examples/tree/search.tsx
+++ b/apps/docs/src/examples/tree/search.tsx
@@ -5,7 +5,7 @@ import { treeData } from './data';
 export function TreeSearch() {
   const [query, setQuery] = useState('');
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack">
+    <Space direction="vertical" align="stretch">
       <Input
         aria-label="搜索节点"
         placeholder="搜索节点"
diff --git a/apps/docs/src/examples/upload/advanced.tsx b/apps/docs/src/examples/upload/advanced.tsx
index d800ef7..076d54e 100644
--- a/apps/docs/src/examples/upload/advanced.tsx
+++ b/apps/docs/src/examples/upload/advanced.tsx
@@ -1,4 +1,5 @@
-import { Space, Upload, type UploadRequest } from '@ifhover/leaf-ui';
+import type { UploadRequest } from '@ifhover/leaf-ui';
+import { Space, Text, Upload } from '@ifhover/leaf-ui';
 
 const demoRequest = ({ signal, onProgress }: UploadRequest) =>
   new Promise<void>((resolve, reject) => {
@@ -24,10 +25,10 @@ const demoRequest = ({ signal, onProgress }: UploadRequest) =>
   });
 export function UploadDrag() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
-      <p className="leaf-demo-note">
+    <Space direction="vertical" align="stretch">
+      <Text tone="muted">
         此示例在本地模拟上传进度，使用 action 或 customRequest 接入实际上传服务。
-      </p>
+      </Text>
       <Upload
         drag
         multiple
diff --git a/apps/docs/src/examples/upload/basic.tsx b/apps/docs/src/examples/upload/basic.tsx
index 0f71587..f526724 100644
--- a/apps/docs/src/examples/upload/basic.tsx
+++ b/apps/docs/src/examples/upload/basic.tsx
@@ -1,7 +1,7 @@
 import { Space, Upload } from '@ifhover/leaf-ui';
 export function UploadBasic() {
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Upload
         multiple
         accept="image/*,.pdf,.txt"
diff --git a/apps/docs/src/examples/virtual-list/advanced.tsx b/apps/docs/src/examples/virtual-list/advanced.tsx
index d2fb397..be6a208 100644
--- a/apps/docs/src/examples/virtual-list/advanced.tsx
+++ b/apps/docs/src/examples/virtual-list/advanced.tsx
@@ -9,7 +9,7 @@ export function VirtualListDynamic() {
     })),
   );
   return (
-    <Space direction="vertical" align="stretch" className="leaf-demo-stack leaf-demo-stack--wide">
+    <Space direction="vertical" align="stretch">
       <Button variant="outline" onClick={() => list.current?.scrollToIndex(500, 'start')}>
         跳至第 501 项
       </Button>
diff --git a/apps/docs/src/examples/virtual-list/basic.tsx b/apps/docs/src/examples/virtual-list/basic.tsx
index 35c09d0..eb5a51d 100644
--- a/apps/docs/src/examples/virtual-list/basic.tsx
+++ b/apps/docs/src/examples/virtual-list/basic.tsx
@@ -9,7 +9,6 @@ export function VirtualListBasic() {
   );
   return (
     <VirtualList
-      style={{ width: '100%' }}
       items={items}
       itemKey={(item) => item.id}
       height={240}
diff --git a/apps/docs/theme/index.scss b/apps/docs/theme/index.scss
index 8bf3af3..31ae503 100644
--- a/apps/docs/theme/index.scss
+++ b/apps/docs/theme/index.scss
@@ -118,6 +118,11 @@ html.rp-dark {
 }
 :is(.rp-nav-screen, .rp-nav-hamburger__md__hover-group) .rp-nav-screen-menu-item {
   min-height: 44px;
+
+  &:hover,
+  &--active {
+    color: var(--leaf-site-accent);
+  }
 }
 :is(.rp-nav-screen, .rp-nav-hamburger__md__hover-group) .rp-nav-screen-menu-item__left,
 :is(.rp-nav-screen, .rp-nav-hamburger__md__hover-group) .rp-nav-screen-menu-item__right,
@@ -169,9 +174,43 @@ html.rp-dark {
 .leaf-docs-theme-button {
   color: var(--leaf-site-nav-text);
 }
-.leaf-docs-code-actions {
-  display: inline-flex;
-  gap: 3px;
+.leaf-docs-theme {
+  --leaf-site-accent: var(--leaf-color-primary);
+  --rp-c-brand: var(--leaf-site-accent);
+  --rp-c-brand-light: var(--leaf-color-primary-hover);
+  --rp-c-brand-lighter: var(--leaf-color-primary-surface-8);
+  --rp-c-brand-dark: var(--leaf-color-primary-text-80);
+  --rp-c-brand-darker: var(--leaf-color-primary-text-55);
+  --rp-c-brand-tint: var(--leaf-color-primary-alpha-8);
+}
+.leaf-docs-color-switcher {
+  flex: none;
+  margin-inline-start: 8px;
+  border-color: transparent;
+  background: transparent;
+  &:hover {
+    border-color: var(--leaf-color-border);
+  }
+}
+.rp-codeblock__content:has(> .leaf-docs-code-actions) {
+  display: flex;
+  align-items: flex-start;
+
+  > .rp-codeblock__content__scroll-container {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  > .leaf-docs-code-actions {
+    // Align with the first code line and reserve space instead of covering short snippets.
+    position: static;
+    flex: none;
+    align-items: center;
+    gap: 4px;
+    margin-block: calc(1rem + (var(--rp-code-font-size) * 1.7 - var(--leaf-control-height-sm)) / 2)
+      12px;
+    margin-inline: 0 12px;
+  }
 }
 @media (max-width: 1023px) {
   .leaf-docs-search-button {
@@ -206,8 +245,11 @@ html.rp-dark {
   font-weight: 400;
   line-height: 1.6;
 }
-.rp-outline .rp-toc-item--active .rp-toc-item__text {
+.rp-outline .rp-toc-item:is(:hover, .rp-toc-item--active) .rp-toc-item__text,
+.rp-outline .rp-toc-item:is(:hover, .rp-toc-item--active) .rp-toc-item__text code {
   color: var(--leaf-site-accent);
+}
+.rp-outline .rp-toc-item--active .rp-toc-item__text {
   font-weight: 500;
 }
 .rp-outline__title {
@@ -269,11 +311,91 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
     background: var(--leaf-site-soft);
     font-size: 0.86em;
   }
+  a#{$prose} > code {
+    color: var(--leaf-site-accent);
+  }
+  code.leaf-api-type#{$prose} {
+    white-space: normal;
+    overflow-wrap: anywhere;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+    a {
+      color: var(--leaf-site-accent);
+      font-weight: 500;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+      &:focus-visible {
+        outline: 2px solid var(--leaf-site-accent);
+        outline-offset: 2px;
+        border-radius: 2px;
+      }
+    }
+  }
+  details.leaf-api-details#{$prose} {
+    margin: 16px 0;
+    padding: 12px 16px;
+    border: 1px solid var(--leaf-site-border);
+    border-radius: 10px;
+    background: var(--leaf-site-panel);
+    summary {
+      color: var(--leaf-site-text);
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      &::marker {
+        color: var(--leaf-site-muted);
+      }
+    }
+    &[open] > summary {
+      margin-bottom: 16px;
+    }
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
   table#{$prose} {
     border-color: var(--leaf-site-border);
     border-radius: 12px;
     font-size: 14px;
   }
+  .leaf-browser-name {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    vertical-align: middle;
+    white-space: nowrap;
+    img {
+      flex-shrink: 0;
+      width: 20px;
+      height: 20px;
+    }
+  }
+  table.leaf-api-table#{$prose} {
+    th:last-child,
+    td:last-child {
+      min-inline-size: 240px;
+    }
+  }
+  .leaf-tailwind-table {
+    table {
+      width: 100%;
+    }
+    th:first-child,
+    td:first-child {
+      width: 24%;
+      min-inline-size: 160px;
+    }
+    th:last-child,
+    td:last-child {
+      min-inline-size: 280px;
+    }
+    td code {
+      white-space: nowrap;
+    }
+  }
   th#{$prose} {
     color: var(--leaf-site-muted);
     background: var(--leaf-site-soft);
@@ -289,16 +411,27 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
   }
 }
 @media (min-width: 1280px) {
-  :root:has(.leaf-component-example) {
+  html:root {
     --rp-content-padding-x: 32px;
     --rp-content-max-width: 1200px;
   }
 }
 @media (min-width: 769px) and (max-width: 1279px) {
-  :root:has(.leaf-component-example) {
+  html:root {
     --rp-content-padding-x: 24px;
   }
 }
+@media (min-width: 769px) {
+  .rp-doc-layout__sidebar-placeholder--legacy {
+    // Pages without a menu retain the same article column at tablet and desktop sizes.
+    flex: 0 0 var(--rp-sidebar-width);
+  }
+}
+.rp-doc-layout__container > .rp-doc-layout__doc {
+  // Clip horizontal overflow without creating a scroll container for the sticky code action.
+  min-inline-size: 0;
+  overflow: clip;
+}
 .leaf-home {
   max-width: 1184px;
   margin: 0 auto;
@@ -313,7 +446,7 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 76px 0 48px;
+  padding: 60px 0 48px;
   text-align: center;
 }
 .leaf-release {
@@ -323,14 +456,21 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
   color: var(--leaf-site-muted);
 }
 .leaf-hero h1 {
-  margin: 24px 0 18px;
-  font-size: clamp(36px, 4.6vw, 56px);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin: 22px 0 18px;
   font-weight: 600;
-  line-height: 1.2;
   letter-spacing: -0.035em;
-  > span {
-    color: var(--leaf-site-accent);
-  }
+  line-height: 1.2;
+}
+.leaf-hero__brand {
+  color: var(--leaf-site-accent);
+  font-size: clamp(52px, 6vw, 72px);
+  letter-spacing: -0.055em;
+}
+.leaf-hero__headline {
+  font-size: clamp(28px, 3.5vw, 42px);
 }
 .leaf-hero > p {
   margin: 0;
@@ -349,27 +489,6 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
   outline: 3px solid var(--leaf-site-accent);
   outline-offset: 4px;
 }
-.leaf-install {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  max-width: 100%;
-  min-height: 34px;
-  padding: 2px 3px 2px 12px;
-  border: 1px solid var(--leaf-site-border);
-  border-radius: 8px;
-  background: var(--leaf-site-soft);
-  color: var(--leaf-site-muted);
-  code {
-    min-width: 0;
-    overflow-wrap: anywhere;
-    color: var(--leaf-site-text);
-    font-size: 13px;
-  }
-  .leaf-button {
-    color: var(--leaf-site-muted);
-  }
-}
 .leaf-hero__note {
   margin-top: 15px;
   color: var(--leaf-site-muted);
@@ -383,7 +502,9 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 40px;
+  margin-top: 44px;
   padding: 48px 8px 56px;
+  border-top: 1px solid var(--leaf-site-border);
   article {
     min-width: 0;
     > svg {
@@ -401,9 +522,9 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
     font-size: 14px;
     line-height: 1.75;
   }
-}
-.leaf-home-motion {
-  margin-bottom: 70px;
+  .leaf-button--link {
+    margin-top: 12px;
+  }
 }
 .leaf-home-playground {
   margin-bottom: 64px;
@@ -848,9 +969,12 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
     padding: 38px 0 30px;
   }
   .leaf-hero h1 {
-    font-size: 34px;
+    gap: 12px;
     letter-spacing: -0.03em;
   }
+  .leaf-hero__headline {
+    font-size: clamp(24px, 6.2vw, 32px);
+  }
   .leaf-hero > p {
     font-size: 15px;
   }
@@ -868,7 +992,6 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
   .leaf-section-heading p {
     font-size: 14px;
   }
-  .leaf-home-motion,
   .leaf-home-playground {
     margin-bottom: 44px;
   }
@@ -909,7 +1032,7 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
   line-height: 24px;
 
   &:hover {
-    color: var(--leaf-site-text);
+    color: var(--leaf-site-accent);
   }
 
   &--active,
@@ -921,15 +1044,25 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
 }
 // Group headings read as quiet section labels rather than another level of links.
 .rp-doc-layout__sidebar .rp-sidebar-group[data-depth='0'] {
+  position: sticky;
+  top: 0;
+  z-index: 1;
   min-height: 30px;
-  margin-top: 14px;
+  // Keep the sticky heading's upward mask inside the gap after the preceding group.
+  margin-top: var(--rp-sidebar-padding);
   padding-block: 4px;
   color: var(--leaf-site-muted);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  background: transparent;
+  border-radius: 0;
+  background: var(--rp-c-bg);
+  box-shadow: 0 calc(-1 * var(--rp-sidebar-padding)) 0 var(--rp-c-bg);
+
+  &:hover {
+    color: var(--leaf-site-accent);
+  }
 }
 .rp-doc-layout__sidebar .rp-sidebar-section-header {
   padding-block: 8px;
@@ -949,7 +1082,8 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
     flex: 0 0 auto;
   }
 
-  .rp-badge {
+  &:not([href$='/config-provider.html']) .rp-badge,
+  &[href$='/config-provider.html'] .rp-badge:not(:last-child) {
     margin: 0;
     padding: 0;
     border: 0;
@@ -961,123 +1095,15 @@ $prose: ':not(:where(.rp-not-doc, .rp-not-doc *))';
     line-height: inherit;
     opacity: 0.85;
   }
-}
 
-.leaf-demo-stack {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  min-width: 0;
-  width: min(100%, 360px);
-  &:not(.leaf-form) {
-    gap: 12px;
-  }
-}
-.leaf-demo-stack--wide {
-  width: 100%;
-}
-.leaf-demo-field {
-  display: grid;
-  gap: 4px;
-}
-.leaf-demo-case {
-  display: grid;
-  align-content: start;
-  justify-items: center;
-  min-width: 0;
-  gap: 10px;
-}
-// A labelled case reads like a form field: label and control share the start edge.
-.leaf-demo-case:has(> .leaf-demo-label) {
-  justify-items: start;
-  gap: 6px;
-  > .leaf-demo-label + * {
-    justify-self: stretch;
-  }
-  > .leaf-demo-label + :is(.leaf-button, .leaf-switch, .leaf-rate, .leaf-segmented, .leaf-badge) {
-    justify-self: start;
-  }
-  > .leaf-demo-label + .leaf-badge {
-    margin-block-start: 4px;
-  }
-}
-.leaf-demo-label {
-  color: var(--leaf-color-text);
-  font-size: 14px;
-  line-height: 1.5;
-}
-.leaf-demo-section-title {
-  @include mixins.section-label;
-}
-.leaf-demo-stack > .leaf-demo-case {
-  width: 100%;
-}
-.leaf-demo-case > p {
-  margin: 0;
-  text-align: center;
-}
-.leaf-demo-row > .leaf-demo-case {
-  max-width: 100%;
-}
-.leaf-demo-calendar-event {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  max-width: 100%;
-  white-space: nowrap;
-  font-size: 12px;
-  i {
-    width: 5px;
-    height: 5px;
-    flex: 0 0 auto;
-    border-radius: 50%;
-    background: currentColor;
-  }
-}
-.leaf-demo-row {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 12px 20px;
-}
-.leaf-demo-note {
-  color: var(--leaf-site-muted);
-  font-size: 13px;
-  line-height: 1.6;
-}
-.leaf-demo-error {
-  margin-top: -2px;
-  color: var(--leaf-color-danger);
-  font-size: 13px;
-}
-.leaf-demo-control-row {
-  display: grid;
-  grid-template-columns: 26px minmax(0, 1fr) minmax(0, 0.85fr) auto;
-  align-items: center;
-  gap: 8px;
-}
-.leaf-demo-size {
-  color: var(--leaf-site-muted);
-  font-size: 13px;
-}
-.leaf-demo-surface {
-  padding: 24px;
-  border: 1px solid var(--leaf-color-border);
-  border-radius: var(--leaf-radius-md);
-  color: var(--leaf-color-text);
-  background: var(--leaf-color-surface);
-  p {
-    margin-block: 8px 14px;
-  }
-}
-@media (max-width: 480px) {
-  .leaf-demo-control-row {
-    grid-template-columns: 20px minmax(0, 1fr) auto;
-  }
-  .leaf-demo-control-row .leaf-select {
-    grid-column: 2 / -1;
-    grid-row: 2;
+  &[href$='/config-provider.html'] {
+    .rp-sidebar-item__right {
+      flex: 1;
+      gap: 7px;
+    }
+
+    .rp-badge:last-child {
+      margin-left: auto;
+    }
   }
 }
diff --git a/apps/docs/theme/index.tsx b/apps/docs/theme/index.tsx
index a0a8751..9404cca 100644
--- a/apps/docs/theme/index.tsx
+++ b/apps/docs/theme/index.tsx
@@ -1,26 +1,22 @@
 import '@fontsource-variable/inter';
 import '@ifhover/leaf-ui/styles.css';
 import './index.scss';
-import { ConfigProvider } from '@ifhover/leaf-ui';
-import { useDark } from '@rspress/core/runtime';
+import './tailwind.css';
 import { type LayoutProps, Layout as RspressLayout } from '@rspress/core/theme-original';
-import { useDocsLocale } from '../src/components/i18n';
+import { DocsThemeProvider } from '../src/components/docs-theme';
+import { ThemeColorSwitcher } from '../src/components/theme-color-switcher';
 import { VersionSwitcher } from '../src/components/version-switcher';
 
 export * from '@rspress/core/theme-original';
 export { CodeButtonGroup } from '../src/components/code-button-group';
+export { DocsSidebar as Sidebar } from '../src/components/docs-sidebar';
 export { HomeLayout } from '../src/components/home';
 export { SearchButton } from '../src/components/search-button';
 export { SwitchAppearance } from '../src/components/switch-appearance';
 
 export function Layout(props: LayoutProps) {
-  const { english } = useDocsLocale();
-  const dark = useDark();
   return (
-    <ConfigProvider
-      locale={english ? 'en-US' : 'zh-CN'}
-      theme={{ appearance: dark ? 'dark' : 'light' }}
-    >
+    <DocsThemeProvider>
       <RspressLayout
         {...props}
         afterNavTitle={
@@ -29,7 +25,13 @@ export function Layout(props: LayoutProps) {
             {props.afterNavTitle}
           </>
         }
+        afterNavMenu={
+          <>
+            {props.afterNavMenu}
+            <ThemeColorSwitcher />
+          </>
+        }
       />
-    </ConfigProvider>
+    </DocsThemeProvider>
   );
 }
diff --git a/apps/docs/theme/tailwind.css b/apps/docs/theme/tailwind.css
new file mode 100644
index 0000000..9f15f0a
--- /dev/null
+++ b/apps/docs/theme/tailwind.css
@@ -0,0 +1,10 @@
+/* Keep Rspress and Leaf UI's reset; utilities override the existing unlayered styles. */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" source(none);
+
+/* Read the shared preset from source so guide previews need no library build. */
+@config "../../../packages/react/src/tailwind.ts";
+
+@source "../src";
+@source "../docs";
+@source ".";
diff --git a/biome.json b/biome.json
index 02dc7b3..90a8661 100644
--- a/biome.json
+++ b/biome.json
@@ -36,6 +36,16 @@
       "enabled": true
     }
   },
+  "overrides": [
+    {
+      "includes": ["apps/docs/theme/tailwind.css"],
+      "css": {
+        "parser": {
+          "tailwindDirectives": true
+        }
+      }
+    }
+  ],
   "linter": {
     "enabled": true,
     "rules": {
diff --git a/design/figma/code.js b/design/figma/code.js
index f70b920..54c309b 100644
--- a/design/figma/code.js
+++ b/design/figma/code.js
@@ -1,6 +1,6 @@
 // Generated from the runtime theme sources; no network access.
-const leafPalettes = {"light":{"primary":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":1},"on-primary":{"r":1,"g":1,"b":1,"a":1},"danger":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":1},"on-danger":{"r":1,"g":1,"b":1,"a":1},"warning":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":1},"info":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":1},"success":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":1},"text":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"text-muted":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":1},"surface":{"r":1,"g":1,"b":1,"a":1},"surface-muted":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":1},"border":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":1},"primary-text-80":{"r":0.12549019607843137,"g":0.43529411764705883,"b":0.25882352941176473,"a":1},"success-text-80":{"r":0.12549019607843137,"g":0.43529411764705883,"b":0.25882352941176473,"a":1},"warning-text-80":{"r":0.5529411764705883,"g":0.403921568627451,"b":0.10980392156862745,"a":1},"danger-text-80":{"r":0.6509803921568628,"g":0.21176470588235294,"b":0.21568627450980393,"a":1},"info-text-80":{"r":0.09411764705882353,"g":0.4,"b":0.8274509803921568,"a":1},"border-alpha-55":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.55},"border-alpha-60":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.6},"border-alpha-65":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.65},"border-alpha-85":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.85},"border-surface-35":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":1},"border-surface-65":{"r":0.9333333333333333,"g":0.9333333333333333,"b":0.9411764705882353,"a":1},"border-surface-70":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9372549019607843,"a":1},"border-text-muted-65":{"r":0.7254901960784313,"g":0.7254901960784313,"b":0.7450980392156863,"a":1},"danger-alpha-10":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.1},"danger-alpha-11":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.11},"danger-alpha-12":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.12},"danger-alpha-15":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.15},"danger-alpha-18":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.18},"danger-alpha-22":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.22},"danger-alpha-25":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.25},"danger-alpha-42":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.42},"danger-alpha-7":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.07},"danger-alpha-8":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.08},"danger-alpha-9":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.09},"danger-border-12":{"r":0.8862745098039215,"g":0.8196078431372549,"b":0.8274509803921568,"a":1},"danger-border-30":{"r":0.8627450980392157,"g":0.6980392156862745,"b":0.7058823529411765,"a":1},"danger-surface-4":{"r":0.9921568627450981,"g":0.9686274509803922,"b":0.9686274509803922,"a":1},"danger-surface-5":{"r":0.9882352941176471,"g":0.9607843137254902,"b":0.9607843137254902,"a":1},"danger-surface-6":{"r":0.9882352941176471,"g":0.9529411764705882,"b":0.9529411764705882,"a":1},"danger-surface-8":{"r":0.984313725490196,"g":0.9372549019607843,"b":0.9372549019607843,"a":1},"danger-surface-9":{"r":0.9803921568627451,"g":0.9294117647058824,"b":0.9294117647058824,"a":1},"danger-white-97-5":{"r":0.788235294117647,"g":0.2549019607843137,"b":0.2549019607843137,"a":1},"info-alpha-10":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.1},"info-alpha-15":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.15},"info-alpha-22":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.22},"info-alpha-8":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.08},"info-alpha-9":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.09},"info-border-12":{"r":0.8,"g":0.8470588235294118,"b":0.9215686274509803,"a":1},"info-surface-5":{"r":0.9529411764705882,"g":0.9725490196078431,"b":1,"a":1},"info-surface-8":{"r":0.9254901960784314,"g":0.9568627450980393,"b":1,"a":1},"info-surface-9":{"r":0.9176470588235294,"g":0.9529411764705882,"b":1,"a":1},"primary-alpha-10":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.1},"primary-alpha-11":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.11},"primary-alpha-12":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.12},"primary-alpha-15":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.15},"primary-alpha-16":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.16},"primary-alpha-18":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.18},"primary-alpha-20":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.2},"primary-alpha-22":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.22},"primary-alpha-25":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.25},"primary-alpha-35":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.35},"primary-alpha-4":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.04},"primary-alpha-42":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.42},"primary-alpha-45":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.45},"primary-alpha-55":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.55},"primary-alpha-8":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.08},"primary-alpha-9":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.09},"primary-border-12":{"r":0.803921568627451,"g":0.8509803921568627,"b":0.8352941176470589,"a":1},"primary-border-24":{"r":0.7137254901960784,"g":0.803921568627451,"b":0.7607843137254902,"a":1},"primary-border-30":{"r":0.6666666666666666,"g":0.7843137254901961,"b":0.7254901960784313,"a":1},"primary-border-35":{"r":0.6274509803921569,"g":0.7647058823529411,"b":0.6941176470588235,"a":1},"primary-surface-10":{"r":0.9137254901960784,"g":0.9529411764705882,"b":0.9294117647058824,"a":1},"primary-surface-14":{"r":0.8784313725490196,"g":0.9333333333333333,"b":0.9019607843137255,"a":1},"primary-surface-28":{"r":0.7568627450980392,"g":0.8627450980392157,"b":0.8,"a":1},"primary-surface-3":{"r":0.9725490196078431,"g":0.984313725490196,"b":0.9803921568627451,"a":1},"primary-surface-5":{"r":0.9568627450980393,"g":0.9764705882352941,"b":0.9647058823529412,"a":1},"primary-surface-6":{"r":0.9490196078431372,"g":0.9725490196078431,"b":0.9568627450980393,"a":1},"primary-surface-7":{"r":0.9372549019607843,"g":0.9647058823529412,"b":0.9490196078431372,"a":1},"primary-surface-8":{"r":0.9294117647058824,"g":0.9607843137254902,"b":0.9450980392156862,"a":1},"primary-surface-9":{"r":0.9215686274509803,"g":0.9568627450980393,"b":0.9372549019607843,"a":1},"primary-text-55":{"r":0.12549019607843137,"g":0.33725490196078434,"b":0.2235294117647059,"a":1},"primary-text-85":{"r":0.12549019607843137,"g":0.4549019607843137,"b":0.26666666666666666,"a":1},"primary-white-97-5":{"r":0.14901960784313725,"g":0.5254901960784314,"b":0.30980392156862746,"a":1},"success-alpha-10":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.1},"success-alpha-15":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.15},"success-alpha-22":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.22},"success-alpha-8":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.08},"success-alpha-9":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.09},"success-border-12":{"r":0.803921568627451,"g":0.8509803921568627,"b":0.8352941176470589,"a":1},"success-surface-5":{"r":0.9568627450980393,"g":0.9764705882352941,"b":0.9647058823529412,"a":1},"success-surface-8":{"r":0.9294117647058824,"g":0.9607843137254902,"b":0.9450980392156862,"a":1},"success-surface-9":{"r":0.9215686274509803,"g":0.9568627450980393,"b":0.9372549019607843,"a":1},"surface-alpha-55":{"r":1,"g":1,"b":1,"a":0.55},"surface-alpha-90":{"r":1,"g":1,"b":1,"a":0.9},"surface-muted-alpha-45":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":0.45},"surface-muted-alpha-50":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":0.5},"surface-muted-border-65":{"r":0.9411764705882353,"g":0.9411764705882353,"b":0.9490196078431372,"a":1},"surface-muted-border-75":{"r":0.9490196078431372,"g":0.9490196078431372,"b":0.9529411764705882,"a":1},"surface-text-98":{"r":0.984313725490196,"g":0.984313725490196,"b":0.984313725490196,"a":1},"text-alpha-10":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.1},"text-alpha-15":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.15},"text-alpha-16":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.16},"text-alpha-18":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.18},"text-alpha-8":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.08},"text-alpha-9":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.09},"text-border-12":{"r":0.803921568627451,"g":0.803921568627451,"b":0.8156862745098039,"a":1},"text-muted-alpha-10":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":0.1},"text-muted-alpha-22":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":0.22},"text-muted-surface-8":{"r":0.9529411764705882,"g":0.9529411764705882,"b":0.9529411764705882,"a":1},"text-muted-surface-9":{"r":0.9450980392156862,"g":0.9450980392156862,"b":0.9490196078431372,"a":1},"text-muted-surface-92":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":1},"text-subtle-alpha-9":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":0.09},"text-subtle-surface-muted-38":{"r":0.7725490196078432,"g":0.7725490196078432,"b":0.7843137254901961,"a":1},"text-surface-5":{"r":0.9568627450980393,"g":0.9568627450980393,"b":0.9568627450980393,"a":1},"warning-alpha-10":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.1},"warning-alpha-12":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.12},"warning-alpha-15":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.15},"warning-alpha-16":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.16},"warning-alpha-22":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.22},"warning-alpha-8":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.08},"warning-alpha-9":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.09},"warning-border-12":{"r":0.9098039215686274,"g":0.8705882352941177,"b":0.8117647058823529,"a":1},"warning-border-30":{"r":0.9215686274509803,"g":0.8313725490196079,"b":0.6588235294117647,"a":1},"warning-surface-11":{"r":0.996078431372549,"g":0.9647058823529412,"b":0.8980392156862745,"a":1},"warning-surface-5":{"r":1,"g":0.984313725490196,"b":0.9529411764705882,"a":1},"warning-surface-8":{"r":1,"g":0.9725490196078431,"b":0.9254901960784314,"a":1},"warning-surface-9":{"r":1,"g":0.9725490196078431,"b":0.9176470588235294,"a":1},"text-subtle":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":1},"surface-raised":{"r":0.984313725490196,"g":0.984313725490196,"b":0.984313725490196,"a":1},"border-hover":{"r":0.7254901960784313,"g":0.7254901960784313,"b":0.7450980392156863,"a":1},"on-warning":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"primary-hover":{"r":0.14901960784313725,"g":0.5254901960784314,"b":0.30980392156862746,"a":1},"primary-active":{"r":0.10588235294117647,"g":0.43529411764705883,"b":0.24705882352941178,"a":1},"danger-hover":{"r":0.796078431372549,"g":0.2823529411764706,"b":0.2823529411764706,"a":1},"danger-active":{"r":0.6666666666666666,"g":0.2,"b":0.2,"a":1}},"dark":{"primary":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":1},"on-primary":{"r":0.06666666666666667,"g":0.15294117647058825,"b":0.10196078431372549,"a":1},"danger":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":1},"on-danger":{"r":0.2196078431372549,"g":0.09411764705882353,"b":0.09411764705882353,"a":1},"warning":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":1},"info":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":1},"success":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":1},"text":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":1},"text-muted":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":1},"surface":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":1},"surface-muted":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":1},"border":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":1},"primary-text-80":{"r":0.596078431372549,"g":0.8352941176470589,"b":0.6823529411764706,"a":1},"success-text-80":{"r":0.596078431372549,"g":0.8352941176470589,"b":0.6823529411764706,"a":1},"warning-text-80":{"r":0.984313725490196,"g":0.803921568627451,"b":0.3803921568627451,"a":1},"danger-text-80":{"r":0.9372549019607843,"g":0.6039215686274509,"b":0.6039215686274509,"a":1},"info-text-80":{"r":0.5137254901960784,"g":0.7411764705882353,"b":0.9882352941176471,"a":1},"border-alpha-55":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.55},"border-alpha-60":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.6},"border-alpha-65":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.65},"border-alpha-85":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.85},"border-surface-35":{"r":0.14901960784313725,"g":0.14901960784313725,"b":0.16862745098039217,"a":1},"border-surface-65":{"r":0.1803921568627451,"g":0.1803921568627451,"b":0.20392156862745098,"a":1},"border-surface-70":{"r":0.18823529411764706,"g":0.18823529411764706,"b":0.21176470588235294,"a":1},"border-text-muted-65":{"r":0.3686274509803922,"g":0.3686274509803922,"b":0.4,"a":1},"danger-alpha-10":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.1},"danger-alpha-11":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.11},"danger-alpha-12":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.12},"danger-alpha-15":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.15},"danger-alpha-18":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.18},"danger-alpha-22":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.22},"danger-alpha-25":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.25},"danger-alpha-42":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.42},"danger-alpha-7":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.07},"danger-alpha-8":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.08},"danger-alpha-9":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.09},"danger-border-12":{"r":0.3058823529411765,"g":0.2549019607843137,"b":0.2784313725490196,"a":1},"danger-border-30":{"r":0.43529411764705883,"g":0.30980392156862746,"b":0.32941176470588235,"a":1},"danger-surface-4":{"r":0.1411764705882353,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"danger-surface-5":{"r":0.15294117647058825,"g":0.12941176470588237,"b":0.1450980392156863,"a":1},"danger-surface-6":{"r":0.1607843137254902,"g":0.13333333333333333,"b":0.14901960784313725,"a":1},"danger-surface-8":{"r":0.17647058823529413,"g":0.1411764705882353,"b":0.1568627450980392,"a":1},"danger-surface-9":{"r":0.1843137254901961,"g":0.1450980392156863,"b":0.1607843137254902,"a":1},"danger-white-97-5":{"r":0.9372549019607843,"g":0.5333333333333333,"b":0.5333333333333333,"a":1},"info-alpha-10":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.1},"info-alpha-15":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.15},"info-alpha-22":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.22},"info-alpha-8":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.08},"info-alpha-9":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.09},"info-border-12":{"r":0.24313725490196078,"g":0.2784313725490196,"b":0.33725490196078434,"a":1},"info-surface-5":{"r":0.12549019607843137,"g":0.13725490196078433,"b":0.16862745098039217,"a":1},"info-surface-8":{"r":0.13333333333333333,"g":0.1568627450980392,"b":0.19607843137254902,"a":1},"info-surface-9":{"r":0.13725490196078433,"g":0.1607843137254902,"b":0.20392156862745098,"a":1},"primary-alpha-10":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.1},"primary-alpha-11":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.11},"primary-alpha-12":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.12},"primary-alpha-15":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.15},"primary-alpha-16":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.16},"primary-alpha-18":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.18},"primary-alpha-20":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.2},"primary-alpha-22":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.22},"primary-alpha-25":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.25},"primary-alpha-35":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.35},"primary-alpha-4":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.04},"primary-alpha-42":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.42},"primary-alpha-45":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.45},"primary-alpha-55":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.55},"primary-alpha-8":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.08},"primary-alpha-9":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.09},"primary-border-12":{"r":0.2549019607843137,"g":0.2901960784313726,"b":0.2901960784313726,"a":1},"primary-border-24":{"r":0.2901960784313726,"g":0.3607843137254902,"b":0.33725490196078434,"a":1},"primary-border-30":{"r":0.30980392156862746,"g":0.396078431372549,"b":0.3607843137254902,"a":1},"primary-border-35":{"r":0.3215686274509804,"g":0.42745098039215684,"b":0.3764705882352941,"a":1},"primary-surface-10":{"r":0.14901960784313725,"g":0.1803921568627451,"b":0.17647058823529413,"a":1},"primary-surface-14":{"r":0.16470588235294117,"g":0.20784313725490197,"b":0.19607843137254902,"a":1},"primary-surface-28":{"r":0.2235294117647059,"g":0.3058823529411765,"b":0.2627450980392157,"a":1},"primary-surface-3":{"r":0.12156862745098039,"g":0.12941176470588237,"b":0.1411764705882353,"a":1},"primary-surface-5":{"r":0.12941176470588237,"g":0.1450980392156863,"b":0.14901960784313725,"a":1},"primary-surface-6":{"r":0.13333333333333333,"g":0.15294117647058825,"b":0.1568627450980392,"a":1},"primary-surface-7":{"r":0.13725490196078433,"g":0.1607843137254902,"b":0.1607843137254902,"a":1},"primary-surface-8":{"r":0.1411764705882353,"g":0.16470588235294117,"b":0.16470588235294117,"a":1},"primary-surface-9":{"r":0.1450980392156863,"g":0.17254901960784313,"b":0.16862745098039217,"a":1},"primary-text-55":{"r":0.7019607843137254,"g":0.8666666666666667,"b":0.7647058823529411,"a":1},"primary-text-85":{"r":0.5764705882352941,"g":0.8313725490196079,"b":0.6666666666666666,"a":1},"primary-white-97-5":{"r":0.5254901960784314,"g":0.8156862745098039,"b":0.6274509803921569,"a":1},"success-alpha-10":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.1},"success-alpha-15":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.15},"success-alpha-22":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.22},"success-alpha-8":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.08},"success-alpha-9":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.09},"success-border-12":{"r":0.2549019607843137,"g":0.2901960784313726,"b":0.2901960784313726,"a":1},"success-surface-5":{"r":0.12941176470588237,"g":0.1450980392156863,"b":0.14901960784313725,"a":1},"success-surface-8":{"r":0.1411764705882353,"g":0.16470588235294117,"b":0.16470588235294117,"a":1},"success-surface-9":{"r":0.1450980392156863,"g":0.17254901960784313,"b":0.16862745098039217,"a":1},"surface-alpha-55":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":0.55},"surface-alpha-90":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":0.9},"surface-muted-alpha-45":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":0.45},"surface-muted-alpha-50":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":0.5},"surface-muted-border-65":{"r":0.17254901960784313,"g":0.17254901960784313,"b":0.19607843137254902,"a":1},"surface-muted-border-75":{"r":0.16470588235294117,"g":0.16470588235294117,"b":0.18823529411764706,"a":1},"surface-text-98":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"text-alpha-10":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.1},"text-alpha-15":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.15},"text-alpha-16":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.16},"text-alpha-18":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.18},"text-alpha-8":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.08},"text-alpha-9":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.09},"text-border-12":{"r":0.3058823529411765,"g":0.3058823529411765,"b":0.32941176470588235,"a":1},"text-muted-alpha-10":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":0.1},"text-muted-alpha-22":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":0.22},"text-muted-surface-8":{"r":0.15294117647058825,"g":0.15294117647058825,"b":0.16862745098039217,"a":1},"text-muted-surface-9":{"r":0.1568627450980392,"g":0.1568627450980392,"b":0.17647058823529413,"a":1},"text-muted-surface-92":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":1},"text-subtle-alpha-9":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":0.09},"text-subtle-surface-muted-38":{"r":0.3176470588235294,"g":0.3176470588235294,"b":0.34901960784313724,"a":1},"text-surface-5":{"r":0.14901960784313725,"g":0.14901960784313725,"b":0.16470588235294117,"a":1},"warning-alpha-10":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.1},"warning-alpha-12":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.12},"warning-alpha-15":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.15},"warning-alpha-16":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.16},"warning-alpha-22":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.22},"warning-alpha-8":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.08},"warning-alpha-9":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.09},"warning-border-12":{"r":0.3137254901960784,"g":0.28627450980392155,"b":0.24705882352941178,"a":1},"warning-border-30":{"r":0.4549019607843137,"g":0.3843137254901961,"b":0.24313725490196078,"a":1},"warning-surface-11":{"r":0.20784313725490197,"g":0.1843137254901961,"b":0.13725490196078433,"a":1},"warning-surface-5":{"r":0.15294117647058825,"g":0.1411764705882353,"b":0.12941176470588237,"a":1},"warning-surface-8":{"r":0.1803921568627451,"g":0.16470588235294117,"b":0.13333333333333333,"a":1},"warning-surface-9":{"r":0.18823529411764706,"g":0.16862745098039217,"b":0.13725490196078433,"a":1},"text-subtle":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":1},"surface-raised":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"border-hover":{"r":0.3686274509803922,"g":0.3686274509803922,"b":0.4,"a":1},"on-warning":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"primary-hover":{"r":0.5607843137254902,"g":0.8313725490196079,"b":0.6588235294117647,"a":1},"primary-active":{"r":0.43529411764705883,"g":0.6901960784313725,"b":0.5254901960784314,"a":1},"danger-hover":{"r":0.9450980392156862,"g":0.5686274509803921,"b":0.5686274509803921,"a":1},"danger-active":{"r":0.796078431372549,"g":0.44313725490196076,"b":0.44313725490196076,"a":1}}};
-const leafDensity = {"comfortable":{"control-height":40,"spacing":8,"density-form-gap":24,"density-label-gap":6,"density-row-padding":12,"density-option-height":36,"density-option-padding":6,"density-field-padding":10,"density-dialog-block":20,"density-dialog-inline":24,"density-dialog-gap":16},"compact":{"control-height":34,"spacing":6,"density-form-gap":16,"density-label-gap":4,"density-row-padding":8,"density-option-height":30,"density-option-padding":4,"density-field-padding":8,"density-dialog-block":16,"density-dialog-inline":20,"density-dialog-gap":12}};
+const leafPalettes = {"light":{"primary":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":1},"on-primary":{"r":1,"g":1,"b":1,"a":1},"danger":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":1},"on-danger":{"r":1,"g":1,"b":1,"a":1},"warning":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":1},"info":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":1},"success":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":1},"text":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"text-muted":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":1},"surface":{"r":1,"g":1,"b":1,"a":1},"surface-muted":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":1},"border":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":1},"option-hover":{"r":0.9215686274509803,"g":0.9215686274509803,"b":0.9215686274509803,"a":1},"primary-text-80":{"r":0.12549019607843137,"g":0.43529411764705883,"b":0.25882352941176473,"a":1},"success-text-80":{"r":0.12549019607843137,"g":0.43529411764705883,"b":0.25882352941176473,"a":1},"warning-text-80":{"r":0.5529411764705883,"g":0.403921568627451,"b":0.10980392156862745,"a":1},"danger-text-80":{"r":0.6509803921568628,"g":0.21176470588235294,"b":0.21568627450980393,"a":1},"info-text-80":{"r":0.09411764705882353,"g":0.4,"b":0.8274509803921568,"a":1},"border-alpha-55":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.55},"border-alpha-60":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.6},"border-alpha-65":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.65},"border-alpha-85":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.85},"border-surface-35":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":1},"border-surface-65":{"r":0.9333333333333333,"g":0.9333333333333333,"b":0.9411764705882353,"a":1},"border-surface-70":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9372549019607843,"a":1},"border-text-muted-65":{"r":0.7254901960784313,"g":0.7254901960784313,"b":0.7450980392156863,"a":1},"danger-alpha-10":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.1},"danger-alpha-11":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.11},"danger-alpha-12":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.12},"danger-alpha-15":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.15},"danger-alpha-18":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.18},"danger-alpha-22":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.22},"danger-alpha-25":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.25},"danger-alpha-42":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.42},"danger-alpha-7":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.07},"danger-alpha-8":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.08},"danger-alpha-9":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.09},"danger-border-12":{"r":0.8862745098039215,"g":0.8196078431372549,"b":0.8274509803921568,"a":1},"danger-border-30":{"r":0.8627450980392157,"g":0.6980392156862745,"b":0.7058823529411765,"a":1},"danger-surface-4":{"r":0.9921568627450981,"g":0.9686274509803922,"b":0.9686274509803922,"a":1},"danger-surface-5":{"r":0.9882352941176471,"g":0.9607843137254902,"b":0.9607843137254902,"a":1},"danger-surface-6":{"r":0.9882352941176471,"g":0.9529411764705882,"b":0.9529411764705882,"a":1},"danger-surface-8":{"r":0.984313725490196,"g":0.9372549019607843,"b":0.9372549019607843,"a":1},"danger-surface-9":{"r":0.9803921568627451,"g":0.9294117647058824,"b":0.9294117647058824,"a":1},"danger-white-97-5":{"r":0.788235294117647,"g":0.2549019607843137,"b":0.2549019607843137,"a":1},"info-alpha-10":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.1},"info-alpha-15":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.15},"info-alpha-22":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.22},"info-alpha-8":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.08},"info-alpha-9":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.09},"info-border-12":{"r":0.8,"g":0.8470588235294118,"b":0.9215686274509803,"a":1},"info-surface-5":{"r":0.9529411764705882,"g":0.9725490196078431,"b":1,"a":1},"info-surface-8":{"r":0.9254901960784314,"g":0.9568627450980393,"b":1,"a":1},"info-surface-9":{"r":0.9176470588235294,"g":0.9529411764705882,"b":1,"a":1},"primary-alpha-10":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.1},"primary-alpha-11":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.11},"primary-alpha-12":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.12},"primary-alpha-15":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.15},"primary-alpha-16":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.16},"primary-alpha-18":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.18},"primary-alpha-20":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.2},"primary-alpha-22":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.22},"primary-alpha-25":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.25},"primary-alpha-35":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.35},"primary-alpha-4":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.04},"primary-alpha-42":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.42},"primary-alpha-45":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.45},"primary-alpha-55":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.55},"primary-alpha-8":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.08},"primary-alpha-9":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.09},"primary-border-12":{"r":0.803921568627451,"g":0.8509803921568627,"b":0.8352941176470589,"a":1},"primary-border-24":{"r":0.7137254901960784,"g":0.803921568627451,"b":0.7607843137254902,"a":1},"primary-border-30":{"r":0.6666666666666666,"g":0.7843137254901961,"b":0.7254901960784313,"a":1},"primary-border-35":{"r":0.6274509803921569,"g":0.7647058823529411,"b":0.6941176470588235,"a":1},"primary-surface-10":{"r":0.9137254901960784,"g":0.9529411764705882,"b":0.9294117647058824,"a":1},"primary-surface-14":{"r":0.8784313725490196,"g":0.9333333333333333,"b":0.9019607843137255,"a":1},"primary-surface-28":{"r":0.7568627450980392,"g":0.8627450980392157,"b":0.8,"a":1},"primary-surface-3":{"r":0.9725490196078431,"g":0.984313725490196,"b":0.9803921568627451,"a":1},"primary-surface-5":{"r":0.9568627450980393,"g":0.9764705882352941,"b":0.9647058823529412,"a":1},"primary-surface-6":{"r":0.9490196078431372,"g":0.9725490196078431,"b":0.9568627450980393,"a":1},"primary-surface-7":{"r":0.9372549019607843,"g":0.9647058823529412,"b":0.9490196078431372,"a":1},"primary-surface-8":{"r":0.9294117647058824,"g":0.9607843137254902,"b":0.9450980392156862,"a":1},"primary-surface-9":{"r":0.9215686274509803,"g":0.9568627450980393,"b":0.9372549019607843,"a":1},"primary-text-55":{"r":0.12549019607843137,"g":0.33725490196078434,"b":0.2235294117647059,"a":1},"primary-text-85":{"r":0.12549019607843137,"g":0.4549019607843137,"b":0.26666666666666666,"a":1},"primary-white-97-5":{"r":0.14901960784313725,"g":0.5254901960784314,"b":0.30980392156862746,"a":1},"success-alpha-10":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.1},"success-alpha-15":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.15},"success-alpha-22":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.22},"success-alpha-8":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.08},"success-alpha-9":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.09},"success-border-12":{"r":0.803921568627451,"g":0.8509803921568627,"b":0.8352941176470589,"a":1},"success-surface-5":{"r":0.9568627450980393,"g":0.9764705882352941,"b":0.9647058823529412,"a":1},"success-surface-8":{"r":0.9294117647058824,"g":0.9607843137254902,"b":0.9450980392156862,"a":1},"success-surface-9":{"r":0.9215686274509803,"g":0.9568627450980393,"b":0.9372549019607843,"a":1},"surface-alpha-55":{"r":1,"g":1,"b":1,"a":0.55},"surface-alpha-90":{"r":1,"g":1,"b":1,"a":0.9},"surface-muted-alpha-45":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":0.45},"surface-muted-alpha-50":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":0.5},"surface-muted-border-65":{"r":0.9411764705882353,"g":0.9411764705882353,"b":0.9490196078431372,"a":1},"surface-muted-border-75":{"r":0.9490196078431372,"g":0.9490196078431372,"b":0.9529411764705882,"a":1},"surface-text-98":{"r":0.984313725490196,"g":0.984313725490196,"b":0.984313725490196,"a":1},"text-alpha-10":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.1},"text-alpha-15":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.15},"text-alpha-16":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.16},"text-alpha-18":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.18},"text-alpha-8":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.08},"text-alpha-9":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.09},"text-border-12":{"r":0.803921568627451,"g":0.803921568627451,"b":0.8156862745098039,"a":1},"text-muted-alpha-10":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":0.1},"text-muted-alpha-22":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":0.22},"text-muted-surface-8":{"r":0.9529411764705882,"g":0.9529411764705882,"b":0.9529411764705882,"a":1},"text-muted-surface-9":{"r":0.9450980392156862,"g":0.9450980392156862,"b":0.9490196078431372,"a":1},"text-muted-surface-92":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":1},"text-subtle-alpha-9":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":0.09},"text-subtle-surface-muted-38":{"r":0.7725490196078432,"g":0.7725490196078432,"b":0.7843137254901961,"a":1},"text-surface-5":{"r":0.9568627450980393,"g":0.9568627450980393,"b":0.9568627450980393,"a":1},"warning-alpha-10":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.1},"warning-alpha-12":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.12},"warning-alpha-15":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.15},"warning-alpha-16":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.16},"warning-alpha-22":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.22},"warning-alpha-8":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.08},"warning-alpha-9":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.09},"warning-border-12":{"r":0.9098039215686274,"g":0.8705882352941177,"b":0.8117647058823529,"a":1},"warning-border-30":{"r":0.9215686274509803,"g":0.8313725490196079,"b":0.6588235294117647,"a":1},"warning-surface-11":{"r":0.996078431372549,"g":0.9647058823529412,"b":0.8980392156862745,"a":1},"warning-surface-5":{"r":1,"g":0.984313725490196,"b":0.9529411764705882,"a":1},"warning-surface-8":{"r":1,"g":0.9725490196078431,"b":0.9254901960784314,"a":1},"warning-surface-9":{"r":1,"g":0.9725490196078431,"b":0.9176470588235294,"a":1},"text-subtle":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":1},"surface-raised":{"r":0.984313725490196,"g":0.984313725490196,"b":0.984313725490196,"a":1},"border-hover":{"r":0.7254901960784313,"g":0.7254901960784313,"b":0.7450980392156863,"a":1},"on-warning":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"primary-hover":{"r":0.14901960784313725,"g":0.5254901960784314,"b":0.30980392156862746,"a":1},"primary-active":{"r":0.10588235294117647,"g":0.43529411764705883,"b":0.24705882352941178,"a":1},"danger-hover":{"r":0.796078431372549,"g":0.2823529411764706,"b":0.2823529411764706,"a":1},"danger-active":{"r":0.6666666666666666,"g":0.2,"b":0.2,"a":1}},"dark":{"primary":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":1},"on-primary":{"r":0.06666666666666667,"g":0.15294117647058825,"b":0.10196078431372549,"a":1},"danger":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":1},"on-danger":{"r":0.2196078431372549,"g":0.09411764705882353,"b":0.09411764705882353,"a":1},"warning":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":1},"info":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":1},"success":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":1},"text":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":1},"text-muted":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":1},"surface":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":1},"surface-muted":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":1},"border":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":1},"option-hover":{"r":0.1843137254901961,"g":0.1843137254901961,"b":0.2,"a":1},"primary-text-80":{"r":0.596078431372549,"g":0.8352941176470589,"b":0.6823529411764706,"a":1},"success-text-80":{"r":0.596078431372549,"g":0.8352941176470589,"b":0.6823529411764706,"a":1},"warning-text-80":{"r":0.984313725490196,"g":0.803921568627451,"b":0.3803921568627451,"a":1},"danger-text-80":{"r":0.9372549019607843,"g":0.6039215686274509,"b":0.6039215686274509,"a":1},"info-text-80":{"r":0.5137254901960784,"g":0.7411764705882353,"b":0.9882352941176471,"a":1},"border-alpha-55":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.55},"border-alpha-60":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.6},"border-alpha-65":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.65},"border-alpha-85":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.85},"border-surface-35":{"r":0.14901960784313725,"g":0.14901960784313725,"b":0.16862745098039217,"a":1},"border-surface-65":{"r":0.1803921568627451,"g":0.1803921568627451,"b":0.20392156862745098,"a":1},"border-surface-70":{"r":0.18823529411764706,"g":0.18823529411764706,"b":0.21176470588235294,"a":1},"border-text-muted-65":{"r":0.3686274509803922,"g":0.3686274509803922,"b":0.4,"a":1},"danger-alpha-10":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.1},"danger-alpha-11":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.11},"danger-alpha-12":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.12},"danger-alpha-15":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.15},"danger-alpha-18":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.18},"danger-alpha-22":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.22},"danger-alpha-25":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.25},"danger-alpha-42":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.42},"danger-alpha-7":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.07},"danger-alpha-8":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.08},"danger-alpha-9":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.09},"danger-border-12":{"r":0.3058823529411765,"g":0.2549019607843137,"b":0.2784313725490196,"a":1},"danger-border-30":{"r":0.43529411764705883,"g":0.30980392156862746,"b":0.32941176470588235,"a":1},"danger-surface-4":{"r":0.1411764705882353,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"danger-surface-5":{"r":0.15294117647058825,"g":0.12941176470588237,"b":0.1450980392156863,"a":1},"danger-surface-6":{"r":0.1607843137254902,"g":0.13333333333333333,"b":0.14901960784313725,"a":1},"danger-surface-8":{"r":0.17647058823529413,"g":0.1411764705882353,"b":0.1568627450980392,"a":1},"danger-surface-9":{"r":0.1843137254901961,"g":0.1450980392156863,"b":0.1607843137254902,"a":1},"danger-white-97-5":{"r":0.9372549019607843,"g":0.5333333333333333,"b":0.5333333333333333,"a":1},"info-alpha-10":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.1},"info-alpha-15":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.15},"info-alpha-22":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.22},"info-alpha-8":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.08},"info-alpha-9":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.09},"info-border-12":{"r":0.24313725490196078,"g":0.2784313725490196,"b":0.33725490196078434,"a":1},"info-surface-5":{"r":0.12549019607843137,"g":0.13725490196078433,"b":0.16862745098039217,"a":1},"info-surface-8":{"r":0.13333333333333333,"g":0.1568627450980392,"b":0.19607843137254902,"a":1},"info-surface-9":{"r":0.13725490196078433,"g":0.1607843137254902,"b":0.20392156862745098,"a":1},"primary-alpha-10":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.1},"primary-alpha-11":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.11},"primary-alpha-12":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.12},"primary-alpha-15":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.15},"primary-alpha-16":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.16},"primary-alpha-18":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.18},"primary-alpha-20":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.2},"primary-alpha-22":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.22},"primary-alpha-25":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.25},"primary-alpha-35":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.35},"primary-alpha-4":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.04},"primary-alpha-42":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.42},"primary-alpha-45":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.45},"primary-alpha-55":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.55},"primary-alpha-8":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.08},"primary-alpha-9":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.09},"primary-border-12":{"r":0.2549019607843137,"g":0.2901960784313726,"b":0.2901960784313726,"a":1},"primary-border-24":{"r":0.2901960784313726,"g":0.3607843137254902,"b":0.33725490196078434,"a":1},"primary-border-30":{"r":0.30980392156862746,"g":0.396078431372549,"b":0.3607843137254902,"a":1},"primary-border-35":{"r":0.3215686274509804,"g":0.42745098039215684,"b":0.3764705882352941,"a":1},"primary-surface-10":{"r":0.14901960784313725,"g":0.1803921568627451,"b":0.17647058823529413,"a":1},"primary-surface-14":{"r":0.16470588235294117,"g":0.20784313725490197,"b":0.19607843137254902,"a":1},"primary-surface-28":{"r":0.2235294117647059,"g":0.3058823529411765,"b":0.2627450980392157,"a":1},"primary-surface-3":{"r":0.12156862745098039,"g":0.12941176470588237,"b":0.1411764705882353,"a":1},"primary-surface-5":{"r":0.12941176470588237,"g":0.1450980392156863,"b":0.14901960784313725,"a":1},"primary-surface-6":{"r":0.13333333333333333,"g":0.15294117647058825,"b":0.1568627450980392,"a":1},"primary-surface-7":{"r":0.13725490196078433,"g":0.1607843137254902,"b":0.1607843137254902,"a":1},"primary-surface-8":{"r":0.1411764705882353,"g":0.16470588235294117,"b":0.16470588235294117,"a":1},"primary-surface-9":{"r":0.1450980392156863,"g":0.17254901960784313,"b":0.16862745098039217,"a":1},"primary-text-55":{"r":0.7019607843137254,"g":0.8666666666666667,"b":0.7647058823529411,"a":1},"primary-text-85":{"r":0.5764705882352941,"g":0.8313725490196079,"b":0.6666666666666666,"a":1},"primary-white-97-5":{"r":0.5254901960784314,"g":0.8156862745098039,"b":0.6274509803921569,"a":1},"success-alpha-10":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.1},"success-alpha-15":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.15},"success-alpha-22":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.22},"success-alpha-8":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.08},"success-alpha-9":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.09},"success-border-12":{"r":0.2549019607843137,"g":0.2901960784313726,"b":0.2901960784313726,"a":1},"success-surface-5":{"r":0.12941176470588237,"g":0.1450980392156863,"b":0.14901960784313725,"a":1},"success-surface-8":{"r":0.1411764705882353,"g":0.16470588235294117,"b":0.16470588235294117,"a":1},"success-surface-9":{"r":0.1450980392156863,"g":0.17254901960784313,"b":0.16862745098039217,"a":1},"surface-alpha-55":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":0.55},"surface-alpha-90":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":0.9},"surface-muted-alpha-45":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":0.45},"surface-muted-alpha-50":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":0.5},"surface-muted-border-65":{"r":0.17254901960784313,"g":0.17254901960784313,"b":0.19607843137254902,"a":1},"surface-muted-border-75":{"r":0.16470588235294117,"g":0.16470588235294117,"b":0.18823529411764706,"a":1},"surface-text-98":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"text-alpha-10":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.1},"text-alpha-15":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.15},"text-alpha-16":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.16},"text-alpha-18":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.18},"text-alpha-8":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.08},"text-alpha-9":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.09},"text-border-12":{"r":0.3058823529411765,"g":0.3058823529411765,"b":0.32941176470588235,"a":1},"text-muted-alpha-10":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":0.1},"text-muted-alpha-22":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":0.22},"text-muted-surface-8":{"r":0.15294117647058825,"g":0.15294117647058825,"b":0.16862745098039217,"a":1},"text-muted-surface-9":{"r":0.1568627450980392,"g":0.1568627450980392,"b":0.17647058823529413,"a":1},"text-muted-surface-92":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":1},"text-subtle-alpha-9":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":0.09},"text-subtle-surface-muted-38":{"r":0.3176470588235294,"g":0.3176470588235294,"b":0.34901960784313724,"a":1},"text-surface-5":{"r":0.14901960784313725,"g":0.14901960784313725,"b":0.16470588235294117,"a":1},"warning-alpha-10":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.1},"warning-alpha-12":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.12},"warning-alpha-15":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.15},"warning-alpha-16":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.16},"warning-alpha-22":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.22},"warning-alpha-8":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.08},"warning-alpha-9":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.09},"warning-border-12":{"r":0.3137254901960784,"g":0.28627450980392155,"b":0.24705882352941178,"a":1},"warning-border-30":{"r":0.4549019607843137,"g":0.3843137254901961,"b":0.24313725490196078,"a":1},"warning-surface-11":{"r":0.20784313725490197,"g":0.1843137254901961,"b":0.13725490196078433,"a":1},"warning-surface-5":{"r":0.15294117647058825,"g":0.1411764705882353,"b":0.12941176470588237,"a":1},"warning-surface-8":{"r":0.1803921568627451,"g":0.16470588235294117,"b":0.13333333333333333,"a":1},"warning-surface-9":{"r":0.18823529411764706,"g":0.16862745098039217,"b":0.13725490196078433,"a":1},"text-subtle":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":1},"surface-raised":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"border-hover":{"r":0.3686274509803922,"g":0.3686274509803922,"b":0.4,"a":1},"on-warning":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"primary-hover":{"r":0.5607843137254902,"g":0.8313725490196079,"b":0.6588235294117647,"a":1},"primary-active":{"r":0.43529411764705883,"g":0.6901960784313725,"b":0.5254901960784314,"a":1},"danger-hover":{"r":0.9450980392156862,"g":0.5686274509803921,"b":0.5686274509803921,"a":1},"danger-active":{"r":0.796078431372549,"g":0.44313725490196076,"b":0.44313725490196076,"a":1}}};
+const leafDensity = {"comfortable":{"control-height":36,"spacing":8,"density-form-gap":24,"density-label-gap":6,"density-row-padding":12,"density-option-height":32,"density-option-padding":6,"density-field-padding":10,"density-dialog-block":20,"density-dialog-inline":24,"density-dialog-gap":16},"compact":{"control-height":30,"spacing":6,"density-form-gap":16,"density-label-gap":4,"density-row-padding":8,"density-option-height":26,"density-option-padding":4,"density-field-padding":8,"density-dialog-block":16,"density-dialog-inline":20,"density-dialog-gap":12}};
 
 /* global figma, leafPalettes, leafDensity */
 async function importLeafResources() {
diff --git a/design/figma/tokens.js b/design/figma/tokens.js
index 9d7bf9b..9999961 100644
--- a/design/figma/tokens.js
+++ b/design/figma/tokens.js
@@ -1,3 +1,3 @@
 // Generated from the runtime theme sources; no network access.
-const leafPalettes = {"light":{"primary":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":1},"on-primary":{"r":1,"g":1,"b":1,"a":1},"danger":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":1},"on-danger":{"r":1,"g":1,"b":1,"a":1},"warning":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":1},"info":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":1},"success":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":1},"text":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"text-muted":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":1},"surface":{"r":1,"g":1,"b":1,"a":1},"surface-muted":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":1},"border":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":1},"primary-text-80":{"r":0.12549019607843137,"g":0.43529411764705883,"b":0.25882352941176473,"a":1},"success-text-80":{"r":0.12549019607843137,"g":0.43529411764705883,"b":0.25882352941176473,"a":1},"warning-text-80":{"r":0.5529411764705883,"g":0.403921568627451,"b":0.10980392156862745,"a":1},"danger-text-80":{"r":0.6509803921568628,"g":0.21176470588235294,"b":0.21568627450980393,"a":1},"info-text-80":{"r":0.09411764705882353,"g":0.4,"b":0.8274509803921568,"a":1},"border-alpha-55":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.55},"border-alpha-60":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.6},"border-alpha-65":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.65},"border-alpha-85":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.85},"border-surface-35":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":1},"border-surface-65":{"r":0.9333333333333333,"g":0.9333333333333333,"b":0.9411764705882353,"a":1},"border-surface-70":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9372549019607843,"a":1},"border-text-muted-65":{"r":0.7254901960784313,"g":0.7254901960784313,"b":0.7450980392156863,"a":1},"danger-alpha-10":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.1},"danger-alpha-11":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.11},"danger-alpha-12":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.12},"danger-alpha-15":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.15},"danger-alpha-18":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.18},"danger-alpha-22":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.22},"danger-alpha-25":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.25},"danger-alpha-42":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.42},"danger-alpha-7":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.07},"danger-alpha-8":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.08},"danger-alpha-9":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.09},"danger-border-12":{"r":0.8862745098039215,"g":0.8196078431372549,"b":0.8274509803921568,"a":1},"danger-border-30":{"r":0.8627450980392157,"g":0.6980392156862745,"b":0.7058823529411765,"a":1},"danger-surface-4":{"r":0.9921568627450981,"g":0.9686274509803922,"b":0.9686274509803922,"a":1},"danger-surface-5":{"r":0.9882352941176471,"g":0.9607843137254902,"b":0.9607843137254902,"a":1},"danger-surface-6":{"r":0.9882352941176471,"g":0.9529411764705882,"b":0.9529411764705882,"a":1},"danger-surface-8":{"r":0.984313725490196,"g":0.9372549019607843,"b":0.9372549019607843,"a":1},"danger-surface-9":{"r":0.9803921568627451,"g":0.9294117647058824,"b":0.9294117647058824,"a":1},"danger-white-97-5":{"r":0.788235294117647,"g":0.2549019607843137,"b":0.2549019607843137,"a":1},"info-alpha-10":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.1},"info-alpha-15":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.15},"info-alpha-22":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.22},"info-alpha-8":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.08},"info-alpha-9":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.09},"info-border-12":{"r":0.8,"g":0.8470588235294118,"b":0.9215686274509803,"a":1},"info-surface-5":{"r":0.9529411764705882,"g":0.9725490196078431,"b":1,"a":1},"info-surface-8":{"r":0.9254901960784314,"g":0.9568627450980393,"b":1,"a":1},"info-surface-9":{"r":0.9176470588235294,"g":0.9529411764705882,"b":1,"a":1},"primary-alpha-10":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.1},"primary-alpha-11":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.11},"primary-alpha-12":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.12},"primary-alpha-15":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.15},"primary-alpha-16":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.16},"primary-alpha-18":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.18},"primary-alpha-20":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.2},"primary-alpha-22":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.22},"primary-alpha-25":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.25},"primary-alpha-35":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.35},"primary-alpha-4":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.04},"primary-alpha-42":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.42},"primary-alpha-45":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.45},"primary-alpha-55":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.55},"primary-alpha-8":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.08},"primary-alpha-9":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.09},"primary-border-12":{"r":0.803921568627451,"g":0.8509803921568627,"b":0.8352941176470589,"a":1},"primary-border-24":{"r":0.7137254901960784,"g":0.803921568627451,"b":0.7607843137254902,"a":1},"primary-border-30":{"r":0.6666666666666666,"g":0.7843137254901961,"b":0.7254901960784313,"a":1},"primary-border-35":{"r":0.6274509803921569,"g":0.7647058823529411,"b":0.6941176470588235,"a":1},"primary-surface-10":{"r":0.9137254901960784,"g":0.9529411764705882,"b":0.9294117647058824,"a":1},"primary-surface-14":{"r":0.8784313725490196,"g":0.9333333333333333,"b":0.9019607843137255,"a":1},"primary-surface-28":{"r":0.7568627450980392,"g":0.8627450980392157,"b":0.8,"a":1},"primary-surface-3":{"r":0.9725490196078431,"g":0.984313725490196,"b":0.9803921568627451,"a":1},"primary-surface-5":{"r":0.9568627450980393,"g":0.9764705882352941,"b":0.9647058823529412,"a":1},"primary-surface-6":{"r":0.9490196078431372,"g":0.9725490196078431,"b":0.9568627450980393,"a":1},"primary-surface-7":{"r":0.9372549019607843,"g":0.9647058823529412,"b":0.9490196078431372,"a":1},"primary-surface-8":{"r":0.9294117647058824,"g":0.9607843137254902,"b":0.9450980392156862,"a":1},"primary-surface-9":{"r":0.9215686274509803,"g":0.9568627450980393,"b":0.9372549019607843,"a":1},"primary-text-55":{"r":0.12549019607843137,"g":0.33725490196078434,"b":0.2235294117647059,"a":1},"primary-text-85":{"r":0.12549019607843137,"g":0.4549019607843137,"b":0.26666666666666666,"a":1},"primary-white-97-5":{"r":0.14901960784313725,"g":0.5254901960784314,"b":0.30980392156862746,"a":1},"success-alpha-10":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.1},"success-alpha-15":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.15},"success-alpha-22":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.22},"success-alpha-8":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.08},"success-alpha-9":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.09},"success-border-12":{"r":0.803921568627451,"g":0.8509803921568627,"b":0.8352941176470589,"a":1},"success-surface-5":{"r":0.9568627450980393,"g":0.9764705882352941,"b":0.9647058823529412,"a":1},"success-surface-8":{"r":0.9294117647058824,"g":0.9607843137254902,"b":0.9450980392156862,"a":1},"success-surface-9":{"r":0.9215686274509803,"g":0.9568627450980393,"b":0.9372549019607843,"a":1},"surface-alpha-55":{"r":1,"g":1,"b":1,"a":0.55},"surface-alpha-90":{"r":1,"g":1,"b":1,"a":0.9},"surface-muted-alpha-45":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":0.45},"surface-muted-alpha-50":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":0.5},"surface-muted-border-65":{"r":0.9411764705882353,"g":0.9411764705882353,"b":0.9490196078431372,"a":1},"surface-muted-border-75":{"r":0.9490196078431372,"g":0.9490196078431372,"b":0.9529411764705882,"a":1},"surface-text-98":{"r":0.984313725490196,"g":0.984313725490196,"b":0.984313725490196,"a":1},"text-alpha-10":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.1},"text-alpha-15":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.15},"text-alpha-16":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.16},"text-alpha-18":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.18},"text-alpha-8":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.08},"text-alpha-9":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.09},"text-border-12":{"r":0.803921568627451,"g":0.803921568627451,"b":0.8156862745098039,"a":1},"text-muted-alpha-10":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":0.1},"text-muted-alpha-22":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":0.22},"text-muted-surface-8":{"r":0.9529411764705882,"g":0.9529411764705882,"b":0.9529411764705882,"a":1},"text-muted-surface-9":{"r":0.9450980392156862,"g":0.9450980392156862,"b":0.9490196078431372,"a":1},"text-muted-surface-92":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":1},"text-subtle-alpha-9":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":0.09},"text-subtle-surface-muted-38":{"r":0.7725490196078432,"g":0.7725490196078432,"b":0.7843137254901961,"a":1},"text-surface-5":{"r":0.9568627450980393,"g":0.9568627450980393,"b":0.9568627450980393,"a":1},"warning-alpha-10":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.1},"warning-alpha-12":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.12},"warning-alpha-15":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.15},"warning-alpha-16":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.16},"warning-alpha-22":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.22},"warning-alpha-8":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.08},"warning-alpha-9":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.09},"warning-border-12":{"r":0.9098039215686274,"g":0.8705882352941177,"b":0.8117647058823529,"a":1},"warning-border-30":{"r":0.9215686274509803,"g":0.8313725490196079,"b":0.6588235294117647,"a":1},"warning-surface-11":{"r":0.996078431372549,"g":0.9647058823529412,"b":0.8980392156862745,"a":1},"warning-surface-5":{"r":1,"g":0.984313725490196,"b":0.9529411764705882,"a":1},"warning-surface-8":{"r":1,"g":0.9725490196078431,"b":0.9254901960784314,"a":1},"warning-surface-9":{"r":1,"g":0.9725490196078431,"b":0.9176470588235294,"a":1},"text-subtle":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":1},"surface-raised":{"r":0.984313725490196,"g":0.984313725490196,"b":0.984313725490196,"a":1},"border-hover":{"r":0.7254901960784313,"g":0.7254901960784313,"b":0.7450980392156863,"a":1},"on-warning":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"primary-hover":{"r":0.14901960784313725,"g":0.5254901960784314,"b":0.30980392156862746,"a":1},"primary-active":{"r":0.10588235294117647,"g":0.43529411764705883,"b":0.24705882352941178,"a":1},"danger-hover":{"r":0.796078431372549,"g":0.2823529411764706,"b":0.2823529411764706,"a":1},"danger-active":{"r":0.6666666666666666,"g":0.2,"b":0.2,"a":1}},"dark":{"primary":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":1},"on-primary":{"r":0.06666666666666667,"g":0.15294117647058825,"b":0.10196078431372549,"a":1},"danger":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":1},"on-danger":{"r":0.2196078431372549,"g":0.09411764705882353,"b":0.09411764705882353,"a":1},"warning":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":1},"info":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":1},"success":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":1},"text":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":1},"text-muted":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":1},"surface":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":1},"surface-muted":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":1},"border":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":1},"primary-text-80":{"r":0.596078431372549,"g":0.8352941176470589,"b":0.6823529411764706,"a":1},"success-text-80":{"r":0.596078431372549,"g":0.8352941176470589,"b":0.6823529411764706,"a":1},"warning-text-80":{"r":0.984313725490196,"g":0.803921568627451,"b":0.3803921568627451,"a":1},"danger-text-80":{"r":0.9372549019607843,"g":0.6039215686274509,"b":0.6039215686274509,"a":1},"info-text-80":{"r":0.5137254901960784,"g":0.7411764705882353,"b":0.9882352941176471,"a":1},"border-alpha-55":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.55},"border-alpha-60":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.6},"border-alpha-65":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.65},"border-alpha-85":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.85},"border-surface-35":{"r":0.14901960784313725,"g":0.14901960784313725,"b":0.16862745098039217,"a":1},"border-surface-65":{"r":0.1803921568627451,"g":0.1803921568627451,"b":0.20392156862745098,"a":1},"border-surface-70":{"r":0.18823529411764706,"g":0.18823529411764706,"b":0.21176470588235294,"a":1},"border-text-muted-65":{"r":0.3686274509803922,"g":0.3686274509803922,"b":0.4,"a":1},"danger-alpha-10":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.1},"danger-alpha-11":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.11},"danger-alpha-12":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.12},"danger-alpha-15":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.15},"danger-alpha-18":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.18},"danger-alpha-22":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.22},"danger-alpha-25":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.25},"danger-alpha-42":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.42},"danger-alpha-7":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.07},"danger-alpha-8":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.08},"danger-alpha-9":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.09},"danger-border-12":{"r":0.3058823529411765,"g":0.2549019607843137,"b":0.2784313725490196,"a":1},"danger-border-30":{"r":0.43529411764705883,"g":0.30980392156862746,"b":0.32941176470588235,"a":1},"danger-surface-4":{"r":0.1411764705882353,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"danger-surface-5":{"r":0.15294117647058825,"g":0.12941176470588237,"b":0.1450980392156863,"a":1},"danger-surface-6":{"r":0.1607843137254902,"g":0.13333333333333333,"b":0.14901960784313725,"a":1},"danger-surface-8":{"r":0.17647058823529413,"g":0.1411764705882353,"b":0.1568627450980392,"a":1},"danger-surface-9":{"r":0.1843137254901961,"g":0.1450980392156863,"b":0.1607843137254902,"a":1},"danger-white-97-5":{"r":0.9372549019607843,"g":0.5333333333333333,"b":0.5333333333333333,"a":1},"info-alpha-10":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.1},"info-alpha-15":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.15},"info-alpha-22":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.22},"info-alpha-8":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.08},"info-alpha-9":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.09},"info-border-12":{"r":0.24313725490196078,"g":0.2784313725490196,"b":0.33725490196078434,"a":1},"info-surface-5":{"r":0.12549019607843137,"g":0.13725490196078433,"b":0.16862745098039217,"a":1},"info-surface-8":{"r":0.13333333333333333,"g":0.1568627450980392,"b":0.19607843137254902,"a":1},"info-surface-9":{"r":0.13725490196078433,"g":0.1607843137254902,"b":0.20392156862745098,"a":1},"primary-alpha-10":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.1},"primary-alpha-11":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.11},"primary-alpha-12":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.12},"primary-alpha-15":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.15},"primary-alpha-16":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.16},"primary-alpha-18":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.18},"primary-alpha-20":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.2},"primary-alpha-22":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.22},"primary-alpha-25":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.25},"primary-alpha-35":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.35},"primary-alpha-4":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.04},"primary-alpha-42":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.42},"primary-alpha-45":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.45},"primary-alpha-55":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.55},"primary-alpha-8":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.08},"primary-alpha-9":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.09},"primary-border-12":{"r":0.2549019607843137,"g":0.2901960784313726,"b":0.2901960784313726,"a":1},"primary-border-24":{"r":0.2901960784313726,"g":0.3607843137254902,"b":0.33725490196078434,"a":1},"primary-border-30":{"r":0.30980392156862746,"g":0.396078431372549,"b":0.3607843137254902,"a":1},"primary-border-35":{"r":0.3215686274509804,"g":0.42745098039215684,"b":0.3764705882352941,"a":1},"primary-surface-10":{"r":0.14901960784313725,"g":0.1803921568627451,"b":0.17647058823529413,"a":1},"primary-surface-14":{"r":0.16470588235294117,"g":0.20784313725490197,"b":0.19607843137254902,"a":1},"primary-surface-28":{"r":0.2235294117647059,"g":0.3058823529411765,"b":0.2627450980392157,"a":1},"primary-surface-3":{"r":0.12156862745098039,"g":0.12941176470588237,"b":0.1411764705882353,"a":1},"primary-surface-5":{"r":0.12941176470588237,"g":0.1450980392156863,"b":0.14901960784313725,"a":1},"primary-surface-6":{"r":0.13333333333333333,"g":0.15294117647058825,"b":0.1568627450980392,"a":1},"primary-surface-7":{"r":0.13725490196078433,"g":0.1607843137254902,"b":0.1607843137254902,"a":1},"primary-surface-8":{"r":0.1411764705882353,"g":0.16470588235294117,"b":0.16470588235294117,"a":1},"primary-surface-9":{"r":0.1450980392156863,"g":0.17254901960784313,"b":0.16862745098039217,"a":1},"primary-text-55":{"r":0.7019607843137254,"g":0.8666666666666667,"b":0.7647058823529411,"a":1},"primary-text-85":{"r":0.5764705882352941,"g":0.8313725490196079,"b":0.6666666666666666,"a":1},"primary-white-97-5":{"r":0.5254901960784314,"g":0.8156862745098039,"b":0.6274509803921569,"a":1},"success-alpha-10":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.1},"success-alpha-15":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.15},"success-alpha-22":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.22},"success-alpha-8":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.08},"success-alpha-9":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.09},"success-border-12":{"r":0.2549019607843137,"g":0.2901960784313726,"b":0.2901960784313726,"a":1},"success-surface-5":{"r":0.12941176470588237,"g":0.1450980392156863,"b":0.14901960784313725,"a":1},"success-surface-8":{"r":0.1411764705882353,"g":0.16470588235294117,"b":0.16470588235294117,"a":1},"success-surface-9":{"r":0.1450980392156863,"g":0.17254901960784313,"b":0.16862745098039217,"a":1},"surface-alpha-55":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":0.55},"surface-alpha-90":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":0.9},"surface-muted-alpha-45":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":0.45},"surface-muted-alpha-50":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":0.5},"surface-muted-border-65":{"r":0.17254901960784313,"g":0.17254901960784313,"b":0.19607843137254902,"a":1},"surface-muted-border-75":{"r":0.16470588235294117,"g":0.16470588235294117,"b":0.18823529411764706,"a":1},"surface-text-98":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"text-alpha-10":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.1},"text-alpha-15":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.15},"text-alpha-16":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.16},"text-alpha-18":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.18},"text-alpha-8":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.08},"text-alpha-9":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.09},"text-border-12":{"r":0.3058823529411765,"g":0.3058823529411765,"b":0.32941176470588235,"a":1},"text-muted-alpha-10":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":0.1},"text-muted-alpha-22":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":0.22},"text-muted-surface-8":{"r":0.15294117647058825,"g":0.15294117647058825,"b":0.16862745098039217,"a":1},"text-muted-surface-9":{"r":0.1568627450980392,"g":0.1568627450980392,"b":0.17647058823529413,"a":1},"text-muted-surface-92":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":1},"text-subtle-alpha-9":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":0.09},"text-subtle-surface-muted-38":{"r":0.3176470588235294,"g":0.3176470588235294,"b":0.34901960784313724,"a":1},"text-surface-5":{"r":0.14901960784313725,"g":0.14901960784313725,"b":0.16470588235294117,"a":1},"warning-alpha-10":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.1},"warning-alpha-12":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.12},"warning-alpha-15":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.15},"warning-alpha-16":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.16},"warning-alpha-22":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.22},"warning-alpha-8":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.08},"warning-alpha-9":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.09},"warning-border-12":{"r":0.3137254901960784,"g":0.28627450980392155,"b":0.24705882352941178,"a":1},"warning-border-30":{"r":0.4549019607843137,"g":0.3843137254901961,"b":0.24313725490196078,"a":1},"warning-surface-11":{"r":0.20784313725490197,"g":0.1843137254901961,"b":0.13725490196078433,"a":1},"warning-surface-5":{"r":0.15294117647058825,"g":0.1411764705882353,"b":0.12941176470588237,"a":1},"warning-surface-8":{"r":0.1803921568627451,"g":0.16470588235294117,"b":0.13333333333333333,"a":1},"warning-surface-9":{"r":0.18823529411764706,"g":0.16862745098039217,"b":0.13725490196078433,"a":1},"text-subtle":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":1},"surface-raised":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"border-hover":{"r":0.3686274509803922,"g":0.3686274509803922,"b":0.4,"a":1},"on-warning":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"primary-hover":{"r":0.5607843137254902,"g":0.8313725490196079,"b":0.6588235294117647,"a":1},"primary-active":{"r":0.43529411764705883,"g":0.6901960784313725,"b":0.5254901960784314,"a":1},"danger-hover":{"r":0.9450980392156862,"g":0.5686274509803921,"b":0.5686274509803921,"a":1},"danger-active":{"r":0.796078431372549,"g":0.44313725490196076,"b":0.44313725490196076,"a":1}}};
-const leafDensity = {"comfortable":{"control-height":40,"spacing":8,"density-form-gap":24,"density-label-gap":6,"density-row-padding":12,"density-option-height":36,"density-option-padding":6,"density-field-padding":10,"density-dialog-block":20,"density-dialog-inline":24,"density-dialog-gap":16},"compact":{"control-height":34,"spacing":6,"density-form-gap":16,"density-label-gap":4,"density-row-padding":8,"density-option-height":30,"density-option-padding":4,"density-field-padding":8,"density-dialog-block":16,"density-dialog-inline":20,"density-dialog-gap":12}};
+const leafPalettes = {"light":{"primary":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":1},"on-primary":{"r":1,"g":1,"b":1,"a":1},"danger":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":1},"on-danger":{"r":1,"g":1,"b":1,"a":1},"warning":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":1},"info":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":1},"success":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":1},"text":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"text-muted":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":1},"surface":{"r":1,"g":1,"b":1,"a":1},"surface-muted":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":1},"border":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":1},"option-hover":{"r":0.9215686274509803,"g":0.9215686274509803,"b":0.9215686274509803,"a":1},"primary-text-80":{"r":0.12549019607843137,"g":0.43529411764705883,"b":0.25882352941176473,"a":1},"success-text-80":{"r":0.12549019607843137,"g":0.43529411764705883,"b":0.25882352941176473,"a":1},"warning-text-80":{"r":0.5529411764705883,"g":0.403921568627451,"b":0.10980392156862745,"a":1},"danger-text-80":{"r":0.6509803921568628,"g":0.21176470588235294,"b":0.21568627450980393,"a":1},"info-text-80":{"r":0.09411764705882353,"g":0.4,"b":0.8274509803921568,"a":1},"border-alpha-55":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.55},"border-alpha-60":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.6},"border-alpha-65":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.65},"border-alpha-85":{"r":0.8980392156862745,"g":0.8980392156862745,"b":0.9098039215686274,"a":0.85},"border-surface-35":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":1},"border-surface-65":{"r":0.9333333333333333,"g":0.9333333333333333,"b":0.9411764705882353,"a":1},"border-surface-70":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9372549019607843,"a":1},"border-text-muted-65":{"r":0.7254901960784313,"g":0.7254901960784313,"b":0.7450980392156863,"a":1},"danger-alpha-10":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.1},"danger-alpha-11":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.11},"danger-alpha-12":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.12},"danger-alpha-15":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.15},"danger-alpha-18":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.18},"danger-alpha-22":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.22},"danger-alpha-25":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.25},"danger-alpha-42":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.42},"danger-alpha-7":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.07},"danger-alpha-8":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.08},"danger-alpha-9":{"r":0.7843137254901961,"g":0.23529411764705882,"b":0.23529411764705882,"a":0.09},"danger-border-12":{"r":0.8862745098039215,"g":0.8196078431372549,"b":0.8274509803921568,"a":1},"danger-border-30":{"r":0.8627450980392157,"g":0.6980392156862745,"b":0.7058823529411765,"a":1},"danger-surface-4":{"r":0.9921568627450981,"g":0.9686274509803922,"b":0.9686274509803922,"a":1},"danger-surface-5":{"r":0.9882352941176471,"g":0.9607843137254902,"b":0.9607843137254902,"a":1},"danger-surface-6":{"r":0.9882352941176471,"g":0.9529411764705882,"b":0.9529411764705882,"a":1},"danger-surface-8":{"r":0.984313725490196,"g":0.9372549019607843,"b":0.9372549019607843,"a":1},"danger-surface-9":{"r":0.9803921568627451,"g":0.9294117647058824,"b":0.9294117647058824,"a":1},"danger-white-97-5":{"r":0.788235294117647,"g":0.2549019607843137,"b":0.2549019607843137,"a":1},"info-alpha-10":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.1},"info-alpha-15":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.15},"info-alpha-22":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.22},"info-alpha-8":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.08},"info-alpha-9":{"r":0.08627450980392157,"g":0.4666666666666667,"b":1,"a":0.09},"info-border-12":{"r":0.8,"g":0.8470588235294118,"b":0.9215686274509803,"a":1},"info-surface-5":{"r":0.9529411764705882,"g":0.9725490196078431,"b":1,"a":1},"info-surface-8":{"r":0.9254901960784314,"g":0.9568627450980393,"b":1,"a":1},"info-surface-9":{"r":0.9176470588235294,"g":0.9529411764705882,"b":1,"a":1},"primary-alpha-10":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.1},"primary-alpha-11":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.11},"primary-alpha-12":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.12},"primary-alpha-15":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.15},"primary-alpha-16":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.16},"primary-alpha-18":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.18},"primary-alpha-20":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.2},"primary-alpha-22":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.22},"primary-alpha-25":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.25},"primary-alpha-35":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.35},"primary-alpha-4":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.04},"primary-alpha-42":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.42},"primary-alpha-45":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.45},"primary-alpha-55":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.55},"primary-alpha-8":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.08},"primary-alpha-9":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.09},"primary-border-12":{"r":0.803921568627451,"g":0.8509803921568627,"b":0.8352941176470589,"a":1},"primary-border-24":{"r":0.7137254901960784,"g":0.803921568627451,"b":0.7607843137254902,"a":1},"primary-border-30":{"r":0.6666666666666666,"g":0.7843137254901961,"b":0.7254901960784313,"a":1},"primary-border-35":{"r":0.6274509803921569,"g":0.7647058823529411,"b":0.6941176470588235,"a":1},"primary-surface-10":{"r":0.9137254901960784,"g":0.9529411764705882,"b":0.9294117647058824,"a":1},"primary-surface-14":{"r":0.8784313725490196,"g":0.9333333333333333,"b":0.9019607843137255,"a":1},"primary-surface-28":{"r":0.7568627450980392,"g":0.8627450980392157,"b":0.8,"a":1},"primary-surface-3":{"r":0.9725490196078431,"g":0.984313725490196,"b":0.9803921568627451,"a":1},"primary-surface-5":{"r":0.9568627450980393,"g":0.9764705882352941,"b":0.9647058823529412,"a":1},"primary-surface-6":{"r":0.9490196078431372,"g":0.9725490196078431,"b":0.9568627450980393,"a":1},"primary-surface-7":{"r":0.9372549019607843,"g":0.9647058823529412,"b":0.9490196078431372,"a":1},"primary-surface-8":{"r":0.9294117647058824,"g":0.9607843137254902,"b":0.9450980392156862,"a":1},"primary-surface-9":{"r":0.9215686274509803,"g":0.9568627450980393,"b":0.9372549019607843,"a":1},"primary-text-55":{"r":0.12549019607843137,"g":0.33725490196078434,"b":0.2235294117647059,"a":1},"primary-text-85":{"r":0.12549019607843137,"g":0.4549019607843137,"b":0.26666666666666666,"a":1},"primary-white-97-5":{"r":0.14901960784313725,"g":0.5254901960784314,"b":0.30980392156862746,"a":1},"success-alpha-10":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.1},"success-alpha-15":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.15},"success-alpha-22":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.22},"success-alpha-8":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.08},"success-alpha-9":{"r":0.12549019607843137,"g":0.5137254901960784,"b":0.2901960784313726,"a":0.09},"success-border-12":{"r":0.803921568627451,"g":0.8509803921568627,"b":0.8352941176470589,"a":1},"success-surface-5":{"r":0.9568627450980393,"g":0.9764705882352941,"b":0.9647058823529412,"a":1},"success-surface-8":{"r":0.9294117647058824,"g":0.9607843137254902,"b":0.9450980392156862,"a":1},"success-surface-9":{"r":0.9215686274509803,"g":0.9568627450980393,"b":0.9372549019607843,"a":1},"surface-alpha-55":{"r":1,"g":1,"b":1,"a":0.55},"surface-alpha-90":{"r":1,"g":1,"b":1,"a":0.9},"surface-muted-alpha-45":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":0.45},"surface-muted-alpha-50":{"r":0.9647058823529412,"g":0.9647058823529412,"b":0.9686274509803922,"a":0.5},"surface-muted-border-65":{"r":0.9411764705882353,"g":0.9411764705882353,"b":0.9490196078431372,"a":1},"surface-muted-border-75":{"r":0.9490196078431372,"g":0.9490196078431372,"b":0.9529411764705882,"a":1},"surface-text-98":{"r":0.984313725490196,"g":0.984313725490196,"b":0.984313725490196,"a":1},"text-alpha-10":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.1},"text-alpha-15":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.15},"text-alpha-16":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.16},"text-alpha-18":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.18},"text-alpha-8":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.08},"text-alpha-9":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":0.09},"text-border-12":{"r":0.803921568627451,"g":0.803921568627451,"b":0.8156862745098039,"a":1},"text-muted-alpha-10":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":0.1},"text-muted-alpha-22":{"r":0.40784313725490196,"g":0.40784313725490196,"b":0.43529411764705883,"a":0.22},"text-muted-surface-8":{"r":0.9529411764705882,"g":0.9529411764705882,"b":0.9529411764705882,"a":1},"text-muted-surface-9":{"r":0.9450980392156862,"g":0.9450980392156862,"b":0.9490196078431372,"a":1},"text-muted-surface-92":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":1},"text-subtle-alpha-9":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":0.09},"text-subtle-surface-muted-38":{"r":0.7725490196078432,"g":0.7725490196078432,"b":0.7843137254901961,"a":1},"text-surface-5":{"r":0.9568627450980393,"g":0.9568627450980393,"b":0.9568627450980393,"a":1},"warning-alpha-10":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.1},"warning-alpha-12":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.12},"warning-alpha-15":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.15},"warning-alpha-16":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.16},"warning-alpha-22":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.22},"warning-alpha-8":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.08},"warning-alpha-9":{"r":0.9803921568627451,"g":0.6784313725490196,"b":0.0784313725490196,"a":0.09},"warning-border-12":{"r":0.9098039215686274,"g":0.8705882352941177,"b":0.8117647058823529,"a":1},"warning-border-30":{"r":0.9215686274509803,"g":0.8313725490196079,"b":0.6588235294117647,"a":1},"warning-surface-11":{"r":0.996078431372549,"g":0.9647058823529412,"b":0.8980392156862745,"a":1},"warning-surface-5":{"r":1,"g":0.984313725490196,"b":0.9529411764705882,"a":1},"warning-surface-8":{"r":1,"g":0.9725490196078431,"b":0.9254901960784314,"a":1},"warning-surface-9":{"r":1,"g":0.9725490196078431,"b":0.9176470588235294,"a":1},"text-subtle":{"r":0.4549019607843137,"g":0.4549019607843137,"b":0.4823529411764706,"a":1},"surface-raised":{"r":0.984313725490196,"g":0.984313725490196,"b":0.984313725490196,"a":1},"border-hover":{"r":0.7254901960784313,"g":0.7254901960784313,"b":0.7450980392156863,"a":1},"on-warning":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"primary-hover":{"r":0.14901960784313725,"g":0.5254901960784314,"b":0.30980392156862746,"a":1},"primary-active":{"r":0.10588235294117647,"g":0.43529411764705883,"b":0.24705882352941178,"a":1},"danger-hover":{"r":0.796078431372549,"g":0.2823529411764706,"b":0.2823529411764706,"a":1},"danger-active":{"r":0.6666666666666666,"g":0.2,"b":0.2,"a":1}},"dark":{"primary":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":1},"on-primary":{"r":0.06666666666666667,"g":0.15294117647058825,"b":0.10196078431372549,"a":1},"danger":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":1},"on-danger":{"r":0.2196078431372549,"g":0.09411764705882353,"b":0.09411764705882353,"a":1},"warning":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":1},"info":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":1},"success":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":1},"text":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":1},"text-muted":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":1},"surface":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":1},"surface-muted":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":1},"border":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":1},"option-hover":{"r":0.1843137254901961,"g":0.1843137254901961,"b":0.2,"a":1},"primary-text-80":{"r":0.596078431372549,"g":0.8352941176470589,"b":0.6823529411764706,"a":1},"success-text-80":{"r":0.596078431372549,"g":0.8352941176470589,"b":0.6823529411764706,"a":1},"warning-text-80":{"r":0.984313725490196,"g":0.803921568627451,"b":0.3803921568627451,"a":1},"danger-text-80":{"r":0.9372549019607843,"g":0.6039215686274509,"b":0.6039215686274509,"a":1},"info-text-80":{"r":0.5137254901960784,"g":0.7411764705882353,"b":0.9882352941176471,"a":1},"border-alpha-55":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.55},"border-alpha-60":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.6},"border-alpha-65":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.65},"border-alpha-85":{"r":0.2196078431372549,"g":0.2196078431372549,"b":0.24705882352941178,"a":0.85},"border-surface-35":{"r":0.14901960784313725,"g":0.14901960784313725,"b":0.16862745098039217,"a":1},"border-surface-65":{"r":0.1803921568627451,"g":0.1803921568627451,"b":0.20392156862745098,"a":1},"border-surface-70":{"r":0.18823529411764706,"g":0.18823529411764706,"b":0.21176470588235294,"a":1},"border-text-muted-65":{"r":0.3686274509803922,"g":0.3686274509803922,"b":0.4,"a":1},"danger-alpha-10":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.1},"danger-alpha-11":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.11},"danger-alpha-12":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.12},"danger-alpha-15":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.15},"danger-alpha-18":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.18},"danger-alpha-22":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.22},"danger-alpha-25":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.25},"danger-alpha-42":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.42},"danger-alpha-7":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.07},"danger-alpha-8":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.08},"danger-alpha-9":{"r":0.9372549019607843,"g":0.5215686274509804,"b":0.5215686274509804,"a":0.09},"danger-border-12":{"r":0.3058823529411765,"g":0.2549019607843137,"b":0.2784313725490196,"a":1},"danger-border-30":{"r":0.43529411764705883,"g":0.30980392156862746,"b":0.32941176470588235,"a":1},"danger-surface-4":{"r":0.1411764705882353,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"danger-surface-5":{"r":0.15294117647058825,"g":0.12941176470588237,"b":0.1450980392156863,"a":1},"danger-surface-6":{"r":0.1607843137254902,"g":0.13333333333333333,"b":0.14901960784313725,"a":1},"danger-surface-8":{"r":0.17647058823529413,"g":0.1411764705882353,"b":0.1568627450980392,"a":1},"danger-surface-9":{"r":0.1843137254901961,"g":0.1450980392156863,"b":0.1607843137254902,"a":1},"danger-white-97-5":{"r":0.9372549019607843,"g":0.5333333333333333,"b":0.5333333333333333,"a":1},"info-alpha-10":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.1},"info-alpha-15":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.15},"info-alpha-22":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.22},"info-alpha-8":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.08},"info-alpha-9":{"r":0.4117647058823529,"g":0.6941176470588235,"b":1,"a":0.09},"info-border-12":{"r":0.24313725490196078,"g":0.2784313725490196,"b":0.33725490196078434,"a":1},"info-surface-5":{"r":0.12549019607843137,"g":0.13725490196078433,"b":0.16862745098039217,"a":1},"info-surface-8":{"r":0.13333333333333333,"g":0.1568627450980392,"b":0.19607843137254902,"a":1},"info-surface-9":{"r":0.13725490196078433,"g":0.1607843137254902,"b":0.20392156862745098,"a":1},"primary-alpha-10":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.1},"primary-alpha-11":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.11},"primary-alpha-12":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.12},"primary-alpha-15":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.15},"primary-alpha-16":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.16},"primary-alpha-18":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.18},"primary-alpha-20":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.2},"primary-alpha-22":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.22},"primary-alpha-25":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.25},"primary-alpha-35":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.35},"primary-alpha-4":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.04},"primary-alpha-42":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.42},"primary-alpha-45":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.45},"primary-alpha-55":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.55},"primary-alpha-8":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.08},"primary-alpha-9":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.09},"primary-border-12":{"r":0.2549019607843137,"g":0.2901960784313726,"b":0.2901960784313726,"a":1},"primary-border-24":{"r":0.2901960784313726,"g":0.3607843137254902,"b":0.33725490196078434,"a":1},"primary-border-30":{"r":0.30980392156862746,"g":0.396078431372549,"b":0.3607843137254902,"a":1},"primary-border-35":{"r":0.3215686274509804,"g":0.42745098039215684,"b":0.3764705882352941,"a":1},"primary-surface-10":{"r":0.14901960784313725,"g":0.1803921568627451,"b":0.17647058823529413,"a":1},"primary-surface-14":{"r":0.16470588235294117,"g":0.20784313725490197,"b":0.19607843137254902,"a":1},"primary-surface-28":{"r":0.2235294117647059,"g":0.3058823529411765,"b":0.2627450980392157,"a":1},"primary-surface-3":{"r":0.12156862745098039,"g":0.12941176470588237,"b":0.1411764705882353,"a":1},"primary-surface-5":{"r":0.12941176470588237,"g":0.1450980392156863,"b":0.14901960784313725,"a":1},"primary-surface-6":{"r":0.13333333333333333,"g":0.15294117647058825,"b":0.1568627450980392,"a":1},"primary-surface-7":{"r":0.13725490196078433,"g":0.1607843137254902,"b":0.1607843137254902,"a":1},"primary-surface-8":{"r":0.1411764705882353,"g":0.16470588235294117,"b":0.16470588235294117,"a":1},"primary-surface-9":{"r":0.1450980392156863,"g":0.17254901960784313,"b":0.16862745098039217,"a":1},"primary-text-55":{"r":0.7019607843137254,"g":0.8666666666666667,"b":0.7647058823529411,"a":1},"primary-text-85":{"r":0.5764705882352941,"g":0.8313725490196079,"b":0.6666666666666666,"a":1},"primary-white-97-5":{"r":0.5254901960784314,"g":0.8156862745098039,"b":0.6274509803921569,"a":1},"success-alpha-10":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.1},"success-alpha-15":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.15},"success-alpha-22":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.22},"success-alpha-8":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.08},"success-alpha-9":{"r":0.5137254901960784,"g":0.8117647058823529,"b":0.6196078431372549,"a":0.09},"success-border-12":{"r":0.2549019607843137,"g":0.2901960784313726,"b":0.2901960784313726,"a":1},"success-surface-5":{"r":0.12941176470588237,"g":0.1450980392156863,"b":0.14901960784313725,"a":1},"success-surface-8":{"r":0.1411764705882353,"g":0.16470588235294117,"b":0.16470588235294117,"a":1},"success-surface-9":{"r":0.1450980392156863,"g":0.17254901960784313,"b":0.16862745098039217,"a":1},"surface-alpha-55":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":0.55},"surface-alpha-90":{"r":0.10980392156862745,"g":0.10980392156862745,"b":0.12549019607843137,"a":0.9},"surface-muted-alpha-45":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":0.45},"surface-muted-alpha-50":{"r":0.1450980392156863,"g":0.1450980392156863,"b":0.16862745098039217,"a":0.5},"surface-muted-border-65":{"r":0.17254901960784313,"g":0.17254901960784313,"b":0.19607843137254902,"a":1},"surface-muted-border-75":{"r":0.16470588235294117,"g":0.16470588235294117,"b":0.18823529411764706,"a":1},"surface-text-98":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"text-alpha-10":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.1},"text-alpha-15":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.15},"text-alpha-16":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.16},"text-alpha-18":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.18},"text-alpha-8":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.08},"text-alpha-9":{"r":0.9294117647058824,"g":0.9294117647058824,"b":0.9411764705882353,"a":0.09},"text-border-12":{"r":0.3058823529411765,"g":0.3058823529411765,"b":0.32941176470588235,"a":1},"text-muted-alpha-10":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":0.1},"text-muted-alpha-22":{"r":0.6470588235294118,"g":0.6470588235294118,"b":0.6823529411764706,"a":0.22},"text-muted-surface-8":{"r":0.15294117647058825,"g":0.15294117647058825,"b":0.16862745098039217,"a":1},"text-muted-surface-9":{"r":0.1568627450980392,"g":0.1568627450980392,"b":0.17647058823529413,"a":1},"text-muted-surface-92":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":1},"text-subtle-alpha-9":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":0.09},"text-subtle-surface-muted-38":{"r":0.3176470588235294,"g":0.3176470588235294,"b":0.34901960784313724,"a":1},"text-surface-5":{"r":0.14901960784313725,"g":0.14901960784313725,"b":0.16470588235294117,"a":1},"warning-alpha-10":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.1},"warning-alpha-12":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.12},"warning-alpha-15":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.15},"warning-alpha-16":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.16},"warning-alpha-22":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.22},"warning-alpha-8":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.08},"warning-alpha-9":{"r":1,"g":0.7725490196078432,"b":0.23921568627450981,"a":0.09},"warning-border-12":{"r":0.3137254901960784,"g":0.28627450980392155,"b":0.24705882352941178,"a":1},"warning-border-30":{"r":0.4549019607843137,"g":0.3843137254901961,"b":0.24313725490196078,"a":1},"warning-surface-11":{"r":0.20784313725490197,"g":0.1843137254901961,"b":0.13725490196078433,"a":1},"warning-surface-5":{"r":0.15294117647058825,"g":0.1411764705882353,"b":0.12941176470588237,"a":1},"warning-surface-8":{"r":0.1803921568627451,"g":0.16470588235294117,"b":0.13333333333333333,"a":1},"warning-surface-9":{"r":0.18823529411764706,"g":0.16862745098039217,"b":0.13725490196078433,"a":1},"text-subtle":{"r":0.6039215686274509,"g":0.6039215686274509,"b":0.6392156862745098,"a":1},"surface-raised":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"border-hover":{"r":0.3686274509803922,"g":0.3686274509803922,"b":0.4,"a":1},"on-warning":{"r":0.12549019607843137,"g":0.12549019607843137,"b":0.1411764705882353,"a":1},"primary-hover":{"r":0.5607843137254902,"g":0.8313725490196079,"b":0.6588235294117647,"a":1},"primary-active":{"r":0.43529411764705883,"g":0.6901960784313725,"b":0.5254901960784314,"a":1},"danger-hover":{"r":0.9450980392156862,"g":0.5686274509803921,"b":0.5686274509803921,"a":1},"danger-active":{"r":0.796078431372549,"g":0.44313725490196076,"b":0.44313725490196076,"a":1}}};
+const leafDensity = {"comfortable":{"control-height":36,"spacing":8,"density-form-gap":24,"density-label-gap":6,"density-row-padding":12,"density-option-height":32,"density-option-padding":6,"density-field-padding":10,"density-dialog-block":20,"density-dialog-inline":24,"density-dialog-gap":16},"compact":{"control-height":30,"spacing":6,"density-form-gap":16,"density-label-gap":4,"density-row-padding":8,"density-option-height":26,"density-option-padding":4,"density-field-padding":8,"density-dialog-block":16,"density-dialog-inline":20,"density-dialog-gap":12}};
diff --git a/package.json b/package.json
index 2895544..ad74fbf 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "format": "biome check --write . && prettier --write \"**/*.scss\"",
     "test": "pnpm --filter @ifhover/leaf-ui test && pnpm test:release && pnpm test:docs && pnpm test:skills",
     "test:release": "node --test packages/react/scripts/check-release-notes.test.mjs",
-    "test:docs": "node --test apps/docs/scripts/versioned-docs.test.mjs",
+    "test:docs": "node --test apps/docs/scripts/versioned-docs.test.mjs apps/docs/scripts/tailwind.test.mjs",
     "test:skills": "node --test skills/tests/docs.test.mjs",
     "test:watch": "pnpm --filter @ifhover/leaf-ui test:watch",
     "check": "pnpm check:release && pnpm lint && pnpm typecheck && pnpm test",
diff --git a/packages/react/DEVELOPMENT.md b/packages/react/DEVELOPMENT.md
index 7f87520..0dcf3c1 100644
--- a/packages/react/DEVELOPMENT.md
+++ b/packages/react/DEVELOPMENT.md
@@ -1,6 +1,6 @@
-# 组件库开发
+# 组件编写与开发规则
 
-此文件面向源码贡献者，组件使用说明见 [README.md](README.md)。
+此文件是新增、修改和重构组件时必须遵守的编写规则，面向源码贡献者。开发与发布同时遵守 [仓库流程](../../DEVELOPMENT-WORKFLOW.md)，视觉和交互遵守 [设计标准](../../DESIGN-STANDARDS.md)；组件使用说明见 [README.md](README.md)。
 
 ## 本地开发
 
@@ -15,17 +15,18 @@ pnpm dev
 
 ## 添加组件
 
-1. 在 src/<component>/ 中添加实现、类型、.scss 样式和必要的行为测试。
+1. 在 `src/<component>/` 中添加实现、类型、`.scss` 样式和必要的行为测试。优先复用现有共享能力，避免为单个组件另建主题、浮层或字段状态体系。
 2. 保留适用的原生属性、DOM ref、合理的键盘操作和表单提交行为。文本与勾选控件使用原生语义；下拉、日期、时间等浮层使用共享 FloatingPanel，不使用原生 select / date / time / datalist 面板。
-3. 更新目录和 src/index.ts 的导出，在 src/styles/index.scss 中用 @use 引入样式。
-4. 在 apps/docs/src/examples/<component>/ 添加示例，MDX 的 ComponentExample 与 file 围栏共同引用该源码。
+3. 显式维护组件目录和 `src/index.ts` 的公开导出，包含调用方需要组装数据的选项、值和事件类型；内部控件不属于公开 API。在 `src/styles/index.scss` 中用 `@use` 引入样式，并维护独立样式的依赖。
+4. 在 `apps/docs/src/examples/<component>/` 添加示例，MDX 的 ComponentExample 与 file 围栏共同引用该源码；遵守 [文档站协作约定](../../apps/docs/AGENTS.md)。
 5. 更新组件侧边栏和总览卡片，提供静态 SVG 缩略图，避免总览挂载全部组件实例。
+6. 按影响完成类型、行为、样式产物及必要的浏览器验证，范围见 [QUALITY.md](QUALITY.md)。涉及公共 API 时同步中英文文档、API 表格及 AI 文档生成所需的元数据。
 
 在线文档只面向使用者，开发和构建说明保留在源码 Markdown 中。
 
 ## 尺寸与样式约定
 
-**默认单行控件高度是 40px**。Button、Input、Select 及后续表单组件必须共用 --leaf-control-height；小、大尺寸共用 --leaf-control-height-sm / --leaf-control-height-lg（默认 34 / 46px）。不要在每个组件中重复建立不同的尺寸基准。
+**默认单行控件高度是 36px**。Button、Input、Select 及后续表单组件必须共用 --leaf-control-height；小、大尺寸共用 --leaf-control-height-sm / --leaf-control-height-lg（默认 30 / 42px）。不要在每个组件中重复建立不同的尺寸基准。
 
 公共 SCSS mixin 位于 src/styles/_mixins.scss，提供 control-size、field、choice 和 focus-ring。主题色、危险色、圆角、尺寸及动效使用 --leaf-* CSS 变量，SCSS 负责样式复用与组织。组件状态的派生色在组件自身计算，确保局部主题继承正确。
 
@@ -35,7 +36,7 @@ pnpm dev
 
 ## 交互动效
 
-视觉与动效调整的覆盖记录见 [DESIGN-REFRESH.md](../../DESIGN-REFRESH.md)。基础时间为 200ms，快速与布局过渡从当前区域的 `--leaf-motion-duration` 派生。悬停、选中、展开和状态变化使用不同的反馈；拖动、输入、裁剪与虚拟窗口位置保持即时响应。
+视觉与动效调整的覆盖记录见 [DESIGN-REFRESH.md](../../DESIGN-REFRESH.md)。基础时间为 200ms，快速与布局过渡从当前区域的 `--leaf-motion-duration` 派生。悬停、选中、展开和状态变化使用不同的反馈；拖动、输入与虚拟窗口位置保持即时响应。
 
 CSS keyframe 使用 `animation: var(--leaf-motion-animation, leaf-name …)`；`motion: false` 将它设为 none，内层 `motion: true` 用 initial 恢复 fallback。不要用父区域的后代选择器强行关闭嵌套区域。系统减少动态效果始终优先，浮层同步全部 `--leaf-*` 变量。
 
@@ -55,9 +56,9 @@ pnpm build:lib
 pnpm --dir packages/react pack
 ```
 
-Rslib 与 Rspress 均通过 @rsbuild/plugin-sass 编译 SCSS。构建输出 ESM、CommonJS、独立 CSS 和类型声明，外部入口仍为 @ifhover/leaf-ui/styles.css。
+Rslib 与 Rspress 均通过 @rsbuild/plugin-sass 编译 SCSS。构建输出 ESM、CommonJS、独立 CSS 和类型声明。浏览器组件入口自动加载样式，显式 CSS 入口继续保留。
 
-check:package 确认每个组件的两种模块导出和服务端渲染、声明入口、40px 公共 token、编译后的样式及 React / Lucide 外部依赖。
+check:package 确认每个组件的两种模块导出和服务端渲染、声明入口、36px 公共 token、编译后的样式及 React / Lucide 外部依赖。
 
 ## 自定义浮层与表单
 
@@ -73,11 +74,11 @@ DatePicker 使用本地年月日而非 UTC 序列化；显示与 onChange 的格
 
 ### 自动样式入口
 
-`build-browser-entries.mjs` 生成独立的浏览器 ESM / CommonJS 模块图，把组件 CSS 导入放在对应的 TSX 实现模块内；纯导出入口不导入整库 CSS。根入口与组件子路径共用这份模块图，保证组件身份和 React 上下文一致。Node 模块图保持无 CSS，源码映射同步调整路径与插入行。
+`build-browser-entries.mjs` 生成独立的浏览器 ESM / CommonJS 模块图，把共享基础 CSS 和组件 CSS 导入放在对应的 TSX 实现模块内；纯导出入口不导入整库 CSS。根入口与组件子路径共用这份模块图，保证组件身份和 React 上下文一致。Node 模块图保持无 CSS，源码映射同步调整路径与全部插入行。
 
 根入口 ESM 具名导入的样式裁剪已在 Vite、Rspack 生产构建验证；不要把 CSS 放在纯 re-export 包装模块内，它们可能被优化绕过并丢失样式。`sideEffects` 只保留 CSS，未使用的组件实现和对应样式可一起裁剪。esbuild 会保留遍历到的 CSS，即使 JS 已裁剪；直接 esbuild 打包或 CommonJS 根入口仍推荐组件子路径，不能承诺所有构建器都支持根入口样式裁剪。`verify-browser-styles.mjs` 比较实际产物中的根入口、子路径、未使用导入、组合组件和服务样式，并纳入 `check:package`。
 
-`styles.css` 提供主题变量、公共浮层与 Confirm / Message / Notification / LoadingBar 服务的样式，应用只需导入一次。`styles/all.css` 是完整静态入口；旧的 `<component>/style.css` 保留供显式管理 CSS 的构建使用。`browser` 导出条件选择带样式入口，Node 默认入口不导入 CSS，保持直接 SSR 可用。声明统一指向原组件，浏览器与 Node API 一致。
+`styles/foundation.css` 在产物内部提供主题变量和公共浮层样式，由使用到的组件实现自动引入，同一个模块在构建时去重。服务组件的样式随各自实现加载，普通组件不会因此引入全部服务。应用无需手动导入 CSS；`styles.css` 保留为包含基础与 API 服务样式的兼容入口。`styles/all.css` 是完整静态入口；旧的 `<component>/style.css` 保留供显式管理 CSS 的构建使用。`browser` 导出条件选择带样式入口，Node 默认入口不导入 CSS，保持直接 SSR 可用。声明统一指向原组件，浏览器与 Node API 一致。
 
 开发分支移除普通 List / ListItem 和 OrgChart，业务列表使用原生 HTML、Space 或 Grid 组合；VirtualList、FileList 和 FormList 保留。`styles.css` 从整库改为基础样式，自行管理 SSR CSS 的应用迁移到 `styles/all.css`。这些兼容性变化应纳入下一次正式发布的迁移说明。
 
@@ -87,18 +88,92 @@ DatePicker 使用本地年月日而非 UTC 序列化；显示与 onChange 的格
 
 ## 扩展组件的实现
 
-布局与栅格使用 CSS。Masonry 使用多列布局，内容按列阅读；要求按行阅读或固定焦点顺序时使用 Grid。图片、裁剪与签名依赖见 [THIRD_PARTY.md](THIRD_PARTY.md)。只在需要时加载浏览器引擎，SSR 首屏输出稳定的占位内容。
+布局与栅格使用 CSS。Masonry 使用多列布局，内容按列阅读；要求按行阅读或固定焦点顺序时使用 Grid。图片预览等复杂交互的依赖见 [THIRD_PARTY.md](THIRD_PARTY.md)。只在需要时加载浏览器引擎，SSR 首屏输出稳定的占位内容。
 
 Rslib 保留 ESM / CommonJS 模块结构，使组件可以摇树优化，懒加载模块不在服务端执行。源码入口及各输出文件保留 Next.js 客户端边界。
 
 异步加载组件必须支持 AbortSignal 与卸载清理；InfiniteScroll 同一 dataLength 不会重复请求，失败时可重试，缺少 IntersectionObserver 时提供手动加载。Tree、TreeSelect 和 Cascader 的 key 必须稳定，异步子树在实例内缓存。更换 data / options、loadData 或 cacheKey 时清除缓存，取消旧请求并隔离返回结果；调用方应稳定数据与加载函数的引用。Select 只缓存已选项的回显标签，不保留所有历史搜索结果。虚拟列表通过 TanStack 测量实际行高，移动焦点时先滚动再聚焦。
 
-Tabs、Tree 与 DataTable 的排序能力通过 dnd-kit 提供键盘与触摸交互。拖动结果由调用方更新数组或树数据。签名是一种 Canvas 输入，应用应提供键盘可用的替代签署方法。Upload 提供校验与可取消请求，FileList 展示文件信息，只预览图片与音视频。
+Tabs、Tree 与 DataTable 的排序能力通过 dnd-kit 提供键盘与触摸交互。拖动结果由调用方更新数组或树数据。Upload 提供校验与可取消请求，FileList 展示文件信息，只预览图片与音视频。
 
 ConfigProvider 自动提供 Confirm、Message、Notification 与 LoadingBar 的作用域。useConfirm / useMessage 不返回 holder，独立使用需在入口放置相应 Provider。确认请求依次展示，调用区域卸载时取消待处理请求；任务加载条通过各任务的完成函数管理并发，避免先结束的请求提前关闭加载条。不要在模块全局创建跨 SSR 请求共享的状态。
 
 Confirm 只公开 `useConfirm().confirm(options)`，不再导出受控 `Confirm` 与 `ConfirmProps`。配置使用 `ConfirmOptions`，正文只展示简短的操作说明；包含表单或多步骤的流程迁移到 Modal。移除独立 Sortable 组件及其样式子路径，Tabs / Tree / DataTable 自身的排序能力保持可用。这些是开发分支上的 API 迁移，正式发布时需要纳入迁移说明。
 
+## 区域组件默认参数
+
+开发分支移除 `LeafMessages` 类型与 ConfigProvider 的 `messages`、`textMessages` 参数。`locale` 接受 BCP 47 字符串或只读数组，第一项是当前语言，后续项按词条回退，最后使用内置英文。`translations` 接受按语言代码索引的纯 JSON，公共类型是 `LeafTranslation` / `LeafTranslations`；资源按语言和词条继承，显式语言链整体替换。业务文案由应用翻译；实例与 `components` 提供的文字仍优先。此兼容性变化需纳入下次正式发布的迁移说明。
+
+### 翻译资源
+
+英文、简体中文、日文和韩文的完整资源在 `src/locales/en-US.json`、`zh-CN.json`、`ja-JP.json`、`ko-KR.json`，繁体中文与 JSON Schema 由 `pnpm --filter @ifhover/leaf-ui generate:locale` 生成；构建检查资源是否同步。分组使用组件名的小驼峰形式，共享操作放在 `common`。新增内置可见文案、无障碍名称或读屏播报时必须同步全部内置语言资源，不再使用 `t('中文', 'English')` 或按语言代码判断文本。
+
+静态词条使用 `useText()` 或区域 `messages`；有变量的完整句子使用 `useFormattedText()` 和 ICU 占位符，不拼接翻译片段。格式化器按组件作用域缓存，普通静态标签不引入 ICU；回退句子的复数规则使用来源语言，日期与数字控件仍使用链第一项。JSON 是文本，不执行函数或 HTML。时间选择器的自定义 AM / PM 标签也必须能被输入解析。
+
+内部 `config-context.ts` 只定义 Context，不引用语言资源；只读取动效偏好的控件从这里消费配置，避免普通 Button 间接打包整份翻译。完整语言默认值仍由 `useLeafConfig()` 提供，不增加第二套全局状态或额外 Provider。
+
+数组词条整体替换；只有缺失和 `undefined` 回退，空字符串保留。Provider 纯函数合并且不修改传入对象，不使用跨请求的可变注册表；主题变化不重新解析未变的资源。FloatingPanel 与 ScopedPortal 同步当前 `lang`。测试需覆盖部分翻译、内置覆盖、嵌套链替换、运行时切换、实例优先、Portal、服务组件与 SSR / hydration。包导出五种内置 JSON、Schema 和 `leaf-ui-check-translations` 检查命令；文档构建将同版本资源复制到版本根目录的 `locales/`。
+
+ConfigProvider 的 `components` 支持全部公开 UI 组件、复合组件的公开部件和 Confirm API，公共类型为 `LeafComponentDefaults`。配置键与公开名称一致：Table.Root 使用 Table，其他命名空间部件使用 TableCell、LayoutHeader、DataTableSearch 等名称；FAB / ResizablePanels 分别沿用 FloatButton / Splitter。ConfigProvider 及 Confirm / Message / Notification / LoadingBar 的 Provider 属于基础设施，不接受递归默认配置。以下规则适用于新增组件及已有实现的修改。
+
+### 公开入口与合并语义
+
+- 在公开组件入口调用 `useComponentProps`，先解析区域默认参数，再初始化受控 / 非受控状态、选择 Portal 容器以及建立 reset、事件和副作用逻辑。不能等到渲染内部控件时才补齐，否则组件状态与最终展示会不一致。
+- 对同一组件配置项，优先级为实例参数、内层 Provider、外层 Provider、组件内置默认值。内置默认值仍由组件实现提供，不复制到 Provider。
+- 只有 `undefined` 表示未提供；`false`、`0`、空字符串和类型允许的 `null` 都是有效实例值。禁止用 `||` 代替此合并语义。
+- 按组件、按属性浅合并。对象、数组、`style`、`className` 和回调整体替换，不做深合并、类名拼接或事件串联。
+- 合并是纯操作，不修改调用方的 props 或配置。没有有效覆盖时复用父配置及未变条目；实例无需补齐时复用原 props。
+
+### 嵌套区域的清除
+
+- `components={{ Input: null }}` 清除继承的 Input 默认参数；空对象与 `undefined` 继续继承。组件配置项的 `null` 表示清除，属性值中的 `null` 仍遵循该属性的类型和含义。
+- 清除只影响指定的配置项，其他组件配置、主题、语言和密度保持不变；更内层 Provider 可以重新配置该项。
+- InputSearch 同时使用自身与共享 Input 配置。需要完全恢复这两个来源时，使用 `components={{ Input: null, InputSearch: null }}`。
+- 配置变化不能通过更换 key 或重挂载来生效，也不主动清空非受控值、丢失焦点或重置表单。更改 `defaultValue` 不应重新初始化已挂载的非受控控件；受控值变化正常同步，受控 / 非受控模式的切换由应用管理。
+
+### 类型与公共 API
+
+- 内部 `ComponentPropsMap` 将组件名与完整的公共 Props 绑定，`useComponentProps` 从名称推导参数和返回类型，保留 Select 等组件的判别联合。禁止改为可由调用方任意推断 Props 的泛型，或用宽泛字典、`any`、类型断言绕过名称与类型的对应关系。
+- `LeafComponentDefaults` 从各组件公共 Props 派生，仅使用 `import type` 引用组件类型；运行时不能因配置类型引入整库组件。排除 `key`、`ref`、命令式引用类参数（如 Table 的 `scrollRef`、DataTable 的 `tableRef`）、JSX 必填项和会破坏模式与值关联的属性，不用 Provider 放宽 JSX 的必填契约。引用在实例上设置，避免多个组件争用同一个引用。
+- 当前 Select 的 `options`、`multiple`、`value`、`defaultValue`、`onChange` 保留在实例；Modal 的 `open` 保留在实例。新增支持时逐项确认边界，不能只用 `Partial<Props>` 无差别开放所有字段。
+- 同样检查其他判别联合：DatePicker 的单 / 多选、Slider 的单值 / 范围、Cascader / TreeSelect 的选择模式、InputNumber 的数字 / 十进制字符串模式均由实例决定，相关值、回调与边界参数不能从区域配置改变其类型。浮层必填的触发节点、数据、内容和可见状态继续由实例提供。
+- 不把所有值与回调一律禁用。普通 Input 的 `value`、`defaultValue` 和 `onChange` 可以配置，但必须遵守正常的受控、非受控、事件及表单 reset 语义，并在使用文档说明。
+- 泛型组件只开放与数据类型无关的参数：FormList 的行值 / 键 / 渲染、VirtualList 的项目 / 渲染 / 按项目测量函数、DataTable 的表实例 / 列 / 行回调留在实例。通过 `useGenericComponentDefaults` 获取明确的安全投影，再用组件自身完整的 `Props<T>` 合并，不能将业务类型强转为 `unknown` 或 `any` 来接入。VirtualList 的区域 `estimateSize` 只支持数字，实例仍可使用按项目计算的函数。
+- 全局配置类型不能让可选适配器变成必装依赖。DataTable 的通用参数集中在不导入 TanStack 的 `tabletanstack/defaults.ts`，由实现和配置共同使用；新增可选适配器同样需要拆出与引擎无关的参数类型，并验证未安装可选依赖时的根入口类型检查。
+- 类组件沿用原来的实例与 ref，使用 `contextType` 和纯合并函数解析默认参数；不要为了调用 Hook 包装或替换 ErrorBoundary 的公开类实例。需要比较配置变化时比较上次生效值，不能用当前配置重新解释旧 props。
+
+### 内部控件与复合组件
+
+- 没有内部复用需求的组件直接在函数入口解析默认参数，不为接入统一增加一层包装。确有组件内部复用时，再拆出不读取公开默认参数的内部控件；拆分时保留原来的 ref、组件身份与 API 默认值标注。
+- 公开组件解析对应默认参数；组件内部的实现控件不自动读取其他公开组件的默认参数。内部实现使用 `ButtonControl`、`InputControl`、`TabsControl`、`TableControl`、`ModalBase` 等名称，从具体实现文件导入。禁止在根入口、组件子路径或通过 `export *` 意外公开这些内部实现。
+- 内部控件的值、事件和操作约束由所属组件管理。隔离的只是公开组件默认参数，不能因此绕过既有主题、语言、密度、表单约束和无障碍行为。用户通过内容插槽传入的公开组件仍正常读取区域配置。
+- 子路径入口优先使用显式导出；拆出内部控件时检查原有 `export *`，不能只检查根入口。Card 内嵌 Tabs、选项组内的勾选控件等都由所属组件显式传递参数，不自动继承独立 Tabs、Checkbox 或 Radio 的默认参数。
+- 泛型内部组件同样需要隔离，例如 Transfer 内部的 VirtualList 不读取公开列表的方向、样式和估算配置。为此拆分内部控件时，公开和内部入口都保留泛型推断及 ref 契约，不能退化为宽泛的公共类型。
+- InputSearch 的优先级为实例、自身 InputSearch 配置、共享 Input 配置、内置值。在外层完成这两类配置解析，统一拥有输入值、reset、搜索回调、按钮尺寸、禁用和 loading 约束；不能在内部 Input 再独立解析配置。
+- SplitButton 在外层依次解析共享 Button、自身 SplitButton 与实例参数，两侧共享尺寸、variant、danger 与交互锁定状态。菜单按钮固定 `type="button"`，不复制主按钮的 `id`、`name`、`value`、提交属性和主操作回调；实例显式覆盖 loading 或 disabled 后，两侧必须保持一致。
+- 上传操作、清除、搜索、翻页及弹窗操作等内部功能按钮默认使用 `type="button"`，不能被区域 `Button.type="submit"` 意外改为提交。定制内部操作通过所属组件公开参数完成，例如 Modal 的 `confirmButtonProps`；明确支持的 action props 仍可显式指定 submit。
+- 解析默认参数后仍执行组件约束：Form 强制禁用不能被 `disabled={false}` 解除，loading 阻止重复操作，readOnly 锁定业务值。复合字段按需用 `FieldScope` 隔离内部搜索和操作控件，避免误用父字段的 id、required 或 FormData 名称。
+
+公开入口与内部控件的分层可参考 [Button](src/button/button.tsx)，共享默认参数和状态归属可参考 [InputSearch](src/input/group.tsx) 与 [SplitButton](src/button/group.tsx)。不要让内部实现重新调用公开入口而隐式接入配置，也不要为了这项能力给全库增加 HOC、深合并或另一套状态管理。
+
+### Context 与生命周期
+
+默认参数使用独立的 `ComponentDefaultsContext`，不加入主题和语言的 ConfigContext；Provider 按输入引用缓存合并结果。配置适合低频区域约定，不提供按组件订阅，更新 Button 默认值仍可能使其他默认参数消费者重新渲染。没有实际测量证据时，不为此增加订阅存储。
+
+配置对象按不可变数据处理：外部静态配置可以复用，动态配置更新时创建新对象，并按需使用 useMemo 稳定引用；不支持对原对象的深层原地修改进行监听。
+
+Confirm、Message 和 Notification 在请求创建时读取调用区域的默认参数，保存本次合并选项；配置更新不能改变已有请求的操作选项、重启计时器或重复创建任务。服务正文中的公开组件继续继承调用区域当前的默认配置、主题和语言。LoadingBar 的 active / progress 由任务拥有，同一批并发任务使用首个任务的展示配置和主题，全部结束后下一批读取最新配置；独立 LoadingBarProvider 的显式参数优先于区域默认值。所有状态都必须隔离到 Provider / 请求，禁止在模块全局保存跨 SSR 请求共享的可变状态。
+
+服务的主题传递容器不能占据普通文档流。即使尚未展示服务，也要验证 Provider 放进 Grid / Flex 不会插入空白格或间距；需要 DOM 祖先传递变量时使用不产生布局盒的容器。
+
+### 新增或修改支持时的检查
+
+1. 同步 `ComponentPropsMap`、`LeafComponentDefaults`、公开入口解析及公共类型导出，保持名称与 Props 对应；确认根入口、子路径和内部实现的导出边界。
+2. 检查所属复合组件与所有内部使用方，明确哪些继承、哪些隔离、状态由谁持有。特别检查区域 Input 的只读 / 密码类型 / id、Button 的 submit / loading / disabled 是否误伤内部操作。
+3. 按改动范围覆盖嵌套与实例优先级、有效空值、对象替换、`null` 清除、配置更新时的 DOM 身份 / ref / 焦点与非受控值，以及表单提交 / reset / FormData。保留缺少必填项、错误组件属性及判别联合的编译期反例，不为每个普通属性重复编写同构测试。
+4. 涉及浮层、状态或模块依赖时，补充 SSR / hydration、局部主题与 Portal、内部操作和样式按需加载验证。具体运行范围见 [QUALITY.md](QUALITY.md)。
+5. 同步中英文说明、可运行示例及 API / AI 文档。移动实现到内部控件后，保留清晰的 Props 类型标注，并检查 API 生成器仍能读取原有内置默认值，不能把区域覆盖写成内置默认值。
+
 ## 公共契约与生成资源
 
 Form 的 disabled 是独立的上下文，内部控件不能用 disabled=false 覆盖它。FormField 的 required、id、labelId 与 error 只关联字段本身；CheckboxGroup、Transfer、Upload 等复合字段使用 FieldScope 隔离内部按钮、搜索框与选项，用整体值参与原生校验。readOnly 锁定业务值，inputReadOnly 只禁止键入。业务错误的代理字段聚焦需要转交给可见控件。
@@ -125,4 +200,4 @@ API 生成器读取 TypeScript 声明，保留文档中的说明和默认值，
 
 `pnpm design:export` regenerates the documentation's DTCG/legacy tokens, editable SVG sheets and local Figma plugin from `colors.ts`, `color-recipes.ts` and `density.ts`. Validate with `pnpm --filter @ifhover/leaf-ui exec node scripts/verify-design-resources.mjs` and `node --check design/figma/code.js`. Static runtime palettes regenerate with `pnpm --filter @ifhover/leaf-ui generate:palette`; the library build rejects stale palettes.
 
-`DESIGN-STANDARDS.md` defines state and geometry rules. `ACCESSIBILITY.md` records executed browser coverage and pending device/screen-reader acceptance. Both guides and the workbench are available in Chinese and English documentation. Automatic screenshot baseline comparison remains deferred.
+`DESIGN-STANDARDS.md` defines state and geometry rules. `ACCESSIBILITY.md` records executed browser coverage and pending device/screen-reader acceptance. The public documentation includes a bilingual visual and interaction guide; detailed acceptance evidence stays in the repository. Automatic screenshot baseline comparison remains deferred.
diff --git a/packages/react/FILELIST-REFRESH.md b/packages/react/FILELIST-REFRESH.md
new file mode 100644
index 0000000..366f314
--- /dev/null
+++ b/packages/react/FILELIST-REFRESH.md
@@ -0,0 +1,23 @@
+# FileList 重写与组件移除
+
+开发分支：`codex/file-list-refresh`。本说明供源码维护者准备下一次发布使用，不属于在线更新记录；当前改动尚未发布。
+
+## 兼容性与迁移
+
+- 移除 `ImageCropper` 以及 `CropArea`、`ImageCropperHandle`、`ImageCropperProps`、`ImageCropResult` 类型。
+- 移除 `SignaturePad` 以及 `SignaturePadHandle`、`SignaturePadProps`、`SignaturePoint`、`SignatureStroke` 类型。
+- 移除 `@ifhover/leaf-ui/image-cropper`、`@ifhover/leaf-ui/signature-pad` 及各自的 `/style.css` 子路径，中英文文档、示例、菜单、组件总览和 AI 导出入口同步移除。
+- 不再依赖 `react-image-crop` 和 `signature_pad`。原有正式更新记录和稳定版快照保留发布时的内容。
+- `FileList`、`FileItem`、`FileListProps` 和现有公开参数保持不变；默认仍为 `text`，继续支持 `picture`、`picture-card` 及 Upload 的取消、重试操作。
+- FileList 内部布局和样式已重写。业务若依赖内部 class 或 DOM 结构覆盖样式，需要重新检查；建议通过公开参数和 `renderActions` 定制。
+- 移除操作由 `onRemove` 的调用方更新 `items`。异步请求期间禁止重复提交，拒绝信息只出现在对应文件行；失败后可重试。
+
+包含组件删除，下一次正式发布必须说明兼容性变化并按 [发布流程](../../DEVELOPMENT-WORKFLOW.md) 选择版本、同步中英文更新记录。本轮不提升组件版本，不合并到 `main`，不发布 npm 或部署正式文档。
+
+## 视觉与交互
+
+普通列表采用共享外框和行分隔线。图标、文件信息与操作区分列对齐；类型与可选大小显示在名称下方，长名称省略并保留完整 `title`。操作按钮和下载链接使用相同尺寸，窄屏时操作区可换行。图片卡片使用固定比例的预览和底部操作区，缩略图失败回退为类型图标。
+
+状态文字、进度和错误位于文件信息列，不影响其他文件的对齐。样式继承主题、圆角和区域密度，适配暗色、RTL、系统减少动态效果与强制颜色模式。图片组预览与音视频预览保留。
+
+验收结果见 [QUALITY.md](QUALITY.md) 中的本轮记录；详细日志与截图放在被 Git 忽略的 `.quality/` 中。
diff --git a/packages/react/QUALITY.md b/packages/react/QUALITY.md
index 45db9d5..4da6cc9 100644
--- a/packages/react/QUALITY.md
+++ b/packages/react/QUALITY.md
@@ -2,6 +2,325 @@
 
 面向源码维护者。新增能力必须验证用户行为、公开产物和相应文档，不能仅以组件数量或测试数量判断成熟度。审计对应清单见 [AUDIT-IMPLEMENTATION.md](AUDIT-IMPLEMENTATION.md)。
 
+## Tailwind CSS 配置与主题变量复用（2026-10-16）
+
+新增 `@ifhover/leaf-ui/tailwind`（Tailwind 3 preset，ESM / CommonJS 与声明）和 `@ifhover/leaf-ui/tailwind.css`（Tailwind 4 的 `@theme inline`）。两个入口从同一份语义变量映射生成，覆盖颜色、圆角、间距、密度、控件高度、字体、阴影、动效和层级，不依赖 Tailwind 运行时。preset 只扩展主题，保留应用默认配置；官方 Tailwind 3 `Config` 类型可直接接受。指南在中英文“个性化”导航中提供版本配置、工具类、Preflight、透明度、扫描、Portal 和静态断点边界；Tailwind 3 使用完整颜色变量，不支持颜色透明度修饰符，Tailwind 4 沿用原生修饰符。
+
+浏览器验收发现派生间距继承根节点已计算的值，紧凑区域的 `p-leaf-md` 因而仍为 16px。将 xs / sm / md / lg / xl 间距派生移到每个 `data-leaf-scope` 内重新计算后，紧凑区域正确使用 12px，显式主题覆盖继续优先。
+
+类型检查、库和双语文档构建、84 个公共 JS 子路径与全部 CSS 产物检查通过。组件 62 文件 / 418 项单测、13 项发布规则、23 项文档与 9 项 Skill 检查通过；文档测试新增两个版本的实际编译和官方 Config 类型检查。隔离安装 Tailwind 3.0.24 / 4.0.17 及工作区的 3.4.19 / 4.3.3 均通过全部映射和文档示例编译。实际 tarball 的 ESM / CommonJS preset、CSS 导出、声明消费及无 Tailwind 运行时依赖验证通过。
+
+Chromium / WebKit 的 12 个场景通过：两个版本分别检查三层区域主题、颜色与密度切换、圆角、控件高度、字号行高、关闭动效及减少动态效果，另检查中英文 1440px 浅色 / 375px 深色文档。Tailwind 4 半透明色随区域颜色变化，文档无页面横向溢出或脚本错误，已查看桌面、窄屏与主题夹具截图。Firefox、真机与读屏未执行。完整 lint 仍被原有 Chrome / Edge / Firefox / Safari 四个 SVG 缺少可访问标题阻断；本轮代码的定向 Biome、SCSS 格式及差异检查通过。
+
+证据位于根目录 `.quality/tailwind/`，包括 `build-final.log`、`typecheck-final.log`、`test.log`、`docs-test-final.log`、`earlier-versions.log`、`browser-final.log`、`browser-results.json`、tarball、类型消费夹具和截图。改动保留在开发分支，保留已有工作区内容，未合并、发布 npm 或部署正式文档。
+
+
+## 基础样式自动加载与服务端渲染指南（2026-10-16）
+
+浏览器 ESM / CommonJS 的组件实现自动引入共享 foundation CSS，再引入自身 CSS；不在纯 re-export 包装层引入样式。主题变量和公共浮层跟随使用到的组件加载，Message / Confirm / Notification / LoadingBar 仍由各服务实现带入，单独使用 Button 不加载全部服务样式。兼容的 styles.css 通过同一 foundation 文件去重，完整静态入口与无 CSS 的 Node 模块图保留。源码映射按两行 CSS 导入修正。
+
+中英文快速开始、安装示例、README 和相关组件说明移除必需的 CSS 导入。指南改名为“服务端渲染”，中英文菜单保留 SSR 副标题；只说明 Next.js App Router 的客户端边界、Pages Router 的 Webpack transpilePackages 配置、TanStack Start 的根路由和首屏样式，以及初值一致与自建 SSR 的必要差异。
+
+pnpm build、typecheck、test 通过：62 个组件测试文件 / 418 项测试、13 项发布规则、20 项文档与 9 项 Skill 检查。包验收覆盖 83 个公共 JS 子路径、ESM / CommonJS SSR、自动基础样式、两种格式的源码映射及 Vite / Rspack 共 26 个生产 CSS 场景；未使用组件和纯辅助函数不引入主题 CSS，兼容的显式 styles.css 不重复基础变量。
+
+实际消费当前打包产物，Next.js 16.4.1 App Router（Turbopack）、Pages Router（Webpack + transpilePackages）与 TanStack Start 1.169.2 / Vite 8.3.4 均在没有手动 CSS 导入时生产构建成功，HTTP 首屏 HTML 包含组件和 CSS 链接。在内置 Chromium 浏览器中完成三者的按钮水合交互，默认高度均为 36px；Start 的 Message、Select 浮层正常，三者无控制台警告或错误。文档中英文桌面、375px 窄屏和深色外观检查通过，未出现页面横向溢出，已查看截图。框架 fixture 与日志位于根目录 .quality/automatic-styles-ssr-docs/，Next.js fixture 沿用 .quality/pages-router-css-probe-20261016/。
+
+pnpm check 仍被本轮范围之外的 Chrome / Edge / Firefox / Safari 四个 SVG 缺少可访问标题阻断；未修改这些文件。额外体积检查仍有既有超预算：同一编译组件在原样式生成器下，Table 适配器 JS / 常见表单 JS 分别为 93,242 / 85,788 字节 gzip；自动样式版本为 93,238 / 85,783 字节，原有 80 / 64 KiB 预算未放宽。表单 CSS 从 14,600 减为 14,420 字节，仍略高于 14 KiB 预算；整库 CSS 从 42,377 减为 41,759 字节。独立 Button 从不含基础样式的 2,495 字节增至含基础样式的 6,375 字节；测量为自动引入的共享 foundation 单独计入预算，未把它计作组件规则膨胀。对比数据见 bundle-comparison.json。
+
+本轮未执行 Firefox / WebKit、真机或读屏验收，未合并 main、发布 npm 或部署正式文档。改动在 codex/automatic-styles-ssr-docs，保留工作区原有改动。
+
+## 自定义 JSON 翻译与语言链（2026-10-16）
+
+ConfigProvider 接受 `locale` 字符串或只读语言链，以及按语言代码索引的 `translations` JSON。词条逐项回退，最后使用原始内置英文；不隐式补充地区语言。嵌套资源按语言、分组和词条合并，显式语言链整体替换，空字符串保留。实例及区域组件参数仍优先。首项决定 `lang` 和 Intl 日期、数字格式，回退句子的复数规则使用实际来源语言。资源按 Provider 隔离，不写入跨请求的全局注册表。
+
+内置简体、繁体、英文共 235 个词条，覆盖默认文本、操作名称与读屏播报；动态完整句子使用 ICU。包提供完整英文 JSON、公共 `LeafTranslation` / `LeafTranslations` 类型、JSON Schema 和 `leaf-ui-check-translations` 检查命令。生成声明不依赖 JSON 导入配置。修正 Rslib 无 bundle 的 JSON 转换在 CommonJS 中默认导出失效的问题，构建后显式生成对应的数据模块。静态文本不引入 ICU；动效 Context 定义与默认语言资源拆开，Button 单独引入不包含语言包或 ICU。
+
+最终全库 62 文件 / 411 项单测、组件与文档类型检查、20 项文档与 9 项 Skill 测试、本轮代码范围的格式与差异检查通过。组件产物检查验证 83 个公共 JS 子路径、JSON / Schema / CLI、ESM / CommonJS SSR、无可选表格引擎的消费方声明及 Rspack / Vite 自动样式裁剪。中英文文档和 202 篇 AI Markdown 构建通过；历史快照测试确认只复制快照自身的语言资源，旧快照不混入新词条。较早的全量 lint 通过；末次全量 lint 发现另行新增的 `docs/public/browsers/` 下 Chrome、Edge、Firefox、Safari 四个 SVG 缺少可访问标题，未通过。保留这些本轮范围之外的文件，组件源码、脚本与本轮示例共 331 个文件的定向 Biome 检查通过，日志为 `lint-last.log` / `lint-scoped.log`。
+
+Chromium / WebKit 的 28 项语言与选择器回归通过；最后的 Intl 与 Context 优化后，另执行 8 项语言、区域 / 嵌套 / Portal 动效回归全部通过。覆盖资源继承、英文兜底、运行时切换、已打开的 Message / Notification、Confirm、日历 Intl 月份、12 小时制自定义时段输入、SSR / hydration 和 axe 检查。实际 ConfigProvider 与翻译 API 页面在 Chromium 的中英文 1440px 浅色 / 375px 深色、WebKit 的中英文 375px 深色验收通过，JSON 下载与源码一致，无页面横向溢出或脚本错误；已查看桌面与窄屏稳定截图。测试浏览器需显式指定站点语言，窄屏外观先由站点按钮切换；截图等待 Confirm 退场卸载。
+
+额外体积验收未通过：可选 DataTable 适配器为 91.06 KiB gzip，超过原有 80 KiB 预算（本轮开始时已为 80.36 KiB）；完整常见表单为 78.14 KiB，超过 64 KiB。ICU 与更完整的语言资源增加了含动态文案组件的体积，没有放宽预算，不能将全套检查报告为全部通过。独立 Button / 原生 Table / 整库 JS 分别为 3.04 / 10.60 / 212.86 KiB gzip；普通 Button 未携带 ICU。
+
+证据保存在 `packages/react/.quality/locales/`，包括 `unit-final.log`、`browser-second.log`、`browser-final.log`、`docs-browser-final.log`（Chromium 四组）、`docs-webkit-final.log`、构建与类型日志、稳定截图及 `bundle-before.json` / `bundle-after.json`。一次 WebKit 文档复拍遇到临时页面不可用，随后使用新浏览器上下文完整复验中英文页面通过。Firefox、实际 Next.js 应用和读屏软件未执行本轮验收。改动保留在开发分支，未升版、合并或正式发布。
+
+## 多选单行布局与 TreeSelect 交互（2026-10-16）
+
+Select、TreeSelect 和 Cascader 共用选中标签布局，新增 `tagWrap={false}` 单行模式；`maxTagCount="responsive"` 同样按宽度折叠，TreeSelect 与 Cascader 补齐该选项。默认仍允许换行。长首项保留可省略的标签与删除操作，空间不足时只显示 `+N`；搜索文字、清除与展开按钮参与宽度预算，折叠不改变 FormData。标签高度跟随当前控件高度减 8px，横向间隔 6px，三个组件统一留白。自定义标签只挂载一次，响应式重新显示的标签不重播进入位移动画。
+
+TreeSelect 在自身保留非受控展开状态，浮层卸载、搜索及重开不会重置手动展开；受控 keys 仍由调用方决定，已加载的子项在重开后继续复用。勾选模式支持整行与 Enter / 空格操作，不可选分类行可展开，箭头只展开；扩大展开按钮的命中范围，保留禁用与内部交互元素约束。移除标签后聚焦输入且不误开浮层，控件边缘也能触发。单选重开保留原生文本与光标，首次编辑才替换搜索。Cascader 搜索区与下方列表增加 8px 间距。
+
+最终全库 60 文件 / 394 项测试、组件与文档类型检查、20 项文档测试、格式与差异检查通过。库、文档和 AI Markdown 构建通过；产物检查覆盖 83 个子路径、ESM / CommonJS SSR、类型和 Rspack / Vite 自动样式裁剪。
+
+Chromium / WebKit 最终完整运行 24 项用例全部通过，包括三档尺寸、紧凑、RTL、窄宽度、长标签、自定义标签、数量折叠、搜索与键盘删除、只读、原生提交 / reset、展开记忆、整行操作、搜索间距及已有 Select / AutoComplete 回归。首次整页文档检查发现宿主 `[hidden] { display: none !important }` 导致折叠标签测量为零、触发重复更新；改为临时移除并还原隐藏属性，夹具加入同等宿主规则后通过。已有空面板 axe 检查偶发测到淡入中的透明颜色，等待 opacity=1 后完整复验通过；未放宽对比度标准。Firefox 未执行本轮验收。
+
+实际中英文文档在 1440px 浅色、375px 深色共 12 组验收通过，检查三类选择器的单行标签、浮层、树展开记忆与级联搜索，未发现页面横向溢出或脚本错误；已查看桌面树选择和窄屏深色级联截图。证据在 `packages/react/.quality/multi-select/`，包括 `browser-verified.log`、`docs-browser.json`、构建 / 类型 / 单测日志及文档截图。3000 本地预览已更新，改动保留在开发分支，未升版或正式发布。
+
+## Select 搜索稳定性与建议面板统一（2026-10-16）
+
+可搜索的单选 Select 在展开时继续通过同一个原生 input 展示已选文本，不再清空 input 后换成覆盖层；点击保留原生光标位置，首次输入、粘贴或输入法编辑才开始新的搜索，关闭后恢复选中值。搜索草稿为空与尚未搜索分别处理，保留多选、清除、原生 FormData 和用户事件。中英文 Select 页面移除局部主题示例及其未使用源码。
+
+AutoComplete 移除独有的左侧标记与额外缩进，选项内容、间隔、圆角及移动背景边框与 Select 一致。修正候选态静态背景优先级过高而叠加移动背景的问题。两者共用上图标、下文字的加载与空状态；图标不参与可访问名称，加载动画响应系统减少动态效果及区域 motion 配置。没有可选项时，状态提示位于空 listbox 之外，避免被错误识别为选项或违反 listbox 子元素语义。
+
+全库 60 个文件 / 391 项行为测试通过；随后调整空面板的 ARIA 结构，再执行两个组件的 16 项行为回归通过。组件与文档类型检查、20 项文档测试、格式和差异检查通过；最终组件包和中英文文档构建通过，验证了 83 个公开子路径、ESM / CommonJS SSR 及自动样式。
+
+Chromium / WebKit 分批通过 16 项定向浏览器检查，覆盖三种尺寸的重开光标与几何稳定性、选项布局与背景、加载与空状态、WCAG axe、减少动效，以及关联选择组件的中性候选态。初跑发现的测试模块加载问题、背景优先级冲突和空 listbox 语义均已修正并定向复验。中文 / 英文的 1440px 浅色与 375px 深色实际文档操作通过，无运行错误或页面横向溢出；已查看选项、空状态及加载状态截图。证据位于根目录 `.quality/select-refinement/`，浏览器最终状态回归为 `browser-feedback-final.log`，布局与光标通过记录为 `browser-final.log` 中的八项，文档结果为 `docs-browser.json`。3000 原有预览已更新，Firefox 未执行；本轮未发布。
+
+## 文档统一宽度与配置入口简化（2026-10-15）
+
+组件、指南、API、总览与更新记录使用相同正文列宽和留白，取消按演示内容决定宽度的规则；更新记录在平板与桌面保留同宽的菜单占位列，首页维持独立布局。桌面正文最大 1200px，水平留白 32px；中小屏留白 24px。ConfigProvider 中英文页面只保留多语言、主题与外观、组件默认值三个主章节，默认参数示例展示日期与输入占位文字、按钮样式及实例覆盖，说明组件命名与继承规则。API 生成器支持子级标题，连续两次同步不改变页面结构或内容。
+
+移除公开 LeafMessages、messages / textMessages 覆盖参数、对应参考页和 AI 发现入口。内置简体、繁体、英文翻译和嵌套继承保留，未知语言的内置文案统一回退英文；业务文案通过组件实例或 components 配置。卡片式与 Card 内嵌 Tabs 均确认按下不缩放，去掉标签按钮无用的 transform 过渡，选中指示器和面板切换动画保留。迁移说明位于 DEVELOPMENT.md，历史快照测试仍保留旧类型。
+
+全库 60 个测试文件 / 387 项行为测试、组件与文档类型检查、20 项文档测试及 9 项 Skill 测试通过。库构建、83 个公开子路径、ESM / CommonJS SSR 和自动 CSS 产物验证通过；中英文生产文档与 AI 索引构建通过。Chromium / WebKit 检查中英文六类页面的 1920 / 1440 / 1024 / 375px 列宽一致与无页面横向溢出，验证导航往返、默认占位、实例覆盖、清除、日期面板、语言切换、两类 Tabs 按压尺寸和深浅外观；查看了桌面与窄屏截图。浏览器证据位于根目录 .quality/config-provider-simplify/，WebKit 最终报告为 browser.json，Chromium 列宽为 chromium-layouts.json，并有两种语言的交互截图；3000 现有预览已验证显示最新内容。Firefox 未执行本轮验收。改动保留在开发分支，未发布。
+
+## ConfigProvider 文档层级与 API 类型链接（2026-10-15）
+
+中英文页面先说明 theme、components、locale 和 density 的用途，再分别展示区域主题、组件默认参数、继承与覆盖、清除继承、内置语言、密度、基础高度和反馈服务。示例只表达各自能力，使用公开布局与表单组件，保留居中和响应式宽度。常用 API 直接展示，配置边界与较长的类型表按需展开；类型标题和锚点仍在折叠区域外。重排前后五组 API 表的属性、类型、默认值和说明逐项一致，完整配置列表仍有 128 项。
+
+文档 rehype 插件将“类型 / Type”列的标点、普通类型和链接合并为一个行内代码容器，链接跟随主题色，保留悬停和键盘焦点反馈。说明列保留 240px 最小宽度，窄屏使用表格内部横向滚动，避免说明过窄而撑高行。该表现层调整适用于所有组件 API，不改变 Markdown 类型表达式和链接目标；维护约定与转换回归同步。
+
+文档类型检查、全仓格式及差异检查通过，19 项文档与 9 项 Skills 测试通过，双语文档构建及 AI 导出成功。Chromium / WebKit 在中文、英文的 1440px 浅色与 375px 深色下共八组实际文档交互检查通过，覆盖区域主题、清除与重置、搜索、继承与覆盖、语言切换、密度与派生高度、Confirm / Message / Notification，以及源码展开、收起和复制一致性。说明列调整后另执行八组 API 定向复验，覆盖类型表达式、主题切换、键盘跳转、折叠表格和 Select / Radio / Form 页面；中英文共 248 个 API 引用目标有效，无页面或示例横向溢出及运行错误。已查看中文桌面、英文窄屏深色与继承示例截图。3000 原有本地文档的中英文定向检查通过，未停止该服务；本轮独立的 4181 验收预览在验收后停止。证据位于根目录 `.quality/config-provider-docs/`，包含构建、类型、格式、文档、Skills、交互与 API 日志、JSON 和截图。Firefox 未执行，本轮仍在开发分支，未合并或发布。
+
+## Tabs RTL 几何测试夹具修正（2026-10-15）
+
+排查此前保留的 `navigation-motion.test.tsx` 失败，确认测试仍以外层滚动 list 模拟选中条的定位容器，而 Tabs 已将选中条和标签放进独立 track。旧夹具没有模拟 track，导致其使用兜底矩形和宽度，错误算出 3 倍缩放及 92px 位移，原有 179px 断言因此失效。按当前真实结构分别模拟外层负 scrollLeft、边框、内层内容轨道与 0.8 倍缩放；保留唯一选中条、切换动画、尺寸刷新及非受控输入状态检查，并补充滚动变化与重新选中后的坐标验证。几何断言使用 0.005px 内的数值比较，避免浮点换算得到 69.99999999999999px 时错误判为宽度不符。
+
+新增真实浏览器回归覆盖 LTR / RTL、线形 / 卡片标签、正负滚动、外层缩放、动态标签宽度与容器宽度；在没有修改 Tabs 运行时或 SCSS 的情况下，Chromium / WebKit 共 8 项全部通过。已查看两种浏览器的 RTL 卡片截图。相关 Tabs 单测 12 项通过，全库 60 个测试文件、381 / 381 项单测通过；组件与测试类型检查、全仓格式及差异检查通过。原有历史验收记录保留当时的实际结果。本次仅修正测试与维护记录，不改变公共 API，无需更新使用文档或稳定更新记录，未合并或发布。证据位于根目录 `.quality/tabs-rtl-diagnosis/`。
+
+## ConfigProvider 全组件默认参数（2026-10-15）
+
+分批将区域默认参数扩展到全部公开 UI 组件、命名空间部件及 Confirm API，共 128 个配置键；ConfigProvider、服务 Provider 与兼容别名按基础设施或别名规则处理。每批复查内部复用、必填项、模式与值的关联、泛型和生命周期。公开入口读取默认参数，内部实现控件不受其他组件配置影响；InputSearch / SplitButton 明确共享 Input / Button 配置。Table 的 scrollRef、DataTable 的 tableRef 等命令式引用保留在实例，编译期覆盖完整组件清单及非法配置反例。
+
+FormList、VirtualList 和 DataTable 使用与业务数据类型无关的安全投影，保留实例的泛型和 ref 推断；Transfer 内部的虚拟列表独立于公开 VirtualList 配置。DataTable 的通用参数类型独立于可选 TanStack 依赖。ErrorBoundary 保留公开类实例与 ref，并按上次生效的 resetKeys 判断重置。Confirm / Message / Notification 在调用时保存选项，正文内组件继续继承调用区域的当前配置；LoadingBar 同批任务沿用首个任务的展示配置，主题传递容器不产生 Grid / Flex 布局盒。中英文说明、服务与表单示例、关联 API、AI 文档及组件编写规则同步。
+
+类型、全仓格式与差异检查、组件包和双语文档构建通过。全库单测 380 / 381 通过，唯一失败仍为既有 Tabs RTL 几何断言（`src/tabs/navigation-motion.test.tsx:66`，期望 179px、实际 92px）；前一批还原本次内部按钮改动后已复现同一失败，基线证据为 `.quality/component-defaults-tabs-baseline.log`。新增跨组件回归 11 项通过；18 项文档与 9 项 Skills 检查通过。包验收覆盖 83 个公共 JS 子路径、全部 CSS 入口、ESM / CommonJS SSR、根入口与子路径的私有实现不外露、无可选 TanStack 时的声明消费，以及 Vite / Rspack 自动样式和裁剪。
+
+Chromium / WebKit 的 22 项浏览器检查全部通过，覆盖基础继承和清除、非受控状态、复合控件隔离、字段与展示组件、Card 内嵌 Tabs、Transfer 虚拟列表、服务内容和加载条任务；包括 Grid 中无服务占位空格。Firefox 未执行。中文 / 英文分别在 1440px 浅色与 375px 深色四组实际文档中操作新示例和 Confirm / Message / Notification，无页面溢出或运行错误；238 个跨组件 API 链接均有效，已查看中文桌面与英文窄屏深色截图。
+
+额外包体积检查未通过：整库 CSS 为 41.08 KiB gzip，超过现有 41 KiB 预算；与本轮开始备份相比没有 SCSS 改动，未调高预算。各 JS 预算通过，Button / Table / DataTable 适配器 / Form / 全库分别为 4.34 / 11.05 / 79.42 / 62.25 / 198.72 KiB gzip。因此不能将全套检查报告为全部通过。实际数据、构建日志、浏览器记录和文档截图位于根目录 `.quality/component-defaults-all/`；准确体积数据见其中的 `audit.json`，原有 bundle-report.json 未因失败检查而更新。最后补齐命令式引用边界后复验类型、格式、库与文档构建。本轮未修改稳定更新记录，未合并、升版、发布或部署正式站点。
+
+## ConfigProvider 首批组件默认参数（2026-10-15）
+
+### 默认参数边界修复复验
+
+公开组件与内部控件分层：其余组件内部的 ButtonControl、InputControl、SelectControl 和 ModalBase 不自动读取对应公开组件的默认参数，继续继承主题、语言、密度和既有表单约束。它们只从实现文件导入，未加入公开入口。SplitButton 先统一解析 Button 默认参数，两侧共享交互状态，菜单按钮不继承提交类型、主操作回调或标识；InputSearch 明确共享 Input 配置并拥有内部操作。修复全局 Button submit 意外提交上传表单、分裂按钮显式 loading=false 后两侧不一致、Input 默认只读 / 密码类型影响内部搜索、Select 默认状态影响分页条数选择等问题。
+
+组件名与完整 Props 通过内部类型映射绑定；编译期覆盖错误组件配对、多余属性和 Select 单 / 多选推断。Select options、Modal open 不再允许配置为默认参数，继续保持 JSX 必填。增加单组件配置项 null 清除继承的能力，验证不修改父级、保留其他配置引用、下层重新配置、InputSearch 的双配置来源、输入实例保留与原生 reset。中英文使用说明、独立的清除示例、维护约定及 AI API 同步。
+
+全量组件单测 369 / 370 通过，唯一失败为既有 Tabs RTL 几何断言（期望 179px，实际 92px）。在忽略目录内将 Tabs 的本次内部按钮改动还原为公开 Button 后，复现同一失败，证据为 `.quality/component-defaults-tabs-baseline.log`；未将它记为通过或修改 Tabs 的定位逻辑。首轮受影响的 6 文件 / 73 项定向检查通过；补充 Modal / Confirm 操作按钮不受全局禁用和 loading 影响后，最终 5 文件 / 66 项定向复验通过。类型、全仓格式、差异检查、组件包和双语文档构建通过；18 项文档与 9 项 Skills 检查通过。包验收覆盖 ESM / CommonJS、SSR、根入口与子路径的共享配置和 null 清除、83 个公共子路径、内部控件不外露、自动样式与 Vite / Rspack 裁剪。
+
+Chromium / WebKit 的 16 项浏览器检查全部通过，包括两种外观的 axe、新增的区域清除、非受控编辑和 reset、分裂按钮、上传文件选择与提交次数、分页条数和命令面板编辑。Firefox 未执行。中文 / 英文在 1440px 浅色、375px 深色四组实际文档检查通过，涵盖清除示例、源码展开 / 收起 / 复制、API 锚点和主题切换，无溢出及脚本错误；已查看中文桌面与英文窄屏清除示例截图。日志为根目录 `.quality/component-defaults-*-fixes.log`，文档脚本、报告与截图位于 `.quality/component-defaults-fixes/`。本轮修复仍在开发分支，未合并、升版或发布。
+
+### 初次接入记录
+
+ConfigProvider 新增有类型的 `components`，首批覆盖 Button、Input、InputSearch、Select 和 Modal。默认参数使用独立 Context，嵌套按组件、按属性继承；实例优先，只有 undefined 使用默认值，对象 / 数组 / className / 回调整体替换。无补充时复用原 props，无有效区域覆盖时复用父级配置及未变条目。Select 的模式和值回调保留实例类型约束，key / ref 不支持配置，必填 JSX 参数保持必填。
+
+InputSearch 先解析共享 Input 与自身配置，再统一拥有输入值、重置、搜索回调、内部尺寸与禁用；原生搜索按钮类型固定，避免 Button 默认 submit 引起额外提交。Modal 的默认 container 在 Portal 选择前解析；Confirm、CommandPalette 和 FileList 通过内部 ModalBase 保持各自弹窗约束。Modal / Confirm 的操作按钮默认 type=button，显式 action props 仍可配置 submit。中英文说明、可运行示例、公共类型、AI 文档和维护约定同步；未修改稳定更新记录。
+
+类型检查、全仓格式检查、差异检查、库和文档构建通过。11 个相关组件测试文件分批验收覆盖 135 项用例；最后涉及组合按钮约束的 5 文件 / 61 项复验通过。包括配置更新不重置输入、原生 FormData / reset、事件与对象引用、强制禁用、ref、Portal、受控输入、SSR 水合和两类 Context 的订阅隔离。编译期契约验证 Select 模式相关参数、必填项及 root / subpath 类型导出；18 项文档检查通过。包验收覆盖 ESM / CommonJS、根入口配置与 Button 子路径共享上下文、SSR、83 个公共子路径、自动样式及 Rspack / Vite 裁剪；构建后的默认参数模块没有组件运行时 import。
+
+Chromium / WebKit 的 12 项新交互用例通过，覆盖深浅外观、嵌套尺寸、配置更新、表单重置、多选搜索、Portal 和弹窗焦点 / Escape，两个外观下 axe 检查无违规。初跑 10 / 12：测试页的全局 100vh 规则错误应用到嵌套 Provider，导致 WebKit 下拉项位于视口外；焦点测试另误假设 Safari 鼠标点击必定聚焦按钮。修正新夹具的嵌套高度、用键盘聚焦并激活弹窗后，完整复验通过。最终按钮类型约束新增后，两种浏览器的 6 项相关复验通过。日志为根目录 `.quality/component-defaults-browser.log`、`component-defaults-browser-recheck.log` 和 `component-defaults-browser-final.log`；Firefox 未执行本轮验收。
+
+Chromium 中英文 1440px / 375px 四组实际文档验收通过，检查新示例的清除、搜索选项、默认 Modal 操作、三层继承、源码展开收起与复制、跨页面 Props API 锚点及主题切换；无页面 / 预览溢出或脚本错误。已查看中文桌面默认参数和英文窄屏深色继承截图，证据为根目录 `.quality/component-defaults/docs.json`、`docs-smoke.log` 和 `docs-*.png`，库与文档构建日志也在该目录。3000 本地预览已更新，改动仍在开发分支，未合并或发布。
+
+## Pagination 描边默认样式与 API 整理（2026-10-15）
+
+新增 `variant="outline" | "ghost"`，默认使用表面底色与中性边框；描边按钮通过文字和边框变色反馈，无边框样式保留中性背景。两种样式沿用 30 / 36 / 42px 控件高度、基础圆角与移动选中背景，按下时不再缩放。按钮底色与选中背景分层，避免描边表面遮住移动高亮；禁用、深色、区域主题和减少动效继续生效。分页根节点显式同步方向，修复构建工具把 `:dir(rtl)` 转为语言选择器后箭头不翻转的问题。
+
+`showTotal` 支持布尔值开启默认统计，保留自定义范围渲染并同步中英繁体文本。条数选项忽略无效值、去重并包含当前条数。跳转输入支持回车或离开分页区域时提交，同一次输入不重复触发回调；点击分页内部控件优先执行其操作，指针捕获兼容 Safari 不聚焦被点击按钮的行为，避免失焦更新移除按钮后吞掉点击。保留从 1 开始的受控与非受控页码、统一的 `onChange(page, pageSize)`、条数变化时保留数据位置的约定。DataTable 已知与未知总数的分页均支持样式与显式尺寸。
+
+中英文示例分为按钮样式、尺寸、数据控制、简洁与禁用四部分，使用 Space 和 Text，基础示例只比较默认与无边框外观。API 拆分受控值与初始值，补全真实默认值及行为说明；表格分页 API、设计规范、AI Markdown 和总览缩略图同步。
+
+类型检查、全仓格式、差异检查、组件与文档构建通过；公开 ESM / CommonJS、SSR、声明与自动样式检查通过。Pagination / DataTable 的 38 项相关单测和 17 项文档测试通过。Chromium / WebKit 最终一次完整运行的 12 项分页验收通过，覆盖深浅外观、三档尺寸、区域高度与圆角、RTL、键盘、禁用、跳转与条数回调、375px 紧凑布局、减少动效及 axe。早期检查发现的方向与 Safari 点击问题已修复；WebKit 几何等待延长到 20 秒，关闭动效断言允许多个均为零的过渡值，未放宽几何或行为断言。Firefox 未执行本轮验收。
+
+实际中英文文档在 1440px 浅色与 375px 深色的四组验收通过，涵盖全部四个预览、独立选择、条数切换、源码展开 / 收起、复制一致性和主题切换，无页面或预览横向溢出及脚本错误。已查看中文桌面样式与英文窄屏深色尺寸截图。证据为根目录 `.quality/pagination/` 中的 `browser.log`、`docs-smoke.log`、`docs.json`、构建日志及文档截图；浏览器夹具截图位于 `packages/react/.quality/pagination-*.png`。3000 本地文档预览已更新，改动仍在开发分支，未升版或正式发布。
+
+## 默认控件高度统一为 36px（2026-10-15）
+
+全局样式与 ConfigProvider 舒适密度的默认高度统一为 36px，小、大尺寸派生为 30 / 42px；紧凑密度为 30px。浮层选项随区域基础高度减 4px，默认 32px、紧凑 26px，保留 24px 下限和显式主题覆盖。小、大高度在各区域重新派生，修正紧凑区域继承根节点旧尺寸的问题。Select、AutoComplete、Tree、TreeSelect 与 Transfer 的虚拟行高估算同步区域高度，实际行继续被测量。共享选项和时间列的上下留白随高度收敛；验证码格与树行使用边框盒尺寸；颜色选择器、分段控制器及卡片式 Tabs 避免文字、留白与边框额外撑高。CommandPalette 选项沿用共享行高，独立图形、头像和滚动步长保留各自尺寸。
+
+中英文主题、设计规范、SSR 与虚拟列表 API 说明、README、开发约定和设计资源已同步。历史发布记录与此前验收记录保持原有数值。
+
+类型、全仓格式、差异检查、组件包与双语文档构建通过；公开 ESM / CommonJS、SSR、类型、83 个组件子路径及自动样式导入验证通过。DTCG / Tokens Studio、SVG 与 Figma 资源检查通过；文档与 Skills 的 26 项检查通过。组件单元测试为 336 / 337，通过原 40px 密度复现确认剩余 Tabs RTL 几何模拟失败与本次高度变更无关；本次相关组件的 8 个测试文件 / 51 项定向复验通过。
+
+新增 Chromium / WebKit 的 10 项区域几何用例通过，验证 19 类控件的三种尺寸、紧凑、深色、RTL 和自定义高度，以及 Select、AutoComplete、Cascader、TreeSelect、TimePicker 的选项高度与虚拟列表末项可达。实际中英文文档在 1440px / 375px、深浅外观下共 24 组检查通过，按钮、表单、选择器、颜色选择器和树选择默认 36px，下拉项 32px；线形与卡片式 Tabs 的三档高度正确，无页面横向溢出或脚本异常。已查看桌面表单、展开的 Select 和英文窄屏 Tabs 截图，证据为根目录 `.quality/control-height-36/`。
+
+Chromium / WebKit 集成回归初跑 134 / 138，通过更新旧紧凑高度断言与等待浮层几何过渡完成，随后 12 项定向复验全部通过；WebKit 的一次卡片键盘排序失败在未改动排序实现的复验中通过。合计覆盖 140 个不同浏览器用例，包括额外的两项弹窗主题 / 密度验收，不能将定向报告称作一次完整 140 项运行。初始报告与失败证据保留在 `packages/react/.quality/control-height-36-initial.json`、`control-height-36-initial-results/`，完整日志为 `control-height-36-browser.log`，复验日志为 `control-height-36-recheck.log`；定向组件测试日志为 `control-height-36-unit.log`。Firefox 未执行本轮验收。3000 本地文档预览已更新；改动仍在开发分支，未正式发布。
+
+## Tabs 恢复内外递减圆角（2026-10-13）
+
+卡片标签按钮、条目与移动选中背景恢复使用内层圆角，由外栏圆角扣除实际留白和边框派生，最小为零。默认外栏仍为 10px，小、默认、大尺寸内层分别为 7 / 5 / 4px；区域主题、不对称内边距和组件级覆盖继续参与计算。保留 2 / 4 / 5px 外栏留白、12px 标签左右留白、2px 标签间隔、34 / 40 / 46px 整栏高度及中英文双样式尺寸示例。设计约定与中英文指南同步恢复递减规则。
+
+相关格式检查、差异检查和文档构建通过。Chromium 三项既有浏览器回归通过，覆盖 0 / 3px 圆角和不对称间距 / RTL 覆盖。中英文 1440px / 375px 四组实际文档检查通过，确认各尺寸外层与内层圆角、留白和高度、六组尺寸示例、内容切换，无运行错误、栏内纵向溢出或页面横向溢出；已查看中文桌面尺寸截图。证据为根目录 `.quality/tabs-radius-revert/` 和 `packages/react/.quality/tabs-radius-revert-browser.log`。Firefox / WebKit 未执行本轮验收。4180 本地文档已更新，改动仍在开发分支，未正式发布。
+
+## Tabs 中英文尺寸示例双样式（2026-10-13）
+
+不同尺寸示例同时展示线形标签与卡片标签，每种样式分别提供小、默认、大尺寸。宽屏以两列比较样式，窄屏上下排列，组名和尺寸名称明确标注；六组标签独立切换。布局使用公开的 Grid 和 Space，保留简短工具类，预览与展示源码引用同一份示例。中英文章节说明及 AI Markdown 同步。
+
+文档类型检查、相关格式检查、差异检查与文档构建通过。Chromium 的中英文 1440px / 1024px / 375px 六组实际文档检查通过，覆盖双样式各三档尺寸、34 / 40 / 46px 栏高、独立点击与键盘切换、宽屏并排和窄屏堆叠，无运行错误、栏内纵向溢出或页面横向溢出。英文首次检查未显式设置浏览器语言，页面内容为中文；明确中英文浏览器语言后全部通过。已查看中文桌面与英文窄屏深色截图；证据为根目录 `.quality/tabs-variants/docs-smoke-final.log`、`docs-report.json` 及尺寸截图。Firefox / WebKit 未执行本轮文档验收。4180 本地文档已更新，改动仍在开发分支，未正式发布。
+
+## Tabs 卡片标签留白与统一圆角（2026-10-13）
+
+卡片标签栏小、默认、大尺寸的内边距从 3 / 5 / 6px 略减为 2 / 4 / 5px，标签左右留白从 14px 调为 12px，标签间距从 3px 调为 2px。标签栏、标签按钮、条目与移动选中背景统一使用外栏圆角，默认均为 10px，并共同响应区域主题和组件级圆角覆盖。整栏仍为 34 / 40 / 46px，默认内层为 30px；保留按内容收缩、窄容器溢出菜单、阴影绘制空间与切换关闭时的滚动保护。设计约定与中英文指南同步。
+
+组件与测试类型检查、相关格式检查、差异检查及文档构建通过。Chromium / WebKit 的 14 项相关浏览器回归通过，覆盖 0 / 3px 主题圆角、不对称间距与 RTL 组件覆盖、默认尺寸的内容宽度及整栏高度、横纵阴影留白和切换关闭无假溢出。两种浏览器的中英文 1440px / 375px 共八组实际文档检查通过，确认三种尺寸、新留白、内外同圆角、主题与深浅外观、输入状态保留、添加与全部关闭后恢复，无运行错误或页面横向溢出。已查看中文桌面和英文窄屏尺寸截图；证据位于根目录 `.quality/tabs-insets/`，浏览器回归日志为 `packages/react/.quality/tabs-insets-browser.log`。Firefox 未执行本轮验收。4180 本地文档预览已更新，改动仍在开发分支，未正式发布。
+
+## Tabs 卡片标签内容宽度与整栏高度（2026-10-13）
+
+卡片标签栏不再填满可用宽度，默认随标签内容收缩，并在空间不足时保留栏内滚动和更多菜单；正文区域仍使用可用宽度。卡片样式的尺寸现在包含标签栏边框与内边距，默认整栏为 34 / 40 / 46px，内部按钮从基础高度扣除对应留白及两侧边框。默认尺寸的选中层为 28px，上下留白仍各为 5px，保留上一轮的完整阴影绘制范围。卡片标签统一字重 500，避免切换时文字变粗撑宽栏位；添加按钮与整栏同高，线形标签及 Card 内嵌标签布局不变。中英文说明、size API 描述及设计约定同步。
+
+组件与测试类型检查、格式与差异检查、文档构建通过。Chromium / WebKit 的 42 项相关验收均已通过，覆盖三种尺寸的内容宽度及整栏高度、缩窄后溢出与放宽后恢复、切换时宽度稳定、横纵阴影留白、逐帧关闭无假溢出、RTL / compact / 深色、自定义圆角 / 内边距及栏尾操作。初次检查发现选中后的字重会撑宽纵向栏位，已统一字重；WebKit 并行检查出现动画及测量超时，改为串行复验。串行检查通过 41 项，剩余大尺寸宽度检查的 trace 显示结果与原宽度完全相同，但一次测量耗时超过 5 秒；放宽该新增用例的测量等待时间后单独复验通过，未放宽几何断言。日志为 `packages/react/.quality/tabs-card-sizing-serial.log` 和 `tabs-card-sizing-recheck-final.log`。Firefox 未执行本轮验收。
+
+中英文桌面 / 375px 实际文档已在 Chromium / WebKit 验证，最终样式另通过 Chromium 的四组复验；确认三种整栏高度、桌面内容宽度、输入状态保留、添加 / 关闭及重新显示，无运行错误或页面横向溢出。已查看桌面卡片栏和英文深色尺寸截图，证据位于根目录 `.quality/tabs-shadow/card-sizing-*.log`、`sizing-*.png`。4180 本地文档已更新，改动仍在开发分支，未正式发布。
+
+## Tabs 卡片选中层阴影裁剪（2026-10-13）
+
+卡片标签的选中层原本贴着轨道上下边缘，轨道的溢出裁剪截掉了阴影及其细轮廓。轨道现在包含标签栏的实际四侧留白，配合等量负外边距保持标签、栏高与滚动范围不变；边框盒宽度包含这些留白，切换和关闭时仍裁剪移动背景的多余范围。小、默认、大尺寸以及不对称主题间距继续使用现有 token，线形标签不受影响。
+
+组件与测试类型检查、SCSS / 测试格式检查、差异检查和文档构建通过。Chromium / WebKit 的 36 项相关回归通过，覆盖三种尺寸的横纵阴影留白、选中层位置、逐帧切换与关闭无假溢出、真实溢出及更多菜单、栏尾操作同高、RTL / compact / 深色和自定义圆角 / 间距。两种浏览器的中文桌面 / 英文窄屏实际文档检查通过：默认选中层上下各有 5px 绘制空间，栏内无纵向溢出，窄屏仅保留原有真实横向溢出，无页面横向溢出或运行错误。已查看修改前后与深色窄屏截图；证据位于根目录 `.quality/tabs-shadow/`，浏览器回归日志为 `packages/react/.quality/tabs-shadow-browser.log`。4180 本地预览已更新，改动仍在开发分支，未正式发布。
+
+## Card 尺寸对照包含 Tabs（2026-10-13）
+
+中英文尺寸示例改为三张带标题和内嵌 Tabs 的卡片，分别展示小、默认与大尺寸。使用相同的概览与动态内容便于比较标题、标签与正文留白；每张卡片的标签状态独立，代码只配置 Card 的 `size`，展示 Tabs 自动跟随尺寸的能力。通过 Space 组织纵向间距与居中宽度，未增加私有示例样式。尺寸章节说明同步。
+
+文档类型检查、相关格式检查、差异检查和文档构建通过。Chromium 中英文 1440px / 375px 四组实际文档检查通过，覆盖三种标签尺寸、标题与正文间距、单分隔线、边缘对齐、独立切换、键盘激活、深浅外观与自定义主题、无运行错误或横向溢出，并保持其他 Card 示例的切换、输入状态和表单提交正常。已查看桌面与英文窄屏深色尺寸截图；证据位于根目录 `.quality/card-tabs/sizes-tabs-*.log` 和 `docs-*-sizes.png`。4180 本地文档预览已更新，改动未正式发布。
+
+## Card 大尺寸与 size 说明（2026-10-13）
+
+Card 的 `size` 增加 `lg`，默认使用 24px 内容内边距、20px 标题上下留白和 16px 标题字号，内嵌 Tabs 默认跟随大尺寸；显式 `tabs.size` 保持独立，卡片内的表单控件和按钮不受影响。组件级 padding / gap 覆盖继续优先，无标题标签栏从大尺寸标题与对称留白派生 64px 最小高度并保持垂直居中。中英文 API 将“内容间距”改为准确描述内边距、标题字号、标题栏高度及标签默认尺寸，并新增三种尺寸的独立对照示例。设计规范、声明、AI Markdown 文档同步。
+
+组件、测试与文档类型检查、格式及差异检查、文档构建、组件包构建和公开产物检查通过。Chromium / WebKit 的 6 项相关检查通过，覆盖大尺寸的默认指标、标签继承与单独覆盖、内部控件尺寸独立、无标题整栏布局、小 / 大尺寸在 compact / RTL 与自定义 padding 下的对齐及键盘操作。Chromium 中英文 1440px / 375px 四组实际文档检查通过，确认三种尺寸、API 说明及原有标签切换、表单状态和提交，无运行错误或页面横向溢出；已查看桌面与英文窄屏深色尺寸截图。证据为根目录 `.quality/card-tabs/sizes-*.log`、文档报告及 `docs-*-sizes.png`；4180 本地预览已更新。改动仍在开发分支，未正式发布。
+
+## 无标题 Card 标签栏高度与居中（2026-10-13）
+
+移除无标题标签栏原有的单侧顶部留白，让标签按钮填满标题栏、文字垂直居中，选中下划线仍位于栏底。标题栏最小高度复用卡片标题行高与对称标题间距，并尊重更大的标签尺寸；小卡片、附加操作及溢出按钮保持同一布局。轨道保留自身内容宽度，避免 flex 收缩使更多菜单失效。标题字号通过卡片内部变量统一派生，有标题的正常布局不受影响。标签栏内边距改为先使用 Card 的完整 padding，再清除纵向值，修复 `padding: '12px 24px'` 被拼成三个值而产生额外底部留白的问题。中英文组件说明与设计规范同步。
+
+相关 SCSS / 测试格式检查、差异检查、文档构建、组件包构建与产物检查通过。Chromium / WebKit 共 8 项相关浏览器检查通过，覆盖深浅外观、标签按钮填满栏高、附加操作居中、标题动态移除、无标题真实溢出与更多菜单、小尺寸 / compact / RTL、自定义 padding 与边缘对齐；初次发现的自定义 padding 问题修复后两种浏览器复验通过。Chromium 中英文 1440px / 375px 四组实际文档检查通过，确认无标题标签上下边界覆盖栏高、居中布局、单下划线及原有切换、输入保留、表单提交和 API 跳转，无运行错误或页面横向溢出。已查看桌面两种标题布局及英文窄屏无标题截图。证据为根目录 `.quality/card-tabs/heading-*.log`、`docs-report.json` 与文档截图；4180 本地文档预览已更新。改动仍在开发分支，未正式发布。
+
+## Card 与 Tabs 融合（2026-10-13）
+
+Card 增加 `tabs` 配置并导出 `CardTabsProps`。无标题时标签栏替代标题区，Card 的附加操作移到标签栏尾部；有标题或说明时导航位于其下方。标题与标签之间不画线，即使开启 `divided` 也只在标签栏下方保留一条完整分隔线。标签、正文及标题沿用 Card 内容边缘，面板间距与标题表面消费 Card token，标签尺寸默认跟随卡片。页签交互、键盘、溢出、关闭、排序与内容保留复用 Tabs；加载时保留导航及激活项。排序回调映射回原始用户条目，防止内部 Skeleton 包装写回业务数据并残留旧加载状态。中英文文档、两种布局示例及设计规范同步，公开类型和关联 `TabItem` API 均可跳转。
+
+组件、测试与文档类型检查、11 项相关单测、格式与差异检查、文档构建和组件包构建通过；包验收确认 ESM / CommonJS 服务端渲染、声明、Card 根入口与子路径的自动样式及裁剪。Chromium / WebKit 共 14 项相关检查通过，覆盖深浅外观、单分隔线与边缘对齐、默认及自定义间距、compact / RTL、主题覆盖、输入状态保留、加载切换、键盘与禁用、更多菜单、关闭全部恢复普通 Card、无假横向溢出及加载中排序后的内容恢复。初次检查受到测试页给全部 Tabs 添加的外边距、自定义配色对比度和标题层级影响，已修正测试设置；排序检查另将加载状态与拖拽播报区分，并等待键盘传感器挂载后操作，两种浏览器复验通过。Firefox 未执行本轮验收。
+
+Chromium 的中英文 1440px / 375px 四组实际文档检查通过，覆盖深浅外观与自定义紫色主题、居中及宽度约束、两种标题布局、键盘切换、输入保留、表单提交、底部按钮和 API 链接，无运行错误或页面横向溢出。已查看桌面两种布局及英文窄屏深色截图；日志、报告与截图位于根目录 `.quality/card-tabs/`。改动仍在开发分支，未升版或正式发布。
+
+## 下拉选项中性悬停（2026-10-13）
+
+未选中的选项统一使用 `--leaf-color-option-hover`：9% 正文色与 91% 内容表面色混合，默认浅色 `#ebebeb`、深色 `#2f2f33`，随区域配色派生。Select、AutoComplete、Cascader、TreeSelect / Tree、时间列、Dropdown、Menu、Mentions 与 CommandPalette 复用该配色，键盘候选和按下反馈保持一致。持久选中值保留不透明的 9% 主题色底色、文字与勾选标记，危险操作保留红色；移动层平滑切换位置和颜色，不与行背景叠色。自动完成与提及的候选状态不再套用持久选中配色，禁用候选不接收指针高亮。静态调色板、设计资源及中英文设计指南同步。
+
+组件与文档类型检查、32 项相关组件测试、格式与差异检查、文档构建、组件包构建及按需样式 / SSR 产物检查通过。Chromium / WebKit 的 30 项浏览器回归通过，覆盖深浅外观、选中背景保持、普通与勾选菜单、禁用项、危险项、键盘候选、按下及区域 / 系统减少动效。初次新增检查误用了提及前缀的可访问名称，并未在指针改变候选后重置键盘定位；修正测试定位与操作顺序后，两种浏览器全部通过。Firefox 的 15 项检查均在启动阶段报 `browserType.launch: spawn UNKNOWN`，未执行组件验收，不计为通过。
+
+Chromium 的中英文 1440px / 375px 四组实际文档检查通过，每组覆盖 Select、自动完成、级联、树选择、时间选择、下拉菜单和命令面板；自定义紫色主题下候选仍使用灰色、选中项保持主题色，选择回显及窄屏无横向溢出通过。未出现页面运行错误；已查看浅色桌面和深色窄屏截图。日志、报告及截图位于根目录 `.quality/option-feedback/`。改动保留在开发分支，未升版或正式发布。
+
+## Tabs 留白、关闭与示例布局（2026-10-13）
+
+卡片标签栏默认内边距从 3px 增到 5px，小、大尺寸分别使用 3px / 6px，继续支持组件级间距和圆角覆盖。关闭按钮取消按下缩放。内置添加与更多按钮跟随标签栏高度；`items` 为空时整个 Tabs 不渲染，文档示例提供独立新增按钮恢复标签页。
+
+原来选中背景在关闭后的旧位置继续移动，会撑开缩短后的标签栏；改为在独立轨道内裁剪背景，使它不影响真实滚动范围。内容切换期间同时裁剪位移和高度动画，结束后恢复自然布局。更多菜单测量使用实际布局间距。中英文基础示例统一默认尺寸，新增三种尺寸对照；布局与文字间距使用 Space，仅保留容器宽度工具类。
+
+组件与文档类型检查、4 项 Tabs 行为测试、相关格式检查、差异检查和文档构建通过。Chromium / WebKit 的 36 项相关检查通过，覆盖逐帧无假溢出、连续切换与关闭、纵向 / RTL / 紧凑布局、输入状态保留、全部关闭后恢复、真实溢出菜单、添加按钮同高、关闭按钮按下几何稳定、主题圆角覆盖和动效偏好。真实溢出用例的初始容器仍容不下两个标签，修正为关闭到实际可容纳的一个标签后，两种浏览器复验通过；对应日志为根目录 `.quality/tabs-refinement/browser-initial.log` 与 `browser-overflow.log`。
+
+Chromium 的中英文 1440px / 375px 四组实际文档检查通过，覆盖深浅外观、默认和三种尺寸、草稿保留、关闭无滚动条闪现、空状态恢复、再次新增和键盘排序，无页面运行错误或横向溢出。已查看桌面基础 / 关闭示例及英文窄屏深色截图；文档报告、截图和改动前逐帧证据位于根目录 `.quality/tabs-refinement/`。改动仍在开发分支，未正式发布。
+
+## Tag 圆角微调（2026-10-13）
+
+根据后续反馈将 Tag 默认圆角从 4px 微调为 5px，按主题小圆角的六分之五派生，保留组件级圆角覆盖。中英文设计指南、设计约定和总览缩略图同步更新。
+
+SCSS / 生成脚本格式检查、差异检查和文档构建通过。Chromium 实际文档检查确认 10 个标签均无边框且圆角为 5px，主题派生与组件覆盖正常，无页面运行错误；已查看示例截图，证据位于根目录 `.quality/tag-refinement/radius-5px.png` 与 `radius-5px-report.json`。改动仍在开发分支，未正式发布。
+
+## Tag 圆角收紧与示例精简（2026-10-13）
+
+Tag 的浅底与实色形态均无边框，`variant` 只提供 `soft` / `solid`。默认圆角从 6px 收紧为 4px，按区域主题小圆角的三分之二派生，组件级 `Tag.borderRadius` 配置优先。中英文文档删除“扩展用法”章节及两个对应示例文件，类型说明合并到统一章节；设计约定、组件总览缩略图和生成脚本同步更新。
+
+文档类型检查、SCSS / 生成脚本格式检查、差异检查与文档构建通过；4 项既有展示组件行为测试通过。Chromium 的中英文 1440px / 375px 四组检查，以及 WebKit 的中文桌面 / 英文窄屏两组检查通过，覆盖深浅外观、全部标签无边框与 4px 圆角、区域继承、单组件覆盖、直角主题、关闭操作和页面仅保留一个示例，无页面运行错误或横向溢出。已查看中文桌面和英文窄屏深色截图，证据位于根目录 `.quality/tag-refinement/`。改动仍在开发分支，未正式发布。
+
+## Menu 基础圆角统一（2026-10-13）
+
+Menu 导航项、悬停背景和移动选中高亮改为与按钮共用基础圆角，默认 10px，不再从基础值减去菜单内边距。`theme.borderRadius` 可统一调整，`theme.components.Menu.borderRadius` 仍可单独覆盖菜单；对应轮廓随配置同步更新。中英文菜单使用说明和设计约定同步，已有圆角回归更新为新的语义规则。
+
+SCSS 格式、测试文件 Biome、差异检查和文档构建通过。Chromium / WebKit 共 14 项既有圆角回归通过，覆盖深浅外观、compact / RTL、0px / 3px 主题、自定义 Menu 圆角与不对称内边距、动态主题和其他浮层的嵌套圆角。Chromium 中英文 1440px / 375px 实际文档检查通过，验证菜单与按钮的 10px 圆角、选中高亮、导航选择和子菜单展开收起，无页面运行错误或横向溢出；已查看桌面和窄屏深色截图。文档证据位于根目录 `.quality/menu-radius/`，组件回归报告位于 `packages/react/.quality/menu-radius/`。改动仍在开发分支，未正式发布。
+
+## 文档站主题色切换（2026-10-13）
+
+文档站右上角增加 Leaf UI ColorPicker 主题色入口，提供主题绿、黑色、活力橙、亮蓝和红色预设，并支持自定义 HEX / RGB / HSL 颜色、恢复默认和中英文可访问名称。最外层 DocsThemeProvider 通过 ConfigProvider 同步文档正文、首页场景、组件示例及 Message、Confirm、Notification 等 Portal 内容；Rspress 搜索等站点 Portal 通过根元素变量桥接跟随强调色。配色保存在 `leaf-ui-docs-primary-color`，刷新、语言切换和同源标签页同步后仍保持；存储不可用时仍可即时切换。首页场景继承全站颜色，主题编辑器默认继承但手动设置后保持局部独立，重置可恢复继承。
+
+文档包类型检查、17 项文档回归、文档构建和差异检查通过。Chromium 与 WebKit 共 8 组中英文桌面 / 375px 检查覆盖入口位置、键盘打开与关闭、五种预设、HEX 输入及非法输入、刷新持久化、跨标签同步、深色模式、语言切换、首页继承、局部主题重置、Select / Modal 浮层和无横向溢出；另验证存储被禁用时仍可切色。通过 Chromium 进一步验证 Confirm、Message、Notification 的 API 浮层实时跟随主题、站点导航强调色和 3000 端口开发预览。无 hydration、运行时或 console 错误，已查看浅色自定义色、深色桌面与英文窄屏截图，证据位于根目录 `.quality/docs-theme-color/`。
+
+改动仍在开发分支，未提升组件版本、合并到 `main`、发布 npm 或部署正式文档。
+
+## 卡片示例宽度与权限表单（2026-10-12）
+
+Card 基础示例最大宽度 520px，内容分区示例最大宽度 560px，均居中并随窄容器收缩，布局使用 Tailwind 与 Space。第二张分区卡片改为 Modal 权限设置场景中的服务选择、邮件权限列表与动态汇总；表单使用原生提交 / 重置关联底部按钮，保存提示随修改清除，重置恢复默认选项，窄屏提示独占一行且按钮并排。中英文代码与使用说明同步。
+
+生产样式压缩后，文档正文的 `min-width: 0` 与 `overflow: clip` 组合丢失最小宽度声明，较长示例代码会撑开桌面布局。改用逻辑属性 `min-inline-size: 0`，实测编译产物能保留并正常收缩。
+
+文档类型检查、相关 Biome / SCSS 格式检查、17 项文档回归、差异检查及文档构建通过。Chromium 的 4 组中英文 1440px / 375px 检查验证示例宽度与居中、标题留白、禁用项、选择汇总、完整 FormData、保存 / 重置与底部间距，无页面运行错误或横向溢出；Modal、Table 桌面与窄屏正文宽度检查也通过。已查看中文桌面和英文窄屏深色截图，证据位于根目录 `.quality/card-showcase/`。改动仍在开发分支，未正式发布。
+
+## 卡片标题留白（2026-10-12）
+
+Card 标题保留区域 `fontWeight` 配置，默认 500。普通与分区卡片的标题区域上下使用同一留白，根据后续反馈各增加 4px，默认各 16px，小尺寸各 12px；普通卡片正文不再叠加顶部内边距。左右留白与正文内边距保留，标题与底部的 padding 写法兼容多值覆盖，分区操作区仍为上下各 12px。中英文设计指南和维护约定同步。
+
+类型检查、SCSS 格式检查、差异检查及文档生产构建通过。Chromium 对中英文 1440px / 375px 文档的 4 组检查通过，覆盖默认、小尺寸、分区、补充说明、加载状态、右侧操作、长标题换行与自定义间距；实测标题上下留白对称，字重 500，保存和重置正常，无页面运行错误或横向溢出。已查看默认、分区和窄屏深色长标题截图，证据位于根目录 `.quality/card-heading/`。改动保留在开发分支，未正式发布。
+
+## 卡片悬停能力与操作区留白（2026-10-12）
+
+Card 移除 `hoverable` 属性、悬停抬升与阴影反馈，保留 `bordered`。开启 `divided` 的 Card、Modal 和 Drawer 底部统一使用共享 SCSS 规则，默认上下各 12px；无分隔线的弹窗操作区与 Confirm 保持顶部由正文留白衔接、底部 12px。显式组件 `padding` 的上下值继续优先，左右留白不变。双语 API、示例和设计约定同步调整。
+
+类型检查、相关 Biome / SCSS 格式检查和文档生产构建通过。Chromium 的 4 项已有表面回归覆盖弹窗、确认框、抽屉、卡片及区域主题；4 组中英文桌面 / 375px 文档检查验证三类操作区的 12px 纵向内边距、`bordered` 保留、悬停稳定、保存及关闭操作，窄屏深色、无运行错误与无横向溢出通过。已查看卡片桌面与抽屉窄屏截图，证据位于根目录 `.quality/action-footer/`。改动保留在开发分支，未执行正式发布。
+
+## 标签无边框与小圆角（2026-10-12）
+
+Tag 的浅底与实色形态统一移除边框，圆角使用区域主题的小圆角（默认 6px），保留单组件圆角覆盖。三个尺寸将原边框厚度合并到内边距，整体尺寸保持稳定。移除 `variant="outline"`，表格、标签和警告示例改用浅底；CheckableTag / TagGroup 的悬停与选中通过颜色及背景反馈，保留键盘焦点轮廓。双语 API、设计与主题指南、组件总览缩略图和生成脚本同步调整。
+
+类型检查、4 项已有展示组件行为测试、相关 Biome / SCSS 格式检查与文档生产构建通过。Chromium / WebKit 的 4 项警告颜色及对比度回归通过；Chromium、Firefox、WebKit 共 12 组中英文桌面 / 375px 文档检查通过，覆盖深浅外观、无边框、圆角继承、尺寸、关闭、键盘选择和焦点，无运行错误或横向溢出。已查看桌面中文与窄屏英文截图，证据位于根目录 `.quality/tag-borderless/`。改动留在开发分支，未执行正式发布。
+
+## 颜色选择器整行点击（2026-10-12）
+
+纯色与渐变模式的外框、边缘和拉宽后的空白区域统一转发到原生触发按钮，沿用键盘、焦点、调用方点击回调与展开状态逻辑；清除按钮独立处理，禁用、只读和调用方取消事件时不会展开。整行展示指针光标，中英文基础示例改为完整行宽并同步使用说明。
+
+组件类型检查、7 项 ColorPicker 行为测试、相关 Biome / SCSS 格式检查及文档生产构建通过。Chromium、Firefox、WebKit 共 12 个中英文桌面 / 375px 页面检查通过，覆盖空白与边框点击、色块 / 文字切换、Enter / Space / Escape、清除、禁用、渐变及嵌套颜色浮层；无运行错误或页面横向溢出。已查看桌面中文与窄屏英文截图，脚本、报告及截图位于根目录 `.quality/color-picker-row/`。
+
+## 文档 Tailwind CSS 布局（2026-10-12）
+
+文档站接入 Tailwind CSS 4 和 PostCSS，保留组件库与站点主题的 SCSS，不启用 Preflight。中英文 Form 的宽度、分栏、操作区与联系人输入布局改为工具类；其余示例共用的宽度、排列、标签、辅助文字及演示面板也不再依赖 `leaf-demo-*` 私有类，对应 SCSS 已删除。使用公开的 Leaf UI 主题变量保持密度与区域主题一致。示例容器的默认宽度保护改为低优先级 `:where`，避免覆盖 `max-w-[600px]` 等工具类；复杂业务场景的专用视觉样式保持独立。
+
+`pnpm lint`、文档包类型检查、17 项文档回归与 `pnpm build:docs` 通过，AI 导出保留 192 篇中英文 Markdown 和相同的示例源码。Chromium 对 12 个组件页在中英文、1440px / 375px 的 48 组布局进行改前改后对比，无横向溢出；ConfigProvider 尺寸示例的嵌套演示块同步居中。Form 四个示例在 1440px / 1024px / 375px 保持最大 600px、容器内居中及两列 / 单列响应，校验恢复、单选与多选、数字和日期时间输入、保存、完整 FormData 重置、联系人重排与 axe 验收通过。
+
+Chromium、Firefox、WebKit 共 12 组中英文桌面 / 窄屏检查通过，覆盖表单、首页、快速开始、控件尺寸、角标与标签页。默认控件为 40px，深色布局与主题变量正常，help 与控件保持 6px 距离，提示后保留完整的 24px 表单间距。页面无运行错误或失败资源；WebKit 使用真实键盘输入，并等待资源完成后导航，未将早期自动填充与过快导航失败计为通过。3000 端口的实际开发预览也正确编译工具类。已查看桌面、窄屏与深色截图，构建日志、比较报告和浏览器证据位于根目录 `.quality/docs-tailwind/`。改动保留在 `codex/file-list-refresh`，未执行正式发布。
+
+## 分裂按钮分割线（2026-10-12）
+
+SplitButton 的主操作与菜单操作之间增加 1px 分割线。实色使用当前按钮文字色的半透明细线，边框样式保留已有边界；文字与链接样式使用中性分割线，RTL 使用逻辑方向定位。装饰不拦截点击，也不改变按钮高度或悬浮时的尺寸。按钮组原有的悬浮层级变化会影响共享边界，因此分裂按钮保持内部层级稳定，非边框样式取消负边距重叠，边框样式的共享边固定颜色，仅外侧边框响应交互。
+
+14 项按钮单测与格式检查通过。Chromium 验证 13 种样式 / 状态，包括危险、禁用、加载、大小尺寸、深色主题与 RTL，主操作、菜单选择及强制颜色模式正常；对其中 10 种样式在 3 倍像素密度下比较分割线区域，左侧悬浮、按下与聚焦前后像素一致，边框样式右侧悬浮也一致。最初只比较 computed style，未覆盖实际绘制遮挡；本次改为截图区域比较。文档重新构建后，1440px 与 375px 的实际按钮页分割线区域比较、菜单打开与选择通过。已查看截图，证据位于根目录 `.quality/split-button-divider/`，未发布。
+
+## Form 文档布局与完整示例（2026-10-12）
+
+中英文 Form 页的四个示例统一居中，最大宽度 600px，窄容器按可用宽度缩小。完整示例精简为十个相关字段：空间名称、负责人、工作邮箱、协作成员、成员名额、每日站会、项目周期、通知频率、自动提醒和空间简介；移除顶部“创建工作空间”和四个分区，不再集中展示所有录入组件。短字段随容器宽度在两列与一列之间切换，长字段独占一行。原联系人示例的操作允许换行，避免窄屏输入框被挤压。演示支持校验、保存与恢复初始值，数据保留在当前页面。
+
+实际浏览器发现 FormField 在捕获阶段清除校验错误会提前重渲染，覆盖控制组件尚未消费的输入。错误清除移到冒泡阶段，保留外部捕获与冒泡回调，并补充输入值断言和浏览器回归。完整示例与校验修复阶段的 `pnpm check` 通过 320 项组件测试、13 项发布规则、17 项文档及 9 项 Skill 测试；组件与文档构建、82 个 JS 子路径、ESM / CommonJS SSR 和 20 个 Vite / Rspack 按需 CSS 场景通过。
+
+根据后续视觉反馈撤回 help 的首行间距补偿，单行和多行提示均占据正常布局空间，与控件保持 6px 距离，与下一项保留完整 Form gap（默认 24px）。保留长地址折行和精简后的十个字段；中英文使用说明与 API 同步。
+
+中英文文档在 1440px、1024px、375px 验证四个示例的宽度、居中、列数及无横向溢出；桌面与手机的校验恢复、单选与多选、数字与日期时间输入、保存、完整 FormData 重置及联系人重排通过，axe 无违规。已查看桌面、手机与暗色截图，页面无运行错误或失败资源，AI Markdown 包含同一示例源码。Chromium、WebKit、Firefox 共 24 项回归通过，覆盖逐字输入、整体替换、横向与纵向布局、手机、紧凑密度、较大字体与小间距、嵌套字段组、单行与多行提示、末尾提示、错误切换及长地址。Firefox 使用工作区已有的 Firefox 1543；默认缓存上轮启动报 `spawn UNKNOWN`，本轮没有使用该缓存。
+
+恢复 help 布局后，6 项 Form 单测、文档构建及上述 24 项浏览器回归重新通过；中英文桌面与手机文档实测提示之后保留 24px 间距，宽度与居中保持正常，无横向溢出，已查看截图。最新证据在 `.quality/form-help-restore/`，此前报告、构建日志、脚本和截图保留在 `.quality/form-refinement/` 与 `.quality/form-showcase/`。改动仍位于 `codex/file-list-refresh`，未发布 npm 或部署正式文档。
+
+## FileList 重写与组件移除（2026-10-12）
+
+在 `codex/file-list-refresh` 重写 FileList 的列表、缩略图和图片卡片布局。图标、文件信息、状态与操作分列对齐，预览按钮、下载链接、移除和 Upload 的取消 / 重试操作使用相同尺寸；支持长文件名、缺省大小、零字节文件、缩略图失败回退、行内异步移除错误与重试。保留现有 `FileList` / `FileItem` / `FileListProps` 参数和媒体预览。中英文文档按六个独立示例介绍文件信息、缩略图、图片卡片、上传状态、URL 与移除、空列表，并更新 API 说明和总览缩略图。
+
+按用户要求移除 ImageCropper、SignaturePad 的实现、类型、JS / CSS 子路径、根导出、中英文页面、示例、导航、组件总览及对应依赖。历史正式更新记录保留。下一次发布的兼容性说明保存在 [FILELIST-REFRESH.md](FILELIST-REFRESH.md)，未写入在线更新记录。
+
+最终 `pnpm check`、`pnpm build` 通过：56 个组件测试文件 / 320 项测试、13 项发布规则、17 项文档和 9 项 Skill 回归；82 个公共 JS 子路径、全部 CSS 导出、ESM / CommonJS SSR 和 Vite / Rspack 共 20 个按需样式生产构建场景通过。只读 `npm pack --dry-run --ignore-scripts` 检查 2,991 个文件，产物、声明、API 索引及锁文件均不包含已移除组件或依赖。AI 导出保留 192 篇中英文 Markdown；FileList 的组件和类型发现正常。体积预算通过，整库 JS / CSS gzip 为 195.14 / 39.35 KiB，未放宽预算。
+
+Chromium、Firefox、WebKit 共 24 项定向验收通过，无跳过或重试：覆盖 375px、暗色、RTL、compact 密度、等尺寸操作、无横向溢出、图片键盘切换与焦点恢复、异步移除失败 / 重试、Upload 进度 / 取消 / 重试、双主题 axe 和减少动态效果。Firefox 使用工作区已有的 Playwright Firefox 1543 可执行文件；异步移除测试通过独立完成操作控制 Promise，避免依赖短暂 loading 状态与浏览器调度时序。
+
+实际文档的中英文 FileList、首页文件场景和 Upload 示例均在 1440px / 375px 验证，组件总览入口同步清理；代码、图片预览、移除、文件大小和布局正常，无页面运行错误或失败资源，已查看中文列表、英文卡片、窄屏和暗色 RTL 截图。构建日志、发布演练清单、定向浏览器报告和文档截图位于根目录 `.quality/file-list-refresh/`，组件截图位于 `packages/react/.quality/file-list-*.png`。本轮没有执行真机、读屏软件或实际媒体编码播放验收。
+
+改动仍在开发分支，组件版本未提升，未合并到 `main`、发布 npm 或部署正式文档；未创建临时在线开发预览。
+
 ## 0.5.0 正式发布验收（2026-10-12）
 
 汇总开发分支的 Table / DataTable、Scrollbar、组件外观与动效、按需 CSS、双语示例及 npm 作用域迁移，组件版本提升至 `@ifhover/leaf-ui@0.5.0`。中英文正式更新记录包含旧包迁移、40px 默认高度、Confirm API 收敛、soft 外观与三个独立组件的移除，以及基础 / 完整 CSS 入口的区别；历史版本内容继续保留。
diff --git a/packages/react/README.md b/packages/react/README.md
index 40106d3..40ee614 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -13,7 +13,6 @@ npm install @ifhover/leaf-ui
 ```tsx
 import { Button, Input, Select } from '@ifhover/leaf-ui';
 import { Plus } from 'lucide-react';
-import '@ifhover/leaf-ui/styles.css';
 
 export function App() {
   return (
@@ -26,9 +25,9 @@ export function App() {
 }
 ```
 
-Import the compiled stylesheet once in your application entry; consumers do not need Sass. JavaScript is available as ESM and CommonJS, with TypeScript declarations.
+Styles load automatically with components; consumers do not need manual CSS imports or Sass. JavaScript is available as ESM and CommonJS, with TypeScript declarations.
 
-Browser component entries load CSS automatically. Import `styles.css` once for theme variables and API services. Vite and Rsbuild / Rspack production builds retain styles for root ESM named imports and their internal dependencies on demand; component subpaths are optional. Direct esbuild bundles and CommonJS root imports do not guarantee CSS pruning; use subpaths such as `@ifhover/leaf-ui/button` in those cases. A full static stylesheet remains available at `@ifhover/leaf-ui/styles/all.css` for custom SSR pipelines.
+Browser component entries automatically load theme variables, shared popup styles and the required component and service styles. The optional `styles.css` entry remains available for existing integrations. Vite and Rsbuild / Rspack production builds retain styles for root ESM named imports and their internal dependencies on demand; component subpaths are optional. Direct esbuild bundles and CommonJS root imports do not guarantee CSS pruning; use subpaths such as `@ifhover/leaf-ui/button` in those cases. A full static stylesheet remains available at `@ifhover/leaf-ui/styles/all.css` for custom SSR pipelines.
 
 ## Components
 
@@ -58,11 +57,11 @@ Browser component entries load CSS automatically. Import `styles.css` once for t
 - VirtualList / InfiniteScroll: measured virtual rows and abortable loading.
 - Transfer / InputOTP / InputMask / TimeRangePicker: transfers, code autofill/paste, formatted values and time ranges.
 - Notification / useNotification / Popconfirm / ErrorBoundary / LoadingBar / useLoadingBar: scoped notifications, async confirmations, recovery and concurrent task progress.
-- Upload / FileList / ImageCropper / SignaturePad: upload progress and cancellation, file metadata and browser media previews, movable crop selections and signature strokes.
+- Upload / FileList: upload progress and cancellation, file metadata, downloads and browser media previews.
 
 Existing families also include ButtonGroup, SplitButton, CheckboxGroup, AvatarGroup, CheckableTag, TagGroup, InputSearch, InputGroup, Textarea auto-sizing, FormList and FormErrorSummary. Select supports groups, creation and virtualization; DatePicker supports year/quarter/month/week; Tree and TreeSelect support async children and virtualization, and Tree and Tabs support reordering.
 
-Single-line controls share sm / md / lg sizes of **34 / 40 / 46px**. The default **40px** is the form alignment baseline. Checkbox, Radio and Switch use these values for the label container's minimum height.
+Single-line controls share sm / md / lg sizes of **30 / 36 / 42px**. The default **36px** is the form alignment baseline. Checkbox, Radio and Switch use these values for the label container's minimum height.
 
 ## Theming
 
@@ -71,7 +70,7 @@ Use ConfigProvider to customize a region. Start with primaryColor, borderRadius
 ```tsx
 import { ConfigProvider, Button } from '@ifhover/leaf-ui';
 
-<ConfigProvider locale="en-US" theme={{ primaryColor: '#087f8c', borderRadius: 8, controlHeight: 40, appearance: 'light' }}>
+<ConfigProvider locale="en-US" theme={{ primaryColor: '#087f8c', borderRadius: 8, controlHeight: 36, appearance: 'light' }}>
   <Button>Save</Button>
 </ConfigProvider>
 ```
@@ -108,9 +107,13 @@ export function DeleteButton({ onDelete }: { onDelete: () => void | Promise<void
 
 Custom components can read var(--leaf-color-primary), var(--leaf-radius), var(--leaf-control-height) and other shared variables inside the region. Use ConfigProvider to change library styles, and CSS variables to reuse the resulting values. See [theming](https://ifhover.github.io/leaf-ui/guide/theming.html).
 
+## Tailwind CSS
+
+For Tailwind CSS 4, add `@import "@ifhover/leaf-ui/tailwind.css";` after your Tailwind CSS import. For Tailwind CSS 3, add `require('@ifhover/leaf-ui/tailwind').default` to your configuration's `presets` array. Both provide `leaf-` utilities for colors, spacing, typography, radii, shadows and motion that follow the surrounding ConfigProvider. See the [Tailwind CSS guide](https://ifhover.github.io/leaf-ui/en/guide/tailwindcss.html).
+
 ## Server rendering
 
-Import the static stylesheet in the framework's root entry and provide the same initial theme to server rendering and client hydration. React state can switch themes afterward without generating CSS at runtime. See [SSR usage](https://ifhover.github.io/leaf-ui/en/guide/ssr.html) for Next.js App Router, Pages Router and other React SSR frameworks.
+Framework builds load styles automatically. Use the same initial theme during server rendering and client hydration. See [Server-side rendering](https://ifhover.github.io/leaf-ui/en/guide/ssr.html) for Next.js App Router, Pages Router and TanStack Start.
 
 ## Forms
 

From 37c1348282369c6b41193f7c900f7be9659acfba Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 05:27:11 +0800
Subject: [PATCH 05/13] ci: publish tagged npm releases with OIDC and deploy
 documentation

---
 .github/workflows/pages.yml   |   4 +
 .github/workflows/publish.yml | 137 ++++++++++++++++++++++++++++++++++
 DEVELOPMENT-WORKFLOW.md       |   4 +-
 packages/react/RELEASING.md   |  33 +++++++-
 4 files changed, 172 insertions(+), 6 deletions(-)
 create mode 100644 .github/workflows/publish.yml

diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index b937545..457b6c6 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -4,6 +4,9 @@ on:
   push:
     branches: [main]
   workflow_dispatch:
+  workflow_run:
+    workflows: ['Publish npm package']
+    types: [completed]
 
 permissions:
   contents: read
@@ -14,6 +17,7 @@ concurrency:
 
 jobs:
   build:
+    if: github.event_name != 'workflow_run' || github.event.workflow_run.conclusion == 'success'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 0000000..d64954f
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,137 @@
+name: Publish npm package
+
+on:
+  push:
+    tags: ['v*']
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: npm-release
+  cancel-in-progress: false
+
+jobs:
+  publish:
+    if: github.repository == 'ifhover/leaf-ui'
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    environment: npm
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.sha }}
+          fetch-depth: 0
+          persist-credentials: false
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '26'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Validate release tag, source commit and npm version
+        id: release
+        env:
+          RELEASE_TAG: ${{ github.ref_name }}
+        run: |
+          node --input-type=module <<'NODE'
+          import assert from 'node:assert/strict';
+          import { execFileSync } from 'node:child_process';
+          import { appendFileSync, readFileSync } from 'node:fs';
+
+          const { RELEASE_TAG: tag, GITHUB_REF: ref, GITHUB_SHA: runCommit } = process.env;
+          assert.match(tag, /^v(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)$/, 'Use a vX.Y.Z stable release tag, including when running the workflow manually.');
+          assert.equal(ref, `refs/tags/${tag}`, 'Select the release tag under Run workflow, not a branch.');
+          const git = (...args) => execFileSync('git', args, { encoding: 'utf8' }).trim();
+          const commit = git('rev-parse', 'HEAD');
+          assert.equal(commit, runCommit, 'The checkout must match the workflow run commit for provenance.');
+          assert.equal(git('rev-parse', `refs/tags/${tag}^{commit}`), commit, 'The checkout must match the release tag.');
+          git('merge-base', '--is-ancestor', commit, 'origin/main');
+          const pkg = JSON.parse(readFileSync('packages/react/package.json', 'utf8'));
+          assert.equal(pkg.name, '@ifhover/leaf-ui');
+          assert.equal(tag, `v${pkg.version}`, 'The tag must match packages/react/package.json.');
+          assert.equal(pkg.repository.url, 'git+https://github.com/ifhover/leaf-ui.git');
+
+          const response = await fetch(`https://registry.npmjs.org/${encodeURIComponent(pkg.name)}`, {
+            signal: AbortSignal.timeout(30_000),
+          });
+          assert.ok(response.ok || response.status === 404, `npm registry returned ${response.status}.`);
+          const registry = response.status === 404 ? {} : await response.json();
+          const published = registry.versions?.[pkg.version];
+          const latest = registry['dist-tags']?.latest;
+          if (published) {
+            assert.equal(published.gitHead, commit, 'This version was already published from a different commit. Bump the version.');
+            assert.equal(latest, pkg.version, 'This version is no longer latest; refusing to republish an older release.');
+            console.log(`${pkg.name}@${pkg.version} is already published from this commit; skipping the upload.`);
+          } else if (latest) {
+            assert.match(latest, /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)$/, 'npm latest must be a stable version.');
+            const currentParts = pkg.version.split('.').map(BigInt);
+            const latestParts = latest.split('.').map(BigInt);
+            const differing = currentParts.findIndex((part, index) => part !== latestParts[index]);
+            assert.ok(differing >= 0 && currentParts[differing] > latestParts[differing], 'The release version must be newer than npm latest.');
+          }
+          appendFileSync(process.env.GITHUB_OUTPUT, `version=${pkg.version}\ncommit=${commit}\nalready_published=${Boolean(published)}\n`);
+          NODE
+      - uses: pnpm/action-setup@v4
+        if: steps.release.outputs.already_published != 'true'
+      - name: Install dependencies
+        if: steps.release.outputs.already_published != 'true'
+        run: pnpm install --frozen-lockfile
+      - name: Check source, tests and release notes
+        if: steps.release.outputs.already_published != 'true'
+        run: pnpm check
+      - name: Build and verify library and documentation
+        if: steps.release.outputs.already_published != 'true'
+        run: pnpm build
+      - name: Ensure the build did not change release sources
+        if: steps.release.outputs.already_published != 'true'
+        run: |
+          if [[ -n "$(git status --porcelain)" ]]; then
+            git status --short
+            echo 'Commit generated source changes before publishing.' >&2
+            exit 1
+          fi
+      - name: Install npm with trusted publishing support
+        if: steps.release.outputs.already_published != 'true'
+        run: npm install --global npm@11
+      - name: Publish to npm using OIDC
+        if: steps.release.outputs.already_published != 'true'
+        working-directory: packages/react
+        run: npm publish --access public --tag latest --provenance --registry https://registry.npmjs.org/
+      - name: Verify published commit and latest tag
+        env:
+          RELEASE_VERSION: ${{ steps.release.outputs.version }}
+          RELEASE_COMMIT: ${{ steps.release.outputs.commit }}
+        run: |
+          node --input-type=module <<'NODE'
+          import assert from 'node:assert/strict';
+          import { appendFileSync } from 'node:fs';
+          import { setTimeout } from 'node:timers/promises';
+
+          const { RELEASE_VERSION: version, RELEASE_COMMIT: commit } = process.env;
+          for (let attempt = 1; attempt <= 12; attempt++) {
+            try {
+              const response = await fetch('https://registry.npmjs.org/@ifhover%2Fleaf-ui', {
+                cache: 'no-store',
+                signal: AbortSignal.timeout(30_000),
+              });
+              assert.ok(response.ok, `npm registry returned ${response.status}.`);
+              const registry = await response.json();
+              assert.equal(registry.versions?.[version]?.gitHead, commit, 'npm gitHead does not match the release commit.');
+              assert.equal(registry['dist-tags']?.latest, version, 'npm latest does not match the release version.');
+              appendFileSync(process.env.GITHUB_STEP_SUMMARY, [
+                `Verified npm package: [@ifhover/leaf-ui@${version}](https://www.npmjs.com/package/@ifhover/leaf-ui/v/${version})`,
+                `Release tag: v${version}; commit: ${commit}`,
+                'The Deploy documentation workflow runs after this workflow succeeds. Check its result before considering the release complete.',
+                '',
+              ].join('\n\n'));
+              break;
+            } catch (error) {
+              if (attempt === 12) throw error;
+              console.log(`Waiting for npm registry metadata (${attempt}/12): ${error.message}`);
+              await setTimeout(10_000);
+            }
+          }
+          NODE
diff --git a/DEVELOPMENT-WORKFLOW.md b/DEVELOPMENT-WORKFLOW.md
index 8f6fd71..5ad0a4f 100644
--- a/DEVELOPMENT-WORKFLOW.md
+++ b/DEVELOPMENT-WORKFLOW.md
@@ -49,8 +49,8 @@ npm 新作用域为 `@ifhover/leaf-ui`；迁移前的稳定版仍属于 `@sudden
 正式发布的操作命令见 [packages/react/RELEASING.md](packages/react/RELEASING.md)。发布顺序为：
 
 1. 将准备好的发布分支合并到 `main`，确认版本、更新记录和源码已提交。此后不叠加新的待发布功能，先完成这一版本的发布。
-2. 在实际合并后的发布提交重新检查与构建，确保工作区干净。使用该提交发布 npm 和创建 `vX.Y.Z` 标签；采用 squash 或 rebase 合并时，以合并后的提交为准。
-3. 确认 npm 的版本、`latest` 和 `gitHead`，推送标签，并部署默认在线文档与 `/v/X.Y.Z/` 快照。若合并触发的 Pages 构建早于 npm 发布，发布后重新触发 `Deploy documentation` 工作流。
+2. 在实际合并后的发布提交重新检查与构建，确保工作区干净。创建并推送 `vX.Y.Z` 标签，触发 `Publish npm package` 通过 OIDC 发布 npm；普通提交与 `main` 推送不会发布 npm。也可手动运行发布工作流，并在 **Use workflow from** 中选择已推送的正式版本标签。采用 squash 或 rebase 合并时，以合并后的提交为准。
+3. 发布工作流确认 npm 的版本、`latest` 和 `gitHead` 后，自动触发 `Deploy documentation`，部署默认在线文档与 `/v/X.Y.Z/` 快照；文档部署失败时重跑文档工作流。源码、标签和 npm 必须对应同一提交，本地手动发布操作见发布说明。
 4. 分支合并到 `main` 后必须删除对应临时在线文档、资源、预览入口与活动预览清单中的条目，并停止继续更新该预览的任务。放弃开发、关闭未合并 PR 或删除开发分支时，也执行相同清理；清理结果保留在 PR 或发布记录中。
 5. 验证正式站点与 npm 一致，开发预览 URL 已不再提供开发内容，正式历史快照仍可访问，再报告发布完成。
 
diff --git a/packages/react/RELEASING.md b/packages/react/RELEASING.md
index eb017b8..69310a4 100644
--- a/packages/react/RELEASING.md
+++ b/packages/react/RELEASING.md
@@ -58,6 +58,31 @@ pnpm build
 
 `pnpm check:release` 会检查当前版本的中英文记录、日期与实际变更条目，并拒绝在线记录中的未发布区域。它已加入 `pnpm check`、GitHub Pages 检查以及 npm 的 `prepublishOnly`，升版但未更新记录时会阻止正常发布。发布前的检查还会构建并验证 npm 包产物。
 
+### GitHub Actions 自动发布（推荐）
+
+`.github/workflows/publish.yml` 使用 npm Trusted Publishing（OIDC）。npm 的 Trusted Publisher 必须配置为 GitHub 仓库 `ifhover/leaf-ui`、Workflow filename `publish.yml`、Environment name `npm`，并允许 `npm publish`。在 GitHub 仓库的 **Settings → Environments** 创建同名的 `npm` 环境；如设置了部署分支限制，应允许正式版本标签。无需配置 `NPM_TOKEN`，也不需要单独允许 `npm dist-tag`。
+
+普通提交、推送开发分支或合并 `main` 都不会发布 npm。工作流只在推送 `vX.Y.Z` 标签时发布，或通过 **Actions → Publish npm package → Run workflow** 手动运行；手动运行时，在 **Use workflow from** 中选择已经推送的正式版本标签，也可以执行 `gh workflow run publish.yml --ref vX.Y.Z`。不能选择开发分支或 `main`，确保工作流提交、发布源码和 provenance 一致。
+
+1. 更新 `packages/react/package.json` 中的版本与中英文更新记录，检查通过后合并到 `main`。
+2. 拉取最新 `main`，确认工作区干净，在实际合并后的发布提交创建并推送标签。下面以尚未发布的 `0.5.1` 为例，执行前替换为本次实际版本：
+
+   ```bash
+   git switch main
+   git pull --ff-only origin main
+   git tag v0.5.1
+   git push origin v0.5.1
+   ```
+
+3. 工作流确认标签与组件版本一致、提交已包含在 `main`，且新版本高于 npm `latest`；随后安装依赖，执行 `pnpm check`、`pnpm build`，确认构建没有改动源码，再发布公开包与 provenance。
+4. 发布后核对 npm `gitHead`、`latest` 和发布标签。工作流成功后，`Deploy documentation` 自动从 `main` 运行，构建 npm 已发布版本的文档与快照。
+
+此工作流只处理正式版本，拒绝预发布标签。同一版本不能覆盖：如果 npm 已有该版本且提交不同，会要求升版；如果该版本已从同一提交发布并且仍是 `latest`，重跑会跳过上传，继续核对并触发文档部署。npm 已发布而文档失败时，优先重跑 `Deploy documentation`，无需重新发布 npm。
+
+新增 Trusted Publisher 显示 `Pending validation` 时，需要在 npm 页面指定的截止时间前成功发布一次以完成验证；过期后需要在 npm 删除并重新创建该配置。
+
+### 本地手动发布
+
 检查通过后，将版本和更新记录提交到开发分支，通过审查后合并到 `main`。在实际合并后的发布提交重新执行检查与构建，并确认工作区干净，再在 `packages/react` 目录运行：
 
 ```bash
@@ -74,14 +99,14 @@ npm 的 `gitHead` 和 `vX.Y.Z` 标签必须指向同一个实际发布提交。
 ## 发布完成
 
 1. 通过 `npm view @ifhover/leaf-ui@X.Y.Z version gitHead` 和 `npm view @ifhover/leaf-ui dist-tags --json` 确认新版本已存在、`latest` 指向它、`gitHead` 与发布提交一致。
-2. 为该发布提交创建 `vX.Y.Z` Git 标签并推送到 GitHub。源码、标签和 npm 必须对应同一提交。
-3. `main` 推送会自动构建并部署 GitHub Pages。构建器从 npm 的 `gitHead` 还原发布提交，因此该提交必须已推送到仓库，且 package.json 中版本必须与 npm 一致。若合并触发的构建早于 npm 发布，发布后手动触发 `Deploy documentation` workflow。
+2. 确认 `vX.Y.Z` Git 标签已推送到 GitHub，且与 npm 指向同一发布提交。通过 Actions 发布时，推送标签就是发布入口；本地手动发布时，推送标签触发的工作流会核对已有版本并跳过重复上传。
+3. `main` 推送以及 `Publish npm package` 成功都会自动构建并部署 GitHub Pages。构建器从 npm 的 `gitHead` 还原发布提交，因此该提交必须已推送到仓库，且 package.json 中版本必须与 npm 一致。若未通过发布工作流触发部署，发布后手动触发 `Deploy documentation` workflow。
 4. 确认 `/v/X.Y.Z/`、其 `llm.txt`、`llms.txt`、`api/index.json` 和组件 Markdown 均能访问。顶部版本菜单应包含新版本，中英文更新记录应一致；默认根地址直接展示 npm latest 的已发布文档，不跳转到版本路径。
 5. 分支合并后删除对应临时开发文档及其预览入口，确认该 URL 已不再提供开发内容。默认文档、新版本快照、npm 信息与预览清理全部验收后，才算发布完成。
 6. 若 npm 发布或文档部署失败，按未完成的发布继续处理。版本化部署只展示 npm 中实际发布的版本，开发内容可本地或在独立临时地址预览。
 
-若发布后没有新的 main 推送，手动触发 `Deploy documentation` workflow。不要重新将 main 上的组件源码构建到旧版本路径；各版示例与 API 必须始终使用对应的发布提交。文档基础设施更新可以通过构建器的公共 overlay 应用到旧快照，不能混入未发布组件 API。
+若发布后文档工作流未自动运行，或需要重试文档部署，手动触发 `Deploy documentation` workflow。不要重新将 main 上的组件源码构建到旧版本路径；各版示例与 API 必须始终使用对应的发布提交。文档基础设施更新可以通过构建器的公共 overlay 应用到旧快照，不能混入未发布组件 API。
 
 AI Skill 与组件包独立发行，维护方式见 [skills/README.md](../../skills/README.md)。新增导出时确保有对应组件或指南页面，让该版 API 索引可按组件和类型查找；无需复制一份完整手册到 Skill。
 
-组件开发约定见 [DEVELOPMENT.md](DEVELOPMENT.md)，文档站维护说明见 [apps/docs/README.md](../../apps/docs/README.md)。
+组件开发约定见 [DEVELOPMENT.md](DEVELOPMENT.md)，文档站维护说明见 [apps/docs/AGENTS.md](../../apps/docs/AGENTS.md)。

From a6a6d7b6fba9f46e2225c12bb811130cf578c590 Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 05:36:19 +0800
Subject: [PATCH 06/13] fix(docs): keep contact actions aligned and refresh
 file motion lookup

---
 apps/docs/src/examples/en/form/extensions.tsx | 6 ++++--
 apps/docs/src/examples/form/extensions.tsx    | 6 ++++--
 packages/react/tests/browser/motion.spec.ts   | 4 +++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/docs/src/examples/en/form/extensions.tsx b/apps/docs/src/examples/en/form/extensions.tsx
index d899a67..1a2e964 100644
--- a/apps/docs/src/examples/en/form/extensions.tsx
+++ b/apps/docs/src/examples/en/form/extensions.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  Flex,
   Form,
   FormErrorSummary,
   FormField,
@@ -18,8 +19,9 @@ export function ExtensionDemo() {
             <>
               {fields.map((field) => (
                 <FormField key={field.key} label={`Contact ${field.index + 1}`} required>
-                  <Space size="sm" wrap>
+                  <Flex gap="sm" align="start">
                     <Input
+                      style={{ flex: 1, minWidth: 0 }}
                       name={`${field.name}.email`}
                       type="email"
                       value={field.value}
@@ -36,7 +38,7 @@ export function ExtensionDemo() {
                         Move up
                       </Button>
                     )}
-                  </Space>
+                  </Flex>
                 </FormField>
               ))}
               <Button variant="outline" onClick={() => ops.add('')}>
diff --git a/apps/docs/src/examples/form/extensions.tsx b/apps/docs/src/examples/form/extensions.tsx
index 08e0608..5b77f53 100644
--- a/apps/docs/src/examples/form/extensions.tsx
+++ b/apps/docs/src/examples/form/extensions.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  Flex,
   Form,
   FormErrorSummary,
   FormField,
@@ -18,8 +19,9 @@ export function ExtensionDemo() {
             <>
               {fields.map((field) => (
                 <FormField key={field.key} label={`联系人 ${field.index + 1}`} required>
-                  <Space size="sm" wrap>
+                  <Flex gap="sm" align="start">
                     <Input
+                      style={{ flex: 1, minWidth: 0 }}
                       name={`${field.name}.email`}
                       type="email"
                       value={field.value}
@@ -36,7 +38,7 @@ export function ExtensionDemo() {
                         上移
                       </Button>
                     )}
-                  </Space>
+                  </Flex>
                 </FormField>
               ))}
               <Button variant="outline" onClick={() => ops.add('')}>
diff --git a/packages/react/tests/browser/motion.spec.ts b/packages/react/tests/browser/motion.spec.ts
index 7ecccd6..01723bc 100644
--- a/packages/react/tests/browser/motion.spec.ts
+++ b/packages/react/tests/browser/motion.spec.ts
@@ -236,7 +236,9 @@ test('a second row reorder starts from the running visual position and settles t
       'click',
       () => {
         requestAnimationFrame(() => {
-          const file = document.querySelector('[data-motion-key="file-Alpha"]');
+          const file = document
+            .querySelector('[data-testid="animated-files"] [title="Alpha.txt"]')
+            ?.closest('li');
           const motion = file
             ?.getAnimations()
             .find(

From ddae65facc765a6228ffc48b1834d3656af114aa Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 05:39:13 +0800
Subject: [PATCH 07/13] test: document 0.6 bundle costs and update scoped
 budgets

---
 packages/react/QUALITY.md                 | 16 ++++++++++++++++
 packages/react/scripts/measure-bundle.mjs | 10 ++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/react/QUALITY.md b/packages/react/QUALITY.md
index 4da6cc9..528cbe3 100644
--- a/packages/react/QUALITY.md
+++ b/packages/react/QUALITY.md
@@ -2,6 +2,22 @@
 
 面向源码维护者。新增能力必须验证用户行为、公开产物和相应文档，不能仅以组件数量或测试数量判断成熟度。审计对应清单见 [AUDIT-IMPLEMENTATION.md](AUDIT-IMPLEMENTATION.md)。
 
+## 0.6.0 发布前包体积验收（2026-10-16）
+
+使用 Node 26.8.1、esbuild 生产压缩与 gzip level 9，React / ReactDOM 外置。0.5.0 的发布报告与 0.6.0 构建产物对比如下（KiB gzip）：
+
+| 场景 | 0.5.0 JS / CSS | 0.6.0 JS / CSS | 0.6.0 预算 JS / CSS |
+| --- | --- | --- | --- |
+| Button | 4.21 / 2.19 | 3.04 / 6.23 | 5 / foundation + 4.25 |
+| 原生 Table | 10.67 / 3.59 | 10.60 / 7.05 | 14 / 无独立上限 |
+| DataTable 适配器 | 77.98 / 8.97 | 91.05 / 12.94 | 96 / 无独立上限 |
+| ConfigProvider 与常见表单 | 61.16 / 13.51 | 83.77 / 14.08 | 88 / 14.5 |
+| 整库 | 207.02 / 40.48 | 218.06 / 40.78 | 250 / 41 |
+
+适配器和表单原有 80 / 64 KiB JS 预算无法容纳新增 ICU 与完整语言资源。生产 metafile 显示，两者分别包含约 33,596 字节的 FormatJS 压缩代码；语言 JSON 分别约为 17,332 / 54,997 字节，表单未混入可选表格引擎。这些是 gzip 前的压缩产物归因参考，不能与上表的 gzip 数值直接相加。结合新增能力，将两项 JS 上限调整为 96 / 88 KiB，保留约 5% 余量；表单 CSS 因选择器、分页与服务布局调整，从 14 KiB 调整到 14.5 KiB。Button、原生 Table 和整库 JS / CSS 上限保持原值，继续检查普通入口不包含可选 TanStack Table 引擎。
+
+独立组件 CSS 现在自动包含共享 foundation，Button / 原生 Table 的 CSS 与 0.5.0 的独立组件测量口径不同；Button 保留原有 4.25 KiB 组件预算，并单独计入共享 foundation。构建诊断及原始失败保存在根目录 `.quality/release-0.6.0/`，逐模块报告位于 `packages/react/.quality/release-0.6.0/`；这些忽略目录不进入发布包。
+
 ## Tailwind CSS 配置与主题变量复用（2026-10-16）
 
 新增 `@ifhover/leaf-ui/tailwind`（Tailwind 3 preset，ESM / CommonJS 与声明）和 `@ifhover/leaf-ui/tailwind.css`（Tailwind 4 的 `@theme inline`）。两个入口从同一份语义变量映射生成，覆盖颜色、圆角、间距、密度、控件高度、字体、阴影、动效和层级，不依赖 Tailwind 运行时。preset 只扩展主题，保留应用默认配置；官方 Tailwind 3 `Config` 类型可直接接受。指南在中英文“个性化”导航中提供版本配置、工具类、Preflight、透明度、扫描、Portal 和静态断点边界；Tailwind 3 使用完整颜色变量，不支持颜色透明度修饰符，Tailwind 4 沿用原生修饰符。
diff --git a/packages/react/scripts/measure-bundle.mjs b/packages/react/scripts/measure-bundle.mjs
index 78764e6..b597516 100644
--- a/packages/react/scripts/measure-bundle.mjs
+++ b/packages/react/scripts/measure-bundle.mjs
@@ -63,7 +63,7 @@ for (const [name, code] of Object.entries(cases)) {
   if (name === 'table')
     assert.ok(report.cases[name].js.gzip < 14 * 1024, 'Native Table JS exceeds 14 KiB gzip');
   if (name === 'tableAdapter')
-    assert.ok(report.cases[name].js.gzip < 80 * 1024, 'Table adapter JS exceeds 80 KiB gzip');
+    assert.ok(report.cases[name].js.gzip < 96 * 1024, 'Table adapter JS exceeds 96 KiB gzip');
   if (name === 'button') {
     const css = await readFile(path.join(output, `${name}.css`), 'utf8');
     assert.match(css, /\.leaf-button/);
@@ -83,12 +83,14 @@ for (const [name, code] of Object.entries(cases)) {
     );
   }
 }
-assert.ok(report.cases.form.js.gzip < 64 * 1024, 'Form JS regression: over 64 KiB gzip');
+// 0.6 includes ICU messages and five built-in languages; see QUALITY.md for
+// measured 0.5/0.6 comparisons and the retained optional-engine boundaries.
+assert.ok(report.cases.form.js.gzip < 88 * 1024, 'Form JS regression: over 88 KiB gzip');
 // This fixture now includes the shared base and all API feedback services;
 // the previous standalone-import fixture omitted their CSS.
 assert.ok(
-  report.cases.form.css.gzip < 14 * 1024,
-  'Form + services CSS regression: over 14 KiB gzip',
+  report.cases.form.css.gzip < 14.5 * 1024,
+  'Form + services CSS regression: over 14.5 KiB gzip',
 );
 assert.ok(report.cases.all.js.gzip < 250 * 1024, 'Library JS regression: over 250 KiB gzip');
 // Static light/dark derived palettes and inherited density add ~2.6 KiB to the full CSS.

From 6d6ad0316c3732e151cff4b8af4b37765fdb93fc Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 05:39:13 +0800
Subject: [PATCH 08/13] chore(release): prepare 0.6.0 with bilingual migration
 notes

---
 apps/docs/docs/changelog.md    | 26 ++++++++++++++++++++++++++
 apps/docs/docs/en/changelog.md | 26 ++++++++++++++++++++++++++
 packages/react/package.json    |  2 +-
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/apps/docs/docs/changelog.md b/apps/docs/docs/changelog.md
index 209f62c..a0bb882 100644
--- a/apps/docs/docs/changelog.md
+++ b/apps/docs/docs/changelog.md
@@ -7,6 +7,32 @@ footer: false
 
 记录每个 npm 版本的新增功能、体验改进与问题修复。
 
+## 0.6.0 - 2026-10-16
+
+### 新增
+
+- `ConfigProvider.components` 为公开组件、复合组件部件及 Confirm API 提供区域默认参数。实例优先于内层、外层配置；`undefined` 继承，组件配置项的 `null` 清除继承。配置更新保留非受控值、DOM、焦点与表单语义。
+- 多语言配置支持 BCP 47 语言代码、显式回退链和自定义 `translations` JSON，内置简体中文、繁体中文、英文、日文与韩文。动态文案支持 ICU 变量与复数，提供翻译类型、JSON Schema、五种语言资源及 `leaf-ui-check-translations` 检查命令。
+- 新增 `Flex` 布局组件，以及 Tailwind CSS 3 preset `@ifhover/leaf-ui/tailwind` 和 Tailwind CSS 4 主题入口 `@ifhover/leaf-ui/tailwind.css`，复用区域颜色、尺寸、间距与动效变量。
+- Card 新增大尺寸和内嵌 `tabs`；FileList 提供文本、图片列表和图片卡片布局；Pagination 新增 `outline` / `ghost` 外观，`showTotal` 支持直接显示本地化总数。
+
+### 改进与修复
+
+- 默认控件高度统一为 36px，小、大尺寸为 30px / 42px，紧凑密度以 30px 为基准；表单、日期时间面板、虚拟列表估算和卡片式 Tabs 同步尺寸规则。
+- 浏览器入口自动加载共享基础样式与使用到的组件样式，无需手动导入 CSS；保留不加载 CSS 的 Node 入口与完整静态样式入口，并完善 Next.js、TanStack Start 与服务端渲染说明。
+- 统一选择器的中性候选背景、多选标签换行与折叠、菜单和 Tab 圆角、卡片层次、无边框标签及分页反馈。Tabs 内容立即切换，选中指示器保留移动动效。
+- 修复 FormField 校验后首次输入丢失、Tabs 选中文字未跟随主题色、TreeSelect 展开状态与选项点击、选择器重开光标和窄屏多选布局等问题。
+- 修复分页快速跳转与点击其他分页操作相互覆盖、页码和每页条数重复回调的问题；内部按钮与输入控件不再被其他公开组件的区域默认参数误改为提交、只读或禁用。
+- 重整中英文介绍、快速开始、主题、多语言、API 参考与基础示例；新增组件筛选、主题配色和包管理器偏好记忆，改善桌面、窄屏、深色外观与源码展开体验。
+
+### 迁移说明
+
+- 本次 `0.x` 次版本包含 API 与默认外观变化，升级前请检查以下项目。
+- 移除 `ConfigProvider.messages`、`textMessages` 和 `LeafMessages` 类型，改用按语言代码组织的 `translations` 及 `LeafTranslation` / `LeafTranslations`。语言回退需要在 `locale` 数组中显式列出，最终回退到内置英文。
+- 移除 `ImageCropper`、`SignaturePad`、相关类型及组件与样式子路径。需要图片裁剪或签名时，在应用中接入相应专用依赖。
+- Card 移除 `hoverable`；Tag 移除 `variant="outline"`，改用默认的 `soft` 或 `solid`。Pagination 默认使用带边框的按钮，原来的无边框外观可设置 `variant="ghost"`。
+- 如需保留 0.5.0 的基础控件高度，在 `ConfigProvider` 中设置 `theme={{ controlHeight: 40 }}`；需要自行管理 SSR 样式时继续使用 `@ifhover/leaf-ui/styles/all.css`。
+
 ## 0.5.0 - 2026-10-12
 
 ### 新增
diff --git a/apps/docs/docs/en/changelog.md b/apps/docs/docs/en/changelog.md
index 186f34a..7e68445 100644
--- a/apps/docs/docs/en/changelog.md
+++ b/apps/docs/docs/en/changelog.md
@@ -7,6 +7,32 @@ footer: false
 
 Features, improvements and fixes included in each npm release.
 
+## 0.6.0 - 2026-10-16
+
+### Added
+
+- `ConfigProvider.components` supplies scoped defaults for public components, compound parts and the Confirm API. Instance props override inner and outer scopes; `undefined` inherits and a `null` component entry clears inherited defaults. Configuration updates preserve uncontrolled values, DOM identity, focus and form semantics.
+- BCP 47 language tags, explicit fallback chains and custom `translations` JSON, with built-in Simplified Chinese, Traditional Chinese, English, Japanese and Korean. Variable sentences support ICU arguments and plurals. Translation types, JSON Schema, all five resource files and the `leaf-ui-check-translations` CLI are available.
+- A public `Flex` layout component, the Tailwind CSS 3 preset `@ifhover/leaf-ui/tailwind` and the Tailwind CSS 4 theme entry `@ifhover/leaf-ui/tailwind.css`, sharing regional colors, sizing, spacing and motion variables.
+- Card adds a large size and integrated `tabs`; FileList supports text, picture and picture-card layouts; Pagination adds `outline` / `ghost` appearances and a boolean `showTotal` for localized totals.
+
+### Improved and fixed
+
+- Default controls use a 36px height, with 30px / 42px small and large sizes and a 30px compact baseline. Forms, date and time panels, virtual-row estimates and card Tabs follow the same sizing rules.
+- Browser entries automatically load shared foundation and used component styles, without a manual CSS import. CSS-free Node entries and the complete static stylesheet remain available, with expanded Next.js, TanStack Start and server-rendering guidance.
+- Consistent neutral candidate feedback, wrapped and collapsed selection tags, Menu and Tabs corners, card surfaces, borderless tags and pagination feedback. Tab content switches immediately while selection indicators retain their movement.
+- Fixed the first input being lost after FormField validation, selected Tab text ignoring the theme color, TreeSelect expansion and option activation, reopened selector carets and narrow multi-selection layouts.
+- Fixed quick jumps overriding another pagination action and duplicate page / page-size callbacks. Internal controls no longer inherit unrelated public component defaults that accidentally change submission, read-only or disabled behavior.
+- Reworked bilingual introductions, getting started, theming, internationalization, API references and focused examples. Component filtering, persisted theme and package-manager preferences, narrow and dark layouts, and source expansion improve documentation browsing.
+
+### Migration
+
+- This `0.x` minor release includes API and default appearance changes. Review the following before upgrading.
+- `ConfigProvider.messages`, `textMessages` and `LeafMessages` are removed. Use language-indexed `translations` with `LeafTranslation` / `LeafTranslations`. List language fallbacks explicitly in the `locale` array; the final fallback is built-in English.
+- `ImageCropper`, `SignaturePad`, their types and component / stylesheet subpaths are removed. Integrate a dedicated dependency in the application when cropping or signing is required.
+- Card removes `hoverable`. Tag removes `variant="outline"`; use the default `soft` or `solid`. Pagination now uses outlined controls by default; set `variant="ghost"` to retain borderless controls.
+- Set `theme={{ controlHeight: 40 }}` through `ConfigProvider` to retain the 0.5.0 control-height baseline. Continue using `@ifhover/leaf-ui/styles/all.css` when managing SSR styles explicitly.
+
 ## 0.5.0 - 2026-10-12
 
 ### Added
diff --git a/packages/react/package.json b/packages/react/package.json
index f2637b8..1cb17d0 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ifhover/leaf-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A lightweight React component library with CSS variable theming.",
   "homepage": "https://ifhover.github.io/leaf-ui/",
   "repository": {

From 8ae08aecc0b058f1cd7d0349b7df4b8f61edcf72 Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 05:44:32 +0800
Subject: [PATCH 09/13] test: isolate list opacity regression and record
 release validation

---
 packages/react/QUALITY.md                   |  8 ++++++++
 packages/react/tests/browser/motion.spec.ts | 10 ++++++++++
 2 files changed, 18 insertions(+)

diff --git a/packages/react/QUALITY.md b/packages/react/QUALITY.md
index 528cbe3..13aa696 100644
--- a/packages/react/QUALITY.md
+++ b/packages/react/QUALITY.md
@@ -18,6 +18,14 @@
 
 独立组件 CSS 现在自动包含共享 foundation，Button / 原生 Table 的 CSS 与 0.5.0 的独立组件测量口径不同；Button 保留原有 4.25 KiB 组件预算，并单独计入共享 foundation。构建诊断及原始失败保存在根目录 `.quality/release-0.6.0/`，逐模块报告位于 `packages/react/.quality/release-0.6.0/`；这些忽略目录不进入发布包。
 
+### 发布候选验证
+
+`pnpm check` 完整通过：62 个组件测试文件 / 418 项测试、13 项发布规则、23 项文档 / Tailwind 和 9 项 Skill 检查，以及全仓格式和类型检查。`pnpm build` 通过 ESM / CommonJS、SSR、84 个公共 JS 子路径与全部 CSS 入口、自动样式、双语文档和 200 个 AI Markdown 页面验证；实际 `measure:bundle` 在上述预算下通过。actionlint、工作流格式和差异检查通过。并行构建时两项翻译脚本曾触发 5 秒超时，构建结束后的完整重跑通过，原始日志保留。
+
+本地 Chromium / WebKit 的联系人校验布局与中断重排四项定向复验通过。修复联系人示例的换行布局；文件重排回归改为按文件名定位，并在夹具中显式配置非默认透明度，避免依赖已调整的内部键值和状态外观，同时保留重排中断连续性、自然布局及透明度断言。Windows 全量浏览器运行在 Linux 完整 CI 启动后停止，不能将其记作一次全量通过。
+
+实际生产文档在 Chromium 中完成中英文、1440px / 375px、深浅外观的八组验收，覆盖联系人校验 / 添加 / 移动 / 对齐、源码一致性 / 展开 / 复制 / 收起、0.6.0 更新记录与区域 Tailwind 主题；无页面、预览横向溢出或脚本错误。已查看中文桌面、英文窄屏深色表单和深色 Tailwind 截图。首次构建发现 MDX 缓存保留旧的文件引用源码，使用新生产缓存重建后预览、展示、复制与源文件一致。日志、JSON 和截图位于根目录 `.quality/release-0.6.0/`。本段是发布前验证，npm 与正式文档状态以最终发布核对为准。
+
 ## Tailwind CSS 配置与主题变量复用（2026-10-16）
 
 新增 `@ifhover/leaf-ui/tailwind`（Tailwind 3 preset，ESM / CommonJS 与声明）和 `@ifhover/leaf-ui/tailwind.css`（Tailwind 4 的 `@theme inline`）。两个入口从同一份语义变量映射生成，覆盖颜色、圆角、间距、密度、控件高度、字体、阴影、动效和层级，不依赖 Tailwind 运行时。preset 只扩展主题，保留应用默认配置；官方 Tailwind 3 `Config` 类型可直接接受。指南在中英文“个性化”导航中提供版本配置、工具类、Preflight、透明度、扫描、Portal 和静态断点边界；Tailwind 3 使用完整颜色变量，不支持颜色透明度修饰符，Tailwind 4 沿用原生修饰符。
diff --git a/packages/react/tests/browser/motion.spec.ts b/packages/react/tests/browser/motion.spec.ts
index 01723bc..d2c32d8 100644
--- a/packages/react/tests/browser/motion.spec.ts
+++ b/packages/react/tests/browser/motion.spec.ts
@@ -227,6 +227,15 @@ test('a second row reorder starts from the running visual position and settles t
   page,
 }) => {
   await page.goto('/?fixture=motion');
+  // Exercise a non-default natural opacity independently of FileList status styling.
+  await page.addStyleTag({
+    content: '[data-testid="animated-files"] li[data-status="cancelled"] { opacity: 0.65; }',
+  });
+  const alphaFile = page
+    .getByTestId('animated-files')
+    .getByRole('listitem')
+    .filter({ has: page.getByTitle('Alpha.txt', { exact: true }) });
+  await expect(alphaFile).toHaveCSS('opacity', '0.65');
   const row = page
     .getByRole('list', { name: 'Animated rows' })
     .locator('li')
@@ -303,6 +312,7 @@ test('a second row reorder starts from the running visual position and settles t
     )
     .toBeLessThan(1);
   await expect(row).toHaveCSS('translate', 'none');
+  await expect(alphaFile).toHaveCSS('opacity', '0.65');
   await expect(page.getByRole('list', { name: 'Animated rows' }).locator('li')).toHaveText([
     'Beta',
     'Alpha',

From 8df4610de7e6bb692ffb8696e6133052547bd7e9 Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 05:54:43 +0800
Subject: [PATCH 10/13] test: diagnose portal density and compare tab offsets
 numerically

---
 packages/react/tests/browser/surfaces.spec.ts | 22 +++++++++++++++----
 .../react/tests/browser/tabs-geometry.spec.ts |  9 ++++----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/react/tests/browser/surfaces.spec.ts b/packages/react/tests/browser/surfaces.spec.ts
index b59736c..cbe5b80 100644
--- a/packages/react/tests/browser/surfaces.spec.ts
+++ b/packages/react/tests/browser/surfaces.spec.ts
@@ -165,10 +165,24 @@ test('theme settings reach portalled section surfaces and dense choices', async
   const footer = dialog.locator('.leaf-modal__footer');
   const color = await footer.evaluate((element) => getComputedStyle(element).backgroundColor);
   expect(color).not.toBe('rgb(246, 246, 247)');
-  await expect(dialog.getByRole('button', { name: 'Save access', exact: true })).toHaveCSS(
-    'min-height',
-    '30px',
-  );
+  await expect
+    .poll(() =>
+      dialog.getByRole('button', { name: 'Save access', exact: true }).evaluate((node) => {
+        const css = getComputedStyle(node);
+        const portal = node.closest('.leaf-portal-scope');
+        return {
+          minHeight: css.minHeight,
+          controlHeight: css.getPropertyValue('--leaf-control-height').trim(),
+          currentHeight: css.getPropertyValue('--leaf-current-control-height').trim(),
+          buttonHeight: css.getPropertyValue('--leaf-button-height').trim(),
+          componentHeight: css.getPropertyValue('--leaf-component-button-height').trim(),
+          portalHeight: portal
+            ? getComputedStyle(portal).getPropertyValue('--leaf-control-height').trim()
+            : '',
+        };
+      }),
+    )
+    .toMatchObject({ minHeight: '30px', controlHeight: '30px', currentHeight: '30px' });
 });
 
 test('long modal content scrolls through Scrollbar without moving the heading or actions', async ({
diff --git a/packages/react/tests/browser/tabs-geometry.spec.ts b/packages/react/tests/browser/tabs-geometry.spec.ts
index 03ba21c..b42635a 100644
--- a/packages/react/tests/browser/tabs-geometry.spec.ts
+++ b/packages/react/tests/browser/tabs-geometry.spec.ts
@@ -39,7 +39,7 @@ for (const direction of ['ltr', 'rtl']) {
       });
       await expectAligned(root);
       const localX = await marker.evaluate((node) =>
-        node.style.getPropertyValue('--leaf-indicator-x'),
+        Number.parseFloat(node.style.getPropertyValue('--leaf-indicator-x')),
       );
       await list.evaluate((node, rtl) => {
         node.scrollLeft = rtl ? -40 : 40;
@@ -48,9 +48,10 @@ for (const direction of ['ltr', 'rtl']) {
         .poll(() => list.evaluate((node) => node.scrollLeft))
         .toBe(direction === 'rtl' ? -40 : 40);
       await expectAligned(root);
-      expect(
-        await marker.evaluate((node) => node.style.getPropertyValue('--leaf-indicator-x')),
-      ).toBe(localX);
+      const scrolledX = await marker.evaluate((node) =>
+        Number.parseFloat(node.style.getPropertyValue('--leaf-indicator-x')),
+      );
+      expect(Math.abs(scrolledX - localX)).toBeLessThan(0.001);
 
       for (const name of ['A longer second tab', 'Third', 'First']) {
         await root.getByRole('tab', { name, exact: true }).click();

From 6f6536e4d8e200a7cd957d8e4a5bd15cce49f619 Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 06:03:32 +0800
Subject: [PATCH 11/13] fix(portal): copy inherited variables from the owning
 element

---
 .github/workflows/quality.yml               | 2 ++
 packages/react/src/shared/scoped-portal.tsx | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/quality.yml b/.github/workflows/quality.yml
index 6e20443..efc0657 100644
--- a/.github/workflows/quality.yml
+++ b/.github/workflows/quality.yml
@@ -31,6 +31,7 @@ jobs:
         with:
           name: production-bundles
           path: packages/react/.quality
+          include-hidden-files: true
 
   react-compatibility:
     runs-on: ubuntu-latest
@@ -71,6 +72,7 @@ jobs:
         if: always()
         with:
           name: browser-${{ matrix.browser }}
+          include-hidden-files: true
           path: |
             packages/react/playwright-report
             packages/react/test-results
diff --git a/packages/react/src/shared/scoped-portal.tsx b/packages/react/src/shared/scoped-portal.tsx
index ebf221d..acd0c89 100644
--- a/packages/react/src/shared/scoped-portal.tsx
+++ b/packages/react/src/shared/scoped-portal.tsx
@@ -19,7 +19,9 @@ export function ScopedPortal({
     const node = anchor.current;
     if (!node) return;
     const sync = () => {
-      const computed = getComputedStyle(node);
+      // Read the owning element; hidden markers can omit inherited custom
+      // properties from computed-style enumeration in Firefox.
+      const computed = getComputedStyle(composedParent(node) ?? node);
       const next: LeafThemeStyle = {
         colorScheme: computed.colorScheme,
         direction: computed.direction as LeafThemeStyle['direction'],

From 301407fa4fc5a4ce341f33d3aa5f1444787f3101 Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 06:11:08 +0800
Subject: [PATCH 12/13] fix(portal): include inherited inline scope keys when
 copying variables

---
 packages/react/src/shared/scoped-portal.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/shared/scoped-portal.tsx b/packages/react/src/shared/scoped-portal.tsx
index acd0c89..6ca9612 100644
--- a/packages/react/src/shared/scoped-portal.tsx
+++ b/packages/react/src/shared/scoped-portal.tsx
@@ -26,10 +26,24 @@ export function ScopedPortal({
         colorScheme: computed.colorScheme,
         direction: computed.direction as LeafThemeStyle['direction'],
       };
+      const keys = new Set<string>();
       for (let i = 0; i < computed.length; i++) {
         const key = computed.item(i);
-        if (key.startsWith('--leaf-'))
-          next[key as `--leaf-${string}`] = computed.getPropertyValue(key);
+        if (key.startsWith('--leaf-')) keys.add(key);
+      }
+      // Some engines do not enumerate every inherited custom property. Include
+      // inline scope keys, then read their effective values at the source.
+      let owner = composedParent(node);
+      while (owner) {
+        for (let i = 0; i < owner.style.length; i++) {
+          const key = owner.style.item(i);
+          if (key.startsWith('--leaf-')) keys.add(key);
+        }
+        owner = composedParent(owner);
+      }
+      for (const key of keys) {
+        const value = computed.getPropertyValue(key);
+        if (value.trim()) next[key as `--leaf-${string}`] = value;
       }
       setStyle(next);
     };

From 335c60bf49c2efaaa0b3e97aac716a7d4e19157d Mon Sep 17 00:00:00 2001
From: sudden3 <ifhover@gmail.com>
Date: Fri, 16 Oct 2026 06:11:40 +0800
Subject: [PATCH 13/13] test: assert source and portal density together

---
 packages/react/tests/browser/surfaces.spec.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/react/tests/browser/surfaces.spec.ts b/packages/react/tests/browser/surfaces.spec.ts
index cbe5b80..619dbd8 100644
--- a/packages/react/tests/browser/surfaces.spec.ts
+++ b/packages/react/tests/browser/surfaces.spec.ts
@@ -179,10 +179,19 @@ test('theme settings reach portalled section surfaces and dense choices', async
           portalHeight: portal
             ? getComputedStyle(portal).getPropertyValue('--leaf-control-height').trim()
             : '',
+          scopeHeights: [...document.querySelectorAll('.surface-fixture [data-leaf-scope]')].map(
+            (scope) => getComputedStyle(scope).getPropertyValue('--leaf-control-height').trim(),
+          ),
         };
       }),
     )
-    .toMatchObject({ minHeight: '30px', controlHeight: '30px', currentHeight: '30px' });
+    .toMatchObject({
+      minHeight: '30px',
+      controlHeight: '30px',
+      currentHeight: '30px',
+      portalHeight: '30px',
+      scopeHeights: ['30px'],
+    });
 });
 
 test('long modal content scrolls through Scrollbar without moving the heading or actions', async ({